diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..3d104ac
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,42 @@
+# Dependencies (reinstalled in container)
+node_modules
+**/node_modules
+
+# Build outputs
+.next
+**/dist
+**/.turbo
+
+# Git
+.git
+.gitignore
+
+# Dev tooling
+.vscode
+.idea
+*.swp
+*.swo
+
+# Environment files (injected at runtime)
+.env
+.env.*
+!.env.example
+
+# Test artifacts
+coverage
+**/coverage
+e2e-results
+playwright-report
+
+# Docker files (avoid recursive context)
+Dockerfile*
+docker-compose*
+
+# Documentation
+docs
+*.md
+!packages/*/README.md
+
+# OS files
+.DS_Store
+Thumbs.db
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..7e3ba3b
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,33 @@
+version: 2
+
+updates:
+  # npm dependencies (pnpm monorepo — root handles workspaces)
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 10
+    groups:
+      minor-and-patch:
+        update-types:
+          - minor
+          - patch
+    labels:
+      - dependencies
+
+  # GitHub Actions
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    groups:
+      actions-minor-patch:
+        update-types:
+          - minor
+          - patch
+    labels:
+      - dependencies
+      - ci
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..b0c644c
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,271 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: "20"
+  PNPM_VERSION: "9.14.2"
+
+jobs:
+  # ──────────────────────────────────────────────
+  # Typecheck — ~40s, no services needed
+  # ──────────────────────────────────────────────
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Prisma client
+        run: pnpm --filter @planarchy/db exec prisma generate
+
+      - name: Cache Turborepo
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: turbo-typecheck-${{ github.sha }}
+          restore-keys: turbo-typecheck-
+
+      - name: Run typecheck
+        run: pnpm --filter @planarchy/web exec tsc --noEmit
+
+  # ──────────────────────────────────────────────
+  # Lint — ~20s, no services needed
+  # ──────────────────────────────────────────────
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Prisma client
+        run: pnpm --filter @planarchy/db exec prisma generate
+
+      - name: Cache Turborepo
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: turbo-lint-${{ github.sha }}
+          restore-keys: turbo-lint-
+
+      - name: Run lint
+        run: pnpm lint
+
+  # ──────────────────────────────────────────────
+  # Unit tests — needs PostgreSQL + Redis
+  # ──────────────────────────────────────────────
+  test:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_DB: planarchy_test
+          POSTGRES_USER: planarchy
+          POSTGRES_PASSWORD: planarchy_test
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd="pg_isready -U planarchy -d planarchy_test"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+      redis:
+        image: redis:7
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd="redis-cli ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+    env:
+      DATABASE_URL: postgresql://planarchy:planarchy_test@localhost:5432/planarchy_test
+      REDIS_URL: redis://localhost:6379
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Prisma client
+        run: pnpm --filter @planarchy/db exec prisma generate
+
+      - name: Run unit tests with coverage
+        run: |
+          pnpm --filter @planarchy/engine exec vitest run --coverage
+          pnpm --filter @planarchy/staffing exec vitest run --coverage
+          pnpm --filter @planarchy/api exec vitest run --coverage
+          pnpm --filter @planarchy/application exec vitest run --coverage
+          pnpm --filter @planarchy/shared exec vitest run --coverage
+          pnpm --filter @planarchy/db test:unit
+
+  # ──────────────────────────────────────────────
+  # Build — depends on typecheck passing
+  # ──────────────────────────────────────────────
+  build:
+    name: Build
+    needs: [typecheck]
+    runs-on: ubuntu-latest
+    env:
+      DATABASE_URL: postgresql://placeholder:placeholder@localhost:5432/placeholder
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Prisma client
+        run: pnpm --filter @planarchy/db exec prisma generate
+
+      - name: Cache Turborepo
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: turbo-build-${{ github.sha }}
+          restore-keys: turbo-build-
+
+      - name: Cache Next.js build
+        uses: actions/cache@v4
+        with:
+          path: apps/web/.next/cache
+          key: nextjs-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }}
+          restore-keys: nextjs-${{ hashFiles('pnpm-lock.yaml') }}-
+
+      - name: Build
+        run: pnpm --filter @planarchy/web exec next build
+
+  # ──────────────────────────────────────────────
+  # E2E — depends on build, needs PostgreSQL + Redis
+  # ──────────────────────────────────────────────
+  e2e:
+    name: E2E Tests
+    needs: [build]
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_DB: planarchy_test
+          POSTGRES_USER: planarchy
+          POSTGRES_PASSWORD: planarchy_test
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd="pg_isready -U planarchy -d planarchy_test"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+      redis:
+        image: redis:7
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd="redis-cli ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+    env:
+      DATABASE_URL: postgresql://planarchy:planarchy_test@localhost:5432/planarchy_test
+      REDIS_URL: redis://localhost:6379
+      PORT: 3100
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Prisma client
+        run: pnpm --filter @planarchy/db exec prisma generate
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('apps/web/package.json') }}
+          restore-keys: playwright-
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm --filter @planarchy/web exec playwright install --with-deps chromium
+
+      - name: Install Playwright system deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: pnpm --filter @planarchy/web exec playwright install-deps chromium
+
+      - name: Push DB schema & seed
+        run: |
+          pnpm db:push
+          pnpm db:seed
+
+      - name: Run E2E tests
+        run: pnpm test:e2e
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: apps/web/playwright-report/
+          retention-days: 14
diff --git a/Dockerfile.prod b/Dockerfile.prod
new file mode 100644
index 0000000..4894f3d
--- /dev/null
+++ b/Dockerfile.prod
@@ -0,0 +1,80 @@
+# ============================================================
+# Stage 1: Install dependencies
+# ============================================================
+FROM node:20-bookworm-slim AS deps
+
+RUN apt-get update -y && apt-get install -y openssl && rm -rf /var/lib/apt/lists/*
+RUN npm install -g pnpm@9.14.2
+
+WORKDIR /app
+
+# Copy workspace manifests first for better layer caching
+COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
+COPY tooling/ ./tooling/
+COPY packages/shared/package.json ./packages/shared/
+COPY packages/db/package.json ./packages/db/
+COPY packages/engine/package.json ./packages/engine/
+COPY packages/staffing/package.json ./packages/staffing/
+COPY packages/application/package.json ./packages/application/
+COPY packages/api/package.json ./packages/api/
+COPY packages/ui/package.json ./packages/ui/
+COPY apps/web/package.json ./apps/web/
+
+RUN pnpm install --frozen-lockfile
+
+# ============================================================
+# Stage 2: Build the application
+# ============================================================
+FROM node:20-bookworm-slim AS builder
+
+RUN apt-get update -y && apt-get install -y openssl && rm -rf /var/lib/apt/lists/*
+RUN npm install -g pnpm@9.14.2
+
+WORKDIR /app
+
+# Copy installed dependencies from stage 1
+COPY --from=deps /app/ ./
+
+# Copy all source code
+COPY . .
+
+# Generate Prisma client
+RUN pnpm --filter @planarchy/db db:generate
+
+# Build the Next.js application
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+RUN pnpm --filter @planarchy/web build
+
+# ============================================================
+# Stage 3: Production runtime
+# ============================================================
+FROM node:20-bookworm-slim AS runner
+
+RUN apt-get update -y && apt-get install -y openssl curl && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV HOSTNAME=0.0.0.0
+ENV PORT=3000
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy the standalone output (includes server.js and node_modules)
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+
+# Copy static assets and public files
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+
+USER nextjs
+
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
+  CMD curl -f http://localhost:3000/api/health || exit 1
+
+CMD ["node", "apps/web/server.js"]
diff --git a/apps/web/e2e/admin.spec.ts b/apps/web/e2e/admin.spec.ts
new file mode 100644
index 0000000..5f15fd1
--- /dev/null
+++ b/apps/web/e2e/admin.spec.ts
@@ -0,0 +1,52 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Admin Pages", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+  });
+
+  test("settings page loads", async ({ page }) => {
+    await page.goto("/admin/settings");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1", { hasText: /System Settings/i })).toBeVisible({ timeout: 10000 });
+  });
+
+  test("users page loads with user list", async ({ page }) => {
+    await page.goto("/admin/users");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1", { hasText: /User Management/i })).toBeVisible({ timeout: 10000 });
+    // Should show a table with at least the admin user
+    await expect(page.locator("table")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator("text=admin@planarchy.dev")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("roles page loads", async ({ page }) => {
+    await page.goto("/roles");
+    await page.waitForLoadState("networkidle");
+    await expect(
+      page.locator("h1").filter({ hasText: /Roles/i }),
+    ).toBeVisible({ timeout: 10000 });
+    // Should show table or list of roles
+    await expect(
+      page.locator("table").or(page.locator("text=No roles")),
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("blueprints page loads", async ({ page }) => {
+    await page.goto("/admin/blueprints");
+    await page.waitForLoadState("networkidle");
+    await expect(
+      page.locator("h1").filter({ hasText: /Blueprints/i }),
+    ).toBeVisible({ timeout: 10000 });
+    // Should show blueprint cards or list from seed data
+    await expect(
+      page.locator("table")
+        .or(page.locator("text=3D Content Production"))
+        .or(page.locator("text=No blueprints")),
+    ).toBeVisible({ timeout: 10000 });
+  });
+});
diff --git a/apps/web/e2e/allocations.spec.ts b/apps/web/e2e/allocations.spec.ts
new file mode 100644
index 0000000..de5320b
--- /dev/null
+++ b/apps/web/e2e/allocations.spec.ts
@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Allocations", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+    await page.goto("/allocations");
+  });
+
+  test("allocation list loads with table", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // The page title should be visible
+    await expect(
+      page.locator("h1").filter({ hasText: /Allocations|Planning/i }),
+    ).toBeVisible({ timeout: 10000 });
+    // Table or empty state should be present
+    await expect(
+      page.locator("table").or(page.locator("text=No allocations")),
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("new planning entry modal opens", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    const newBtn = page.locator("button", { hasText: /New Planning Entry/i });
+    await expect(newBtn).toBeVisible({ timeout: 10000 });
+    await newBtn.click();
+    // Modal should appear with form fields
+    await expect(
+      page.locator("[role='dialog']").or(page.locator("text=Create").or(page.locator("text=Project"))),
+    ).toBeVisible({ timeout: 5000 });
+    await page.keyboard.press("Escape");
+  });
+
+  test("filter by status works", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // Look for status filter chips or dropdown
+    const statusFilter = page.locator("button", { hasText: /Proposed|Confirmed|Active|Status/i }).first();
+    if ((await statusFilter.count()) > 0) {
+      await statusFilter.click();
+      await page.waitForTimeout(300);
+      // After clicking a status filter, the page should still show the table
+      await expect(
+        page.locator("table").or(page.locator("text=No allocations")),
+      ).toBeVisible();
+    }
+  });
+
+  test("column toggle panel works", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    const colToggle = page.locator("button", { hasText: /Columns/i });
+    if ((await colToggle.count()) > 0) {
+      await colToggle.click();
+      await page.waitForTimeout(300);
+      // A panel or dropdown with column checkboxes should appear
+      await expect(
+        page.locator("input[type='checkbox']").first(),
+      ).toBeVisible({ timeout: 3000 });
+      await page.keyboard.press("Escape");
+    }
+  });
+});
diff --git a/apps/web/e2e/dashboard.spec.ts b/apps/web/e2e/dashboard.spec.ts
new file mode 100644
index 0000000..798b5b8
--- /dev/null
+++ b/apps/web/e2e/dashboard.spec.ts
@@ -0,0 +1,46 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Dashboard", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+    await page.goto("/dashboard");
+  });
+
+  test("loads with widget grid", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // Dashboard should render the react-grid-layout container
+    await expect(page.locator(".react-grid-layout")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("shows at least one widget", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // Each widget is wrapped in a WidgetContainer inside the grid
+    const widgets = page.locator(".react-grid-item");
+    await expect(widgets.first()).toBeVisible({ timeout: 10000 });
+    const count = await widgets.count();
+    expect(count).toBeGreaterThanOrEqual(1);
+  });
+
+  test("add widget modal opens and closes", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // Look for the "Add Widget" button
+    const addBtn = page.locator("button", { hasText: /Add Widget/i });
+    if ((await addBtn.count()) > 0) {
+      await addBtn.click();
+      await expect(page.locator("text=Add Widget").or(page.locator("text=Available Widgets"))).toBeVisible();
+      await page.keyboard.press("Escape");
+    }
+  });
+
+  test("reset layout button is available", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    const resetBtn = page.locator("button", { hasText: /Reset Layout/i });
+    if ((await resetBtn.count()) > 0) {
+      await expect(resetBtn).toBeVisible();
+    }
+  });
+});
diff --git a/apps/web/e2e/estimates.spec.ts b/apps/web/e2e/estimates.spec.ts
new file mode 100644
index 0000000..b1c4e58
--- /dev/null
+++ b/apps/web/e2e/estimates.spec.ts
@@ -0,0 +1,78 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Estimates", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+    await page.goto("/estimates");
+  });
+
+  test("estimate list loads", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    await expect(
+      page.locator("h1").filter({ hasText: /Estimates/i }),
+    ).toBeVisible({ timeout: 10000 });
+    // Should show either a table/list or an empty state
+    await expect(
+      page.locator("table").or(page.locator("text=No estimates")).or(page.locator("[data-estimate-id]")),
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("new estimate wizard opens with setup step", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    const newBtn = page.locator("button", { hasText: /New Estimate/i });
+    await expect(newBtn).toBeVisible({ timeout: 10000 });
+    await newBtn.click();
+    // Wizard step 1 should appear: "Setup"
+    await expect(
+      page.locator("text=Setup").or(page.locator("text=Estimate Name")),
+    ).toBeVisible({ timeout: 5000 });
+  });
+
+  test("estimate wizard navigates through steps", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    await page.locator("button", { hasText: /New Estimate/i }).click();
+
+    // Step 1: Setup — fill a name
+    await expect(page.locator("text=Setup")).toBeVisible({ timeout: 5000 });
+    const nameInput = page.locator('input[placeholder*="name"]').or(page.locator('input[name="name"]')).first();
+    if ((await nameInput.count()) > 0) {
+      await nameInput.fill(`E2E Estimate ${Date.now()}`);
+    }
+
+    // Click Next to go to step 2
+    const nextBtn = page.locator("button", { hasText: "Next" });
+    if ((await nextBtn.count()) > 0) {
+      await nextBtn.click();
+      await page.waitForTimeout(500);
+      // Step 2: Assumptions
+      await expect(
+        page.locator("text=Assumptions").or(page.locator("text=Scope")),
+      ).toBeVisible({ timeout: 5000 });
+    }
+
+    // Close the wizard without completing
+    const cancelBtn = page.locator("button", { hasText: /Cancel|Close/i }).first();
+    if ((await cancelBtn.count()) > 0) {
+      await cancelBtn.click();
+    } else {
+      await page.keyboard.press("Escape");
+    }
+  });
+
+  test("estimate wizard shows all step labels", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    await page.locator("button", { hasText: /New Estimate/i }).click();
+
+    // The wizard header should show step labels
+    const steps = ["Setup", "Assumptions", "Scope", "Staffing", "Review"];
+    for (const step of steps) {
+      await expect(page.locator(`text=${step}`).first()).toBeVisible({ timeout: 5000 });
+    }
+
+    await page.keyboard.press("Escape");
+  });
+});
diff --git a/apps/web/e2e/navigation.spec.ts b/apps/web/e2e/navigation.spec.ts
new file mode 100644
index 0000000..1db8faf
--- /dev/null
+++ b/apps/web/e2e/navigation.spec.ts
@@ -0,0 +1,99 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Navigation", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+  });
+
+  test("main nav links navigate correctly", async ({ page }) => {
+    const navRoutes = [
+      { label: "Dashboard", url: "/dashboard" },
+      { label: "Timeline", url: "/timeline" },
+      { label: "Allocations", url: "/allocations" },
+      { label: "Resources", url: "/resources" },
+      { label: "Projects", url: "/projects" },
+    ];
+
+    for (const route of navRoutes) {
+      const navLink = page.locator(`nav a >> text="${route.label}"`).first();
+      await navLink.click();
+      await page.waitForLoadState("networkidle");
+      await expect(page).toHaveURL(new RegExp(route.url));
+    }
+  });
+
+  test("sidebar collapse and expand works", async ({ page }) => {
+    await page.goto("/dashboard");
+    await page.waitForLoadState("networkidle");
+
+    // Find the collapse button (contains "Collapse" text)
+    const collapseBtn = page.locator("nav button", { hasText: "Collapse" });
+    if ((await collapseBtn.count()) > 0) {
+      await collapseBtn.click();
+      await page.waitForTimeout(300);
+      // After collapsing, the sidebar should be narrow (72px)
+      const nav = page.locator("nav").first();
+      const box = await nav.boundingBox();
+      if (box) {
+        expect(box.width).toBeLessThan(100);
+      }
+
+      // Expand again — the button should still be visible as an icon
+      const expandBtn = page.locator("nav button").filter({ has: page.locator("svg") }).last();
+      await expandBtn.click();
+      await page.waitForTimeout(300);
+      const boxExpanded = await nav.boundingBox();
+      if (boxExpanded) {
+        expect(boxExpanded.width).toBeGreaterThan(200);
+      }
+    }
+  });
+
+  test("preferences modal opens via sidebar button", async ({ page }) => {
+    await page.goto("/dashboard");
+    await page.waitForLoadState("networkidle");
+
+    const prefsBtn = page.locator("nav button", { hasText: "Preferences" });
+    if ((await prefsBtn.count()) > 0) {
+      await prefsBtn.click();
+      await expect(page.locator("text=Preferences")).toBeVisible({ timeout: 5000 });
+      // Should show theme/mode controls
+      await expect(
+        page.locator("text=Light").or(page.locator("text=Dark").or(page.locator("text=System"))),
+      ).toBeVisible();
+      // Close the modal
+      await page.keyboard.press("Escape");
+    }
+  });
+
+  test("mobile hamburger menu opens sidebar on small viewport", async ({ page }) => {
+    // Set a mobile viewport size
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto("/dashboard");
+    await page.waitForLoadState("networkidle");
+
+    // The hamburger button should be visible on mobile
+    const hamburgerBtn = page.locator("button").filter({ has: page.locator("svg") }).first();
+    await expect(hamburgerBtn).toBeVisible({ timeout: 5000 });
+
+    await hamburgerBtn.click();
+    await page.waitForTimeout(300);
+
+    // Mobile sidebar overlay should appear with nav links
+    await expect(page.locator("text=Dashboard")).toBeVisible();
+    await expect(page.locator("text=Timeline")).toBeVisible();
+
+    // Close button should be visible in mobile sidebar
+    const closeBtn = page
+      .locator("nav button")
+      .filter({ has: page.locator("svg") })
+      .first();
+    if ((await closeBtn.count()) > 0) {
+      await closeBtn.click();
+    }
+  });
+});
diff --git a/apps/web/e2e/staffing.spec.ts b/apps/web/e2e/staffing.spec.ts
new file mode 100644
index 0000000..d38049c
--- /dev/null
+++ b/apps/web/e2e/staffing.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Staffing", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/auth/signin");
+    await page.fill('input[type="email"]', "admin@planarchy.dev");
+    await page.fill('input[type="password"]', "admin123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+    await page.goto("/staffing");
+  });
+
+  test("staffing page loads with search form", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1", { hasText: /Staffing Suggestions/i })).toBeVisible({ timeout: 10000 });
+    // Search form should have skill input, date fields, and a search button
+    await expect(page.locator("text=How scoring works")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("search form has default skill tags", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // The StaffingPanel pre-populates with TypeScript and React skill tags
+    await expect(
+      page.locator("text=TypeScript").or(page.locator("text=React")),
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("submitting search returns suggestions or empty state", async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    // Click the search/submit button
+    const searchBtn = page.locator("button", { hasText: /Search|Find|Suggest/i }).first();
+    await expect(searchBtn).toBeVisible({ timeout: 10000 });
+    await searchBtn.click();
+    await page.waitForTimeout(1000);
+    // After search, should show either suggestion cards or a "no suggestions" message
+    await expect(
+      page.locator("text=/Score|Availability|No suggestions|No matching/i").first()
+        .or(page.locator("[data-suggestion]").first())
+        .or(page.locator("table").first()),
+    ).toBeVisible({ timeout: 15000 });
+  });
+});
diff --git a/apps/web/e2e/vacations.spec.ts b/apps/web/e2e/vacations.spec.ts
new file mode 100644
index 0000000..b5e7bc9
--- /dev/null
+++ b/apps/web/e2e/vacations.spec.ts
@@ -0,0 +1,73 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Vacations", () => {
+  test.describe("My Vacations (self-service)", () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto("/auth/signin");
+      await page.fill('input[type="email"]', "admin@planarchy.dev");
+      await page.fill('input[type="password"]', "admin123");
+      await page.click('button[type="submit"]');
+      await expect(page).toHaveURL(/\/(dashboard|resources)/);
+      await page.goto("/vacations/my");
+    });
+
+    test("my vacations page loads", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      await expect(page.locator("h1", { hasText: "My Vacations" })).toBeVisible({ timeout: 10000 });
+    });
+
+    test("request vacation button is visible", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      await expect(
+        page.locator("button", { hasText: /Request Vacation/i }),
+      ).toBeVisible({ timeout: 10000 });
+    });
+
+    test("request vacation modal opens", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      const reqBtn = page.locator("button", { hasText: /Request Vacation/i });
+      await reqBtn.click();
+      // Modal should show vacation form
+      await expect(
+        page.locator("text=Request Vacation").or(page.locator("text=Vacation Type")),
+      ).toBeVisible({ timeout: 5000 });
+      await page.keyboard.press("Escape");
+    });
+  });
+
+  test.describe("Vacation Management", () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto("/auth/signin");
+      await page.fill('input[type="email"]', "admin@planarchy.dev");
+      await page.fill('input[type="password"]', "admin123");
+      await page.click('button[type="submit"]');
+      await expect(page).toHaveURL(/\/(dashboard|resources)/);
+      await page.goto("/vacations");
+    });
+
+    test("vacation management page loads with tabs", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      // Should show List and Team Calendar tabs
+      await expect(page.locator("text=List").first()).toBeVisible({ timeout: 10000 });
+      await expect(page.locator("text=Team Calendar").first()).toBeVisible({ timeout: 10000 });
+    });
+
+    test("team calendar tab renders", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      await page.locator("button", { hasText: "Team Calendar" }).or(page.locator("text=Team Calendar")).first().click();
+      await page.waitForTimeout(500);
+      // Calendar view should appear
+      await expect(
+        page.locator("table").or(page.locator("[data-calendar]")).or(page.locator("text=Mon").or(page.locator("text=Week"))),
+      ).toBeVisible({ timeout: 10000 });
+    });
+
+    test("filter chips are visible on list tab", async ({ page }) => {
+      await page.waitForLoadState("networkidle");
+      // Status filter options should be visible
+      await expect(
+        page.locator("button", { hasText: /All|Pending|Approved/i }).first(),
+      ).toBeVisible({ timeout: 10000 });
+    });
+  });
+});
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 49e369a..8ee077a 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -1,7 +1,12 @@
 import path from "path";
 import type { NextConfig } from "next";
+import { withSentryConfig } from "@sentry/nextjs";
 
 const nextConfig: NextConfig = {
+  output: "standalone",
+  experimental: {
+    optimizePackageImports: ["recharts", "date-fns"],
+  },
   transpilePackages: [
     "@planarchy/api",
     "@planarchy/db",
@@ -40,4 +45,10 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  silent: true,
+  sourcemaps: {
+    disable: true,
+  },
+  telemetry: false,
+});
diff --git a/apps/web/package.json b/apps/web/package.json
index 01f61df..6d38115 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,12 +19,14 @@
     "@planarchy/shared": "workspace:*",
     "@planarchy/ui": "workspace:*",
     "@react-pdf/renderer": "^4.3.2",
+    "@sentry/nextjs": "^10.45.0",
     "@tanstack/react-query": "^5.62.16",
     "@tanstack/react-virtual": "^3.13.21",
     "@trpc/client": "^11.0.0",
     "@trpc/react-query": "^11.0.0",
     "@trpc/server": "^11.0.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
     "next": "^15.1.7",
     "next-auth": "^5.0.0-beta.25",
     "react": "^19.0.0",
diff --git a/apps/web/public/icon-192.png b/apps/web/public/icon-192.png
new file mode 100644
index 0000000..a3ae1e1
Binary files /dev/null and b/apps/web/public/icon-192.png differ
diff --git a/apps/web/public/icon-512.png b/apps/web/public/icon-512.png
new file mode 100644
index 0000000..4d234ff
Binary files /dev/null and b/apps/web/public/icon-512.png differ
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
new file mode 100644
index 0000000..858c56e
--- /dev/null
+++ b/apps/web/public/manifest.json
@@ -0,0 +1,14 @@
+{
+  "name": "Planarchy — Resource Planning",
+  "short_name": "Planarchy",
+  "description": "Resource planning and project staffing for 3D production",
+  "start_url": "/dashboard",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0284c7",
+  "orientation": "any",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
+  ]
+}
diff --git a/apps/web/public/og-image.png b/apps/web/public/og-image.png
new file mode 100644
index 0000000..0ff5257
Binary files /dev/null and b/apps/web/public/og-image.png differ
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
new file mode 100644
index 0000000..e52a98b
--- /dev/null
+++ b/apps/web/public/sw.js
@@ -0,0 +1,128 @@
+/// <reference lib="webworker" />
+
+const CACHE_NAME = "planarchy-v1";
+const STATIC_EXTENSIONS = /\.(js|css|png|jpg|jpeg|svg|gif|ico|woff2?|ttf|eot)$/;
+
+// Offline fallback page (simple inline HTML)
+const OFFLINE_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Planarchy — Offline</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      display: flex; align-items: center; justify-content: center;
+      min-height: 100vh; background: #f8fafc; color: #334155;
+    }
+    .container { text-align: center; padding: 2rem; }
+    h1 { font-size: 1.5rem; margin-bottom: 0.75rem; color: #0284c7; }
+    p { font-size: 1rem; margin-bottom: 1.5rem; color: #64748b; }
+    button {
+      padding: 0.625rem 1.5rem; border: none; border-radius: 0.5rem;
+      background: #0284c7; color: white; font-size: 0.875rem;
+      cursor: pointer; transition: background 0.2s;
+    }
+    button:hover { background: #0369a1; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>You are offline</h1>
+    <p>Planarchy requires an internet connection. Please check your network and try again.</p>
+    <button onclick="location.reload()">Retry</button>
+  </div>
+</body>
+</html>`;
+
+// Install: pre-cache the offline fallback
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.put(
+        new Request("/_offline"),
+        new Response(OFFLINE_HTML, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        })
+      );
+    })
+  );
+  // Activate immediately
+  self.skipWaiting();
+});
+
+// Activate: clean up old caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME)
+          .map((key) => caches.delete(key))
+      )
+    )
+  );
+  // Take control of all clients immediately
+  self.clients.claim();
+});
+
+// Fetch: strategy depends on request type
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip non-GET requests
+  if (request.method !== "GET") return;
+
+  // Skip chrome-extension, ws, etc.
+  if (!url.protocol.startsWith("http")) return;
+
+  // API calls and tRPC: network-first
+  if (url.pathname.startsWith("/api/")) {
+    event.respondWith(
+      fetch(request).catch(() => {
+        return new Response(
+          JSON.stringify({ error: "offline" }),
+          {
+            status: 503,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      })
+    );
+    return;
+  }
+
+  // Static assets: cache-first
+  if (STATIC_EXTENSIONS.test(url.pathname) || url.pathname.startsWith("/_next/static/")) {
+    event.respondWith(
+      caches.match(request).then((cached) => {
+        if (cached) return cached;
+        return fetch(request).then((response) => {
+          // Only cache successful responses
+          if (response.ok) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+          }
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
+  // Navigation requests: network-first with offline fallback
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request).catch(() => caches.match("/_offline"))
+    );
+    return;
+  }
+
+  // Everything else: network-first, silent fail
+  event.respondWith(
+    fetch(request).catch(() => caches.match(request))
+  );
+});
diff --git a/apps/web/sentry.client.config.ts b/apps/web/sentry.client.config.ts
new file mode 100644
index 0000000..ad82954
--- /dev/null
+++ b/apps/web/sentry.client.config.ts
@@ -0,0 +1,9 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  replaysSessionSampleRate: 0,
+  replaysOnErrorSampleRate: 1.0,
+  enabled: !!process.env.NEXT_PUBLIC_SENTRY_DSN,
+});
diff --git a/apps/web/sentry.edge.config.ts b/apps/web/sentry.edge.config.ts
new file mode 100644
index 0000000..ef064cb
--- /dev/null
+++ b/apps/web/sentry.edge.config.ts
@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  enabled: !!process.env.NEXT_PUBLIC_SENTRY_DSN,
+});
diff --git a/apps/web/sentry.server.config.ts b/apps/web/sentry.server.config.ts
new file mode 100644
index 0000000..ef064cb
--- /dev/null
+++ b/apps/web/sentry.server.config.ts
@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  enabled: !!process.env.NEXT_PUBLIC_SENTRY_DSN,
+});
diff --git a/apps/web/src/app/(app)/admin/notifications/page.tsx b/apps/web/src/app/(app)/admin/notifications/page.tsx
new file mode 100644
index 0000000..b17ec22
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/notifications/page.tsx
@@ -0,0 +1,5 @@
+import { BroadcastManagementClient } from "~/components/notifications/BroadcastManagementClient.js";
+
+export default function AdminNotificationsPage() {
+  return <BroadcastManagementClient />;
+}
diff --git a/apps/web/src/app/(app)/admin/system-roles/page.tsx b/apps/web/src/app/(app)/admin/system-roles/page.tsx
new file mode 100644
index 0000000..913370f
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/system-roles/page.tsx
@@ -0,0 +1,21 @@
+import dynamic from "next/dynamic";
+
+const SystemRolesClient = dynamic(
+  () => import("~/components/admin/SystemRolesClient.js").then((m) => m.SystemRolesClient),
+  {
+    loading: () => (
+      <div className="p-6 space-y-4 max-w-4xl mx-auto">
+        <div className="h-8 w-48 shimmer-skeleton rounded" />
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-24 w-full shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
+          ))}
+        </div>
+      </div>
+    ),
+  },
+);
+
+export default function SystemRolesPage() {
+  return <SystemRolesClient />;
+}
diff --git a/apps/web/src/app/(app)/admin/vacations/page.tsx b/apps/web/src/app/(app)/admin/vacations/page.tsx
index 8037834..fdf5a96 100644
--- a/apps/web/src/app/(app)/admin/vacations/page.tsx
+++ b/apps/web/src/app/(app)/admin/vacations/page.tsx
@@ -1,7 +1,7 @@
 import { PublicHolidayBatch } from "~/components/vacations/PublicHolidayBatch.js";
 import { EntitlementManager } from "~/components/vacations/EntitlementManager.js";
 
-export const metadata = { title: "Vacation Management — Planarchy" };
+export const metadata = { title: "Vacation Management — plANARCHY" };
 
 export default function AdminVacationsPage() {
   return (
diff --git a/apps/web/src/app/(app)/admin/webhooks/page.tsx b/apps/web/src/app/(app)/admin/webhooks/page.tsx
new file mode 100644
index 0000000..48961c1
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/webhooks/page.tsx
@@ -0,0 +1,5 @@
+import { WebhooksClient } from "~/components/admin/WebhooksClient.js";
+
+export default function AdminWebhooksPage() {
+  return <WebhooksClient />;
+}
diff --git a/apps/web/src/app/(app)/allocations/loading.tsx b/apps/web/src/app/(app)/allocations/loading.tsx
index 320fd49..102fbb5 100644
--- a/apps/web/src/app/(app)/allocations/loading.tsx
+++ b/apps/web/src/app/(app)/allocations/loading.tsx
@@ -1,43 +1,43 @@
 export default function AllocationsLoading() {
   return (
-    <div className="flex flex-col h-full gap-4 animate-pulse">
+    <div className="flex flex-col h-full gap-4">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <div className="h-7 w-36 bg-gray-200 dark:bg-gray-700 rounded" />
-        <div className="h-9 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        <div className="h-7 w-36 shimmer-skeleton rounded" />
+        <div className="h-9 w-32 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Filter bar */}
       <div className="flex gap-2">
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Table */}
       <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
         {/* Header */}
         <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-          <div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
+          <div className="h-3 w-4 shimmer-skeleton rounded" />
+          <div className="h-3 w-28 shimmer-skeleton rounded" />
+          <div className="h-3 flex-1 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
         </div>
         {/* Rows */}
         {[...Array(10)].map((_, i) => (
-          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
-            <div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-28 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
+          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
+            <div className="h-4 w-4 shimmer-skeleton rounded" />
+            <div className="h-3 w-28 shimmer-skeleton rounded" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-5 w-20 shimmer-skeleton rounded-full" />
           </div>
         ))}
       </div>
diff --git a/apps/web/src/app/(app)/allocations/page.tsx b/apps/web/src/app/(app)/allocations/page.tsx
index 54fd548..d2cd713 100644
--- a/apps/web/src/app/(app)/allocations/page.tsx
+++ b/apps/web/src/app/(app)/allocations/page.tsx
@@ -1,4 +1,21 @@
-import { AllocationsClient } from "~/components/allocations/AllocationsClient.js";
+import dynamic from "next/dynamic";
+
+const AllocationsClient = dynamic(
+  () => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient),
+  {
+    loading: () => (
+      <div className="p-6 space-y-4">
+        <div className="h-8 w-48 shimmer-skeleton rounded" />
+        <div className="h-10 w-full shimmer-skeleton rounded" />
+        <div className="space-y-2">
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="h-12 w-full shimmer-skeleton rounded animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
+          ))}
+        </div>
+      </div>
+    ),
+  },
+);
 
 export default function AllocationsPage() {
   return <AllocationsClient />;
diff --git a/apps/web/src/app/(app)/analytics/computation-graph/page.tsx b/apps/web/src/app/(app)/analytics/computation-graph/page.tsx
new file mode 100644
index 0000000..8938d91
--- /dev/null
+++ b/apps/web/src/app/(app)/analytics/computation-graph/page.tsx
@@ -0,0 +1,5 @@
+import ComputationGraphClient from "~/components/analytics/ComputationGraphClient";
+
+export default function ComputationGraphPage() {
+  return <ComputationGraphClient />;
+}
diff --git a/apps/web/src/app/(app)/analytics/insights/page.tsx b/apps/web/src/app/(app)/analytics/insights/page.tsx
new file mode 100644
index 0000000..afa268b
--- /dev/null
+++ b/apps/web/src/app/(app)/analytics/insights/page.tsx
@@ -0,0 +1,17 @@
+import { InsightsPanel } from "~/components/analytics/InsightsPanel.js";
+
+export default function InsightsPage() {
+  return (
+    <div className="mx-auto max-w-5xl space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">
+          AI Insights
+        </h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          Anomaly detection and AI-generated project narratives
+        </p>
+      </div>
+      <InsightsPanel />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx b/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx
new file mode 100644
index 0000000..57f5ef0
--- /dev/null
+++ b/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx
@@ -0,0 +1,5 @@
+import { SkillMarketplace } from "~/components/analytics/SkillMarketplace.js";
+
+export default function SkillMarketplacePage() {
+  return <SkillMarketplace />;
+}
diff --git a/apps/web/src/app/(app)/estimates/EstimatesClient.tsx b/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
index a145fc1..d92e1ac 100644
--- a/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
+++ b/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { EstimateStatus, type EstimateVersionStatus } from "@planarchy/shared";
 import { clsx } from "clsx";
 import { EstimateWizard } from "~/components/estimates/EstimateWizard.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
 import { formatDateLong, formatMoney } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
@@ -69,18 +70,18 @@ type EstimateDetail = {
 };
 
 const STATUS_STYLES: Record<EstimateStatus, string> = {
-  DRAFT: "bg-slate-100 text-slate-700",
-  IN_REVIEW: "bg-amber-100 text-amber-700",
-  APPROVED: "bg-emerald-100 text-emerald-700",
-  ARCHIVED: "bg-zinc-200 text-zinc-700",
+  DRAFT: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  IN_REVIEW: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  ARCHIVED: "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
 
 const VERSION_STYLES: Record<EstimateVersionStatus, string> = {
-  WORKING: "bg-sky-100 text-sky-700",
-  BASELINE: "bg-violet-100 text-violet-700",
-  SUBMITTED: "bg-amber-100 text-amber-700",
-  APPROVED: "bg-emerald-100 text-emerald-700",
-  SUPERSEDED: "bg-zinc-200 text-zinc-700",
+  WORKING: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
+  BASELINE: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
+  SUBMITTED: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  SUPERSEDED: "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
 
 function formatMetricValue(metric: EstimateMetric) {
@@ -121,7 +122,7 @@ function EstimateDetailPanel({
       <div className="flex items-start justify-between gap-4">
         <div>
           <p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">
-            Estimate detail
+            Estimate detail <InfoTooltip content="Pre-project cost and effort calculation. Estimates model staffing demand, scope, and financials before work begins." />
           </p>
           <h2 className="mt-2 text-xl font-semibold text-gray-900 dark:text-gray-50">
             {estimate.name}
@@ -145,7 +146,7 @@ function EstimateDetailPanel({
       <div className="mt-4 flex gap-2">
         <Link
           href={`/estimates/${estimate.id}`}
-          className="inline-flex items-center justify-center rounded-2xl border border-brand-200 bg-brand-50 px-4 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-100"
+          className="inline-flex items-center justify-center rounded-2xl border border-brand-200 dark:border-sky-700 bg-brand-50 dark:bg-sky-950/40 px-4 py-2 text-sm font-semibold text-brand-700 dark:text-sky-300 transition hover:border-brand-300 dark:hover:border-sky-600 hover:bg-brand-100 dark:hover:bg-sky-900/40"
         >
           Open workspace
         </Link>
@@ -164,7 +165,7 @@ function EstimateDetailPanel({
       {latestVersion ? (
         <>
           <div className="mt-5 flex items-center gap-2">
-            <span className="text-sm font-medium text-gray-700">
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
               Version {latestVersion.versionNumber}
               {latestVersion.label ? ` - ${latestVersion.label}` : ""}
             </span>
@@ -205,13 +206,13 @@ function EstimateDetailPanel({
             <section>
               <div className="flex items-center justify-between">
                 <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                  Scope items
+                  Scope items <InfoTooltip content="Deliverables or work packages that define what is included in this estimate." />
                 </h3>
                 <span className="text-xs text-gray-400">{latestVersion.scopeItems.length}</span>
               </div>
               <div className="mt-3 space-y-2">
                 {latestVersion.scopeItems.length === 0 ? (
-                  <p className="rounded-2xl border border-dashed border-gray-200 px-4 py-3 text-sm text-gray-400">
+                  <p className="rounded-2xl border border-dashed border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-400">
                     No scope rows captured yet.
                   </p>
                 ) : (
@@ -238,13 +239,13 @@ function EstimateDetailPanel({
             <section>
               <div className="flex items-center justify-between">
                 <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                  Demand lines
+                  Demand lines <InfoTooltip content="Staffing demand rows. Each line represents a role or resource with hours, cost rate, and sell rate." />
                 </h3>
                 <span className="text-xs text-gray-400">{latestVersion.demandLines.length}</span>
               </div>
               <div className="mt-3 space-y-2">
                 {latestVersion.demandLines.length === 0 ? (
-                  <p className="rounded-2xl border border-dashed border-gray-200 px-4 py-3 text-sm text-gray-400">
+                  <p className="rounded-2xl border border-dashed border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-400">
                     No staffing demand captured yet.
                   </p>
                 ) : (
@@ -272,7 +273,7 @@ function EstimateDetailPanel({
           </div>
         </>
       ) : (
-        <p className="mt-6 rounded-2xl border border-dashed border-gray-200 px-4 py-6 text-sm text-gray-400">
+        <p className="mt-6 rounded-2xl border border-dashed border-gray-200 dark:border-gray-700 px-4 py-6 text-sm text-gray-400">
           No versions available for this estimate yet.
         </p>
       )}
@@ -301,8 +302,8 @@ function EstimateCard({
       className={clsx(
         "w-full rounded-3xl border p-5 text-left transition",
         active
-          ? "border-brand-500 bg-brand-50 shadow-sm dark:bg-brand-950/30"
-          : "border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-gray-700",
+          ? "border-brand-500 bg-brand-50 shadow-sm dark:border-sky-400 dark:bg-sky-950/30"
+          : "border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600",
         !canInspect && "cursor-default",
       )}
     >
@@ -318,7 +319,7 @@ function EstimateCard({
               {estimate.status.replace("_", " ")}
             </span>
             {estimate.project && (
-              <span className="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600">
+              <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-400">
                 {estimate.project.shortCode}
               </span>
             )}
@@ -344,13 +345,13 @@ function EstimateCard({
 
       <div className="mt-5 grid gap-3 sm:grid-cols-2">
         <div>
-          <p className="text-xs uppercase tracking-wide text-gray-400">Opportunity</p>
+          <p className="text-xs uppercase tracking-wide text-gray-400">Opportunity <InfoTooltip content="External CRM or sales reference ID linking this estimate to a sales opportunity." /></p>
           <p className="mt-1 text-sm text-gray-700 dark:text-gray-200">
             {estimate.opportunityId ?? "Not set"}
           </p>
         </div>
         <div>
-          <p className="text-xs uppercase tracking-wide text-gray-400">Updated</p>
+          <p className="text-xs uppercase tracking-wide text-gray-400">Updated <InfoTooltip content="When this estimate or any of its versions was last modified." /></p>
           <p className="mt-1 text-sm text-gray-700 dark:text-gray-200">
             {formatDateLong(estimate.updatedAt)}
           </p>
@@ -407,7 +408,7 @@ export function EstimatesClient() {
   return (
     <>
       <div className="app-page space-y-6">
-        <div className="app-surface-strong overflow-hidden bg-gradient-to-br from-white via-white to-brand-50 p-6 dark:from-gray-950 dark:via-gray-950 dark:to-brand-950/40">
+        <div className="app-surface-strong overflow-hidden bg-gradient-to-br from-white via-white to-brand-50 p-6 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
           <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
             <div>
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">
@@ -465,7 +466,7 @@ export function EstimatesClient() {
               No estimates yet
             </p>
             <p className="mt-2 text-sm text-gray-400 dark:text-gray-500">
-              Start with the wizard to create a connected estimate from Planarchy data.
+              Start with the wizard to create a connected estimate from plANARCHY data.
             </p>
           </div>
         ) : (
diff --git a/apps/web/src/app/(app)/loading.tsx b/apps/web/src/app/(app)/loading.tsx
index 1e9d8df..9e332c7 100644
--- a/apps/web/src/app/(app)/loading.tsx
+++ b/apps/web/src/app/(app)/loading.tsx
@@ -1,15 +1,15 @@
 export default function AppLoading() {
   return (
-    <div className="p-6 space-y-4 animate-pulse">
-      <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48" />
-      <div className="h-4 bg-gray-100 dark:bg-gray-800 rounded w-72" />
+    <div className="p-6 space-y-4">
+      <div className="h-8 shimmer-skeleton rounded w-48" />
+      <div className="h-4 shimmer-skeleton rounded w-72" />
       <div className="grid grid-cols-4 gap-4 mt-4">
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="h-20 bg-gray-100 dark:bg-gray-800 rounded-xl" />
+          <div key={i} className="h-20 shimmer-skeleton rounded-xl" style={{ animationDelay: `${i * 50}ms` }} />
         ))}
       </div>
-      <div className="h-64 bg-gray-100 dark:bg-gray-800 rounded-xl" />
-      <div className="h-48 bg-gray-100 dark:bg-gray-800 rounded-xl" />
+      <div className="h-64 shimmer-skeleton rounded-xl" />
+      <div className="h-48 shimmer-skeleton rounded-xl" />
     </div>
   );
 }
diff --git a/apps/web/src/app/(app)/notifications/page.tsx b/apps/web/src/app/(app)/notifications/page.tsx
new file mode 100644
index 0000000..ef11f83
--- /dev/null
+++ b/apps/web/src/app/(app)/notifications/page.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import { NotificationCenterClient } from "~/components/notifications/NotificationCenterClient.js";
+
+export default function NotificationsPage() {
+  return (
+    <Suspense>
+      <NotificationCenterClient />
+    </Suspense>
+  );
+}
diff --git a/apps/web/src/app/(app)/projects/ProjectsClient.tsx b/apps/web/src/app/(app)/projects/ProjectsClient.tsx
index 8b650fe..6f99a20 100644
--- a/apps/web/src/app/(app)/projects/ProjectsClient.tsx
+++ b/apps/web/src/app/(app)/projects/ProjectsClient.tsx
@@ -2,12 +2,15 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
-import { formatDate } from "~/lib/format.js";
+import { formatDate, formatMoney } from "~/lib/format.js";
 import type { Project, ColumnDef } from "@planarchy/shared";
 import { ProjectStatus, PROJECT_COLUMNS, BlueprintTarget } from "@planarchy/shared";
 import Link from "next/link";
+import Image from "next/image";
 import { clsx } from "clsx";
+import { motion } from "framer-motion";
 import { trpc } from "~/lib/trpc/client.js";
+import { generateCsv, downloadCsv } from "~/lib/csv-export.js";
 import { ProjectModal } from "~/components/projects/ProjectModal.js";
 import { ProjectWizard } from "~/components/projects/ProjectWizard.js";
 import { useSelection } from "~/hooks/useSelection.js";
@@ -59,7 +62,7 @@ function BudgetBar({ utilizationPercent, budgetCents }: { utilizationPercent: nu
   return (
     <div className="min-w-[104px] space-y-1">
       <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200/80 dark:bg-gray-700/80">
-        <div className={clsx("h-full rounded-full transition-all", barColor)} style={{ width: `${cappedPercent}%` }} />
+        <div className={clsx("h-full rounded-full transition-all duration-700 ease-out", barColor)} style={{ width: `${cappedPercent}%` }} />
       </div>
       <div className="text-xs text-gray-500">{utilizationPercent.toFixed(0)}% used</div>
     </div>
@@ -116,9 +119,12 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
         </svg>
       </button>
       {isOpen && createPortal(
-        <div
+        <motion.div
           ref={panelRef}
-          className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+          initial={{ opacity: 0, scaleY: 0.9 }}
+          animate={{ opacity: 1, scaleY: 1 }}
+          transition={{ duration: 0.12, ease: "easeOut" }}
+          className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900 origin-top"
           style={{ top: pos.top, left: pos.left }}
         >
           {ALL_STATUSES.map((s) => (
@@ -139,7 +145,7 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
               </span>
             </button>
           ))}
-        </div>,
+        </motion.div>,
         document.body,
       )}
     </>
@@ -162,6 +168,8 @@ interface ProjectRow {
   totalPersonDays: number;
   utilizationPercent: number;
   dynamicFields?: Record<string, unknown> | null;
+  coverImageUrl?: string | null;
+  color?: string | null;
 }
 
 // ─── Main component ───────────────────────────────────────────────────────────
@@ -176,6 +184,7 @@ export function ProjectsClient() {
   const [openStatusProjectId, setOpenStatusProjectId] = useState<string | null>(null);
   const [batchStatusPicker, setBatchStatusPicker] = useState(false);
   const [confirmBatchStatus, setConfirmBatchStatus] = useState<{ ids: string[]; status: string } | null>(null);
+  const [confirmBatchDelete, setConfirmBatchDelete] = useState<string[] | null>(null);
 
   const selection = useSelection();
   const utils = trpc.useUtils();
@@ -188,6 +197,13 @@ export function ProjectsClient() {
     },
   });
 
+  const batchDeleteMutation = trpc.project.batchDelete.useMutation({
+    onSuccess: async () => {
+      await utils.project.listWithCosts.invalidate();
+      selection.clear();
+    },
+  });
+
   // ─── Favorites ──────────────────────────────────────────────────────────
   const { data: favoriteIds } = trpc.user.getFavoriteProjectIds.useQuery(undefined, { staleTime: 30_000 });
   const favSet = useMemo(() => new Set(favoriteIds ?? []), [favoriteIds]);
@@ -329,6 +345,25 @@ export function ProjectsClient() {
   function closeModal() { setModalOpen(false); setEditingProject(null); }
   function clearAll() { setSearch(""); setStatusFilter(""); setOrderTypeFilter(""); }
 
+  const exportSelectedCsv = useCallback(() => {
+    const selected = projects.filter((p) => selection.selectedIds.has(p.id));
+    if (selected.length === 0) return;
+    const csv = generateCsv(selected, [
+      { header: "Short Code", accessor: (p) => p.shortCode },
+      { header: "Name", accessor: (p) => p.name },
+      { header: "Status", accessor: (p) => p.status },
+      { header: "Order Type", accessor: (p) => p.orderType },
+      { header: "Start Date", accessor: (p) => formatDate(p.startDate) },
+      { header: "End Date", accessor: (p) => formatDate(p.endDate) },
+      { header: "Budget (cents)", accessor: (p) => p.budgetCents },
+      { header: "Win Probability", accessor: (p) => p.winProbability },
+      { header: "Total Cost (cents)", accessor: (p) => p.totalCostCents },
+      { header: "Person Days", accessor: (p) => p.totalPersonDays },
+      { header: "Utilization %", accessor: (p) => p.utilizationPercent },
+    ]);
+    downloadCsv(csv, `projects-export-${new Date().toISOString().slice(0, 10)}.csv`);
+  }, [projects, selection.selectedIds]);
+
   const chips = [
     ...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
     ...(statusFilter ? [{ label: `Status: ${statusFilter}`, onRemove: () => setStatusFilter("") }] : []),
@@ -351,8 +386,21 @@ export function ProjectsClient() {
       case "name":
         return (
           <td key={col.key} className="max-w-xs truncate px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100">
-            <Link href={`/projects/${project.id}`} className="transition hover:text-brand-600 hover:underline">
-              {project.name}
+            <Link href={`/projects/${project.id}`} className="inline-flex items-center gap-2 transition hover:text-brand-600 hover:underline">
+              {project.coverImageUrl ? (
+                <Image src={project.coverImageUrl} alt={project.name} width={24} height={24} className="h-6 w-6 flex-shrink-0 rounded object-cover" unoptimized={project.coverImageUrl.startsWith("data:")} />
+              ) : (
+                <span
+                  className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-[9px] font-bold opacity-60"
+                  style={{
+                    backgroundColor: (project.color ?? "#6366f1") + "22",
+                    color: project.color ?? "#6366f1",
+                  }}
+                >
+                  {project.name.split(/\s+/).map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase()}
+                </span>
+              )}
+              <span className="truncate">{project.name}</span>
             </Link>
           </td>
         );
@@ -385,15 +433,24 @@ export function ProjectsClient() {
         return (
           <td key={col.key} className="px-4 py-3 min-w-[120px]">
             <div className="mb-0.5 text-sm text-gray-900 dark:text-gray-100">
-              {(project.budgetCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 0 })} €
+              {formatMoney(project.budgetCents)}
             </div>
             <BudgetBar utilizationPercent={project.utilizationPercent ?? 0} budgetCents={project.budgetCents} />
           </td>
         );
       case "allocations":
         return (
-          <td key={col.key} className="px-4 py-3 text-right text-sm text-gray-600 dark:text-gray-300">
-            {project.totalPersonDays > 0 ? `${project.totalPersonDays}d` : "—"}
+          <td key={col.key} className="px-4 py-3 text-right text-sm">
+            {project.totalPersonDays > 0 ? (
+              <span className="inline-flex items-center gap-1 rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-700 dark:bg-brand-900/30 dark:text-brand-300">
+                <svg className="h-3 w-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                {project.totalPersonDays}d
+              </span>
+            ) : (
+              <span className="text-gray-400 dark:text-gray-500">—</span>
+            )}
           </td>
         );
       case "responsible":
@@ -515,7 +572,7 @@ export function ProjectsClient() {
 
       <div className="app-data-table">
         {isLoading ? (
-          <div className="py-16 text-center text-sm text-gray-500 animate-pulse">Loading projects…</div>
+          <div className="py-16 text-center text-sm text-gray-500 shimmer-skeleton">Loading projects…</div>
         ) : (
           <>
             <div className="overflow-x-auto">
@@ -543,7 +600,7 @@ export function ProjectsClient() {
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
-                  {projects.map((project) => {
+                  {projects.map((project, index) => {
                     const isSelected = selection.selectedIds.has(project.id);
                     return (
                       <DraggableTableRow
@@ -551,7 +608,8 @@ export function ProjectsClient() {
                         id={project.id}
                         dragRef={rowDragRef}
                         onDrop={(draggedId) => reorder(draggedId, project.id)}
-                        className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                        className={`table-row-hover hover-lift hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                        style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
                       >
                         <td className="px-2 py-3 w-8">
                           <button
@@ -577,11 +635,11 @@ export function ProjectsClient() {
                             <button
                               type="button"
                               onClick={() => openEditModal(project as unknown as Project)}
-                              className="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 hover:underline dark:text-gray-300 dark:hover:text-gray-100"
+                              className="link-hover-underline text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
                             >
                               Edit
                             </button>
-                            <Link href={`/projects/${project.id}`} className="text-xs font-medium text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-300 dark:hover:text-blue-200">
+                            <Link href={`/projects/${project.id}`} className="link-hover-underline text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200">
                               View →
                             </Link>
                           </div>
@@ -652,12 +710,34 @@ export function ProjectsClient() {
         />
       )}
 
+      {/* Confirm batch delete */}
+      {confirmBatchDelete && (
+        <ConfirmDialog
+          title="Delete Projects"
+          message={`Permanently delete ${confirmBatchDelete.length} project${confirmBatchDelete.length !== 1 ? "s" : ""}? This will also remove all associated allocations and demands. This action cannot be undone.`}
+          confirmLabel="Delete All"
+          variant="danger"
+          onConfirm={() => {
+            batchDeleteMutation.mutate({ ids: confirmBatchDelete });
+            setConfirmBatchDelete(null);
+          }}
+          onCancel={() => setConfirmBatchDelete(null)}
+        />
+      )}
+
       {/* Batch Action Bar */}
       <BatchActionBar
         count={selection.count}
         onClear={selection.clear}
         actions={[
-          { label: "Set Status…", onClick: () => setBatchStatusPicker(true) },
+          { label: "Export Selected", onClick: exportSelectedCsv },
+          { label: "Set Status...", onClick: () => setBatchStatusPicker(true) },
+          {
+            label: `Delete (${selection.count})`,
+            variant: "danger" as const,
+            onClick: () => setConfirmBatchDelete(selection.selectedArray),
+            disabled: batchDeleteMutation.isPending,
+          },
         ]}
       />
 
diff --git a/apps/web/src/app/(app)/projects/[id]/page.tsx b/apps/web/src/app/(app)/projects/[id]/page.tsx
index 73db05c..38175f1 100644
--- a/apps/web/src/app/(app)/projects/[id]/page.tsx
+++ b/apps/web/src/app/(app)/projects/[id]/page.tsx
@@ -2,11 +2,16 @@ import { notFound } from "next/navigation";
 import { formatDate } from "~/lib/format.js";
 import Link from "next/link";
 import { createCaller } from "~/server/trpc.js";
+import { auth } from "~/server/auth.js";
 import { BudgetStatusCard } from "~/components/projects/BudgetStatusCard.js";
 import { ProjectDetailActions } from "~/components/projects/ProjectDetailClient.js";
 import { ProjectDemandsTable } from "~/components/projects/ProjectDemandsTable.js";
 import { ProjectAssignmentsTable } from "~/components/projects/ProjectAssignmentsTable.js";
 import { PROJECT_STATUS_BADGE as STATUS_COLORS, ORDER_TYPE_BADGE as ORDER_TYPE_COLORS } from "~/lib/status-styles.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { CoverArtSection } from "~/components/projects/CoverArtSection.js";
+
+const EDIT_ROLES = new Set(["ADMIN", "MANAGER"]);
 
 interface ProjectDetailPageProps {
   params: Promise<{ id: string }>;
@@ -14,7 +19,9 @@ interface ProjectDetailPageProps {
 
 export default async function ProjectDetailPage({ params }: ProjectDetailPageProps) {
   const { id } = await params;
-  const trpc = await createCaller();
+  const [trpc, session] = await Promise.all([createCaller(), auth()]);
+  const userRole = (session?.user as { role?: string } | undefined)?.role ?? "USER";
+  const canEditProject = EDIT_ROLES.has(userRole);
 
   let project: Awaited<ReturnType<typeof trpc.project.getById>>;
   try {
@@ -41,8 +48,18 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
         Back to Projects
       </Link>
 
+      {/* Cover Art */}
+      <CoverArtSection
+        projectId={project.id}
+        coverImageUrl={project.coverImageUrl}
+        coverFocusY={project.coverFocusY}
+        projectColor={project.color}
+        projectName={project.name}
+        canEdit={canEditProject}
+      />
+
       {/* Project header */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <div className="bg-white rounded-xl border border-gray-200 p-6 dark:bg-gray-900 dark:border-gray-700">
         <div className="flex items-start justify-between gap-4 mb-4">
           <div>
             <div className="flex items-center gap-3 mb-1">
@@ -50,9 +67,11 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
               <span className={`inline-block px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[project.status] ?? ""}`}>
                 {project.status}
               </span>
+              <InfoTooltip content="Project lifecycle status: DRAFT = not yet visible, ACTIVE = in progress, ON_HOLD = paused, COMPLETED = finished, CANCELLED = abandoned." />
               <span className={`inline-block px-2 py-0.5 text-xs rounded-full ${ORDER_TYPE_COLORS[project.orderType] ?? ""}`}>
                 {project.orderType}
               </span>
+              <InfoTooltip content="BD = Business Development (pre-sales), CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = non-project overhead." />
             </div>
             <h1 className="text-2xl font-bold text-gray-900">{project.name}</h1>
           </div>
@@ -63,38 +82,48 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
                 {" — "}
                 {formatDate(project.endDate)}
               </div>
-              <div className="mt-0.5">Win probability: {project.winProbability}%</div>
+              <div className="mt-0.5 flex items-center">Win probability: {project.winProbability}%<InfoTooltip content="Likelihood of winning this project (0-100%). Used to calculate weighted pipeline value (budget x probability)." /></div>
             </div>
+            <Link
+              href={`/projects/${id}/scenario`}
+              className="inline-flex items-center gap-2 rounded-lg border border-indigo-300 bg-white px-3 py-2 text-sm font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 transition dark:border-indigo-600 dark:bg-gray-800 dark:text-indigo-300 dark:hover:bg-indigo-900/20"
+              title="Open What-If Scenario Planner"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              What-If
+            </Link>
             <ProjectDetailActions project={project as never} />
           </div>
         </div>
 
         <dl className="grid grid-cols-2 gap-x-8 gap-y-3 sm:grid-cols-4 mt-4 pt-4 border-t border-gray-100">
           <div>
-            <dt className="text-xs text-gray-500">Chargecode</dt>
+            <dt className="text-xs text-gray-500 flex items-center">Chargecode<InfoTooltip content="Unique project identifier used for time tracking and cost attribution." /></dt>
             <dd className="mt-0.5 text-sm font-mono font-medium text-gray-900">{project.shortCode}</dd>
           </div>
           <div>
-            <dt className="text-xs text-gray-500">Order Type</dt>
+            <dt className="text-xs text-gray-500 flex items-center">Order Type<InfoTooltip content="BD = Business Development, CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = overhead costs." /></dt>
             <dd className="mt-0.5 text-sm text-gray-900">{project.orderType}</dd>
           </div>
           <div>
-            <dt className="text-xs text-gray-500">Allocation Type</dt>
+            <dt className="text-xs text-gray-500 flex items-center">Allocation Type<InfoTooltip content="INT = staffed with internal resources, EXT = staffed with external contractors." /></dt>
             <dd className="mt-0.5 text-sm text-gray-900">{project.allocationType}</dd>
           </div>
           <div>
-            <dt className="text-xs text-gray-500">Assignments</dt>
+            <dt className="text-xs text-gray-500 flex items-center">Assignments<InfoTooltip content="Number of active resource assignments (confirmed or in-progress allocations) on this project." /></dt>
             <dd className="mt-0.5 text-sm text-gray-900">{activeAssignments.length} active</dd>
           </div>
           <div>
-            <dt className="text-xs text-gray-500">Open Demands</dt>
+            <dt className="text-xs text-gray-500 flex items-center">Open Demands<InfoTooltip content="Staffing requirements that still need resources. Unfilled seats are demand positions not yet assigned to a person." /></dt>
             <dd className="mt-0.5 text-sm text-gray-900">
               {activeDemands.length} items · {unfilledSeats}/{requestedSeats} seats unfilled
             </dd>
           </div>
           {project.responsiblePerson && (
             <div className="sm:col-span-2">
-              <dt className="text-xs text-gray-500">Responsible Person</dt>
+              <dt className="text-xs text-gray-500 flex items-center">Responsible Person<InfoTooltip content="The project lead or account manager responsible for this project." /></dt>
               <dd className="mt-0.5 text-sm font-medium text-gray-900">{project.responsiblePerson}</dd>
             </div>
           )}
diff --git a/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx b/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx
new file mode 100644
index 0000000..2bc0aeb
--- /dev/null
+++ b/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx
@@ -0,0 +1,58 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { createCaller } from "~/server/trpc.js";
+import { ScenarioPlanner } from "~/components/projects/ScenarioPlanner.js";
+
+interface ScenarioPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function ScenarioPage({ params }: ScenarioPageProps) {
+  const { id } = await params;
+  const trpc = await createCaller();
+
+  let baseline: Awaited<ReturnType<typeof trpc.scenario.getProjectBaseline>>;
+  try {
+    baseline = await trpc.scenario.getProjectBaseline({ projectId: id });
+  } catch {
+    notFound();
+  }
+
+  // Load resources and roles for the pickers
+  const [resources, roles] = await Promise.all([
+    trpc.resource.list({ isActive: true }),
+    trpc.role.list({ isActive: true }),
+  ]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto space-y-6">
+      <Link
+        href={`/projects/${id}`}
+        className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-800 transition-colors"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to {baseline.project.name}
+      </Link>
+
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          What-If Scenario Planner
+        </h1>
+        <p className="mt-1 text-sm text-gray-500">
+          Explore alternate staffing configurations for{" "}
+          <span className="font-medium text-gray-700 dark:text-gray-300">{baseline.project.name}</span>{" "}
+          and see instant cost/schedule impact.
+        </p>
+      </div>
+
+      <ScenarioPlanner
+        projectId={id}
+        baseline={baseline}
+        resources={resources as never}
+        roles={roles as never}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(app)/projects/loading.tsx b/apps/web/src/app/(app)/projects/loading.tsx
index 95661b4..315f577 100644
--- a/apps/web/src/app/(app)/projects/loading.tsx
+++ b/apps/web/src/app/(app)/projects/loading.tsx
@@ -1,48 +1,48 @@
 export default function ProjectsLoading() {
   return (
-    <div className="flex flex-col h-full gap-4 animate-pulse">
+    <div className="flex flex-col h-full gap-4">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded" />
-        <div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        <div className="h-7 w-28 shimmer-skeleton rounded" />
+        <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Filter bar */}
       <div className="flex gap-2">
-        <div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-32 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+        <div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-32 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Table */}
       <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
         {/* Header */}
         <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-          <div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-12 bg-gray-300 dark:bg-gray-600 rounded" />
+          <div className="h-3 w-4 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
+          <div className="h-3 flex-1 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
+          <div className="h-3 w-24 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-12 shimmer-skeleton rounded" />
         </div>
         {/* Rows */}
         {[...Array(10)].map((_, i) => (
-          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
-            <div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
-            <div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
+          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
+            <div className="h-4 w-4 shimmer-skeleton rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded font-mono" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-5 w-20 shimmer-skeleton rounded-full" />
+            <div className="h-5 w-16 shimmer-skeleton rounded-full" />
             <div className="flex flex-col gap-1 w-24">
-              <div className="h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full" />
-              <div className="h-2 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
+              <div className="h-2 w-full shimmer-skeleton rounded-full" />
+              <div className="h-2 w-10 shimmer-skeleton rounded" />
             </div>
-            <div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-8 bg-gray-100 dark:bg-gray-800 rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
+            <div className="h-3 w-8 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
diff --git a/apps/web/src/app/(app)/reports/builder/page.tsx b/apps/web/src/app/(app)/reports/builder/page.tsx
new file mode 100644
index 0000000..77ac0c7
--- /dev/null
+++ b/apps/web/src/app/(app)/reports/builder/page.tsx
@@ -0,0 +1,5 @@
+import { ReportBuilder } from "~/components/reports/ReportBuilder.js";
+
+export default function ReportBuilderPage() {
+  return <ReportBuilder />;
+}
diff --git a/apps/web/src/app/(app)/resources/ResourcesClient.tsx b/apps/web/src/app/(app)/resources/ResourcesClient.tsx
index 438f859..6eea6bc 100644
--- a/apps/web/src/app/(app)/resources/ResourcesClient.tsx
+++ b/apps/web/src/app/(app)/resources/ResourcesClient.tsx
@@ -7,9 +7,16 @@ import type { Resource, SkillEntry } from "@planarchy/shared";
 import { RESOURCE_COLUMNS } from "@planarchy/shared";
 import { BlueprintTarget, ResourceType } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { formatMoney } from "~/lib/format.js";
+import { generateCsv, downloadCsv } from "~/lib/csv-export.js";
+import dynamic from "next/dynamic";
 import { ResourceModal } from "~/components/resources/ResourceModal.js";
-import { ImportModal } from "~/components/resources/ImportModal.js";
 import { BulkEditModal } from "~/components/resources/BulkEditModal.js";
+
+const ImportModal = dynamic(
+  () => import("~/components/resources/ImportModal.js").then((mod) => mod.ImportModal),
+  { ssr: false },
+);
 import { useSelection } from "~/hooks/useSelection.js";
 import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
@@ -502,6 +509,22 @@ export function ResourcesClient() {
     return "Departed: no";
   }, [departedFilter]);
 
+  const exportSelectedCsv = useCallback(() => {
+    const selected = displayedResources.filter((r) => selection.selectedIds.has(r.id));
+    if (selected.length === 0) return;
+    const csv = generateCsv(selected, [
+      { header: "EID", accessor: (r) => r.eid },
+      { header: "Name", accessor: (r) => r.displayName },
+      { header: "Email", accessor: (r) => r.email },
+      { header: "Chapter", accessor: (r) => r.chapter ?? "" },
+      { header: "LCR (cents)", accessor: (r) => r.lcrCents },
+      { header: "Currency", accessor: (r) => r.currency },
+      { header: "Chargeability Target", accessor: (r) => r.chargeabilityTarget },
+      { header: "Active", accessor: (r) => r.isActive ? "Yes" : "No" },
+    ]);
+    downloadCsv(csv, `resources-export-${new Date().toISOString().slice(0, 10)}.csv`);
+  }, [displayedResources, selection.selectedIds]);
+
   const chips = [
     ...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
     ...(chapterFilter.length > 0
@@ -936,7 +959,7 @@ export function ResourcesClient() {
       {/* Table */}
       <div className="app-data-table">
         {isLoading && resources.length === 0 ? (
-          <div className="p-12 text-center text-sm text-gray-500 animate-pulse">
+          <div className="p-12 text-center text-sm text-gray-500 shimmer-skeleton">
             Loading resources…
           </div>
         ) : (
@@ -978,7 +1001,7 @@ export function ResourcesClient() {
                             sortField={sortField}
                             sortDir={sortDir}
                             onSort={toggle}
-                            tooltip="Unique employee identifier used across all Planarchy records."
+                            tooltip="Unique employee identifier used across all plANARCHY records."
                           />
                         );
                       case "displayName":
@@ -1096,7 +1119,7 @@ export function ResourcesClient() {
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
-                {displayedResources.map((resource) => {
+                {displayedResources.map((resource, index) => {
                   const skills = resource.skills as unknown as SkillEntry[];
                   const isSelected = selection.selectedIds.has(resource.id);
                   const isDeactivating =
@@ -1113,7 +1136,8 @@ export function ResourcesClient() {
                       id={resource.id}
                       dragRef={rowDragRef}
                       onDrop={(draggedId) => reorder(draggedId, resource.id)}
-                      className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                      className={`table-row-hover hover-lift hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                      style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
                     >
                       <td className="px-4 py-3">
                         <input
@@ -1146,20 +1170,51 @@ export function ResourcesClient() {
                                 {resource.eid}
                               </td>
                             );
-                          case "displayName":
+                          case "displayName": {
+                            const initials = resource.displayName
+                              .split(/\s+/)
+                              .map((w) => w[0])
+                              .filter(Boolean)
+                              .slice(0, 2)
+                              .join("")
+                              .toUpperCase();
+                            const rr =
+                              (
+                                resource as unknown as {
+                                  resourceRoles?: {
+                                    isPrimary: boolean;
+                                    role: { color: string | null };
+                                  }[];
+                                }
+                              ).resourceRoles ?? [];
+                            const primaryRole = rr.find((r) => r.isPrimary);
+                            const avatarColor =
+                              primaryRole?.role.color ??
+                              `hsl(${[...resource.displayName].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360}, 55%, 45%)`;
                             return (
                               <td key={col.key} className="px-4 py-3">
                                 <Link
                                   href={`/resources/${resource.id}`}
-                                  className="text-sm font-medium text-gray-900 transition-colors hover:text-brand-600 hover:underline dark:text-gray-100"
+                                  className="inline-flex items-center gap-2.5 transition-colors hover:text-brand-600 group"
                                 >
-                                  {resource.displayName}
+                                  <span
+                                    className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
+                                    style={{ backgroundColor: avatarColor }}
+                                  >
+                                    {initials}
+                                  </span>
+                                  <span className="min-w-0">
+                                    <span className="block text-sm font-medium text-gray-900 group-hover:text-brand-600 group-hover:underline dark:text-gray-100">
+                                      {resource.displayName}
+                                    </span>
+                                    <span className="block text-xs text-gray-500 dark:text-gray-400">
+                                      {resource.email}
+                                    </span>
+                                  </span>
                                 </Link>
-                                <div className="text-xs text-gray-500 dark:text-gray-400">
-                                  {resource.email}
-                                </div>
                               </td>
                             );
+                          }
                           case "chapter":
                             return (
                               <td
@@ -1175,7 +1230,7 @@ export function ResourcesClient() {
                                 key={col.key}
                                 className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100"
                               >
-                                {(resource.lcrCents / 100).toFixed(0)} {resource.currency}
+                                {formatMoney(resource.lcrCents, resource.currency)}
                               </td>
                             );
                           case "chargeability": {
@@ -1200,8 +1255,20 @@ export function ResourcesClient() {
                                   : actual >= target - 20
                                     ? "text-amber-600 dark:text-amber-300"
                                     : "text-red-600 dark:text-red-300";
+                            // Bar color based on % of target achieved
+                            const barRatio = actual != null && target > 0 ? actual / target : 0;
+                            const barColor =
+                              actual == null
+                                ? "bg-gray-300 dark:bg-gray-600"
+                                : barRatio >= 0.8
+                                  ? "bg-green-500"
+                                  : barRatio >= 0.5
+                                    ? "bg-amber-500"
+                                    : "bg-red-500";
+                            const barWidth = actual != null ? Math.min(actual, 100) : 0;
+                            const isOverflow = actual != null && actual > 100;
                             return (
-                              <td key={col.key} className="px-4 py-3 text-sm">
+                              <td key={col.key} className="px-4 py-3 text-sm min-w-[120px]">
                                 <div>
                                   <span className={`font-medium ${color}`}>
                                     {actual != null ? `${actual}%` : "—"}
@@ -1211,7 +1278,22 @@ export function ResourcesClient() {
                                       ({expected}% exp.)
                                     </span>
                                   )}
-                                  <div className="text-xs text-gray-400">Target: {target}%</div>
+                                  {actual !== target && (
+                                    <div className="text-xs text-gray-400">Target: {target}%</div>
+                                  )}
+                                  {actual != null && (
+                                    <div className="mt-1 flex items-center gap-1">
+                                      <div className="h-[3px] flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                                        <div
+                                          className={`h-full rounded-full transition-all duration-700 ease-out ${barColor}`}
+                                          style={{ width: `${barWidth}%` }}
+                                        />
+                                      </div>
+                                      {isOverflow && (
+                                        <span className="text-[9px] font-bold text-green-600 dark:text-green-400" title={`${actual}% actual`}>+</span>
+                                      )}
+                                    </div>
+                                  )}
                                 </div>
                               </td>
                             );
@@ -1296,7 +1378,7 @@ export function ResourcesClient() {
                                   {skills.slice(0, 3).map((s) => (
                                     <span
                                       key={s.skill}
-                                      className="inline-block rounded-full bg-brand-50 px-2 py-0.5 text-xs text-brand-700 dark:bg-brand-950/30 dark:text-brand-200"
+                                      className="inline-block rounded-full bg-brand-50 px-2 py-0.5 text-xs text-brand-700 dark:bg-brand-900/60 dark:text-brand-100"
                                     >
                                       {s.skill}
                                     </span>
@@ -1326,7 +1408,7 @@ export function ResourcesClient() {
                           onClick={() =>
                             setModal({ type: "edit", resource: resource as unknown as Resource })
                           }
-                          className="mr-3 text-xs font-medium text-brand-600 transition-colors hover:text-brand-800 dark:text-brand-300 dark:hover:text-brand-100"
+                          className="link-hover-underline mr-3 text-xs font-medium text-brand-600 transition-colors hover:text-brand-800 dark:text-brand-300 dark:hover:text-brand-100"
                         >
                           Edit
                         </button>
@@ -1364,10 +1446,15 @@ export function ResourcesClient() {
         count={selection.count}
         onClear={selection.clear}
         actions={[
+          {
+            label: "Export Selected",
+            variant: "default" as const,
+            onClick: exportSelectedCsv,
+          },
           ...(filterableFields.length > 0
             ? [
                 {
-                  label: "Edit Custom Fields",
+                  label: "Bulk Edit",
                   variant: "default" as const,
                   onClick: () => setModal({ type: "bulkEdit" }),
                   disabled: false,
diff --git a/apps/web/src/app/(app)/resources/[id]/page.tsx b/apps/web/src/app/(app)/resources/[id]/page.tsx
index e96326b..7d0d6ec 100644
--- a/apps/web/src/app/(app)/resources/[id]/page.tsx
+++ b/apps/web/src/app/(app)/resources/[id]/page.tsx
@@ -9,9 +9,9 @@ export async function generateMetadata(
   try {
     const trpc = await createCaller();
     const resource = await trpc.resource.getById({ id });
-    return { title: `${resource.displayName} — Resources | Planarchy` };
+    return { title: `${resource.displayName} — Resources | plANARCHY` };
   } catch {
-    return { title: "Resource — Planarchy" };
+    return { title: "Resource — plANARCHY" };
   }
 }
 
diff --git a/apps/web/src/app/(app)/resources/loading.tsx b/apps/web/src/app/(app)/resources/loading.tsx
index 4a22692..269ac33 100644
--- a/apps/web/src/app/(app)/resources/loading.tsx
+++ b/apps/web/src/app/(app)/resources/loading.tsx
@@ -1,49 +1,49 @@
 export default function ResourcesLoading() {
   return (
-    <div className="flex flex-col h-full gap-4 animate-pulse">
+    <div className="flex flex-col h-full gap-4">
       {/* Page header */}
       <div className="flex items-center justify-between">
-        <div className="h-7 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
-        <div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        <div className="h-7 w-32 shimmer-skeleton rounded" />
+        <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Filter bar */}
       <div className="flex gap-2">
-        <div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-9 w-28 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+        <div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
+        <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Table */}
       <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
         {/* Header */}
         <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-          <div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-10 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-14 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
-          <div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
+          <div className="h-3 w-4 shimmer-skeleton rounded" />
+          <div className="h-3 w-10 shimmer-skeleton rounded" />
+          <div className="h-3 w-28 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
+          <div className="h-3 w-16 shimmer-skeleton rounded" />
+          <div className="h-3 w-24 shimmer-skeleton rounded" />
+          <div className="h-3 w-14 shimmer-skeleton rounded" />
+          <div className="h-3 flex-1 shimmer-skeleton rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
         </div>
         {/* Rows */}
         {[...Array(10)].map((_, i) => (
-          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
-            <div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
-            <div className="h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-3 w-14 bg-gray-100 dark:bg-gray-800 rounded" />
-            <div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
-            <div className="h-5 w-12 bg-gray-100 dark:bg-gray-800 rounded-full" />
+          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
+            <div className="h-4 w-4 shimmer-skeleton rounded" />
+            <div className="h-8 w-8 shimmer-skeleton rounded-full" />
+            <div className="h-4 w-32 shimmer-skeleton rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
+            <div className="h-3 w-14 shimmer-skeleton rounded" />
+            <div className="h-5 w-20 shimmer-skeleton rounded-full" />
+            <div className="h-5 w-12 shimmer-skeleton rounded-full" />
             <div className="flex gap-1 flex-1">
-              <div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
-              <div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
+              <div className="h-5 w-16 shimmer-skeleton rounded-full" />
+              <div className="h-5 w-16 shimmer-skeleton rounded-full" />
             </div>
-            <div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
diff --git a/apps/web/src/app/(app)/resources/page.tsx b/apps/web/src/app/(app)/resources/page.tsx
index fbde078..cbec4bd 100644
--- a/apps/web/src/app/(app)/resources/page.tsx
+++ b/apps/web/src/app/(app)/resources/page.tsx
@@ -1,10 +1,30 @@
-import { Suspense } from "react";
-import { ResourcesClient } from "./ResourcesClient.js";
+import dynamic from "next/dynamic";
+
+const ResourcesClient = dynamic(
+  () => import("./ResourcesClient.js").then((m) => m.ResourcesClient),
+  {
+    loading: () => (
+      <div className="p-6 space-y-4">
+        <div className="h-8 w-48 shimmer-skeleton rounded" />
+        <div className="h-10 w-full shimmer-skeleton rounded" />
+        <div className="space-y-2">
+          {[...Array(10)].map((_, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-3 px-4 py-3 animate-row-enter"
+              style={{ animationDelay: `${i * 50}ms` }}
+            >
+              <div className="h-8 w-8 rounded-full shimmer-skeleton flex-shrink-0" />
+              <div className="h-4 w-32 shimmer-skeleton rounded" />
+              <div className="h-3 w-48 shimmer-skeleton rounded" />
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+);
 
 export default function ResourcesPage() {
-  return (
-    <Suspense>
-      <ResourcesClient />
-    </Suspense>
-  );
+  return <ResourcesClient />;
 }
diff --git a/apps/web/src/app/(app)/timeline/loading.tsx b/apps/web/src/app/(app)/timeline/loading.tsx
index 90dfaad..f3751d4 100644
--- a/apps/web/src/app/(app)/timeline/loading.tsx
+++ b/apps/web/src/app/(app)/timeline/loading.tsx
@@ -1,49 +1,49 @@
 export default function TimelineLoading() {
   return (
-    <div className="flex flex-col h-full gap-0 animate-pulse">
+    <div className="flex flex-col h-full gap-0">
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-        <div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
-        <div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
         <div className="flex-1" />
-        <div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-8 w-20 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-20 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Date header */}
       <div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
         <div className="w-48 flex-shrink-0 px-4 py-2">
-          <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
         </div>
         <div className="flex-1 flex gap-px py-2 px-2">
           {[...Array(20)].map((_, i) => (
-            <div key={i} className="flex-1 h-3 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div key={i} className="flex-1 h-3 shimmer-skeleton rounded" />
           ))}
         </div>
       </div>
 
       {/* Resource rows */}
       {[...Array(8)].map((_, i) => (
-        <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3">
+        <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
           {/* Resource name cell */}
           <div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5">
-            <div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-2 w-12 bg-gray-100 dark:bg-gray-800 rounded" />
+            <div className="h-3 w-24 shimmer-skeleton rounded" />
+            <div className="h-2 w-12 shimmer-skeleton rounded" />
           </div>
           {/* Allocation bars */}
           <div className="flex-1 relative px-2 flex items-center gap-1">
             {i % 3 === 0 && (
-              <div className="h-7 rounded-lg bg-brand-100 dark:bg-brand-900/30" style={{ width: "35%", marginLeft: "10%" }} />
+              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "35%", marginLeft: "10%" }} />
             )}
             {i % 3 === 1 && (
               <>
-                <div className="h-7 rounded-lg bg-purple-100 dark:bg-purple-900/30" style={{ width: "20%", marginLeft: "5%" }} />
-                <div className="h-7 rounded-lg bg-blue-100 dark:bg-blue-900/30" style={{ width: "30%", marginLeft: "2%" }} />
+                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "20%", marginLeft: "5%" }} />
+                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "30%", marginLeft: "2%" }} />
               </>
             )}
             {i % 3 === 2 && (
-              <div className="h-7 rounded-lg bg-green-100 dark:bg-green-900/30" style={{ width: "45%", marginLeft: "20%" }} />
+              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "45%", marginLeft: "20%" }} />
             )}
           </div>
         </div>
diff --git a/apps/web/src/app/(app)/timeline/page.tsx b/apps/web/src/app/(app)/timeline/page.tsx
index 00e149f..6f8e683 100644
--- a/apps/web/src/app/(app)/timeline/page.tsx
+++ b/apps/web/src/app/(app)/timeline/page.tsx
@@ -1,8 +1,21 @@
-import { TimelineView } from "~/components/timeline/TimelineView.js";
+import dynamic from "next/dynamic";
+
+const TimelineView = dynamic(
+  () => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView),
+  {
+    loading: () => (
+      <div className="flex flex-col gap-4 h-full p-6">
+        <div className="h-8 w-48 shimmer-skeleton rounded" />
+        <div className="h-10 w-full shimmer-skeleton rounded" />
+        <div className="flex-1 shimmer-skeleton rounded" />
+      </div>
+    ),
+  },
+);
 
 export default function TimelinePage() {
   return (
-    <div className="app-page flex h-full flex-col gap-5 pb-6">
+    <div className="app-page flex max-h-[100dvh] flex-col gap-5 overflow-hidden pb-6">
       <div className="app-page-header">
         <div>
           <h1 className="app-page-title">Timeline</h1>
diff --git a/apps/web/src/app/(app)/vacations/my/page.tsx b/apps/web/src/app/(app)/vacations/my/page.tsx
index 829bc04..c5c5279 100644
--- a/apps/web/src/app/(app)/vacations/my/page.tsx
+++ b/apps/web/src/app/(app)/vacations/my/page.tsx
@@ -1,6 +1,6 @@
 import { MyVacationsClient } from "~/components/vacations/MyVacationsClient.js";
 
-export const metadata = { title: "My Vacations — Planarchy" };
+export const metadata = { title: "My Vacations — plANARCHY" };
 
 export default function MyVacationsPage() {
   return <MyVacationsClient />;
diff --git a/apps/web/src/app/api/cron/chargeability-alerts/route.ts b/apps/web/src/app/api/cron/chargeability-alerts/route.ts
new file mode 100644
index 0000000..d5c8ac5
--- /dev/null
+++ b/apps/web/src/app/api/cron/chargeability-alerts/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@planarchy/db";
+import { checkChargeabilityAlerts } from "@planarchy/api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+/**
+ * GET /api/cron/chargeability-alerts
+ *
+ * Finds resources whose current-month chargeability is >15 percentage points
+ * below their target and creates in-app notifications for managers.
+ *
+ * Duplicate-safe: only one alert per resource per month.
+ *
+ * Optionally protect with CRON_SECRET environment variable.
+ * When set, requests must include `Authorization: Bearer <secret>`.
+ */
+export async function GET(request: Request) {
+  const cronSecret = process.env["CRON_SECRET"];
+  if (cronSecret) {
+    const auth = request.headers.get("authorization");
+    if (auth !== `Bearer ${cronSecret}`) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const alertsSent = await checkChargeabilityAlerts(prisma as any);
+
+    return NextResponse.json({
+      ok: true,
+      alertsSent,
+      checkedAt: new Date().toISOString(),
+    });
+  } catch (error) {
+    console.error("[cron/chargeability-alerts] Error:", error);
+    return NextResponse.json(
+      { ok: false, error: "Internal error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/apps/web/src/app/api/cron/estimate-reminders/route.ts b/apps/web/src/app/api/cron/estimate-reminders/route.ts
new file mode 100644
index 0000000..f55f82c
--- /dev/null
+++ b/apps/web/src/app/api/cron/estimate-reminders/route.ts
@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@planarchy/db";
+import { checkPendingEstimateReminders } from "@planarchy/api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+/**
+ * GET /api/cron/estimate-reminders
+ *
+ * Scans for estimates that have been in SUBMITTED status for more than 3 days
+ * without approval and creates in-app reminder notifications for managers.
+ *
+ * Intended to be called by an external cron job (e.g. `curl http://host/api/cron/estimate-reminders`)
+ * or a scheduled task runner.
+ *
+ * Optionally protect this endpoint with a shared secret via the `CRON_SECRET`
+ * environment variable. When set, requests must include the header
+ * `Authorization: Bearer <secret>`.
+ */
+export async function GET(request: Request) {
+  const cronSecret = process.env["CRON_SECRET"];
+  if (cronSecret) {
+    const auth = request.headers.get("authorization");
+    if (auth !== `Bearer ${cronSecret}`) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const reminderCount = await checkPendingEstimateReminders(prisma as any);
+
+    return NextResponse.json({
+      ok: true,
+      remindersCreated: reminderCount,
+      checkedAt: new Date().toISOString(),
+    });
+  } catch (error) {
+    console.error("[cron/estimate-reminders] Error:", error);
+    return NextResponse.json(
+      { ok: false, error: "Internal error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/apps/web/src/app/api/cron/public-holidays/route.ts b/apps/web/src/app/api/cron/public-holidays/route.ts
new file mode 100644
index 0000000..1a6ffef
--- /dev/null
+++ b/apps/web/src/app/api/cron/public-holidays/route.ts
@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@planarchy/db";
+import { autoImportPublicHolidays } from "@planarchy/api";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+/**
+ * GET /api/cron/public-holidays?year=2027
+ *
+ * Auto-imports public holidays for all active resources for a given year.
+ * Each resource's federal state determines which state-specific holidays apply.
+ * Duplicate-safe: existing holidays are skipped.
+ *
+ * Query params:
+ *   - year (optional): defaults to next year
+ *
+ * Optionally protected with CRON_SECRET environment variable.
+ * When set, requests must include `Authorization: Bearer <secret>`.
+ */
+export async function GET(request: Request) {
+  const cronSecret = process.env["CRON_SECRET"];
+  if (cronSecret) {
+    const auth = request.headers.get("authorization");
+    if (auth !== `Bearer ${cronSecret}`) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+  }
+
+  const { searchParams } = new URL(request.url);
+  const yearParam = searchParams.get("year");
+  const year = yearParam ? parseInt(yearParam, 10) : new Date().getFullYear() + 1;
+
+  if (isNaN(year) || year < 2000 || year > 2100) {
+    return NextResponse.json(
+      { error: "Invalid year parameter. Must be between 2000 and 2100." },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const result = await autoImportPublicHolidays(prisma, year);
+
+    return NextResponse.json({
+      ok: true,
+      year: result.year,
+      holidaysCreated: result.holidaysCreated,
+      resourcesProcessed: result.resourcesProcessed,
+      skippedExisting: result.skippedExisting,
+    });
+  } catch (error) {
+    console.error("[cron/public-holidays] Error:", error);
+    return NextResponse.json(
+      { ok: false, error: "Internal error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/apps/web/src/app/api/health/route.ts b/apps/web/src/app/api/health/route.ts
new file mode 100644
index 0000000..d85242b
--- /dev/null
+++ b/apps/web/src/app/api/health/route.ts
@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+export function GET() {
+  return NextResponse.json({
+    status: "ok",
+    timestamp: new Date().toISOString(),
+  });
+}
diff --git a/apps/web/src/app/api/perf/route.ts b/apps/web/src/app/api/perf/route.ts
new file mode 100644
index 0000000..2e5771d
--- /dev/null
+++ b/apps/web/src/app/api/perf/route.ts
@@ -0,0 +1,67 @@
+import { NextResponse } from "next/server";
+import { eventBus } from "@planarchy/api/sse";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+/**
+ * GET /api/perf — Runtime performance metrics.
+ *
+ * Protected by CRON_SECRET header or query param.
+ * Returns Node.js memory usage, process uptime, and SSE connection count.
+ */
+export function GET(request: Request) {
+  const cronSecret = process.env["CRON_SECRET"];
+
+  if (cronSecret) {
+    const url = new URL(request.url);
+    const headerToken = request.headers.get("authorization")?.replace("Bearer ", "");
+    const queryToken = url.searchParams.get("token");
+
+    if (headerToken !== cronSecret && queryToken !== cronSecret) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+  }
+
+  const mem = process.memoryUsage();
+
+  return NextResponse.json({
+    timestamp: new Date().toISOString(),
+    uptime: {
+      seconds: Math.round(process.uptime()),
+      formatted: formatUptime(process.uptime()),
+    },
+    memory: {
+      heapUsedMB: round(mem.heapUsed / 1024 / 1024),
+      heapTotalMB: round(mem.heapTotal / 1024 / 1024),
+      rssMB: round(mem.rss / 1024 / 1024),
+      externalMB: round(mem.external / 1024 / 1024),
+      arrayBuffersMB: round(mem.arrayBuffers / 1024 / 1024),
+    },
+    sse: {
+      activeConnections: eventBus.subscriberCount,
+    },
+    node: {
+      version: process.version,
+      platform: process.platform,
+      arch: process.arch,
+    },
+  });
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const parts: string[] = [];
+  if (d > 0) parts.push(`${d}d`);
+  if (h > 0) parts.push(`${h}h`);
+  if (m > 0) parts.push(`${m}m`);
+  parts.push(`${s}s`);
+  return parts.join(" ");
+}
diff --git a/apps/web/src/app/api/ready/route.ts b/apps/web/src/app/api/ready/route.ts
new file mode 100644
index 0000000..cbbe24e
--- /dev/null
+++ b/apps/web/src/app/api/ready/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@planarchy/db";
+import { createConnection } from "net";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+const REDIS_URL = process.env["REDIS_URL"] ?? "redis://localhost:6380";
+
+async function checkPostgres(): Promise<"ok" | "error"> {
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+    return "ok";
+  } catch {
+    return "error";
+  }
+}
+
+/**
+ * Lightweight Redis PING check using a raw TCP socket.
+ * Avoids importing ioredis (which is only a dependency of @planarchy/api).
+ */
+async function checkRedis(): Promise<"ok" | "error"> {
+  return new Promise((resolve) => {
+    try {
+      const url = new URL(REDIS_URL);
+      const host = url.hostname || "localhost";
+      const port = parseInt(url.port || "6379", 10);
+      const timeout = 3000;
+
+      const socket = createConnection({ host, port }, () => {
+        // Send Redis PING command using RESP protocol
+        socket.write("*1\r\n$4\r\nPING\r\n");
+      });
+
+      socket.setTimeout(timeout);
+
+      socket.on("data", (data) => {
+        const response = data.toString();
+        socket.destroy();
+        // Redis responds with +PONG\r\n
+        resolve(response.includes("PONG") ? "ok" : "error");
+      });
+
+      socket.on("timeout", () => {
+        socket.destroy();
+        resolve("error");
+      });
+
+      socket.on("error", () => {
+        socket.destroy();
+        resolve("error");
+      });
+    } catch {
+      resolve("error");
+    }
+  });
+}
+
+export async function GET() {
+  const [postgres, redis] = await Promise.all([
+    checkPostgres(),
+    checkRedis(),
+  ]);
+
+  const allHealthy = postgres === "ok" && redis === "ok";
+
+  return NextResponse.json(
+    {
+      status: allHealthy ? "ready" : "not_ready",
+      postgres,
+      redis,
+    },
+    { status: allHealthy ? 200 : 503 },
+  );
+}
diff --git a/apps/web/src/app/api/sse/timeline/route.ts b/apps/web/src/app/api/sse/timeline/route.ts
index 529f918..2f18dd4 100644
--- a/apps/web/src/app/api/sse/timeline/route.ts
+++ b/apps/web/src/app/api/sse/timeline/route.ts
@@ -1,7 +1,11 @@
 import { eventBus } from "@planarchy/api/sse";
+import { startReminderScheduler } from "@planarchy/api/lib/reminder-scheduler";
 import { SSE_EVENT_TYPES } from "@planarchy/shared";
 import { auth } from "~/server/auth.js";
 
+// Start the reminder scheduler (idempotent — only starts once)
+startReminderScheduler();
+
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
 
diff --git a/apps/web/src/app/api/trpc/[trpc]/route.ts b/apps/web/src/app/api/trpc/[trpc]/route.ts
index 48d5321..b50a242 100644
--- a/apps/web/src/app/api/trpc/[trpc]/route.ts
+++ b/apps/web/src/app/api/trpc/[trpc]/route.ts
@@ -1,10 +1,25 @@
-import { createTRPCContext } from "@planarchy/api";
+import { createTRPCContext, loadRoleDefaults } from "@planarchy/api";
 import { appRouter } from "@planarchy/api/router";
 import { prisma } from "@planarchy/db";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import type { NextRequest } from "next/server";
 import { auth } from "~/server/auth.js";
 
+// Throttle lastActiveAt updates: max once per 60s per user
+const lastActiveCache = new Map<string, number>();
+const ACTIVITY_THROTTLE_MS = 60_000;
+
+function trackActivity(userId: string) {
+  const now = Date.now();
+  const last = lastActiveCache.get(userId) ?? 0;
+  if (now - last < ACTIVITY_THROTTLE_MS) return;
+  lastActiveCache.set(userId, now);
+  prisma.user.update({
+    where: { id: userId },
+    data: { lastActiveAt: new Date(now) },
+  }).catch(() => {/* ignore */});
+}
+
 const handler = async (req: NextRequest) => {
   const session = await auth();
 
@@ -15,12 +30,18 @@ const handler = async (req: NextRequest) => {
       })
     : null;
 
+  // Track user activity (throttled, fire-and-forget)
+  if (dbUser) trackActivity(dbUser.id);
+
+  // Load configurable role defaults (cached, 60s TTL)
+  const roleDefaults = await loadRoleDefaults();
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const options: any = {
     endpoint: "/api/trpc",
     req,
     router: appRouter,
-    createContext: () => createTRPCContext({ session, dbUser }),
+    createContext: () => createTRPCContext({ session, dbUser, roleDefaults }),
   };
 
   if (process.env["NODE_ENV"] === "development") {
diff --git a/apps/web/src/app/auth/signin/page.tsx b/apps/web/src/app/auth/signin/page.tsx
index f98efa2..3eb9acf 100644
--- a/apps/web/src/app/auth/signin/page.tsx
+++ b/apps/web/src/app/auth/signin/page.tsx
@@ -37,7 +37,7 @@ export default function SignInPage() {
         <div className="hidden rounded-[2rem] border border-white/70 bg-white/75 p-10 shadow-2xl backdrop-blur lg:flex lg:flex-col lg:justify-between dark:border-slate-800 dark:bg-slate-950/60">
           <div>
             <span className="inline-flex rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:border-brand-900/50 dark:bg-brand-900/20 dark:text-brand-300">
-              Planarchy Control Center
+              plANARCHY Control Center
             </span>
             <h1 className="mt-6 font-display text-5xl font-semibold leading-tight text-gray-900 dark:text-gray-50">
               Resource planning that stays readable under pressure.
@@ -66,7 +66,7 @@ export default function SignInPage() {
           <div className="app-surface-strong p-8">
             <div className="mb-8">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-600">Welcome Back</p>
-              <h2 className="mt-3 font-display text-4xl font-semibold text-gray-900 dark:text-gray-50">Sign in to Planarchy</h2>
+              <h2 className="mt-3 font-display text-4xl font-semibold text-gray-900 dark:text-gray-50">Sign in to plANARCHY</h2>
               <p className="mt-2 text-sm text-gray-500">Resource Planning, staffing, and forecasting.</p>
             </div>
 
@@ -87,7 +87,7 @@ export default function SignInPage() {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   className="app-input"
-                  placeholder="admin@planarchy.dev"
+                  placeholder="you@company.com"
                   required
                 />
               </div>
@@ -116,14 +116,6 @@ export default function SignInPage() {
               </button>
             </form>
 
-            <div className="mt-6 rounded-2xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-700 dark:bg-gray-900/70">
-              <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">Demo accounts</p>
-              <div className="space-y-1.5 text-sm text-gray-600 dark:text-gray-300">
-                <p><span className="font-mono text-xs">admin@planarchy.dev</span> / admin123</p>
-                <p><span className="font-mono text-xs">manager@planarchy.dev</span> / manager123</p>
-                <p><span className="font-mono text-xs">viewer@planarchy.dev</span> / viewer123</p>
-              </div>
-            </div>
           </div>
         </div>
       </div>
diff --git a/apps/web/src/app/global-error.tsx b/apps/web/src/app/global-error.tsx
new file mode 100644
index 0000000..f737845
--- /dev/null
+++ b/apps/web/src/app/global-error.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <div style={{ padding: "2rem", textAlign: "center" }}>
+          <h2>Something went wrong</h2>
+          <button onClick={reset}>Try again</button>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 9084f9e..b67eda4 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -90,7 +90,7 @@
 /* ─── Light Theme Surface Variables ─────────────────────────────────────── */
 
 :root {
-  --surface-page: 244 246 250;
+  --surface-page: 246 247 251;
   --surface-card: 255 255 255;
   --surface-elevated: 249 250 252;
   --surface-input: 255 255 255;
@@ -132,6 +132,8 @@
       background-color 0.15s ease,
       color 0.15s ease;
     background-image:
+      radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%),
+      radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%),
       radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
       linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
     text-rendering: optimizeLegibility;
@@ -168,13 +170,20 @@
     font: inherit;
   }
 
-  input:focus-visible,
-  select:focus-visible,
-  textarea:focus-visible,
-  button:focus-visible,
-  a:focus-visible {
+  :focus-visible {
     outline: 2px solid rgb(var(--accent-500));
     outline-offset: 2px;
+    border-radius: inherit;
+  }
+
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid rgb(var(--accent-500));
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgb(var(--accent-500) / 0.12);
   }
 
   /* Scrollbar styling for dark mode */
@@ -335,7 +344,7 @@
   color: rgb(196 181 253) !important;
 }
 .dark .bg-amber-50 {
-  background-color: rgb(120 53 15 / 0.2) !important;
+  background-color: rgb(120 53 15) !important;
 }
 
 /* Modal / overlay */
@@ -345,16 +354,28 @@
 
 @layer components {
   .app-surface {
-    @apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/90;
+    @apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90;
+    --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(.dark) .app-surface {
+    --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   .app-surface-strong {
-    @apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
+    @apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
+    --tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(.dark) .app-surface-strong {
+    --tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
   }
 
   .app-toolbar {
-    @apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur;
-    @apply dark:border-gray-700 dark:bg-gray-900/90 dark:shadow-black/20;
+    @apply sticky top-0 z-10 rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm backdrop-blur-sm;
+    @apply dark:border-gray-700 dark:bg-gray-900/80 dark:shadow-black/20;
   }
 
   .app-input {
@@ -416,14 +437,122 @@
 
   .allocation-block {
     @apply absolute rounded-md text-xs font-medium px-2 py-1 cursor-pointer select-none;
-    @apply transition-all duration-150 ease-in-out;
+    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, opacity 0.15s ease-in-out;
   }
 
   .allocation-block:hover {
-    @apply ring-2 ring-white ring-offset-1;
+    @apply ring-2 ring-white ring-offset-1 shadow-md;
+    transform: scale(1.02);
   }
 
   .allocation-block.dragging {
     @apply opacity-75 shadow-lg scale-105;
   }
 }
+
+/* ─── Overbooking blink animation ──────────────────────────────────────────── */
+@keyframes overbooking-blink {
+  0%, 100% { background-color: rgba(239, 68, 68, 0); }
+  50% { background-color: rgba(239, 68, 68, 0.18); }
+}
+.dark .animate-overbooking-blink {
+  animation: overbooking-blink-dark 2s ease-in-out infinite;
+}
+@keyframes overbooking-blink-dark {
+  0%, 100% { background-color: rgba(239, 68, 68, 0); }
+  50% { background-color: rgba(239, 68, 68, 0.25); }
+}
+.animate-overbooking-blink {
+  animation: overbooking-blink 2s ease-in-out infinite;
+}
+
+/* ─── Shimmer skeleton animation ─────────────────────────────────────────── */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.shimmer-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--surface-card) 25%,
+    color-mix(in srgb, var(--text-very-muted) 8%, var(--surface-card)) 50%,
+    var(--surface-card) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+/* ─── Table row stagger entrance ─────────────────────────────────────────── */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-row-enter {
+  animation: fadeSlideIn 0.25s ease-out both;
+}
+
+/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
+.hover-lift {
+  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+.hover-lift:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+:is(.dark) .hover-lift:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+/* ─── Smooth scroll + reduced-motion accessibility ────────────────────────── */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ─── Table row hover accent border ──────────────────────────────────────── */
+.table-row-hover {
+  border-left: 2px solid transparent;
+  transition: border-color 0.15s ease-out, background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+.table-row-hover:hover {
+  border-left-color: rgb(var(--accent-400));
+}
+
+/* ─── Animated underline for action links ─────────────────────────────────── */
+.link-hover-underline {
+  position: relative;
+}
+.link-hover-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: currentColor;
+  transition: width 0.2s ease-out;
+}
+.link-hover-underline:hover::after {
+  width: 100%;
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 3a40471..f1cff42 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,6 +1,8 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Manrope, Source_Sans_3 } from "next/font/google";
 import { TRPCProvider } from "~/lib/trpc/provider.js";
+import { ServiceWorkerRegistration } from "~/components/layout/ServiceWorkerRegistration.js";
+import { InstallPrompt } from "~/components/layout/InstallPrompt.js";
 import "./globals.css";
 
 const uiFont = Source_Sans_3({
@@ -16,8 +18,31 @@ const displayFont = Manrope({
 });
 
 export const metadata: Metadata = {
-  title: "Planarchy — Resource Planning",
+  metadataBase: new URL("https://planarchy.hartmut-noerenberg.com"),
+  title: "plANARCHY — Resource Planning",
   description: "Interactive resource planning and project staffing tool",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Planarchy",
+  },
+  openGraph: {
+    title: "plANARCHY — Resource Planning",
+    description: "Estimates, staffing, chargeability, and timelines in one workspace.",
+    images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "plANARCHY Logo" }],
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "plANARCHY — Resource Planning",
+    description: "Estimates, staffing, chargeability, and timelines in one workspace.",
+    images: ["/og-image.png"],
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: "#0284c7",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -34,6 +59,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body className={`${uiFont.variable} ${displayFont.variable} min-h-screen bg-gray-50 font-sans antialiased`}>
         <TRPCProvider>{children}</TRPCProvider>
+        <ServiceWorkerRegistration />
+        <InstallPrompt />
       </body>
     </html>
   );
diff --git a/apps/web/src/components/admin/BatchSkillImport.tsx b/apps/web/src/components/admin/BatchSkillImport.tsx
index 7a6a51e..c28511d 100644
--- a/apps/web/src/components/admin/BatchSkillImport.tsx
+++ b/apps/web/src/components/admin/BatchSkillImport.tsx
@@ -55,7 +55,7 @@ export function BatchSkillImport() {
 
         try {
           const buffer = await file.arrayBuffer();
-          const result = parseSkillMatrixWorkbook(buffer);
+          const result = await parseSkillMatrixWorkbook(buffer);
 
           let roleId: string | undefined;
           let matchedRoleName: string | undefined;
diff --git a/apps/web/src/components/admin/CalculationRulesClient.tsx b/apps/web/src/components/admin/CalculationRulesClient.tsx
index 7d7e586..8811190 100644
--- a/apps/web/src/components/admin/CalculationRulesClient.tsx
+++ b/apps/web/src/components/admin/CalculationRulesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 const TRIGGER_TYPES = ["SICK", "VACATION", "PUBLIC_HOLIDAY", "CUSTOM"] as const;
@@ -164,13 +165,27 @@ export function CalculationRulesClient() {
         <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-800">
             <tr>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Trigger</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Cost Effect</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Chargeability</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Scope</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Priority</th>
-              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Name <InfoTooltip content="A descriptive label for this rule. Use clear names so admins can quickly identify what each rule does." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Trigger <InfoTooltip content="The absence type that activates this rule: Sick Leave, Vacation, Public Holiday, or Custom. Determines when the cost/chargeability logic applies." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Cost Effect <InfoTooltip content="How this absence affects project costs. 'Charge to Project' bills the project, 'No Project Cost' absorbs the cost centrally, 'Reduced Cost' applies a percentage discount." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Chargeability <InfoTooltip content="Whether the person's time counts as chargeable during this absence. 'Person Chargeable' includes the time in chargeability metrics; 'Not Chargeable' excludes it." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Scope <InfoTooltip content="Limits the rule to a specific project or order type (BD, Chargeable, Internal, Overhead). 'Global' means the rule applies to all projects." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Priority <InfoTooltip content="When multiple rules match the same absence, the one with the highest priority number wins. Use this to create specific overrides for certain projects." /></span>
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">
+                <span className="flex items-center">Active <InfoTooltip content="Only active rules are evaluated. Deactivate a rule to temporarily disable it without deleting." /></span>
+              </th>
               <th className="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
             </tr>
           </thead>
@@ -233,7 +248,7 @@ export function CalculationRulesClient() {
             </h2>
             <div className="space-y-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
+                <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Name <InfoTooltip content="A unique, descriptive name for this calculation rule." /></label>
                 <input
                   value={editing.name}
                   onChange={(e) => setEditing({ ...editing, name: e.target.value })}
@@ -241,7 +256,7 @@ export function CalculationRulesClient() {
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+                <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Description <InfoTooltip content="Optional notes explaining when and why this rule exists." /></label>
                 <textarea
                   value={editing.description}
                   onChange={(e) => setEditing({ ...editing, description: e.target.value })}
@@ -251,7 +266,7 @@ export function CalculationRulesClient() {
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Trigger Type</label>
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Trigger Type <InfoTooltip content="The type of absence event that activates this rule." /></label>
                   <select
                     value={editing.triggerType}
                     onChange={(e) => setEditing({ ...editing, triggerType: e.target.value })}
@@ -261,7 +276,7 @@ export function CalculationRulesClient() {
                   </select>
                 </div>
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Order Type (optional)</label>
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Order Type (optional) <InfoTooltip content="Restricts this rule to a specific order type. Leave as 'All' to apply globally." /></label>
                   <select
                     value={editing.orderType}
                     onChange={(e) => setEditing({ ...editing, orderType: e.target.value })}
@@ -274,7 +289,7 @@ export function CalculationRulesClient() {
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Cost Effect</label>
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Cost Effect <InfoTooltip content="Determines how costs are attributed during this absence. 'Charge' bills the project, 'Zero' removes cost, 'Reduce' applies a percentage reduction." /></label>
                   <select
                     value={editing.costEffect}
                     onChange={(e) => setEditing({ ...editing, costEffect: e.target.value })}
@@ -284,7 +299,7 @@ export function CalculationRulesClient() {
                   </select>
                 </div>
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Chargeability</label>
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Chargeability <InfoTooltip content="Controls whether this absence counts toward the person's chargeability KPI." /></label>
                   <select
                     value={editing.chargeabilityEffect}
                     onChange={(e) => setEditing({ ...editing, chargeabilityEffect: e.target.value })}
@@ -296,8 +311,8 @@ export function CalculationRulesClient() {
               </div>
               {editing.costEffect === "REDUCE" && (
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                    Reduction Percent (0-100)
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Reduction Percent (0-100) <InfoTooltip content="The percentage by which the cost is reduced. E.g. 50 means the project is charged half the normal rate." />
                   </label>
                   <input
                     type="number"
@@ -311,7 +326,7 @@ export function CalculationRulesClient() {
               )}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Priority</label>
+                  <label className="mb-1 flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">Priority <InfoTooltip content="Higher numbers take precedence when multiple rules match. Use 0 for default rules and higher values for specific overrides." /></label>
                   <input
                     type="number"
                     min={0}
@@ -328,7 +343,7 @@ export function CalculationRulesClient() {
                       onChange={(e) => setEditing({ ...editing, isActive: e.target.checked })}
                       className="rounded border-gray-300"
                     />
-                    Active
+                    Active <InfoTooltip content="Inactive rules are ignored during cost calculations." />
                   </label>
                 </div>
               </div>
diff --git a/apps/web/src/components/admin/ClientsAdminClient.tsx b/apps/web/src/components/admin/ClientsAdminClient.tsx
index 6aad477..d26c6fa 100644
--- a/apps/web/src/components/admin/ClientsAdminClient.tsx
+++ b/apps/web/src/components/admin/ClientsAdminClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type ClientRow = {
@@ -166,7 +167,7 @@ export function ClientsAdminClient() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Clients</h1>
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            Client hierarchy for project assignment and chargeability reporting
+            Client hierarchy for project assignment and chargeability reporting <InfoTooltip content="Clients are companies or brands that commission projects. The hierarchy supports parent/child relationships (e.g. BMW Group > BMW > MINI). Projects are assigned to clients for revenue tracking and chargeability reporting." />
           </p>
         </div>
         <button
@@ -220,7 +221,7 @@ export function ClientsAdminClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="The full name of the client. Shown in project assignment dropdowns and reports." /></label>
                 <input
                   type="text"
                   value={editing.name}
@@ -232,7 +233,7 @@ export function ClientsAdminClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code <InfoTooltip content="A short abbreviation for this client (e.g. BMW). Used in compact views and rate card assignments." /></label>
                   <input
                     type="text"
                     value={editing.code}
@@ -242,7 +243,7 @@ export function ClientsAdminClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order <InfoTooltip content="Controls the display order. Lower numbers appear first." /></label>
                   <input
                     type="number"
                     value={editing.sortOrder}
@@ -253,7 +254,7 @@ export function ClientsAdminClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Parent Client</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Parent Client <InfoTooltip content="Set a parent to create a hierarchy (e.g. MINI under BMW Group). Child clients inherit the parent's reporting context." /></label>
                 <select
                   value={editing.parentId}
                   onChange={(e) => setEditing({ ...editing, parentId: e.target.value })}
diff --git a/apps/web/src/components/admin/CountriesClient.tsx b/apps/web/src/components/admin/CountriesClient.tsx
index 814b9b1..dc8f269 100644
--- a/apps/web/src/components/admin/CountriesClient.tsx
+++ b/apps/web/src/components/admin/CountriesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type CountryRow = {
@@ -175,11 +176,11 @@ export function CountriesClient() {
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Code</th>
-              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Name</th>
-              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Daily Hours</th>
-              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Schedule</th>
-              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Cities</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center">Code <InfoTooltip content="ISO country code (e.g. DE, ES, IN). Used to identify the country in exports and API calls." /></span></th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center">Name <InfoTooltip content="The full country name. Shown in dropdowns and resource location fields." /></span></th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center justify-center">Daily Hours <InfoTooltip content="Standard working hours per day for this country. Used in capacity calculations to convert between days and hours." /></span></th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center justify-center">Schedule <InfoTooltip content="Special schedule rules (e.g. Spain has reduced Friday hours and summer hours). 'Standard' uses the fixed daily hours value." /></span></th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center justify-center">Cities <InfoTooltip content="Metro cities within this country. Used for location-specific rate cards and resource assignment." /></span></th>
               <th className="text-right px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Actions</th>
             </tr>
           </thead>
@@ -286,7 +287,7 @@ export function CountriesClient() {
             <div className="overflow-y-auto flex-1 px-6 py-5 space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code <InfoTooltip content="2-3 letter ISO country code. Auto-uppercased." /></label>
                   <input
                     type="text"
                     value={editing.code}
@@ -297,7 +298,7 @@ export function CountriesClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Daily Hours</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Daily Hours <InfoTooltip content="Standard working hours per day. Used to convert between hours and days in capacity calculations." /></label>
                   <input
                     type="number"
                     value={editing.dailyWorkingHours}
@@ -311,7 +312,7 @@ export function CountriesClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="Full country name shown in the UI." /></label>
                 <input
                   type="text"
                   value={editing.name}
@@ -330,14 +331,14 @@ export function CountriesClient() {
                     onChange={(e) => setEditing({ ...editing, hasSpainRules: e.target.checked })}
                     className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                   />
-                  Variable schedule (Spain-type)
+                  Variable schedule (Spain-type) <InfoTooltip content="Enable for countries with variable working hours (e.g. reduced Friday/summer hours). Overrides the fixed daily hours with day-specific rules." />
                 </label>
 
                 {editing.hasSpainRules && (
                   <div className="mt-3 space-y-3 pl-6 border-l-2 border-amber-300 dark:border-amber-700">
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Friday Hours</label>
+                        <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Friday Hours <InfoTooltip content="Working hours on Fridays. Typically shorter than regular days." /></label>
                         <input
                           type="number"
                           value={editing.fridayHours}
@@ -347,7 +348,7 @@ export function CountriesClient() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Regular Hours (Mon-Thu)</label>
+                        <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Regular Hours (Mon-Thu) <InfoTooltip content="Working hours Monday through Thursday outside the summer period." /></label>
                         <input
                           type="number"
                           value={editing.regularHours}
@@ -359,7 +360,7 @@ export function CountriesClient() {
                     </div>
                     <div className="grid grid-cols-3 gap-3">
                       <div>
-                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer From</label>
+                        <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer From <InfoTooltip content="Start of the summer period (MM-DD format). During summer, reduced hours apply." /></label>
                         <input
                           type="text"
                           value={editing.summerFrom}
@@ -369,7 +370,7 @@ export function CountriesClient() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer To</label>
+                        <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer To <InfoTooltip content="End of the summer period (MM-DD format)." /></label>
                         <input
                           type="text"
                           value={editing.summerTo}
@@ -379,7 +380,7 @@ export function CountriesClient() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer Hours</label>
+                        <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Summer Hours <InfoTooltip content="Reduced daily working hours during the summer period." /></label>
                         <input
                           type="number"
                           value={editing.summerHours}
diff --git a/apps/web/src/components/admin/EffortRulesClient.tsx b/apps/web/src/components/admin/EffortRulesClient.tsx
index 3c06dcc..32517b2 100644
--- a/apps/web/src/components/admin/EffortRulesClient.tsx
+++ b/apps/web/src/components/admin/EffortRulesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type EffortUnitMode = "per_frame" | "per_item" | "flat";
@@ -184,7 +185,7 @@ export function EffortRulesClient() {
 
           <div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
-              <label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Name</label>
+              <label className="mb-1 flex items-center text-xs font-medium text-gray-500 uppercase">Name <InfoTooltip content="A descriptive name for this rule set, e.g. 'CGI Standard Rules'. Used to identify the set when linking it to estimates." /></label>
               <input
                 value={editing.name}
                 onChange={(e) => setEditing({ ...editing, name: e.target.value })}
@@ -193,7 +194,7 @@ export function EffortRulesClient() {
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Description</label>
+              <label className="mb-1 flex items-center text-xs font-medium text-gray-500 uppercase">Description <InfoTooltip content="Optional notes about when this rule set should be used." /></label>
               <input
                 value={editing.description}
                 onChange={(e) => setEditing({ ...editing, description: e.target.value })}
@@ -210,7 +211,7 @@ export function EffortRulesClient() {
               onChange={(e) => setEditing({ ...editing, isDefault: e.target.checked })}
               className="rounded border-gray-300"
             />
-            Default rule set (auto-selected for new estimates)
+            Default rule set (auto-selected for new estimates) <InfoTooltip content="When checked, this set is pre-selected when creating new estimates. Only one set can be default." />
           </label>
 
           {/* Rules table */}
@@ -234,11 +235,11 @@ export function EffortRulesClient() {
                 <table className="w-full text-left text-sm">
                   <thead>
                     <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
-                      <th className="py-2 pr-2 font-medium">Scope type</th>
-                      <th className="px-2 py-2 font-medium">Discipline</th>
-                      <th className="px-2 py-2 font-medium">Chapter</th>
-                      <th className="px-2 py-2 font-medium">Unit mode</th>
-                      <th className="px-2 py-2 text-right font-medium">Hours/unit</th>
+                      <th className="py-2 pr-2 font-medium"><span className="flex items-center">Scope type <InfoTooltip content="The type of deliverable this rule applies to: Shot, Asset, Environment, Sequence, or Other." /></span></th>
+                      <th className="px-2 py-2 font-medium"><span className="flex items-center">Discipline <InfoTooltip content="The production discipline (e.g. 3D Animation, Compositing) that this rule generates demand for." /></span></th>
+                      <th className="px-2 py-2 font-medium"><span className="flex items-center">Chapter <InfoTooltip content="Optional grouping within a discipline. Used to organize demand lines in the estimate staffing tab." /></span></th>
+                      <th className="px-2 py-2 font-medium"><span className="flex items-center">Unit mode <InfoTooltip content="How hours are calculated: 'Per frame' multiplies by frame count, 'Per item' by item count, 'Flat' is a fixed amount." /></span></th>
+                      <th className="px-2 py-2 text-right font-medium"><span className="flex items-center justify-end">Hours/unit <InfoTooltip content="The number of hours per unit. Combined with the unit mode and scope item count, this pre-fills the total effort in estimates." /></span></th>
                       <th className="pl-2 py-2 font-medium w-10"></th>
                     </tr>
                   </thead>
@@ -392,11 +393,11 @@ export function EffortRulesClient() {
               <table className="w-full text-left text-sm">
                 <thead>
                   <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
-                    <th className="py-2 pr-3 font-medium">Scope type</th>
-                    <th className="px-3 py-2 font-medium">Discipline</th>
-                    <th className="px-3 py-2 font-medium">Chapter</th>
-                    <th className="px-3 py-2 font-medium">Unit mode</th>
-                    <th className="pl-3 py-2 text-right font-medium">Hours/unit</th>
+                    <th className="py-2 pr-3 font-medium"><span className="flex items-center">Scope type <InfoTooltip content="The deliverable type (Shot, Asset, etc.) this rule targets." /></span></th>
+                    <th className="px-3 py-2 font-medium"><span className="flex items-center">Discipline <InfoTooltip content="The production discipline this demand line is for." /></span></th>
+                    <th className="px-3 py-2 font-medium"><span className="flex items-center">Chapter <InfoTooltip content="Optional sub-grouping within the discipline." /></span></th>
+                    <th className="px-3 py-2 font-medium"><span className="flex items-center">Unit mode <InfoTooltip content="Per frame, per item, or flat hours calculation mode." /></span></th>
+                    <th className="pl-3 py-2 text-right font-medium"><span className="flex items-center justify-end">Hours/unit <InfoTooltip content="Hours multiplied by the scope item count to compute total effort." /></span></th>
                   </tr>
                 </thead>
                 <tbody>
diff --git a/apps/web/src/components/admin/ExperienceMultipliersClient.tsx b/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
index ff27ff0..9a3b839 100644
--- a/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
+++ b/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type EditingRule = {
@@ -198,7 +199,7 @@ export function ExperienceMultipliersClient() {
 
           <div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
-              <label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Name</label>
+              <label className="mb-1 flex items-center text-xs font-medium text-gray-500 uppercase">Name <InfoTooltip content="A descriptive name for this multiplier set. Used to identify it when applying multipliers to estimates." /></label>
               <input
                 value={editing.name}
                 onChange={(e) => setEditing({ ...editing, name: e.target.value })}
@@ -207,7 +208,7 @@ export function ExperienceMultipliersClient() {
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Description</label>
+              <label className="mb-1 flex items-center text-xs font-medium text-gray-500 uppercase">Description <InfoTooltip content="Optional explanation of when this multiplier set should be used." /></label>
               <input
                 value={editing.description}
                 onChange={(e) => setEditing({ ...editing, description: e.target.value })}
@@ -224,7 +225,7 @@ export function ExperienceMultipliersClient() {
               onChange={(e) => setEditing({ ...editing, isDefault: e.target.checked })}
               className="rounded border-gray-300"
             />
-            Default set (auto-selected when applying multipliers)
+            Default set (auto-selected when applying multipliers) <InfoTooltip content="When checked, this set is automatically selected when applying experience multipliers. Only one set can be default." />
           </label>
 
           {/* Rules table */}
@@ -248,13 +249,13 @@ export function ExperienceMultipliersClient() {
                 <table className="w-full text-left text-sm">
                   <thead>
                     <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
-                      <th className="py-2 pr-2 font-medium">Chapter</th>
-                      <th className="px-2 py-2 font-medium">Location</th>
-                      <th className="px-2 py-2 font-medium">Level</th>
-                      <th className="px-2 py-2 text-right font-medium">Cost mult.</th>
-                      <th className="px-2 py-2 text-right font-medium">Bill mult.</th>
-                      <th className="px-2 py-2 text-right font-medium">Shoring %</th>
-                      <th className="px-2 py-2 text-right font-medium">Add. effort %</th>
+                      <th className="py-2 pr-2 font-medium"><span className="flex items-center">Chapter <InfoTooltip content="The discipline/chapter this multiplier applies to. Leave blank to match all chapters." /></span></th>
+                      <th className="px-2 py-2 font-medium"><span className="flex items-center">Location <InfoTooltip content="The country/location this multiplier targets. Used for nearshoring/offshoring cost adjustments." /></span></th>
+                      <th className="px-2 py-2 font-medium"><span className="flex items-center">Level <InfoTooltip content="The seniority level (Junior, Mid, Senior, etc.). Juniors typically need a higher effort multiplier." /></span></th>
+                      <th className="px-2 py-2 text-right font-medium"><span className="flex items-center justify-end">Cost mult. <InfoTooltip content="Multiplier applied to cost rates. E.g. 0.5 means 50% of the base cost rate (cheaper location)." /></span></th>
+                      <th className="px-2 py-2 text-right font-medium"><span className="flex items-center justify-end">Bill mult. <InfoTooltip content="Multiplier applied to billing rates. E.g. 0.8 means the client is billed at 80% of the standard rate." /></span></th>
+                      <th className="px-2 py-2 text-right font-medium"><span className="flex items-center justify-end">Shoring % <InfoTooltip content="Ratio of work done at the remote location (0-1). E.g. 0.7 means 70% remote, 30% local." /></span></th>
+                      <th className="px-2 py-2 text-right font-medium"><span className="flex items-center justify-end">Add. effort % <InfoTooltip content="Additional effort overhead for coordination, e.g. 0.15 adds 15% extra hours for communication overhead." /></span></th>
                       <th className="pl-2 py-2 font-medium w-10"></th>
                     </tr>
                   </thead>
@@ -439,13 +440,13 @@ export function ExperienceMultipliersClient() {
               <table className="w-full text-left text-sm">
                 <thead>
                   <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
-                    <th className="py-2 pr-3 font-medium">Chapter</th>
-                    <th className="px-3 py-2 font-medium">Location</th>
-                    <th className="px-3 py-2 font-medium">Level</th>
-                    <th className="px-3 py-2 text-right font-medium">Cost mult.</th>
-                    <th className="px-3 py-2 text-right font-medium">Bill mult.</th>
-                    <th className="px-3 py-2 text-right font-medium">Shoring</th>
-                    <th className="pl-3 py-2 text-right font-medium">Add. effort</th>
+                    <th className="py-2 pr-3 font-medium"><span className="flex items-center">Chapter <InfoTooltip content="Discipline this multiplier applies to." /></span></th>
+                    <th className="px-3 py-2 font-medium"><span className="flex items-center">Location <InfoTooltip content="Target country/region." /></span></th>
+                    <th className="px-3 py-2 font-medium"><span className="flex items-center">Level <InfoTooltip content="Seniority level filter." /></span></th>
+                    <th className="px-3 py-2 text-right font-medium"><span className="flex items-center justify-end">Cost mult. <InfoTooltip content="Factor applied to cost rates." /></span></th>
+                    <th className="px-3 py-2 text-right font-medium"><span className="flex items-center justify-end">Bill mult. <InfoTooltip content="Factor applied to billing rates." /></span></th>
+                    <th className="px-3 py-2 text-right font-medium"><span className="flex items-center justify-end">Shoring <InfoTooltip content="Share of work done remotely (0-100%)." /></span></th>
+                    <th className="pl-3 py-2 text-right font-medium"><span className="flex items-center justify-end">Add. effort <InfoTooltip content="Extra effort overhead percentage." /></span></th>
                   </tr>
                 </thead>
                 <tbody>
diff --git a/apps/web/src/components/admin/ManagementLevelsClient.tsx b/apps/web/src/components/admin/ManagementLevelsClient.tsx
index b4a767e..9618120 100644
--- a/apps/web/src/components/admin/ManagementLevelsClient.tsx
+++ b/apps/web/src/components/admin/ManagementLevelsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type LevelRow = { id: string; name: string; groupId: string };
@@ -115,7 +116,7 @@ export function ManagementLevelsClient() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Management Levels</h1>
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            Level groups with chargeability targets and individual levels
+            Level groups with chargeability targets and individual levels <InfoTooltip content="Management levels define seniority groups (e.g. Senior Management, Team Lead). Each group has a chargeability target that appears in chargeability reports. Individual levels within a group are assigned to resources." />
           </p>
         </div>
         <button
@@ -146,6 +147,7 @@ export function ManagementLevelsClient() {
                 <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400">
                   Target: {Math.round(group.targetPercentage * 100)}%
                 </span>
+                <InfoTooltip content="The chargeability target for this group. Resources in this group are expected to achieve this percentage of chargeable hours. Used in chargeability reports and dashboards." />
               </div>
               <div className="flex gap-2">
                 <button
@@ -217,7 +219,7 @@ export function ManagementLevelsClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="The name of this management level group (e.g. Senior Management, Team Leads)." /></label>
                 <input
                   type="text"
                   value={editingGroup.name}
@@ -229,7 +231,7 @@ export function ManagementLevelsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Target % (0-100)</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Target % (0-100) <InfoTooltip content="The chargeability target for resources in this group. Enter as a percentage (e.g. 70 for 70%). Used in chargeability reports." /></label>
                   <input
                     type="number"
                     value={Math.round(editingGroup.targetPercentage * 100)}
@@ -240,7 +242,7 @@ export function ManagementLevelsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order <InfoTooltip content="Controls the display order of groups. Lower numbers appear first." /></label>
                   <input
                     type="number"
                     value={editingGroup.sortOrder}
@@ -279,7 +281,7 @@ export function ManagementLevelsClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Level Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Level Name <InfoTooltip content="The specific title within the group (e.g. Managing Director, VP). This is assigned to individual resources." /></label>
                 <input
                   type="text"
                   value={editingLevel.name}
@@ -290,7 +292,7 @@ export function ManagementLevelsClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Group</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Group <InfoTooltip content="The management level group this level belongs to. Determines chargeability target and reporting." /></label>
                 <select
                   value={editingLevel.groupId}
                   onChange={(e) => setEditingLevel({ ...editingLevel, groupId: e.target.value })}
diff --git a/apps/web/src/components/admin/OrgUnitsClient.tsx b/apps/web/src/components/admin/OrgUnitsClient.tsx
index 5caafc2..a5f9ab0 100644
--- a/apps/web/src/components/admin/OrgUnitsClient.tsx
+++ b/apps/web/src/components/admin/OrgUnitsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type OrgUnitRow = {
@@ -166,7 +167,7 @@ export function OrgUnitsClient() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Org Units</h1>
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            3-level hierarchy: L5 (Division) → L6 (Department) → L7 (Team)
+            3-level hierarchy: L5 (Division) → L6 (Department) → L7 (Team) <InfoTooltip content="Org units define the organizational structure. Resources are assigned to L7 teams, which roll up to L6 departments and L5 divisions. Used for capacity planning, reporting, and access control." />
           </p>
         </div>
         <div className="flex gap-2">
@@ -206,7 +207,7 @@ export function OrgUnitsClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="The full name of this organizational unit." /></label>
                 <input
                   type="text"
                   value={editing.name}
@@ -218,7 +219,7 @@ export function OrgUnitsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Short Name</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Short Name <InfoTooltip content="An abbreviation for compact views and exports (e.g. 'CP' for Content Production)." /></label>
                   <input
                     type="text"
                     value={editing.shortName}
@@ -228,7 +229,7 @@ export function OrgUnitsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order <InfoTooltip content="Controls the display order among siblings. Lower numbers appear first." /></label>
                   <input
                     type="number"
                     value={editing.sortOrder}
@@ -240,7 +241,7 @@ export function OrgUnitsClient() {
 
               {editing.level > 5 && (
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Parent Unit</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Parent Unit <InfoTooltip content="The parent org unit in the hierarchy. L6 departments must belong to an L5 division; L7 teams must belong to an L6 department." /></label>
                   <select
                     value={editing.parentId}
                     onChange={(e) => setEditing({ ...editing, parentId: e.target.value })}
diff --git a/apps/web/src/components/admin/RateCardsClient.tsx b/apps/web/src/components/admin/RateCardsClient.tsx
index ffc34da..26cd72f 100644
--- a/apps/web/src/components/admin/RateCardsClient.tsx
+++ b/apps/web/src/components/admin/RateCardsClient.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { formatCents } from "~/lib/format.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 // ─── Local types ────────────────────────────────────────────────────────────
@@ -486,14 +487,14 @@ export function RateCardsClient() {
                   <table className="w-full text-sm">
                     <thead>
                       <tr className="text-left text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
-                        <th className="px-4 py-2 font-medium">Role</th>
-                        <th className="px-4 py-2 font-medium">Chapter</th>
-                        <th className="px-4 py-2 font-medium">Location</th>
-                        <th className="px-4 py-2 font-medium">Seniority</th>
-                        <th className="px-4 py-2 font-medium">Work Type</th>
-                        <th className="px-4 py-2 font-medium text-right">Cost Rate</th>
-                        <th className="px-4 py-2 font-medium text-right">Bill Rate</th>
-                        <th className="px-4 py-2 font-medium text-right">Machine Rate</th>
+                        <th className="px-4 py-2 font-medium"><span className="flex items-center">Role <InfoTooltip content="The job role this rate applies to. Leave empty if the rate is defined by chapter/seniority instead." /></span></th>
+                        <th className="px-4 py-2 font-medium"><span className="flex items-center">Chapter <InfoTooltip content="The production discipline (e.g. Animation, Compositing). Narrows which allocations use this rate." /></span></th>
+                        <th className="px-4 py-2 font-medium"><span className="flex items-center">Location <InfoTooltip content="Geographic location filter. Used when rates vary by region (e.g. Munich vs. Barcelona)." /></span></th>
+                        <th className="px-4 py-2 font-medium"><span className="flex items-center">Seniority <InfoTooltip content="Experience level (Junior, Mid, Senior, etc.). Higher seniority typically has higher rates." /></span></th>
+                        <th className="px-4 py-2 font-medium"><span className="flex items-center">Work Type <InfoTooltip content="Type of work arrangement (e.g. Onsite, Remote). Can affect rate pricing." /></span></th>
+                        <th className="px-4 py-2 font-medium text-right"><span className="flex items-center justify-end">Cost Rate <InfoTooltip content="Internal hourly cost in cents. This is what the company actually pays. Used in budget calculations and profitability analysis." /></span></th>
+                        <th className="px-4 py-2 font-medium text-right"><span className="flex items-center justify-end">Bill Rate <InfoTooltip content="External hourly billing rate in cents. This is what the client is charged. The difference between bill rate and cost rate is the margin." /></span></th>
+                        <th className="px-4 py-2 font-medium text-right"><span className="flex items-center justify-end">Machine Rate <InfoTooltip content="Hourly cost for compute/render resources in cents. Added on top of personnel costs for roles that require heavy rendering." /></span></th>
                         <th className="px-4 py-2 font-medium w-20"></th>
                       </tr>
                     </thead>
@@ -558,7 +559,7 @@ export function RateCardsClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="A descriptive name for this rate card, typically including the year or client name." /></label>
                 <input
                   type="text"
                   value={editingCard.name}
@@ -569,7 +570,7 @@ export function RateCardsClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Client</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Client <InfoTooltip content="Optionally tie this rate card to a specific client. Client-specific cards override the default rates for that client's projects." /></label>
                 <select
                   value={editingCard.clientId}
                   onChange={(e) => setEditingCard({ ...editingCard, clientId: e.target.value })}
@@ -586,7 +587,7 @@ export function RateCardsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Currency</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Currency <InfoTooltip content="3-letter ISO currency code (e.g. EUR, USD). All rates in this card use this currency." /></label>
                   <input
                     type="text"
                     value={editingCard.currency}
@@ -597,7 +598,7 @@ export function RateCardsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Source</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Source <InfoTooltip content="Where these rates came from (e.g. Finance dept, Client contract). For documentation only." /></label>
                   <input
                     type="text"
                     value={editingCard.source}
@@ -610,7 +611,7 @@ export function RateCardsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Effective From</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Effective From <InfoTooltip content="Start date of this rate card's validity. Allocations before this date will not use these rates." /></label>
                   <input
                     type="date"
                     value={editingCard.effectiveFrom}
@@ -619,7 +620,7 @@ export function RateCardsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Effective To</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Effective To <InfoTooltip content="End date of this rate card's validity. Leave empty for open-ended validity." /></label>
                   <input
                     type="date"
                     value={editingCard.effectiveTo}
@@ -658,7 +659,7 @@ export function RateCardsClient() {
 
             <div className="px-6 py-5 space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role <InfoTooltip content="The job role this rate line applies to. Rates are matched to allocations by role, chapter, seniority, and location." /></label>
                 <select
                   value={editingLine.roleId}
                   onChange={(e) => setEditingLine({ ...editingLine, roleId: e.target.value })}
@@ -673,7 +674,7 @@ export function RateCardsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Chapter</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Chapter <InfoTooltip content="Production discipline this rate applies to." /></label>
                   <input
                     type="text"
                     value={editingLine.chapter}
@@ -683,7 +684,7 @@ export function RateCardsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Location</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Location <InfoTooltip content="Geographic location for region-specific rate pricing." /></label>
                   <input
                     type="text"
                     value={editingLine.location}
@@ -696,7 +697,7 @@ export function RateCardsClient() {
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Seniority</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Seniority <InfoTooltip content="Experience level filter for this rate line." /></label>
                   <input
                     type="text"
                     value={editingLine.seniority}
@@ -706,7 +707,7 @@ export function RateCardsClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Work Type</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Work Type <InfoTooltip content="Work arrangement type (e.g. Onsite, Remote)." /></label>
                   <input
                     type="text"
                     value={editingLine.workType}
@@ -718,7 +719,7 @@ export function RateCardsClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Service Group</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Service Group <InfoTooltip content="Broad service category (e.g. Post Production, VFX). Used for grouping rates in reports." /></label>
                 <input
                   type="text"
                   value={editingLine.serviceGroup}
@@ -730,7 +731,7 @@ export function RateCardsClient() {
 
               <div className="grid grid-cols-3 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cost Rate (cents)</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cost Rate (cents) <InfoTooltip content="Internal hourly cost in cents. E.g. 7500 = 75.00 EUR/h. This is the company's actual cost and flows into budget calculations." /></label>
                   <input
                     type="number"
                     value={editingLine.costRateCents}
@@ -741,7 +742,7 @@ export function RateCardsClient() {
                   <span className="text-xs text-gray-400 mt-0.5 block">= {formatCents(editingLine.costRateCents)}</span>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Bill Rate (cents)</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Bill Rate (cents) <InfoTooltip content="Hourly rate charged to the client in cents. The margin is bill rate minus cost rate." /></label>
                   <input
                     type="number"
                     value={editingLine.billRateCents}
@@ -752,7 +753,7 @@ export function RateCardsClient() {
                   <span className="text-xs text-gray-400 mt-0.5 block">= {formatCents(editingLine.billRateCents)}</span>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Machine Rate (cents)</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Machine Rate (cents) <InfoTooltip content="Hourly compute/render cost in cents. Added on top of personnel costs for render-heavy roles." /></label>
                   <input
                     type="number"
                     value={editingLine.machineRateCents}
diff --git a/apps/web/src/components/admin/SystemRolesClient.tsx b/apps/web/src/components/admin/SystemRolesClient.tsx
new file mode 100644
index 0000000..6f67026
--- /dev/null
+++ b/apps/web/src/components/admin/SystemRolesClient.tsx
@@ -0,0 +1,448 @@
+"use client";
+
+import { useState } from "react";
+import { PermissionKey } from "@planarchy/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+
+const ALL_PERMISSION_KEYS = Object.values(PermissionKey);
+
+const PERMISSION_LABELS: Record<string, string> = {
+  viewCosts: "View Costs",
+  exportData: "Export Data",
+  importData: "Import Data",
+  approveVacations: "Approve Vacations",
+  manageBlueprints: "Manage Blueprints",
+  viewAllResources: "View All Resources",
+  manageResources: "Manage Resources",
+  manageProjects: "Manage Projects",
+  manageAllocations: "Manage Allocations",
+  manageRoles: "Manage Roles",
+  manageUsers: "Manage Users",
+  viewScores: "View Scores",
+};
+
+const PERMISSION_DESCRIPTIONS: Record<string, string> = {
+  viewCosts: "Access to cost data, budget views, and financial reports",
+  exportData: "Export data to Excel, CSV, or PDF formats",
+  importData: "Import data from external sources (Dispo, Excel)",
+  approveVacations: "Approve or reject vacation requests",
+  manageBlueprints: "Create and edit blueprint field definitions",
+  viewAllResources: "View all resources (not just own team)",
+  manageResources: "Create, edit, and deactivate resource records",
+  manageProjects: "Create, edit, and manage project records",
+  manageAllocations: "Create, edit, and delete allocations",
+  manageRoles: "Create and edit project roles",
+  manageUsers: "Manage user accounts and permissions",
+  viewScores: "View value scores and skill analytics",
+};
+
+const COLOR_OPTIONS = [
+  { value: "purple", label: "Purple", class: "bg-purple-500" },
+  { value: "blue", label: "Blue", class: "bg-blue-500" },
+  { value: "amber", label: "Amber", class: "bg-amber-500" },
+  { value: "green", label: "Green", class: "bg-green-500" },
+  { value: "red", label: "Red", class: "bg-red-500" },
+  { value: "gray", label: "Gray", class: "bg-gray-500" },
+  { value: "indigo", label: "Indigo", class: "bg-indigo-500" },
+  { value: "teal", label: "Teal", class: "bg-teal-500" },
+];
+
+const ROLE_COLOR_MAP: Record<string, string> = {
+  purple: "border-purple-300 bg-purple-50 dark:border-purple-700 dark:bg-purple-900/20",
+  blue: "border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20",
+  amber: "border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20",
+  green: "border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20",
+  red: "border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/20",
+  gray: "border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50",
+  indigo: "border-indigo-300 bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-900/20",
+  teal: "border-teal-300 bg-teal-50 dark:border-teal-700 dark:bg-teal-900/20",
+};
+
+const ROLE_BADGE_MAP: Record<string, string> = {
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
+  amber: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
+  green: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  red: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+  gray: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+  indigo: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-400",
+  teal: "bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-400",
+};
+
+type RoleConfig = {
+  role: string;
+  label: string;
+  description: string | null;
+  defaultPermissions: unknown;
+  color: string | null;
+  sortOrder: number;
+};
+
+type EditingRole = {
+  role: string;
+  label: string;
+  description: string;
+  color: string;
+  permissions: Set<string>;
+};
+
+export function SystemRolesClient() {
+  const [editingRole, setEditingRole] = useState<EditingRole | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const utils = trpc.useUtils();
+  const { data: roleConfigs, isLoading } = trpc.systemRoleConfig.list.useQuery(undefined, {
+    staleTime: 10_000,
+  });
+
+  const updateMutation = trpc.systemRoleConfig.update.useMutation({
+    onSuccess: async () => {
+      await utils.systemRoleConfig.list.invalidate();
+      setEditingRole(null);
+      setActionError(null);
+      setSuccessMessage("Role permissions updated successfully");
+      setTimeout(() => setSuccessMessage(null), 3000);
+    },
+    onError: (err) => setActionError(err.message),
+  });
+
+  function openEdit(config: RoleConfig) {
+    setEditingRole({
+      role: config.role,
+      label: config.label,
+      description: config.description ?? "",
+      color: config.color ?? "gray",
+      permissions: new Set(config.defaultPermissions as string[]),
+    });
+    setActionError(null);
+    setSuccessMessage(null);
+  }
+
+  function togglePermission(key: string) {
+    if (!editingRole) return;
+    const next = new Set(editingRole.permissions);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    setEditingRole({ ...editingRole, permissions: next });
+  }
+
+  function selectAll() {
+    if (!editingRole) return;
+    setEditingRole({ ...editingRole, permissions: new Set(ALL_PERMISSION_KEYS) });
+  }
+
+  function selectNone() {
+    if (!editingRole) return;
+    setEditingRole({ ...editingRole, permissions: new Set() });
+  }
+
+  async function handleSave() {
+    if (!editingRole) return;
+    setActionError(null);
+    await updateMutation.mutateAsync({
+      role: editingRole.role,
+      label: editingRole.label,
+      description: editingRole.description || null,
+      color: editingRole.color,
+      defaultPermissions: Array.from(editingRole.permissions),
+    });
+  }
+
+  const configs = (roleConfigs ?? []) as unknown as RoleConfig[];
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">System Role Management</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          Configure default permissions for each system role. Changes apply to all users with that role.
+        </p>
+      </div>
+
+      {successMessage && (
+        <div className="mb-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 px-4 py-3 text-sm text-green-700 dark:text-green-400">
+          {successMessage}
+        </div>
+      )}
+
+      {isLoading && (
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-24 shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
+          ))}
+        </div>
+      )}
+
+      {/* Role Cards */}
+      <div className="space-y-3">
+        {configs.map((config) => {
+          const perms = config.defaultPermissions as string[];
+          const color = config.color ?? "gray";
+          return (
+            <div
+              key={config.role}
+              className={`rounded-xl border-2 p-4 transition-colors ${ROLE_COLOR_MAP[color] ?? ROLE_COLOR_MAP.gray}`}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-1">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${ROLE_BADGE_MAP[color] ?? ROLE_BADGE_MAP.gray}`}>
+                      {config.label}
+                    </span>
+                    <span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
+                      {config.role}
+                    </span>
+                  </div>
+                  {config.description && (
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                      {config.description}
+                    </p>
+                  )}
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {perms.length === 0 ? (
+                      <span className="text-xs text-gray-400 dark:text-gray-500 italic">No default permissions</span>
+                    ) : (
+                      perms.map((p) => (
+                        <span
+                          key={p}
+                          className="inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-white/60 dark:bg-white/10 text-gray-700 dark:text-gray-300"
+                        >
+                          {PERMISSION_LABELS[p] ?? p}
+                        </span>
+                      ))
+                    )}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => openEdit(config)}
+                  className="flex-shrink-0 ml-4 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-white/50 dark:hover:bg-gray-800/50 transition-colors"
+                >
+                  Configure
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Permission Matrix Overview */}
+      {configs.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3 flex items-center">
+            Permission Matrix <InfoTooltip content="Overview of which permissions each role has by default." />
+          </h2>
+          <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-x-auto">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                  <th className="px-3 py-2 text-left font-medium text-gray-600 dark:text-gray-400 sticky left-0 bg-gray-50 dark:bg-gray-800/50">Permission</th>
+                  {configs.map((c) => (
+                    <th key={c.role} className="px-3 py-2 text-center font-medium text-gray-600 dark:text-gray-400 min-w-[80px]">
+                      {c.label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {ALL_PERMISSION_KEYS.map((key) => (
+                  <tr key={key} className="border-b border-gray-100 dark:border-gray-800">
+                    <td className="px-3 py-1.5 text-gray-700 dark:text-gray-300 font-medium sticky left-0 bg-white dark:bg-gray-900">
+                      {PERMISSION_LABELS[key] ?? key}
+                    </td>
+                    {configs.map((c) => {
+                      const perms = c.defaultPermissions as string[];
+                      const has = perms.includes(key);
+                      return (
+                        <td key={c.role} className="px-3 py-1.5 text-center">
+                          {has ? (
+                            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/40 text-green-600 dark:text-green-400">
+                              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                              </svg>
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full text-gray-300 dark:text-gray-600">
+                              &mdash;
+                            </span>
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {editingRole && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-lg mx-4 flex flex-col max-h-[90vh]">
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  Configure Role
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+                  {editingRole.role}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => { setEditingRole(null); setActionError(null); }}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
+              >
+                &times;
+              </button>
+            </div>
+
+            <div className="overflow-y-auto flex-1 px-6 py-5 space-y-5">
+              {actionError && (
+                <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-3 py-2 text-sm text-red-700 dark:text-red-400">
+                  {actionError}
+                </div>
+              )}
+
+              {/* Label */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Display Name
+                </label>
+                <input
+                  type="text"
+                  value={editingRole.label}
+                  onChange={(e) => setEditingRole({ ...editingRole, label: e.target.value })}
+                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+                />
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Description
+                </label>
+                <input
+                  type="text"
+                  value={editingRole.description}
+                  onChange={(e) => setEditingRole({ ...editingRole, description: e.target.value })}
+                  placeholder="Brief description of this role..."
+                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+                />
+              </div>
+
+              {/* Color */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Badge Color
+                </label>
+                <div className="flex gap-2">
+                  {COLOR_OPTIONS.map((opt) => (
+                    <button
+                      key={opt.value}
+                      type="button"
+                      onClick={() => setEditingRole({ ...editingRole, color: opt.value })}
+                      className={`w-7 h-7 rounded-full ${opt.class} transition-all ${
+                        editingRole.color === opt.value
+                          ? "ring-2 ring-offset-2 ring-brand-500 dark:ring-offset-gray-900 scale-110"
+                          : "opacity-60 hover:opacity-100"
+                      }`}
+                      title={opt.label}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* Permissions */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Default Permissions ({editingRole.permissions.size}/{ALL_PERMISSION_KEYS.length})
+                  </label>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={selectAll}
+                      className="text-[11px] text-brand-600 hover:text-brand-800 font-medium"
+                    >
+                      Select all
+                    </button>
+                    <button
+                      type="button"
+                      onClick={selectNone}
+                      className="text-[11px] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 font-medium"
+                    >
+                      Clear all
+                    </button>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  {ALL_PERMISSION_KEYS.map((key) => {
+                    const isActive = editingRole.permissions.has(key);
+                    return (
+                      <button
+                        key={key}
+                        type="button"
+                        onClick={() => togglePermission(key)}
+                        className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg border text-sm text-left transition-colors ${
+                          isActive
+                            ? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800"
+                            : "bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
+                        }`}
+                      >
+                        <span className={`flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center ${
+                          isActive
+                            ? "text-green-600 border-green-300 bg-green-100 dark:bg-green-900/40"
+                            : "border-gray-300 dark:border-gray-600"
+                        }`}>
+                          {isActive && (
+                            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                            </svg>
+                          )}
+                        </span>
+                        <div className="flex-1 min-w-0">
+                          <span className={isActive ? "text-gray-900 dark:text-gray-100 font-medium" : "text-gray-500 dark:text-gray-400"}>
+                            {PERMISSION_LABELS[key] ?? key}
+                          </span>
+                          <p className="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5 truncate">
+                            {PERMISSION_DESCRIPTIONS[key] ?? ""}
+                          </p>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+              <button
+                type="button"
+                onClick={() => { setEditingRole(null); setActionError(null); }}
+                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleSave()}
+                disabled={updateMutation.isPending || !editingRole.label.trim()}
+                className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {updateMutation.isPending ? "Saving..." : "Save Changes"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/SystemSettingsClient.tsx b/apps/web/src/components/admin/SystemSettingsClient.tsx
index 81dc4df..59d0baa 100644
--- a/apps/web/src/components/admin/SystemSettingsClient.tsx
+++ b/apps/web/src/components/admin/SystemSettingsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 const INPUT_CLASS = "app-input";
@@ -90,6 +91,11 @@ export function SystemSettingsClient() {
   const [scoreSaved, setScoreSaved] = useState(false);
   const [recomputeResult, setRecomputeResult] = useState<{ updated: number } | null>(null);
 
+  // DALL-E settings
+  const [dalleDeployment, setDalleDeployment] = useState("");
+  const [dalleEndpoint, setDalleEndpoint] = useState("");
+  const [dalleApiKey, setDalleApiKey] = useState("");
+
   // SMTP settings
   const [smtpHost, setSmtpHost] = useState("");
   const [smtpPort, setSmtpPort] = useState(587);
@@ -112,6 +118,10 @@ export function SystemSettingsClient() {
   const [vacationDefaultDays, setVacationDefaultDays] = useState(28);
   const [vacationSaved, setVacationSaved] = useState(false);
 
+  // Timeline
+  const [undoMaxSteps, setUndoMaxSteps] = useState(50);
+  const [timelineSaved, setTimelineSaved] = useState(false);
+
   const { data: settings, isLoading } = trpc.settings.getSystemSettings.useQuery(undefined, {
     staleTime: 0,
   });
@@ -131,6 +141,9 @@ export function SystemSettingsClient() {
       if (settings.scoreVisibleRoles) {
         setScoreVisibleRoles(settings.scoreVisibleRoles as SystemRole[]);
       }
+      // DALL-E
+      setDalleDeployment(settings.azureDalleDeployment ?? "");
+      setDalleEndpoint(settings.azureDalleEndpoint ?? "");
       // SMTP
       setSmtpHost(settings.smtpHost ?? "");
       setSmtpPort(settings.smtpPort ?? 587);
@@ -143,6 +156,8 @@ export function SystemSettingsClient() {
       setAnonymizationSeed("");
       // Vacation
       setVacationDefaultDays(settings.vacationDefaultDays ?? 28);
+      // Timeline
+      setUndoMaxSteps(settings.timelineUndoMaxSteps ?? 50);
     }
   }, [settings]);
 
@@ -218,6 +233,13 @@ export function SystemSettingsClient() {
     },
   });
 
+  const saveTimelineMutation = trpc.settings.updateSystemSettings.useMutation({
+    onSuccess: () => {
+      setTimelineSaved(true);
+      setTimeout(() => setTimelineSaved(false), 3000);
+    },
+  });
+
   function handleSaveSmtp() {
     saveSmtpMutation.mutate({
       smtpHost: smtpHost || undefined,
@@ -233,6 +255,10 @@ export function SystemSettingsClient() {
     saveVacationMutation.mutate({ vacationDefaultDays });
   }
 
+  function handleSaveTimeline() {
+    saveTimelineMutation.mutate({ timelineUndoMaxSteps: undoMaxSteps });
+  }
+
   function handleSaveAnonymization() {
     saveAnonymizationMutation.mutate({
       anonymizationEnabled,
@@ -269,13 +295,16 @@ export function SystemSettingsClient() {
       aiTemperature: temperature,
       aiSummaryPrompt: summaryPrompt || undefined,
       ...(apiKey ? { azureOpenAiApiKey: apiKey } : {}),
+      azureDalleDeployment: dalleDeployment,
+      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
+      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
     });
   }
 
   if (isLoading) {
     return (
-      <div className="app-page animate-pulse">
-        <div className="h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" />
+      <div className="app-page">
+        <div className="h-8 w-48 shimmer-skeleton rounded" />
       </div>
     );
   }
@@ -293,8 +322,8 @@ export function SystemSettingsClient() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
         <div className={PANEL_CLASS}>
-          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200">
-            AI Provider
+          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
+            AI Provider <InfoTooltip content="Configure the AI service used for generating resource skill profile summaries. Either OpenAI directly or Azure OpenAI Service." />
           </h2>
 
           {/* Provider toggle */}
@@ -522,8 +551,8 @@ export function SystemSettingsClient() {
 
         {/* Generation settings */}
         <div className={PANEL_CLASS}>
-          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200">
-            Generation Settings
+          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
+            Generation Settings <InfoTooltip content="Fine-tune how the AI generates skill profile summaries. These settings affect output length, creativity, and the prompt template." />
           </h2>
 
           {/* Max completion tokens */}
@@ -989,11 +1018,76 @@ export function SystemSettingsClient() {
         </div>
       </div>
 
+      {/* ── DALL-E Image Generation ────────────────────────────────── */}
+      <div className={PANEL_CLASS}>
+        <div>
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+            DALL-E Image Generation <InfoTooltip content="Configure the DALL-E model used for generating project cover art. Uses the same provider (OpenAI / Azure) as the chat model above." />
+          </h2>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            Used to generate AI cover art for projects. Leave blank to disable AI cover generation.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div>
+            <label className={LABEL_CLASS}>
+              <span className="flex items-center">
+                Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
+              </span>
+            </label>
+            <input
+              type="text"
+              className={INPUT_CLASS}
+              value={dalleDeployment}
+              onChange={(e) => setDalleDeployment(e.target.value)}
+              placeholder="dall-e-3"
+            />
+          </div>
+
+          {provider === "azure" && (
+            <>
+              <div>
+                <label className={LABEL_CLASS}>
+                  <span className="flex items-center">
+                    Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
+                  </span>
+                </label>
+                <input
+                  type="text"
+                  className={INPUT_CLASS}
+                  value={dalleEndpoint}
+                  onChange={(e) => setDalleEndpoint(e.target.value)}
+                  placeholder="Leave empty to use same endpoint as chat"
+                />
+              </div>
+
+              <div>
+                <label className={LABEL_CLASS}>
+                  <span className="flex items-center">
+                    API Key{" "}
+                    <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
+                    <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
+                  </span>
+                </label>
+                <input
+                  type="password"
+                  className={INPUT_CLASS}
+                  value={dalleApiKey}
+                  onChange={(e) => setDalleApiKey(e.target.value)}
+                  placeholder="Leave empty to use same API key as chat"
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
       {/* ── SMTP / Email ──────────────────────────────────────────── */}
       <div className={PANEL_CLASS}>
         <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
-            Email Notifications (SMTP)
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+            Email Notifications (SMTP) <InfoTooltip content="Configure SMTP to send email notifications for vacation approvals/rejections. Without SMTP, only in-app notifications are sent." />
           </h2>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
             Used to send email notifications when vacation requests are approved or rejected.
@@ -1002,7 +1096,7 @@ export function SystemSettingsClient() {
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
-            <label className={LABEL_CLASS}>SMTP Host</label>
+            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Host <InfoTooltip content="The SMTP server hostname (e.g. smtp.gmail.com, smtp.office365.com)." /></span></label>
             <input
               type="text"
               className={INPUT_CLASS}
@@ -1012,7 +1106,7 @@ export function SystemSettingsClient() {
             />
           </div>
           <div>
-            <label className={LABEL_CLASS}>SMTP Port</label>
+            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Port <InfoTooltip content="Common ports: 587 (STARTTLS), 465 (SSL/TLS), 25 (unencrypted). Use 587 for most providers." /></span></label>
             <input
               type="number"
               className={INPUT_CLASS}
@@ -1023,7 +1117,7 @@ export function SystemSettingsClient() {
             />
           </div>
           <div>
-            <label className={LABEL_CLASS}>SMTP Username</label>
+            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Username <InfoTooltip content="Authentication username for the SMTP server. Often the same as the email address." /></span></label>
             <input
               type="text"
               className={INPUT_CLASS}
@@ -1034,8 +1128,8 @@ export function SystemSettingsClient() {
             />
           </div>
           <div>
-            <label className={LABEL_CLASS}>
-              SMTP Password{" "}
+            <label className={LABEL_CLASS}><span className="flex items-center">
+              SMTP Password <InfoTooltip content="The SMTP authentication password. Stored encrypted. Leave blank to keep the existing password." />{" "}</span>
               {settings?.hasSmtpPassword && (
                 <span className="text-gray-400 font-normal text-xs">
                   (set — leave blank to keep)
@@ -1052,7 +1146,7 @@ export function SystemSettingsClient() {
             />
           </div>
           <div>
-            <label className={LABEL_CLASS}>From Address</label>
+            <label className={LABEL_CLASS}><span className="flex items-center">From Address <InfoTooltip content="The sender email address shown in notification emails (e.g. noreply@planarchy.app)." /></span></label>
             <input
               type="email"
               className={INPUT_CLASS}
@@ -1111,8 +1205,8 @@ export function SystemSettingsClient() {
       {/* ── Vacation Defaults ─────────────────────────────────────── */}
       <div className={PANEL_CLASS}>
         <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
-            Vacation Defaults
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+            Vacation Defaults <InfoTooltip content="Sets the default vacation entitlement applied when creating new resources or using the bulk-set tool in Vacation Management." />
           </h2>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
             Default annual leave entitlement for new resources and the entitlement bulk-set tool.
@@ -1120,7 +1214,7 @@ export function SystemSettingsClient() {
         </div>
 
         <div className="max-w-xs">
-          <label className={LABEL_CLASS}>Default Annual Leave Days</label>
+          <label className={LABEL_CLASS}><span className="flex items-center">Default Annual Leave Days <InfoTooltip content="The number of vacation days granted per year. In Germany, the legal minimum is 20 days; 28-30 is common. This value is used when creating new entitlement records." /></span></label>
           <input
             type="number"
             className={INPUT_CLASS}
@@ -1151,8 +1245,48 @@ export function SystemSettingsClient() {
 
       <div className={PANEL_CLASS}>
         <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
-            Viewer Anonymization
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+            Timeline <InfoTooltip content="Settings for the timeline view, including undo history depth." />
+          </h2>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            Configure timeline behavior and undo/redo history.
+          </p>
+        </div>
+
+        <div className="max-w-xs">
+          <label className={LABEL_CLASS}>Undo History Depth</label>
+          <input
+            type="number"
+            className={INPUT_CLASS}
+            value={undoMaxSteps}
+            onChange={(e) => setUndoMaxSteps(parseInt(e.target.value, 10) || 50)}
+            min={1}
+            max={200}
+          />
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            Maximum number of undo steps for timeline operations (single moves and batch shifts). Default: 50.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={handleSaveTimeline}
+            disabled={saveTimelineMutation.isPending}
+            className={PRIMARY_BUTTON_CLASS}
+          >
+            {saveTimelineMutation.isPending ? "Saving…" : "Save Timeline Settings"}
+          </button>
+          {timelineSaved && (
+            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
+          )}
+        </div>
+      </div>
+
+      <div className={PANEL_CLASS}>
+        <div>
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
+            Viewer Anonymization <InfoTooltip content="When enabled, all resource names, EIDs, and emails are replaced with stable fictional aliases (e.g. superhero names) in the UI. Real data stays in the database. Useful for demos and screenshots." />
           </h2>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
             Global debug mode that keeps real identities in the database but replaces displayed
diff --git a/apps/web/src/components/admin/UsersClient.tsx b/apps/web/src/components/admin/UsersClient.tsx
index df71332..e936a4d 100644
--- a/apps/web/src/components/admin/UsersClient.tsx
+++ b/apps/web/src/components/admin/UsersClient.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
-import { SystemRole, PermissionKey, type PermissionOverrides } from "@planarchy/shared";
+import { useState, useMemo } from "react";
+import { SystemRole, PermissionKey, ROLE_DEFAULT_PERMISSIONS, type PermissionOverrides } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { FilterChips } from "~/components/ui/FilterChips.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
@@ -55,6 +56,9 @@ type UserRow = {
   email: string;
   systemRole: string;
   createdAt: Date;
+  lastLoginAt: Date | null;
+  lastActiveAt: Date | null;
+  permissionOverrides: PermissionOverrides | null;
 };
 
 type EditState = {
@@ -93,6 +97,25 @@ export function UsersClient() {
     staleTime: 10_000,
   });
 
+  const { data: roleConfigs } = trpc.systemRoleConfig.list.useQuery(undefined, {
+    staleTime: 60_000,
+  });
+
+  // Build dynamic role defaults map from DB config (fallback to hardcoded)
+  const roleDefaultsMap = useMemo(() => {
+    if (!roleConfigs) return ROLE_DEFAULT_PERMISSIONS;
+    const map: Record<string, string[]> = {};
+    for (const c of roleConfigs) {
+      map[c.role] = c.defaultPermissions as string[];
+    }
+    return map as Record<SystemRole, string[]>;
+  }, [roleConfigs]);
+
+  const { data: activeData } = trpc.user.activeCount.useQuery(undefined, {
+    staleTime: 30_000,
+    refetchInterval: 30_000,
+  });
+
   const { data: effectivePerms } = trpc.user.getEffectivePermissions.useQuery(
     { userId: selectedUserId ?? "" },
     { enabled: !!selectedUserId },
@@ -145,13 +168,14 @@ export function UsersClient() {
 
   function openEdit(user: UserRow) {
     const role = (user.systemRole as SystemRole) ?? SystemRole.USER;
+    const overrides = user.permissionOverrides as PermissionOverrides | null;
     setSelectedUserId(user.id);
     setEditState({
       userId: user.id,
       systemRole: role,
-      granted: new Set(),
-      denied: new Set(),
-      chapterIds: "",
+      granted: new Set(overrides?.granted ?? []),
+      denied: new Set(overrides?.denied ?? []),
+      chapterIds: (overrides?.chapterIds ?? []).join(", "),
     });
     setActionError(null);
   }
@@ -279,6 +303,21 @@ export function UsersClient() {
     ...(roleFilter ? [{ label: `Role: ${SYSTEM_ROLE_LABELS[roleFilter]}`, onRemove: () => setRoleFilter("") }] : []),
   ];
 
+  function isOnline(user: UserRow) {
+    if (!user.lastActiveAt) return false;
+    return Date.now() - new Date(user.lastActiveAt).getTime() < 5 * 60 * 1000;
+  }
+
+  function formatRelativeTime(date: Date | null) {
+    if (!date) return "Never";
+    const d = new Date(date);
+    const diff = Date.now() - d.getTime();
+    if (diff < 60_000) return "Just now";
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+    return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
+  }
+
   return (
     <div className="p-6 max-w-5xl mx-auto">
       <div className="flex items-center justify-between mb-6">
@@ -288,7 +327,18 @@ export function UsersClient() {
             Manage user roles and permission overrides
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
+          {activeData && (
+            <div className="flex items-center gap-2 rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 px-3 py-2 text-sm">
+              <span className="relative flex h-2.5 w-2.5">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
+              </span>
+              <span className="font-medium text-green-700 dark:text-green-400">
+                {activeData.count} online
+              </span>
+            </div>
+          )}
           <button
             type="button"
             onClick={() => void autoLinkMutation.mutateAsync().then((r) => {
@@ -362,9 +412,11 @@ export function UsersClient() {
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-              <SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
-              <SortableColumnHeader label="Email" field="email" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
+              <SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="The user's display name. Shown in the UI and linked to a resource record if auto-linked." />
+              <SortableColumnHeader label="Email" field="email" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Login email address. Also used to auto-link user accounts to resource records by matching email." />
               <SortableColumnHeader label="Role" field="systemRole" sortField={sortField} sortDir={sortDir} onSort={handleSort} align="center" tooltip="System role determines default access level. ADMIN: full access · MANAGER: manage resources/projects · CONTROLLER: read + export costs · USER: standard access · VIEWER: read-only. Individual permissions can be overridden via the edit dialog." tooltipWidth="w-80" />
+              <th className="px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider text-center">Status</th>
+              <SortableColumnHeader label="Last Login" field="lastLoginAt" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="When the user last signed in." />
               <SortableColumnHeader label="Created" field="createdAt" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Account creation date." />
               <th className="text-right px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Actions</th>
             </tr>
@@ -372,14 +424,14 @@ export function UsersClient() {
           <tbody>
             {isLoading && (
               <tr>
-                <td colSpan={5} className="text-center py-8 text-gray-400">
+                <td colSpan={7} className="text-center py-8 text-gray-400">
                   Loading…
                 </td>
               </tr>
             )}
             {!isLoading && sorted.length === 0 && (
               <tr>
-                <td colSpan={5} className="text-center py-8 text-gray-400">
+                <td colSpan={7} className="text-center py-8 text-gray-400">
                   No users found.
                 </td>
               </tr>
@@ -402,6 +454,22 @@ export function UsersClient() {
                     {SYSTEM_ROLE_LABELS[user.systemRole as SystemRole] ?? user.systemRole}
                   </span>
                 </td>
+                <td className="px-4 py-3 text-center">
+                  {isOnline(user) ? (
+                    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400">
+                      <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                      Online
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500">
+                      <span className="h-1.5 w-1.5 rounded-full bg-gray-400 dark:bg-gray-600" />
+                      Offline
+                    </span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
+                  {formatRelativeTime(user.lastLoginAt)}
+                </td>
                 <td className="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
                   {new Date(user.createdAt).toLocaleDateString("en-GB")}
                 </td>
@@ -445,8 +513,8 @@ export function UsersClient() {
               )}
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Name
+                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Name <InfoTooltip content="The display name for this user account." />
                 </label>
                 <input
                   type="text"
@@ -458,8 +526,8 @@ export function UsersClient() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Email
+                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Email <InfoTooltip content="Login email address. Also used to auto-link the user to a resource record." />
                 </label>
                 <input
                   type="email"
@@ -471,8 +539,8 @@ export function UsersClient() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Password
+                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Password <InfoTooltip content="Minimum 8 characters. Stored securely using Argon2 hashing." />
                 </label>
                 <input
                   type="password"
@@ -484,8 +552,8 @@ export function UsersClient() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Role
+                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Role <InfoTooltip content="ADMIN: full system access. MANAGER: manage resources, projects, allocations. CONTROLLER: read + export financial data. USER: standard access. VIEWER: read-only." />
                 </label>
                 <select
                   value={createState.systemRole}
@@ -547,8 +615,8 @@ export function UsersClient() {
             <div className="overflow-y-auto flex-1 px-6 py-5 space-y-6">
               {/* System Role */}
               <section>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  System Role
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+                  System Role <InfoTooltip content="The base role determines default permissions. Change the role and click 'Save Role' to apply. Permission overrides below can further customize access." />
                 </h3>
                 <div className="flex items-center gap-3">
                   <select
@@ -575,89 +643,114 @@ export function UsersClient() {
                 </div>
               </section>
 
-              {/* Effective Permissions */}
-              {effectivePerms && (
-                <section>
-                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
-                    Effective Permissions
-                  </h3>
-                  <div className="flex flex-wrap gap-1.5">
-                    {ALL_PERMISSION_KEYS.map((key) => {
-                      const isActive = effectivePerms.effectivePermissions.includes(key);
-                      return (
-                        <span
-                          key={key}
-                          className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
-                            isActive
-                              ? "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400"
-                              : "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-600 line-through"
-                          }`}
-                        >
+              {/* Permissions */}
+              <section>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                  Permissions <InfoTooltip content="Permissions inherited from the role are shown with a filled checkbox. Click to override: grant additional permissions or deny role defaults." />
+                </h3>
+                <div className="flex gap-1.5 mb-3 text-[11px]">
+                  <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    <span className="inline-block w-3 h-3 rounded border border-green-400 bg-green-100 dark:bg-green-900/40" /> Role default
+                  </span>
+                  <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    <span className="inline-block w-3 h-3 rounded border border-blue-400 bg-blue-100 dark:bg-blue-900/40" /> Extra grant
+                  </span>
+                  <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    <span className="inline-block w-3 h-3 rounded border border-red-400 bg-red-100 dark:bg-red-900/40 relative"><span className="absolute inset-0 flex items-center justify-center text-red-500 text-[9px] leading-none">&times;</span></span> Denied
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  {ALL_PERMISSION_KEYS.map((key) => {
+                    const roleDefaults = new Set(roleDefaultsMap[editState.systemRole] ?? []);
+                    const isRoleDefault = roleDefaults.has(key as PermissionKey);
+                    const isGranted = editState.granted.has(key);
+                    const isDenied = editState.denied.has(key);
+
+                    // Determine display state
+                    let state: "default" | "granted" | "denied" | "off";
+                    if (isDenied) state = "denied";
+                    else if (isGranted) state = "granted";
+                    else if (isRoleDefault) state = "default";
+                    else state = "off";
+
+                    function cycleState() {
+                      if (!editState) return;
+                      const nextGranted = new Set(editState.granted);
+                      const nextDenied = new Set(editState.denied);
+
+                      if (isRoleDefault) {
+                        // Role default: off → denied → off
+                        if (isDenied) {
+                          nextDenied.delete(key);
+                        } else {
+                          nextDenied.add(key);
+                          nextGranted.delete(key);
+                        }
+                      } else {
+                        // Non-default: off → granted → off
+                        if (isGranted) {
+                          nextGranted.delete(key);
+                        } else {
+                          nextGranted.add(key);
+                          nextDenied.delete(key);
+                        }
+                      }
+                      setEditState({ ...editState, granted: nextGranted, denied: nextDenied });
+                    }
+
+                    const stateStyles = {
+                      default: "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800",
+                      granted: "bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800",
+                      denied: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800",
+                      off: "bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700",
+                    };
+
+                    const checkStyles = {
+                      default: "text-green-600 border-green-300 bg-green-100 dark:bg-green-900/40",
+                      granted: "text-blue-600 border-blue-300 bg-blue-100 dark:bg-blue-900/40",
+                      denied: "text-red-600 border-red-300 bg-red-100 dark:bg-red-900/40",
+                      off: "text-gray-400 border-gray-300 dark:border-gray-600",
+                    };
+
+                    return (
+                      <button
+                        key={key}
+                        type="button"
+                        onClick={cycleState}
+                        className={`flex items-center gap-2.5 w-full px-3 py-1.5 rounded-lg border text-sm text-left transition-colors ${stateStyles[state]} hover:opacity-80`}
+                      >
+                        <span className={`flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center ${checkStyles[state]}`}>
+                          {state === "default" && (
+                            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg>
+                          )}
+                          {state === "granted" && (
+                            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" /></svg>
+                          )}
+                          {state === "denied" && (
+                            <span className="text-xs font-bold leading-none">&times;</span>
+                          )}
+                        </span>
+                        <span className={`flex-1 ${state === "denied" ? "line-through text-red-500 dark:text-red-400" : state === "off" ? "text-gray-500 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"}`}>
                           {PERMISSION_LABELS[key] ?? key}
                         </span>
-                      );
-                    })}
-                  </div>
-                </section>
-              )}
-
-              {/* Permission Overrides */}
-              <section>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  Permission Overrides
-                </h3>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  {/* Additional Grants */}
-                  <div>
-                    <p className="text-xs font-medium text-green-700 dark:text-green-400 mb-2 uppercase tracking-wide">
-                      Additional Grants
-                    </p>
-                    <div className="space-y-1.5">
-                      {ALL_PERMISSION_KEYS.map((key) => (
-                        <label
-                          key={`grant-${key}`}
-                          className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={editState.granted.has(key)}
-                            onChange={() => toggleGranted(key)}
-                            className="rounded border-gray-300 text-green-600 focus:ring-green-500"
-                          />
-                          {PERMISSION_LABELS[key] ?? key}
-                        </label>
-                      ))}
-                    </div>
-                  </div>
-
-                  {/* Explicit Denials */}
-                  <div>
-                    <p className="text-xs font-medium text-red-700 dark:text-red-400 mb-2 uppercase tracking-wide">
-                      Explicit Denials
-                    </p>
-                    <div className="space-y-1.5">
-                      {ALL_PERMISSION_KEYS.map((key) => (
-                        <label
-                          key={`deny-${key}`}
-                          className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={editState.denied.has(key)}
-                            onChange={() => toggleDenied(key)}
-                            className="rounded border-gray-300 text-red-600 focus:ring-red-500"
-                          />
-                          {PERMISSION_LABELS[key] ?? key}
-                        </label>
-                      ))}
-                    </div>
-                  </div>
+                        {state === "default" && (
+                          <span className="text-[10px] text-green-600 dark:text-green-400 font-medium uppercase tracking-wide">Role</span>
+                        )}
+                        {state === "granted" && (
+                          <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium uppercase tracking-wide">Extra</span>
+                        )}
+                        {state === "denied" && (
+                          <span className="text-[10px] text-red-600 dark:text-red-400 font-medium uppercase tracking-wide">Denied</span>
+                        )}
+                      </button>
+                    );
+                  })}
                 </div>
 
                 {/* Chapter Scope */}
                 <div className="mt-4">
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
-                    Chapter Scope (comma-separated IDs, leave blank for all)
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                    Chapter Scope (comma-separated IDs, leave blank for all) <InfoTooltip content="Restrict this user's access to specific chapters/disciplines only. Leave blank to allow access to all chapters." />
                   </label>
                   <input
                     type="text"
diff --git a/apps/web/src/components/admin/UtilizationCategoriesClient.tsx b/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
index b3e48fa..6e5eced 100644
--- a/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
+++ b/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 type CategoryRow = {
@@ -122,11 +123,11 @@ export function UtilizationCategoriesClient() {
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Code</th>
-              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Name</th>
-              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Description</th>
-              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Default</th>
-              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Order</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center">Code <InfoTooltip content="A short unique identifier (e.g. 'Chg', 'Int', 'OH'). Used in reports and exports." /></span></th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center">Name <InfoTooltip content="The display name for this category (e.g. 'Chargeable', 'Internal', 'Overhead'). Shown in dropdowns and reports." /></span></th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center">Description <InfoTooltip content="Explains what type of work falls into this category. Helps users choose the right category for projects." /></span></th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center justify-center">Default <InfoTooltip content="The default category pre-selected when creating new projects. Only one category can be default." /></span></th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider"><span className="flex items-center justify-center">Order <InfoTooltip content="Controls the display order in dropdowns and reports. Lower numbers appear first." /></span></th>
               <th className="text-right px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Actions</th>
             </tr>
           </thead>
@@ -171,7 +172,7 @@ export function UtilizationCategoriesClient() {
             <div className="px-6 py-5 space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code <InfoTooltip content="A short unique identifier for this category. Used in reports and data exports." /></label>
                   <input
                     type="text"
                     value={editing.code}
@@ -181,7 +182,7 @@ export function UtilizationCategoriesClient() {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order</label>
+                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order <InfoTooltip content="Controls display position. Lower numbers appear first." /></label>
                   <input
                     type="number"
                     value={editing.sortOrder}
@@ -192,7 +193,7 @@ export function UtilizationCategoriesClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="The display name shown in project dropdowns and chargeability reports." /></label>
                 <input
                   type="text"
                   value={editing.name}
@@ -203,7 +204,7 @@ export function UtilizationCategoriesClient() {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Description</label>
+                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Description <InfoTooltip content="Explains what type of work this category covers. Helps project managers choose the correct category." /></label>
                 <textarea
                   value={editing.description}
                   onChange={(e) => setEditing({ ...editing, description: e.target.value })}
@@ -220,7 +221,7 @@ export function UtilizationCategoriesClient() {
                   onChange={(e) => setEditing({ ...editing, isDefault: e.target.checked })}
                   className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                 />
-                Default category for new projects
+                Default category for new projects <InfoTooltip content="When checked, new projects are automatically assigned this category." />
               </label>
             </div>
 
diff --git a/apps/web/src/components/admin/WebhooksClient.tsx b/apps/web/src/components/admin/WebhooksClient.tsx
new file mode 100644
index 0000000..cb19158
--- /dev/null
+++ b/apps/web/src/components/admin/WebhooksClient.tsx
@@ -0,0 +1,416 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+
+const WEBHOOK_EVENTS = [
+  "allocation.created",
+  "allocation.updated",
+  "allocation.deleted",
+  "project.created",
+  "project.status_changed",
+  "vacation.approved",
+  "estimate.submitted",
+  "estimate.approved",
+] as const;
+
+const EVENT_LABELS: Record<string, string> = {
+  "allocation.created": "Allocation Created",
+  "allocation.updated": "Allocation Updated",
+  "allocation.deleted": "Allocation Deleted",
+  "project.created": "Project Created",
+  "project.status_changed": "Project Status Changed",
+  "vacation.approved": "Vacation Approved",
+  "estimate.submitted": "Estimate Submitted",
+  "estimate.approved": "Estimate Approved",
+};
+
+const INPUT_CLASS = "app-input";
+const LABEL_CLASS = "app-label";
+const PRIMARY_BUTTON =
+  "rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50";
+const SECONDARY_BUTTON =
+  "rounded-xl border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
+const DANGER_BUTTON =
+  "rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50";
+
+interface WebhookFormData {
+  name: string;
+  url: string;
+  secret: string;
+  events: string[];
+  isActive: boolean;
+}
+
+const emptyForm: WebhookFormData = {
+  name: "",
+  url: "",
+  secret: "",
+  events: [],
+  isActive: true,
+};
+
+function maskUrl(url: string): string {
+  try {
+    const u = new URL(url);
+    const host = u.hostname;
+    // Show scheme + host, mask the rest
+    if (u.pathname.length > 1) {
+      return `${u.protocol}//${host}/****`;
+    }
+    return `${u.protocol}//${host}`;
+  } catch {
+    return "****";
+  }
+}
+
+export function WebhooksClient() {
+  const utils = trpc.useUtils();
+  const { data: webhooks, isLoading } = trpc.webhook.list.useQuery();
+  const createMut = trpc.webhook.create.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate();
+      setModalOpen(false);
+    },
+  });
+  const updateMut = trpc.webhook.update.useMutation({
+    onSuccess: () => {
+      void utils.webhook.list.invalidate();
+      setModalOpen(false);
+    },
+  });
+  const deleteMut = trpc.webhook.delete.useMutation({
+    onSuccess: () => void utils.webhook.list.invalidate(),
+  });
+  const testMut = trpc.webhook.test.useMutation();
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState<WebhookFormData>(emptyForm);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [testResult, setTestResult] = useState<{
+    id: string;
+    success: boolean;
+    statusCode: number;
+    statusText: string;
+  } | null>(null);
+
+  function openCreateModal() {
+    setEditingId(null);
+    setForm(emptyForm);
+    setModalOpen(true);
+  }
+
+  function openEditModal(wh: {
+    id: string;
+    name: string;
+    url: string;
+    secret: string | null;
+    events: string[];
+    isActive: boolean;
+  }) {
+    setEditingId(wh.id);
+    setForm({
+      name: wh.name,
+      url: wh.url,
+      secret: wh.secret ?? "",
+      events: wh.events,
+      isActive: wh.isActive,
+    });
+    setModalOpen(true);
+  }
+
+  function toggleEvent(event: string) {
+    setForm((prev) => ({
+      ...prev,
+      events: prev.events.includes(event)
+        ? prev.events.filter((e) => e !== event)
+        : [...prev.events, event],
+    }));
+  }
+
+  function handleSubmit() {
+    if (editingId) {
+      updateMut.mutate({
+        id: editingId,
+        data: {
+          name: form.name,
+          url: form.url,
+          ...(form.secret ? { secret: form.secret } : { secret: null }),
+          events: form.events,
+          isActive: form.isActive,
+        },
+      });
+    } else {
+      createMut.mutate({
+        name: form.name,
+        url: form.url,
+        ...(form.secret ? { secret: form.secret } : {}),
+        events: form.events,
+        isActive: form.isActive,
+      });
+    }
+  }
+
+  function handleTest(id: string) {
+    setTestResult(null);
+    testMut.mutate(
+      { id },
+      {
+        onSuccess: (result) => {
+          setTestResult({ id, ...result });
+        },
+      },
+    );
+  }
+
+  function handleToggleActive(id: string, currentActive: boolean) {
+    updateMut.mutate({ id, data: { isActive: !currentActive } });
+  }
+
+  const isSaving = createMut.isPending || updateMut.isPending;
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Webhooks</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Configure outbound webhooks to notify external services about events in Planarchy.
+          </p>
+        </div>
+        <button className={PRIMARY_BUTTON} onClick={openCreateModal}>
+          Add Webhook
+        </button>
+      </div>
+
+      {/* Webhook List */}
+      {isLoading ? (
+        <div className="app-surface p-8 text-center text-gray-500">Loading...</div>
+      ) : !webhooks?.length ? (
+        <div className="app-surface p-8 text-center text-gray-500 dark:text-gray-400">
+          No webhooks configured yet.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {webhooks.map((wh) => (
+            <div
+              key={wh.id}
+              className="app-surface flex items-center gap-4 p-4"
+            >
+              {/* Active indicator */}
+              <div
+                className={`h-3 w-3 shrink-0 rounded-full ${
+                  wh.isActive ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"
+                }`}
+                title={wh.isActive ? "Active" : "Inactive"}
+              />
+
+              {/* Info */}
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-gray-900 dark:text-white">
+                    {wh.name}
+                  </span>
+                  {wh.url.includes("hooks.slack.com") && (
+                    <span className="rounded bg-purple-100 px-1.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
+                      Slack
+                    </span>
+                  )}
+                </div>
+                <div className="mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400">
+                  {maskUrl(wh.url)}
+                </div>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {wh.events.map((ev) => (
+                    <span
+                      key={ev}
+                      className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                    >
+                      {EVENT_LABELS[ev] ?? ev}
+                    </span>
+                  ))}
+                </div>
+                {/* Test result */}
+                {testResult && testResult.id === wh.id && (
+                  <div
+                    className={`mt-1 text-xs ${
+                      testResult.success
+                        ? "text-green-600 dark:text-green-400"
+                        : "text-red-600 dark:text-red-400"
+                    }`}
+                  >
+                    Test: {testResult.statusCode} {testResult.statusText}
+                  </div>
+                )}
+              </div>
+
+              {/* Actions */}
+              <div className="flex shrink-0 items-center gap-2">
+                <button
+                  className={SECONDARY_BUTTON}
+                  onClick={() => handleTest(wh.id)}
+                  disabled={testMut.isPending}
+                  title="Send test payload"
+                >
+                  Test
+                </button>
+                <button
+                  className={SECONDARY_BUTTON}
+                  onClick={() =>
+                    handleToggleActive(wh.id, wh.isActive)
+                  }
+                  disabled={updateMut.isPending}
+                >
+                  {wh.isActive ? "Disable" : "Enable"}
+                </button>
+                <button
+                  className={SECONDARY_BUTTON}
+                  onClick={() => openEditModal(wh)}
+                >
+                  Edit
+                </button>
+                {deleteConfirmId === wh.id ? (
+                  <div className="flex items-center gap-1">
+                    <button
+                      className={DANGER_BUTTON}
+                      onClick={() => {
+                        deleteMut.mutate({ id: wh.id });
+                        setDeleteConfirmId(null);
+                      }}
+                      disabled={deleteMut.isPending}
+                    >
+                      Confirm
+                    </button>
+                    <button
+                      className={SECONDARY_BUTTON}
+                      onClick={() => setDeleteConfirmId(null)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    className={SECONDARY_BUTTON}
+                    onClick={() => setDeleteConfirmId(wh.id)}
+                  >
+                    Delete
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Modal */}
+      {modalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="app-surface-strong mx-4 w-full max-w-lg space-y-5 rounded-2xl p-6 shadow-xl">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {editingId ? "Edit Webhook" : "Create Webhook"}
+            </h2>
+
+            {/* Name */}
+            <div>
+              <label className={LABEL_CLASS}>Name</label>
+              <input
+                className={INPUT_CLASS}
+                value={form.name}
+                onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="e.g. Slack Notifications"
+              />
+            </div>
+
+            {/* URL */}
+            <div>
+              <label className={LABEL_CLASS}>URL</label>
+              <input
+                className={INPUT_CLASS}
+                value={form.url}
+                onChange={(e) => setForm((prev) => ({ ...prev, url: e.target.value }))}
+                placeholder="https://hooks.slack.com/services/..."
+              />
+            </div>
+
+            {/* Secret */}
+            <div>
+              <label className={LABEL_CLASS}>
+                Secret (optional)
+              </label>
+              <input
+                className={INPUT_CLASS}
+                type="password"
+                value={form.secret}
+                onChange={(e) => setForm((prev) => ({ ...prev, secret: e.target.value }))}
+                placeholder="HMAC signing secret"
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                If set, requests include an X-Webhook-Signature header (HMAC-SHA256).
+              </p>
+            </div>
+
+            {/* Events */}
+            <div>
+              <label className={LABEL_CLASS}>Events</label>
+              <div className="mt-1 grid grid-cols-2 gap-2">
+                {WEBHOOK_EVENTS.map((ev) => (
+                  <label
+                    key={ev}
+                    className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900/70"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={form.events.includes(ev)}
+                      onChange={() => toggleEvent(ev)}
+                      className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+                    />
+                    <span className="text-gray-700 dark:text-gray-300">
+                      {EVENT_LABELS[ev] ?? ev}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Active toggle */}
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              <input
+                type="checkbox"
+                checked={form.isActive}
+                onChange={(e) => setForm((prev) => ({ ...prev, isActive: e.target.checked }))}
+                className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+              />
+              Active
+            </label>
+
+            {/* Error display */}
+            {(createMut.error || updateMut.error) && (
+              <p className="text-sm text-red-600 dark:text-red-400">
+                {createMut.error?.message ?? updateMut.error?.message}
+              </p>
+            )}
+
+            {/* Actions */}
+            <div className="flex justify-end gap-3 pt-2">
+              <button
+                className={SECONDARY_BUTTON}
+                onClick={() => setModalOpen(false)}
+                disabled={isSaving}
+              >
+                Cancel
+              </button>
+              <button
+                className={PRIMARY_BUTTON}
+                onClick={handleSubmit}
+                disabled={isSaving || !form.name || !form.url || form.events.length === 0}
+              >
+                {isSaving ? "Saving..." : editingId ? "Update" : "Create"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/allocations/AllocationModal.tsx b/apps/web/src/components/allocations/AllocationModal.tsx
index 2f1e198..fa5c3ce 100644
--- a/apps/web/src/components/allocations/AllocationModal.tsx
+++ b/apps/web/src/components/allocations/AllocationModal.tsx
@@ -9,6 +9,7 @@ import { trpc } from "~/lib/trpc/client.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { RecurrenceEditor } from "./RecurrenceEditor.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const ALLOCATION_STATUSES = Object.values(AllocationStatus);
 type EntryKind = "demand" | "assignment";
@@ -22,7 +23,10 @@ interface AllocationModalProps {
 function toDateInputValue(date: Date | string | null | undefined): string {
   if (!date) return "";
   const d = typeof date === "string" ? new Date(date) : date;
-  return d.toISOString().split("T")[0] ?? "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
 }
 
 export function AllocationModal({ allocation, onClose, onSuccess }: AllocationModalProps) {
@@ -308,7 +312,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
           {!isDemandEntry && (
             <div>
               <label htmlFor="modal-resource" className={labelClass}>
-                Resource <span className="text-red-500">*</span>
+                Resource <span className="text-red-500">*</span><InfoTooltip content="The person to assign. Their LCR determines the daily cost of this allocation." />
               </label>
               <select
                 id="modal-resource"
@@ -330,7 +334,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
           {/* Project */}
           <div>
             <label htmlFor="modal-project" className={labelClass}>
-              Project <span className="text-red-500">*</span>
+              Project <span className="text-red-500">*</span><InfoTooltip content="The project this time block is allocated to. Costs roll up to the project budget." />
             </label>
             <select
               id="modal-project"
@@ -350,7 +354,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
 
           {/* Role */}
           <div>
-            <label htmlFor="modal-role" className={labelClass}>Role</label>
+            <label htmlFor="modal-role" className={labelClass}>Role<InfoTooltip content="Role for this allocation. Pick a predefined role or type a custom one." /></label>
             <select
               id="modal-role"
               value={roleId}
@@ -380,7 +384,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
           <div className="grid grid-cols-2 gap-4">
             <div>
               <label htmlFor="modal-start" className={labelClass}>
-                Start Date <span className="text-red-500">*</span>
+                Start Date <span className="text-red-500">*</span><InfoTooltip content="First day of this allocation period (inclusive)." />
               </label>
               <DateInput
                 id="modal-start"
@@ -392,7 +396,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
             </div>
             <div>
               <label htmlFor="modal-end" className={labelClass}>
-                End Date <span className="text-red-500">*</span>
+                End Date <span className="text-red-500">*</span><InfoTooltip content="Last day of this allocation period (inclusive)." />
               </label>
               <DateInput
                 id="modal-end"
@@ -409,7 +413,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
           <div className="grid grid-cols-2 gap-4">
             <div>
               <label htmlFor="modal-hours" className={labelClass}>
-                Hours / Day
+                Hours / Day<InfoTooltip content="Working hours per day. Total cost = LCR x hours/day x working days. Vacation days are excluded." />
               </label>
               <input
                 id="modal-hours"
@@ -424,7 +428,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
             </div>
             <div>
               <label htmlFor="modal-status" className={labelClass}>
-                Status
+                Status<InfoTooltip content="PROPOSED = draft/request · CONFIRMED = approved · ACTIVE = in progress · COMPLETED = done · CANCELLED = removed." />
               </label>
               <select
                 id="modal-status"
@@ -453,7 +457,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
                 }}
                 className="rounded border-gray-300 dark:border-gray-600"
               />
-              <span className="font-medium text-gray-700 dark:text-gray-300">Recurring schedule</span>
+              <span className="font-medium text-gray-700 dark:text-gray-300">Recurring schedule</span><InfoTooltip content="Enable to repeat this allocation on specific days (e.g. every Monday/Wednesday). Hours per day applies on active days only." />
             </label>
             {isRecurring && (
               <div className="mt-2">
diff --git a/apps/web/src/components/allocations/AllocationsClient.tsx b/apps/web/src/components/allocations/AllocationsClient.tsx
index f887e18..ac14db1 100644
--- a/apps/web/src/components/allocations/AllocationsClient.tsx
+++ b/apps/web/src/components/allocations/AllocationsClient.tsx
@@ -21,6 +21,16 @@ import { useColumnConfig } from "~/hooks/useColumnConfig.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
+
+/** Left-border color by allocation status for instant visual scanning */
+const STATUS_LEFT_BORDER: Record<string, string> = {
+  ACTIVE: "border-l-green-500",
+  PROPOSED: "border-l-amber-500",
+  CONFIRMED: "border-l-blue-500",
+  COMPLETED: "border-l-gray-400",
+  CANCELLED: "border-l-red-500",
+};
 
 /** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
 function GroupRows({ children }: { children: React.ReactNode }) {
@@ -54,6 +64,7 @@ export function AllocationsClient() {
   const [confirmDelete, setConfirmDelete] = useState<{ single?: AllocationWithDetails; ids?: string[] } | null>(null);
   const [batchStatusPicker, setBatchStatusPicker] = useState(false);
   const [confirmBatchStatus, setConfirmBatchStatus] = useState<{ ids: string[]; status: string } | null>(null);
+  const [showStatusToast, setShowStatusToast] = useState(false);
 
   const selection = useSelection();
   const utils = trpc.useUtils();
@@ -104,6 +115,7 @@ export function AllocationsClient() {
       await utils.allocation.list.invalidate();
       await utils.allocation.listView.invalidate();
       selection.clear();
+      setShowStatusToast(true);
     },
   });
 
@@ -361,10 +373,11 @@ export function AllocationsClient() {
   // colSpan for empty/loading states: checkbox + visible columns + actions
   const totalColSpan = 1 + visibleColumns.length + 1;
 
-  function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false) {
+  function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false, rowIndex = 0) {
     const isSelected = selection.selectedIds.has(alloc.id);
+    const leftBorder = STATUS_LEFT_BORDER[alloc.status] ?? "border-l-gray-300";
     return (
-      <tr key={alloc.id} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}>
+      <tr key={alloc.id} className={`border-l-[3px] transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${leftBorder} ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`} style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}>
         <td className="px-4 py-3">
           <input
             type="checkbox"
@@ -428,6 +441,7 @@ export function AllocationsClient() {
 
   return (
     <div className="app-page space-y-5 pb-24">
+      <SuccessToast show={showStatusToast} message="Allocation status updated" onDone={() => setShowStatusToast(false)} />
       <div className="app-page-header gap-4">
         <div>
           <h1 className="app-page-title">Allocations</h1>
@@ -586,9 +600,12 @@ export function AllocationsClient() {
               </th>
               {visibleColumns.map((col) => {
                 const tooltips: Record<string, { tip: string; width?: string }> = {
+                  resource: { tip: "The person assigned to this time block. Grouped view clusters entries by resource." },
+                  project: { tip: "The project this allocation belongs to, identified by short code and name." },
                   role: { tip: "The role this allocation was created for. May differ from the resource's primary role." },
+                  dates: { tip: "Start and end date of this allocation period (inclusive)." },
                   hoursPerDay: { tip: "Planned working hours per calendar day for this allocation." },
-                  cost: { tip: "Resource LCR × hours per day. Reflects the cost of one day of work for this allocation." },
+                  cost: { tip: "Daily cost = resource LCR x hours per day. Total cost = daily cost x working days.", width: "w-72" },
                   status: { tip: "PROPOSED = requested · CONFIRMED = approved · ACTIVE = ongoing · COMPLETED = finished · CANCELLED = removed.", width: "w-72" },
                 };
                 const t = tooltips[col.key];
@@ -623,7 +640,7 @@ export function AllocationsClient() {
             )}
 
             {!isLoading && viewMode === "flat" &&
-              sorted.map((alloc) => renderAllocRow(alloc))}
+              sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
 
             {!isLoading && viewMode === "grouped" &&
               groups.map((group) => {
@@ -682,7 +699,7 @@ export function AllocationsClient() {
 
                       // Single allocation for this project — render directly, no sub-group header
                       if (subGroup.allocations.length === 1) {
-                        return <GroupRows key={subKey}>{renderAllocRow(subGroup.allocations[0]!, true)}</GroupRows>;
+                        return <GroupRows key={subKey}>{renderAllocRow(subGroup.allocations[0]!, true, 0)}</GroupRows>;
                       }
 
                       // Multiple allocations — show collapsible project sub-group
@@ -729,7 +746,7 @@ export function AllocationsClient() {
                               </div>
                             </td>
                           </tr>
-                          {isSubExpanded && subGroup.allocations.map((alloc) => renderAllocRow(alloc, true))}
+                          {isSubExpanded && subGroup.allocations.map((alloc, idx) => renderAllocRow(alloc, true, idx))}
                         </GroupRows>
                       );
                     })}
diff --git a/apps/web/src/components/allocations/FillOpenDemandModal.tsx b/apps/web/src/components/allocations/FillOpenDemandModal.tsx
index edfc3a0..e65dbc1 100644
--- a/apps/web/src/components/allocations/FillOpenDemandModal.tsx
+++ b/apps/web/src/components/allocations/FillOpenDemandModal.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { useRef, useState, useMemo, useCallback } from "react";
+import { useRef, useState, useMemo } from "react";
 import { AllocationStatus } from "@planarchy/shared";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
-import { formatDateMedium } from "~/lib/format.js";
+import { formatCents, formatDateMedium } from "~/lib/format.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 interface OpenDemandAllocation {
   id: string;
@@ -68,15 +70,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
     searchTimerRef.current = setTimeout(() => setDebouncedSearch(value), 200);
   }
 
-  const utils = trpc.useUtils();
-  const invalidatePlanningViews = useCallback(async () => {
-    await utils.allocation.list.invalidate();
-    await utils.allocation.listView.invalidate();
-    await utils.timeline.getEntries.invalidate();
-    await utils.timeline.getEntriesView.invalidate();
-    await utils.timeline.getProjectContext.invalidate();
-    await utils.timeline.getBudgetStatus.invalidate();
-  }, [utils]);
+  const invalidatePlanningViews = useInvalidatePlanningViews();
 
   const { data: resources } = trpc.resource.list.useQuery(
     { isActive: true, search: debouncedSearch || undefined, limit: 50 },
@@ -192,8 +186,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-1">
             {phase === "plan" ? "Plan Demand Assignment" : "Confirm Assignments"}
+            <InfoTooltip content="Fill an open demand by assigning one or more real resources to a placeholder staffing requirement. Each assignment creates a new allocation." />
           </h2>
           <button type="button" onClick={onClose} disabled={submitting} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none disabled:opacity-30">&times;</button>
         </div>
@@ -209,7 +204,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
               </div>
               <div className="text-xs text-gray-500 dark:text-gray-400">
                 {allocation.hoursPerDay}h/day · {totalDemandHours.toLocaleString()}h total
-                {allocation.budgetCents && allocation.budgetCents > 0 ? ` · Budget: ${(allocation.budgetCents / 100).toLocaleString("de-DE")} EUR` : ""}
+                {allocation.budgetCents && allocation.budgetCents > 0 ? ` · Budget: ${formatCents(allocation.budgetCents)} EUR` : ""}
               </div>
             </div>
           </div>
@@ -399,8 +394,8 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                     <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Resource</th>
                     <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">h/day</th>
                     <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">Hours</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">Est. Cost</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">Coverage</th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Est. Cost<InfoTooltip content="Estimated cost = resource LCR x available hours in the demand period." /></span></th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Coverage<InfoTooltip content="Percentage of the demand period this resource can cover, accounting for existing bookings." /></span></th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
@@ -412,7 +407,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                       </td>
                       <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{r.hoursPerDay}h</td>
                       <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{Math.round(r.availableHours)}h</td>
-                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{(r.estimatedCostCents / 100).toLocaleString("de-DE")} EUR</td>
+                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{formatCents(r.estimatedCostCents)} EUR</td>
                       <td className="px-3 py-2 text-right">
                         <span className={`font-medium ${r.coveragePercent >= 100 ? "text-green-600" : r.coveragePercent >= 50 ? "text-amber-600" : "text-red-600"}`}>
                           {r.coveragePercent}%
@@ -429,7 +424,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                       {Math.round(consumedHours)}h / {totalDemandHours}h
                     </td>
                     <td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
-                      {(planned.reduce((s, r) => s + r.estimatedCostCents, 0) / 100).toLocaleString("de-DE")} EUR
+                      {formatCents(planned.reduce((s, r) => s + r.estimatedCostCents, 0))} EUR
                     </td>
                     <td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
                       {totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%
@@ -439,7 +434,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                     <tr>
                       <td colSpan={3} className="px-3 py-1.5 text-right text-xs text-gray-500 dark:text-gray-400">Role Budget:</td>
                       <td className="px-3 py-1.5 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
-                        {(allocation.budgetCents / 100).toLocaleString("de-DE")} EUR
+                        {formatCents(allocation.budgetCents)} EUR
                       </td>
                       <td className="px-3 py-1.5 text-right text-xs">
                         {(() => {
@@ -447,7 +442,7 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                           const remain = allocation.budgetCents! - totalCost;
                           return (
                             <span className={remain < 0 ? "text-red-600 font-medium" : "text-green-600"}>
-                              {remain < 0 ? `${(Math.abs(remain) / 100).toLocaleString("de-DE")} over` : `${(remain / 100).toLocaleString("de-DE")} left`}
+                              {remain < 0 ? `${formatCents(Math.abs(remain))} over` : `${formatCents(remain)} left`}
                             </span>
                           );
                         })()}
diff --git a/apps/web/src/components/allocations/RecurrenceEditor.tsx b/apps/web/src/components/allocations/RecurrenceEditor.tsx
index 17ba683..b7d722c 100644
--- a/apps/web/src/components/allocations/RecurrenceEditor.tsx
+++ b/apps/web/src/components/allocations/RecurrenceEditor.tsx
@@ -2,6 +2,7 @@
 
 import { RecurrenceFrequency } from "@planarchy/shared";
 import type { RecurrencePattern } from "@planarchy/shared";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
@@ -38,7 +39,7 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
     <div className="space-y-3 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
       {/* Frequency selector */}
       <div>
-        <span className={labelClass}>Frequency</span>
+        <span className={labelClass}>Frequency<InfoTooltip content="How often the allocation repeats: weekly, biweekly, monthly, or a custom pattern." /></span>
         <div className="flex gap-2 flex-wrap">
           {Object.values(RecurrenceFrequency).map((f) => (
             <button
@@ -66,7 +67,7 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
       {/* Weekday picker — WEEKLY and BIWEEKLY */}
       {(freq === RecurrenceFrequency.WEEKLY || freq === RecurrenceFrequency.BIWEEKLY) && (
         <div>
-          <span className={labelClass}>Days of week</span>
+          <span className={labelClass}>Days of week<InfoTooltip content="Select which days of the week this allocation is active. Hours per day applies only on selected days." /></span>
           <div className="flex gap-1">
             {WEEKDAY_LABELS.map((label, dow) => {
               const selected = (value?.weekdays ?? []).includes(dow);
@@ -138,7 +139,7 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
       {/* Optional hours override for WEEKLY/BIWEEKLY/MONTHLY */}
       {freq !== RecurrenceFrequency.CUSTOM && (
         <div>
-          <label className={labelClass}>Hours per recurring day (optional override)</label>
+          <label className={labelClass}>Hours per recurring day (optional override)<InfoTooltip content="Override the allocation's default hours for recurring days only. Leave empty to use the allocation's hours/day." /></label>
           <input
             type="number"
             min={0.5}
diff --git a/apps/web/src/components/analytics/ComputationGraph2D.tsx b/apps/web/src/components/analytics/ComputationGraph2D.tsx
new file mode 100644
index 0000000..0353445
--- /dev/null
+++ b/apps/web/src/components/analytics/ComputationGraph2D.tsx
@@ -0,0 +1,540 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useEffect, useState } from "react";
+import { DOMAIN_COLORS, DOMAIN_LABELS, type Domain } from "~/components/analytics/computation-graph/domain-colors";
+import type { PositionedNode } from "~/components/analytics/computation-graph/graph-data";
+import type { ComputationGraphState } from "~/components/analytics/computation-graph/useComputationGraphData";
+
+// ─── Layout constants ────────────────────────────────────────────────────────
+
+const NODE_W = 220;
+const NODE_H = 88;
+const H_GAP = 50;
+const V_GAP = 140;
+const PADDING = 60;
+
+const MIN_ZOOM = 0.2;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.12;
+
+// ─── 2D DAG layout ──────────────────────────────────────────────────────────
+
+interface PlacedNode extends PositionedNode {
+  px: number;
+  py: number;
+}
+
+function build2DLayout(nodes: PositionedNode[]): { placed: PlacedNode[]; width: number; height: number } {
+  if (nodes.length === 0) return { placed: [], width: 800, height: 400 };
+
+  const byLevel = new Map<number, PositionedNode[]>();
+  for (const n of nodes) {
+    const arr = byLevel.get(n.level) ?? [];
+    arr.push(n);
+    byLevel.set(n.level, arr);
+  }
+
+  const levels = [...byLevel.keys()].sort((a, b) => a - b);
+
+  const domainOrder: Domain[] = [
+    "EFFORT", "SAH", "ESTIMATE", "INPUT", "ALLOCATION", "COMMERCIAL",
+    "RULES", "EXPERIENCE", "CHARGEABILITY", "SPREAD", "BUDGET",
+  ];
+  for (const [, arr] of byLevel) {
+    arr.sort((a, b) => {
+      const ai = domainOrder.indexOf(a.domain as Domain);
+      const bi = domainOrder.indexOf(b.domain as Domain);
+      return ai - bi;
+    });
+  }
+
+  let maxRowNodes = 0;
+  for (const arr of byLevel.values()) {
+    if (arr.length > maxRowNodes) maxRowNodes = arr.length;
+  }
+
+  const svgW = Math.max(800, maxRowNodes * (NODE_W + H_GAP) - H_GAP + PADDING * 2);
+  const svgH = levels.length * (NODE_H + V_GAP) - V_GAP + PADDING * 2;
+
+  const placed: PlacedNode[] = [];
+  for (let li = 0; li < levels.length; li++) {
+    const level = levels[li]!;
+    const row = byLevel.get(level)!;
+    const rowWidth = row.length * (NODE_W + H_GAP) - H_GAP;
+    const offsetX = (svgW - rowWidth) / 2;
+
+    for (let ni = 0; ni < row.length; ni++) {
+      placed.push({
+        ...row[ni]!,
+        px: offsetX + ni * (NODE_W + H_GAP) + NODE_W / 2,
+        py: PADDING + li * (NODE_H + V_GAP) + NODE_H / 2,
+      });
+    }
+  }
+
+  return { placed, width: svgW, height: svgH };
+}
+
+// ─── Edge path ───────────────────────────────────────────────────────────────
+
+function edgePath(src: PlacedNode, tgt: PlacedNode): string {
+  const sx = src.px;
+  const sy = src.py + NODE_H / 2;
+  const ex = tgt.px;
+  const ey = tgt.py - NODE_H / 2;
+  const midY = (sy + ey) / 2;
+  return `M ${sx} ${sy} C ${sx} ${midY}, ${ex} ${midY}, ${ex} ${ey}`;
+}
+
+// ─── Pre-computed edge label data ────────────────────────────────────────────
+
+interface EdgeLabel {
+  x: number;
+  y: number;
+  anchor: "start" | "middle" | "end";
+  offsetX: number;
+  text: string;
+  pillW: number;
+  pillX: number;
+}
+
+function computeEdgeLabel(src: PlacedNode, tgt: PlacedNode, formula: string): EdgeLabel {
+  const labelX = (src.px + tgt.px) / 2;
+  const labelY = (src.py + NODE_H / 2 + tgt.py - NODE_H / 2) / 2;
+  const offsetX = src.px === tgt.px ? 14 : 0;
+  const anchor = src.px === tgt.px ? "start" : "middle";
+  const text = formula.length > 28 ? formula.slice(0, 26) + "..." : formula;
+  const pillW = text.length * 7 + 12;
+  const pillX = anchor === "middle" ? labelX - pillW / 2 + offsetX : labelX + offsetX - 4;
+  return { x: labelX, y: labelY, anchor, offsetX, text, pillW, pillX };
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+interface Props {
+  state: ComputationGraphState;
+}
+
+export default function ComputationGraph2D({ state }: Props) {
+  const { graphData, highlightedNodes, handleNodeClick } = state;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const transformRef = useRef<HTMLDivElement>(null);
+  const [isDark, setIsDark] = useState(false);
+
+  // Pan & zoom via refs — zero React re-renders during interaction
+  const viewState = useRef({ zoom: 1, panX: 0, panY: 0 });
+  const zoomLabelRef = useRef<HTMLSpanElement>(null);
+  const isPanning = useRef(false);
+  const panStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+  const mousePosRef = useRef({ x: 0, y: 0 });
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const hoveredNodeRef = useRef<PositionedNode | null>(null);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDark(mq.matches || document.documentElement.classList.contains("dark"));
+    const handler = () => setIsDark(mq.matches || document.documentElement.classList.contains("dark"));
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  const { placed, width, height } = useMemo(
+    () => build2DLayout(graphData.nodes),
+    [graphData.nodes],
+  );
+
+  const nodeMap = useMemo(() => {
+    const m = new Map<string, PlacedNode>();
+    for (const n of placed) m.set(n.id, n);
+    return m;
+  }, [placed]);
+
+  // ── Apply CSS transform to the wrapper div (GPU-composited, no SVG repaint) ──
+  const applyTransform = useCallback(() => {
+    const el = transformRef.current;
+    if (!el) return;
+    const { zoom, panX, panY } = viewState.current;
+    el.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
+  }, []);
+
+  const updateZoomLabel = useCallback((zoom: number) => {
+    const el = zoomLabelRef.current;
+    if (el) el.textContent = `${Math.round(zoom * 100)}%`;
+  }, []);
+
+  // Update tooltip content + position via DOM (no React re-render)
+  const updateTooltip = useCallback((node: PositionedNode | null) => {
+    const el = tooltipRef.current;
+    if (!el) return;
+    if (!node) {
+      el.style.display = "none";
+      return;
+    }
+    el.style.display = "block";
+    el.style.top = `${mousePosRef.current.y + 16}px`;
+    el.style.left = `${mousePosRef.current.x + 16}px`;
+    const label = el.querySelector("[data-tt-label]");
+    const dot = el.querySelector("[data-tt-dot]") as HTMLElement | null;
+    const domain = el.querySelector("[data-tt-domain]");
+    const value = el.querySelector("[data-tt-value]");
+    const unit = el.querySelector("[data-tt-unit]");
+    const desc = el.querySelector("[data-tt-desc]");
+    const formula = el.querySelector("[data-tt-formula]");
+    if (label) label.textContent = node.label;
+    if (dot) dot.style.backgroundColor = node.color;
+    if (domain) domain.textContent = DOMAIN_LABELS[node.domain];
+    if (value) value.textContent = String(node.value);
+    if (unit) unit.textContent = node.unit;
+    if (desc) desc.textContent = node.description;
+    if (formula) {
+      formula.textContent = node.formula ?? "";
+      (formula as HTMLElement).style.display = node.formula ? "block" : "none";
+    }
+  }, []);
+
+  // Fit to view
+  const fitToView = useCallback(() => {
+    const el = containerRef.current;
+    if (!el || placed.length === 0) return;
+    const cw = el.clientWidth;
+    const ch = el.clientHeight;
+    const scaleX = cw / width;
+    const scaleY = ch / height;
+    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.min(scaleX, scaleY) * 0.92));
+    viewState.current = {
+      zoom: newZoom,
+      panX: (cw - width * newZoom) / 2,
+      panY: (ch - height * newZoom) / 2,
+    };
+    applyTransform();
+    updateZoomLabel(newZoom);
+  }, [width, height, placed.length, applyTransform, updateZoomLabel]);
+
+  useEffect(() => {
+    if (placed.length > 0) fitToView();
+  }, [placed.length, fitToView]);
+
+  // Focus on a node
+  const focusNode = useCallback((node: PlacedNode) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const cw = el.clientWidth;
+    const ch = el.clientHeight;
+    const targetZoom = 1.2;
+    viewState.current = {
+      zoom: targetZoom,
+      panX: cw / 2 - node.px * targetZoom,
+      panY: ch / 2 - node.py * targetZoom,
+    };
+    applyTransform();
+    updateZoomLabel(targetZoom);
+  }, [applyTransform, updateZoomLabel]);
+
+  // Wheel zoom — native event, direct DOM mutation
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handler = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const vs = viewState.current;
+      const direction = e.deltaY < 0 ? 1 : -1;
+      const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, vs.zoom * (1 + direction * ZOOM_STEP)));
+      const scale = newZoom / vs.zoom;
+      vs.panX = cx - scale * (cx - vs.panX);
+      vs.panY = cy - scale * (cy - vs.panY);
+      vs.zoom = newZoom;
+      applyTransform();
+      updateZoomLabel(newZoom);
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, [applyTransform, updateZoomLabel]);
+
+  // Pointer handlers — native events, direct DOM mutation, no React state
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const onDown = (e: PointerEvent) => {
+      const tag = (e.target as Element).tagName;
+      const isBg = tag === "svg" || tag === "DIV" || !!(e.target as Element).closest?.("[data-bg]");
+      if (e.button === 1 || isBg) {
+        isPanning.current = true;
+        const vs = viewState.current;
+        panStart.current = { x: e.clientX, y: e.clientY, panX: vs.panX, panY: vs.panY };
+        (e.target as Element).setPointerCapture?.(e.pointerId);
+        e.preventDefault();
+        el.style.cursor = "grabbing";
+      }
+    };
+
+    const onMove = (e: PointerEvent) => {
+      mousePosRef.current.x = e.clientX;
+      mousePosRef.current.y = e.clientY;
+      if (hoveredNodeRef.current) {
+        const tip = tooltipRef.current;
+        if (tip) {
+          tip.style.top = `${e.clientY + 16}px`;
+          tip.style.left = `${e.clientX + 16}px`;
+        }
+      }
+      if (!isPanning.current) return;
+      viewState.current.panX = panStart.current.panX + (e.clientX - panStart.current.x);
+      viewState.current.panY = panStart.current.panY + (e.clientY - panStart.current.y);
+      applyTransform();
+    };
+
+    const onUp = () => {
+      isPanning.current = false;
+      el.style.cursor = "grab";
+    };
+
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointerleave", onUp);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointerleave", onUp);
+    };
+  }, [applyTransform, updateTooltip]);
+
+  // Zoom controls
+  const zoomBy = useCallback((direction: 1 | -1) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const cw = el.clientWidth / 2;
+    const ch = el.clientHeight / 2;
+    const vs = viewState.current;
+    const next = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, vs.zoom * (1 + direction * ZOOM_STEP)));
+    const scale = next / vs.zoom;
+    vs.panX = cw - scale * (cw - vs.panX);
+    vs.panY = ch - scale * (ch - vs.panY);
+    vs.zoom = next;
+    applyTransform();
+    updateZoomLabel(next);
+  }, [applyTransform, updateZoomLabel]);
+
+  if (graphData.nodes.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-zinc-500">
+        {state.viewMode === "resource" ? "Select a resource and month" : "Select a project"}
+      </div>
+    );
+  }
+
+  const cardBg = isDark ? "#1e293b" : "#ffffff";
+  const cardTextPrimary = isDark ? "#f1f5f9" : "#1e293b";
+  const cardTextSecondary = isDark ? "#94a3b8" : "#64748b";
+  const canvasBg = isDark ? "#0f172a" : "#f8fafc";
+  const gridLine = isDark ? "#1e293b" : "#e2e8f0";
+  const pillBg = isDark ? "#1e293b" : "#ffffff";
+  const pillStroke = isDark ? "#334155" : "#e2e8f0";
+  const pillText = isDark ? "#94a3b8" : "#475569";
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative h-full w-full overflow-hidden"
+      style={{ backgroundColor: canvasBg, cursor: "grab" }}
+    >
+      {/* Wrapper div for CSS transform — GPU-composited, no SVG repaint */}
+      <div
+        ref={transformRef}
+        style={{
+          position: "absolute",
+          width: `${width}px`,
+          height: `${height}px`,
+          transformOrigin: "0 0",
+          willChange: "transform",
+        }}
+      >
+        <svg
+          width={width}
+          height={height}
+          style={{ position: "absolute", top: 0, left: 0 }}
+        >
+          <defs>
+            <marker id="arrow-default" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+              <path d="M 0 0 L 10 3.5 L 0 7 Z" fill={isDark ? "#475569" : "#94a3b8"} />
+            </marker>
+            <marker id="arrow-highlight" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+              <path d="M 0 0 L 10 3.5 L 0 7 Z" fill="#3b82f6" />
+            </marker>
+          </defs>
+
+          {/* Grid lines */}
+          {[...new Set(placed.map((n) => n.py))].map((y) => (
+            <line
+              key={`grid-${y}`}
+              x1="0" y1={y} x2={width} y2={y}
+              stroke={gridLine} strokeWidth="1" strokeDasharray="4 4" opacity="0.4"
+            />
+          ))}
+
+          {/* ── Links ── */}
+          {graphData.links.map((link) => {
+            const sourceId = typeof link.source === "object" ? (link.source as { id: string }).id : link.source;
+            const targetId = typeof link.target === "object" ? (link.target as { id: string }).id : link.target;
+            const src = nodeMap.get(sourceId);
+            const tgt = nodeMap.get(targetId);
+            if (!src || !tgt) return null;
+
+            const isHighlighted = highlightedNodes
+              ? highlightedNodes.has(sourceId) && highlightedNodes.has(targetId)
+              : false;
+            const isNeutral = !highlightedNodes;
+            const isDimmed = highlightedNodes && !isHighlighted;
+            const showLabel = (isNeutral || isHighlighted) && link.formula;
+
+            return (
+              <g key={`${sourceId}-${targetId}`}>
+                <path
+                  d={edgePath(src, tgt)}
+                  fill="none"
+                  stroke={isDimmed ? (isDark ? "#334155" : "#d1d5db") : src.color}
+                  strokeWidth={isDimmed ? 1 : isHighlighted ? (link.weight ?? 1) * 2.5 : (link.weight ?? 1) * 1.5}
+                  strokeOpacity={isDimmed ? 0.2 : isHighlighted ? 0.8 : 0.4}
+                  markerEnd={isDimmed ? undefined : (isHighlighted ? "url(#arrow-highlight)" : "url(#arrow-default)")}
+                />
+                {showLabel && (() => {
+                  const lbl = computeEdgeLabel(src, tgt, link.formula);
+                  return (
+                    <>
+                      <rect
+                        x={lbl.pillX} y={lbl.y - 10}
+                        width={lbl.pillW} height={20} rx="4"
+                        fill={pillBg} stroke={pillStroke} strokeWidth="1" opacity="0.95"
+                      />
+                      <text
+                        x={lbl.x + lbl.offsetX} y={lbl.y + 1}
+                        fontSize="12" fill={pillText}
+                        textAnchor={lbl.anchor} dominantBaseline="central"
+                        className="pointer-events-none select-none"
+                        fontFamily="ui-monospace, monospace"
+                      >
+                        {lbl.text}
+                      </text>
+                    </>
+                  );
+                })()}
+              </g>
+            );
+          })}
+
+          {/* ── Nodes ── */}
+          {placed.map((node) => {
+            const isActive = !highlightedNodes || highlightedNodes.has(node.id);
+            const isDimmed = highlightedNodes && !isActive;
+            const color = DOMAIN_COLORS[node.domain as Domain] ?? "#6b7280";
+
+            const valueStr = typeof node.value === "number"
+              ? node.value.toFixed(1)
+              : String(node.value);
+            const displayValue = valueStr.length > 16 ? valueStr.slice(0, 14) + "..." : valueStr;
+            const displayLabel = node.label.length > 22 ? node.label.slice(0, 20) + "..." : node.label;
+
+            return (
+              <g
+                key={node.id}
+                transform={`translate(${node.px - NODE_W / 2}, ${node.py - NODE_H / 2})`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (e.detail === 2) {
+                    focusNode(node);
+                  } else {
+                    handleNodeClick(node.id);
+                  }
+                }}
+                onMouseEnter={() => { hoveredNodeRef.current = node; updateTooltip(node); }}
+                onMouseLeave={() => { hoveredNodeRef.current = null; updateTooltip(null); }}
+                className="cursor-pointer"
+                opacity={isDimmed ? 0.2 : 1}
+              >
+                <rect
+                  width={NODE_W} height={NODE_H} rx="10"
+                  fill={cardBg}
+                  stroke={isDark ? "#334155" : "#e2e8f0"}
+                  strokeWidth="1"
+                />
+                <path
+                  d={`M 10 0 H ${NODE_W - 10} Q ${NODE_W} 0 ${NODE_W} 10 V 4 H 0 V 10 Q 0 0 10 0 Z`}
+                  fill={color}
+                />
+                <text x="12" y="22" fontSize="11" fontWeight="500" fill={cardTextSecondary} fontFamily="system-ui, sans-serif">
+                  {DOMAIN_LABELS[node.domain as Domain]}
+                </text>
+                <text x="12" y="44" fontSize="14" fontWeight="600" fill={cardTextPrimary} fontFamily="system-ui, sans-serif">
+                  {displayLabel}
+                </text>
+                <text x="12" y="68" fontSize="18" fontWeight="700" fill={color} fontFamily="ui-monospace, monospace">
+                  {displayValue}
+                </text>
+                <text x={NODE_W - 12} y="68" fontSize="12" fontWeight="400" fill={cardTextSecondary} textAnchor="end" fontFamily="system-ui, sans-serif">
+                  {node.unit}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+
+      {/* Background click target for pan (covers viewport) */}
+      <div data-bg="true" className="absolute inset-0" style={{ zIndex: -1 }} />
+
+      {/* ── Zoom controls (bottom-right) ── */}
+      <div className="absolute bottom-4 right-4 flex flex-col gap-1">
+        <button
+          onClick={() => zoomBy(1)}
+          className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-300 bg-white text-sm font-bold text-zinc-700 shadow-sm hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+          title="Zoom in"
+        >
+          +
+        </button>
+        <button
+          onClick={() => zoomBy(-1)}
+          className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-300 bg-white text-sm font-bold text-zinc-700 shadow-sm hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+          title="Zoom out"
+        >
+          -
+        </button>
+        <button
+          onClick={fitToView}
+          className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-300 bg-white text-xs font-medium text-zinc-700 shadow-sm hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+          title="Fit to view"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <rect x="1" y="1" width="12" height="12" rx="2" />
+            <path d="M 4 7 L 1 7 M 10 7 L 13 7 M 7 4 L 7 1 M 7 10 L 7 13" />
+          </svg>
+        </button>
+        <span ref={zoomLabelRef} className="mt-1 text-center text-[10px] text-zinc-400">
+          100%
+        </span>
+      </div>
+
+      {/* Hover Tooltip — always rendered, shown/hidden via DOM */}
+      <div
+        ref={tooltipRef}
+        className="pointer-events-none fixed z-50 max-w-sm rounded-lg border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-800 shadow-xl dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200"
+        style={{ display: "none", top: 0, left: 0 }}
+      >
+        <div className="flex items-center gap-2">
+          <span data-tt-dot className="inline-block h-2.5 w-2.5 rounded-full" />
+          <span data-tt-label className="font-semibold" />
+          <span data-tt-domain className="ml-auto text-xs text-zinc-500" />
+        </div>
+        <div className="mt-1 text-lg font-bold">
+          <span data-tt-value /> <span data-tt-unit className="text-sm font-normal text-zinc-400" />
+        </div>
+        <div data-tt-desc className="mt-1 text-xs text-zinc-500 dark:text-zinc-400" />
+        <div data-tt-formula className="mt-1 font-mono text-xs text-blue-500" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/ComputationGraph3D.tsx b/apps/web/src/components/analytics/ComputationGraph3D.tsx
new file mode 100644
index 0000000..ddd30f2
--- /dev/null
+++ b/apps/web/src/components/analytics/ComputationGraph3D.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import dynamic from "next/dynamic";
+import { DOMAIN_LABELS } from "~/components/analytics/computation-graph/domain-colors";
+import { createNodeSprite, createDimmedNodeSprite, getLinkColor } from "~/components/analytics/computation-graph/node-renderer";
+import type { PositionedNode } from "~/components/analytics/computation-graph/graph-data";
+import type { ComputationGraphState } from "~/components/analytics/computation-graph/useComputationGraphData";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForceGraph3D = dynamic(() => import("react-force-graph-3d"), { ssr: false }) as any;
+
+interface Props {
+  state: ComputationGraphState;
+}
+
+export default function ComputationGraph3DView({ state }: Props) {
+  const { graphData, highlightedNodes, handleNodeClick, setHoveredNode } = state;
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onNodeClick = useCallback((node: any) => {
+    handleNodeClick((node as PositionedNode).id);
+  }, [handleNodeClick]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onNodeHover = useCallback((node: any) => {
+    setHoveredNode(node as PositionedNode | null);
+  }, [setHoveredNode]);
+
+  const nodeThreeObject = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (node: any) => {
+      const n = node as PositionedNode;
+      if (highlightedNodes && !highlightedNodes.has(n.id)) {
+        return createDimmedNodeSprite(n);
+      }
+      return createNodeSprite(n);
+    },
+    [highlightedNodes],
+  );
+
+  const linkColorFn = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (link: any) => {
+      if (!highlightedNodes) return getLinkColor(link, 0.4);
+      const sourceId = typeof link.source === "object" ? link.source.id : link.source;
+      const targetId = typeof link.target === "object" ? link.target.id : link.target;
+      if (highlightedNodes.has(sourceId) && highlightedNodes.has(targetId)) {
+        return getLinkColor(link, 0.9);
+      }
+      return getLinkColor(link, 0.08);
+    },
+    [highlightedNodes],
+  );
+
+  const linkWidthFn = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (link: any) => {
+      if (!highlightedNodes) return link.weight ?? 1;
+      const sourceId = typeof link.source === "object" ? link.source.id : link.source;
+      const targetId = typeof link.target === "object" ? link.target.id : link.target;
+      if (highlightedNodes.has(sourceId) && highlightedNodes.has(targetId)) {
+        return (link.weight ?? 1) * 2.5;
+      }
+      return 0.3;
+    },
+    [highlightedNodes],
+  );
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    setMousePos({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  if (graphData.nodes.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-zinc-500">
+        {state.viewMode === "resource" ? "Select a resource and month" : "Select a project"}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-full w-full" onMouseMove={handleMouseMove}>
+      <ForceGraph3D
+        graphData={graphData}
+        nodeThreeObject={nodeThreeObject}
+        nodeThreeObjectExtend={false}
+        onNodeClick={onNodeClick}
+        onNodeHover={onNodeHover}
+        linkColor={linkColorFn}
+        linkWidth={linkWidthFn}
+        linkDirectionalArrowLength={4}
+        linkDirectionalArrowRelPos={0.8}
+        linkCurvature={0.1}
+        backgroundColor="#0f172a"
+        showNavInfo={false}
+        warmupTicks={50}
+        cooldownTicks={0}
+      />
+      {/* Hover Tooltip */}
+      {state.hoveredNode && (
+        <div
+          className="pointer-events-none fixed z-50 max-w-sm rounded-lg border border-zinc-600 bg-zinc-900 px-4 py-3 text-sm text-zinc-200 shadow-xl"
+          style={{ top: mousePos.y + 16, left: mousePos.x + 16 }}
+        >
+          <div className="flex items-center gap-2">
+            <span
+              className="inline-block h-2.5 w-2.5 rounded-full"
+              style={{ backgroundColor: state.hoveredNode.color }}
+            />
+            <span className="font-semibold">{state.hoveredNode.label}</span>
+            <span className="ml-auto text-xs text-zinc-500">{DOMAIN_LABELS[state.hoveredNode.domain]}</span>
+          </div>
+          <div className="mt-1 text-lg font-bold">
+            {state.hoveredNode.value} <span className="text-sm font-normal text-zinc-400">{state.hoveredNode.unit}</span>
+          </div>
+          <div className="mt-1 text-xs text-zinc-400">{state.hoveredNode.description}</div>
+          {state.hoveredNode.formula && (
+            <div className="mt-1 font-mono text-xs text-blue-400">{state.hoveredNode.formula}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/ComputationGraphClient.tsx b/apps/web/src/components/analytics/ComputationGraphClient.tsx
new file mode 100644
index 0000000..726fcb1
--- /dev/null
+++ b/apps/web/src/components/analytics/ComputationGraphClient.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { useState } from "react";
+import {
+  DOMAIN_COLORS,
+  DOMAIN_LABELS,
+} from "~/components/analytics/computation-graph/domain-colors";
+import { useComputationGraphData } from "~/components/analytics/computation-graph/useComputationGraphData";
+import ComputationGraph2D from "~/components/analytics/ComputationGraph2D";
+import ComputationGraph3D from "~/components/analytics/ComputationGraph3D";
+
+type Dimension = "2d" | "3d";
+
+export default function ComputationGraphClient() {
+  const state = useComputationGraphData();
+  const [dimension, setDimension] = useState<Dimension>("2d");
+
+  const {
+    viewMode, setViewMode,
+    resourceId, setResourceId,
+    month, setMonth,
+    projectId, setProjectId,
+    resources, projects,
+    isLoading,
+    activeDomains,
+    graphData,
+    highlightedNodes, setHighlightedNodes,
+    domainFilter, toggleDomain,
+  } = state;
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col">
+      {/* ── Header Bar ── */}
+      <div className="flex flex-wrap items-center gap-3 border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
+        {/* 2D / 3D Toggle */}
+        <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
+          <button
+            onClick={() => setDimension("2d")}
+            className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+              dimension === "2d"
+                ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
+                : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            } rounded-l-lg`}
+          >
+            2D
+          </button>
+          <button
+            onClick={() => setDimension("3d")}
+            className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+              dimension === "3d"
+                ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
+                : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            } rounded-r-lg`}
+          >
+            3D
+          </button>
+        </div>
+
+        {/* View Mode Toggle */}
+        <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
+          <button
+            onClick={() => setViewMode("resource")}
+            className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+              viewMode === "resource"
+                ? "bg-blue-600 text-white"
+                : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            } rounded-l-lg`}
+          >
+            Resource View
+          </button>
+          <button
+            onClick={() => setViewMode("project")}
+            className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+              viewMode === "project"
+                ? "bg-blue-600 text-white"
+                : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            } rounded-r-lg`}
+          >
+            Project View
+          </button>
+        </div>
+
+        {/* Selectors */}
+        {viewMode === "resource" ? (
+          <>
+            <select
+              value={resourceId}
+              onChange={(e) => setResourceId(e.target.value)}
+              className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200"
+            >
+              <option value="">Select Resource...</option>
+              {resources.map((r: { id: string; displayName: string; eid: string }) => (
+                <option key={r.id} value={r.id}>
+                  {r.displayName} ({r.eid})
+                </option>
+              ))}
+            </select>
+            <input
+              type="month"
+              value={month}
+              onChange={(e) => setMonth(e.target.value)}
+              className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200"
+            />
+          </>
+        ) : (
+          <select
+            value={projectId}
+            onChange={(e) => setProjectId(e.target.value)}
+            className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200"
+          >
+            <option value="">Select Project...</option>
+            {(Array.isArray(projects) ? projects : []).map((p: { id: string; name: string; shortCode?: string | null }) => (
+              <option key={p.id} value={p.id}>
+                {p.shortCode ? `${p.shortCode} — ` : ""}{p.name}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Meta info */}
+        {graphData.nodes.length > 0 && (
+          <span className="ml-auto text-xs text-zinc-500">
+            {graphData.nodes.length} nodes, {graphData.links.length} links
+          </span>
+        )}
+
+        {/* Clear highlight */}
+        {highlightedNodes && (
+          <button
+            onClick={() => setHighlightedNodes(null)}
+            className="rounded bg-zinc-200 px-2 py-1 text-xs text-zinc-700 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300"
+          >
+            Clear highlight
+          </button>
+        )}
+      </div>
+
+      {/* ── Main Area ── */}
+      <div className="relative flex flex-1 overflow-hidden">
+        {/* Domain Filter Sidebar */}
+        <div className="flex w-48 flex-col gap-1 border-r border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900">
+          <span className="mb-1 text-xs font-semibold uppercase text-zinc-500">Domains</span>
+          {activeDomains.map((domain) => (
+            <button
+              key={domain}
+              onClick={() => toggleDomain(domain)}
+              className={`flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors ${
+                domainFilter.has(domain)
+                  ? "text-zinc-400 line-through"
+                  : "text-zinc-700 dark:text-zinc-300"
+              } hover:bg-zinc-200 dark:hover:bg-zinc-800`}
+            >
+              <span
+                className="inline-block h-3 w-3 rounded-full"
+                style={{
+                  backgroundColor: domainFilter.has(domain) ? "#9ca3af" : DOMAIN_COLORS[domain],
+                }}
+              />
+              {DOMAIN_LABELS[domain]}
+            </button>
+          ))}
+        </div>
+
+        {/* Graph View */}
+        <div className="flex-1 overflow-hidden">
+          {isLoading ? (
+            <div className="flex h-full items-center justify-center text-zinc-500">
+              Loading computation graph...
+            </div>
+          ) : dimension === "2d" ? (
+            <ComputationGraph2D state={state} />
+          ) : (
+            <ComputationGraph3D state={state} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/InsightsPanel.tsx b/apps/web/src/components/analytics/InsightsPanel.tsx
new file mode 100644
index 0000000..196ad21
--- /dev/null
+++ b/apps/web/src/components/analytics/InsightsPanel.tsx
@@ -0,0 +1,361 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import type { Route } from "next";
+import { trpc } from "~/lib/trpc/client.js";
+
+// ─── Anomaly type badge colors ───────────────────────────────────────────────
+
+const SEVERITY_STYLES = {
+  critical: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  warning: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+} as const;
+
+const TYPE_LABELS: Record<string, string> = {
+  budget: "Budget",
+  staffing: "Staffing",
+  utilization: "Utilization",
+  timeline: "Timeline",
+};
+
+const TYPE_ICONS: Record<string, string> = {
+  budget: "\u20AC",      // Euro sign
+  staffing: "\u2642",    // Person sign
+  utilization: "\u2B24", // Circle
+  timeline: "\u23F0",    // Clock
+};
+
+// ─── Shimmer skeleton ────────────────────────────────────────────────────────
+
+function Shimmer({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`animate-pulse rounded bg-gray-200 dark:bg-slate-700 ${className}`}
+    />
+  );
+}
+
+function AnomalyListSkeleton() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="flex items-start gap-3 rounded-xl border border-gray-100 p-4 dark:border-slate-800">
+          <Shimmer className="h-6 w-16 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Shimmer className="h-4 w-3/4" />
+            <Shimmer className="h-3 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function NarrativeSkeleton() {
+  return (
+    <div className="space-y-3">
+      <Shimmer className="h-4 w-full" />
+      <Shimmer className="h-4 w-5/6" />
+      <Shimmer className="h-4 w-4/6" />
+      <Shimmer className="h-4 w-3/4" />
+    </div>
+  );
+}
+
+// ─── Entity link helper ──────────────────────────────────────────────────────
+
+function entityLink(type: string, entityId: string): string {
+  if (type === "utilization") return `/resources/${entityId}`;
+  return `/projects/${entityId}`;
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function InsightsPanel() {
+  const [selectedProjectId, setSelectedProjectId] = useState<string>("");
+  const [narrativeFilter, setNarrativeFilter] = useState<string | null>(null);
+
+  // Fetch anomalies
+  const anomaliesQuery = trpc.insights.detectAnomalies.useQuery(undefined, {
+    staleTime: 60_000,
+    refetchOnWindowFocus: false,
+  });
+
+  // Fetch AI configuration status
+  const aiConfigQuery = trpc.settings.getAiConfigured.useQuery(undefined, {
+    staleTime: 300_000,
+  });
+
+  // Fetch project list for dropdown
+  const projectsQuery = trpc.project.list.useQuery(
+    { page: 1, limit: 200 },
+    { staleTime: 60_000, refetchOnWindowFocus: false },
+  );
+
+  // Fetch cached narrative for selected project
+  const cachedNarrativeQuery = trpc.insights.getCachedNarrative.useQuery(
+    { projectId: selectedProjectId },
+    {
+      enabled: !!selectedProjectId,
+      staleTime: 30_000,
+    },
+  );
+
+  // Generate narrative mutation
+  const generateMutation = trpc.insights.generateProjectNarrative.useMutation({
+    onSuccess: () => {
+      // Refetch the cached narrative
+      void cachedNarrativeQuery.refetch();
+    },
+  });
+
+  const anomalies = anomaliesQuery.data ?? [];
+  const projects = projectsQuery.data?.projects ?? [];
+
+  // Filter anomalies
+  const filteredAnomalies = narrativeFilter
+    ? anomalies.filter((a) => a.type === narrativeFilter)
+    : anomalies;
+
+  const summaryCountsByType = anomalies.reduce(
+    (acc, a) => {
+      acc[a.type] = (acc[a.type] ?? 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const criticalCount = anomalies.filter((a) => a.severity === "critical").length;
+
+  return (
+    <div className="space-y-8">
+      {/* ── Summary cards ─────────────────────────────────────────────── */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {(["budget", "staffing", "utilization", "timeline"] as const).map((type) => {
+          const count = summaryCountsByType[type] ?? 0;
+          const isActive = narrativeFilter === type;
+          return (
+            <button
+              key={type}
+              type="button"
+              onClick={() => setNarrativeFilter(isActive ? null : type)}
+              className={`rounded-2xl border p-4 text-left transition-all ${
+                isActive
+                  ? "border-brand-300 bg-brand-50 shadow-sm dark:border-brand-700 dark:bg-brand-950"
+                  : "border-gray-200 bg-white hover:border-gray-300 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700"
+              }`}
+            >
+              <div className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                {TYPE_LABELS[type]}
+              </div>
+              <div className="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-50">
+                {anomaliesQuery.isLoading ? "-" : count}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* ── Anomaly feed ──────────────────────────────────────────────── */}
+      <section>
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
+            Anomaly Feed
+            {criticalCount > 0 && (
+              <span className="ml-2 inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-300">
+                {criticalCount} critical
+              </span>
+            )}
+          </h2>
+          {narrativeFilter && (
+            <button
+              type="button"
+              onClick={() => setNarrativeFilter(null)}
+              className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400"
+            >
+              Show all
+            </button>
+          )}
+        </div>
+
+        {anomaliesQuery.isLoading ? (
+          <AnomalyListSkeleton />
+        ) : anomaliesQuery.error ? (
+          <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/30 dark:text-red-300">
+            Failed to load anomalies: {anomaliesQuery.error.message}
+          </div>
+        ) : filteredAnomalies.length === 0 ? (
+          <div className="rounded-xl border border-green-200 bg-green-50 p-6 text-center dark:border-green-900 dark:bg-green-950/30">
+            <div className="text-lg font-medium text-green-800 dark:text-green-300">
+              All clear
+            </div>
+            <p className="mt-1 text-sm text-green-600 dark:text-green-400">
+              No anomalies detected across active projects.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredAnomalies.map((anomaly, idx) => (
+              <div
+                key={`${anomaly.entityId}-${anomaly.type}-${idx}`}
+                className="flex items-start gap-3 rounded-xl border border-gray-100 bg-white p-4 transition-colors hover:bg-gray-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/80"
+              >
+                {/* Severity badge */}
+                <span
+                  className={`inline-flex shrink-0 items-center rounded-full px-2.5 py-1 text-xs font-semibold ${SEVERITY_STYLES[anomaly.severity]}`}
+                >
+                  {anomaly.severity === "critical" ? "Critical" : "Warning"}
+                </span>
+
+                {/* Content */}
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                      {TYPE_ICONS[anomaly.type]} {TYPE_LABELS[anomaly.type]}
+                    </span>
+                  </div>
+                  <p className="mt-0.5 text-sm text-gray-700 dark:text-gray-300">
+                    {anomaly.message}
+                  </p>
+                  <Link
+                    href={entityLink(anomaly.type, anomaly.entityId) as Route}
+                    className="mt-1 inline-block text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400"
+                  >
+                    {anomaly.entityName} &rarr;
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* ── Project narrative ─────────────────────────────────────────── */}
+      <section>
+        <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-50">
+          Project Narrative
+        </h2>
+
+        {!aiConfigQuery.data?.configured ? (
+          <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/30">
+            <p className="text-sm text-amber-800 dark:text-amber-300">
+              AI is not configured.{" "}
+              <Link
+                href={"/admin/settings" as Route}
+                className="font-medium underline hover:no-underline"
+              >
+                Configure AI credentials in Admin Settings
+              </Link>{" "}
+              to enable project narratives.
+            </p>
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-gray-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+            {/* Project selector */}
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
+              <div className="flex-1">
+                <label
+                  htmlFor="project-select"
+                  className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Select project
+                </label>
+                <select
+                  id="project-select"
+                  value={selectedProjectId}
+                  onChange={(e) => setSelectedProjectId(e.target.value)}
+                  className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-gray-100"
+                >
+                  <option value="">Choose a project...</option>
+                  {projects.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.shortCode} - {p.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <button
+                type="button"
+                disabled={!selectedProjectId || generateMutation.isPending}
+                onClick={() => {
+                  if (selectedProjectId) {
+                    generateMutation.mutate({ projectId: selectedProjectId });
+                  }
+                }}
+                className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-brand-500 dark:hover:bg-brand-600"
+              >
+                {generateMutation.isPending ? (
+                  <>
+                    <svg
+                      className="h-4 w-4 animate-spin"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                    Generating...
+                  </>
+                ) : (
+                  "Generate Summary"
+                )}
+              </button>
+            </div>
+
+            {/* Narrative display */}
+            <div className="mt-6">
+              {generateMutation.isPending ? (
+                <NarrativeSkeleton />
+              ) : generateMutation.error ? (
+                <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/30 dark:text-red-300">
+                  {generateMutation.error.message}
+                </div>
+              ) : generateMutation.data ? (
+                <div className="rounded-xl border border-brand-200 bg-brand-50/50 p-5 dark:border-brand-900/50 dark:bg-brand-950/20">
+                  <p className="whitespace-pre-wrap text-sm leading-relaxed text-gray-800 dark:text-gray-200">
+                    {generateMutation.data.narrative}
+                  </p>
+                  <p className="mt-3 text-xs text-gray-400 dark:text-gray-500">
+                    Generated {new Date(generateMutation.data.generatedAt).toLocaleString()}
+                  </p>
+                </div>
+              ) : cachedNarrativeQuery.data?.narrative ? (
+                <div className="rounded-xl border border-gray-200 bg-gray-50/50 p-5 dark:border-slate-700 dark:bg-slate-800/50">
+                  <p className="whitespace-pre-wrap text-sm leading-relaxed text-gray-800 dark:text-gray-200">
+                    {cachedNarrativeQuery.data.narrative}
+                  </p>
+                  <p className="mt-3 text-xs text-gray-400 dark:text-gray-500">
+                    Previously generated{" "}
+                    {cachedNarrativeQuery.data.generatedAt
+                      ? new Date(cachedNarrativeQuery.data.generatedAt).toLocaleString()
+                      : ""}
+                  </p>
+                </div>
+              ) : selectedProjectId ? (
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click &quot;Generate Summary&quot; to create an AI-powered executive narrative for this project.
+                </p>
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Select a project above to generate or view its executive summary.
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/SkillDistributionChart.tsx b/apps/web/src/components/analytics/SkillDistributionChart.tsx
new file mode 100644
index 0000000..0d0c4e5
--- /dev/null
+++ b/apps/web/src/components/analytics/SkillDistributionChart.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+
+// SVG fill colors for the bar chart (work in both light and dark contexts)
+const PROFICIENCY_SVG_COLORS = ["#9ca3af", "#60a5fa", "#818cf8", "#f59e0b", "#4ade80"];
+
+interface SkillDistributionChartProps {
+  data: { skill: string; count: number; avgProficiency: number }[];
+}
+
+export default function SkillDistributionChart({ data }: SkillDistributionChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <BarChart data={data} layout="vertical" margin={{ left: 160, right: 20, top: 0, bottom: 0 }}>
+        <XAxis type="number" tick={{ fontSize: 11 }} />
+        <YAxis type="category" dataKey="skill" tick={{ fontSize: 11 }} width={155} />
+        <Tooltip
+          formatter={(value: number | undefined) => [`${value ?? 0} resources`, "Count"] as [string, string]}
+          contentStyle={{ fontSize: 12, borderRadius: 8 }}
+        />
+        <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+          {data.map((entry) => (
+            <Cell key={entry.skill} fill={PROFICIENCY_SVG_COLORS[Math.max(0, Math.min(4, Math.round(entry.avgProficiency) - 1))] ?? "#6b7280"} strokeWidth={0} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/apps/web/src/components/analytics/SkillMarketplace.tsx b/apps/web/src/components/analytics/SkillMarketplace.tsx
new file mode 100644
index 0000000..cea6537
--- /dev/null
+++ b/apps/web/src/components/analytics/SkillMarketplace.tsx
@@ -0,0 +1,346 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { trpc } from "~/lib/trpc/client.js";
+import { useDebounce } from "~/hooks/useDebounce.js";
+import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
+import { useTableSort } from "~/hooks/useTableSort.js";
+
+const SkillDistributionChart = dynamic(
+  () => import("~/components/analytics/SkillDistributionChart.js"),
+  { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
+);
+
+const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
+
+const PROFICIENCY_CLASSES = [
+  "bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500",
+  "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/60 dark:text-blue-200 dark:border-blue-600",
+  "bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-900/60 dark:text-indigo-200 dark:border-indigo-500",
+  "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/60 dark:text-amber-200 dark:border-amber-500",
+  "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/60 dark:text-green-200 dark:border-green-500",
+];
+
+function proficiencyClasses(level: number): string {
+  const idx = Math.max(0, Math.min(4, Math.round(level) - 1));
+  return PROFICIENCY_CLASSES[idx] ?? PROFICIENCY_CLASSES[0]!;
+}
+
+function ProficiencyBadge({ value }: { value: number }) {
+  return (
+    <span className={`inline-block px-2 py-0.5 text-xs rounded font-medium border ${proficiencyClasses(value)}`}>
+      {value} {PROFICIENCY_LABELS[value] ?? ""}
+    </span>
+  );
+}
+
+function GapIndicator({ gap }: { gap: number }) {
+  if (gap > 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-red-100 text-red-700 border border-red-200 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700">
+        -{gap} shortage
+      </span>
+    );
+  }
+  if (gap < 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700">
+        +{Math.abs(gap)} surplus
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-gray-100 text-gray-500 border border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
+      balanced
+    </span>
+  );
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return "Not within 30d";
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
+}
+
+export function SkillMarketplace() {
+  const [searchSkill, setSearchSkill] = useState("");
+  const [minProficiency, setMinProficiency] = useState(1);
+  const [availableOnly, setAvailableOnly] = useState(false);
+
+  const debouncedSearch = useDebounce(searchSkill, 300);
+
+  const { data, isLoading, error } = trpc.resource.getSkillMarketplace.useQuery(
+    {
+      searchSkill: debouncedSearch || undefined,
+      minProficiency,
+      availableOnly,
+    },
+    { staleTime: 30_000 },
+  );
+
+  const {
+    sorted: sortedSearch,
+    sortField: searchSortField,
+    sortDir: searchSortDir,
+    toggle: searchToggle,
+  } = useTableSort(data?.searchResults ?? []);
+
+  const gapData = useMemo(() => data?.gapData ?? [], [data?.gapData]);
+  const {
+    sorted: sortedGap,
+    sortField: gapSortField,
+    sortDir: gapSortDir,
+    toggle: gapToggle,
+  } = useTableSort(gapData);
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="h-8 shimmer-skeleton rounded w-64" />
+        <div className="h-16 shimmer-skeleton rounded-xl" />
+        <div className="h-64 shimmer-skeleton rounded-xl" />
+        <div className="h-80 shimmer-skeleton rounded-xl" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+          {error.message}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 pb-24 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Skill Marketplace</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          {data?.totalResources ?? 0} active resources &middot; Search skills, identify gaps, plan capacity
+        </p>
+      </div>
+
+      {/* ── Section 1: Skill Search ──────────────────────────────────────────── */}
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
+        <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Skill Search</h2>
+
+        <div className="flex flex-wrap gap-3 items-center">
+          {/* Search input */}
+          <div className="relative">
+            <svg
+              className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search by skill name..."
+              value={searchSkill}
+              onChange={(e) => setSearchSkill(e.target.value)}
+              className="pl-8 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500 w-60"
+            />
+          </div>
+
+          {/* Min proficiency */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs text-gray-500 dark:text-gray-400">Min. proficiency:</span>
+            <div className="flex rounded-lg overflow-hidden border border-gray-200 dark:border-slate-600">
+              {[1, 2, 3, 4, 5].map((lvl) => (
+                <button
+                  key={lvl}
+                  type="button"
+                  title={PROFICIENCY_LABELS[lvl]}
+                  onClick={() => setMinProficiency(lvl)}
+                  className={`px-2 py-1 text-xs font-medium transition-colors ${
+                    minProficiency === lvl
+                      ? "bg-brand-600 text-white"
+                      : "bg-white dark:bg-slate-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700"
+                  }`}
+                >
+                  {lvl}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Available only */}
+          <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              checked={availableOnly}
+              onChange={(e) => setAvailableOnly(e.target.checked)}
+              className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+            />
+            Available in next 30 days
+          </label>
+        </div>
+
+        {/* Search results table */}
+        {debouncedSearch && debouncedSearch.trim().length > 0 && (
+          <div className="border-t border-gray-100 dark:border-slate-700 pt-4">
+            {sortedSearch.length === 0 ? (
+              <p className="text-sm text-gray-400 italic">
+                No resources found with &quot;{debouncedSearch}&quot; at proficiency {minProficiency}+.
+              </p>
+            ) : (
+              <>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                  {sortedSearch.length} resource{sortedSearch.length !== 1 ? "s" : ""} found
+                </p>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+                      <tr>
+                        <SortableColumnHeader label="Resource" field="displayName" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} />
+                        <SortableColumnHeader label="Chapter" field="chapter" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} />
+                        <SortableColumnHeader label="Skill" field="skillName" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} />
+                        <SortableColumnHeader label="Proficiency" field="skillProficiency" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} align="center" />
+                        <SortableColumnHeader label="Utilization" field="utilizationPercent" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} align="right" />
+                        <SortableColumnHeader label="Available From" field="availableFrom" sortField={searchSortField} sortDir={searchSortDir} onSort={searchToggle} />
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
+                      {sortedSearch.map((r) => (
+                        <tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
+                          <td className="px-4 py-2.5">
+                            <Link
+                              href={`/resources/${r.id}`}
+                              className="font-medium text-gray-900 dark:text-gray-100 hover:text-brand-600 transition-colors"
+                            >
+                              {r.displayName}
+                            </Link>
+                          </td>
+                          <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">{r.chapter ?? "---"}</td>
+                          <td className="px-4 py-2.5 text-gray-700 dark:text-gray-300">{r.skillName}</td>
+                          <td className="px-4 py-2.5 text-center">
+                            <ProficiencyBadge value={r.skillProficiency} />
+                          </td>
+                          <td className="px-4 py-2.5 text-right">
+                            <span className={`text-sm font-medium ${
+                              r.utilizationPercent >= 90
+                                ? "text-red-600 dark:text-red-400"
+                                : r.utilizationPercent >= 70
+                                  ? "text-amber-600 dark:text-amber-400"
+                                  : "text-green-600 dark:text-green-400"
+                            }`}>
+                              {r.utilizationPercent}%
+                            </span>
+                          </td>
+                          <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400 text-sm">
+                            {formatDate(r.availableFrom)}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* ── Section 2: Skill Gap Heat Map ────────────────────────────────────── */}
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
+        <div>
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Skill Gap Analysis</h2>
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            Supply = resources with proficiency 3+ &middot; Demand = unfilled demand requirements &middot; Sorted by largest gap
+          </p>
+        </div>
+
+        {sortedGap.length === 0 ? (
+          <p className="text-sm text-gray-400 italic py-4">
+            No gap data available. Gaps appear when projects have unfilled demand requirements with required skills.
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+                <tr>
+                  <SortableColumnHeader label="Skill" field="skill" sortField={gapSortField} sortDir={gapSortDir} onSort={gapToggle} />
+                  <SortableColumnHeader label="Supply" field="supply" sortField={gapSortField} sortDir={gapSortDir} onSort={gapToggle} align="right" />
+                  <SortableColumnHeader label="Demand" field="demand" sortField={gapSortField} sortDir={gapSortDir} onSort={gapToggle} align="right" />
+                  <SortableColumnHeader label="Gap" field="gap" sortField={gapSortField} sortDir={gapSortDir} onSort={gapToggle} align="center" />
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Visual</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
+                {sortedGap.map((row) => {
+                  const maxBar = Math.max(row.supply, row.demand, 1);
+                  return (
+                    <tr key={row.skill} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
+                      <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-gray-100">
+                        <button
+                          type="button"
+                          className="hover:text-brand-600 transition-colors text-left"
+                          onClick={() => {
+                            setSearchSkill(row.skill);
+                            setMinProficiency(3);
+                            window.scrollTo({ top: 0, behavior: "smooth" });
+                          }}
+                          title={`Search for "${row.skill}"`}
+                        >
+                          {row.skill}
+                        </button>
+                      </td>
+                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.supply}</td>
+                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.demand}</td>
+                      <td className="px-4 py-2.5 text-center">
+                        <GapIndicator gap={row.gap} />
+                      </td>
+                      <td className="px-4 py-2.5 w-48">
+                        <div className="flex items-center gap-1 h-4">
+                          <div
+                            className="h-3 rounded-sm bg-green-400 dark:bg-green-500 transition-all"
+                            style={{ width: `${(row.supply / maxBar) * 100}%`, minWidth: row.supply > 0 ? 4 : 0 }}
+                            title={`Supply: ${row.supply}`}
+                          />
+                          <div
+                            className="h-3 rounded-sm bg-red-400 dark:bg-red-500 transition-all"
+                            style={{ width: `${(row.demand / maxBar) * 100}%`, minWidth: row.demand > 0 ? 4 : 0 }}
+                            title={`Demand: ${row.demand}`}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+            <div className="flex items-center gap-4 mt-3 px-4">
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                <span className="w-3 h-3 rounded-sm bg-green-400 dark:bg-green-500 inline-block" /> Supply (prof. 3+)
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                <span className="w-3 h-3 rounded-sm bg-red-400 dark:bg-red-500 inline-block" /> Demand (unfilled)
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Section 3: Skill Distribution ────────────────────────────────────── */}
+      {(data?.distribution ?? []).length > 0 && (
+        <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4">
+            Top 20 Skills by Resource Count
+          </h2>
+          <SkillDistributionChart data={data?.distribution ?? []} />
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
+            Bar color = average proficiency (light to dark = low to high)
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/SkillsAnalytics.tsx b/apps/web/src/components/analytics/SkillsAnalytics.tsx
index 6141014..5e0ef8f 100644
--- a/apps/web/src/components/analytics/SkillsAnalytics.tsx
+++ b/apps/web/src/components/analytics/SkillsAnalytics.tsx
@@ -1,24 +1,18 @@
 "use client";
 
 import { useState, useId } from "react";
+import dynamic from "next/dynamic";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from "recharts";
 import { trpc } from "~/lib/trpc/client.js";
 import * as XLSX from "xlsx";
 
-const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
+const SkillDistributionChart = dynamic(
+  () => import("~/components/analytics/SkillDistributionChart.js"),
+  { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
+);
 
-// SVG fill colors for the bar chart (work in both light and dark contexts)
-const PROFICIENCY_SVG_COLORS = ["#9ca3af", "#60a5fa", "#818cf8", "#f59e0b", "#4ade80"];
+const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
 
 // Tailwind class sets per proficiency level (1–5), dark-mode aware
 const PROFICIENCY_CLASSES = [
@@ -87,8 +81,9 @@ export function SkillsAnalytics() {
     setRules((prev) => prev.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
   }
 
-  function exportXlsx() {
+  async function exportXlsx() {
     if (!data) return;
+    const XLSX = await import("xlsx");
     const rows = data.aggregated.map((e) => ({
       Skill: e.skill,
       Category: e.category,
@@ -117,9 +112,9 @@ export function SkillsAnalytics() {
 
   if (isLoading) {
     return (
-      <div className="p-6 animate-pulse space-y-4">
-        <div className="h-8 bg-gray-200 rounded w-64" />
-        <div className="h-64 bg-gray-100 rounded-xl" />
+      <div className="p-6 space-y-4">
+        <div className="h-8 shimmer-skeleton rounded w-64" />
+        <div className="h-64 shimmer-skeleton rounded-xl" />
       </div>
     );
   }
@@ -413,21 +408,7 @@ export function SkillsAnalytics() {
       {top20.length > 0 && (
         <div className="bg-white rounded-xl border border-gray-200 p-5">
           <h2 className="text-sm font-semibold text-gray-800 mb-4">Top Skills by Resource Count</h2>
-          <ResponsiveContainer width="100%" height={320}>
-            <BarChart data={top20} layout="vertical" margin={{ left: 160, right: 20, top: 0, bottom: 0 }}>
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis type="category" dataKey="skill" tick={{ fontSize: 11 }} width={155} />
-              <Tooltip
-                formatter={(value: number | undefined) => [`${value ?? 0} resources`, "Count"] as [string, string]}
-                contentStyle={{ fontSize: 12, borderRadius: 8 }}
-              />
-              <Bar dataKey="count" radius={[0, 4, 4, 0]}>
-                {top20.map((entry) => (
-                  <Cell key={entry.skill} fill={PROFICIENCY_SVG_COLORS[Math.max(0, Math.min(4, Math.round(entry.avgProficiency) - 1))] ?? "#6b7280"} strokeWidth={0} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+          <SkillDistributionChart data={top20} />
           <p className="text-xs text-gray-400 mt-2">Bar color = average proficiency (light → dark = low → high)</p>
         </div>
       )}
diff --git a/apps/web/src/components/analytics/computation-graph/domain-colors.ts b/apps/web/src/components/analytics/computation-graph/domain-colors.ts
new file mode 100644
index 0000000..a600ed1
--- /dev/null
+++ b/apps/web/src/components/analytics/computation-graph/domain-colors.ts
@@ -0,0 +1,92 @@
+// ─── Domain Types & Colors for the 3D Computation Graph ────────────────────
+
+export type Domain =
+  | "INPUT"
+  | "SAH"
+  | "ALLOCATION"
+  | "RULES"
+  | "CHARGEABILITY"
+  | "BUDGET"
+  | "ESTIMATE"
+  | "COMMERCIAL"
+  | "EXPERIENCE"
+  | "EFFORT"
+  | "SPREAD";
+
+export const DOMAIN_COLORS: Record<Domain, string> = {
+  INPUT: "#94a3b8",
+  SAH: "#3b82f6",
+  ALLOCATION: "#f97316",
+  RULES: "#8b5cf6",
+  CHARGEABILITY: "#22c55e",
+  BUDGET: "#ef4444",
+  ESTIMATE: "#06b6d4",
+  COMMERCIAL: "#f59e0b",
+  EXPERIENCE: "#ec4899",
+  EFFORT: "#14b8a6",
+  SPREAD: "#6366f1",
+};
+
+export const DOMAIN_LABELS: Record<Domain, string> = {
+  INPUT: "Inputs",
+  SAH: "SAH",
+  ALLOCATION: "Allocation",
+  RULES: "Rules Engine",
+  CHARGEABILITY: "Chargeability",
+  BUDGET: "Budget",
+  ESTIMATE: "Estimates",
+  COMMERCIAL: "Commercial",
+  EXPERIENCE: "Experience Mult.",
+  EFFORT: "Effort Rules",
+  SPREAD: "Monthly Spread",
+};
+
+// ─── Graph Node / Link Types ────────────────────────────────────────────────
+
+export interface GraphNode {
+  id: string;
+  label: string;
+  value: number | string;
+  unit: string;
+  domain: Domain;
+  description: string;
+  formula?: string;
+  level: number; // 0=Input, 1=Intermediate, 2=Derived, 3=Output
+  // react-force-graph position hints
+  fx?: number;
+  fy?: number;
+  fz?: number;
+}
+
+export interface GraphLink {
+  source: string;
+  target: string;
+  formula: string;
+  weight: number; // 1-3 for line thickness
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+// ─── Resource View Mode ─────────────────────────────────────────────────────
+
+export const RESOURCE_VIEW_DOMAINS: Domain[] = [
+  "INPUT",
+  "SAH",
+  "ALLOCATION",
+  "RULES",
+  "CHARGEABILITY",
+  "BUDGET",
+];
+
+export const PROJECT_VIEW_DOMAINS: Domain[] = [
+  "INPUT",
+  "ESTIMATE",
+  "COMMERCIAL",
+  "EXPERIENCE",
+  "EFFORT",
+  "SPREAD",
+  "BUDGET",
+];
diff --git a/apps/web/src/components/analytics/computation-graph/graph-data.ts b/apps/web/src/components/analytics/computation-graph/graph-data.ts
new file mode 100644
index 0000000..b023e00
--- /dev/null
+++ b/apps/web/src/components/analytics/computation-graph/graph-data.ts
@@ -0,0 +1,125 @@
+import type { GraphNode, GraphLink, Domain } from "./domain-colors";
+import { DOMAIN_COLORS } from "./domain-colors";
+
+// ─── Layout Constants ───────────────────────────────────────────────────────
+
+const LEVEL_Y_SPACING = 120;
+const DOMAIN_X_SPACING = 200;
+const NODE_Z_JITTER = 40;
+
+// Domain → X position offset for clustering
+const DOMAIN_X_OFFSETS: Partial<Record<Domain, number>> = {
+  INPUT: 0,
+  SAH: -300,
+  ALLOCATION: -100,
+  RULES: 100,
+  CHARGEABILITY: 300,
+  BUDGET: 500,
+  ESTIMATE: -200,
+  COMMERCIAL: 0,
+  EXPERIENCE: 200,
+  EFFORT: -400,
+  SPREAD: 400,
+};
+
+// ─── Position Calculator ────────────────────────────────────────────────────
+
+export interface PositionedNode extends GraphNode {
+  fx: number;
+  fy: number;
+  fz: number;
+  color: string;
+}
+
+export interface ForceGraphData {
+  nodes: PositionedNode[];
+  links: GraphLink[];
+}
+
+/**
+ * Assigns 3D positions to nodes based on their level (Y) and domain (X),
+ * with slight Z jitter to prevent overlap.
+ */
+export function buildForceGraphData(
+  nodes: GraphNode[],
+  links: GraphLink[],
+): ForceGraphData {
+  // Group nodes by domain+level to spread within each cluster
+  const groups = new Map<string, GraphNode[]>();
+  for (const node of nodes) {
+    const key = `${node.domain}:${node.level}`;
+    const arr = groups.get(key) ?? [];
+    arr.push(node);
+    groups.set(key, arr);
+  }
+
+  const positionedNodes: PositionedNode[] = nodes.map((node) => {
+    const key = `${node.domain}:${node.level}`;
+    const siblings = groups.get(key) ?? [node];
+    const idx = siblings.indexOf(node);
+    const count = siblings.length;
+
+    // Center siblings around the domain X offset
+    const baseX = DOMAIN_X_OFFSETS[node.domain] ?? 0;
+    const spreadX = count > 1 ? (idx - (count - 1) / 2) * 80 : 0;
+
+    return {
+      ...node,
+      fx: baseX + spreadX,
+      fy: node.level * LEVEL_Y_SPACING,
+      fz: (idx % 2 === 0 ? 1 : -1) * NODE_Z_JITTER * (Math.floor(idx / 2) + 1) * 0.5,
+      color: DOMAIN_COLORS[node.domain],
+    };
+  });
+
+  // Filter links to only reference existing node IDs
+  const nodeIds = new Set(positionedNodes.map((n) => n.id));
+  const validLinks = links.filter((link) => nodeIds.has(link.source) && nodeIds.has(link.target));
+
+  return { nodes: positionedNodes, links: validLinks };
+}
+
+// ─── Highlight Helpers ──────────────────────────────────────────────────────
+
+/**
+ * Given a clicked node, returns the set of node IDs in its
+ * upstream (ancestors) and downstream (descendants) path.
+ */
+export function getConnectedNodeIds(
+  nodeId: string,
+  links: GraphLink[],
+): Set<string> {
+  const connected = new Set<string>([nodeId]);
+
+  // BFS upstream (nodes that feed into this one)
+  const queue = [nodeId];
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    for (const link of links) {
+      const targetId = typeof link.target === "object" ? (link.target as { id: string }).id : link.target;
+      const sourceId = typeof link.source === "object" ? (link.source as { id: string }).id : link.source;
+      if (targetId === current && !connected.has(sourceId)) {
+        connected.add(sourceId);
+        queue.push(sourceId);
+      }
+    }
+  }
+
+  // BFS downstream (nodes this one feeds into)
+  const queue2 = [nodeId];
+  const visited = new Set<string>([nodeId]);
+  while (queue2.length > 0) {
+    const current = queue2.shift()!;
+    for (const link of links) {
+      const targetId = typeof link.target === "object" ? (link.target as { id: string }).id : link.target;
+      const sourceId = typeof link.source === "object" ? (link.source as { id: string }).id : link.source;
+      if (sourceId === current && !visited.has(targetId)) {
+        connected.add(targetId);
+        visited.add(targetId);
+        queue2.push(targetId);
+      }
+    }
+  }
+
+  return connected;
+}
diff --git a/apps/web/src/components/analytics/computation-graph/node-renderer.ts b/apps/web/src/components/analytics/computation-graph/node-renderer.ts
new file mode 100644
index 0000000..de4aa28
--- /dev/null
+++ b/apps/web/src/components/analytics/computation-graph/node-renderer.ts
@@ -0,0 +1,120 @@
+import * as THREE from "three";
+import type { PositionedNode } from "./graph-data";
+
+// ─── Canvas-based node sprites ──────────────────────────────────────────────
+
+const spriteCache = new Map<string, THREE.Sprite>();
+
+/**
+ * Creates a Three.js sprite for a graph node: colored circle with value label.
+ */
+export function createNodeSprite(node: PositionedNode): THREE.Sprite {
+  const cacheKey = `${node.id}:${node.value}:${node.color}`;
+  const cached = spriteCache.get(cacheKey);
+  if (cached) return cached.clone();
+
+  const canvas = document.createElement("canvas");
+  const size = 512;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d")!;
+
+  const cx = size / 2;
+  const cy = size / 2;
+  const radius = size / 2 - 16;
+
+  // Outer glow ring
+  const gradient = ctx.createRadialGradient(cx, cy, radius * 0.8, cx, cy, radius);
+  gradient.addColorStop(0, node.color + "aa");
+  gradient.addColorStop(1, node.color + "00");
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fillStyle = gradient;
+  ctx.fill();
+
+  // Dark background circle for contrast
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius * 0.78, 0, Math.PI * 2);
+  ctx.fillStyle = "#0f172a";
+  ctx.fill();
+
+  // Colored border ring
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius * 0.78, 0, Math.PI * 2);
+  ctx.strokeStyle = node.color;
+  ctx.lineWidth = 8;
+  ctx.stroke();
+
+  // Subtle inner fill
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius * 0.74, 0, Math.PI * 2);
+  ctx.fillStyle = node.color + "20";
+  ctx.fill();
+
+  // Label (top)
+  ctx.fillStyle = "#ffffff";
+  ctx.font = "bold 36px system-ui, sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.shadowColor = "#000000";
+  ctx.shadowBlur = 6;
+
+  const label = node.label.length > 16 ? node.label.slice(0, 14) + "..." : node.label;
+  ctx.fillText(label, cx, cy - 28);
+
+  // Value (bottom) — brighter, larger
+  ctx.fillStyle = node.color;
+  ctx.font = "bold 44px system-ui, sans-serif";
+  ctx.shadowBlur = 4;
+  const valueStr = typeof node.value === "number" ? node.value.toFixed(1) : String(node.value);
+  const displayValue = valueStr.length > 12 ? valueStr.slice(0, 10) + "..." : valueStr;
+  ctx.fillText(displayValue, cx, cy + 24);
+
+  // Unit (small, below value)
+  if (node.unit) {
+    ctx.fillStyle = "#94a3b8";
+    ctx.font = "24px system-ui, sans-serif";
+    ctx.shadowBlur = 0;
+    ctx.fillText(node.unit, cx, cy + 60);
+  }
+
+  const texture = new THREE.CanvasTexture(canvas);
+  const material = new THREE.SpriteMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false,
+  });
+  const sprite = new THREE.Sprite(material);
+  sprite.scale.set(50, 50, 1);
+
+  spriteCache.set(cacheKey, sprite);
+  return sprite;
+}
+
+/**
+ * Creates a dimmed version of a node sprite (for non-highlighted nodes).
+ */
+export function createDimmedNodeSprite(node: PositionedNode): THREE.Sprite {
+  const sprite = createNodeSprite({ ...node, color: "#4b5563" });
+  sprite.material.opacity = 0.3;
+  return sprite;
+}
+
+// ─── Link particle rendering ───────────────────────────────────────────────
+
+/**
+ * Returns a color for a link based on the source node's domain color.
+ */
+export function getLinkColor(
+  link: { source: string | { color?: string }; weight: number },
+  opacity = 0.4,
+): string {
+  const sourceColor = typeof link.source === "object" && link.source.color
+    ? link.source.color
+    : "#6b7280";
+  // Convert hex to rgba
+  const r = parseInt(sourceColor.slice(1, 3), 16);
+  const g = parseInt(sourceColor.slice(3, 5), 16);
+  const b = parseInt(sourceColor.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${opacity})`;
+}
diff --git a/apps/web/src/components/analytics/computation-graph/useComputationGraphData.ts b/apps/web/src/components/analytics/computation-graph/useComputationGraphData.ts
new file mode 100644
index 0000000..de3d088
--- /dev/null
+++ b/apps/web/src/components/analytics/computation-graph/useComputationGraphData.ts
@@ -0,0 +1,155 @@
+"use client";
+
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import {
+  RESOURCE_VIEW_DOMAINS,
+  PROJECT_VIEW_DOMAINS,
+  type Domain,
+  type GraphNode,
+} from "./domain-colors";
+import { buildForceGraphData, getConnectedNodeIds, type PositionedNode, type ForceGraphData } from "./graph-data";
+
+export type ViewMode = "resource" | "project";
+
+export interface ComputationGraphState {
+  viewMode: ViewMode;
+  setViewMode: (m: ViewMode) => void;
+  resourceId: string;
+  setResourceId: (id: string) => void;
+  month: string;
+  setMonth: (m: string) => void;
+  projectId: string;
+  setProjectId: (id: string) => void;
+  resources: Array<{ id: string; displayName: string; eid: string }>;
+  projects: Array<{ id: string; name: string; shortCode?: string | null }>;
+  isLoading: boolean;
+  activeDomains: Domain[];
+  graphData: ForceGraphData;
+  highlightedNodes: Set<string> | null;
+  setHighlightedNodes: (s: Set<string> | null) => void;
+  hoveredNode: PositionedNode | null;
+  setHoveredNode: (n: PositionedNode | null) => void;
+  domainFilter: Set<Domain>;
+  toggleDomain: (domain: Domain) => void;
+  handleNodeClick: (nodeId: string) => void;
+}
+
+export function useComputationGraphData(): ComputationGraphState {
+  const [viewMode, setViewMode] = useState<ViewMode>("resource");
+  const [resourceId, setResourceId] = useState<string>("");
+  const [month, setMonth] = useState(() => {
+    const now = new Date();
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+  });
+  const [projectId, setProjectId] = useState<string>("");
+  const [highlightedNodes, setHighlightedNodes] = useState<Set<string> | null>(null);
+  const [hoveredNode, setHoveredNode] = useState<PositionedNode | null>(null);
+  const [domainFilter, setDomainFilter] = useState<Set<Domain>>(new Set());
+
+  // Load selectors
+  const { data: resourceData } = trpc.resource.list.useQuery(
+    { isActive: true, limit: 500 },
+    { staleTime: 60_000 },
+  );
+  const resources = resourceData?.resources ?? [];
+
+  const { data: projectData } = trpc.project.list.useQuery(
+    {},
+    { staleTime: 60_000 },
+  );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const projects: Array<{ id: string; name: string; shortCode?: string | null }> = (projectData as any)?.projects ?? (projectData as any) ?? [];
+
+  // Auto-select first resource/project
+  useEffect(() => {
+    if (!resourceId && resources.length > 0) {
+      setResourceId(resources[0]!.id);
+    }
+  }, [resources, resourceId]);
+
+  useEffect(() => {
+    if (!projectId && Array.isArray(projects) && projects.length > 0) {
+      setProjectId(projects[0]!.id);
+    }
+  }, [projects, projectId]);
+
+  // Fetch graph data
+  const { data: resourceGraphData, isLoading: resourceLoading } = trpc.computationGraph.getResourceData.useQuery(
+    { resourceId, month },
+    { enabled: viewMode === "resource" && !!resourceId, staleTime: 30_000 },
+  );
+
+  const { data: projectGraphData, isLoading: projectLoading } = trpc.computationGraph.getProjectData.useQuery(
+    { projectId },
+    { enabled: viewMode === "project" && !!projectId, staleTime: 30_000 },
+  );
+
+  const rawData = viewMode === "resource" ? resourceGraphData : projectGraphData;
+  const isLoading = viewMode === "resource" ? resourceLoading : projectLoading;
+  const activeDomains = viewMode === "resource" ? RESOURCE_VIEW_DOMAINS : PROJECT_VIEW_DOMAINS;
+
+  // Build graph data with positions
+  const graphData = useMemo(() => {
+    if (!rawData) return { nodes: [], links: [] };
+    let filteredNodes = rawData.nodes as GraphNode[];
+    if (domainFilter.size > 0) {
+      filteredNodes = filteredNodes.filter((nd: GraphNode) => !domainFilter.has(nd.domain as Domain));
+    }
+    const filteredNodeIds = new Set(filteredNodes.map((nd: GraphNode) => nd.id));
+    const filteredLinks = rawData.links.filter(
+      (lk: { source: string; target: string }) =>
+        filteredNodeIds.has(lk.source) && filteredNodeIds.has(lk.target),
+    );
+    return buildForceGraphData(filteredNodes, filteredLinks);
+  }, [rawData, domainFilter]);
+
+  // Domain filter toggle
+  const toggleDomain = useCallback((domain: Domain) => {
+    setDomainFilter((prev) => {
+      const next = new Set(prev);
+      if (next.has(domain)) {
+        next.delete(domain);
+      } else {
+        next.add(domain);
+      }
+      return next;
+    });
+  }, []);
+
+  // Node click → highlight path
+  const handleNodeClick = useCallback(
+    (nodeId: string) => {
+      if (highlightedNodes?.has(nodeId)) {
+        setHighlightedNodes(null);
+      } else {
+        const connected = getConnectedNodeIds(nodeId, graphData.links);
+        setHighlightedNodes(connected);
+      }
+    },
+    [graphData.links, highlightedNodes],
+  );
+
+  return {
+    viewMode,
+    setViewMode,
+    resourceId,
+    setResourceId,
+    month,
+    setMonth,
+    projectId,
+    setProjectId,
+    resources,
+    projects,
+    isLoading,
+    activeDomains,
+    graphData,
+    highlightedNodes,
+    setHighlightedNodes,
+    hoveredNode,
+    setHoveredNode,
+    domainFilter,
+    toggleDomain,
+    handleNodeClick,
+  };
+}
diff --git a/apps/web/src/components/assistant/ChatDrawer.tsx b/apps/web/src/components/assistant/ChatDrawer.tsx
deleted file mode 100644
index 3574a47..0000000
--- a/apps/web/src/components/assistant/ChatDrawer.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { usePathname } from "next/navigation";
-import { trpc } from "~/lib/trpc/client.js";
-import { ChatMessage, TypingIndicator } from "./ChatMessage.js";
-
-/** Map route prefixes to human-readable page context for the AI */
-const ROUTE_CONTEXT: Record<string, string> = {
-  "/dashboard": "Dashboard — Übersicht mit KPIs, aktive Projekte, Ressourcen-Auslastung",
-  "/timeline": "Timeline — Gantt-artige Ansicht aller Allokationen und Projekte",
-  "/allocations": "Allokationen — Liste aller Zuweisungen von Ressourcen zu Projekten",
-  "/staffing": "Staffing — Projektbesetzung und Kapazitätsplanung",
-  "/resources": "Ressourcen — Liste aller Mitarbeiter mit Details (FTE, LCR, Skills, Chapter)",
-  "/projects": "Projekte — Liste aller Projekte mit Budget, Status, Zeitraum",
-  "/roles": "Rollen — Verwaltung der verfügbaren Rollen",
-  "/estimates": "Estimating — Aufwandsschätzungen für Projekte",
-  "/vacations/my": "Meine Urlaube — Eigene Urlaubsanträge und Saldo",
-  "/vacations": "Urlaubsverwaltung — Alle Urlaubsanträge, Genehmigungen, Team-Kalender",
-  "/analytics/skills": "Skills Analytics — Skill-Verteilung und -Analyse über alle Ressourcen",
-  "/analytics/computation-graph": "Computation Graph — Berechnungsvisualisierung für Budget/Kosten",
-  "/reports/chargeability": "Chargeability Report — Auslastungsanalyse pro Ressource",
-  "/admin/settings": "Admin-Einstellungen — System-Konfiguration, AI-Credentials, SMTP",
-  "/admin/users": "Benutzerverwaltung — Rollen, Berechtigungen, Zugänge",
-};
-
-function resolvePageContext(pathname: string): string {
-  // Try exact match first, then prefix match (longest first)
-  const exact = ROUTE_CONTEXT[pathname];
-  if (exact) return exact;
-  const sorted = Object.keys(ROUTE_CONTEXT).sort((a, b) => b.length - a.length);
-  for (const prefix of sorted) {
-    const ctx = ROUTE_CONTEXT[prefix];
-    if (pathname.startsWith(prefix) && ctx) return ctx;
-  }
-  return pathname;
-}
-
-interface Message {
-  role: "user" | "assistant";
-  content: string;
-}
-
-export function ChatDrawer({ onClose }: { onClose: () => void }) {
-  const pathname = usePathname();
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const chatMutation = trpc.assistant.chat.useMutation();
-
-  // Auto-scroll to bottom on new messages
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [messages, isLoading]);
-
-  // Focus input on mount
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const sendMessage = useCallback(async () => {
-    const text = input.trim();
-    if (!text || isLoading) return;
-
-    setInput("");
-    setError(null);
-
-    const userMsg: Message = { role: "user", content: text };
-    const updated = [...messages, userMsg];
-    setMessages(updated);
-    setIsLoading(true);
-
-    try {
-      const reply = await chatMutation.mutateAsync({
-        messages: updated.map((m) => ({ role: m.role, content: m.content })),
-        ...(pathname ? { pageContext: resolvePageContext(pathname) } : {}),
-      });
-      setMessages((prev) => [...prev, { role: "assistant", content: reply.content }]);
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : "Something went wrong";
-      setError(msg);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [input, isLoading, messages, chatMutation]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      void sendMessage();
-    }
-  };
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm" onClick={onClose} />
-
-      {/* Panel */}
-      <div className="fixed right-0 top-0 z-50 flex h-full w-full max-w-md flex-col border-l border-gray-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-slate-700">
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-brand-600 text-white">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-              </svg>
-            </div>
-            <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Planarchy Assistant</h2>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-slate-800 dark:hover:text-gray-300"
-          >
-            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Messages */}
-        <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
-          {messages.length === 0 && !isLoading && (
-            <div className="flex flex-col items-center justify-center py-16 text-center text-sm text-gray-400 dark:text-gray-500">
-              <svg className="mb-3 h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-              </svg>
-              <p className="font-medium">Frag mich etwas!</p>
-              <p className="mt-1 text-xs">z.B. &quot;Welche Ressourcen gibt es?&quot; oder &quot;Budget von Z033T593?&quot;</p>
-            </div>
-          )}
-          {messages.map((msg, i) => (
-            <ChatMessage key={i} role={msg.role} content={msg.content} />
-          ))}
-          {isLoading && <TypingIndicator />}
-          {error && (
-            <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
-              {error}
-            </div>
-          )}
-        </div>
-
-        {/* Input */}
-        <div className="border-t border-gray-200 px-4 py-3 dark:border-slate-700">
-          <div className="flex items-end gap-2">
-            <textarea
-              ref={inputRef}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Nachricht eingeben..."
-              rows={1}
-              className="flex-1 resize-none rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-brand-500"
-              style={{ maxHeight: "120px" }}
-              onInput={(e) => {
-                const target = e.target as HTMLTextAreaElement;
-                target.style.height = "auto";
-                target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
-              }}
-            />
-            <button
-              type="button"
-              onClick={() => void sendMessage()}
-              disabled={!input.trim() || isLoading}
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-600 text-white transition-colors hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M12 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/apps/web/src/components/blueprints/BlueprintsClient.tsx b/apps/web/src/components/blueprints/BlueprintsClient.tsx
index 92851ef..5952034 100644
--- a/apps/web/src/components/blueprints/BlueprintsClient.tsx
+++ b/apps/web/src/components/blueprints/BlueprintsClient.tsx
@@ -319,7 +319,7 @@ export function BlueprintsClient() {
       {isLoading && (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse h-36" />
+            <div key={i} className="bg-white rounded-xl border border-gray-200 p-5 shimmer-skeleton h-36" />
           ))}
         </div>
       )}
@@ -354,11 +354,11 @@ export function BlueprintsClient() {
                       aria-label="Select all blueprints"
                     />
                   </th>
-                  <SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} />
-                  <SortableColumnHeader label="Target" field="target" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} />
-                  <SortableColumnHeader label="Fields" field="fieldCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
-                  <SortableColumnHeader label="Staffing Presets" field="presetCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
-                  <SortableColumnHeader label="Global" field="global" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
+                  <SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} tooltip="Blueprint name. Defines a template of dynamic fields for resources or projects." />
+                  <SortableColumnHeader label="Target" field="target" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} tooltip="Whether this blueprint applies to Resource or Project entities." />
+                  <SortableColumnHeader label="Fields" field="fieldCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Number of custom dynamic fields defined in this blueprint." />
+                  <SortableColumnHeader label="Staffing Presets" field="presetCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Role presets for project staffing demands. Only applicable to PROJECT blueprints." />
+                  <SortableColumnHeader label="Global" field="global" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Global blueprints expose their fields as columns across all entities of the target type." />
                   <th className="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                 </tr>
               </thead>
diff --git a/apps/web/src/components/comments/CommentInput.tsx b/apps/web/src/components/comments/CommentInput.tsx
new file mode 100644
index 0000000..3b1135b
--- /dev/null
+++ b/apps/web/src/components/comments/CommentInput.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+
+interface CommentInputProps {
+  entityType: string;
+  entityId: string;
+  parentId?: string;
+  onSubmit: (body: string) => void;
+  onCancel?: () => void;
+  isSubmitting?: boolean;
+  placeholder?: string;
+  autoFocus?: boolean;
+}
+
+interface MentionCandidate {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+export function CommentInput({
+  entityType: _entityType,
+  entityId: _entityId,
+  parentId: _parentId,
+  onSubmit,
+  onCancel,
+  isSubmitting = false,
+  placeholder = "Write a comment... Use @ to mention someone",
+  autoFocus = false,
+}: CommentInputProps) {
+  const [body, setBody] = useState("");
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Fetch users for mention autocomplete (only when needed)
+  const usersQuery = trpc.user.listAssignable.useQuery(undefined, {
+    enabled: mentionQuery !== null,
+    staleTime: 60_000,
+  });
+
+  const users = usersQuery.data ?? [];
+
+  // Filter users based on mention query
+  const filteredUsers: MentionCandidate[] =
+    mentionQuery !== null
+      ? users.filter((u) => {
+          const q = mentionQuery.toLowerCase();
+          return (
+            (u.name?.toLowerCase().includes(q) ?? false) ||
+            u.email.toLowerCase().includes(q)
+          );
+        }).slice(0, 8)
+      : [];
+
+  // Reset mention index when filtered list changes
+  useEffect(() => {
+    setMentionIndex(0);
+  }, [mentionQuery]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const value = e.target.value;
+      const cursor = e.target.selectionStart ?? value.length;
+      setBody(value);
+      setCursorPosition(cursor);
+
+      // Detect if we are in a @mention context
+      const textBeforeCursor = value.slice(0, cursor);
+      const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
+
+      if (atMatch) {
+        setMentionQuery(atMatch[1]!);
+      } else {
+        setMentionQuery(null);
+      }
+    },
+    [],
+  );
+
+  const insertMention = useCallback(
+    (user: MentionCandidate) => {
+      const textBeforeCursor = body.slice(0, cursorPosition);
+      const textAfterCursor = body.slice(cursorPosition);
+
+      // Find the @ that triggered this mention
+      const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
+      if (!atMatch) return;
+
+      const atStart = textBeforeCursor.length - atMatch[0].length;
+      const displayName = user.name ?? user.email;
+      const mentionText = `@[${displayName}](${user.id}) `;
+
+      const newBody =
+        textBeforeCursor.slice(0, atStart) + mentionText + textAfterCursor;
+      setBody(newBody);
+      setMentionQuery(null);
+
+      // Focus and set cursor position
+      const newCursorPos = atStart + mentionText.length;
+      requestAnimationFrame(() => {
+        const ta = textareaRef.current;
+        if (ta) {
+          ta.focus();
+          ta.selectionStart = newCursorPos;
+          ta.selectionEnd = newCursorPos;
+        }
+      });
+    },
+    [body, cursorPosition],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Handle mention dropdown navigation
+      if (mentionQuery !== null && filteredUsers.length > 0) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setMentionIndex((prev) =>
+            prev < filteredUsers.length - 1 ? prev + 1 : 0,
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setMentionIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredUsers.length - 1,
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          insertMention(filteredUsers[mentionIndex]!);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setMentionQuery(null);
+          return;
+        }
+      }
+
+      // Submit on Ctrl+Enter / Cmd+Enter
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        if (body.trim().length > 0 && !isSubmitting) {
+          onSubmit(body.trim());
+          setBody("");
+        }
+      }
+    },
+    [mentionQuery, filteredUsers, mentionIndex, insertMention, body, isSubmitting, onSubmit],
+  );
+
+  function handleSubmitClick() {
+    if (body.trim().length > 0 && !isSubmitting) {
+      onSubmit(body.trim());
+      setBody("");
+    }
+  }
+
+  return (
+    <div className="relative">
+      <textarea
+        ref={textareaRef}
+        value={body}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        disabled={isSubmitting}
+        rows={3}
+        className="w-full rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-3 text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:border-brand-400 dark:focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-brand-100 dark:focus:ring-sky-900 disabled:opacity-60 resize-y"
+      />
+
+      {/* Mention autocomplete dropdown */}
+      {mentionQuery !== null && filteredUsers.length > 0 && (
+        <div className="absolute left-0 bottom-full mb-1 z-50 w-72 rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-lg overflow-hidden">
+          {filteredUsers.map((user, idx) => (
+            <button
+              key={user.id}
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault(); // prevent textarea blur
+                insertMention(user);
+              }}
+              className={`flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors ${
+                idx === mentionIndex
+                  ? "bg-brand-50 dark:bg-sky-900/40 text-brand-700 dark:text-sky-200"
+                  : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+              }`}
+            >
+              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-100 dark:bg-sky-800 text-xs font-semibold text-brand-700 dark:text-sky-200">
+                {(user.name ?? user.email).charAt(0).toUpperCase()}
+              </span>
+              <span className="truncate">
+                <span className="font-medium">{user.name ?? "—"}</span>
+                <span className="ml-1 text-gray-400 text-xs">{user.email}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-between">
+        <span className="text-xs text-gray-400">
+          Ctrl+Enter to submit
+        </span>
+        <div className="flex gap-2">
+          {onCancel && (
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={isSubmitting}
+              className="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-60"
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleSubmitClick}
+            disabled={body.trim().length === 0 || isSubmitting}
+            className="rounded-lg bg-brand-600 dark:bg-sky-600 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-brand-700 dark:hover:bg-sky-700 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {isSubmitting ? "Sending..." : "Comment"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/comments/CommentThread.tsx b/apps/web/src/components/comments/CommentThread.tsx
new file mode 100644
index 0000000..11651bb
--- /dev/null
+++ b/apps/web/src/components/comments/CommentThread.tsx
@@ -0,0 +1,323 @@
+"use client";
+
+import { useState } from "react";
+import { clsx } from "clsx";
+import { trpc } from "~/lib/trpc/client.js";
+import { CommentInput } from "./CommentInput.js";
+
+interface CommentAuthor {
+  id: string;
+  name: string | null;
+  email: string;
+  image: string | null;
+}
+
+interface CommentReply {
+  id: string;
+  body: string;
+  resolved: boolean;
+  createdAt: Date | string;
+  author: CommentAuthor;
+}
+
+interface CommentItem {
+  id: string;
+  body: string;
+  resolved: boolean;
+  createdAt: Date | string;
+  author: CommentAuthor;
+  replies: CommentReply[];
+}
+
+interface CommentThreadProps {
+  entityType: string;
+  entityId: string;
+}
+
+function formatRelativeTime(date: Date | string): string {
+  const d = date instanceof Date ? date : new Date(date);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMinutes = Math.floor(diffMs / 60_000);
+
+  if (diffMinutes < 1) return "just now";
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return d.toLocaleDateString();
+}
+
+function AuthorAvatar({ author }: { author: CommentAuthor }) {
+  const initials = author.name
+    ? author.name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : author.email.charAt(0).toUpperCase();
+
+  return (
+    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-100 dark:bg-sky-800 text-xs font-semibold text-brand-700 dark:text-sky-200">
+      {initials}
+    </span>
+  );
+}
+
+/**
+ * Render comment body with @mention highlights.
+ * Transforms @[Name](userId) into styled spans.
+ */
+function CommentBody({ body }: { body: string }) {
+  const parts: Array<{ type: "text" | "mention"; value: string }> = [];
+  const regex = /@\[([^\]]+)\]\([^)]+\)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(body)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ type: "text", value: body.slice(lastIndex, match.index) });
+    }
+    parts.push({ type: "mention", value: `@${match[1]}` });
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < body.length) {
+    parts.push({ type: "text", value: body.slice(lastIndex) });
+  }
+
+  return (
+    <p className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words">
+      {parts.map((part, i) =>
+        part.type === "mention" ? (
+          <span
+            key={i}
+            className="rounded bg-brand-50 dark:bg-sky-900/50 px-1 py-0.5 text-brand-700 dark:text-sky-300 font-medium text-xs"
+          >
+            {part.value}
+          </span>
+        ) : (
+          <span key={i}>{part.value}</span>
+        ),
+      )}
+    </p>
+  );
+}
+
+function SingleComment({
+  comment,
+  entityType,
+  entityId,
+  isReply = false,
+}: {
+  comment: CommentItem | CommentReply;
+  entityType: string;
+  entityId: string;
+  isReply?: boolean;
+}) {
+  const [showReplyInput, setShowReplyInput] = useState(false);
+  const utils = trpc.useUtils();
+
+  const createMutation = trpc.comment.create.useMutation({
+    onSuccess: () => {
+      setShowReplyInput(false);
+      void utils.comment.list.invalidate({ entityType, entityId });
+      void utils.comment.count.invalidate({ entityType, entityId });
+    },
+  });
+
+  const resolveMutation = trpc.comment.resolve.useMutation({
+    onSuccess: () => {
+      void utils.comment.list.invalidate({ entityType, entityId });
+    },
+  });
+
+  const deleteMutation = trpc.comment.delete.useMutation({
+    onSuccess: () => {
+      void utils.comment.list.invalidate({ entityType, entityId });
+      void utils.comment.count.invalidate({ entityType, entityId });
+    },
+  });
+
+  const isResolved = comment.resolved;
+
+  return (
+    <div
+      className={clsx(
+        "group relative",
+        isResolved && "opacity-60",
+      )}
+    >
+      <div className={clsx("flex gap-3", isReply && "ml-10")}>
+        <AuthorAvatar author={comment.author} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+              {comment.author.name ?? comment.author.email}
+            </span>
+            <span className="text-xs text-gray-400">
+              {formatRelativeTime(comment.createdAt)}
+            </span>
+            {isResolved && (
+              <span className="rounded-full bg-emerald-100 dark:bg-emerald-900/50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+                Resolved
+              </span>
+            )}
+          </div>
+
+          <div className={clsx(isResolved && "line-through decoration-gray-300 dark:decoration-gray-600")}>
+            <CommentBody body={comment.body} />
+          </div>
+
+          {/* Action buttons */}
+          <div className="mt-1 flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
+            {!isReply && (
+              <button
+                type="button"
+                onClick={() => setShowReplyInput((prev) => !prev)}
+                className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                Reply
+              </button>
+            )}
+            {!isReply && (
+              <button
+                type="button"
+                onClick={() =>
+                  resolveMutation.mutate({
+                    id: comment.id,
+                    resolved: !isResolved,
+                  })
+                }
+                disabled={resolveMutation.isPending}
+                className="text-xs text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+              >
+                {isResolved ? "Unresolve" : "Resolve"}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                if (window.confirm("Delete this comment?")) {
+                  deleteMutation.mutate({ id: comment.id });
+                }
+              }}
+              disabled={deleteMutation.isPending}
+              className="text-xs text-gray-400 hover:text-rose-600 dark:hover:text-rose-400"
+            >
+              Delete
+            </button>
+          </div>
+
+          {/* Inline reply input */}
+          {showReplyInput && (
+            <div className="mt-3">
+              <CommentInput
+                entityType={entityType}
+                entityId={entityId}
+                parentId={comment.id}
+                onSubmit={(replyBody) => {
+                  createMutation.mutate({
+                    entityType,
+                    entityId,
+                    parentId: comment.id,
+                    body: replyBody,
+                  });
+                }}
+                onCancel={() => setShowReplyInput(false)}
+                isSubmitting={createMutation.isPending}
+                placeholder="Write a reply..."
+                autoFocus
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Render replies */}
+      {"replies" in comment && comment.replies.length > 0 && (
+        <div className="mt-3 space-y-3 border-l-2 border-gray-100 dark:border-gray-700 pl-2">
+          {comment.replies.map((reply) => (
+            <SingleComment
+              key={reply.id}
+              comment={reply}
+              entityType={entityType}
+              entityId={entityId}
+              isReply
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CommentThread({ entityType, entityId }: CommentThreadProps) {
+  const utils = trpc.useUtils();
+
+  const commentsQuery = trpc.comment.list.useQuery(
+    { entityType, entityId },
+    { staleTime: 10_000 },
+  );
+
+  const createMutation = trpc.comment.create.useMutation({
+    onSuccess: () => {
+      void utils.comment.list.invalidate({ entityType, entityId });
+      void utils.comment.count.invalidate({ entityType, entityId });
+    },
+  });
+
+  const comments = (commentsQuery.data ?? []) as CommentItem[];
+
+  return (
+    <div className="space-y-6">
+      {/* Comment list */}
+      {commentsQuery.isLoading ? (
+        <div className="space-y-4">
+          {[1, 2].map((i) => (
+            <div key={i} className="flex gap-3">
+              <div className="h-8 w-8 shimmer-skeleton rounded-full" />
+              <div className="flex-1 space-y-2">
+                <div className="h-4 w-32 shimmer-skeleton rounded" />
+                <div className="h-12 shimmer-skeleton rounded-lg" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : comments.length === 0 ? (
+        <p className="text-center text-sm text-gray-400 py-6">
+          No comments yet. Start the conversation below.
+        </p>
+      ) : (
+        <div className="space-y-5">
+          {comments.map((comment) => (
+            <SingleComment
+              key={comment.id}
+              comment={comment}
+              entityType={entityType}
+              entityId={entityId}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* New comment input */}
+      <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+        <CommentInput
+          entityType={entityType}
+          entityId={entityId}
+          onSubmit={(body) => {
+            createMutation.mutate({
+              entityType,
+              entityId,
+              body,
+            });
+          }}
+          isSubmitting={createMutation.isPending}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/DashboardClient.tsx b/apps/web/src/components/dashboard/DashboardClient.tsx
index a4160c0..13154b7 100644
--- a/apps/web/src/components/dashboard/DashboardClient.tsx
+++ b/apps/web/src/components/dashboard/DashboardClient.tsx
@@ -14,11 +14,11 @@ import "react-resizable/css/styles.css";
 
 function WidgetFallback() {
   return (
-    <div className="animate-pulse h-full w-full flex flex-col gap-3 p-4">
-      <div className="h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
-      <div className="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
-      <div className="h-3 w-4/5 bg-gray-100 dark:bg-gray-800 rounded" />
-      <div className="h-3 w-3/5 bg-gray-100 dark:bg-gray-800 rounded" />
+    <div className="h-full w-full flex flex-col gap-3 p-4">
+      <div className="h-3 w-32 shimmer-skeleton rounded" />
+      <div className="h-3 w-full shimmer-skeleton rounded" />
+      <div className="h-3 w-4/5 shimmer-skeleton rounded" />
+      <div className="h-3 w-3/5 shimmer-skeleton rounded" />
     </div>
   );
 }
diff --git a/apps/web/src/components/dashboard/WidgetContainer.tsx b/apps/web/src/components/dashboard/WidgetContainer.tsx
index 8f7dbb1..91de87c 100644
--- a/apps/web/src/components/dashboard/WidgetContainer.tsx
+++ b/apps/web/src/components/dashboard/WidgetContainer.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { motion } from "framer-motion";
+
 interface WidgetContainerProps {
   title: string;
   onRemove: () => void;
@@ -9,9 +11,12 @@ interface WidgetContainerProps {
 
 export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) {
   return (
-    <div
-      className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${
-        isDragging ? "shadow-lg border-brand-300" : ""
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+      className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden transition-colors duration-200 ${
+        isDragging ? "shadow-lg border-brand-300" : "hover:border-brand-200 dark:hover:border-brand-800"
       }`}
     >
       {/* Header */}
@@ -34,6 +39,6 @@ export function WidgetContainer({ title, onRemove, children, isDragging }: Widge
 
       {/* Body */}
       <div className="flex-1 overflow-auto p-4">{children}</div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/web/src/components/dashboard/widget-registry.ts b/apps/web/src/components/dashboard/widget-registry.ts
index c5ccc98..88d7755 100644
--- a/apps/web/src/components/dashboard/widget-registry.ts
+++ b/apps/web/src/components/dashboard/widget-registry.ts
@@ -53,6 +53,18 @@ export const WIDGET_REGISTRY: Record<DashboardWidgetType, WidgetDefinition> = {
     ...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "my-projects")!,
     component: lazy(() => import("./widgets/MyProjectsWidget.js").then((m) => ({ default: m.MyProjectsWidget }))),
   },
+  "budget-forecast": {
+    ...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "budget-forecast")!,
+    component: lazy(() => import("./widgets/BudgetForecastWidget.js").then((m) => ({ default: m.BudgetForecastWidget }))),
+  },
+  "skill-gap": {
+    ...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "skill-gap")!,
+    component: lazy(() => import("./widgets/SkillGapWidget.js").then((m) => ({ default: m.SkillGapWidget }))),
+  },
+  "project-health": {
+    ...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "project-health")!,
+    component: lazy(() => import("./widgets/ProjectHealthWidget.js").then((m) => ({ default: m.ProjectHealthWidget }))),
+  },
 };
 
 export function getWidget(type: DashboardWidgetType): WidgetDefinition {
diff --git a/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
new file mode 100644
index 0000000..d32c49d
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { trpc } from "~/lib/trpc/client.js";
+import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+
+function colorClass(pct: number): string {
+  if (pct > 90) return "bg-red-500";
+  if (pct > 70) return "bg-amber-400";
+  return "bg-green-500";
+}
+
+function textColorClass(pct: number): string {
+  if (pct > 90) return "text-red-700";
+  if (pct > 70) return "text-amber-700";
+  return "text-green-700";
+}
+
+export function BudgetForecastWidget(_props: WidgetProps) {
+  const { data, isLoading } = trpc.dashboard.getBudgetForecast.useQuery(
+    undefined,
+    { staleTime: 60_000, placeholderData: (prev) => prev },
+  );
+
+  if (isLoading && !data) {
+    return (
+      <div className="flex flex-col gap-1 pt-1">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-3 py-2">
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-12 shimmer-skeleton rounded" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const rows = data ?? [];
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No active projects with budgets.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto h-full">
+      <table className="w-full text-xs">
+        <thead className="bg-gray-50 sticky top-0">
+          <tr>
+            <th className="px-3 py-2 text-left font-medium text-gray-500">Project</th>
+            <th className="px-3 py-2 text-left font-medium text-gray-500">Budget Usage</th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500">Burn/mo</th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500">Exhaustion</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100">
+          {rows.map((row) => (
+            <tr key={row.shortCode} className="hover:bg-gray-50">
+              <td className="px-3 py-2 font-medium text-gray-900 max-w-[140px] truncate">
+                <span className="font-mono text-gray-500 mr-1">{row.shortCode}</span>
+                {row.projectName}
+              </td>
+              <td className="px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full transition-all ${colorClass(row.pctUsed)}`}
+                      style={{ width: `${Math.min(row.pctUsed, 100)}%` }}
+                    />
+                  </div>
+                  <span className={`text-[11px] font-semibold tabular-nums w-10 text-right ${textColorClass(row.pctUsed)}`}>
+                    {row.pctUsed}%
+                  </span>
+                </div>
+              </td>
+              <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
+                {row.burnRate > 0
+                  ? `${(row.burnRate / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} \u20AC`
+                  : "\u2014"}
+              </td>
+              <td className="px-3 py-2 text-right text-gray-500 tabular-nums">
+                {row.estimatedExhaustionDate ?? "\u2014"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
index 3d55865..c418e47 100644
--- a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
@@ -4,6 +4,20 @@ import { useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } fr
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
+
+function UtilizationBar({ percent }: { percent: number }) {
+  const barColor =
+    percent >= 80 ? "bg-green-500" : percent >= 50 ? "bg-amber-500" : "bg-red-500";
+  return (
+    <div className="h-1 w-full rounded-full bg-gray-100 dark:bg-gray-800 mt-0.5">
+      <div
+        className={`h-full rounded-full transition-all duration-500 ${barColor}`}
+        style={{ width: `${Math.min(percent, 100)}%` }}
+      />
+    </div>
+  );
+}
 
 type TopSortKey = "name" | "actual" | "expected";
 type WatchSortKey = "name" | "actual" | "target";
@@ -120,21 +134,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse flex flex-col gap-3 pt-1">
-        <div className="h-2 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
+      <div className="flex flex-col gap-3 pt-1">
+        <div className="h-2 w-32 shimmer-skeleton rounded" />
         {[...Array(4)].map((_, i) => (
           <div key={i} className="flex gap-3 px-2 py-1">
-            <div className="h-3 w-4 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 w-4 shimmer-skeleton rounded" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
           </div>
         ))}
         <div className="border-t border-gray-100 dark:border-gray-800 mt-1 pt-2">
-          <div className="h-2 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
+          <div className="h-2 w-20 shimmer-skeleton rounded mb-2" />
           {[...Array(3)].map((_, i) => (
             <div key={i} className="flex gap-3 px-2 py-1">
-              <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
+              <div className="h-3 flex-1 shimmer-skeleton rounded" />
               <div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
               <div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
             </div>
@@ -146,7 +160,7 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
 
   const rawTop = data?.top ?? [];
   const rawWatch = data?.watchlist ?? [];
-  const month = data?.month ?? "";
+  const month = (data?.month as string) ?? "";
 
   const top = ([...rawTop] as ChargeabilityRow[]).sort((a, b) => {
     const mult = topDir === "asc" ? 1 : -1;
@@ -237,6 +251,7 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
                 className="rounded border-gray-300"
               />
               Include proposed
+              <InfoTooltip content="When enabled, PROPOSED bookings and imported TBD planning rows are also counted toward chargeability." />
             </label>
           </div>
           <div className="flex flex-wrap items-center gap-2">
@@ -248,6 +263,7 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
                 className="rounded border-gray-300"
               />
               Show departed
+              <InfoTooltip content="When enabled, resources who have left the company are included in the lists." />
             </label>
             <FilterDropdown label={selectedCountryLabel}>
               <div className="space-y-2">
@@ -295,8 +311,9 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
           handleSectionScroll(event, topVisibleCount, top.length, setTopVisibleCount)
         }
       >
-        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider px-1 mb-1 sticky top-0 bg-white">
+        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider px-1 mb-1 sticky top-0 bg-white flex items-center">
           Top Chargeability
+          <InfoTooltip content="Resources ranked by highest actual chargeability this month. Chargeability = chargeable booked hours / total available hours." />
           <span className="ml-1 font-normal normal-case text-gray-400">
             {visibleTop.length}/{top.length}
           </span>
@@ -354,16 +371,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
             </thead>
             <tbody className="divide-y divide-gray-50">
               {visibleTop.map((r, i) => (
-                <tr key={r.id} className="hover:bg-gray-50">
+                <tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
                   <td className="px-2 py-1 text-gray-400">{i + 1}</td>
-                  <td className="px-2 py-1 text-gray-800 truncate max-w-[120px]">
-                    <span title={r.displayName}>{r.displayName}</span>
-                    {r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
+                  <td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[120px]">
+                    <div className="truncate">
+                      <span title={r.displayName}>{r.displayName}</span>
+                      {r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
+                    </div>
+                    <UtilizationBar percent={r.actualChargeability} />
                   </td>
-                  <td className="px-2 py-1 text-right font-semibold text-green-700">
-                    {r.actualChargeability}%
+                  <td className="px-2 py-1 text-right font-semibold text-green-700 dark:text-green-400">
+                    <AnimatedNumber value={r.actualChargeability} suffix="%" />
+                  </td>
+                  <td className="px-2 py-1 text-right text-gray-400">
+                    <AnimatedNumber value={r.expectedChargeability} suffix="%" />
                   </td>
-                  <td className="px-2 py-1 text-right text-gray-400">{r.expectedChargeability}%</td>
                 </tr>
               ))}
             </tbody>
@@ -380,8 +402,9 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
           handleSectionScroll(event, watchVisibleCount, watchlist.length, setWatchVisibleCount)
         }
       >
-        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider px-1 mb-1 sticky top-0 bg-white">
+        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider px-1 mb-1 sticky top-0 bg-white flex items-center">
           Watchlist <span className="font-normal text-gray-400">(below target)</span>
+          <InfoTooltip content="Resources whose actual chargeability is more than 15 percentage points below their individual target. These may need more project assignments." />
           <span className="ml-1 font-normal normal-case text-gray-400">
             {visibleWatchlist.length}/{watchlist.length}
           </span>
@@ -432,15 +455,20 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
             </thead>
             <tbody className="divide-y divide-gray-50">
               {visibleWatchlist.map((r) => (
-                <tr key={r.id} className="hover:bg-gray-50">
-                  <td className="px-2 py-1 text-gray-800 truncate max-w-[140px]">
-                    <span title={r.displayName}>{r.displayName}</span>
-                    {r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
+                <tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
+                  <td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[140px]">
+                    <div className="truncate">
+                      <span title={r.displayName}>{r.displayName}</span>
+                      {r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
+                    </div>
+                    <UtilizationBar percent={r.actualChargeability} />
                   </td>
-                  <td className="px-2 py-1 text-right font-semibold text-red-600">
-                    {r.actualChargeability}%
+                  <td className="px-2 py-1 text-right font-semibold text-red-600 dark:text-red-400">
+                    <AnimatedNumber value={r.actualChargeability} suffix="%" />
+                  </td>
+                  <td className="px-2 py-1 text-right text-gray-400">
+                    <AnimatedNumber value={r.chargeabilityTarget} suffix="%" />
                   </td>
-                  <td className="px-2 py-1 text-right text-gray-400">{r.chargeabilityTarget}%</td>
                 </tr>
               ))}
             </tbody>
diff --git a/apps/web/src/components/dashboard/widgets/DemandWidget.tsx b/apps/web/src/components/dashboard/widgets/DemandWidget.tsx
index 370d114..eb71d2e 100644
--- a/apps/web/src/components/dashboard/widgets/DemandWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/DemandWidget.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
 
 type GroupBy = "project" | "person" | "chapter";
 
@@ -30,17 +31,17 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
 
   if (isLoading && !data) {
     return (
-      <div className="animate-pulse flex flex-col gap-3 pt-1">
+      <div className="flex flex-col gap-3 pt-1">
         <div className="flex gap-1 border-b border-gray-200 pb-1">
-          <div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
-          <div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
-          <div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-6 w-20 shimmer-skeleton rounded" />
+          <div className="h-6 w-20 shimmer-skeleton rounded" />
+          <div className="h-6 w-20 shimmer-skeleton rounded" />
         </div>
         {[...Array(6)].map((_, i) => (
           <div key={i} className="flex gap-3 px-3 py-1.5">
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-14 shimmer-skeleton rounded" />
+            <div className="h-3 w-14 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
@@ -92,10 +93,15 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
           <thead className="bg-gray-50 sticky top-0">
             <tr>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  {groupBy === "project" ? "Project" : groupBy === "person" ? "Person" : "Chapter"}
-                  <Ind k="name" />
-                </button>
+                <span className="inline-flex items-center">
+                  <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    {groupBy === "project" ? "Project" : groupBy === "person" ? "Person" : "Chapter"}
+                    <Ind k="name" />
+                  </button>
+                  {groupBy === "project" && <InfoTooltip content="Active projects with allocations in the current quarter. Short code shown before the name." />}
+                  {groupBy === "person" && <InfoTooltip content="Resources with active allocations in the current quarter." />}
+                  {groupBy === "chapter" && <InfoTooltip content="Organizational chapters (teams/departments) with active allocations in the current quarter." />}
+                </span>
               </th>
               <th className="px-3 py-2 text-right font-medium text-gray-500">
                 <span className="inline-flex items-center justify-end">
@@ -150,11 +156,21 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                   <td className="px-3 py-2 text-right text-gray-700">
                     {(() => {
                       const ftes = row.requiredFTEs as unknown as number;
-                      return ftes > 0 ? (
-                        <span className={row.allocatedHours / 8 < ftes * 22 * 3 ? "text-red-600 font-semibold" : "text-green-700"}>
-                          {ftes} FTE
+                      if (ftes <= 0) return "—";
+                      const requiredHours = ftes * 22 * 3 * 8;
+                      const fillPct = Math.min(100, Math.round((row.allocatedHours / requiredHours) * 100));
+                      const isBelowTarget = row.allocatedHours / 8 < ftes * 22 * 3;
+                      const ringColor = isBelowTarget
+                        ? "var(--color-red-500, #ef4444)"
+                        : "var(--color-green-500, #22c55e)";
+                      return (
+                        <span className="inline-flex items-center gap-1.5">
+                          <ProgressRing value={fillPct} size={22} strokeWidth={2.5} color={ringColor} />
+                          <span className={isBelowTarget ? "text-red-600 font-semibold" : "text-green-700"}>
+                            {ftes} FTE
+                          </span>
                         </span>
-                      ) : "—";
+                      );
                     })()}
                   </td>
                 )}
diff --git a/apps/web/src/components/dashboard/widgets/MyProjectsWidget.tsx b/apps/web/src/components/dashboard/widgets/MyProjectsWidget.tsx
index 784e84d..e546bc4 100644
--- a/apps/web/src/components/dashboard/widgets/MyProjectsWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/MyProjectsWidget.tsx
@@ -4,6 +4,8 @@ import { useMemo } from "react";
 import Link from "next/link";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "../widget-registry.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { FadeIn } from "~/components/ui/FadeIn.js";
 
 const STATUS_DOT: Record<string, string> = {
   ACTIVE: "bg-green-500",
@@ -78,22 +80,28 @@ export function MyProjectsWidget({ config }: WidgetProps) {
         <div className="flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
           {favoriteProjects.length > 0 && (
             <div>
-              <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-900/10">
+              <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-900/10 flex items-center">
                 Favorites
+                <InfoTooltip content="Projects you have starred. Click the star icon on any project to add or remove it from your favorites." />
               </div>
-              {favoriteProjects.map((p) => (
-                <ProjectRow key={p.id} project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
+              {favoriteProjects.map((p, i) => (
+                <FadeIn key={p.id} delay={i * 0.03} direction="up">
+                  <ProjectRow project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
+                </FadeIn>
               ))}
             </div>
           )}
 
           {responsibleProjects.length > 0 && (
             <div>
-              <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400 bg-brand-50/50 dark:bg-brand-900/10">
+              <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400 bg-brand-50/50 dark:bg-brand-900/10 flex items-center">
                 Responsible
+                <InfoTooltip content="Projects where you are listed as the responsible person. These are automatically shown based on your user name." />
               </div>
-              {responsibleProjects.map((p) => (
-                <ProjectRow key={p.id} project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
+              {responsibleProjects.map((p, i) => (
+                <FadeIn key={p.id} delay={i * 0.03} direction="up">
+                  <ProjectRow project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
+                </FadeIn>
               ))}
             </div>
           )}
@@ -130,7 +138,7 @@ function ProjectRow({
         <span className="font-mono text-xs text-gray-400 dark:text-gray-500 mr-1.5">{project.shortCode}</span>
         {project.name}
       </Link>
-      <span className="flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500 uppercase">{project.status}</span>
+      <span className="flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500 uppercase" title={`Project status: ${project.status}`}>{project.status}</span>
     </div>
   );
 }
diff --git a/apps/web/src/components/dashboard/widgets/PeakTimesChart.tsx b/apps/web/src/components/dashboard/widgets/PeakTimesChart.tsx
new file mode 100644
index 0000000..91429b6
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/PeakTimesChart.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const COLORS = [
+  "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
+  "#06b6d4", "#84cc16", "#f97316", "#ec4899", "#14b8a6",
+];
+
+interface PeakTimesChartProps {
+  chartData: Record<string, number | string>[];
+  groups: string[];
+}
+
+export default function PeakTimesChart({ chartData, groups }: PeakTimesChartProps) {
+  if (chartData.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No allocation data in selected period.
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+        <XAxis dataKey="period" tick={{ fontSize: 10 }} />
+        <YAxis tick={{ fontSize: 10 }} />
+        <Tooltip contentStyle={{ fontSize: 11 }} />
+        <Legend wrapperStyle={{ fontSize: 11 }} />
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <ReferenceLine
+          {...({ dataKey: "capacity" } as any)}
+          stroke="#ef4444"
+          strokeDasharray="5 5"
+          label={{ value: "Capacity", fontSize: 10, fill: "#ef4444" }}
+        />
+        {groups.map((g, i) => (
+          <Bar key={g} dataKey={g} stackId="a" fill={COLORS[i % COLORS.length]} />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx b/apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx
index 9f54754..15b971d 100644
--- a/apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx
@@ -1,24 +1,14 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ReferenceLine,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
 
-const COLORS = [
-  "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
-  "#06b6d4", "#84cc16", "#f97316", "#ec4899", "#14b8a6",
-];
+const PeakTimesChart = dynamic(
+  () => import("~/components/dashboard/widgets/PeakTimesChart.js"),
+  { ssr: false, loading: () => <div className="flex-1 shimmer-skeleton rounded-xl" /> },
+);
 
 export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
   const granularity = (config.granularity as "week" | "month") || "month";
@@ -35,16 +25,16 @@ export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse flex flex-col gap-3 h-full pt-2">
+      <div className="flex flex-col gap-3 h-full pt-2">
         <div className="flex gap-2">
-          <div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
-          <div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+          <div className="h-7 w-28 shimmer-skeleton rounded-lg" />
+          <div className="h-7 w-28 shimmer-skeleton rounded-lg" />
         </div>
         <div className="flex items-end gap-1 flex-1 px-2">
           {[...Array(12)].map((_, i) => (
             <div
               key={i}
-              className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-t"
+              className="flex-1 shimmer-skeleton rounded-t"
               style={{ height: `${30 + Math.random() * 50}%` }}
             />
           ))}
@@ -107,31 +97,7 @@ export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
 
       {/* Chart */}
       <div className="flex-1 min-h-0">
-        {chartData.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-sm text-gray-400">
-            No allocation data in selected period.
-          </div>
-        ) : (
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
-              <XAxis dataKey="period" tick={{ fontSize: 10 }} />
-              <YAxis tick={{ fontSize: 10 }} />
-              <Tooltip contentStyle={{ fontSize: 11 }} />
-              <Legend wrapperStyle={{ fontSize: 11 }} />
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              <ReferenceLine
-                {...({ dataKey: "capacity" } as any)}
-                stroke="#ef4444"
-                strokeDasharray="5 5"
-                label={{ value: "Capacity", fontSize: 10, fill: "#ef4444" }}
-              />
-              {groups.map((g, i) => (
-                <Bar key={g} dataKey={g} stackId="a" fill={COLORS[i % COLORS.length]} />
-              ))}
-            </BarChart>
-          </ResponsiveContainer>
-        )}
+        <PeakTimesChart chartData={chartData} groups={groups} />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
new file mode 100644
index 0000000..fc29df1
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { trpc } from "~/lib/trpc/client.js";
+import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+
+function healthDot(value: number): string {
+  if (value >= 70) return "bg-green-500";
+  if (value >= 40) return "bg-amber-400";
+  return "bg-red-500";
+}
+
+function scoreBadge(score: number): string {
+  if (score >= 70) return "bg-green-100 text-green-700";
+  if (score >= 40) return "bg-amber-100 text-amber-700";
+  return "bg-red-100 text-red-700";
+}
+
+export function ProjectHealthWidget(_props: WidgetProps) {
+  const { data, isLoading } = trpc.dashboard.getProjectHealth.useQuery(
+    undefined,
+    { staleTime: 60_000, placeholderData: (prev) => prev },
+  );
+
+  if (isLoading && !data) {
+    return (
+      <div className="flex flex-col gap-1 pt-1">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-3 py-2">
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="flex gap-1">
+              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
+              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
+              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
+            </div>
+            <div className="h-5 w-10 shimmer-skeleton rounded-full" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const rows = data ?? [];
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No active projects found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto h-full">
+      <table className="w-full text-xs">
+        <thead className="bg-gray-50 sticky top-0">
+          <tr>
+            <th className="px-3 py-2 text-left font-medium text-gray-500">Project</th>
+            <th className="px-3 py-2 text-center font-medium text-gray-500" title="Budget / Staffing / Timeline">
+              B / S / T
+            </th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500">Score</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100">
+          {rows.map((row) => (
+            <tr key={row.shortCode} className="hover:bg-gray-50">
+              <td className="px-3 py-2 font-medium text-gray-900 max-w-[160px] truncate">
+                <span className="font-mono text-gray-500 mr-1">{row.shortCode}</span>
+                {row.projectName}
+              </td>
+              <td className="px-3 py-2">
+                <div className="flex items-center justify-center gap-2">
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.budgetHealth)}`}
+                    title={`Budget: ${row.budgetHealth}%`}
+                  />
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.staffingHealth)}`}
+                    title={`Staffing: ${row.staffingHealth}%`}
+                  />
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.timelineHealth)}`}
+                    title={`Timeline: ${row.timelineHealth}%`}
+                  />
+                </div>
+              </td>
+              <td className="px-3 py-2 text-right">
+                <span
+                  className={`inline-block px-2 py-0.5 rounded-full font-semibold tabular-nums ${scoreBadge(row.compositeScore)}`}
+                >
+                  {row.compositeScore}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx b/apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx
index 24d470b..dade46b 100644
--- a/apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx
@@ -4,9 +4,11 @@ import { useState } from "react";
 import Link from "next/link";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+import { formatCents, formatMoney } from "~/lib/format.js";
 import { ProjectStatus } from "@planarchy/shared/types";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { PROJECT_STATUS_BADGE as STATUS_COLORS } from "~/lib/status-styles.js";
+import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
 
 export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
   const status = (config.status as ProjectStatus) || undefined;
@@ -31,13 +33,13 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse flex flex-col gap-2 pt-1">
+      <div className="flex flex-col gap-2 pt-1">
         {/* header row */}
         <div className="flex gap-3 px-3 py-2">
           {[40, 120, 80, 60, 60].map((w, i) => (
             <div
               key={i}
-              className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded"
+              className="h-2.5 shimmer-skeleton rounded"
               style={{ width: w }}
             />
           ))}
@@ -48,11 +50,11 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
             key={i}
             className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800"
           >
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-3 w-12 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
@@ -121,64 +123,73 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
           <thead className="sticky top-0">
             <tr>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button
-                  type="button"
-                  onClick={() => toggleSort("code")}
-                  className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
-                >
-                  Code
-                  <span className="text-[10px] ml-0.5">
-                    {sortKey === "code" ? (
-                      sortDir === "asc" ? (
-                        "▲"
+                <span className="inline-flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("code")}
+                    className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
+                  >
+                    Code
+                    <span className="text-[10px] ml-0.5">
+                      {sortKey === "code" ? (
+                        sortDir === "asc" ? (
+                          "▲"
+                        ) : (
+                          "▼"
+                        )
                       ) : (
-                        "▼"
-                      )
-                    ) : (
-                      <span className="text-gray-300">⇅</span>
-                    )}
-                  </span>
-                </button>
+                        <span className="text-gray-300">⇅</span>
+                      )}
+                    </span>
+                  </button>
+                  <InfoTooltip content="Unique short code identifying the project (e.g. PRJ-001)." />
+                </span>
               </th>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button
-                  type="button"
-                  onClick={() => toggleSort("name")}
-                  className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
-                >
-                  Name
-                  <span className="text-[10px] ml-0.5">
-                    {sortKey === "name" ? (
-                      sortDir === "asc" ? (
-                        "▲"
+                <span className="inline-flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("name")}
+                    className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
+                  >
+                    Name
+                    <span className="text-[10px] ml-0.5">
+                      {sortKey === "name" ? (
+                        sortDir === "asc" ? (
+                          "▲"
+                        ) : (
+                          "▼"
+                        )
                       ) : (
-                        "▼"
-                      )
-                    ) : (
-                      <span className="text-gray-300">⇅</span>
-                    )}
-                  </span>
-                </button>
+                        <span className="text-gray-300">⇅</span>
+                      )}
+                    </span>
+                  </button>
+                  <InfoTooltip content="Project name. Click to open the project detail page." />
+                </span>
               </th>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button
-                  type="button"
-                  onClick={() => toggleSort("status")}
-                  className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
-                >
-                  Status
-                  <span className="text-[10px] ml-0.5">
-                    {sortKey === "status" ? (
-                      sortDir === "asc" ? (
-                        "▲"
+                <span className="inline-flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("status")}
+                    className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
+                  >
+                    Status
+                    <span className="text-[10px] ml-0.5">
+                      {sortKey === "status" ? (
+                        sortDir === "asc" ? (
+                          "▲"
+                        ) : (
+                          "▼"
+                        )
                       ) : (
-                        "▼"
-                      )
-                    ) : (
-                      <span className="text-gray-300">⇅</span>
-                    )}
-                  </span>
-                </button>
+                        <span className="text-gray-300">⇅</span>
+                      )}
+                    </span>
+                  </button>
+                  <InfoTooltip content="Current project lifecycle status: DRAFT, ACTIVE, ON_HOLD, COMPLETED, or CANCELLED." />
+                </span>
               </th>
               <th className="px-3 py-2 text-right font-medium text-gray-500">
                 <span className="inline-flex items-center justify-end">
@@ -230,7 +241,10 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
                 </span>
               </th>
               <th className="px-3 py-2 text-right font-medium text-gray-500">
-                Budget
+                <span className="inline-flex items-center justify-end">
+                  Budget
+                  <InfoTooltip content="Project budget in EUR. The colored dot indicates utilization: green = healthy, amber = above 80%, red = over budget." />
+                </span>
               </th>
             </tr>
           </thead>
@@ -259,16 +273,16 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
                     </span>
                   </td>
                   <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
-                    {(p.totalCostCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} €
+                    {formatCents(p.totalCostCents)} €
                   </td>
                   <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
-                    {p.totalPersonDays}d
+                    <AnimatedNumber value={p.totalPersonDays} suffix="d" />
                   </td>
                   <td className="px-3 py-2 text-right">
                     {p.budgetCents > 0 ? (
                       <div className="flex items-center justify-end gap-1.5">
                         <span className="text-gray-700 dark:text-gray-200">
-                          {(p.budgetCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 0 })} €
+                          {formatMoney(p.budgetCents)}
                         </span>
                         <span
                           className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${overBudget ? "bg-red-500" : util >= 80 ? "bg-amber-500" : "bg-green-500"}`}
diff --git a/apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx b/apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx
index 51d1541..26f31af 100644
--- a/apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx
@@ -46,13 +46,13 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse flex flex-col gap-2 pt-1">
+      <div className="flex flex-col gap-2 pt-1">
         {/* header row */}
         <div className="flex gap-3 px-3 py-2">
           {[40, 120, 80, 60, 60].map((w, i) => (
             <div
               key={i}
-              className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded"
+              className="h-2.5 shimmer-skeleton rounded"
               style={{ width: w }}
             />
           ))}
@@ -63,11 +63,11 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
             key={i}
             className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800"
           >
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-3 w-12 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
@@ -122,6 +122,7 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
             className="rounded border-gray-300"
           />
           Include proposed
+          <InfoTooltip content="When enabled, PROPOSED bookings are counted toward booking count and utilization." />
         </label>
       </div>
 
@@ -154,44 +155,50 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
                 </span>
               </th>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button
-                  type="button"
-                  onClick={() => toggleSort("name")}
-                  className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
-                >
-                  Name
-                  <span className="text-[10px] ml-0.5">
-                    {sortKey === "name" ? (
-                      sortDir === "asc" ? (
-                        "▲"
+                <span className="inline-flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("name")}
+                    className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
+                  >
+                    Name
+                    <span className="text-[10px] ml-0.5">
+                      {sortKey === "name" ? (
+                        sortDir === "asc" ? (
+                          "▲"
+                        ) : (
+                          "▼"
+                        )
                       ) : (
-                        "▼"
-                      )
-                    ) : (
-                      <span className="text-gray-300">⇅</span>
-                    )}
-                  </span>
-                </button>
+                        <span className="text-gray-300">⇅</span>
+                      )}
+                    </span>
+                  </button>
+                  <InfoTooltip content="Display name of the resource. Rows highlighted in amber indicate overbooking." />
+                </span>
               </th>
               <th className="px-3 py-2 text-left font-medium text-gray-500">
-                <button
-                  type="button"
-                  onClick={() => toggleSort("chapter")}
-                  className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
-                >
-                  Chapter
-                  <span className="text-[10px] ml-0.5">
-                    {sortKey === "chapter" ? (
-                      sortDir === "asc" ? (
-                        "▲"
+                <span className="inline-flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("chapter")}
+                    className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
+                  >
+                    Chapter
+                    <span className="text-[10px] ml-0.5">
+                      {sortKey === "chapter" ? (
+                        sortDir === "asc" ? (
+                          "▲"
+                        ) : (
+                          "▼"
+                        )
                       ) : (
-                        "▼"
-                      )
-                    ) : (
-                      <span className="text-gray-300">⇅</span>
-                    )}
-                  </span>
-                </button>
+                        <span className="text-gray-300">⇅</span>
+                      )}
+                    </span>
+                  </button>
+                  <InfoTooltip content="Organizational chapter (team/department) the resource belongs to." />
+                </span>
               </th>
               <th className="px-3 py-2 text-right font-medium text-gray-500">
                 <span className="inline-flex items-center justify-end">
diff --git a/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
new file mode 100644
index 0000000..035ad05
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { trpc } from "~/lib/trpc/client.js";
+import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+
+export function SkillGapWidget(_props: WidgetProps) {
+  const { data, isLoading } = trpc.dashboard.getSkillGaps.useQuery(
+    undefined,
+    { staleTime: 60_000, placeholderData: (prev) => prev },
+  );
+
+  if (isLoading && !data) {
+    return (
+      <div className="flex flex-col gap-1 pt-1">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-3 py-2">
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded" />
+            <div className="h-3 w-6 shimmer-skeleton rounded-full" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const rows = data ?? [];
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No skill gaps detected.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto h-full">
+      <table className="w-full text-xs">
+        <thead className="bg-gray-50 sticky top-0">
+          <tr>
+            <th className="px-3 py-2 text-left font-medium text-gray-500">Skill</th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500">Demand</th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500">Supply</th>
+            <th className="px-3 py-2 text-center font-medium text-gray-500">Gap</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100">
+          {rows.map((row) => {
+            const isShortage = row.gap < 0;
+            const isSurplus = row.gap > 0;
+            return (
+              <tr key={row.skill} className="hover:bg-gray-50">
+                <td className="px-3 py-2 font-medium text-gray-900 max-w-[180px] truncate">
+                  {row.skill}
+                </td>
+                <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
+                  {row.demand}
+                </td>
+                <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
+                  {row.supply}
+                </td>
+                <td className="px-3 py-2 text-center">
+                  <span className="inline-flex items-center gap-1.5">
+                    <span
+                      className={`inline-block w-2 h-2 rounded-full ${
+                        isShortage
+                          ? "bg-red-500"
+                          : isSurplus
+                            ? "bg-green-500"
+                            : "bg-gray-400"
+                      }`}
+                    />
+                    <span
+                      className={`font-semibold tabular-nums ${
+                        isShortage
+                          ? "text-red-700"
+                          : isSurplus
+                            ? "text-green-700"
+                            : "text-gray-500"
+                      }`}
+                    >
+                      {row.gap > 0 ? `+${row.gap}` : row.gap}
+                    </span>
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
index 3df047d..ba097f4 100644
--- a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
@@ -4,27 +4,68 @@ import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { formatMoney } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
+import { FadeIn } from "~/components/ui/FadeIn.js";
+
+const ACCENT_COLORS = {
+  green: "var(--color-green-500, #22c55e)",
+  amber: "var(--color-amber-500, #f59e0b)",
+  red: "var(--color-red-500, #ef4444)",
+} as const;
 
 function StatCard({
   label,
   value,
+  suffix,
   sub,
   info,
+  accentColor,
+  delay = 0,
+  ring,
 }: {
   label: string;
-  value: string | number;
+  value: number;
+  suffix?: string;
   sub?: string;
   info?: React.ReactNode;
+  accentColor?: "green" | "amber" | "red";
+  delay?: number;
+  ring?: { value: number; color: string };
 }) {
+  const accentBorder = accentColor === "red"
+    ? "border-l-red-500"
+    : accentColor === "amber"
+      ? "border-l-amber-500"
+      : accentColor === "green"
+        ? "border-l-green-500"
+        : "";
+
   return (
-    <div className="rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70">
-      <span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">
-        {label}
-        {info && <InfoTooltip content={info} />}
-      </span>
-      <span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">{value}</span>
-      {sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>}
-    </div>
+    <FadeIn delay={delay} direction="up">
+      <div
+        className={`rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70 hover-lift cursor-default ${
+          accentColor ? `border-l-[3px] ${accentBorder}` : ""
+        }`}
+      >
+        <span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">
+          {label}
+          {info && <InfoTooltip content={info} />}
+        </span>
+        {ring ? (
+          <div className="mt-2 flex items-center gap-3">
+            <ProgressRing value={ring.value} size={56} strokeWidth={4} color={ring.color}>
+              <AnimatedNumber value={value} suffix={suffix} className="text-lg font-semibold text-gray-900 dark:text-gray-50" />
+            </ProgressRing>
+          </div>
+        ) : (
+          <span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">
+            <AnimatedNumber value={value} suffix={suffix} />
+          </span>
+        )}
+        {sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>}
+      </div>
+    </FadeIn>
   );
 }
 
@@ -37,21 +78,25 @@ export function StatCardsWidget(_props: Partial<WidgetProps> = {}) {
 
   if (isLoading || !data) {
     return (
-      <div className="grid grid-cols-2 gap-3 h-full animate-pulse">
+      <div className="grid grid-cols-2 gap-3 h-full">
         {[...Array(4)].map((_, i) => (
           <div
             key={i}
             className="rounded-2xl border border-gray-200 bg-gray-100 p-4 dark:border-gray-700 dark:bg-gray-800"
           >
-            <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 w-20 shimmer-skeleton rounded" />
             <div className="h-7 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
-            <div className="h-2 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-2 w-24 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
     );
   }
 
+  const budgetPct = data.budgetSummary.avgUtilizationPercent;
+  const budgetAccent: "red" | "amber" | "green" =
+    budgetPct > 90 ? "red" : budgetPct >= 70 ? "amber" : "green";
+
   return (
     <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 h-full content-start">
       <StatCard
@@ -59,24 +104,31 @@ export function StatCardsWidget(_props: Partial<WidgetProps> = {}) {
         value={data.totalResources}
         sub={`${data.activeResources} active`}
         info="All resources in the system. Sub-line shows active resources only."
+        delay={0}
       />
       <StatCard
         label="Active Projects"
         value={data.activeProjects}
         sub={`${data.totalProjects} total`}
         info="Projects with status ACTIVE. Total includes all statuses (DRAFT, ON_HOLD, COMPLETED, CANCELLED)."
+        delay={0.05}
       />
       <StatCard
         label="Total Allocations"
         value={data.totalAllocations}
         sub={`${data.activeAllocations} not cancelled`}
         info="All allocation records ever created. 'Not cancelled' excludes allocations with status CANCELLED."
+        delay={0.1}
       />
       <StatCard
         label="Budget Utilization"
-        value={`${data.budgetSummary.avgUtilizationPercent}%`}
+        value={budgetPct}
+        suffix="%"
         sub={`${formatMoney(data.budgetSummary.totalCostCents)} of ${formatMoney(data.budgetSummary.totalBudgetCents)}`}
         info="Sum of costs across non-cancelled allocations divided by total project budgets. Cost = resource LCR × booked hours."
+        accentColor={budgetAccent}
+        delay={0.15}
+        ring={{ value: budgetPct, color: ACCENT_COLORS[budgetAccent] }}
       />
     </div>
   );
diff --git a/apps/web/src/components/dashboard/widgets/TaskWidget.tsx b/apps/web/src/components/dashboard/widgets/TaskWidget.tsx
new file mode 100644
index 0000000..8597eb2
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/TaskWidget.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import Link from "next/link";
+import type { Route } from "next";
+import { trpc } from "~/lib/trpc/client.js";
+import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+import { TaskCard } from "~/components/notifications/TaskCard.js";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function TaskWidget(_props: Partial<WidgetProps> = {}) {
+  const utils = trpc.useUtils();
+
+  const { data: tasks, isLoading: loadingTasks } = trpc.notification.listTasks.useQuery(
+    { status: "OPEN", limit: 5 },
+    { staleTime: 30_000, placeholderData: (prev) => prev },
+  );
+
+  const { data: taskCounts, isLoading: loadingCounts } = trpc.notification.taskCounts.useQuery(undefined, {
+    staleTime: 30_000,
+    placeholderData: (prev) => prev,
+  });
+
+  const updateTaskStatus = trpc.notification.updateTaskStatus.useMutation({
+    onSuccess: () => {
+      void utils.notification.taskCounts.invalidate();
+      void utils.notification.listTasks.invalidate();
+      void utils.notification.list.invalidate();
+      void utils.notification.unreadCount.invalidate();
+    },
+  });
+
+  function handleStatusChange(id: string, status: string) {
+    updateTaskStatus.mutate({ id, status: status as "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED" });
+  }
+
+  const openCount = (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0);
+  const isLoading = loadingTasks || loadingCounts;
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="flex items-center justify-between px-1 pb-3">
+          <div className="h-5 w-32 shimmer-skeleton rounded" />
+        </div>
+        <div className="flex-1 space-y-2">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-3">
+              <div className="h-4 w-3/4 shimmer-skeleton rounded" />
+              <div className="mt-2 h-3 w-1/2 bg-gray-100 dark:bg-gray-800 rounded" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-1 pb-3">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-50">
+          Open Tasks
+          {openCount > 0 && (
+            <span className="ml-2 inline-flex items-center justify-center min-w-[18px] h-5 px-1.5 text-[10px] font-bold text-white bg-orange-500 rounded-full">
+              {openCount}
+            </span>
+          )}
+        </h3>
+        {taskCounts?.overdue !== undefined && taskCounts.overdue > 0 && (
+          <span className="text-xs font-semibold text-red-600 dark:text-red-400">
+            {taskCounts.overdue} overdue
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 space-y-2 overflow-y-auto">
+        {!tasks || tasks.length === 0 ? (
+          <div className="flex h-full items-center justify-center rounded-xl border border-dashed border-gray-300 dark:border-gray-600 py-8 text-sm text-gray-400 dark:text-gray-500">
+            No open tasks
+          </div>
+        ) : (
+          tasks.map((t) => (
+            <TaskCard
+              key={t.id}
+              task={{
+                id: t.id,
+                title: t.title,
+                body: t.body,
+                priority: t.priority ?? "NORMAL",
+                taskStatus: t.taskStatus,
+                taskAction: t.taskAction,
+                dueDate: t.dueDate,
+                entityType: t.entityType,
+                link: t.link,
+                createdAt: t.createdAt,
+                completedBy: t.completedBy,
+              }}
+              onStatusChange={handleStatusChange}
+              compact
+            />
+          ))
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="pt-2 border-t border-gray-100 dark:border-gray-800 mt-2">
+        <Link
+          href={"/notifications?tab=tasks" as Route}
+          className="block text-center text-xs font-medium text-brand-600 dark:text-brand-400 hover:underline"
+        >
+          View all &rarr;
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx b/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
index 69518bd..395091c 100644
--- a/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
@@ -25,22 +25,22 @@ export function TopValueWidget({ config }: WidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse flex flex-col gap-1 pt-1">
+      <div className="flex flex-col gap-1 pt-1">
         {[...Array(8)].map((_, i) => (
           <div key={i} className="flex items-center gap-3 px-3 py-2">
-            <div className="h-3 w-4 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
-            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-5 w-10 bg-gray-200 dark:bg-gray-700 rounded-full" />
-            <div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-3 w-4 shimmer-skeleton rounded" />
+            <div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
+            <div className="h-3 flex-1 shimmer-skeleton rounded" />
+            <div className="h-3 w-16 shimmer-skeleton rounded" />
+            <div className="h-5 w-10 shimmer-skeleton rounded-full" />
+            <div className="h-3 w-12 shimmer-skeleton rounded" />
           </div>
         ))}
       </div>
     );
   }
 
-  const list = data ?? [];
+  const list = (data ?? []) as Array<{ id: string; eid: string; displayName: string; chapter: string | null; lcrCents: number; valueScore: number | null }>;
 
   if (list.length === 0) {
     return (
@@ -74,21 +74,35 @@ export function TopValueWidget({ config }: WidgetProps) {
       <table className="w-full text-xs">
         <thead className="bg-gray-50 sticky top-0">
           <tr>
-            <th className="px-3 py-2 text-left font-medium text-gray-500 w-8">#</th>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <button type="button" onClick={() => toggleSort("eid")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                EID<Ind k="eid" />
-              </button>
+            <th className="px-3 py-2 text-left font-medium text-gray-500 w-8">
+              <span className="inline-flex items-center">
+                #
+                <InfoTooltip content="Rank position based on the current sort order." />
+              </span>
             </th>
             <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                Name<Ind k="name" />
-              </button>
+              <span className="inline-flex items-center">
+                <button type="button" onClick={() => toggleSort("eid")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                  EID<Ind k="eid" />
+                </button>
+                <InfoTooltip content="Employee ID — unique identifier for each resource." />
+              </span>
             </th>
             <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <button type="button" onClick={() => toggleSort("chapter")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                Chapter<Ind k="chapter" />
-              </button>
+              <span className="inline-flex items-center">
+                <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                  Name<Ind k="name" />
+                </button>
+                <InfoTooltip content="Display name of the resource." />
+              </span>
+            </th>
+            <th className="px-3 py-2 text-left font-medium text-gray-500">
+              <span className="inline-flex items-center">
+                <button type="button" onClick={() => toggleSort("chapter")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                  Chapter<Ind k="chapter" />
+                </button>
+                <InfoTooltip content="Organizational chapter (team/department) the resource belongs to." />
+              </span>
             </th>
             <th className="px-3 py-2 text-right font-medium text-gray-500">
               <span className="inline-flex items-center justify-end">
diff --git a/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx b/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
index 5107434..db68f99 100644
--- a/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
+++ b/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { clsx } from "clsx";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatCents } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -63,11 +64,11 @@ export function ApplyExperienceMultipliers({ estimateId, canEdit, onApplied }: A
 
   return (
     <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-      <h3 className="mb-3 text-base font-semibold text-gray-900">Apply experience multipliers</h3>
+      <h3 className="mb-3 text-base font-semibold text-gray-900">Apply experience multipliers <InfoTooltip content="Experience multipliers adjust hours, cost rates, and bill rates based on rules like seniority level or chapter. A multiplier >1 increases effort, <1 decreases it." /></h3>
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="block">
-          <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Multiplier set</span>
+          <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Multiplier set <InfoTooltip content="Select which set of rules to apply. Each set contains rules that match by chapter, role, or level." /></span>
           <select
             value={selectedSetId}
             onChange={(e) => {
diff --git a/apps/web/src/components/estimates/CommercialTermsEditor.tsx b/apps/web/src/components/estimates/CommercialTermsEditor.tsx
index 646fce1..870dfa3 100644
--- a/apps/web/src/components/estimates/CommercialTermsEditor.tsx
+++ b/apps/web/src/components/estimates/CommercialTermsEditor.tsx
@@ -8,6 +8,7 @@ import {
   validatePaymentMilestones,
 } from "@planarchy/engine";
 import { clsx } from "clsx";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatMoney } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -88,7 +89,7 @@ export function CommercialTermsEditor({
   if (isLoading) {
     return (
       <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-        <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
+        <div className="h-6 w-48 shimmer-skeleton rounded" />
       </div>
     );
   }
@@ -99,7 +100,7 @@ export function CommercialTermsEditor({
       <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <p className="text-xs uppercase tracking-wide text-gray-400">
-            Adjusted Cost
+            Adjusted Cost <InfoTooltip content="Base cost + contingency. Adjusted cost = base cost x (1 + contingency %)." />
           </p>
           <p className="mt-2 text-2xl font-semibold text-gray-900">
             {formatMoney(summary.adjustedCostCents, baseCurrency)}
@@ -112,7 +113,7 @@ export function CommercialTermsEditor({
         </div>
         <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <p className="text-xs uppercase tracking-wide text-gray-400">
-            Adjusted Price
+            Adjusted Price <InfoTooltip content="Base price minus discount. Adjusted price = base price x (1 - discount %)." />
           </p>
           <p className="mt-2 text-2xl font-semibold text-gray-900">
             {formatMoney(summary.adjustedPriceCents, baseCurrency)}
@@ -125,7 +126,7 @@ export function CommercialTermsEditor({
         </div>
         <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <p className="text-xs uppercase tracking-wide text-gray-400">
-            Adjusted Margin
+            Adjusted Margin <InfoTooltip content="Adjusted margin = adjusted price - adjusted cost. Margin % = margin / adjusted price x 100." />
           </p>
           <p
             className={clsx(
@@ -143,7 +144,7 @@ export function CommercialTermsEditor({
         </div>
         <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <p className="text-xs uppercase tracking-wide text-gray-400">
-            Pricing Model
+            Pricing Model <InfoTooltip content="Fixed Price: agreed total. Time & Materials: billed per actual hour. Hybrid: mix of both." />
           </p>
           <p className="mt-2 text-lg font-semibold text-gray-900">
             {PRICING_MODELS.find((m) => m.value === terms.pricingModel)?.label ??
@@ -179,7 +180,7 @@ export function CommercialTermsEditor({
           {/* Pricing Model */}
           <div>
             <label className="block text-xs font-medium text-gray-500 mb-1">
-              Pricing Model
+              Pricing Model <InfoTooltip content="How the project will be billed to the client." />
             </label>
             <select
               value={terms.pricingModel}
@@ -200,7 +201,7 @@ export function CommercialTermsEditor({
           {/* Contingency % */}
           <div>
             <label className="block text-xs font-medium text-gray-500 mb-1">
-              Contingency %
+              Contingency % <InfoTooltip content="Risk buffer added to the base cost. Adjusted cost = base cost x (1 + contingency %)." />
             </label>
             <input
               type="number"
@@ -219,7 +220,7 @@ export function CommercialTermsEditor({
           {/* Discount % */}
           <div>
             <label className="block text-xs font-medium text-gray-500 mb-1">
-              Discount %
+              Discount % <InfoTooltip content="Client discount applied to the base price. Adjusted price = base price x (1 - discount %)." />
             </label>
             <input
               type="number"
@@ -238,7 +239,7 @@ export function CommercialTermsEditor({
           {/* Payment Terms */}
           <div>
             <label className="block text-xs font-medium text-gray-500 mb-1">
-              Payment Terms (days)
+              Payment Terms (days) <InfoTooltip content="Number of days after invoice date within which payment is due." />
             </label>
             <input
               type="number"
@@ -256,7 +257,7 @@ export function CommercialTermsEditor({
           {/* Warranty */}
           <div>
             <label className="block text-xs font-medium text-gray-500 mb-1">
-              Warranty (months)
+              Warranty (months) <InfoTooltip content="Post-delivery warranty period during which defects are covered at no extra cost." />
             </label>
             <input
               type="number"
@@ -275,7 +276,7 @@ export function CommercialTermsEditor({
         {/* Notes */}
         <div className="mt-4">
           <label className="block text-xs font-medium text-gray-500 mb-1">
-            Notes
+            Notes <InfoTooltip content="Free-text notes about the commercial terms, e.g. special conditions or negotiation context." />
           </label>
           <textarea
             value={terms.notes ?? ""}
@@ -294,7 +295,7 @@ export function CommercialTermsEditor({
       <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-base font-semibold text-gray-900">
-            Payment Milestones
+            Payment Milestones <InfoTooltip content="Define when payments are due as a percentage of the adjusted price. Milestones should sum to 100%." />
           </h3>
           {canEdit && (
             <button
diff --git a/apps/web/src/components/estimates/EstimateWizard.tsx b/apps/web/src/components/estimates/EstimateWizard.tsx
index 4d08698..6e50f93 100644
--- a/apps/web/src/components/estimates/EstimateWizard.tsx
+++ b/apps/web/src/components/estimates/EstimateWizard.tsx
@@ -8,6 +8,7 @@ import { parseScopeImport } from "~/lib/scopeImportParser.js";
 import { clsx } from "clsx";
 import { formatMoney } from "~/lib/format.js";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
 import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
 import { trpc } from "~/lib/trpc/client.js";
@@ -440,7 +441,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Estimate Wizard</p>
               <h2 className="mt-2 text-2xl font-semibold text-gray-900">Create a connected estimate</h2>
               <p className="mt-1 text-sm text-gray-500">
-                Rates, resource snapshots, and project linkage are pulled from existing Planarchy data.
+                Rates, resource snapshots, and project linkage are pulled from existing plANARCHY data.
               </p>
             </div>
             <button
@@ -485,19 +486,19 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                 <div className="space-y-5">
                   <div className="grid gap-5 md:grid-cols-2">
                     <div>
-                      <label className={LABEL_CLS}>Estimate Name</label>
+                      <label className={LABEL_CLS}>Estimate Name <InfoTooltip content="A descriptive name for this estimate, e.g. project name + scope qualifier." /></label>
                       <input value={name} onChange={(event) => setName(event.target.value)} className={INPUT_CLS} placeholder="CGI Breakdown Q2 2026" />
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Linked Project</label>
+                      <label className={LABEL_CLS}>Linked Project <InfoTooltip content="Link to an existing plANARCHY project. This enables automatic date-based phasing and planning handoff." /></label>
                       <ProjectCombobox value={projectId} onChange={setProjectId} placeholder="Link to project" />
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Opportunity ID</label>
+                      <label className={LABEL_CLS}>Opportunity ID <InfoTooltip content="Optional external reference from your CRM or sales system to track this opportunity." /></label>
                       <input value={opportunityId} onChange={(event) => setOpportunityId(event.target.value)} className={INPUT_CLS} placeholder="Optional CRM or sales reference" />
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Estimate Status</label>
+                      <label className={LABEL_CLS}>Estimate Status <InfoTooltip content="DRAFT: work in progress. IN_REVIEW: submitted for approval. APPROVED: locked and ready for handoff. ARCHIVED: no longer active." /></label>
                       <select value={status} onChange={(event) => setStatus(event.target.value as EstimateStatus)} className={SELECT_CLS}>
                         {Object.values(EstimateStatus).map((value) => (
                           <option key={value} value={value}>
@@ -507,17 +508,17 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                       </select>
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Base Currency</label>
+                      <label className={LABEL_CLS}>Base Currency <InfoTooltip content="ISO 4217 currency code (e.g. EUR, USD) used for all monetary values in this estimate." /></label>
                       <input value={baseCurrency} onChange={(event) => setBaseCurrency(event.target.value.toUpperCase())} className={INPUT_CLS} maxLength={3} />
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Version Label</label>
+                      <label className={LABEL_CLS}>Version Label <InfoTooltip content="A label for the initial version snapshot. Use labels like 'Initial', 'Client revision 2', etc." /></label>
                       <input value={versionLabel} onChange={(event) => setVersionLabel(event.target.value)} className={INPUT_CLS} placeholder="Initial" />
                     </div>
                   </div>
 
                   <div>
-                    <label className={LABEL_CLS}>Version Notes</label>
+                    <label className={LABEL_CLS}>Version Notes <InfoTooltip content="Free-text notes for this version. Document assumptions, exclusions, or client comments." /></label>
                     <textarea
                       value={versionNotes}
                       onChange={(event) => setVersionNotes(event.target.value)}
@@ -551,7 +552,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-lg font-semibold text-gray-900">Commercial and delivery assumptions</h3>
+                      <h3 className="text-lg font-semibold text-gray-900">Commercial and delivery assumptions <InfoTooltip content="Preconditions that affect the estimate validity. If an assumption changes, the estimate may need revision." /></h3>
                       <p className="text-sm text-gray-500">These rows replace free-form spreadsheet notes with structured data.</p>
                     </div>
                     <button type="button" onClick={() => setAssumptions((current) => [...current, makeAssumption()])} className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
@@ -579,7 +580,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-lg font-semibold text-gray-900">Scope breakdown</h3>
+                      <h3 className="text-lg font-semibold text-gray-900">Scope breakdown <InfoTooltip content="Deliverables and work packages that define what is included in this estimate." /></h3>
                       <p className="text-sm text-gray-500">Create structured work packages that can later evolve into versioned estimate scope.</p>
                     </div>
                     <div className="flex gap-2">
@@ -621,7 +622,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-lg font-semibold text-gray-900">Staffing and rate lines</h3>
+                      <h3 className="text-lg font-semibold text-gray-900">Staffing and rate lines <InfoTooltip content="Each line represents a staffing need. Line cost = hours x cost rate. Line price = hours x sell rate." /></h3>
                       <p className="text-sm text-gray-500">Selecting a resource pre-fills cost rate, sell rate, chapter, and role from live data.</p>
                     </div>
                     <button type="button" onClick={() => setDemandLines((current) => [...current, makeDemand()])} className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
@@ -639,11 +640,11 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                         <div key={line.id} className="rounded-3xl border border-gray-100 p-4">
                           <div className="grid gap-4 lg:grid-cols-2">
                             <div>
-                              <label className={LABEL_CLS}>Resource</label>
+                              <label className={LABEL_CLS}>Resource <InfoTooltip content="Link to a live plANARCHY resource. Auto-fills rates, chapter, and role." /></label>
                               <ResourceCombobox value={line.resourceId} onChange={(resourceId) => applyResource(resourceId, line.id)} placeholder="Search resource" />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Role</label>
+                              <label className={LABEL_CLS}>Role <InfoTooltip content="The production role for this demand line (e.g. Compositor, Animator)." /></label>
                               <select value={line.roleId ?? ""} onChange={(event) => updateDemandLine(line.id, { roleId: event.target.value || null })} className={SELECT_CLS}>
                                 <option value="">Unassigned</option>
                                 {roles.map((role) => (
@@ -654,27 +655,27 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                               </select>
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Line Name</label>
+                              <label className={LABEL_CLS}>Line Name <InfoTooltip content="Descriptive name for this staffing line, e.g. 'Compositing Lead' or 'PM overhead'." /></label>
                               <input value={line.name} onChange={(event) => updateDemandLine(line.id, { name: event.target.value })} className={INPUT_CLS} placeholder="Compositing, lighting, PM, ..." />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Chapter</label>
+                              <label className={LABEL_CLS}>Chapter <InfoTooltip content="Department or cost center. Auto-filled when a resource is linked." /></label>
                               <input value={line.chapter} onChange={(event) => updateDemandLine(line.id, { chapter: event.target.value })} className={INPUT_CLS} placeholder="Auto-filled from resource when linked" />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Hours</label>
+                              <label className={LABEL_CLS}>Hours <InfoTooltip content="Total estimated effort in hours. Used to calculate line cost and price." /></label>
                               <input value={line.hours} onChange={(event) => updateDemandLine(line.id, { hours: event.target.value })} className={INPUT_CLS} inputMode="decimal" />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Currency</label>
+                              <label className={LABEL_CLS}>Currency <InfoTooltip content="ISO 4217 currency code for this line's rates." /></label>
                               <input value={line.currency} onChange={(event) => updateDemandLine(line.id, { currency: event.target.value.toUpperCase() })} className={INPUT_CLS} maxLength={3} />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Cost Rate / h</label>
+                              <label className={LABEL_CLS}>Cost Rate / h <InfoTooltip content="Internal hourly cost rate in EUR. Line cost = hours x cost rate." /></label>
                               <input value={line.costRate} onChange={(event) => updateDemandLine(line.id, { costRate: event.target.value })} className={INPUT_CLS} inputMode="decimal" />
                             </div>
                             <div>
-                              <label className={LABEL_CLS}>Sell Rate / h</label>
+                              <label className={LABEL_CLS}>Sell Rate / h <InfoTooltip content="Client-facing hourly rate. Line price = hours x sell rate." /></label>
                               <input value={line.billRate} onChange={(event) => updateDemandLine(line.id, { billRate: event.target.value })} className={INPUT_CLS} inputMode="decimal" />
                             </div>
                           </div>
@@ -711,19 +712,19 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
 
                   <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                     <div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
-                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Hours</p>
+                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Hours <InfoTooltip content="Sum of all demand line hours across the estimate." /></p>
                       <p className="mt-2 text-2xl font-semibold text-gray-900">{summary.totalHours.toFixed(1)}</p>
                     </div>
                     <div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
-                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Cost</p>
+                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Cost <InfoTooltip content="Sum of (hours x cost rate) for each demand line. Stored in cents, displayed in EUR." /></p>
                       <p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(summary.totalCostCents, baseCurrency)}</p>
                     </div>
                     <div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
-                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Price</p>
+                      <p className="text-xs uppercase tracking-wide text-gray-400">Total Price <InfoTooltip content="Sum of (hours x sell rate) for each demand line. This is the client-facing revenue." /></p>
                       <p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(summary.totalPriceCents, baseCurrency)}</p>
                     </div>
                     <div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
-                      <p className="text-xs uppercase tracking-wide text-gray-400">Margin</p>
+                      <p className="text-xs uppercase tracking-wide text-gray-400">Margin <InfoTooltip content="Margin = Total Price - Total Cost. Margin % = Margin / Total Price x 100." /></p>
                       <p className="mt-2 text-2xl font-semibold text-gray-900">
                         {formatMoney(marginCents, baseCurrency)} ({marginPercent}%)
                       </p>
diff --git a/apps/web/src/components/estimates/EstimateWorkspace.types.ts b/apps/web/src/components/estimates/EstimateWorkspace.types.ts
index c73bb04..bfc5214 100644
--- a/apps/web/src/components/estimates/EstimateWorkspace.types.ts
+++ b/apps/web/src/components/estimates/EstimateWorkspace.types.ts
@@ -128,4 +128,5 @@ export type WorkspaceTab =
   | "financials"
   | "phasing"
   | "versions"
-  | "exports";
+  | "exports"
+  | "comments";
diff --git a/apps/web/src/components/estimates/EstimateWorkspaceClient.tsx b/apps/web/src/components/estimates/EstimateWorkspaceClient.tsx
index e85fac2..5330c10 100644
--- a/apps/web/src/components/estimates/EstimateWorkspaceClient.tsx
+++ b/apps/web/src/components/estimates/EstimateWorkspaceClient.tsx
@@ -2,25 +2,75 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import { EstimateExportFormat } from "@planarchy/shared";
 import { clsx } from "clsx";
-import { EstimateWorkspaceDraftEditor } from "~/components/estimates/EstimateWorkspaceDraftEditor.js";
-import { WeeklyPhasingView } from "~/components/estimates/WeeklyPhasingView.js";
 import type {
   EstimateWorkspaceView,
   WorkspaceTab,
 } from "~/components/estimates/EstimateWorkspace.types.js";
-import { OverviewTab } from "~/components/estimates/tabs/OverviewTab.js";
-import { AssumptionsTab } from "~/components/estimates/tabs/AssumptionsTab.js";
-import { ScopeTab } from "~/components/estimates/tabs/ScopeTab.js";
-import { StaffingTab } from "~/components/estimates/tabs/StaffingTab.js";
-import { FinancialsTab } from "~/components/estimates/tabs/FinancialsTab.js";
-import { VersionsTab } from "~/components/estimates/tabs/VersionsTab.js";
-import { ExportsTab } from "~/components/estimates/tabs/ExportsTab.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
 import { formatDateLong } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
 
+const TabSkeleton = () => (
+  <div className="p-6 space-y-4">
+    <div className="h-8 w-48 shimmer-skeleton rounded" />
+    <div className="h-64 shimmer-skeleton rounded-xl" />
+  </div>
+);
+
+const EstimateWorkspaceDraftEditor = dynamic(
+  () => import("~/components/estimates/EstimateWorkspaceDraftEditor.js").then((mod) => ({ default: mod.EstimateWorkspaceDraftEditor })),
+  { loading: TabSkeleton },
+);
+
+const WeeklyPhasingView = dynamic(
+  () => import("~/components/estimates/WeeklyPhasingView.js").then((mod) => ({ default: mod.WeeklyPhasingView })),
+  { loading: TabSkeleton },
+);
+
+const OverviewTab = dynamic(
+  () => import("~/components/estimates/tabs/OverviewTab.js").then((mod) => ({ default: mod.OverviewTab })),
+  { loading: TabSkeleton },
+);
+
+const AssumptionsTab = dynamic(
+  () => import("~/components/estimates/tabs/AssumptionsTab.js").then((mod) => ({ default: mod.AssumptionsTab })),
+  { loading: TabSkeleton },
+);
+
+const ScopeTab = dynamic(
+  () => import("~/components/estimates/tabs/ScopeTab.js").then((mod) => ({ default: mod.ScopeTab })),
+  { loading: TabSkeleton },
+);
+
+const StaffingTab = dynamic(
+  () => import("~/components/estimates/tabs/StaffingTab.js").then((mod) => ({ default: mod.StaffingTab })),
+  { loading: TabSkeleton },
+);
+
+const FinancialsTab = dynamic(
+  () => import("~/components/estimates/tabs/FinancialsTab.js").then((mod) => ({ default: mod.FinancialsTab })),
+  { loading: TabSkeleton },
+);
+
+const VersionsTab = dynamic(
+  () => import("~/components/estimates/tabs/VersionsTab.js").then((mod) => ({ default: mod.VersionsTab })),
+  { loading: TabSkeleton },
+);
+
+const ExportsTab = dynamic(
+  () => import("~/components/estimates/tabs/ExportsTab.js").then((mod) => ({ default: mod.ExportsTab })),
+  { loading: TabSkeleton },
+);
+
+const CommentThread = dynamic(
+  () => import("~/components/comments/CommentThread.js").then((mod) => ({ default: mod.CommentThread })),
+  { loading: TabSkeleton },
+);
+
 const TABS: Array<{ id: WorkspaceTab; label: string }> = [
   { id: "overview", label: "Overview" },
   { id: "assumptions", label: "Assumptions" },
@@ -30,11 +80,12 @@ const TABS: Array<{ id: WorkspaceTab; label: string }> = [
   { id: "phasing", label: "Phasing" },
   { id: "versions", label: "Versions" },
   { id: "exports", label: "Exports" },
+  { id: "comments", label: "Comments" },
 ];
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -52,8 +103,8 @@ function ActionNotice({
       className={clsx(
         "rounded-2xl border px-4 py-3 text-sm",
         tone === "success"
-          ? "border-emerald-200 bg-emerald-50 text-emerald-800"
-          : "border-rose-200 bg-rose-50 text-rose-800",
+          ? "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300"
+          : "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-800 dark:bg-rose-950/50 dark:text-rose-300",
       )}
     >
       {children}
@@ -82,6 +133,12 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
   const createExportMutation = trpc.estimate.createExport.useMutation();
   const createPlanningHandoffMutation = trpc.estimate.createPlanningHandoff.useMutation();
 
+  const commentCountQuery = trpc.comment.count.useQuery(
+    { entityType: "estimate", entityId: estimateId },
+    { staleTime: 30_000 },
+  );
+  const commentCount = commentCountQuery.data ?? 0;
+
   const estimate = (detailQuery.data as EstimateWorkspaceView | undefined) ?? null;
   const hasWorkingVersion = estimate?.versions.some((version) => version.status === "WORKING") ?? false;
   const editableTab = tab === "overview" || tab === "assumptions" || tab === "scope" || tab === "staffing";
@@ -181,7 +238,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
     <div className="mx-auto max-w-7xl space-y-6 p-6">
       <Link
         href="/estimates"
-        className="inline-flex items-center gap-1 text-sm text-gray-500 transition-colors hover:text-gray-800"
+        className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 transition-colors hover:text-gray-800 dark:hover:text-gray-200"
       >
         <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
@@ -189,21 +246,21 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
         Back to Estimates
       </Link>
 
-      <div className="rounded-[28px] border border-gray-200 bg-gradient-to-br from-white via-white to-brand-50 p-6 shadow-sm">
+      <div className="rounded-[28px] border border-gray-200 dark:border-gray-700 bg-gradient-to-br from-white via-white to-brand-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900 p-6 shadow-sm dark:shadow-black/20">
         <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Estimate Workspace</p>
-            <h1 className="mt-2 text-3xl font-semibold text-gray-900">
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600 dark:text-sky-400">Estimate Workspace <InfoTooltip content="Central workspace for inspecting and editing an estimate's scope, staffing, financials, and version history." /></p>
+            <h1 className="mt-2 text-3xl font-semibold text-gray-900 dark:text-gray-50">
               {estimate?.name ?? "Loading estimate"}
             </h1>
-            <p className="mt-2 max-w-3xl text-sm text-gray-600">
+            <p className="mt-2 max-w-3xl text-sm text-gray-600 dark:text-gray-300">
               Use the tabs below to inspect the connected estimate structure, version context, and staffing breakdown without relying on spreadsheet tabs.
             </p>
           </div>
 
           {estimate && (
             <div className="flex flex-col gap-3 lg:items-end">
-              <div className="grid gap-2 text-sm text-gray-500 lg:text-right">
+              <div className="grid gap-2 text-sm text-gray-500 dark:text-gray-400 lg:text-right">
                 <span>{estimate.project ? `${estimate.project.shortCode} - ${estimate.project.name}` : "Standalone estimate"}</span>
                 <span>Updated {formatDateLong(estimate.updatedAt)}</span>
               </div>
@@ -214,7 +271,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
                     if (!editableTab && !isEditing) return;
                     setIsEditing((current) => !current);
                   }}
-                  className="rounded-2xl border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50"
+                  className="rounded-2xl border border-brand-200 dark:border-sky-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-brand-700 dark:text-sky-300 transition hover:border-brand-300 dark:hover:border-sky-600 hover:bg-brand-50 dark:hover:bg-gray-700"
                 >
                   {isEditing ? "Close editor" : editableTab ? "Edit working draft" : "Draft editor available in editable tabs"}
                 </button>
@@ -237,7 +294,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
           {actionMessage && <ActionNotice tone="success">{actionMessage}</ActionNotice>}
           {actionError && <ActionNotice tone="error">{actionError}</ActionNotice>}
 
-          <div className="flex flex-wrap gap-2 border-b border-gray-200">
+          <div className="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
             {TABS.map((item) => (
               <button
                 key={item.id}
@@ -246,11 +303,16 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
                 className={clsx(
                   "rounded-t-2xl border-b-2 px-4 py-3 text-sm font-medium transition-colors",
                   tab === item.id
-                    ? "border-brand-600 text-brand-700"
-                    : "border-transparent text-gray-500 hover:text-gray-800",
+                    ? "border-brand-600 text-brand-700 dark:border-sky-400 dark:text-sky-300"
+                    : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200",
                 )}
               >
                 {item.label}
+                {item.id === "comments" && commentCount > 0 && (
+                  <span className="ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-brand-100 dark:bg-sky-800 px-1.5 text-xs font-semibold text-brand-700 dark:text-sky-200">
+                    {commentCount}
+                  </span>
+                )}
               </button>
             ))}
           </div>
@@ -297,6 +359,14 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
                   isCreatingExport={createExportMutation.isPending}
                 />
               )}
+              {tab === "comments" && (
+                <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+                  <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-50">
+                    Comments
+                  </h2>
+                  <CommentThread entityType="estimate" entityId={estimate.id} />
+                </div>
+              )}
             </>
           )}
         </>
diff --git a/apps/web/src/components/estimates/VersionCompare.tsx b/apps/web/src/components/estimates/VersionCompare.tsx
index 4f5e749..30ddbd6 100644
--- a/apps/web/src/components/estimates/VersionCompare.tsx
+++ b/apps/web/src/components/estimates/VersionCompare.tsx
@@ -10,6 +10,7 @@ import {
   type ScopeItemDiff,
 } from "@planarchy/engine";
 import type { EstimateVersionView } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatMoney } from "~/lib/format.js";
 
 function formatDelta(value: number, formatter: (v: number) => string) {
@@ -134,10 +135,10 @@ export function VersionCompare({ versions }: { versions: EstimateVersionView[] }
     <div className="space-y-6">
       {/* Version selectors */}
       <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-        <h3 className="mb-4 text-base font-semibold text-gray-900">Compare versions</h3>
+        <h3 className="mb-4 text-base font-semibold text-gray-900">Compare versions <InfoTooltip content="Select two version snapshots to see what changed in demand lines, scope, assumptions, and resource rates between them." /></h3>
         <div className="flex flex-wrap items-end gap-4">
           <label className="block">
-            <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Base (A)</span>
+            <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Base (A) <InfoTooltip content="The older or reference version to compare from." /></span>
             <select
               value={aId}
               onChange={(e) => setAId(e.target.value)}
@@ -154,7 +155,7 @@ export function VersionCompare({ versions }: { versions: EstimateVersionView[] }
           <span className="pb-2 text-sm text-gray-400">vs</span>
 
           <label className="block">
-            <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Compare (B)</span>
+            <span className="mb-1 block text-xs font-medium text-gray-500 uppercase tracking-wider">Compare (B) <InfoTooltip content="The newer or target version to compare against." /></span>
             <select
               value={bId}
               onChange={(e) => setBId(e.target.value)}
diff --git a/apps/web/src/components/estimates/WeeklyPhasingView.tsx b/apps/web/src/components/estimates/WeeklyPhasingView.tsx
index 54bfb57..c5516de 100644
--- a/apps/web/src/components/estimates/WeeklyPhasingView.tsx
+++ b/apps/web/src/components/estimates/WeeklyPhasingView.tsx
@@ -23,10 +23,10 @@ function getDefaultDateRange(): { start: string; end: string } {
 function heatColor(hours: number, maxHours: number): string {
   if (hours === 0 || maxHours === 0) return "";
   const ratio = Math.min(hours / maxHours, 1);
-  if (ratio < 0.25) return "bg-blue-50";
-  if (ratio < 0.5) return "bg-blue-100";
-  if (ratio < 0.75) return "bg-blue-200";
-  return "bg-blue-300";
+  if (ratio < 0.25) return "bg-blue-50 dark:bg-blue-900/20";
+  if (ratio < 0.5) return "bg-blue-100 dark:bg-blue-900/30";
+  if (ratio < 0.75) return "bg-blue-200 dark:bg-blue-900/40";
+  return "bg-blue-300 dark:bg-blue-900/50";
 }
 
 export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProps) {
@@ -116,43 +116,43 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
   return (
     <div className="space-y-6">
       {/* Header / Controls */}
-      <div className="rounded-3xl border border-gray-200 bg-white p-6">
-        <h3 className="mb-4 text-lg font-semibold text-gray-900">
+      <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+        <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
           Weekly Phasing (4Dispo)
         </h3>
 
         {canEdit && (
           <div className="flex flex-wrap items-end gap-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 Start Date
               </label>
               <input
                 type="date"
                 value={data?.hasPhasing ? effectiveStart : startDate}
                 onChange={(e) => setStartDate(e.target.value)}
-                className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm"
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 End Date
               </label>
               <input
                 type="date"
                 value={data?.hasPhasing ? effectiveEnd : endDate}
                 onChange={(e) => setEndDate(e.target.value)}
-                className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm"
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700">
+              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 Pattern
               </label>
               <select
                 value={pattern}
                 onChange={(e) => setPattern(e.target.value as PhasingPattern)}
-                className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm"
               >
                 <option value="even">Even Distribution</option>
                 <option value="front_loaded">Front Loaded (60/40)</option>
@@ -198,8 +198,8 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
             className={clsx(
               "rounded-lg px-3 py-1.5 text-sm font-medium",
               viewMode === "by_line"
-                ? "bg-sky-100 text-sky-700"
-                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+                ? "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300"
+                : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600",
             )}
           >
             By Line
@@ -210,8 +210,8 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
             className={clsx(
               "rounded-lg px-3 py-1.5 text-sm font-medium",
               viewMode === "by_chapter"
-                ? "bg-sky-100 text-sky-700"
-                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+                ? "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300"
+                : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600",
             )}
           >
             By Chapter
@@ -221,25 +221,25 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
 
       {/* Phasing Grid */}
       {phasingQuery.isLoading && (
-        <div className="rounded-3xl border border-gray-200 bg-white p-8 text-center text-gray-500">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-8 text-center text-gray-500 dark:text-gray-400">
           Loading phasing data...
         </div>
       )}
 
       {data && !data.hasPhasing && (
-        <div className="rounded-3xl border border-gray-200 bg-white p-8 text-center text-gray-500">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-8 text-center text-gray-500 dark:text-gray-400">
           No weekly phasing generated yet. Use the controls above to generate a
           phasing distribution.
         </div>
       )}
 
       {data?.hasPhasing && viewMode === "by_line" && (
-        <div className="rounded-3xl border border-gray-200 bg-white overflow-hidden">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b border-gray-200 bg-gray-50">
-                  <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left font-medium text-gray-700 min-w-[200px]">
+                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+                  <th className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 min-w-[200px]">
                     Demand Line
                   </th>
                   {data.weeks.map((week) => {
@@ -247,13 +247,13 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                     return (
                       <th
                         key={key}
-                        className="px-3 py-3 text-right font-medium text-gray-600 min-w-[80px] whitespace-nowrap"
+                        className="px-3 py-3 text-right font-medium text-gray-600 dark:text-gray-400 min-w-[80px] whitespace-nowrap"
                       >
                         {week.label}
                       </th>
                     );
                   })}
-                  <th className="sticky right-0 z-10 bg-gray-50 px-4 py-3 text-right font-semibold text-gray-700 min-w-[90px]">
+                  <th className="sticky right-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-right font-semibold text-gray-700 dark:text-gray-300 min-w-[90px]">
                     Total
                   </th>
                 </tr>
@@ -267,14 +267,14 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                   return (
                     <tr
                       key={line.id}
-                      className="border-b border-gray-100 hover:bg-gray-50/50"
+                      className="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50/50 dark:hover:bg-gray-700/30"
                     >
-                      <td className="sticky left-0 z-10 bg-white px-4 py-2 font-medium text-gray-900">
+                      <td className="sticky left-0 z-10 bg-white dark:bg-gray-800 px-4 py-2 font-medium text-gray-900 dark:text-gray-100">
                         <div className="truncate max-w-[200px]" title={line.name}>
                           {line.name}
                         </div>
                         {line.chapter && (
-                          <div className="text-xs text-gray-500">
+                          <div className="text-xs text-gray-500 dark:text-gray-400">
                             {line.chapter}
                           </div>
                         )}
@@ -286,7 +286,7 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                           <td
                             key={key}
                             className={clsx(
-                              "px-3 py-2 text-right tabular-nums",
+                              "px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-200",
                               heatColor(hours, maxHours),
                             )}
                           >
@@ -294,7 +294,7 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                           </td>
                         );
                       })}
-                      <td className="sticky right-0 z-10 bg-white px-4 py-2 text-right font-semibold tabular-nums text-gray-900">
+                      <td className="sticky right-0 z-10 bg-white dark:bg-gray-800 px-4 py-2 text-right font-semibold tabular-nums text-gray-900 dark:text-gray-100">
                         {lineTotal.toFixed(1)}
                       </td>
                     </tr>
@@ -302,8 +302,8 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                 })}
               </tbody>
               <tfoot>
-                <tr className="border-t-2 border-gray-300 bg-gray-50 font-semibold">
-                  <td className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-gray-700">
+                <tr className="border-t-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 font-semibold">
+                  <td className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-gray-700 dark:text-gray-300">
                     Total
                   </td>
                   {data.weeks.map((week) => {
@@ -312,13 +312,13 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                     return (
                       <td
                         key={key}
-                        className="px-3 py-3 text-right tabular-nums text-gray-900"
+                        className="px-3 py-3 text-right tabular-nums text-gray-900 dark:text-gray-100"
                       >
                         {total > 0 ? total.toFixed(1) : "-"}
                       </td>
                     );
                   })}
-                  <td className="sticky right-0 z-10 bg-gray-50 px-4 py-3 text-right tabular-nums text-gray-900">
+                  <td className="sticky right-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-right tabular-nums text-gray-900 dark:text-gray-100">
                     {Object.values(columnTotals)
                       .reduce((sum, h) => sum + h, 0)
                       .toFixed(1)}
@@ -331,12 +331,12 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
       )}
 
       {data?.hasPhasing && viewMode === "by_chapter" && (
-        <div className="rounded-3xl border border-gray-200 bg-white overflow-hidden">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b border-gray-200 bg-gray-50">
-                  <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left font-medium text-gray-700 min-w-[200px]">
+                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+                  <th className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 min-w-[200px]">
                     Chapter
                   </th>
                   {data.weeks.map((week) => {
@@ -344,13 +344,13 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                     return (
                       <th
                         key={key}
-                        className="px-3 py-3 text-right font-medium text-gray-600 min-w-[80px] whitespace-nowrap"
+                        className="px-3 py-3 text-right font-medium text-gray-600 dark:text-gray-400 min-w-[80px] whitespace-nowrap"
                       >
                         {week.label}
                       </th>
                     );
                   })}
-                  <th className="sticky right-0 z-10 bg-gray-50 px-4 py-3 text-right font-semibold text-gray-700 min-w-[90px]">
+                  <th className="sticky right-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-right font-semibold text-gray-700 dark:text-gray-300 min-w-[90px]">
                     Total
                   </th>
                 </tr>
@@ -366,9 +366,9 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                     return (
                       <tr
                         key={chapter}
-                        className="border-b border-gray-100 hover:bg-gray-50/50"
+                        className="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50/50 dark:hover:bg-gray-700/30"
                       >
-                        <td className="sticky left-0 z-10 bg-white px-4 py-2 font-medium text-gray-900">
+                        <td className="sticky left-0 z-10 bg-white dark:bg-gray-800 px-4 py-2 font-medium text-gray-900 dark:text-gray-100">
                           {chapter}
                         </td>
                         {data.weeks.map((week) => {
@@ -378,7 +378,7 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                             <td
                               key={key}
                               className={clsx(
-                                "px-3 py-2 text-right tabular-nums",
+                                "px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-200",
                                 heatColor(hours, maxChapterHours),
                               )}
                             >
@@ -386,7 +386,7 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                             </td>
                           );
                         })}
-                        <td className="sticky right-0 z-10 bg-white px-4 py-2 text-right font-semibold tabular-nums text-gray-900">
+                        <td className="sticky right-0 z-10 bg-white dark:bg-gray-800 px-4 py-2 text-right font-semibold tabular-nums text-gray-900 dark:text-gray-100">
                           {chapterTotal.toFixed(1)}
                         </td>
                       </tr>
@@ -394,8 +394,8 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                   })}
               </tbody>
               <tfoot>
-                <tr className="border-t-2 border-gray-300 bg-gray-50 font-semibold">
-                  <td className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-gray-700">
+                <tr className="border-t-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 font-semibold">
+                  <td className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-gray-700 dark:text-gray-300">
                     Total
                   </td>
                   {data.weeks.map((week) => {
@@ -404,13 +404,13 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
                     return (
                       <td
                         key={key}
-                        className="px-3 py-3 text-right tabular-nums text-gray-900"
+                        className="px-3 py-3 text-right tabular-nums text-gray-900 dark:text-gray-100"
                       >
                         {total > 0 ? total.toFixed(1) : "-"}
                       </td>
                     );
                   })}
-                  <td className="sticky right-0 z-10 bg-gray-50 px-4 py-3 text-right tabular-nums text-gray-900">
+                  <td className="sticky right-0 z-10 bg-gray-50 dark:bg-gray-900 px-4 py-3 text-right tabular-nums text-gray-900 dark:text-gray-100">
                     {Object.values(chapterColumnTotals)
                       .reduce((sum, h) => sum + h, 0)
                       .toFixed(1)}
@@ -424,8 +424,8 @@ export function WeeklyPhasingView({ estimateId, canEdit }: WeeklyPhasingViewProp
 
       {/* Info about current phasing config */}
       {data?.hasPhasing && data.config && (
-        <div className="rounded-3xl border border-gray-200 bg-white p-4">
-          <p className="text-sm text-gray-600">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+          <p className="text-sm text-gray-600 dark:text-gray-400">
             <span className="font-medium">Current phasing:</span>{" "}
             {data.config.pattern.replace("_", " ")} distribution from{" "}
             {data.config.startDate} to {data.config.endDate} across{" "}
diff --git a/apps/web/src/components/estimates/editors/AssumptionEditor.tsx b/apps/web/src/components/estimates/editors/AssumptionEditor.tsx
index ec6f7ee..e992c83 100644
--- a/apps/web/src/components/estimates/editors/AssumptionEditor.tsx
+++ b/apps/web/src/components/estimates/editors/AssumptionEditor.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+
 const INPUT_CLS =
   "w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-100";
 const LABEL_CLS = "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-500";
@@ -37,29 +39,29 @@ export function AssumptionEditor({ assumptions, onChange }: AssumptionEditorProp
         <div key={assumption.id ?? `new-${index}`} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
             <label>
-              <span className={LABEL_CLS}>Category</span>
+              <span className={LABEL_CLS}>Category <InfoTooltip content="Groups assumptions by topic, e.g. 'commercial', 'delivery', 'technical'." /></span>
               <input className={INPUT_CLS} value={assumption.category} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, category: event.target.value } : item))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Key</span>
+              <span className={LABEL_CLS}>Key <InfoTooltip content="Machine-readable identifier, auto-generated from label if left empty." /></span>
               <input className={INPUT_CLS} value={assumption.key} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, key: event.target.value } : item))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Label</span>
+              <span className={LABEL_CLS}>Label <InfoTooltip content="Human-readable name for this assumption." /></span>
               <input className={INPUT_CLS} value={assumption.label} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, label: event.target.value } : item))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Type</span>
+              <span className={LABEL_CLS}>Type <InfoTooltip content="Data type of the value, e.g. 'string', 'number', 'boolean'." /></span>
               <input className={INPUT_CLS} value={assumption.valueType} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, valueType: event.target.value } : item))} />
             </label>
           </div>
           <div className="mt-4 grid gap-4 lg:grid-cols-[minmax(0,1fr),220px]">
             <label className="block">
-              <span className={LABEL_CLS}>Value</span>
+              <span className={LABEL_CLS}>Value <InfoTooltip content="The concrete value or condition for this assumption." /></span>
               <textarea className={`${INPUT_CLS} min-h-24`} value={assumption.value} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} />
             </label>
             <label className="block">
-              <span className={LABEL_CLS}>Notes</span>
+              <span className={LABEL_CLS}>Notes <InfoTooltip content="Additional context or rationale for this assumption." /></span>
               <textarea className={`${INPUT_CLS} min-h-24`} value={assumption.notes} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, notes: event.target.value } : item))} />
             </label>
           </div>
diff --git a/apps/web/src/components/estimates/editors/DemandLineEditor.tsx b/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
index 3bb3350..eae26ef 100644
--- a/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
+++ b/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
@@ -10,6 +10,7 @@ import {
   getEffectiveDemandLineValues,
 } from "~/components/estimates/EstimateWorkspace.calculations.js";
 import type { EstimateResourceSnapshotView } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatMoney } from "~/lib/format.js";
 
 const INPUT_CLS =
@@ -335,7 +336,7 @@ export function DemandLineEditor({
 
             <div className="mb-4 grid gap-4 md:grid-cols-2">
               <label>
-                <span className={LABEL_CLS}>Linked resource</span>
+                <span className={LABEL_CLS}>Linked resource <InfoTooltip content="Link to a plANARCHY resource. Live-linked rates refresh automatically; manual overrides are persisted." /></span>
                 <select
                   className={INPUT_CLS}
                   value={line.resourceId ?? ""}
@@ -352,34 +353,34 @@ export function DemandLineEditor({
               <div className="rounded-2xl bg-gray-50 px-4 py-3">
                 <p className="text-xs uppercase tracking-wide text-gray-400">Snapshot behavior</p>
                 <p className="mt-1 text-sm text-gray-700">
-                  Linked resources refresh from live Planarchy rates when a rate is set to live mode. Manual overrides are persisted on the demand line.
+                  Linked resources refresh from live plANARCHY rates when a rate is set to live mode. Manual overrides are persisted on the demand line.
                 </p>
               </div>
             </div>
 
             <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
               <label>
-                <span className={LABEL_CLS}>Name</span>
+                <span className={LABEL_CLS}>Name <InfoTooltip content="Descriptive label for this demand line, e.g. role name or resource name." /></span>
                 <input className={INPUT_CLS} value={line.name} onChange={(event) => updateDemandLine(index, (entry) => ({ ...entry, name: event.target.value }))} />
               </label>
               <label>
-                <span className={LABEL_CLS}>Line type</span>
+                <span className={LABEL_CLS}>Line type <InfoTooltip content="Classification of the demand, typically LABOR. Can also be EXPENSE or SUBCONTRACTOR." /></span>
                 <input className={INPUT_CLS} value={line.lineType} onChange={(event) => updateDemandLine(index, (entry) => ({ ...entry, lineType: event.target.value }))} />
               </label>
               <label>
-                <span className={LABEL_CLS}>Chapter</span>
+                <span className={LABEL_CLS}>Chapter <InfoTooltip content="Department or cost center. Auto-filled when a resource is linked." /></span>
                 <input className={INPUT_CLS} value={line.chapter} onChange={(event) => updateDemandLine(index, (entry) => ({ ...entry, chapter: event.target.value }))} />
               </label>
               <label>
-                <span className={LABEL_CLS}>Hours</span>
+                <span className={LABEL_CLS}>Hours <InfoTooltip content="Estimated effort in hours. Cost total = hours x cost rate. Price total = hours x sell rate." /></span>
                 <input className={INPUT_CLS} value={line.hours} onChange={(event) => updateDemandLine(index, (entry) => ({ ...entry, hours: event.target.value }))} />
               </label>
               <label>
-                <span className={LABEL_CLS}>Currency</span>
+                <span className={LABEL_CLS}>Currency <InfoTooltip content="ISO 4217 currency code for this line's rates (e.g. EUR, USD)." /></span>
                 <input className={INPUT_CLS} maxLength={3} value={line.currency} onChange={(event) => updateDemandLine(index, (entry) => ({ ...entry, currency: event.target.value.toUpperCase() }))} />
               </label>
               <label>
-                <span className={LABEL_CLS}>Cost rate</span>
+                <span className={LABEL_CLS}>Cost rate <InfoTooltip content="Internal hourly cost rate. 'Live' syncs from the resource; 'Manual' allows a custom override. Line cost = hours x cost rate." /></span>
                 <div className="space-y-2">
                   <select
                     className={INPUT_CLS}
@@ -413,7 +414,7 @@ export function DemandLineEditor({
                 </div>
               </label>
               <label>
-                <span className={LABEL_CLS}>Bill rate</span>
+                <span className={LABEL_CLS}>Bill rate <InfoTooltip content="Client-facing hourly sell rate. 'Live' syncs from the resource; 'Manual' allows a custom override. Line price = hours x bill rate." /></span>
                 <div className="space-y-2">
                   <select
                     className={INPUT_CLS}
@@ -447,11 +448,11 @@ export function DemandLineEditor({
                 </div>
               </label>
               <div className="rounded-2xl bg-gray-50 px-4 py-3">
-                <p className="text-xs uppercase tracking-wide text-gray-400">Cost total</p>
+                <p className="text-xs uppercase tracking-wide text-gray-400">Cost total <InfoTooltip content="hours x cost rate, stored in cents." /></p>
                 <p className="mt-1 text-sm font-semibold text-gray-900">
                   {formatMoney(effectiveValues.costTotalCents, effectiveValues.currency)}
                 </p>
-                <p className="mt-3 text-xs uppercase tracking-wide text-gray-400">Price total</p>
+                <p className="mt-3 text-xs uppercase tracking-wide text-gray-400">Price total <InfoTooltip content="hours x sell rate, stored in cents." /></p>
                 <p className="mt-1 text-sm font-semibold text-gray-900">
                   {formatMoney(effectiveValues.priceTotalCents, effectiveValues.currency)}
                 </p>
diff --git a/apps/web/src/components/estimates/editors/ScopeItemEditor.tsx b/apps/web/src/components/estimates/editors/ScopeItemEditor.tsx
index 1f4cb65..2c260b4 100644
--- a/apps/web/src/components/estimates/editors/ScopeItemEditor.tsx
+++ b/apps/web/src/components/estimates/editors/ScopeItemEditor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { isSpreadsheetFile } from "~/lib/excel.js";
 import { parseScopeImport } from "~/lib/scopeImportParser.js";
 
@@ -81,25 +82,25 @@ export function ScopeItemEditor({
         <div key={item.id ?? `scope-${index}`} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
           <div className="grid gap-4 md:grid-cols-3">
             <label>
-              <span className={LABEL_CLS}>Sequence</span>
+              <span className={LABEL_CLS}>Sequence <InfoTooltip content="Ordering number for this scope item within the estimate." /></span>
               <input className={INPUT_CLS} value={item.sequenceNo} onChange={(event) => onChange((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, sequenceNo: event.target.value } : entry))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Scope type</span>
+              <span className={LABEL_CLS}>Scope type <InfoTooltip content="Category of deliverable, e.g. SHOT, SEQUENCE, ASSET, or a custom type." /></span>
               <input className={INPUT_CLS} value={item.scopeType} onChange={(event) => onChange((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, scopeType: event.target.value } : entry))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Package code</span>
+              <span className={LABEL_CLS}>Package code <InfoTooltip content="Optional reference code for tracking this scope item in external systems." /></span>
               <input className={INPUT_CLS} value={item.packageCode} onChange={(event) => onChange((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, packageCode: event.target.value } : entry))} />
             </label>
           </div>
           <div className="mt-4 grid gap-4 lg:grid-cols-[minmax(0,0.9fr),minmax(0,1.1fr)]">
             <label>
-              <span className={LABEL_CLS}>Name</span>
+              <span className={LABEL_CLS}>Name <InfoTooltip content="Short descriptive name for this deliverable or work package." /></span>
               <input className={INPUT_CLS} value={item.name} onChange={(event) => onChange((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, name: event.target.value } : entry))} />
             </label>
             <label>
-              <span className={LABEL_CLS}>Description</span>
+              <span className={LABEL_CLS}>Description <InfoTooltip content="Detailed description of what this scope item includes." /></span>
               <textarea className={`${INPUT_CLS} min-h-24`} value={item.description} onChange={(event) => onChange((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, description: event.target.value } : entry))} />
             </label>
           </div>
diff --git a/apps/web/src/components/estimates/tabs/AssumptionsTab.tsx b/apps/web/src/components/estimates/tabs/AssumptionsTab.tsx
index 4d92d0b..6eef8c5 100644
--- a/apps/web/src/components/estimates/tabs/AssumptionsTab.tsx
+++ b/apps/web/src/components/estimates/tabs/AssumptionsTab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import type {
   EstimateVersionView,
   EstimateWorkspaceView,
@@ -7,7 +8,7 @@ import type {
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -23,25 +24,25 @@ export function AssumptionsTab({ estimate }: { estimate: EstimateWorkspaceView }
   }
 
   return (
-    <div className="rounded-3xl border border-gray-200 bg-white shadow-sm">
-      <div className="border-b border-gray-100 px-6 py-4">
-        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600">Commercial and delivery assumptions</h2>
+    <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
+      <div className="border-b border-gray-100 dark:border-gray-700/50 px-6 py-4">
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">Commercial and delivery assumptions <InfoTooltip content="Preconditions that affect the estimate validity. If any assumption changes, the estimate may need revision." /></h2>
       </div>
-      <div className="divide-y divide-gray-100">
+      <div className="divide-y divide-gray-100 dark:divide-gray-700/50">
         {assumptions.map((assumption) => (
           <div key={assumption.id} className="grid gap-3 px-6 py-4 md:grid-cols-[160px,1fr,1fr]">
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Category</p>
-              <p className="mt-1 text-sm font-medium text-gray-900">{assumption.category}</p>
+              <p className="text-xs uppercase tracking-wide text-gray-400">Category <InfoTooltip content="Groups assumptions by topic, e.g. 'commercial', 'delivery', 'technical'." /></p>
+              <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{assumption.category}</p>
             </div>
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Label</p>
-              <p className="mt-1 text-sm text-gray-800">{assumption.label}</p>
+              <p className="text-xs uppercase tracking-wide text-gray-400">Label <InfoTooltip content="Human-readable description of the assumption. The key below is the machine-readable identifier." /></p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">{assumption.label}</p>
               <p className="mt-1 text-xs text-gray-400">{assumption.key}</p>
             </div>
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Value</p>
-              <p className="mt-1 text-sm text-gray-800">{String(assumption.value)}</p>
+              <p className="text-xs uppercase tracking-wide text-gray-400">Value <InfoTooltip content="The concrete value or condition for this assumption." /></p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">{String(assumption.value)}</p>
             </div>
           </div>
         ))}
diff --git a/apps/web/src/components/estimates/tabs/ExportsTab.tsx b/apps/web/src/components/estimates/tabs/ExportsTab.tsx
index 8211e16..bb0f596 100644
--- a/apps/web/src/components/estimates/tabs/ExportsTab.tsx
+++ b/apps/web/src/components/estimates/tabs/ExportsTab.tsx
@@ -9,6 +9,7 @@ import type {
   EstimateVersionView,
   EstimateWorkspaceView,
 } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatDateLong, formatMoney } from "~/lib/format.js";
 
 const EXPORT_FORMATS: EstimateExportFormat[] = [
@@ -97,11 +98,11 @@ export function ExportsTab({
 
   return (
     <div className="space-y-4">
-      <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+      <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div>
-            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600">Export delivery</h2>
-            <p className="mt-2 text-sm text-gray-500">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">Export delivery <InfoTooltip content="Generate downloadable files from the current estimate version. Each format includes demand lines, scope, and financial summaries." /></h2>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
               Generate format-specific artifacts from the current version and download them directly from the stored serializer payload.
             </p>
           </div>
@@ -113,7 +114,7 @@ export function ExportsTab({
                   type="button"
                   onClick={() => onCreateExport(latestVersion.id, format)}
                   disabled={isCreatingExport}
-                  className="rounded-2xl border border-brand-200 bg-white px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50 disabled:cursor-not-allowed disabled:opacity-60"
+                  className="rounded-2xl border border-brand-200 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50 disabled:cursor-not-allowed disabled:opacity-60"
                 >
                   {isCreatingExport ? "Generating..." : `Create ${format}`}
                 </button>
@@ -123,16 +124,16 @@ export function ExportsTab({
         </div>
       </div>
 
-      <div className="rounded-3xl border border-gray-200 bg-white shadow-sm">
-        <div className="border-b border-gray-100 px-6 py-4">
-          <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600">Generated exports</h2>
+      <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
+        <div className="border-b border-gray-100 dark:border-gray-700/50 px-6 py-4">
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">Generated exports <InfoTooltip content="Previously generated export artifacts. XLSX/CSV contain tabular data; JSON is machine-readable; SAP/MMP are ERP integration formats." /></h2>
         </div>
         {exports.length === 0 ? (
           <div className="px-6 py-8">
             <p className="text-sm text-gray-400">No exports have been generated for the current version yet.</p>
           </div>
         ) : (
-          <div className="divide-y divide-gray-100">
+          <div className="divide-y divide-gray-100 dark:divide-gray-700/50">
             {exports.map((estimateExport) => {
               const payload = isEstimateExportArtifactPayload(estimateExport.payload)
                 ? estimateExport.payload
@@ -143,57 +144,57 @@ export function ExportsTab({
                   <div className="flex flex-wrap items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
                       <div className="flex flex-wrap items-center gap-2">
-                        <p className="text-sm font-medium text-gray-900">{estimateExport.fileName}</p>
-                        <span className="rounded-full bg-gray-100 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-600">
+                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{estimateExport.fileName}</p>
+                        <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">
                           {estimateExport.format}
                         </span>
                         {payload?.sheetNames?.length ? (
-                          <span className="rounded-full bg-sky-50 px-2.5 py-1 text-[11px] font-semibold text-sky-700">
+                          <span className="rounded-full bg-sky-50 dark:bg-sky-900/30 px-2.5 py-1 text-[11px] font-semibold text-sky-700 dark:text-sky-300">
                             {payload.sheetNames.length} sheets
                           </span>
                         ) : null}
                       </div>
-                      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500">
+                      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                         <span>{formatDateLong(estimateExport.createdAt)}</span>
                         {payload ? <span>{formatBytes(payload.byteLength)}</span> : null}
                         {payload?.rowCount != null ? <span>{payload.rowCount} rows</span> : null}
                         {payload?.lineCount != null ? <span>{payload.lineCount} lines</span> : null}
                       </div>
                       {payload ? (
-                        <div className="mt-3 grid gap-2 text-xs text-gray-600 md:grid-cols-2 xl:grid-cols-4">
-                          <div className="rounded-2xl bg-gray-50 px-3 py-2">
+                        <div className="mt-3 grid gap-2 text-xs text-gray-600 dark:text-gray-400 md:grid-cols-2 xl:grid-cols-4">
+                          <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-3 py-2">
                             <p className="uppercase tracking-wide text-gray-400">Hours</p>
-                            <p className="mt-1 font-semibold text-gray-900">
+                            <p className="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                               {payload.summary.totalHours.toFixed(1)}
                             </p>
                           </div>
-                          <div className="rounded-2xl bg-gray-50 px-3 py-2">
+                          <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-3 py-2">
                             <p className="uppercase tracking-wide text-gray-400">Cost</p>
-                            <p className="mt-1 font-semibold text-gray-900">
+                            <p className="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                               {formatMoney(
                                 payload.summary.totalCostCents,
                                 payload.summary.baseCurrency,
                               )}
                             </p>
                           </div>
-                          <div className="rounded-2xl bg-gray-50 px-3 py-2">
+                          <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-3 py-2">
                             <p className="uppercase tracking-wide text-gray-400">Price</p>
-                            <p className="mt-1 font-semibold text-gray-900">
+                            <p className="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                               {formatMoney(
                                 payload.summary.totalPriceCents,
                                 payload.summary.baseCurrency,
                               )}
                             </p>
                           </div>
-                          <div className="rounded-2xl bg-gray-50 px-3 py-2">
+                          <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-3 py-2">
                             <p className="uppercase tracking-wide text-gray-400">Margin</p>
-                            <p className="mt-1 font-semibold text-gray-900">
+                            <p className="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                               {payload.summary.marginPercent.toFixed(0)}%
                             </p>
                           </div>
                         </div>
                       ) : (
-                        <p className="mt-3 text-xs text-amber-700">
+                        <p className="mt-3 text-xs text-amber-700 dark:text-amber-300">
                           Legacy export record detected. Regenerate it to get downloadable serializer output.
                         </p>
                       )}
@@ -203,7 +204,7 @@ export function ExportsTab({
                       <button
                         type="button"
                         onClick={() => downloadEstimateExport(estimateExport)}
-                        className="rounded-2xl border border-brand-200 bg-white px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50"
+                        className="rounded-2xl border border-brand-200 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50"
                       >
                         Download
                       </button>
diff --git a/apps/web/src/components/estimates/tabs/FinancialsTab.tsx b/apps/web/src/components/estimates/tabs/FinancialsTab.tsx
index 074362e..a1b1cd7 100644
--- a/apps/web/src/components/estimates/tabs/FinancialsTab.tsx
+++ b/apps/web/src/components/estimates/tabs/FinancialsTab.tsx
@@ -6,11 +6,12 @@ import type {
   EstimateVersionView,
   EstimateWorkspaceView,
 } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatMoney } from "~/lib/format.js";
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -76,33 +77,33 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
     <div className="space-y-6">
       {/* Summary cards */}
       <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-xs uppercase tracking-wide text-gray-400">Total Cost</p>
-          <p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(totals.costCents, estimate.baseCurrency)}</p>
-          <p className="mt-1 text-xs text-gray-500">Avg {formatMoney(Math.round(avgCostRate), estimate.baseCurrency)}/h</p>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-xs uppercase tracking-wide text-gray-400">Total Cost <InfoTooltip content="Sum of (hours x cost rate) for all demand lines. Avg shows weighted average cost per hour." /></p>
+          <p className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">{formatMoney(totals.costCents, estimate.baseCurrency)}</p>
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Avg {formatMoney(Math.round(avgCostRate), estimate.baseCurrency)}/h</p>
         </div>
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-xs uppercase tracking-wide text-gray-400">Total Price</p>
-          <p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(totals.priceCents, estimate.baseCurrency)}</p>
-          <p className="mt-1 text-xs text-gray-500">Avg {formatMoney(Math.round(avgBillRate), estimate.baseCurrency)}/h</p>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-xs uppercase tracking-wide text-gray-400">Total Price <InfoTooltip content="Sum of (hours x sell rate) for all demand lines. This is the total client-facing revenue." /></p>
+          <p className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">{formatMoney(totals.priceCents, estimate.baseCurrency)}</p>
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Avg {formatMoney(Math.round(avgBillRate), estimate.baseCurrency)}/h</p>
         </div>
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-xs uppercase tracking-wide text-gray-400">Margin</p>
-          <p className={clsx("mt-2 text-2xl font-semibold", marginCents >= 0 ? "text-emerald-700" : "text-red-700")}>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-xs uppercase tracking-wide text-gray-400">Margin <InfoTooltip content="Margin = Total Price - Total Cost. Margin % = Margin / Total Price x 100. Green = positive, red = negative." /></p>
+          <p className={clsx("mt-2 text-2xl font-semibold", marginCents >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
             {formatMoney(marginCents, estimate.baseCurrency)}
           </p>
-          <p className="mt-1 text-xs text-gray-500">{marginPercent.toFixed(1)}% of price</p>
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{marginPercent.toFixed(1)}% of price</p>
         </div>
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-xs uppercase tracking-wide text-gray-400">Total Hours</p>
-          <p className="mt-2 text-2xl font-semibold text-gray-900">{totals.hours.toFixed(1)} h</p>
-          <p className="mt-1 text-xs text-gray-500">{demandLines.length} demand lines</p>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-xs uppercase tracking-wide text-gray-400">Total Hours <InfoTooltip content="Sum of all demand line hours. Each demand line contributes its hours to this total." /></p>
+          <p className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">{totals.hours.toFixed(1)} h</p>
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{demandLines.length} demand lines</p>
         </div>
       </div>
 
       {/* Margin waterfall: Cost -> Margin -> Price */}
-      <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-        <h3 className="mb-4 text-base font-semibold text-gray-900">Cost to price bridge</h3>
+      <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+        <h3 className="mb-4 text-base font-semibold text-gray-900 dark:text-gray-100">Cost to price bridge <InfoTooltip content="Visual waterfall: internal cost + margin = client price. Bar heights are proportional." /></h3>
         <div className="flex items-end gap-1 h-32">
           {(() => {
             const maxVal = Math.max(totals.costCents, totals.priceCents, 1);
@@ -112,22 +113,22 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
             return (
               <>
                 <div className="flex-1 flex flex-col items-center gap-1">
-                  <div className="w-full rounded-t-xl bg-gray-300" style={{ height: `${costH}%` }} />
-                  <span className="text-xs font-medium text-gray-600">Cost</span>
-                  <span className="text-xs text-gray-500">{formatMoney(totals.costCents, estimate.baseCurrency)}</span>
+                  <div className="w-full rounded-t-xl bg-gray-300 dark:bg-gray-600" style={{ height: `${costH}%` }} />
+                  <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Cost</span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">{formatMoney(totals.costCents, estimate.baseCurrency)}</span>
                 </div>
                 <div className="flex-1 flex flex-col items-center gap-1">
                   <div
                     className={clsx("w-full rounded-t-xl", marginCents >= 0 ? "bg-emerald-400" : "bg-red-400")}
                     style={{ height: `${marginH}%` }}
                   />
-                  <span className="text-xs font-medium text-gray-600">Margin</span>
-                  <span className="text-xs text-gray-500">{formatMoney(marginCents, estimate.baseCurrency)}</span>
+                  <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Margin</span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">{formatMoney(marginCents, estimate.baseCurrency)}</span>
                 </div>
                 <div className="flex-1 flex flex-col items-center gap-1">
                   <div className="w-full rounded-t-xl bg-brand-500" style={{ height: `${priceH}%` }} />
-                  <span className="text-xs font-medium text-gray-600">Price</span>
-                  <span className="text-xs text-gray-500">{formatMoney(totals.priceCents, estimate.baseCurrency)}</span>
+                  <span className="text-xs font-medium text-gray-600 dark:text-gray-400">Price</span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">{formatMoney(totals.priceCents, estimate.baseCurrency)}</span>
                 </div>
               </>
             );
@@ -136,12 +137,12 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
       </div>
 
       {/* Chapter breakdown */}
-      <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-        <h3 className="mb-3 text-base font-semibold text-gray-900">Breakdown by chapter</h3>
+      <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+        <h3 className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">Breakdown by chapter <InfoTooltip content="Financial aggregation by department/chapter. Chapter margin % = (price - cost) / price x 100." /></h3>
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
             <thead>
-              <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
+              <tr className="border-b border-gray-200 dark:border-gray-700 text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 <th className="py-2 pr-3 font-medium">Chapter</th>
                 <th className="px-3 py-2 text-right font-medium">Lines</th>
                 <th className="px-3 py-2 text-right font-medium">Hours</th>
@@ -156,31 +157,31 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
                 const chapterMargin = data.priceCents - data.costCents;
                 const chapterMarginPct = data.priceCents > 0 ? (chapterMargin / data.priceCents) * 100 : 0;
                 return (
-                  <tr key={chapter} className="border-b border-gray-100">
-                    <td className="py-2 pr-3 font-medium text-gray-900">{chapter}</td>
-                    <td className="px-3 py-2 text-right tabular-nums text-gray-600">{data.count}</td>
-                    <td className="px-3 py-2 text-right tabular-nums text-gray-700">{data.hours.toFixed(1)}</td>
-                    <td className="px-3 py-2 text-right tabular-nums text-gray-700">{formatMoney(data.costCents, estimate.baseCurrency)}</td>
-                    <td className="px-3 py-2 text-right tabular-nums text-gray-700">{formatMoney(data.priceCents, estimate.baseCurrency)}</td>
-                    <td className={clsx("px-3 py-2 text-right tabular-nums", chapterMargin >= 0 ? "text-emerald-700" : "text-red-700")}>
+                  <tr key={chapter} className="border-b border-gray-100 dark:border-gray-700/50">
+                    <td className="py-2 pr-3 font-medium text-gray-900 dark:text-gray-100">{chapter}</td>
+                    <td className="px-3 py-2 text-right tabular-nums text-gray-600 dark:text-gray-400">{data.count}</td>
+                    <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{data.hours.toFixed(1)}</td>
+                    <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{formatMoney(data.costCents, estimate.baseCurrency)}</td>
+                    <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{formatMoney(data.priceCents, estimate.baseCurrency)}</td>
+                    <td className={clsx("px-3 py-2 text-right tabular-nums", chapterMargin >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
                       {formatMoney(chapterMargin, estimate.baseCurrency)}
                     </td>
-                    <td className={clsx("pl-3 py-2 text-right tabular-nums", chapterMarginPct >= 0 ? "text-emerald-700" : "text-red-700")}>
+                    <td className={clsx("pl-3 py-2 text-right tabular-nums", chapterMarginPct >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
                       {chapterMarginPct.toFixed(1)}%
                     </td>
                   </tr>
                 );
               })}
-              <tr className="border-t-2 border-gray-300 font-semibold">
-                <td className="py-2 pr-3 text-gray-900">Total</td>
-                <td className="px-3 py-2 text-right tabular-nums text-gray-900">{demandLines.length}</td>
-                <td className="px-3 py-2 text-right tabular-nums text-gray-900">{totals.hours.toFixed(1)}</td>
-                <td className="px-3 py-2 text-right tabular-nums text-gray-900">{formatMoney(totals.costCents, estimate.baseCurrency)}</td>
-                <td className="px-3 py-2 text-right tabular-nums text-gray-900">{formatMoney(totals.priceCents, estimate.baseCurrency)}</td>
-                <td className={clsx("px-3 py-2 text-right tabular-nums", marginCents >= 0 ? "text-emerald-700" : "text-red-700")}>
+              <tr className="border-t-2 border-gray-300 dark:border-gray-600 font-semibold">
+                <td className="py-2 pr-3 text-gray-900 dark:text-gray-100">Total</td>
+                <td className="px-3 py-2 text-right tabular-nums text-gray-900 dark:text-gray-100">{demandLines.length}</td>
+                <td className="px-3 py-2 text-right tabular-nums text-gray-900 dark:text-gray-100">{totals.hours.toFixed(1)}</td>
+                <td className="px-3 py-2 text-right tabular-nums text-gray-900 dark:text-gray-100">{formatMoney(totals.costCents, estimate.baseCurrency)}</td>
+                <td className="px-3 py-2 text-right tabular-nums text-gray-900 dark:text-gray-100">{formatMoney(totals.priceCents, estimate.baseCurrency)}</td>
+                <td className={clsx("px-3 py-2 text-right tabular-nums", marginCents >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
                   {formatMoney(marginCents, estimate.baseCurrency)}
                 </td>
-                <td className={clsx("pl-3 py-2 text-right tabular-nums", marginPercent >= 0 ? "text-emerald-700" : "text-red-700")}>
+                <td className={clsx("pl-3 py-2 text-right tabular-nums", marginPercent >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
                   {marginPercent.toFixed(1)}%
                 </td>
               </tr>
@@ -191,12 +192,12 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
 
       {/* Monthly cost/price phasing */}
       {sortedMonths.length > 0 && (
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <h3 className="mb-3 text-base font-semibold text-gray-900">Monthly financial phasing</h3>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <h3 className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">Monthly financial phasing <InfoTooltip content="Monthly cost and price derived from each line's hourly spread. Cost = monthly hours x line cost rate. Price = monthly hours x line sell rate." /></h3>
           <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
               <thead>
-                <tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
+                <tr className="border-b border-gray-200 dark:border-gray-700 text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
                   <th className="py-2 pr-3 font-medium">Month</th>
                   <th className="px-3 py-2 text-right font-medium">Hours</th>
                   <th className="px-3 py-2 text-right font-medium">Cost</th>
@@ -209,12 +210,12 @@ export function FinancialsTab({ estimate, canEdit }: { estimate: EstimateWorkspa
                   const data = monthlyFinancials.get(month)!;
                   const mMargin = data.priceCents - data.costCents;
                   return (
-                    <tr key={month} className="border-b border-gray-100">
-                      <td className="py-2 pr-3 font-medium text-gray-900">{month}</td>
-                      <td className="px-3 py-2 text-right tabular-nums text-gray-700">{data.hours.toFixed(1)}</td>
-                      <td className="px-3 py-2 text-right tabular-nums text-gray-700">{formatMoney(data.costCents, estimate.baseCurrency)}</td>
-                      <td className="px-3 py-2 text-right tabular-nums text-gray-700">{formatMoney(data.priceCents, estimate.baseCurrency)}</td>
-                      <td className={clsx("pl-3 py-2 text-right tabular-nums", mMargin >= 0 ? "text-emerald-700" : "text-red-700")}>
+                    <tr key={month} className="border-b border-gray-100 dark:border-gray-700/50">
+                      <td className="py-2 pr-3 font-medium text-gray-900 dark:text-gray-100">{month}</td>
+                      <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{data.hours.toFixed(1)}</td>
+                      <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{formatMoney(data.costCents, estimate.baseCurrency)}</td>
+                      <td className="px-3 py-2 text-right tabular-nums text-gray-700 dark:text-gray-300">{formatMoney(data.priceCents, estimate.baseCurrency)}</td>
+                      <td className={clsx("pl-3 py-2 text-right tabular-nums", mMargin >= 0 ? "text-emerald-700 dark:text-emerald-400" : "text-red-700 dark:text-red-400")}>
                         {formatMoney(mMargin, estimate.baseCurrency)}
                       </td>
                     </tr>
diff --git a/apps/web/src/components/estimates/tabs/OverviewTab.tsx b/apps/web/src/components/estimates/tabs/OverviewTab.tsx
index 729c3f5..4856057 100644
--- a/apps/web/src/components/estimates/tabs/OverviewTab.tsx
+++ b/apps/web/src/components/estimates/tabs/OverviewTab.tsx
@@ -7,21 +7,22 @@ import type {
   EstimateVersionView,
   EstimateWorkspaceView,
 } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatDateLong, formatMoney } from "~/lib/format.js";
 
 const STATUS_STYLES: Record<EstimateStatus, string> = {
-  DRAFT: "bg-slate-100 text-slate-700",
-  IN_REVIEW: "bg-amber-100 text-amber-700",
-  APPROVED: "bg-emerald-100 text-emerald-700",
-  ARCHIVED: "bg-zinc-200 text-zinc-700",
+  DRAFT: "bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300",
+  IN_REVIEW: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  ARCHIVED: "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
 
 const VERSION_STYLES: Record<EstimateVersionStatus, string> = {
-  WORKING: "bg-sky-100 text-sky-700",
-  BASELINE: "bg-violet-100 text-violet-700",
-  SUBMITTED: "bg-amber-100 text-amber-700",
-  APPROVED: "bg-emerald-100 text-emerald-700",
-  SUPERSEDED: "bg-zinc-200 text-zinc-700",
+  WORKING: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
+  BASELINE: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
+  SUBMITTED: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  SUPERSEDED: "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
 
 function formatMetricValue(metric: EstimateMetricView) {
@@ -42,13 +43,13 @@ export function OverviewTab({ estimate }: { estimate: EstimateWorkspaceView }) {
   return (
     <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr),340px]">
       <section className="space-y-6">
-        <div className="rounded-3xl border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 shadow-sm">
           <div className="flex flex-wrap items-center gap-2">
             <span className={clsx("rounded-full px-3 py-1 text-xs font-semibold", STATUS_STYLES[estimate.status])}>
               {estimate.status.replace("_", " ")}
             </span>
             {estimate.project && (
-              <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">
+              <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1 text-xs font-medium text-gray-600 dark:text-gray-400">
                 {estimate.project.shortCode}
               </span>
             )}
@@ -56,44 +57,44 @@ export function OverviewTab({ estimate }: { estimate: EstimateWorkspaceView }) {
 
           <div className="mt-5 grid gap-4 md:grid-cols-2">
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Opportunity</p>
-              <p className="mt-1 text-sm text-gray-800">{estimate.opportunityId ?? "Not set"}</p>
+              <p className="text-xs uppercase tracking-wide text-gray-400">Opportunity <InfoTooltip content="External CRM or sales reference linking this estimate to a sales opportunity." /></p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">{estimate.opportunityId ?? "Not set"}</p>
             </div>
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Base currency</p>
-              <p className="mt-1 text-sm text-gray-800">{estimate.baseCurrency}</p>
+              <p className="text-xs uppercase tracking-wide text-gray-400">Base currency <InfoTooltip content="The primary currency for all monetary calculations in this estimate." /></p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">{estimate.baseCurrency}</p>
             </div>
             <div>
-              <p className="text-xs uppercase tracking-wide text-gray-400">Latest version</p>
-              <p className="mt-1 text-sm text-gray-800">
+              <p className="text-xs uppercase tracking-wide text-gray-400">Latest version <InfoTooltip content="The most recent version snapshot. Each version captures a full copy of scope, demand, and financials." /></p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">
                 {latestVersion ? `v${latestVersion.versionNumber}${latestVersion.label ? ` - ${latestVersion.label}` : ""}` : "No version"}
               </p>
             </div>
             <div>
               <p className="text-xs uppercase tracking-wide text-gray-400">Updated</p>
-              <p className="mt-1 text-sm text-gray-800">{formatDateLong(estimate.updatedAt)}</p>
+              <p className="mt-1 text-sm text-gray-800 dark:text-gray-200">{formatDateLong(estimate.updatedAt)}</p>
             </div>
           </div>
 
           {latestVersion?.notes && (
-            <div className="mt-5 rounded-2xl border border-gray-100 bg-gray-50 p-4">
+            <div className="mt-5 rounded-2xl border border-gray-100 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900 p-4">
               <p className="text-xs uppercase tracking-wide text-gray-400">Version notes</p>
-              <p className="mt-2 text-sm text-gray-700">{latestVersion.notes}</p>
+              <p className="mt-2 text-sm text-gray-700 dark:text-gray-300">{latestVersion.notes}</p>
             </div>
           )}
         </div>
 
         <div className="grid gap-4 md:grid-cols-2">
-          <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-semibold text-gray-900">Scope items</p>
+              <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Scope items <InfoTooltip content="Deliverables or work packages included in this estimate version." /></p>
               <span className="text-xs text-gray-400">{latestVersion?.scopeItems.length ?? 0}</span>
             </div>
             <div className="mt-4 space-y-2">
               {(latestVersion?.scopeItems ?? []).slice(0, 4).map((item) => (
-                <div key={item.id} className="rounded-2xl border border-gray-100 px-4 py-3">
+                <div key={item.id} className="rounded-2xl border border-gray-100 dark:border-gray-700/50 px-4 py-3">
                   <div className="flex items-center justify-between gap-3">
-                    <p className="text-sm font-medium text-gray-900">{item.name}</p>
+                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{item.name}</p>
                     <span className="text-xs text-gray-400">{item.scopeType}</span>
                   </div>
                 </div>
@@ -102,17 +103,17 @@ export function OverviewTab({ estimate }: { estimate: EstimateWorkspaceView }) {
             </div>
           </div>
 
-          <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-semibold text-gray-900">Demand lines</p>
+              <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Demand lines <InfoTooltip content="Staffing demand rows with hours, cost rate, and sell rate per role or resource." /></p>
               <span className="text-xs text-gray-400">{latestVersion?.demandLines.length ?? 0}</span>
             </div>
             <div className="mt-4 space-y-2">
               {(latestVersion?.demandLines ?? []).slice(0, 4).map((line) => (
-                <div key={line.id} className="rounded-2xl border border-gray-100 px-4 py-3">
+                <div key={line.id} className="rounded-2xl border border-gray-100 dark:border-gray-700/50 px-4 py-3">
                   <div className="flex items-center justify-between gap-3">
-                    <p className="text-sm font-medium text-gray-900">{line.name}</p>
-                    <span className="text-xs text-gray-500">{line.hours.toFixed(1)} h</span>
+                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{line.name}</p>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">{line.hours.toFixed(1)} h</span>
                   </div>
                 </div>
               ))}
@@ -123,44 +124,44 @@ export function OverviewTab({ estimate }: { estimate: EstimateWorkspaceView }) {
       </section>
 
       <aside className="space-y-4">
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-sm font-semibold text-gray-900">Summary metrics</p>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Summary metrics <InfoTooltip content="Key financial indicators derived from the latest version's demand lines." /></p>
           <div className="mt-4 space-y-3">
             {latestMetrics.length === 0 ? (
               <p className="text-sm text-gray-400">No derived metrics available yet.</p>
             ) : (
               latestMetrics.map((metric) => (
-                <div key={metric.id} className="flex items-center justify-between gap-3 rounded-2xl bg-gray-50 px-4 py-3">
+                <div key={metric.id} className="flex items-center justify-between gap-3 rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
                   <span className="text-xs uppercase tracking-wide text-gray-400">{metric.label}</span>
-                  <span className="text-sm font-semibold text-gray-900">{formatMetricValue(metric)}</span>
+                  <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{formatMetricValue(metric)}</span>
                 </div>
               ))
             )}
           </div>
         </div>
 
-        <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-          <p className="text-sm font-semibold text-gray-900">Version context</p>
+        <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+          <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Version context <InfoTooltip content="Metadata about the latest version, including its workflow status and linked records." /></p>
           <div className="mt-4 space-y-3">
             {latestVersion ? (
               <>
                 <div className="flex items-center justify-between gap-3">
-                  <span className="text-sm text-gray-500">Status</span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Status</span>
                   <span className={clsx("rounded-full px-2.5 py-1 text-xs font-medium", VERSION_STYLES[latestVersion.status])}>
                     {latestVersion.status}
                   </span>
                 </div>
                 <div className="flex items-center justify-between gap-3">
-                  <span className="text-sm text-gray-500">Assumptions</span>
-                  <span className="text-sm font-medium text-gray-900">{latestVersion.assumptions.length}</span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Assumptions</span>
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{latestVersion.assumptions.length}</span>
                 </div>
                 <div className="flex items-center justify-between gap-3">
-                  <span className="text-sm text-gray-500">Snapshots</span>
-                  <span className="text-sm font-medium text-gray-900">{latestVersion.resourceSnapshots.length}</span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Snapshots</span>
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{latestVersion.resourceSnapshots.length}</span>
                 </div>
                 <div className="flex items-center justify-between gap-3">
-                  <span className="text-sm text-gray-500">Exports</span>
-                  <span className="text-sm font-medium text-gray-900">{latestVersion.exports.length}</span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Exports</span>
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{latestVersion.exports.length}</span>
                 </div>
               </>
             ) : (
diff --git a/apps/web/src/components/estimates/tabs/ScopeTab.tsx b/apps/web/src/components/estimates/tabs/ScopeTab.tsx
index 0f82696..6df62fa 100644
--- a/apps/web/src/components/estimates/tabs/ScopeTab.tsx
+++ b/apps/web/src/components/estimates/tabs/ScopeTab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import type {
   EstimateVersionView,
   EstimateWorkspaceView,
@@ -7,7 +8,7 @@ import type {
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -24,20 +25,24 @@ export function ScopeTab({ estimate }: { estimate: EstimateWorkspaceView }) {
 
   return (
     <div className="space-y-3">
+      <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+        <span>Scope items define the deliverables and work packages in this estimate.</span>
+        <InfoTooltip content="Each scope item represents a distinct deliverable (e.g. a shot, sequence, or asset). Scope items organize the estimate but do not directly affect cost calculations." />
+      </div>
       {scopeItems.map((item) => (
-        <div key={item.id} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+        <div key={item.id} className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div>
               <div className="flex items-center gap-2">
-                <span className="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600">
+                <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-400">
                   #{item.sequenceNo}
                 </span>
                 <span className="rounded-full bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700">
                   {item.scopeType}
                 </span>
               </div>
-              <h3 className="mt-3 text-lg font-semibold text-gray-900">{item.name}</h3>
-              {item.description && <p className="mt-2 text-sm text-gray-600">{item.description}</p>}
+              <h3 className="mt-3 text-lg font-semibold text-gray-900 dark:text-gray-100">{item.name}</h3>
+              {item.description && <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{item.description}</p>}
             </div>
             <div className="grid gap-2 text-right text-xs text-gray-400">
               {item.frameCount != null && <span>{item.frameCount} frames</span>}
diff --git a/apps/web/src/components/estimates/tabs/StaffingTab.tsx b/apps/web/src/components/estimates/tabs/StaffingTab.tsx
index 54be8f5..0288d95 100644
--- a/apps/web/src/components/estimates/tabs/StaffingTab.tsx
+++ b/apps/web/src/components/estimates/tabs/StaffingTab.tsx
@@ -13,11 +13,12 @@ import type {
   EstimateVersionView,
   EstimateWorkspaceView,
 } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatMoney } from "~/lib/format.js";
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -70,11 +71,11 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
         });
 
         return (
-          <div key={line.id} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div key={line.id} className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
             <div className="flex flex-wrap items-start justify-between gap-4">
               <div>
-                <h3 className="text-lg font-semibold text-gray-900">{line.name}</h3>
-                <div className="mt-2 flex flex-wrap gap-2 text-xs text-gray-500">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{line.name}</h3>
+                <div className="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
                   <span>{line.lineType}</span>
                   {line.chapter && <span>{line.chapter}</span>}
                   {line.rateSource && <span>{line.rateSource}</span>}
@@ -83,8 +84,8 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
                     className={clsx(
                       "rounded-full px-2.5 py-1 font-medium",
                       calculation.costRateMode === "resource"
-                        ? "bg-emerald-50 text-emerald-700"
-                        : "bg-amber-50 text-amber-700",
+                        ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300"
+                        : "bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
                     )}
                   >
                     Cost {calculation.costRateMode === "resource" ? "live" : "manual"}
@@ -93,8 +94,8 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
                     className={clsx(
                       "rounded-full px-2.5 py-1 font-medium",
                       calculation.billRateMode === "resource"
-                        ? "bg-emerald-50 text-emerald-700"
-                        : "bg-amber-50 text-amber-700",
+                        ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300"
+                        : "bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
                     )}
                   >
                     Sell {calculation.billRateMode === "resource" ? "live" : "manual"}
@@ -102,37 +103,37 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
                 </div>
               </div>
               <div className="text-right">
-                <p className="text-sm font-semibold text-gray-900">{line.hours.toFixed(1)} h</p>
-                <p className="mt-1 text-xs text-gray-500">{effectiveValues.currency}</p>
+                <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{line.hours.toFixed(1)} h</p>
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{effectiveValues.currency}</p>
               </div>
             </div>
 
             <div className="mt-5 grid gap-3 md:grid-cols-4">
-              <div className="rounded-2xl bg-gray-50 px-4 py-3">
-                <p className="text-xs uppercase tracking-wide text-gray-400">Cost rate</p>
-                <p className="mt-1 text-sm font-medium text-gray-900">{formatMoney(line.costRateCents, line.currency)}</p>
+              <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
+                <p className="text-xs uppercase tracking-wide text-gray-400">Cost rate <InfoTooltip content="Internal hourly cost rate. Can be synced from the live resource or manually overridden." /></p>
+                <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{formatMoney(line.costRateCents, line.currency)}</p>
                 {linkedSnapshot && calculation.costRateMode === "manual" && (
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                     Live snapshot {formatMoney(linkedSnapshot.lcrCents, linkedSnapshot.currency)}
                   </p>
                 )}
               </div>
-              <div className="rounded-2xl bg-gray-50 px-4 py-3">
-                <p className="text-xs uppercase tracking-wide text-gray-400">Sell rate</p>
-                <p className="mt-1 text-sm font-medium text-gray-900">{formatMoney(line.billRateCents, line.currency)}</p>
+              <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
+                <p className="text-xs uppercase tracking-wide text-gray-400">Sell rate <InfoTooltip content="Client-facing hourly rate. Can be synced from the live resource or manually overridden." /></p>
+                <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{formatMoney(line.billRateCents, line.currency)}</p>
                 {linkedSnapshot && calculation.billRateMode === "manual" && (
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                     Live snapshot {formatMoney(linkedSnapshot.ucrCents, linkedSnapshot.currency)}
                   </p>
                 )}
               </div>
-              <div className="rounded-2xl bg-gray-50 px-4 py-3">
-                <p className="text-xs uppercase tracking-wide text-gray-400">Cost total</p>
-                <p className="mt-1 text-sm font-medium text-gray-900">{formatMoney(effectiveValues.costTotalCents, effectiveValues.currency)}</p>
+              <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
+                <p className="text-xs uppercase tracking-wide text-gray-400">Cost total <InfoTooltip content="Line cost total = hours x cost rate. Stored in cents." /></p>
+                <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{formatMoney(effectiveValues.costTotalCents, effectiveValues.currency)}</p>
               </div>
-              <div className="rounded-2xl bg-gray-50 px-4 py-3">
-                <p className="text-xs uppercase tracking-wide text-gray-400">Price total</p>
-                <p className="mt-1 text-sm font-medium text-gray-900">{formatMoney(effectiveValues.priceTotalCents, effectiveValues.currency)}</p>
+              <div className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
+                <p className="text-xs uppercase tracking-wide text-gray-400">Price total <InfoTooltip content="Line price total = hours x sell rate. This is the client-facing revenue for this line." /></p>
+                <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{formatMoney(effectiveValues.priceTotalCents, effectiveValues.currency)}</p>
               </div>
             </div>
 
@@ -143,9 +144,9 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
                   {Object.entries(line.monthlySpread)
                     .sort(([a], [b]) => a.localeCompare(b))
                     .map(([month, hours]) => (
-                      <div key={month} className="rounded-xl bg-gray-50 px-3 py-1.5 text-xs">
-                        <span className="text-gray-500">{month}</span>
-                        <span className="ml-1.5 font-medium text-gray-900">{hours.toFixed(1)} h</span>
+                      <div key={month} className="rounded-xl bg-gray-50 dark:bg-gray-900 px-3 py-1.5 text-xs">
+                        <span className="text-gray-500 dark:text-gray-400">{month}</span>
+                        <span className="ml-1.5 font-medium text-gray-900 dark:text-gray-100">{hours.toFixed(1)} h</span>
                       </div>
                     ))}
                 </div>
@@ -164,17 +165,17 @@ export function StaffingTab({ estimate, canEdit }: { estimate: EstimateWorkspace
         const months = Object.keys(aggregated).sort();
         if (months.length === 0) return null;
         return (
-          <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
-            <p className="mb-3 text-sm font-semibold text-gray-900">Aggregated monthly phasing</p>
+          <div className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
+            <p className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Aggregated monthly phasing <InfoTooltip content="Sum of hours across all demand lines per month, based on the project date range." /></p>
             <div className="flex flex-wrap gap-2">
               {months.map((month) => (
-                <div key={month} className="rounded-xl bg-gray-50 px-3 py-2 text-sm">
-                  <span className="text-gray-500">{month}</span>
-                  <span className="ml-2 font-semibold text-gray-900">{(aggregated[month] ?? 0).toFixed(1)} h</span>
+                <div key={month} className="rounded-xl bg-gray-50 dark:bg-gray-900 px-3 py-2 text-sm">
+                  <span className="text-gray-500 dark:text-gray-400">{month}</span>
+                  <span className="ml-2 font-semibold text-gray-900 dark:text-gray-100">{(aggregated[month] ?? 0).toFixed(1)} h</span>
                 </div>
               ))}
             </div>
-            <div className="mt-3 text-right text-sm font-semibold text-gray-700">
+            <div className="mt-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">
               Total: {Object.values(aggregated).reduce((a, b) => a + b, 0).toFixed(1)} h
             </div>
           </div>
diff --git a/apps/web/src/components/estimates/tabs/VersionsTab.tsx b/apps/web/src/components/estimates/tabs/VersionsTab.tsx
index 46d6f92..6e272f9 100644
--- a/apps/web/src/components/estimates/tabs/VersionsTab.tsx
+++ b/apps/web/src/components/estimates/tabs/VersionsTab.tsx
@@ -8,14 +8,15 @@ import type {
   EstimateVersionView,
   EstimateWorkspaceView,
 } from "~/components/estimates/EstimateWorkspace.types.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatDateLong, formatMoney } from "~/lib/format.js";
 
 const VERSION_STYLES: Record<EstimateVersionStatus, string> = {
-  WORKING: "bg-sky-100 text-sky-700",
-  BASELINE: "bg-violet-100 text-violet-700",
-  SUBMITTED: "bg-amber-100 text-amber-700",
-  APPROVED: "bg-emerald-100 text-emerald-700",
-  SUPERSEDED: "bg-zinc-200 text-zinc-700",
+  WORKING: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
+  BASELINE: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
+  SUBMITTED: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  SUPERSEDED: "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
 
 function formatMetricValue(metric: EstimateMetricView) {
@@ -30,7 +31,7 @@ function formatMetricValue(metric: EstimateMetricView) {
 
 function EmptyState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-3xl border border-dashed border-gray-200 bg-white px-5 py-10 text-center text-sm text-gray-400">
+    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
       {children}
     </div>
   );
@@ -74,20 +75,24 @@ export function VersionsTab({
 
   return (
     <div className="space-y-3">
+      <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+        <span>Versions are immutable snapshots of the estimate for comparison and audit.</span>
+        <InfoTooltip content="Each version captures a full copy of scope, assumptions, demand lines, and metrics. WORKING versions can be edited; SUBMITTED and APPROVED versions are locked." />
+      </div>
       {versions.map((version) => (
-        <div key={version.id} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+        <div key={version.id} className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
           <div className="flex flex-wrap items-start justify-between gap-4">
             <div>
               <div className="flex items-center gap-2">
-                <span className="text-lg font-semibold text-gray-900">v{version.versionNumber}</span>
+                <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">v{version.versionNumber}</span>
                 <span className={clsx("rounded-full px-2.5 py-1 text-xs font-medium", VERSION_STYLES[version.status])}>
                   {version.status}
                 </span>
               </div>
-              <p className="mt-2 text-sm text-gray-600">{version.label ?? "Unlabeled version"}</p>
-              {version.notes && <p className="mt-2 text-sm text-gray-500">{version.notes}</p>}
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{version.label ?? "Unlabeled version"}</p>
+              {version.notes && <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{version.notes}</p>}
             </div>
-            <div className="text-right text-sm text-gray-500">
+            <div className="text-right text-sm text-gray-500 dark:text-gray-400">
               <p>Updated {formatDateLong(version.updatedAt)}</p>
               {version.lockedAt && (
                 <p className="mt-1">Locked {formatDateLong(version.lockedAt)}</p>
@@ -125,7 +130,7 @@ export function VersionsTab({
                   type="button"
                   onClick={() => onCreateRevision(version.id)}
                   disabled={isSubmitting || isApproving || isCreatingRevision || isCreatingPlanningHandoff}
-                  className="rounded-2xl border border-brand-200 bg-white px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50 disabled:cursor-not-allowed disabled:opacity-60"
+                  className="rounded-2xl border border-brand-200 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-brand-700 transition hover:border-brand-300 hover:bg-brand-50 disabled:cursor-not-allowed disabled:opacity-60"
                 >
                   {isCreatingRevision ? "Creating revision..." : "Create working revision"}
                 </button>
@@ -155,7 +160,7 @@ export function VersionsTab({
           )}
 
           {version.status === EstimateVersionStatus.APPROVED && !hasLinkedProject && (
-            <p className="mt-3 text-sm text-amber-700">
+            <p className="mt-3 text-sm text-amber-700 dark:text-amber-300">
               Link this estimate to a project before handing approved demand into planning.
             </p>
           )}
@@ -163,9 +168,9 @@ export function VersionsTab({
           {version.metrics.length > 0 && (
             <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
               {version.metrics.map((metric) => (
-                <div key={metric.id} className="rounded-2xl bg-gray-50 px-4 py-3">
+                <div key={metric.id} className="rounded-2xl bg-gray-50 dark:bg-gray-900 px-4 py-3">
                   <p className="text-xs uppercase tracking-wide text-gray-400">{metric.label}</p>
-                  <p className="mt-1 text-sm font-semibold text-gray-900">{formatMetricValue(metric)}</p>
+                  <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{formatMetricValue(metric)}</p>
                 </div>
               ))}
             </div>
diff --git a/apps/web/src/components/layout/AppShell.tsx b/apps/web/src/components/layout/AppShell.tsx
index e695771..3a76601 100644
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -6,16 +6,20 @@ import Link from "next/link";
 import type { Route } from "next";
 import { usePathname } from "next/navigation";
 import { clsx } from "clsx";
-import { Suspense, useState } from "react";
+import { memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { PreferencesModal } from "./PreferencesModal.js";
 import { ThemeProvider } from "./ThemeProvider.js";
+import { PageTransition } from "./PageTransition.js";
 import { NotificationBell } from "../notifications/NotificationBell.js";
 import { ChatPanel } from "../assistant/ChatPanel.js";
 import { NavProgressBar } from "~/components/ui/NavProgressBar.js";
 
+const SIDEBAR_COLLAPSED_KEY = "planarchy_sidebar_collapsed";
+
 function IconFrame({ children }: { children: ReactNode }) {
   return (
-    <span className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/60 bg-white/80 text-slate-600 shadow-sm dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300">
+    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/60 bg-white/80 text-slate-600 shadow-sm transition-shadow duration-200 hover:shadow-[0_0_12px_rgba(var(--accent-500),0.15)] dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300">
       {children}
     </span>
   );
@@ -51,16 +55,60 @@ function RolesIcon() {
 function SkillsIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.2 6.5 20.2l1-6.2L3 9.6l6.2-.9L12 3z" /></svg>;
 }
+function MarketplaceIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 3h18l-2 9H5L3 3zm0 0l-1-1m6 16a1 1 0 102 0 1 1 0 00-2 0zm10 0a1 1 0 102 0 1 1 0 00-2 0zM5 12h14" /></svg>;
+}
 function ChargeabilityIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M5 17l4-4 3 3 7-8M19 19H5V5" /></svg>;
 }
+function ReportBuilderIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>;
+}
 function GraphIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="6" cy="6" r="2.5" strokeWidth={1.8} /><circle cx="18" cy="6" r="2.5" strokeWidth={1.8} /><circle cx="12" cy="18" r="2.5" strokeWidth={1.8} /><path strokeLinecap="round" strokeWidth={1.8} d="M8.5 7.5l2 7M15.5 7.5l-2 7M8.5 6h7" /></svg>;
 }
+function InsightsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>;
+}
+function NotificationsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>;
+}
+function BroadcastIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>;
+}
 function AdminIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 8a4 4 0 100 8 4 4 0 000-8zm8 4l-2.1.7a7.9 7.9 0 01-.6 1.5l1 2-2.1 2.1-2-1a7.9 7.9 0 01-1.5.6L12 20l-1.7-2.1a7.9 7.9 0 01-1.5-.6l-2 1-2.1-2.1 1-2a7.9 7.9 0 01-.6-1.5L4 12l2.1-1.7a7.9 7.9 0 01.6-1.5l-1-2 2.1-2.1 2 1a7.9 7.9 0 011.5-.6L12 4l1.7 2.1a7.9 7.9 0 011.5.6l2-1 2.1 2.1-1 2a7.9 7.9 0 01.6 1.5L20 12z" /></svg>;
 }
 
+function CollapseIcon({ collapsed }: { collapsed: boolean }) {
+  return (
+    <svg
+      className={clsx("h-4 w-4 transition-transform duration-200", collapsed && "rotate-180")}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+    </svg>
+  );
+}
+
+function HamburgerIcon() {
+  return (
+    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+}
+
 type NavItem = { href: string; label: string; icon: ReactNode; roles: string[] };
 type NavSection = { label: string; collapsed?: boolean; items: NavItem[] };
 
@@ -72,6 +120,7 @@ const navSections: NavSection[] = [
       { href: "/timeline", label: "Timeline", icon: <TimelineIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
       { href: "/allocations", label: "Allocations", icon: <AllocationsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
       { href: "/staffing", label: "Staffing", icon: <StaffingIcon />, roles: ["ADMIN", "MANAGER"] },
+      { href: "/notifications", label: "Notifications", icon: <NotificationsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
     ],
   },
   {
@@ -96,8 +145,11 @@ const navSections: NavSection[] = [
     label: "Analytics",
     items: [
       { href: "/analytics/skills", label: "Skills Analytics", icon: <SkillsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER", "VIEWER"] },
+      { href: "/analytics/skill-marketplace", label: "Skill Marketplace", icon: <MarketplaceIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
       { href: "/reports/chargeability", label: "Chargeability", icon: <ChargeabilityIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
+      { href: "/reports/builder", label: "Report Builder", icon: <ReportBuilderIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
       { href: "/analytics/computation-graph", label: "Computation Graph", icon: <GraphIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
+      { href: "/analytics/insights", label: "AI Insights", icon: <InsightsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
     ],
   },
   {
@@ -132,15 +184,16 @@ const adminNavEntries: AdminEntry[] = [
   },
   { href: "/admin/calculation-rules", label: "Calc. Rules", icon: <AdminIcon /> },
   { href: "/admin/users", label: "Users", icon: <AdminIcon /> },
+  { href: "/admin/system-roles", label: "System Roles", icon: <AdminIcon /> },
   { href: "/admin/settings", label: "Settings", icon: <AdminIcon /> },
   { href: "/admin/skill-import", label: "Skill Import", icon: <AdminIcon /> },
+  { href: "/admin/notifications", label: "Broadcasts", icon: <BroadcastIcon /> },
+  { href: "/admin/webhooks", label: "Webhooks", icon: <AdminIcon /> },
 ];
 
 /**
  * Collect every href registered in the sidebar so that the active-check
  * can determine whether a more-specific sibling matches the current path.
- * Example: when pathname is `/vacations/my`, the item `/vacations` must NOT
- * highlight because `/vacations/my` is a more-specific registered route.
  */
 const ALL_NAV_HREFS: string[] = (() => {
   const hrefs: string[] = [];
@@ -160,17 +213,119 @@ const ALL_NAV_HREFS: string[] = (() => {
 function isNavItemActive(pathname: string, href: string): boolean {
   if (pathname === href) return true;
   if (!pathname.startsWith(href + "/")) return false;
-  // pathname starts with `href/...` — but a more-specific registered route may match.
-  // If another nav href is a longer prefix match, this shorter one should NOT be active.
   const hasMoreSpecificSibling = ALL_NAV_HREFS.some(
     (other) => other !== href && other.length > href.length && pathname.startsWith(other),
   );
   return !hasMoreSpecificSibling;
 }
 
-function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () => void }) {
+/* ------------------------------------------------------------------ */
+/*  Tooltip wrapper — shows label on hover when sidebar is collapsed  */
+/* ------------------------------------------------------------------ */
+
+function NavTooltip({
+  label,
+  show,
+  children,
+}: {
+  label: string;
+  show: boolean;
+  children: ReactNode;
+}) {
+  if (!show) return <>{children}</>;
+  return (
+    <div className="group/tip relative">
+      {children}
+      <div className="pointer-events-none absolute left-full top-1/2 z-50 ml-2 -translate-y-1/2 whitespace-nowrap rounded-lg bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-opacity group-hover/tip:opacity-100 dark:bg-slate-700">
+        {label}
+        <div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-slate-700" />
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Memoized nav item — prevents re-render of inactive items           */
+/* ------------------------------------------------------------------ */
+
+/** Routes that benefit from eager prefetching (loaded while user reads current page). */
+const PREFETCH_ROUTES = new Set(["/dashboard", "/timeline", "/projects", "/resources", "/allocations"]);
+
+const NavItemLink = memo(function NavItemLink({
+  href,
+  label,
+  icon,
+  isActive,
+  collapsed,
+  onClick,
+}: {
+  href: string;
+  label: string;
+  icon: ReactNode;
+  isActive: boolean;
+  collapsed: boolean;
+  onClick?: (() => void) | undefined;
+}) {
+  const linkProps = {
+    ...(onClick ? { onClick } : {}),
+    ...(PREFETCH_ROUTES.has(href) ? { prefetch: true as const } : {}),
+  };
+
+  return (
+    <NavTooltip label={label} show={collapsed}>
+      <Link
+        href={href as Route}
+        {...linkProps}
+        className={clsx(
+          "group relative flex items-center rounded-2xl text-sm font-medium transition-colors",
+          collapsed ? "justify-center px-2 py-2" : "gap-3 px-3 py-2",
+          isActive
+            ? "text-brand-800 dark:text-brand-200"
+            : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
+        )}
+      >
+        {isActive && (
+          <motion.div
+            layoutId="nav-indicator"
+            className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
+            transition={{ type: "spring", stiffness: 350, damping: 30 }}
+          />
+        )}
+        <IconFrame>{icon}</IconFrame>
+        {!collapsed && <span className="relative flex-1">{label}</span>}
+      </Link>
+    </NavTooltip>
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/*  Sidebar component                                                  */
+/* ------------------------------------------------------------------ */
+
+function SidebarContent({
+  userRole,
+  onChatOpen,
+  sidebarCollapsed,
+  onToggleCollapse,
+  onNavClick,
+  onPrefsOpen,
+}: {
+  userRole: string;
+  onChatOpen: () => void;
+  sidebarCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onNavClick?: () => void;
+  onPrefsOpen: () => void;
+}) {
   const pathname = usePathname();
-  const [prefsOpen, setPrefsOpen] = useState(false);
+
+  const activeHrefSet = useMemo(() => {
+    const set = new Set<string>();
+    for (const href of ALL_NAV_HREFS) {
+      if (isNavItemActive(pathname, href)) set.add(href);
+    }
+    return set;
+  }, [pathname]);
 
   const visibleSections = navSections
     .map((section) => ({
@@ -181,18 +336,17 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
   const showAdmin = userRole === "ADMIN";
   const showManagerSection = userRole === "ADMIN" || userRole === "MANAGER";
 
-  // Sections and sub-groups auto-expand when the current route matches an item inside them
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(() => {
     const initial: Record<string, boolean> = {};
     for (const section of visibleSections) {
       if (section.collapsed) {
-        const hasActiveRoute = section.items.some((item) => isNavItemActive(pathname, item.href));
+        const hasActiveRoute = section.items.some((item) => activeHrefSet.has(item.href));
         initial[section.label] = !hasActiveRoute;
       }
     }
     for (const entry of adminNavEntries) {
       if (isSubGroup(entry) && entry.collapsed) {
-        const hasActiveRoute = entry.items.some((item) => isNavItemActive(pathname, item.href));
+        const hasActiveRoute = entry.items.some((item) => activeHrefSet.has(item.href));
         initial[entry.label] = !hasActiveRoute;
       }
     }
@@ -203,32 +357,45 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
     setCollapsedSections((prev) => ({ ...prev, [label]: !prev[label] }));
   };
 
+  const handleLinkClick = () => {
+    onNavClick?.();
+  };
+
   return (
     <>
-      <nav className="w-72 shrink-0 border-r border-white/60 bg-white/80 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/75 flex flex-col">
-        {/* Logo */}
-        <div className="border-b border-gray-200/80 px-6 py-6 dark:border-slate-800">
-          <div className="inline-flex items-center gap-3 rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 px-4 py-3 shadow-sm dark:border-brand-900/50 dark:from-slate-950 dark:to-slate-900">
-            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
-              <DashboardIcon />
-            </div>
-            <div>
+      {/* Logo */}
+      <div className={clsx(
+        "border-b border-gray-200/80 dark:border-slate-800",
+        sidebarCollapsed ? "px-3 py-4" : "px-6 py-6",
+      )}>
+        <div className={clsx(
+          "inline-flex items-center rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 shadow-sm dark:border-brand-900/50 dark:from-slate-950 dark:to-slate-900",
+          sidebarCollapsed ? "p-2" : "gap-3 px-4 py-3",
+        )}>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
+            <DashboardIcon />
+          </div>
+          {!sidebarCollapsed && (
+            <div className="overflow-hidden">
               <h1 className="font-display text-xl font-semibold text-gray-900 dark:text-gray-50">
                 Pl<span className="text-brand-600">anarchy</span>
               </h1>
               <p className="text-xs uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Resource Planning</p>
             </div>
-          </div>
+          )}
         </div>
+      </div>
 
-        {/* Nav links */}
-        <div className="flex-1 overflow-y-auto px-4 py-5">
-          {visibleSections.map((section, idx) => {
-            const isCollapsed = collapsedSections[section.label] ?? false;
-            const isCollapsible = section.collapsed === true;
+      {/* Nav links */}
+      <div className={clsx("flex-1 overflow-y-auto py-5", sidebarCollapsed ? "px-2" : "px-4")}>
+        {visibleSections.map((section, idx) => {
+          const isCollapsed = collapsedSections[section.label] ?? false;
+          const isCollapsible = section.collapsed === true;
 
-            return (
-              <div key={section.label} className={idx > 0 ? "mt-2" : ""}>
+          return (
+            <div key={section.label} className={idx > 0 ? "mt-2" : ""}>
+              {/* Section header — hidden when sidebar collapsed */}
+              {!sidebarCollapsed && (
                 <button
                   type="button"
                   onClick={isCollapsible ? () => toggleSection(section.label) : undefined}
@@ -254,125 +421,198 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
                     </svg>
                   )}
                 </button>
-                {!isCollapsed && (
-                  <div className="space-y-0.5">
-                    {section.items.map((item) => (
-                      <Link
-                        key={item.href}
-                        href={item.href as Route}
-                        className={clsx(
-                          "group flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-all",
-                          isNavItemActive(pathname, item.href)
-                            ? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40"
-                            : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
-                        )}
-                      >
-                        <IconFrame>{item.icon}</IconFrame>
-                        <span className="flex-1">{item.label}</span>
-                      </Link>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+              )}
 
-          {showManagerSection && showAdmin && (
-            <div className="mt-2">
+              {/* Collapsed sidebar: show a thin divider between sections instead of header */}
+              {sidebarCollapsed && idx > 0 && (
+                <div className="mx-3 my-2 border-t border-gray-200/60 dark:border-slate-800" />
+              )}
+
+              <AnimatePresence initial={false}>
+                {(!isCollapsed || sidebarCollapsed) && (
+                  <motion.div
+                    initial={sidebarCollapsed ? false : { height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2, ease: "easeInOut" }}
+                    className="overflow-hidden"
+                  >
+                    <div className="space-y-0.5">
+                      {section.items.map((item) => (
+                        <NavItemLink
+                          key={item.href}
+                          href={item.href}
+                          label={item.label}
+                          icon={item.icon}
+                          isActive={activeHrefSet.has(item.href)}
+                          collapsed={sidebarCollapsed}
+                          onClick={handleLinkClick}
+                        />
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          );
+        })}
+
+        {showManagerSection && showAdmin && (
+          <div className="mt-2">
+            {!sidebarCollapsed && (
               <div className="px-3 pb-1.5 pt-3">
                 <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
                   Admin
                 </span>
               </div>
-              <div className="space-y-0.5">
-                {adminNavEntries.map((entry) => {
-                  if (isSubGroup(entry)) {
-                    const subCollapsed = collapsedSections[entry.label] ?? false;
-                    return (
-                      <div key={entry.label}>
-                        <button
-                          type="button"
-                          onClick={() => toggleSection(entry.label)}
-                          className="flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:bg-gray-100/90 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-slate-900 dark:hover:text-gray-200"
-                        >
-                          <IconFrame><AdminIcon /></IconFrame>
-                          <span className="flex-1 text-left">{entry.label}</span>
-                          <svg
-                            className={clsx(
-                              "h-3 w-3 transition-transform",
-                              subCollapsed ? "-rotate-90" : "rotate-0",
-                            )}
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                          </svg>
-                        </button>
-                        {!subCollapsed && (
-                          <div className="ml-4 space-y-0.5 border-l border-gray-200 pl-2 dark:border-slate-800">
-                            {entry.items.map((item) => (
-                              <Link
-                                key={item.href}
-                                href={item.href as Route}
-                                className={clsx(
-                                  "group flex items-center gap-3 rounded-2xl px-3 py-1.5 text-sm font-medium transition-all",
-                                  isNavItemActive(pathname, item.href)
-                                    ? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40"
-                                    : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
-                                )}
-                              >
-                                <span className="flex-1">{item.label}</span>
-                              </Link>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  }
-                  return (
-                    <Link
-                      key={entry.href}
-                      href={entry.href as Route}
-                      className={clsx(
-                        "group flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-all",
-                        isNavItemActive(pathname, entry.href)
-                          ? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40"
-                          : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
-                      )}
-                    >
-                      <IconFrame>{entry.icon}</IconFrame>
-                      <span className="flex-1">{entry.label}</span>
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-        </div>
+            )}
+            {sidebarCollapsed && (
+              <div className="mx-3 my-2 border-t border-gray-200/60 dark:border-slate-800" />
+            )}
+            <div className="space-y-0.5">
+              {adminNavEntries.map((entry) => {
+                if (isSubGroup(entry)) {
+                  const subCollapsed = collapsedSections[entry.label] ?? false;
 
-        {/* Bottom actions */}
-        <div className="space-y-1 border-t border-gray-200/80 p-4 dark:border-slate-800">
-          <div className="flex items-center gap-2 px-3 py-2">
-            <NotificationBell />
-            <span className="text-xs uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">Notifications</span>
+                  if (sidebarCollapsed) {
+                    // In collapsed mode, show sub-group items directly as icon-only
+                    return entry.items.map((item) => (
+                      <NavItemLink
+                        key={item.href}
+                        href={item.href}
+                        label={item.label}
+                        icon={item.icon}
+                        isActive={activeHrefSet.has(item.href)}
+                        collapsed
+                        onClick={handleLinkClick}
+                      />
+                    ));
+                  }
+
+                  return (
+                    <div key={entry.label}>
+                      <button
+                        type="button"
+                        onClick={() => toggleSection(entry.label)}
+                        className="flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:bg-gray-100/90 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-slate-900 dark:hover:text-gray-200"
+                      >
+                        <IconFrame><AdminIcon /></IconFrame>
+                        <span className="flex-1 text-left">{entry.label}</span>
+                        <svg
+                          className={clsx(
+                            "h-3 w-3 transition-transform",
+                            subCollapsed ? "-rotate-90" : "rotate-0",
+                          )}
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                      <AnimatePresence initial={false}>
+                        {!subCollapsed && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: "auto", opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.2, ease: "easeInOut" }}
+                            className="overflow-hidden"
+                          >
+                            <div className="ml-4 space-y-0.5 border-l border-gray-200 pl-2 dark:border-slate-800">
+                              {entry.items.map((item) => {
+                                const isActive = activeHrefSet.has(item.href);
+                                return (
+                                  <Link
+                                    key={item.href}
+                                    href={item.href as Route}
+                                    onClick={handleLinkClick}
+                                    className={clsx(
+                                      "group relative flex items-center gap-3 rounded-2xl px-3 py-1.5 text-sm font-medium transition-colors",
+                                      isActive
+                                        ? "text-brand-800 dark:text-brand-200"
+                                        : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
+                                    )}
+                                  >
+                                    {isActive && (
+                                      <motion.div
+                                        layoutId="nav-indicator"
+                                        className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
+                                        transition={{ type: "spring", stiffness: 350, damping: 30 }}
+                                      />
+                                    )}
+                                    <span className="relative flex-1">{item.label}</span>
+                                  </Link>
+                                );
+                              })}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  );
+                }
+
+                return (
+                  <NavItemLink
+                    key={entry.href}
+                    href={entry.href}
+                    label={entry.label}
+                    icon={entry.icon}
+                    isActive={activeHrefSet.has(entry.href)}
+                    collapsed={sidebarCollapsed}
+                    onClick={handleLinkClick}
+                  />
+                );
+              })}
+            </div>
           </div>
+        )}
+      </div>
+
+      {/* Bottom actions */}
+      <div className={clsx(
+        "space-y-1 border-t border-gray-200/80 dark:border-slate-800",
+        sidebarCollapsed ? "p-2" : "p-4",
+      )}>
+        <NavTooltip label="Notifications" show={sidebarCollapsed}>
+          <div className={clsx(
+            "flex items-center",
+            sidebarCollapsed ? "justify-center px-2 py-2" : "gap-2 px-3 py-2",
+          )}>
+            <NotificationBell />
+            {!sidebarCollapsed && (
+              <span className="text-xs uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">Notifications</span>
+            )}
+          </div>
+        </NavTooltip>
+
+        <NavTooltip label="HartBOT" show={sidebarCollapsed}>
           <button
             type="button"
             onClick={onChatOpen}
-            className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900"
+            className={clsx(
+              "flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
+              sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
+            )}
           >
             <IconFrame>
               <svg className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
               </svg>
             </IconFrame>
-            <span>HartBOT</span>
+            {!sidebarCollapsed && <span>HartBOT</span>}
           </button>
+        </NavTooltip>
+
+        <NavTooltip label="Preferences" show={sidebarCollapsed}>
           <button
             type="button"
-            onClick={() => setPrefsOpen(true)}
-            className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900"
+            onClick={onPrefsOpen}
+            className={clsx(
+              "flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
+              sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
+            )}
           >
             <IconFrame>
               <svg className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -380,30 +620,198 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
             </IconFrame>
-            <span>Preferences</span>
+            {!sidebarCollapsed && <span>Preferences</span>}
           </button>
+        </NavTooltip>
+
+        <NavTooltip label="Sign out" show={sidebarCollapsed}>
           <button
             type="button"
             onClick={() => void signOut({ callbackUrl: "/auth/signin" })}
-            className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900"
+            className={clsx(
+              "flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
+              sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
+            )}
           >
             <IconFrame>
               <svg className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
               </svg>
             </IconFrame>
-            <span>Sign out</span>
+            {!sidebarCollapsed && <span>Sign out</span>}
           </button>
-        </div>
-      </nav>
+        </NavTooltip>
+
+        {/* Collapse toggle */}
+        <NavTooltip label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} show={sidebarCollapsed}>
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            className={clsx(
+              "flex w-full items-center rounded-2xl text-sm text-gray-400 transition-colors hover:bg-gray-100/90 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-slate-900 dark:hover:text-gray-300",
+              sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
+            )}
+          >
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+              <CollapseIcon collapsed={sidebarCollapsed} />
+            </span>
+            {!sidebarCollapsed && <span>Collapse</span>}
+          </button>
+        </NavTooltip>
+      </div>
 
-      {prefsOpen && <PreferencesModal onClose={() => setPrefsOpen(false)} />}
     </>
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  Desktop sidebar wrapper                                            */
+/* ------------------------------------------------------------------ */
+
+function DesktopSidebar({
+  userRole,
+  onChatOpen,
+  sidebarCollapsed,
+  onToggleCollapse,
+  onPrefsOpen,
+}: {
+  userRole: string;
+  onChatOpen: () => void;
+  sidebarCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onPrefsOpen: () => void;
+}) {
+  return (
+    <nav
+      className={clsx(
+        "hidden shrink-0 border-r border-gray-200/60 bg-white/60 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-2xl backdrop-saturate-150 dark:border-slate-800 dark:bg-slate-950/75 dark:shadow-none lg:flex lg:flex-col",
+        "transition-[width] duration-200 ease-out overflow-hidden",
+        sidebarCollapsed ? "w-[72px]" : "w-72",
+      )}
+    >
+      <SidebarContent
+        userRole={userRole}
+        onChatOpen={onChatOpen}
+        sidebarCollapsed={sidebarCollapsed}
+        onToggleCollapse={onToggleCollapse}
+        onPrefsOpen={onPrefsOpen}
+      />
+    </nav>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mobile sidebar overlay                                             */
+/* ------------------------------------------------------------------ */
+
+function MobileSidebar({
+  open,
+  onClose,
+  userRole,
+  onChatOpen,
+  onPrefsOpen,
+}: {
+  open: boolean;
+  onClose: () => void;
+  userRole: string;
+  onChatOpen: () => void;
+  onPrefsOpen: () => void;
+}) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden"
+            onClick={onClose}
+          />
+          {/* Slide-in sidebar */}
+          <motion.nav
+            initial={{ x: -288 }}
+            animate={{ x: 0 }}
+            exit={{ x: -288 }}
+            transition={{ type: "spring", stiffness: 400, damping: 35 }}
+            className="fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200/60 bg-white/95 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 dark:border-slate-800 dark:bg-slate-950/95 lg:hidden"
+          >
+            {/* Close button */}
+            <button
+              type="button"
+              onClick={onClose}
+              className="absolute right-3 top-5 z-10 flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-slate-800 dark:hover:text-gray-300"
+            >
+              <CloseIcon />
+            </button>
+
+            <SidebarContent
+              userRole={userRole}
+              onChatOpen={() => {
+                onChatOpen();
+                onClose();
+              }}
+              sidebarCollapsed={false}
+              onToggleCollapse={() => {}}
+              onNavClick={onClose}
+              onPrefsOpen={() => {
+                onPrefsOpen();
+                onClose();
+              }}
+            />
+          </motion.nav>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  AppShell (main export)                                             */
+/* ------------------------------------------------------------------ */
+
 export function AppShell({ children, userRole = "USER" }: { children: React.ReactNode; userRole?: string }) {
   const [chatOpen, setChatOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [prefsOpen, setPrefsOpen] = useState(false);
+  const pathname = usePathname();
+  const contentRef = useRef<HTMLElement>(null);
+
+  // Read collapsed state from localStorage on mount (avoid SSR hydration mismatch)
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+      if (stored === "true") setSidebarCollapsed(true);
+    } catch {
+      // localStorage unavailable — ignore
+    }
+  }, []);
+
+  // Persist collapsed state
+  const handleToggleCollapse = useCallback(() => {
+    setSidebarCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next));
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  }, []);
+
+  // Scroll to top on route change
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [pathname]);
+
+  // Close mobile sidebar on route change
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
 
   return (
     <ThemeProvider>
@@ -411,11 +819,44 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
         <NavProgressBar />
       </Suspense>
       <div className="flex h-screen bg-transparent">
-        <Sidebar userRole={userRole} onChatOpen={() => setChatOpen(true)} />
-        <main className="flex-1 overflow-auto bg-transparent">{children}</main>
+        {/* Desktop sidebar */}
+        <DesktopSidebar
+          userRole={userRole}
+          onChatOpen={() => setChatOpen(true)}
+          sidebarCollapsed={sidebarCollapsed}
+          onToggleCollapse={handleToggleCollapse}
+          onPrefsOpen={() => setPrefsOpen(true)}
+        />
+
+        {/* Mobile sidebar overlay */}
+        <MobileSidebar
+          open={mobileOpen}
+          onClose={() => setMobileOpen(false)}
+          userRole={userRole}
+          onChatOpen={() => setChatOpen(true)}
+          onPrefsOpen={() => setPrefsOpen(true)}
+        />
+
+        {/* Main content area */}
+        <main ref={contentRef} className="flex-1 overflow-auto bg-transparent">
+          {/* Mobile hamburger */}
+          <div className="sticky top-0 z-20 flex items-center border-b border-gray-200/60 bg-white/80 px-4 py-2 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-950/80 lg:hidden">
+            <button
+              type="button"
+              onClick={() => setMobileOpen(true)}
+              className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-800"
+            >
+              <HamburgerIcon />
+            </button>
+            <span className="ml-3 font-display text-sm font-semibold text-gray-900 dark:text-gray-50">
+              Pl<span className="text-brand-600">anarchy</span>
+            </span>
+          </div>
+          <PageTransition>{children}</PageTransition>
+        </main>
         {chatOpen && <ChatPanel onClose={() => setChatOpen(false)} />}
       </div>
-      {/* Floating chat FAB — always visible when panel is closed */}
+      {/* Floating chat FAB */}
       {!chatOpen && (
         <button
           type="button"
@@ -428,6 +869,7 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
           </svg>
         </button>
       )}
+      {prefsOpen && <PreferencesModal onClose={() => setPrefsOpen(false)} />}
     </ThemeProvider>
   );
 }
diff --git a/apps/web/src/components/layout/InstallPrompt.tsx b/apps/web/src/components/layout/InstallPrompt.tsx
new file mode 100644
index 0000000..251124d
--- /dev/null
+++ b/apps/web/src/components/layout/InstallPrompt.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const DISMISS_KEY = "planarchy_pwa_dismiss";
+const DISMISS_DURATION_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
+}
+
+export function InstallPrompt() {
+  const [visible, setVisible] = useState(false);
+  const deferredPromptRef = useRef<BeforeInstallPromptEvent | null>(null);
+
+  useEffect(() => {
+    // Check if dismissed recently
+    try {
+      const dismissed = localStorage.getItem(DISMISS_KEY);
+      if (dismissed) {
+        const timestamp = parseInt(dismissed, 10);
+        if (Date.now() - timestamp < DISMISS_DURATION_MS) return;
+      }
+    } catch {
+      // localStorage unavailable
+    }
+
+    // Check if already installed (standalone mode)
+    if (window.matchMedia("(display-mode: standalone)").matches) return;
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      deferredPromptRef.current = e as BeforeInstallPromptEvent;
+      setVisible(true);
+    };
+
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);
+
+  const handleInstall = useCallback(async () => {
+    const prompt = deferredPromptRef.current;
+    if (!prompt) return;
+
+    await prompt.prompt();
+    const { outcome } = await prompt.userChoice;
+
+    if (outcome === "accepted") {
+      setVisible(false);
+    }
+    deferredPromptRef.current = null;
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    setVisible(false);
+    deferredPromptRef.current = null;
+    try {
+      localStorage.setItem(DISMISS_KEY, String(Date.now()));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed bottom-20 left-4 right-4 z-50 mx-auto max-w-md animate-in slide-in-from-bottom-4 duration-300 sm:left-auto sm:right-6">
+      <div className="flex items-center gap-3 rounded-2xl border border-brand-200/60 bg-white/95 px-4 py-3 shadow-lg backdrop-blur-xl dark:border-brand-900/40 dark:bg-slate-900/95">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-600 text-white shadow-md shadow-brand-600/25">
+          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
+            Install Planarchy
+          </p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Add to home screen for quick access
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-2">
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-slate-800"
+          >
+            Later
+          </button>
+          <button
+            type="button"
+            onClick={() => void handleInstall()}
+            className="rounded-lg bg-brand-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-brand-700"
+          >
+            Install
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/layout/PageTransition.tsx b/apps/web/src/components/layout/PageTransition.tsx
new file mode 100644
index 0000000..6d343f9
--- /dev/null
+++ b/apps/web/src/components/layout/PageTransition.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+interface PageTransitionProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function PageTransition({ children, className }: PageTransitionProps) {
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      key={pathname}
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, ease: "easeOut" }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/apps/web/src/components/layout/PreferencesModal.tsx b/apps/web/src/components/layout/PreferencesModal.tsx
index 5835072..8e97845 100644
--- a/apps/web/src/components/layout/PreferencesModal.tsx
+++ b/apps/web/src/components/layout/PreferencesModal.tsx
@@ -3,6 +3,7 @@
 import { useTheme } from "~/hooks/useTheme.js";
 import type { AccentColor, ThemeMode } from "~/hooks/useTheme.js";
 import { useAppPreferences, type HeatmapColorScheme } from "~/hooks/useAppPreferences.js";
+import { motion } from "framer-motion";
 import { clsx } from "clsx";
 
 interface PreferencesModalProps {
@@ -20,14 +21,19 @@ const ACCENT_OPTIONS: { value: AccentColor; label: string; swatch: string }[] =
 
 export function PreferencesModal({ onClose }: PreferencesModalProps) {
   const { prefs, setMode, setAccent } = useTheme();
-  const { prefs: appPrefs, setHideCompletedProjects, setTimelineDisplayMode, setHeatmapColorScheme, setShowDemandProjects } = useAppPreferences();
+  const { prefs: appPrefs, setHideCompletedProjects, setTimelineDisplayMode, setHeatmapColorScheme, setShowDemandProjects, setBlinkOverbookedDays } = useAppPreferences();
 
   return (
     <div
       className="fixed inset-0 bg-black/50 z-50 flex items-end sm:items-center justify-center p-4"
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 8 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm"
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
           <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Preferences</h2>
@@ -219,6 +225,34 @@ export function PreferencesModal({ onClose }: PreferencesModalProps) {
               </div>
             </div>
 
+            {/* Overbooked blink */}
+            <label className="flex items-start gap-3 cursor-pointer mb-3">
+              <div className="relative mt-0.5 flex-shrink-0">
+                <input
+                  type="checkbox"
+                  checked={appPrefs.blinkOverbookedDays}
+                  onChange={(e) => setBlinkOverbookedDays(e.target.checked)}
+                  className="sr-only peer"
+                />
+                <div className={clsx(
+                  "w-9 h-5 rounded-full transition-colors",
+                  appPrefs.blinkOverbookedDays ? "bg-brand-600" : "bg-gray-200 dark:bg-gray-700",
+                )} />
+                <div className={clsx(
+                  "absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform",
+                  appPrefs.blinkOverbookedDays ? "translate-x-4" : "translate-x-0",
+                )} />
+              </div>
+              <div>
+                <span className="text-sm text-gray-800 dark:text-gray-200 font-medium leading-tight block">
+                  Blink overbooked days
+                </span>
+                <span className="text-xs text-gray-400 dark:text-gray-500">
+                  Highlight days where a resource exceeds 8h with a pulsing animation.
+                </span>
+              </div>
+            </label>
+
             <label className="flex items-start gap-3 cursor-pointer">
               <div className="relative mt-0.5 flex-shrink-0">
                 <input
@@ -279,7 +313,7 @@ export function PreferencesModal({ onClose }: PreferencesModalProps) {
             Changes apply instantly and are saved in your browser.
           </p>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }
diff --git a/apps/web/src/components/layout/ServiceWorkerRegistration.tsx b/apps/web/src/components/layout/ServiceWorkerRegistration.tsx
new file mode 100644
index 0000000..c97744c
--- /dev/null
+++ b/apps/web/src/components/layout/ServiceWorkerRegistration.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      !("serviceWorker" in navigator) ||
+      process.env.NODE_ENV === "development"
+    ) {
+      return;
+    }
+
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((registration) => {
+        // Check for updates every 60 minutes
+        setInterval(() => {
+          registration.update().catch(() => {
+            // Silent fail on update check
+          });
+        }, 60 * 60 * 1000);
+      })
+      .catch(() => {
+        // Service worker registration failed — non-critical
+      });
+  }, []);
+
+  return null;
+}
diff --git a/apps/web/src/components/notifications/BroadcastManagementClient.tsx b/apps/web/src/components/notifications/BroadcastManagementClient.tsx
new file mode 100644
index 0000000..ac098a9
--- /dev/null
+++ b/apps/web/src/components/notifications/BroadcastManagementClient.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import { BroadcastModal } from "./BroadcastModal.js";
+import { CreateTaskModal } from "./CreateTaskModal.js";
+
+function formatDate(date: string | Date): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+const TARGET_LABELS: Record<string, string> = {
+  all: "All Users",
+  role: "By Role",
+  project: "By Project",
+  orgUnit: "By Org Unit",
+  user: "Specific User",
+};
+
+export function BroadcastManagementClient() {
+  const [showModal, setShowModal] = useState(false);
+  const [showTaskModal, setShowTaskModal] = useState(false);
+
+  const { data: broadcasts = [], isLoading } = trpc.notification.listBroadcasts.useQuery(
+    { limit: 50 },
+    { staleTime: 30_000 },
+  );
+
+  const utils = trpc.useUtils();
+
+  function handleSuccess() {
+    void utils.notification.listBroadcasts.invalidate();
+  }
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Broadcast Management</h1>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setShowTaskModal(true)}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-brand-600 px-4 py-2 text-sm font-medium text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+            </svg>
+            Create Task
+          </button>
+          <button
+            type="button"
+            onClick={() => setShowModal(true)}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 transition-colors"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+            Send Broadcast
+          </button>
+        </div>
+      </div>
+
+      {/* Loading */}
+      {isLoading && (
+        <div className="space-y-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
+              <div className="h-4 w-1/2 shimmer-skeleton rounded" />
+              <div className="mt-2 h-3 w-1/3 shimmer-skeleton rounded" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Table */}
+      {!isLoading && (
+        <>
+          {broadcasts.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-600 py-12 text-center text-sm text-gray-400 dark:text-gray-500">
+              No broadcasts sent yet.
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-gray-800">
+                  <tr>
+                    <th scope="col" className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Title
+                    </th>
+                    <th scope="col" className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Target
+                    </th>
+                    <th scope="col" className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Recipients
+                    </th>
+                    <th scope="col" className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Sender
+                    </th>
+                    <th scope="col" className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Date
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900">
+                  {broadcasts.map((b) => (
+                    <tr key={b.id} className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                      <td className="px-4 py-3">
+                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[200px]">
+                          {b.title}
+                        </p>
+                        {b.body && (
+                          <p className="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[200px]">
+                            {b.body}
+                          </p>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+                        {TARGET_LABELS[b.targetType] ?? b.targetType}
+                        {b.targetValue && (
+                          <span className="ml-1 text-gray-400 dark:text-gray-500">({b.targetValue})</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-right text-gray-600 dark:text-gray-300">
+                        {b.recipientCount ?? 0}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+                        {b.sender?.name ?? b.sender?.email ?? "-"}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                        {b.sentAt ? formatDate(b.sentAt) : "Scheduled"}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Broadcast Modal */}
+      {showModal && (
+        <BroadcastModal
+          onClose={() => setShowModal(false)}
+          onSuccess={handleSuccess}
+        />
+      )}
+
+      {/* Create Task Modal */}
+      {showTaskModal && (
+        <CreateTaskModal
+          onClose={() => setShowTaskModal(false)}
+          onSuccess={handleSuccess}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/notifications/BroadcastModal.tsx b/apps/web/src/components/notifications/BroadcastModal.tsx
new file mode 100644
index 0000000..bc985b0
--- /dev/null
+++ b/apps/web/src/components/notifications/BroadcastModal.tsx
@@ -0,0 +1,328 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { trpc } from "~/lib/trpc/client.js";
+
+const TARGET_TYPES = [
+  { value: "all", label: "All Users" },
+  { value: "role", label: "By Role" },
+  { value: "project", label: "By Project" },
+  { value: "orgUnit", label: "By Org Unit" },
+] as const;
+
+const ROLES = ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] as const;
+
+const PRIORITY_OPTIONS = [
+  { value: "LOW", label: "Low" },
+  { value: "NORMAL", label: "Normal" },
+  { value: "HIGH", label: "High" },
+  { value: "URGENT", label: "Urgent" },
+] as const;
+
+const CHANNEL_OPTIONS = [
+  { value: "in_app", label: "In-App" },
+  { value: "email", label: "Email" },
+  { value: "both", label: "Both" },
+] as const;
+
+interface BroadcastModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function BroadcastModal({ onClose, onSuccess }: BroadcastModalProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [targetType, setTargetType] = useState<string>("all");
+  const [targetValue, setTargetValue] = useState("");
+  const [priority, setPriority] = useState("NORMAL");
+  const [channel, setChannel] = useState("in_app");
+  const [link, setLink] = useState("");
+  const [serverError, setServerError] = useState<string | null>(null);
+  const [result, setResult] = useState<{ recipientCount: number } | null>(null);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, true);
+
+  const utils = trpc.useUtils();
+
+  const createMutation = trpc.notification.createBroadcast.useMutation({
+    onSuccess: async (data) => {
+      await utils.notification.listBroadcasts.invalidate();
+      const count = (data as { recipientCount?: number }).recipientCount ?? 0;
+      setResult({ recipientCount: count });
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const isPending = createMutation.isPending;
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setServerError(null);
+
+    if (!title.trim()) {
+      setServerError("Title is required.");
+      return;
+    }
+
+    createMutation.mutate({
+      title: title.trim(),
+      ...(body.trim() ? { body: body.trim() } : {}),
+      targetType: targetType as "all" | "role" | "project" | "orgUnit" | "user",
+      ...(targetType !== "all" && targetValue.trim() ? { targetValue: targetValue.trim() } : {}),
+      priority: priority as "LOW" | "NORMAL" | "HIGH" | "URGENT",
+      channel: channel as "in_app" | "email" | "both",
+      ...(link.trim() ? { link: link.trim() } : {}),
+    });
+  }
+
+  const inputClass =
+    "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
+  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
+
+  // After successful send, show result
+  if (result) {
+    return (
+      <div
+        className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) { onSuccess(); onClose(); }
+        }}
+      >
+        <div
+          ref={panelRef}
+          className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
+          onKeyDown={(e) => { if (e.key === "Escape") { onSuccess(); onClose(); } }}
+        >
+          <div className="px-6 py-8 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+              <svg className="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Broadcast Sent</h3>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              Sent to {result.recipientCount} recipient{result.recipientCount !== 1 ? "s" : ""}
+            </p>
+            <button
+              type="button"
+              onClick={() => { onSuccess(); onClose(); }}
+              className="mt-6 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
+        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Send Broadcast</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors text-xl leading-none"
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
+          {/* Title */}
+          <div>
+            <label htmlFor="bc-title" className={labelClass}>
+              Title <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="bc-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              maxLength={200}
+              className={inputClass}
+              required
+              placeholder="Broadcast title..."
+            />
+          </div>
+
+          {/* Body */}
+          <div>
+            <label htmlFor="bc-body" className={labelClass}>
+              Message (optional)
+            </label>
+            <textarea
+              id="bc-body"
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              rows={3}
+              maxLength={2000}
+              className={`${inputClass} resize-none`}
+              placeholder="Message body..."
+            />
+          </div>
+
+          {/* Target type */}
+          <div>
+            <label htmlFor="bc-target" className={labelClass}>
+              Target Audience
+            </label>
+            <select
+              id="bc-target"
+              value={targetType}
+              onChange={(e) => { setTargetType(e.target.value); setTargetValue(""); }}
+              className={inputClass}
+            >
+              {TARGET_TYPES.map((t) => (
+                <option key={t.value} value={t.value}>{t.label}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Target value selector */}
+          {targetType === "role" && (
+            <div>
+              <label htmlFor="bc-role" className={labelClass}>
+                Role
+              </label>
+              <select
+                id="bc-role"
+                value={targetValue}
+                onChange={(e) => setTargetValue(e.target.value)}
+                className={inputClass}
+              >
+                <option value="">Select a role...</option>
+                {ROLES.map((r) => (
+                  <option key={r} value={r}>{r}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {targetType === "project" && (
+            <div>
+              <label htmlFor="bc-project" className={labelClass}>
+                Project ID
+              </label>
+              <input
+                id="bc-project"
+                type="text"
+                value={targetValue}
+                onChange={(e) => setTargetValue(e.target.value)}
+                className={inputClass}
+                placeholder="Project ID..."
+              />
+            </div>
+          )}
+
+          {targetType === "orgUnit" && (
+            <div>
+              <label htmlFor="bc-orgunit" className={labelClass}>
+                Org Unit ID
+              </label>
+              <input
+                id="bc-orgunit"
+                type="text"
+                value={targetValue}
+                onChange={(e) => setTargetValue(e.target.value)}
+                className={inputClass}
+                placeholder="Org Unit ID..."
+              />
+            </div>
+          )}
+
+          {/* Priority + Channel */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="bc-priority" className={labelClass}>
+                Priority
+              </label>
+              <select
+                id="bc-priority"
+                value={priority}
+                onChange={(e) => setPriority(e.target.value)}
+                className={inputClass}
+              >
+                {PRIORITY_OPTIONS.map((p) => (
+                  <option key={p.value} value={p.value}>{p.label}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label htmlFor="bc-channel" className={labelClass}>
+                Channel
+              </label>
+              <select
+                id="bc-channel"
+                value={channel}
+                onChange={(e) => setChannel(e.target.value)}
+                className={inputClass}
+              >
+                {CHANNEL_OPTIONS.map((c) => (
+                  <option key={c.value} value={c.value}>{c.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Link */}
+          <div>
+            <label htmlFor="bc-link" className={labelClass}>
+              Link (optional)
+            </label>
+            <input
+              id="bc-link"
+              type="text"
+              value={link}
+              onChange={(e) => setLink(e.target.value)}
+              className={inputClass}
+              placeholder="/some/page or https://..."
+            />
+          </div>
+
+          {/* Server error */}
+          {serverError && (
+            <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+              {serverError}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isPending}
+              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
+            >
+              {isPending ? "Sending..." : "Send Broadcast"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/notifications/CreateTaskModal.tsx b/apps/web/src/components/notifications/CreateTaskModal.tsx
new file mode 100644
index 0000000..cc4153e
--- /dev/null
+++ b/apps/web/src/components/notifications/CreateTaskModal.tsx
@@ -0,0 +1,510 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { trpc } from "~/lib/trpc/client.js";
+import { DateInput } from "~/components/ui/DateInput.js";
+
+type Mode = "single" | "group";
+
+const TARGET_TYPES = [
+  { value: "all", label: "All Users" },
+  { value: "role", label: "By Role" },
+  { value: "project", label: "By Project" },
+  { value: "orgUnit", label: "By Org Unit" },
+] as const;
+
+const ROLES = ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] as const;
+
+const PRIORITY_OPTIONS = [
+  { value: "LOW", label: "Low" },
+  { value: "NORMAL", label: "Normal" },
+  { value: "HIGH", label: "High" },
+  { value: "URGENT", label: "Urgent" },
+] as const;
+
+const CHANNEL_OPTIONS = [
+  { value: "in_app", label: "In-App" },
+  { value: "email", label: "Email" },
+  { value: "both", label: "Both" },
+] as const;
+
+interface CreateTaskModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function CreateTaskModal({ onClose, onSuccess }: CreateTaskModalProps) {
+  const [mode, setMode] = useState<Mode>("single");
+  const [userId, setUserId] = useState("");
+  const [userSearch, setUserSearch] = useState("");
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [priority, setPriority] = useState("NORMAL");
+  const [dueDate, setDueDate] = useState("");
+  const [dueTime, setDueTime] = useState("09:00");
+  const [channel, setChannel] = useState("in_app");
+  const [link, setLink] = useState("");
+  const [targetType, setTargetType] = useState<string>("all");
+  const [targetValue, setTargetValue] = useState("");
+  const [serverError, setServerError] = useState<string | null>(null);
+  const [result, setResult] = useState<{ recipientCount?: number; taskId?: string } | null>(null);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, true);
+
+  const utils = trpc.useUtils();
+
+  const { data: users = [] } = trpc.user.listAssignable.useQuery(undefined, {
+    staleTime: 60_000,
+  });
+
+  const filteredUsers = userSearch.trim()
+    ? users.filter(
+        (u) =>
+          (u.name ?? "").toLowerCase().includes(userSearch.toLowerCase()) ||
+          u.email.toLowerCase().includes(userSearch.toLowerCase()),
+      )
+    : users;
+
+  const createTaskMutation = trpc.notification.createTask.useMutation({
+    onSuccess: async (data) => {
+      await utils.notification.listTasks.invalidate();
+      await utils.notification.list.invalidate();
+      await utils.notification.taskCounts.invalidate();
+      await utils.notification.unreadCount.invalidate();
+      const id = (data as { id?: string }).id;
+      setResult(id !== undefined ? { taskId: id } : {});
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const createBroadcastMutation = trpc.notification.createBroadcast.useMutation({
+    onSuccess: async (data) => {
+      await utils.notification.listBroadcasts.invalidate();
+      await utils.notification.list.invalidate();
+      await utils.notification.taskCounts.invalidate();
+      await utils.notification.unreadCount.invalidate();
+      const count = (data as { recipientCount?: number }).recipientCount ?? 0;
+      setResult({ recipientCount: count });
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const isPending = createTaskMutation.isPending || createBroadcastMutation.isPending;
+
+  function buildDueDate(): Date | undefined {
+    if (!dueDate) return undefined;
+    const [hours, minutes] = dueTime.split(":").map(Number);
+    const d = new Date(dueDate + "T00:00:00");
+    d.setHours(hours ?? 9, minutes ?? 0, 0, 0);
+    return d;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setServerError(null);
+
+    if (!title.trim()) {
+      setServerError("Title is required.");
+      return;
+    }
+
+    if (mode === "single") {
+      if (!userId) {
+        setServerError("Please select a recipient.");
+        return;
+      }
+      const due = buildDueDate();
+      createTaskMutation.mutate({
+        userId,
+        title: title.trim(),
+        ...(body.trim() ? { body: body.trim() } : {}),
+        priority: priority as "LOW" | "NORMAL" | "HIGH" | "URGENT",
+        ...(due !== undefined ? { dueDate: due } : {}),
+        channel: channel as "in_app" | "email" | "both",
+        ...(link.trim() ? { link: link.trim() } : {}),
+      });
+    } else {
+      createBroadcastMutation.mutate({
+        title: title.trim(),
+        ...(body.trim() ? { body: body.trim() } : {}),
+        targetType: targetType as "all" | "role" | "project" | "orgUnit",
+        ...(targetType !== "all" && targetValue.trim() ? { targetValue: targetValue.trim() } : {}),
+        priority: priority as "LOW" | "NORMAL" | "HIGH" | "URGENT",
+        channel: channel as "in_app" | "email" | "both",
+        ...(link.trim() ? { link: link.trim() } : {}),
+        category: "TASK",
+      });
+    }
+  }
+
+  function handleCloseResult() {
+    onSuccess();
+    onClose();
+  }
+
+  const inputClass =
+    "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
+  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
+
+  // After successful send, show result
+  if (result) {
+    const isGroup = mode === "group";
+    return (
+      <div
+        className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) handleCloseResult();
+        }}
+      >
+        <div
+          ref={panelRef}
+          className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
+          onKeyDown={(e) => { if (e.key === "Escape") handleCloseResult(); }}
+        >
+          <div className="px-6 py-8 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+              <svg className="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Task Created</h3>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              {isGroup
+                ? `Task sent to ${result.recipientCount ?? 0} recipient${(result.recipientCount ?? 0) !== 1 ? "s" : ""}`
+                : "Task has been assigned successfully"}
+            </p>
+            <button
+              type="button"
+              onClick={handleCloseResult}
+              className="mt-6 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
+        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Create Task</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors text-xl leading-none"
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
+          {/* Mode toggle */}
+          <div className="flex rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <button
+              type="button"
+              onClick={() => setMode("single")}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                mode === "single"
+                  ? "bg-brand-600 text-white"
+                  : "bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
+              }`}
+            >
+              Single User
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode("group")}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                mode === "group"
+                  ? "bg-brand-600 text-white"
+                  : "bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
+              }`}
+            >
+              Group
+            </button>
+          </div>
+
+          {/* Recipient (single mode) */}
+          {mode === "single" && (
+            <div>
+              <label htmlFor="task-user" className={labelClass}>
+                Recipient <span className="text-red-500">*</span>
+              </label>
+              <input
+                id="task-user-search"
+                type="text"
+                value={userSearch}
+                onChange={(e) => setUserSearch(e.target.value)}
+                className={inputClass}
+                placeholder="Search by name or email..."
+              />
+              {userId && (
+                <div className="mt-1 flex items-center gap-2">
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    Selected: {users.find((u) => u.id === userId)?.name ?? users.find((u) => u.id === userId)?.email ?? userId}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setUserId("")}
+                    className="text-xs text-red-500 hover:text-red-700"
+                  >
+                    Clear
+                  </button>
+                </div>
+              )}
+              {userSearch.trim() && filteredUsers.length > 0 && (
+                <div className="mt-1 max-h-40 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+                  {filteredUsers.slice(0, 20).map((u) => (
+                    <button
+                      key={u.id}
+                      type="button"
+                      onClick={() => {
+                        setUserId(u.id);
+                        setUserSearch("");
+                      }}
+                      className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
+                        u.id === userId ? "bg-brand-50 dark:bg-brand-900/20" : ""
+                      }`}
+                    >
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        {u.name ?? "Unnamed"}
+                      </span>
+                      <span className="ml-2 text-gray-400 dark:text-gray-500">{u.email}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+              {userSearch.trim() && filteredUsers.length === 0 && (
+                <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">No users found.</p>
+              )}
+            </div>
+          )}
+
+          {/* Target (group mode) */}
+          {mode === "group" && (
+            <>
+              <div>
+                <label htmlFor="task-target" className={labelClass}>
+                  Target Audience
+                </label>
+                <select
+                  id="task-target"
+                  value={targetType}
+                  onChange={(e) => { setTargetType(e.target.value); setTargetValue(""); }}
+                  className={inputClass}
+                >
+                  {TARGET_TYPES.map((t) => (
+                    <option key={t.value} value={t.value}>{t.label}</option>
+                  ))}
+                </select>
+              </div>
+
+              {targetType === "role" && (
+                <div>
+                  <label htmlFor="task-role" className={labelClass}>
+                    Role
+                  </label>
+                  <select
+                    id="task-role"
+                    value={targetValue}
+                    onChange={(e) => setTargetValue(e.target.value)}
+                    className={inputClass}
+                  >
+                    <option value="">Select a role...</option>
+                    {ROLES.map((r) => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              {targetType === "project" && (
+                <div>
+                  <label htmlFor="task-project" className={labelClass}>
+                    Project ID
+                  </label>
+                  <input
+                    id="task-project"
+                    type="text"
+                    value={targetValue}
+                    onChange={(e) => setTargetValue(e.target.value)}
+                    className={inputClass}
+                    placeholder="Project ID..."
+                  />
+                </div>
+              )}
+
+              {targetType === "orgUnit" && (
+                <div>
+                  <label htmlFor="task-orgunit" className={labelClass}>
+                    Org Unit ID
+                  </label>
+                  <input
+                    id="task-orgunit"
+                    type="text"
+                    value={targetValue}
+                    onChange={(e) => setTargetValue(e.target.value)}
+                    className={inputClass}
+                    placeholder="Org Unit ID..."
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Title */}
+          <div>
+            <label htmlFor="task-title" className={labelClass}>
+              Title <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="task-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              maxLength={200}
+              className={inputClass}
+              required
+              placeholder="Task title..."
+            />
+          </div>
+
+          {/* Body */}
+          <div>
+            <label htmlFor="task-body" className={labelClass}>
+              Description (optional)
+            </label>
+            <textarea
+              id="task-body"
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              rows={3}
+              maxLength={2000}
+              className={`${inputClass} resize-none`}
+              placeholder="Task details..."
+            />
+          </div>
+
+          {/* Priority + Channel */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="task-priority" className={labelClass}>
+                Priority
+              </label>
+              <select
+                id="task-priority"
+                value={priority}
+                onChange={(e) => setPriority(e.target.value)}
+                className={inputClass}
+              >
+                {PRIORITY_OPTIONS.map((p) => (
+                  <option key={p.value} value={p.value}>{p.label}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label htmlFor="task-channel" className={labelClass}>
+                Channel
+              </label>
+              <select
+                id="task-channel"
+                value={channel}
+                onChange={(e) => setChannel(e.target.value)}
+                className={inputClass}
+              >
+                {CHANNEL_OPTIONS.map((c) => (
+                  <option key={c.value} value={c.value}>{c.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Due Date + Time */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="task-due-date" className={labelClass}>
+                Due Date (optional)
+              </label>
+              <DateInput
+                id="task-due-date"
+                value={dueDate}
+                onChange={setDueDate}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label htmlFor="task-due-time" className={labelClass}>
+                Due Time
+              </label>
+              <input
+                id="task-due-time"
+                type="time"
+                value={dueTime}
+                onChange={(e) => setDueTime(e.target.value)}
+                className={inputClass}
+                disabled={!dueDate}
+              />
+            </div>
+          </div>
+
+          {/* Link */}
+          <div>
+            <label htmlFor="task-link" className={labelClass}>
+              Link (optional)
+            </label>
+            <input
+              id="task-link"
+              type="text"
+              value={link}
+              onChange={(e) => setLink(e.target.value)}
+              className={inputClass}
+              placeholder="/some/page or https://..."
+            />
+          </div>
+
+          {/* Server error */}
+          {serverError && (
+            <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+              {serverError}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isPending}
+              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
+            >
+              {isPending ? "Creating..." : "Create Task"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/notifications/NotificationBell.tsx b/apps/web/src/components/notifications/NotificationBell.tsx
index 620da52..9c37753 100644
--- a/apps/web/src/components/notifications/NotificationBell.tsx
+++ b/apps/web/src/components/notifications/NotificationBell.tsx
@@ -1,7 +1,11 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
+import type { Route } from "next";
+import { motion, useAnimationControls } from "framer-motion";
 import { trpc } from "~/lib/trpc/client.js";
 
 function relativeTime(date: Date): string {
@@ -19,23 +23,61 @@ function relativeTime(date: Date): string {
   return `${months}mo ago`;
 }
 
+type TabKey = "all" | "tasks" | "reminders";
+
 export function NotificationBell() {
   const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
   const ref = useRef<HTMLDivElement>(null);
+  const bellRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const { data: session, status } = useSession();
   const isAuthenticated = status === "authenticated" && !!session?.user?.email;
 
+  const badgeControls = useAnimationControls();
+  const prevUnreadRef = useRef<number | null>(null);
+
   const utils = trpc.useUtils();
 
   const { data: unreadCount = 0 } = trpc.notification.unreadCount.useQuery(undefined, {
     enabled: isAuthenticated,
-    refetchInterval: 30_000,
+    refetchInterval: 60_000,
     retry: false,
   });
 
+  const { data: taskCounts } = trpc.notification.taskCounts.useQuery(undefined, {
+    enabled: isAuthenticated,
+    refetchInterval: 60_000,
+    retry: false,
+  });
+
+  // Bounce badge when unread count increases
+  useEffect(() => {
+    if (prevUnreadRef.current !== null && unreadCount > prevUnreadRef.current) {
+      void badgeControls.start({
+        scale: [1, 1.3, 1],
+        transition: { duration: 0.3, ease: "easeInOut" },
+      });
+    }
+    prevUnreadRef.current = unreadCount;
+  }, [unreadCount, badgeControls]);
+
+  const openTaskCount = (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0);
+
   const { data: notifications = [] } = trpc.notification.list.useQuery(
     { limit: 20 },
-    { enabled: open && isAuthenticated, retry: false },
+    { enabled: open && isAuthenticated && activeTab === "all", retry: false },
+  );
+
+  const { data: tasks = [] } = trpc.notification.listTasks.useQuery(
+    { status: "OPEN", limit: 10 },
+    { enabled: open && isAuthenticated && activeTab === "tasks", retry: false },
+  );
+
+  const { data: reminders = [] } = trpc.notification.listReminders.useQuery(
+    { limit: 10 },
+    { enabled: open && isAuthenticated && activeTab === "reminders", retry: false },
   );
 
   const markRead = trpc.notification.markRead.useMutation({
@@ -45,11 +87,41 @@ export function NotificationBell() {
     },
   });
 
+  const updateTaskStatus = trpc.notification.updateTaskStatus.useMutation({
+    onSuccess: () => {
+      void utils.notification.taskCounts.invalidate();
+      void utils.notification.listTasks.invalidate();
+      void utils.notification.unreadCount.invalidate();
+      void utils.notification.list.invalidate();
+    },
+  });
+
+  // Compute dropdown position when opening
+  const updatePosition = useCallback(() => {
+    if (!bellRef.current) return;
+    const rect = bellRef.current.getBoundingClientRect();
+    const panelHeight = 440; // approximate max height
+    let top = rect.top;
+    // If it would overflow the bottom, flip upward
+    if (top + panelHeight > window.innerHeight) {
+      top = Math.max(8, window.innerHeight - panelHeight - 8);
+    }
+    setDropdownPos({ top, left: rect.right + 8 });
+  }, []);
+
+  useEffect(() => {
+    if (open) updatePosition();
+  }, [open, updatePosition]);
+
   // Close dropdown on outside click
   useEffect(() => {
     if (!open) return;
     function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      const target = e.target as Node;
+      if (
+        ref.current && !ref.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
         setOpen(false);
       }
     }
@@ -67,10 +139,21 @@ export function NotificationBell() {
     markRead.mutate({ id });
   }
 
+  function handleTaskAction(id: string, taskStatus: string) {
+    updateTaskStatus.mutate({ id, status: taskStatus as "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED" });
+  }
+
+  const tabs: { key: TabKey; label: string }[] = [
+    { key: "all", label: "All" },
+    { key: "tasks", label: "Tasks" },
+    { key: "reminders", label: "Reminders" },
+  ];
+
   return (
     <div ref={ref} className="relative">
       {/* Bell button */}
       <button
+        ref={bellRef}
         type="button"
         onClick={() => setOpen((v) => !v)}
         className="relative p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
@@ -90,22 +173,39 @@ export function NotificationBell() {
             d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
           />
         </svg>
+        {/* Unread notification badge (red) */}
         {unreadCount > 0 && (
-          <span className="absolute top-1 right-1 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none">
+          <motion.span
+            animate={badgeControls}
+            className="absolute top-0.5 right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none"
+          >
             {unreadCount > 99 ? "99+" : unreadCount}
+          </motion.span>
+        )}
+        {/* Task count badge (orange) */}
+        {openTaskCount > 0 && (
+          <span className="absolute -bottom-0.5 right-0.5 flex items-center justify-center min-w-[14px] h-3.5 px-0.5 text-[9px] font-bold text-white bg-orange-500 rounded-full leading-none">
+            {openTaskCount > 99 ? "99+" : openTaskCount}
           </span>
         )}
       </button>
 
-      {/* Dropdown panel */}
-      {open && (
-        <div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-50 overflow-hidden">
+      {/* Dropdown panel — rendered via portal to escape sidebar overflow */}
+      {open && createPortal(
+        <motion.div
+          ref={dropdownRef}
+          initial={{ opacity: 0, scaleY: 0.95, scaleX: 0.98 }}
+          animate={{ opacity: 1, scaleY: 1, scaleX: 1 }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+          className="fixed w-96 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-[9999] overflow-hidden origin-top"
+          style={{ top: dropdownPos.top, left: dropdownPos.left }}
+        >
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-800">
             <span className="text-sm font-semibold text-gray-900 dark:text-gray-50">
               Notifications
             </span>
-            {unreadCount > 0 && (
+            {unreadCount > 0 && activeTab === "all" && (
               <button
                 type="button"
                 onClick={handleMarkAllRead}
@@ -117,50 +217,177 @@ export function NotificationBell() {
             )}
           </div>
 
-          {/* List */}
-          <div className="max-h-96 overflow-y-auto divide-y divide-gray-50 dark:divide-gray-800">
-            {notifications.length === 0 ? (
-              <div className="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
-                No notifications yet
-              </div>
-            ) : (
-              notifications.map((n) => {
-                const isUnread = n.readAt === null;
-                return (
-                  <button
-                    key={n.id}
-                    type="button"
-                    onClick={() => {
-                      if (isUnread) handleMarkOne(n.id);
-                    }}
-                    className={`w-full text-left px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
-                      isUnread ? "bg-blue-50/60 dark:bg-blue-900/10" : ""
-                    }`}
-                  >
-                    <div className="flex items-start gap-2">
-                      {isUnread && (
-                        <span className="mt-1.5 w-2 h-2 rounded-full bg-blue-500 shrink-0" />
-                      )}
-                      <div className={isUnread ? "" : "ml-4"}>
-                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug">
-                          {n.title}
-                        </p>
-                        {n.body && (
-                          <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
-                            {n.body}
+          {/* Tabs */}
+          <div className="flex border-b border-gray-100 dark:border-gray-800">
+            {tabs.map((tab) => (
+              <button
+                key={tab.key}
+                type="button"
+                onClick={() => setActiveTab(tab.key)}
+                className={`flex-1 px-3 py-2 text-xs font-medium transition-colors ${
+                  activeTab === tab.key
+                    ? "text-brand-600 dark:text-brand-400 border-b-2 border-brand-600 dark:border-brand-400"
+                    : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+                }`}
+              >
+                {tab.label}
+                {tab.key === "tasks" && openTaskCount > 0 && (
+                  <span className="ml-1 inline-flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-orange-500 rounded-full">
+                    {openTaskCount}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Content */}
+          <div className="max-h-80 overflow-y-auto divide-y divide-gray-50 dark:divide-gray-800">
+            {activeTab === "all" && (
+              <>
+                {notifications.length === 0 ? (
+                  <div className="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
+                    No notifications yet
+                  </div>
+                ) : (
+                  notifications.map((n) => {
+                    const isUnread = n.readAt === null;
+                    return (
+                      <button
+                        key={n.id}
+                        type="button"
+                        onClick={() => {
+                          if (isUnread) handleMarkOne(n.id);
+                        }}
+                        className={`w-full text-left px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+                          isUnread ? "bg-blue-50/60 dark:bg-blue-900/10" : ""
+                        }`}
+                      >
+                        <div className="flex items-start gap-2">
+                          {isUnread && (
+                            <span className="mt-1.5 w-2 h-2 rounded-full bg-blue-500 shrink-0" />
+                          )}
+                          <div className={isUnread ? "" : "ml-4"}>
+                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug">
+                              {n.title}
+                            </p>
+                            {n.body && (
+                              <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+                                {n.body}
+                              </p>
+                            )}
+                            <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                              {relativeTime(new Date(n.createdAt))}
+                            </p>
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })
+                )}
+              </>
+            )}
+
+            {activeTab === "tasks" && (
+              <>
+                {tasks.length === 0 ? (
+                  <div className="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
+                    No open tasks
+                  </div>
+                ) : (
+                  tasks.map((t) => (
+                    <div key={t.id} className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug truncate">
+                            {t.title}
                           </p>
-                        )}
-                        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
-                          {relativeTime(new Date(n.createdAt))}
-                        </p>
+                          {t.dueDate && (
+                            <p className={`mt-0.5 text-xs ${new Date(t.dueDate).getTime() < Date.now() ? "text-red-600 dark:text-red-400 font-semibold" : "text-gray-400 dark:text-gray-500"}`}>
+                              Due: {new Date(t.dueDate).toLocaleDateString("en-GB")}
+                            </p>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-1 shrink-0">
+                          <button
+                            type="button"
+                            onClick={() => handleTaskAction(t.id, "DONE")}
+                            disabled={updateTaskStatus.isPending}
+                            className="p-1 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30 rounded transition-colors"
+                            title="Mark as Done"
+                          >
+                            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                            </svg>
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => handleTaskAction(t.id, "DISMISSED")}
+                            disabled={updateTaskStatus.isPending}
+                            className="p-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                            title="Dismiss"
+                          >
+                            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                          </button>
+                        </div>
                       </div>
                     </div>
-                  </button>
-                );
-              })
+                  ))
+                )}
+              </>
+            )}
+
+            {activeTab === "reminders" && (
+              <>
+                {reminders.length === 0 ? (
+                  <div className="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
+                    No reminders
+                  </div>
+                ) : (
+                  reminders.map((r) => (
+                    <div key={r.id} className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                      <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug">
+                        {r.title}
+                      </p>
+                      {r.body && (
+                        <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
+                          {r.body}
+                        </p>
+                      )}
+                      <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                        {r.nextRemindAt
+                          ? new Date(r.nextRemindAt).toLocaleDateString("en-GB", {
+                              day: "2-digit",
+                              month: "short",
+                              year: "numeric",
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })
+                          : relativeTime(new Date(r.createdAt))}
+                        {r.recurrence && (
+                          <span className="ml-2 text-brand-500 dark:text-brand-400">{r.recurrence}</span>
+                        )}
+                      </p>
+                    </div>
+                  ))
+                )}
+              </>
             )}
           </div>
-        </div>
+
+          {/* Footer */}
+          <div className="border-t border-gray-100 dark:border-gray-800 px-4 py-2">
+            <Link
+              href={"/notifications" as Route}
+              onClick={() => setOpen(false)}
+              className="block text-center text-xs font-medium text-brand-600 dark:text-brand-400 hover:underline"
+            >
+              View all &rarr;
+            </Link>
+          </div>
+        </motion.div>,
+        document.body,
       )}
     </div>
   );
diff --git a/apps/web/src/components/notifications/NotificationCenterClient.tsx b/apps/web/src/components/notifications/NotificationCenterClient.tsx
new file mode 100644
index 0000000..b5f7431
--- /dev/null
+++ b/apps/web/src/components/notifications/NotificationCenterClient.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { trpc } from "~/lib/trpc/client.js";
+import { usePermissions } from "~/hooks/usePermissions.js";
+import { TaskCard } from "./TaskCard.js";
+import { ReminderModal } from "./ReminderModal.js";
+import { CreateTaskModal } from "./CreateTaskModal.js";
+
+type TabKey = "all" | "notifications" | "tasks" | "reminders" | "approvals";
+
+function relativeTime(date: Date): string {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+export function NotificationCenterClient() {
+  const searchParams = useSearchParams();
+  const initialTab = (searchParams.get("tab") as TabKey) || "all";
+  const [activeTab, setActiveTab] = useState<TabKey>(initialTab);
+  const { canEdit } = usePermissions();
+  const [showTaskModal, setShowTaskModal] = useState(false);
+  const [reminderModal, setReminderModal] = useState<{
+    open: boolean;
+    reminder: {
+      id: string;
+      title: string;
+      body?: string | null;
+      remindAt?: string | Date | null;
+      recurrence?: string | null;
+      link?: string | null;
+    } | null;
+  }>({ open: false, reminder: null });
+
+  const utils = trpc.useUtils();
+
+  // Queries
+  const { data: allNotifications = [], isLoading: loadingAll } = trpc.notification.list.useQuery(
+    { limit: 50 },
+    { enabled: activeTab === "all", refetchInterval: 30_000 },
+  );
+
+  const { data: notifications = [], isLoading: loadingNotifications } = trpc.notification.list.useQuery(
+    { category: "NOTIFICATION", limit: 50 },
+    { enabled: activeTab === "notifications", refetchInterval: 30_000 },
+  );
+
+  const { data: tasks = [], isLoading: loadingTasks } = trpc.notification.listTasks.useQuery(
+    { limit: 50 },
+    { enabled: activeTab === "tasks", refetchInterval: 30_000 },
+  );
+
+  const { data: reminders = [], isLoading: loadingReminders } = trpc.notification.listReminders.useQuery(
+    { limit: 50 },
+    { enabled: activeTab === "reminders", refetchInterval: 30_000 },
+  );
+
+  const { data: approvals = [], isLoading: loadingApprovals } = trpc.notification.list.useQuery(
+    { category: "APPROVAL", limit: 50 },
+    { enabled: activeTab === "approvals", refetchInterval: 30_000 },
+  );
+
+  const { data: taskCounts } = trpc.notification.taskCounts.useQuery(undefined, {
+    refetchInterval: 30_000,
+  });
+
+  // Mutations
+  const markRead = trpc.notification.markRead.useMutation({
+    onSuccess: () => {
+      void utils.notification.unreadCount.invalidate();
+      void utils.notification.list.invalidate();
+    },
+  });
+
+  const updateTaskStatus = trpc.notification.updateTaskStatus.useMutation({
+    onSuccess: () => {
+      void utils.notification.taskCounts.invalidate();
+      void utils.notification.listTasks.invalidate();
+      void utils.notification.list.invalidate();
+      void utils.notification.unreadCount.invalidate();
+    },
+  });
+
+  const deleteReminder = trpc.notification.deleteReminder.useMutation({
+    onSuccess: () => {
+      void utils.notification.listReminders.invalidate();
+      void utils.notification.list.invalidate();
+    },
+  });
+
+  function handleTaskStatusChange(id: string, status: string) {
+    updateTaskStatus.mutate({ id, status: status as "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED" });
+  }
+
+  function handleMarkAllRead() {
+    markRead.mutate({});
+  }
+
+  const tabs: { key: TabKey; label: string; count?: number }[] = [
+    { key: "all", label: "All" },
+    { key: "notifications", label: "Notifications" },
+    { key: "tasks", label: "Tasks", count: (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0) },
+    { key: "reminders", label: "Reminders" },
+    { key: "approvals", label: "Approvals" },
+  ];
+
+  const isLoading =
+    (activeTab === "all" && loadingAll) ||
+    (activeTab === "notifications" && loadingNotifications) ||
+    (activeTab === "tasks" && loadingTasks) ||
+    (activeTab === "reminders" && loadingReminders) ||
+    (activeTab === "approvals" && loadingApprovals);
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6">
+      {/* Page header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Notification Center</h1>
+        <div className="flex items-center gap-3">
+          {canEdit && activeTab === "tasks" && (
+            <button
+              type="button"
+              onClick={() => setShowTaskModal(true)}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 transition-colors"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Create Task
+            </button>
+          )}
+          {activeTab === "reminders" && (
+            <button
+              type="button"
+              onClick={() => setReminderModal({ open: true, reminder: null })}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 transition-colors"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              New Reminder
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleMarkAllRead}
+            disabled={markRead.isPending}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 dark:border-gray-600 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
+          >
+            Mark all read
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 border-b border-gray-200 dark:border-gray-700 mb-6">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => setActiveTab(tab.key)}
+            className={`px-4 py-2.5 text-sm font-medium transition-colors ${
+              activeTab === tab.key
+                ? "text-brand-600 dark:text-brand-400 border-b-2 border-brand-600 dark:border-brand-400"
+                : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+            }`}
+          >
+            {tab.label}
+            {tab.count !== undefined && tab.count > 0 && (
+              <span className="ml-1.5 inline-flex items-center justify-center min-w-[18px] h-5 px-1.5 text-[10px] font-bold text-white bg-orange-500 rounded-full">
+                {tab.count}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Loading state */}
+      {isLoading && (
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
+              <div className="h-4 w-3/4 shimmer-skeleton rounded" />
+              <div className="mt-2 h-3 w-1/2 shimmer-skeleton rounded" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      {!isLoading && (
+        <div className="space-y-3">
+          {/* All / Notifications / Approvals tabs */}
+          {(activeTab === "all" || activeTab === "notifications" || activeTab === "approvals") && (
+            <>
+              {(activeTab === "all" ? allNotifications : activeTab === "notifications" ? notifications : approvals).length === 0 ? (
+                <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-600 py-12 text-center text-sm text-gray-400 dark:text-gray-500">
+                  {activeTab === "approvals" ? "No pending approvals" : "No notifications"}
+                </div>
+              ) : (
+                (activeTab === "all" ? allNotifications : activeTab === "notifications" ? notifications : approvals).map((n) => {
+                  const isUnread = n.readAt === null;
+                  const isTask = n.category === "TASK" || n.category === "APPROVAL";
+
+                  if (isTask && n.taskStatus) {
+                    return (
+                      <TaskCard
+                        key={n.id}
+                        task={{
+                          id: n.id,
+                          title: n.title,
+                          body: n.body,
+                          priority: n.priority ?? "NORMAL",
+                          taskStatus: n.taskStatus,
+                          taskAction: n.taskAction,
+                          dueDate: n.dueDate,
+                          entityType: n.entityType,
+                          link: n.link,
+                          createdAt: n.createdAt,
+                          completedBy: n.completedBy,
+                        }}
+                        onStatusChange={handleTaskStatusChange}
+                      />
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={n.id}
+                      type="button"
+                      onClick={() => {
+                        if (isUnread) markRead.mutate({ id: n.id });
+                      }}
+                      className={`w-full text-left rounded-xl border border-gray-200 dark:border-gray-700 px-4 py-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 ${
+                        isUnread ? "bg-blue-50/60 dark:bg-blue-900/10" : "bg-white dark:bg-gray-900/70"
+                      }`}
+                    >
+                      <div className="flex items-start gap-2">
+                        {isUnread && (
+                          <span className="mt-1.5 w-2 h-2 rounded-full bg-blue-500 shrink-0" />
+                        )}
+                        <div className={isUnread ? "flex-1" : "flex-1 ml-4"}>
+                          <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug">
+                            {n.title}
+                          </p>
+                          {n.body && (
+                            <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+                              {n.body}
+                            </p>
+                          )}
+                          <div className="mt-1 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                            <span>{relativeTime(new Date(n.createdAt))}</span>
+                            {n.category && n.category !== "NOTIFICATION" && (
+                              <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-0.5 text-[10px] font-medium uppercase">
+                                {n.category}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })
+              )}
+            </>
+          )}
+
+          {/* Tasks tab */}
+          {activeTab === "tasks" && (
+            <>
+              {tasks.length === 0 ? (
+                <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-600 py-12 text-center text-sm text-gray-400 dark:text-gray-500">
+                  No tasks
+                </div>
+              ) : (
+                tasks.map((t) => (
+                  <TaskCard
+                    key={t.id}
+                    task={{
+                      id: t.id,
+                      title: t.title,
+                      body: t.body,
+                      priority: t.priority ?? "NORMAL",
+                      taskStatus: t.taskStatus,
+                      taskAction: t.taskAction,
+                      dueDate: t.dueDate,
+                      entityType: t.entityType,
+                      link: t.link,
+                      createdAt: t.createdAt,
+                      completedBy: t.completedBy,
+                    }}
+                    onStatusChange={handleTaskStatusChange}
+                  />
+                ))
+              )}
+            </>
+          )}
+
+          {/* Reminders tab */}
+          {activeTab === "reminders" && (
+            <>
+              {reminders.length === 0 ? (
+                <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-600 py-12 text-center text-sm text-gray-400 dark:text-gray-500">
+                  No reminders. Create one to get started.
+                </div>
+              ) : (
+                reminders.map((r) => (
+                  <div
+                    key={r.id}
+                    className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/70 px-4 py-3"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug">
+                          {r.title}
+                        </p>
+                        {r.body && (
+                          <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+                            {r.body}
+                          </p>
+                        )}
+                        <div className="mt-1 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                          {r.nextRemindAt && (
+                            <span>
+                              {new Date(r.nextRemindAt).toLocaleDateString("en-GB", {
+                                day: "2-digit",
+                                month: "short",
+                                year: "numeric",
+                                hour: "2-digit",
+                                minute: "2-digit",
+                              })}
+                            </span>
+                          )}
+                          {r.recurrence && (
+                            <span className="rounded-full bg-brand-100 dark:bg-brand-900/30 px-2 py-0.5 text-[10px] font-medium text-brand-700 dark:text-brand-300 uppercase">
+                              {r.recurrence}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setReminderModal({
+                              open: true,
+                              reminder: {
+                                id: r.id,
+                                title: r.title,
+                                body: r.body,
+                                remindAt: r.nextRemindAt ?? r.remindAt,
+                                recurrence: r.recurrence,
+                                link: r.link,
+                              },
+                            })
+                          }
+                          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                          title="Edit"
+                        >
+                          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                          </svg>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (window.confirm("Delete this reminder?")) {
+                              deleteReminder.mutate({ id: r.id });
+                            }
+                          }}
+                          disabled={deleteReminder.isPending}
+                          className="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                          title="Delete"
+                        >
+                          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Reminder Modal */}
+      {reminderModal.open && (
+        <ReminderModal
+          reminder={reminderModal.reminder}
+          onClose={() => setReminderModal({ open: false, reminder: null })}
+          onSuccess={() => setReminderModal({ open: false, reminder: null })}
+        />
+      )}
+
+      {/* Create Task Modal */}
+      {showTaskModal && (
+        <CreateTaskModal
+          onClose={() => setShowTaskModal(false)}
+          onSuccess={() => setShowTaskModal(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/notifications/ReminderModal.tsx b/apps/web/src/components/notifications/ReminderModal.tsx
new file mode 100644
index 0000000..69293bd
--- /dev/null
+++ b/apps/web/src/components/notifications/ReminderModal.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { trpc } from "~/lib/trpc/client.js";
+import { DateInput } from "~/components/ui/DateInput.js";
+
+const RECURRENCE_OPTIONS = [
+  { value: "", label: "None" },
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+] as const;
+
+interface ReminderModalProps {
+  reminder?: {
+    id: string;
+    title: string;
+    body?: string | null;
+    remindAt?: string | Date | null;
+    recurrence?: string | null;
+    link?: string | null;
+  } | null;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+function toDateInputValue(date: Date | string | null | undefined): string {
+  if (!date) return "";
+  const d = typeof date === "string" ? new Date(date) : date;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function toTimeInputValue(date: Date | string | null | undefined): string {
+  if (!date) return "09:00";
+  const d = typeof date === "string" ? new Date(date) : date;
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalProps) {
+  const isEdit = !!reminder;
+
+  const [title, setTitle] = useState(reminder?.title ?? "");
+  const [body, setBody] = useState(reminder?.body ?? "");
+  const [remindDate, setRemindDate] = useState(toDateInputValue(reminder?.remindAt));
+  const [remindTime, setRemindTime] = useState(toTimeInputValue(reminder?.remindAt));
+  const [recurrence, setRecurrence] = useState(reminder?.recurrence ?? "");
+  const [link, setLink] = useState(reminder?.link ?? "");
+  const [serverError, setServerError] = useState<string | null>(null);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, true);
+
+  const utils = trpc.useUtils();
+
+  const createMutation = trpc.notification.createReminder.useMutation({
+    onSuccess: async () => {
+      await utils.notification.listReminders.invalidate();
+      await utils.notification.list.invalidate();
+      onSuccess();
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const updateMutation = trpc.notification.updateReminder.useMutation({
+    onSuccess: async () => {
+      await utils.notification.listReminders.invalidate();
+      await utils.notification.list.invalidate();
+      onSuccess();
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const deleteMutation = trpc.notification.deleteReminder.useMutation({
+    onSuccess: async () => {
+      await utils.notification.listReminders.invalidate();
+      await utils.notification.list.invalidate();
+      onSuccess();
+    },
+    onError: (err) => setServerError(err.message),
+  });
+
+  const isPending = createMutation.isPending || updateMutation.isPending || deleteMutation.isPending;
+
+  function buildRemindAt(): Date | null {
+    if (!remindDate) return null;
+    const [hours, minutes] = remindTime.split(":").map(Number);
+    const d = new Date(remindDate + "T00:00:00");
+    d.setHours(hours ?? 9, minutes ?? 0, 0, 0);
+    return d;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setServerError(null);
+
+    const remindAt = buildRemindAt();
+    if (!title.trim()) {
+      setServerError("Title is required.");
+      return;
+    }
+    if (!remindAt) {
+      setServerError("Remind date is required.");
+      return;
+    }
+
+    if (isEdit && reminder) {
+      updateMutation.mutate({
+        id: reminder.id,
+        title: title.trim(),
+        body: body.trim() || undefined,
+        remindAt,
+        recurrence: (recurrence || null) as "daily" | "weekly" | "monthly" | null,
+      });
+    } else {
+      createMutation.mutate({
+        title: title.trim(),
+        body: body.trim() || undefined,
+        remindAt,
+        ...(recurrence ? { recurrence: recurrence as "daily" | "weekly" | "monthly" } : {}),
+        ...(link.trim() ? { link: link.trim() } : {}),
+      });
+    }
+  }
+
+  function handleDelete() {
+    if (!reminder) return;
+    if (!window.confirm("Delete this reminder?")) return;
+    deleteMutation.mutate({ id: reminder.id });
+  }
+
+  const inputClass =
+    "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
+  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
+        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            {isEdit ? "Edit Reminder" : "New Reminder"}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors text-xl leading-none"
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
+          {/* Title */}
+          <div>
+            <label htmlFor="rem-title" className={labelClass}>
+              Title <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="rem-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              maxLength={200}
+              className={inputClass}
+              required
+              placeholder="Reminder title..."
+            />
+          </div>
+
+          {/* Body */}
+          <div>
+            <label htmlFor="rem-body" className={labelClass}>
+              Description (optional)
+            </label>
+            <textarea
+              id="rem-body"
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              rows={3}
+              maxLength={2000}
+              className={`${inputClass} resize-none`}
+              placeholder="Additional details..."
+            />
+          </div>
+
+          {/* Date + Time */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="rem-date" className={labelClass}>
+                Remind Date <span className="text-red-500">*</span>
+              </label>
+              <DateInput
+                id="rem-date"
+                value={remindDate}
+                onChange={setRemindDate}
+                className={inputClass}
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="rem-time" className={labelClass}>
+                Remind Time <span className="text-red-500">*</span>
+              </label>
+              <input
+                id="rem-time"
+                type="time"
+                value={remindTime}
+                onChange={(e) => setRemindTime(e.target.value)}
+                className={inputClass}
+                required
+              />
+            </div>
+          </div>
+
+          {/* Recurrence */}
+          <div>
+            <label htmlFor="rem-recurrence" className={labelClass}>
+              Recurrence
+            </label>
+            <select
+              id="rem-recurrence"
+              value={recurrence}
+              onChange={(e) => setRecurrence(e.target.value)}
+              className={inputClass}
+            >
+              {RECURRENCE_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Link */}
+          {!isEdit && (
+            <div>
+              <label htmlFor="rem-link" className={labelClass}>
+                Link (optional)
+              </label>
+              <input
+                id="rem-link"
+                type="text"
+                value={link}
+                onChange={(e) => setLink(e.target.value)}
+                className={inputClass}
+                placeholder="/projects/abc or https://..."
+              />
+            </div>
+          )}
+
+          {/* Server error */}
+          {serverError && (
+            <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+              {serverError}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="flex items-center justify-between pt-2">
+            <div>
+              {isEdit && (
+                <button
+                  type="button"
+                  onClick={handleDelete}
+                  disabled={isPending}
+                  className="text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50"
+                >
+                  Delete
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={isPending}
+                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isPending}
+                className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
+              >
+                {isPending ? "Saving..." : isEdit ? "Update" : "Create Reminder"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/notifications/TaskCard.tsx b/apps/web/src/components/notifications/TaskCard.tsx
new file mode 100644
index 0000000..b7d9c9a
--- /dev/null
+++ b/apps/web/src/components/notifications/TaskCard.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import Link from "next/link";
+import type { Route } from "next";
+
+const PRIORITY_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  URGENT: { bg: "bg-red-100 dark:bg-red-900/30", text: "text-red-700 dark:text-red-300", label: "Urgent" },
+  HIGH: { bg: "bg-orange-100 dark:bg-orange-900/30", text: "text-orange-700 dark:text-orange-300", label: "High" },
+  NORMAL: { bg: "bg-blue-100 dark:bg-blue-900/30", text: "text-blue-700 dark:text-blue-300", label: "Normal" },
+  LOW: { bg: "bg-gray-100 dark:bg-gray-800", text: "text-gray-500 dark:text-gray-400", label: "Low" },
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  OPEN: "Open",
+  IN_PROGRESS: "In Progress",
+  DONE: "Done",
+  DISMISSED: "Dismissed",
+};
+
+function isOverdue(dueDate: string | Date | null | undefined): boolean {
+  if (!dueDate) return false;
+  const d = typeof dueDate === "string" ? new Date(dueDate) : dueDate;
+  return d.getTime() < Date.now();
+}
+
+function formatDate(date: string | Date): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
+}
+
+function isApprovalAction(action: string | null | undefined): boolean {
+  return !!action && action.startsWith("approve_");
+}
+
+export interface TaskCardProps {
+  task: {
+    id: string;
+    title: string;
+    body?: string | null;
+    priority: string;
+    taskStatus?: string | null;
+    taskAction?: string | null;
+    dueDate?: string | Date | null;
+    entityType?: string | null;
+    link?: string | null;
+    createdAt: string | Date;
+    completedBy?: string | null;
+  };
+  onStatusChange?: (id: string, status: string) => void;
+  compact?: boolean;
+}
+
+export function TaskCard({ task, onStatusChange, compact }: TaskCardProps) {
+  const priority = PRIORITY_STYLES[task.priority] ?? PRIORITY_STYLES.NORMAL!;
+  const status = task.taskStatus ?? "OPEN";
+  const overdue = isOverdue(task.dueDate) && status !== "DONE" && status !== "DISMISSED";
+  const isDone = status === "DONE" || status === "DISMISSED";
+  const showApprovalButtons = isApprovalAction(task.taskAction) && !isDone;
+
+  const titleContent = (
+    <span className={`text-sm font-medium leading-snug ${isDone ? "line-through text-gray-400 dark:text-gray-500" : "text-gray-900 dark:text-gray-100"}`}>
+      {task.title}
+    </span>
+  );
+
+  return (
+    <div className={`rounded-xl border border-gray-200 dark:border-gray-700 ${isDone ? "bg-gray-50 dark:bg-gray-900/40" : "bg-white dark:bg-gray-900/70"} ${compact ? "p-3" : "p-4"} transition-colors`}>
+      {/* Header row */}
+      <div className="flex items-start gap-2">
+        <div className="flex-1 min-w-0">
+          {task.link && !isDone ? (
+            <Link href={task.link as Route} className="hover:underline">
+              {titleContent}
+            </Link>
+          ) : (
+            titleContent
+          )}
+
+          {!compact && task.body && (
+            <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+              {task.body}
+            </p>
+          )}
+        </div>
+
+        {/* Priority badge */}
+        <span className={`shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${priority.bg} ${priority.text}`}>
+          {priority.label}
+        </span>
+      </div>
+
+      {/* Meta row */}
+      <div className={`flex items-center gap-3 ${compact ? "mt-1.5" : "mt-2"} text-xs`}>
+        {/* Status */}
+        <span className="text-gray-400 dark:text-gray-500">
+          {STATUS_LABELS[status] ?? status}
+        </span>
+
+        {/* Due date */}
+        {task.dueDate && (
+          <span className={overdue ? "font-semibold text-red-600 dark:text-red-400" : "text-gray-400 dark:text-gray-500"}>
+            {overdue ? "Overdue: " : "Due: "}
+            {formatDate(task.dueDate)}
+          </span>
+        )}
+
+        {/* Entity type */}
+        {!compact && task.entityType && (
+          <span className="text-gray-400 dark:text-gray-500">
+            {task.entityType}
+          </span>
+        )}
+
+        {/* Completed by */}
+        {isDone && task.completedBy && (
+          <span className="text-green-600 dark:text-green-400">
+            Completed
+          </span>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      {!isDone && onStatusChange && (
+        <div className={`flex items-center gap-2 ${compact ? "mt-2" : "mt-3"}`}>
+          {showApprovalButtons ? (
+            <>
+              <button
+                type="button"
+                onClick={() => onStatusChange(task.id, "DONE")}
+                className="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-green-700 transition-colors"
+              >
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                Approve
+              </button>
+              <button
+                type="button"
+                onClick={() => onStatusChange(task.id, "DISMISSED")}
+                className="inline-flex items-center gap-1 rounded-lg bg-red-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-red-700 transition-colors"
+              >
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                Reject
+              </button>
+            </>
+          ) : (
+            <>
+              {status === "OPEN" && (
+                <button
+                  type="button"
+                  onClick={() => onStatusChange(task.id, "IN_PROGRESS")}
+                  className="inline-flex items-center gap-1 rounded-lg border border-gray-300 dark:border-gray-600 px-2.5 py-1 text-xs font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                >
+                  Start
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => onStatusChange(task.id, "DONE")}
+                className="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-green-700 transition-colors"
+              >
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                Done
+              </button>
+              <button
+                type="button"
+                onClick={() => onStatusChange(task.id, "DISMISSED")}
+                className="inline-flex items-center gap-1 rounded-lg border border-gray-300 dark:border-gray-600 px-2.5 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              >
+                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                Dismiss
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/BudgetStatusBar.tsx b/apps/web/src/components/projects/BudgetStatusBar.tsx
index 35b1c7c..b614eef 100644
--- a/apps/web/src/components/projects/BudgetStatusBar.tsx
+++ b/apps/web/src/components/projects/BudgetStatusBar.tsx
@@ -2,6 +2,7 @@
 
 import { clsx } from "clsx";
 import { formatMoney } from "~/lib/format.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 interface Warning {
   level: string;
@@ -66,6 +67,10 @@ export function BudgetStatusBar({
   return (
     <div className={clsx("space-y-1.5", className)}>
       {/* Progress bar with stacked segments */}
+      <div className="flex items-center gap-1 mb-0.5">
+        <span className="text-xs text-gray-500">Budget utilization</span>
+        <InfoTooltip content="Visual budget bar: the solid segment shows confirmed costs, the lighter segment shows proposed costs. Green = within budget, yellow = approaching limit, red = over budget." />
+      </div>
       <div className="relative h-3 bg-gray-100 rounded-full overflow-hidden">
         {/* Confirmed segment */}
         <div
diff --git a/apps/web/src/components/projects/BudgetStatusCard.tsx b/apps/web/src/components/projects/BudgetStatusCard.tsx
index c156b6a..90ed901 100644
--- a/apps/web/src/components/projects/BudgetStatusCard.tsx
+++ b/apps/web/src/components/projects/BudgetStatusCard.tsx
@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import { formatMoney } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { BudgetStatusBar } from "./BudgetStatusBar.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 interface BudgetStatusCardProps {
   projectId: string;
@@ -56,12 +57,12 @@ export function BudgetStatusCard({ projectId }: BudgetStatusCardProps) {
 
   if (isLoading) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 animate-pulse">
-        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4" />
-        <div className="h-3 bg-gray-100 dark:bg-gray-700 rounded-full mb-3" />
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+        <div className="h-4 shimmer-skeleton rounded w-1/3 mb-4" />
+        <div className="h-3 shimmer-skeleton rounded-full mb-3" />
         <div className="grid grid-cols-4 gap-3">
           {[0, 1, 2, 3].map((i) => (
-            <div key={i} className="h-14 bg-gray-100 dark:bg-gray-700 rounded-lg" />
+            <div key={i} className="h-14 shimmer-skeleton rounded-lg" />
           ))}
         </div>
       </div>
@@ -104,19 +105,19 @@ export function BudgetStatusCard({ projectId }: BudgetStatusCardProps) {
       {/* Numeric details grid */}
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
         <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
-          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Total Budget</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">Total Budget<InfoTooltip content="The total approved budget for this project as set during creation or editing." /></p>
           <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{formatEur(budgetCents)}</p>
         </div>
         <div className="bg-green-50 dark:bg-green-900/30 rounded-lg p-3">
-          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Confirmed</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">Confirmed<InfoTooltip content="Sum of costs from confirmed assignments (working days x daily rate)." /></p>
           <p className="text-sm font-semibold text-green-800 dark:text-green-400">{formatEur(confirmedCents)}</p>
         </div>
         <div className="bg-yellow-50 dark:bg-yellow-900/30 rounded-lg p-3">
-          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Proposed</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">Proposed<InfoTooltip content="Sum of costs from proposed (not yet confirmed) assignments." /></p>
           <p className="text-sm font-semibold text-yellow-800 dark:text-yellow-400">{formatEur(proposedCents)}</p>
         </div>
         <div className={clsx("rounded-lg p-3", remainingCents < 0 ? "bg-red-50 dark:bg-red-900/30" : "bg-blue-50 dark:bg-blue-900/30")}>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Remaining</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center">Remaining<InfoTooltip content="Total budget minus all allocated costs (confirmed + proposed). Negative means over budget." /></p>
           <p className={clsx("text-sm font-semibold", remainingCents < 0 ? "text-red-800 dark:text-red-400" : "text-blue-800 dark:text-blue-400")}>
             {formatEur(remainingCents)}
           </p>
@@ -125,7 +126,7 @@ export function BudgetStatusCard({ projectId }: BudgetStatusCardProps) {
 
       {/* Win-probability weighted amount */}
       <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-gray-700 pt-3">
-        <span className="text-gray-400 dark:text-gray-500">Win-probability weighted cost:</span>
+        <span className="text-gray-400 dark:text-gray-500 flex items-center">Win-probability weighted cost:<InfoTooltip content="Allocated cost multiplied by the project's win probability. Reflects expected cost in the pipeline." /></span>
         <span className="font-medium text-gray-800 dark:text-gray-100">{formatEur(winProbabilityWeightedCents)}</span>
       </div>
 
diff --git a/apps/web/src/components/projects/CoverArtSection.tsx b/apps/web/src/components/projects/CoverArtSection.tsx
new file mode 100644
index 0000000..a5a4142
--- /dev/null
+++ b/apps/web/src/components/projects/CoverArtSection.tsx
@@ -0,0 +1,389 @@
+"use client";
+
+import { useState, useRef } from "react";
+import NextImage from "next/image";
+import { trpc } from "~/lib/trpc/client.js";
+
+interface CoverArtSectionProps {
+  projectId: string;
+  coverImageUrl?: string | null;
+  coverFocusY?: number;
+  projectColor?: string | null;
+  projectName: string;
+  canEdit: boolean;
+}
+
+export function CoverArtSection({ projectId, coverImageUrl, coverFocusY = 50, projectColor, projectName, canEdit }: CoverArtSectionProps) {
+  const [imageUrl, setImageUrl] = useState(coverImageUrl ?? null);
+  const [focusY, setFocusY] = useState(coverFocusY);
+  const [generating, setGenerating] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [customPrompt, setCustomPrompt] = useState("");
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [showFocusSlider, setShowFocusSlider] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const utils = trpc.useUtils();
+
+  const { data: dalleStatus } = trpc.project.isDalleConfigured.useQuery();
+  const generateMutation = trpc.project.generateCover.useMutation();
+  const uploadMutation = trpc.project.uploadCover.useMutation();
+  const removeMutation = trpc.project.removeCover.useMutation();
+  const focusMutation = trpc.project.updateCoverFocus.useMutation();
+
+  const handleGenerate = async () => {
+    setError(null);
+    setGenerating(true);
+    try {
+      const result = await generateMutation.mutateAsync({
+        projectId,
+        ...(customPrompt.trim() ? { prompt: customPrompt.trim() } : {}),
+      });
+      setImageUrl(result.coverImageUrl);
+      setShowPromptInput(false);
+      setCustomPrompt("");
+      void utils.project.getById.invalidate({ id: projectId });
+      void utils.project.listWithCosts.invalidate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to generate cover");
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  /** Compress an image file to WebP/JPEG via canvas, targeting max 1920px and ~200-400KB output */
+  const compressImage = (file: File, maxDim = 1920, quality = 0.82): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        let { width, height } = img;
+        if (width > maxDim || height > maxDim) {
+          const scale = maxDim / Math.max(width, height);
+          width = Math.round(width * scale);
+          height = Math.round(height * scale);
+        }
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx2d = canvas.getContext("2d");
+        if (!ctx2d) { reject(new Error("Canvas not supported")); return; }
+        ctx2d.drawImage(img, 0, 0, width, height);
+        // Prefer WebP, fall back to JPEG
+        let dataUrl = canvas.toDataURL("image/webp", quality);
+        if (!dataUrl.startsWith("data:image/webp")) {
+          dataUrl = canvas.toDataURL("image/jpeg", quality);
+        }
+        resolve(dataUrl);
+      };
+      img.onerror = () => reject(new Error("Failed to load image"));
+      img.src = URL.createObjectURL(file);
+    });
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      setError("Please select an image file (PNG, JPG, WebP, etc.)");
+      return;
+    }
+
+    if (file.size > 10 * 1024 * 1024) {
+      setError("Image too large. Maximum upload size is 10 MB.");
+      return;
+    }
+
+    setError(null);
+    setUploading(true);
+
+    try {
+      const dataUrl = await compressImage(file);
+
+      const result = await uploadMutation.mutateAsync({
+        projectId,
+        imageDataUrl: dataUrl,
+      });
+      setImageUrl(result.coverImageUrl);
+      void utils.project.getById.invalidate({ id: projectId });
+      void utils.project.listWithCosts.invalidate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to upload image");
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  const handleRemove = async () => {
+    setError(null);
+    try {
+      await removeMutation.mutateAsync({ projectId });
+      setImageUrl(null);
+      setShowFocusSlider(false);
+      void utils.project.getById.invalidate({ id: projectId });
+      void utils.project.listWithCosts.invalidate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to remove cover");
+    }
+  };
+
+  const handleFocusSave = async () => {
+    try {
+      await focusMutation.mutateAsync({ projectId, coverFocusY: focusY });
+      setShowFocusSlider(false);
+      void utils.project.getById.invalidate({ id: projectId });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save focus point");
+    }
+  };
+
+  const initials = projectName
+    .split(/\s+/)
+    .map((w) => w[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
+      {/* Cover image or placeholder */}
+      {imageUrl ? (
+        <div className="relative">
+          <NextImage
+            src={imageUrl}
+            alt={`Cover art for ${projectName}`}
+            width={1024}
+            height={1024}
+            className="w-full object-cover"
+            style={{
+              height: "clamp(16rem, 22vw, 22rem)",
+              objectPosition: `center ${focusY}%`,
+            }}
+            unoptimized={imageUrl.startsWith("data:")}
+            priority
+          />
+          {/* Gradient overlay at bottom for readability */}
+          <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black/40 to-transparent" />
+        </div>
+      ) : (
+        <div
+          className="flex flex-col items-center justify-center gap-1"
+          style={{
+            height: "clamp(10rem, 16vw, 14rem)",
+            background: projectColor
+              ? `linear-gradient(135deg, ${projectColor}22, ${projectColor}44)`
+              : "linear-gradient(135deg, #e0e7ff, #c7d2fe)",
+          }}
+        >
+          <span
+            className="text-4xl font-bold opacity-30"
+            style={{ color: projectColor ?? "#6366f1" }}
+          >
+            {initials}
+          </span>
+          <span className="text-[10px] font-medium tracking-wide text-gray-400 dark:text-gray-500">
+            1024 × 1024 px
+          </span>
+        </div>
+      )}
+
+      {/* Controls overlay */}
+      {canEdit && (
+        <div className="absolute right-3 top-3 flex items-center gap-2">
+          {/* Focus point adjuster — only when image exists */}
+          {imageUrl && (
+            <button
+              type="button"
+              onClick={() => setShowFocusSlider((v) => !v)}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-white/90 px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm backdrop-blur transition hover:bg-white dark:bg-gray-800/90 dark:text-gray-200 dark:hover:bg-gray-800"
+              title="Adjust vertical focus point"
+            >
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+              </svg>
+              Focus
+            </button>
+          )}
+
+          {/* Generate with AI */}
+          {dalleStatus?.configured && (
+            <button
+              type="button"
+              onClick={() => {
+                if (showPromptInput) {
+                  handleGenerate();
+                } else {
+                  setShowPromptInput(true);
+                }
+              }}
+              disabled={generating}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-white/90 px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm backdrop-blur transition hover:bg-white disabled:opacity-50 dark:bg-gray-800/90 dark:text-gray-200 dark:hover:bg-gray-800"
+              title="Generate cover art with AI"
+            >
+              {generating ? (
+                <>
+                  <svg className="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  Generating...
+                </>
+              ) : (
+                <>
+                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                  </svg>
+                  {showPromptInput ? "Generate" : "AI Cover"}
+                </>
+              )}
+            </button>
+          )}
+
+          {/* Upload */}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-white/90 px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm backdrop-blur transition hover:bg-white disabled:opacity-50 dark:bg-gray-800/90 dark:text-gray-200 dark:hover:bg-gray-800"
+          >
+            {uploading ? (
+              <>
+                <svg className="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                Uploading...
+              </>
+            ) : (
+              <>
+                <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                </svg>
+                Upload
+              </>
+            )}
+          </button>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/webp,image/tiff,image/bmp"
+            className="hidden"
+            onChange={handleFileSelect}
+          />
+
+          {/* Remove */}
+          {imageUrl && (
+            <button
+              type="button"
+              onClick={handleRemove}
+              disabled={removeMutation.isPending}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/80 px-3 py-1.5 text-xs font-medium text-white shadow-sm backdrop-blur transition hover:bg-red-600 disabled:opacity-50"
+              title="Remove cover art"
+            >
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Focus point slider */}
+      {showFocusSlider && imageUrl && canEdit && (
+        <div className="absolute inset-x-0 bottom-0 bg-white/95 px-4 py-3 backdrop-blur dark:bg-gray-900/95">
+          <div className="flex items-center gap-3">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-300 whitespace-nowrap">
+              Focus point
+            </label>
+            <span className="text-[10px] text-gray-400">Top</span>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={focusY}
+              onChange={(e) => setFocusY(Number(e.target.value))}
+              className="flex-1 accent-brand-600"
+            />
+            <span className="text-[10px] text-gray-400">Bottom</span>
+            <span className="w-8 text-center text-xs tabular-nums text-gray-500">{focusY}%</span>
+            <button
+              type="button"
+              onClick={handleFocusSave}
+              disabled={focusMutation.isPending}
+              className="rounded-lg bg-brand-600 px-3 py-1 text-xs font-medium text-white hover:bg-brand-700 disabled:opacity-50"
+            >
+              {focusMutation.isPending ? "..." : "Save"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setFocusY(coverFocusY);
+                setShowFocusSlider(false);
+              }}
+              className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Custom prompt input (shown when AI Cover is clicked) */}
+      {showPromptInput && !showFocusSlider && canEdit && (
+        <div className="absolute inset-x-0 bottom-0 bg-white/95 p-3 backdrop-blur dark:bg-gray-900/95">
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPrompt}
+              onChange={(e) => setCustomPrompt(e.target.value)}
+              placeholder="Optional: describe the style you want..."
+              className="flex-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleGenerate();
+                if (e.key === "Escape") {
+                  setShowPromptInput(false);
+                  setCustomPrompt("");
+                }
+              }}
+              autoFocus
+            />
+            <button
+              type="button"
+              onClick={handleGenerate}
+              disabled={generating}
+              className="rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
+            >
+              {generating ? "..." : "Generate"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowPromptInput(false);
+                setCustomPrompt("");
+              }}
+              className="rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="absolute inset-x-0 bottom-0 bg-red-50/95 px-3 py-2 text-xs text-red-700 backdrop-blur dark:bg-red-950/90 dark:text-red-300">
+          {error}
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className="ml-2 font-medium underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/ProjectAssignmentsTable.tsx b/apps/web/src/components/projects/ProjectAssignmentsTable.tsx
index 0a75934..ef9006c 100644
--- a/apps/web/src/components/projects/ProjectAssignmentsTable.tsx
+++ b/apps/web/src/components/projects/ProjectAssignmentsTable.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
-import { formatDate, formatMoney } from "~/lib/format.js";
+import { formatCents, formatDate, formatMoney } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ALLOCATION_STATUS_BADGE } from "~/lib/status-styles.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
@@ -73,7 +73,9 @@ export function ProjectAssignmentsTable({ assignments }: ProjectAssignmentsTable
       <table className="w-full">
         <thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
           <tr>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Resource</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              Resource <InfoTooltip content="The person assigned to this project for the given period and role." />
+            </th>
             <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
               Role <InfoTooltip content="Role this allocation was created for." />
             </th>
@@ -125,7 +127,7 @@ export function ProjectAssignmentsTable({ assignments }: ProjectAssignmentsTable
               </td>
               <td className="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100">{assignment.hoursPerDay}h</td>
               <td className="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100">
-                {(assignment.dailyCostCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} €
+                {formatCents(assignment.dailyCostCents)} €
               </td>
               <td className="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100">
                 {(countWorkingDays(assignment.startDate, assignment.endDate) * assignment.hoursPerDay).toLocaleString("de-DE", { minimumFractionDigits: 1 })}h
diff --git a/apps/web/src/components/projects/ProjectDemandsTable.tsx b/apps/web/src/components/projects/ProjectDemandsTable.tsx
index c13e732..1d456b0 100644
--- a/apps/web/src/components/projects/ProjectDemandsTable.tsx
+++ b/apps/web/src/components/projects/ProjectDemandsTable.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { formatDate } from "~/lib/format.js";
+import { formatCents, formatDate } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
 import { AllocationModal } from "~/components/allocations/AllocationModal.js";
@@ -69,10 +69,10 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
           <thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
             <tr>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Role
+                Role <InfoTooltip content="The role or skill profile required for this demand position." />
               </th>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Period
+                Period <InfoTooltip content="Time range during which this role is needed on the project." />
               </th>
               <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                 <span className="inline-flex items-center justify-end gap-0.5">
@@ -80,7 +80,9 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
                 </span>
               </th>
               <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Hours/Day
+                <span className="inline-flex items-center justify-end gap-0.5">
+                  Hours/Day <InfoTooltip content="Planned working hours per day for this demand position." />
+                </span>
               </th>
               <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                 <span className="inline-flex items-center justify-end gap-0.5">
@@ -88,7 +90,7 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
                 </span>
               </th>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Status
+                Status <InfoTooltip content="PROPOSED = requested, CONFIRMED = approved, ACTIVE = ongoing, COMPLETED = filled, CANCELLED = removed." />
               </th>
               {canEdit && (
                 <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
@@ -130,11 +132,11 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
                       return (
                         <div>
                           <div className="text-gray-900 dark:text-gray-100">
-                            {(demand.budgetCents! / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR
+                            {formatCents(demand.budgetCents!)} EUR
                           </div>
                           <div className={`text-xs ${remainCents < 0 ? "text-red-500" : "text-gray-400"}`}>
-                            {bookedCents > 0 ? `${(bookedCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} booked` : ""}
-                            {remainCents < 0 ? ` (${(Math.abs(remainCents) / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} over)` : ""}
+                            {bookedCents > 0 ? `${formatCents(bookedCents)} booked` : ""}
+                            {remainCents < 0 ? ` (${formatCents(Math.abs(remainCents))} over)` : ""}
                           </div>
                         </div>
                       );
diff --git a/apps/web/src/components/projects/ProjectModal.tsx b/apps/web/src/components/projects/ProjectModal.tsx
index 4c84adc..90d63fc 100644
--- a/apps/web/src/components/projects/ProjectModal.tsx
+++ b/apps/web/src/components/projects/ProjectModal.tsx
@@ -6,6 +6,7 @@ import { OrderType, AllocationType, ProjectStatus } from "@planarchy/shared";
 import type { Project } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const ORDER_TYPE_OPTIONS = [
   { value: "BD", label: "BD" },
@@ -283,6 +284,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="shortCode">
                     Chargecode <span className="text-red-500">*</span>
+                    <InfoTooltip content="Unique project identifier for time tracking and cost attribution. Cannot be changed after creation." />
                   </label>
                   <input
                     id="shortCode"
@@ -306,6 +308,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="name">
                     Name <span className="text-red-500">*</span>
+                    <InfoTooltip content="Display name shown on the timeline and in reports." />
                   </label>
                   <input
                     id="name"
@@ -331,6 +334,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="orderType">
                     Order Type
+                    <InfoTooltip content="BD = Business Development (pre-sales), CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = non-project overhead." />
                   </label>
                   <select
                     id="orderType"
@@ -348,6 +352,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="allocationType">
                     Allocation
+                    <InfoTooltip content="INT = staffed with internal resources, EXT = staffed with external contractors or freelancers." />
                   </label>
                   <select
                     id="allocationType"
@@ -365,6 +370,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="winProbability">
                     Win Probability %
+                    <InfoTooltip content="Likelihood of winning this project (0-100%). Affects the weighted pipeline value: budget x probability." />
                   </label>
                   <input
                     id="winProbability"
@@ -391,6 +397,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="utilizationCategoryId">
                     Utilization Category
+                    <InfoTooltip content="Groups projects for chargeability and utilization reporting. Determines how hours count toward resource utilization." />
                   </label>
                   <select
                     id="utilizationCategoryId"
@@ -409,6 +416,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="clientId">
                     Client
+                    <InfoTooltip content="The client or customer this project is for. Used for filtering and reporting." />
                   </label>
                   <select
                     id="clientId"
@@ -437,6 +445,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="startDate">
                     Start Date
+                    <InfoTooltip content="First day of the project period. Assignments begin from this date." />
                   </label>
                   <DateInput
                     id="startDate"
@@ -451,6 +460,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="endDate">
                     End Date
+                    <InfoTooltip content="Last day of the project period. Must be on or after the start date." />
                   </label>
                   <DateInput
                     id="endDate"
@@ -466,6 +476,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="budgetEur">
                     Budget (€)
+                    <InfoTooltip content="Total project budget in EUR. Tracked against the sum of assignment costs (hours x daily rate)." />
                   </label>
                   <input
                     id="budgetEur"
@@ -493,6 +504,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="status">
                     Status
+                    <InfoTooltip content="DRAFT = not visible on timeline, ACTIVE = in progress, ON_HOLD = paused, COMPLETED = finished, CANCELLED = abandoned." />
                   </label>
                   <select
                     id="status"
@@ -510,6 +522,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="responsiblePerson">
                     Responsible Person
+                    <InfoTooltip content="Project lead or account manager responsible for this project." />
                   </label>
                   <input
                     id="responsiblePerson"
@@ -523,6 +536,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 <div>
                   <label className={labelClass} htmlFor="projectColor">
                     Timeline Color
+                    <InfoTooltip content="Custom color for this project's bars on the timeline view. Leave empty for the default color." />
                   </label>
                   <div className="flex items-center gap-2">
                     <input
diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index 7872191..e81b108 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -9,6 +9,10 @@ import { uuid } from "~/lib/uuid.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { SkillTagInput } from "~/components/ui/SkillTagInput.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { formatCents } from "~/lib/format.js";
+import { ConfettiBurst } from "~/components/ui/ConfettiBurst.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -186,7 +190,7 @@ function Step1({ state, onChange }: Step1Props) {
     <div className="space-y-5">
       {/* Blueprint picker */}
       <div>
-        <label className={LABEL_CLS}>Project Blueprint (optional)</label>
+        <label className={LABEL_CLS}>Project Blueprint (optional)<InfoTooltip content="Blueprints are templates that pre-fill role presets and default settings. Selecting one loads staffing requirements into Step 3." /></label>
         <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-2">
           <button
             type="button"
@@ -238,7 +242,7 @@ function Step1({ state, onChange }: Step1Props) {
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         {/* Short code */}
         <div>
-          <label className={LABEL_CLS}>Short Code *</label>
+          <label className={LABEL_CLS}>Short Code *<InfoTooltip content="Unique chargecode for this project, used for time tracking and cost attribution. Must be uppercase alphanumeric." /></label>
           <input
             type="text"
             value={state.shortCode}
@@ -251,7 +255,7 @@ function Step1({ state, onChange }: Step1Props) {
 
         {/* Name */}
         <div>
-          <label className={LABEL_CLS}>Project Name *</label>
+          <label className={LABEL_CLS}>Project Name *<InfoTooltip content="Display name shown on the timeline and in reports." /></label>
           <input
             type="text"
             value={state.name}
@@ -263,7 +267,7 @@ function Step1({ state, onChange }: Step1Props) {
 
         {/* Order type */}
         <div>
-          <label className={LABEL_CLS}>Order Type *</label>
+          <label className={LABEL_CLS}>Order Type *<InfoTooltip content="BD = Business Development (pre-sales), CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = non-project overhead." /></label>
           <select
             value={state.orderType}
             onChange={(e) => onChange({ orderType: e.target.value })}
@@ -279,7 +283,7 @@ function Step1({ state, onChange }: Step1Props) {
 
         {/* Allocation type */}
         <div>
-          <label className={LABEL_CLS}>Allocation Type *</label>
+          <label className={LABEL_CLS}>Allocation Type *<InfoTooltip content="INT = staffed with internal resources, EXT = staffed with external contractors or freelancers." /></label>
           <select
             value={state.allocationType}
             onChange={(e) => onChange({ allocationType: e.target.value })}
@@ -392,14 +396,14 @@ function Step2({ state, onChange }: Step2Props) {
     <div className="space-y-4">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className={LABEL_CLS}>Start Date *</label>
+          <label className={LABEL_CLS}>Start Date *<InfoTooltip content="First day of the project period. Assignments and budget tracking begin from this date." /></label>
           <DateInput
             value={state.startDate}
             onChange={(v) => onChange({ startDate: v })}
           />
         </div>
         <div>
-          <label className={LABEL_CLS}>End Date *</label>
+          <label className={LABEL_CLS}>End Date *<InfoTooltip content="Last day of the project period. Defines the timeline boundary for all assignments." /></label>
           <DateInput
             value={state.endDate}
             onChange={(v) => onChange({ endDate: v })}
@@ -409,7 +413,7 @@ function Step2({ state, onChange }: Step2Props) {
 
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className={LABEL_CLS}>Budget (EUR) *</label>
+          <label className={LABEL_CLS}>Budget (EUR) *<InfoTooltip content="Total project budget in EUR. Stored internally as cents. Used to track spending against assignments." /></label>
           <input
             type="number"
             min={0}
@@ -421,7 +425,7 @@ function Step2({ state, onChange }: Step2Props) {
           />
         </div>
         <div>
-          <label className={LABEL_CLS}>Responsible Person</label>
+          <label className={LABEL_CLS}>Responsible Person<InfoTooltip content="Project lead or account manager. Search by name or employee ID." /></label>
           <ResourcePersonPicker
             value={state.responsiblePerson}
             onChange={(v) => onChange({ responsiblePerson: v })}
@@ -432,6 +436,7 @@ function Step2({ state, onChange }: Step2Props) {
       <div>
         <label className={LABEL_CLS}>
           Win Probability: <strong>{state.winProbability}%</strong>
+          <InfoTooltip content="Likelihood of winning this project (0-100%). Affects the weighted pipeline value: budget x probability." />
         </label>
         <input
           type="range"
@@ -504,9 +509,9 @@ function Step3({ state, onChange }: Step3Props) {
               <div className={`h-full rounded-full transition-all ${remainingCents < 0 ? "bg-red-500" : remainingCents === 0 ? "bg-green-500" : "bg-amber-500"}`} style={{ width: `${Math.min(100, pct)}%` }} />
             </div>
             <div className="flex justify-between">
-              <span>Project: {(projectBudgetCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR</span>
-              <span>Allocated: {(allocatedCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR</span>
-              <span className="font-semibold">Remaining: {(remainingCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR</span>
+              <span>Project: {formatCents(projectBudgetCents)} EUR</span>
+              <span>Allocated: {formatCents(allocatedCents)} EUR</span>
+              <span className="font-semibold">Remaining: {formatCents(remainingCents)} EUR</span>
             </div>
           </div>
         );
@@ -522,7 +527,7 @@ function Step3({ state, onChange }: Step3Props) {
           <div key={req.id} className="border border-gray-200 rounded-lg p-3 bg-white">
             <div className="flex flex-wrap items-start gap-2">
               <div className="flex-1 min-w-32">
-                <label className="text-xs text-gray-400">Role *</label>
+                <label className="text-xs text-gray-400">Role *<InfoTooltip content="Select a predefined role or enter a custom role name. Defines the skill profile for this staffing demand." /></label>
                 {roles.length > 0 ? (
                   <select
                     value={req.roleId ?? ""}
@@ -557,7 +562,7 @@ function Step3({ state, onChange }: Step3Props) {
                 )}
               </div>
               <div className="w-20">
-                <label className="text-xs text-gray-400">h/day</label>
+                <label className="text-xs text-gray-400">h/day<InfoTooltip content="Planned working hours per day for this role." /></label>
                 <input
                   type="number"
                   value={req.hoursPerDay}
@@ -569,7 +574,7 @@ function Step3({ state, onChange }: Step3Props) {
                 />
               </div>
               <div className="w-16">
-                <label className="text-xs text-gray-400">Count</label>
+                <label className="text-xs text-gray-400">Count<InfoTooltip content="Number of people needed for this role. Unfilled seats become placeholder demands until assigned." /></label>
                 <input
                   type="number"
                   value={req.headcount}
@@ -580,7 +585,7 @@ function Step3({ state, onChange }: Step3Props) {
                 />
               </div>
               <div className="w-28">
-                <label className="text-xs text-gray-400">Budget (EUR)</label>
+                <label className="text-xs text-gray-400">Budget (EUR)<InfoTooltip content="Optional budget cap for this role. Tracked against actual assignment costs." /></label>
                 <input
                   type="number"
                   value={req.budgetCents ? req.budgetCents / 100 : ""}
@@ -606,7 +611,7 @@ function Step3({ state, onChange }: Step3Props) {
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
               <div>
-                <label className="text-xs text-gray-400">Required skills</label>
+                <label className="text-xs text-gray-400">Required skills<InfoTooltip content="Skills a resource must have to be suggested for this role." /></label>
                 <SkillTagInput
                   value={req.requiredSkills}
                   onChange={(skills) => updateReq(idx, { requiredSkills: skills })}
@@ -614,7 +619,7 @@ function Step3({ state, onChange }: Step3Props) {
                 />
               </div>
               <div>
-                <label className="text-xs text-gray-400">Preferred skills (optional)</label>
+                <label className="text-xs text-gray-400">Preferred skills (optional)<InfoTooltip content="Nice-to-have skills that boost a resource's match score but are not mandatory." /></label>
                 <SkillTagInput
                   value={req.preferredSkills ?? []}
                   onChange={(skills) => updateReq(idx, { preferredSkills: skills })}
@@ -622,7 +627,7 @@ function Step3({ state, onChange }: Step3Props) {
                 />
               </div>
               <div>
-                <label className="text-xs text-gray-400">Chapter filter (optional)</label>
+                <label className="text-xs text-gray-400">Chapter filter (optional)<InfoTooltip content="Restrict suggestions to resources from a specific chapter/department." /></label>
                 <input
                   type="text"
                   value={req.chapter ?? ""}
@@ -838,6 +843,10 @@ function Step4({ state, onChange }: Step4Props) {
 
   return (
     <div className="space-y-5 max-h-[55vh] overflow-y-auto pr-1">
+      <p className="text-xs text-gray-500 flex items-center gap-1">
+        AI-powered resource suggestions based on skills, availability, and utilization.
+        <InfoTooltip content="Resources are ranked by skill match score, current utilization, and availability in the project period. Assign resources here or leave unfilled to create placeholder demands." />
+      </p>
       {state.staffingReqs.map((req) => (
         <div key={req.id} className="border border-gray-200 rounded-lg p-3">
           <div className="flex items-center gap-2 mb-2">
@@ -876,6 +885,10 @@ function Step5({ state, onChange, onSubmit, isSubmitting, submitError }: Step5Pr
   return (
     <div className="space-y-4">
       {/* Project summary */}
+      <div className="flex items-center gap-1 mb-1">
+        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider">Project Summary</p>
+        <InfoTooltip content="Review all project details before creation. The project, staffing demands, and any pre-assigned resources will be created together." />
+      </div>
       <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-2">
         <div className="grid grid-cols-2 gap-x-6 gap-y-1">
           <div>
@@ -941,8 +954,9 @@ function Step5({ state, onChange, onSubmit, isSubmitting, submitError }: Step5Pr
 
       {/* Draft toggle */}
       <div className="border border-gray-200 rounded-lg p-4">
-        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-3">
+        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-3 flex items-center gap-1">
           Save as
+          <InfoTooltip content="Draft projects are hidden from the timeline until activated. Active projects appear on the timeline immediately." />
         </p>
         <div className="flex gap-4">
           <label className="flex items-center gap-2 cursor-pointer">
@@ -1011,6 +1025,8 @@ export function ProjectWizard({ open, onClose }: ProjectWizardProps) {
   const [state, setState] = useState<WizardState>(makeDefaultState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
 
   const createProject = trpc.project.create.useMutation();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1127,7 +1143,12 @@ export function ProjectWizard({ open, onClose }: ProjectWizardProps) {
       await utils.project.list.invalidate();
       await utils.timeline.getEntries.invalidate();
       await utils.timeline.getEntriesView.invalidate();
-      handleClose();
+      setShowConfetti(true);
+      setShowSuccessToast(true);
+      setTimeout(() => {
+        setShowConfetti(false);
+        handleClose();
+      }, 1200);
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : "Failed to create project");
     } finally {
@@ -1146,7 +1167,14 @@ export function ProjectWizard({ open, onClose }: ProjectWizardProps) {
       className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4"
       onClick={handleBackdropClick}
     >
-      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl">
+      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative">
+        {/* Celebration effects */}
+        <ConfettiBurst trigger={showConfetti} />
+        <SuccessToast
+          show={showSuccessToast}
+          message="Project created successfully!"
+          onDone={() => setShowSuccessToast(false)}
+        />
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
           <h2 className="text-lg font-semibold text-gray-900">New Project Wizard</h2>
diff --git a/apps/web/src/components/projects/ScenarioPlanner.tsx b/apps/web/src/components/projects/ScenarioPlanner.tsx
new file mode 100644
index 0000000..b1a7b99
--- /dev/null
+++ b/apps/web/src/components/projects/ScenarioPlanner.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+import { useState, useCallback, useMemo } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import { DateInput } from "~/components/ui/DateInput.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
+import { formatMoney, formatDate } from "~/lib/format.js";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+interface BaselineAssignment {
+  id: string;
+  resourceId: string | null;
+  resourceName: string;
+  resourceEid: string;
+  lcrCents: number;
+  roleId: string | null;
+  roleName: string;
+  roleColor: string | null;
+  startDate: string;
+  endDate: string;
+  hoursPerDay: number;
+  status: string;
+  costCents: number;
+  totalHours: number;
+  workingDays: number;
+}
+
+interface BaselineDemand {
+  id: string;
+  roleId: string | null;
+  roleName: string;
+  roleColor: string | null;
+  startDate: string;
+  endDate: string;
+  hoursPerDay: number;
+  headcount: number;
+  status: string;
+}
+
+interface Baseline {
+  project: {
+    id: string;
+    name: string;
+    shortCode: string;
+    startDate: Date | string;
+    endDate: Date | string;
+    budgetCents: number | null;
+  };
+  assignments: BaselineAssignment[];
+  demands: BaselineDemand[];
+  totalCostCents: number;
+  totalHours: number;
+  budgetCents: number | null;
+}
+
+interface ResourceOption {
+  id: string;
+  displayName: string;
+  eid: string;
+  lcrCents: number;
+}
+
+interface RoleOption {
+  id: string;
+  name: string;
+  color: string | null;
+}
+
+interface ScenarioRow {
+  key: string;
+  assignmentId?: string;
+  resourceId: string;
+  roleId: string;
+  startDate: string;
+  endDate: string;
+  hoursPerDay: number;
+  remove?: boolean;
+}
+
+interface ScenarioPlannerProps {
+  projectId: string;
+  baseline: Baseline;
+  resources: ResourceOption[];
+  roles: RoleOption[];
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function toISODate(d: Date | string): string {
+  if (typeof d === "string") return d.split("T")[0] ?? d;
+  return d.toISOString().split("T")[0] ?? "";
+}
+
+let nextKey = 1;
+function genKey(): string {
+  return `new-${nextKey++}`;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function ScenarioPlanner({ projectId, baseline, resources, roles }: ScenarioPlannerProps) {
+  const projectStart = toISODate(baseline.project.startDate);
+  const projectEnd = toISODate(baseline.project.endDate);
+
+  // Initialize scenario rows from baseline assignments
+  const initialRows: ScenarioRow[] = baseline.assignments.map((a) => ({
+    key: a.id,
+    assignmentId: a.id,
+    resourceId: a.resourceId ?? "",
+    roleId: a.roleId ?? "",
+    startDate: toISODate(a.startDate),
+    endDate: toISODate(a.endDate),
+    hoursPerDay: a.hoursPerDay,
+  }));
+
+  const [rows, setRows] = useState<ScenarioRow[]>(initialRows);
+  const [showApplyConfirm, setShowApplyConfirm] = useState(false);
+
+  // Simulation mutation
+  const simulateMut = trpc.scenario.simulate.useMutation();
+  const applyMut = trpc.scenario.applyScenario.useMutation();
+
+  // Derived: has the scenario diverged from baseline?
+  const isDirty = useMemo(() => {
+    if (rows.length !== initialRows.length) return true;
+    return rows.some((r, i) => {
+      const init = initialRows[i];
+      if (!init) return true;
+      return (
+        r.resourceId !== init.resourceId ||
+        r.roleId !== init.roleId ||
+        r.startDate !== init.startDate ||
+        r.endDate !== init.endDate ||
+        r.hoursPerDay !== init.hoursPerDay ||
+        r.remove
+      );
+    });
+  }, [rows, initialRows]);
+
+  // Resource lookup map
+  const resourceMap = useMemo(() => new Map(resources.map((r) => [r.id, r])), [resources]);
+  const roleMap = useMemo(() => new Map(roles.map((r) => [r.id, r])), [roles]);
+
+  // ── Row Handlers ─────────────────────────────────────────────────────────
+
+  const updateRow = useCallback((key: string, updates: Partial<ScenarioRow>) => {
+    setRows((prev) => prev.map((r) => (r.key === key ? { ...r, ...updates } : r)));
+  }, []);
+
+  const removeRow = useCallback((key: string) => {
+    setRows((prev) => {
+      const row = prev.find((r) => r.key === key);
+      if (!row) return prev;
+      // If it's an existing assignment, mark for removal instead of deleting
+      if (row.assignmentId) {
+        return prev.map((r) => (r.key === key ? { ...r, remove: true } : r));
+      }
+      // New row — just remove it
+      return prev.filter((r) => r.key !== key);
+    });
+  }, []);
+
+  const restoreRow = useCallback((key: string) => {
+    setRows((prev) => prev.map((r) => (r.key === key ? { ...r, remove: false } : r)));
+  }, []);
+
+  const addRow = useCallback(() => {
+    setRows((prev) => [
+      ...prev,
+      {
+        key: genKey(),
+        resourceId: "",
+        roleId: "",
+        startDate: projectStart,
+        endDate: projectEnd,
+        hoursPerDay: 8,
+      },
+    ]);
+  }, [projectStart, projectEnd]);
+
+  const resetScenario = useCallback(() => {
+    setRows(initialRows);
+    simulateMut.reset();
+  }, [initialRows, simulateMut]);
+
+  // ── Simulate ─────────────────────────────────────────────────────────────
+
+  const runSimulation = useCallback(() => {
+    // Build changes array: only rows that differ from baseline or are new
+    const changes = rows
+      .filter((r) => {
+        if (r.remove) return true;
+        if (!r.assignmentId) return true; // new row
+        // Check if modified
+        const orig = initialRows.find((ir) => ir.key === r.key);
+        if (!orig) return true;
+        return (
+          r.resourceId !== orig.resourceId ||
+          r.roleId !== orig.roleId ||
+          r.startDate !== orig.startDate ||
+          r.endDate !== orig.endDate ||
+          r.hoursPerDay !== orig.hoursPerDay
+        );
+      })
+      .map((r) => ({
+        assignmentId: r.assignmentId,
+        resourceId: r.resourceId || undefined,
+        roleId: r.roleId || undefined,
+        startDate: new Date(r.startDate),
+        endDate: new Date(r.endDate),
+        hoursPerDay: r.hoursPerDay,
+        remove: r.remove,
+      }));
+
+    if (changes.length === 0) return;
+
+    simulateMut.mutate({ projectId, changes });
+  }, [rows, initialRows, projectId, simulateMut]);
+
+  // ── Apply ────────────────────────────────────────────────────────────────
+
+  const applyScenario = useCallback(() => {
+    const changes = rows
+      .filter((r) => {
+        if (r.remove) return true;
+        if (!r.assignmentId) return true;
+        const orig = initialRows.find((ir) => ir.key === r.key);
+        if (!orig) return true;
+        return (
+          r.resourceId !== orig.resourceId ||
+          r.roleId !== orig.roleId ||
+          r.startDate !== orig.startDate ||
+          r.endDate !== orig.endDate ||
+          r.hoursPerDay !== orig.hoursPerDay
+        );
+      })
+      .map((r) => ({
+        assignmentId: r.assignmentId,
+        resourceId: r.resourceId || undefined,
+        roleId: r.roleId || undefined,
+        startDate: new Date(r.startDate),
+        endDate: new Date(r.endDate),
+        hoursPerDay: r.hoursPerDay,
+        remove: r.remove,
+      }));
+
+    applyMut.mutate(
+      { projectId, changes },
+      {
+        onSuccess: () => {
+          setShowApplyConfirm(false);
+          // Reload page to see updated state
+          window.location.href = `/projects/${projectId}`;
+        },
+      },
+    );
+  }, [rows, initialRows, projectId, applyMut]);
+
+  const result = simulateMut.data;
+  const activeRows = rows.filter((r) => !r.remove);
+  const removedRows = rows.filter((r) => r.remove);
+
+  return (
+    <div className="space-y-6">
+      {/* Two-panel layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Left: Baseline (read-only) */}
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
+            Current Baseline
+          </h2>
+          <p className="text-xs text-gray-500 mb-4">
+            {baseline.assignments.length} assignment(s) &middot;{" "}
+            {formatMoney(baseline.totalCostCents)} total &middot;{" "}
+            {baseline.totalHours.toFixed(0)}h
+          </p>
+
+          {baseline.assignments.length === 0 ? (
+            <p className="text-sm text-gray-400 italic">No assignments yet.</p>
+          ) : (
+            <div className="space-y-2 max-h-[500px] overflow-y-auto">
+              {baseline.assignments.map((a) => (
+                <div
+                  key={a.id}
+                  className="flex items-center justify-between rounded-lg border border-gray-100 dark:border-gray-700 px-3 py-2 text-sm"
+                >
+                  <div className="min-w-0">
+                    <div className="font-medium text-gray-900 dark:text-gray-100 truncate">
+                      {a.resourceName}
+                      {a.roleName && (
+                        <span
+                          className="ml-2 inline-block px-1.5 py-0.5 text-xs rounded"
+                          style={{
+                            backgroundColor: a.roleColor ? `${a.roleColor}20` : "#f3f4f6",
+                            color: a.roleColor ?? "#6b7280",
+                          }}
+                        >
+                          {a.roleName}
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-xs text-gray-500 mt-0.5">
+                      {formatDate(a.startDate)} - {formatDate(a.endDate)} &middot;{" "}
+                      {a.hoursPerDay}h/d &middot; {a.workingDays} days
+                    </div>
+                  </div>
+                  <div className="text-right flex-shrink-0 ml-3">
+                    <div className="font-mono text-sm text-gray-900 dark:text-gray-100">
+                      {formatMoney(a.costCents)}
+                    </div>
+                    <div className="text-xs text-gray-500">{a.totalHours.toFixed(0)}h</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {baseline.demands.length > 0 && (
+            <div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Open Demands
+              </h3>
+              <div className="space-y-1">
+                {baseline.demands.map((d) => (
+                  <div key={d.id} className="text-xs text-gray-500 flex items-center gap-2">
+                    <span
+                      className="inline-block w-2 h-2 rounded-full"
+                      style={{ backgroundColor: d.roleColor ?? "#9ca3af" }}
+                    />
+                    {d.roleName || "Unspecified"} &middot; {d.headcount}x &middot;{" "}
+                    {d.hoursPerDay}h/d
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right: Scenario Editor */}
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                Scenario Editor
+              </h2>
+              <p className="text-xs text-gray-500">
+                {activeRows.length} allocation(s)
+                {removedRows.length > 0 && (
+                  <span className="text-red-500 ml-1">
+                    ({removedRows.length} removed)
+                  </span>
+                )}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              {isDirty && (
+                <button
+                  type="button"
+                  onClick={resetScenario}
+                  className="text-xs text-gray-500 hover:text-gray-700 underline"
+                >
+                  Reset
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={addRow}
+                className="inline-flex items-center gap-1 rounded-lg bg-brand-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-700 transition"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                Add Resource
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-3 max-h-[500px] overflow-y-auto">
+            {rows.map((row) => (
+              <ScenarioRowEditor
+                key={row.key}
+                row={row}
+                resources={resources}
+                roles={roles}
+                resourceMap={resourceMap}
+                roleMap={roleMap}
+                onUpdate={updateRow}
+                onRemove={removeRow}
+                onRestore={restoreRow}
+              />
+            ))}
+
+            {rows.length === 0 && (
+              <p className="text-sm text-gray-400 italic text-center py-6">
+                Add resources to build your scenario.
+              </p>
+            )}
+          </div>
+
+          {/* Action buttons */}
+          <div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-700 flex items-center gap-3">
+            <button
+              type="button"
+              onClick={runSimulation}
+              disabled={!isDirty || simulateMut.isPending}
+              className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {simulateMut.isPending ? (
+                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              ) : (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+              )}
+              Simulate
+            </button>
+
+            {result && (
+              <button
+                type="button"
+                onClick={() => setShowApplyConfirm(true)}
+                disabled={applyMut.isPending}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Apply Scenario
+              </button>
+            )}
+          </div>
+
+          {simulateMut.error && (
+            <p className="mt-2 text-sm text-red-600">{simulateMut.error.message}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Impact Summary */}
+      {result && <ImpactSummary result={result} budgetCents={baseline.budgetCents ?? 0} />}
+
+      {/* Apply confirmation dialog */}
+      {showApplyConfirm && (
+        <ConfirmDialog
+          title="Apply Scenario"
+          message="This will create/modify real assignments based on your scenario. Existing assignments may be changed or cancelled. This action cannot be undone."
+          confirmLabel={applyMut.isPending ? "Applying..." : "Apply"}
+          onConfirm={applyScenario}
+          onCancel={() => setShowApplyConfirm(false)}
+        />
+      )}
+
+      {applyMut.isSuccess && (
+        <div className="rounded-lg bg-green-50 border border-green-200 p-4 text-sm text-green-800">
+          Scenario applied successfully. Redirecting...
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── ScenarioRowEditor ────────────────────────────────────────────────────────
+
+interface ScenarioRowEditorProps {
+  row: ScenarioRow;
+  resources: ResourceOption[];
+  roles: RoleOption[];
+  resourceMap: Map<string, ResourceOption>;
+  roleMap: Map<string, RoleOption>;
+  onUpdate: (key: string, updates: Partial<ScenarioRow>) => void;
+  onRemove: (key: string) => void;
+  onRestore: (key: string) => void;
+}
+
+function ScenarioRowEditor({
+  row,
+  resources,
+  roles,
+  resourceMap,
+  roleMap,
+  onUpdate,
+  onRemove,
+  onRestore,
+}: ScenarioRowEditorProps) {
+  const isRemoved = row.remove;
+  const resource = row.resourceId ? resourceMap.get(row.resourceId) : null;
+  const lcrDisplay = resource ? `${formatMoney(resource.lcrCents)}/h` : "";
+
+  return (
+    <div
+      className={`rounded-lg border p-3 transition ${
+        isRemoved
+          ? "border-red-200 bg-red-50/50 dark:border-red-800 dark:bg-red-900/10 opacity-60"
+          : row.assignmentId
+            ? "border-gray-200 dark:border-gray-700"
+            : "border-blue-200 bg-blue-50/30 dark:border-blue-800 dark:bg-blue-900/10"
+      }`}
+    >
+      {isRemoved ? (
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-red-600 line-through">
+            {resource?.displayName ?? "Unknown"} &mdash; removed
+          </span>
+          <button
+            type="button"
+            onClick={() => onRestore(row.key)}
+            className="text-xs text-blue-600 hover:text-blue-800 underline"
+          >
+            Restore
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {/* Top row: resource + role + remove */}
+          <div className="flex items-center gap-2">
+            <select
+              value={row.resourceId}
+              onChange={(e) => onUpdate(row.key, { resourceId: e.target.value })}
+              className="flex-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1.5 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-transparent"
+            >
+              <option value="">Select resource...</option>
+              {resources.map((r) => (
+                <option key={r.id} value={r.id}>
+                  {r.displayName} ({r.eid})
+                </option>
+              ))}
+            </select>
+
+            <select
+              value={row.roleId}
+              onChange={(e) => onUpdate(row.key, { roleId: e.target.value })}
+              className="w-40 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1.5 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-transparent"
+            >
+              <option value="">Role...</option>
+              {roles.map((r) => (
+                <option key={r.id} value={r.id}>
+                  {r.name}
+                </option>
+              ))}
+            </select>
+
+            <button
+              type="button"
+              onClick={() => onRemove(row.key)}
+              className="p-1.5 text-gray-400 hover:text-red-500 transition rounded"
+              title="Remove from scenario"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Bottom row: dates + hours + LCR info */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1">
+              <label className="text-xs text-gray-500 whitespace-nowrap">From</label>
+              <DateInput
+                value={row.startDate}
+                onChange={(v) => onUpdate(row.key, { startDate: v })}
+                className="w-28 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-gray-900 dark:text-gray-100"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <label className="text-xs text-gray-500 whitespace-nowrap">To</label>
+              <DateInput
+                value={row.endDate}
+                onChange={(v) => onUpdate(row.key, { endDate: v })}
+                className="w-28 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-gray-900 dark:text-gray-100"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <label className="text-xs text-gray-500 whitespace-nowrap">h/day</label>
+              <input
+                type="number"
+                min={0}
+                max={24}
+                step={0.5}
+                value={row.hoursPerDay}
+                onChange={(e) => onUpdate(row.key, { hoursPerDay: parseFloat(e.target.value) || 0 })}
+                className="w-16 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-gray-900 dark:text-gray-100 text-center"
+              />
+            </div>
+            {lcrDisplay && (
+              <span className="text-xs text-gray-400 ml-auto">{lcrDisplay}</span>
+            )}
+            {!row.assignmentId && (
+              <span className="text-xs text-blue-500 font-medium">NEW</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── ImpactSummary ────────────────────────────────────────────────────────────
+
+interface SimulationResult {
+  baseline: { totalCostCents: number; totalHours: number; headcount: number; skillCount: number };
+  scenario: { totalCostCents: number; totalHours: number; headcount: number; skillCount: number };
+  delta: { costCents: number; hours: number; headcount: number; skillCoveragePct: number };
+  resourceImpacts: Array<{
+    resourceId: string;
+    resourceName: string;
+    chargeabilityTarget: number;
+    currentUtilization: number;
+    scenarioUtilization: number;
+    utilizationDelta: number;
+    isOverallocated: boolean;
+  }>;
+  warnings: string[];
+  budgetCents: number;
+}
+
+function ImpactSummary({ result, budgetCents }: { result: SimulationResult; budgetCents: number }) {
+  const { baseline, scenario, delta, resourceImpacts, warnings } = result;
+
+  const costSign = delta.costCents > 0 ? "+" : "";
+  const hoursSign = delta.hours > 0 ? "+" : "";
+  const headcountSign = delta.headcount > 0 ? "+" : "";
+
+  const costColor = delta.costCents > 0 ? "text-red-600" : delta.costCents < 0 ? "text-green-600" : "text-gray-500";
+  const hoursColor = delta.hours > 0 ? "text-amber-600" : delta.hours < 0 ? "text-blue-600" : "text-gray-500";
+
+  const budgetUsedPct = budgetCents > 0 ? Math.round((scenario.totalCostCents / budgetCents) * 100) : null;
+
+  return (
+    <div className="space-y-4">
+      {/* Delta cards */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        <DeltaCard
+          label="Cost Impact"
+          value={`${costSign}${formatMoney(delta.costCents)}`}
+          subtitle={`${formatMoney(scenario.totalCostCents)} total`}
+          color={costColor}
+        />
+        <DeltaCard
+          label="Hours Impact"
+          value={`${hoursSign}${delta.hours.toFixed(0)}h`}
+          subtitle={`${scenario.totalHours.toFixed(0)}h total`}
+          color={hoursColor}
+        />
+        <DeltaCard
+          label="Headcount"
+          value={`${headcountSign}${delta.headcount}`}
+          subtitle={`${scenario.headcount} total`}
+          color={delta.headcount !== 0 ? "text-indigo-600" : "text-gray-500"}
+        />
+        <DeltaCard
+          label="Skill Coverage"
+          value={`${delta.skillCoveragePct}%`}
+          subtitle={`${scenario.skillCount} unique skills`}
+          color={delta.skillCoveragePct >= 100 ? "text-green-600" : "text-amber-600"}
+        />
+      </div>
+
+      {/* Budget progress */}
+      {budgetUsedPct !== null && (
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex items-center justify-between text-sm mb-2">
+            <span className="text-gray-600 dark:text-gray-400">Budget Usage</span>
+            <span className={`font-medium ${budgetUsedPct > 100 ? "text-red-600" : "text-gray-900 dark:text-gray-100"}`}>
+              {budgetUsedPct}% of {formatMoney(budgetCents)}
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div
+              className={`h-2 rounded-full transition-all ${
+                budgetUsedPct > 100 ? "bg-red-500" : budgetUsedPct > 80 ? "bg-amber-500" : "bg-green-500"
+              }`}
+              style={{ width: `${Math.min(budgetUsedPct, 100)}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Warnings */}
+      {warnings.length > 0 && (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20 p-4">
+          <h3 className="text-sm font-medium text-amber-800 dark:text-amber-200 mb-2">Warnings</h3>
+          <ul className="space-y-1">
+            {warnings.map((w, i) => (
+              <li key={i} className="text-sm text-amber-700 dark:text-amber-300 flex items-start gap-2">
+                <svg className="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                {w}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Resource utilization impacts */}
+      {resourceImpacts.length > 0 && (
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            Resource Utilization Impact
+          </h3>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-xs text-gray-500 border-b border-gray-100 dark:border-gray-700">
+                  <th className="text-left py-2 pr-4 font-medium">Resource</th>
+                  <th className="text-right py-2 px-3 font-medium">Current</th>
+                  <th className="text-right py-2 px-3 font-medium">Scenario</th>
+                  <th className="text-right py-2 px-3 font-medium">Delta</th>
+                  <th className="text-right py-2 pl-3 font-medium">Target</th>
+                </tr>
+              </thead>
+              <tbody>
+                {resourceImpacts.map((ri) => (
+                  <tr
+                    key={ri.resourceId}
+                    className={`border-b border-gray-50 dark:border-gray-800 ${
+                      ri.isOverallocated ? "bg-red-50/50 dark:bg-red-900/10" : ""
+                    }`}
+                  >
+                    <td className="py-2 pr-4 font-medium text-gray-900 dark:text-gray-100">
+                      {ri.resourceName}
+                      {ri.isOverallocated && (
+                        <span className="ml-2 text-xs text-red-500 font-normal">over-allocated</span>
+                      )}
+                    </td>
+                    <td className="text-right py-2 px-3 text-gray-600 dark:text-gray-400">
+                      {ri.currentUtilization.toFixed(1)}%
+                    </td>
+                    <td className={`text-right py-2 px-3 font-medium ${ri.isOverallocated ? "text-red-600" : "text-gray-900 dark:text-gray-100"}`}>
+                      {ri.scenarioUtilization.toFixed(1)}%
+                    </td>
+                    <td className={`text-right py-2 px-3 ${
+                      ri.utilizationDelta > 0 ? "text-amber-600" : ri.utilizationDelta < 0 ? "text-blue-600" : "text-gray-500"
+                    }`}>
+                      {ri.utilizationDelta > 0 ? "+" : ""}{ri.utilizationDelta.toFixed(1)}%
+                    </td>
+                    <td className="text-right py-2 pl-3 text-gray-500">
+                      {ri.chargeabilityTarget}%
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── DeltaCard ────────────────────────────────────────────────────────────────
+
+function DeltaCard({
+  label,
+  value,
+  subtitle,
+  color,
+}: {
+  label: string;
+  value: string;
+  subtitle: string;
+  color: string;
+}) {
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+      <p className="text-xs text-gray-500 mb-1">{label}</p>
+      <p className={`text-xl font-bold ${color}`}>{value}</p>
+      <p className="text-xs text-gray-400 mt-1">{subtitle}</p>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/reports/AllocationReport.tsx b/apps/web/src/components/reports/AllocationReport.tsx
index 3d24222..de74394 100644
--- a/apps/web/src/components/reports/AllocationReport.tsx
+++ b/apps/web/src/components/reports/AllocationReport.tsx
@@ -63,7 +63,7 @@ export function AllocationReport({ title, generatedAt, rows }: AllocationReportP
           ))}
         </View>
 
-        <Text style={styles.footer}>Planarchy · Confidential · {rows.length} allocations</Text>
+        <Text style={styles.footer}>plANARCHY · Confidential · {rows.length} allocations</Text>
       </Page>
     </Document>
   );
diff --git a/apps/web/src/components/reports/ChargeabilityReportClient.tsx b/apps/web/src/components/reports/ChargeabilityReportClient.tsx
index ba9a5ac..d839460 100644
--- a/apps/web/src/components/reports/ChargeabilityReportClient.tsx
+++ b/apps/web/src/components/reports/ChargeabilityReportClient.tsx
@@ -2,6 +2,8 @@
 
 import React, { useState, useMemo, useCallback } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
@@ -333,13 +335,13 @@ export function ChargeabilityReportClient() {
           <div className="space-y-1 text-xs text-gray-500 dark:text-gray-400">
             <div>Mgmt: {r.mgmtGroup ?? "—"} / {r.mgmtLevel ?? "—"}</div>
             <div className="mt-2 grid grid-cols-7 gap-1 text-[10px] uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
-              <span className="font-medium">Chg</span>
-              <span className="font-medium">BD</span>
-              <span className="font-medium">MD&I</span>
-              <span className="font-medium">M&O</span>
-              <span className="font-medium">PD&R</span>
-              <span className="font-medium">Abs</span>
-              <span className="font-medium">Free</span>
+              <span className="font-medium inline-flex items-center gap-0.5">Chg<InfoTooltip content="Chargeability: % of available hours on chargeable work." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">BD<InfoTooltip content="Business Development hours as % of available time." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">MD&I<InfoTooltip content="Market Development & Innovation hours %." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">M&O<InfoTooltip content="Management & Overhead hours %." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">PD&R<InfoTooltip content="People Development & Recruiting hours %." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">Abs<InfoTooltip content="Absence (vacation, sick) as % of working time." /></span>
+              <span className="font-medium inline-flex items-center gap-0.5">Free<InfoTooltip content="Unassigned / free capacity as % of available hours." /></span>
             </div>
           </div>
         </td>
@@ -438,22 +440,31 @@ export function ChargeabilityReportClient() {
       {data ? (
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
           <div className="app-surface p-4">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500">Resources</div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 inline-flex items-center gap-0.5">Resources<InfoTooltip content="Number of active resources matching the current filters." /></div>
             <div className="mt-2 text-3xl font-semibold text-gray-900 dark:text-gray-100">{filteredResources.length}</div>
             <div className="mt-1 text-sm text-gray-500">People in the current filter scope</div>
           </div>
           <div className="app-surface p-4">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500">Average Chargeability</div>
-            <div className={`mt-2 text-3xl font-semibold ${chgColor(averageChargeability, averageTarget)}`}>{pct(averageChargeability)}</div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 inline-flex items-center gap-0.5">Average Chargeability<InfoTooltip content="FTE-weighted average chargeability across all visible resources. Formula: sum(FTE x Chg%) / sum(FTE)." /></div>
+            <div className="mt-2 flex items-center gap-3">
+              <ProgressRing
+                value={Math.round(averageChargeability * 100)}
+                size={56}
+                strokeWidth={4}
+                color={averageChargeability >= averageTarget ? "var(--color-green-500, #22c55e)" : averageChargeability >= averageTarget - 0.1 ? "var(--color-amber-500, #f59e0b)" : "var(--color-red-500, #ef4444)"}
+              >
+                <span className={`text-lg font-semibold ${chgColor(averageChargeability, averageTarget)}`}>{pct(averageChargeability)}</span>
+              </ProgressRing>
+            </div>
             <div className="mt-1 text-sm text-gray-500">Weighted across visible resources</div>
           </div>
           <div className="app-surface p-4">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500">Average Target</div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 inline-flex items-center gap-0.5">Average Target<InfoTooltip content="FTE-weighted average chargeability target set per resource. The benchmark for actual performance." /></div>
             <div className="mt-2 text-3xl font-semibold text-gray-900 dark:text-gray-100">{pct(averageTarget)}</div>
             <div className="mt-1 text-sm text-gray-500">Planning target for the same population</div>
           </div>
           <div className="app-surface p-4">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500">Average Gap</div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 inline-flex items-center gap-0.5">Average Gap<InfoTooltip content="Chargeability minus target. Green = above target, red = below target." /></div>
             <div className={`mt-2 text-3xl font-semibold ${averageGap >= 0 ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"}`}>
               {averageGap > 0 ? "+" : ""}{pct(averageGap)}
             </div>
@@ -585,8 +596,8 @@ export function ChargeabilityReportClient() {
                   <th className="sticky left-0 z-10 min-w-[240px] bg-gray-50/95 px-4 py-3 text-left backdrop-blur dark:bg-gray-800/95">
                     Resource
                   </th>
-                  <th className="w-20 px-3 py-3 text-center">FTE</th>
-                  <th className="w-24 px-3 py-3 text-center">Target</th>
+                  <th className="w-20 px-3 py-3 text-center"><span className="inline-flex items-center justify-center gap-0.5">FTE<InfoTooltip content="Full-Time Equivalent. 1.0 = full-time, 0.5 = half-time. Used to weight chargeability averages." /></span></th>
+                  <th className="w-24 px-3 py-3 text-center"><span className="inline-flex items-center justify-center gap-0.5">Target<InfoTooltip content="Chargeability target for this resource. Cells are green/yellow/red relative to this target." /></span></th>
                   {data.monthKeys.map((key) => (
                     <th key={key} className="min-w-[96px] px-3 py-3 text-center">
                       {formatMonth(key)}
diff --git a/apps/web/src/components/reports/ReportBuilder.tsx b/apps/web/src/components/reports/ReportBuilder.tsx
new file mode 100644
index 0000000..83fdccb
--- /dev/null
+++ b/apps/web/src/components/reports/ReportBuilder.tsx
@@ -0,0 +1,564 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import { keepPreviousData } from "@tanstack/react-query";
+import { trpc } from "~/lib/trpc/client.js";
+import { clsx } from "clsx";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+type EntityType = "resource" | "project" | "assignment";
+type FilterOp = "eq" | "neq" | "gt" | "lt" | "gte" | "lte" | "contains" | "in";
+
+interface FilterRow {
+  id: string;
+  field: string;
+  op: FilterOp;
+  value: string;
+}
+
+const ENTITY_OPTIONS: { value: EntityType; label: string }[] = [
+  { value: "resource", label: "Resources" },
+  { value: "project", label: "Projects" },
+  { value: "assignment", label: "Assignments" },
+];
+
+const OPERATOR_OPTIONS: { value: FilterOp; label: string }[] = [
+  { value: "eq", label: "equals" },
+  { value: "neq", label: "not equals" },
+  { value: "gt", label: "greater than" },
+  { value: "lt", label: "less than" },
+  { value: "gte", label: ">= (gte)" },
+  { value: "lte", label: "<= (lte)" },
+  { value: "contains", label: "contains" },
+  { value: "in", label: "in (comma-sep)" },
+];
+
+const PAGE_SIZE = 50;
+
+function generateId(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export function ReportBuilder() {
+  // Config state
+  const [entity, setEntity] = useState<EntityType>("resource");
+  const [selectedColumns, setSelectedColumns] = useState<Set<string>>(new Set());
+  const [filters, setFilters] = useState<FilterRow[]>([]);
+  const [groupBy, setGroupBy] = useState<string>("");
+  const [sortBy, setSortBy] = useState<string>("");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [page, setPage] = useState(0);
+  const [runQuery, setRunQuery] = useState(false);
+
+  // Fetch available columns when entity changes
+  const columnsQuery = trpc.report.getAvailableColumns.useQuery(
+    { entity },
+    { placeholderData: keepPreviousData },
+  );
+
+  const availableColumns = columnsQuery.data ?? [];
+
+  // Scalar columns (for filter/sort/group — only non-relation columns)
+  const scalarColumns = useMemo(
+    () => availableColumns.filter((c) => !c.key.includes(".")),
+    [availableColumns],
+  );
+
+  // Build query input
+  const queryInput = useMemo(() => {
+    if (!runQuery || selectedColumns.size === 0) return null;
+    return {
+      entity,
+      columns: Array.from(selectedColumns),
+      filters: filters
+        .filter((f) => f.field && f.value)
+        .map(({ field, op, value }) => ({ field, op, value })),
+      ...(groupBy ? { groupBy } : {}),
+      ...(sortBy ? { sortBy, sortDir } : {}),
+      limit: PAGE_SIZE,
+      offset: page * PAGE_SIZE,
+    };
+  }, [runQuery, entity, selectedColumns, filters, groupBy, sortBy, sortDir, page]);
+
+  // Fetch report data
+  const reportQuery = trpc.report.getReportData.useQuery(
+    queryInput!,
+    { enabled: queryInput !== null, placeholderData: keepPreviousData },
+  );
+
+  const exportMutation = trpc.report.exportReport.useMutation();
+
+  // ─── Handlers ───────────────────────────────────────────────────────────
+
+  const handleEntityChange = useCallback((newEntity: EntityType) => {
+    setEntity(newEntity);
+    setSelectedColumns(new Set());
+    setFilters([]);
+    setGroupBy("");
+    setSortBy("");
+    setRunQuery(false);
+    setPage(0);
+  }, []);
+
+  const toggleColumn = useCallback((key: string) => {
+    setSelectedColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAllColumns = useCallback(() => {
+    setSelectedColumns(new Set(availableColumns.map((c) => c.key)));
+  }, [availableColumns]);
+
+  const clearAllColumns = useCallback(() => {
+    setSelectedColumns(new Set());
+  }, []);
+
+  const addFilter = useCallback(() => {
+    const firstField = scalarColumns[0]?.key ?? "";
+    setFilters((prev) => [...prev, { id: generateId(), field: firstField, op: "eq", value: "" }]);
+  }, [scalarColumns]);
+
+  const updateFilter = useCallback((id: string, patch: Partial<FilterRow>) => {
+    setFilters((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+  }, []);
+
+  const removeFilter = useCallback((id: string) => {
+    setFilters((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const handleRun = useCallback(() => {
+    setPage(0);
+    setRunQuery(true);
+  }, []);
+
+  const handleSort = useCallback((column: string) => {
+    if (!column.includes(".")) {
+      if (sortBy === column) {
+        setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
+      } else {
+        setSortBy(column);
+        setSortDir("asc");
+      }
+      // Re-run with new sort
+      setRunQuery(true);
+    }
+  }, [sortBy]);
+
+  const handleExport = useCallback(async () => {
+    if (selectedColumns.size === 0) return;
+    try {
+      const result = await exportMutation.mutateAsync({
+        entity,
+        columns: Array.from(selectedColumns),
+        filters: filters
+          .filter((f) => f.field && f.value)
+          .map(({ field, op, value }) => ({ field, op, value })),
+        ...(groupBy ? { groupBy } : {}),
+        ...(sortBy ? { sortBy, sortDir } : {}),
+        limit: 5000,
+      });
+
+      // Download CSV
+      const blob = new Blob([result.csv], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `report-${entity}-${new Date().toISOString().slice(0, 10)}.csv`;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      // Error handled by tRPC
+    }
+  }, [entity, selectedColumns, filters, groupBy, sortBy, sortDir, exportMutation]);
+
+  // ─── Derived ──────────────────────────────────────────────────────────
+
+  const rows = reportQuery.data?.rows ?? [];
+  const totalCount = reportQuery.data?.totalCount ?? 0;
+  const outputColumns = reportQuery.data?.columns ?? [];
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+  const isLoading = reportQuery.isFetching;
+
+  // Column label lookup
+  const columnLabelMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const col of availableColumns) {
+      map.set(col.key, col.label);
+    }
+    return map;
+  }, [availableColumns]);
+
+  // ─── Render ───────────────────────────────────────────────────────────
+
+  return (
+    <div className="mx-auto max-w-[1600px] space-y-6 p-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Report Builder</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          Build custom reports by selecting an entity, columns, and filters.
+        </p>
+      </div>
+
+      {/* Config Panel */}
+      <div className="space-y-5 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+        {/* Entity Selector */}
+        <div>
+          <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Entity
+          </label>
+          <div className="flex gap-3">
+            {ENTITY_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => handleEntityChange(opt.value)}
+                className={clsx(
+                  "rounded-xl px-4 py-2 text-sm font-medium transition-colors",
+                  entity === opt.value
+                    ? "bg-brand-600 text-white shadow-sm"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-slate-800 dark:text-gray-300 dark:hover:bg-slate-700",
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Column Picker */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Columns ({selectedColumns.size} selected)
+            </label>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={selectAllColumns}
+                className="text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400"
+              >
+                Select all
+              </button>
+              <span className="text-xs text-gray-300 dark:text-gray-600">|</span>
+              <button
+                type="button"
+                onClick={clearAllColumns}
+                className="text-xs font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+          {columnsQuery.isLoading ? (
+            <div className="py-3 text-sm text-gray-400">Loading columns...</div>
+          ) : (
+            <div className="grid grid-cols-2 gap-x-4 gap-y-1 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+              {availableColumns.map((col) => (
+                <label
+                  key={col.key}
+                  className="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-gray-50 dark:hover:bg-slate-900"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedColumns.has(col.key)}
+                    onChange={() => toggleColumn(col.key)}
+                    className="h-3.5 w-3.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600"
+                  />
+                  <span className="text-gray-700 dark:text-gray-300">{col.label}</span>
+                  <span className="ml-auto text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-600">
+                    {col.dataType}
+                  </span>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Filter Builder */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Filters
+            </label>
+            <button
+              type="button"
+              onClick={addFilter}
+              className="flex items-center gap-1 text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400"
+            >
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Add filter
+            </button>
+          </div>
+          {filters.length === 0 ? (
+            <p className="text-sm text-gray-400 dark:text-gray-500">No filters applied.</p>
+          ) : (
+            <div className="space-y-2">
+              {filters.map((filter) => (
+                <div key={filter.id} className="flex items-center gap-2">
+                  {/* Field */}
+                  <select
+                    value={filter.field}
+                    onChange={(e) => updateFilter(filter.id, { field: e.target.value })}
+                    className="w-44 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300"
+                  >
+                    {scalarColumns.map((col) => (
+                      <option key={col.key} value={col.key}>{col.label}</option>
+                    ))}
+                  </select>
+
+                  {/* Operator */}
+                  <select
+                    value={filter.op}
+                    onChange={(e) => updateFilter(filter.id, { op: e.target.value as FilterOp })}
+                    className="w-36 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300"
+                  >
+                    {OPERATOR_OPTIONS.map((op) => (
+                      <option key={op.value} value={op.value}>{op.label}</option>
+                    ))}
+                  </select>
+
+                  {/* Value */}
+                  <input
+                    type="text"
+                    value={filter.value}
+                    onChange={(e) => updateFilter(filter.id, { value: e.target.value })}
+                    placeholder="Value..."
+                    className="min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 placeholder:text-gray-400 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300 dark:placeholder:text-gray-600"
+                  />
+
+                  {/* Remove */}
+                  <button
+                    type="button"
+                    onClick={() => removeFilter(filter.id)}
+                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950 dark:hover:text-red-400"
+                    title="Remove filter"
+                  >
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Sort & Group */}
+        <div className="flex flex-wrap gap-4">
+          <div className="min-w-[160px]">
+            <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Group by
+            </label>
+            <select
+              value={groupBy}
+              onChange={(e) => setGroupBy(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300"
+            >
+              <option value="">None</option>
+              {scalarColumns.map((col) => (
+                <option key={col.key} value={col.key}>{col.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="min-w-[160px]">
+            <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Sort by
+            </label>
+            <select
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300"
+            >
+              <option value="">Default</option>
+              {scalarColumns.map((col) => (
+                <option key={col.key} value={col.key}>{col.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="min-w-[120px]">
+            <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Direction
+            </label>
+            <select
+              value={sortDir}
+              onChange={(e) => setSortDir(e.target.value as "asc" | "desc")}
+              className="w-full rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300"
+            >
+              <option value="asc">Ascending</option>
+              <option value="desc">Descending</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Run button */}
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={handleRun}
+            disabled={selectedColumns.size === 0}
+            className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Run Report
+          </button>
+          {selectedColumns.size === 0 && (
+            <span className="text-sm text-gray-400 dark:text-gray-500">Select at least one column</span>
+          )}
+        </div>
+      </div>
+
+      {/* Results */}
+      {runQuery && (
+        <div className="rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          {/* Results Header */}
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-slate-800">
+            <div className="flex items-center gap-3">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-50">Results</h2>
+              {!isLoading && (
+                <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-slate-800 dark:text-gray-400">
+                  {totalCount.toLocaleString()} row{totalCount !== 1 ? "s" : ""}
+                </span>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => void handleExport()}
+              disabled={exportMutation.isPending || totalCount === 0}
+              className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-300 dark:hover:bg-slate-800"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              {exportMutation.isPending ? "Exporting..." : "Export CSV"}
+            </button>
+          </div>
+
+          {/* Table */}
+          <div className="overflow-x-auto">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-600 border-t-transparent" />
+              </div>
+            ) : rows.length === 0 ? (
+              <div className="py-16 text-center text-sm text-gray-400 dark:text-gray-500">
+                No data found. Try adjusting your filters.
+              </div>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-gray-200 bg-gray-50/80 dark:border-slate-800 dark:bg-slate-900/50">
+                    {outputColumns.map((col) => {
+                      const isSortable = !col.includes(".");
+                      const isSorted = sortBy === col;
+                      return (
+                        <th
+                          key={col}
+                          onClick={isSortable ? () => handleSort(col) : undefined}
+                          className={clsx(
+                            "whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
+                            isSortable && "cursor-pointer select-none hover:text-gray-700 dark:hover:text-gray-200",
+                          )}
+                        >
+                          <span className="inline-flex items-center gap-1">
+                            {columnLabelMap.get(col) ?? col}
+                            {isSorted && (
+                              <svg className={clsx("h-3 w-3", sortDir === "desc" && "rotate-180")} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+                              </svg>
+                            )}
+                          </span>
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100 dark:divide-slate-800/60">
+                  {rows.map((row, idx) => (
+                    <tr
+                      key={(row.id as string) ?? idx}
+                      className="transition-colors hover:bg-gray-50/60 dark:hover:bg-slate-900/40"
+                    >
+                      {outputColumns.map((col) => (
+                        <td
+                          key={col}
+                          className="whitespace-nowrap px-4 py-2.5 text-gray-700 dark:text-gray-300"
+                        >
+                          {formatCellValue(row[col])}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between border-t border-gray-200 px-6 py-3 dark:border-slate-800">
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                Page {page + 1} of {totalPages}
+              </span>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.max(0, p - 1))}
+                  disabled={page === 0}
+                  className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-gray-300 dark:hover:bg-slate-800"
+                >
+                  Previous
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-gray-300 dark:hover:bg-slate-800"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function formatCellValue(value: unknown): string {
+  if (value === null || value === undefined) return "--";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "string") {
+    // ISO date detection
+    if (/^\d{4}-\d{2}-\d{2}T/.test(value)) {
+      return new Date(value).toLocaleDateString("de-DE", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      });
+    }
+    return value;
+  }
+  if (typeof value === "number") {
+    return value.toLocaleString("de-DE");
+  }
+  return String(value);
+}
diff --git a/apps/web/src/components/resources/ResourceDetail.tsx b/apps/web/src/components/resources/ResourceDetail.tsx
index 17a52dd..376aee5 100644
--- a/apps/web/src/components/resources/ResourceDetail.tsx
+++ b/apps/web/src/components/resources/ResourceDetail.tsx
@@ -2,15 +2,31 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import type { AllocationLike, AllocationReadModel, AllocationWithDetails, Resource, SkillEntry } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
-import { formatDate } from "~/lib/format.js";
+import { formatDate, formatMoney } from "~/lib/format.js";
 import { ResourceModal } from "./ResourceModal.js";
-import { SkillRadarChart } from "./SkillRadarChart.js";
-import { AiSummaryCard } from "./AiSummaryCard.js";
-import { SkillMatrixUpload } from "./SkillMatrixUpload.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
 
+const SkillRadarChart = dynamic(
+  () => import("~/components/resources/SkillRadarChart.js").then((mod) => ({ default: mod.SkillRadarChart })),
+  { ssr: false, loading: () => <div className="h-64 shimmer-skeleton rounded-xl" /> },
+);
+
+const AiSummaryCard = dynamic(
+  () => import("~/components/resources/AiSummaryCard.js").then((mod) => ({ default: mod.AiSummaryCard })),
+  { ssr: false },
+);
+
+const SkillMatrixUpload = dynamic(
+  () => import("~/components/resources/SkillMatrixUpload.js").then((mod) => ({ default: mod.SkillMatrixUpload })),
+  { ssr: false },
+);
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
+import { FadeIn } from "~/components/ui/FadeIn.js";
+
 interface ResourceDetailProps {
   resourceId: string;
 }
@@ -24,11 +40,11 @@ const proficiencyLabel: Record<number, string> = {
 };
 
 const proficiencyColor: Record<number, string> = {
-  1: "bg-gray-100 text-gray-600",
-  2: "bg-blue-50 text-blue-600",
-  3: "bg-brand-50 text-brand-700",
-  4: "bg-amber-50 text-amber-700",
-  5: "bg-green-50 text-green-700",
+  1: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300",
+  2: "bg-blue-50 text-blue-600 dark:bg-blue-900/50 dark:text-blue-300",
+  3: "bg-brand-50 text-brand-700 dark:bg-brand-900/50 dark:text-brand-200",
+  4: "bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+  5: "bg-green-50 text-green-700 dark:bg-green-900/50 dark:text-green-300",
 };
 
 const vacationStatusColor: Record<string, string> = {
@@ -46,11 +62,19 @@ const allocationStatusColor: Record<string, string> = {
   CANCELLED: "bg-red-100 text-red-500",
 };
 
-function StatCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
+function StatCard({ label, value, sub, tooltip, ring }: { label: string; value: string | number; sub?: string; tooltip?: string; ring?: { value: number; color: string } }) {
   return (
-    <div className="bg-white rounded-xl border border-gray-200 p-4">
-      <div className="text-xs text-gray-500 mb-1">{label}</div>
-      <div className="text-xl font-bold text-gray-900">{value}</div>
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+      <div className="text-xs text-gray-500 mb-1 flex items-center">{label}{tooltip && <InfoTooltip content={tooltip} />}</div>
+      {ring ? (
+        <div className="flex items-center gap-3">
+          <ProgressRing value={ring.value} size={48} strokeWidth={3.5} color={ring.color}>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{value}</span>
+          </ProgressRing>
+        </div>
+      ) : (
+        <div className="text-xl font-bold text-gray-900 dark:text-gray-100">{value}</div>
+      )}
       {sub && <div className="text-xs text-gray-400 mt-0.5">{sub}</div>}
     </div>
   );
@@ -108,11 +132,11 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
   if (loadingResource) {
     return (
       <div className="p-6">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-gray-200 rounded w-64" />
-          <div className="h-4 bg-gray-100 rounded w-48" />
+        <div className="space-y-4">
+          <div className="h-8 shimmer-skeleton rounded w-64" />
+          <div className="h-4 shimmer-skeleton rounded w-48" />
           <div className="grid grid-cols-4 gap-4">
-            {[0, 1, 2, 3].map((i) => <div key={i} className="h-20 bg-gray-100 rounded-xl" />)}
+            {[0, 1, 2, 3].map((i) => <div key={i} className="h-20 shimmer-skeleton rounded-xl" style={{ animationDelay: `${i * 50}ms` }} />)}
           </div>
         </div>
       </div>
@@ -210,10 +234,10 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0">
           <div className="flex items-center gap-3 flex-wrap">
-            <h1 className="text-2xl font-bold text-gray-900 truncate">{resource.displayName}</h1>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">{resource.displayName}</h1>
             <span
               className={`flex-shrink-0 px-2.5 py-0.5 text-xs font-medium rounded-full ${
-                resource.isActive ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
+                resource.isActive ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300" : "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
               }`}
             >
               {resource.isActive ? "Active" : "Inactive"}
@@ -275,40 +299,60 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
         {canViewCosts && (
           <StatCard
             label="LCR"
-            value={`${(resource.lcrCents / 100).toFixed(0)} ${resource.currency}/h`}
+            value={`${formatMoney(resource.lcrCents, resource.currency)}/h`}
+            tooltip="Loaded Cost Rate: fully-loaded hourly cost including salary, benefits, and overhead. Used in budget calculations."
           />
         )}
         {canViewCosts && (
           <StatCard
             label="UCR"
-            value={`${(resource.ucrCents / 100).toFixed(0)} ${resource.currency}/h`}
+            value={`${formatMoney(resource.ucrCents, resource.currency)}/h`}
+            tooltip="Unit Cost Rate: the rate charged to the client or project for this resource's time."
           />
         )}
         <StatCard
           label="Chargeability Target"
           value={`${resource.chargeabilityTarget}%`}
+          tooltip="The percentage of working time this resource is expected to spend on chargeable/billable work."
+          ring={{
+            value: resource.chargeabilityTarget,
+            color: "var(--color-blue-500, #3b82f6)",
+          }}
         />
         {canViewCosts && (
         <StatCard
           label="Actual (this month)"
           value={chargeStats != null ? `${chargeStats.actualChargeability}%` : "—"}
+          tooltip="Actual chargeability = chargeable hours / total available hours x 100 for the current month."
           sub={
             includeProposedChargeability
               ? "Incl. proposed + imported TBD planning"
               : "Confirmed + active only"
           }
+          {...(chargeStats != null ? {
+            ring: {
+              value: chargeStats.actualChargeability,
+              color: chargeStats.actualChargeability >= resource.chargeabilityTarget
+                ? "var(--color-green-500, #22c55e)"
+                : chargeStats.actualChargeability >= resource.chargeabilityTarget - 10
+                  ? "var(--color-amber-500, #f59e0b)"
+                  : "var(--color-red-500, #ef4444)",
+            },
+          } : {})}
         />
         )}
         {canViewCosts && (
           <StatCard
             label="Expected (this month)"
             value={chargeStats != null ? `${chargeStats.expectedChargeability}%` : "—"}
+            tooltip="Expected chargeability based on all non-cancelled bookings for the current month."
             sub="All non-cancelled bookings"
           />
         )}
         <StatCard
           label="Hours This Month"
           value={`${Math.round(totalHoursThisMonth)}h`}
+          tooltip="Sum of allocated hours for all active projects in the current calendar month."
           sub={`${activeProjectIds.size} active project${activeProjectIds.size !== 1 ? "s" : ""}`}
         />
         {canViewScores && resourceWithMeta.valueScore != null && (
@@ -316,6 +360,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
             <StatCard
               label="Value Score"
               value={resourceWithMeta.valueScore}
+              tooltip="Composite score (0-100) combining skill depth, breadth, cost efficiency, chargeability, and experience. Hover for breakdown."
               sub="Price/Quality"
             />
             {resourceWithMeta.valueScoreBreakdown && (
@@ -351,11 +396,11 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
 
       {/* Profile meta (area role, portfolio, last import) */}
       {(resourceWithMeta.areaRole || resourceWithMeta.portfolioUrl || resourceWithMeta.skillMatrixUpdatedAt) && (
-        <div className="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-4 text-sm">
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4 flex flex-wrap gap-4 text-sm">
           {resourceWithMeta.areaRole && (
             <div className="flex items-center gap-2">
-              <span className="text-gray-500 text-xs">Area:</span>
-              <span className="font-medium text-gray-800">{resourceWithMeta.areaRole.name}</span>
+              <span className="text-gray-500 dark:text-gray-400 text-xs">Area:</span>
+              <span className="font-medium text-gray-800 dark:text-gray-200">{resourceWithMeta.areaRole.name}</span>
             </div>
           )}
           {resourceWithMeta.portfolioUrl && (
@@ -390,13 +435,13 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
 
       {/* Main Skills Badges */}
       {mainSkills.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-800 mb-3">Main Skills</h2>
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">Main Skills<InfoTooltip content="Up to 2 skills flagged as primary strengths. Used for staffing matching priority." /></h2>
           <div className="flex flex-wrap gap-2">
             {mainSkills.map((s) => (
               <span
                 key={s.skill}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-full bg-amber-50 text-amber-800 border border-amber-200"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-full bg-amber-50 text-amber-800 border border-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:border-amber-700"
               >
                 <span className="text-amber-500">★</span>
                 {s.skill}
@@ -410,12 +455,14 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
       )}
 
       {/* Skill Radar Chart */}
-      <SkillRadarChart skills={skills} />
+      <FadeIn delay={0.1} direction="up">
+        <SkillRadarChart skills={skills} />
+      </FadeIn>
 
       {/* Roles */}
       {resourceRoles.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-800 mb-3">Roles</h2>
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">Roles<InfoTooltip content="Job functions assigned to this resource. The primary role is used in staffing and timeline displays." /></h2>
           <div className="flex flex-wrap gap-2">
             {resourceRoles.map((rr) => (
               <span
@@ -437,13 +484,13 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
 
       {/* Skills */}
       {skills.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-800 mb-3">Skills</h2>
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">Skills<InfoTooltip content="Full skill inventory with proficiency level (1-5) and years of experience. Imported via skill matrix XLSX." /></h2>
           <div className="flex flex-wrap gap-2">
             {skills.map((s) => (
               <span
                 key={s.skill}
-                className="inline-flex items-center gap-1.5 px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-700"
+                className="inline-flex items-center gap-1.5 px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200"
               >
                 {s.skill}
                 {s.proficiency != null && (
@@ -456,7 +503,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
                   </span>
                 )}
                 {s.yearsExperience != null && (
-                  <span className="text-xs text-gray-400">{s.yearsExperience}y</span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">{s.yearsExperience}y</span>
                 )}
               </span>
             ))}
@@ -510,7 +557,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
                       {canViewCosts && (
                         <td className="px-4 py-3 text-right text-gray-700">
                           {a.dailyCostCents > 0
-                            ? `${(a.dailyCostCents / 100).toFixed(0)}/d`
+                            ? `${formatMoney(a.dailyCostCents)}/d`
                             : "—"}
                         </td>
                       )}
diff --git a/apps/web/src/components/resources/ResourceModal.tsx b/apps/web/src/components/resources/ResourceModal.tsx
index 3d58899..3d2b4d7 100644
--- a/apps/web/src/components/resources/ResourceModal.tsx
+++ b/apps/web/src/components/resources/ResourceModal.tsx
@@ -5,6 +5,7 @@ import { useFocusTrap } from "~/hooks/useFocusTrap.js";
 import type { Resource, SkillEntry } from "@planarchy/shared";
 import { GERMAN_FEDERAL_STATES, inferStateFromPostalCode, ResourceType } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 interface RoleAssignment {
   roleId: string;
@@ -372,7 +373,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-eid">
-                  Employee ID <span className="text-red-500">*</span>
+                  Employee ID <span className="text-red-500">*</span><InfoTooltip content="Unique employee identifier (e.g. EMP-042). Used for imports and cross-referencing." />
                 </label>
                 <input
                   id="rm-eid"
@@ -386,7 +387,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-displayName">
-                  Display Name <span className="text-red-500">*</span>
+                  Display Name <span className="text-red-500">*</span><InfoTooltip content="Full name shown in the timeline, reports, and staffing views." />
                 </label>
                 <input
                   id="rm-displayName"
@@ -444,7 +445,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-roleId">
-                  Area of Expertise <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
+                  Area of Expertise <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="The resource's primary area role. Used for skill matrix grouping and AI summary generation." />
                 </label>
                 <select
                   id="rm-roleId"
@@ -464,7 +465,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
             <div className="grid grid-cols-2 gap-4 mt-4">
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-postalCode">
-                  Postal Code (PLZ) <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
+                  Postal Code (PLZ) <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="German postal code. Used to auto-derive the federal state for public holiday calculations." />
                 </label>
                 <input
                   id="rm-postalCode"
@@ -487,7 +488,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-federalState">
-                  Federal State <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
+                  Federal State <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="Determines which public holidays apply (e.g. Bavaria has extra holidays). Auto-derived from postal code." />
                 </label>
                 <select
                   id="rm-federalState"
@@ -509,7 +510,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-enterpriseId">
-                  Enterprise ID <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
+                  Enterprise ID <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="Corporate directory ID for cross-system integration (e.g. a.kasperovich)." />
                 </label>
                 <input
                   id="rm-enterpriseId"
@@ -522,7 +523,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-fte">
-                  FTE
+                  FTE<InfoTooltip content="Full-Time Equivalent (0.01-1.0). A value of 0.5 means the resource works 50% of standard hours." />
                 </label>
                 <input
                   id="rm-fte"
@@ -608,7 +609,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
 
             <div className="grid grid-cols-2 gap-4 mt-4">
               <div>
-                <label className={LABEL_CLASS} htmlFor="rm-mgmtGroupId">Management Level Group</label>
+                <label className={LABEL_CLASS} htmlFor="rm-mgmtGroupId">Management Level Group<InfoTooltip content="Seniority grouping (e.g. Associate, Manager, Director). Determines the available management levels." /></label>
                 <select
                   id="rm-mgmtGroupId"
                   className={INPUT_CLASS}
@@ -625,7 +626,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
                 </select>
               </div>
               <div>
-                <label className={LABEL_CLASS} htmlFor="rm-mgmtLevelId">Management Level</label>
+                <label className={LABEL_CLASS} htmlFor="rm-mgmtLevelId">Management Level<InfoTooltip content="Specific seniority level within the group. Used in chargeability reports and cost analysis." /></label>
                 <select
                   id="rm-mgmtLevelId"
                   className={INPUT_CLASS}
@@ -643,7 +644,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
 
             <div className="grid grid-cols-4 gap-4 mt-4">
               <div>
-                <label className={LABEL_CLASS} htmlFor="rm-resourceType">Resource Type</label>
+                <label className={LABEL_CLASS} htmlFor="rm-resourceType">Resource Type<InfoTooltip content="Employee, contractor, or freelancer. Affects cost attribution rules." /></label>
                 <select
                   id="rm-resourceType"
                   className={INPUT_CLASS}
@@ -696,7 +697,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-lcr">
-                  LCR &euro;/h <span className="text-red-500">*</span>
+                  LCR &euro;/h <span className="text-red-500">*</span><InfoTooltip content="Loaded Cost Rate in EUR per hour. E.g. 85 = 85.00 EUR/h. Stored internally as integer cents (8500)." />
                 </label>
                 <input
                   id="rm-lcr"
@@ -712,7 +713,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-ucr">
-                  UCR &euro;/h <span className="text-red-500">*</span>
+                  UCR &euro;/h <span className="text-red-500">*</span><InfoTooltip content="Unit Cost Rate in EUR per hour. The rate billed to the project or client." />
                 </label>
                 <input
                   id="rm-ucr"
@@ -743,7 +744,7 @@ export function ResourceModal({ mode, resource, onClose }: ResourceModalProps) {
               </div>
               <div>
                 <label className={LABEL_CLASS} htmlFor="rm-chargeability">
-                  Chargeability Target %
+                  Chargeability Target %<InfoTooltip content="Target % of working time on chargeable projects. E.g. 80 means 80% of hours should be billable." />
                 </label>
                 <input
                   id="rm-chargeability"
diff --git a/apps/web/src/components/resources/SkillMatrixUpload.tsx b/apps/web/src/components/resources/SkillMatrixUpload.tsx
index 0fbcba1..371018d 100644
--- a/apps/web/src/components/resources/SkillMatrixUpload.tsx
+++ b/apps/web/src/components/resources/SkillMatrixUpload.tsx
@@ -47,7 +47,7 @@ export function SkillMatrixUpload({ resourceId, isOwner, onClose, onSuccess }: P
 
     try {
       const buffer = await file.arrayBuffer();
-      const parsed = parseSkillMatrixWorkbook(buffer);
+      const parsed = await parseSkillMatrixWorkbook(buffer);
 
       // Fuzzy match areaOfExpertise → roleId
       let roleId: string | undefined;
@@ -169,7 +169,7 @@ export function SkillMatrixUpload({ resourceId, isOwner, onClose, onSuccess }: P
 
               {preview.matchedRoleName && (
                 <p className="text-xs text-gray-600">
-                  <span className="font-medium">Area of expertise</span> matched to Planarchy role:{" "}
+                  <span className="font-medium">Area of expertise</span> matched to plANARCHY role:{" "}
                   <span className="font-semibold text-brand-700">{preview.matchedRoleName}</span>
                 </p>
               )}
diff --git a/apps/web/src/components/roles/RoleModal.tsx b/apps/web/src/components/roles/RoleModal.tsx
index 9e0ae41..d44bd41 100644
--- a/apps/web/src/components/roles/RoleModal.tsx
+++ b/apps/web/src/components/roles/RoleModal.tsx
@@ -4,6 +4,7 @@ import { useRef, useState } from "react";
 import type { RoleWithResourceCount } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const PRESET_COLORS = [
   "#6366f1",
@@ -110,7 +111,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
         <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
           <div>
             <label className={labelClass}>
-              Name <span className="text-red-500">*</span>
+              Name <span className="text-red-500">*</span><InfoTooltip content="Role name shown in timelines, allocation pickers, and staffing demands (e.g. 3D Artist, Producer)." />
             </label>
             <input
               type="text"
@@ -127,7 +128,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
           </div>
 
           <div>
-            <label className={labelClass}>Description</label>
+            <label className={labelClass}>Description<InfoTooltip content="Optional description of this role's responsibilities." /></label>
             <input
               type="text"
               value={description}
@@ -139,7 +140,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
           </div>
 
           <div>
-            <label className={labelClass}>Color</label>
+            <label className={labelClass}>Color<InfoTooltip content="Color used in timeline bars and badge chips for this role." /></label>
             <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/70">
               <div className="mb-3 flex items-center gap-3">
                 <div
diff --git a/apps/web/src/components/roles/RolesClient.tsx b/apps/web/src/components/roles/RolesClient.tsx
index 1d4e7b7..da3d8ee 100644
--- a/apps/web/src/components/roles/RolesClient.tsx
+++ b/apps/web/src/components/roles/RolesClient.tsx
@@ -8,6 +8,7 @@ import { FilterChips } from "~/components/ui/FilterChips.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 export function RolesClient() {
   const [search, setSearch] = useState("");
@@ -146,9 +147,10 @@ export function RolesClient() {
                 sortField={sortField}
                 sortDir={sortDir}
                 onSort={toggle}
+                tooltip="Role name (e.g. 3D Artist, Producer). Shown in timeline bars and staffing views."
               />
               <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
-                Description
+                <span className="inline-flex items-center gap-0.5">Description<InfoTooltip content="Optional description of the role's responsibilities and typical work." /></span>
               </th>
               <SortableColumnHeader
                 label="Resources"
diff --git a/apps/web/src/components/staffing/StaffingPanel.tsx b/apps/web/src/components/staffing/StaffingPanel.tsx
index 9971ebe..a20e12b 100644
--- a/apps/web/src/components/staffing/StaffingPanel.tsx
+++ b/apps/web/src/components/staffing/StaffingPanel.tsx
@@ -1,18 +1,41 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
+import { AllocationStatus } from "@planarchy/shared";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { SkillTagInput } from "~/components/ui/SkillTagInput.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
+import { Button } from "@planarchy/ui";
+
+interface SearchCriteria {
+  startDate: string;
+  endDate: string;
+  hoursPerDay: number;
+}
 
 export function StaffingPanel() {
   const [requiredSkills, setRequiredSkills] = useState<string[]>(["TypeScript", "React"]);
-  const [startDate, setStartDate] = useState(new Date().toISOString().split("T")[0] ?? "");
-  const [endDate, setEndDate] = useState(
-    new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString().split("T")[0] ?? "",
-  );
+  const [startDate, setStartDate] = useState(() => {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  });
+  const [endDate, setEndDate] = useState(() => {
+    const d = new Date(Date.now() + 90 * 24 * 60 * 60 * 1000);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  });
   const [hoursPerDay, setHoursPerDay] = useState(8);
   const [submitted, setSubmitted] = useState(false);
+  const [assignedIds, setAssignedIds] = useState<Set<string>>(new Set());
+  const [toast, setToast] = useState<{ show: boolean; message: string; variant: "success" | "warning" }>({
+    show: false,
+    message: "",
+    variant: "success",
+  });
+
+  const clearToast = useCallback(() => setToast((t) => ({ ...t, show: false })), []);
 
   const { data: suggestions, isLoading } = trpc.staffing.getSuggestions.useQuery(
     {
@@ -24,8 +47,19 @@ export function StaffingPanel() {
     { enabled: submitted },
   );
 
+  const visibleSuggestions = suggestions?.filter((s) => !assignedIds.has(s.resourceId));
+
+  const handleAssigned = useCallback((resourceId: string, resourceName: string) => {
+    setAssignedIds((prev) => new Set(prev).add(resourceId));
+    setToast({ show: true, message: `${resourceName} assigned successfully`, variant: "success" });
+  }, []);
+
+  const searchCriteria: SearchCriteria = { startDate, endDate, hoursPerDay };
+
   return (
     <div className="app-page space-y-6">
+      <SuccessToast show={toast.show} message={toast.message} variant={toast.variant} onDone={clearToast} />
+
       <div className="app-page-header gap-4">
         <div className="space-y-3">
           <span className="inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-brand-700 dark:border-brand-900/60 dark:bg-brand-900/30 dark:text-brand-200">
@@ -41,7 +75,7 @@ export function StaffingPanel() {
         <div className="app-surface max-w-xl p-4">
           <p className="text-sm font-medium text-gray-900 dark:text-gray-100">How scoring works</p>
           <p className="mt-1 text-sm text-gray-500">
-            Planarchy blends skill fit, free capacity, cost, and current utilization. Add the must-have skills first, then narrow the date window to get cleaner results.
+            plANARCHY blends skill fit, free capacity, cost, and current utilization. Add the must-have skills first, then narrow the date window to get cleaner results.
           </p>
         </div>
       </div>
@@ -54,11 +88,11 @@ export function StaffingPanel() {
 
             <div className="mt-6 space-y-5">
               <div>
-                <label className="app-label">Required Skills</label>
+                <label className="app-label">Required Skills<InfoTooltip content="Skills the candidate must have. The engine scores overlap and proficiency against this list." /></label>
                 <SkillTagInput
                   value={requiredSkills}
                   onChange={setRequiredSkills}
-                  placeholder="Add skill…"
+                  placeholder="Add skill..."
                 />
               </div>
 
@@ -84,7 +118,7 @@ export function StaffingPanel() {
               </div>
 
               <div>
-                <label className="app-label">Hours per Day</label>
+                <label className="app-label">Hours per Day<InfoTooltip content="Required hours per day for the role. Used to check conflicts and estimate capacity." /></label>
                 <input
                   type="number"
                   value={hoursPerDay}
@@ -129,62 +163,23 @@ export function StaffingPanel() {
             </div>
           )}
 
-          {suggestions && suggestions.length === 0 && (
+          {visibleSuggestions && visibleSuggestions.length === 0 && (
             <div className="app-surface-strong py-16 text-center text-sm text-gray-500">
-              No resources found matching your criteria.
+              {assignedIds.size > 0 ? "All suggestions have been assigned." : "No resources found matching your criteria."}
             </div>
           )}
 
-          {suggestions && suggestions.length > 0 && (
+          {visibleSuggestions && visibleSuggestions.length > 0 && (
             <div className="space-y-4">
-              {suggestions.map((suggestion, idx) => (
-                <div key={suggestion.resourceId} className="app-surface p-5">
-                  <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-                    <div className="flex items-center gap-4">
-                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-100 font-display text-lg font-semibold text-brand-700 dark:bg-brand-900/40 dark:text-brand-200">
-                        {idx + 1}
-                      </div>
-                      <div>
-                        <div className="text-base font-semibold text-gray-900 dark:text-gray-100">{suggestion.resourceName}</div>
-                        <div className="text-sm text-gray-500">{suggestion.eid}</div>
-                      </div>
-                    </div>
-                    <div className="rounded-2xl border border-brand-200 bg-brand-50 px-4 py-3 text-right dark:border-brand-900/50 dark:bg-brand-900/20">
-                      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:text-brand-200">Match Score</div>
-                      <div className="mt-1 text-3xl font-semibold text-brand-700 dark:text-brand-100">{suggestion.score}</div>
-                    </div>
-                  </div>
-
-                  <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-                    <ScoreBar label="Skills" value={suggestion.scoreBreakdown.skillScore} />
-                    <ScoreBar label="Availability" value={suggestion.scoreBreakdown.availabilityScore} />
-                    <ScoreBar label="Cost" value={suggestion.scoreBreakdown.costScore} />
-                    <ScoreBar label="Utilization" value={suggestion.scoreBreakdown.utilizationScore} />
-                  </div>
-
-                  <div className="mt-4 flex flex-wrap gap-2">
-                    {suggestion.matchedSkills.map((skill) => (
-                      <span key={skill} className="rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-300">
-                        {skill}
-                      </span>
-                    ))}
-                    {suggestion.missingSkills.map((skill) => (
-                      <span key={skill} className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-600 dark:bg-red-950/30 dark:text-red-300">
-                        {skill} missing
-                      </span>
-                    ))}
-                  </div>
-
-                  <div className="mt-4 flex flex-wrap items-center gap-4 text-xs text-gray-500">
-                    <span>LCR: {(suggestion.estimatedDailyCostCents / 100 / 8).toFixed(0)} €/h</span>
-                    <span>Utilization: {Math.round(suggestion.currentUtilization)}%</span>
-                    {suggestion.availabilityConflicts.length > 0 && (
-                      <span className="font-medium text-amber-600 dark:text-amber-300">
-                        {suggestion.availabilityConflicts.length} scheduling conflict{suggestion.availabilityConflicts.length === 1 ? "" : "s"}
-                      </span>
-                    )}
-                  </div>
-                </div>
+              {visibleSuggestions.map((suggestion, idx) => (
+                <SuggestionCard
+                  key={suggestion.resourceId}
+                  suggestion={suggestion}
+                  rank={idx + 1}
+                  searchCriteria={searchCriteria}
+                  onAssigned={handleAssigned}
+                  onError={(msg) => setToast({ show: true, message: msg, variant: "warning" })}
+                />
               ))}
             </div>
           )}
@@ -205,10 +200,295 @@ export function StaffingPanel() {
   );
 }
 
-function ScoreBar({ label, value }: { label: string; value: number }) {
+/* -------------------------------------------------------------------------- */
+/*  Suggestion Card                                                           */
+/* -------------------------------------------------------------------------- */
+
+interface SuggestionLike {
+  resourceId: string;
+  resourceName: string;
+  eid: string;
+  score: number;
+  scoreBreakdown: {
+    skillScore: number;
+    availabilityScore: number;
+    costScore: number;
+    utilizationScore: number;
+  };
+  matchedSkills: string[];
+  missingSkills: string[];
+  availabilityConflicts: string[];
+  estimatedDailyCostCents: number;
+  currentUtilization: number;
+}
+
+interface SuggestionCardProps {
+  suggestion: SuggestionLike;
+  rank: number;
+  searchCriteria: SearchCriteria;
+  onAssigned: (resourceId: string, resourceName: string) => void;
+  onError: (message: string) => void;
+}
+
+function SuggestionCard({ suggestion, rank, searchCriteria, onAssigned, onError }: SuggestionCardProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="app-surface p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-100 font-display text-lg font-semibold text-brand-700 dark:bg-brand-900/40 dark:text-brand-200">
+            {rank}
+          </div>
+          <div>
+            <div className="text-base font-semibold text-gray-900 dark:text-gray-100">{suggestion.resourceName}</div>
+            <div className="text-sm text-gray-500">{suggestion.eid}</div>
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => setExpanded((prev) => !prev)}
+          >
+            {expanded ? "Cancel" : "Assign"}
+          </Button>
+          <div className="rounded-2xl border border-brand-200 bg-brand-50 px-4 py-3 text-right dark:border-brand-900/50 dark:bg-brand-900/20">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:text-brand-200 inline-flex items-center gap-0.5">Match Score<InfoTooltip content="Composite score (0-100) blending skill fit, free capacity, cost efficiency, and current utilization." /></div>
+            <div className="mt-1 text-3xl font-semibold text-brand-700 dark:text-brand-100">{suggestion.score}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ScoreBar label="Skills" value={suggestion.scoreBreakdown.skillScore} tooltip="Quality of skill overlap with the requested stack, weighted by proficiency level." />
+        <ScoreBar label="Availability" value={suggestion.scoreBreakdown.availabilityScore} tooltip="Free capacity during the selected period, accounting for existing bookings and vacations." />
+        <ScoreBar label="Cost" value={suggestion.scoreBreakdown.costScore} tooltip="Cost efficiency based on the resource's LCR relative to the team average." />
+        <ScoreBar label="Utilization" value={suggestion.scoreBreakdown.utilizationScore} tooltip="Current workload. Higher score means more capacity available (lower utilization)." />
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        {suggestion.matchedSkills.map((skill) => (
+          <span key={skill} className="rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-300">
+            {skill}
+          </span>
+        ))}
+        {suggestion.missingSkills.map((skill) => (
+          <span key={skill} className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-600 dark:bg-red-950/30 dark:text-red-300">
+            {skill} missing
+          </span>
+        ))}
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-4 text-xs text-gray-500">
+        <span>LCR: {(suggestion.estimatedDailyCostCents / 100 / 8).toFixed(0)} EUR/h</span>
+        <span>Utilization: {Math.round(suggestion.currentUtilization)}%</span>
+        {suggestion.availabilityConflicts.length > 0 && (
+          <span className="font-medium text-amber-600 dark:text-amber-300">
+            {suggestion.availabilityConflicts.length} scheduling conflict{suggestion.availabilityConflicts.length === 1 ? "" : "s"}
+          </span>
+        )}
+      </div>
+
+      {expanded && (
+        <AssignForm
+          resourceId={suggestion.resourceId}
+          resourceName={suggestion.resourceName}
+          searchCriteria={searchCriteria}
+          onAssigned={() => onAssigned(suggestion.resourceId, suggestion.resourceName)}
+          onError={onError}
+          onCancel={() => setExpanded(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Inline Assign Form                                                        */
+/* -------------------------------------------------------------------------- */
+
+interface AssignFormProps {
+  resourceId: string;
+  resourceName: string;
+  searchCriteria: SearchCriteria;
+  onAssigned: () => void;
+  onError: (message: string) => void;
+  onCancel: () => void;
+}
+
+function AssignForm({ resourceId, resourceName, searchCriteria, onAssigned, onError, onCancel }: AssignFormProps) {
+  const [projectId, setProjectId] = useState("");
+  const [assignStartDate, setAssignStartDate] = useState(searchCriteria.startDate);
+  const [assignEndDate, setAssignEndDate] = useState(searchCriteria.endDate);
+  const [assignHours, setAssignHours] = useState(searchCriteria.hoursPerDay);
+  const [roleId, setRoleId] = useState("");
+  const [roleFreeText, setRoleFreeText] = useState("");
+
+  const invalidatePlanningViews = useInvalidatePlanningViews();
+
+  const { data: projects } = trpc.project.list.useQuery(
+    { limit: 500 },
+    { staleTime: 60_000 },
+  );
+  const { data: roles } = trpc.role.list.useQuery(
+    { isActive: true },
+    { staleTime: 60_000 },
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const createAssignment = (trpc.allocation.createAssignment.useMutation as any)({
+    onSuccess: () => {
+      invalidatePlanningViews();
+      onAssigned();
+    },
+    onError: (err: { message: string }) => {
+      onError(err.message || "Failed to create assignment");
+    },
+  }) as { mutate: (input: unknown) => void; isPending: boolean };
+
+  const canSubmit = projectId && assignStartDate && assignEndDate && assignHours > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    createAssignment.mutate({
+      resourceId,
+      projectId,
+      startDate: new Date(assignStartDate),
+      endDate: new Date(assignEndDate),
+      hoursPerDay: assignHours,
+      percentage: 100,
+      ...(roleId ? { roleId } : {}),
+      ...(roleFreeText ? { role: roleFreeText } : {}),
+      status: AllocationStatus.PROPOSED,
+      metadata: {},
+    });
+  };
+
+  const projectList = (projects as { projects?: Array<{ id: string; name: string; shortCode?: string | null }> } | undefined)?.projects ?? [];
+  const rolesList = (roles ?? []) as Array<{ id: string; name: string }>;
+  const selectedProject = projectList.find((p) => p.id === projectId);
+
+  return (
+    <div className="mt-4 rounded-xl border border-brand-200 bg-brand-50/50 p-4 dark:border-brand-900/40 dark:bg-brand-950/30">
+      <div className="mb-3 flex items-center justify-between">
+        <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          Assign {resourceName}
+        </h4>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div className="sm:col-span-2">
+          <label className="app-label">Project *</label>
+          <select
+            value={projectId}
+            onChange={(e) => setProjectId(e.target.value)}
+            className="app-input"
+          >
+            <option value="">Select project...</option>
+            {projectList.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.shortCode ? `[${p.shortCode}] ` : ""}{p.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="app-label">Start Date</label>
+          <DateInput
+            value={assignStartDate}
+            onChange={setAssignStartDate}
+            className="app-input"
+          />
+        </div>
+
+        <div>
+          <label className="app-label">End Date</label>
+          <DateInput
+            value={assignEndDate}
+            onChange={setAssignEndDate}
+            min={assignStartDate}
+            className="app-input"
+          />
+        </div>
+
+        <div>
+          <label className="app-label">Hours / Day</label>
+          <input
+            type="number"
+            value={assignHours}
+            onChange={(e) => setAssignHours(Number(e.target.value))}
+            min={0.5}
+            max={24}
+            step={0.5}
+            className="app-input"
+          />
+        </div>
+
+        <div>
+          <label className="app-label">Role</label>
+          {rolesList.length > 0 ? (
+            <select
+              value={roleId}
+              onChange={(e) => setRoleId(e.target.value)}
+              className="app-input"
+            >
+              <option value="">No role</option>
+              {rolesList.map((r) => (
+                <option key={r.id} value={r.id}>
+                  {r.name}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              type="text"
+              value={roleFreeText}
+              onChange={(e) => setRoleFreeText(e.target.value)}
+              placeholder="e.g. 3D Artist"
+              className="app-input"
+            />
+          )}
+        </div>
+      </div>
+
+      {selectedProject && (
+        <div className="mt-3 text-xs text-gray-500">
+          Assigning to <span className="font-medium text-gray-700 dark:text-gray-300">{selectedProject.name}</span> from {assignStartDate} to {assignEndDate} at {assignHours}h/day
+        </div>
+      )}
+
+      <div className="mt-4 flex items-center gap-2">
+        <Button
+          variant="primary"
+          size="sm"
+          disabled={!canSubmit || createAssignment.isPending}
+          onClick={handleSubmit}
+        >
+          {createAssignment.isPending ? "Assigning..." : "Confirm Assignment"}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onCancel}
+          disabled={createAssignment.isPending}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Score Bar                                                                 */
+/* -------------------------------------------------------------------------- */
+
+function ScoreBar({ label, value, tooltip }: { label: string; value: number; tooltip?: string }) {
   return (
     <div className="rounded-2xl border border-gray-200 bg-gray-50/70 p-3 dark:border-gray-700 dark:bg-gray-900/40">
-      <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">{label}</div>
+      <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500 inline-flex items-center gap-0.5">{label}{tooltip && <InfoTooltip content={tooltip} />}</div>
       <div className="h-2 rounded-full bg-gray-200/80 dark:bg-gray-800">
         <div
           className="h-full rounded-full bg-brand-500"
diff --git a/apps/web/src/components/timeline/AllocationPopover.tsx b/apps/web/src/components/timeline/AllocationPopover.tsx
index 660e615..5553e94 100644
--- a/apps/web/src/components/timeline/AllocationPopover.tsx
+++ b/apps/web/src/components/timeline/AllocationPopover.tsx
@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import type { AllocationLike, AllocationReadModel, Assignment } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 
@@ -29,6 +30,7 @@ export function AllocationPopover({
 }: AllocationPopoverProps) {
   const ref = useRef<HTMLDivElement>(null);
   const utils = trpc.useUtils();
+  const invalidateTimeline = useInvalidateTimeline();
 
   const { data: allocationView, isLoading } = trpc.allocation.listView.useQuery(
     { projectId },
@@ -55,10 +57,7 @@ export function AllocationPopover({
 
   const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
     onSuccess: () => {
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
+      invalidateTimeline();
       void utils.allocation.listView.invalidate();
       onClose();
     },
@@ -76,7 +75,10 @@ export function AllocationPopover({
   }, [onClose]);
 
   function toDateInput(d: Date): string {
-    return d.toISOString().split("T")[0] ?? "";
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
   }
 
   function handleSave() {
diff --git a/apps/web/src/components/timeline/BatchAssignPopover.tsx b/apps/web/src/components/timeline/BatchAssignPopover.tsx
new file mode 100644
index 0000000..6199ede
--- /dev/null
+++ b/apps/web/src/components/timeline/BatchAssignPopover.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { AllocationStatus } from "@planarchy/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
+
+interface BatchAssignPopoverProps {
+  resourceIds: string[];
+  startDate: Date;
+  endDate: Date;
+  onClose: () => void;
+  onCreated: () => void;
+}
+
+function toDateDisplay(d: Date): string {
+  return d.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+export function BatchAssignPopover({
+  resourceIds,
+  startDate,
+  endDate,
+  onClose,
+  onCreated,
+}: BatchAssignPopoverProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const invalidateTimeline = useInvalidateTimeline();
+
+  const [search, setSearch] = useState("");
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
+    null,
+  );
+  const [hoursPerDay, setHoursPerDay] = useState(8);
+  const [dropdownOpen, setDropdownOpen] = useState(true);
+
+  const { data: projectsData } = trpc.project.list.useQuery(
+    { search, limit: 20 },
+    { staleTime: 30_000 },
+  );
+
+  const projects = (projectsData?.projects ?? []) as Array<{
+    id: string;
+    name: string;
+  }>;
+  const selectedProject = projects.find((p) => p.id === selectedProjectId);
+
+  const batchMutation = trpc.timeline.batchQuickAssign.useMutation({
+    onSuccess: () => {
+      invalidateTimeline();
+      onCreated();
+      onClose();
+    },
+  });
+
+  // Close on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [onClose]);
+
+  // Close on ESC
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  function handleAssign() {
+    if (!selectedProjectId) return;
+    batchMutation.mutate({
+      assignments: resourceIds.map((resourceId) => ({
+        resourceId,
+        projectId: selectedProjectId,
+        startDate,
+        endDate,
+        hoursPerDay,
+        role: "Team Member",
+        status: AllocationStatus.PROPOSED,
+      })),
+    });
+  }
+
+  const canAssign =
+    !!selectedProjectId && resourceIds.length > 0 && hoursPerDay > 0;
+
+  return (
+    <div
+      ref={ref}
+      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] w-[360px] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+          Batch Assign
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
+        >
+          &times;
+        </button>
+      </div>
+
+      <div className="p-4 space-y-3">
+        {/* Info line */}
+        <div className="text-xs text-gray-600 dark:text-gray-400 space-y-0.5">
+          <p>
+            Assigning to{" "}
+            <span className="font-medium text-gray-800 dark:text-gray-200">
+              {resourceIds.length}
+            </span>{" "}
+            resource{resourceIds.length !== 1 ? "s" : ""}
+          </p>
+          <p>
+            {toDateDisplay(startDate)} &ndash; {toDateDisplay(endDate)}
+          </p>
+        </div>
+
+        {/* Project picker */}
+        <div>
+          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+            Project
+          </label>
+          {selectedProject && !dropdownOpen ? (
+            <div
+              className="flex items-center gap-2 border border-sky-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-sky-50 dark:bg-sky-950/30"
+              onClick={() => {
+                setDropdownOpen(true);
+                setSearch("");
+              }}
+            >
+              <span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">
+                {selectedProject.name}
+              </span>
+              <span className="text-xs text-gray-400 dark:text-gray-500">
+                &#9662;
+              </span>
+            </div>
+          ) : (
+            <div className="relative">
+              <input
+                autoFocus
+                type="text"
+                placeholder="Search projects\u2026"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onFocus={() => setDropdownOpen(true)}
+                className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-sky-400 dark:focus:ring-sky-500"
+              />
+              {dropdownOpen && projects.length > 0 && (
+                <div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
+                  {projects.map((p) => (
+                    <button
+                      key={p.id}
+                      type="button"
+                      onClick={() => {
+                        setSelectedProjectId(p.id);
+                        setDropdownOpen(false);
+                        setSearch("");
+                      }}
+                      className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
+                    >
+                      <span className="text-sm text-gray-800 dark:text-gray-200 truncate">
+                        {p.name}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Hours per day */}
+        <div>
+          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+            Hours / day
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0.5}
+              max={24}
+              step={0.5}
+              value={hoursPerDay}
+              onChange={(e) => setHoursPerDay(parseFloat(e.target.value))}
+              className="w-24 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-sky-400 dark:focus:ring-sky-500"
+            />
+            <div className="flex gap-1">
+              {[4, 6, 8].map((h) => (
+                <button
+                  key={h}
+                  type="button"
+                  onClick={() => setHoursPerDay(h)}
+                  className={clsx(
+                    "px-2 py-1 rounded text-xs font-medium border transition-colors",
+                    hoursPerDay === h
+                      ? "bg-sky-600 text-white border-sky-600 dark:bg-sky-600 dark:border-sky-600"
+                      : "border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700",
+                  )}
+                >
+                  {h}h
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Error */}
+        {batchMutation.isError && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {batchMutation.error.message}
+          </p>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-1">
+          <button
+            type="button"
+            onClick={handleAssign}
+            disabled={!canAssign || batchMutation.isPending}
+            className={clsx(
+              "flex-1 py-2 rounded-lg text-sm font-medium transition-colors",
+              "bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-600 dark:hover:bg-sky-700",
+              "disabled:opacity-40 disabled:cursor-not-allowed",
+            )}
+          >
+            {batchMutation.isPending
+              ? "Assigning\u2026"
+              : `Assign All (${resourceIds.length})`}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 py-2 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/timeline/DemandPopover.tsx b/apps/web/src/components/timeline/DemandPopover.tsx
new file mode 100644
index 0000000..18ba71c
--- /dev/null
+++ b/apps/web/src/components/timeline/DemandPopover.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { TimelineDemandEntry } from "./TimelineContext.js";
+import { formatCents, formatDateLong } from "~/lib/format.js";
+
+interface DemandPopoverProps {
+  demand: TimelineDemandEntry;
+  onClose: () => void;
+  onOpenPanel: (projectId: string) => void;
+  onFillDemand: (demand: TimelineDemandEntry) => void;
+  anchorX: number;
+  anchorY: number;
+}
+
+export function DemandPopover({
+  demand,
+  onClose,
+  onOpenPanel,
+  onFillDemand,
+  anchorX,
+  anchorY,
+}: DemandPopoverProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [onClose]);
+
+  const roleName = demand.roleEntity?.name ?? demand.role ?? "Unspecified";
+  const roleColor = demand.roleEntity?.color ?? "#f59e0b";
+  const startDate = new Date(demand.startDate);
+  const endDate = new Date(demand.endDate);
+  const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / 86_400_000) + 1);
+  const totalHours = demand.hoursPerDay * days;
+  const budgetCents = demand.dailyCostCents * days;
+
+  const popoverStyle: React.CSSProperties = {
+    position: "fixed",
+    left: Math.min(anchorX, window.innerWidth - 320),
+    top: Math.min(anchorY + 8, window.innerHeight - 340),
+    zIndex: 50,
+    width: 300,
+  };
+
+  return (
+    <div
+      ref={ref}
+      style={popoverStyle}
+      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden"
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700"
+        style={{ backgroundColor: `${roleColor}18` }}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          <div
+            className="w-3 h-3 rounded-full flex-shrink-0 border-2 border-dashed"
+            style={{ borderColor: roleColor, backgroundColor: `${roleColor}33` }}
+          />
+          <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
+            {roleName}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none ml-2"
+        >
+          &times;
+        </button>
+      </div>
+
+      <div className="p-4 space-y-3">
+        {/* Project */}
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          Project:{" "}
+          <span className="font-medium text-gray-700 dark:text-gray-200">
+            {demand.project.name}
+          </span>
+          {" "}
+          <span className="text-gray-400 dark:text-gray-500">({demand.project.shortCode})</span>
+        </div>
+
+        {/* Status badge */}
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 border border-dashed border-amber-300 dark:border-amber-700">
+            Open Demand
+          </span>
+          <span className="text-[11px] text-gray-400 dark:text-gray-500">
+            {demand.status}
+          </span>
+        </div>
+
+        {/* Headcount */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">Requested</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">
+              {demand.requestedHeadcount} {demand.requestedHeadcount === 1 ? "person" : "people"}
+            </div>
+          </div>
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">Unfilled</div>
+            <div className="font-medium text-amber-600 dark:text-amber-400">
+              {demand.unfilledHeadcount} remaining
+            </div>
+          </div>
+
+          {/* Date range */}
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">Start</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">
+              {formatDateLong(startDate)}
+            </div>
+          </div>
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">End</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">
+              {formatDateLong(endDate)}
+            </div>
+          </div>
+
+          {/* Hours */}
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">Hours / day</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">{demand.hoursPerDay}h</div>
+          </div>
+          <div>
+            <div className="text-gray-400 dark:text-gray-500 mb-0.5">Total hours</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">{totalHours}h ({days}d)</div>
+          </div>
+
+          {/* Budget */}
+          {budgetCents > 0 && (
+            <>
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 mb-0.5">Daily cost</div>
+                <div className="font-medium text-gray-800 dark:text-gray-200">
+                  {formatCents(demand.dailyCostCents)} EUR
+                </div>
+              </div>
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 mb-0.5">Total cost</div>
+                <div className="font-medium text-gray-800 dark:text-gray-200">
+                  {formatCents(budgetCents)} EUR
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Percentage */}
+          {demand.percentage > 0 && (
+            <div>
+              <div className="text-gray-400 dark:text-gray-500 mb-0.5">Percentage</div>
+              <div className="font-medium text-gray-800 dark:text-gray-200">{demand.percentage}%</div>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
+          {demand.unfilledHeadcount > 0 && (
+            <button
+              onClick={() => { onClose(); onFillDemand(demand); }}
+              className="flex-1 py-1.5 rounded-lg text-sm font-medium bg-amber-500 text-white hover:bg-amber-600 transition-colors"
+            >
+              Fill Demand
+            </button>
+          )}
+          <button
+            onClick={() => { onClose(); onOpenPanel(demand.projectId); }}
+            className="flex-1 py-1.5 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          >
+            Open Project
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/timeline/FloatingActionBar.tsx b/apps/web/src/components/timeline/FloatingActionBar.tsx
new file mode 100644
index 0000000..eed0a7f
--- /dev/null
+++ b/apps/web/src/components/timeline/FloatingActionBar.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { clsx } from "clsx";
+
+interface FloatingActionBarProps {
+  selectedAllocationCount: number;
+  selectedResourceCount: number;
+  onDelete: () => void;
+  onAssign: () => void;
+  onClear: () => void;
+  isDeleting: boolean;
+}
+
+export function FloatingActionBar({
+  selectedAllocationCount,
+  selectedResourceCount,
+  onDelete,
+  onAssign,
+  onClear,
+  isDeleting,
+}: FloatingActionBarProps) {
+  const totalCount = selectedAllocationCount + selectedResourceCount;
+  if (totalCount === 0) return null;
+
+  const label =
+    selectedAllocationCount > 0 && selectedResourceCount > 0
+      ? `${selectedAllocationCount} allocation${selectedAllocationCount !== 1 ? "s" : ""} + ${selectedResourceCount} resource${selectedResourceCount !== 1 ? "s" : ""} selected`
+      : selectedAllocationCount > 0
+        ? `${selectedAllocationCount} allocation${selectedAllocationCount !== 1 ? "s" : ""} selected`
+        : `${selectedResourceCount} resource${selectedResourceCount !== 1 ? "s" : ""} selected`;
+
+  return (
+    <div
+      className={clsx(
+        "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
+        "flex items-center gap-3 rounded-full px-5 py-2.5",
+        "bg-white dark:bg-gray-800",
+        "border border-gray-200 dark:border-gray-700",
+        "shadow-xl dark:shadow-black/40",
+      )}
+    >
+      <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+        {label}
+      </span>
+
+      {selectedAllocationCount > 0 && (
+        <button
+          type="button"
+          onClick={onDelete}
+          disabled={isDeleting}
+          className={clsx(
+            "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+            "bg-red-600 hover:bg-red-700 text-white",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+          )}
+        >
+          {isDeleting ? "Deleting\u2026" : "Delete"}
+        </button>
+      )}
+
+      {selectedResourceCount > 0 && (
+        <button
+          type="button"
+          onClick={onAssign}
+          className={clsx(
+            "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+            "bg-sky-600 hover:bg-sky-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white",
+          )}
+        >
+          Assign
+        </button>
+      )}
+
+      <button
+        type="button"
+        onClick={onClear}
+        className={clsx(
+          "text-xs font-medium px-2 py-1.5 transition-colors",
+          "text-gray-500 dark:text-gray-400",
+          "hover:text-gray-700 dark:hover:text-gray-300",
+        )}
+      >
+        Clear{" "}
+        <span className="text-gray-400 dark:text-gray-500">(ESC)</span>
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/timeline/NewAllocationPopover.tsx b/apps/web/src/components/timeline/NewAllocationPopover.tsx
index b39c5e2..5e081f6 100644
--- a/apps/web/src/components/timeline/NewAllocationPopover.tsx
+++ b/apps/web/src/components/timeline/NewAllocationPopover.tsx
@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { AllocationStatus } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 
 interface NewAllocationPopoverProps {
@@ -19,7 +20,10 @@ interface NewAllocationPopoverProps {
 }
 
 function toDateInput(d: Date): string {
-  return d.toISOString().split("T")[0] ?? "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
 }
 
 export function NewAllocationPopover({
@@ -33,7 +37,7 @@ export function NewAllocationPopover({
   onCreated,
 }: NewAllocationPopoverProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const utils = trpc.useUtils();
+  const invalidateTimeline = useInvalidateTimeline();
 
   const [search, setSearch] = useState("");
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
@@ -50,16 +54,14 @@ export function NewAllocationPopover({
     { staleTime: 30_000 },
   );
 
-  const projects = projectsData?.projects ?? [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const projects = (projectsData?.projects ?? []) as Array<{ id: string; name: string; orderType?: string }>;
   const selectedProject = projects.find((p) => p.id === selectedProjectId)
     ?? (suggestedProjectId ? projects.find((p) => p.id === suggestedProjectId) : null);
 
   const createMutation = trpc.timeline.quickAssign.useMutation({
     onSuccess: () => {
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
+      invalidateTimeline();
       onCreated();
       onClose();
     },
@@ -94,57 +96,50 @@ export function NewAllocationPopover({
   const left = Math.min(anchorX - 10, typeof window !== "undefined" ? window.innerWidth - 340 : anchorX);
   const top = Math.min(anchorY + 8, typeof window !== "undefined" ? window.innerHeight - 440 : anchorY);
 
-  const ORDER_COLORS: Record<string, string> = {
-    CHARGEABLE: "bg-emerald-100 text-emerald-700",
-    INTERNAL: "bg-blue-100 text-blue-700",
-    BD: "bg-violet-100 text-violet-700",
-    OVERHEAD: "bg-gray-100 text-gray-600",
-  };
-
   return (
     <div
       ref={ref}
       style={{ position: "fixed", left, top, zIndex: 60, width: 320 }}
-      className="bg-white border border-gray-200 rounded-xl shadow-2xl overflow-hidden"
+      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
     >
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
-        <span className="text-sm font-semibold text-gray-700">Assign to Project</span>
-        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">&times;</button>
+      <div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">Assign to Project</span>
+        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none">&times;</button>
       </div>
 
       <div className="p-4 space-y-3">
         {/* Date range */}
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Start</label>
+            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Start</label>
             <DateInput
               value={start}
               onChange={setStart}
-              className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+              className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">End</label>
+            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">End</label>
             <DateInput
               value={end}
               onChange={setEnd}
               min={start}
-              className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+              className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
             />
           </div>
         </div>
 
         {/* Project picker */}
         <div>
-          <label className="block text-xs font-medium text-gray-600 mb-1">Project</label>
+          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Project</label>
           {selectedProject && !dropdownOpen ? (
             <div
-              className="flex items-center gap-2 border border-brand-300 rounded-lg px-3 py-2 cursor-pointer bg-brand-50"
+              className="flex items-center gap-2 border border-brand-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-brand-50 dark:bg-sky-950/30"
               onClick={() => { setDropdownOpen(true); setSearch(""); }}
             >
-              <span className="text-sm text-gray-800 truncate flex-1">{selectedProject.name}</span>
-              <span className="text-xs text-gray-400">▾</span>
+              <span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">{selectedProject.name}</span>
+              <span className="text-xs text-gray-400 dark:text-gray-500">▾</span>
             </div>
           ) : (
             <div className="relative">
@@ -155,18 +150,18 @@ export function NewAllocationPopover({
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 onFocus={() => setDropdownOpen(true)}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
+                className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
               />
               {dropdownOpen && projects.length > 0 && (
-                <div className="absolute top-full left-0 right-0 z-50 bg-white border border-gray-200 rounded-xl shadow-lg mt-1 max-h-44 overflow-y-auto">
+                <div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
                   {projects.map((p) => (
                     <button
                       key={p.id}
                       type="button"
                       onClick={() => { setSelectedProjectId(p.id); setDropdownOpen(false); setSearch(""); }}
-                      className="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2 border-b border-gray-50 last:border-0"
+                      className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
                     >
-                      <span className="text-sm text-gray-800 truncate">{p.name}</span>
+                      <span className="text-sm text-gray-800 dark:text-gray-200 truncate">{p.name}</span>
                     </button>
                   ))}
                 </div>
@@ -177,18 +172,18 @@ export function NewAllocationPopover({
 
         {/* Role */}
         <div>
-          <label className="block text-xs font-medium text-gray-600 mb-1">Role</label>
+          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role</label>
           <input
             type="text"
             value={role}
             onChange={(e) => setRole(e.target.value)}
-            className="w-full border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
+            className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
           />
         </div>
 
         {/* Hours per day */}
         <div>
-          <label className="block text-xs font-medium text-gray-600 mb-1">Hours / day</label>
+          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Hours / day</label>
           <div className="flex items-center gap-2">
             <input
               type="number"
@@ -197,7 +192,7 @@ export function NewAllocationPopover({
               step={0.5}
               value={hoursPerDay}
               onChange={(e) => setHoursPerDay(parseFloat(e.target.value))}
-              className="w-24 border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
+              className="w-24 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
             />
             <div className="flex gap-1">
               {[4, 6, 8].map((h) => (
@@ -209,7 +204,7 @@ export function NewAllocationPopover({
                     "px-2 py-1 rounded text-xs font-medium border transition-colors",
                     hoursPerDay === h
                       ? "bg-brand-600 text-white border-brand-600"
-                      : "border-gray-200 text-gray-600 hover:bg-gray-50",
+                      : "border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700",
                   )}
                 >
                   {h}h
@@ -220,13 +215,13 @@ export function NewAllocationPopover({
         </div>
 
         {/* Overbooking notice */}
-        <p className="text-xs text-amber-600 bg-amber-50 px-3 py-2 rounded-lg">
+        <p className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 rounded-lg">
           Overlapping allocations are allowed — resource may be overbooked.
         </p>
 
         {/* Error */}
         {createMutation.isError && (
-          <p className="text-xs text-red-600">{createMutation.error.message}</p>
+          <p className="text-xs text-red-600 dark:text-red-400">{createMutation.error.message}</p>
         )}
 
         {/* Actions */}
@@ -243,7 +238,7 @@ export function NewAllocationPopover({
           </button>
           <button
             onClick={onClose}
-            className="flex-1 py-2 rounded-lg text-sm font-medium border border-gray-200 text-gray-600 hover:bg-gray-50"
+            className="flex-1 py-2 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
           >
             Cancel
           </button>
diff --git a/apps/web/src/components/timeline/ProjectColorLegend.tsx b/apps/web/src/components/timeline/ProjectColorLegend.tsx
new file mode 100644
index 0000000..232dbd1
--- /dev/null
+++ b/apps/web/src/components/timeline/ProjectColorLegend.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { clsx } from "clsx";
+import { memo, useMemo, useState } from "react";
+import { useTimelineContext } from "./TimelineContext.js";
+import { getProjectColor } from "~/lib/project-colors.js";
+import { FadeIn } from "~/components/ui/FadeIn.js";
+
+function ProjectColorLegendInner() {
+  const { visibleAssignments, viewMode, projectGroups } = useTimelineContext();
+  const [dismissed, setDismissed] = useState(false);
+
+  // Collect unique visible projects with their colors
+  const legendItems = useMemo(() => {
+    const seen = new Map<string, { shortCode: string; name: string; hex: string }>();
+
+    if (viewMode === "project") {
+      for (const group of projectGroups) {
+        if (seen.has(group.id)) continue;
+        const customColor = group.color;
+        const projectColor = getProjectColor(group.id);
+        seen.set(group.id, {
+          shortCode: group.shortCode,
+          name: group.name,
+          hex: customColor ?? projectColor.hex,
+        });
+      }
+    } else {
+      for (const entry of visibleAssignments) {
+        if (seen.has(entry.projectId)) continue;
+        const customColor = (entry.project as { color?: string | null }).color;
+        const projectColor = getProjectColor(entry.projectId);
+        seen.set(entry.projectId, {
+          shortCode: entry.project.shortCode,
+          name: entry.project.name,
+          hex: customColor ?? projectColor.hex,
+        });
+      }
+    }
+
+    return [...seen.values()].sort((a, b) => a.shortCode.localeCompare(b.shortCode));
+  }, [visibleAssignments, viewMode, projectGroups]);
+
+  if (dismissed || legendItems.length === 0) return null;
+
+  return (
+    <FadeIn>
+      <div className="flex items-center gap-1 px-3 py-1.5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-x-auto scrollbar-thin">
+        <span className="text-[10px] font-medium text-gray-400 dark:text-gray-500 flex-shrink-0 mr-1">
+          Projects
+        </span>
+        <div className="flex items-center gap-2.5 min-w-0">
+          {legendItems.map((item) => (
+            <div
+              key={item.shortCode}
+              className="flex items-center gap-1 flex-shrink-0"
+              title={item.name}
+            >
+              <div
+                className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                style={{ backgroundColor: item.hex }}
+              />
+              <span className="text-[10px] font-medium text-gray-600 dark:text-gray-300 whitespace-nowrap">
+                {item.shortCode}
+              </span>
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          className={clsx(
+            "ml-2 flex-shrink-0 w-4 h-4 flex items-center justify-center rounded",
+            "text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300",
+            "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+          )}
+          aria-label="Dismiss color legend"
+        >
+          <svg className="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M2 2l8 8M10 2l-8 8" />
+          </svg>
+        </button>
+      </div>
+    </FadeIn>
+  );
+}
+
+export const ProjectColorLegend = memo(ProjectColorLegendInner);
diff --git a/apps/web/src/components/timeline/ProjectPanel.tsx b/apps/web/src/components/timeline/ProjectPanel.tsx
index 762a761..0c93f88 100644
--- a/apps/web/src/components/timeline/ProjectPanel.tsx
+++ b/apps/web/src/components/timeline/ProjectPanel.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { clsx } from "clsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AllocationStatus, type StaffingRequirement } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 
@@ -77,7 +78,11 @@ const STATUS_COLORS = {
 };
 
 function toDateInput(d: Date | string): string {
-  return new Date(d).toISOString().split("T")[0] ?? "";
+  const dt = new Date(d);
+  const y = dt.getFullYear();
+  const m = String(dt.getMonth() + 1).padStart(2, "0");
+  const day = String(dt.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
 }
 
 function normalizeRole(value: string | null | undefined): string {
@@ -85,7 +90,7 @@ function normalizeRole(value: string | null | undefined): string {
 }
 
 export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
-  const utils = trpc.useUtils();
+  const invalidateTimeline = useInvalidateTimeline();
 
   const { data: ctx, isLoading } = trpc.timeline.getProjectContext.useQuery(
     { projectId },
@@ -98,29 +103,16 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
   );
 
   const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
-    onSuccess: () => {
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-    },
+    onSuccess: invalidateTimeline,
   });
 
   const deleteMutation = trpc.allocation.deleteAssignment.useMutation({
-    onSuccess: () => {
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-    },
+    onSuccess: invalidateTimeline,
   });
 
   const createAssignmentMutation = trpc.allocation.createAssignment.useMutation({
     onSuccess: () => {
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
+      invalidateTimeline();
       setAddingMember(false);
       setResourceSearch("");
     },
@@ -518,6 +510,17 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
 }
 
 function PanelShell({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
   return (
     <div className="fixed inset-y-0 right-0 w-[420px] bg-white border-l border-gray-200 shadow-2xl z-40 flex flex-col">
       <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
diff --git a/apps/web/src/components/timeline/ResourceHoverCard.tsx b/apps/web/src/components/timeline/ResourceHoverCard.tsx
new file mode 100644
index 0000000..ff3dcc1
--- /dev/null
+++ b/apps/web/src/components/timeline/ResourceHoverCard.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import { formatCents } from "~/lib/format.js";
+import type { SkillEntry } from "@planarchy/shared";
+
+interface ResourceHoverCardProps {
+  resourceId: string;
+  anchorEl: HTMLElement;
+  onClose: () => void;
+}
+
+export function ResourceHoverCard({ resourceId, anchorEl, onClose }: ResourceHoverCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ left: 0, top: 0 });
+
+  const { data, isLoading } = trpc.resource.getHoverCard.useQuery(
+    { id: resourceId },
+    { staleTime: 60_000 },
+  );
+
+  // Position relative to anchor element
+  useEffect(() => {
+    const rect = anchorEl.getBoundingClientRect();
+    setPos({
+      left: rect.right + 8,
+      top: Math.min(rect.top, window.innerHeight - 320),
+    });
+  }, [anchorEl]);
+
+  // Close on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node) && !anchorEl.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [onClose, anchorEl]);
+
+  const skills = (data?.skills ?? []) as unknown as SkillEntry[];
+  const mainSkills = skills.filter((s) => s.isMainSkill);
+  const topSkills = skills
+    .filter((s) => !s.isMainSkill && s.proficiency >= 4)
+    .sort((a, b) => b.proficiency - a.proficiency)
+    .slice(0, 6);
+
+  const popoverStyle: React.CSSProperties = {
+    position: "fixed",
+    left: Math.min(pos.left, window.innerWidth - 300),
+    top: pos.top,
+    zIndex: 50,
+    width: 280,
+  };
+
+  return (
+    <div
+      ref={ref}
+      data-resource-hover-card="true"
+      style={popoverStyle}
+      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden"
+      onMouseLeave={onClose}
+    >
+      {isLoading || !data ? (
+        <div className="p-4 text-xs text-gray-400 dark:text-gray-500">Loading...</div>
+      ) : (
+        <>
+          {/* Header */}
+          <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/40 flex items-center justify-center text-xs font-bold text-brand-700 dark:text-brand-300 flex-shrink-0">
+                {data.displayName.slice(0, 2).toUpperCase()}
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
+                  {data.displayName}
+                </div>
+                <div className="text-[11px] text-gray-400 dark:text-gray-500">{data.eid}</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-3 space-y-2.5 text-xs">
+            {/* Role & Chapter */}
+            <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
+              {data.areaRole && (
+                <div>
+                  <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">Role</div>
+                  <div className="font-medium text-gray-700 dark:text-gray-200 flex items-center gap-1">
+                    {data.areaRole.color && (
+                      <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: data.areaRole.color }} />
+                    )}
+                    {data.areaRole.name}
+                  </div>
+                </div>
+              )}
+              {data.chapter && (
+                <div>
+                  <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">Chapter</div>
+                  <div className="font-medium text-gray-700 dark:text-gray-200">{data.chapter}</div>
+                </div>
+              )}
+              {data.country && (
+                <div>
+                  <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">Location</div>
+                  <div className="font-medium text-gray-700 dark:text-gray-200">{data.country.name}</div>
+                </div>
+              )}
+              {data.managementLevel && (
+                <div>
+                  <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">Level</div>
+                  <div className="font-medium text-gray-700 dark:text-gray-200">{data.managementLevel.name}</div>
+                </div>
+              )}
+            </div>
+
+            {/* Rates */}
+            <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-gray-50 dark:bg-gray-750">
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">LCR</div>
+                <div className="font-semibold text-gray-700 dark:text-gray-200">
+                  {formatCents(data.lcrCents)} {data.currency}/h
+                </div>
+              </div>
+              <div className="w-px h-6 bg-gray-200 dark:bg-gray-600" />
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">UCR</div>
+                <div className="font-semibold text-gray-700 dark:text-gray-200">
+                  {formatCents(data.ucrCents)} {data.currency}/h
+                </div>
+              </div>
+              <div className="w-px h-6 bg-gray-200 dark:bg-gray-600" />
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider">Chg%</div>
+                <div className="font-semibold text-gray-700 dark:text-gray-200">{data.chargeabilityTarget}%</div>
+              </div>
+            </div>
+
+            {/* Main Skills */}
+            {mainSkills.length > 0 && (
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider mb-1">Main Skills</div>
+                <div className="flex flex-wrap gap-1">
+                  {mainSkills.map((s) => (
+                    <span
+                      key={s.skill}
+                      className="inline-flex items-center px-1.5 py-0.5 rounded-md text-[11px] font-medium bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300"
+                    >
+                      {s.skill}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Top Skills */}
+            {topSkills.length > 0 && (
+              <div>
+                <div className="text-gray-400 dark:text-gray-500 text-[10px] uppercase tracking-wider mb-1">Top Skills</div>
+                <div className="flex flex-wrap gap-1">
+                  {topSkills.map((s) => (
+                    <span
+                      key={s.skill}
+                      className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md text-[11px] bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                    >
+                      {s.skill}
+                      <span className="text-[9px] text-gray-400 dark:text-gray-500">L{s.proficiency}</span>
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* No skills */}
+            {skills.length === 0 && (
+              <div className="text-[11px] text-gray-400 dark:text-gray-500 italic">No skills imported yet.</div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/timeline/TimelineContext.tsx b/apps/web/src/components/timeline/TimelineContext.tsx
index 8f61213..90aa4bc 100644
--- a/apps/web/src/components/timeline/TimelineContext.tsx
+++ b/apps/web/src/components/timeline/TimelineContext.tsx
@@ -145,6 +145,7 @@ export interface TimelineContextValue {
   // ─ Display preferences
   displayMode: TimelineDisplayMode;
   heatmapScheme: HeatmapColorScheme;
+  blinkOverbookedDays: boolean;
 
   // ─ Loading
   isLoading: boolean;
@@ -287,6 +288,7 @@ export function TimelineProvider({
   const { prefs: appPrefs } = useAppPreferences();
   const displayMode = appPrefs.timelineDisplayMode;
   const heatmapScheme = appPrefs.heatmapColorScheme;
+  const blinkOverbookedDays = appPrefs.blinkOverbookedDays;
 
   // ─── Data queries ──────────────────────────────────────────────────────────
   const { data: entriesView, isLoading } = trpc.timeline.getEntriesView.useQuery(
@@ -300,7 +302,7 @@ export function TimelineProvider({
       ...(filters.countryCodes.length > 0 ? { countryCodes: filters.countryCodes } : {}),
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    { placeholderData: (prev: any) => prev },
+    { placeholderData: (prev: any) => prev, refetchOnWindowFocus: false, staleTime: 90_000 },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ) as { data: TimelineEntriesView | undefined; isLoading: boolean };
 
@@ -309,7 +311,7 @@ export function TimelineProvider({
 
   const { data: vacationEntries = [] } = trpc.vacation.list.useQuery(
     { startDate: viewStart, endDate: viewEnd, status: [VacationStatus.APPROVED, VacationStatus.PENDING], limit: 500 },
-    { placeholderData: (prev) => prev },
+    { placeholderData: (prev) => prev, refetchOnWindowFocus: false, staleTime: 90_000 },
   );
 
   const vacationsByResource = useMemo(() => {
@@ -593,6 +595,7 @@ export function TimelineProvider({
       today,
       displayMode,
       heatmapScheme,
+      blinkOverbookedDays,
       isLoading,
       isInitialLoading,
       totalAllocCount,
@@ -618,6 +621,7 @@ export function TimelineProvider({
       today,
       displayMode,
       heatmapScheme,
+      blinkOverbookedDays,
       isLoading,
       isInitialLoading,
       totalAllocCount,
diff --git a/apps/web/src/components/timeline/TimelineHeader.tsx b/apps/web/src/components/timeline/TimelineHeader.tsx
index 77cd5dd..67c4644 100644
--- a/apps/web/src/components/timeline/TimelineHeader.tsx
+++ b/apps/web/src/components/timeline/TimelineHeader.tsx
@@ -30,15 +30,15 @@ export function TimelineHeader({
     <>
       {/* Month header */}
       <div
-        className="sticky top-0 z-40 flex bg-white border-b border-gray-100"
+        className="sticky top-0 z-40 flex bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800"
         style={{ height: HEADER_MONTH_HEIGHT }}
       >
-        <div className="flex-shrink-0 border-r border-gray-200" style={{ width: LABEL_WIDTH }} />
+        <div className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700" style={{ width: LABEL_WIDTH }} />
         <div className="flex">
           {monthGroups.map((m, i) => (
             <div
               key={i}
-              className="text-xs font-semibold text-gray-500 border-r border-gray-200 px-2 flex items-center bg-gray-50"
+              className="text-xs font-semibold text-gray-500 dark:text-gray-400 border-r border-gray-200 dark:border-gray-700 px-2 flex items-center bg-gray-50 dark:bg-gray-800"
               style={{ width: m.colCount * CELL_WIDTH }}
             >
               {m.label}
@@ -50,11 +50,11 @@ export function TimelineHeader({
       {/* Day header — hidden at month zoom (cells too narrow for labels) */}
       {zoom !== "month" && (
         <div
-          className="sticky z-40 flex bg-gray-50 border-b border-gray-200 select-none"
+          className="sticky z-40 flex bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 select-none"
           style={{ top: HEADER_MONTH_HEIGHT, height: HEADER_DAY_HEIGHT }}
         >
           <div
-            className="flex-shrink-0 border-r border-gray-200 flex items-center px-4 text-xs font-medium text-gray-400 uppercase tracking-wider"
+            className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center px-4 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
             style={{ width: LABEL_WIDTH }}
           >
             {viewMode === "resource" ? "Resource" : "Project / Resource"}
@@ -72,10 +72,10 @@ export function TimelineHeader({
                   key={i}
                   className={clsx(
                     "flex-shrink-0 border-r flex flex-col items-center justify-center text-xs overflow-hidden",
-                    isToday ? "bg-brand-50 border-brand-200" :
-                    isSaturday ? "bg-amber-50/60 border-amber-200" :
-                    isSunday ? "bg-gray-100/80 border-gray-200" :
-                    isMonday ? "border-gray-200" : "border-gray-100",
+                    isToday ? "bg-brand-50 dark:bg-brand-950/40 border-brand-200 dark:border-brand-800" :
+                    isSaturday ? "bg-amber-50/60 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800" :
+                    isSunday ? "bg-gray-100/80 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700" :
+                    isMonday ? "border-gray-200 dark:border-gray-700" : "border-gray-100 dark:border-gray-800",
                   )}
                   style={{ width: CELL_WIDTH, height: HEADER_DAY_HEIGHT }}
                 >
@@ -83,7 +83,7 @@ export function TimelineHeader({
                     <>
                       <span className={clsx(
                         "font-medium leading-none",
-                        isToday ? "text-brand-600" : isSaturday ? "text-amber-600" : "text-gray-600",
+                        isToday ? "text-brand-600" : isSaturday ? "text-amber-600 dark:text-amber-400" : "text-gray-600 dark:text-gray-300",
                       )}>
                         {zoom === "week"
                           ? `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`
@@ -92,7 +92,7 @@ export function TimelineHeader({
                       {zoom === "day" && (
                         <span className={clsx(
                           "text-[9px] leading-none mt-0.5",
-                          isSaturday ? "text-amber-400" : "text-gray-300",
+                          isSaturday ? "text-amber-400 dark:text-amber-500" : "text-gray-300 dark:text-gray-600",
                         )}>
                           {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][date.getDay()]}
                         </span>
diff --git a/apps/web/src/components/timeline/TimelineProjectPanel.tsx b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
index 419673d..2672834 100644
--- a/apps/web/src/components/timeline/TimelineProjectPanel.tsx
+++ b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { clsx } from "clsx";
-import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { CSSProperties } from "react";
 import {
@@ -12,6 +12,7 @@ import {
 import { heatmapColor } from "./heatmapUtils.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { formatDateLong } from "~/lib/format.js";
+import { TimelineTooltip } from "./TimelineTooltip.js";
 import {
   ROW_HEIGHT,
   SUB_LANE_HEIGHT,
@@ -19,8 +20,15 @@ import {
   PROJECT_HEADER_HEIGHT,
   ORDER_TYPE_COLORS,
 } from "./timelineConstants.js";
-import type { DragState, AllocDragState, RangeState } from "~/hooks/useTimelineDrag.js";
+import { getProjectColor } from "~/lib/project-colors.js";
+import type { DragState, AllocDragState, RangeState, MultiSelectState } from "~/hooks/useTimelineDrag.js";
 import type { AllocMouseDownInfo, RowMouseDownInfo } from "./TimelineResourcePanel.js";
+import {
+  renderVacationBlocks,
+  renderRangeOverlay,
+  renderOverbookingBlink,
+  type VacationBlockInfo,
+} from "./renderHelpers.js";
 
 // ─── Props ──────────────────────────────────────────────────────────────────
 
@@ -42,6 +50,7 @@ interface TimelineProjectPanelProps {
     anchorX: number,
     anchorY: number,
   ) => void;
+  multiSelectState: MultiSelectState;
   // Layout from useTimelineLayout
   CELL_WIDTH: number;
   dates: Date[];
@@ -171,7 +180,7 @@ function buildProjectRowGridBackground(dates: Date[], CELL_WIDTH: number, today:
 
 // ─── Component ──────────────────────────────────────────────────────────────
 
-export function TimelineProjectPanel({
+function TimelineProjectPanelInner({
   scrollContainerRef,
   dragState,
   allocDragState,
@@ -185,6 +194,7 @@ export function TimelineProjectPanel({
   onOpenPanel,
   onOpenDemandClick,
   onAllocationContextMenu,
+  multiSelectState,
   CELL_WIDTH,
   dates,
   totalCanvasWidth,
@@ -201,6 +211,7 @@ export function TimelineProjectPanel({
     filters,
     displayMode,
     heatmapScheme,
+    blinkOverbookedDays,
     activeFilterCount,
     today,
   } = useTimelineContext();
@@ -411,7 +422,7 @@ export function TimelineProjectPanel({
         const laneCount = assignDemandLanes(row.openDemands).size > 0
           ? Math.max(...assignDemandLanes(row.openDemands).values()) + 1
           : 1;
-        return Math.max(ROW_HEIGHT, laneCount * (DEMAND_LANE_HEIGHT + DEMAND_LANE_GAP) + 8);
+        return Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
       }
       return ROW_HEIGHT;
     },
@@ -599,10 +610,11 @@ export function TimelineProjectPanel({
               (() => {
                 const { project } = row;
                 const customColor = project.color;
+                const projectColor = getProjectColor(project.id);
                 const colors = ORDER_TYPE_COLORS[project.orderType] ?? {
                   bg: "bg-gray-400",
                   text: "text-white",
-                  light: "bg-gray-50 border-gray-200",
+                  light: "bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-700",
                 };
                 const isThisProjectShifting =
                   dragState.isDragging && dragState.projectId === project.id;
@@ -620,17 +632,21 @@ export function TimelineProjectPanel({
                 return (
                   <div
                     data-project-group="true"
-                    className={clsx("flex border-b border-gray-200 group/proj", colors.light)}
-                    style={{ height: PROJECT_HEADER_HEIGHT }}
+                    className={clsx("flex border-b border-gray-200 dark:border-gray-700 group/proj", colors.light)}
+                    style={{ height: PROJECT_HEADER_HEIGHT, borderLeft: `4px solid ${customColor ?? projectColor.hex}` }}
                   >
                     <div
                       className={clsx(
-                        "flex-shrink-0 border-r border-gray-300 flex items-center px-4 gap-2.5 sticky left-0 z-30 cursor-pointer",
+                        "flex-shrink-0 border-r border-gray-300 dark:border-gray-600 flex items-center px-4 gap-2.5 sticky left-0 z-30 cursor-pointer",
                         colors.light,
                       )}
                       style={{ width: LABEL_WIDTH }}
                       onClick={() => onOpenPanel(project.id)}
                     >
+                      <div
+                        className="w-3 h-3 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: customColor ?? projectColor.hex }}
+                      />
                       <div className="min-w-0">
                         <div className="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
                           {project.name}
@@ -649,19 +665,17 @@ export function TimelineProjectPanel({
                       {projWidth > 0 && projLeft < totalCanvasWidth && (
                         <div
                           className={clsx(
-                            "absolute rounded flex items-center px-2 gap-1.5 transition-all duration-75",
+                            "absolute rounded flex items-center px-2 gap-1.5 transition-all duration-75 text-white",
                             isThisProjectShifting
                               ? "opacity-90 shadow-lg ring-2 ring-white ring-offset-1 cursor-grabbing z-20 scale-[1.01]"
                               : "cursor-grab hover:opacity-90 hover:ring-2 hover:ring-white hover:ring-offset-1",
-                            !customColor && colors.bg,
-                            customColor ? "text-white" : colors.text,
                           )}
                           style={{
                             left: projLeft + 2,
                             width: projWidth - 4,
                             top: 8,
                             height: 24,
-                            ...(customColor ? { backgroundColor: customColor } : {}),
+                            backgroundColor: customColor ?? projectColor.hex + "CC",
                           }}
                           onClick={() => {
                             if (!dragState.isDragging) onOpenPanel(project.id);
@@ -694,31 +708,39 @@ export function TimelineProjectPanel({
             ) : row.type === "open-demand" ? (
               renderOpenDemandRow(
                 row.openDemands,
+                row.projectId,
                 CELL_WIDTH,
                 totalCanvasWidth,
                 toLeft,
                 toWidth,
                 resourceRowGridStyle,
                 onOpenDemandClick,
+                onAllocMouseDown,
+                onAllocTouchStart,
+                onAllocationContextMenu,
+                multiSelectState,
+                allocDragState,
               )
             ) : (
               <div
                 data-project-resource-row="true"
-                className="flex border-b border-gray-100 hover:bg-blue-50/20 group"
+                data-project-id={row.project.id}
+                data-resource-id={row.resource.id}
+                className="flex border-b border-gray-100 dark:border-gray-800 hover:bg-blue-50/20 dark:hover:bg-gray-800/30 group"
                 style={{ height: ROW_HEIGHT }}
               >
                 <div
-                  className="flex-shrink-0 border-r border-gray-200 flex items-center pl-8 pr-4 gap-2 bg-white sticky left-0 z-30 group-hover:bg-blue-50"
+                  className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center pl-8 pr-4 gap-2 bg-white dark:bg-gray-900 sticky left-0 z-30 group-hover:bg-blue-50 dark:group-hover:bg-gray-800"
                   style={{ width: LABEL_WIDTH }}
                 >
-                  <div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-[10px] font-bold text-gray-600 flex-shrink-0">
+                  <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-[10px] font-bold text-gray-600 dark:text-gray-300 flex-shrink-0">
                     {row.resource.displayName.slice(0, 2).toUpperCase()}
                   </div>
-                  <div className="min-w-0">
-                    <div className="text-xs font-medium text-gray-800 truncate">
+                  <div className="min-w-0" data-resource-hover-id={row.resource.id}>
+                    <div className="text-xs font-medium text-gray-800 dark:text-gray-200 truncate cursor-pointer hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
                       {row.resource.displayName}
                     </div>
-                    <div className="text-[10px] text-gray-400 truncate">{row.resource.eid}</div>
+                    <div className="text-[10px] text-gray-400 dark:text-gray-500 truncate">{row.resource.eid}</div>
                   </div>
                 </div>
 
@@ -771,17 +793,32 @@ export function TimelineProjectPanel({
                     onAllocMouseDown,
                     onAllocTouchStart,
                     onAllocationContextMenu,
+                    multiSelectState,
                   )}
-                  {renderVacationBlocksForProjectRow(
-                    vacationsByResource.get(row.resource.id) ?? [],
-                    ROW_HEIGHT,
-                    toLeft,
-                    toWidth,
-                    CELL_WIDTH,
-                    totalCanvasWidth,
-                    filters.showVacations,
-                  )}
-                  {renderRangeOverlayProject(
+                  {filters.showVacations &&
+                    renderVacationBlocks(
+                      (vacationsByResource.get(row.resource.id) ?? []).reduce<VacationBlockInfo[]>(
+                        (acc, v) => {
+                          const vStart = new Date(v.startDate);
+                          const vEnd = new Date(v.endDate);
+                          const left = toLeft(vStart);
+                          const width = Math.max(CELL_WIDTH, toWidth(vStart, vEnd));
+                          if (width > 0 && left < totalCanvasWidth) {
+                            acc.push({ vacation: v, left, width });
+                          }
+                          return acc;
+                        },
+                        [],
+                      ),
+                      ROW_HEIGHT,
+                    )}
+                  {blinkOverbookedDays &&
+                    renderOverbookingBlink(
+                      allocsByResource.get(row.resource.id) ?? [],
+                      dates,
+                      CELL_WIDTH,
+                    )}
+                  {renderRangeOverlay(
                     rangeState,
                     row.resource.id,
                     ROW_HEIGHT,
@@ -796,7 +833,7 @@ export function TimelineProjectPanel({
         );
       })}
 
-      <ProjectPanelTooltips
+      <TimelineTooltip
         heatmapTooltipRef={heatmapTooltipRef}
         heatmapTooltipPos={heatmapTooltipPosRef.current}
         vacationTooltipRef={vacationTooltipRef}
@@ -808,111 +845,7 @@ export function TimelineProjectPanel({
   );
 }
 
-function ProjectPanelTooltips({
-  heatmapTooltipRef,
-  heatmapTooltipPos,
-  vacationTooltipRef,
-  vacationTooltipPos,
-  heatmapHover,
-  vacationHover,
-}: {
-  heatmapTooltipRef: React.RefObject<HTMLDivElement | null>;
-  heatmapTooltipPos: { left: number; top: number };
-  vacationTooltipRef: React.RefObject<HTMLDivElement | null>;
-  vacationTooltipPos: { left: number; top: number };
-  heatmapHover: {
-    date: Date;
-    totalH: number;
-    pct: number;
-    breakdown: {
-      projectId: string;
-      shortCode: string;
-      projectName: string;
-      orderType: string;
-      hoursPerDay: number;
-      responsiblePerson?: string | null;
-    }[];
-  } | null;
-  vacationHover: {
-    type: string;
-    startDate: Date | string;
-    endDate: Date | string;
-    note?: string | null;
-    requestedBy?: { name?: string | null; email: string } | null;
-    approvedBy?: { name?: string | null; email: string } | null;
-    approvedAt?: Date | string | null;
-  } | null;
-}) {
-  return (
-    <>
-      {heatmapHover ? (
-        <div
-          ref={heatmapTooltipRef}
-          style={{
-            left: heatmapTooltipPos.left,
-            top: heatmapTooltipPos.top,
-            backgroundColor: "rgba(3, 7, 18, 0.96)",
-          }}
-          className="fixed z-40 max-w-sm pointer-events-none rounded-xl border border-gray-800 bg-gray-950/96 px-3 py-2 text-xs text-white shadow-2xl"
-        >
-          <div className="flex items-center justify-between gap-3">
-            <span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
-            <span className="text-[11px] text-gray-300">
-              {heatmapHover.totalH.toFixed(1)}h · {Math.round(heatmapHover.pct)}%
-            </span>
-          </div>
-          <div className="mt-2 space-y-1.5">
-            {heatmapHover.breakdown.length > 0 ? (
-              heatmapHover.breakdown.slice(0, 6).map((entry) => (
-                <div
-                  key={`${entry.projectId}-${entry.shortCode}`}
-                  className="flex items-start justify-between gap-3"
-                >
-                  <div className="min-w-0">
-                    <div className="truncate font-medium text-white">
-                      {entry.shortCode ? `${entry.shortCode} · ` : ""}
-                      {entry.projectName}
-                    </div>
-                    <div className="truncate text-[11px] text-gray-400">
-                      {entry.responsiblePerson
-                        ? `Lead: ${entry.responsiblePerson}`
-                        : entry.orderType}
-                    </div>
-                  </div>
-                  <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
-                    {entry.hoursPerDay}h
-                  </span>
-                </div>
-              ))
-            ) : (
-              <div className="text-[11px] text-gray-400">No bookings on this day.</div>
-            )}
-          </div>
-        </div>
-      ) : null}
-
-      {vacationHover ? (
-        <div
-          ref={vacationTooltipRef}
-          style={{
-            left: vacationTooltipPos.left,
-            top: vacationTooltipPos.top,
-            backgroundColor: "rgba(120, 53, 15, 0.95)",
-          }}
-          className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
-        >
-          <div className="font-semibold">{vacationHover.type.replaceAll("_", " ")}</div>
-          <div className="mt-1 text-[11px] text-amber-100/90">
-            {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-          </div>
-          {vacationHover.note ? (
-            <div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
-          ) : null}
-        </div>
-      ) : null}
-    </>
-  );
-}
+// ProjectPanelTooltips removed — now uses shared TimelineTooltip component
 
 // ─── Pure render functions ──────────────────────────────────────────────────
 
@@ -949,55 +882,97 @@ function assignDemandLanes(
   return laneMap;
 }
 
-const DEMAND_LANE_HEIGHT = 30;
-const DEMAND_LANE_GAP = 2;
-
 function renderOpenDemandRow(
   openDemands: TimelineDemandEntry[],
+  projectId: string,
   CELL_WIDTH: number,
   totalCanvasWidth: number,
   toLeft: (d: Date) => number,
   toWidth: (s: Date, e: Date) => number,
   rowGridStyle: CSSProperties,
-  onOpenDemandClick: (demand: OpenDemandAssignment) => void,
+  _onOpenDemandClick: (demand: OpenDemandAssignment) => void,
+  onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
+  onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
+  onAllocationContextMenu: (
+    info: { allocationId: string; projectId: string },
+    anchorX: number,
+    anchorY: number,
+  ) => void,
+  multiSelectState: MultiSelectState,
+  allocDragState: AllocDragState,
 ) {
   if (openDemands.length === 0) return null;
 
   const laneMap = assignDemandLanes(openDemands);
   const laneCount = laneMap.size > 0 ? Math.max(...laneMap.values()) + 1 : 1;
-  const rowHeight = Math.max(ROW_HEIGHT, laneCount * (DEMAND_LANE_HEIGHT + DEMAND_LANE_GAP) + 8);
+  const rowHeight = Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
 
   return (
     <div
-      className="flex border-b border-dashed border-amber-200 bg-amber-50/30 hover:bg-amber-50/50 group"
-      style={{ minHeight: rowHeight }}
+      data-project-demand-row="true"
+      data-project-id={projectId}
+      className="group relative isolate flex border-b border-dashed border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-slate-950 hover:bg-amber-100/80 dark:hover:bg-slate-900"
+      style={{ height: rowHeight }}
     >
       <div
-        className="flex-shrink-0 border-r border-amber-200 flex items-center pl-8 pr-4 gap-2 bg-amber-50 sticky left-0 z-30"
-        style={{ width: LABEL_WIDTH, minHeight: rowHeight }}
+        className="sticky left-0 z-30 flex flex-shrink-0 items-center gap-2 border-r border-amber-200 bg-amber-50 pl-8 pr-4 dark:border-amber-800 dark:bg-slate-950"
+        style={{ width: LABEL_WIDTH, height: rowHeight }}
       >
-        <div className="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center text-[10px] font-bold text-amber-600 flex-shrink-0 border border-dashed border-amber-400">
-          ?
-        </div>
-        <div className="min-w-0">
-          <div className="text-xs font-medium text-amber-700 truncate">Open demand</div>
-          <div className="text-[10px] text-amber-500 truncate">
-            {openDemands.length} open demand{openDemands.length > 1 ? "s" : ""}
+        <div className="pointer-events-none absolute inset-0 bg-amber-50 dark:bg-slate-950" />
+        <div className="relative z-10 flex items-center gap-2 min-w-0">
+          <div className="w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center text-[10px] font-bold text-amber-600 dark:text-amber-400 flex-shrink-0 border border-dashed border-amber-400 dark:border-amber-600">
+            ?
+          </div>
+          <div className="min-w-0">
+            <div className="text-xs font-medium text-amber-700 dark:text-amber-400 truncate">Open demand</div>
+            <div className="text-[10px] text-amber-500 dark:text-amber-600 truncate">
+              {openDemands.length} open demand{openDemands.length > 1 ? "s" : ""}
+            </div>
           </div>
         </div>
       </div>
 
       <div
-        className="relative overflow-hidden"
-        style={{ width: totalCanvasWidth, minHeight: rowHeight, ...rowGridStyle }}
+        className="relative overflow-hidden bg-amber-50 touch-none dark:bg-slate-950"
+        style={{ width: totalCanvasWidth, height: rowHeight, ...rowGridStyle }}
       >
+        <div className="pointer-events-none absolute inset-x-0 inset-y-0 border-y border-dashed border-amber-200/70 dark:border-amber-800/80" />
+        <div className="pointer-events-none absolute inset-x-0 inset-y-1 rounded-md bg-amber-100/25 dark:bg-amber-950/35" />
         {openDemands.map((alloc) => {
           const allocStart = new Date(alloc.startDate);
           const allocEnd = new Date(alloc.endDate);
-          const left = toLeft(allocStart);
-          const width = Math.max(CELL_WIDTH, toWidth(allocStart, allocEnd));
+
+          const isAllocDragged = allocDragState.isActive && allocDragState.allocationId === alloc.id;
+          const dispStart =
+            isAllocDragged && allocDragState.currentStartDate
+              ? allocDragState.currentStartDate
+              : allocStart;
+          const dispEnd =
+            isAllocDragged && allocDragState.currentEndDate ? allocDragState.currentEndDate : allocEnd;
+
+          // Multi-drag visual offset
+          const isMultiDragTarget =
+            multiSelectState.isMultiDragging &&
+            multiSelectState.selectedAllocationIds.includes(alloc.id);
+          const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
+          const multiDragMode = multiSelectState.multiDragMode;
+
+          let left = toLeft(dispStart);
+          let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+          // Clamp negative left (bar starts before view) to avoid extending outside canvas
+          if (left < 0) {
+            width += left;
+            left = 0;
+          }
           if (width <= 0 || left >= totalCanvasWidth) return null;
 
+          if (isMultiDragTarget && multiDragMode === "resize-start") {
+            left += multiDragPx;
+            width = Math.max(CELL_WIDTH, width - multiDragPx);
+          } else if (isMultiDragTarget && multiDragMode === "resize-end") {
+            width = Math.max(CELL_WIDTH, width + multiDragPx);
+          }
+
           const roleEntity = (
             alloc as { roleEntity?: { id: string; name: string; color: string | null } | null }
           ).roleEntity;
@@ -1006,39 +981,99 @@ function renderOpenDemandRow(
           const roleColor = roleEntity?.color ?? "#f59e0b";
           const headcount = (alloc as { headcount?: number }).headcount ?? 1;
           const lane = laneMap.get(alloc.id) ?? 0;
-          const top = 4 + lane * (DEMAND_LANE_HEIGHT + DEMAND_LANE_GAP);
+          const top = 8 + lane * SUB_LANE_HEIGHT;
+          const blockHeight = SUB_LANE_HEIGHT - 8;
+
+          const HANDLE_W = width >= 48 ? 8 : 6;
+
+          const allocInfo: AllocMouseDownInfo = {
+            mode: "move",
+            allocationId: alloc.id,
+            mutationAllocationId: getPlanningEntryMutationId(alloc),
+            projectId: alloc.projectId,
+            projectName: alloc.project.name,
+            resourceId: null,
+            startDate: allocStart,
+            endDate: allocEnd,
+          };
 
           return (
             <div
               key={alloc.id}
-              className="absolute rounded-md flex items-center px-2 gap-1 overflow-hidden cursor-pointer hover:ring-2 hover:ring-amber-400 hover:ring-offset-1 z-[10]"
+              className={clsx(
+                "absolute rounded-md flex items-stretch overflow-hidden z-[10] group/demand",
+                isAllocDragged
+                  ? "ring-2 ring-amber-500 z-20"
+                  : "hover:ring-2 hover:ring-amber-400 hover:ring-offset-1",
+                multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
+              )}
+              title={`${roleName}${headcount > 1 ? ` x${headcount}` : ""} · ${alloc.hoursPerDay}h/day · ${formatDateLong(allocStart)} – ${formatDateLong(allocEnd)}`}
               style={{
                 left: left + 2,
                 width: width - 4,
                 top,
-                height: DEMAND_LANE_HEIGHT,
-                backgroundColor: `${roleColor}33`,
-                border: `2px dashed ${roleColor}99`,
+                height: blockHeight,
+                backgroundColor: `${roleColor}4D`,
+                border: `2px dashed ${roleColor}B3`,
+                ...(multiDragPx && multiDragMode === "move"
+                  ? { transform: `translateX(${multiDragPx}px)` }
+                  : {}),
               }}
-              onClick={() => {
-                onOpenDemandClick({
-                  id: getPlanningEntryMutationId(alloc),
-                  projectId: alloc.projectId,
-                  roleId: (alloc as { roleId?: string | null }).roleId ?? null,
-                  role: (alloc as { role?: string | null }).role ?? null,
-                  headcount,
-                  startDate: allocStart,
-                  endDate: allocEnd,
-                  hoursPerDay: alloc.hoursPerDay,
-                  roleEntity: roleEntity ?? null,
-                  project: alloc.project as { id: string; name: string; shortCode: string },
-                });
+              onMouseDown={(e) => {
+                if (e.button === 2) e.stopPropagation();
+              }}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onAllocationContextMenu(
+                  { allocationId: alloc.id, projectId: alloc.projectId },
+                  e.clientX,
+                  e.clientY,
+                );
               }}
             >
-              <span className="text-xs font-medium truncate" style={{ color: roleColor }}>
-                {roleName}
-                {headcount > 1 ? ` x${headcount}` : ""}
-              </span>
+              {/* Left resize handle */}
+              <div
+                className="flex-shrink-0 cursor-ew-resize hover:bg-black/10"
+                style={{ width: HANDLE_W }}
+                onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" })}
+                onTouchStart={(e) => {
+                  e.stopPropagation();
+                  onAllocTouchStart(e, { ...allocInfo, mode: "resize-start" });
+                }}
+              />
+
+              {/* Center — move + click */}
+              <div
+                className={clsx(
+                  "flex-1 min-w-0 flex items-center px-1 gap-1",
+                  isAllocDragged ? "cursor-grabbing" : "cursor-grab",
+                )}
+                onMouseDown={(e) => {
+                  e.stopPropagation();
+                  onAllocMouseDown(e, allocInfo);
+                }}
+                onTouchStart={(e) => {
+                  e.stopPropagation();
+                  onAllocTouchStart(e, allocInfo);
+                }}
+              >
+                <span className="text-xs font-medium truncate" style={{ color: roleColor }}>
+                  {roleName}
+                  {headcount > 1 ? ` x${headcount}` : ""}
+                </span>
+              </div>
+
+              {/* Right resize handle */}
+              <div
+                className="flex-shrink-0 cursor-ew-resize hover:bg-black/10"
+                style={{ width: HANDLE_W }}
+                onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" })}
+                onTouchStart={(e) => {
+                  e.stopPropagation();
+                  onAllocTouchStart(e, { ...allocInfo, mode: "resize-end" });
+                }}
+              />
             </div>
           );
         })}
@@ -1157,6 +1192,7 @@ function renderProjectDragHandles(
     anchorX: number,
     anchorY: number,
   ) => void,
+  multiSelectState: MultiSelectState,
 ) {
   return allocs.map((alloc) => {
     const allocStart = new Date(alloc.startDate);
@@ -1170,10 +1206,24 @@ function renderProjectDragHandles(
     const dispEnd =
       isAllocDragged && allocDragState.currentEndDate ? allocDragState.currentEndDate : allocEnd;
 
-    const left = toLeft(dispStart);
-    const width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+    let left = toLeft(dispStart);
+    let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
     if (width <= 0 || left >= totalCanvasWidth) return null;
 
+    // Multi-drag visual offset
+    const isMultiDragTarget =
+      multiSelectState.isMultiDragging &&
+      multiSelectState.selectedAllocationIds.includes(alloc.id);
+    const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
+    const multiDragMode = multiSelectState.multiDragMode;
+
+    if (isMultiDragTarget && multiDragMode === "resize-start") {
+      left += multiDragPx;
+      width = Math.max(CELL_WIDTH, width - multiDragPx);
+    } else if (isMultiDragTarget && multiDragMode === "resize-end") {
+      width = Math.max(CELL_WIDTH, width + multiDragPx);
+    }
+
     // Always show resize handles — for narrow bars, use overlapping handles
     const HANDLE_W = width >= 48 ? 8 : 6;
     const hasRecurrence = !!(alloc.metadata as Record<string, unknown> | null)?.recurrence;
@@ -1198,8 +1248,20 @@ function renderProjectDragHandles(
           isAllocDragged
             ? "ring-2 ring-brand-400 z-20"
             : "hover:ring-1 hover:ring-brand-300/70 z-[15]",
+          multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
         )}
-        style={{ left: left + 2, width: width - 4, top: 2, bottom: 2 }}
+        style={{
+          left: left + 2,
+          width: width - 4,
+          top: 2,
+          bottom: 2,
+          ...(multiDragPx && multiDragMode === "move"
+              ? { transform: `translateX(${multiDragPx}px)` }
+              : {}),
+        }}
+        onMouseDown={(e) => {
+          if (e.button === 2) e.stopPropagation();
+        }}
         onContextMenu={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -1250,93 +1312,4 @@ function renderProjectDragHandles(
   });
 }
 
-// ─── Vacation blocks for project view rows ──────────────────────────────────
-
-const TYPE_COLORS: Record<string, string> = {
-  ANNUAL: "bg-orange-400/40",
-  SICK: "bg-red-500/40",
-  PUBLIC_HOLIDAY: "bg-violet-400/40",
-  OTHER: "bg-amber-400/40",
-};
-const TYPE_BORDER: Record<string, string> = {
-  ANNUAL: "border-orange-500",
-  SICK: "border-red-600",
-  PUBLIC_HOLIDAY: "border-violet-500",
-  OTHER: "border-amber-500",
-};
-const TYPE_LABELS_SHORT: Record<string, string> = {
-  ANNUAL: "Annual",
-  SICK: "Sick",
-  PUBLIC_HOLIDAY: "Holiday",
-  OTHER: "Other",
-};
-
-function renderVacationBlocksForProjectRow(
-  vacations: { id: string; type: string; startDate: Date | string; endDate: Date | string }[],
-  rowHeight: number,
-  toLeft: (d: Date) => number,
-  toWidth: (s: Date, e: Date) => number,
-  CELL_WIDTH: number,
-  totalCanvasWidth: number,
-  showVacations: boolean,
-) {
-  if (!showVacations || vacations.length === 0) return null;
-
-  return vacations.map((v) => {
-    const vStart = new Date(v.startDate);
-    const vEnd = new Date(v.endDate);
-    const left = toLeft(vStart);
-    const width = Math.max(CELL_WIDTH, toWidth(vStart, vEnd));
-    if (width <= 0 || left >= totalCanvasWidth) return null;
-
-    const colorClass = TYPE_COLORS[v.type] ?? "bg-orange-400/40";
-    const borderClass = TYPE_BORDER[v.type] ?? "border-orange-500";
-    const label = TYPE_LABELS_SHORT[v.type] ?? v.type;
-
-    return (
-      <div
-        key={`vac-${v.id}`}
-        className={clsx(
-          "absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden border-t-2 pointer-events-none",
-          colorClass,
-          borderClass,
-        )}
-        style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
-      >
-        {width > 40 && (
-          <span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
-            🏖 {label}
-          </span>
-        )}
-      </div>
-    );
-  });
-}
-
-// ─── Range overlay for project view ─────────────────────────────────────────
-
-function renderRangeOverlayProject(
-  rangeState: RangeState,
-  resourceId: string,
-  rowHeight: number,
-  toLeft: (d: Date) => number,
-  toWidth: (s: Date, e: Date) => number,
-  CELL_WIDTH: number,
-) {
-  if (!rangeState.isSelecting || rangeState.resourceId !== resourceId || !rangeState.startDate) {
-    return null;
-  }
-  const end = rangeState.currentDate ?? rangeState.startDate;
-  const [selStart, selEnd] =
-    rangeState.startDate <= end ? [rangeState.startDate, end] : [end, rangeState.startDate];
-
-  const left = toLeft(selStart);
-  const width = Math.max(CELL_WIDTH, toWidth(selStart, selEnd));
-
-  return (
-    <div
-      className="absolute bg-brand-200/40 border-2 border-brand-400 rounded pointer-events-none z-10"
-      style={{ left, width, top: 4, height: rowHeight - 8 }}
-    />
-  );
-}
+export const TimelineProjectPanel = memo(TimelineProjectPanelInner);
diff --git a/apps/web/src/components/timeline/TimelineResourcePanel.tsx b/apps/web/src/components/timeline/TimelineResourcePanel.tsx
index b5979e5..c54b2db 100644
--- a/apps/web/src/components/timeline/TimelineResourcePanel.tsx
+++ b/apps/web/src/components/timeline/TimelineResourcePanel.tsx
@@ -1,31 +1,37 @@
 "use client";
 
 import { clsx } from "clsx";
-import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   useTimelineContext,
   type TimelineAssignmentEntry,
-  type VacationEntry,
 } from "./TimelineContext.js";
 import { ConflictOverlay } from "./ConflictOverlay.js";
 import { computeSubLanes } from "./utils.js";
-import { heatmapBgColor, heatmapColor } from "./heatmapUtils.js";
+import { heatmapBgColor } from "./heatmapUtils.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
-import { formatDateLong } from "~/lib/format.js";
+import { TimelineTooltip } from "./TimelineTooltip.js";
 import {
   ROW_HEIGHT,
   SUB_LANE_HEIGHT,
   LABEL_WIDTH,
-  ORDER_TYPE_COLORS,
 } from "./timelineConstants.js";
+import { getProjectColor } from "~/lib/project-colors.js";
 import type {
   DragState,
   AllocDragState,
   RangeState,
   ShiftPreviewData,
+  MultiSelectState,
 } from "~/hooks/useTimelineDrag.js";
 import type { HeatmapColorScheme } from "~/hooks/useAppPreferences.js";
+import {
+  renderVacationBlocks,
+  renderRangeOverlay,
+  renderOverbookingBlink,
+  type VacationBlockInfo,
+} from "./renderHelpers.js";
 
 // ─── Props ──────────────────────────────────────────────────────────────────
 
@@ -45,6 +51,7 @@ interface TimelineResourcePanelProps {
     anchorX: number,
     anchorY: number,
   ) => void;
+  multiSelectState: MultiSelectState;
   // Layout from useTimelineLayout
   CELL_WIDTH: number;
   dates: Date[];
@@ -74,7 +81,7 @@ export interface RowMouseDownInfo {
 
 // ─── Component ──────────────────────────────────────────────────────────────
 
-export function TimelineResourcePanel({
+function TimelineResourcePanelInner({
   scrollContainerRef,
   dragState,
   allocDragState,
@@ -86,6 +93,7 @@ export function TimelineResourcePanel({
   onRowMouseDown,
   onRowTouchStart,
   onAllocationContextMenu,
+  multiSelectState,
   CELL_WIDTH,
   dates,
   totalCanvasWidth,
@@ -103,6 +111,7 @@ export function TimelineResourcePanel({
     viewEnd,
     displayMode,
     heatmapScheme,
+    blinkOverbookedDays,
     activeFilterCount,
   } = useTimelineContext();
 
@@ -215,6 +224,36 @@ export function TimelineResourcePanel({
     return result;
   }, [displayMode, resourceRows]);
 
+  // ─── Memo 4: utilization per resource for row background tint ───────────
+  const utilizationByResource = useMemo(() => {
+    const REF_H = 8;
+    const result = new Map<string, number>(); // resourceId -> avg utilization pct
+    for (const { resource, allocs } of resourceRows) {
+      if (allocs.length === 0) continue;
+      let totalHours = 0;
+      let dayCount = 0;
+      for (const date of dates) {
+        const t = date.getTime();
+        let dayH = 0;
+        for (const a of allocs) {
+          const s = new Date(a.startDate);
+          s.setHours(0, 0, 0, 0);
+          const e = new Date(a.endDate);
+          e.setHours(0, 0, 0, 0);
+          if (t >= s.getTime() && t <= e.getTime()) dayH += a.hoursPerDay;
+        }
+        if (dayH > 0) {
+          totalHours += dayH;
+          dayCount++;
+        }
+      }
+      if (dayCount > 0) {
+        result.set(resource.id, (totalHours / dayCount / REF_H) * 100);
+      }
+    }
+    return result;
+  }, [resourceRows, dates]);
+
   // ─── Heatmap row hover handler ────────────────────────────────────────────
   const handleRowHeatmapMove = useCallback(
     (e: React.MouseEvent, allocs: TimelineAssignmentEntry[]) => {
@@ -392,6 +431,14 @@ export function TimelineResourcePanel({
           ? ROW_HEIGHT
           : Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
 
+        // Utilization background tint
+        const utilPct = utilizationByResource.get(resource.id) ?? 0;
+        const utilBg = utilPct > 100
+          ? "rgba(254,202,202,0.18)" // red tint for over-utilized
+          : utilPct >= 50
+            ? `rgba(59,130,246,${Math.min(0.06 + (utilPct - 50) * 0.0014, 0.12)})` // faint blue tint scaling 50-100%
+            : undefined;
+
         return (
           <div
             key={resource.id}
@@ -407,27 +454,27 @@ export function TimelineResourcePanel({
           >
             <div
               className={clsx(
-                "flex border-b border-gray-100 hover:bg-blue-50/20 group transition-colors",
+                "flex border-b border-gray-100 dark:border-gray-800 hover:bg-blue-50/20 dark:hover:bg-gray-800/30 group transition-colors",
                 dragState.isDragging && isContextResource && "border-l-4 border-l-brand-400",
               )}
-              style={{ height: rowHeight }}
+              style={{ height: rowHeight, ...(utilBg ? { backgroundColor: utilBg } : {}) }}
             >
               {/* Label column */}
               <div
                 className={clsx(
-                  "flex-shrink-0 border-r border-gray-200 flex items-center px-4 gap-2.5 bg-white sticky left-0 z-30 group-hover:bg-blue-50",
-                  dragState.isDragging && isContextResource && "bg-brand-50",
+                  "flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center px-4 gap-2.5 bg-white dark:bg-gray-900 sticky left-0 z-30 group-hover:bg-blue-50 dark:group-hover:bg-gray-800",
+                  dragState.isDragging && isContextResource && "bg-brand-50 dark:bg-brand-950/40",
                 )}
                 style={{ width: LABEL_WIDTH }}
               >
-                <div className="w-8 h-8 rounded-full bg-brand-100 flex items-center justify-center text-xs font-bold text-brand-700 flex-shrink-0">
+                <div className="w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/40 flex items-center justify-center text-xs font-bold text-brand-700 dark:text-brand-300 flex-shrink-0">
                   {resource.displayName.slice(0, 2).toUpperCase()}
                 </div>
-                <div className="min-w-0">
-                  <div className="text-sm font-medium text-gray-900 truncate">
+                <div className="min-w-0" data-resource-hover-id={resource.id}>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate cursor-pointer hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
                     {resource.displayName}
                   </div>
-                  <div className="text-xs text-gray-400 truncate">
+                  <div className="text-xs text-gray-400 dark:text-gray-500 truncate">
                     {resource.chapter ?? resource.eid}
                   </div>
                 </div>
@@ -467,6 +514,7 @@ export function TimelineResourcePanel({
                       toLeft,
                       toWidth,
                       totalCanvasWidth,
+                      multiSelectState,
                     )
                   : renderAllocBlocksFromData(
                       precomputed?.blockData ?? [],
@@ -480,14 +528,17 @@ export function TimelineResourcePanel({
                       onAllocMouseDown,
                       onAllocTouchStart,
                       onAllocationContextMenu,
+                      multiSelectState,
                     )}
-                {renderVacationBlocksForRow(
+                {renderVacationBlocks(
                   vacationBlocksByResource.get(resource.id) ?? [],
                   rowHeight,
                 )}
                 {displayMode === "strip" && renderLoadGraph(allocs, dates, CELL_WIDTH)}
                 {displayMode === "heatmap" &&
                   renderHeatmapOverlay(allocs, dates, CELL_WIDTH, heatmapScheme)}
+                {blinkOverbookedDays &&
+                  renderOverbookingBlink(allocs, dates, CELL_WIDTH)}
                 {renderRangeOverlay(
                   rangeState,
                   resource.id,
@@ -523,7 +574,7 @@ export function TimelineResourcePanel({
       })}
 
       {/* Tooltips rendered inside the panel so they live near their data source */}
-      <ResourcePanelTooltips
+      <TimelineTooltip
         heatmapTooltipRef={heatmapTooltipRef}
         heatmapTooltipPos={heatmapTooltipPosRef.current}
         vacationTooltipRef={vacationTooltipRef}
@@ -535,122 +586,10 @@ export function TimelineResourcePanel({
   );
 }
 
-// ─── Tooltip sub-component (portal-free: positioned fixed) ──────────────────
-
-function ResourcePanelTooltips({
-  heatmapTooltipRef,
-  heatmapTooltipPos,
-  vacationTooltipRef,
-  vacationTooltipPos,
-  heatmapHover,
-  vacationHover,
-}: {
-  heatmapTooltipRef: React.RefObject<HTMLDivElement | null>;
-  heatmapTooltipPos: { left: number; top: number };
-  vacationTooltipRef: React.RefObject<HTMLDivElement | null>;
-  vacationTooltipPos: { left: number; top: number };
-  heatmapHover: {
-    date: Date;
-    totalH: number;
-    pct: number;
-    breakdown: {
-      projectId: string;
-      shortCode: string;
-      projectName: string;
-      orderType: string;
-      hoursPerDay: number;
-      responsiblePerson?: string | null;
-    }[];
-  } | null;
-  vacationHover: {
-    type: string;
-    startDate: Date | string;
-    endDate: Date | string;
-    note?: string | null;
-    requestedBy?: { name?: string | null; email: string } | null;
-    approvedBy?: { name?: string | null; email: string } | null;
-    approvedAt?: Date | string | null;
-  } | null;
-}) {
-  return (
-    <>
-      {heatmapHover ? (
-        <div
-          ref={heatmapTooltipRef}
-          style={{
-            left: heatmapTooltipPos.left,
-            top: heatmapTooltipPos.top,
-            backgroundColor: "rgba(3, 7, 18, 0.96)",
-          }}
-          className="fixed z-40 max-w-sm pointer-events-none rounded-xl border border-gray-800 bg-gray-950/96 px-3 py-2 text-xs text-white shadow-2xl"
-        >
-          <div className="flex items-center justify-between gap-3">
-            <span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
-            <span className="text-[11px] text-gray-300">
-              {heatmapHover.totalH.toFixed(1)}h · {Math.round(heatmapHover.pct)}%
-            </span>
-          </div>
-          <div className="mt-2 space-y-1.5">
-            {heatmapHover.breakdown.length > 0 ? (
-              heatmapHover.breakdown.slice(0, 6).map((entry) => (
-                <div
-                  key={`${entry.projectId}-${entry.shortCode}`}
-                  className="flex items-start justify-between gap-3"
-                >
-                  <div className="min-w-0">
-                    <div className="truncate font-medium text-white">
-                      {entry.shortCode ? `${entry.shortCode} · ` : ""}
-                      {entry.projectName}
-                    </div>
-                    <div className="truncate text-[11px] text-gray-400">
-                      {entry.responsiblePerson
-                        ? `Lead: ${entry.responsiblePerson}`
-                        : entry.orderType}
-                    </div>
-                  </div>
-                  <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
-                    {entry.hoursPerDay}h
-                  </span>
-                </div>
-              ))
-            ) : (
-              <div className="text-[11px] text-gray-400">No bookings on this day.</div>
-            )}
-          </div>
-        </div>
-      ) : null}
-
-      {vacationHover ? (
-        <div
-          ref={vacationTooltipRef}
-          style={{
-            left: vacationTooltipPos.left,
-            top: vacationTooltipPos.top,
-            backgroundColor: "rgba(120, 53, 15, 0.95)",
-          }}
-          className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
-        >
-          <div className="font-semibold">{vacationHover.type.replaceAll("_", " ")}</div>
-          <div className="mt-1 text-[11px] text-amber-100/90">
-            {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-          </div>
-          {vacationHover.note ? (
-            <div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
-          ) : null}
-        </div>
-      ) : null}
-    </>
-  );
-}
+// ResourcePanelTooltips removed — now uses shared TimelineTooltip component
 
 // ─── Helper types ───────────────────────────────────────────────────────────
 
-interface VacationBlockInfo {
-  vacation: VacationEntry;
-  left: number;
-  width: number;
-}
-
 interface AllocBlockData {
   alloc: TimelineAssignmentEntry;
   lane: number;
@@ -658,81 +597,6 @@ interface AllocBlockData {
 
 // ─── Pure render functions (no hooks, extracted from TimelineView) ───────────
 
-const TYPE_COLORS: Record<string, string> = {
-  ANNUAL: "bg-orange-400/40",
-  SICK: "bg-red-500/40",
-  PUBLIC_HOLIDAY: "bg-violet-400/40",
-  OTHER: "bg-amber-400/40",
-};
-const TYPE_BORDER: Record<string, string> = {
-  ANNUAL: "border-orange-500",
-  SICK: "border-red-600",
-  PUBLIC_HOLIDAY: "border-violet-500",
-  OTHER: "border-amber-500",
-};
-const TYPE_LABELS_SHORT: Record<string, string> = {
-  ANNUAL: "Annual",
-  SICK: "Sick",
-  PUBLIC_HOLIDAY: "Holiday",
-  OTHER: "Other",
-};
-
-function renderVacationBlocksForRow(blocks: VacationBlockInfo[], rowHeight: number) {
-  if (blocks.length === 0) return null;
-
-  return blocks.map(({ vacation: v, left, width }) => {
-    const colorClass = TYPE_COLORS[v.type] ?? "bg-orange-400/40";
-    const borderClass = TYPE_BORDER[v.type] ?? "border-orange-500";
-    const label = TYPE_LABELS_SHORT[v.type] ?? v.type;
-    const isPending = v.status === "PENDING";
-
-    return (
-      <div
-        key={`vac-${v.id}`}
-        className={clsx(
-          "absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden pointer-events-none",
-          colorClass,
-          isPending ? "border-t-2 border-dashed opacity-60" : "border-t-2",
-          isPending ? "" : borderClass,
-        )}
-        style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
-      >
-        {width > 40 && (
-          <span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
-            {isPending ? "\u23F3" : "\uD83C\uDFD6"} {label}
-          </span>
-        )}
-      </div>
-    );
-  });
-}
-
-function renderRangeOverlay(
-  rangeState: RangeState,
-  resourceId: string,
-  rowHeight: number,
-  toLeft: (d: Date) => number,
-  toWidth: (s: Date, e: Date) => number,
-  CELL_WIDTH: number,
-) {
-  if (!rangeState.isSelecting || rangeState.resourceId !== resourceId || !rangeState.startDate) {
-    return null;
-  }
-  const end = rangeState.currentDate ?? rangeState.startDate;
-  const [selStart, selEnd] =
-    rangeState.startDate <= end ? [rangeState.startDate, end] : [end, rangeState.startDate];
-
-  const left = toLeft(selStart);
-  const width = Math.max(CELL_WIDTH, toWidth(selStart, selEnd));
-
-  return (
-    <div
-      className="absolute bg-brand-200/40 border-2 border-brand-400 rounded pointer-events-none z-10"
-      style={{ left, width, top: 4, height: rowHeight - 8 }}
-    />
-  );
-}
-
 function renderAllocBlocksFromData(
   blockData: AllocBlockData[],
   _allocs: TimelineAssignmentEntry[],
@@ -749,6 +613,7 @@ function renderAllocBlocksFromData(
     anchorX: number,
     anchorY: number,
   ) => void,
+  multiSelectState: MultiSelectState,
 ) {
   const anyDragActive = dragState.isDragging || allocDragState.isActive;
 
@@ -771,19 +636,31 @@ function renderAllocBlocksFromData(
       dispEnd = allocDragState.currentEndDate;
     }
 
-    const left = toLeft(dispStart);
-    const width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+    // Multi-drag offset: shift selected allocations visually during multi-drag
+    const isMultiDragTarget =
+      multiSelectState.isMultiDragging &&
+      multiSelectState.selectedAllocationIds.includes(alloc.id);
+    const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
+    const multiDragMode = multiSelectState.multiDragMode;
+
+    let left = toLeft(dispStart);
+    let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+
+    // For multi-drag resize, adjust left/width instead of using translateX
+    if (isMultiDragTarget && multiDragMode === "resize-start") {
+      left += multiDragPx;
+      width = Math.max(CELL_WIDTH, width - multiDragPx);
+    } else if (isMultiDragTarget && multiDragMode === "resize-end") {
+      width = Math.max(CELL_WIDTH, width + multiDragPx);
+    }
     if (width <= 0 || left >= totalCanvasWidth) return null;
 
     const blockTop = 8 + lane * SUB_LANE_HEIGHT;
     const blockHeight = SUB_LANE_HEIGHT - 8;
 
     const customColor = (alloc.project as { color?: string | null }).color;
-    const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
-      bg: "bg-gray-400",
-      text: "text-white",
-      light: "",
-    };
+    const projectColor = getProjectColor(alloc.projectId);
+    const blockBgColor = customColor ?? projectColor.hex + "B3";
     const HANDLE_W = width >= 48 ? 10 : 6;
     const hasRecurrence = !!(alloc.metadata as Record<string, unknown> | null)?.recurrence;
 
@@ -802,22 +679,27 @@ function renderAllocBlocksFromData(
       <div
         key={alloc.id}
         className={clsx(
-          "absolute rounded-md flex items-stretch overflow-hidden transition-all duration-75 group/block",
-          !customColor && colors.bg,
-          customColor ? "text-white" : colors.text,
+          "absolute rounded-md flex items-stretch overflow-hidden transition-all duration-75 group/block text-white",
           hasRecurrence && "opacity-80 border-2 border-dashed border-white/60",
           isBeingDragged
             ? "opacity-90 shadow-2xl ring-2 ring-white ring-offset-1 z-20 scale-[1.01]"
             : isOtherDragged
               ? "opacity-30 z-[10]"
               : "hover:ring-2 hover:ring-white hover:ring-offset-1 z-[10]",
+          multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
         )}
         style={{
           left: left + 2,
           width: width - 4,
           top: blockTop,
           height: blockHeight,
-          ...(customColor ? { backgroundColor: customColor } : {}),
+          backgroundColor: blockBgColor,
+          ...(multiDragPx && multiDragMode === "move" ? { transform: `translateX(${multiDragPx}px)` } : {}),
+        }}
+        onMouseDown={(e) => {
+          // Stop right-click mouseDown from bubbling to the canvas,
+          // which would falsely start a multi-selection rectangle.
+          if (e.button === 2) e.stopPropagation();
         }}
         onContextMenu={(e) => {
           e.preventDefault();
@@ -862,7 +744,11 @@ function renderAllocBlocksFromData(
           {hasRecurrence && width > 28 && (
             <span className="text-[10px] opacity-80 flex-shrink-0">↻</span>
           )}
-          <span className="text-xs font-semibold truncate">{alloc.project.name}</span>
+          {width > 60 ? (
+            <span className="text-xs font-semibold truncate">{alloc.project.name}</span>
+          ) : (
+            <span className="text-[9px] font-bold truncate opacity-90">{alloc.project.shortCode}</span>
+          )}
           {width > 130 && <span className="text-[10px] opacity-75 truncate">{alloc.role}</span>}
           {width > 190 && (
             <span className="text-[10px] opacity-60 truncate">{alloc.hoursPerDay}h</span>
@@ -983,6 +869,7 @@ function renderDailyBars(
   toLeft: (d: Date) => number,
   toWidth: (s: Date, e: Date) => number,
   totalCanvasWidth: number,
+  multiSelectState: MultiSelectState,
 ) {
   const BAR_AREA = rowHeight - 8;
   const REF_H = 8;
@@ -1012,11 +899,9 @@ function renderDailyBars(
     let stackedH = 0;
 
     const segs: React.ReactNode[] = covering.map((alloc) => {
-      const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
-        bg: "bg-gray-400",
-        text: "text-white",
-        light: "",
-      };
+      const customColor = (alloc.project as { color?: string | null }).color;
+      const projectColor = getProjectColor(alloc.projectId);
+      const segBgColor = customColor ?? projectColor.hex + "B3";
       const segH = Math.max(
         2,
         Math.min(BAR_AREA - stackedH, Math.round((alloc.hoursPerDay / REF_H) * BAR_AREA)),
@@ -1057,12 +942,25 @@ function renderDailyBars(
           key={`bar-${i}-${alloc.id}`}
           className={clsx(
             "absolute rounded-sm transition-all duration-75 flex items-stretch overflow-hidden",
-            colors.bg,
             isBeingDragged
               ? "opacity-90 ring-2 ring-white ring-offset-1 z-20"
               : "hover:opacity-80 z-[10]",
+            multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
           )}
-          style={{ left: i * CELL_WIDTH + 2, width: CELL_WIDTH - 4, height: segH, bottom }}
+          style={{
+            left: i * CELL_WIDTH + 2,
+            width: CELL_WIDTH - 4,
+            height: segH,
+            bottom,
+            backgroundColor: segBgColor,
+            ...(multiSelectState.isMultiDragging &&
+              multiSelectState.selectedAllocationIds.includes(alloc.id)
+                ? { transform: `translateX(${multiSelectState.multiDragDaysDelta * CELL_WIDTH}px)` }
+                : {}),
+          }}
+          onMouseDown={(e) => {
+            if (e.button === 2) e.stopPropagation();
+          }}
           onContextMenu={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -1130,5 +1028,8 @@ function renderDailyBars(
   });
 }
 
+export const TimelineResourcePanel = memo(TimelineResourcePanelInner);
+
 // ─── Re-export tooltip types for the parent ─────────────────────────────────
-export type { VacationBlockInfo, AllocBlockData };
+export type { AllocBlockData };
+export type { VacationBlockInfo } from "./renderHelpers.js";
diff --git a/apps/web/src/components/timeline/TimelineTooltip.tsx b/apps/web/src/components/timeline/TimelineTooltip.tsx
new file mode 100644
index 0000000..0b9a0f0
--- /dev/null
+++ b/apps/web/src/components/timeline/TimelineTooltip.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { formatDateLong } from "~/lib/format.js";
+
+export type HeatmapHoverData = {
+  date: Date;
+  totalH: number;
+  pct: number;
+  breakdown: {
+    projectId: string;
+    shortCode: string;
+    projectName: string;
+    orderType: string;
+    hoursPerDay: number;
+    responsiblePerson?: string | null;
+  }[];
+};
+
+export type VacationHoverData = {
+  type: string;
+  startDate: Date | string;
+  endDate: Date | string;
+  note?: string | null;
+  requestedBy?: { name?: string | null; email: string } | null;
+  approvedBy?: { name?: string | null; email: string } | null;
+  approvedAt?: Date | string | null;
+};
+
+interface TimelineTooltipProps {
+  heatmapTooltipRef: React.RefObject<HTMLDivElement | null>;
+  heatmapTooltipPos: { left: number; top: number };
+  vacationTooltipRef: React.RefObject<HTMLDivElement | null>;
+  vacationTooltipPos: { left: number; top: number };
+  heatmapHover: HeatmapHoverData | null;
+  vacationHover: VacationHoverData | null;
+}
+
+export function TimelineTooltip({
+  heatmapTooltipRef,
+  heatmapTooltipPos,
+  vacationTooltipRef,
+  vacationTooltipPos,
+  heatmapHover,
+  vacationHover,
+}: TimelineTooltipProps) {
+  // When both are active, render a single merged tooltip using the heatmap position
+  if (heatmapHover && vacationHover) {
+    return (
+      <div
+        ref={(el) => {
+          // Wire both refs to the same element so position updates work from either handler
+          (heatmapTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+          (vacationTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+        }}
+        style={{
+          left: heatmapTooltipPos.left,
+          top: heatmapTooltipPos.top,
+          backgroundColor: "rgba(3, 7, 18, 0.96)",
+        }}
+        className="fixed z-40 max-w-sm pointer-events-none rounded-xl border border-gray-800 bg-gray-950/96 px-3 py-2 text-xs text-white shadow-2xl"
+      >
+        {/* Date + hours header */}
+        <div className="flex items-center justify-between gap-3">
+          <span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
+          <span className="text-[11px] text-gray-300">
+            {heatmapHover.totalH.toFixed(1)}h · {Math.round(heatmapHover.pct)}%
+          </span>
+        </div>
+
+        {/* Project breakdown */}
+        <div className="mt-2 space-y-1.5">
+          {heatmapHover.breakdown.length > 0 ? (
+            heatmapHover.breakdown.slice(0, 6).map((entry) => (
+              <div
+                key={`${entry.projectId}-${entry.shortCode}`}
+                className="flex items-start justify-between gap-3"
+              >
+                <div className="min-w-0">
+                  <div className="truncate font-medium text-white">
+                    {entry.shortCode ? `${entry.shortCode} · ` : ""}
+                    {entry.projectName}
+                  </div>
+                  <div className="truncate text-[11px] text-gray-400">
+                    {entry.responsiblePerson
+                      ? `Lead: ${entry.responsiblePerson}`
+                      : entry.orderType}
+                  </div>
+                </div>
+                <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
+                  {entry.hoursPerDay}h
+                </span>
+              </div>
+            ))
+          ) : (
+            <div className="text-[11px] text-gray-400">No bookings on this day.</div>
+          )}
+        </div>
+
+        {/* Vacation section — merged below */}
+        <div className="mt-2 pt-2 border-t border-amber-700/40">
+          <div className="flex items-center gap-1.5">
+            <span className="inline-block w-2 h-2 rounded-full bg-amber-500 flex-shrink-0" />
+            <span className="font-semibold text-amber-300">
+              {vacationHover.type.replaceAll("_", " ")}
+            </span>
+          </div>
+          <div className="mt-0.5 text-[11px] text-amber-200/80">
+            {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
+          </div>
+          {vacationHover.note ? (
+            <div className="mt-1 text-[11px] text-amber-200/60">{vacationHover.note}</div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  // Heatmap only
+  if (heatmapHover) {
+    return (
+      <div
+        ref={heatmapTooltipRef}
+        style={{
+          left: heatmapTooltipPos.left,
+          top: heatmapTooltipPos.top,
+          backgroundColor: "rgba(3, 7, 18, 0.96)",
+        }}
+        className="fixed z-40 max-w-sm pointer-events-none rounded-xl border border-gray-800 bg-gray-950/96 px-3 py-2 text-xs text-white shadow-2xl"
+      >
+        <div className="flex items-center justify-between gap-3">
+          <span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
+          <span className="text-[11px] text-gray-300">
+            {heatmapHover.totalH.toFixed(1)}h · {Math.round(heatmapHover.pct)}%
+          </span>
+        </div>
+        <div className="mt-2 space-y-1.5">
+          {heatmapHover.breakdown.length > 0 ? (
+            heatmapHover.breakdown.slice(0, 6).map((entry) => (
+              <div
+                key={`${entry.projectId}-${entry.shortCode}`}
+                className="flex items-start justify-between gap-3"
+              >
+                <div className="min-w-0">
+                  <div className="truncate font-medium text-white">
+                    {entry.shortCode ? `${entry.shortCode} · ` : ""}
+                    {entry.projectName}
+                  </div>
+                  <div className="truncate text-[11px] text-gray-400">
+                    {entry.responsiblePerson
+                      ? `Lead: ${entry.responsiblePerson}`
+                      : entry.orderType}
+                  </div>
+                </div>
+                <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
+                  {entry.hoursPerDay}h
+                </span>
+              </div>
+            ))
+          ) : (
+            <div className="text-[11px] text-gray-400">No bookings on this day.</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Vacation only
+  if (vacationHover) {
+    return (
+      <div
+        ref={vacationTooltipRef}
+        style={{
+          left: vacationTooltipPos.left,
+          top: vacationTooltipPos.top,
+          backgroundColor: "rgba(120, 53, 15, 0.95)",
+        }}
+        className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
+      >
+        <div className="font-semibold">{vacationHover.type.replaceAll("_", " ")}</div>
+        <div className="mt-1 text-[11px] text-amber-100/90">
+          {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
+        </div>
+        {vacationHover.note ? (
+          <div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
+        ) : null}
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/apps/web/src/components/timeline/TimelineView.tsx b/apps/web/src/components/timeline/TimelineView.tsx
index 2bcd2cd..88881f3 100644
--- a/apps/web/src/components/timeline/TimelineView.tsx
+++ b/apps/web/src/components/timeline/TimelineView.tsx
@@ -1,13 +1,20 @@
 "use client";
 
 import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useAllocationHistory } from "~/hooks/useAllocationHistory.js";
 import { useProjectDragContext } from "~/hooks/useProjectDragContext.js";
 import { useTimelineDrag } from "~/hooks/useTimelineDrag.js";
 import { useTimelineLayout } from "~/hooks/useTimelineLayout.js";
+import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
 import { AllocationPopover } from "./AllocationPopover.js";
+import { DemandPopover } from "./DemandPopover.js";
+import { ResourceHoverCard } from "./ResourceHoverCard.js";
+import type { TimelineDemandEntry } from "./TimelineContext.js";
+import { BatchAssignPopover } from "./BatchAssignPopover.js";
+import { FloatingActionBar } from "./FloatingActionBar.js";
 import { NewAllocationPopover } from "./NewAllocationPopover.js";
 import { ProjectPanel } from "./ProjectPanel.js";
 import { ShiftPreviewTooltip } from "./ShiftPreviewTooltip.js";
@@ -23,6 +30,8 @@ import {
 } from "./TimelineContext.js";
 import { TimelineResourcePanel } from "./TimelineResourcePanel.js";
 import { TimelineProjectPanel, type OpenDemandAssignment } from "./TimelineProjectPanel.js";
+import { ProjectColorLegend } from "./ProjectColorLegend.js";
+import { useMultiSelectIntersection } from "~/hooks/useMultiSelectIntersection.js";
 
 // ─── Entry point ────────────────────────────────────────────────────────────
 // Two-layer mount: the outer shell creates drag state + project context,
@@ -31,9 +40,11 @@ import { TimelineProjectPanel, type OpenDemandAssignment } from "./TimelineProje
 export function TimelineView() {
   const mousePosRef = useRef({ x: 0, y: 0 });
 
-  const { push: pushHistory, undo, redo, canUndo, canRedo } = useAllocationHistory();
+  const { push: pushHistory, pushBatch: pushBatchHistory, undo, redo, canUndo, canRedo } = useAllocationHistory();
   const pushHistoryRef = useRef(pushHistory);
   pushHistoryRef.current = pushHistory;
+  const pushBatchHistoryRef = useRef(pushBatchHistory);
+  pushBatchHistoryRef.current = pushBatchHistory;
 
   const [popover, setPopover] = useState<{
     allocationId: string;
@@ -48,6 +59,10 @@ export function TimelineView() {
     suggestedProjectId: string | null;
     anchorX: number;
     anchorY: number;
+    /** Selection coordinates to keep the overlay visible while popover is open */
+    selectionResourceId: string;
+    selectionStart: Date;
+    selectionEnd: Date;
   } | null>(null);
 
   // cellWidth placeholder — the real value comes from useTimelineLayout inside the content.
@@ -55,10 +70,17 @@ export function TimelineView() {
   // We start with 40 (day zoom default) and update via a ref.
   const cellWidthRef = useRef(40);
 
+  const invalidateTimeline = useInvalidateTimeline();
+  const batchShiftMutationOuter = trpc.timeline.batchShiftAllocations.useMutation({
+    onSuccess: invalidateTimeline,
+  });
+
   const {
     dragState,
     allocDragState,
     rangeState,
+    multiSelectState,
+    setMultiSelectState,
     shiftPreview,
     isPreviewLoading,
     isApplying,
@@ -69,6 +91,8 @@ export function TimelineView() {
     onCanvasMouseMove,
     onCanvasMouseUp,
     onCanvasMouseLeave,
+    onCanvasRightMouseDown,
+    clearMultiSelect,
     onProjectBarTouchStart,
     onAllocTouchStart,
     onRowTouchStart,
@@ -92,11 +116,33 @@ export function TimelineView() {
         suggestedProjectId: info.suggestedProjectId,
         anchorX: info.anchorX,
         anchorY: info.anchorY,
+        selectionResourceId: info.resourceId,
+        selectionStart: info.startDate,
+        selectionEnd: info.endDate,
       });
     },
     onAllocationMoved: (snapshot) => {
       pushHistoryRef.current(snapshot);
     },
+    onShiftClickAlloc: (allocationId: string) => {
+      setMultiSelectState(prev => {
+        const ids = new Set(prev.selectedAllocationIds);
+        if (ids.has(allocationId)) {
+          ids.delete(allocationId);
+        } else {
+          ids.add(allocationId);
+        }
+        return { ...prev, isSelecting: false, selectedAllocationIds: [...ids] };
+      });
+    },
+    onMultiDragComplete: (daysDelta, mode, selectedIds) => {
+      const ids = selectedIds ?? multiSelectState.selectedAllocationIds;
+      if (ids.length > 0 && daysDelta !== 0) {
+        pushBatchHistoryRef.current(ids, daysDelta, mode);
+        batchShiftMutationOuter.mutate({ allocationIds: ids, daysDelta, mode });
+        clearMultiSelect();
+      }
+    },
   });
 
   const [openPanelProjectId, setOpenPanelProjectId] = useState<string | null>(null);
@@ -115,6 +161,10 @@ export function TimelineView() {
         dragState={dragState}
         allocDragState={allocDragState}
         rangeState={rangeState}
+        multiSelectState={multiSelectState}
+        setMultiSelectState={setMultiSelectState}
+        onCanvasRightMouseDown={onCanvasRightMouseDown}
+        clearMultiSelect={clearMultiSelect}
         shiftPreview={shiftPreview}
         isPreviewLoading={isPreviewLoading}
         isApplying={isApplying}
@@ -154,6 +204,10 @@ function TimelineViewContent({
   dragState,
   allocDragState,
   rangeState,
+  multiSelectState,
+  setMultiSelectState,
+  onCanvasRightMouseDown,
+  clearMultiSelect,
   shiftPreview,
   isPreviewLoading,
   isApplying,
@@ -186,6 +240,10 @@ function TimelineViewContent({
   dragState: ReturnType<typeof useTimelineDrag>["dragState"];
   allocDragState: ReturnType<typeof useTimelineDrag>["allocDragState"];
   rangeState: ReturnType<typeof useTimelineDrag>["rangeState"];
+  multiSelectState: ReturnType<typeof useTimelineDrag>["multiSelectState"];
+  setMultiSelectState: ReturnType<typeof useTimelineDrag>["setMultiSelectState"];
+  onCanvasRightMouseDown: ReturnType<typeof useTimelineDrag>["onCanvasRightMouseDown"];
+  clearMultiSelect: ReturnType<typeof useTimelineDrag>["clearMultiSelect"];
   shiftPreview: ReturnType<typeof useTimelineDrag>["shiftPreview"];
   isPreviewLoading: boolean;
   isApplying: boolean;
@@ -211,6 +269,9 @@ function TimelineViewContent({
     suggestedProjectId: string | null;
     anchorX: number;
     anchorY: number;
+    selectionResourceId: string;
+    selectionStart: Date;
+    selectionEnd: Date;
   } | null;
   setNewAllocPopover: React.Dispatch<React.SetStateAction<typeof newAllocPopover>>;
   openPanelProjectId: string | null;
@@ -224,6 +285,8 @@ function TimelineViewContent({
   const {
     resources,
     projectGroups,
+    allocsByResource,
+    openDemandsByProject,
     viewStart,
     viewEnd,
     viewDays,
@@ -248,12 +311,66 @@ function TimelineViewContent({
   const dragTooltipRef = useRef<HTMLDivElement>(null);
   const allocTooltipRef = useRef<HTMLDivElement>(null);
   const rangeHintRef = useRef<HTMLDivElement>(null);
+  const multiDragTooltipRef = useRef<HTMLDivElement>(null);
   const [openDemandToAssign, setOpenDemandToAssign] = useState<OpenDemandAssignment | null>(null);
+  const [demandPopover, setDemandPopover] = useState<{
+    demand: TimelineDemandEntry;
+    x: number;
+    y: number;
+  } | null>(null);
+  const [showBatchAssign, setShowBatchAssign] = useState(false);
+  const [resourceHover, setResourceHover] = useState<{
+    resourceId: string;
+    anchorEl: HTMLElement;
+  } | null>(null);
+  const resourceHoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const invalidateTimelineInner = useInvalidateTimeline();
+  const batchDeleteMutation = trpc.allocation.batchDelete.useMutation({
+    onSuccess: () => {
+      invalidateTimelineInner();
+      clearMultiSelect();
+    },
+  });
 
   const { CELL_WIDTH, dates, totalCanvasWidth, toLeft, toWidth, gridLines, monthGroups, xToDate } =
     useTimelineLayout(viewStart, viewDays, filters.zoom, filters.showWeekends, today);
   const hasActivePointerOverlay =
-    dragState.isDragging || allocDragState.isActive || rangeState.isSelecting;
+    dragState.isDragging || allocDragState.isActive || rangeState.isSelecting || multiSelectState.isMultiDragging;
+
+  // ─── Keep selection overlay visible while popover is open ───────────────────
+  const effectiveRangeState: typeof rangeState = rangeState.isSelecting
+    ? rangeState
+    : newAllocPopover
+      ? {
+          isSelecting: true,
+          resourceId: newAllocPopover.selectionResourceId,
+          startDate: newAllocPopover.selectionStart,
+          currentDate: newAllocPopover.selectionEnd,
+          suggestedProjectId: newAllocPopover.suggestedProjectId,
+          startClientX: 0,
+        }
+      : rangeState;
+
+  // ─── Auto-suggest project for resource-view range select ───────────────────
+  const enrichedSuggestedProjectId = useMemo(() => {
+    if (!newAllocPopover) return null;
+    // Already has a suggestion (e.g. from project view)
+    if (newAllocPopover.suggestedProjectId) return newAllocPopover.suggestedProjectId;
+    // Resource view: find the project with the most hours in this resource's row
+    const allocs = allocsByResource.get(newAllocPopover.resourceId);
+    if (!allocs || allocs.length === 0) return null;
+    const projectHours = new Map<string, number>();
+    for (const alloc of allocs) {
+      projectHours.set(alloc.projectId, (projectHours.get(alloc.projectId) ?? 0) + alloc.hoursPerDay);
+    }
+    let maxPid: string | null = null;
+    let maxH = 0;
+    for (const [pid, h] of projectHours) {
+      if (h > maxH) { maxH = h; maxPid = pid; }
+    }
+    return maxPid;
+  }, [newAllocPopover, allocsByResource]);
 
   function openAllocationPopoverAt(
     info: {
@@ -263,6 +380,13 @@ function TimelineViewContent({
     anchorX: number,
     anchorY: number,
   ) {
+    // Check if this is a demand (not an assignment) — route to DemandPopover
+    const demands = openDemandsByProject.get(info.projectId);
+    const demand = demands?.find((d) => d.id === info.allocationId);
+    if (demand) {
+      setDemandPopover({ demand, x: anchorX, y: anchorY });
+      return;
+    }
     setPopover({
       allocationId: info.allocationId,
       projectId: info.projectId,
@@ -295,10 +419,16 @@ function TimelineViewContent({
         rangeHintRef.current.style.left = `${x + 12}px`;
         rangeHintRef.current.style.top = `${y - 28}px`;
       }
+      if (multiDragTooltipRef.current) {
+        multiDragTooltipRef.current.style.left = `${x + 14}px`;
+        multiDragTooltipRef.current.style.top = `${y - 36}px`;
+      }
     };
-    el.addEventListener("mousemove", handler, { passive: true });
-    return () => el.removeEventListener("mousemove", handler);
-  }, [hasActivePointerOverlay, isLoading, mousePosRef]); // eslint-disable-line react-hooks/exhaustive-deps
+    // During multi-drag, listen on document (cursor may leave canvas)
+    const target: EventTarget = multiSelectState.isMultiDragging ? document : el;
+    target.addEventListener("mousemove", handler as EventListener, { passive: true });
+    return () => target.removeEventListener("mousemove", handler as EventListener);
+  }, [hasActivePointerOverlay, isLoading, mousePosRef, multiSelectState.isMultiDragging]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // ─── Shift+wheel → horizontal scroll ──────────────────────────────────────
   useEffect(() => {
@@ -333,6 +463,92 @@ function TimelineViewContent({
     return () => window.removeEventListener("keydown", handler);
   }, [undo, redo]);
 
+  // ─── ESC to close overlays (topmost first) ─────────────────────────────────
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      if (multiSelectState.selectedAllocationIds.length > 0 || multiSelectState.selectedResourceIds.length > 0) {
+        e.preventDefault();
+        clearMultiSelect();
+        return;
+      }
+      if (demandPopover) {
+        e.preventDefault();
+        setDemandPopover(null);
+      } else if (popover) {
+        e.preventDefault();
+        setPopover(null);
+      } else if (newAllocPopover) {
+        e.preventDefault();
+        setNewAllocPopover(null);
+      } else if (openDemandToAssign) {
+        e.preventDefault();
+        setOpenDemandToAssign(null);
+      } else if (openPanelProjectId) {
+        e.preventDefault();
+        setOpenPanelProjectId(null);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [demandPopover, popover, newAllocPopover, openDemandToAssign, openPanelProjectId, setPopover, setNewAllocPopover, setOpenPanelProjectId, multiSelectState.selectedAllocationIds.length, multiSelectState.selectedResourceIds.length, clearMultiSelect]);
+
+  // ─── Resource hover card — event delegation on label columns ──────────────
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const HOVER_DELAY = 400;
+
+    function onMouseOver(e: MouseEvent) {
+      const target = (e.target as HTMLElement).closest<HTMLElement>("[data-resource-hover-id]");
+      if (!target) return;
+      const rid = target.dataset.resourceHoverId;
+      if (!rid) return;
+
+      // Clear any pending hide
+      if (resourceHoverTimerRef.current) {
+        clearTimeout(resourceHoverTimerRef.current);
+        resourceHoverTimerRef.current = null;
+      }
+
+      // If already showing this resource, skip
+      if (resourceHover?.resourceId === rid) return;
+
+      resourceHoverTimerRef.current = setTimeout(() => {
+        resourceHoverTimerRef.current = null;
+        setResourceHover({ resourceId: rid, anchorEl: target });
+      }, HOVER_DELAY);
+    }
+
+    function onMouseOut(e: MouseEvent) {
+      const related = e.relatedTarget as HTMLElement | null;
+      // Don't close if moving into another resource-hover target or the hover card itself
+      if (related?.closest?.("[data-resource-hover-id]") || related?.closest?.("[data-resource-hover-card]")) return;
+
+      if (resourceHoverTimerRef.current) {
+        clearTimeout(resourceHoverTimerRef.current);
+        resourceHoverTimerRef.current = null;
+      }
+      // Small delay before hiding to allow moving into hover card
+      resourceHoverTimerRef.current = setTimeout(() => {
+        resourceHoverTimerRef.current = null;
+        setResourceHover(null);
+      }, 150);
+    }
+
+    canvas.addEventListener("mouseover", onMouseOver, { passive: true });
+    canvas.addEventListener("mouseout", onMouseOut, { passive: true });
+    return () => {
+      canvas.removeEventListener("mouseover", onMouseOver);
+      canvas.removeEventListener("mouseout", onMouseOut);
+      if (resourceHoverTimerRef.current) {
+        clearTimeout(resourceHoverTimerRef.current);
+        resourceHoverTimerRef.current = null;
+      }
+    };
+  }, [resourceHover?.resourceId, isInitialLoading]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // ─── Lazy-extend date range on scroll ─────────────────────────────────────
   function handleContainerScroll() {
     const el = scrollContainerRef.current;
@@ -348,6 +564,24 @@ function TimelineViewContent({
     onCanvasMouseMove(e);
   };
 
+  // ─── Multi-select intersection computation ────────────────────────────────
+  useMultiSelectIntersection({
+    multiSelectState,
+    setMultiSelectState,
+    clearMultiSelect,
+    canvasRef,
+    viewMode,
+    resources,
+    allocsByResource,
+    projectGroups,
+    openDemandsByProject,
+    dates,
+    today,
+    CELL_WIDTH,
+    toLeft,
+    toWidth,
+  });
+
   return (
     <div className="relative flex flex-1 flex-col gap-4 min-h-0">
       {/* Toolbar */}
@@ -374,6 +608,9 @@ function TimelineViewContent({
         }}
       />
 
+      {/* Project color legend */}
+      <ProjectColorLegend />
+
       {/* Scrollable canvas */}
       <div
         ref={scrollContainerRef}
@@ -404,14 +641,21 @@ function TimelineViewContent({
               onMouseMove={handleMouseMove}
               onMouseUp={(e) => void onCanvasMouseUp(e)}
               onMouseLeave={onCanvasMouseLeave}
+              onMouseDown={(e) => {
+                if (e.button === 2) {
+                  onCanvasRightMouseDown(e);
+                }
+              }}
+              onContextMenu={(e) => e.preventDefault()}
               onTouchMove={(e) => {
                 if (!hasActivePointerOverlay) return;
                 onCanvasTouchMove(e);
               }}
               onTouchEnd={(e) => void onCanvasTouchEnd(e)}
               className={clsx(
-                (dragState.isDragging || allocDragState.isActive) && "cursor-grabbing select-none",
+                (dragState.isDragging || allocDragState.isActive || multiSelectState.isMultiDragging) && "cursor-grabbing select-none",
                 rangeState.isSelecting && "cursor-crosshair select-none",
+                multiSelectState.isSelecting && "cursor-crosshair select-none",
               )}
             >
               {viewMode === "resource" && (
@@ -419,7 +663,7 @@ function TimelineViewContent({
                   scrollContainerRef={scrollContainerRef}
                   dragState={dragState}
                   allocDragState={allocDragState}
-                  rangeState={rangeState}
+                  rangeState={effectiveRangeState}
                   shiftPreview={shiftPreview}
                   contextResourceIds={contextResourceIds}
                   onAllocMouseDown={onAllocMouseDown}
@@ -427,6 +671,7 @@ function TimelineViewContent({
                   onRowMouseDown={onRowMouseDown}
                   onRowTouchStart={onRowTouchStart}
                   onAllocationContextMenu={openAllocationPopoverAt}
+                  multiSelectState={multiSelectState}
                   CELL_WIDTH={CELL_WIDTH}
                   dates={dates}
                   totalCanvasWidth={totalCanvasWidth}
@@ -442,7 +687,8 @@ function TimelineViewContent({
                   scrollContainerRef={scrollContainerRef}
                   dragState={dragState}
                   allocDragState={allocDragState}
-                  rangeState={rangeState}
+                  rangeState={effectiveRangeState}
+                  multiSelectState={multiSelectState}
                   onProjectBarMouseDown={onProjectBarMouseDown}
                   onProjectBarTouchStart={onProjectBarTouchStart}
                   onAllocMouseDown={onAllocMouseDown}
@@ -466,6 +712,19 @@ function TimelineViewContent({
         )}
       </div>
 
+      {/* Multi-select rectangle overlay */}
+      {multiSelectState.isSelecting && (
+        <div
+          className="fixed border-2 border-sky-500 bg-sky-500/10 pointer-events-none z-30 rounded"
+          style={{
+            left: Math.min(multiSelectState.startX, multiSelectState.currentX),
+            top: Math.min(multiSelectState.startY, multiSelectState.currentY),
+            width: Math.abs(multiSelectState.currentX - multiSelectState.startX),
+            height: Math.abs(multiSelectState.currentY - multiSelectState.startY),
+          }}
+        />
+      )}
+
       {/* Saving indicators */}
       {(isApplying || isAllocSaving) && (
         <div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-2xl bg-white/50 dark:bg-gray-950/50">
@@ -540,18 +799,95 @@ function TimelineViewContent({
         </div>
       )}
 
-      {/* Allocation popover */}
-      {popover && (
-        <AllocationPopover
-          allocationId={popover.allocationId}
-          projectId={popover.projectId}
-          onClose={() => setPopover(null)}
+      {/* Multi-drag tooltip */}
+      {multiSelectState.isMultiDragging && multiSelectState.multiDragDaysDelta !== 0 && (
+        <div
+          ref={multiDragTooltipRef}
+          className="fixed z-50 bg-sky-700 text-white text-xs px-2.5 py-1.5 rounded-lg pointer-events-none shadow-lg font-medium"
+          style={{ left: mousePosRef.current.x + 14, top: mousePosRef.current.y - 36 }}
+        >
+          {multiSelectState.multiDragMode === "resize-start" ? "Start " : multiSelectState.multiDragMode === "resize-end" ? "End " : ""}
+          {multiSelectState.multiDragDaysDelta > 0 ? "+" : ""}
+          {multiSelectState.multiDragDaysDelta}d
+          {" "}
+          ({multiSelectState.selectedAllocationIds.length} allocations)
+        </div>
+      )}
+
+      {/* Allocation / Demand popover (click path) */}
+      {popover && (() => {
+        // Check if clicked allocation is actually a demand
+        const clickedDemand = openDemandsByProject.get(popover.projectId)?.find((d) => d.id === popover.allocationId);
+        if (clickedDemand) {
+          return (
+            <DemandPopover
+              demand={clickedDemand}
+              onClose={() => setPopover(null)}
+              onOpenPanel={(pid) => {
+                setPopover(null);
+                setOpenPanelProjectId(pid);
+              }}
+              onFillDemand={(d) => {
+                setPopover(null);
+                setOpenDemandToAssign({
+                  id: d.id,
+                  projectId: d.projectId,
+                  roleId: d.roleId,
+                  role: d.role,
+                  headcount: d.requestedHeadcount,
+                  startDate: new Date(d.startDate),
+                  endDate: new Date(d.endDate),
+                  hoursPerDay: d.hoursPerDay,
+                  ...(d.roleEntity !== undefined ? { roleEntity: d.roleEntity } : {}),
+                  ...(d.project !== undefined ? { project: d.project } : {}),
+                });
+              }}
+              anchorX={popover.x}
+              anchorY={popover.y}
+            />
+          );
+        }
+        return (
+          <AllocationPopover
+            allocationId={popover.allocationId}
+            projectId={popover.projectId}
+            onClose={() => setPopover(null)}
+            onOpenPanel={(pid) => {
+              setPopover(null);
+              setOpenPanelProjectId(pid);
+            }}
+            anchorX={popover.x}
+            anchorY={popover.y}
+          />
+        );
+      })()}
+
+      {/* Demand popover */}
+      {demandPopover && (
+        <DemandPopover
+          demand={demandPopover.demand}
+          onClose={() => setDemandPopover(null)}
           onOpenPanel={(pid) => {
-            setPopover(null);
+            setDemandPopover(null);
             setOpenPanelProjectId(pid);
           }}
-          anchorX={popover.x}
-          anchorY={popover.y}
+          onFillDemand={(d) => {
+            setDemandPopover(null);
+            setOpenDemandToAssign({
+              id: d.id,
+              projectId: d.projectId,
+              roleId: d.roleId,
+              role: d.role,
+              headcount: d.requestedHeadcount,
+              startDate: new Date(d.startDate),
+              endDate: new Date(d.endDate),
+              hoursPerDay: d.hoursPerDay,
+              ...(d.roleEntity !== undefined ? { roleEntity: d.roleEntity } : {}),
+              ...(d.project !== undefined ? { project: d.project } : {}),
+            });
+          }}
+          anchorX={demandPopover.x}
+          anchorY={demandPopover.y}
         />
       )}
 
@@ -561,7 +897,7 @@ function TimelineViewContent({
           resourceId={newAllocPopover.resourceId}
           startDate={newAllocPopover.startDate}
           endDate={newAllocPopover.endDate}
-          suggestedProjectId={newAllocPopover.suggestedProjectId}
+          suggestedProjectId={enrichedSuggestedProjectId}
           anchorX={newAllocPopover.anchorX}
           anchorY={newAllocPopover.anchorY}
           onClose={() => setNewAllocPopover(null)}
@@ -582,6 +918,45 @@ function TimelineViewContent({
           onSuccess={() => setOpenDemandToAssign(null)}
         />
       )}
+
+      {/* Multi-select floating action bar */}
+      <FloatingActionBar
+        selectedAllocationCount={multiSelectState.selectedAllocationIds.length}
+        selectedResourceCount={multiSelectState.selectedResourceIds.length}
+        onDelete={() => {
+          if (multiSelectState.selectedAllocationIds.length === 0) return;
+          const msg = `Delete ${multiSelectState.selectedAllocationIds.length} allocation(s)? This cannot be undone.`;
+          if (window.confirm(msg)) {
+            batchDeleteMutation.mutate({ ids: multiSelectState.selectedAllocationIds });
+          }
+        }}
+        onAssign={() => setShowBatchAssign(true)}
+        onClear={clearMultiSelect}
+        isDeleting={batchDeleteMutation.isPending}
+      />
+
+      {/* Batch assign popover */}
+      {showBatchAssign && multiSelectState.dateRange && (
+        <BatchAssignPopover
+          resourceIds={multiSelectState.selectedResourceIds}
+          startDate={multiSelectState.dateRange.start}
+          endDate={multiSelectState.dateRange.end}
+          onClose={() => setShowBatchAssign(false)}
+          onCreated={() => {
+            setShowBatchAssign(false);
+            clearMultiSelect();
+          }}
+        />
+      )}
+
+      {/* Resource hover card */}
+      {resourceHover && (
+        <ResourceHoverCard
+          resourceId={resourceHover.resourceId}
+          anchorEl={resourceHover.anchorEl}
+          onClose={() => setResourceHover(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/timeline/dragMath.ts b/apps/web/src/components/timeline/dragMath.ts
new file mode 100644
index 0000000..9735c08
--- /dev/null
+++ b/apps/web/src/components/timeline/dragMath.ts
@@ -0,0 +1,51 @@
+/**
+ * Pure math utilities for timeline drag operations.
+ * Extracted from useTimelineDrag to make the conversion logic testable
+ * and reusable across different drag modes.
+ */
+
+/** Convert a pixel delta to a number of whole days based on cell width. */
+export function pixelsToDays(deltaX: number, cellWidth: number): number {
+  return Math.round(deltaX / cellWidth);
+}
+
+/**
+ * Shift a date by a given number of days, returning a new Date.
+ * Does not mutate the input.
+ */
+export function shiftDate(date: Date, daysDelta: number): Date {
+  const result = new Date(date);
+  result.setDate(result.getDate() + daysDelta);
+  return result;
+}
+
+/**
+ * Compute new start/end dates for a drag operation.
+ * Handles move, resize-start, and resize-end modes with clamping
+ * to prevent start from crossing past end (or vice versa).
+ */
+export function computeDragDates(
+  mode: "move" | "resize-start" | "resize-end",
+  originalStart: Date,
+  originalEnd: Date,
+  daysDelta: number,
+): { start: Date; end: Date } {
+  const newStart = new Date(originalStart);
+  const newEnd = new Date(originalEnd);
+
+  if (mode === "move") {
+    newStart.setDate(newStart.getDate() + daysDelta);
+    newEnd.setDate(newEnd.getDate() + daysDelta);
+  } else if (mode === "resize-start") {
+    newStart.setDate(newStart.getDate() + daysDelta);
+    // Clamp: allow same-day but prevent crossing
+    if (newStart > newEnd) newStart.setTime(newEnd.getTime());
+  } else {
+    // resize-end
+    newEnd.setDate(newEnd.getDate() + daysDelta);
+    // Clamp: allow same-day but prevent crossing
+    if (newEnd < newStart) newEnd.setTime(newStart.getTime());
+  }
+
+  return { start: newStart, end: newEnd };
+}
diff --git a/apps/web/src/components/timeline/renderHelpers.tsx b/apps/web/src/components/timeline/renderHelpers.tsx
new file mode 100644
index 0000000..23ed8fe
--- /dev/null
+++ b/apps/web/src/components/timeline/renderHelpers.tsx
@@ -0,0 +1,121 @@
+/**
+ * Shared pure render functions used by both TimelineResourcePanel and TimelineProjectPanel.
+ * Extracted to avoid duplication of identical vacation blocks, range overlay, and overbooking blink logic.
+ */
+
+import { clsx } from "clsx";
+import {
+  VACATION_TIMELINE_COLORS,
+  VACATION_TIMELINE_BORDER,
+  VACATION_TYPE_LABELS_SHORT,
+} from "~/lib/status-styles.js";
+import type { RangeState } from "~/hooks/useTimelineDrag.js";
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+import type { VacationEntry } from "./TimelineContext.js";
+
+// ─── Shared types ─────────────────────────────────────────────────────────────
+
+export interface VacationBlockInfo {
+  vacation: VacationEntry;
+  left: number;
+  width: number;
+}
+
+// ─── Vacation block overlays ─────────────────────────────────────────────────
+
+export function renderVacationBlocks(blocks: VacationBlockInfo[], rowHeight: number) {
+  if (blocks.length === 0) return null;
+
+  return blocks.map(({ vacation: v, left, width }) => {
+    const colorClass = VACATION_TIMELINE_COLORS[v.type] ?? "bg-orange-400/40";
+    const borderClass = VACATION_TIMELINE_BORDER[v.type] ?? "border-orange-500";
+    const label = VACATION_TYPE_LABELS_SHORT[v.type] ?? v.type;
+    const isPending = v.status === "PENDING";
+
+    return (
+      <div
+        key={`vac-${v.id}`}
+        className={clsx(
+          "absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden pointer-events-none",
+          colorClass,
+          isPending ? "border-t-2 border-dashed opacity-60" : "border-t-2",
+          isPending ? "" : borderClass,
+        )}
+        style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
+      >
+        {width > 40 && (
+          <span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
+            {isPending ? "\u23F3" : "\uD83C\uDFD6"} {label}
+          </span>
+        )}
+      </div>
+    );
+  });
+}
+
+// ─── Range selection overlay ─────────────────────────────────────────────────
+
+export function renderRangeOverlay(
+  rangeState: RangeState,
+  resourceId: string,
+  rowHeight: number,
+  toLeft: (d: Date) => number,
+  toWidth: (s: Date, e: Date) => number,
+  CELL_WIDTH: number,
+) {
+  if (!rangeState.isSelecting || rangeState.resourceId !== resourceId || !rangeState.startDate) {
+    return null;
+  }
+  const end = rangeState.currentDate ?? rangeState.startDate;
+  const [selStart, selEnd] =
+    rangeState.startDate <= end ? [rangeState.startDate, end] : [end, rangeState.startDate];
+
+  const left = toLeft(selStart);
+  const width = Math.max(CELL_WIDTH, toWidth(selStart, selEnd));
+
+  return (
+    <div
+      className="absolute bg-brand-200/40 border-2 border-brand-400 rounded pointer-events-none z-10"
+      style={{ left, width, top: 4, height: rowHeight - 8 }}
+    />
+  );
+}
+
+// ─── Overbooking blink overlay ───────────────────────────────────────────────
+
+export function renderOverbookingBlink(
+  allocs: TimelineAssignmentEntry[],
+  dates: Date[],
+  CELL_WIDTH: number,
+) {
+  const REF_H = 8;
+  const overbooked: number[] = [];
+
+  for (let i = 0; i < dates.length; i++) {
+    const d = new Date(dates[i]!);
+    d.setHours(0, 0, 0, 0);
+    const t = d.getTime();
+    let totalH = 0;
+    for (const a of allocs) {
+      const s = new Date(a.startDate);
+      s.setHours(0, 0, 0, 0);
+      const e = new Date(a.endDate);
+      e.setHours(0, 0, 0, 0);
+      if (t >= s.getTime() && t <= e.getTime()) totalH += a.hoursPerDay;
+    }
+    if (totalH > REF_H) overbooked.push(i);
+  }
+
+  if (overbooked.length === 0) return null;
+
+  return overbooked.map((i) => (
+    <div
+      key={`ob-${i}`}
+      className="absolute top-0 bottom-0 pointer-events-none z-[15] animate-overbooking-blink"
+      style={{
+        left: i * CELL_WIDTH,
+        width: CELL_WIDTH,
+      }}
+    />
+  ));
+}
diff --git a/apps/web/src/components/ui/AnimatedModal.tsx b/apps/web/src/components/ui/AnimatedModal.tsx
new file mode 100644
index 0000000..7eb4115
--- /dev/null
+++ b/apps/web/src/components/ui/AnimatedModal.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useCallback, useRef, type ReactNode } from "react";
+
+interface AnimatedModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  maxWidth?: string;
+}
+
+export function AnimatedModal({
+  open,
+  onClose,
+  children,
+  className,
+  overlayClassName,
+  maxWidth = "max-w-xl",
+}: AnimatedModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const handleEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, handleEscape]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Overlay */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className={
+              overlayClassName ??
+              "absolute inset-0 bg-black/40 backdrop-blur-sm"
+            }
+            onClick={onClose}
+            aria-hidden="true"
+          />
+
+          {/* Panel */}
+          <motion.div
+            ref={panelRef}
+            role="dialog"
+            aria-modal="true"
+            initial={{ opacity: 0, scale: 0.97 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.97 }}
+            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            className={[
+              "relative z-10 w-full rounded-xl bg-white shadow-2xl dark:bg-gray-800",
+              maxWidth,
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+          >
+            {children}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/web/src/components/ui/AnimatedNumber.tsx b/apps/web/src/components/ui/AnimatedNumber.tsx
new file mode 100644
index 0000000..e55703a
--- /dev/null
+++ b/apps/web/src/components/ui/AnimatedNumber.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { memo, useEffect, useRef, useState } from "react";
+
+interface AnimatedNumberProps {
+  value: number;
+  duration?: number | undefined;
+  decimals?: number | undefined;
+  prefix?: string | undefined;
+  suffix?: string | undefined;
+  className?: string | undefined;
+}
+
+function easeOutExpo(t: number): number {
+  return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+}
+
+function formatNumber(n: number, decimals: number): string {
+  return n.toLocaleString("de-DE", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+}
+
+function AnimatedNumberInner({
+  value,
+  duration = 800,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  className,
+}: AnimatedNumberProps) {
+  const [display, setDisplay] = useState(value);
+  const prevValueRef = useRef(value);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const from = prevValueRef.current;
+    const to = value;
+    prevValueRef.current = to;
+
+    if (from === to) {
+      setDisplay(to);
+      return;
+    }
+
+    const startTime = performance.now();
+
+    function tick(now: number) {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = easeOutExpo(progress);
+      const current = from + (to - from) * eased;
+
+      setDisplay(current);
+
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(tick);
+      } else {
+        setDisplay(to);
+      }
+    }
+
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [value, duration]);
+
+  return (
+    <span className={className}>
+      {prefix}
+      {formatNumber(display, decimals)}
+      {suffix}
+    </span>
+  );
+}
+
+export const AnimatedNumber = memo(AnimatedNumberInner);
diff --git a/apps/web/src/components/ui/ConfettiBurst.tsx b/apps/web/src/components/ui/ConfettiBurst.tsx
new file mode 100644
index 0000000..80b7415
--- /dev/null
+++ b/apps/web/src/components/ui/ConfettiBurst.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+
+interface ConfettiBurstProps {
+  trigger: boolean;
+  particleCount?: number;
+  duration?: number;
+  colors?: string[];
+}
+
+const DEFAULT_COLORS = [
+  "#6366f1", // indigo
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#f59e0b", // amber
+  "#10b981", // emerald
+  "#3b82f6", // blue
+];
+
+const KEYFRAMES_ID = "confetti-burst-keyframes";
+
+function ensureKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = `
+    @keyframes confetti-burst {
+      0% {
+        transform: translate(0, 0) rotate(0deg) scale(1);
+        opacity: 1;
+      }
+      100% {
+        transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-r)) scale(0.3);
+        opacity: 0;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+export function ConfettiBurst({
+  trigger,
+  particleCount = 20,
+  duration = 800,
+  colors = DEFAULT_COLORS,
+}: ConfettiBurstProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const prevTrigger = useRef(false);
+
+  const burst = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    ensureKeyframes();
+
+    const particles: HTMLDivElement[] = [];
+    for (let i = 0; i < particleCount; i++) {
+      const el = document.createElement("div");
+      const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5;
+      const distance = 40 + Math.random() * 80;
+      const x = Math.cos(angle) * distance;
+      const y = Math.sin(angle) * distance - 20 + Math.random() * 60; // gravity bias
+      const rotation = Math.random() * 720 - 360;
+
+      el.style.cssText = `
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 6px;
+        height: 6px;
+        margin: -3px 0 0 -3px;
+        border-radius: ${Math.random() > 0.5 ? "50%" : "1px"};
+        background: ${colors[i % colors.length]};
+        pointer-events: none;
+        --confetti-x: ${x}px;
+        --confetti-y: ${y}px;
+        --confetti-r: ${rotation}deg;
+        animation: confetti-burst ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+      `;
+      container.appendChild(el);
+      particles.push(el);
+    }
+
+    setTimeout(() => {
+      particles.forEach((el) => el.remove());
+    }, duration + 50);
+  }, [particleCount, duration, colors]);
+
+  useEffect(() => {
+    if (trigger && !prevTrigger.current) {
+      burst();
+    }
+    prevTrigger.current = trigger;
+  }, [trigger, burst]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="pointer-events-none absolute inset-0 overflow-visible"
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/apps/web/src/components/ui/DraggableTableRow.tsx b/apps/web/src/components/ui/DraggableTableRow.tsx
index ef2d7b4..3da39dd 100644
--- a/apps/web/src/components/ui/DraggableTableRow.tsx
+++ b/apps/web/src/components/ui/DraggableTableRow.tsx
@@ -13,6 +13,7 @@ interface DraggableTableRowProps {
   onDrop: (draggedId: string) => void;
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 /**
@@ -27,11 +28,13 @@ export function DraggableTableRow({
   onDrop,
   children,
   className = "",
+  style,
 }: DraggableTableRowProps) {
   const [isDragOver, setIsDragOver] = useState(false);
 
   return (
     <tr
+      style={style}
       className={`${className} ${isDragOver ? "border-t-2 border-brand-400" : ""}`}
       onDragOver={(e) => {
         e.preventDefault();
diff --git a/apps/web/src/components/ui/FadeIn.tsx b/apps/web/src/components/ui/FadeIn.tsx
new file mode 100644
index 0000000..34de6dc
--- /dev/null
+++ b/apps/web/src/components/ui/FadeIn.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import { type ReactNode } from "react";
+
+interface FadeInProps {
+  children: ReactNode;
+  delay?: number;
+  duration?: number;
+  direction?: "up" | "down" | "left" | "right" | "none";
+  distance?: number;
+  className?: string;
+  once?: boolean;
+}
+
+function getOffset(
+  direction: FadeInProps["direction"],
+  distance: number,
+): { x: number; y: number } {
+  switch (direction) {
+    case "up":
+      return { x: 0, y: distance };
+    case "down":
+      return { x: 0, y: -distance };
+    case "left":
+      return { x: distance, y: 0 };
+    case "right":
+      return { x: -distance, y: 0 };
+    case "none":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+export function FadeIn({
+  children,
+  delay = 0,
+  duration = 0.3,
+  direction = "up",
+  distance = 12,
+  className,
+  once = true,
+}: FadeInProps) {
+  const offset = getOffset(direction, distance);
+
+  const variants: Variants = {
+    hidden: {
+      opacity: 0,
+      x: offset.x,
+      y: offset.y,
+    },
+    visible: {
+      opacity: 1,
+      x: 0,
+      y: 0,
+      transition: {
+        duration,
+        delay,
+        ease: [0.25, 0.1, 0.25, 1],
+      },
+    },
+  };
+
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once, margin: "-40px" }}
+      variants={variants}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/apps/web/src/components/ui/FilterChips.tsx b/apps/web/src/components/ui/FilterChips.tsx
index ce168c2..55edc8c 100644
--- a/apps/web/src/components/ui/FilterChips.tsx
+++ b/apps/web/src/components/ui/FilterChips.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+
 export interface Chip {
   label: string;
   onRemove: () => void;
@@ -8,27 +12,41 @@ interface FilterChipsProps {
   onClearAll: () => void;
 }
 
+const chipVariants = {
+  initial: { opacity: 0, scale: 0.8 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.8 },
+};
+
 export function FilterChips({ chips, onClearAll }: FilterChipsProps) {
   if (chips.length === 0) return null;
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      {chips.map((chip) => (
-        <span
-          key={chip.label}
-          className="inline-flex items-center gap-1 rounded-full bg-brand-50 text-brand-700 border border-brand-200 px-2.5 py-0.5 text-xs"
-        >
-          {chip.label}
-          <button
-            type="button"
-            onClick={chip.onRemove}
-            className="ml-0.5 hover:text-brand-900 transition-colors"
-            aria-label={`Remove filter: ${chip.label}`}
+      <AnimatePresence mode="popLayout">
+        {chips.map((chip) => (
+          <motion.span
+            key={chip.label}
+            variants={chipVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.15, ease: "easeOut" }}
+            layout
+            className="inline-flex items-center gap-1 rounded-full bg-brand-50 text-brand-700 border border-brand-200 px-2.5 py-0.5 text-xs"
           >
-            ×
-          </button>
-        </span>
-      ))}
+            {chip.label}
+            <button
+              type="button"
+              onClick={chip.onRemove}
+              className="ml-0.5 hover:text-brand-900 transition-colors"
+              aria-label={`Remove filter: ${chip.label}`}
+            >
+              ×
+            </button>
+          </motion.span>
+        ))}
+      </AnimatePresence>
       <button
         type="button"
         onClick={onClearAll}
diff --git a/apps/web/src/components/ui/ProgressRing.tsx b/apps/web/src/components/ui/ProgressRing.tsx
new file mode 100644
index 0000000..142c6c4
--- /dev/null
+++ b/apps/web/src/components/ui/ProgressRing.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface ProgressRingProps {
+  value: number;
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  trackColor?: string;
+  className?: string;
+  children?: React.ReactNode;
+  animated?: boolean;
+}
+
+export function ProgressRing({
+  value,
+  size = 40,
+  strokeWidth = 3,
+  color = "var(--color-blue-500, #3b82f6)",
+  trackColor = "var(--color-gray-200, #e5e7eb)",
+  className,
+  children,
+  animated = true,
+}: ProgressRingProps) {
+  const [mounted, setMounted] = useState(!animated);
+
+  useEffect(() => {
+    if (!animated) return;
+    // Trigger animation on next frame so the transition fires
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, [animated]);
+
+  const clamped = Math.max(0, Math.min(100, value));
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (clamped / 100) * circumference;
+  const center = size / 2;
+
+  return (
+    <div
+      className={`relative inline-flex items-center justify-center ${className ?? ""}`}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="rotate-[-90deg]"
+      >
+        {/* Track */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={trackColor}
+          strokeWidth={strokeWidth}
+        />
+        {/* Progress */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={mounted ? offset : circumference}
+          style={{
+            transition: animated
+              ? "stroke-dashoffset 600ms cubic-bezier(0.25, 0.1, 0.25, 1)"
+              : "none",
+          }}
+        />
+      </svg>
+      {children != null && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/ShimmerSkeleton.tsx b/apps/web/src/components/ui/ShimmerSkeleton.tsx
new file mode 100644
index 0000000..1efeeed
--- /dev/null
+++ b/apps/web/src/components/ui/ShimmerSkeleton.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { Children, cloneElement, isValidElement, ReactNode } from "react";
+
+/* ------------------------------------------------------------------ */
+/*  ShimmerSkeleton                                                   */
+/* ------------------------------------------------------------------ */
+
+interface ShimmerSkeletonProps {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  variant?: "text" | "circle" | "card" | "rect";
+}
+
+const roundedMap: Record<string, string> = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full",
+};
+
+const variantDefaults: Record<
+  string,
+  { width?: string | number; height?: string | number; rounded: string }
+> = {
+  text: { width: "100%", height: "1em", rounded: "rounded" },
+  circle: { width: 40, height: 40, rounded: "rounded-full" },
+  card: { width: "100%", height: 120, rounded: "rounded-xl" },
+  rect: { width: "100%", height: 40, rounded: "rounded-md" },
+};
+
+export function ShimmerSkeleton({
+  className = "",
+  width,
+  height,
+  rounded,
+  variant = "rect",
+}: ShimmerSkeletonProps) {
+  const defaults = variantDefaults[variant] ?? variantDefaults.rect;
+  const resolvedWidth = width ?? defaults?.width ?? "100%";
+  const resolvedHeight = height ?? defaults?.height ?? 40;
+  const resolvedRounded = rounded
+    ? roundedMap[rounded] ?? "rounded-md"
+    : defaults?.rounded ?? "rounded-md";
+
+  return (
+    <div
+      className={`shimmer-skeleton ${resolvedRounded} ${className}`}
+      style={{
+        width:
+          typeof resolvedWidth === "number"
+            ? `${resolvedWidth}px`
+            : resolvedWidth,
+        height:
+          typeof resolvedHeight === "number"
+            ? `${resolvedHeight}px`
+            : resolvedHeight,
+      }}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  ShimmerGroup – staggers children entrance by 50ms each            */
+/* ------------------------------------------------------------------ */
+
+interface ShimmerGroupProps {
+  children: ReactNode;
+  staggerMs?: number;
+  className?: string;
+}
+
+export function ShimmerGroup({
+  children,
+  staggerMs = 50,
+  className,
+}: ShimmerGroupProps) {
+  return (
+    <div className={className}>
+      {Children.map(children, (child, index) => {
+        if (!isValidElement(child)) return child;
+        return cloneElement(child as React.ReactElement<{ style?: React.CSSProperties }>, {
+          style: {
+            ...(child.props as { style?: React.CSSProperties }).style,
+            animationDelay: `${index * staggerMs}ms`,
+          },
+        });
+      })}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Inline <style> – injected once via a hidden element               */
+/* ------------------------------------------------------------------ */
+
+const shimmerCSS = `
+.shimmer-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: var(--shimmer-bg, #e5e7eb);
+}
+
+@media (prefers-color-scheme: dark) {
+  .shimmer-skeleton {
+    --shimmer-bg: #374151;
+    --shimmer-highlight: rgba(255, 255, 255, 0.06);
+  }
+}
+
+:root {
+  --shimmer-bg: #e5e7eb;
+  --shimmer-highlight: rgba(255, 255, 255, 0.5);
+}
+
+.dark .shimmer-skeleton {
+  --shimmer-bg: #374151;
+  --shimmer-highlight: rgba(255, 255, 255, 0.06);
+}
+
+.shimmer-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    110deg,
+    transparent 25%,
+    var(--shimmer-highlight) 50%,
+    transparent 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+`;
+
+/**
+ * Mount this once (e.g. in a layout) to inject shimmer styles,
+ * or simply import ShimmerSkeleton — the styles tag is rendered
+ * alongside the first skeleton automatically.
+ */
+export function ShimmerStyles() {
+  return <style dangerouslySetInnerHTML={{ __html: shimmerCSS }} />;
+}
diff --git a/apps/web/src/components/ui/Sparkline.tsx b/apps/web/src/components/ui/Sparkline.tsx
new file mode 100644
index 0000000..a145b17
--- /dev/null
+++ b/apps/web/src/components/ui/Sparkline.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { useId } from "react";
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  fillOpacity?: number;
+  strokeWidth?: number;
+  className?: string;
+  animated?: boolean;
+}
+
+function buildPoints(
+  data: number[],
+  width: number,
+  height: number,
+  strokeWidth: number,
+): string {
+  if (data.length === 0) return "";
+
+  const padding = strokeWidth;
+  const drawWidth = width - padding * 2;
+  const drawHeight = height - padding * 2;
+
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1; // avoid division by zero when all values equal
+
+  return data
+    .map((v, i) => {
+      const x =
+        data.length === 1
+          ? width / 2
+          : padding + (i / (data.length - 1)) * drawWidth;
+      const y = padding + drawHeight - ((v - min) / range) * drawHeight;
+      return `${x},${y}`;
+    })
+    .join(" ");
+}
+
+function buildAreaPoints(
+  linePoints: string,
+  width: number,
+  height: number,
+  strokeWidth: number,
+  dataLength: number,
+): string {
+  if (!linePoints) return "";
+
+  const padding = strokeWidth;
+  const drawWidth = width - padding * 2;
+  const bottom = height - padding;
+
+  const lastX =
+    dataLength === 1 ? width / 2 : padding + drawWidth;
+  const firstX = dataLength === 1 ? width / 2 : padding;
+
+  return `${linePoints} ${lastX},${bottom} ${firstX},${bottom}`;
+}
+
+export function Sparkline({
+  data,
+  width = 60,
+  height = 20,
+  color = "currentColor",
+  fillOpacity = 0.1,
+  strokeWidth = 1.5,
+  className,
+  animated = true,
+}: SparklineProps) {
+  const id = useId();
+
+  if (data.length === 0) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className={className}
+        role="img"
+        aria-label="No data"
+      />
+    );
+  }
+
+  const linePoints = buildPoints(data, width, height, strokeWidth);
+  const areaPoints = buildAreaPoints(
+    linePoints,
+    width,
+    height,
+    strokeWidth,
+    data.length,
+  );
+
+  // Approximate path length for dash animation
+  const approxLength = width * 2;
+
+  return (
+    <>
+      {animated && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              @keyframes sparkline-draw-${CSS.escape(id)} {
+                from { stroke-dashoffset: ${approxLength}; }
+                to   { stroke-dashoffset: 0; }
+              }
+            `,
+          }}
+        />
+      )}
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className={className}
+        role="img"
+        aria-label={`Sparkline: ${data.join(", ")}`}
+      >
+        {/* Area fill */}
+        {data.length > 1 && (
+          <polygon
+            points={areaPoints}
+            fill={color}
+            opacity={fillOpacity}
+          />
+        )}
+
+        {/* Line */}
+        {data.length === 1 ? (
+          <circle
+            cx={width / 2}
+            cy={height / 2}
+            r={strokeWidth}
+            fill={color}
+          />
+        ) : (
+          <polyline
+            points={linePoints}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            {...(animated
+              ? {
+                  strokeDasharray: approxLength,
+                  strokeDashoffset: approxLength,
+                  style: {
+                    animation: `sparkline-draw-${CSS.escape(id)} 600ms ease-out forwards`,
+                  },
+                }
+              : {})}
+          />
+        )}
+      </svg>
+    </>
+  );
+}
diff --git a/apps/web/src/components/ui/StaggerList.tsx b/apps/web/src/components/ui/StaggerList.tsx
new file mode 100644
index 0000000..fe94778
--- /dev/null
+++ b/apps/web/src/components/ui/StaggerList.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import { type ReactNode } from "react";
+
+/* ------------------------------------------------------------------ */
+/*  StaggerList                                                       */
+/* ------------------------------------------------------------------ */
+
+interface StaggerListProps {
+  children: ReactNode;
+  staggerDelay?: number;
+  className?: string;
+  as?: "div" | "ul" | "ol" | "tbody";
+}
+
+const containerVariants: (stagger: number) => Variants = (stagger) => ({
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: stagger,
+    },
+  },
+});
+
+const MotionComponents = {
+  div: motion.div,
+  ul: motion.ul,
+  ol: motion.ol,
+  tbody: motion.tbody,
+} as const;
+
+export function StaggerList({
+  children,
+  staggerDelay = 0.03,
+  className,
+  as = "div",
+}: StaggerListProps) {
+  const Component = MotionComponents[as];
+
+  return (
+    <Component
+      className={className}
+      initial="hidden"
+      animate="visible"
+      variants={containerVariants(staggerDelay)}
+    >
+      {children}
+    </Component>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  StaggerItem                                                       */
+/* ------------------------------------------------------------------ */
+
+interface StaggerItemProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const itemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 8,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.25,
+      ease: [0.25, 0.1, 0.25, 1],
+    },
+  },
+};
+
+export function StaggerItem({ children, className }: StaggerItemProps) {
+  return (
+    <motion.div className={className} variants={itemVariants}>
+      {children}
+    </motion.div>
+  );
+}
diff --git a/apps/web/src/components/ui/SuccessToast.tsx b/apps/web/src/components/ui/SuccessToast.tsx
new file mode 100644
index 0000000..8f8f1d8
--- /dev/null
+++ b/apps/web/src/components/ui/SuccessToast.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface SuccessToastProps {
+  show: boolean;
+  message: string;
+  onDone?: () => void;
+  variant?: "success" | "info" | "warning";
+}
+
+const VARIANT_STYLES = {
+  success: {
+    bg: "bg-emerald-50 dark:bg-emerald-950/80 border-emerald-200 dark:border-emerald-800",
+    text: "text-emerald-800 dark:text-emerald-200",
+    icon: (
+      <svg className="h-4 w-4 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  info: {
+    bg: "bg-blue-50 dark:bg-blue-950/80 border-blue-200 dark:border-blue-800",
+    text: "text-blue-800 dark:text-blue-200",
+    icon: (
+      <svg className="h-4 w-4 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+        <circle cx="12" cy="12" r="10" strokeWidth={2} />
+        <path strokeLinecap="round" d="M12 16v-4M12 8h.01" />
+      </svg>
+    ),
+  },
+  warning: {
+    bg: "bg-amber-50 dark:bg-amber-950/80 border-amber-200 dark:border-amber-800",
+    text: "text-amber-800 dark:text-amber-200",
+    icon: (
+      <svg className="h-4 w-4 text-amber-500 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+      </svg>
+    ),
+  },
+} as const;
+
+export function SuccessToast({ show, message, onDone, variant = "success" }: SuccessToastProps) {
+  const style = VARIANT_STYLES[variant];
+
+  useEffect(() => {
+    if (!show) return;
+    const timer = setTimeout(() => {
+      onDone?.();
+    }, 2500);
+    return () => clearTimeout(timer);
+  }, [show, onDone]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ y: -40, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -40, opacity: 0 }}
+          transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          className="fixed top-4 left-1/2 z-[9999] -translate-x-1/2"
+        >
+          <div
+            className={`flex items-center gap-2 rounded-full border px-4 py-2 shadow-lg backdrop-blur-sm ${style.bg}`}
+          >
+            {style.icon}
+            <span className={`text-sm font-medium ${style.text}`}>{message}</span>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/web/src/components/vacations/BalanceCard.tsx b/apps/web/src/components/vacations/BalanceCard.tsx
index b83a1c1..9cc7d91 100644
--- a/apps/web/src/components/vacations/BalanceCard.tsx
+++ b/apps/web/src/components/vacations/BalanceCard.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ProgressRing } from "~/components/ui/ProgressRing.js";
 
 interface BalanceCardProps {
   resourceId: string;
@@ -16,9 +18,9 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
 
   if (isLoading) {
     return (
-      <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 animate-pulse">
-        <div className="h-4 bg-gray-100 dark:bg-gray-700 rounded w-1/3 mb-3" />
-        <div className="h-8 bg-gray-100 dark:bg-gray-700 rounded w-1/2" />
+      <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+        <div className="h-4 shimmer-skeleton rounded w-1/3 mb-3" />
+        <div className="h-8 shimmer-skeleton rounded w-1/2" />
       </div>
     );
   }
@@ -45,22 +47,36 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
     );
   }
 
+  const ringColor = pct > 90
+    ? "var(--color-red-500, #ef4444)"
+    : pct >= 70
+      ? "var(--color-amber-500, #f59e0b)"
+      : "var(--color-emerald-500, #10b981)";
+
   return (
     <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
-          Vacation Balance {year}
-        </h3>
+        <div className="flex items-center gap-3">
+          <ProgressRing value={pct} size={52} strokeWidth={4} color={ringColor}>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{balance.remainingDays}d</span>
+          </ProgressRing>
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+              Vacation Balance {year}
+            </h3>
+            <p className="text-xs text-gray-400 dark:text-gray-500">{balance.usedDays} of {balance.entitledDays} days used</p>
+          </div>
+        </div>
         {balance.carryoverDays > 0 && (
-          <span className="text-xs text-gray-400 dark:text-gray-500">+{balance.carryoverDays}d carried over</span>
+          <span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryoverDays}d carried over<InfoTooltip content="Unused days from the previous year. Automatically calculated on first access." /></span>
         )}
       </div>
 
       <div className="grid grid-cols-4 gap-3">
-        <Stat label="Entitled" value={balance.entitledDays} color="text-gray-900" />
-        <Stat label="Used" value={balance.usedDays} color="text-gray-600" />
-        <Stat label="Pending" value={balance.pendingDays} color="text-amber-600" />
-        <Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} />
+        <Stat label="Entitled" value={balance.entitledDays} color="text-gray-900 dark:text-gray-100" tooltip="Total vacation days granted for this year, including carryover from previous year." />
+        <Stat label="Used" value={balance.usedDays} color="text-gray-600 dark:text-gray-400" tooltip="Days already consumed by approved vacations that have passed." />
+        <Stat label="Pending" value={balance.pendingDays} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
+        <Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
       </div>
 
       {/* Progress bar */}
@@ -89,11 +105,11 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
   );
 }
 
-function Stat({ label, value, color }: { label: string; value: number; color: string }) {
+function Stat({ label, value, color, tooltip }: { label: string; value: number; color: string; tooltip?: string }) {
   return (
     <div className="text-center">
       <p className={`text-xl font-bold ${color}`}>{value}</p>
-      <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{label}</p>
+      <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5 inline-flex items-center">{label}{tooltip && <InfoTooltip content={tooltip} />}</p>
     </div>
   );
 }
diff --git a/apps/web/src/components/vacations/TeamCalendar.tsx b/apps/web/src/components/vacations/TeamCalendar.tsx
index a568fea..a55326a 100644
--- a/apps/web/src/components/vacations/TeamCalendar.tsx
+++ b/apps/web/src/components/vacations/TeamCalendar.tsx
@@ -3,13 +3,8 @@
 import { useState } from "react";
 import { VacationStatus } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
-
-const TYPE_COLOR: Record<string, string> = {
-  ANNUAL: "bg-brand-500",
-  SICK: "bg-red-400",
-  PUBLIC_HOLIDAY: "bg-emerald-500",
-  OTHER: "bg-purple-400",
-};
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
 
 const MONTH_NAMES = [
   "Jan", "Feb", "Mar", "Apr", "May", "Jun",
@@ -48,7 +43,7 @@ export function TeamCalendar() {
   const { data: allChapters } = trpc.resource.chapters.useQuery(undefined, { staleTime: 60_000 });
   const chapters = allChapters ?? [];
 
-  const resourceList = resources?.resources ?? [];
+  const resourceList: { id: string; displayName: string }[] = resources?.resources ?? [];
   const vacationList = (vacations ?? []).filter(
     (v) => v.status !== VacationStatus.CANCELLED && v.status !== VacationStatus.REJECTED,
   );
@@ -119,7 +114,7 @@ export function TeamCalendar() {
           <thead>
             <tr className="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
               <th className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-36 border-r border-gray-100 dark:border-gray-700">
-                Resource
+                <span className="inline-flex items-center gap-0.5">Resource<InfoTooltip content="Matrix view: each row is a resource, each column is a calendar day. Colored cells indicate vacation days (color = type, faded = pending)." width="w-72" /></span>
               </th>
               {days.map((d) => {
                 const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
@@ -154,7 +149,7 @@ export function TeamCalendar() {
 
                     let cellClass = "w-7 h-7";
                     if (vac) {
-                      const color = TYPE_COLOR[vac.type] ?? "bg-gray-400";
+                      const color = VACATION_CALENDAR_COLORS[vac.type] ?? "bg-gray-400";
                       const opacity = vac.status === "PENDING" ? "opacity-50" : "";
                       cellClass += ` ${color} ${opacity}`;
                     } else if (isWeekend) {
@@ -185,7 +180,7 @@ export function TeamCalendar() {
 
       {/* Legend */}
       <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-700 flex gap-4 flex-wrap">
-        {Object.entries(TYPE_COLOR).map(([type, color]) => (
+        {Object.entries(VACATION_CALENDAR_COLORS).map(([type, color]) => (
           <span key={type} className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
             <span className={`${color} w-3 h-3 rounded-sm inline-block`} />
             {type.replace("_", " ")}
diff --git a/apps/web/src/components/vacations/VacationCalendar.tsx b/apps/web/src/components/vacations/VacationCalendar.tsx
index 269e881..babd7b7 100644
--- a/apps/web/src/components/vacations/VacationCalendar.tsx
+++ b/apps/web/src/components/vacations/VacationCalendar.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { VacationStatus, VacationType } from "@planarchy/shared";
+import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
 
 interface VacationEntry {
   id: string;
@@ -18,13 +19,6 @@ interface VacationCalendarProps {
   initialMonth?: number; // 0-indexed
 }
 
-const TYPE_COLOR: Record<string, string> = {
-  ANNUAL: "bg-brand-500",
-  SICK: "bg-red-400",
-  PUBLIC_HOLIDAY: "bg-emerald-400",
-  OTHER: "bg-purple-400",
-};
-
 const STATUS_OPACITY: Record<string, string> = {
   APPROVED: "opacity-100",
   PENDING: "opacity-60",
@@ -145,7 +139,7 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
               </span>
               <div className="space-y-0.5">
                 {dayVacations.slice(0, 3).map((v) => {
-                  const colorClass = TYPE_COLOR[v.type] ?? "bg-gray-400";
+                  const colorClass = VACATION_CALENDAR_COLORS[v.type] ?? "bg-gray-400";
                   const opacityClass = STATUS_OPACITY[v.status] ?? "opacity-100";
                   const name = v.resource?.displayName ?? "—";
                   return (
@@ -169,7 +163,7 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
 
       {/* Legend */}
       <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-700 flex gap-4 flex-wrap">
-        {Object.entries(TYPE_COLOR).map(([type, color]) => (
+        {Object.entries(VACATION_CALENDAR_COLORS).map(([type, color]) => (
           <span key={type} className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
             <span className={`${color} w-3 h-3 rounded-sm inline-block`} />
             {type.replace("_", " ")}
diff --git a/apps/web/src/components/vacations/VacationClient.tsx b/apps/web/src/components/vacations/VacationClient.tsx
index f947186..96d209a 100644
--- a/apps/web/src/components/vacations/VacationClient.tsx
+++ b/apps/web/src/components/vacations/VacationClient.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { VacationStatus, VacationType } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { VacationModal } from "./VacationModal.js";
@@ -11,6 +11,7 @@ import { useTableSort } from "~/hooks/useTableSort.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { VACATION_STATUS_BADGE as STATUS_BADGE, VACATION_TYPE_LABELS as TYPE_LABELS, VACATION_TYPE_BADGE } from "~/lib/status-styles.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
 
 type VacationStatusFilter = VacationStatus | "ALL";
 type VacationTypeFilter = VacationType | "ALL";
@@ -25,6 +26,12 @@ export function VacationClient() {
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [batchRejectReason, setBatchRejectReason] = useState("");
   const [showBatchRejectInput, setShowBatchRejectInput] = useState(false);
+  const [toast, setToast] = useState<{ show: boolean; message: string; variant: "success" | "warning" }>({
+    show: false,
+    message: "",
+    variant: "success",
+  });
+  const clearToast = useCallback(() => setToast((t) => ({ ...t, show: false })), []);
 
   const { data: vacations, isLoading, error: vacationError, refetch } = trpc.vacation.list.useQuery(
     {
@@ -61,6 +68,7 @@ export function VacationClient() {
   const batchApproveMutation = trpc.vacation.batchApprove.useMutation({
     onSuccess: async () => {
       setSelected(new Set());
+      setToast({ show: true, message: "Vacations approved", variant: "success" });
       await invalidateAll();
     },
   });
@@ -69,6 +77,7 @@ export function VacationClient() {
       setSelected(new Set());
       setShowBatchRejectInput(false);
       setBatchRejectReason("");
+      setToast({ show: true, message: "Vacations rejected", variant: "warning" });
       await invalidateAll();
     },
   });
@@ -122,6 +131,7 @@ export function VacationClient() {
 
   return (
     <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <SuccessToast show={toast.show} message={toast.message} variant={toast.variant} onDone={clearToast} />
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -331,7 +341,7 @@ export function VacationClient() {
               <table className="w-full text-sm">
                 <thead>
                   <tr className="border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-                    <SortableColumnHeader label="Resource" field="resource" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
+                    <SortableColumnHeader label="Resource" field="resource" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="The employee this vacation entry belongs to." />
                     <th className="px-3 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                       <span className="inline-flex items-center gap-0.5">
                         <button
@@ -344,8 +354,8 @@ export function VacationClient() {
                         <InfoTooltip content="ANNUAL = paid annual leave · SICK = sick leave · PUBLIC_HOLIDAY = public holiday · OTHER = other leave types." />
                       </span>
                     </th>
-                    <SortableColumnHeader label="Start" field="startDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
-                    <SortableColumnHeader label="End" field="endDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
+                    <SortableColumnHeader label="Start" field="startDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="First day of the leave period (inclusive). Shows a half-day indicator if applicable." />
+                    <SortableColumnHeader label="End" field="endDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Last day of the leave period (inclusive)." />
                     <th className="px-3 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                       <span className="inline-flex items-center gap-0.5">
                         <button
diff --git a/apps/web/src/components/vacations/VacationModal.tsx b/apps/web/src/components/vacations/VacationModal.tsx
index 159b86f..db81a75 100644
--- a/apps/web/src/components/vacations/VacationModal.tsx
+++ b/apps/web/src/components/vacations/VacationModal.tsx
@@ -6,16 +6,11 @@ import { VacationType } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { useDebounce } from "~/hooks/useDebounce.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { VACATION_TYPE_LABELS } from "~/lib/status-styles.js";
 
 const VACATION_TYPES = Object.values(VacationType);
 
-const VACATION_TYPE_LABELS: Record<VacationType, string> = {
-  ANNUAL: "Annual Leave",
-  SICK: "Sick Leave",
-  PUBLIC_HOLIDAY: "Public Holiday",
-  OTHER: "Other",
-};
-
 interface VacationModalProps {
   resourceId?: string;
   onClose: () => void;
@@ -25,7 +20,10 @@ interface VacationModalProps {
 function toDateInputValue(date: Date | string | null | undefined): string {
   if (!date) return "";
   const d = typeof date === "string" ? new Date(date) : date;
-  return d.toISOString().split("T")[0] ?? "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
 }
 
 export function VacationModal({ resourceId: initialResourceId, onClose, onSuccess }: VacationModalProps) {
@@ -114,7 +112,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
   const inputClass =
     "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
   const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
-  const resourceList = resources?.resources ?? [];
+  const resourceList: { id: string; displayName: string; eid: string }[] = resources?.resources ?? [];
 
   return (
     <div
@@ -146,7 +144,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
           {!initialResourceId && (
             <div>
               <label htmlFor="vac-resource" className={labelClass}>
-                Resource <span className="text-red-500">*</span>
+                Resource <span className="text-red-500">*</span><InfoTooltip content="The employee this vacation request is for." />
               </label>
               <select
                 id="vac-resource"
@@ -168,7 +166,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
           {/* Type */}
           <div>
             <label htmlFor="vac-type" className={labelClass}>
-              Type <span className="text-red-500">*</span>
+              Type <span className="text-red-500">*</span><InfoTooltip content="ANNUAL = paid leave (deducted from entitlement) · SICK = sick leave · PUBLIC_HOLIDAY = national/regional holiday · OTHER = special leave." />
             </label>
             <select
               id="vac-type"
@@ -188,7 +186,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
           <div className="grid grid-cols-2 gap-4">
             <div>
               <label htmlFor="vac-start" className={labelClass}>
-                Start Date <span className="text-red-500">*</span>
+                Start Date <span className="text-red-500">*</span><InfoTooltip content="First day of leave (inclusive)." />
               </label>
               <DateInput
                 id="vac-start"
@@ -200,7 +198,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
             </div>
             <div>
               <label htmlFor="vac-end" className={labelClass}>
-                End Date <span className="text-red-500">*</span>
+                End Date <span className="text-red-500">*</span><InfoTooltip content="Last day of leave (inclusive)." />
               </label>
               <DateInput
                 id="vac-end"
@@ -222,7 +220,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
                 onChange={(e) => setIsHalfDay(e.target.checked)}
                 className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500"
               />
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Half day</span>
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Half day</span><InfoTooltip content="Request only half a day off (morning or afternoon). Counts as 0.5 days against entitlement." />
             </label>
             {isHalfDay && (
               <div className="flex gap-3">
diff --git a/apps/web/src/hooks/useAllocationHistory.ts b/apps/web/src/hooks/useAllocationHistory.ts
index 2705c51..fd25b82 100644
--- a/apps/web/src/hooks/useAllocationHistory.ts
+++ b/apps/web/src/hooks/useAllocationHistory.ts
@@ -1,35 +1,53 @@
 "use client";
 import { useCallback, useRef, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "./useInvalidatePlanningViews.js";
 import type { AllocationMovedSnapshot } from "./useTimelineDrag.js";
 
 export type { AllocationMovedSnapshot };
 
-const MAX_HISTORY = 20;
+/** A single allocation move or a batch shift of multiple allocations */
+export type HistoryEntry =
+  | { type: "single"; snapshot: AllocationMovedSnapshot }
+  | { type: "batch"; allocationIds: string[]; daysDelta: number; mode: "move" | "resize-start" | "resize-end" };
+
+const DEFAULT_MAX_HISTORY = 50;
 
 export function useAllocationHistory() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const past = useRef<AllocationMovedSnapshot[]>([]);
-  const future = useRef<AllocationMovedSnapshot[]>([]);
+  const past = useRef<HistoryEntry[]>([]);
+  const future = useRef<HistoryEntry[]>([]);
 
-  const utils = trpc.useUtils();
+  const invalidateTimeline = useInvalidateTimeline();
+
+  // Configurable max steps from system settings
+  const { data: settings } = trpc.settings.getSystemSettings.useQuery(undefined, {
+    staleTime: 60_000,
+  });
+  const maxHistory = settings?.timelineUndoMaxSteps ?? DEFAULT_MAX_HISTORY;
 
   const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
-    onSuccess: () => {
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
-    },
+    onSuccess: invalidateTimeline,
+  });
+
+  const batchShiftMutation = trpc.timeline.batchShiftAllocations.useMutation({
+    onSuccess: invalidateTimeline,
   });
 
   const push = useCallback((snapshot: AllocationMovedSnapshot) => {
-    past.current = [...past.current.slice(-MAX_HISTORY + 1), snapshot];
+    past.current = [...past.current.slice(-(maxHistory - 1)), { type: "single", snapshot }];
     future.current = [];
     setCanUndo(true);
     setCanRedo(false);
-  }, []);
+  }, [maxHistory]);
+
+  const pushBatch = useCallback((allocationIds: string[], daysDelta: number, mode: "move" | "resize-start" | "resize-end" = "move") => {
+    past.current = [...past.current.slice(-(maxHistory - 1)), { type: "batch", allocationIds, daysDelta, mode }];
+    future.current = [];
+    setCanUndo(true);
+    setCanRedo(false);
+  }, [maxHistory]);
 
   const undo = useCallback(async () => {
     const last = past.current[past.current.length - 1];
@@ -38,12 +56,25 @@ export function useAllocationHistory() {
     future.current = [last, ...future.current];
     setCanUndo(past.current.length > 0);
     setCanRedo(true);
-    await updateMutation.mutateAsync({
-      allocationId: last.mutationAllocationId,
-      startDate: last.before.startDate,
-      endDate: last.before.endDate,
-    });
-  }, [updateMutation]);
+
+    if (last.type === "single") {
+      await updateMutation.mutateAsync({
+        allocationId: last.snapshot.mutationAllocationId,
+        startDate: last.snapshot.before.startDate,
+        endDate: last.snapshot.before.endDate,
+      });
+    } else {
+      // Batch: reverse the shift (for resize modes, reverse means shifting the same edge back)
+      const reverseMode = last.mode === "resize-start" ? "resize-start"
+        : last.mode === "resize-end" ? "resize-end"
+        : "move";
+      await batchShiftMutation.mutateAsync({
+        allocationIds: last.allocationIds,
+        daysDelta: -last.daysDelta,
+        mode: reverseMode,
+      });
+    }
+  }, [updateMutation, batchShiftMutation]);
 
   const redo = useCallback(async () => {
     const next = future.current[0];
@@ -52,12 +83,22 @@ export function useAllocationHistory() {
     past.current = [...past.current, next];
     setCanUndo(true);
     setCanRedo(future.current.length > 0);
-    await updateMutation.mutateAsync({
-      allocationId: next.mutationAllocationId,
-      startDate: next.after.startDate,
-      endDate: next.after.endDate,
-    });
-  }, [updateMutation]);
 
-  return { push, undo, redo, canUndo, canRedo };
+    if (next.type === "single") {
+      await updateMutation.mutateAsync({
+        allocationId: next.snapshot.mutationAllocationId,
+        startDate: next.snapshot.after.startDate,
+        endDate: next.snapshot.after.endDate,
+      });
+    } else {
+      // Batch: re-apply the shift
+      await batchShiftMutation.mutateAsync({
+        allocationIds: next.allocationIds,
+        daysDelta: next.daysDelta,
+        mode: next.mode,
+      });
+    }
+  }, [updateMutation, batchShiftMutation]);
+
+  return { push, pushBatch, undo, redo, canUndo, canRedo };
 }
diff --git a/apps/web/src/hooks/useAppPreferences.ts b/apps/web/src/hooks/useAppPreferences.ts
index d24805c..048b2f5 100644
--- a/apps/web/src/hooks/useAppPreferences.ts
+++ b/apps/web/src/hooks/useAppPreferences.ts
@@ -18,6 +18,8 @@ export interface AppPreferences {
   heatmapColorScheme: HeatmapColorScheme;
   /** Show open demand / placeholder entries by default when loading the timeline. Default: true. */
   showDemandProjects: boolean;
+  /** Blink overbooked days (>8h) as a warning on the timeline. Default: false. */
+  blinkOverbookedDays: boolean;
 }
 
 const STORAGE_KEY = "planarchy_prefs";
@@ -28,6 +30,7 @@ const DEFAULT: AppPreferences = {
   timelineDisplayMode: "strip",
   heatmapColorScheme: "green-red",
   showDemandProjects: true,
+  blinkOverbookedDays: false,
 };
 
 export function readAppPreferences(): AppPreferences {
@@ -94,5 +97,13 @@ export function useAppPreferences() {
     });
   }, []);
 
-  return { prefs, setHideCompletedProjects, setTimelineDisplayMode, setHeatmapColorScheme, setShowDemandProjects };
+  const setBlinkOverbookedDays = useCallback((value: boolean) => {
+    setPrefs((prev) => {
+      const next = { ...prev, blinkOverbookedDays: value };
+      saveAppPreferences(next);
+      return next;
+    });
+  }, []);
+
+  return { prefs, setHideCompletedProjects, setTimelineDisplayMode, setHeatmapColorScheme, setShowDemandProjects, setBlinkOverbookedDays };
 }
diff --git a/apps/web/src/hooks/useInvalidatePlanningViews.ts b/apps/web/src/hooks/useInvalidatePlanningViews.ts
index 985e9ad..02c2bdb 100644
--- a/apps/web/src/hooks/useInvalidatePlanningViews.ts
+++ b/apps/web/src/hooks/useInvalidatePlanningViews.ts
@@ -1,8 +1,19 @@
 import { trpc } from "~/lib/trpc/client.js";
 
+/** Invalidates just the 4 timeline queries */
+export function useInvalidateTimeline() {
+  const utils = trpc.useUtils();
+  return () => {
+    void utils.timeline.getEntries.invalidate();
+    void utils.timeline.getEntriesView.invalidate();
+    void utils.timeline.getProjectContext.invalidate();
+    void utils.timeline.getBudgetStatus.invalidate();
+  };
+}
+
+/** Invalidates all 8 planning-related queries (4 timeline + 4 allocation) */
 export function useInvalidatePlanningViews() {
   const utils = trpc.useUtils();
-
   return () => {
     void utils.allocation.list.invalidate();
     void (
diff --git a/apps/web/src/hooks/useMultiSelectIntersection.ts b/apps/web/src/hooks/useMultiSelectIntersection.ts
new file mode 100644
index 0000000..092ac2f
--- /dev/null
+++ b/apps/web/src/hooks/useMultiSelectIntersection.ts
@@ -0,0 +1,164 @@
+/**
+ * Computes which allocations/resources fall within the multi-select rectangle
+ * after the user finishes a right-click drag selection.
+ */
+
+import { useEffect } from "react";
+import { LABEL_WIDTH } from "~/components/timeline/timelineConstants.js";
+import type { MultiSelectState } from "~/hooks/useTimelineDrag.js";
+import type {
+  TimelineAssignmentEntry,
+  TimelineDemandEntry,
+  ViewMode,
+  ResourceBrief,
+} from "~/components/timeline/TimelineContext.js";
+
+interface ProjectGroup {
+  id: string;
+  resourceRows: {
+    resource: { id: string };
+    allocs: TimelineAssignmentEntry[];
+  }[];
+}
+
+export function useMultiSelectIntersection({
+  multiSelectState,
+  setMultiSelectState,
+  clearMultiSelect,
+  canvasRef,
+  viewMode,
+  resources,
+  allocsByResource,
+  projectGroups,
+  openDemandsByProject,
+  dates,
+  today,
+  CELL_WIDTH,
+  toLeft,
+  toWidth,
+}: {
+  multiSelectState: MultiSelectState;
+  setMultiSelectState: React.Dispatch<React.SetStateAction<MultiSelectState>>;
+  clearMultiSelect: () => void;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
+  viewMode: ViewMode;
+  resources: ResourceBrief[];
+  allocsByResource: Map<string, TimelineAssignmentEntry[]>;
+  projectGroups: ProjectGroup[];
+  openDemandsByProject: Map<string, TimelineDemandEntry[]>;
+  dates: Date[];
+  today: Date;
+  CELL_WIDTH: number;
+  toLeft: (d: Date) => number;
+  toWidth: (s: Date, e: Date) => number;
+}) {
+  useEffect(() => {
+    // Only compute when drag just ended (isSelecting false but has coordinates)
+    if (multiSelectState.isSelecting) return;
+    if (multiSelectState.startX === 0 && multiSelectState.startY === 0) return;
+    if (multiSelectState.selectedAllocationIds.length > 0 || multiSelectState.selectedResourceIds.length > 0) return;
+
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    // Selection rectangle in viewport coordinates
+    const selTop = Math.min(multiSelectState.startY, multiSelectState.currentY);
+    const selBottom = Math.max(multiSelectState.startY, multiSelectState.currentY);
+    const selLeft = Math.min(multiSelectState.startX, multiSelectState.currentX);
+    const selRight = Math.max(multiSelectState.startX, multiSelectState.currentX);
+
+    // Convert viewport X to canvas-relative X for allocation matching
+    const canvasRect = canvasEl.getBoundingClientRect();
+    const canvasXOffset = canvasRect.left + LABEL_WIDTH;
+    const toCanvasX = (clientX: number) => clientX - canvasXOffset;
+
+    const selLeftCanvas = toCanvasX(selLeft);
+    const selRightCanvas = toCanvasX(selRight);
+
+    // Derive date range from pixel X positions
+    const colIndexStart = Math.max(0, Math.min(dates.length - 1, Math.floor(selLeftCanvas / CELL_WIDTH)));
+    const colIndexEnd = Math.max(0, Math.min(dates.length - 1, Math.floor(selRightCanvas / CELL_WIDTH)));
+    const startDate = dates[colIndexStart] ?? today;
+    const endDate = dates[colIndexEnd] ?? today;
+
+    const selectedIds: string[] = [];
+    const selectedResIds: string[] = [];
+
+    // Query all rendered row elements (virtualizer only renders visible + overscan rows)
+    const rowElements = canvasEl.querySelectorAll<HTMLElement>("[data-index]");
+
+    if (viewMode === "resource") {
+      rowElements.forEach((rowEl) => {
+        const idx = Number(rowEl.dataset.index);
+        const resource = resources[idx];
+        if (!resource) return;
+
+        const rowRect = rowEl.getBoundingClientRect();
+        if (rowRect.bottom < selTop || rowRect.top > selBottom) return;
+        selectedResIds.push(resource.id);
+
+        const allocs = allocsByResource.get(resource.id) ?? [];
+        for (const alloc of allocs) {
+          const allocLeft = toLeft(new Date(alloc.startDate));
+          const allocRight = allocLeft + toWidth(new Date(alloc.startDate), new Date(alloc.endDate));
+          if (allocRight >= selLeftCanvas && allocLeft <= selRightCanvas) {
+            selectedIds.push(alloc.id);
+          }
+        }
+      });
+    } else if (viewMode === "project") {
+      const projectRowEls = canvasEl.querySelectorAll<HTMLElement>("[data-project-resource-row]");
+      projectRowEls.forEach((rowEl) => {
+        const rowRect = rowEl.getBoundingClientRect();
+        if (rowRect.bottom < selTop || rowRect.top > selBottom) return;
+
+        const projectId = rowEl.dataset.projectId;
+        const resourceId = rowEl.dataset.resourceId;
+        if (!projectId || !resourceId) return;
+
+        const group = projectGroups.find((g) => g.id === projectId);
+        if (!group) return;
+        const row = group.resourceRows.find((r) => r.resource.id === resourceId);
+        if (!row) return;
+
+        for (const alloc of row.allocs) {
+          const allocLeft = toLeft(new Date(alloc.startDate));
+          const allocRight = allocLeft + toWidth(new Date(alloc.startDate), new Date(alloc.endDate));
+          if (allocRight >= selLeftCanvas && allocLeft <= selRightCanvas) {
+            selectedIds.push(alloc.id);
+          }
+        }
+      });
+
+      // Also check demand rows for open demand selection
+      const demandRowEls = canvasEl.querySelectorAll<HTMLElement>("[data-project-demand-row]");
+      demandRowEls.forEach((rowEl) => {
+        const rowRect = rowEl.getBoundingClientRect();
+        if (rowRect.bottom < selTop || rowRect.top > selBottom) return;
+
+        const projectId = rowEl.dataset.projectId;
+        if (!projectId) return;
+
+        const demands = openDemandsByProject.get(projectId) ?? [];
+        for (const demand of demands) {
+          const allocLeft = toLeft(new Date(demand.startDate));
+          const allocRight = allocLeft + toWidth(new Date(demand.startDate), new Date(demand.endDate));
+          if (allocRight >= selLeftCanvas && allocLeft <= selRightCanvas) {
+            selectedIds.push(demand.id);
+          }
+        }
+      });
+    }
+
+    if (selectedIds.length > 0 || selectedResIds.length > 0) {
+      setMultiSelectState(prev => ({
+        ...prev,
+        selectedAllocationIds: selectedIds,
+        selectedResourceIds: selectedResIds,
+        dateRange: { start: startDate, end: endDate },
+      }));
+    } else {
+      clearMultiSelect();
+    }
+  }, [multiSelectState.isSelecting, multiSelectState.startX, multiSelectState.startY]); // eslint-disable-line react-hooks/exhaustive-deps
+}
diff --git a/apps/web/src/hooks/useTimelineDrag.ts b/apps/web/src/hooks/useTimelineDrag.ts
index 69361cd..8fcfb3b 100644
--- a/apps/web/src/hooks/useTimelineDrag.ts
+++ b/apps/web/src/hooks/useTimelineDrag.ts
@@ -2,6 +2,8 @@
 
 import { useCallback, useRef, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { useInvalidateTimeline } from "./useInvalidatePlanningViews.js";
+import { pixelsToDays, computeDragDates } from "~/components/timeline/dragMath.js";
 
 // ─── Project-shift drag state ───────────────────────────────────────────────
 
@@ -118,6 +120,39 @@ const INITIAL_RANGE_STATE: RangeState = {
   startClientX: 0,
 };
 
+// ─── Multi-select state ────────────────────────────────────────────────────
+
+export interface MultiSelectState {
+  isSelecting: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  selectedAllocationIds: string[];
+  selectedResourceIds: string[];
+  dateRange: { start: Date; end: Date } | null;
+  /** When multi-dragging, the number of days all selected allocations are shifted */
+  multiDragDaysDelta: number;
+  /** Whether a multi-drag is currently in progress */
+  isMultiDragging: boolean;
+  /** The drag mode during multi-drag (move, resize-start, resize-end) */
+  multiDragMode: AllocDragMode;
+}
+
+const INITIAL_MULTI_SELECT: MultiSelectState = {
+  isSelecting: false,
+  startX: 0,
+  startY: 0,
+  currentX: 0,
+  currentY: 0,
+  selectedAllocationIds: [],
+  selectedResourceIds: [],
+  dateRange: null,
+  multiDragDaysDelta: 0,
+  isMultiDragging: false,
+  multiDragMode: "move",
+};
+
 // ─── Hook ───────────────────────────────────────────────────────────────────
 
 export interface AllocationMovedSnapshot {
@@ -134,20 +169,28 @@ export function useTimelineDrag({
   onBlockClick,
   onRangeSelected,
   onAllocationMoved,
+  onShiftClickAlloc,
+  onMultiDragComplete,
 }: {
   cellWidth: number;
   onShiftApplied?: (projectId: string) => void;
   onBlockClick?: (info: BlockClickInfo) => void;
   onRangeSelected?: (info: RangeSelectedInfo) => void;
   onAllocationMoved?: (snapshot: AllocationMovedSnapshot) => void;
+  onShiftClickAlloc?: (allocationId: string) => void;
+  onMultiDragComplete?: (daysDelta: number, mode: AllocDragMode, selectedIds?: string[]) => void;
 }) {
   const [dragState, setDragState] = useState<DragState>(INITIAL_DRAG_STATE);
   const [allocDragState, setAllocDragState] = useState<AllocDragState>(INITIAL_ALLOC_DRAG);
   const [rangeState, setRangeState] = useState<RangeState>(INITIAL_RANGE_STATE);
+  const [multiSelectState, setMultiSelectState] = useState<MultiSelectState>(INITIAL_MULTI_SELECT);
 
   const dragStateRef = useRef<DragState>(INITIAL_DRAG_STATE);
   const allocDragRef = useRef<AllocDragState>(INITIAL_ALLOC_DRAG);
   const rangeStateRef = useRef<RangeState>(INITIAL_RANGE_STATE);
+  const multiSelectRef = useRef<MultiSelectState>(INITIAL_MULTI_SELECT);
+  // Keep ref in sync with state so document-level handlers read the latest selection
+  multiSelectRef.current = multiSelectState;
 
   // Keep always-current refs for values used inside document event handlers
   const cellWidthRef = useRef(cellWidth);
@@ -166,7 +209,14 @@ export function useTimelineDrag({
   const onAllocationMovedRef = useRef(onAllocationMoved);
   onAllocationMovedRef.current = onAllocationMoved;
 
+  const onShiftClickAllocRef = useRef(onShiftClickAlloc);
+  onShiftClickAllocRef.current = onShiftClickAlloc;
+
+  const onMultiDragCompleteRef = useRef(onMultiDragComplete);
+  onMultiDragCompleteRef.current = onMultiDragComplete;
+
   const utils = trpc.useUtils();
+  const invalidateTimeline = useInvalidateTimeline();
 
   // Project-shift preview
   const { data: previewData, isFetching: isPreviewLoading } = trpc.timeline.previewShift.useQuery(
@@ -188,9 +238,7 @@ export function useTimelineDrag({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const applyShiftMutation = (trpc.timeline.applyShift.useMutation as any)({
     onSuccess: (data: { project: { id: string } }) => {
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
+      invalidateTimeline();
       void utils.project.list.invalidate();
       onShiftApplied?.(data.project.id);
     },
@@ -204,10 +252,7 @@ export function useTimelineDrag({
 
   const updateAllocMutation = trpc.timeline.updateAllocationInline.useMutation({
     onSuccess: () => {
-      void utils.timeline.getEntries.invalidate();
-      void utils.timeline.getEntriesView.invalidate();
-      void utils.timeline.getProjectContext.invalidate();
-      void utils.timeline.getBudgetStatus.invalidate();
+      invalidateTimeline();
       const snap = pendingSnapshotRef.current;
       if (snap) {
         onAllocationMovedRef.current?.(snap);
@@ -312,6 +357,56 @@ export function useTimelineDrag({
       e.preventDefault();
       e.stopPropagation();
 
+      const wasShift = e.shiftKey;
+
+      // Check if this allocation is part of a multi-selection → multi-drag mode
+      const ms = multiSelectRef.current;
+      const isMultiSelected =
+        ms.selectedAllocationIds.length > 1 &&
+        ms.selectedAllocationIds.includes(opts.allocationId);
+
+      if (isMultiSelected) {
+        // ── Multi-drag: move/resize all selected allocations together ──
+        const startMouseX = e.clientX;
+        let currentDaysDelta = 0;
+        const dragMode = opts.mode;
+
+        setMultiSelectState((prev) => ({ ...prev, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode }));
+        multiSelectRef.current = { ...ms, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode };
+
+        function handleMultiMove(ev: MouseEvent) {
+          const deltaX = ev.clientX - startMouseX;
+          const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
+          if (daysDelta === currentDaysDelta) return;
+          currentDaysDelta = daysDelta;
+
+          setMultiSelectState((prev) => ({ ...prev, multiDragDaysDelta: daysDelta }));
+          multiSelectRef.current = { ...multiSelectRef.current, multiDragDaysDelta: daysDelta };
+        }
+
+        function handleMultiUp() {
+          document.removeEventListener("mousemove", handleMultiMove);
+          document.removeEventListener("mouseup", handleMultiUp);
+
+          const finalDelta = currentDaysDelta;
+
+          setMultiSelectState((prev) => ({ ...prev, isMultiDragging: false, multiDragDaysDelta: 0 }));
+          multiSelectRef.current = { ...multiSelectRef.current, isMultiDragging: false, multiDragDaysDelta: 0 };
+
+          if (finalDelta !== 0) {
+            // Pass IDs from ref to avoid stale closure in the callback
+            const ids = multiSelectRef.current.selectedAllocationIds;
+            onMultiDragCompleteRef.current?.(finalDelta, dragMode, ids);
+          }
+        }
+
+        document.addEventListener("mousemove", handleMultiMove);
+        document.addEventListener("mouseup", handleMultiUp);
+        return;
+      }
+
+      // ── Single allocation drag ────────────────────────────────────────────
+
       const initial: AllocDragState = {
         isActive: true,
         mode: opts.mode,
@@ -337,25 +432,15 @@ export function useTimelineDrag({
         if (!alloc.isActive || !alloc.originalStartDate || !alloc.originalEndDate) return;
 
         const deltaX = ev.clientX - alloc.startMouseX;
-        const daysDelta = Math.round(deltaX / cellWidthRef.current);
+        const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
         if (daysDelta === alloc.daysDelta) return;
 
-        const newStart = new Date(alloc.originalStartDate);
-        const newEnd = new Date(alloc.originalEndDate);
-
-        if (alloc.mode === "move") {
-          newStart.setDate(newStart.getDate() + daysDelta);
-          newEnd.setDate(newEnd.getDate() + daysDelta);
-        } else if (alloc.mode === "resize-start") {
-          newStart.setDate(newStart.getDate() + daysDelta);
-          // Allow same-day (single day booking), prevent crossing
-          if (newStart > newEnd) newStart.setTime(newEnd.getTime());
-        } else {
-          // resize-end
-          newEnd.setDate(newEnd.getDate() + daysDelta);
-          // Allow same-day (single day booking), prevent crossing
-          if (newEnd < newStart) newEnd.setTime(newStart.getTime());
-        }
+        const { start: newStart, end: newEnd } = computeDragDates(
+          alloc.mode,
+          alloc.originalStartDate,
+          alloc.originalEndDate,
+          daysDelta,
+        );
 
         const updated: AllocDragState = {
           ...alloc,
@@ -375,14 +460,20 @@ export function useTimelineDrag({
         if (!alloc.isActive) return;
 
         if (alloc.daysDelta === 0 && alloc.allocationId) {
-          // No movement → treat as click, open alloc popover
-          onBlockClickRef.current?.({
-            allocationId: alloc.allocationId,
-            projectId: alloc.projectId ?? "",
-            projectName: alloc.projectName ?? "",
-            startDate: alloc.originalStartDate!,
-            endDate: alloc.originalEndDate!,
-          });
+          // No movement → treat as click
+          if (wasShift) {
+            // Shift+Click → toggle multi-selection for this allocation
+            onShiftClickAllocRef.current?.(alloc.allocationId);
+          } else {
+            // Normal click → open alloc popover
+            onBlockClickRef.current?.({
+              allocationId: alloc.allocationId,
+              projectId: alloc.projectId ?? "",
+              projectName: alloc.projectName ?? "",
+              startDate: alloc.originalStartDate!,
+              endDate: alloc.originalEndDate!,
+            });
+          }
         } else if (alloc.allocationId && alloc.currentStartDate && alloc.currentEndDate) {
           pendingSnapshotRef.current = {
             allocationId: alloc.allocationId,
@@ -444,12 +535,14 @@ export function useTimelineDrag({
       const drag = dragStateRef.current;
       if (drag.isDragging && drag.originalStartDate && drag.originalEndDate) {
         const deltaX = e.clientX - drag.startMouseX;
-        const daysDelta = Math.round(deltaX / cellWidth);
+        const daysDelta = pixelsToDays(deltaX, cellWidth);
         if (daysDelta !== drag.daysDelta) {
-          const newStart = new Date(drag.originalStartDate);
-          newStart.setDate(newStart.getDate() + daysDelta);
-          const newEnd = new Date(drag.originalEndDate);
-          newEnd.setDate(newEnd.getDate() + daysDelta);
+          const { start: newStart, end: newEnd } = computeDragDates(
+            "move",
+            drag.originalStartDate,
+            drag.originalEndDate,
+            daysDelta,
+          );
           const updated: DragState = {
             ...drag,
             currentStartDate: newStart,
@@ -466,7 +559,7 @@ export function useTimelineDrag({
       const range = rangeStateRef.current;
       if (range.isSelecting && range.startDate) {
         const deltaX = e.clientX - range.startClientX;
-        const daysDelta = Math.round(deltaX / cellWidth);
+        const daysDelta = pixelsToDays(deltaX, cellWidth);
         const currentDate = new Date(range.startDate);
         currentDate.setDate(currentDate.getDate() + daysDelta);
 
@@ -550,6 +643,81 @@ export function useTimelineDrag({
     }
   }, []);
 
+  // ── Multi-select (right-click drag) ─────────────────────────────────────────
+
+  const onCanvasRightMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 2) return;
+    e.preventDefault();
+
+    const initial: MultiSelectState = {
+      isSelecting: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      selectedAllocationIds: [],
+      selectedResourceIds: [],
+      dateRange: null,
+      multiDragDaysDelta: 0,
+      isMultiDragging: false,
+      multiDragMode: "move",
+    };
+    multiSelectRef.current = initial;
+    setMultiSelectState(initial);
+
+    function handleMove(ev: MouseEvent) {
+      const ms = multiSelectRef.current;
+      if (!ms.isSelecting) return;
+
+      const updated: MultiSelectState = {
+        ...ms,
+        currentX: ev.clientX,
+        currentY: ev.clientY,
+      };
+      multiSelectRef.current = updated;
+      setMultiSelectState(updated);
+    }
+
+    function handleUp(ev: MouseEvent) {
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+
+      const ms = multiSelectRef.current;
+      if (!ms.isSelecting) return;
+
+      const distance = Math.hypot(ev.clientX - ms.startX, ev.clientY - ms.startY);
+
+      if (distance < 5) {
+        // Minimal movement → not a drag selection, reset.
+        // Let existing onContextMenu handlers on allocation blocks handle right-click.
+        multiSelectRef.current = INITIAL_MULTI_SELECT;
+        setMultiSelectState(INITIAL_MULTI_SELECT);
+        return;
+      }
+
+      // Keep the rectangle coordinates for the parent to compute intersection.
+      // isSelecting is set to false to indicate the drag is done, but the
+      // rectangle data (startX/Y, currentX/Y) is preserved so TimelineView
+      // can resolve which allocations/resources fall within the selection.
+      const finished: MultiSelectState = {
+        ...ms,
+        isSelecting: false,
+        currentX: ev.clientX,
+        currentY: ev.clientY,
+      };
+      multiSelectRef.current = finished;
+      setMultiSelectState(finished);
+    }
+
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+  }, []);
+
+  const clearMultiSelect = useCallback(() => {
+    multiSelectRef.current = INITIAL_MULTI_SELECT;
+    setMultiSelectState(INITIAL_MULTI_SELECT);
+  }, []);
+
   // ── Touch support ───────────────────────────────────────────────────────────
 
   // Helper: extract clientX from a touch event (first active touch, then changedTouches as fallback)
@@ -682,6 +850,8 @@ export function useTimelineDrag({
     dragState,
     allocDragState,
     rangeState,
+    multiSelectState,
+    setMultiSelectState,
     shiftPreview,
     isPreviewLoading,
     isApplying: applyShiftMutation.isPending,
@@ -693,6 +863,8 @@ export function useTimelineDrag({
     onCanvasMouseMove,
     onCanvasMouseUp,
     onCanvasMouseLeave,
+    onCanvasRightMouseDown,
+    clearMultiSelect,
     // Touch equivalents
     onProjectBarTouchStart,
     onAllocTouchStart,
diff --git a/apps/web/src/hooks/useTimelineLayout.tsx b/apps/web/src/hooks/useTimelineLayout.tsx
index 9de7ae2..7ad3d41 100644
--- a/apps/web/src/hooks/useTimelineLayout.tsx
+++ b/apps/web/src/hooks/useTimelineLayout.tsx
@@ -44,10 +44,10 @@ export function useTimelineLayout(
         key={i}
         className={clsx(
           "absolute top-0 bottom-0 border-r",
-          isToday ? "border-brand-300 border-r-2" :
-          isSaturday ? "border-amber-200 bg-amber-50/40" :
-          isSunday ? "border-gray-200 bg-gray-100/60" :
-          "border-gray-100",
+          isToday ? "border-brand-300 dark:border-brand-700 border-r-2" :
+          isSaturday ? "border-amber-200 dark:border-amber-800 bg-amber-50/40 dark:bg-amber-950/20" :
+          isSunday ? "border-gray-200 dark:border-gray-700 bg-gray-100/60 dark:bg-gray-800/40" :
+          "border-gray-100 dark:border-gray-800",
         )}
         style={{ left: i * CELL_WIDTH, width: CELL_WIDTH }}
       />
diff --git a/apps/web/src/hooks/useTimelineSSE.ts b/apps/web/src/hooks/useTimelineSSE.ts
index bc38693..9aff7e5 100644
--- a/apps/web/src/hooks/useTimelineSSE.ts
+++ b/apps/web/src/hooks/useTimelineSSE.ts
@@ -40,6 +40,21 @@ export function useTimelineSSE() {
               void queryClient.invalidateQueries({ queryKey: [["timeline", "getBudgetStatus"]] });
               break;
 
+            case SSE_EVENT_TYPES.TASK_ASSIGNED:
+            case SSE_EVENT_TYPES.TASK_COMPLETED:
+            case SSE_EVENT_TYPES.TASK_STATUS_CHANGED:
+              void queryClient.invalidateQueries({ queryKey: [["notification", "listTasks"]] });
+              void queryClient.invalidateQueries({ queryKey: [["notification", "taskCounts"]] });
+              void queryClient.invalidateQueries({ queryKey: [["notification", "unreadCount"]] });
+              void queryClient.invalidateQueries({ queryKey: [["notification", "list"]] });
+              break;
+
+            case SSE_EVENT_TYPES.REMINDER_DUE:
+              void queryClient.invalidateQueries({ queryKey: [["notification", "list"]] });
+              void queryClient.invalidateQueries({ queryKey: [["notification", "unreadCount"]] });
+              void queryClient.invalidateQueries({ queryKey: [["notification", "listReminders"]] });
+              break;
+
             case SSE_EVENT_TYPES.PING:
               reconnectAttempts = 0; // Reset on successful ping
               break;
diff --git a/apps/web/src/instrumentation.ts b/apps/web/src/instrumentation.ts
new file mode 100644
index 0000000..4df5ea8
--- /dev/null
+++ b/apps/web/src/instrumentation.ts
@@ -0,0 +1,12 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("../sentry.server.config");
+  }
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("../sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/apps/web/src/lib/csv-export.ts b/apps/web/src/lib/csv-export.ts
new file mode 100644
index 0000000..ca493e9
--- /dev/null
+++ b/apps/web/src/lib/csv-export.ts
@@ -0,0 +1,39 @@
+/**
+ * Generic CSV export utility.
+ * Generates a CSV string from an array of objects and triggers a download.
+ */
+
+function escapeCsvValue(value: unknown): string {
+  if (value == null) return "";
+  const str = String(value);
+  // Wrap in quotes if it contains comma, quote, or newline
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+interface CsvColumn<T> {
+  header: string;
+  accessor: (row: T) => unknown;
+}
+
+export function generateCsv<T>(rows: T[], columns: CsvColumn<T>[]): string {
+  const header = columns.map((c) => escapeCsvValue(c.header)).join(",");
+  const body = rows
+    .map((row) => columns.map((col) => escapeCsvValue(col.accessor(row))).join(","))
+    .join("\n");
+  return `${header}\n${body}`;
+}
+
+export function downloadCsv(csvContent: string, filename: string): void {
+  const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
diff --git a/apps/web/src/lib/excel.ts b/apps/web/src/lib/excel.ts
index 68a3f4f..ba1e044 100644
--- a/apps/web/src/lib/excel.ts
+++ b/apps/web/src/lib/excel.ts
@@ -1,37 +1,32 @@
-import * as XLSX from "xlsx";
+let _xlsx: typeof import("xlsx") | null = null;
+
+async function getXLSX() {
+  if (!_xlsx) {
+    _xlsx = await import("xlsx");
+  }
+  return _xlsx;
+}
 
 /**
  * Parse an Excel (.xlsx, .xls) or CSV file to an array of row objects.
  * Keys come from the first row (headers).
  */
-export function parseSpreadsheet(file: File): Promise<Record<string, string>[]> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const data = new Uint8Array(e.target!.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: "array" });
-        const sheetName = workbook.SheetNames[0];
-        if (!sheetName) {
-          resolve([]);
-          return;
-        }
-        const sheet = workbook.Sheets[sheetName];
-        if (!sheet) {
-          resolve([]);
-          return;
-        }
-        const rows = XLSX.utils.sheet_to_json<Record<string, string>>(sheet, {
-          raw: false,
-          defval: "",
-        });
-        resolve(rows);
-      } catch (err) {
-        reject(err);
-      }
-    };
-    reader.onerror = () => reject(reader.error);
-    reader.readAsArrayBuffer(file);
+export async function parseSpreadsheet(file: File): Promise<Record<string, string>[]> {
+  const XLSX = await getXLSX();
+  const buffer = await file.arrayBuffer();
+  const data = new Uint8Array(buffer);
+  const workbook = XLSX.read(data, { type: "array" });
+  const sheetName = workbook.SheetNames[0];
+  if (!sheetName) {
+    return [];
+  }
+  const sheet = workbook.Sheets[sheetName];
+  if (!sheet) {
+    return [];
+  }
+  return XLSX.utils.sheet_to_json<Record<string, string>>(sheet, {
+    raw: false,
+    defval: "",
   });
 }
 
diff --git a/apps/web/src/lib/project-colors.ts b/apps/web/src/lib/project-colors.ts
new file mode 100644
index 0000000..5a78d97
--- /dev/null
+++ b/apps/web/src/lib/project-colors.ts
@@ -0,0 +1,58 @@
+/**
+ * Deterministic project color assignment.
+ * Maps a project ID to one of 16 visually distinct colors.
+ * Colors are chosen for readability on both light and dark backgrounds.
+ */
+
+const PROJECT_PALETTE = [
+  { bg: "bg-sky-500/70",      dark: "bg-sky-400/60",      border: "border-sky-600",      hex: "#0ea5e9" },
+  { bg: "bg-violet-500/70",   dark: "bg-violet-400/60",   border: "border-violet-600",   hex: "#8b5cf6" },
+  { bg: "bg-amber-500/70",    dark: "bg-amber-400/60",    border: "border-amber-600",    hex: "#f59e0b" },
+  { bg: "bg-rose-500/70",     dark: "bg-rose-400/60",     border: "border-rose-600",     hex: "#f43f5e" },
+  { bg: "bg-emerald-500/70",  dark: "bg-emerald-400/60",  border: "border-emerald-600",  hex: "#10b981" },
+  { bg: "bg-indigo-500/70",   dark: "bg-indigo-400/60",   border: "border-indigo-600",   hex: "#6366f1" },
+  { bg: "bg-orange-500/70",   dark: "bg-orange-400/60",   border: "border-orange-600",   hex: "#f97316" },
+  { bg: "bg-teal-500/70",     dark: "bg-teal-400/60",     border: "border-teal-600",     hex: "#14b8a6" },
+  { bg: "bg-pink-500/70",     dark: "bg-pink-400/60",     border: "border-pink-600",     hex: "#ec4899" },
+  { bg: "bg-cyan-500/70",     dark: "bg-cyan-400/60",     border: "border-cyan-600",     hex: "#06b6d4" },
+  { bg: "bg-lime-500/70",     dark: "bg-lime-400/60",     border: "border-lime-600",     hex: "#84cc16" },
+  { bg: "bg-fuchsia-500/70",  dark: "bg-fuchsia-400/60",  border: "border-fuchsia-600",  hex: "#d946ef" },
+  { bg: "bg-yellow-500/70",   dark: "bg-yellow-400/60",   border: "border-yellow-600",   hex: "#eab308" },
+  { bg: "bg-red-500/70",      dark: "bg-red-400/60",      border: "border-red-600",      hex: "#ef4444" },
+  { bg: "bg-blue-500/70",     dark: "bg-blue-400/60",     border: "border-blue-600",     hex: "#3b82f6" },
+  { bg: "bg-green-500/70",    dark: "bg-green-400/60",    border: "border-green-600",    hex: "#22c55e" },
+] as const;
+
+export type ProjectColor = (typeof PROJECT_PALETTE)[number];
+
+/**
+ * Returns a deterministic color for a project ID using a simple hash.
+ * Same project ID always gets the same color.
+ */
+export function getProjectColor(projectId: string): ProjectColor {
+  let hash = 0;
+  for (let i = 0; i < projectId.length; i++) {
+    hash = ((hash << 5) - hash + projectId.charCodeAt(i)) | 0;
+  }
+  return PROJECT_PALETTE[Math.abs(hash) % PROJECT_PALETTE.length]!;
+}
+
+/**
+ * Returns the hex color with an alpha suffix for inline styles.
+ * Useful when the block uses inline `backgroundColor` instead of Tailwind classes.
+ */
+export function getProjectHex(projectId: string, alpha = "B3"): string {
+  return getProjectColor(projectId).hex + alpha;
+}
+
+/**
+ * Build a lookup map for a set of project IDs.
+ * Call once per render with visible project IDs.
+ */
+export function buildProjectColorMap(projectIds: string[]): Map<string, ProjectColor> {
+  const map = new Map<string, ProjectColor>();
+  for (const id of projectIds) {
+    map.set(id, getProjectColor(id));
+  }
+  return map;
+}
diff --git a/apps/web/src/lib/skillMatrixParser.ts b/apps/web/src/lib/skillMatrixParser.ts
index 478bb00..fe44e3f 100644
--- a/apps/web/src/lib/skillMatrixParser.ts
+++ b/apps/web/src/lib/skillMatrixParser.ts
@@ -1,6 +1,14 @@
-import * as XLSX from "xlsx";
 import type { SkillEntry } from "@planarchy/shared";
 
+let _xlsx: typeof import("xlsx") | null = null;
+
+async function getXLSX() {
+  if (!_xlsx) {
+    _xlsx = await import("xlsx");
+  }
+  return _xlsx;
+}
+
 export interface ParsedEmployeeInfo {
   displayName?: string;
   areaOfExpertise?: string;
@@ -13,7 +21,7 @@ export interface ParsedSkillMatrix {
   skills: SkillEntry[];
 }
 
-// Maps Excel proficiency (1-4) → Planarchy proficiency (2-5)
+// Maps Excel proficiency (1-4) → plANARCHY proficiency (2-5)
 function mapProficiency(raw: string): 1 | 2 | 3 | 4 | 5 | null {
   const n = parseInt(raw, 10);
   if (isNaN(n) || n === 0) return null;
@@ -82,7 +90,8 @@ function parseSkillSheet(rows: Record<string, string>[], mainSkillSet: Set<strin
  * Parse a skill matrix workbook (xlsx ArrayBuffer) into structured data.
  * Returns ParsedSkillMatrix with employeeInfo and merged skills array.
  */
-export function parseSkillMatrixWorkbook(data: ArrayBuffer): ParsedSkillMatrix {
+export async function parseSkillMatrixWorkbook(data: ArrayBuffer): Promise<ParsedSkillMatrix> {
+  const XLSX = await getXLSX();
   const workbook = XLSX.read(new Uint8Array(data), { type: "array" });
 
   const employeeSheet = workbook.Sheets["Employee Information"];
diff --git a/apps/web/src/lib/status-styles.ts b/apps/web/src/lib/status-styles.ts
index e8dff18..48ef64d 100644
--- a/apps/web/src/lib/status-styles.ts
+++ b/apps/web/src/lib/status-styles.ts
@@ -46,3 +46,33 @@ export const ORDER_TYPE_BADGE: Record<string, string> = {
   INTERNAL: "bg-blue-100 text-blue-700",
   OVERHEAD: "bg-gray-100 text-gray-700",
 };
+
+/** Vacation overlay colors for timeline bars */
+export const VACATION_TIMELINE_COLORS: Record<string, string> = {
+  ANNUAL: "bg-orange-400/40",
+  SICK: "bg-red-500/40",
+  PUBLIC_HOLIDAY: "bg-violet-400/40",
+  OTHER: "bg-amber-400/40",
+};
+
+export const VACATION_TIMELINE_BORDER: Record<string, string> = {
+  ANNUAL: "border-orange-500",
+  SICK: "border-red-600",
+  PUBLIC_HOLIDAY: "border-violet-500",
+  OTHER: "border-amber-500",
+};
+
+export const VACATION_TYPE_LABELS_SHORT: Record<string, string> = {
+  ANNUAL: "Annual",
+  SICK: "Sick",
+  PUBLIC_HOLIDAY: "Holiday",
+  OTHER: "Other",
+};
+
+/** Vacation calendar dot/bar colors */
+export const VACATION_CALENDAR_COLORS: Record<string, string> = {
+  ANNUAL: "bg-brand-500",
+  SICK: "bg-red-400",
+  PUBLIC_HOLIDAY: "bg-emerald-500",
+  OTHER: "bg-purple-400",
+};
diff --git a/apps/web/src/lib/trpc/provider.tsx b/apps/web/src/lib/trpc/provider.tsx
index 41ebe9f..7c4b340 100644
--- a/apps/web/src/lib/trpc/provider.tsx
+++ b/apps/web/src/lib/trpc/provider.tsx
@@ -27,7 +27,9 @@ export function TRPCProvider({ children }: { children: React.ReactNode }) {
       new QueryClient({
         defaultOptions: {
           queries: {
-            staleTime: 30 * 1000, // 30 seconds
+            staleTime: 60_000, // 60 seconds — reduces refetches on navigation
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
             retry: 1,
           },
         },
diff --git a/apps/web/src/server/auth.ts b/apps/web/src/server/auth.ts
index f77b404..d29c79b 100644
--- a/apps/web/src/server/auth.ts
+++ b/apps/web/src/server/auth.ts
@@ -28,6 +28,12 @@ const authConfig = {
         const isValid = await verify(user.passwordHash, password);
         if (!isValid) return null;
 
+        // Track last login time
+        await prisma.user.update({
+          where: { id: user.id },
+          data: { lastLoginAt: new Date() },
+        });
+
         return {
           id: user.id,
           email: user.email,
diff --git a/apps/web/src/server/trpc.ts b/apps/web/src/server/trpc.ts
index 6cdb72d..bb8d484 100644
--- a/apps/web/src/server/trpc.ts
+++ b/apps/web/src/server/trpc.ts
@@ -1,4 +1,4 @@
-import { createTRPCContext } from "@planarchy/api";
+import { createTRPCContext, loadRoleDefaults } from "@planarchy/api";
 import { appRouter } from "@planarchy/api/router";
 import { createCallerFactory } from "@planarchy/api/trpc";
 import { prisma } from "@planarchy/db";
@@ -18,7 +18,8 @@ export async function createCaller() {
       })
     : null;
 
-  const ctx = createTRPCContext({ session, dbUser });
+  const roleDefaults = await loadRoleDefaults();
+  const ctx = createTRPCContext({ session, dbUser, roleDefaults });
   const callerFactory = createCallerFactory(appRouter);
   return callerFactory(ctx);
 }
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
new file mode 100644
index 0000000..8e6a902
--- /dev/null
+++ b/docker-compose.prod.yml
@@ -0,0 +1,62 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_DB: planarchy
+      POSTGRES_USER: planarchy
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-changeme}
+    volumes:
+      - planarchy_prod_pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U planarchy"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+    shm_size: "256mb"
+
+  redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+    ports:
+      - "6379:6379"
+    command: redis-server --maxmemory 256mb --maxmemory-policy allkeys-lru
+    volumes:
+      - planarchy_prod_redis:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 5s
+
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile.prod
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env.production
+    environment:
+      DATABASE_URL: postgresql://planarchy:${POSTGRES_PASSWORD:-changeme}@postgres:5432/planarchy
+      REDIS_URL: redis://redis:6379
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 20s
+
+volumes:
+  planarchy_prod_pgdata:
+  planarchy_prod_redis:
diff --git a/docs/ci-cd-manual.md b/docs/ci-cd-manual.md
new file mode 100644
index 0000000..3a77958
--- /dev/null
+++ b/docs/ci-cd-manual.md
@@ -0,0 +1,316 @@
+# Planarchy CI/CD Manual
+
+## Overview
+
+Planarchy uses GitHub Actions for continuous integration and Docker for deployment. This document covers the full pipeline from code push to production.
+
+---
+
+## 1. CI Pipeline (Automatic on every PR)
+
+### What triggers it
+
+| Event | Trigger |
+|-------|---------|
+| Pull request to `main` | All CI jobs run |
+| Push to `main` | All CI jobs run |
+
+### Jobs and their purpose
+
+```
+PR opened / pushed
+    │
+    ├──→ typecheck    (tsc --noEmit, ~40s)
+    ├──→ lint         (ESLint via Turborepo, ~20s)
+    ├──→ test         (Vitest unit tests, ~60s, needs PostgreSQL + Redis)
+    │
+    └──→ build        (next build, ~90s, runs after typecheck)
+            │
+            └──→ e2e  (Playwright, ~3-5min, runs after build)
+```
+
+**typecheck, lint, and test run in parallel** for speed. Build waits for typecheck. E2E waits for build.
+
+### What each job checks
+
+| Job | Command | What it catches |
+|-----|---------|----------------|
+| **typecheck** | `pnpm --filter @planarchy/web exec tsc --noEmit` | Type errors across the full web app |
+| **lint** | `pnpm lint` | Code style violations, unused imports, etc. |
+| **test** | `pnpm test:unit` | Unit test failures in engine, staffing, API, shared |
+| **build** | `pnpm --filter @planarchy/web exec next build` | SSR errors, dynamic import issues, bundle problems |
+| **e2e** | `pnpm test:e2e` | End-to-end user flow regressions |
+
+### Required status checks
+
+Before merging a PR, **all 5 jobs must pass**. Configure this in GitHub Settings > Branches > Branch protection rules > Require status checks.
+
+### Caching
+
+The pipeline caches these artifacts to speed up subsequent runs:
+
+| Cache | Key | Saves |
+|-------|-----|-------|
+| pnpm store | `pnpm-lock.yaml` hash | ~30s install time |
+| Turborepo | `.turbo` directory | ~60s on unchanged packages |
+| Playwright browsers | Playwright version | ~45s browser download |
+
+---
+
+## 2. Local Development Quality Gates
+
+Run these before pushing to catch issues early:
+
+```bash
+# Quick check (< 2 min)
+pnpm --filter @planarchy/web exec tsc --noEmit && pnpm lint
+
+# Full check (< 3 min)
+pnpm test:unit
+
+# Full check including build (< 5 min)
+pnpm --filter @planarchy/web exec next build
+```
+
+### Pre-commit hook (optional)
+
+You can add a Git pre-commit hook to run the quick check automatically:
+
+```bash
+# .husky/pre-commit
+pnpm --filter @planarchy/web exec tsc --noEmit
+pnpm lint
+```
+
+---
+
+## 3. Health Check Endpoints
+
+Two endpoints are available for monitoring:
+
+### GET `/api/health` — Liveness Probe
+
+Returns 200 if the Node.js process is running. No external dependencies checked.
+
+```json
+{ "status": "ok", "timestamp": "2026-03-19T10:00:00.000Z" }
+```
+
+**Use for:** Kubernetes/Docker liveness probe, uptime monitoring.
+
+### GET `/api/ready` — Readiness Probe
+
+Checks PostgreSQL and Redis connectivity. Returns 200 if all services are reachable, 503 if not.
+
+```json
+// Healthy
+{ "status": "ready", "postgres": "ok", "redis": "ok" }
+
+// Unhealthy
+{ "status": "not_ready", "postgres": "ok", "redis": "error" }
+```
+
+**Use for:** Kubernetes/Docker readiness probe, load balancer health checks, nginx upstream checks.
+
+---
+
+## 4. Production Docker Build
+
+### Building the production image
+
+```bash
+# Build the image
+docker build -f Dockerfile.prod -t planarchy:latest .
+
+# Test it locally
+docker compose -f docker-compose.prod.yml up -d
+```
+
+### Image details
+
+| Property | Value |
+|----------|-------|
+| Base | `node:20-bookworm-slim` |
+| Size | ~150-200 MB (vs ~1.5 GB dev image) |
+| Output | Next.js standalone mode |
+| Healthcheck | `curl -f http://localhost:3000/api/health` |
+| Port | 3000 (internal), mapped to 3100 externally |
+
+### Environment variables
+
+The production image requires these environment variables:
+
+```env
+# Required
+DATABASE_URL=postgresql://user:pass@host:5432/planarchy
+REDIS_URL=redis://host:6379
+NEXTAUTH_URL=https://planarchy.your-domain.com
+NEXTAUTH_SECRET=<random-32-char-string>
+
+# Optional
+SENTRY_DSN=https://xxx@sentry.io/xxx
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_USER=notifications@example.com
+SMTP_PASSWORD=<password>
+SMTP_FROM=Planarchy <notifications@example.com>
+```
+
+Generate a secure `NEXTAUTH_SECRET`:
+
+```bash
+openssl rand -base64 32
+```
+
+---
+
+## 5. Deployment
+
+### docker-compose (simplest)
+
+```bash
+# On your server
+git pull
+docker compose -f docker-compose.prod.yml up -d --build
+
+# Run database migrations
+docker compose -f docker-compose.prod.yml exec app \
+  npx prisma db push --skip-generate
+
+# Seed initial data (first deployment only)
+docker compose -f docker-compose.prod.yml exec app \
+  npx prisma db seed
+```
+
+### Manual deployment (current setup)
+
+Since `planarchy.hartmut-noerenberg.com` runs behind nginx:
+
+```bash
+# On the server
+cd /home/hartmut/Documents/Copilot/planarchy
+git pull origin main
+pnpm install
+pnpm --filter @planarchy/db exec prisma generate
+pnpm --filter @planarchy/web exec next build
+rm -rf apps/web/.next/cache  # clear stale cache
+
+# Restart the app (systemd, pm2, or manual)
+fuser -k 3100/tcp 2>/dev/null
+PORT=3100 pnpm --filter @planarchy/web start &
+```
+
+### nginx configuration
+
+The existing nginx reverse proxy should forward to port 3100:
+
+```nginx
+server {
+    server_name planarchy.hartmut-noerenberg.com;
+
+    location / {
+        proxy_pass http://127.0.0.1:3100;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # SSE support (keep connection open)
+        proxy_read_timeout 86400s;
+        proxy_buffering off;
+    }
+}
+```
+
+---
+
+## 6. Monitoring Setup
+
+### Sentry (error tracking)
+
+After creating a Sentry project, add the DSN to `.env.production`:
+
+```env
+SENTRY_DSN=https://xxx@sentry.io/xxx
+```
+
+Errors are automatically captured by the Sentry integration in Next.js.
+
+### Uptime monitoring
+
+Point an external monitor (UptimeRobot, Better Stack, etc.) at:
+
+```
+https://planarchy.hartmut-noerenberg.com/api/health
+```
+
+Alert if status code != 200 for more than 2 consecutive checks.
+
+---
+
+## 7. Troubleshooting
+
+### CI job fails: "tsc --noEmit"
+
+TypeScript error in the web app. Run locally:
+```bash
+pnpm --filter @planarchy/web exec tsc --noEmit
+```
+
+### CI job fails: "test:unit"
+
+Unit test failure. Run locally:
+```bash
+pnpm test:unit
+```
+
+### CI job fails: "next build"
+
+Build error (often `ssr: false` in Server Components, missing exports). Run locally:
+```bash
+pnpm --filter @planarchy/web exec next build
+```
+
+### CI job fails: "e2e"
+
+Playwright test failure. Check the HTML report artifact in the GitHub Actions run.
+
+### Production: 502 Bad Gateway
+
+The Next.js process isn't running. Check:
+```bash
+ss -tlnp | grep 3100  # Is anything listening?
+tail -50 /tmp/planarchy-dev.log  # Check app logs
+```
+
+Restart:
+```bash
+fuser -k 3100/tcp 2>/dev/null
+pnpm dev &  # or pnpm start for production mode
+```
+
+### Production: 500 Internal Server Error
+
+Usually a stale Prisma client after schema changes:
+```bash
+pnpm --filter @planarchy/db exec prisma generate
+rm -rf apps/web/.next
+pnpm --filter @planarchy/web exec next build
+# Restart the server
+```
+
+### Database connection issues
+
+Check the `/api/ready` endpoint:
+```bash
+curl -s https://planarchy.hartmut-noerenberg.com/api/ready | jq .
+```
+
+If `postgres: "error"`, verify:
+```bash
+docker ps | grep postgres  # Is container running?
+psql -h localhost -p 5433 -U planarchy -d planarchy  # Can you connect?
+```
diff --git a/docs/performance-optimization-review-2026-03-18.md b/docs/performance-optimization-review-2026-03-18.md
new file mode 100644
index 0000000..8da9bd6
--- /dev/null
+++ b/docs/performance-optimization-review-2026-03-18.md
@@ -0,0 +1,417 @@
+# Performance Optimization Review
+
+Date: 2026-03-18
+
+Scope: analysis only. No runtime behavior was changed in this pass.
+
+## Executive Summary
+
+The biggest performance costs in Planarchy currently come from three patterns:
+
+1. Broad data fetches followed by repeated in-memory filtering/grouping.
+2. Expensive client-side derivations on screens with large datasets, especially Timeline.
+3. Broad cache invalidation that forces heavy queries to refetch and recompute after small mutations.
+
+The highest-value optimization target is the Timeline stack. After that, the best wins are server-side aggregation for chargeability/dashboard workloads and narrowing resource/report queries to visible scope.
+
+## Main Hotspots
+
+### 1. Timeline
+
+Relevant files:
+
+- [TimelineContext.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/components/timeline/TimelineContext.tsx)
+- [TimelineView.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/components/timeline/TimelineView.tsx)
+- [TimelineResourcePanel.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/components/timeline/TimelineResourcePanel.tsx)
+- [TimelineProjectPanel.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/components/timeline/TimelineProjectPanel.tsx)
+- [timeline.ts](/home/hartmut/Documents/Copilot/planarchy/packages/api/src/router/timeline.ts)
+
+Observed issues:
+
+- `TimelineContext` derives multiple large collections in the client from the same raw payload.
+- Resource and project filtering is partly pushed to the backend, but large read-model payloads are still constructed and further filtered/grouped in the browser.
+- Timeline mutations invalidate multiple heavy queries at once.
+- Timeline SSE events also trigger broad invalidations.
+
+Impact:
+
+- Slow initial render.
+- Lag on interaction and hover.
+- Slow recovery after edits because the full timeline dataset is often fetched again.
+
+### 2. Chargeability Report
+
+Relevant files:
+
+- [ChargeabilityReportClient.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/components/reports/ChargeabilityReportClient.tsx)
+- [chargeability-report.ts](/home/hartmut/Documents/Copilot/planarchy/packages/api/src/router/chargeability-report.ts)
+
+Observed issues:
+
+- The server loads matching resources, then all bookings in range, then repeatedly filters bookings and vacations per resource and per month.
+- The client renders a wide report grid and still performs filtering/grouping locally.
+- Public holiday support is still marked as TODO in the route, so future correctness work will likely add more cost unless the data model is optimized first.
+
+Impact:
+
+- CPU-heavy report generation.
+- Larger-than-needed payloads.
+- Increased render cost on wide month ranges.
+
+### 3. Dashboard Chargeability / Analytics Widgets
+
+Relevant files:
+
+- [dashboard.ts](/home/hartmut/Documents/Copilot/planarchy/packages/api/src/router/dashboard.ts)
+- [get-chargeability-overview.ts](/home/hartmut/Documents/Copilot/planarchy/packages/application/src/use-cases/dashboard/get-chargeability-overview.ts)
+- [get-overview.ts](/home/hartmut/Documents/Copilot/planarchy/packages/application/src/use-cases/dashboard/get-overview.ts)
+
+Observed issues:
+
+- `getDashboardChargeabilityOverview()` fetches all relevant resources and all bookings for the month, then filters the full booking set again for each resource.
+- Similar patterns exist in dashboard summary use cases where relatively small widgets are backed by broad read logic.
+
+Impact:
+
+- Avoidable server CPU and latency.
+- Widgets become more expensive as the database grows even if the UI remains small.
+
+### 4. Resources Screen
+
+Relevant files:
+
+- [ResourcesClient.tsx](/home/hartmut/Documents/Copilot/planarchy/apps/web/src/app/(app)/resources/ResourcesClient.tsx)
+- [resource.ts](/home/hartmut/Documents/Copilot/planarchy/packages/api/src/router/resource.ts)
+
+Observed issues:
+
+- Infinite scrolling is in place, which is good, but the screen still does substantial client-side sort/filter/order work.
+- Separate global stats queries can be expensive when only the currently visible rows need enriched values.
+- Large dropdown/filter datasets are fully loaded to support selection UIs.
+
+Impact:
+
+- Good enough at small scale, but it will degrade with larger teams and imported planning data.
+
+### 5. Shared Booking Read Model
+
+Relevant files:
+
+- [list-assignment-bookings.ts](/home/hartmut/Documents/Copilot/planarchy/packages/application/src/use-cases/allocation/list-assignment-bookings.ts)
+
+Observed issues:
+
+- This is a clean shared entry point, but it returns broad booking rows and leaves most grouping/aggregation to callers.
+- Several heavy endpoints call this and then repeatedly scan the returned array.
+
+Impact:
+
+- Logic is easy to reuse, but performance scales poorly because each consumer re-aggregates independently.
+
+## Current Database Index Baseline
+
+Relevant schema:
+
+- [schema.prisma](/home/hartmut/Documents/Copilot/planarchy/packages/db/prisma/schema.prisma)
+
+Good coverage already exists for:
+
+- `Assignment`: `resourceId`, `projectId`, `status`, date ranges, and composite indices.
+- `DemandRequirement`: `projectId`, `status`, date ranges.
+- `Vacation`: `resourceId`, `status`, date ranges.
+- `Resource`: `chapter`, `isActive`, `countryId`, `orgUnitId`, `resourceType`.
+- `Project`: `status`, date range, `orderType`, `clientId`.
+
+Likely gaps for current query patterns:
+
+- `Resource` filters used together in analytics screens: `isActive`, `chgResponsibility`, `departed`, `rolledOff`, `countryId`, `managementLevelGroupId`.
+- `Project` filters used in timeline/report contexts: `clientId` combined with active date windows.
+- Potential overlap-heavy access paths where PostgreSQL may benefit more from specialized query shapes or materialized read models than from adding more conventional B-tree indexes.
+
+Conclusion:
+
+The schema is not unindexed. The main issue is query shape and repeated in-memory work, not just missing indexes. Index work should support query redesign, not replace it.
+
+## Recommended Optimizations
+
+### A. Move Timeline Derivations Closer to the Backend
+
+Proposal:
+
+- Add a timeline read endpoint that returns data already grouped for the active view mode and active filters.
+- Return normalized maps and compact slices instead of large repeated nested objects.
+- Keep the raw endpoint only if another screen truly needs it.
+
+Pros:
+
+- Largest likely user-visible win.
+- Reduces browser CPU, garbage collection, and hover lag.
+- Shrinks payload size if redundant nested fields are removed.
+
+Cons:
+
+- More backend read-model code.
+- Slightly higher coupling between API shape and timeline UI needs.
+- Requires careful migration to avoid breaking existing interactions.
+
+Recommended priority: P0
+
+Estimated effort: medium to large
+
+### B. Build Indexed Maps Once Instead of Repeated Array Scans
+
+Proposal:
+
+- In timeline/report/dashboard code, replace repeated `.filter()`, `.find()`, and `.some()` passes with prebuilt maps keyed by `resourceId`, `projectId`, `monthKey`, and status where appropriate.
+- Standardize this as shared helper utilities for read-model construction.
+
+Pros:
+
+- Low-risk improvement.
+- Can be introduced incrementally.
+- Helps both client and server hot paths.
+
+Cons:
+
+- Does not solve oversized payloads by itself.
+- Adds some code complexity if done ad hoc instead of through shared helpers.
+
+Recommended priority: P0
+
+Estimated effort: small to medium
+
+### C. Replace Broad Invalidations with Scoped Cache Updates
+
+Proposal:
+
+- Audit timeline mutations and SSE handlers that currently invalidate `getEntries`, `getEntriesView`, `getProjectContext`, and `getBudgetStatus` together.
+- Invalidate only the affected query keys.
+- Where practical, patch query cache locally after small edits instead of refetching everything.
+
+Pros:
+
+- Faster feedback after drag/drop and edit flows.
+- Less network churn.
+- Lower server load during active planning sessions.
+
+Cons:
+
+- Cache correctness becomes more complex.
+- Needs strong regression coverage around drag/drop and split allocation flows.
+
+Recommended priority: P0
+
+Estimated effort: medium
+
+### D. Push Chargeability Aggregation into Dedicated Server Read Models
+
+Proposal:
+
+- Replace repeated per-resource filtering of a flat booking array with server-side grouped structures.
+- Precompute `bookingsByResource` and `vacationsByResource` once before month iteration.
+- Consider a dedicated monthly chargeability read model for reports and dashboard widgets.
+
+Pros:
+
+- Strong improvement for reports and widgets.
+- Eliminates duplicate aggregation logic across dashboard/resource/report endpoints.
+- Better foundation for public holiday integration.
+
+Cons:
+
+- Requires consolidating overlapping business logic.
+- Read-model duplication is possible if not designed carefully.
+
+Recommended priority: P1
+
+Estimated effort: medium
+
+### E. Narrow Data Fetches to Visible Scope
+
+Proposal:
+
+- Avoid loading large supporting datasets such as `resource.list({ limit: 500 })` or “all projects” queries when only label resolution for selected IDs is required.
+- Add lightweight lookup endpoints like `getByIds()` or `resolveLabels()`.
+- On the resources page, fetch chargeability/stat enrichments only for the visible page or current filtered result slice.
+
+Pros:
+
+- Smaller payloads.
+- Faster filter bar and screen startup.
+- Simple, targeted changes.
+
+Cons:
+
+- More API endpoints or variants.
+- Some UI components become slightly more stateful.
+
+Recommended priority: P1
+
+Estimated effort: small to medium
+
+### F. Add Read-Optimized Analytics Endpoints or Materialized Views
+
+Proposal:
+
+- For expensive monthly analytics, introduce a read-optimized table or materialized view refreshed on schedule or after import batches.
+- Use this for dashboard and chargeability summaries, not for transactional edit screens.
+
+Pros:
+
+- Best long-term scalability for imported dispo-scale data.
+- Predictable response times for reports.
+- Reduces repeated heavy joins and calculations.
+
+Cons:
+
+- More infrastructure and refresh logic.
+- Risk of stale analytics if refresh semantics are unclear.
+- Higher implementation complexity than direct query improvements.
+
+Recommended priority: P2
+
+Estimated effort: large
+
+### G. Add Composite Indexes Only Where Query Patterns Justify Them
+
+Proposal:
+
+- Review actual PostgreSQL query plans for:
+  - resource analytics filters
+  - timeline date-overlap filters
+  - project/client/date combinations
+- Add composite indexes only after measuring the slow plans.
+
+Pros:
+
+- Cheap improvement when aligned to real plans.
+- Complements query redesign.
+
+Cons:
+
+- Limited value if broad in-memory processing remains.
+- Too many indexes can slow writes/imports.
+
+Recommended priority: P1
+
+Estimated effort: small
+
+Suggested candidates to measure first:
+
+- `Resource(isActive, departed, rolledOff, chgResponsibility, countryId)`
+- `Resource(isActive, managementLevelGroupId, countryId)`
+- `Project(clientId, status, startDate, endDate)`
+
+### H. Consider Row Virtualization for Heavy Tables
+
+Proposal:
+
+- Add virtualization for very large row-based screens if profiling confirms DOM/render cost remains high after data/query optimizations.
+- Candidate screens: resources table, chargeability report table, timeline side panels.
+
+Pros:
+
+- Strong render win when many rows are mounted.
+- Independent of backend changes.
+
+Cons:
+
+- More UI complexity.
+- Can complicate drag/drop, sticky headers, and keyboard navigation.
+- Should not be the first fix for timeline if the main problem is data churn.
+
+Recommended priority: P2
+
+Estimated effort: medium
+
+## Priority Order
+
+### Phase 1
+
+- A. Move timeline derivations closer to the backend.
+- B. Replace repeated array scans with indexed maps.
+- C. Scope cache invalidation for timeline mutations and SSE.
+
+Expected result:
+
+- Best chance of making timeline interaction materially faster without removing functionality.
+
+### Phase 2
+
+- D. Server-side chargeability read models.
+- E. Narrow data fetches to visible scope.
+- G. Add measured composite indexes.
+
+Expected result:
+
+- Faster reports, dashboard widgets, and filter-heavy screens.
+
+### Phase 3
+
+- F. Materialized analytics/read models.
+- H. Virtualization where profiling still shows render bottlenecks.
+
+Expected result:
+
+- Better scalability once data volume grows further.
+
+## Suggested Measurement Plan
+
+Before implementation:
+
+- Capture browser performance traces for:
+  - timeline initial load
+  - timeline hover/selection
+  - timeline mutation save path
+  - chargeability report load
+  - resources page load and scroll
+- Capture server timings for:
+  - `timeline.getEntriesView`
+  - `chargeabilityReport.getReport`
+  - `dashboard.getChargeabilityOverview`
+  - `resource.getChargeabilityStats`
+- Record PostgreSQL query plans for the slowest endpoints.
+
+During implementation:
+
+- Compare payload sizes before and after endpoint changes.
+- Track React commit duration on Timeline and Resources screens.
+- Measure query invalidation counts after common edits.
+
+Success criteria:
+
+- Timeline hover and selection feel immediate under imported dispo-scale data.
+- Timeline mutation flows no longer trigger full-screen refetch storms.
+- Chargeability report load time drops materially for multi-month ranges.
+- Dashboard widgets stop scanning large booking arrays per resource.
+
+## No-Regression Guidance
+
+Do not trade away any of the following:
+
+- Existing planning semantics for assignments, proposed work, and demand visibility.
+- Timeline drag/drop correctness.
+- Tooltip, right-click, and selection behavior.
+- Anonymization behavior.
+- Filter parity between resources, timeline, and reports.
+
+Recommended safeguards:
+
+- Add endpoint-level benchmarks for the heavy routes.
+- Add UI regression checks around timeline interaction paths.
+- Roll out timeline changes behind a temporary feature flag if the payload shape changes significantly.
+- Compare old and new aggregation outputs on the same imported dataset before removing legacy paths.
+
+## Suggested Ticket Breakdown
+
+1. Profile and baseline the four slowest endpoints plus timeline render path.
+2. Refactor timeline read model to return pre-grouped data for current filters/view.
+3. Replace timeline broad invalidations with scoped invalidation and selective cache patching.
+4. Refactor chargeability report aggregation into grouped server-side structures.
+5. Narrow lookup/filter support queries to selected IDs or visible pages.
+6. Review PostgreSQL query plans and add only measured composite indexes.
+7. Re-profile and decide whether virtualization or materialized analytics are still needed.
+
+## Bottom Line
+
+This codebase can be made substantially faster without removing functionality. The main gains will not come from cosmetic micro-optimizations. They will come from changing where data is shaped, reducing repeated scans, and stopping broad cache churn on heavy views.
diff --git a/package.json b/package.json
index 178c49e..cd62e49 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,8 @@
     "node": ">=20.0.0",
     "pnpm": ">=9.0.0"
   },
-  "packageManager": "pnpm@9.14.2"
+  "packageManager": "pnpm@9.14.2",
+  "dependencies": {
+    "framer-motion": "^12.38.0"
+  }
 }
diff --git a/packages/api/package.json b/packages/api/package.json
index be86ac1..5275225 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -7,7 +7,9 @@
     ".": "./src/index.ts",
     "./router": "./src/router/index.ts",
     "./trpc": "./src/trpc.ts",
-    "./sse": "./src/sse/event-bus.ts"
+    "./sse": "./src/sse/event-bus.ts",
+    "./lib/reminder-scheduler": "./src/lib/reminder-scheduler.ts",
+    "./lib/logger": "./src/lib/logger.ts"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -25,6 +27,7 @@
     "ioredis": "^5.10.0",
     "nodemailer": "^8.0.1",
     "openai": "^6.27.0",
+    "pino": "^10.3.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/packages/api/src/__tests__/allocation-router.test.ts b/packages/api/src/__tests__/allocation-router.test.ts
index 01ae4ff..1724811 100644
--- a/packages/api/src/__tests__/allocation-router.test.ts
+++ b/packages/api/src/__tests__/allocation-router.test.ts
@@ -10,6 +10,14 @@ vi.mock("../sse/event-bus.js", () => ({
   emitAllocationUpdated: vi.fn(),
 }));
 
+vi.mock("../lib/budget-alerts.js", () => ({
+  checkBudgetThresholds: vi.fn(),
+}));
+
+vi.mock("../lib/cache.js", () => ({
+  invalidateDashboardCache: vi.fn(),
+}));
+
 const createCaller = createCallerFactory(allocationRouter);
 
 function createManagerCaller(db: Record<string, unknown>) {
diff --git a/packages/api/src/__tests__/dashboard-router.test.ts b/packages/api/src/__tests__/dashboard-router.test.ts
new file mode 100644
index 0000000..a59522a
--- /dev/null
+++ b/packages/api/src/__tests__/dashboard-router.test.ts
@@ -0,0 +1,305 @@
+import { SystemRole } from "@planarchy/shared";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@planarchy/application", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@planarchy/application")>();
+  return {
+    ...actual,
+    getDashboardOverview: vi.fn(),
+    getDashboardPeakTimes: vi.fn(),
+    getDashboardDemand: vi.fn(),
+    getDashboardTopValueResources: vi.fn(),
+    getDashboardChargeabilityOverview: vi.fn(),
+  };
+});
+
+vi.mock("../lib/cache.js", () => ({
+  cacheGet: vi.fn().mockResolvedValue(null),
+  cacheSet: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../lib/anonymization.js", () => ({
+  anonymizeResources: vi.fn((resources: unknown[]) => resources),
+  getAnonymizationDirectory: vi.fn().mockResolvedValue(null),
+}));
+
+import {
+  getDashboardOverview,
+  getDashboardPeakTimes,
+  getDashboardDemand,
+  getDashboardTopValueResources,
+  getDashboardChargeabilityOverview,
+} from "@planarchy/application";
+import { dashboardRouter } from "../router/dashboard.js";
+import { createCallerFactory } from "../trpc.js";
+
+const createCaller = createCallerFactory(dashboardRouter);
+
+function createProtectedCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "user@example.com", name: "User", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "user_1",
+      systemRole: SystemRole.USER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createControllerCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "controller@example.com", name: "Controller", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "user_2",
+      systemRole: SystemRole.CONTROLLER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createUnauthenticatedCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: null,
+    db: db as never,
+    dbUser: null,
+  });
+}
+
+describe("dashboard router", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── getOverview ──────────────────────────────────────────────────────────
+
+  describe("getOverview", () => {
+    it("returns expected shape with resource and project counts", async () => {
+      const overview = {
+        totalResources: 42,
+        activeResources: 38,
+        totalProjects: 15,
+        activeProjects: 10,
+        draftProjects: 3,
+        completedProjects: 2,
+        totalBudgetCents: 5_000_000_00,
+        avgWinProbability: 78,
+      };
+
+      vi.mocked(getDashboardOverview).mockResolvedValue(overview);
+
+      const caller = createProtectedCaller({});
+      const result = await caller.getOverview();
+
+      expect(result).toMatchObject({
+        totalResources: 42,
+        activeResources: 38,
+        totalProjects: 15,
+        activeProjects: 10,
+      });
+      expect(getDashboardOverview).toHaveBeenCalledTimes(1);
+    });
+
+    it("rejects unauthenticated users", async () => {
+      const caller = createUnauthenticatedCaller({});
+      await expect(caller.getOverview()).rejects.toThrow("Authentication required");
+    });
+  });
+
+  // ─── getPeakTimes ─────────────────────────────────────────────────────────
+
+  describe("getPeakTimes", () => {
+    it("returns array of time periods", async () => {
+      const peakData = [
+        { period: "2026-03", totalHours: 1200, entries: 15 },
+        { period: "2026-04", totalHours: 1400, entries: 18 },
+      ];
+
+      vi.mocked(getDashboardPeakTimes).mockResolvedValue(peakData);
+
+      const caller = createProtectedCaller({});
+      const result = await caller.getPeakTimes({
+        startDate: "2026-03-01T00:00:00.000Z",
+        endDate: "2026-06-30T00:00:00.000Z",
+        granularity: "month",
+        groupBy: "project",
+      });
+
+      expect(result).toHaveLength(2);
+      expect(result[0]).toHaveProperty("period", "2026-03");
+      expect(getDashboardPeakTimes).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          granularity: "month",
+          groupBy: "project",
+        }),
+      );
+    });
+
+    it("passes week granularity to application layer", async () => {
+      vi.mocked(getDashboardPeakTimes).mockResolvedValue([]);
+
+      const caller = createProtectedCaller({});
+      await caller.getPeakTimes({
+        startDate: "2026-03-01T00:00:00.000Z",
+        endDate: "2026-03-31T00:00:00.000Z",
+        granularity: "week",
+        groupBy: "chapter",
+      });
+
+      expect(getDashboardPeakTimes).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          granularity: "week",
+          groupBy: "chapter",
+        }),
+      );
+    });
+  });
+
+  // ─── getDemand ────────────────────────────────────────────────────────────
+
+  describe("getDemand", () => {
+    it("returns demand entries grouped by project", async () => {
+      const demandData = [
+        { groupKey: "Project Alpha", totalHours: 500, headcount: 3 },
+        { groupKey: "Project Beta", totalHours: 300, headcount: 2 },
+      ];
+
+      vi.mocked(getDashboardDemand).mockResolvedValue(demandData);
+
+      const caller = createProtectedCaller({});
+      const result = await caller.getDemand({
+        startDate: "2026-01-01T00:00:00.000Z",
+        endDate: "2026-12-31T00:00:00.000Z",
+        groupBy: "project",
+      });
+
+      expect(result).toHaveLength(2);
+      expect(getDashboardDemand).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ groupBy: "project" }),
+      );
+    });
+
+    it("supports grouping by chapter", async () => {
+      vi.mocked(getDashboardDemand).mockResolvedValue([]);
+
+      const caller = createProtectedCaller({});
+      await caller.getDemand({
+        startDate: "2026-06-01T00:00:00.000Z",
+        endDate: "2026-06-30T00:00:00.000Z",
+        groupBy: "chapter",
+      });
+
+      expect(getDashboardDemand).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ groupBy: "chapter" }),
+      );
+    });
+  });
+
+  // ─── getTopValueResources ─────────────────────────────────────────────────
+
+  describe("getTopValueResources", () => {
+    it("returns sorted resources with default limit", async () => {
+      const resources = [
+        { id: "res_1", displayName: "Alice", valueScore: 95 },
+        { id: "res_2", displayName: "Bob", valueScore: 88 },
+      ];
+
+      vi.mocked(getDashboardTopValueResources).mockResolvedValue(resources);
+
+      const caller = createProtectedCaller({});
+      const result = await caller.getTopValueResources({ limit: 10 });
+
+      expect(result).toHaveLength(2);
+      expect(getDashboardTopValueResources).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ limit: 10 }),
+      );
+    });
+
+    it("respects custom limit", async () => {
+      vi.mocked(getDashboardTopValueResources).mockResolvedValue([]);
+
+      const caller = createProtectedCaller({});
+      await caller.getTopValueResources({ limit: 5 });
+
+      expect(getDashboardTopValueResources).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ limit: 5 }),
+      );
+    });
+  });
+
+  // ─── getChargeabilityOverview ─────────────────────────────────────────────
+
+  describe("getChargeabilityOverview", () => {
+    it("returns chargeability data with top and watchlist arrays", async () => {
+      const overview = {
+        avgChargeability: 72,
+        top: [{ id: "res_1", displayName: "Alice", chargeability: 95 }],
+        watchlist: [{ id: "res_3", displayName: "Carol", chargeability: 30 }],
+      };
+
+      vi.mocked(getDashboardChargeabilityOverview).mockResolvedValue(overview);
+
+      const caller = createControllerCaller({});
+      const result = await caller.getChargeabilityOverview({
+        includeProposed: false,
+        topN: 10,
+        watchlistThreshold: 15,
+      });
+
+      expect(result).toHaveProperty("top");
+      expect(result).toHaveProperty("watchlist");
+      expect(result.top).toHaveLength(1);
+      expect(result.watchlist).toHaveLength(1);
+    });
+
+    it("passes includeProposed flag to application layer", async () => {
+      vi.mocked(getDashboardChargeabilityOverview).mockResolvedValue({
+        avgChargeability: 60,
+        top: [],
+        watchlist: [],
+      });
+
+      const caller = createControllerCaller({});
+      await caller.getChargeabilityOverview({
+        includeProposed: true,
+        topN: 5,
+        watchlistThreshold: 20,
+      });
+
+      expect(getDashboardChargeabilityOverview).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          includeProposed: true,
+          topN: 5,
+          watchlistThreshold: 20,
+        }),
+      );
+    });
+
+    it("requires controller role — blocks USER", async () => {
+      const caller = createProtectedCaller({});
+      await expect(
+        caller.getChargeabilityOverview({
+          includeProposed: false,
+          topN: 10,
+          watchlistThreshold: 15,
+        }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "FORBIDDEN" }),
+      );
+    });
+  });
+});
diff --git a/packages/api/src/__tests__/estimate-router.test.ts b/packages/api/src/__tests__/estimate-router.test.ts
index 6788efd..c11e41b 100644
--- a/packages/api/src/__tests__/estimate-router.test.ts
+++ b/packages/api/src/__tests__/estimate-router.test.ts
@@ -322,7 +322,11 @@ describe("estimate router", () => {
         estimate: {
           findUnique: vi
             .fn()
+            // 1st call: resolve effectiveProjectId (rate card auto-fill)
+            .mockResolvedValueOnce({ projectId: null })
+            // 2nd call: application layer initial fetch
             .mockResolvedValueOnce(baseEstimate)
+            // 3rd call: application layer post-update refetch
             .mockResolvedValueOnce(updated),
           update: updateEstimate,
         },
diff --git a/packages/api/src/__tests__/project-router.test.ts b/packages/api/src/__tests__/project-router.test.ts
new file mode 100644
index 0000000..cfdb0c2
--- /dev/null
+++ b/packages/api/src/__tests__/project-router.test.ts
@@ -0,0 +1,487 @@
+import { OrderType, AllocationType, ProjectStatus, SystemRole } from "@planarchy/shared";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { projectRouter } from "../router/project.js";
+import { createCallerFactory } from "../trpc.js";
+
+vi.mock("@planarchy/application", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@planarchy/application")>();
+  return {
+    ...actual,
+    countPlanningEntries: vi.fn().mockResolvedValue({ countsByProjectId: new Map() }),
+    listAssignmentBookings: vi.fn().mockResolvedValue([]),
+  };
+});
+
+vi.mock("../router/blueprint-validation.js", () => ({
+  assertBlueprintDynamicFields: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../router/project-planning-read-model.js", () => ({
+  loadProjectPlanningReadModel: vi.fn().mockResolvedValue({
+    readModel: { assignments: [], demands: [] },
+  }),
+}));
+
+vi.mock("../lib/cache.js", () => ({
+  invalidateDashboardCache: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../ai-client.js", () => ({
+  isDalleConfigured: vi.fn().mockReturnValue(false),
+  createDalleClient: vi.fn(),
+  parseAiError: vi.fn(),
+}));
+
+const createCaller = createCallerFactory(projectRouter);
+
+function createManagerCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "manager@example.com", name: "Manager", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "mgr_1",
+      systemRole: SystemRole.MANAGER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createAdminCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "admin@example.com", name: "Admin", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "admin_1",
+      systemRole: SystemRole.ADMIN,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createControllerCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "controller@example.com", name: "Controller", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "ctrl_1",
+      systemRole: SystemRole.CONTROLLER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createProtectedCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "user@example.com", name: "User", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "user_1",
+      systemRole: SystemRole.USER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+const sampleProject = {
+  id: "project_1",
+  shortCode: "PRJ-001",
+  name: "Test Project",
+  orderType: OrderType.CHARGEABLE,
+  allocationType: AllocationType.INT,
+  winProbability: 80,
+  budgetCents: 500_000_00,
+  startDate: new Date("2026-01-01"),
+  endDate: new Date("2026-06-30"),
+  status: ProjectStatus.ACTIVE,
+  responsiblePerson: "Alice",
+  dynamicFields: {},
+  staffingReqs: [],
+  blueprintId: null,
+  color: null,
+  coverImageUrl: null,
+  coverFocusY: 50,
+  utilizationCategoryId: null,
+  clientId: null,
+  createdAt: new Date("2026-01-01"),
+  updatedAt: new Date("2026-01-01"),
+};
+
+describe("project router", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── create ───────────────────────────────────────────────────────────────
+
+  describe("create", () => {
+    it("creates a project and returns its id", async () => {
+      const created = { ...sampleProject, id: "project_new" };
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue(null), // no shortCode conflict
+          create: vi.fn().mockResolvedValue(created),
+        },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.create({
+        shortCode: "PRJ-001",
+        name: "Test Project",
+        orderType: OrderType.CHARGEABLE,
+        allocationType: AllocationType.INT,
+        winProbability: 80,
+        budgetCents: 500_000_00,
+        startDate: new Date("2026-01-01"),
+        endDate: new Date("2026-06-30"),
+      });
+
+      expect(result.id).toBe("project_new");
+      expect(db.project.create).toHaveBeenCalled();
+      expect(db.auditLog.create).toHaveBeenCalled();
+    });
+
+    it("throws CONFLICT when shortCode already exists", async () => {
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue(sampleProject),
+          create: vi.fn(),
+        },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createManagerCaller(db);
+      await expect(
+        caller.create({
+          shortCode: "PRJ-001",
+          name: "Duplicate",
+          orderType: OrderType.CHARGEABLE,
+          allocationType: AllocationType.INT,
+          budgetCents: 100_00,
+          startDate: new Date("2026-01-01"),
+          endDate: new Date("2026-06-30"),
+        }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "CONFLICT" }),
+      );
+    });
+
+    it("blocks USER role from creating projects", async () => {
+      const db = {
+        project: { findUnique: vi.fn(), create: vi.fn() },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(
+        caller.create({
+          shortCode: "PRJ-002",
+          name: "Blocked",
+          orderType: OrderType.CHARGEABLE,
+          allocationType: AllocationType.INT,
+          budgetCents: 100_00,
+          startDate: new Date("2026-01-01"),
+          endDate: new Date("2026-06-30"),
+        }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "FORBIDDEN" }),
+      );
+    });
+  });
+
+  // ─── getById ──────────────────────────────────────────────────────────────
+
+  describe("getById", () => {
+    it("returns the correct project with allocations and demands", async () => {
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue({ ...sampleProject, blueprint: null }),
+        },
+        allocation: { findMany: vi.fn().mockResolvedValue([]) },
+        demandRequirement: { findMany: vi.fn().mockResolvedValue([]) },
+        assignment: { findMany: vi.fn().mockResolvedValue([]) },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.getById({ id: "project_1" });
+
+      expect(result.id).toBe("project_1");
+      expect(result.name).toBe("Test Project");
+      expect(result).toHaveProperty("allocations");
+      expect(result).toHaveProperty("demands");
+      expect(result).toHaveProperty("assignments");
+    });
+
+    it("throws NOT_FOUND when project does not exist", async () => {
+      const db = {
+        project: { findUnique: vi.fn().mockResolvedValue(null) },
+        allocation: { findMany: vi.fn().mockResolvedValue([]) },
+        demandRequirement: { findMany: vi.fn().mockResolvedValue([]) },
+        assignment: { findMany: vi.fn().mockResolvedValue([]) },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(caller.getById({ id: "missing" })).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+  });
+
+  // ─── update ───────────────────────────────────────────────────────────────
+
+  describe("update", () => {
+    it("updates project fields", async () => {
+      const updated = { ...sampleProject, name: "Updated Name" };
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue(sampleProject),
+          update: vi.fn().mockResolvedValue(updated),
+        },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.update({
+        id: "project_1",
+        data: { name: "Updated Name" },
+      });
+
+      expect(result.name).toBe("Updated Name");
+      expect(db.project.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          where: { id: "project_1" },
+        }),
+      );
+      expect(db.auditLog.create).toHaveBeenCalled();
+    });
+
+    it("throws NOT_FOUND when updating non-existent project", async () => {
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue(null),
+          update: vi.fn(),
+        },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createManagerCaller(db);
+      await expect(
+        caller.update({ id: "missing", data: { name: "X" } }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+  });
+
+  // ─── updateStatus ─────────────────────────────────────────────────────────
+
+  describe("updateStatus", () => {
+    it("transitions project status", async () => {
+      const updated = { ...sampleProject, status: ProjectStatus.COMPLETED };
+      const db = {
+        project: {
+          update: vi.fn().mockResolvedValue(updated),
+        },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.updateStatus({
+        id: "project_1",
+        status: ProjectStatus.COMPLETED,
+      });
+
+      expect(result.status).toBe(ProjectStatus.COMPLETED);
+      expect(db.project.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          where: { id: "project_1" },
+          data: { status: ProjectStatus.COMPLETED },
+        }),
+      );
+    });
+  });
+
+  // ─── batchUpdateStatus ────────────────────────────────────────────────────
+
+  describe("batchUpdateStatus", () => {
+    it("updates multiple projects and returns count", async () => {
+      const db = {
+        project: {
+          update: vi.fn().mockResolvedValue(sampleProject),
+        },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+        $transaction: vi.fn((calls: unknown[]) =>
+          Promise.all((calls as Promise<unknown>[]).map(() => sampleProject)),
+        ),
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.batchUpdateStatus({
+        ids: ["project_1", "project_2", "project_3"],
+        status: ProjectStatus.ON_HOLD,
+      });
+
+      expect(result.count).toBe(3);
+      expect(db.auditLog.create).toHaveBeenCalled();
+    });
+  });
+
+  // ─── delete ───────────────────────────────────────────────────────────────
+
+  describe("delete", () => {
+    it("deletes a project and cascades related records", async () => {
+      const db = {
+        project: {
+          findUnique: vi.fn().mockResolvedValue({ id: "project_1", name: "Test", shortCode: "PRJ" }),
+          delete: vi.fn().mockResolvedValue({}),
+        },
+        assignment: { deleteMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        demandRequirement: { deleteMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        calculationRule: { updateMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+        $transaction: vi.fn(async (callback: (tx: unknown) => unknown) => callback(db)),
+      };
+
+      const caller = createAdminCaller(db);
+      const result = await caller.delete({ id: "project_1" });
+
+      expect(result).toMatchObject({ id: "project_1", name: "Test" });
+    });
+
+    it("throws NOT_FOUND when deleting non-existent project", async () => {
+      const db = {
+        project: { findUnique: vi.fn().mockResolvedValue(null) },
+        $transaction: vi.fn(async (callback: (tx: unknown) => unknown) => callback(db)),
+      };
+
+      const caller = createAdminCaller(db);
+      await expect(caller.delete({ id: "missing" })).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+
+    it("requires admin role — blocks manager", async () => {
+      const db = {
+        project: { findUnique: vi.fn() },
+        $transaction: vi.fn(),
+      };
+
+      const caller = createManagerCaller(db);
+      await expect(caller.delete({ id: "project_1" })).rejects.toThrow(
+        expect.objectContaining({ code: "FORBIDDEN" }),
+      );
+    });
+  });
+
+  // ─── batchDelete ──────────────────────────────────────────────────────────
+
+  describe("batchDelete", () => {
+    it("deletes multiple projects in a transaction", async () => {
+      const projects = [
+        { id: "p1", name: "A", shortCode: "A1" },
+        { id: "p2", name: "B", shortCode: "B1" },
+      ];
+      const db = {
+        project: {
+          findMany: vi.fn().mockResolvedValue(projects),
+          deleteMany: vi.fn().mockResolvedValue({ count: 2 }),
+        },
+        assignment: { deleteMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        demandRequirement: { deleteMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        calculationRule: { updateMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+        $transaction: vi.fn(async (callback: (tx: unknown) => unknown) => callback(db)),
+      };
+
+      const caller = createAdminCaller(db);
+      const result = await caller.batchDelete({ ids: ["p1", "p2"] });
+
+      expect(result.count).toBe(2);
+    });
+
+    it("throws NOT_FOUND when no projects match the ids", async () => {
+      const db = {
+        project: { findMany: vi.fn().mockResolvedValue([]) },
+        $transaction: vi.fn(async (callback: (tx: unknown) => unknown) => callback(db)),
+      };
+
+      const caller = createAdminCaller(db);
+      await expect(caller.batchDelete({ ids: ["missing"] })).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+  });
+
+  // ─── listWithCosts ────────────────────────────────────────────────────────
+
+  describe("listWithCosts", () => {
+    it("returns projects with cost data", async () => {
+      const db = {
+        project: {
+          findMany: vi.fn().mockResolvedValue([sampleProject]),
+        },
+      };
+
+      const { listAssignmentBookings } = await import("@planarchy/application");
+      vi.mocked(listAssignmentBookings).mockResolvedValue([]);
+
+      const caller = createControllerCaller(db);
+      const result = await caller.listWithCosts({ limit: 20 });
+
+      expect(result.projects).toHaveLength(1);
+      expect(result.projects[0]).toHaveProperty("totalCostCents");
+      expect(result.projects[0]).toHaveProperty("totalPersonDays");
+      expect(result.projects[0]).toHaveProperty("utilizationPercent");
+    });
+
+    it("calculates cost from assignment bookings", async () => {
+      const db = {
+        project: {
+          findMany: vi.fn().mockResolvedValue([{ ...sampleProject, budgetCents: 100_000_00 }]),
+        },
+      };
+
+      const { listAssignmentBookings } = await import("@planarchy/application");
+      vi.mocked(listAssignmentBookings).mockResolvedValue([
+        {
+          id: "a1",
+          projectId: "project_1",
+          resourceId: "res_1",
+          startDate: new Date("2026-01-01"),
+          endDate: new Date("2026-01-05"),
+          hoursPerDay: 8,
+          dailyCostCents: 50000,
+          status: "CONFIRMED",
+          project: { id: "project_1", name: "Test", shortCode: "PRJ", status: "ACTIVE", orderType: "CHARGEABLE", dynamicFields: null },
+          resource: { id: "res_1", displayName: "Alice", chapter: "CGI" },
+        },
+      ]);
+
+      const caller = createControllerCaller(db);
+      const result = await caller.listWithCosts({ limit: 20 });
+
+      expect(result.projects[0]?.totalCostCents).toBeGreaterThan(0);
+      expect(result.projects[0]?.totalPersonDays).toBeGreaterThan(0);
+    });
+
+    it("requires controller role — blocks USER", async () => {
+      const db = { project: { findMany: vi.fn() } };
+
+      const caller = createProtectedCaller(db);
+      await expect(caller.listWithCosts({ limit: 20 })).rejects.toThrow(
+        expect.objectContaining({ code: "FORBIDDEN" }),
+      );
+    });
+  });
+});
diff --git a/packages/api/src/__tests__/resource-router-crud.test.ts b/packages/api/src/__tests__/resource-router-crud.test.ts
new file mode 100644
index 0000000..15d73f2
--- /dev/null
+++ b/packages/api/src/__tests__/resource-router-crud.test.ts
@@ -0,0 +1,454 @@
+import { SystemRole } from "@planarchy/shared";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@planarchy/application", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@planarchy/application")>();
+  return {
+    ...actual,
+    isChargeabilityActualBooking: actual.isChargeabilityActualBooking,
+    isChargeabilityRelevantProject: actual.isChargeabilityRelevantProject,
+    listAssignmentBookings: vi.fn(),
+    recomputeResourceValueScores: vi.fn(),
+  };
+});
+
+vi.mock("../router/blueprint-validation.js", () => ({
+  assertBlueprintDynamicFields: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../lib/anonymization.js", () => ({
+  anonymizeResource: vi.fn((r: Record<string, unknown>) => r),
+  anonymizeResources: vi.fn((rs: unknown[]) => rs),
+  anonymizeSearchMatches: vi.fn((rs: unknown[]) => rs),
+  getAnonymizationDirectory: vi.fn().mockResolvedValue(null),
+  resolveResourceIdsByDisplayedEids: vi.fn().mockResolvedValue(new Map()),
+}));
+
+import { resourceRouter } from "../router/resource.js";
+import { createCallerFactory } from "../trpc.js";
+
+const createCaller = createCallerFactory(resourceRouter);
+
+function createManagerCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "manager@example.com", name: "Manager", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "mgr_1",
+      systemRole: SystemRole.MANAGER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+function createProtectedCaller(db: Record<string, unknown>) {
+  return createCaller({
+    session: {
+      user: { email: "user@example.com", name: "User", image: null },
+      expires: "2099-01-01T00:00:00.000Z",
+    },
+    db: db as never,
+    dbUser: {
+      id: "user_1",
+      systemRole: SystemRole.USER,
+      permissionOverrides: null,
+    },
+  });
+}
+
+const sampleResource = {
+  id: "res_1",
+  eid: "E-001",
+  displayName: "Alice",
+  email: "alice@example.com",
+  chapter: "CGI",
+  lcrCents: 5000,
+  ucrCents: 9000,
+  currency: "EUR",
+  chargeabilityTarget: 80,
+  availability: {
+    monday: 8,
+    tuesday: 8,
+    wednesday: 8,
+    thursday: 8,
+    friday: 8,
+  },
+  skills: [],
+  dynamicFields: {},
+  blueprintId: null,
+  blueprint: null,
+  isActive: true,
+  createdAt: new Date("2026-03-01"),
+  updatedAt: new Date("2026-03-01"),
+  roleId: null,
+  portfolioUrl: null,
+  postalCode: null,
+  federalState: null,
+  valueScore: null,
+  valueScoreBreakdown: null,
+  valueScoreUpdatedAt: null,
+  userId: null,
+  resourceRoles: [],
+  areaRole: null,
+  countryId: null,
+  metroCityId: null,
+  orgUnitId: null,
+  managementLevelGroupId: null,
+  managementLevelId: null,
+  resourceType: null,
+  chgResponsibility: null,
+  rolledOff: false,
+  departed: false,
+  enterpriseId: null,
+  clientUnitId: null,
+  fte: 1,
+};
+
+describe("resource router CRUD", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── list ─────────────────────────────────────────────────────────────────
+
+  describe("list", () => {
+    it("returns paginated results with total count", async () => {
+      const db = {
+        resource: {
+          findMany: vi.fn().mockResolvedValue([sampleResource]),
+          count: vi.fn().mockResolvedValue(1),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.list({ limit: 50 });
+
+      expect(result.resources).toHaveLength(1);
+      expect(result.resources[0]?.displayName).toBe("Alice");
+      expect(db.resource.findMany).toHaveBeenCalled();
+    });
+
+    it("applies search filter", async () => {
+      const db = {
+        resource: {
+          findMany: vi.fn().mockResolvedValue([]),
+          count: vi.fn().mockResolvedValue(0),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      await caller.list({ search: "Alice", limit: 50 });
+
+      expect(db.resource.findMany).toHaveBeenCalled();
+    });
+  });
+
+  // ─── getById ──────────────────────────────────────────────────────────────
+
+  describe("getById", () => {
+    it("returns correct resource", async () => {
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue(sampleResource),
+          findMany: vi.fn().mockResolvedValue([]),
+        },
+        systemSettings: {
+          findUnique: vi.fn().mockResolvedValue(null),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.getById({ id: "res_1" });
+
+      expect(result.id).toBe("res_1");
+      expect(result.displayName).toBe("Alice");
+    });
+
+    it("throws NOT_FOUND when resource does not exist", async () => {
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue(null),
+          findMany: vi.fn().mockResolvedValue([]),
+        },
+        systemSettings: {
+          findUnique: vi.fn().mockResolvedValue(null),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(caller.getById({ id: "missing" })).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+
+    it("sets isOwnedByCurrentUser when userId matches", async () => {
+      const ownedResource = { ...sampleResource, userId: "user_1" };
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue(ownedResource),
+          findMany: vi.fn().mockResolvedValue([]),
+        },
+        systemSettings: {
+          findUnique: vi.fn().mockResolvedValue(null),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.getById({ id: "res_1" });
+
+      expect(result.isOwnedByCurrentUser).toBe(true);
+    });
+  });
+
+  // ─── create ───────────────────────────────────────────────────────────────
+
+  describe("create", () => {
+    it("creates a resource and returns it", async () => {
+      const created = { ...sampleResource, id: "res_new", resourceRoles: [] };
+      const db = {
+        resource: {
+          findFirst: vi.fn().mockResolvedValue(null),
+          create: vi.fn().mockResolvedValue(created),
+        },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.create({
+        eid: "E-NEW",
+        displayName: "New Resource",
+        email: "new@example.com",
+        lcrCents: 4000,
+        ucrCents: 8000,
+      });
+
+      expect(result.id).toBe("res_new");
+      expect(db.resource.create).toHaveBeenCalled();
+      expect(db.auditLog.create).toHaveBeenCalled();
+    });
+
+    it("throws CONFLICT on duplicate eid or email", async () => {
+      const db = {
+        resource: {
+          findFirst: vi.fn().mockResolvedValue(sampleResource),
+          create: vi.fn(),
+        },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createManagerCaller(db);
+      await expect(
+        caller.create({
+          eid: "E-001",
+          displayName: "Duplicate",
+          email: "alice@example.com",
+          lcrCents: 5000,
+          ucrCents: 9000,
+        }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "CONFLICT" }),
+      );
+    });
+
+    it("blocks USER role from creating resources", async () => {
+      const db = {
+        resource: { findFirst: vi.fn(), create: vi.fn() },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(
+        caller.create({
+          eid: "E-002",
+          displayName: "Blocked",
+          email: "blocked@example.com",
+          lcrCents: 4000,
+          ucrCents: 8000,
+        }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "FORBIDDEN" }),
+      );
+    });
+  });
+
+  // ─── update ───────────────────────────────────────────────────────────────
+
+  describe("update", () => {
+    it("updates resource fields", async () => {
+      const updated = { ...sampleResource, displayName: "Alice Updated" };
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue(sampleResource),
+          update: vi.fn().mockResolvedValue(updated),
+        },
+        resourceRole: { deleteMany: vi.fn().mockResolvedValue({ count: 0 }) },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.update({
+        id: "res_1",
+        data: { displayName: "Alice Updated" },
+      });
+
+      expect(result.displayName).toBe("Alice Updated");
+      expect(db.resource.update).toHaveBeenCalledWith(
+        expect.objectContaining({ where: { id: "res_1" } }),
+      );
+    });
+
+    it("throws NOT_FOUND when resource does not exist", async () => {
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue(null),
+          update: vi.fn(),
+        },
+        auditLog: { create: vi.fn() },
+      };
+
+      const caller = createManagerCaller(db);
+      await expect(
+        caller.update({ id: "missing", data: { displayName: "X" } }),
+      ).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+  });
+
+  // ─── deactivate ───────────────────────────────────────────────────────────
+
+  describe("deactivate", () => {
+    it("sets isActive to false", async () => {
+      const deactivated = { ...sampleResource, isActive: false };
+      const db = {
+        resource: {
+          update: vi.fn().mockResolvedValue(deactivated),
+        },
+        auditLog: { create: vi.fn().mockResolvedValue({}) },
+      };
+
+      const caller = createManagerCaller(db);
+      const result = await caller.deactivate({ id: "res_1" });
+
+      expect(result.isActive).toBe(false);
+      expect(db.resource.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          where: { id: "res_1" },
+          data: { isActive: false },
+        }),
+      );
+    });
+  });
+
+  // ─── getHoverCard ─────────────────────────────────────────────────────────
+
+  describe("getHoverCard", () => {
+    it("returns expected shape with key fields", async () => {
+      const db = {
+        resource: {
+          findUnique: vi.fn().mockResolvedValue({
+            id: "res_1",
+            displayName: "Alice",
+            eid: "E-001",
+            email: "alice@example.com",
+            chapter: "CGI",
+            lcrCents: 5000,
+            ucrCents: 9000,
+            currency: "EUR",
+            chargeabilityTarget: 80,
+            skills: [],
+            availability: { monday: 8, tuesday: 8, wednesday: 8, thursday: 8, friday: 8 },
+            isActive: true,
+            areaRole: null,
+            country: null,
+            managementLevel: null,
+            resourceType: null,
+          }),
+        },
+        systemSettings: {
+          findUnique: vi.fn().mockResolvedValue(null),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.getHoverCard({ id: "res_1" });
+
+      expect(result).toMatchObject({
+        id: "res_1",
+        displayName: "Alice",
+        chapter: "CGI",
+        lcrCents: 5000,
+        isActive: true,
+      });
+    });
+
+    it("throws NOT_FOUND for missing resource", async () => {
+      const db = {
+        resource: { findUnique: vi.fn().mockResolvedValue(null) },
+        systemSettings: { findUnique: vi.fn().mockResolvedValue(null) },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(caller.getHoverCard({ id: "missing" })).rejects.toThrow(
+        expect.objectContaining({ code: "NOT_FOUND" }),
+      );
+    });
+  });
+
+  // ─── importSkillMatrix ────────────────────────────────────────────────────
+
+  describe("importSkillMatrix", () => {
+    it("imports skills for the current user resource", async () => {
+      const updatedResource = {
+        ...sampleResource,
+        skills: [{ skill: "Maya", proficiency: 4 }],
+        skillMatrixUpdatedAt: new Date(),
+      };
+      const db = {
+        user: {
+          findUnique: vi.fn().mockResolvedValue({
+            id: "user_1",
+            email: "user@example.com",
+            resource: { id: "res_1" },
+          }),
+        },
+        resource: {
+          update: vi.fn().mockResolvedValue(updatedResource),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      const result = await caller.importSkillMatrix({
+        skills: [{ skill: "Maya", proficiency: 4 }],
+      });
+
+      expect(db.resource.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          where: { id: "res_1" },
+        }),
+      );
+    });
+
+    it("throws NOT_FOUND when user has no linked resource", async () => {
+      const db = {
+        user: {
+          findUnique: vi.fn().mockResolvedValue({
+            id: "user_1",
+            email: "user@example.com",
+            resource: null,
+          }),
+        },
+      };
+
+      const caller = createProtectedCaller(db);
+      await expect(
+        caller.importSkillMatrix({
+          skills: [{ skill: "Nuke", proficiency: 3 }],
+        }),
+      ).rejects.toThrow("No resource linked to your account");
+    });
+  });
+});
diff --git a/packages/api/src/__tests__/timeline-allocation.test.ts b/packages/api/src/__tests__/timeline-allocation.test.ts
index 4be0075..5527aab 100644
--- a/packages/api/src/__tests__/timeline-allocation.test.ts
+++ b/packages/api/src/__tests__/timeline-allocation.test.ts
@@ -10,6 +10,14 @@ vi.mock("../sse/event-bus.js", () => ({
   emitProjectShifted: vi.fn(),
 }));
 
+vi.mock("../lib/budget-alerts.js", () => ({
+  checkBudgetThresholds: vi.fn(),
+}));
+
+vi.mock("../lib/cache.js", () => ({
+  invalidateDashboardCache: vi.fn(),
+}));
+
 const createCaller = createCallerFactory(timelineRouter);
 
 function createManagerCaller(db: Record<string, unknown>) {
diff --git a/packages/api/src/ai-client.ts b/packages/api/src/ai-client.ts
index 658912e..79fdc8c 100644
--- a/packages/api/src/ai-client.ts
+++ b/packages/api/src/ai-client.ts
@@ -8,6 +8,9 @@ type AiSettings = {
   azureApiVersion?: string | null;
   aiMaxCompletionTokens?: number | null;
   aiTemperature?: number | null;
+  azureDalleDeployment?: string | null;
+  azureDalleEndpoint?: string | null;
+  azureDalleApiKey?: string | null;
 };
 
 /** Returns true if the settings have enough information to make an API call. */
@@ -31,6 +34,32 @@ export function createAiClient(settings: AiSettings): OpenAI {
   return new OpenAI({ apiKey: settings.azureOpenAiApiKey! });
 }
 
+/** Returns true if DALL-E image generation is configured. */
+export function isDalleConfigured(settings: AiSettings | null | undefined): boolean {
+  if (!settings) return false;
+  // DALL-E needs its own deployment (or a non-Azure key with model name)
+  if (settings.aiProvider === "azure") {
+    return !!(settings.azureDalleDeployment && (settings.azureDalleEndpoint || settings.azureOpenAiEndpoint) && (settings.azureDalleApiKey || settings.azureOpenAiApiKey));
+  }
+  // For direct OpenAI, the chat API key works for DALL-E too
+  return !!settings.azureOpenAiApiKey;
+}
+
+/** Creates an OpenAI client configured for DALL-E image generation. */
+export function createDalleClient(settings: AiSettings): OpenAI {
+  if (settings.aiProvider === "azure") {
+    const endpoint = settings.azureDalleEndpoint || settings.azureOpenAiEndpoint!;
+    const apiKey = settings.azureDalleApiKey || settings.azureOpenAiApiKey!;
+    return new AzureOpenAI({
+      endpoint,
+      apiKey,
+      apiVersion: settings.azureApiVersion ?? "2025-01-01-preview",
+      deployment: settings.azureDalleDeployment!,
+    });
+  }
+  return new OpenAI({ apiKey: settings.azureOpenAiApiKey! });
+}
+
 /** Turns raw API errors into actionable human-readable messages. */
 export function parseAiError(err: unknown): string {
   const msg = err instanceof Error ? err.message : String(err);
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index 59fca35..9289595 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -1,4 +1,11 @@
 export { appRouter, type AppRouter } from "./router/index.js";
-export { createTRPCContext, createTRPCRouter, createCallerFactory, publicProcedure, protectedProcedure, managerProcedure, controllerProcedure, adminProcedure, requirePermission } from "./trpc.js";
+export { createTRPCContext, createTRPCRouter, createCallerFactory, publicProcedure, protectedProcedure, managerProcedure, controllerProcedure, adminProcedure, requirePermission, loadRoleDefaults, invalidateRoleDefaultsCache } from "./trpc.js";
 export { eventBus, emitAllocationCreated, emitAllocationUpdated, emitAllocationDeleted, emitProjectShifted, emitBudgetWarning, flushPendingEvents, cancelPendingEvents } from "./sse/event-bus.js";
+export { logger } from "./lib/logger.js";
 export { anonymizeResource, anonymizeResources, anonymizeUser, getAnonymizationConfig, getAnonymizationDirectory } from "./lib/anonymization.js";
+export { checkBudgetThresholds } from "./lib/budget-alerts.js";
+export { checkPendingEstimateReminders } from "./lib/estimate-reminders.js";
+export { checkChargeabilityAlerts } from "./lib/chargeability-alerts.js";
+export { checkVacationConflicts, checkBatchVacationConflicts } from "./lib/vacation-conflicts.js";
+export { lookupRate, type RateCardLookupParams, type RateCardLookupResult } from "./lib/rate-card-lookup.js";
+export { autoImportPublicHolidays, type AutoImportResult } from "./lib/holiday-auto-import.js";
diff --git a/packages/api/src/lib/auto-staffing.ts b/packages/api/src/lib/auto-staffing.ts
new file mode 100644
index 0000000..501b46f
--- /dev/null
+++ b/packages/api/src/lib/auto-staffing.ts
@@ -0,0 +1,251 @@
+import { listAssignmentBookings } from "@planarchy/application";
+import { rankResources } from "@planarchy/staffing";
+import type { SkillEntry } from "@planarchy/shared";
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+/**
+ * Minimal DB interface for auto-staffing — avoids importing the full PrismaClient.
+ * Follows the same pattern as budget-alerts.ts.
+ */
+type DbClient = Parameters<typeof listAssignmentBookings>[0] & {
+  demandRequirement: {
+    findUnique: (args: {
+      where: { id: string };
+      select: {
+        id: true;
+        projectId: true;
+        startDate: true;
+        endDate: true;
+        hoursPerDay: true;
+        role: true;
+        roleId: true;
+        headcount: true;
+        budgetCents: true;
+      };
+    }) => Promise<{
+      id: string;
+      projectId: string;
+      startDate: Date;
+      endDate: Date;
+      hoursPerDay: number;
+      role: string | null;
+      roleId: string | null;
+      headcount: number;
+      budgetCents: number;
+    } | null>;
+  };
+  project: {
+    findUnique: (args: {
+      where: { id: string };
+      select: { id: true; name: true };
+    }) => Promise<{ id: string; name: string } | null>;
+  };
+  role: {
+    findUnique: (args: {
+      where: { id: string };
+      select: { id: true; name: true };
+    }) => Promise<{ id: string; name: string } | null>;
+  };
+  resource: {
+    findMany: (args: {
+      where: { isActive: true };
+    }) => Promise<Array<{
+      id: string;
+      displayName: string;
+      eid: string | null;
+      skills: unknown;
+      lcrCents: number;
+      chargeabilityTarget: number;
+      availability: unknown;
+      valueScore: number | null;
+    }>>;
+  };
+  notification: {
+    create: (args: {
+      data: {
+        userId: string;
+        type: string;
+        category: string;
+        priority: string;
+        title: string;
+        body: string;
+        entityId: string;
+        entityType: string;
+        link: string;
+        channel: string;
+      };
+    }) => Promise<{ id: string; userId: string }>;
+  };
+  user: {
+    findMany: (args: {
+      where: { systemRole: { in: string[] } };
+      select: { id: true };
+    }) => Promise<Array<{ id: string }>>;
+  };
+};
+
+const TOP_N = 3;
+
+/**
+ * Generate automatic staffing suggestions for a demand requirement.
+ *
+ * Fetches the demand's role/dates/hours, runs the staffing ranking algorithm
+ * for the top 3 matches, and creates a notification for project managers
+ * with a summary of the suggestions.
+ *
+ * This function is designed to be called fire-and-forget (non-blocking).
+ * It swallows all errors to avoid disrupting the caller.
+ */
+export async function generateAutoSuggestions(
+  db: DbClient,
+  demandRequirementId: string,
+): Promise<void> {
+  try {
+    // 1. Load the demand requirement
+    const demand = await db.demandRequirement.findUnique({
+      where: { id: demandRequirementId },
+      select: {
+        id: true,
+        projectId: true,
+        startDate: true,
+        endDate: true,
+        hoursPerDay: true,
+        role: true,
+        roleId: true,
+        headcount: true,
+        budgetCents: true,
+      },
+    });
+
+    if (!demand) return;
+
+    // 2. Resolve project and role names
+    const [project, roleEntity] = await Promise.all([
+      db.project.findUnique({
+        where: { id: demand.projectId },
+        select: { id: true, name: true },
+      }),
+      demand.roleId
+        ? db.role.findUnique({
+            where: { id: demand.roleId },
+            select: { id: true, name: true },
+          })
+        : Promise.resolve(null),
+    ]);
+
+    if (!project) return;
+
+    const roleName = roleEntity?.name ?? demand.role ?? "Unspecified role";
+
+    // 3. Derive required skills from role name
+    // The role name itself is treated as the primary required skill.
+    // Resources with matching skill names in their skill matrix will rank highest.
+    const requiredSkills = [roleName];
+
+    // 4. Fetch all active resources and their current bookings
+    const resources = await db.resource.findMany({
+      where: { isActive: true },
+    });
+
+    if (resources.length === 0) return;
+
+    const bookings = await listAssignmentBookings(db, {
+      startDate: demand.startDate,
+      endDate: demand.endDate,
+      resourceIds: resources.map((r) => r.id),
+    });
+
+    // 5. Enrich resources with utilization data for the demand's date range
+    const enrichedResources = resources.map((resource) => {
+      const avail = resource.availability as
+        | { monday?: number; tuesday?: number; wednesday?: number; thursday?: number; friday?: number }
+        | null;
+      const totalAvailableHours = avail?.monday ?? 8;
+      const resourceBookings = bookings.filter((b) => b.resourceId === resource.id);
+
+      const allocatedHoursPerDay = resourceBookings.reduce(
+        (sum, b) => sum + b.hoursPerDay,
+        0,
+      );
+
+      const utilizationPercent =
+        totalAvailableHours > 0
+          ? Math.min(100, (allocatedHoursPerDay / totalAvailableHours) * 100)
+          : 0;
+
+      const wouldExceedCapacity =
+        allocatedHoursPerDay + demand.hoursPerDay > totalAvailableHours;
+
+      return {
+        id: resource.id,
+        displayName: resource.displayName,
+        eid: resource.eid,
+        skills: resource.skills as unknown as SkillEntry[],
+        lcrCents: resource.lcrCents,
+        chargeabilityTarget: resource.chargeabilityTarget,
+        currentUtilizationPercent: utilizationPercent,
+        hasAvailabilityConflicts: wouldExceedCapacity,
+        conflictDays: wouldExceedCapacity ? ["(multiple days)"] : [],
+        valueScore: resource.valueScore ?? 0,
+      };
+    });
+
+    // 6. Rank resources using the staffing algorithm
+    const budgetLcrCentsPerHour =
+      demand.budgetCents > 0 ? demand.budgetCents : undefined;
+
+    const ranked = rankResources({
+      requiredSkills,
+      resources: enrichedResources,
+      budgetLcrCentsPerHour,
+    } as unknown as Parameters<typeof rankResources>[0]);
+
+    // Value-score tiebreaker (same logic as staffing router)
+    ranked.sort((a, b) => {
+      if (Math.abs(a.score - b.score) <= 2) {
+        const aVal = enrichedResources.find((r) => r.id === a.resourceId)?.valueScore ?? 0;
+        const bVal = enrichedResources.find((r) => r.id === b.resourceId)?.valueScore ?? 0;
+        return bVal - aVal;
+      }
+      return 0;
+    });
+
+    const topSuggestions = ranked.slice(0, TOP_N);
+    if (topSuggestions.length === 0) return;
+
+    // 7. Build notification message
+    const suggestionSummary = topSuggestions
+      .map((s) => `${s.resourceName} (${s.score}%)`)
+      .join(", ");
+
+    const title = `Staffing suggestions for ${roleName} on ${project.name}`;
+    const body = `${topSuggestions.length} matching resources found for ${roleName} on ${project.name}: ${suggestionSummary}`;
+
+    // 8. Notify all managers and admins
+    const managers = await db.user.findMany({
+      where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+      select: { id: true },
+    });
+
+    for (const manager of managers) {
+      const notification = await db.notification.create({
+        data: {
+          userId: manager.id,
+          type: "AUTO_STAFFING_SUGGESTION",
+          category: "NOTIFICATION",
+          priority: "NORMAL",
+          title,
+          body,
+          entityId: demandRequirementId,
+          entityType: "demand",
+          link: `/staffing?demandId=${demandRequirementId}`,
+          channel: "in_app",
+        },
+      });
+
+      emitNotificationCreated(manager.id, notification.id);
+    }
+  } catch {
+    // Fire-and-forget: swallow all errors to avoid disrupting the caller.
+  }
+}
diff --git a/packages/api/src/lib/budget-alerts.ts b/packages/api/src/lib/budget-alerts.ts
new file mode 100644
index 0000000..9ab9572
--- /dev/null
+++ b/packages/api/src/lib/budget-alerts.ts
@@ -0,0 +1,141 @@
+import { listAssignmentBookings } from "@planarchy/application";
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+type DbClient = Parameters<typeof listAssignmentBookings>[0] & {
+  project: {
+    findUnique: (args: {
+      where: { id: string };
+      select: { id: true; name: true; shortCode: true; budgetCents: true };
+    }) => Promise<{
+      id: string;
+      name: string;
+      shortCode: string;
+      budgetCents: number;
+    } | null>;
+  };
+  notification: {
+    findFirst: (args: {
+      where: {
+        entityId: string;
+        entityType: string;
+        type: string;
+      };
+      select: { id: true };
+    }) => Promise<{ id: string } | null>;
+    create: (args: {
+      data: {
+        userId: string;
+        type: string;
+        category: string;
+        priority: string;
+        title: string;
+        body: string;
+        entityId: string;
+        entityType: string;
+        link: string;
+        channel: string;
+      };
+    }) => Promise<{ id: string; userId: string }>;
+  };
+  user: {
+    findMany: (args: {
+      where: { systemRole: { in: string[] } };
+      select: { id: true };
+    }) => Promise<Array<{ id: string }>>;
+  };
+};
+
+const THRESHOLDS = [
+  { percent: 100, type: "BUDGET_OVERRUN_100", label: "100%", priority: "URGENT" as const },
+  { percent: 80, type: "BUDGET_OVERRUN_80", label: "80%", priority: "HIGH" as const },
+] as const;
+
+/**
+ * Check whether a project's current spend has crossed 80% or 100% of its budget.
+ * Creates in-app notifications for all managers/admins when a threshold is
+ * crossed for the first time.
+ *
+ * Safe to call repeatedly -- duplicate notifications are prevented by checking
+ * whether a notification with the same entityId + type already exists.
+ */
+export async function checkBudgetThresholds(
+  db: DbClient,
+  projectId: string,
+): Promise<void> {
+  const project = await db.project.findUnique({
+    where: { id: projectId },
+    select: { id: true, name: true, shortCode: true, budgetCents: true },
+  });
+
+  if (!project || project.budgetCents <= 0) return;
+
+  // Compute total spend from assignment bookings (same logic as listWithCosts)
+  const bookings = await listAssignmentBookings(db, {
+    startDate: new Date("1900-01-01T00:00:00.000Z"),
+    endDate: new Date("2100-12-31T23:59:59.999Z"),
+    projectIds: [projectId],
+  });
+
+  let totalCostCents = 0;
+  for (const booking of bookings) {
+    const days =
+      (new Date(booking.endDate).getTime() -
+        new Date(booking.startDate).getTime()) /
+        (1000 * 60 * 60 * 24) +
+      1;
+    totalCostCents += booking.dailyCostCents * days;
+  }
+  totalCostCents = Math.round(totalCostCents);
+
+  const spendPercent = (totalCostCents / project.budgetCents) * 100;
+
+  for (const threshold of THRESHOLDS) {
+    if (spendPercent < threshold.percent) continue;
+
+    // Check if we already sent this alert
+    const existing = await db.notification.findFirst({
+      where: {
+        entityId: projectId,
+        entityType: "project_budget",
+        type: threshold.type,
+      },
+      select: { id: true },
+    });
+
+    if (existing) continue;
+
+    // Get all managers and admins
+    const managers = await db.user.findMany({
+      where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+      select: { id: true },
+    });
+
+    const formattedSpend = (totalCostCents / 100).toLocaleString("de-DE", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+    const formattedBudget = (project.budgetCents / 100).toLocaleString(
+      "de-DE",
+      { minimumFractionDigits: 2, maximumFractionDigits: 2 },
+    );
+
+    for (const manager of managers) {
+      const notification = await db.notification.create({
+        data: {
+          userId: manager.id,
+          type: threshold.type,
+          category: "NOTIFICATION",
+          priority: threshold.priority,
+          title: `Budget alert: ${project.name} has reached ${threshold.label} of budget`,
+          body: `Project ${project.shortCode} "${project.name}" has spent ${formattedSpend} EUR of ${formattedBudget} EUR budget (${Math.round(spendPercent)}%).`,
+          entityId: projectId,
+          entityType: "project_budget",
+          link: `/projects/${projectId}`,
+          channel: "in_app",
+        },
+      });
+
+      emitNotificationCreated(manager.id, notification.id);
+    }
+  }
+}
diff --git a/packages/api/src/lib/cache.ts b/packages/api/src/lib/cache.ts
new file mode 100644
index 0000000..5b24d12
--- /dev/null
+++ b/packages/api/src/lib/cache.ts
@@ -0,0 +1,95 @@
+import { Redis } from "ioredis";
+
+const REDIS_URL = process.env["REDIS_URL"] ?? "redis://localhost:6380";
+const KEY_PREFIX = "dashboard:";
+const DEFAULT_TTL_SECONDS = 60;
+
+let redis: Redis | null = null;
+
+function getRedis(): Redis {
+  if (!redis) {
+    redis = new Redis(REDIS_URL, {
+      lazyConnect: false,
+      enableReadyCheck: false,
+      // Don't let cache operations block the app if Redis is slow
+      commandTimeout: 2000,
+    });
+    redis.on("error", (e: unknown) => {
+      console.error("[Redis cache]", e);
+    });
+  }
+  return redis;
+}
+
+/**
+ * Retrieve a cached value by key.
+ * Returns null on cache miss or if Redis is unavailable.
+ */
+export async function cacheGet<T>(key: string): Promise<T | null> {
+  try {
+    const raw = await getRedis().get(`${KEY_PREFIX}${key}`);
+    if (raw === null) return null;
+    return JSON.parse(raw) as T;
+  } catch {
+    // Redis down or parse error — fall through to DB
+    return null;
+  }
+}
+
+/**
+ * Store a value in the cache with a TTL.
+ * Silently ignores errors when Redis is unavailable.
+ */
+export async function cacheSet(
+  key: string,
+  value: unknown,
+  ttlSeconds: number = DEFAULT_TTL_SECONDS,
+): Promise<void> {
+  try {
+    await getRedis().set(
+      `${KEY_PREFIX}${key}`,
+      JSON.stringify(value),
+      "EX",
+      ttlSeconds,
+    );
+  } catch {
+    // Redis down — silently ignore, data will be served from DB next time
+  }
+}
+
+/**
+ * Delete all keys matching a glob pattern (e.g. "dashboard:*").
+ * The pattern is automatically prefixed with the KEY_PREFIX unless it already starts with it.
+ */
+export async function cacheInvalidate(pattern: string): Promise<void> {
+  try {
+    const fullPattern = pattern.startsWith(KEY_PREFIX)
+      ? pattern
+      : `${KEY_PREFIX}${pattern}`;
+    const r = getRedis();
+    let cursor = "0";
+    do {
+      const [nextCursor, keys] = await r.scan(
+        cursor,
+        "MATCH",
+        fullPattern,
+        "COUNT",
+        100,
+      );
+      cursor = nextCursor;
+      if (keys.length > 0) {
+        await r.del(...keys);
+      }
+    } while (cursor !== "0");
+  } catch {
+    // Redis down — nothing to invalidate
+  }
+}
+
+/**
+ * Invalidate all dashboard cache entries.
+ * Convenience wrapper used from mutation hooks.
+ */
+export async function invalidateDashboardCache(): Promise<void> {
+  await cacheInvalidate("*");
+}
diff --git a/packages/api/src/lib/chargeability-alerts.ts b/packages/api/src/lib/chargeability-alerts.ts
new file mode 100644
index 0000000..5ebef5c
--- /dev/null
+++ b/packages/api/src/lib/chargeability-alerts.ts
@@ -0,0 +1,263 @@
+import {
+  deriveResourceForecast,
+  getMonthRange,
+  countWorkingDaysInOverlap,
+  calculateSAH,
+  type AssignmentSlice,
+} from "@planarchy/engine";
+import type { SpainScheduleRule } from "@planarchy/shared";
+import { isChargeabilityActualBooking, listAssignmentBookings } from "@planarchy/application";
+import { VacationStatus } from "@planarchy/db";
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+/**
+ * Minimal DB client type for chargeability alerts.
+ * Uses structural typing so we can pass in `prisma as any` from the cron route.
+ */
+type DbClient = {
+  resource: {
+    findMany: (args: {
+      where: Record<string, unknown>;
+      select: Record<string, unknown>;
+    }) => Promise<
+      Array<{
+        id: string;
+        displayName: string;
+        fte: number;
+        chargeabilityTarget: number;
+        country: { dailyWorkingHours: number | null; scheduleRules: unknown } | null;
+        managementLevelGroup: { targetPercentage: number | null } | null;
+      }>
+    >;
+  };
+  vacation: {
+    findMany: (args: {
+      where: Record<string, unknown>;
+      select: Record<string, unknown>;
+    }) => Promise<
+      Array<{
+        resourceId: string;
+        startDate: Date;
+        endDate: Date;
+        type: string;
+        isHalfDay: boolean;
+      }>
+    >;
+  };
+  notification: {
+    findFirst: (args: {
+      where: Record<string, unknown>;
+      select: { id: true };
+    }) => Promise<{ id: string } | null>;
+    create: (args: {
+      data: {
+        userId: string;
+        type: string;
+        category: string;
+        priority: string;
+        title: string;
+        body: string;
+        entityId: string;
+        entityType: string;
+        link: string;
+        channel: string;
+      };
+    }) => Promise<{ id: string; userId: string }>;
+  };
+  user: {
+    findMany: (args: {
+      where: { systemRole: { in: string[] } };
+      select: { id: true };
+    }) => Promise<Array<{ id: string }>>;
+  };
+};
+
+/** Alert when chargeability is more than 15pp below target */
+const GAP_THRESHOLD_PP = 15;
+
+/**
+ * Find resources whose current-month chargeability is >15 percentage points
+ * below their target, and create a notification for all managers.
+ *
+ * Duplicate-safe: skips resources that already have an alert this month.
+ *
+ * Returns the number of new alerts created.
+ */
+export async function checkChargeabilityAlerts(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  db: any,
+): Promise<number> {
+  const now = new Date();
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth() + 1;
+  const { start: monthStart, end: monthEnd } = getMonthRange(year, month);
+  const monthKey = `${year}-${String(month).padStart(2, "0")}`;
+
+  // Fetch active, chg-responsible resources
+  const resources = await (db as DbClient).resource.findMany({
+    where: {
+      isActive: true,
+      chgResponsibility: true,
+      departed: false,
+      rolledOff: false,
+    },
+    select: {
+      id: true,
+      displayName: true,
+      fte: true,
+      chargeabilityTarget: true,
+      country: { select: { dailyWorkingHours: true, scheduleRules: true } },
+      managementLevelGroup: { select: { targetPercentage: true } },
+    },
+  });
+
+  if (resources.length === 0) return 0;
+
+  const resourceIds = resources.map((r) => r.id);
+
+  // Fetch bookings for the current month
+  const allBookings = await listAssignmentBookings(db, {
+    startDate: monthStart,
+    endDate: monthEnd,
+    resourceIds,
+  });
+
+  // Fetch vacations for the current month
+  const vacations = await (db as DbClient).vacation.findMany({
+    where: {
+      resourceId: { in: resourceIds },
+      status: VacationStatus.APPROVED,
+      startDate: { lte: monthEnd },
+      endDate: { gte: monthStart },
+    },
+    select: {
+      resourceId: true,
+      startDate: true,
+      endDate: true,
+      type: true,
+      isHalfDay: true,
+    },
+  });
+
+  // Compute chargeability per resource
+  const underperformers: Array<{ resource: typeof resources[0]; chg: number; target: number; gap: number }> = [];
+
+  for (const resource of resources) {
+    const dailyHours = resource.country?.dailyWorkingHours ?? 8;
+
+    // Compute absence dates for SAH
+    const resourceVacations = vacations.filter((v) => v.resourceId === resource.id);
+    const absenceDates: string[] = [];
+    for (const v of resourceVacations) {
+      const vStart = new Date(Math.max(v.startDate.getTime(), monthStart.getTime()));
+      const vEnd = new Date(Math.min(v.endDate.getTime(), monthEnd.getTime()));
+      if (vStart > vEnd) continue;
+      const cursor = new Date(vStart);
+      cursor.setUTCHours(0, 0, 0, 0);
+      const endNorm = new Date(vEnd);
+      endNorm.setUTCHours(0, 0, 0, 0);
+      while (cursor <= endNorm) {
+        absenceDates.push(cursor.toISOString().slice(0, 10));
+        cursor.setUTCDate(cursor.getUTCDate() + 1);
+      }
+    }
+
+    const scheduleRules = (resource.country?.scheduleRules ?? null) as SpainScheduleRule | null;
+    const sahResult = calculateSAH({
+      dailyWorkingHours: dailyHours,
+      scheduleRules,
+      fte: resource.fte,
+      periodStart: monthStart,
+      periodEnd: monthEnd,
+      publicHolidays: [],
+      absenceDays: absenceDates,
+    });
+
+    // Build assignment slices
+    const resourceBookings = allBookings.filter(
+      (b) => b.resourceId === resource.id && isChargeabilityActualBooking(b, false),
+    );
+
+    const slices: AssignmentSlice[] = resourceBookings.map((b) => {
+      const workingDays = countWorkingDaysInOverlap(monthStart, monthEnd, b.startDate, b.endDate);
+      return {
+        hoursPerDay: b.hoursPerDay,
+        workingDays,
+        categoryCode: "Chg", // simplified — treat all actual bookings as chargeable
+      };
+    });
+
+    const targetPct = resource.managementLevelGroup?.targetPercentage
+      ?? (resource.chargeabilityTarget / 100);
+
+    const forecast = deriveResourceForecast({
+      fte: resource.fte,
+      targetPercentage: targetPct,
+      assignments: slices,
+      sah: sahResult.standardAvailableHours,
+    });
+
+    const chgPct = forecast.chg * 100;
+    const targetPctVal = targetPct * 100;
+    const gap = targetPctVal - chgPct;
+
+    if (gap > GAP_THRESHOLD_PP) {
+      underperformers.push({
+        resource,
+        chg: Math.round(chgPct),
+        target: Math.round(targetPctVal),
+        gap: Math.round(gap),
+      });
+    }
+  }
+
+  if (underperformers.length === 0) return 0;
+
+  // Fetch managers to notify
+  const managers = await (db as DbClient).user.findMany({
+    where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+    select: { id: true },
+  });
+
+  if (managers.length === 0) return 0;
+
+  let alertCount = 0;
+
+  for (const { resource, chg, target, gap } of underperformers) {
+    // Duplicate check: one alert per resource per month
+    const entityId = `chg-alert-${resource.id}-${monthKey}`;
+    const existing = await (db as DbClient).notification.findFirst({
+      where: {
+        entityId,
+        entityType: "chargeability_alert",
+        type: "CHARGEABILITY_ALERT",
+      },
+      select: { id: true },
+    });
+
+    if (existing) continue;
+
+    for (const manager of managers) {
+      const notification = await (db as DbClient).notification.create({
+        data: {
+          userId: manager.id,
+          type: "CHARGEABILITY_ALERT",
+          category: "NOTIFICATION",
+          priority: "HIGH",
+          title: `Low chargeability: ${resource.displayName}`,
+          body: `${resource.displayName} is at ${chg}% chargeability this month (target: ${target}%, gap: ${gap}pp).`,
+          entityId,
+          entityType: "chargeability_alert",
+          link: "/chargeability",
+          channel: "in_app",
+        },
+      });
+
+      emitNotificationCreated(manager.id, notification.id);
+    }
+
+    alertCount++;
+  }
+
+  return alertCount;
+}
diff --git a/packages/api/src/lib/estimate-reminders.ts b/packages/api/src/lib/estimate-reminders.ts
new file mode 100644
index 0000000..56cd182
--- /dev/null
+++ b/packages/api/src/lib/estimate-reminders.ts
@@ -0,0 +1,164 @@
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+type DbClient = {
+  estimate: {
+    findMany: (args: {
+      where: {
+        versions: {
+          some: {
+            status: string;
+            submittedAt: { lte: Date };
+          };
+        };
+      };
+      select: {
+        id: true;
+        name: true;
+        projectId: true;
+        versions: {
+          where: { status: string };
+          select: { id: true; versionNumber: true; submittedAt: true };
+          orderBy: { versionNumber: "desc" };
+          take: 1;
+        };
+      };
+    }) => Promise<
+      Array<{
+        id: string;
+        name: string;
+        projectId: string | null;
+        versions: Array<{
+          id: string;
+          versionNumber: number;
+          submittedAt: Date | null;
+        }>;
+      }>
+    >;
+  };
+  notification: {
+    findFirst: (args: {
+      where: {
+        entityId: string;
+        entityType: string;
+        type: string;
+      };
+      select: { id: true };
+    }) => Promise<{ id: string } | null>;
+    create: (args: {
+      data: {
+        userId: string;
+        type: string;
+        category: string;
+        priority: string;
+        title: string;
+        body: string;
+        entityId: string;
+        entityType: string;
+        link: string;
+        channel: string;
+      };
+    }) => Promise<{ id: string; userId: string }>;
+  };
+  user: {
+    findMany: (args: {
+      where: { systemRole: { in: string[] } };
+      select: { id: true };
+    }) => Promise<Array<{ id: string }>>;
+  };
+};
+
+const REMINDER_DAYS = 3;
+
+/**
+ * Find all estimates that have a version in SUBMITTED status for longer than
+ * REMINDER_DAYS days and create a single reminder notification per estimate
+ * for all managers/admins.
+ *
+ * Returns the number of new reminders created.
+ */
+export async function checkPendingEstimateReminders(
+  db: DbClient,
+): Promise<number> {
+  const cutoff = new Date();
+  cutoff.setDate(cutoff.getDate() - REMINDER_DAYS);
+
+  const pendingEstimates = await db.estimate.findMany({
+    where: {
+      versions: {
+        some: {
+          status: "SUBMITTED",
+          submittedAt: { lte: cutoff },
+        },
+      },
+    },
+    select: {
+      id: true,
+      name: true,
+      projectId: true,
+      versions: {
+        where: { status: "SUBMITTED" },
+        select: { id: true, versionNumber: true, submittedAt: true },
+        orderBy: { versionNumber: "desc" },
+        take: 1,
+      },
+    },
+  });
+
+  if (pendingEstimates.length === 0) return 0;
+
+  const managers = await db.user.findMany({
+    where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+    select: { id: true },
+  });
+
+  if (managers.length === 0) return 0;
+
+  let reminderCount = 0;
+
+  for (const estimate of pendingEstimates) {
+    const version = estimate.versions[0];
+    if (!version) continue;
+
+    // Check if we already sent a reminder for this version
+    const existing = await db.notification.findFirst({
+      where: {
+        entityId: version.id,
+        entityType: "estimate_approval_reminder",
+        type: "ESTIMATE_APPROVAL_REMINDER",
+      },
+      select: { id: true },
+    });
+
+    if (existing) continue;
+
+    const daysPending = version.submittedAt
+      ? Math.floor(
+          (Date.now() - new Date(version.submittedAt).getTime()) /
+            (1000 * 60 * 60 * 24),
+        )
+      : REMINDER_DAYS;
+
+    for (const manager of managers) {
+      const notification = await db.notification.create({
+        data: {
+          userId: manager.id,
+          type: "ESTIMATE_APPROVAL_REMINDER",
+          category: "REMINDER",
+          priority: "HIGH",
+          title: `Estimate awaiting approval: ${estimate.name} (v${version.versionNumber})`,
+          body: `Estimate "${estimate.name}" version ${version.versionNumber} has been pending approval for ${daysPending} days.`,
+          entityId: version.id,
+          entityType: "estimate_approval_reminder",
+          link: `/estimates/${estimate.id}`,
+          channel: "in_app",
+        },
+      });
+
+      emitNotificationCreated(manager.id, notification.id);
+    }
+
+    reminderCount++;
+  }
+
+  return reminderCount;
+}
diff --git a/packages/api/src/lib/format-utils.ts b/packages/api/src/lib/format-utils.ts
new file mode 100644
index 0000000..71caf55
--- /dev/null
+++ b/packages/api/src/lib/format-utils.ts
@@ -0,0 +1,3 @@
+export function fmtEur(cents: number): string {
+  return `${(cents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR`;
+}
diff --git a/packages/api/src/lib/holiday-auto-import.ts b/packages/api/src/lib/holiday-auto-import.ts
new file mode 100644
index 0000000..9114b83
--- /dev/null
+++ b/packages/api/src/lib/holiday-auto-import.ts
@@ -0,0 +1,121 @@
+/**
+ * Auto-import public holidays for all active resources.
+ *
+ * For each resource, determines the applicable federal state from:
+ *   1. resource.federalState (explicit, e.g. "BY")
+ *   2. Falls back to federal-only holidays when no state is set
+ *
+ * Creates Vacation entries with type PUBLIC_HOLIDAY and status APPROVED.
+ * Duplicate-safe: skips holidays that already exist (by date + type + resourceId).
+ */
+
+import { getPublicHolidays } from "@planarchy/shared";
+
+interface MinimalVacation {
+  resourceId: string;
+  startDate: Date;
+  endDate: Date;
+}
+
+interface AutoImportDb {
+  resource: {
+    findMany: (args: {
+      where: { isActive: boolean };
+      select: { id: string; federalState: string };
+    }) => Promise<Array<{ id: string; federalState: string | null }>>;
+  };
+  vacation: {
+    findMany: (args: unknown) => Promise<MinimalVacation[]>;
+    createMany: (args: { data: unknown[]; skipDuplicates?: boolean }) => Promise<{ count: number }>;
+  };
+}
+
+export interface AutoImportResult {
+  year: number;
+  holidaysCreated: number;
+  resourcesProcessed: number;
+  skippedExisting: number;
+}
+
+/**
+ * Import public holidays for all active resources in a given year.
+ * Returns the number of holiday vacation records created.
+ */
+export async function autoImportPublicHolidays(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  db: any,
+  year: number,
+): Promise<AutoImportResult> {
+  const resources: Array<{ id: string; federalState: string | null }> = await db.resource.findMany({
+    where: { isActive: true },
+    select: { id: true, federalState: true },
+  });
+
+  if (resources.length === 0) {
+    return { year, holidaysCreated: 0, resourcesProcessed: 0, skippedExisting: 0 };
+  }
+
+  // Group resources by federal state (null = federal-only holidays)
+  const byState = new Map<string | null, string[]>();
+  for (const resource of resources) {
+    const state = resource.federalState ?? null;
+    const group = byState.get(state) ?? [];
+    group.push(resource.id);
+    byState.set(state, group);
+  }
+
+  let totalCreated = 0;
+  let totalSkipped = 0;
+
+  for (const [state, resourceIds] of byState) {
+    const holidays = getPublicHolidays(year, state ?? undefined);
+    if (holidays.length === 0) continue;
+
+    for (const holiday of holidays) {
+      const holidayDate = new Date(holiday.date);
+
+      // Find existing records for this date + type to skip duplicates
+      const existing: MinimalVacation[] = await db.vacation.findMany({
+        where: {
+          resourceId: { in: resourceIds },
+          type: "PUBLIC_HOLIDAY",
+          startDate: holidayDate,
+          endDate: holidayDate,
+        },
+        select: { resourceId: true, startDate: true, endDate: true },
+      });
+
+      const existingResourceIds = new Set(existing.map((v: MinimalVacation) => v.resourceId));
+      const newResourceIds = resourceIds.filter((id) => !existingResourceIds.has(id));
+
+      totalSkipped += existingResourceIds.size;
+
+      if (newResourceIds.length === 0) continue;
+
+      const records = newResourceIds.map((resourceId) => ({
+        resourceId,
+        type: "PUBLIC_HOLIDAY",
+        status: "APPROVED",
+        startDate: holidayDate,
+        endDate: holidayDate,
+        note: holiday.name,
+        isHalfDay: false,
+        approvedAt: new Date(),
+      }));
+
+      const result = await db.vacation.createMany({
+        data: records,
+        skipDuplicates: true,
+      });
+
+      totalCreated += result.count;
+    }
+  }
+
+  return {
+    year,
+    holidaysCreated: totalCreated,
+    resourcesProcessed: resources.length,
+    skippedExisting: totalSkipped,
+  };
+}
diff --git a/packages/api/src/lib/logger.ts b/packages/api/src/lib/logger.ts
new file mode 100644
index 0000000..f096d24
--- /dev/null
+++ b/packages/api/src/lib/logger.ts
@@ -0,0 +1,25 @@
+import pino from "pino";
+
+const isProduction = process.env["NODE_ENV"] === "production";
+
+const LOG_LEVEL = process.env["LOG_LEVEL"] ?? "info";
+
+export const logger = pino({
+  level: LOG_LEVEL,
+  base: { service: "planarchy-api" },
+  ...(isProduction
+    ? {}
+    : {
+        transport: {
+          target: "pino/file",
+          options: { destination: 1 }, // stdout
+        },
+        formatters: {
+          level(label: string) {
+            return { level: label };
+          },
+        },
+      }),
+});
+
+export type Logger = typeof logger;
diff --git a/packages/api/src/lib/notification-targeting.ts b/packages/api/src/lib/notification-targeting.ts
new file mode 100644
index 0000000..b451f59
--- /dev/null
+++ b/packages/api/src/lib/notification-targeting.ts
@@ -0,0 +1,71 @@
+import { prisma } from "@planarchy/db";
+
+type PrismaClient = typeof prisma;
+
+/**
+ * Resolve recipient user IDs for a broadcast target.
+ * Deduplicates results and optionally excludes the sender.
+ */
+export async function resolveRecipients(
+  targetType: string,
+  targetValue: string | null | undefined,
+  db: PrismaClient,
+  excludeUserId?: string,
+): Promise<string[]> {
+  let userIds: string[] = [];
+
+  switch (targetType) {
+    case "user":
+      if (targetValue) userIds = [targetValue];
+      break;
+
+    case "role": {
+      // Find all users with the given systemRole
+      const roleUsers = await db.user.findMany({
+        where: { systemRole: targetValue as "ADMIN" | "MANAGER" | "CONTROLLER" | "USER" | "VIEWER" },
+        select: { id: true },
+      });
+      userIds = roleUsers.map((u) => u.id);
+      break;
+    }
+
+    case "project": {
+      // Find all resources with assignments on this project, then their linked users
+      if (!targetValue) break;
+      const assignments = await db.assignment.findMany({
+        where: { projectId: targetValue, status: { not: "CANCELLED" } },
+        select: { resource: { select: { userId: true } } },
+      });
+      userIds = assignments
+        .map((a) => a.resource.userId)
+        .filter((id): id is string => !!id);
+      break;
+    }
+
+    case "orgUnit": {
+      // Find all resources in this orgUnit, then their linked users
+      if (!targetValue) break;
+      const resources = await db.resource.findMany({
+        where: { orgUnitId: targetValue, isActive: true },
+        select: { userId: true },
+      });
+      userIds = resources
+        .map((r) => r.userId)
+        .filter((id): id is string => !!id);
+      break;
+    }
+
+    case "all": {
+      // User model has no isActive — get all users
+      const allUsers = await db.user.findMany({
+        select: { id: true },
+      });
+      userIds = allUsers.map((u) => u.id);
+      break;
+    }
+  }
+
+  // Deduplicate and exclude sender
+  const unique = [...new Set(userIds)];
+  return excludeUserId ? unique.filter((id) => id !== excludeUserId) : unique;
+}
diff --git a/packages/api/src/lib/rate-card-lookup.ts b/packages/api/src/lib/rate-card-lookup.ts
new file mode 100644
index 0000000..a3f568a
--- /dev/null
+++ b/packages/api/src/lib/rate-card-lookup.ts
@@ -0,0 +1,178 @@
+/**
+ * Rate card lookup logic for auto-filling demand line rates.
+ *
+ * Match priority (highest specificity wins):
+ *   1. Exact client + chapter + role
+ *   2. Client + chapter (any role)
+ *   3. Client + role (any chapter)
+ *   4. Client only (fallback)
+ *   5. Default rate card (no client) + best match
+ *
+ * Within each priority tier, additional criteria (seniority, location,
+ * workType) increase the score.
+ */
+
+export interface RateCardLookupParams {
+  clientId?: string | null;
+  chapter?: string | null;
+  roleId?: string | null;
+  seniority?: string | null;
+  location?: string | null;
+  workType?: string | null;
+  effectiveDate?: Date | null;
+}
+
+export interface RateCardLookupResult {
+  costRateCents: number;
+  billRateCents: number;
+  currency: string;
+  rateCardId: string;
+  rateCardLineId: string;
+  rateCardName: string;
+}
+
+interface RateCardLineRow {
+  id: string;
+  rateCardId: string;
+  roleId: string | null;
+  chapter: string | null;
+  location: string | null;
+  seniority: string | null;
+  workType: string | null;
+  costRateCents: number;
+  billRateCents: number | null;
+  rateCard: {
+    id: string;
+    name: string;
+    currency: string;
+    clientId: string | null;
+  };
+}
+
+/**
+ * Look up the best-matching rate card line for a given set of criteria.
+ * Returns null when no active rate card line matches.
+ */
+export async function lookupRate(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  db: any,
+  params: RateCardLookupParams,
+): Promise<RateCardLookupResult | null> {
+  const effectiveDate = params.effectiveDate ?? new Date();
+
+  // Build rate card filter: active cards, within effective date range
+  const rateCardWhere: Record<string, unknown> = {
+    isActive: true,
+    OR: [
+      { effectiveFrom: null },
+      { effectiveFrom: { lte: effectiveDate } },
+    ],
+    AND: [
+      {
+        OR: [
+          { effectiveTo: null },
+          { effectiveTo: { gte: effectiveDate } },
+        ],
+      },
+    ],
+  };
+
+  // If we have a clientId, look for both client-specific and default (null client) cards
+  if (params.clientId) {
+    rateCardWhere.clientId = { in: [params.clientId, null] };
+  }
+  // If no clientId, only look at default (null client) cards
+  // (don't pass clientId filter at all to keep the OR above valid)
+
+  const lines = (await db.rateCardLine.findMany({
+    where: {
+      rateCard: rateCardWhere,
+    },
+    select: {
+      id: true,
+      rateCardId: true,
+      roleId: true,
+      chapter: true,
+      location: true,
+      seniority: true,
+      workType: true,
+      costRateCents: true,
+      billRateCents: true,
+      rateCard: {
+        select: {
+          id: true,
+          name: true,
+          currency: true,
+          clientId: true,
+        },
+      },
+    },
+  })) as RateCardLineRow[];
+
+  if (lines.length === 0) return null;
+
+  // Score each line. Higher = better match.
+  type ScoredLine = { line: RateCardLineRow; score: number; mismatch: boolean };
+  const scored: ScoredLine[] = lines.map((line) => {
+    let score = 0;
+    let mismatch = false;
+
+    // Client specificity: client-specific cards get a large bonus
+    if (params.clientId && line.rateCard.clientId === params.clientId) {
+      score += 100;
+    } else if (params.clientId && line.rateCard.clientId != null) {
+      // Different client entirely => disqualify
+      mismatch = true;
+    }
+    // Default card (null client) gets no bonus but is a valid fallback
+
+    // Role match
+    if (params.roleId && line.roleId) {
+      if (line.roleId === params.roleId) score += 16;
+      else mismatch = true;
+    }
+
+    // Chapter match
+    if (params.chapter && line.chapter) {
+      if (line.chapter === params.chapter) score += 8;
+      else mismatch = true;
+    }
+
+    // Seniority match
+    if (params.seniority && line.seniority) {
+      if (line.seniority === params.seniority) score += 4;
+      else mismatch = true;
+    }
+
+    // Location match
+    if (params.location && line.location) {
+      if (line.location === params.location) score += 2;
+      else mismatch = true;
+    }
+
+    // Work type match
+    if (params.workType && line.workType) {
+      if (line.workType === params.workType) score += 1;
+      else mismatch = true;
+    }
+
+    return { line, score, mismatch };
+  });
+
+  // Filter out mismatched lines and sort by score descending
+  const candidates = scored
+    .filter((s) => !s.mismatch)
+    .sort((a, b) => b.score - a.score);
+
+  const best = candidates[0];
+  if (!best) return null;
+
+  return {
+    costRateCents: best.line.costRateCents,
+    billRateCents: best.line.billRateCents ?? 0,
+    currency: best.line.rateCard.currency,
+    rateCardId: best.line.rateCard.id,
+    rateCardLineId: best.line.id,
+    rateCardName: best.line.rateCard.name,
+  };
+}
diff --git a/packages/api/src/lib/reminder-scheduler.ts b/packages/api/src/lib/reminder-scheduler.ts
new file mode 100644
index 0000000..1726726
--- /dev/null
+++ b/packages/api/src/lib/reminder-scheduler.ts
@@ -0,0 +1,98 @@
+import { prisma } from "@planarchy/db";
+import { emitReminderDue, emitNotificationCreated } from "../sse/event-bus.js";
+
+const POLL_INTERVAL_MS = 60_000; // 60 seconds
+
+function computeNextRemindAt(current: Date, recurrence: string): Date {
+  const next = new Date(current);
+  switch (recurrence) {
+    case "daily":
+      next.setDate(next.getDate() + 1);
+      break;
+    case "weekly":
+      next.setDate(next.getDate() + 7);
+      break;
+    case "monthly":
+      next.setMonth(next.getMonth() + 1);
+      break;
+    default:
+      return current;
+  }
+  return next;
+}
+
+async function processReminders() {
+  const now = new Date();
+
+  // Find all due reminders
+  const dueReminders = await prisma.notification.findMany({
+    where: {
+      category: "REMINDER",
+      nextRemindAt: { lte: now },
+    },
+    take: 100, // process in batches
+  });
+
+  for (const reminder of dueReminders) {
+    try {
+      if (reminder.recurrence) {
+        // Recurring: create a new notification for this occurrence, advance nextRemindAt
+        const notification = await prisma.notification.create({
+          data: {
+            userId: reminder.userId,
+            category: "NOTIFICATION",
+            type: "REMINDER_DUE",
+            priority: reminder.priority,
+            title: reminder.title,
+            body: reminder.body,
+            entityId: reminder.entityId,
+            entityType: reminder.entityType,
+            link: reminder.link,
+            sourceId: reminder.id,
+            channel: "in_app",
+          },
+        });
+
+        // Advance to next occurrence
+        await prisma.notification.update({
+          where: { id: reminder.id },
+          data: {
+            nextRemindAt: computeNextRemindAt(reminder.nextRemindAt!, reminder.recurrence),
+          },
+        });
+
+        emitNotificationCreated(reminder.userId, notification.id);
+        emitReminderDue(reminder.userId, notification.id);
+      } else {
+        // One-shot: mark the reminder as "fired" by clearing nextRemindAt
+        await prisma.notification.update({
+          where: { id: reminder.id },
+          data: { nextRemindAt: null },
+        });
+
+        emitReminderDue(reminder.userId, reminder.id);
+        emitNotificationCreated(reminder.userId, reminder.id);
+      }
+    } catch (err) {
+      console.error(`[ReminderScheduler] Error processing reminder ${reminder.id}:`, err);
+    }
+  }
+}
+
+let intervalId: ReturnType<typeof setInterval> | null = null;
+
+export function startReminderScheduler(): void {
+  if (intervalId) return; // already running
+  console.log("[ReminderScheduler] Starting (poll every 60s)");
+  // Run immediately to catch up on overdue reminders
+  void processReminders();
+  intervalId = setInterval(() => void processReminders(), POLL_INTERVAL_MS);
+}
+
+export function stopReminderScheduler(): void {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+    console.log("[ReminderScheduler] Stopped");
+  }
+}
diff --git a/packages/api/src/lib/slack-notify.ts b/packages/api/src/lib/slack-notify.ts
new file mode 100644
index 0000000..908b25a
--- /dev/null
+++ b/packages/api/src/lib/slack-notify.ts
@@ -0,0 +1,26 @@
+/**
+ * Slack notification helper.
+ * Sends a simple text message to a Slack incoming webhook URL.
+ */
+
+export async function sendSlackNotification(
+  webhookUrl: string,
+  message: string,
+  _channel?: string,
+): Promise<void> {
+  const body: Record<string, string> = { text: message };
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5_000);
+
+  try {
+    await fetch(webhookUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      signal: controller.signal,
+    });
+  } finally {
+    clearTimeout(timeout);
+  }
+}
diff --git a/packages/api/src/lib/task-actions.ts b/packages/api/src/lib/task-actions.ts
new file mode 100644
index 0000000..8392bce
--- /dev/null
+++ b/packages/api/src/lib/task-actions.ts
@@ -0,0 +1,77 @@
+import { prisma } from "@planarchy/db";
+
+type PrismaClient = typeof prisma;
+
+export interface TaskActionResult {
+  success: boolean;
+  message: string;
+}
+
+export interface TaskActionHandler {
+  /** PermissionKey string value required to execute this action */
+  permission: string;
+  execute: (entityId: string, db: PrismaClient, executorId: string) => Promise<TaskActionResult>;
+}
+
+export const TASK_ACTION_REGISTRY: Record<string, TaskActionHandler> = {
+  approve_vacation: {
+    permission: "approveVacations",
+    execute: async (vacationId, db, _executorId) => {
+      const vacation = await db.vacation.findUnique({
+        where: { id: vacationId },
+        select: { id: true, status: true },
+      });
+      if (!vacation) return { success: false, message: "Vacation not found" };
+      if (vacation.status !== "PENDING") {
+        return { success: false, message: `Vacation is ${vacation.status}, not PENDING` };
+      }
+      await db.vacation.update({
+        where: { id: vacationId },
+        data: { status: "APPROVED" },
+      });
+      return { success: true, message: "Vacation approved" };
+    },
+  },
+
+  reject_vacation: {
+    permission: "approveVacations",
+    execute: async (vacationId, db, _executorId) => {
+      const vacation = await db.vacation.findUnique({
+        where: { id: vacationId },
+        select: { id: true, status: true },
+      });
+      if (!vacation) return { success: false, message: "Vacation not found" };
+      if (vacation.status !== "PENDING") {
+        return { success: false, message: `Vacation is ${vacation.status}, not PENDING` };
+      }
+      await db.vacation.update({
+        where: { id: vacationId },
+        data: { status: "REJECTED" },
+      });
+      return { success: true, message: "Vacation rejected" };
+    },
+  },
+
+  confirm_assignment: {
+    permission: "manageAllocations",
+    execute: async (assignmentId, db, _executorId) => {
+      const assignment = await db.assignment.findUnique({
+        where: { id: assignmentId },
+        select: { id: true, status: true },
+      });
+      if (!assignment) return { success: false, message: "Assignment not found" };
+      if (assignment.status === "CONFIRMED") {
+        return { success: false, message: "Assignment is already CONFIRMED" };
+      }
+      await db.assignment.update({
+        where: { id: assignmentId },
+        data: { status: "CONFIRMED" },
+      });
+      return { success: true, message: "Assignment confirmed" };
+    },
+  },
+};
+
+export function getTaskAction(actionName: string): TaskActionHandler | undefined {
+  return TASK_ACTION_REGISTRY[actionName];
+}
diff --git a/packages/api/src/lib/vacation-conflicts.ts b/packages/api/src/lib/vacation-conflicts.ts
new file mode 100644
index 0000000..44e87b8
--- /dev/null
+++ b/packages/api/src/lib/vacation-conflicts.ts
@@ -0,0 +1,232 @@
+import { VacationStatus } from "@planarchy/db";
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+type DbClient = {
+  vacation: {
+    findUnique: (args: {
+      where: { id: string };
+      select: {
+        id: true;
+        resourceId: true;
+        startDate: true;
+        endDate: true;
+        resource: { select: { chapter: true; displayName: true } };
+      };
+    }) => Promise<{
+      id: string;
+      resourceId: string;
+      startDate: Date;
+      endDate: Date;
+      resource: { chapter: string | null; displayName: string } | null;
+    } | null>;
+    findMany: (args: {
+      where: {
+        resource: { chapter: string };
+        resourceId: { not: string };
+        status: { in: string[] };
+        startDate: { lte: Date };
+        endDate: { gte: Date };
+      };
+      select: {
+        id: true;
+        resourceId: true;
+        startDate: true;
+        endDate: true;
+        resource: { select: { displayName: true } };
+      };
+    }) => Promise<
+      Array<{
+        id: string;
+        resourceId: string;
+        startDate: Date;
+        endDate: Date;
+        resource: { displayName: string } | null;
+      }>
+    >;
+  };
+  resource: {
+    count: (args: {
+      where: { chapter: string; isActive: true };
+    }) => Promise<number>;
+  };
+  notification: {
+    create: (args: {
+      data: {
+        userId: string;
+        type: string;
+        category: string;
+        priority: string;
+        title: string;
+        body: string;
+        entityId: string;
+        entityType: string;
+        link: string;
+        channel: string;
+      };
+    }) => Promise<{ id: string; userId: string }>;
+  };
+};
+
+/** Threshold: warn when more than 50% of a chapter is absent on any single day */
+const OVERLAP_THRESHOLD = 0.5;
+
+export interface VacationConflictResult {
+  warnings: string[];
+}
+
+/**
+ * Check if approving a vacation would cause >50% of a chapter to be absent
+ * on any single day within the vacation period.
+ *
+ * Returns a list of warning strings (empty if no conflicts).
+ * Does NOT block the approval — warnings are advisory only.
+ */
+export async function checkVacationConflicts(
+  db: DbClient,
+  vacationId: string,
+  approverUserId?: string,
+): Promise<VacationConflictResult> {
+  const warnings: string[] = [];
+
+  const vacation = await db.vacation.findUnique({
+    where: { id: vacationId },
+    select: {
+      id: true,
+      resourceId: true,
+      startDate: true,
+      endDate: true,
+      resource: { select: { chapter: true, displayName: true } },
+    },
+  });
+
+  if (!vacation?.resource?.chapter) {
+    return { warnings };
+  }
+
+  const chapter = vacation.resource.chapter;
+
+  // Count active resources in the same chapter
+  const totalInChapter = await db.resource.count({
+    where: { chapter, isActive: true },
+  });
+
+  if (totalInChapter <= 1) {
+    return { warnings };
+  }
+
+  // Find overlapping approved/pending vacations from other resources in the same chapter
+  const overlapping = await db.vacation.findMany({
+    where: {
+      resource: { chapter },
+      resourceId: { not: vacation.resourceId },
+      status: { in: [VacationStatus.APPROVED, VacationStatus.PENDING] },
+      startDate: { lte: vacation.endDate },
+      endDate: { gte: vacation.startDate },
+    },
+    select: {
+      id: true,
+      resourceId: true,
+      startDate: true,
+      endDate: true,
+      resource: { select: { displayName: true } },
+    },
+  });
+
+  if (overlapping.length === 0) {
+    return { warnings };
+  }
+
+  // Check each day of the vacation to find the worst overlap
+  const start = new Date(vacation.startDate);
+  start.setUTCHours(0, 0, 0, 0);
+  const end = new Date(vacation.endDate);
+  end.setUTCHours(0, 0, 0, 0);
+
+  let worstDay: string | null = null;
+  let worstCount = 0;
+
+  const cursor = new Date(start);
+  while (cursor <= end) {
+    // Skip weekends
+    const dow = cursor.getUTCDay();
+    if (dow === 0 || dow === 6) {
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
+      continue;
+    }
+
+    // Count unique resources absent on this day (excluding the current resource)
+    const absentResourceIds = new Set<string>();
+    for (const ov of overlapping) {
+      const ovStart = new Date(ov.startDate);
+      ovStart.setUTCHours(0, 0, 0, 0);
+      const ovEnd = new Date(ov.endDate);
+      ovEnd.setUTCHours(0, 0, 0, 0);
+      if (cursor >= ovStart && cursor <= ovEnd) {
+        absentResourceIds.add(ov.resourceId);
+      }
+    }
+
+    // +1 because the resource being approved would also be absent
+    const totalAbsent = absentResourceIds.size + 1;
+    if (totalAbsent > worstCount) {
+      worstCount = totalAbsent;
+      worstDay = cursor.toISOString().slice(0, 10);
+    }
+
+    cursor.setUTCDate(cursor.getUTCDate() + 1);
+  }
+
+  if (worstCount > 0 && worstCount / totalInChapter > OVERLAP_THRESHOLD) {
+    const pct = Math.round((worstCount / totalInChapter) * 100);
+    const absentNames = overlapping
+      .map((ov) => ov.resource?.displayName ?? "Unknown")
+      .slice(0, 5);
+    const nameList = absentNames.join(", ");
+    const suffix = overlapping.length > 5 ? ` and ${overlapping.length - 5} more` : "";
+
+    const warning = `High absence in chapter "${chapter}" on ${worstDay}: ${worstCount}/${totalInChapter} resources (${pct}%) would be absent. Also off: ${nameList}${suffix}`;
+    warnings.push(warning);
+
+    // Create a notification for the approver if provided
+    if (approverUserId) {
+      const notification = await db.notification.create({
+        data: {
+          userId: approverUserId,
+          type: "VACATION_CONFLICT_WARNING",
+          category: "NOTIFICATION",
+          priority: "HIGH",
+          title: `Vacation conflict warning: ${vacation.resource.displayName}`,
+          body: warning,
+          entityId: vacationId,
+          entityType: "vacation",
+          link: "/vacations",
+          channel: "in_app",
+        },
+      });
+      emitNotificationCreated(approverUserId, notification.id);
+    }
+  }
+
+  return { warnings };
+}
+
+/**
+ * Check conflicts for multiple vacations at once (used by batchApprove).
+ * Returns a map of vacationId -> warnings.
+ */
+export async function checkBatchVacationConflicts(
+  db: DbClient,
+  vacationIds: string[],
+  approverUserId?: string,
+): Promise<Map<string, string[]>> {
+  const results = new Map<string, string[]>();
+
+  for (const id of vacationIds) {
+    const result = await checkVacationConflicts(db, id, approverUserId);
+    if (result.warnings.length > 0) {
+      results.set(id, result.warnings);
+    }
+  }
+
+  return results;
+}
diff --git a/packages/api/src/lib/webhook-dispatcher.ts b/packages/api/src/lib/webhook-dispatcher.ts
new file mode 100644
index 0000000..337f385
--- /dev/null
+++ b/packages/api/src/lib/webhook-dispatcher.ts
@@ -0,0 +1,142 @@
+/**
+ * Outbound webhook dispatcher.
+ *
+ * Fetches active webhooks matching a given event, sends POST requests
+ * with JSON payloads, and optionally signs them with HMAC-SHA256.
+ *
+ * Fire-and-forget — errors are logged, never thrown.
+ */
+import { createHmac } from "node:crypto";
+import { sendSlackNotification } from "./slack-notify.js";
+
+/** Available webhook event types. */
+export const WEBHOOK_EVENTS = [
+  "allocation.created",
+  "allocation.updated",
+  "allocation.deleted",
+  "project.created",
+  "project.status_changed",
+  "vacation.approved",
+  "estimate.submitted",
+  "estimate.approved",
+] as const;
+
+export type WebhookEvent = (typeof WEBHOOK_EVENTS)[number];
+
+interface MinimalDb {
+  webhook: {
+    findMany: (args: {
+      where: { isActive: boolean; events: { has: string } };
+    }) => Promise<
+      Array<{
+        id: string;
+        name: string;
+        url: string;
+        secret: string | null;
+        events: string[];
+      }>
+    >;
+  };
+}
+
+/**
+ * Dispatch an event to all matching active webhooks.
+ * This is fire-and-forget: errors are logged and swallowed.
+ */
+export function dispatchWebhooks(
+  db: MinimalDb,
+  event: string,
+  payload: Record<string, unknown>,
+): void {
+  void _dispatch(db, event, payload);
+}
+
+async function _dispatch(
+  db: MinimalDb,
+  event: string,
+  payload: Record<string, unknown>,
+): Promise<void> {
+  try {
+    const webhooks = await db.webhook.findMany({
+      where: { isActive: true, events: { has: event } },
+    });
+
+    if (webhooks.length === 0) return;
+
+    const timestamp = new Date().toISOString();
+    const body = JSON.stringify({ event, timestamp, payload });
+
+    const promises = webhooks.map((wh) =>
+      _sendToWebhook(wh, event, body, timestamp, payload),
+    );
+
+    await Promise.allSettled(promises);
+  } catch (err) {
+    console.error("[webhook-dispatcher] failed to dispatch:", err);
+  }
+}
+
+async function _sendToWebhook(
+  wh: { id: string; name: string; url: string; secret: string | null },
+  event: string,
+  body: string,
+  timestamp: string,
+  payload: Record<string, unknown>,
+): Promise<void> {
+  try {
+    // Slack-specific path: use the Slack notification helper
+    if (wh.url.includes("hooks.slack.com")) {
+      const message = formatSlackMessage(event, payload);
+      await sendSlackNotification(wh.url, message);
+      return;
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      "X-Webhook-Event": event,
+      "X-Webhook-Timestamp": timestamp,
+    };
+
+    if (wh.secret) {
+      const signature = createHmac("sha256", wh.secret)
+        .update(body)
+        .digest("hex");
+      headers["X-Webhook-Signature"] = signature;
+    }
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5_000);
+
+    try {
+      await fetch(wh.url, {
+        method: "POST",
+        headers,
+        body,
+        signal: controller.signal,
+      });
+    } finally {
+      clearTimeout(timeout);
+    }
+  } catch (err) {
+    console.error(
+      `[webhook-dispatcher] error sending to "${wh.name}" (${wh.id}):`,
+      err,
+    );
+  }
+}
+
+/**
+ * Format a human-readable Slack message from a webhook event.
+ */
+function formatSlackMessage(
+  event: string,
+  payload: Record<string, unknown>,
+): string {
+  const label = event.replace(/\./g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  const id = (payload["id"] as string) ?? (payload["projectId"] as string) ?? "";
+  const name = (payload["name"] as string) ?? "";
+  const parts = [`*${label}*`];
+  if (name) parts.push(`\u2022 ${name}`);
+  if (id) parts.push(`ID: \`${id}\``);
+  return parts.join("\n");
+}
diff --git a/packages/api/src/middleware/logging.ts b/packages/api/src/middleware/logging.ts
new file mode 100644
index 0000000..2568c48
--- /dev/null
+++ b/packages/api/src/middleware/logging.ts
@@ -0,0 +1,64 @@
+import { TRPCError } from "@trpc/server";
+import { logger } from "../lib/logger.js";
+
+const SLOW_THRESHOLD_MS = 500;
+
+/**
+ * Core logging logic for tRPC procedure calls.
+ *
+ * Designed to be wrapped with `t.middleware()` in trpc.ts.
+ * Generates a requestId (UUID) per call and attaches it to the context.
+ *
+ * Log levels:
+ * - debug: normal requests
+ * - warn:  slow requests (>500ms)
+ * - error: failed requests
+ */
+export async function loggingMiddleware(opts: {
+  ctx: { dbUser?: { id: string } | null; requestId?: string };
+  type: "query" | "mutation" | "subscription";
+  path: string;
+  next: (opts: { ctx: Record<string, unknown> }) => Promise<{ ok: boolean }>;
+}) {
+  const { ctx, type, path, next } = opts;
+  const requestId = crypto.randomUUID();
+  const userId = ctx.dbUser?.id ?? "anonymous";
+  const start = performance.now();
+
+  const logBase = {
+    requestId,
+    type,
+    path,
+    userId,
+  };
+
+  try {
+    const result = await next({
+      ctx: { ...ctx, requestId },
+    });
+
+    const durationMs = Math.round(performance.now() - start);
+    const logData = { ...logBase, durationMs, status: "ok" as const };
+
+    if (durationMs > SLOW_THRESHOLD_MS) {
+      logger.warn(logData, "Slow tRPC call");
+    } else {
+      logger.debug(logData, "tRPC call");
+    }
+
+    return result;
+  } catch (error) {
+    const durationMs = Math.round(performance.now() - start);
+    const errorCode =
+      error instanceof TRPCError ? error.code : "INTERNAL_SERVER_ERROR";
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error";
+
+    logger.error(
+      { ...logBase, durationMs, status: "error" as const, errorCode, errorMessage },
+      "tRPC call failed",
+    );
+
+    throw error;
+  }
+}
diff --git a/packages/api/src/router/allocation.ts b/packages/api/src/router/allocation.ts
index 64cafd9..02275a6 100644
--- a/packages/api/src/router/allocation.ts
+++ b/packages/api/src/router/allocation.ts
@@ -14,6 +14,7 @@ import {
 } from "@planarchy/application";
 import {
   AllocationStatus,
+  buildTaskAction,
   CreateAllocationSchema,
   CreateAssignmentSchema,
   CreateDemandRequirementSchema,
@@ -28,7 +29,11 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { anonymizeResource, getAnonymizationDirectory } from "../lib/anonymization.js";
-import { emitAllocationCreated, emitAllocationDeleted, emitAllocationUpdated } from "../sse/event-bus.js";
+import { checkBudgetThresholds } from "../lib/budget-alerts.js";
+import { dispatchWebhooks } from "../lib/webhook-dispatcher.js";
+import { emitAllocationCreated, emitAllocationDeleted, emitAllocationUpdated, emitNotificationCreated } from "../sse/event-bus.js";
+import { generateAutoSuggestions } from "../lib/auto-staffing.js";
+import { invalidateDashboardCache } from "../lib/cache.js";
 import { createTRPCRouter, managerProcedure, protectedProcedure, requirePermission } from "../trpc.js";
 import { PROJECT_BRIEF_SELECT, RESOURCE_BRIEF_SELECT, ROLE_BRIEF_SELECT } from "../db/selects.js";
 
@@ -241,6 +246,14 @@ export const allocationRouter = createTRPCRouter({
         projectId: allocation.projectId,
         resourceId: allocation.resourceId,
       });
+      void dispatchWebhooks(ctx.db, "allocation.created", {
+        id: allocation.id,
+        projectId: allocation.projectId,
+        resourceId: allocation.resourceId,
+      });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, allocation.projectId);
       return allocation;
     }),
 
@@ -444,7 +457,54 @@ export const allocationRouter = createTRPCRouter({
         projectId: demandRequirement.projectId,
         resourceId: null,
       });
+      void invalidateDashboardCache();
 
+      // Create staffing tasks for managers
+      const [project, roleEntity, managers] = await Promise.all([
+        ctx.db.project.findUnique({
+          where: { id: demandRequirement.projectId },
+          select: { name: true },
+        }),
+        demandRequirement.roleId
+          ? ctx.db.role.findUnique({
+              where: { id: demandRequirement.roleId },
+              select: { name: true },
+            })
+          : Promise.resolve(null),
+        ctx.db.user.findMany({
+          where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+          select: { id: true },
+        }),
+      ]);
+      const roleName = roleEntity?.name ?? demandRequirement.role ?? "Unspecified role";
+      const projectName = project?.name ?? "Unknown project";
+      const headcount = demandRequirement.headcount ?? 1;
+
+      for (const manager of managers) {
+        const task = await ctx.db.notification.create({
+          data: {
+            userId: manager.id,
+            category: "TASK",
+            type: "DEMAND_FILL",
+            priority: "NORMAL",
+            title: `Staff demand: ${roleName} for ${projectName}`,
+            body: `${headcount} ${roleName} needed for project ${projectName}`,
+            taskStatus: "OPEN",
+            taskAction: buildTaskAction("fill_demand", demandRequirement.id),
+            entityId: demandRequirement.id,
+            entityType: "demand",
+            link: `/projects/${demandRequirement.projectId}`,
+            channel: "in_app",
+          },
+        });
+        emitNotificationCreated(manager.id, task.id);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, demandRequirement.projectId);
+      // Fire-and-forget: compute and notify top-3 staffing suggestions
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void generateAutoSuggestions(ctx.db as any, demandRequirement.id);
       return demandRequirement;
     }),
 
@@ -466,6 +526,9 @@ export const allocationRouter = createTRPCRouter({
         projectId: updated.projectId,
         resourceId: null,
       });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, updated.projectId);
 
       return updated;
     }),
@@ -487,6 +550,9 @@ export const allocationRouter = createTRPCRouter({
         projectId: assignment.projectId,
         resourceId: assignment.resourceId,
       });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, assignment.projectId);
 
       return assignment;
     }),
@@ -509,6 +575,14 @@ export const allocationRouter = createTRPCRouter({
         projectId: updated.projectId,
         resourceId: updated.resourceId,
       });
+      void dispatchWebhooks(ctx.db, "allocation.updated", {
+        id: updated.id,
+        projectId: updated.projectId,
+        resourceId: updated.resourceId,
+      });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, updated.projectId);
 
       return updated;
     }),
@@ -543,6 +617,13 @@ export const allocationRouter = createTRPCRouter({
       });
 
       emitAllocationDeleted(existing.id, existing.projectId);
+      void dispatchWebhooks(ctx.db, "allocation.deleted", {
+        id: existing.id,
+        projectId: existing.projectId,
+      });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, existing.projectId);
 
       return { success: true };
     }),
@@ -565,6 +646,16 @@ export const allocationRouter = createTRPCRouter({
         projectId: result.updatedDemandRequirement.projectId,
         resourceId: null,
       });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, result.assignment.projectId);
+
+      // If there are still unfilled slots, refresh suggestions for remaining demand
+      if (result.updatedDemandRequirement.headcount > 0
+        && result.updatedDemandRequirement.status !== "COMPLETED") {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        void generateAutoSuggestions(ctx.db as any, result.updatedDemandRequirement.id);
+      }
 
       return result;
     }),
@@ -581,6 +672,9 @@ export const allocationRouter = createTRPCRouter({
       if (result.updatedAllocation) {
         emitAllocationUpdated(result.updatedAllocation);
       }
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, result.createdAllocation.projectId as string);
 
       return result;
     }),
@@ -623,6 +717,9 @@ export const allocationRouter = createTRPCRouter({
         projectId: updated.projectId,
         resourceId: updated.resourceId,
       });
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, updated.projectId);
 
       return updated;
     }),
@@ -657,6 +754,9 @@ export const allocationRouter = createTRPCRouter({
       });
 
       emitAllocationDeleted(existing.id, existing.projectId);
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, existing.projectId);
 
       return { success: true };
     }),
@@ -684,6 +784,9 @@ export const allocationRouter = createTRPCRouter({
       });
 
       emitAllocationDeleted(existing.entry.id, existing.projectId);
+      void invalidateDashboardCache();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      void checkBudgetThresholds(ctx.db as any, existing.projectId);
 
       return { success: true };
     }),
@@ -718,6 +821,13 @@ export const allocationRouter = createTRPCRouter({
       for (const a of existing) {
         emitAllocationDeleted(a.entry.id, a.projectId);
       }
+      void invalidateDashboardCache();
+      // Check budget thresholds for each affected project
+      const affectedProjectIds = [...new Set(existing.map((a) => a.projectId))];
+      for (const pid of affectedProjectIds) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        void checkBudgetThresholds(ctx.db as any, pid);
+      }
 
       return { count: existing.length };
     }),
@@ -762,6 +872,13 @@ export const allocationRouter = createTRPCRouter({
       for (const a of updated) {
         emitAllocationUpdated({ id: a.id, projectId: a.projectId, resourceId: a.resourceId });
       }
+      void invalidateDashboardCache();
+      // Check budget thresholds for each affected project
+      const affectedProjectIds = [...new Set(updated.map((a) => a.projectId))];
+      for (const pid of affectedProjectIds) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        void checkBudgetThresholds(ctx.db as any, pid);
+      }
 
       return { count: updated.length };
     }),
diff --git a/packages/api/src/router/assistant-tools.ts b/packages/api/src/router/assistant-tools.ts
index 184cc29..cd417f5 100644
--- a/packages/api/src/router/assistant-tools.ts
+++ b/packages/api/src/router/assistant-tools.ts
@@ -4,13 +4,27 @@
  */
 
 import { prisma } from "@planarchy/db";
+import { calculateAllocation, countWorkingDays } from "@planarchy/engine/allocation";
 import { computeBudgetStatus } from "@planarchy/engine";
 import type { PermissionKey } from "@planarchy/shared";
+import { parseTaskAction } from "@planarchy/shared";
+import { createAiClient, createDalleClient, isAiConfigured, isDalleConfigured, parseAiError } from "../ai-client.js";
+import { getTaskAction } from "../lib/task-actions.js";
+import { fmtEur } from "../lib/format-utils.js";
+import { resolveRecipients } from "../lib/notification-targeting.js";
+import {
+  emitNotificationCreated,
+  emitTaskAssigned,
+  emitTaskCompleted,
+  emitTaskStatusChanged,
+  emitBroadcastSent,
+} from "../sse/event-bus.js";
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 
 export type ToolContext = {
   db: typeof prisma;
+  userId: string;
   userRole: string;
   permissions: Set<PermissionKey>;
 };
@@ -29,10 +43,6 @@ type ToolExecutor = (params: any, ctx: ToolContext) => Promise<unknown>;
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
-function fmtEur(cents: number): string {
-  return `${(cents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} EUR`;
-}
-
 function fmtDate(d: Date | null | undefined): string | null {
   return d ? d.toISOString().slice(0, 10) : null;
 }
@@ -406,6 +416,941 @@ export const TOOL_DEFINITIONS: ToolDef[] = [
       },
     },
   },
+
+  // ── RESOURCE MANAGEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "create_resource",
+      description: "Create a new resource (employee). Requires manageResources permission. Always confirm with the user before calling.",
+      parameters: {
+        type: "object",
+        properties: {
+          eid: { type: "string", description: "Employee ID (e.g. EMP-042)" },
+          displayName: { type: "string", description: "Full name" },
+          email: { type: "string", description: "Email address" },
+          fte: { type: "number", description: "FTE 0.0-1.0. Default: 1" },
+          lcrCents: { type: "integer", description: "Loaded cost rate in cents (e.g. 8500 = 85 EUR/h)" },
+          ucrCents: { type: "integer", description: "Unloaded cost rate in cents" },
+          chapter: { type: "string", description: "Chapter/team name" },
+          chargeabilityTarget: { type: "number", description: "Chargeability target 0-100. Default: 80" },
+          roleName: { type: "string", description: "Role name (partial match)" },
+          countryCode: { type: "string", description: "Country code (e.g. DE, ES)" },
+          orgUnitName: { type: "string", description: "Org unit name (partial match)" },
+          postalCode: { type: "string", description: "Postal code" },
+        },
+        required: ["eid", "displayName", "lcrCents"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "deactivate_resource",
+      description: "Deactivate a resource (soft delete). Requires manageResources permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          identifier: { type: "string", description: "Resource ID, eid, or name" },
+        },
+        required: ["identifier"],
+      },
+    },
+  },
+
+  // ── VACATION MANAGEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "create_vacation",
+      description: "Create a vacation/leave request. Requires manageVacations permission (or self-service). Always confirm with the user.",
+      parameters: {
+        type: "object",
+        properties: {
+          resourceId: { type: "string", description: "Resource ID or name" },
+          type: { type: "string", description: "Type: VACATION, SICK, PARENTAL, SPECIAL, PUBLIC_HOLIDAY" },
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+          isHalfDay: { type: "boolean", description: "Half day? Default: false" },
+          halfDayPart: { type: "string", description: "MORNING or AFTERNOON (if half day)" },
+          note: { type: "string", description: "Optional note" },
+        },
+        required: ["resourceId", "type", "startDate", "endDate"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "approve_vacation",
+      description: "Approve a pending vacation request. Requires manageVacations permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          vacationId: { type: "string", description: "Vacation ID" },
+        },
+        required: ["vacationId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "reject_vacation",
+      description: "Reject a pending vacation request. Requires manageVacations permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          vacationId: { type: "string", description: "Vacation ID" },
+          reason: { type: "string", description: "Rejection reason" },
+        },
+        required: ["vacationId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "cancel_vacation",
+      description: "Cancel a vacation. Requires manageVacations permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          vacationId: { type: "string", description: "Vacation ID" },
+        },
+        required: ["vacationId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_pending_vacation_approvals",
+      description: "List vacation requests awaiting approval.",
+      parameters: {
+        type: "object",
+        properties: {
+          limit: { type: "integer", description: "Max results. Default: 20" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_team_vacation_overlap",
+      description: "Check if team members have overlapping vacations in a date range.",
+      parameters: {
+        type: "object",
+        properties: {
+          resourceId: { type: "string", description: "Resource ID to check overlap for" },
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+        },
+        required: ["resourceId", "startDate", "endDate"],
+      },
+    },
+  },
+
+  // ── ENTITLEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "get_entitlement_summary",
+      description: "Get vacation entitlement year summary for all resources or a specific resource.",
+      parameters: {
+        type: "object",
+        properties: {
+          year: { type: "integer", description: "Year. Default: current year" },
+          resourceName: { type: "string", description: "Filter by resource name (optional)" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "set_entitlement",
+      description: "Set vacation entitlement for a resource for a year. Requires admin permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          resourceId: { type: "string", description: "Resource ID or name" },
+          year: { type: "integer", description: "Year" },
+          entitledDays: { type: "number", description: "Number of entitled vacation days" },
+          carryoverDays: { type: "number", description: "Carryover days from previous year" },
+        },
+        required: ["resourceId", "year", "entitledDays"],
+      },
+    },
+  },
+
+  // ── DEMAND / STAFFING ──
+  {
+    type: "function",
+    function: {
+      name: "list_demands",
+      description: "List staffing demand requirements for projects. Shows open positions that need to be filled.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Filter by project ID or short code" },
+          status: { type: "string", description: "Filter by status: OPEN, PARTIALLY_FILLED, FILLED, CANCELLED" },
+          limit: { type: "integer", description: "Max results. Default: 30" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_demand",
+      description: "Create a staffing demand requirement on a project. Requires manageAllocations permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID or short code" },
+          roleName: { type: "string", description: "Role name for the demand" },
+          headcount: { type: "integer", description: "Number of people needed. Default: 1" },
+          hoursPerDay: { type: "number", description: "Hours per day required" },
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+        },
+        required: ["projectId", "roleName", "hoursPerDay", "startDate", "endDate"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "fill_demand",
+      description: "Fill/assign a resource to an open demand requirement. Requires manageAllocations permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          demandId: { type: "string", description: "Demand requirement ID" },
+          resourceId: { type: "string", description: "Resource ID or name to assign" },
+        },
+        required: ["demandId", "resourceId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "check_resource_availability",
+      description: "Check if a resource is available in a given date range (no conflicting allocations or vacations).",
+      parameters: {
+        type: "object",
+        properties: {
+          resourceId: { type: "string", description: "Resource ID, eid, or name" },
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+        },
+        required: ["resourceId", "startDate", "endDate"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_staffing_suggestions",
+      description: "Get AI-powered staffing suggestions for a project based on required skills, availability, and cost.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID or short code" },
+          roleName: { type: "string", description: "Role to find candidates for" },
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+          limit: { type: "integer", description: "Max suggestions. Default: 5" },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "find_capacity",
+      description: "Find resources with available capacity in a date range.",
+      parameters: {
+        type: "object",
+        properties: {
+          startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+          endDate: { type: "string", description: "End date YYYY-MM-DD" },
+          minHoursPerDay: { type: "number", description: "Minimum available hours/day. Default: 4" },
+          roleName: { type: "string", description: "Filter by role name" },
+          chapter: { type: "string", description: "Filter by chapter" },
+          limit: { type: "integer", description: "Max results. Default: 20" },
+        },
+        required: ["startDate", "endDate"],
+      },
+    },
+  },
+
+  // ── BLUEPRINT ──
+  {
+    type: "function",
+    function: {
+      name: "list_blueprints",
+      description: "List available project blueprints with their field definitions.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_blueprint",
+      description: "Get detailed blueprint with all field definitions and role presets.",
+      parameters: {
+        type: "object",
+        properties: {
+          identifier: { type: "string", description: "Blueprint ID or name (partial match)" },
+        },
+        required: ["identifier"],
+      },
+    },
+  },
+
+  // ── RATE CARDS ──
+  {
+    type: "function",
+    function: {
+      name: "list_rate_cards",
+      description: "List rate cards with their effective dates and line items.",
+      parameters: {
+        type: "object",
+        properties: {
+          query: { type: "string", description: "Search by name" },
+          limit: { type: "integer", description: "Max results. Default: 20" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "resolve_rate",
+      description: "Look up the applicable rate for a resource, role, or management level from rate cards.",
+      parameters: {
+        type: "object",
+        properties: {
+          resourceId: { type: "string", description: "Resource ID or name" },
+          roleName: { type: "string", description: "Role name" },
+          date: { type: "string", description: "Date to check rate for (YYYY-MM-DD). Default: today" },
+        },
+      },
+    },
+  },
+
+  // ── ESTIMATES ──
+  {
+    type: "function",
+    function: {
+      name: "get_estimate_detail",
+      description: "Get detailed estimate with versions, line items, totals, and commercial terms.",
+      parameters: {
+        type: "object",
+        properties: {
+          estimateId: { type: "string", description: "Estimate ID" },
+        },
+        required: ["estimateId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_estimate",
+      description: "Create a new estimate for a project. Requires manageEstimates permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string", description: "Estimate name" },
+          projectId: { type: "string", description: "Project ID or short code" },
+        },
+        required: ["name", "projectId"],
+      },
+    },
+  },
+
+  // ── ROLES ──
+  {
+    type: "function",
+    function: {
+      name: "create_role",
+      description: "Create a new role. Requires manageResources permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string", description: "Role name" },
+          color: { type: "string", description: "Hex color (e.g. #3b82f6). Default: #6b7280" },
+        },
+        required: ["name"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "update_role",
+      description: "Update a role's name or color. Requires manageResources permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Role ID" },
+          name: { type: "string", description: "New name" },
+          color: { type: "string", description: "New hex color" },
+        },
+        required: ["id"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "delete_role",
+      description: "Delete a role. Requires manageResources permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Role ID" },
+        },
+        required: ["id"],
+      },
+    },
+  },
+
+  // ── CLIENTS ──
+  {
+    type: "function",
+    function: {
+      name: "create_client",
+      description: "Create a new client. Requires manageProjects permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string", description: "Client name" },
+          code: { type: "string", description: "Client code" },
+        },
+        required: ["name"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "update_client",
+      description: "Update a client. Requires manageProjects permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Client ID" },
+          name: { type: "string", description: "New name" },
+          code: { type: "string", description: "New code" },
+        },
+        required: ["id"],
+      },
+    },
+  },
+
+  // ── ADMIN / CONFIG READ TOOLS ──
+  {
+    type: "function",
+    function: {
+      name: "list_countries",
+      description: "List available countries with their working hours and metro cities.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_management_levels",
+      description: "List management level groups and their levels with target percentages.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_utilization_categories",
+      description: "List utilization categories (cost classification for projects).",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_calculation_rules",
+      description: "List calculation rules for cost attribution and chargeability.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_effort_rules",
+      description: "List effort estimation rules with their formulas and conditions.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_experience_multipliers",
+      description: "List experience multipliers that adjust effort estimates based on seniority.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_users",
+      description: "List system users with their roles and linked resources. Requires admin permission.",
+      parameters: {
+        type: "object",
+        properties: {
+          limit: { type: "integer", description: "Max results. Default: 50" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_notifications",
+      description: "List recent notifications for the current user.",
+      parameters: {
+        type: "object",
+        properties: {
+          unreadOnly: { type: "boolean", description: "Only show unread. Default: false" },
+          limit: { type: "integer", description: "Max results. Default: 20" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "mark_notification_read",
+      description: "Mark a notification as read.",
+      parameters: {
+        type: "object",
+        properties: {
+          notificationId: { type: "string", description: "Notification ID" },
+        },
+        required: ["notificationId"],
+      },
+    },
+  },
+
+  // ── DASHBOARD DETAIL ──
+  {
+    type: "function",
+    function: {
+      name: "get_dashboard_detail",
+      description: "Get detailed dashboard data: peak allocation times, top-value resources, demand pipeline, chargeability overview.",
+      parameters: {
+        type: "object",
+        properties: {
+          section: {
+            type: "string",
+            description: "Which section: peak_times, top_resources, demand_pipeline, chargeability_overview, or all",
+          },
+        },
+      },
+    },
+  },
+
+  // ── PROJECT MANAGEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "delete_project",
+      description: "Delete a project. Only DRAFT projects can be deleted. Requires manageProjects permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID or short code" },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
+
+  // ── ORG UNIT MANAGEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "create_org_unit",
+      description: "Create a new organizational unit. Requires admin permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string", description: "Org unit name" },
+          shortName: { type: "string", description: "Short name/code" },
+          level: { type: "integer", description: "Level (5, 6, or 7)" },
+          parentId: { type: "string", description: "Parent org unit ID (optional)" },
+        },
+        required: ["name", "level"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "update_org_unit",
+      description: "Update an organizational unit. Requires admin permission. Always confirm first.",
+      parameters: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Org unit ID" },
+          name: { type: "string", description: "New name" },
+          shortName: { type: "string", description: "New short name" },
+        },
+        required: ["id"],
+      },
+    },
+  },
+
+  // ── COVER ART ──
+  {
+    type: "function",
+    function: {
+      name: "generate_project_cover",
+      description: "Generate an AI cover art image for a project using DALL-E. The image will be stored as the project's cover. Requires manageProjects permission and DALL-E to be configured.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID" },
+          prompt: { type: "string", description: "Optional custom prompt for the AI image generation (e.g. 'futuristic car in neon cityscape'). If not provided, a default automotive/CGI prompt is used based on the project name." },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "remove_project_cover",
+      description: "Remove the cover art image from a project. Requires manageProjects permission.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID" },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
+
+  // ── TASK MANAGEMENT ──
+  {
+    type: "function",
+    function: {
+      name: "list_tasks",
+      description: "List open/pending tasks and approvals for the current user. Returns actionable items that need attention.",
+      parameters: {
+        type: "object",
+        properties: {
+          status: { type: "string", enum: ["OPEN", "IN_PROGRESS", "DONE", "DISMISSED"], description: "Filter by status. Default: OPEN" },
+          limit: { type: "integer", description: "Max results (default 10)" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_task_detail",
+      description: "Get details of a specific task/notification including linked entity information.",
+      parameters: {
+        type: "object",
+        properties: {
+          taskId: { type: "string", description: "Notification/task ID" },
+        },
+        required: ["taskId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "update_task_status",
+      description: "Update the status of a task. Mark as IN_PROGRESS, DONE, or DISMISSED.",
+      parameters: {
+        type: "object",
+        properties: {
+          taskId: { type: "string", description: "Task/notification ID" },
+          status: { type: "string", enum: ["OPEN", "IN_PROGRESS", "DONE", "DISMISSED"], description: "New status" },
+        },
+        required: ["taskId", "status"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "execute_task_action",
+      description: "Execute the machine-readable action associated with a task. For example: approve a vacation, confirm an assignment, etc. The action is encoded in the task's taskAction field.",
+      parameters: {
+        type: "object",
+        properties: {
+          taskId: { type: "string", description: "Task/notification ID containing the action to execute" },
+        },
+        required: ["taskId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_reminder",
+      description: "Create a personal reminder for the current user. Can be one-shot or recurring.",
+      parameters: {
+        type: "object",
+        properties: {
+          title: { type: "string", description: "Reminder title" },
+          body: { type: "string", description: "Optional details" },
+          remindAt: { type: "string", format: "date-time", description: "When to remind (ISO 8601 datetime)" },
+          recurrence: { type: "string", enum: ["daily", "weekly", "monthly"], description: "Optional recurrence pattern" },
+          entityId: { type: "string", description: "Optional: linked entity ID (project, resource, etc.)" },
+          entityType: { type: "string", description: "Optional: entity type (project, resource, vacation, etc.)" },
+        },
+        required: ["title", "remindAt"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_task_for_user",
+      description: "Create a task for a specific user. Requires manageProjects or manageResources permission. The task appears in their task list.",
+      parameters: {
+        type: "object",
+        properties: {
+          userId: { type: "string", description: "Target user ID" },
+          title: { type: "string", description: "Task title" },
+          body: { type: "string", description: "Task description" },
+          priority: { type: "string", enum: ["LOW", "NORMAL", "HIGH", "URGENT"], description: "Priority (default NORMAL)" },
+          dueDate: { type: "string", format: "date-time", description: "Optional due date (ISO 8601)" },
+          taskAction: { type: "string", description: "Optional machine-readable action (format: action_name:entity_id)" },
+          entityId: { type: "string", description: "Optional linked entity ID" },
+          entityType: { type: "string", description: "Optional entity type" },
+        },
+        required: ["userId", "title"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "send_broadcast",
+      description: "Send a notification to a group of users (by role, project members, org unit, or all). Requires manager permission.",
+      parameters: {
+        type: "object",
+        properties: {
+          title: { type: "string", description: "Notification title" },
+          body: { type: "string", description: "Notification body" },
+          targetType: { type: "string", enum: ["user", "role", "project", "orgUnit", "all"], description: "Target audience type" },
+          targetValue: { type: "string", description: "Target value: user ID, role name (ADMIN/MANAGER/CONTROLLER/USER/VIEWER), project ID, or org unit ID" },
+          priority: { type: "string", enum: ["LOW", "NORMAL", "HIGH", "URGENT"], description: "Priority (default NORMAL)" },
+          channel: { type: "string", enum: ["in_app", "email", "both"], description: "Delivery channel (default in_app)" },
+          link: { type: "string", description: "Optional deep-link URL" },
+        },
+        required: ["title", "targetType"],
+      },
+    },
+  },
+
+  // ── INSIGHTS & ANOMALIES ──
+  {
+    type: "function",
+    function: {
+      name: "detect_anomalies",
+      description: "Detect anomalies across all active projects: budget burn rate issues, staffing gaps, utilization outliers, and timeline overruns.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_skill_gaps",
+      description: "Analyze skill supply vs demand across all active projects. Returns which skills are in short supply relative to demand requirements.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_project_health",
+      description: "Get health scores for all active projects based on budget utilization, staffing completeness, and timeline status.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_budget_forecast",
+      description: "Get budget utilization and burn rate per active project. Shows total budget, spent, remaining, and whether burn is ahead or behind schedule.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_insights_summary",
+      description: "Get a summary of anomaly counts by category (budget, staffing, timeline, utilization) plus critical count.",
+      parameters: { type: "object", properties: {} },
+    },
+  },
+
+  // ── REPORTS & COMMENTS ──
+  {
+    type: "function",
+    function: {
+      name: "run_report",
+      description: "Run a dynamic report query on resources, projects, or assignments with flexible column selection and filtering.",
+      parameters: {
+        type: "object",
+        properties: {
+          entity: { type: "string", enum: ["resource", "project", "assignment"], description: "Entity type to query" },
+          columns: {
+            type: "array",
+            items: { type: "string" },
+            description: "Column keys to include (e.g. 'displayName', 'chapter', 'country.name')",
+          },
+          filters: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                field: { type: "string", description: "Field to filter on" },
+                op: { type: "string", enum: ["eq", "neq", "gt", "lt", "gte", "lte", "contains", "in"], description: "Filter operator" },
+                value: { type: "string", description: "Filter value (string)" },
+              },
+              required: ["field", "op", "value"],
+            },
+            description: "Filters to apply",
+          },
+          limit: { type: "integer", description: "Max results. Default: 50" },
+        },
+        required: ["entity", "columns"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "list_comments",
+      description: "List comments (with replies) for a specific entity such as an estimate, scope item, or demand line.",
+      parameters: {
+        type: "object",
+        properties: {
+          entityType: { type: "string", description: "Entity type (e.g. 'estimate', 'estimate_version', 'scope_item', 'demand_line')" },
+          entityId: { type: "string", description: "Entity ID" },
+        },
+        required: ["entityType", "entityId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "lookup_rate",
+      description: "Find the best matching rate card line for given criteria (client, chapter, management level, role, seniority).",
+      parameters: {
+        type: "object",
+        properties: {
+          clientId: { type: "string", description: "Client ID to find rate card for" },
+          chapter: { type: "string", description: "Chapter to match" },
+          managementLevelId: { type: "string", description: "Management level ID to match" },
+          roleName: { type: "string", description: "Role name to match" },
+          seniority: { type: "string", description: "Seniority level to match" },
+        },
+      },
+    },
+  },
+
+  // ── SCENARIO & AI ──
+  {
+    type: "function",
+    function: {
+      name: "simulate_scenario",
+      description: "Run a read-only what-if staffing simulation for a project. Shows cost/hours/utilization impact of adding, removing, or changing resource assignments without persisting changes.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID" },
+          changes: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                assignmentId: { type: "string", description: "Existing assignment ID to modify (omit for new)" },
+                resourceId: { type: "string", description: "Resource ID" },
+                roleId: { type: "string", description: "Role ID" },
+                startDate: { type: "string", description: "Start date YYYY-MM-DD" },
+                endDate: { type: "string", description: "End date YYYY-MM-DD" },
+                hoursPerDay: { type: "number", description: "Hours per day" },
+                remove: { type: "boolean", description: "Set true to remove an existing assignment" },
+              },
+              required: ["startDate", "endDate", "hoursPerDay"],
+            },
+            description: "Array of staffing changes to simulate",
+          },
+        },
+        required: ["projectId", "changes"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "generate_project_narrative",
+      description: "Generate an AI-powered executive narrative for a project covering budget, staffing, timeline risk, and action items. Requires AI to be configured.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID" },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_comment",
+      description: "Add a comment to an entity (estimate, scope item, demand line, etc.). Supports @mentions. Always confirm with the user first.",
+      parameters: {
+        type: "object",
+        properties: {
+          entityType: { type: "string", description: "Entity type (e.g. 'estimate', 'estimate_version', 'scope_item')" },
+          entityId: { type: "string", description: "Entity ID" },
+          body: { type: "string", description: "Comment body text. Use @[Name](userId) for mentions." },
+        },
+        required: ["entityType", "entityId", "body"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "resolve_comment",
+      description: "Mark a comment as resolved (or unresolve it). Only the comment author or an admin can do this.",
+      parameters: {
+        type: "object",
+        properties: {
+          commentId: { type: "string", description: "Comment ID to resolve" },
+          resolved: { type: "boolean", description: "Set to true to resolve, false to unresolve. Default: true" },
+        },
+        required: ["commentId"],
+      },
+    },
+  },
 ];
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
@@ -1559,6 +2504,2841 @@ const executors = {
       shortCode: project.shortCode,
     };
   },
+
+  // ── RESOURCE MANAGEMENT ──
+
+  async create_resource(params: {
+    eid: string; displayName: string; email?: string;
+    fte?: number; lcrCents: number; ucrCents?: number;
+    chapter?: string; chargeabilityTarget?: number;
+    roleName?: string; countryCode?: string; orgUnitName?: string;
+    postalCode?: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+
+    const existing = await ctx.db.resource.findUnique({ where: { eid: params.eid }, select: { id: true } });
+    if (existing) return { error: `Resource with EID "${params.eid}" already exists.` };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const data: Record<string, any> = {
+      eid: params.eid,
+      displayName: params.displayName,
+      fte: params.fte ?? 1,
+      lcrCents: params.lcrCents,
+      ucrCents: params.ucrCents ?? Math.round(params.lcrCents * 0.7),
+      chargeabilityTarget: params.chargeabilityTarget ?? 80,
+      isActive: true,
+      skills: [],
+    };
+    if (params.email) data.email = params.email;
+    if (params.chapter) data.chapter = params.chapter;
+    if (params.postalCode) data.postalCode = params.postalCode;
+
+    if (params.roleName) {
+      const role = await ctx.db.role.findFirst({
+        where: { name: { contains: params.roleName, mode: "insensitive" } },
+        select: { id: true },
+      });
+      if (role) data.roleId = role.id;
+    }
+    if (params.countryCode) {
+      const country = await ctx.db.country.findFirst({
+        where: { code: { equals: params.countryCode, mode: "insensitive" } },
+        select: { id: true },
+      });
+      if (country) data.countryId = country.id;
+    }
+    if (params.orgUnitName) {
+      const ou = await ctx.db.orgUnit.findFirst({
+        where: { name: { contains: params.orgUnitName, mode: "insensitive" } },
+        select: { id: true },
+      });
+      if (ou) data.orgUnitId = ou.id;
+    }
+
+    const resource = await ctx.db.resource.create({
+      data: data as Parameters<typeof ctx.db.resource.create>[0]["data"],
+      select: { id: true, eid: true, displayName: true },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["resource"],
+      success: true,
+      message: `Created resource: ${resource.displayName} (${resource.eid})`,
+      resourceId: resource.id,
+    };
+  },
+
+  async deactivate_resource(params: { identifier: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+
+    let resource = await ctx.db.resource.findUnique({
+      where: { id: params.identifier },
+      select: { id: true, displayName: true, eid: true },
+    });
+    if (!resource) {
+      resource = await ctx.db.resource.findUnique({
+        where: { eid: params.identifier },
+        select: { id: true, displayName: true, eid: true },
+      });
+    }
+    if (!resource) {
+      resource = await ctx.db.resource.findFirst({
+        where: { displayName: { contains: params.identifier, mode: "insensitive" } },
+        select: { id: true, displayName: true, eid: true },
+      });
+    }
+    if (!resource) return { error: `Resource not found: ${params.identifier}` };
+
+    await ctx.db.resource.update({ where: { id: resource.id }, data: { isActive: false } });
+    return {
+      __action: "invalidate",
+      scope: ["resource"],
+      success: true,
+      message: `Deactivated resource: ${resource.displayName} (${resource.eid})`,
+    };
+  },
+
+  // ── VACATION MANAGEMENT ──
+
+  async create_vacation(params: {
+    resourceId: string; type: string;
+    startDate: string; endDate: string;
+    isHalfDay?: boolean; halfDayPart?: string; note?: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageVacations" as PermissionKey);
+
+    const validTypes = ["VACATION", "SICK", "PARENTAL", "SPECIAL", "PUBLIC_HOLIDAY"];
+    if (!validTypes.includes(params.type)) {
+      return { error: `Invalid type: ${params.type}. Valid: ${validTypes.join(", ")}` };
+    }
+
+    let resource = await ctx.db.resource.findUnique({
+      where: { id: params.resourceId },
+      select: { id: true, displayName: true },
+    });
+    if (!resource) {
+      resource = await ctx.db.resource.findFirst({
+        where: { displayName: { contains: params.resourceId, mode: "insensitive" } },
+        select: { id: true, displayName: true },
+      });
+    }
+    if (!resource) return { error: `Resource not found: ${params.resourceId}` };
+
+    // We need a requestedById — use a system/admin user as fallback
+    const systemUser = await ctx.db.user.findFirst({ select: { id: true }, orderBy: { createdAt: "asc" } });
+    if (!systemUser) return { error: "No users found in system to set as requester." };
+
+    const vacation = await ctx.db.vacation.create({
+      data: {
+        resourceId: resource.id,
+        type: params.type as unknown as import("@planarchy/db").VacationType,
+        startDate: new Date(params.startDate),
+        endDate: new Date(params.endDate),
+        status: "PENDING",
+        requestedById: systemUser.id,
+        ...(params.isHalfDay ? { isHalfDay: true } : {}),
+        ...(params.halfDayPart ? { halfDayPart: params.halfDayPart } : {}),
+        ...(params.note ? { note: params.note } : {}),
+      },
+      select: { id: true, status: true },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["vacation"],
+      success: true,
+      message: `Created ${params.type} for ${resource.displayName}: ${params.startDate} to ${params.endDate} (status: PENDING)`,
+      vacationId: vacation.id,
+    };
+  },
+
+  async approve_vacation(params: { vacationId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageVacations" as PermissionKey);
+    const vacation = await ctx.db.vacation.findUnique({
+      where: { id: params.vacationId },
+      select: { id: true, status: true, resource: { select: { displayName: true } } },
+    });
+    if (!vacation) return { error: `Vacation not found: ${params.vacationId}` };
+    if (vacation.status !== "PENDING") return { error: `Vacation is ${vacation.status}, not PENDING` };
+
+    await ctx.db.vacation.update({ where: { id: params.vacationId }, data: { status: "APPROVED" } });
+    return {
+      __action: "invalidate",
+      scope: ["vacation"],
+      success: true,
+      message: `Approved vacation for ${vacation.resource.displayName}`,
+    };
+  },
+
+  async reject_vacation(params: { vacationId: string; reason?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageVacations" as PermissionKey);
+    const vacation = await ctx.db.vacation.findUnique({
+      where: { id: params.vacationId },
+      select: { id: true, status: true, resource: { select: { displayName: true } } },
+    });
+    if (!vacation) return { error: `Vacation not found: ${params.vacationId}` };
+    if (vacation.status !== "PENDING") return { error: `Vacation is ${vacation.status}, not PENDING` };
+
+    await ctx.db.vacation.update({
+      where: { id: params.vacationId },
+      data: { status: "REJECTED", ...(params.reason ? { rejectionReason: params.reason } : {}) },
+    });
+    return {
+      __action: "invalidate",
+      scope: ["vacation"],
+      success: true,
+      message: `Rejected vacation for ${vacation.resource.displayName}${params.reason ? `: ${params.reason}` : ""}`,
+    };
+  },
+
+  async cancel_vacation(params: { vacationId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageVacations" as PermissionKey);
+    const vacation = await ctx.db.vacation.findUnique({
+      where: { id: params.vacationId },
+      select: { id: true, status: true, resource: { select: { displayName: true } } },
+    });
+    if (!vacation) return { error: `Vacation not found: ${params.vacationId}` };
+
+    await ctx.db.vacation.update({ where: { id: params.vacationId }, data: { status: "CANCELLED" } });
+    return {
+      __action: "invalidate",
+      scope: ["vacation"],
+      success: true,
+      message: `Cancelled vacation for ${vacation.resource.displayName}`,
+    };
+  },
+
+  async get_pending_vacation_approvals(params: { limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 20, 50);
+    const vacations = await ctx.db.vacation.findMany({
+      where: { status: "PENDING" },
+      select: {
+        id: true, type: true, startDate: true, endDate: true, isHalfDay: true,
+        resource: { select: { displayName: true, eid: true, chapter: true } },
+      },
+      take: limit,
+      orderBy: { createdAt: "asc" },
+    });
+    return vacations.map((v) => ({
+      id: v.id,
+      resource: v.resource.displayName,
+      eid: v.resource.eid,
+      chapter: v.resource.chapter,
+      type: v.type,
+      start: fmtDate(v.startDate),
+      end: fmtDate(v.endDate),
+      isHalfDay: v.isHalfDay,
+    }));
+  },
+
+  async get_team_vacation_overlap(params: {
+    resourceId: string; startDate: string; endDate: string;
+  }, ctx: ToolContext) {
+    const resource = await ctx.db.resource.findUnique({
+      where: { id: params.resourceId },
+      select: { id: true, displayName: true, chapter: true },
+    });
+    if (!resource) return { error: `Resource not found: ${params.resourceId}` };
+
+    const start = new Date(params.startDate);
+    const end = new Date(params.endDate);
+
+    // Find team members in same chapter
+    const teamVacations = await ctx.db.vacation.findMany({
+      where: {
+        resource: { chapter: resource.chapter, id: { not: resource.id }, isActive: true },
+        status: { in: ["APPROVED", "PENDING"] },
+        startDate: { lte: end },
+        endDate: { gte: start },
+      },
+      select: {
+        type: true, startDate: true, endDate: true, status: true,
+        resource: { select: { displayName: true } },
+      },
+      take: 20,
+    });
+
+    return {
+      resource: resource.displayName,
+      chapter: resource.chapter,
+      period: `${params.startDate} to ${params.endDate}`,
+      overlappingVacations: teamVacations.map((v) => ({
+        resource: v.resource.displayName,
+        type: v.type,
+        status: v.status,
+        start: fmtDate(v.startDate),
+        end: fmtDate(v.endDate),
+      })),
+      overlapCount: teamVacations.length,
+    };
+  },
+
+  // ── ENTITLEMENT ──
+
+  async get_entitlement_summary(params: { year?: number; resourceName?: string }, ctx: ToolContext) {
+    const year = params.year ?? new Date().getFullYear();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = { year };
+    if (params.resourceName) {
+      where.resource = { displayName: { contains: params.resourceName, mode: "insensitive" } };
+    }
+    const entitlements = await ctx.db.vacationEntitlement.findMany({
+      where,
+      select: {
+        entitledDays: true, carryoverDays: true, usedDays: true,
+        resource: { select: { displayName: true, eid: true } },
+      },
+      take: 50,
+      orderBy: { resource: { displayName: "asc" } },
+    });
+    return entitlements.map((e) => ({
+      resource: e.resource.displayName,
+      eid: e.resource.eid,
+      year,
+      entitled: e.entitledDays,
+      carryover: e.carryoverDays ?? 0,
+      used: e.usedDays,
+      remaining: e.entitledDays + (e.carryoverDays ?? 0) - e.usedDays,
+    }));
+  },
+
+  async set_entitlement(params: {
+    resourceId: string; year: number; entitledDays: number; carryoverDays?: number;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageVacations" as PermissionKey);
+
+    let resource = await ctx.db.resource.findUnique({
+      where: { id: params.resourceId },
+      select: { id: true, displayName: true },
+    });
+    if (!resource) {
+      resource = await ctx.db.resource.findFirst({
+        where: { displayName: { contains: params.resourceId, mode: "insensitive" } },
+        select: { id: true, displayName: true },
+      });
+    }
+    if (!resource) return { error: `Resource not found: ${params.resourceId}` };
+
+    await ctx.db.vacationEntitlement.upsert({
+      where: { resourceId_year: { resourceId: resource.id, year: params.year } },
+      create: {
+        resourceId: resource.id,
+        year: params.year,
+        entitledDays: params.entitledDays,
+        carryoverDays: params.carryoverDays ?? 0,
+        usedDays: 0,
+      },
+      update: {
+        entitledDays: params.entitledDays,
+        ...(params.carryoverDays !== undefined ? { carryoverDays: params.carryoverDays } : {}),
+      },
+    });
+
+    return {
+      success: true,
+      message: `Set entitlement for ${resource.displayName} (${params.year}): ${params.entitledDays} days${params.carryoverDays ? ` + ${params.carryoverDays} carryover` : ""}`,
+    };
+  },
+
+  // ── DEMAND / STAFFING ──
+
+  async list_demands(params: { projectId?: string; status?: string; limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 30, 50);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = {};
+    if (params.status) where.status = params.status;
+    if (params.projectId) {
+      const project = await ctx.db.project.findFirst({
+        where: {
+          OR: [
+            { id: params.projectId },
+            { shortCode: { contains: params.projectId, mode: "insensitive" } },
+          ],
+        },
+        select: { id: true },
+      });
+      if (project) where.projectId = project.id;
+    }
+
+    const demands = await ctx.db.demandRequirement.findMany({
+      where,
+      select: {
+        id: true, status: true, headcount: true,
+        hoursPerDay: true, startDate: true, endDate: true,
+        role: true, // String? field
+        roleEntity: { select: { name: true, color: true } },
+        project: { select: { name: true, shortCode: true } },
+        _count: { select: { assignments: true } },
+      },
+      take: limit,
+      orderBy: { startDate: "desc" },
+    });
+
+    return demands.map((d) => ({
+      id: d.id,
+      project: d.project.name,
+      projectCode: d.project.shortCode,
+      role: d.roleEntity?.name ?? d.role ?? "Unspecified",
+      status: d.status,
+      headcount: d.headcount,
+      filled: d._count.assignments,
+      remaining: d.headcount - d._count.assignments,
+      hoursPerDay: d.hoursPerDay,
+      start: fmtDate(d.startDate),
+      end: fmtDate(d.endDate),
+    }));
+  },
+
+  async create_demand(params: {
+    projectId: string; roleName: string; headcount?: number;
+    hoursPerDay: number; startDate: string; endDate: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageAllocations" as PermissionKey);
+
+    const project = await ctx.db.project.findFirst({
+      where: {
+        OR: [
+          { id: params.projectId },
+          { shortCode: { contains: params.projectId, mode: "insensitive" } },
+        ],
+      },
+      select: { id: true, name: true, shortCode: true },
+    });
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    const role = await ctx.db.role.findFirst({
+      where: { name: { contains: params.roleName, mode: "insensitive" } },
+      select: { id: true, name: true },
+    });
+    if (!role) return { error: `Role not found: ${params.roleName}` };
+
+    const demand = await ctx.db.demandRequirement.create({
+      data: {
+        projectId: project.id,
+        roleId: role.id,
+        headcount: params.headcount ?? 1,
+        hoursPerDay: params.hoursPerDay,
+        percentage: (params.hoursPerDay / 8) * 100,
+        startDate: new Date(params.startDate),
+        endDate: new Date(params.endDate),
+        status: "PROPOSED",
+      },
+      select: { id: true },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["allocation"],
+      success: true,
+      message: `Created demand: ${role.name} × ${params.headcount ?? 1} for ${project.name} (${project.shortCode}), ${params.hoursPerDay}h/day, ${params.startDate} to ${params.endDate}`,
+      demandId: demand.id,
+    };
+  },
+
+  async fill_demand(params: { demandId: string; resourceId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageAllocations" as PermissionKey);
+
+    const demand = await ctx.db.demandRequirement.findUnique({
+      where: { id: params.demandId },
+      select: {
+        id: true, status: true, headcount: true,
+        hoursPerDay: true, startDate: true, endDate: true,
+        roleId: true, role: true,
+        roleEntity: { select: { name: true } },
+        project: { select: { id: true, name: true, shortCode: true } },
+        _count: { select: { assignments: true } },
+      },
+    });
+    if (!demand) return { error: `Demand not found: ${params.demandId}` };
+
+    const filledCount = demand._count.assignments;
+    if (filledCount >= demand.headcount) return { error: "Demand is already fully filled." };
+
+    let resource = await ctx.db.resource.findUnique({
+      where: { id: params.resourceId },
+      select: { id: true, displayName: true, lcrCents: true },
+    });
+    if (!resource) {
+      resource = await ctx.db.resource.findFirst({
+        where: { displayName: { contains: params.resourceId, mode: "insensitive" } },
+        select: { id: true, displayName: true, lcrCents: true },
+      });
+    }
+    if (!resource) return { error: `Resource not found: ${params.resourceId}` };
+
+    const roleName = demand.roleEntity?.name ?? demand.role ?? null;
+    const dailyCostCents = Math.round(resource.lcrCents * demand.hoursPerDay);
+    const assignment = await ctx.db.assignment.create({
+      data: {
+        resourceId: resource.id,
+        projectId: demand.project.id,
+        startDate: demand.startDate,
+        endDate: demand.endDate,
+        hoursPerDay: demand.hoursPerDay,
+        percentage: (demand.hoursPerDay / 8) * 100,
+        dailyCostCents,
+        status: "PROPOSED",
+        ...(roleName ? { role: roleName } : {}),
+        demandRequirementId: demand.id,
+      },
+      select: { id: true },
+    });
+
+    // Check if all headcount positions are now filled
+    const newFilled = filledCount + 1;
+    if (newFilled >= demand.headcount) {
+      await ctx.db.demandRequirement.update({
+        where: { id: demand.id },
+        data: { status: "COMPLETED" },
+      });
+    }
+
+    return {
+      __action: "invalidate",
+      scope: ["allocation", "timeline"],
+      success: true,
+      message: `Assigned ${resource.displayName} to ${roleName ?? "demand"} on ${demand.project.name} (${demand.project.shortCode})`,
+      assignmentId: assignment.id,
+    };
+  },
+
+  async check_resource_availability(params: {
+    resourceId: string; startDate: string; endDate: string;
+  }, ctx: ToolContext) {
+    let resource = await ctx.db.resource.findUnique({
+      where: { id: params.resourceId },
+      select: { id: true, displayName: true, fte: true },
+    });
+    if (!resource) {
+      resource = await ctx.db.resource.findUnique({
+        where: { eid: params.resourceId },
+        select: { id: true, displayName: true, fte: true },
+      });
+    }
+    if (!resource) {
+      resource = await ctx.db.resource.findFirst({
+        where: { displayName: { contains: params.resourceId, mode: "insensitive" } },
+        select: { id: true, displayName: true, fte: true },
+      });
+    }
+    if (!resource) return { error: `Resource not found: ${params.resourceId}` };
+
+    const start = new Date(params.startDate);
+    const end = new Date(params.endDate);
+
+    const [allocations, vacations] = await Promise.all([
+      ctx.db.assignment.findMany({
+        where: {
+          resourceId: resource.id,
+          status: { not: "CANCELLED" },
+          startDate: { lte: end },
+          endDate: { gte: start },
+        },
+        select: {
+          hoursPerDay: true, startDate: true, endDate: true, status: true,
+          project: { select: { name: true, shortCode: true } },
+        },
+      }),
+      ctx.db.vacation.findMany({
+        where: {
+          resourceId: resource.id,
+          status: { in: ["APPROVED", "PENDING"] },
+          startDate: { lte: end },
+          endDate: { gte: start },
+        },
+        select: { type: true, startDate: true, endDate: true, isHalfDay: true },
+      }),
+    ]);
+
+    const totalHoursBooked = allocations.reduce((sum, a) => sum + a.hoursPerDay, 0);
+    const maxHours = resource.fte * 8;
+    const availableHoursPerDay = Math.max(0, maxHours - totalHoursBooked);
+
+    return {
+      resource: resource.displayName,
+      period: `${params.startDate} to ${params.endDate}`,
+      fte: resource.fte,
+      maxHoursPerDay: maxHours,
+      currentBookedHoursPerDay: totalHoursBooked,
+      availableHoursPerDay,
+      isFullyAvailable: totalHoursBooked === 0 && vacations.length === 0,
+      existingAllocations: allocations.map((a) => ({
+        project: `${a.project.name} (${a.project.shortCode})`,
+        hoursPerDay: a.hoursPerDay,
+        status: a.status,
+        start: fmtDate(a.startDate),
+        end: fmtDate(a.endDate),
+      })),
+      vacations: vacations.map((v) => ({
+        type: v.type,
+        start: fmtDate(v.startDate),
+        end: fmtDate(v.endDate),
+        isHalfDay: v.isHalfDay,
+      })),
+    };
+  },
+
+  async get_staffing_suggestions(params: {
+    projectId: string; roleName?: string;
+    startDate?: string; endDate?: string; limit?: number;
+  }, ctx: ToolContext) {
+    const limit = params.limit ?? 5;
+
+    const project = await ctx.db.project.findFirst({
+      where: {
+        OR: [
+          { id: params.projectId },
+          { shortCode: { contains: params.projectId, mode: "insensitive" } },
+        ],
+      },
+      select: { id: true, name: true, shortCode: true, startDate: true, endDate: true },
+    });
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    const start = params.startDate ? new Date(params.startDate) : project.startDate ?? new Date();
+    const end = params.endDate ? new Date(params.endDate) : project.endDate ?? new Date();
+
+    // Find available resources
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const resourceWhere: Record<string, any> = { isActive: true };
+    if (params.roleName) {
+      resourceWhere.areaRole = { name: { contains: params.roleName, mode: "insensitive" } };
+    }
+
+    const resources = await ctx.db.resource.findMany({
+      where: resourceWhere,
+      select: {
+        id: true, displayName: true, eid: true, fte: true, lcrCents: true,
+        areaRole: { select: { name: true } },
+        chapter: true,
+        assignments: {
+          where: {
+            status: { not: "CANCELLED" },
+            startDate: { lte: end },
+            endDate: { gte: start },
+          },
+          select: { hoursPerDay: true },
+        },
+      },
+      take: 50,
+    });
+
+    // Score by availability
+    const scored = resources.map((r) => {
+      const bookedHours = r.assignments.reduce((sum, a) => sum + a.hoursPerDay, 0);
+      const maxHours = r.fte * 8;
+      const available = Math.max(0, maxHours - bookedHours);
+      return {
+        id: r.id,
+        name: r.displayName,
+        eid: r.eid,
+        role: r.areaRole?.name ?? null,
+        chapter: r.chapter,
+        fte: r.fte,
+        lcr: fmtEur(r.lcrCents),
+        availableHoursPerDay: Math.round(available * 10) / 10,
+        utilization: maxHours > 0 ? Math.round((bookedHours / maxHours) * 100) : 0,
+      };
+    })
+      .filter((r) => r.availableHoursPerDay > 0)
+      .sort((a, b) => b.availableHoursPerDay - a.availableHoursPerDay)
+      .slice(0, limit);
+
+    return {
+      project: `${project.name} (${project.shortCode})`,
+      period: `${fmtDate(start)} to ${fmtDate(end)}`,
+      suggestions: scored,
+    };
+  },
+
+  async find_capacity(params: {
+    startDate: string; endDate: string;
+    minHoursPerDay?: number; roleName?: string;
+    chapter?: string; limit?: number;
+  }, ctx: ToolContext) {
+    const limit = params.limit ?? 20;
+    const minHours = params.minHoursPerDay ?? 4;
+    const start = new Date(params.startDate);
+    const end = new Date(params.endDate);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = { isActive: true };
+    if (params.roleName) {
+      where.areaRole = { name: { contains: params.roleName, mode: "insensitive" } };
+    }
+    if (params.chapter) {
+      where.chapter = { contains: params.chapter, mode: "insensitive" };
+    }
+
+    const resources = await ctx.db.resource.findMany({
+      where,
+      select: {
+        id: true, displayName: true, eid: true, fte: true,
+        areaRole: { select: { name: true } },
+        chapter: true,
+        assignments: {
+          where: {
+            status: { not: "CANCELLED" },
+            startDate: { lte: end },
+            endDate: { gte: start },
+          },
+          select: { hoursPerDay: true },
+        },
+      },
+      take: 100,
+    });
+
+    const available = resources
+      .map((r) => {
+        const booked = r.assignments.reduce((sum, a) => sum + a.hoursPerDay, 0);
+        const maxH = r.fte * 8;
+        return {
+          id: r.id,
+          name: r.displayName,
+          eid: r.eid,
+          role: r.areaRole?.name ?? null,
+          chapter: r.chapter,
+          availableHoursPerDay: Math.round((maxH - booked) * 10) / 10,
+        };
+      })
+      .filter((r) => r.availableHoursPerDay >= minHours)
+      .sort((a, b) => b.availableHoursPerDay - a.availableHoursPerDay)
+      .slice(0, limit);
+
+    return {
+      period: `${params.startDate} to ${params.endDate}`,
+      minHoursFilter: minHours,
+      results: available,
+      totalFound: available.length,
+    };
+  },
+
+  // ── BLUEPRINT ──
+
+  async list_blueprints(_params: Record<string, never>, ctx: ToolContext) {
+    const blueprints = await ctx.db.blueprint.findMany({
+      select: {
+        id: true, name: true,
+        _count: { select: { projects: true } },
+      },
+      orderBy: { name: "asc" },
+    });
+    return blueprints.map((b) => ({
+      id: b.id,
+      name: b.name,
+      projectCount: b._count.projects,
+    }));
+  },
+
+  async get_blueprint(params: { identifier: string }, ctx: ToolContext) {
+    let bp = await ctx.db.blueprint.findUnique({
+      where: { id: params.identifier },
+      select: { id: true, name: true, fieldDefs: true, rolePresets: true },
+    });
+    if (!bp) {
+      bp = await ctx.db.blueprint.findFirst({
+        where: { name: { contains: params.identifier, mode: "insensitive" } },
+        select: { id: true, name: true, fieldDefs: true, rolePresets: true },
+      });
+    }
+    if (!bp) return { error: `Blueprint not found: ${params.identifier}` };
+    return {
+      id: bp.id,
+      name: bp.name,
+      fieldDefs: bp.fieldDefs,
+      rolePresets: bp.rolePresets,
+    };
+  },
+
+  // ── RATE CARDS ──
+
+  async list_rate_cards(params: { query?: string; limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 20, 50);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = { isActive: true };
+    if (params.query) {
+      where.name = { contains: params.query, mode: "insensitive" };
+    }
+    const cards = await ctx.db.rateCard.findMany({
+      where,
+      select: {
+        id: true, name: true, effectiveFrom: true, effectiveTo: true,
+        _count: { select: { lines: true } },
+      },
+      take: limit,
+      orderBy: { effectiveFrom: "desc" },
+    });
+    return cards.map((c) => ({
+      id: c.id,
+      name: c.name,
+      effectiveFrom: fmtDate(c.effectiveFrom),
+      effectiveTo: fmtDate(c.effectiveTo),
+      lineCount: c._count.lines,
+    }));
+  },
+
+  async resolve_rate(params: { resourceId?: string; roleName?: string; date?: string }, ctx: ToolContext) {
+    const date = params.date ? new Date(params.date) : new Date();
+
+    // Find active rate card for this date
+    const card = await ctx.db.rateCard.findFirst({
+      where: {
+        isActive: true,
+        effectiveFrom: { lte: date },
+        OR: [
+          { effectiveTo: null },
+          { effectiveTo: { gte: date } },
+        ],
+      },
+      select: {
+        id: true, name: true,
+        lines: {
+          select: {
+            id: true, costRateCents: true, billRateCents: true,
+            role: { select: { name: true } },
+            seniority: true, chapter: true, location: true,
+          },
+        },
+      },
+      orderBy: { effectiveFrom: "desc" },
+    });
+
+    if (!card) return { error: "No active rate card found for the given date." };
+
+    // If resource specified, try to match their role
+    if (params.resourceId) {
+      let resource = await ctx.db.resource.findUnique({
+        where: { id: params.resourceId },
+        select: { displayName: true, areaRole: { select: { name: true } }, managementLevelGroup: { select: { name: true } } },
+      });
+      if (!resource) {
+        resource = await ctx.db.resource.findFirst({
+          where: { displayName: { contains: params.resourceId, mode: "insensitive" } },
+          select: { displayName: true, areaRole: { select: { name: true } }, managementLevelGroup: { select: { name: true } } },
+        });
+      }
+
+      if (resource) {
+        const match = card.lines.find((l) =>
+          l.role?.name === resource!.areaRole?.name,
+        );
+        if (match) {
+          return {
+            rateCard: card.name,
+            resource: resource.displayName,
+            rate: fmtEur(match.costRateCents),
+            rateCents: match.costRateCents,
+            matchedBy: match.role?.name ? `role: ${match.role.name}` : "unknown",
+          };
+        }
+      }
+    }
+
+    // Return all lines
+    return {
+      rateCard: card.name,
+      lines: card.lines.map((l) => ({
+        role: l.role?.name ?? null,
+        seniority: l.seniority,
+        chapter: l.chapter,
+        location: l.location,
+        costRate: fmtEur(l.costRateCents),
+        billRate: l.billRateCents != null ? fmtEur(l.billRateCents) : null,
+      })),
+    };
+  },
+
+  // ── ESTIMATES ──
+
+  async get_estimate_detail(params: { estimateId: string }, ctx: ToolContext) {
+    const estimate = await ctx.db.estimate.findUnique({
+      where: { id: params.estimateId },
+      select: {
+        id: true, name: true, status: true, latestVersionNumber: true,
+        project: { select: { name: true, shortCode: true } },
+        versions: {
+          select: {
+            id: true, versionNumber: true, status: true, label: true,
+            notes: true, lockedAt: true,
+            _count: { select: { demandLines: true } },
+          },
+          orderBy: { versionNumber: "desc" },
+          take: 5,
+        },
+      },
+    });
+    if (!estimate) return { error: `Estimate not found: ${params.estimateId}` };
+
+    return {
+      id: estimate.id,
+      name: estimate.name,
+      status: estimate.status,
+      project: estimate.project?.name ?? null,
+      projectCode: estimate.project?.shortCode ?? null,
+      latestVersion: estimate.latestVersionNumber,
+      versions: estimate.versions.map((v) => ({
+        id: v.id,
+        version: v.versionNumber,
+        status: v.status,
+        label: v.label,
+        demandLineCount: v._count.demandLines,
+        lockedAt: v.lockedAt ? fmtDate(v.lockedAt) : null,
+      })),
+    };
+  },
+
+  async create_estimate(params: { name: string; projectId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    const project = await ctx.db.project.findFirst({
+      where: {
+        OR: [
+          { id: params.projectId },
+          { shortCode: { contains: params.projectId, mode: "insensitive" } },
+        ],
+      },
+      select: { id: true, name: true, shortCode: true },
+    });
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    const estimate = await ctx.db.estimate.create({
+      data: {
+        name: params.name,
+        projectId: project.id,
+        status: "DRAFT",
+        latestVersionNumber: 0,
+      },
+      select: { id: true, name: true },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["estimate"],
+      success: true,
+      message: `Created estimate "${estimate.name}" for ${project.name} (${project.shortCode})`,
+      estimateId: estimate.id,
+    };
+  },
+
+  // ── ROLES ──
+
+  async create_role(params: { name: string; color?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+    const role = await ctx.db.role.create({
+      data: { name: params.name, color: params.color ?? "#6b7280" },
+      select: { id: true, name: true },
+    });
+    return { __action: "invalidate", scope: ["role"], success: true, message: `Created role: ${role.name}`, roleId: role.id };
+  },
+
+  async update_role(params: { id: string; name?: string; color?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+    const data: Record<string, unknown> = {};
+    if (params.name !== undefined) data.name = params.name;
+    if (params.color !== undefined) data.color = params.color;
+    if (Object.keys(data).length === 0) return { error: "No fields to update" };
+    const role = await ctx.db.role.update({ where: { id: params.id }, data, select: { id: true, name: true } });
+    return { __action: "invalidate", scope: ["role"], success: true, message: `Updated role: ${role.name}` };
+  },
+
+  async delete_role(params: { id: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+    const role = await ctx.db.role.findUnique({ where: { id: params.id }, select: { name: true, _count: { select: { areaResources: true } } } });
+    if (!role) return { error: `Role not found: ${params.id}` };
+    if (role._count.areaResources > 0) return { error: `Cannot delete role "${role.name}" — ${role._count.areaResources} resources are assigned to it.` };
+    await ctx.db.role.delete({ where: { id: params.id } });
+    return { __action: "invalidate", scope: ["role"], success: true, message: `Deleted role: ${role.name}` };
+  },
+
+  // ── CLIENTS ──
+
+  async create_client(params: { name: string; code?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+    const client = await ctx.db.client.create({
+      data: { name: params.name, ...(params.code ? { code: params.code } : {}) },
+      select: { id: true, name: true, code: true },
+    });
+    return { __action: "invalidate", scope: ["client"], success: true, message: `Created client: ${client.name}`, clientId: client.id };
+  },
+
+  async update_client(params: { id: string; name?: string; code?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+    const data: Record<string, unknown> = {};
+    if (params.name !== undefined) data.name = params.name;
+    if (params.code !== undefined) data.code = params.code;
+    if (Object.keys(data).length === 0) return { error: "No fields to update" };
+    const client = await ctx.db.client.update({ where: { id: params.id }, data, select: { id: true, name: true } });
+    return { __action: "invalidate", scope: ["client"], success: true, message: `Updated client: ${client.name}` };
+  },
+
+  // ── ADMIN / CONFIG ──
+
+  async list_countries(_params: Record<string, never>, ctx: ToolContext) {
+    const countries = await ctx.db.country.findMany({
+      select: {
+        id: true, code: true, name: true, dailyWorkingHours: true,
+        metroCities: { select: { id: true, name: true }, orderBy: { name: "asc" as const } },
+      },
+      orderBy: { name: "asc" },
+    });
+    return countries.map((c) => ({
+      id: c.id,
+      code: c.code,
+      name: c.name,
+      dailyWorkingHours: c.dailyWorkingHours,
+      cities: c.metroCities.map((ci) => ci.name),
+    }));
+  },
+
+  async list_management_levels(_params: Record<string, never>, ctx: ToolContext) {
+    const groups = await ctx.db.managementLevelGroup.findMany({
+      select: {
+        id: true, name: true, targetPercentage: true,
+        levels: { select: { id: true, name: true }, orderBy: { name: "asc" as const } },
+      },
+      orderBy: { name: "asc" },
+    });
+    return groups.map((g) => ({
+      id: g.id,
+      name: g.name,
+      target: g.targetPercentage ? `${g.targetPercentage}%` : null,
+      levels: g.levels.map((l: { id: string; name: string }) => ({ id: l.id, name: l.name })),
+    }));
+  },
+
+  async list_utilization_categories(_params: Record<string, never>, ctx: ToolContext) {
+    const cats = await ctx.db.utilizationCategory.findMany({
+      select: {
+        id: true, code: true, name: true, description: true,
+        _count: { select: { projects: true } },
+      },
+      orderBy: { code: "asc" },
+    });
+    return cats.map((c) => ({
+      id: c.id,
+      code: c.code,
+      name: c.name,
+      description: c.description,
+      projectCount: c._count.projects,
+    }));
+  },
+
+  async list_calculation_rules(_params: Record<string, never>, ctx: ToolContext) {
+    const rules = await ctx.db.calculationRule.findMany({
+      select: {
+        id: true, name: true, description: true, isActive: true,
+        triggerType: true, orderType: true,
+        costEffect: true, costReductionPercent: true,
+        chargeabilityEffect: true, priority: true,
+      },
+      orderBy: { priority: "asc" },
+    });
+    return rules;
+  },
+
+  async list_effort_rules(_params: Record<string, never>, ctx: ToolContext) {
+    const rules = await ctx.db.effortRule.findMany({
+      select: {
+        id: true, description: true, scopeType: true,
+        discipline: true, chapter: true, unitMode: true,
+        hoursPerUnit: true, sortOrder: true,
+        ruleSet: { select: { name: true, isDefault: true } },
+      },
+      orderBy: { sortOrder: "asc" },
+    });
+    return rules;
+  },
+
+  async list_experience_multipliers(_params: Record<string, never>, ctx: ToolContext) {
+    const multipliers = await ctx.db.experienceMultiplierRule.findMany({
+      select: {
+        id: true, description: true, chapter: true, location: true,
+        level: true, costMultiplier: true, billMultiplier: true,
+        shoringRatio: true, additionalEffortRatio: true, sortOrder: true,
+        multiplierSet: { select: { name: true, isDefault: true } },
+      },
+      orderBy: { sortOrder: "asc" },
+    });
+    return multipliers;
+  },
+
+  async list_users(params: { limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 50, 100);
+    const users = await ctx.db.user.findMany({
+      select: {
+        id: true, name: true, email: true, systemRole: true,
+        resource: { select: { displayName: true, eid: true } },
+      },
+      take: limit,
+      orderBy: { name: "asc" },
+    });
+    return users.map((u) => ({
+      id: u.id,
+      name: u.name,
+      email: u.email,
+      role: u.systemRole,
+      linkedResource: u.resource?.displayName ?? null,
+      linkedEid: u.resource?.eid ?? null,
+    }));
+  },
+
+  async list_notifications(params: { unreadOnly?: boolean; limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 20, 50);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = {};
+    if (params.unreadOnly) where.readAt = null;
+    const notifications = await ctx.db.notification.findMany({
+      where,
+      select: {
+        id: true, type: true, title: true, body: true, readAt: true,
+        createdAt: true,
+      },
+      take: limit,
+      orderBy: { createdAt: "desc" },
+    });
+    return notifications.map((n) => ({
+      id: n.id,
+      type: n.type,
+      title: n.title,
+      message: n.body,
+      read: n.readAt !== null,
+      created: fmtDate(n.createdAt),
+    }));
+  },
+
+  async mark_notification_read(params: { notificationId: string }, ctx: ToolContext) {
+    await ctx.db.notification.update({
+      where: { id: params.notificationId },
+      data: { readAt: new Date() },
+    });
+    return { success: true, message: "Notification marked as read" };
+  },
+
+  // ── DASHBOARD DETAIL ──
+
+  async get_dashboard_detail(params: { section?: string }, ctx: ToolContext) {
+    const section = params.section ?? "all";
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result: Record<string, any> = {};
+
+    if (section === "all" || section === "peak_times") {
+      // Peak allocation months
+      const allocs = await ctx.db.assignment.findMany({
+        where: { status: { not: "CANCELLED" } },
+        select: { startDate: true, endDate: true, hoursPerDay: true },
+      });
+      const monthCounts: Record<string, number> = {};
+      for (const a of allocs) {
+        const month = `${a.startDate.getFullYear()}-${String(a.startDate.getMonth() + 1).padStart(2, "0")}`;
+        monthCounts[month] = (monthCounts[month] ?? 0) + a.hoursPerDay;
+      }
+      const sorted = Object.entries(monthCounts).sort((a, b) => b[1] - a[1]).slice(0, 6);
+      result.peakTimes = sorted.map(([m, h]) => ({ month: m, totalHoursPerDay: Math.round(h * 10) / 10 }));
+    }
+
+    if (section === "all" || section === "top_resources") {
+      const resources = await ctx.db.resource.findMany({
+        where: { isActive: true },
+        select: {
+          displayName: true, eid: true, lcrCents: true,
+          _count: { select: { assignments: true } },
+        },
+        orderBy: { lcrCents: "desc" },
+        take: 10,
+      });
+      result.topResources = resources.map((r) => ({
+        name: r.displayName,
+        eid: r.eid,
+        lcr: fmtEur(r.lcrCents),
+        allocations: r._count.assignments,
+      }));
+    }
+
+    if (section === "all" || section === "demand_pipeline") {
+      const demands = await ctx.db.demandRequirement.findMany({
+        where: { status: { in: ["PROPOSED", "CONFIRMED"] } },
+        select: {
+          headcount: true,
+          role: true,
+          roleEntity: { select: { name: true } },
+          project: { select: { name: true, shortCode: true } },
+          _count: { select: { assignments: true } },
+        },
+        take: 15,
+        orderBy: { startDate: "asc" },
+      });
+      result.demandPipeline = demands.map((d) => ({
+        project: `${d.project.name} (${d.project.shortCode})`,
+        role: d.roleEntity?.name ?? d.role ?? "Unspecified",
+        needed: d.headcount - d._count.assignments,
+      }));
+    }
+
+    if (section === "all" || section === "chargeability_overview") {
+      const chapters = await ctx.db.resource.groupBy({
+        by: ["chapter"],
+        where: { isActive: true },
+        _count: true,
+        _avg: { chargeabilityTarget: true },
+      });
+      result.chargeabilityByChapter = chapters.map((c) => ({
+        chapter: c.chapter ?? "Unassigned",
+        headcount: c._count,
+        avgTarget: c._avg.chargeabilityTarget ? `${Math.round(c._avg.chargeabilityTarget)}%` : null,
+      }));
+    }
+
+    return result;
+  },
+
+  // ── PROJECT MANAGEMENT ──
+
+  async delete_project(params: { projectId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    let project = await ctx.db.project.findUnique({
+      where: { id: params.projectId },
+      select: { id: true, name: true, shortCode: true, status: true },
+    });
+    if (!project) {
+      project = await ctx.db.project.findUnique({
+        where: { shortCode: params.projectId },
+        select: { id: true, name: true, shortCode: true, status: true },
+      });
+    }
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+    if (project.status !== "DRAFT") return { error: `Only DRAFT projects can be deleted. This project is ${project.status}.` };
+
+    await ctx.db.project.delete({ where: { id: project.id } });
+    return {
+      __action: "invalidate",
+      scope: ["project"],
+      success: true,
+      message: `Deleted project: ${project.name} (${project.shortCode})`,
+    };
+  },
+
+  // ── ORG UNIT MANAGEMENT ──
+
+  async create_org_unit(params: { name: string; shortName?: string; level: number; parentId?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+    const ou = await ctx.db.orgUnit.create({
+      data: {
+        name: params.name,
+        ...(params.shortName ? { shortName: params.shortName } : {}),
+        level: params.level,
+        ...(params.parentId ? { parentId: params.parentId } : {}),
+        isActive: true,
+      },
+      select: { id: true, name: true },
+    });
+    return { __action: "invalidate", scope: ["orgUnit"], success: true, message: `Created org unit: ${ou.name}`, orgUnitId: ou.id };
+  },
+
+  async update_org_unit(params: { id: string; name?: string; shortName?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageResources" as PermissionKey);
+    const data: Record<string, unknown> = {};
+    if (params.name !== undefined) data.name = params.name;
+    if (params.shortName !== undefined) data.shortName = params.shortName;
+    if (Object.keys(data).length === 0) return { error: "No fields to update" };
+    const ou = await ctx.db.orgUnit.update({ where: { id: params.id }, data, select: { id: true, name: true } });
+    return { __action: "invalidate", scope: ["orgUnit"], success: true, message: `Updated org unit: ${ou.name}` };
+  },
+
+  // ─── Cover Art ───────────────────────────────────────────────────────────
+
+  async generate_project_cover(params: { projectId: string; prompt?: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    const project = await ctx.db.project.findUnique({
+      where: { id: params.projectId },
+      include: { client: { select: { name: true } } },
+    });
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    const settings = await ctx.db.systemSettings.findUnique({ where: { id: "singleton" } });
+    if (!isDalleConfigured(settings)) {
+      return { error: "DALL-E is not configured. Set up the DALL-E deployment in Admin → Settings." };
+    }
+
+    const clientName = project.client?.name ? ` for ${project.client.name}` : "";
+    const basePrompt = `Professional cover art for a 3D automotive visualization project: "${project.name}"${clientName}. Style: cinematic, modern, photorealistic CGI rendering, dramatic lighting, studio environment. No text or typography in the image.`;
+    const finalPrompt = params.prompt ? `${basePrompt} Additional direction: ${params.prompt}` : basePrompt;
+
+    const dalleClient = createDalleClient(settings!);
+    const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const response: any = await dalleClient.images.generate({
+        model,
+        prompt: finalPrompt,
+        size: "1024x1024",
+        n: 1,
+        response_format: "b64_json",
+      });
+
+      const b64 = response.data?.[0]?.b64_json;
+      if (!b64) return { error: "No image data returned from DALL-E" };
+
+      const coverImageUrl = `data:image/png;base64,${b64}`;
+      await ctx.db.project.update({ where: { id: params.projectId }, data: { coverImageUrl } });
+
+      return {
+        __action: "invalidate",
+        scope: ["project"],
+        success: true,
+        message: `Generated cover art for project "${project.name}"`,
+        coverImageUrl: coverImageUrl.slice(0, 100) + "...[truncated]",
+      };
+    } catch (err) {
+      return { error: `DALL-E error: ${parseAiError(err)}` };
+    }
+  },
+
+  async remove_project_cover(params: { projectId: string }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    const project = await ctx.db.project.findUnique({
+      where: { id: params.projectId },
+      select: { id: true, name: true },
+    });
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    await ctx.db.project.update({ where: { id: params.projectId }, data: { coverImageUrl: null } });
+
+    return { __action: "invalidate", scope: ["project"], success: true, message: `Removed cover art from project "${project.name}"` };
+  },
+
+  // ── TASK MANAGEMENT ──
+
+  async list_tasks(params: { status?: string; limit?: number }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 10, 50);
+    const status = params.status ?? "OPEN";
+    const tasks = await ctx.db.notification.findMany({
+      where: {
+        OR: [
+          { userId: ctx.userId },
+          { assigneeId: ctx.userId },
+        ],
+        category: { in: ["TASK", "APPROVAL"] },
+        taskStatus: status as "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED",
+      },
+      select: {
+        id: true, title: true, body: true, priority: true,
+        taskStatus: true, taskAction: true, dueDate: true,
+        entityId: true, entityType: true, createdAt: true,
+      },
+      take: limit,
+      orderBy: [{ priority: "desc" }, { createdAt: "desc" }],
+    });
+    return tasks.map((t) => ({
+      id: t.id,
+      title: t.title,
+      body: t.body,
+      priority: t.priority,
+      taskStatus: t.taskStatus,
+      taskAction: t.taskAction,
+      dueDate: fmtDate(t.dueDate),
+      entityId: t.entityId,
+      entityType: t.entityType,
+      createdAt: fmtDate(t.createdAt),
+    }));
+  },
+
+  async get_task_detail(params: { taskId: string }, ctx: ToolContext) {
+    const task = await ctx.db.notification.findUnique({
+      where: { id: params.taskId },
+      select: {
+        id: true, title: true, body: true, type: true, priority: true,
+        category: true, taskStatus: true, taskAction: true,
+        dueDate: true, entityId: true, entityType: true,
+        completedAt: true, completedBy: true,
+        createdAt: true, userId: true, assigneeId: true,
+        sender: { select: { name: true } },
+      },
+    });
+    if (!task) return { error: `Task not found: ${params.taskId}` };
+
+    // Verify the user has access to this task
+    if (task.userId !== ctx.userId && task.assigneeId !== ctx.userId) {
+      return { error: "Access denied: this task does not belong to you" };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result: Record<string, any> = {
+      id: task.id,
+      title: task.title,
+      body: task.body,
+      type: task.type,
+      priority: task.priority,
+      category: task.category,
+      taskStatus: task.taskStatus,
+      taskAction: task.taskAction,
+      dueDate: fmtDate(task.dueDate),
+      entityId: task.entityId,
+      entityType: task.entityType,
+      completedAt: fmtDate(task.completedAt),
+      completedBy: task.completedBy,
+      createdAt: fmtDate(task.createdAt),
+      senderName: task.sender?.name ?? null,
+    };
+
+    // Enrich with linked entity details
+    if (task.entityId && task.entityType) {
+      try {
+        if (task.entityType === "project") {
+          const project = await ctx.db.project.findUnique({
+            where: { id: task.entityId },
+            select: { id: true, name: true, shortCode: true, status: true },
+          });
+          if (project) result.linkedEntity = project;
+        } else if (task.entityType === "vacation") {
+          const vacation = await ctx.db.vacation.findUnique({
+            where: { id: task.entityId },
+            select: {
+              id: true, type: true, status: true, startDate: true, endDate: true,
+              resource: { select: { displayName: true } },
+            },
+          });
+          if (vacation) {
+            result.linkedEntity = {
+              id: vacation.id,
+              type: vacation.type,
+              status: vacation.status,
+              startDate: fmtDate(vacation.startDate),
+              endDate: fmtDate(vacation.endDate),
+              resourceName: vacation.resource.displayName,
+            };
+          }
+        } else if (task.entityType === "assignment" || task.entityType === "allocation") {
+          const assignment = await ctx.db.assignment.findUnique({
+            where: { id: task.entityId },
+            select: {
+              id: true, status: true, startDate: true, endDate: true,
+              resource: { select: { displayName: true } },
+              project: { select: { name: true } },
+            },
+          });
+          if (assignment) {
+            result.linkedEntity = {
+              id: assignment.id,
+              status: assignment.status,
+              startDate: fmtDate(assignment.startDate),
+              endDate: fmtDate(assignment.endDate),
+              resourceName: assignment.resource.displayName,
+              projectName: assignment.project.name,
+            };
+          }
+        }
+      } catch {
+        // Entity may have been deleted — ignore
+      }
+    }
+
+    return result;
+  },
+
+  async update_task_status(params: { taskId: string; status: string }, ctx: ToolContext) {
+    const task = await ctx.db.notification.findUnique({
+      where: { id: params.taskId },
+      select: { id: true, userId: true, assigneeId: true, taskStatus: true },
+    });
+    if (!task) return { error: `Task not found: ${params.taskId}` };
+    if (task.userId !== ctx.userId && task.assigneeId !== ctx.userId) {
+      return { error: "Access denied: this task does not belong to you" };
+    }
+
+    const newStatus = params.status as "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED";
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const data: Record<string, any> = { taskStatus: newStatus };
+    if (newStatus === "DONE") {
+      data.completedAt = new Date();
+      data.completedBy = "ai-assistant";
+    }
+
+    await ctx.db.notification.update({
+      where: { id: params.taskId },
+      data,
+    });
+
+    emitTaskStatusChanged(task.userId, task.id);
+    if (newStatus === "DONE") {
+      emitTaskCompleted(task.userId, task.id);
+    }
+
+    return { __action: "invalidate", scope: ["notification"], success: true, message: `Task status updated to ${newStatus}` };
+  },
+
+  async execute_task_action(params: { taskId: string }, ctx: ToolContext) {
+    // 1. Fetch the notification
+    const task = await ctx.db.notification.findUnique({
+      where: { id: params.taskId },
+      select: {
+        id: true, userId: true, assigneeId: true,
+        taskAction: true, taskStatus: true,
+      },
+    });
+    if (!task) return { error: `Task not found: ${params.taskId}` };
+    if (task.userId !== ctx.userId && task.assigneeId !== ctx.userId) {
+      return { error: "Access denied: this task does not belong to you" };
+    }
+    if (!task.taskAction) {
+      return { error: "This task has no executable action" };
+    }
+    if (task.taskStatus === "DONE") {
+      return { error: "This task is already completed" };
+    }
+
+    // 2. Parse taskAction
+    const parsed = parseTaskAction(task.taskAction);
+    if (!parsed) {
+      return { error: `Invalid taskAction format: ${task.taskAction}` };
+    }
+
+    // 3. Look up handler in TASK_ACTION_REGISTRY
+    const handler = getTaskAction(parsed.action);
+    if (!handler) {
+      return { error: `Unknown action: ${parsed.action}` };
+    }
+
+    // 4. Check permission
+    if (handler.permission && !ctx.permissions.has(handler.permission as PermissionKey)) {
+      return { error: `Permission denied: you need "${handler.permission}" to perform this action` };
+    }
+
+    // 5. Execute the action
+    const actionResult = await handler.execute(parsed.entityId, ctx.db, ctx.userId);
+    if (!actionResult.success) {
+      return { error: actionResult.message };
+    }
+
+    // 6. Mark the task as DONE
+    await ctx.db.notification.update({
+      where: { id: params.taskId },
+      data: {
+        taskStatus: "DONE",
+        completedAt: new Date(),
+        completedBy: "ai-assistant",
+      },
+    });
+
+    emitTaskCompleted(task.userId, task.id);
+
+    return {
+      __action: "invalidate",
+      scope: ["notification"],
+      success: true,
+      message: actionResult.message,
+      action: parsed.action,
+      entityId: parsed.entityId,
+    };
+  },
+
+  async create_reminder(params: {
+    title: string;
+    body?: string;
+    remindAt: string;
+    recurrence?: string;
+    entityId?: string;
+    entityType?: string;
+  }, ctx: ToolContext) {
+    const remindAt = new Date(params.remindAt);
+    if (isNaN(remindAt.getTime())) {
+      return { error: "Invalid remindAt date format. Use ISO 8601 (e.g. 2026-03-20T09:00:00Z)" };
+    }
+
+    const notification = await ctx.db.notification.create({
+      data: {
+        userId: ctx.userId,
+        type: "REMINDER",
+        title: params.title,
+        category: "REMINDER",
+        remindAt,
+        nextRemindAt: remindAt,
+        ...(params.body !== undefined ? { body: params.body } : {}),
+        ...(params.recurrence !== undefined ? { recurrence: params.recurrence } : {}),
+        ...(params.entityId !== undefined ? { entityId: params.entityId } : {}),
+        ...(params.entityType !== undefined ? { entityType: params.entityType } : {}),
+      },
+    });
+
+    emitNotificationCreated(ctx.userId, notification.id);
+
+    return {
+      __action: "invalidate",
+      scope: ["notification"],
+      success: true,
+      message: `Reminder "${params.title}" created for ${fmtDate(remindAt)}`,
+      reminderId: notification.id,
+      ...(params.recurrence !== undefined ? { recurrence: params.recurrence } : {}),
+    };
+  },
+
+  async create_task_for_user(params: {
+    userId: string;
+    title: string;
+    body?: string;
+    priority?: string;
+    dueDate?: string;
+    taskAction?: string;
+    entityId?: string;
+    entityType?: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    // Verify target user exists
+    const targetUser = await ctx.db.user.findUnique({
+      where: { id: params.userId },
+      select: { id: true, name: true },
+    });
+    if (!targetUser) return { error: `User not found: ${params.userId}` };
+
+    const notification = await ctx.db.notification.create({
+      data: {
+        userId: params.userId,
+        type: "TASK_ASSIGNED",
+        title: params.title,
+        category: "TASK",
+        taskStatus: "OPEN",
+        senderId: ctx.userId,
+        priority: (params.priority ?? "NORMAL") as "LOW" | "NORMAL" | "HIGH" | "URGENT",
+        ...(params.body !== undefined ? { body: params.body } : {}),
+        ...(params.dueDate !== undefined ? { dueDate: new Date(params.dueDate) } : {}),
+        ...(params.taskAction !== undefined ? { taskAction: params.taskAction } : {}),
+        ...(params.entityId !== undefined ? { entityId: params.entityId } : {}),
+        ...(params.entityType !== undefined ? { entityType: params.entityType } : {}),
+      },
+    });
+
+    emitTaskAssigned(params.userId, notification.id);
+
+    return {
+      __action: "invalidate",
+      scope: ["notification"],
+      success: true,
+      message: `Task "${params.title}" created for ${targetUser.name ?? params.userId}`,
+      taskId: notification.id,
+    };
+  },
+
+  async send_broadcast(params: {
+    title: string;
+    body?: string;
+    targetType: string;
+    targetValue?: string;
+    priority?: string;
+    channel?: string;
+    link?: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageProjects" as PermissionKey);
+
+    // Resolve recipients
+    const recipientIds = await resolveRecipients(
+      params.targetType,
+      params.targetValue,
+      ctx.db,
+      ctx.userId, // exclude sender
+    );
+
+    if (recipientIds.length === 0) {
+      return { error: "No recipients found for the given target" };
+    }
+
+    const priority = (params.priority ?? "NORMAL") as "LOW" | "NORMAL" | "HIGH" | "URGENT";
+    const channel = params.channel ?? "in_app";
+
+    // Create broadcast record
+    const broadcast = await ctx.db.notificationBroadcast.create({
+      data: {
+        senderId: ctx.userId,
+        title: params.title,
+        targetType: params.targetType,
+        priority,
+        channel,
+        recipientCount: recipientIds.length,
+        sentAt: new Date(),
+        ...(params.body !== undefined ? { body: params.body } : {}),
+        ...(params.targetValue !== undefined ? { targetValue: params.targetValue } : {}),
+        ...(params.link !== undefined ? { link: params.link } : {}),
+      },
+    });
+
+    // Create individual notifications for each recipient
+    await ctx.db.notification.createMany({
+      data: recipientIds.map((userId) => ({
+        userId,
+        type: "BROADCAST",
+        title: params.title,
+        category: "NOTIFICATION" as const,
+        priority,
+        channel,
+        senderId: ctx.userId,
+        sourceId: broadcast.id,
+        ...(params.body !== undefined ? { body: params.body } : {}),
+        ...(params.link !== undefined ? { link: params.link } : {}),
+      })),
+    });
+
+    // Emit SSE events for each recipient
+    for (const userId of recipientIds) {
+      emitNotificationCreated(userId, broadcast.id);
+    }
+    emitBroadcastSent(broadcast.id, recipientIds.length);
+
+    return {
+      __action: "invalidate",
+      scope: ["notification"],
+      success: true,
+      message: `Broadcast "${params.title}" sent to ${recipientIds.length} recipients`,
+      broadcastId: broadcast.id,
+      recipientCount: recipientIds.length,
+    };
+  },
+
+  // ── INSIGHTS & ANOMALIES ──────────────────────────────────────────────────
+
+  async detect_anomalies(_params: Record<string, never>, ctx: ToolContext) {
+    const now = new Date();
+    const twoWeeksFromNow = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
+    const anomalies: Array<{
+      type: string;
+      severity: string;
+      entityId: string;
+      entityName: string;
+      message: string;
+    }> = [];
+
+    const projects = await ctx.db.project.findMany({
+      where: { status: { in: ["ACTIVE", "DRAFT"] } },
+      include: {
+        demandRequirements: {
+          select: {
+            id: true,
+            headcount: true,
+            startDate: true,
+            endDate: true,
+            status: true,
+            _count: { select: { assignments: true } },
+          },
+        },
+        assignments: {
+          select: {
+            id: true,
+            resourceId: true,
+            startDate: true,
+            endDate: true,
+            hoursPerDay: true,
+            dailyCostCents: true,
+            status: true,
+          },
+        },
+      },
+    });
+
+    function countBizDays(start: Date, end: Date): number {
+      let count = 0;
+      const d = new Date(start);
+      while (d <= end) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      return count;
+    }
+
+    for (const project of projects) {
+      // Budget anomaly
+      if (project.budgetCents > 0) {
+        const totalDays = countBizDays(project.startDate, project.endDate);
+        const elapsedDays = countBizDays(project.startDate, now < project.endDate ? now : project.endDate);
+        if (totalDays > 0 && elapsedDays > 0) {
+          const expectedBurnRate = elapsedDays / totalDays;
+          const totalCostCents = project.assignments.reduce((s, a) => {
+            const aStart = a.startDate < project.startDate ? project.startDate : a.startDate;
+            const aEnd = a.endDate > now ? now : a.endDate;
+            if (aEnd < aStart) return s;
+            return s + a.dailyCostCents * countBizDays(aStart, aEnd);
+          }, 0);
+          const actualBurnRate = totalCostCents / project.budgetCents;
+          if (actualBurnRate > expectedBurnRate * 1.2) {
+            const overSpendPct = Math.round(((actualBurnRate - expectedBurnRate) / expectedBurnRate) * 100);
+            anomalies.push({
+              type: "budget",
+              severity: actualBurnRate > expectedBurnRate * 1.5 ? "critical" : "warning",
+              entityId: project.id,
+              entityName: project.name,
+              message: `Burning budget ${overSpendPct}% faster than expected. ${Math.round(actualBurnRate * 100)}% spent at ${Math.round(expectedBurnRate * 100)}% timeline.`,
+            });
+          }
+        }
+      }
+
+      // Staffing anomaly
+      const upcomingDemands = project.demandRequirements.filter(
+        (d) => d.startDate <= twoWeeksFromNow && d.endDate >= now,
+      );
+      for (const demand of upcomingDemands) {
+        const unfilledCount = demand.headcount - demand._count.assignments;
+        const unfillPct = demand.headcount > 0 ? unfilledCount / demand.headcount : 0;
+        if (unfillPct > 0.3) {
+          anomalies.push({
+            type: "staffing",
+            severity: unfillPct > 0.6 ? "critical" : "warning",
+            entityId: project.id,
+            entityName: project.name,
+            message: `${unfilledCount} of ${demand.headcount} positions unfilled, starting ${demand.startDate.toISOString().slice(0, 10)}.`,
+          });
+        }
+      }
+
+      // Timeline anomaly
+      const overruns = project.assignments.filter(
+        (a) => a.endDate > project.endDate && (a.status === "ACTIVE" || a.status === "CONFIRMED"),
+      );
+      if (overruns.length > 0) {
+        anomalies.push({
+          type: "timeline",
+          severity: "warning",
+          entityId: project.id,
+          entityName: project.name,
+          message: `${overruns.length} assignment(s) extend beyond the project end date (${project.endDate.toISOString().slice(0, 10)}).`,
+        });
+      }
+    }
+
+    // Utilization anomaly
+    const resources = await ctx.db.resource.findMany({
+      where: { isActive: true },
+      select: { id: true, displayName: true, availability: true },
+    });
+    const periodStart = new Date(now.getFullYear(), now.getMonth(), 1);
+    const periodEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    const activeAssignments = await ctx.db.assignment.findMany({
+      where: {
+        status: { in: ["ACTIVE", "CONFIRMED"] },
+        startDate: { lte: periodEnd },
+        endDate: { gte: periodStart },
+      },
+      select: { resourceId: true, hoursPerDay: true },
+    });
+    const resourceHoursMap = new Map<string, number>();
+    for (const a of activeAssignments) {
+      resourceHoursMap.set(a.resourceId, (resourceHoursMap.get(a.resourceId) ?? 0) + a.hoursPerDay);
+    }
+    for (const resource of resources) {
+      const avail = resource.availability as Record<string, number> | null;
+      if (!avail) continue;
+      const dailyAvail = Object.values(avail).reduce((s, h) => s + (h ?? 0), 0) / 5;
+      if (dailyAvail <= 0) continue;
+      const booked = resourceHoursMap.get(resource.id) ?? 0;
+      const pct = Math.round((booked / dailyAvail) * 100);
+      if (pct > 110) {
+        anomalies.push({
+          type: "utilization",
+          severity: pct > 130 ? "critical" : "warning",
+          entityId: resource.id,
+          entityName: resource.displayName,
+          message: `Resource at ${pct}% utilization (${booked.toFixed(1)}h/${dailyAvail.toFixed(1)}h per day).`,
+        });
+      } else if (pct < 40 && booked > 0) {
+        anomalies.push({
+          type: "utilization",
+          severity: "warning",
+          entityId: resource.id,
+          entityName: resource.displayName,
+          message: `Resource at only ${pct}% utilization (${booked.toFixed(1)}h/${dailyAvail.toFixed(1)}h per day).`,
+        });
+      }
+    }
+
+    anomalies.sort((a, b) => {
+      if (a.severity !== b.severity) return a.severity === "critical" ? -1 : 1;
+      return a.type.localeCompare(b.type);
+    });
+
+    return { anomalies, count: anomalies.length };
+  },
+
+  async get_skill_gaps(_params: Record<string, never>, ctx: ToolContext) {
+    const now = new Date();
+
+    // Get active demand requirements with their roles
+    const demands = await ctx.db.demandRequirement.findMany({
+      where: {
+        project: { status: { in: ["ACTIVE", "DRAFT"] } },
+        status: { not: "CANCELLED" },
+        endDate: { gte: now },
+      },
+      select: {
+        id: true,
+        role: true,
+        headcount: true,
+        roleEntity: { select: { name: true } },
+        _count: { select: { assignments: true } },
+      },
+    });
+
+    // Aggregate demand by role
+    const demandByRole = new Map<string, { needed: number; filled: number }>();
+    for (const d of demands) {
+      const roleName = d.roleEntity?.name ?? d.role ?? "Unknown";
+      const existing = demandByRole.get(roleName) ?? { needed: 0, filled: 0 };
+      existing.needed += d.headcount;
+      existing.filled += Math.min(d._count.assignments, d.headcount);
+      demandByRole.set(roleName, existing);
+    }
+
+    // Get active resources with skills
+    const resources = await ctx.db.resource.findMany({
+      where: { isActive: true },
+      select: {
+        id: true,
+        skills: true,
+        areaRole: { select: { name: true } },
+      },
+    });
+
+    // Count skill supply
+    const skillSupply = new Map<string, number>();
+    for (const r of resources) {
+      const skills = (r.skills ?? []) as Array<{ skill: string; level?: number }>;
+      for (const s of skills) {
+        const key = s.skill.toLowerCase();
+        skillSupply.set(key, (skillSupply.get(key) ?? 0) + 1);
+      }
+    }
+
+    // Build role gaps
+    const roleGaps = [...demandByRole.entries()]
+      .map(([role, { needed, filled }]) => ({
+        role,
+        needed,
+        filled,
+        gap: needed - filled,
+        fillRate: needed > 0 ? Math.round((filled / needed) * 100) : 100,
+      }))
+      .filter((g) => g.gap > 0)
+      .sort((a, b) => b.gap - a.gap);
+
+    // Count supply by role
+    const supplyByRole = new Map<string, number>();
+    for (const r of resources) {
+      const roleName = r.areaRole?.name;
+      if (roleName) {
+        supplyByRole.set(roleName, (supplyByRole.get(roleName) ?? 0) + 1);
+      }
+    }
+
+    return {
+      roleGaps,
+      totalOpenPositions: roleGaps.reduce((s, g) => s + g.gap, 0),
+      skillSupplyTop10: [...skillSupply.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 10)
+        .map(([skill, count]) => ({ skill, resourceCount: count })),
+      resourcesByRole: [...supplyByRole.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map(([role, count]) => ({ role, count })),
+    };
+  },
+
+  async get_project_health(_params: Record<string, never>, ctx: ToolContext) {
+    const now = new Date();
+
+    function countBizDays(start: Date, end: Date): number {
+      let count = 0;
+      const d = new Date(start);
+      while (d <= end) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      return count;
+    }
+
+    const projects = await ctx.db.project.findMany({
+      where: { status: { in: ["ACTIVE", "DRAFT"] } },
+      include: {
+        demandRequirements: {
+          select: {
+            headcount: true,
+            _count: { select: { assignments: true } },
+          },
+        },
+        assignments: {
+          where: { status: { not: "CANCELLED" } },
+          select: {
+            dailyCostCents: true,
+            startDate: true,
+            endDate: true,
+            status: true,
+          },
+        },
+      },
+    });
+
+    const healthScores = projects.map((project) => {
+      // Budget score (0-100)
+      let budgetScore = 100;
+      if (project.budgetCents > 0) {
+        const totalCostCents = project.assignments.reduce((s, a) => {
+          const days = countBizDays(a.startDate, a.endDate);
+          return s + a.dailyCostCents * days;
+        }, 0);
+        const budgetUsedPct = (totalCostCents / project.budgetCents) * 100;
+        const totalDays = countBizDays(project.startDate, project.endDate);
+        const elapsedDays = countBizDays(project.startDate, now < project.endDate ? now : project.endDate);
+        const timelinePct = totalDays > 0 ? (elapsedDays / totalDays) * 100 : 0;
+        // Score: penalize if budget burn is significantly ahead of timeline
+        if (timelinePct > 0 && budgetUsedPct > timelinePct * 1.5) {
+          budgetScore = Math.max(0, 100 - Math.round(budgetUsedPct - timelinePct));
+        } else if (budgetUsedPct > 90) {
+          budgetScore = Math.max(0, 100 - Math.round((budgetUsedPct - 90) * 5));
+        }
+      }
+
+      // Staffing score (0-100)
+      const totalDemand = project.demandRequirements.reduce((s, d) => s + d.headcount, 0);
+      const filledDemand = project.demandRequirements.reduce(
+        (s, d) => s + Math.min(d._count.assignments, d.headcount),
+        0,
+      );
+      const staffingScore = totalDemand > 0 ? Math.round((filledDemand / totalDemand) * 100) : 100;
+
+      // Timeline score (0-100)
+      const overrunCount = project.assignments.filter(
+        (a) => a.endDate > project.endDate && (a.status === "ACTIVE" || a.status === "CONFIRMED"),
+      ).length;
+      const timelineScore = overrunCount > 0
+        ? Math.max(0, 100 - overrunCount * 20)
+        : 100;
+
+      const overall = Math.round((budgetScore + staffingScore + timelineScore) / 3);
+
+      return {
+        projectId: project.id,
+        projectName: project.name,
+        shortCode: project.shortCode,
+        status: project.status,
+        overall,
+        budget: budgetScore,
+        staffing: staffingScore,
+        timeline: timelineScore,
+        rating: overall >= 80 ? "healthy" : overall >= 50 ? "at_risk" : "critical",
+      };
+    });
+
+    healthScores.sort((a, b) => a.overall - b.overall);
+
+    return {
+      projects: healthScores,
+      summary: {
+        healthy: healthScores.filter((p) => p.rating === "healthy").length,
+        atRisk: healthScores.filter((p) => p.rating === "at_risk").length,
+        critical: healthScores.filter((p) => p.rating === "critical").length,
+      },
+    };
+  },
+
+  async get_budget_forecast(_params: Record<string, never>, ctx: ToolContext) {
+    assertPermission(ctx, "viewCosts" as PermissionKey);
+
+    const now = new Date();
+
+    function countBizDays(start: Date, end: Date): number {
+      let count = 0;
+      const d = new Date(start);
+      while (d <= end) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      return count;
+    }
+
+    const projects = await ctx.db.project.findMany({
+      where: {
+        status: { in: ["ACTIVE", "DRAFT"] },
+        budgetCents: { gt: 0 },
+      },
+      include: {
+        assignments: {
+          where: { status: { not: "CANCELLED" } },
+          select: {
+            dailyCostCents: true,
+            startDate: true,
+            endDate: true,
+          },
+        },
+      },
+    });
+
+    const forecasts = projects.map((project) => {
+      const totalDays = countBizDays(project.startDate, project.endDate);
+      const elapsedDays = countBizDays(project.startDate, now < project.endDate ? now : project.endDate);
+
+      // Cost spent so far (up to now)
+      const spentCents = project.assignments.reduce((s, a) => {
+        const aStart = a.startDate < project.startDate ? project.startDate : a.startDate;
+        const aEnd = a.endDate > now ? now : a.endDate;
+        if (aEnd < aStart) return s;
+        return s + a.dailyCostCents * countBizDays(aStart, aEnd);
+      }, 0);
+
+      // Total projected cost (full assignment durations)
+      const projectedCostCents = project.assignments.reduce((s, a) => {
+        return s + a.dailyCostCents * countBizDays(a.startDate, a.endDate);
+      }, 0);
+
+      const budgetCents = project.budgetCents;
+      const utilization = budgetCents > 0 ? Math.round((spentCents / budgetCents) * 100) : 0;
+      const timelinePct = totalDays > 0 ? Math.round((elapsedDays / totalDays) * 100) : 0;
+
+      const burnStatus = timelinePct > 0
+        ? utilization > timelinePct * 1.2
+          ? "ahead"
+          : utilization < timelinePct * 0.8
+            ? "behind"
+            : "on_track"
+        : "not_started";
+
+      return {
+        projectId: project.id,
+        projectName: project.name,
+        shortCode: project.shortCode,
+        budget: fmtEur(budgetCents),
+        budgetCents,
+        spent: fmtEur(spentCents),
+        spentCents,
+        remaining: fmtEur(budgetCents - spentCents),
+        remainingCents: budgetCents - spentCents,
+        projected: fmtEur(projectedCostCents),
+        projectedCents: projectedCostCents,
+        utilization: `${utilization}%`,
+        timelineProgress: `${timelinePct}%`,
+        burnStatus,
+      };
+    });
+
+    forecasts.sort((a, b) => b.spentCents - a.spentCents);
+
+    return { forecasts };
+  },
+
+  async get_insights_summary(_params: Record<string, never>, ctx: ToolContext) {
+    const now = new Date();
+    const twoWeeksFromNow = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
+
+    function countBizDays(start: Date, end: Date): number {
+      let count = 0;
+      const d = new Date(start);
+      while (d <= end) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      return count;
+    }
+
+    const projects = await ctx.db.project.findMany({
+      where: { status: { in: ["ACTIVE", "DRAFT"] } },
+      include: {
+        demandRequirements: {
+          select: {
+            headcount: true,
+            startDate: true,
+            endDate: true,
+            _count: { select: { assignments: true } },
+          },
+        },
+        assignments: {
+          select: {
+            resourceId: true,
+            startDate: true,
+            endDate: true,
+            hoursPerDay: true,
+            dailyCostCents: true,
+            status: true,
+          },
+        },
+      },
+    });
+
+    let budgetCount = 0;
+    let staffingCount = 0;
+    let timelineCount = 0;
+    let criticalCount = 0;
+
+    for (const project of projects) {
+      if (project.budgetCents > 0) {
+        const totalDays = countBizDays(project.startDate, project.endDate);
+        const elapsedDays = countBizDays(project.startDate, now < project.endDate ? now : project.endDate);
+        if (totalDays > 0 && elapsedDays > 0) {
+          const expectedBurnRate = elapsedDays / totalDays;
+          const totalCostCents = project.assignments.reduce((s, a) => {
+            const aStart = a.startDate < project.startDate ? project.startDate : a.startDate;
+            const aEnd = a.endDate > now ? now : a.endDate;
+            if (aEnd < aStart) return s;
+            return s + a.dailyCostCents * countBizDays(aStart, aEnd);
+          }, 0);
+          const actualBurnRate = totalCostCents / project.budgetCents;
+          if (actualBurnRate > expectedBurnRate * 1.2) {
+            budgetCount++;
+            if (actualBurnRate > expectedBurnRate * 1.5) criticalCount++;
+          }
+        }
+      }
+
+      const upcomingDemands = project.demandRequirements.filter(
+        (d) => d.startDate <= twoWeeksFromNow && d.endDate >= now,
+      );
+      for (const demand of upcomingDemands) {
+        const unfillPct = demand.headcount > 0 ? (demand.headcount - demand._count.assignments) / demand.headcount : 0;
+        if (unfillPct > 0.3) {
+          staffingCount++;
+          if (unfillPct > 0.6) criticalCount++;
+        }
+      }
+
+      const overruns = project.assignments.filter(
+        (a) => a.endDate > project.endDate && (a.status === "ACTIVE" || a.status === "CONFIRMED"),
+      );
+      if (overruns.length > 0) timelineCount++;
+    }
+
+    // Utilization
+    const resources = await ctx.db.resource.findMany({
+      where: { isActive: true },
+      select: { id: true, availability: true },
+    });
+    const periodStart = new Date(now.getFullYear(), now.getMonth(), 1);
+    const periodEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    const activeAssignments = await ctx.db.assignment.findMany({
+      where: {
+        status: { in: ["ACTIVE", "CONFIRMED"] },
+        startDate: { lte: periodEnd },
+        endDate: { gte: periodStart },
+      },
+      select: { resourceId: true, hoursPerDay: true },
+    });
+    const resourceHoursMap = new Map<string, number>();
+    for (const a of activeAssignments) {
+      resourceHoursMap.set(a.resourceId, (resourceHoursMap.get(a.resourceId) ?? 0) + a.hoursPerDay);
+    }
+
+    let utilizationCount = 0;
+    for (const resource of resources) {
+      const avail = resource.availability as Record<string, number> | null;
+      if (!avail) continue;
+      const dailyAvail = Object.values(avail).reduce((s, h) => s + (h ?? 0), 0) / 5;
+      if (dailyAvail <= 0) continue;
+      const booked = resourceHoursMap.get(resource.id) ?? 0;
+      const pct = Math.round((booked / dailyAvail) * 100);
+      if (pct > 110) {
+        utilizationCount++;
+        if (pct > 130) criticalCount++;
+      } else if (pct < 40 && booked > 0) {
+        utilizationCount++;
+      }
+    }
+
+    const total = budgetCount + staffingCount + timelineCount + utilizationCount;
+
+    return { total, criticalCount, budget: budgetCount, staffing: staffingCount, timeline: timelineCount, utilization: utilizationCount };
+  },
+
+  async run_report(params: {
+    entity: string;
+    columns: string[];
+    filters?: Array<{ field: string; op: string; value: string }>;
+    limit?: number;
+  }, ctx: ToolContext) {
+    const entity = params.entity as "resource" | "project" | "assignment";
+    if (!["resource", "project", "assignment"].includes(entity)) {
+      return { error: `Unknown entity: ${params.entity}. Use resource, project, or assignment.` };
+    }
+
+    const columns = params.columns;
+    const filters = params.filters ?? [];
+    const limit = Math.min(params.limit ?? 50, 200);
+
+    // Build Prisma select from columns
+    const COLUMN_DEFS: Record<string, Array<{ key: string; prismaPath?: string }>> = {
+      resource: [
+        { key: "id" }, { key: "eid" }, { key: "displayName" }, { key: "email" }, { key: "chapter" },
+        { key: "resourceType" }, { key: "lcrCents" }, { key: "ucrCents" }, { key: "chargeabilityTarget" },
+        { key: "fte" }, { key: "isActive" }, { key: "postalCode" }, { key: "federalState" },
+        { key: "country.name", prismaPath: "country" }, { key: "metroCity.name", prismaPath: "metroCity" },
+        { key: "orgUnit.name", prismaPath: "orgUnit" }, { key: "areaRole.name", prismaPath: "areaRole" },
+        { key: "createdAt" }, { key: "updatedAt" },
+      ],
+      project: [
+        { key: "id" }, { key: "shortCode" }, { key: "name" }, { key: "orderType" }, { key: "allocationType" },
+        { key: "status" }, { key: "winProbability" }, { key: "budgetCents" },
+        { key: "startDate" }, { key: "endDate" }, { key: "responsiblePerson" },
+        { key: "client.name", prismaPath: "client" }, { key: "createdAt" }, { key: "updatedAt" },
+      ],
+      assignment: [
+        { key: "id" }, { key: "resource.displayName", prismaPath: "resource" }, { key: "resource.eid", prismaPath: "resource" },
+        { key: "project.name", prismaPath: "project" }, { key: "project.shortCode", prismaPath: "project" },
+        { key: "startDate" }, { key: "endDate" }, { key: "hoursPerDay" }, { key: "percentage" },
+        { key: "role" }, { key: "roleEntity.name", prismaPath: "roleEntity" },
+        { key: "dailyCostCents" }, { key: "status" }, { key: "createdAt" }, { key: "updatedAt" },
+      ],
+    };
+
+    const entityDefs = COLUMN_DEFS[entity]!;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const select: Record<string, any> = { id: true };
+
+    for (const colKey of columns) {
+      const def = entityDefs.find((c) => c.key === colKey);
+      if (!def) continue;
+      if (colKey.includes(".")) {
+        const relationName = def.prismaPath ?? colKey.split(".")[0]!;
+        const fieldName = colKey.split(".").slice(1).join(".");
+        if (!select[relationName]) {
+          select[relationName] = { select: {} };
+        }
+        select[relationName].select[fieldName] = true;
+      } else {
+        select[colKey] = true;
+      }
+    }
+
+    // Build where from filters (only scalar top-level fields)
+    const SCALAR_FIELDS: Record<string, Set<string>> = {
+      resource: new Set(["id", "eid", "displayName", "email", "chapter", "resourceType", "lcrCents", "ucrCents", "chargeabilityTarget", "fte", "isActive", "postalCode", "federalState"]),
+      project: new Set(["id", "shortCode", "name", "orderType", "allocationType", "status", "winProbability", "budgetCents", "startDate", "endDate", "responsiblePerson"]),
+      assignment: new Set(["id", "startDate", "endDate", "hoursPerDay", "percentage", "role", "dailyCostCents", "status"]),
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const where: Record<string, any> = {};
+    for (const filter of filters) {
+      if (!SCALAR_FIELDS[entity]!.has(filter.field)) continue;
+      let value: unknown = filter.value;
+      // Try number conversion
+      const num = Number(filter.value);
+      if (!Number.isNaN(num) && filter.op !== "contains" && filter.op !== "in") {
+        value = num;
+      }
+      switch (filter.op) {
+        case "eq": where[filter.field] = value; break;
+        case "neq": where[filter.field] = { not: value }; break;
+        case "gt": where[filter.field] = { gt: value }; break;
+        case "lt": where[filter.field] = { lt: value }; break;
+        case "gte": where[filter.field] = { gte: value }; break;
+        case "lte": where[filter.field] = { lte: value }; break;
+        case "contains": where[filter.field] = { contains: String(filter.value), mode: "insensitive" }; break;
+        case "in": where[filter.field] = { in: filter.value.split(",").map((v: string) => v.trim()) }; break;
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const model = entity === "resource" ? ctx.db.resource : entity === "project" ? ctx.db.project : ctx.db.assignment;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rows = await (model as any).findMany({ select, where, take: limit });
+
+    // Flatten nested relations
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const flatRows = (rows as any[]).map((row: Record<string, unknown>) => {
+      const flat: Record<string, unknown> = {};
+      for (const [key, val] of Object.entries(row)) {
+        if (val !== null && typeof val === "object" && !(val instanceof Date) && !Array.isArray(val)) {
+          for (const [subKey, subVal] of Object.entries(val as Record<string, unknown>)) {
+            flat[`${key}.${subKey}`] = subVal;
+          }
+        } else {
+          flat[key] = val;
+        }
+      }
+      return flat;
+    });
+
+    return { rows: flatRows, rowCount: flatRows.length, columns: ["id", ...columns.filter((c) => c !== "id")] };
+  },
+
+  async list_comments(params: { entityType: string; entityId: string }, ctx: ToolContext) {
+    const comments = await ctx.db.comment.findMany({
+      where: {
+        entityType: params.entityType,
+        entityId: params.entityId,
+        parentId: null,
+      },
+      include: {
+        author: { select: { id: true, name: true, email: true } },
+        replies: {
+          include: {
+            author: { select: { id: true, name: true, email: true } },
+          },
+          orderBy: { createdAt: "asc" as const },
+        },
+      },
+      orderBy: { createdAt: "asc" as const },
+    });
+
+    return comments.map((c) => ({
+      id: c.id,
+      author: c.author.name ?? c.author.email,
+      body: c.body,
+      resolved: c.resolved,
+      createdAt: c.createdAt.toISOString(),
+      replyCount: c.replies.length,
+      replies: c.replies.map((r) => ({
+        id: r.id,
+        author: r.author.name ?? r.author.email,
+        body: r.body,
+        resolved: r.resolved,
+        createdAt: r.createdAt.toISOString(),
+      })),
+    }));
+  },
+
+  async lookup_rate(params: {
+    clientId?: string;
+    chapter?: string;
+    managementLevelId?: string;
+    roleName?: string;
+    seniority?: string;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "viewCosts" as PermissionKey);
+
+    // Find rate cards applicable — prefer client-specific, then generic
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rateCardWhere: Record<string, any> = { isActive: true };
+    if (params.clientId) {
+      rateCardWhere.OR = [
+        { clientId: params.clientId },
+        { clientId: null },
+      ];
+    }
+
+    const rateCards = await ctx.db.rateCard.findMany({
+      where: rateCardWhere,
+      include: {
+        lines: {
+          select: {
+            id: true,
+            chapter: true,
+            seniority: true,
+            costRateCents: true,
+            billRateCents: true,
+            role: { select: { id: true, name: true } },
+          },
+        },
+        client: { select: { id: true, name: true } },
+      },
+      orderBy: [{ effectiveFrom: "desc" }],
+    });
+
+    if (rateCards.length === 0) {
+      return { message: "No active rate cards found." };
+    }
+
+    // Resolve role name to ID if needed
+    let roleId: string | undefined;
+    if (params.roleName) {
+      const role = await ctx.db.role.findFirst({
+        where: { name: { contains: params.roleName, mode: "insensitive" } },
+        select: { id: true, name: true },
+      });
+      if (role) roleId = role.id;
+    }
+
+    // Score each line across all rate cards
+    type ScoredLine = {
+      rateCardName: string;
+      clientName: string | null;
+      lineId: string;
+      chapter: string | null;
+      seniority: string | null;
+      roleName: string | null;
+      costRate: string;
+      billRate: string | null;
+      score: number;
+    };
+    const scoredLines: ScoredLine[] = [];
+
+    for (const card of rateCards) {
+      for (const line of card.lines) {
+        let score = 0;
+        let mismatch = false;
+
+        if (roleId && line.role) {
+          if (line.role.id === roleId) score += 4;
+          else mismatch = true;
+        }
+        if (params.chapter && line.chapter) {
+          if (line.chapter.toLowerCase() === params.chapter.toLowerCase()) score += 2;
+          else mismatch = true;
+        }
+        if (params.seniority && line.seniority) {
+          if (line.seniority.toLowerCase() === params.seniority.toLowerCase()) score += 1;
+          else mismatch = true;
+        }
+        // Prefer client-specific cards
+        if (params.clientId && card.client?.id === params.clientId) score += 3;
+
+        if (!mismatch) {
+          scoredLines.push({
+            rateCardName: card.name,
+            clientName: card.client?.name ?? null,
+            lineId: line.id,
+            chapter: line.chapter,
+            seniority: line.seniority,
+            roleName: line.role?.name ?? null,
+            costRate: fmtEur(line.costRateCents),
+            billRate: line.billRateCents ? fmtEur(line.billRateCents) : null,
+            score,
+          });
+        }
+      }
+    }
+
+    scoredLines.sort((a, b) => b.score - a.score);
+
+    const best = scoredLines[0];
+    return {
+      bestMatch: best ?? null,
+      alternatives: scoredLines.slice(1, 4),
+      totalCandidates: scoredLines.length,
+    };
+  },
+
+  // ── SCENARIO & AI ─────────────────────────────────────────────────────────
+
+  async simulate_scenario(params: {
+    projectId: string;
+    changes: Array<{
+      assignmentId?: string;
+      resourceId?: string;
+      roleId?: string;
+      startDate: string;
+      endDate: string;
+      hoursPerDay: number;
+      remove?: boolean;
+    }>;
+  }, ctx: ToolContext) {
+    assertPermission(ctx, "manageAllocations" as PermissionKey);
+
+    const DEFAULT_AVAILABILITY = {
+      monday: 8, tuesday: 8, wednesday: 8, thursday: 8, friday: 8, saturday: 0, sunday: 0,
+    } as const;
+
+    const project = await ctx.db.project.findUnique({
+      where: { id: params.projectId },
+      select: { id: true, name: true, budgetCents: true, startDate: true, endDate: true },
+    });
+    if (!project) return { error: "Project not found" };
+
+    // Load current assignments
+    const currentAssignments = await ctx.db.assignment.findMany({
+      where: { projectId: params.projectId, status: { not: "CANCELLED" } },
+      include: {
+        resource: {
+          select: { id: true, displayName: true, lcrCents: true, availability: true, chargeabilityTarget: true },
+        },
+      },
+    });
+
+    // Compute baseline
+    let baselineCostCents = 0;
+    let baselineHours = 0;
+    for (const a of currentAssignments) {
+      const availability = (a.resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY;
+      const result = calculateAllocation({
+        lcrCents: a.resource?.lcrCents ?? 0,
+        hoursPerDay: a.hoursPerDay,
+        startDate: a.startDate,
+        endDate: a.endDate,
+        availability,
+      });
+      baselineCostCents += result.totalCostCents;
+      baselineHours += result.totalHours;
+    }
+
+    // Collect resource IDs
+    const resourceIds = new Set<string>();
+    for (const c of params.changes) { if (c.resourceId) resourceIds.add(c.resourceId); }
+    for (const a of currentAssignments) { if (a.resourceId) resourceIds.add(a.resourceId); }
+
+    const resources = await ctx.db.resource.findMany({
+      where: { id: { in: [...resourceIds] } },
+      select: { id: true, displayName: true, lcrCents: true, availability: true, chargeabilityTarget: true },
+    });
+    const resourceMap = new Map(resources.map((r) => [r.id, r]));
+
+    // Build scenario entries
+    const removedIds = new Set(params.changes.filter((c) => c.remove && c.assignmentId).map((c) => c.assignmentId!));
+    const modifiedIds = new Set(params.changes.filter((c) => !c.remove && c.assignmentId).map((c) => c.assignmentId!));
+
+    const scenarioEntries: Array<{
+      resourceId: string | null;
+      lcrCents: number;
+      hoursPerDay: number;
+      startDate: Date;
+      endDate: Date;
+      availability: typeof DEFAULT_AVAILABILITY;
+    }> = [];
+
+    for (const a of currentAssignments) {
+      if (removedIds.has(a.id) || modifiedIds.has(a.id)) continue;
+      scenarioEntries.push({
+        resourceId: a.resourceId,
+        lcrCents: a.resource?.lcrCents ?? 0,
+        hoursPerDay: a.hoursPerDay,
+        startDate: a.startDate,
+        endDate: a.endDate,
+        availability: (a.resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY,
+      });
+    }
+
+    for (const c of params.changes) {
+      if (c.remove) continue;
+      const resource = c.resourceId ? resourceMap.get(c.resourceId) : null;
+      scenarioEntries.push({
+        resourceId: c.resourceId ?? null,
+        lcrCents: resource?.lcrCents ?? 0,
+        hoursPerDay: c.hoursPerDay,
+        startDate: new Date(c.startDate),
+        endDate: new Date(c.endDate),
+        availability: (resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY,
+      });
+    }
+
+    // Compute scenario totals
+    let scenarioCostCents = 0;
+    let scenarioHours = 0;
+    for (const entry of scenarioEntries) {
+      const result = calculateAllocation({
+        lcrCents: entry.lcrCents,
+        hoursPerDay: entry.hoursPerDay,
+        startDate: entry.startDate,
+        endDate: entry.endDate,
+        availability: entry.availability,
+      });
+      scenarioCostCents += result.totalCostCents;
+      scenarioHours += result.totalHours;
+    }
+
+    const warnings: string[] = [];
+    const budgetCents = project.budgetCents ?? 0;
+    if (budgetCents > 0 && scenarioCostCents > budgetCents) {
+      const overBudgetPct = Math.round(((scenarioCostCents - budgetCents) / budgetCents) * 100);
+      warnings.push(`Scenario exceeds budget by ${overBudgetPct}%`);
+    }
+
+    return {
+      baseline: {
+        totalCost: fmtEur(baselineCostCents),
+        totalCostCents: baselineCostCents,
+        totalHours: baselineHours,
+        headcount: currentAssignments.length,
+      },
+      scenario: {
+        totalCost: fmtEur(scenarioCostCents),
+        totalCostCents: scenarioCostCents,
+        totalHours: scenarioHours,
+        headcount: scenarioEntries.length,
+      },
+      delta: {
+        costCents: scenarioCostCents - baselineCostCents,
+        cost: fmtEur(scenarioCostCents - baselineCostCents),
+        hours: scenarioHours - baselineHours,
+        headcount: scenarioEntries.length - currentAssignments.length,
+      },
+      warnings,
+      budgetCents,
+    };
+  },
+
+  async generate_project_narrative(params: { projectId: string }, ctx: ToolContext) {
+    function countBizDays(start: Date, end: Date): number {
+      let count = 0;
+      const d = new Date(start);
+      while (d <= end) {
+        const dow = d.getDay();
+        if (dow !== 0 && dow !== 6) count++;
+        d.setDate(d.getDate() + 1);
+      }
+      return count;
+    }
+
+    const [project, settings] = await Promise.all([
+      ctx.db.project.findUnique({
+        where: { id: params.projectId },
+        include: {
+          demandRequirements: {
+            select: {
+              headcount: true,
+              _count: { select: { assignments: true } },
+            },
+          },
+          assignments: {
+            select: {
+              status: true,
+              dailyCostCents: true,
+              startDate: true,
+              endDate: true,
+              resource: { select: { displayName: true } },
+            },
+          },
+        },
+      }),
+      ctx.db.systemSettings.findUnique({ where: { id: "singleton" } }),
+    ]);
+
+    if (!project) return { error: "Project not found" };
+
+    if (!isAiConfigured(settings)) {
+      return { error: "AI is not configured. Please set credentials in Admin > Settings." };
+    }
+
+    const now = new Date();
+    const totalDays = countBizDays(project.startDate, project.endDate);
+    const elapsedDays = countBizDays(project.startDate, now < project.endDate ? now : project.endDate);
+    const progressPercent = totalDays > 0 ? Math.round((elapsedDays / totalDays) * 100) : 0;
+
+    const totalDemandHeadcount = project.demandRequirements.reduce((s, d) => s + d.headcount, 0);
+    const filledDemandHeadcount = project.demandRequirements.reduce(
+      (s, d) => s + Math.min(d._count.assignments, d.headcount), 0,
+    );
+    const staffingPercent = totalDemandHeadcount > 0 ? Math.round((filledDemandHeadcount / totalDemandHeadcount) * 100) : 100;
+
+    const totalCostCents = project.assignments.reduce((s, a) => {
+      const days = countBizDays(a.startDate, a.endDate);
+      return s + a.dailyCostCents * days;
+    }, 0);
+    const budgetCents = project.budgetCents;
+    const budgetUsedPercent = budgetCents > 0 ? Math.round((totalCostCents / budgetCents) * 100) : 0;
+
+    const overrunCount = project.assignments.filter((a) => a.endDate > project.endDate).length;
+
+    const dataContext = [
+      `Project: ${project.name} (${project.shortCode})`,
+      `Status: ${project.status}`,
+      `Timeline: ${project.startDate.toISOString().slice(0, 10)} to ${project.endDate.toISOString().slice(0, 10)} (${progressPercent}% elapsed)`,
+      `Budget: ${fmtEur(budgetCents)} | Estimated cost: ${fmtEur(totalCostCents)} (${budgetUsedPercent}% of budget)`,
+      `Staffing: ${filledDemandHeadcount}/${totalDemandHeadcount} positions filled (${staffingPercent}%)`,
+      `Active assignments: ${project.assignments.filter((a) => a.status === "ACTIVE" || a.status === "CONFIRMED").length}`,
+      overrunCount > 0
+        ? `Timeline risk: ${overrunCount} assignment(s) extend beyond project end date`
+        : "No timeline overruns detected",
+    ].join("\n");
+
+    const prompt = `Generate a concise executive summary for this project covering: budget status, staffing completeness, timeline risk, and key action items. Be specific with numbers. Keep it to 3-5 sentences.\n\n${dataContext}`;
+
+    try {
+      const client = createAiClient(settings!);
+      const model = settings!.azureOpenAiDeployment!;
+      const maxTokens = settings!.aiMaxCompletionTokens ?? 300;
+      const temperature = settings!.aiTemperature ?? 1;
+
+      const completion = await client.chat.completions.create({
+        messages: [
+          { role: "system", content: "You are a project management analyst providing brief executive summaries. Be factual and action-oriented." },
+          { role: "user", content: prompt },
+        ],
+        max_completion_tokens: maxTokens,
+        model,
+        ...(temperature !== 1 ? { temperature } : {}),
+      });
+      const narrative = completion.choices[0]?.message?.content?.trim() ?? "";
+
+      if (!narrative) return { error: "AI returned an empty response." };
+
+      const generatedAt = new Date().toISOString();
+
+      // Cache in project dynamicFields
+      const existingDynamic = (project.dynamicFields as Record<string, unknown>) ?? {};
+      await ctx.db.project.update({
+        where: { id: params.projectId },
+        data: {
+          dynamicFields: {
+            ...existingDynamic,
+            aiNarrative: narrative,
+            aiNarrativeGeneratedAt: generatedAt,
+          },
+        },
+      });
+
+      return { narrative, generatedAt };
+    } catch (err) {
+      return { error: `AI call failed: ${parseAiError(err)}` };
+    }
+  },
+
+  async create_comment(params: {
+    entityType: string;
+    entityId: string;
+    body: string;
+  }, ctx: ToolContext) {
+    // Resolve the DB user from the assistant tool context userId
+    const comment = await ctx.db.comment.create({
+      data: {
+        entityType: params.entityType,
+        entityId: params.entityId,
+        authorId: ctx.userId,
+        body: params.body,
+        mentions: [],
+      },
+      include: {
+        author: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["comment"],
+      id: comment.id,
+      author: comment.author.name ?? comment.author.email,
+      body: comment.body,
+      createdAt: comment.createdAt.toISOString(),
+    };
+  },
+
+  async resolve_comment(params: {
+    commentId: string;
+    resolved?: boolean;
+  }, ctx: ToolContext) {
+    const existing = await ctx.db.comment.findUnique({
+      where: { id: params.commentId },
+      select: { id: true, authorId: true, body: true },
+    });
+
+    if (!existing) return { error: "Comment not found" };
+
+    // Only the author or an admin can resolve
+    const dbUser = await ctx.db.user.findUnique({
+      where: { id: ctx.userId },
+      select: { systemRole: true },
+    });
+    if (existing.authorId !== ctx.userId && dbUser?.systemRole !== "ADMIN") {
+      return { error: "Only the comment author or an admin can resolve comments" };
+    }
+
+    const resolved = params.resolved !== false;
+    const updated = await ctx.db.comment.update({
+      where: { id: params.commentId },
+      data: { resolved },
+      include: {
+        author: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return {
+      __action: "invalidate",
+      scope: ["comment"],
+      id: updated.id,
+      resolved: updated.resolved,
+      author: updated.author.name ?? updated.author.email,
+      body: updated.body.slice(0, 100),
+    };
+  },
 };
 
 // ─── Executor ───────────────────────────────────────────────────────────────
diff --git a/packages/api/src/router/assistant.ts b/packages/api/src/router/assistant.ts
index 1989a30..085a1cc 100644
--- a/packages/api/src/router/assistant.ts
+++ b/packages/api/src/router/assistant.ts
@@ -1,6 +1,6 @@
 /**
  * AI Assistant router — provides a chat endpoint that uses OpenAI Function Calling
- * to answer questions about Planarchy data and modify resources/projects.
+ * to answer questions about plANARCHY data and modify resources/projects.
  */
 
 import { z } from "zod";
@@ -12,13 +12,22 @@ import { TOOL_DEFINITIONS, executeTool, type ToolContext, type ToolAction } from
 
 const MAX_TOOL_ITERATIONS = 8;
 
-const SYSTEM_PROMPT = `Du bist der Planarchy-Assistent — ein hilfreicher AI-Assistent für Ressourcenplanung und Projektmanagement in einer 3D-Produktionsumgebung.
+const SYSTEM_PROMPT = `Du bist der plANARCHY-Assistent — ein hilfreicher AI-Assistent für Ressourcenplanung und Projektmanagement in einer 3D-Produktionsumgebung.
 
 Deine Fähigkeiten:
-- Fragen über Ressourcen, Projekte, Allokationen, Budget, Urlaub, Estimates, Org-Struktur beantworten
-- Chargeability-Analysen, Urlaubsübersichten, Budget-Analysen
-- Ressourcen/Projekte aktualisieren, Allokationen erstellen/stornieren (nur mit Berechtigung + expliziter Bestätigung)
+- Fragen über Ressourcen, Projekte, Allokationen, Budget, Urlaub, Estimates, Org-Struktur, Rollen, Blueprints, Rate Cards beantworten
+- Chargeability-Analysen, Urlaubsübersichten, Budget-Analysen, Staffing-Vorschläge, Kapazitätssuche
+- Ressourcen erstellen/aktualisieren/deaktivieren, Projekte erstellen/aktualisieren/löschen
+- Allokationen erstellen/stornieren, Demands erstellen/besetzen, Staffing-Vorschläge abrufen
+- Urlaub erstellen/genehmigen/ablehnen/stornieren, Ansprüche verwalten
+- Rollen, Clients, Org-Units erstellen/aktualisieren/löschen
+- Estimates erstellen, Rate Cards abrufen, Blueprints anzeigen
+- Notifications anzeigen, Dashboard-Details abrufen
+- Tasks einsehen, Status ändern, Tasks erledigen (approve vacation, confirm allocation, etc.)
+- Persönliche Erinnerungen anlegen (einmalig oder wiederkehrend)
+- Tasks für andere User erstellen, Broadcasts an Gruppen senden
 - Den User zu relevanten Seiten navigieren (Timeline, Dashboard, etc. mit Filtern)
+- Verfügbarkeit von Ressourcen prüfen, Kapazitäten suchen
 
 Wichtige Regeln:
 - Antworte in der Sprache des Users (Deutsch oder Englisch)
@@ -39,15 +48,44 @@ Datenmodell:
 
 /** Map tool names to the permission required to use them */
 const TOOL_PERMISSION_MAP: Record<string, string> = {
+  // Resource management
   update_resource: "manageResources",
+  create_resource: "manageResources",
+  deactivate_resource: "manageResources",
+  create_role: "manageResources",
+  update_role: "manageResources",
+  delete_role: "manageResources",
+  create_org_unit: "manageResources",
+  update_org_unit: "manageResources",
+  // Project management
   update_project: "manageProjects",
+  create_project: "manageProjects",
+  delete_project: "manageProjects",
+  create_client: "manageProjects",
+  update_client: "manageProjects",
+  create_estimate: "manageProjects",
+  generate_project_cover: "manageProjects",
+  remove_project_cover: "manageProjects",
+  // Allocation management
   create_allocation: "manageAllocations",
   cancel_allocation: "manageAllocations",
   update_allocation_status: "manageAllocations",
+  create_demand: "manageAllocations",
+  fill_demand: "manageAllocations",
+  // Vacation management
+  create_vacation: "manageVacations",
+  approve_vacation: "manageVacations",
+  reject_vacation: "manageVacations",
+  cancel_vacation: "manageVacations",
+  set_entitlement: "manageVacations",
+  // Task management
+  create_task_for_user: "manageProjects",
+  send_broadcast: "manageProjects",
+  execute_task_action: "manageAllocations",
 };
 
 /** Tools that require cost visibility */
-const COST_TOOLS = new Set(["get_budget_status", "get_chargeability"]);
+const COST_TOOLS = new Set(["get_budget_status", "get_chargeability", "resolve_rate", "list_rate_cards", "get_estimate_detail"]);
 
 export const assistantRouter = createTRPCRouter({
   chat: protectedProcedure
@@ -78,10 +116,11 @@ export const assistantRouter = createTRPCRouter({
       const temperature = settings?.aiTemperature ?? 0.7;
       const model = settings?.azureOpenAiDeployment ?? "gpt-4o-mini";
 
-      // 2. Resolve granular permissions
+      // 2. Resolve granular permissions (using DB-based role defaults if available)
       const permissions = resolvePermissions(
         userRole as SystemRole,
         (ctx.dbUser?.permissionOverrides as PermissionOverrides | null) ?? null,
+        ctx.roleDefaults ?? undefined,
       );
       const permissionList = [...permissions];
 
@@ -122,7 +161,7 @@ export const assistantRouter = createTRPCRouter({
       });
 
       // 5. Function calling loop
-      const toolCtx: ToolContext = { db: ctx.db, userRole, permissions };
+      const toolCtx: ToolContext = { db: ctx.db, userId: ctx.dbUser!.id, userRole, permissions };
       const collectedActions: ToolAction[] = [];
 
       for (let i = 0; i < MAX_TOOL_ITERATIONS; i++) {
diff --git a/packages/api/src/router/calculation-rules.ts b/packages/api/src/router/calculation-rules.ts
index 30b4417..cf8e790 100644
--- a/packages/api/src/router/calculation-rules.ts
+++ b/packages/api/src/router/calculation-rules.ts
@@ -2,29 +2,29 @@ import {
   CreateCalculationRuleSchema,
   UpdateCalculationRuleSchema,
 } from "@planarchy/shared";
-import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import { findUniqueOrThrow } from "../db/helpers.js";
+import { PROJECT_BRIEF_SELECT } from "../db/selects.js";
 import { createTRPCRouter, controllerProcedure, managerProcedure } from "../trpc.js";
 
 export const calculationRuleRouter = createTRPCRouter({
   list: controllerProcedure.query(async ({ ctx }) => {
     return ctx.db.calculationRule.findMany({
       orderBy: [{ priority: "desc" }, { name: "asc" }],
-      include: { project: { select: { id: true, name: true, shortCode: true } } },
+      include: { project: { select: PROJECT_BRIEF_SELECT } },
     });
   }),
 
   getById: controllerProcedure
     .input(z.object({ id: z.string() }))
     .query(async ({ ctx, input }) => {
-      const rule = await ctx.db.calculationRule.findUnique({
-        where: { id: input.id },
-        include: { project: { select: { id: true, name: true, shortCode: true } } },
-      });
-      if (!rule) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Calculation rule not found" });
-      }
-      return rule;
+      return findUniqueOrThrow(
+        ctx.db.calculationRule.findUnique({
+          where: { id: input.id },
+          include: { project: { select: PROJECT_BRIEF_SELECT } },
+        }),
+        "CalculationRule",
+      );
     }),
 
   /** Get all active rules (optimized for engine use — no project include) */
@@ -58,10 +58,10 @@ export const calculationRuleRouter = createTRPCRouter({
     .input(UpdateCalculationRuleSchema)
     .mutation(async ({ ctx, input }) => {
       const { id, ...data } = input;
-      const existing = await ctx.db.calculationRule.findUnique({ where: { id } });
-      if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Calculation rule not found" });
-      }
+      await findUniqueOrThrow(
+        ctx.db.calculationRule.findUnique({ where: { id } }),
+        "CalculationRule",
+      );
 
       // Build update data using exactOptionalPropertyTypes pattern
       const updateData: Record<string, unknown> = {};
@@ -85,10 +85,10 @@ export const calculationRuleRouter = createTRPCRouter({
   delete: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      const existing = await ctx.db.calculationRule.findUnique({ where: { id: input.id } });
-      if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Calculation rule not found" });
-      }
+      await findUniqueOrThrow(
+        ctx.db.calculationRule.findUnique({ where: { id: input.id } }),
+        "CalculationRule",
+      );
       await ctx.db.calculationRule.delete({ where: { id: input.id } });
       return { success: true };
     }),
diff --git a/packages/api/src/router/comment.ts b/packages/api/src/router/comment.ts
new file mode 100644
index 0000000..d7246d5
--- /dev/null
+++ b/packages/api/src/router/comment.ts
@@ -0,0 +1,233 @@
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { SystemRole } from "@planarchy/shared";
+import { createTRPCRouter, protectedProcedure } from "../trpc.js";
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Resolve the DB user id from the session email. Throws UNAUTHORIZED if not found. */
+async function resolveUserId(ctx: {
+  db: {
+    user: {
+      findUnique: (args: {
+        where: { email: string };
+        select: { id: true };
+      }) => Promise<{ id: string } | null>;
+    };
+  };
+  session: { user?: { email?: string | null } | null };
+}): Promise<string> {
+  const email = ctx.session.user?.email;
+  if (!email) throw new TRPCError({ code: "UNAUTHORIZED" });
+  const user = await ctx.db.user.findUnique({
+    where: { email },
+    select: { id: true },
+  });
+  if (!user) throw new TRPCError({ code: "UNAUTHORIZED" });
+  return user.id;
+}
+
+/**
+ * Parse @mentions from comment body.
+ * Pattern: @[Display Name](userId)
+ * Returns an array of unique user IDs.
+ */
+function parseMentions(body: string): string[] {
+  const regex = /@\[([^\]]+)\]\(([^)]+)\)/g;
+  const ids = new Set<string>();
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(body)) !== null) {
+    ids.add(match[2]!);
+  }
+  return Array.from(ids);
+}
+
+// ─── Router ───────────────────────────────────────────────────────────────────
+
+export const commentRouter = createTRPCRouter({
+  /** List comments for a given entity, with author info and 1-level nested replies */
+  list: protectedProcedure
+    .input(
+      z.object({
+        entityType: z.string(),
+        entityId: z.string(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.db.comment.findMany({
+        where: {
+          entityType: input.entityType,
+          entityId: input.entityId,
+          parentId: null, // only top-level comments
+        },
+        include: {
+          author: { select: { id: true, name: true, email: true, image: true } },
+          replies: {
+            include: {
+              author: { select: { id: true, name: true, email: true, image: true } },
+            },
+            orderBy: { createdAt: "asc" },
+          },
+        },
+        orderBy: { createdAt: "asc" },
+      });
+    }),
+
+  /** Count comments for a given entity (used for badge) */
+  count: protectedProcedure
+    .input(
+      z.object({
+        entityType: z.string(),
+        entityId: z.string(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.db.comment.count({
+        where: {
+          entityType: input.entityType,
+          entityId: input.entityId,
+        },
+      });
+    }),
+
+  /** Create a comment, parse @mentions, and notify mentioned users */
+  create: protectedProcedure
+    .input(
+      z.object({
+        entityType: z.string(),
+        entityId: z.string(),
+        parentId: z.string().optional(),
+        body: z.string().min(1).max(10_000),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const authorId = await resolveUserId(ctx);
+      const mentions = parseMentions(input.body);
+
+      // If replying, verify the parent exists
+      if (input.parentId) {
+        const parent = await ctx.db.comment.findUnique({
+          where: { id: input.parentId },
+          select: { id: true },
+        });
+        if (!parent) {
+          throw new TRPCError({ code: "NOT_FOUND", message: "Parent comment not found" });
+        }
+      }
+
+      const comment = await ctx.db.comment.create({
+        data: {
+          entityType: input.entityType,
+          entityId: input.entityId,
+          ...(input.parentId !== undefined ? { parentId: input.parentId } : {}),
+          authorId,
+          body: input.body,
+          mentions,
+        },
+        include: {
+          author: { select: { id: true, name: true, email: true, image: true } },
+        },
+      });
+
+      // Create notifications for mentioned users (excluding the author)
+      const mentionedUserIds = mentions.filter((id) => id !== authorId);
+      if (mentionedUserIds.length > 0) {
+        const authorName = comment.author.name ?? comment.author.email;
+        const truncatedBody =
+          input.body.length > 120 ? `${input.body.slice(0, 120)}...` : input.body;
+
+        await Promise.all(
+          mentionedUserIds.map(async (userId) => {
+            const notification = await ctx.db.notification.create({
+              data: {
+                userId,
+                type: "COMMENT_MENTION",
+                title: `${authorName} mentioned you in a comment`,
+                body: truncatedBody,
+                entityId: input.entityId,
+                entityType: input.entityType,
+                senderId: authorId,
+                link: `/estimates/${input.entityId}?tab=comments`,
+                channel: "in_app",
+              },
+            });
+            emitNotificationCreated(userId, notification.id);
+          }),
+        );
+      }
+
+      return comment;
+    }),
+
+  /** Resolve or unresolve a comment (author or admin only) */
+  resolve: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        resolved: z.boolean().default(true),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+      const dbUser = ctx.dbUser;
+
+      const existing = await ctx.db.comment.findUnique({
+        where: { id: input.id },
+        select: { id: true, authorId: true },
+      });
+
+      if (!existing) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Comment not found" });
+      }
+
+      // Only the author or an admin can resolve
+      const isAdmin = dbUser?.systemRole === SystemRole.ADMIN;
+      if (existing.authorId !== userId && !isAdmin) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Only the comment author or an admin can resolve comments",
+        });
+      }
+
+      return ctx.db.comment.update({
+        where: { id: input.id },
+        data: { resolved: input.resolved },
+        include: {
+          author: { select: { id: true, name: true, email: true, image: true } },
+        },
+      });
+    }),
+
+  /** Delete a comment (author or admin only). Hard-deletes, including all replies. */
+  delete: protectedProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+      const dbUser = ctx.dbUser;
+
+      const existing = await ctx.db.comment.findUnique({
+        where: { id: input.id },
+        select: { id: true, authorId: true },
+      });
+
+      if (!existing) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Comment not found" });
+      }
+
+      const isAdmin = dbUser?.systemRole === SystemRole.ADMIN;
+      if (existing.authorId !== userId && !isAdmin) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Only the comment author or an admin can delete comments",
+        });
+      }
+
+      // Delete all replies first (they reference this comment as parent)
+      await ctx.db.comment.deleteMany({
+        where: { parentId: input.id },
+      });
+
+      await ctx.db.comment.delete({ where: { id: input.id } });
+    }),
+});
diff --git a/packages/api/src/router/computation-graph.ts b/packages/api/src/router/computation-graph.ts
new file mode 100644
index 0000000..c91352a
--- /dev/null
+++ b/packages/api/src/router/computation-graph.ts
@@ -0,0 +1,616 @@
+import {
+  calculateSAH,
+  calculateAllocation,
+  deriveResourceForecast,
+  computeBudgetStatus,
+  getMonthRange,
+  countWorkingDaysInOverlap,
+  DEFAULT_CALCULATION_RULES,
+  type AssignmentSlice,
+} from "@planarchy/engine";
+import type { CalculationRule, AbsenceDay, SpainScheduleRule, WeekdayAvailability } from "@planarchy/shared";
+import { VacationStatus } from "@planarchy/db";
+import { z } from "zod";
+import { createTRPCRouter, controllerProcedure } from "../trpc.js";
+import { fmtEur } from "../lib/format-utils.js";
+
+// ─── Graph Types (mirrored from client for API response) ────────────────────
+
+type Domain =
+  | "INPUT" | "SAH" | "ALLOCATION" | "RULES" | "CHARGEABILITY" | "BUDGET"
+  | "ESTIMATE" | "COMMERCIAL" | "EXPERIENCE" | "EFFORT" | "SPREAD";
+
+export interface GraphNode {
+  id: string;
+  label: string;
+  value: number | string;
+  unit: string;
+  domain: Domain;
+  description: string;
+  formula?: string;
+  level: number;
+}
+
+export interface GraphLink {
+  source: string;
+  target: string;
+  formula: string;
+  weight: number;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function n(
+  id: string, label: string, value: number | string, unit: string,
+  domain: Domain, description: string, level: number, formula?: string,
+): GraphNode {
+  return { id, label, value, unit, domain, description, level, ...(formula ? { formula } : {}) };
+}
+
+function l(source: string, target: string, formula: string, weight = 1): GraphLink {
+  return { source, target, formula, weight };
+}
+
+function fmtPct(ratio: number): string {
+  return `${(ratio * 100).toFixed(1)}%`;
+}
+
+function fmtNum(v: number, decimals = 1): string {
+  return v.toFixed(decimals);
+}
+
+// ─── Router ─────────────────────────────────────────────────────────────────
+
+export const computationGraphRouter = createTRPCRouter({
+  /**
+   * Resource View: SAH, Allocation, Rules, Chargeability, Budget
+   * for a single resource in a single month.
+   */
+  getResourceData: controllerProcedure
+    .input(z.object({
+      resourceId: z.string(),
+      month: z.string().regex(/^\d{4}-\d{2}$/),
+    }))
+    .query(async ({ ctx, input }) => {
+      const [year, month] = input.month.split("-").map(Number) as [number, number];
+      const { start: monthStart, end: monthEnd } = getMonthRange(year, month);
+
+      // ── 1. Load resource ──
+      const resource = await ctx.db.resource.findUniqueOrThrow({
+        where: { id: input.resourceId },
+        select: {
+          id: true,
+          displayName: true,
+          eid: true,
+          fte: true,
+          lcrCents: true,
+          chargeabilityTarget: true,
+          availability: true,
+          country: { select: { id: true, code: true, dailyWorkingHours: true, scheduleRules: true } },
+          managementLevelGroup: { select: { id: true, name: true, targetPercentage: true } },
+        },
+      });
+
+      const dailyHours = resource.country?.dailyWorkingHours ?? 8;
+      const scheduleRules = resource.country?.scheduleRules as SpainScheduleRule | null;
+      const targetPct = resource.managementLevelGroup?.targetPercentage ?? (resource.chargeabilityTarget / 100);
+
+      // Resource weekly availability (per-day hours)
+      const avail = resource.availability as WeekdayAvailability | null;
+      const weeklyAvailability: WeekdayAvailability = avail ?? {
+        monday: dailyHours, tuesday: dailyHours, wednesday: dailyHours,
+        thursday: dailyHours, friday: dailyHours, saturday: 0, sunday: 0,
+      };
+
+      // ── 2. Load assignments in month ──
+      const assignments = await ctx.db.assignment.findMany({
+        where: {
+          resourceId: input.resourceId,
+          startDate: { lte: monthEnd },
+          endDate: { gte: monthStart },
+          status: { in: ["CONFIRMED", "ACTIVE", "PROPOSED"] },
+        },
+        select: {
+          id: true,
+          hoursPerDay: true,
+          startDate: true,
+          endDate: true,
+          dailyCostCents: true,
+          status: true,
+          project: {
+            select: {
+              id: true,
+              name: true,
+              shortCode: true,
+              budgetCents: true,
+              winProbability: true,
+              utilizationCategory: { select: { code: true } },
+            },
+          },
+        },
+      });
+
+      // ── 3. Load absences ──
+      const vacations = await ctx.db.vacation.findMany({
+        where: {
+          resourceId: input.resourceId,
+          status: VacationStatus.APPROVED,
+          startDate: { lte: monthEnd },
+          endDate: { gte: monthStart },
+        },
+        select: { startDate: true, endDate: true, type: true, isHalfDay: true },
+      });
+
+      // Build absence dates for SAH (ISO strings)
+      const absenceDateStrings: string[] = [];
+      const absenceDays: AbsenceDay[] = [];
+      for (const v of vacations) {
+        const vStart = new Date(Math.max(v.startDate.getTime(), monthStart.getTime()));
+        const vEnd = new Date(Math.min(v.endDate.getTime(), monthEnd.getTime()));
+        if (vStart > vEnd) continue;
+        const cursor = new Date(vStart);
+        cursor.setUTCHours(0, 0, 0, 0);
+        const endNorm = new Date(vEnd);
+        endNorm.setUTCHours(0, 0, 0, 0);
+        const triggerType = v.type === "SICK" ? "SICK" as const
+          : v.type === "PUBLIC_HOLIDAY" ? "PUBLIC_HOLIDAY" as const
+          : "VACATION" as const;
+        while (cursor <= endNorm) {
+          absenceDateStrings.push(cursor.toISOString().slice(0, 10));
+          absenceDays.push({
+            date: new Date(cursor),
+            type: triggerType,
+            ...(v.isHalfDay ? { isHalfDay: true } : {}),
+          });
+          cursor.setUTCDate(cursor.getUTCDate() + 1);
+        }
+      }
+
+      // ── 4. Load calculation rules ──
+      let calcRules: CalculationRule[] = DEFAULT_CALCULATION_RULES;
+      try {
+        const dbRules = await ctx.db.calculationRule.findMany({
+          where: { isActive: true },
+          orderBy: [{ priority: "desc" }],
+        });
+        if (dbRules.length > 0) {
+          calcRules = dbRules as unknown as CalculationRule[];
+        }
+      } catch {
+        // table may not exist yet
+      }
+
+      // ── 5. Calculate SAH ──
+      const sahResult = calculateSAH({
+        dailyWorkingHours: dailyHours,
+        scheduleRules,
+        fte: resource.fte,
+        periodStart: monthStart,
+        periodEnd: monthEnd,
+        publicHolidays: [],
+        absenceDays: absenceDateStrings,
+      });
+
+      // ── 6. Calculate allocations + chargeability slices ──
+      const slices: AssignmentSlice[] = [];
+      let totalAllocHours = 0;
+      let totalAllocCostCents = 0;
+      let totalChargeableHours = 0;
+      let totalProjectCostCents = 0;
+      let hasRulesEffect = false;
+
+      for (const a of assignments) {
+        const workingDays = countWorkingDaysInOverlap(monthStart, monthEnd, a.startDate, a.endDate);
+        if (workingDays <= 0) continue;
+
+        const overlapStart = new Date(Math.max(monthStart.getTime(), a.startDate.getTime()));
+        const overlapEnd = new Date(Math.min(monthEnd.getTime(), a.endDate.getTime()));
+        const categoryCode = a.project.utilizationCategory?.code ?? "Chg";
+
+        const calcResult = calculateAllocation({
+          lcrCents: resource.lcrCents,
+          hoursPerDay: a.hoursPerDay,
+          startDate: overlapStart,
+          endDate: overlapEnd,
+          availability: weeklyAvailability,
+          absenceDays,
+          calculationRules: calcRules,
+        });
+
+        totalAllocHours += calcResult.totalHours;
+        totalAllocCostCents += calcResult.totalCostCents;
+        if (calcResult.totalChargeableHours !== undefined) {
+          totalChargeableHours += calcResult.totalChargeableHours;
+          totalProjectCostCents += calcResult.totalProjectCostCents ?? calcResult.totalCostCents;
+          hasRulesEffect = true;
+        } else {
+          totalChargeableHours += calcResult.totalHours;
+          totalProjectCostCents += calcResult.totalCostCents;
+        }
+
+        slices.push({
+          hoursPerDay: a.hoursPerDay,
+          workingDays,
+          categoryCode,
+          ...(calcResult.totalChargeableHours !== undefined
+            ? { totalChargeableHours: calcResult.totalChargeableHours }
+            : {}),
+        });
+      }
+
+      // ── 7. Calculate chargeability forecast ──
+      const forecast = deriveResourceForecast({
+        fte: resource.fte,
+        targetPercentage: targetPct,
+        assignments: slices,
+        sah: sahResult.standardAvailableHours,
+      });
+
+      // ── 8. Build budget status for first project with budget ──
+      const budgetProject = assignments.find((a) => a.project.budgetCents != null && a.project.budgetCents > 0)?.project;
+      let budgetNodes: GraphNode[] = [];
+      let budgetLinks: GraphLink[] = [];
+      if (budgetProject && budgetProject.budgetCents != null) {
+        // Load all allocations for this project to compute budget
+        const projectAllocs = await ctx.db.assignment.findMany({
+          where: { projectId: budgetProject.id },
+          select: { status: true, dailyCostCents: true, startDate: true, endDate: true, hoursPerDay: true },
+        });
+        const budgetStatus = computeBudgetStatus(
+          budgetProject.budgetCents,
+          budgetProject.winProbability,
+          projectAllocs.map((pa) => ({
+            status: pa.status as unknown as string,
+            dailyCostCents: pa.dailyCostCents,
+            startDate: pa.startDate,
+            endDate: pa.endDate,
+            hoursPerDay: pa.hoursPerDay,
+          })) as Parameters<typeof computeBudgetStatus>[2],
+          monthStart,
+          monthEnd,
+        );
+
+        budgetNodes = [
+          n("input.budgetCents", "Project Budget", fmtEur(budgetProject.budgetCents), "EUR", "INPUT", `Budget for ${budgetProject.name}`, 0),
+          n("input.winProbability", "Win Probability", `${budgetProject.winProbability}%`, "%", "INPUT", "Project win probability", 0),
+          n("budget.confirmedCents", "Confirmed", fmtEur(budgetStatus.confirmedCents), "EUR", "BUDGET", "Sum of CONFIRMED/ACTIVE allocation costs", 2, "Σ(confirmed allocs)"),
+          n("budget.proposedCents", "Proposed", fmtEur(budgetStatus.proposedCents), "EUR", "BUDGET", "Sum of PROPOSED allocation costs", 2, "Σ(proposed allocs)"),
+          n("budget.allocatedCents", "Allocated", fmtEur(budgetStatus.allocatedCents), "EUR", "BUDGET", "Total allocated budget", 2, "confirmed + proposed"),
+          n("budget.remainingCents", "Remaining", fmtEur(budgetStatus.remainingCents), "EUR", "BUDGET", "Remaining budget", 3, "budget - allocated"),
+          n("budget.utilizationPct", "Utilization", `${budgetStatus.utilizationPercent.toFixed(1)}%`, "%", "BUDGET", "Budget utilization percentage", 3, "allocated / budget × 100"),
+          n("budget.weightedCents", "Win-Weighted", fmtEur(budgetStatus.winProbabilityWeightedCents), "EUR", "BUDGET", "Win-probability-weighted cost", 3, "allocated × winProb / 100"),
+        ];
+        budgetLinks = [
+          l("alloc.totalCostCents", "budget.confirmedCents", "per assignment", 1),
+          l("budget.confirmedCents", "budget.allocatedCents", "+", 2),
+          l("budget.proposedCents", "budget.allocatedCents", "+", 2),
+          l("input.budgetCents", "budget.remainingCents", "−", 2),
+          l("budget.allocatedCents", "budget.remainingCents", "−", 2),
+          l("budget.allocatedCents", "budget.utilizationPct", "÷ budget × 100", 2),
+          l("input.budgetCents", "budget.utilizationPct", "÷", 1),
+          l("budget.allocatedCents", "budget.weightedCents", "× winProb / 100", 1),
+          l("input.winProbability", "budget.weightedCents", "×", 1),
+        ];
+      }
+
+      // ── 9. Build graph nodes + links ──
+
+      const dailyCostCents = assignments.length > 0
+        ? Math.round(assignments[0]!.hoursPerDay * resource.lcrCents)
+        : 0;
+      const avgHoursPerDay = assignments.length > 0
+        ? assignments.reduce((sum, a) => sum + a.hoursPerDay, 0) / assignments.length
+        : 0;
+
+      // Format weekly availability for display
+      const weekdayLabels = ["Mo", "Tu", "We", "Th", "Fr"];
+      const weekdayValues = [weeklyAvailability.monday, weeklyAvailability.tuesday, weeklyAvailability.wednesday, weeklyAvailability.thursday, weeklyAvailability.friday];
+      const weeklyTotalHours = weekdayValues.reduce((s, v) => s + v, 0);
+      const allSame = weekdayValues.every((v) => v === weekdayValues[0]);
+      const availabilityLabel = allSame
+        ? `${weekdayValues[0]}h/day`
+        : weekdayLabels.map((d, i) => `${d}:${weekdayValues[i]}`).join(" ");
+
+      const nodes: GraphNode[] = [
+        // INPUT
+        n("input.fte", "FTE", fmtNum(resource.fte, 2), "ratio", "INPUT", `Resource FTE factor`, 0),
+        n("input.dailyHours", "Country Hours", `${dailyHours} h`, "hours", "INPUT", `Base daily working hours (${resource.country?.code ?? "?"})`, 0),
+        n("input.weeklyAvail", "Weekly Avail.", `${weeklyTotalHours}h`, "h/week", "INPUT", `Resource availability: ${availabilityLabel}`, 0),
+        n("input.lcrCents", "LCR", fmtEur(resource.lcrCents), "cents/h", "INPUT", "Loaded Cost Rate per hour", 0),
+        n("input.hoursPerDay", "Hours/Day", fmtNum(avgHoursPerDay), "hours", "INPUT", "Average hours/day across assignments", 0),
+        n("input.absences", "Absences", `${absenceDays.length}`, "count", "INPUT", `Absence days in ${input.month}`, 0),
+        n("input.calcRules", "Active Rules", `${calcRules.length}`, "count", "INPUT", "Active calculation rules", 0),
+        n("input.targetPct", "Target", fmtPct(targetPct), "%", "INPUT", `Chargeability target (${resource.managementLevelGroup?.name ?? "legacy"})`, 0),
+
+        // SAH
+        n("sah.calendarDays", "Calendar Days", `${sahResult.calendarDays}`, "days", "SAH", "Total calendar days in period", 1),
+        n("sah.weekendDays", "Weekend Days", `${sahResult.weekendDays}`, "days", "SAH", "Saturday + Sunday count", 1),
+        n("sah.grossWorkingDays", "Gross Work Days", `${sahResult.grossWorkingDays}`, "days", "SAH", "Calendar days minus weekends", 1, "calendarDays - weekendDays"),
+        n("sah.absenceDays", "Absence Ded.", `${sahResult.absenceDays}`, "days", "SAH", "Absences falling on working days", 1),
+        n("sah.netWorkingDays", "Net Work Days", `${sahResult.netWorkingDays}`, "days", "SAH", "Working days after deductions", 2, "gross - absences"),
+        n("sah.effectiveHoursPerDay", "Eff. Hrs/Day", fmtNum(sahResult.effectiveHoursPerDay), "hours", "SAH", "Average effective hours per net working day", 2, "Σ(dailyHours × FTE) / netDays"),
+        n("sah.sah", "SAH", fmtNum(sahResult.standardAvailableHours), "hours", "SAH", "Standard Available Hours — chargeability denominator", 2, "Σ(dailyHours × FTE) per net day"),
+
+        // ALLOCATION
+        n("alloc.totalHours", "Total Hours", fmtNum(totalAllocHours), "hours", "ALLOCATION", "Sum of effective hours across assignments", 2, "Σ(effectiveHours/day)"),
+        n("alloc.dailyCostCents", "Daily Cost", fmtEur(dailyCostCents), "EUR", "ALLOCATION", "Cost per working day", 1, "hoursPerDay × LCR"),
+        n("alloc.totalCostCents", "Total Cost", fmtEur(totalAllocCostCents), "EUR", "ALLOCATION", "Sum of daily costs", 2, "Σ(dailyCost)"),
+        ...(hasRulesEffect ? [
+          n("alloc.chargeableHours", "Chargeable Hrs", fmtNum(totalChargeableHours), "hours", "ALLOCATION", "Rules-adjusted chargeable hours", 2, "rules-adjusted"),
+          n("alloc.projectCostCents", "Project Cost", fmtEur(totalProjectCostCents), "EUR", "ALLOCATION", "Rules-adjusted project cost", 2, "rules-adjusted"),
+        ] : []),
+
+        // RULES (only if absences exist)
+        ...(absenceDays.length > 0 ? [
+          n("rules.activeRules", "Matched Rules", `${calcRules.length} rules`, "—", "RULES", "Rules evaluated for absence days", 1),
+          n("rules.costEffect", "Cost Effect", hasRulesEffect ? "ZERO" : "—", "—", "RULES", "How absent days affect project cost", 1, "CHARGE / ZERO / REDUCE"),
+          n("rules.chgEffect", "Chg Effect", hasRulesEffect ? "COUNT" : "—", "—", "RULES", "How absent days affect chargeability", 1, "COUNT / SKIP"),
+        ] : []),
+
+        // CHARGEABILITY
+        n("chg.chgHours", "Chg Hours", fmtNum(forecast.chg * sahResult.standardAvailableHours), "hours", "CHARGEABILITY", "Total chargeable hours", 2, "Σ(Chg-category slices)"),
+        n("chg.chg", "Chargeability", fmtPct(forecast.chg), "%", "CHARGEABILITY", "Chargeability ratio", 3, "chgHours / SAH"),
+        n("chg.unassigned", "Unassigned", fmtPct(forecast.unassigned), "%", "CHARGEABILITY", `${fmtNum(forecast.unassigned * sahResult.standardAvailableHours)}h of ${fmtNum(sahResult.standardAvailableHours)}h SAH not assigned`, 3, "max(0, SAH - assigned) / SAH"),
+        n("chg.target", "Target", fmtPct(targetPct), "%", "CHARGEABILITY", "Chargeability target from management level", 3),
+        n("chg.gap", "Gap to Target", `${forecast.chg - targetPct >= 0 ? "+" : ""}${((forecast.chg - targetPct) * 100).toFixed(1)} pp`, "pp", "CHARGEABILITY", `Chargeability (${fmtPct(forecast.chg)}) vs. target (${fmtPct(targetPct)})`, 3, "chargeability − target"),
+
+        // Budget nodes (conditionally added above)
+        ...budgetNodes,
+      ];
+
+      const links: GraphLink[] = [
+        // INPUT → SAH
+        l("input.dailyHours", "sah.grossWorkingDays", "base hours", 1),
+        l("sah.calendarDays", "sah.grossWorkingDays", "− weekends", 2),
+        l("sah.weekendDays", "sah.grossWorkingDays", "−", 1),
+        l("input.absences", "sah.absenceDays", "∩ workdays", 1),
+        l("sah.grossWorkingDays", "sah.netWorkingDays", "−", 2),
+        l("sah.absenceDays", "sah.netWorkingDays", "−", 1),
+        l("input.dailyHours", "sah.effectiveHoursPerDay", "×", 1),
+        l("input.fte", "sah.effectiveHoursPerDay", "× FTE", 2),
+        l("sah.netWorkingDays", "sah.effectiveHoursPerDay", "÷", 1),
+        l("sah.effectiveHoursPerDay", "sah.sah", "× netDays", 2),
+        l("sah.netWorkingDays", "sah.sah", "×", 2),
+
+        // INPUT → ALLOCATION
+        l("input.weeklyAvail", "alloc.totalHours", "caps h/day", 2),
+        l("input.hoursPerDay", "alloc.dailyCostCents", "×", 1),
+        l("input.lcrCents", "alloc.dailyCostCents", "× LCR", 2),
+        l("input.hoursPerDay", "alloc.totalHours", "× workdays", 1),
+        l("alloc.dailyCostCents", "alloc.totalCostCents", "Σ", 2),
+
+        // RULES → ALLOCATION (if absences)
+        ...(absenceDays.length > 0 ? [
+          l("input.calcRules", "rules.activeRules", "filter active", 1),
+          l("input.absences", "rules.activeRules", "match trigger", 1),
+          l("rules.activeRules", "rules.costEffect", "→ effect", 1),
+          l("rules.activeRules", "rules.chgEffect", "→ effect", 1),
+        ] : []),
+
+        ...(hasRulesEffect ? [
+          l("rules.costEffect", "alloc.projectCostCents", "apply", 2),
+          l("alloc.totalCostCents", "alloc.projectCostCents", "adjust", 1),
+          l("rules.chgEffect", "alloc.chargeableHours", "apply", 2),
+          l("alloc.totalHours", "alloc.chargeableHours", "adjust", 1),
+        ] : []),
+
+        // ALLOCATION + SAH → CHARGEABILITY
+        l(hasRulesEffect ? "alloc.chargeableHours" : "alloc.totalHours", "chg.chgHours", "Σ Chg", 2),
+        l("chg.chgHours", "chg.chg", "÷ SAH", 2),
+        l("sah.sah", "chg.chg", "÷", 2),
+        l("sah.sah", "chg.unassigned", "− assigned ÷ SAH", 1),
+        l("chg.chgHours", "chg.unassigned", "SAH − Σ", 1),
+        l("input.targetPct", "chg.target", "=", 1),
+        l("chg.chg", "chg.gap", "−", 2),
+        l("chg.target", "chg.gap", "−", 1),
+
+        // Budget links (conditionally added above)
+        ...budgetLinks,
+      ];
+
+      return {
+        nodes,
+        links,
+        meta: {
+          resourceName: resource.displayName,
+          resourceEid: resource.eid,
+          month: input.month,
+          assignmentCount: assignments.length,
+        },
+      };
+    }),
+
+  /**
+   * Project View: Estimate, Commercial, Budget
+   */
+  getProjectData: controllerProcedure
+    .input(z.object({
+      projectId: z.string(),
+    }))
+    .query(async ({ ctx, input }) => {
+      const project = await ctx.db.project.findUniqueOrThrow({
+        where: { id: input.projectId },
+        select: {
+          id: true,
+          name: true,
+          shortCode: true,
+          budgetCents: true,
+          winProbability: true,
+          startDate: true,
+          endDate: true,
+        },
+      });
+
+      // Load latest estimate version with demand lines
+      const estimate = await ctx.db.estimate.findFirst({
+        where: { projectId: input.projectId },
+        select: {
+          id: true,
+          versions: {
+            orderBy: { versionNumber: "desc" },
+            take: 1,
+            select: {
+              id: true,
+              commercialTerms: true,
+              demandLines: {
+                select: {
+                  hours: true,
+                  costRateCents: true,
+                  billRateCents: true,
+                  costTotalCents: true,
+                  priceTotalCents: true,
+                },
+              },
+            },
+          },
+        },
+        orderBy: { updatedAt: "desc" },
+      });
+      const latestVersion = estimate?.versions[0];
+
+      const nodes: GraphNode[] = [];
+      const links: GraphLink[] = [];
+
+      // Budget inputs
+      const hasBudget = project.budgetCents > 0;
+      nodes.push(
+        n("input.budgetCents", "Project Budget", hasBudget ? fmtEur(project.budgetCents) : "Not set", hasBudget ? "EUR" : "—", "INPUT", hasBudget ? `Budget for ${project.name}` : `No budget defined for ${project.name}`, 0),
+        n("input.winProbability", "Win Probability", `${project.winProbability}%`, "%", "INPUT", "Project win probability", 0),
+      );
+
+
+      if (latestVersion && latestVersion.demandLines.length > 0) {
+        const lines = latestVersion.demandLines;
+        const totalHours = lines.reduce((s, dl) => s + dl.hours, 0);
+        const totalCostCents = lines.reduce((s, dl) => s + dl.costTotalCents, 0);
+        const totalPriceCents = lines.reduce((s, dl) => s + dl.priceTotalCents, 0);
+        const marginCents = totalPriceCents - totalCostCents;
+        const marginPct = totalPriceCents > 0 ? (marginCents / totalPriceCents) * 100 : 0;
+
+        // Average rates
+        const avgCostRate = totalHours > 0 ? Math.round(totalCostCents / totalHours) : 0;
+        const avgBillRate = totalHours > 0 ? Math.round(totalPriceCents / totalHours) : 0;
+
+        nodes.push(
+          n("input.estLines", "Demand Lines", `${lines.length}`, "count", "INPUT", "Estimate demand line count", 0),
+          n("input.avgCostRate", "Avg Cost Rate", fmtEur(avgCostRate), "cents/h", "INPUT", "Average cost rate across demand lines", 0),
+          n("input.avgBillRate", "Avg Bill Rate", fmtEur(avgBillRate), "cents/h", "INPUT", "Average bill rate across demand lines", 0),
+          n("est.totalHours", "Est. Hours", fmtNum(totalHours), "hours", "ESTIMATE", "Total estimated hours", 2, "Σ(line.hours)"),
+          n("est.totalCostCents", "Est. Cost", fmtEur(totalCostCents), "EUR", "ESTIMATE", "Total estimated cost", 2, "Σ(hours × costRate)"),
+          n("est.totalPriceCents", "Est. Price", fmtEur(totalPriceCents), "EUR", "ESTIMATE", "Total estimated price", 2, "Σ(hours × billRate)"),
+          n("est.marginCents", "Margin", fmtEur(marginCents), "EUR", "ESTIMATE", "Price minus cost", 3, "price - cost"),
+          n("est.marginPercent", "Margin %", `${marginPct.toFixed(1)}%`, "%", "ESTIMATE", "Margin as percentage of price", 3, "margin / price × 100"),
+        );
+
+        links.push(
+          l("input.estLines", "est.totalHours", "Σ hours", 1),
+          l("input.avgCostRate", "est.totalCostCents", "× hours", 2),
+          l("est.totalHours", "est.totalCostCents", "× costRate", 2),
+          l("input.avgBillRate", "est.totalPriceCents", "× hours", 2),
+          l("est.totalHours", "est.totalPriceCents", "× billRate", 2),
+          l("est.totalPriceCents", "est.marginCents", "−", 2),
+          l("est.totalCostCents", "est.marginCents", "−", 2),
+          l("est.marginCents", "est.marginPercent", "÷ price × 100", 2),
+          l("est.totalPriceCents", "est.marginPercent", "÷", 1),
+        );
+
+        // Commercial terms
+        const terms = latestVersion.commercialTerms as { contingencyPercent?: number; discountPercent?: number } | null;
+        if (terms && (terms.contingencyPercent || terms.discountPercent)) {
+          const contingencyPct = terms.contingencyPercent ?? 0;
+          const discountPct = terms.discountPercent ?? 0;
+          const contingencyCents = Math.round(totalCostCents * contingencyPct / 100);
+          const discountCents = Math.round(totalPriceCents * discountPct / 100);
+          const adjCost = totalCostCents + contingencyCents;
+          const adjPrice = totalPriceCents - discountCents;
+          const adjMargin = adjPrice - adjCost;
+          const adjMarginPct = adjPrice > 0 ? (adjMargin / adjPrice) * 100 : 0;
+
+          nodes.push(
+            n("input.contingencyPct", "Contingency %", `${contingencyPct}%`, "%", "INPUT", "Contingency percentage", 0),
+            n("input.discountPct", "Discount %", `${discountPct}%`, "%", "INPUT", "Discount percentage", 0),
+            n("comm.contingencyCents", "Contingency", fmtEur(contingencyCents), "EUR", "COMMERCIAL", "Contingency surcharge", 2, "baseCost × contingency%"),
+            n("comm.discountCents", "Discount", fmtEur(discountCents), "EUR", "COMMERCIAL", "Discount deduction", 2, "basePrice × discount%"),
+            n("comm.adjustedCost", "Adj. Cost", fmtEur(adjCost), "EUR", "COMMERCIAL", "Cost plus contingency", 3, "baseCost + contingency"),
+            n("comm.adjustedPrice", "Adj. Price", fmtEur(adjPrice), "EUR", "COMMERCIAL", "Price minus discount", 3, "basePrice - discount"),
+            n("comm.adjustedMargin", "Adj. Margin", fmtEur(adjMargin), "EUR", "COMMERCIAL", "Adjusted margin", 3, "adjPrice - adjCost"),
+            n("comm.adjustedMarginPct", "Adj. Margin %", `${adjMarginPct.toFixed(1)}%`, "%", "COMMERCIAL", "Adjusted margin percentage", 3, "adjMargin / adjPrice × 100"),
+          );
+
+          links.push(
+            l("est.totalCostCents", "comm.contingencyCents", "×", 1),
+            l("input.contingencyPct", "comm.contingencyCents", "× %", 1),
+            l("est.totalPriceCents", "comm.discountCents", "×", 1),
+            l("input.discountPct", "comm.discountCents", "× %", 1),
+            l("est.totalCostCents", "comm.adjustedCost", "+", 2),
+            l("comm.contingencyCents", "comm.adjustedCost", "+", 2),
+            l("est.totalPriceCents", "comm.adjustedPrice", "−", 2),
+            l("comm.discountCents", "comm.adjustedPrice", "−", 2),
+            l("comm.adjustedPrice", "comm.adjustedMargin", "−", 2),
+            l("comm.adjustedCost", "comm.adjustedMargin", "−", 2),
+            l("comm.adjustedMargin", "comm.adjustedMarginPct", "÷ price × 100", 2),
+            l("comm.adjustedPrice", "comm.adjustedMarginPct", "÷", 1),
+          );
+        }
+      }
+
+      // Budget status — always show allocation totals; remaining/utilization only when budget > 0
+      const projectAllocs = await ctx.db.assignment.findMany({
+        where: { projectId: input.projectId },
+        select: { status: true, dailyCostCents: true, startDate: true, endDate: true, hoursPerDay: true },
+      });
+
+      if (projectAllocs.length > 0) {
+        const budgetStatus = computeBudgetStatus(
+          project.budgetCents,
+          project.winProbability,
+          projectAllocs.map((pa) => ({
+            status: pa.status as unknown as string,
+            dailyCostCents: pa.dailyCostCents,
+            startDate: pa.startDate,
+            endDate: pa.endDate,
+            hoursPerDay: pa.hoursPerDay,
+          })) as Parameters<typeof computeBudgetStatus>[2],
+          project.startDate ?? new Date(),
+          project.endDate ?? new Date(),
+        );
+
+        nodes.push(
+          n("budget.confirmedCents", "Confirmed", fmtEur(budgetStatus.confirmedCents), "EUR", "BUDGET", "Confirmed allocation costs", 2, "Σ(CONFIRMED allocs)"),
+          n("budget.proposedCents", "Proposed", fmtEur(budgetStatus.proposedCents), "EUR", "BUDGET", "Proposed allocation costs", 2, "Σ(PROPOSED allocs)"),
+          n("budget.allocatedCents", "Allocated", fmtEur(budgetStatus.allocatedCents), "EUR", "BUDGET", "Total allocated", 2, "confirmed + proposed"),
+          n("budget.remainingCents", "Remaining",
+            hasBudget ? fmtEur(budgetStatus.remainingCents) : "N/A",
+            hasBudget ? "EUR" : "—", "BUDGET",
+            hasBudget ? "Remaining budget" : "Cannot compute — no budget set",
+            3, hasBudget ? "budget - allocated" : "needs budget"),
+          n("budget.utilizationPct", "Utilization",
+            hasBudget ? `${budgetStatus.utilizationPercent.toFixed(1)}%` : "N/A",
+            hasBudget ? "%" : "—", "BUDGET",
+            hasBudget ? "Budget utilization" : "Cannot compute — no budget set",
+            3, hasBudget ? "allocated / budget × 100" : "needs budget"),
+          n("budget.weightedCents", "Win-Weighted", fmtEur(budgetStatus.winProbabilityWeightedCents), "EUR", "BUDGET", "Win-weighted cost", 3, "allocated × winProb / 100"),
+        );
+
+        links.push(
+          l("budget.confirmedCents", "budget.allocatedCents", "+", 2),
+          l("budget.proposedCents", "budget.allocatedCents", "+", 2),
+          l("input.budgetCents", "budget.remainingCents", "−", 2),
+          l("budget.allocatedCents", "budget.remainingCents", "−", 2),
+          l("budget.allocatedCents", "budget.utilizationPct", "÷ budget × 100", 2),
+          l("input.budgetCents", "budget.utilizationPct", "÷", 1),
+          l("budget.allocatedCents", "budget.weightedCents", "× winProb / 100", 1),
+          l("input.winProbability", "budget.weightedCents", "×", 1),
+        );
+      }
+
+      return {
+        nodes,
+        links,
+        meta: {
+          projectName: project.name,
+          projectCode: project.shortCode,
+        },
+      };
+    }),
+});
diff --git a/packages/api/src/router/dashboard.ts b/packages/api/src/router/dashboard.ts
index 7419a82..c0f70a7 100644
--- a/packages/api/src/router/dashboard.ts
+++ b/packages/api/src/router/dashboard.ts
@@ -6,11 +6,25 @@ import {
   getDashboardOverview,
   getDashboardPeakTimes,
   getDashboardTopValueResources,
+  getDashboardBudgetForecast,
+  getDashboardSkillGaps,
+  getDashboardProjectHealth,
 } from "@planarchy/application";
 import { anonymizeResources, getAnonymizationDirectory } from "../lib/anonymization.js";
+import { cacheGet, cacheSet } from "../lib/cache.js";
+
+const DEFAULT_TTL = 60; // seconds
 
 export const dashboardRouter = createTRPCRouter({
-  getOverview: protectedProcedure.query(({ ctx }) => getDashboardOverview(ctx.db)),
+  getOverview: protectedProcedure.query(async ({ ctx }) => {
+    const cacheKey = "overview";
+    const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardOverview>>>(cacheKey);
+    if (cached) return cached;
+
+    const result = await getDashboardOverview(ctx.db);
+    await cacheSet(cacheKey, result, DEFAULT_TTL);
+    return result;
+  }),
 
   getPeakTimes: protectedProcedure
     .input(
@@ -21,27 +35,40 @@ export const dashboardRouter = createTRPCRouter({
         groupBy: z.enum(["project", "chapter", "resource"]).default("project"),
       }),
     )
-    .query(({ ctx, input }) =>
-      getDashboardPeakTimes(ctx.db, {
+    .query(async ({ ctx, input }) => {
+      const cacheKey = `peakTimes:${input.startDate}:${input.endDate}:${input.granularity}:${input.groupBy}`;
+      const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardPeakTimes>>>(cacheKey);
+      if (cached) return cached;
+
+      const result = await getDashboardPeakTimes(ctx.db, {
         startDate: new Date(input.startDate),
         endDate: new Date(input.endDate),
         granularity: input.granularity,
         groupBy: input.groupBy,
-      }),
-    ),
+      });
+      await cacheSet(cacheKey, result, DEFAULT_TTL);
+      return result;
+    }),
 
   getTopValueResources: protectedProcedure
     .input(z.object({ limit: z.number().int().min(1).max(50).default(10) }))
     .query(async ({ ctx, input }) => {
+      const userRole =
+        (ctx.session.user as { role?: string } | undefined)?.role ?? "USER";
+      const cacheKey = `topValue:${input.limit}:${userRole}`;
+      const cached = await cacheGet<Awaited<ReturnType<typeof anonymizeResources>>>(cacheKey);
+      if (cached) return cached;
+
       const [resources, directory] = await Promise.all([
         getDashboardTopValueResources(ctx.db, {
           limit: input.limit,
-          userRole:
-            (ctx.session.user as { role?: string } | undefined)?.role ?? "USER",
+          userRole,
         }),
         getAnonymizationDirectory(ctx.db),
       ]);
-      return anonymizeResources(resources, directory);
+      const result = anonymizeResources(resources, directory);
+      await cacheSet(cacheKey, result, DEFAULT_TTL);
+      return result;
     }),
 
   getDemand: protectedProcedure
@@ -52,13 +79,19 @@ export const dashboardRouter = createTRPCRouter({
         groupBy: z.enum(["project", "person", "chapter"]).default("project"),
       }),
     )
-    .query(({ ctx, input }) =>
-      getDashboardDemand(ctx.db, {
+    .query(async ({ ctx, input }) => {
+      const cacheKey = `demand:${input.startDate}:${input.endDate}:${input.groupBy}`;
+      const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardDemand>>>(cacheKey);
+      if (cached) return cached;
+
+      const result = await getDashboardDemand(ctx.db, {
         startDate: new Date(input.startDate),
         endDate: new Date(input.endDate),
         groupBy: input.groupBy,
-      }),
-    ),
+      });
+      await cacheSet(cacheKey, result, DEFAULT_TTL);
+      return result;
+    }),
 
   getChargeabilityOverview: controllerProcedure
     .input(
@@ -71,6 +104,15 @@ export const dashboardRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
+      const cacheKey = `chargeability:${input.includeProposed}:${input.topN}:${input.watchlistThreshold}:${(input.countryIds ?? []).join(",")}:${input.departed ?? ""}`;
+      type ChargeResult = Awaited<ReturnType<typeof getDashboardChargeabilityOverview>>;
+      const cached = await cacheGet<{
+        top: unknown[];
+        watchlist: unknown[];
+        [key: string]: unknown;
+      }>(cacheKey);
+      if (cached) return cached;
+
       const [overview, directory] = await Promise.all([
         getDashboardChargeabilityOverview(ctx.db, {
           includeProposed: input.includeProposed,
@@ -82,10 +124,42 @@ export const dashboardRouter = createTRPCRouter({
         getAnonymizationDirectory(ctx.db),
       ]);
 
-      return {
+      const result = {
         ...overview,
         top: anonymizeResources(overview.top, directory),
         watchlist: anonymizeResources(overview.watchlist, directory),
       };
+      await cacheSet(cacheKey, result, DEFAULT_TTL);
+      return result;
     }),
+
+  getBudgetForecast: protectedProcedure.query(async ({ ctx }) => {
+    const cacheKey = "budgetForecast";
+    const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardBudgetForecast>>>(cacheKey);
+    if (cached) return cached;
+
+    const result = await getDashboardBudgetForecast(ctx.db);
+    await cacheSet(cacheKey, result, DEFAULT_TTL);
+    return result;
+  }),
+
+  getSkillGaps: protectedProcedure.query(async ({ ctx }) => {
+    const cacheKey = "skillGaps";
+    const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardSkillGaps>>>(cacheKey);
+    if (cached) return cached;
+
+    const result = await getDashboardSkillGaps(ctx.db);
+    await cacheSet(cacheKey, result, DEFAULT_TTL);
+    return result;
+  }),
+
+  getProjectHealth: protectedProcedure.query(async ({ ctx }) => {
+    const cacheKey = "projectHealth";
+    const cached = await cacheGet<Awaited<ReturnType<typeof getDashboardProjectHealth>>>(cacheKey);
+    if (cached) return cached;
+
+    const result = await getDashboardProjectHealth(ctx.db);
+    await cacheSet(cacheKey, result, DEFAULT_TTL);
+    return result;
+  }),
 });
diff --git a/packages/api/src/router/entitlement.ts b/packages/api/src/router/entitlement.ts
index 4477dad..dbed422 100644
--- a/packages/api/src/router/entitlement.ts
+++ b/packages/api/src/router/entitlement.ts
@@ -6,6 +6,7 @@
 import { VacationType, VacationStatus } from "@planarchy/db";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import { RESOURCE_BRIEF_SELECT } from "../db/selects.js";
 import { createTRPCRouter, adminProcedure, managerProcedure, protectedProcedure } from "../trpc.js";
 
 /** Types that consume from annual leave balance */
@@ -266,7 +267,7 @@ export const entitlementRouter = createTRPCRouter({
           isActive: true,
           ...(input.chapter ? { chapter: input.chapter } : {}),
         },
-        select: { id: true, displayName: true, eid: true, chapter: true },
+        select: { ...RESOURCE_BRIEF_SELECT, chapter: true },
         orderBy: [{ chapter: "asc" }, { displayName: "asc" }],
       });
 
diff --git a/packages/api/src/router/estimate.ts b/packages/api/src/router/estimate.ts
index 349285e..284e16a 100644
--- a/packages/api/src/router/estimate.ts
+++ b/packages/api/src/router/estimate.ts
@@ -37,6 +37,7 @@ import {
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { lookupRate } from "../lib/rate-card-lookup.js";
 import {
   controllerProcedure,
   createTRPCRouter,
@@ -142,6 +143,75 @@ function withComputedMetrics<
   };
 }
 
+/**
+ * Auto-fill rate card rates into demand lines that have default (zero) rates.
+ * A line is eligible for auto-fill when both costRateCents and billRateCents
+ * are 0 (the Zod default) and rateSource is not explicitly set.
+ *
+ * Returns the enriched demand lines and a list of line indices that were auto-filled.
+ */
+async function autoFillDemandLineRates(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  db: any,
+  demandLines: z.infer<typeof CreateEstimateSchema>["demandLines"],
+  projectId?: string | null,
+): Promise<{
+  demandLines: z.infer<typeof CreateEstimateSchema>["demandLines"];
+  autoFilledIndices: number[];
+}> {
+  // Resolve clientId from the linked project
+  let clientId: string | null = null;
+  if (projectId) {
+    const project = await db.project.findUnique({
+      where: { id: projectId },
+      select: { clientId: true },
+    });
+    clientId = project?.clientId ?? null;
+  }
+
+  const autoFilledIndices: number[] = [];
+
+  const enriched = await Promise.all(
+    demandLines.map(async (line, index) => {
+      // Only auto-fill if both rates are at default (0) and no explicit rateSource
+      const isDefaultRate = line.costRateCents === 0 && line.billRateCents === 0;
+      const hasExplicitSource = line.rateSource != null && line.rateSource.length > 0;
+
+      if (!isDefaultRate || hasExplicitSource) return line;
+
+      const result = await lookupRate(db, {
+        clientId,
+        chapter: line.chapter ?? null,
+        roleId: line.roleId ?? null,
+      });
+
+      if (!result) return line;
+
+      autoFilledIndices.push(index);
+
+      const existingMetadata = (line.metadata ?? {}) as Record<string, unknown>;
+      return {
+        ...line,
+        costRateCents: result.costRateCents,
+        billRateCents: result.billRateCents,
+        currency: result.currency,
+        rateSource: `rate-card:${result.rateCardId}`,
+        metadata: {
+          ...existingMetadata,
+          autoAppliedRateCard: {
+            rateCardId: result.rateCardId,
+            rateCardLineId: result.rateCardLineId,
+            rateCardName: result.rateCardName,
+            appliedAt: new Date().toISOString(),
+          },
+        },
+      };
+    }),
+  );
+
+  return { demandLines: enriched, autoFilledIndices };
+}
+
 export const estimateRouter = createTRPCRouter({
   list: protectedProcedure
     .input(EstimateListFiltersSchema.default({}))
@@ -180,9 +250,14 @@ export const estimateRouter = createTRPCRouter({
         );
       }
 
+      // Auto-fill rates from rate cards for demand lines with default (zero) rates
+      const { demandLines: enrichedLines, autoFilledIndices } =
+        await autoFillDemandLineRates(ctx.db, input.demandLines, input.projectId);
+      const enrichedInput = { ...input, demandLines: enrichedLines };
+
       const estimate = await createEstimate(
         ctx.db as unknown as Parameters<typeof createEstimate>[0],
-        withComputedMetrics(input, input.baseCurrency),
+        withComputedMetrics(enrichedInput, input.baseCurrency),
       );
 
       await ctx.db.auditLog.create({
@@ -198,6 +273,7 @@ export const estimateRouter = createTRPCRouter({
               status: estimate.status,
               projectId: estimate.projectId,
               latestVersionNumber: estimate.latestVersionNumber,
+              autoFilledRateCardLines: autoFilledIndices.length,
             },
           } as Prisma.InputJsonValue,
         },
@@ -263,11 +339,25 @@ export const estimateRouter = createTRPCRouter({
         );
       }
 
+      // Auto-fill rates from rate cards for demand lines with default (zero) rates
+      // Resolve projectId: explicit input or existing estimate's projectId
+      let effectiveProjectId = input.projectId;
+      if (!effectiveProjectId) {
+        const existing = await ctx.db.estimate.findUnique({
+          where: { id: input.id },
+          select: { projectId: true },
+        });
+        effectiveProjectId = existing?.projectId ?? undefined;
+      }
+      const { demandLines: enrichedLines, autoFilledIndices } =
+        await autoFillDemandLineRates(ctx.db, input.demandLines, effectiveProjectId);
+      const enrichedInput = { ...input, demandLines: enrichedLines };
+
       let estimate;
       try {
         estimate = await updateEstimateDraft(
           ctx.db as unknown as Parameters<typeof updateEstimateDraft>[0],
-          withComputedMetrics(input, input.baseCurrency ?? "EUR"),
+          withComputedMetrics(enrichedInput, input.baseCurrency ?? "EUR"),
         );
       } catch (error) {
         if (error instanceof Error && error.message === "Estimate not found") {
@@ -300,6 +390,7 @@ export const estimateRouter = createTRPCRouter({
               workingVersionId: estimate.versions.find(
                 (version) => version.status === "WORKING",
               )?.id,
+              autoFilledRateCardLines: autoFilledIndices.length,
             },
           } as Prisma.InputJsonValue,
         },
@@ -837,4 +928,51 @@ export const estimateRouter = createTRPCRouter({
 
       return { versionId: version.id, terms: validated };
     }),
+
+  // ─── Rate Card Lookup for Demand Lines ──────────────────────────────────
+
+  lookupDemandLineRate: controllerProcedure
+    .input(z.object({
+      projectId: z.string().optional(),
+      clientId: z.string().optional(),
+      roleId: z.string().optional(),
+      chapter: z.string().optional(),
+      seniority: z.string().optional(),
+      location: z.string().optional(),
+      workType: z.string().optional(),
+      effectiveDate: z.coerce.date().optional(),
+    }))
+    .query(async ({ ctx, input }) => {
+      // Resolve clientId from project if not provided directly
+      let clientId = input.clientId ?? null;
+      if (!clientId && input.projectId) {
+        const project = await ctx.db.project.findUnique({
+          where: { id: input.projectId },
+          select: { clientId: true },
+        });
+        clientId = project?.clientId ?? null;
+      }
+
+      const result = await lookupRate(ctx.db, {
+        clientId,
+        chapter: input.chapter ?? null,
+        roleId: input.roleId ?? null,
+        seniority: input.seniority ?? null,
+        location: input.location ?? null,
+        workType: input.workType ?? null,
+        effectiveDate: input.effectiveDate ?? null,
+      });
+
+      if (!result) return { found: false as const };
+
+      return {
+        found: true as const,
+        costRateCents: result.costRateCents,
+        billRateCents: result.billRateCents,
+        currency: result.currency,
+        rateCardId: result.rateCardId,
+        rateCardLineId: result.rateCardLineId,
+        rateCardName: result.rateCardName,
+      };
+    }),
 });
diff --git a/packages/api/src/router/index.ts b/packages/api/src/router/index.ts
index 141b57b..38f4df3 100644
--- a/packages/api/src/router/index.ts
+++ b/packages/api/src/router/index.ts
@@ -6,6 +6,7 @@ import { blueprintRouter } from "./blueprint.js";
 import { chargeabilityReportRouter } from "./chargeability-report.js";
 import { computationGraphRouter } from "./computation-graph.js";
 import { clientRouter } from "./client.js";
+import { commentRouter } from "./comment.js";
 import { countryRouter } from "./country.js";
 import { dashboardRouter } from "./dashboard.js";
 import { effortRuleRouter } from "./effort-rule.js";
@@ -13,19 +14,24 @@ import { experienceMultiplierRouter } from "./experience-multiplier.js";
 import { estimateRouter } from "./estimate.js";
 import { entitlementRouter } from "./entitlement.js";
 import { importExportRouter } from "./import-export.js";
+import { insightsRouter } from "./insights.js";
 import { managementLevelRouter } from "./management-level.js";
 import { notificationRouter } from "./notification.js";
 import { orgUnitRouter } from "./org-unit.js";
 import { projectRouter } from "./project.js";
 import { rateCardRouter } from "./rate-card.js";
+import { reportRouter } from "./report.js";
 import { resourceRouter } from "./resource.js";
 import { roleRouter } from "./role.js";
+import { scenarioRouter } from "./scenario.js";
 import { settingsRouter } from "./settings.js";
 import { staffingRouter } from "./staffing.js";
+import { systemRoleConfigRouter } from "./system-role-config.js";
 import { timelineRouter } from "./timeline.js";
 import { userRouter } from "./user.js";
 import { utilizationCategoryRouter } from "./utilization-category.js";
 import { vacationRouter } from "./vacation.js";
+import { webhookRouter } from "./webhook.js";
 
 export const appRouter = createTRPCRouter({
   assistant: assistantRouter,
@@ -42,6 +48,7 @@ export const appRouter = createTRPCRouter({
   role: roleRouter,
   user: userRouter,
   importExport: importExportRouter,
+  insights: insightsRouter,
   vacation: vacationRouter,
   entitlement: entitlementRouter,
   notification: notificationRouter,
@@ -53,8 +60,13 @@ export const appRouter = createTRPCRouter({
   managementLevel: managementLevelRouter,
   rateCard: rateCardRouter,
   chargeabilityReport: chargeabilityReportRouter,
+  report: reportRouter,
+  scenario: scenarioRouter,
   calculationRule: calculationRuleRouter,
+  comment: commentRouter,
   computationGraph: computationGraphRouter,
+  systemRoleConfig: systemRoleConfigRouter,
+  webhook: webhookRouter,
 });
 
 export type AppRouter = typeof appRouter;
diff --git a/packages/api/src/router/insights.ts b/packages/api/src/router/insights.ts
new file mode 100644
index 0000000..2116fe1
--- /dev/null
+++ b/packages/api/src/router/insights.ts
@@ -0,0 +1,499 @@
+import { createAiClient, isAiConfigured, parseAiError } from "../ai-client.js";
+import { controllerProcedure, createTRPCRouter } from "../trpc.js";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface Anomaly {
+  type: "budget" | "staffing" | "utilization" | "timeline";
+  severity: "warning" | "critical";
+  entityId: string;
+  entityName: string;
+  message: string;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Count business days between two dates (Mon–Fri).
+ */
+function countBusinessDays(start: Date, end: Date): number {
+  let count = 0;
+  const d = new Date(start);
+  while (d <= end) {
+    const dow = d.getDay();
+    if (dow !== 0 && dow !== 6) count++;
+    d.setDate(d.getDate() + 1);
+  }
+  return count;
+}
+
+// ─── Router ──────────────────────────────────────────────────────────────────
+
+export const insightsRouter = createTRPCRouter({
+  /**
+   * Generate an AI-powered executive narrative for a project.
+   * Caches the result in the project's dynamicFields.aiNarrative to avoid
+   * calling the AI on every click.
+   */
+  generateProjectNarrative: controllerProcedure
+    .input(z.object({ projectId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const [project, settings] = await Promise.all([
+        ctx.db.project.findUnique({
+          where: { id: input.projectId },
+          include: {
+            demandRequirements: {
+              select: {
+                id: true,
+                role: true,
+                headcount: true,
+                hoursPerDay: true,
+                startDate: true,
+                endDate: true,
+                status: true,
+                _count: { select: { assignments: true } },
+              },
+            },
+            assignments: {
+              select: {
+                id: true,
+                role: true,
+                hoursPerDay: true,
+                startDate: true,
+                endDate: true,
+                status: true,
+                dailyCostCents: true,
+                resource: { select: { displayName: true } },
+              },
+            },
+          },
+        }),
+        ctx.db.systemSettings.findUnique({ where: { id: "singleton" } }),
+      ]);
+
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+
+      if (!isAiConfigured(settings)) {
+        throw new TRPCError({
+          code: "PRECONDITION_FAILED",
+          message: "AI is not configured. Please set credentials in Admin \u2192 Settings.",
+        });
+      }
+
+      // Build context data for the prompt
+      const now = new Date();
+      const totalDays = countBusinessDays(project.startDate, project.endDate);
+      const elapsedDays = countBusinessDays(project.startDate, now < project.endDate ? now : project.endDate);
+      const progressPercent = totalDays > 0 ? Math.round((elapsedDays / totalDays) * 100) : 0;
+
+      const totalDemandHeadcount = project.demandRequirements.reduce((s, d) => s + d.headcount, 0);
+      const filledDemandHeadcount = project.demandRequirements.reduce(
+        (s, d) => s + Math.min(d._count.assignments, d.headcount),
+        0,
+      );
+      const staffingPercent = totalDemandHeadcount > 0
+        ? Math.round((filledDemandHeadcount / totalDemandHeadcount) * 100)
+        : 100;
+
+      // Estimated cost from assignments
+      const totalCostCents = project.assignments.reduce((s, a) => {
+        const days = countBusinessDays(a.startDate, a.endDate);
+        return s + a.dailyCostCents * days;
+      }, 0);
+
+      const budgetCents = project.budgetCents;
+      const budgetUsedPercent = budgetCents > 0 ? Math.round((totalCostCents / budgetCents) * 100) : 0;
+
+      const overrunAssignments = project.assignments.filter(
+        (a) => a.endDate > project.endDate,
+      );
+
+      const dataContext = [
+        `Project: ${project.name} (${project.shortCode})`,
+        `Status: ${project.status}`,
+        `Timeline: ${project.startDate.toISOString().slice(0, 10)} to ${project.endDate.toISOString().slice(0, 10)} (${progressPercent}% elapsed)`,
+        `Budget: ${(budgetCents / 100).toLocaleString("en-US", { style: "currency", currency: "EUR" })} | Estimated cost: ${(totalCostCents / 100).toLocaleString("en-US", { style: "currency", currency: "EUR" })} (${budgetUsedPercent}% of budget)`,
+        `Staffing: ${filledDemandHeadcount}/${totalDemandHeadcount} positions filled (${staffingPercent}%)`,
+        `Active assignments: ${project.assignments.filter((a) => a.status === "ACTIVE" || a.status === "CONFIRMED").length}`,
+        overrunAssignments.length > 0
+          ? `Timeline risk: ${overrunAssignments.length} assignment(s) extend beyond project end date`
+          : "No timeline overruns detected",
+      ].join("\n");
+
+      const prompt = `Generate a concise executive summary for this project covering: budget status, staffing completeness, timeline risk, and key action items. Be specific with numbers. Keep it to 3-5 sentences.
+
+${dataContext}`;
+
+      const client = createAiClient(settings!);
+      const model = settings!.azureOpenAiDeployment!;
+      const maxTokens = settings!.aiMaxCompletionTokens ?? 300;
+      const temperature = settings!.aiTemperature ?? 1;
+
+      let narrative = "";
+      try {
+        const completion = await client.chat.completions.create({
+          messages: [
+            { role: "system", content: "You are a project management analyst providing brief executive summaries. Be factual and action-oriented." },
+            { role: "user", content: prompt },
+          ],
+          max_completion_tokens: maxTokens,
+          model,
+          ...(temperature !== 1 ? { temperature } : {}),
+        });
+        narrative = completion.choices[0]?.message?.content?.trim() ?? "";
+      } catch (err) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: `AI call failed: ${parseAiError(err)}`,
+        });
+      }
+
+      if (!narrative) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "AI returned an empty response.",
+        });
+      }
+
+      const generatedAt = new Date().toISOString();
+
+      // Cache in project dynamicFields
+      const existingDynamic = (project.dynamicFields as Record<string, unknown>) ?? {};
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: {
+          dynamicFields: {
+            ...existingDynamic,
+            aiNarrative: narrative,
+            aiNarrativeGeneratedAt: generatedAt,
+          },
+        },
+      });
+
+      return { narrative, generatedAt };
+    }),
+
+  /**
+   * Rule-based anomaly detection across all active projects.
+   * No AI involved — pure data analysis.
+   */
+  detectAnomalies: controllerProcedure.query(async ({ ctx }) => {
+    const now = new Date();
+    const twoWeeksFromNow = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
+    const anomalies: Anomaly[] = [];
+
+    // Fetch all active projects with their demands and assignments
+    const projects = await ctx.db.project.findMany({
+      where: { status: { in: ["ACTIVE", "DRAFT"] } },
+      include: {
+        demandRequirements: {
+          select: {
+            id: true,
+            headcount: true,
+            startDate: true,
+            endDate: true,
+            status: true,
+            _count: { select: { assignments: true } },
+          },
+        },
+        assignments: {
+          select: {
+            id: true,
+            resourceId: true,
+            startDate: true,
+            endDate: true,
+            hoursPerDay: true,
+            dailyCostCents: true,
+            status: true,
+          },
+        },
+      },
+    });
+
+    for (const project of projects) {
+      // ── Budget anomaly: spending faster than expected burn rate ──
+      if (project.budgetCents > 0) {
+        const totalDays = countBusinessDays(project.startDate, project.endDate);
+        const elapsedDays = countBusinessDays(project.startDate, now < project.endDate ? now : project.endDate);
+
+        if (totalDays > 0 && elapsedDays > 0) {
+          const expectedBurnRate = elapsedDays / totalDays; // fraction of timeline elapsed
+          const totalCostCents = project.assignments.reduce((s, a) => {
+            const aStart = a.startDate < project.startDate ? project.startDate : a.startDate;
+            const aEnd = a.endDate > now ? now : a.endDate;
+            if (aEnd < aStart) return s;
+            const days = countBusinessDays(aStart, aEnd);
+            return s + a.dailyCostCents * days;
+          }, 0);
+          const actualBurnRate = totalCostCents / project.budgetCents;
+
+          if (actualBurnRate > expectedBurnRate * 1.2) {
+            const overSpendPercent = Math.round(((actualBurnRate - expectedBurnRate) / expectedBurnRate) * 100);
+            anomalies.push({
+              type: "budget",
+              severity: actualBurnRate > expectedBurnRate * 1.5 ? "critical" : "warning",
+              entityId: project.id,
+              entityName: project.name,
+              message: `Burning budget ${overSpendPercent}% faster than expected. ${Math.round(actualBurnRate * 100)}% spent at ${Math.round(expectedBurnRate * 100)}% timeline.`,
+            });
+          }
+        }
+      }
+
+      // ── Staffing anomaly: unfilled demands close to start ──
+      const upcomingDemands = project.demandRequirements.filter(
+        (d) => d.startDate <= twoWeeksFromNow && d.endDate >= now,
+      );
+      for (const demand of upcomingDemands) {
+        const unfilledCount = demand.headcount - demand._count.assignments;
+        const unfillPct = demand.headcount > 0 ? unfilledCount / demand.headcount : 0;
+        if (unfillPct > 0.3) {
+          anomalies.push({
+            type: "staffing",
+            severity: unfillPct > 0.6 ? "critical" : "warning",
+            entityId: project.id,
+            entityName: project.name,
+            message: `${unfilledCount} of ${demand.headcount} positions unfilled, starting ${demand.startDate.toISOString().slice(0, 10)}.`,
+          });
+        }
+      }
+
+      // ── Timeline anomaly: assignments extending beyond project end ──
+      const overrunAssignments = project.assignments.filter(
+        (a) => a.endDate > project.endDate && (a.status === "ACTIVE" || a.status === "CONFIRMED"),
+      );
+      if (overrunAssignments.length > 0) {
+        anomalies.push({
+          type: "timeline",
+          severity: "warning",
+          entityId: project.id,
+          entityName: project.name,
+          message: `${overrunAssignments.length} assignment(s) extend beyond the project end date (${project.endDate.toISOString().slice(0, 10)}).`,
+        });
+      }
+    }
+
+    // ── Utilization anomaly: resources at extreme utilization ──
+    const resources = await ctx.db.resource.findMany({
+      where: { isActive: true },
+      select: {
+        id: true,
+        displayName: true,
+        availability: true,
+      },
+    });
+
+    // Get all active assignments for current period
+    const periodStart = new Date(now.getFullYear(), now.getMonth(), 1);
+    const periodEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+    const activeAssignments = await ctx.db.assignment.findMany({
+      where: {
+        status: { in: ["ACTIVE", "CONFIRMED"] },
+        startDate: { lte: periodEnd },
+        endDate: { gte: periodStart },
+      },
+      select: {
+        resourceId: true,
+        hoursPerDay: true,
+      },
+    });
+
+    // Build resource utilization map
+    const resourceHoursMap = new Map<string, number>();
+    for (const assignment of activeAssignments) {
+      const current = resourceHoursMap.get(assignment.resourceId) ?? 0;
+      resourceHoursMap.set(assignment.resourceId, current + assignment.hoursPerDay);
+    }
+
+    for (const resource of resources) {
+      const avail = resource.availability as Record<string, number> | null;
+      if (!avail) continue;
+      const dailyAvailHours = Object.values(avail).reduce((s, h) => s + (h ?? 0), 0) / 5;
+      if (dailyAvailHours <= 0) continue;
+
+      const bookedHours = resourceHoursMap.get(resource.id) ?? 0;
+      const utilizationPercent = Math.round((bookedHours / dailyAvailHours) * 100);
+
+      if (utilizationPercent > 110) {
+        anomalies.push({
+          type: "utilization",
+          severity: utilizationPercent > 130 ? "critical" : "warning",
+          entityId: resource.id,
+          entityName: resource.displayName,
+          message: `Resource at ${utilizationPercent}% utilization (${bookedHours.toFixed(1)}h/${dailyAvailHours.toFixed(1)}h per day).`,
+        });
+      } else if (utilizationPercent < 40 && utilizationPercent > 0) {
+        // Only flag under-utilization if resource has at least some bookings
+        // to avoid flagging bench resources
+        if (bookedHours > 0) {
+          anomalies.push({
+            type: "utilization",
+            severity: "warning",
+            entityId: resource.id,
+            entityName: resource.displayName,
+            message: `Resource at only ${utilizationPercent}% utilization (${bookedHours.toFixed(1)}h/${dailyAvailHours.toFixed(1)}h per day).`,
+          });
+        }
+      }
+    }
+
+    // Sort: critical first, then by type
+    anomalies.sort((a, b) => {
+      if (a.severity !== b.severity) return a.severity === "critical" ? -1 : 1;
+      return a.type.localeCompare(b.type);
+    });
+
+    return anomalies;
+  }),
+
+  /**
+   * Dashboard-friendly summary: anomaly counts by category + total.
+   */
+  getInsightsSummary: controllerProcedure.query(async ({ ctx }) => {
+    // Re-use the detectAnomalies logic inline (calling it directly would
+    // require the full context to be passed through — simpler to share code
+    // via the router caller pattern, but for now we duplicate the call).
+    const now = new Date();
+    const twoWeeksFromNow = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
+
+    const projects = await ctx.db.project.findMany({
+      where: { status: { in: ["ACTIVE", "DRAFT"] } },
+      include: {
+        demandRequirements: {
+          select: {
+            headcount: true,
+            startDate: true,
+            endDate: true,
+            _count: { select: { assignments: true } },
+          },
+        },
+        assignments: {
+          select: {
+            resourceId: true,
+            startDate: true,
+            endDate: true,
+            hoursPerDay: true,
+            dailyCostCents: true,
+            status: true,
+          },
+        },
+      },
+    });
+
+    let budgetCount = 0;
+    let staffingCount = 0;
+    let timelineCount = 0;
+    let criticalCount = 0;
+
+    for (const project of projects) {
+      // Budget check
+      if (project.budgetCents > 0) {
+        const totalDays = countBusinessDays(project.startDate, project.endDate);
+        const elapsedDays = countBusinessDays(project.startDate, now < project.endDate ? now : project.endDate);
+        if (totalDays > 0 && elapsedDays > 0) {
+          const expectedBurnRate = elapsedDays / totalDays;
+          const totalCostCents = project.assignments.reduce((s, a) => {
+            const aStart = a.startDate < project.startDate ? project.startDate : a.startDate;
+            const aEnd = a.endDate > now ? now : a.endDate;
+            if (aEnd < aStart) return s;
+            return s + a.dailyCostCents * countBusinessDays(aStart, aEnd);
+          }, 0);
+          const actualBurnRate = totalCostCents / project.budgetCents;
+          if (actualBurnRate > expectedBurnRate * 1.2) {
+            budgetCount++;
+            if (actualBurnRate > expectedBurnRate * 1.5) criticalCount++;
+          }
+        }
+      }
+
+      // Staffing check
+      const upcomingDemands = project.demandRequirements.filter(
+        (d) => d.startDate <= twoWeeksFromNow && d.endDate >= now,
+      );
+      for (const demand of upcomingDemands) {
+        const unfillPct = demand.headcount > 0 ? (demand.headcount - demand._count.assignments) / demand.headcount : 0;
+        if (unfillPct > 0.3) {
+          staffingCount++;
+          if (unfillPct > 0.6) criticalCount++;
+        }
+      }
+
+      // Timeline check
+      const overruns = project.assignments.filter(
+        (a) => a.endDate > project.endDate && (a.status === "ACTIVE" || a.status === "CONFIRMED"),
+      );
+      if (overruns.length > 0) timelineCount++;
+    }
+
+    // Utilization check
+    const resources = await ctx.db.resource.findMany({
+      where: { isActive: true },
+      select: { id: true, availability: true },
+    });
+    const periodStart = new Date(now.getFullYear(), now.getMonth(), 1);
+    const periodEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    const activeAssignments = await ctx.db.assignment.findMany({
+      where: {
+        status: { in: ["ACTIVE", "CONFIRMED"] },
+        startDate: { lte: periodEnd },
+        endDate: { gte: periodStart },
+      },
+      select: { resourceId: true, hoursPerDay: true },
+    });
+    const resourceHoursMap = new Map<string, number>();
+    for (const a of activeAssignments) {
+      resourceHoursMap.set(a.resourceId, (resourceHoursMap.get(a.resourceId) ?? 0) + a.hoursPerDay);
+    }
+
+    let utilizationCount = 0;
+    for (const resource of resources) {
+      const avail = resource.availability as Record<string, number> | null;
+      if (!avail) continue;
+      const dailyAvail = Object.values(avail).reduce((s, h) => s + (h ?? 0), 0) / 5;
+      if (dailyAvail <= 0) continue;
+      const booked = resourceHoursMap.get(resource.id) ?? 0;
+      const pct = Math.round((booked / dailyAvail) * 100);
+      if (pct > 110) {
+        utilizationCount++;
+        if (pct > 130) criticalCount++;
+      } else if (pct < 40 && booked > 0) {
+        utilizationCount++;
+      }
+    }
+
+    const total = budgetCount + staffingCount + timelineCount + utilizationCount;
+
+    return {
+      total,
+      criticalCount,
+      budget: budgetCount,
+      staffing: staffingCount,
+      timeline: timelineCount,
+      utilization: utilizationCount,
+    };
+  }),
+
+  /**
+   * Retrieve a cached AI narrative for a project (if one was previously generated).
+   */
+  getCachedNarrative: controllerProcedure
+    .input(z.object({ projectId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const project = await ctx.db.project.findUnique({
+        where: { id: input.projectId },
+        select: { dynamicFields: true },
+      });
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+      const df = project.dynamicFields as Record<string, unknown> | null;
+      const narrative = (df?.aiNarrative as string) ?? null;
+      const generatedAt = (df?.aiNarrativeGeneratedAt as string) ?? null;
+      return { narrative, generatedAt };
+    }),
+});
diff --git a/packages/api/src/router/notification.ts b/packages/api/src/router/notification.ts
index bd4e593..dc8b40e 100644
--- a/packages/api/src/router/notification.ts
+++ b/packages/api/src/router/notification.ts
@@ -1,26 +1,89 @@
 import { z } from "zod";
 import { TRPCError } from "@trpc/server";
+import { findUniqueOrThrow } from "../db/helpers.js";
 import { createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import {
+  emitNotificationCreated,
+  emitTaskAssigned,
+  emitTaskCompleted,
+  emitTaskStatusChanged,
+  emitBroadcastSent,
+} from "../sse/event-bus.js";
+import { resolveRecipients } from "../lib/notification-targeting.js";
+import { sendEmail } from "../lib/email.js";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 
 /** Resolve the DB user id from the session email. Throws UNAUTHORIZED if not found. */
 async function resolveUserId(ctx: {
-  db: { user: { findUnique: (args: { where: { email: string }; select: { id: true } }) => Promise<{ id: string } | null> } };
+  db: {
+    user: {
+      findUnique: (args: {
+        where: { email: string };
+        select: { id: true };
+      }) => Promise<{ id: string } | null>;
+    };
+  };
   session: { user?: { email?: string | null } | null };
 }): Promise<string> {
   const email = ctx.session.user?.email;
   if (!email) throw new TRPCError({ code: "UNAUTHORIZED" });
-  const user = await ctx.db.user.findUnique({ where: { email }, select: { id: true } });
+  const user = await ctx.db.user.findUnique({
+    where: { email },
+    select: { id: true },
+  });
   if (!user) throw new TRPCError({ code: "UNAUTHORIZED" });
   return user.id;
 }
 
+/** Send email notification (non-blocking). */
+async function sendNotificationEmail(
+  db: { user: { findUnique: (args: { where: { id: string }; select: { email: true; name: true } }) => Promise<{ email: string; name: string | null } | null> } },
+  userId: string,
+  title: string,
+  body?: string | null,
+): Promise<void> {
+  try {
+    const user = await db.user.findUnique({
+      where: { id: userId },
+      select: { email: true, name: true },
+    });
+    if (!user) return;
+    void sendEmail({
+      to: user.email,
+      subject: title,
+      text: body ?? title,
+      ...(body !== undefined && body !== null ? { html: `<p>${body}</p>` } : {}),
+    });
+  } catch {
+    // Non-blocking — swallow errors
+  }
+}
+
+// ─── Zod Enums ────────────────────────────────────────────────────────────────
+
+const categoryEnum = z.enum(["NOTIFICATION", "REMINDER", "TASK", "APPROVAL"]);
+const priorityEnum = z.enum(["LOW", "NORMAL", "HIGH", "URGENT"]);
+const taskStatusEnum = z.enum(["OPEN", "IN_PROGRESS", "DONE", "DISMISSED"]);
+const channelEnum = z.enum(["in_app", "email", "both"]);
+const recurrenceEnum = z.enum(["daily", "weekly", "monthly"]);
+const targetTypeEnum = z.enum(["user", "role", "project", "orgUnit", "all"]);
+
+// ─── Router ───────────────────────────────────────────────────────────────────
+
 export const notificationRouter = createTRPCRouter({
-  /** List notifications for the current user */
+  // ═══════════════════════════════════════════════════════════════════════════
+  // EXISTING (enhanced)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** List notifications for the current user with optional filters */
   list: protectedProcedure
     .input(
       z.object({
         unreadOnly: z.boolean().optional(),
+        category: categoryEnum.optional(),
+        taskStatus: taskStatusEnum.optional(),
+        priority: priorityEnum.optional(),
         limit: z.number().min(1).max(100).default(50),
       }),
     )
@@ -30,6 +93,9 @@ export const notificationRouter = createTRPCRouter({
         where: {
           userId,
           ...(input.unreadOnly ? { readAt: null } : {}),
+          ...(input.category !== undefined ? { category: input.category } : {}),
+          ...(input.taskStatus !== undefined ? { taskStatus: input.taskStatus } : {}),
+          ...(input.priority !== undefined ? { priority: input.priority } : {}),
         },
         orderBy: { createdAt: "desc" },
         take: input.limit,
@@ -63,7 +129,7 @@ export const notificationRouter = createTRPCRouter({
       }
     }),
 
-  /** Create a notification — restricted to managers and admins */
+  /** Create a notification (enhanced with all new fields) */
   create: managerProcedure
     .input(
       z.object({
@@ -73,9 +139,21 @@ export const notificationRouter = createTRPCRouter({
         body: z.string().optional(),
         entityId: z.string().optional(),
         entityType: z.string().optional(),
+        // New fields
+        category: categoryEnum.optional(),
+        priority: priorityEnum.optional(),
+        link: z.string().optional(),
+        taskStatus: taskStatusEnum.optional(),
+        taskAction: z.string().optional(),
+        assigneeId: z.string().optional(),
+        dueDate: z.date().optional(),
+        channel: channelEnum.optional(),
+        senderId: z.string().optional(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
+      const currentUserId = ctx.dbUser.id;
+
       const n = await ctx.db.notification.create({
         data: {
           userId: input.userId,
@@ -84,9 +162,498 @@ export const notificationRouter = createTRPCRouter({
           ...(input.body !== undefined ? { body: input.body } : {}),
           ...(input.entityId !== undefined ? { entityId: input.entityId } : {}),
           ...(input.entityType !== undefined ? { entityType: input.entityType } : {}),
+          ...(input.category !== undefined ? { category: input.category } : {}),
+          ...(input.priority !== undefined ? { priority: input.priority } : {}),
+          ...(input.link !== undefined ? { link: input.link } : {}),
+          ...(input.taskStatus !== undefined ? { taskStatus: input.taskStatus } : {}),
+          ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
+          ...(input.assigneeId !== undefined ? { assigneeId: input.assigneeId } : {}),
+          ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
+          ...(input.channel !== undefined ? { channel: input.channel } : {}),
+          senderId: input.senderId ?? currentUserId,
         },
       });
+
       emitNotificationCreated(input.userId, n.id);
+
+      // Emit task-specific events
+      if (input.category === "TASK" || input.category === "APPROVAL") {
+        emitTaskAssigned(input.userId, n.id);
+      }
+
+      // Email if channel includes email
+      const channel = input.channel ?? "in_app";
+      if (channel === "email" || channel === "both") {
+        void sendNotificationEmail(ctx.db, input.userId, input.title, input.body);
+      }
+
       return n;
     }),
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TASK MANAGEMENT
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** List tasks for the current user (as owner or assignee) */
+  listTasks: protectedProcedure
+    .input(
+      z.object({
+        status: taskStatusEnum.optional(),
+        includeAssigned: z.boolean().default(true),
+        limit: z.number().min(1).max(100).default(20),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      const userFilter = input.includeAssigned
+        ? { OR: [{ userId }, { assigneeId: userId }] }
+        : { userId };
+
+      return ctx.db.notification.findMany({
+        where: {
+          ...userFilter,
+          category: { in: ["TASK", "APPROVAL"] },
+          ...(input.status !== undefined ? { taskStatus: input.status } : {}),
+        },
+        orderBy: [{ priority: "desc" }, { dueDate: "asc" }, { createdAt: "desc" }],
+        take: input.limit,
+      });
+    }),
+
+  /** Get task counts for the current user — single groupBy instead of 5 counts */
+  taskCounts: protectedProcedure.query(async ({ ctx }) => {
+    const userId = await resolveUserId(ctx);
+    const now = new Date();
+
+    const where = {
+      OR: [{ userId }, { assigneeId: userId }],
+      category: { in: ["TASK" as const, "APPROVAL" as const] },
+    };
+
+    const [grouped, overdue] = await Promise.all([
+      ctx.db.notification.groupBy({
+        by: ["taskStatus"],
+        where,
+        _count: true,
+      }),
+      ctx.db.notification.count({
+        where: {
+          ...where,
+          taskStatus: { in: ["OPEN", "IN_PROGRESS"] },
+          dueDate: { lt: now },
+        },
+      }),
+    ]);
+
+    const counts: Record<string, number> = {};
+    for (const g of grouped) {
+      if (g.taskStatus) counts[g.taskStatus] = g._count;
+    }
+
+    return {
+      open: counts["OPEN"] ?? 0,
+      inProgress: counts["IN_PROGRESS"] ?? 0,
+      done: counts["DONE"] ?? 0,
+      dismissed: counts["DISMISSED"] ?? 0,
+      overdue,
+    };
+  }),
+
+  /** Update task status */
+  updateTaskStatus: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        status: taskStatusEnum,
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      // Only allow if userId or assigneeId matches
+      const existing = await ctx.db.notification.findFirst({
+        where: {
+          id: input.id,
+          OR: [{ userId }, { assigneeId: userId }],
+        },
+      });
+
+      if (!existing) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Task not found or you do not have permission",
+        });
+      }
+
+      const isCompleting = input.status === "DONE";
+
+      const updated = await ctx.db.notification.update({
+        where: { id: input.id },
+        data: {
+          taskStatus: input.status,
+          ...(isCompleting ? { completedAt: new Date(), completedBy: userId } : {}),
+        },
+      });
+
+      if (isCompleting) {
+        emitTaskCompleted(existing.userId, updated.id);
+        // Also notify assignee if different
+        if (existing.assigneeId && existing.assigneeId !== existing.userId) {
+          emitTaskCompleted(existing.assigneeId, updated.id);
+        }
+      } else {
+        emitTaskStatusChanged(existing.userId, updated.id);
+        if (existing.assigneeId && existing.assigneeId !== existing.userId) {
+          emitTaskStatusChanged(existing.assigneeId, updated.id);
+        }
+      }
+
+      return updated;
+    }),
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // REMINDERS
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Create a personal reminder */
+  createReminder: protectedProcedure
+    .input(
+      z.object({
+        title: z.string().min(1).max(200),
+        body: z.string().max(2000).optional(),
+        remindAt: z.date(),
+        recurrence: recurrenceEnum.optional(),
+        entityId: z.string().optional(),
+        entityType: z.string().optional(),
+        link: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      return ctx.db.notification.create({
+        data: {
+          userId,
+          type: "REMINDER",
+          category: "REMINDER",
+          title: input.title,
+          ...(input.body !== undefined ? { body: input.body } : {}),
+          remindAt: input.remindAt,
+          nextRemindAt: input.remindAt,
+          ...(input.recurrence !== undefined ? { recurrence: input.recurrence } : {}),
+          ...(input.entityId !== undefined ? { entityId: input.entityId } : {}),
+          ...(input.entityType !== undefined ? { entityType: input.entityType } : {}),
+          ...(input.link !== undefined ? { link: input.link } : {}),
+          channel: "in_app",
+        },
+      });
+    }),
+
+  /** Update a personal reminder */
+  updateReminder: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        title: z.string().min(1).max(200).optional(),
+        body: z.string().max(2000).optional(),
+        remindAt: z.date().optional(),
+        recurrence: recurrenceEnum.nullish(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      // Verify ownership
+      const existing = await ctx.db.notification.findFirst({
+        where: { id: input.id, userId, category: "REMINDER" },
+      });
+      if (!existing) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Reminder not found or you do not have permission",
+        });
+      }
+
+      return ctx.db.notification.update({
+        where: { id: input.id },
+        data: {
+          ...(input.title !== undefined ? { title: input.title } : {}),
+          ...(input.body !== undefined ? { body: input.body } : {}),
+          ...(input.remindAt !== undefined
+            ? { remindAt: input.remindAt, nextRemindAt: input.remindAt }
+            : {}),
+          // recurrence can be set to null (clear it) or a new value
+          ...(input.recurrence !== undefined
+            ? { recurrence: input.recurrence }
+            : {}),
+        },
+      });
+    }),
+
+  /** Delete a personal reminder */
+  deleteReminder: protectedProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      const existing = await ctx.db.notification.findFirst({
+        where: { id: input.id, userId, category: "REMINDER" },
+      });
+      if (!existing) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Reminder not found or you do not have permission",
+        });
+      }
+
+      await ctx.db.notification.delete({ where: { id: input.id } });
+    }),
+
+  /** List personal reminders */
+  listReminders: protectedProcedure
+    .input(z.object({ limit: z.number().min(1).max(100).default(20) }))
+    .query(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      return ctx.db.notification.findMany({
+        where: { userId, category: "REMINDER" },
+        orderBy: { nextRemindAt: "asc" },
+        take: input.limit,
+      });
+    }),
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // BROADCASTS (Manager+)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Create and send a broadcast notification */
+  createBroadcast: managerProcedure
+    .input(
+      z.object({
+        title: z.string().min(1).max(200),
+        body: z.string().max(2000).optional(),
+        link: z.string().optional(),
+        category: categoryEnum.default("NOTIFICATION"),
+        priority: priorityEnum.default("NORMAL"),
+        channel: channelEnum.default("in_app"),
+        targetType: targetTypeEnum,
+        targetValue: z.string().optional(),
+        scheduledAt: z.date().optional(),
+        taskAction: z.string().optional(),
+        dueDate: z.date().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const senderId = ctx.dbUser.id;
+
+      // 1. Create broadcast record
+      const broadcast = await ctx.db.notificationBroadcast.create({
+        data: {
+          senderId,
+          title: input.title,
+          ...(input.body !== undefined ? { body: input.body } : {}),
+          ...(input.link !== undefined ? { link: input.link } : {}),
+          category: input.category,
+          priority: input.priority,
+          channel: input.channel,
+          targetType: input.targetType,
+          ...(input.targetValue !== undefined ? { targetValue: input.targetValue } : {}),
+          ...(input.scheduledAt !== undefined ? { scheduledAt: input.scheduledAt } : {}),
+        },
+      });
+
+      // 2. If scheduled in the future, just return the broadcast
+      if (input.scheduledAt && input.scheduledAt > new Date()) {
+        return broadcast;
+      }
+
+      // 3. Resolve recipients
+      const recipientIds = await resolveRecipients(
+        input.targetType,
+        input.targetValue,
+        ctx.db,
+        senderId,
+      );
+
+      // 4. Create individual notifications for each recipient
+      const isTask = input.category === "TASK" || input.category === "APPROVAL";
+
+      const notifications = await Promise.all(
+        recipientIds.map((recipientUserId) =>
+          ctx.db.notification.create({
+            data: {
+              userId: recipientUserId,
+              type: `BROADCAST_${input.category}`,
+              title: input.title,
+              ...(input.body !== undefined ? { body: input.body } : {}),
+              ...(input.link !== undefined ? { link: input.link } : {}),
+              category: input.category,
+              priority: input.priority,
+              channel: input.channel,
+              sourceId: broadcast.id,
+              senderId,
+              ...(isTask ? { taskStatus: "OPEN" as const } : {}),
+              ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
+              ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
+            },
+          }),
+        ),
+      );
+
+      // 5. Update broadcast with sent info
+      await ctx.db.notificationBroadcast.update({
+        where: { id: broadcast.id },
+        data: {
+          sentAt: new Date(),
+          recipientCount: notifications.length,
+        },
+      });
+
+      // 6. Emit SSE events
+      for (const n of notifications) {
+        emitNotificationCreated(n.userId, n.id);
+        if (isTask) {
+          emitTaskAssigned(n.userId, n.id);
+        }
+      }
+      emitBroadcastSent(broadcast.id, notifications.length);
+
+      // 7. Send emails if channel includes email (non-blocking)
+      if (input.channel === "email" || input.channel === "both") {
+        for (const n of notifications) {
+          void sendNotificationEmail(ctx.db, n.userId, input.title, input.body);
+        }
+      }
+
+      return { ...broadcast, recipientCount: notifications.length, sentAt: new Date() };
+    }),
+
+  /** List broadcasts */
+  listBroadcasts: managerProcedure
+    .input(z.object({ limit: z.number().min(1).max(50).default(20) }))
+    .query(async ({ ctx, input }) => {
+      return ctx.db.notificationBroadcast.findMany({
+        orderBy: { createdAt: "desc" },
+        take: input.limit,
+        include: {
+          sender: { select: { id: true, name: true, email: true } },
+        },
+      });
+    }),
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TASK CREATION (Manager+)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Create a task for a specific user */
+  createTask: managerProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        title: z.string().min(1).max(200),
+        body: z.string().max(2000).optional(),
+        priority: priorityEnum.default("NORMAL"),
+        dueDate: z.date().optional(),
+        taskAction: z.string().optional(),
+        entityId: z.string().optional(),
+        entityType: z.string().optional(),
+        link: z.string().optional(),
+        channel: channelEnum.default("in_app"),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const senderId = ctx.dbUser.id;
+
+      const n = await ctx.db.notification.create({
+        data: {
+          userId: input.userId,
+          type: "TASK_CREATED",
+          category: "TASK",
+          taskStatus: "OPEN",
+          title: input.title,
+          priority: input.priority,
+          senderId,
+          channel: input.channel,
+          ...(input.body !== undefined ? { body: input.body } : {}),
+          ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
+          ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
+          ...(input.entityId !== undefined ? { entityId: input.entityId } : {}),
+          ...(input.entityType !== undefined ? { entityType: input.entityType } : {}),
+          ...(input.link !== undefined ? { link: input.link } : {}),
+        },
+      });
+
+      emitNotificationCreated(input.userId, n.id);
+      emitTaskAssigned(input.userId, n.id);
+
+      // Send email if channel includes email
+      if (input.channel === "email" || input.channel === "both") {
+        void sendNotificationEmail(ctx.db, input.userId, input.title, input.body);
+      }
+
+      return n;
+    }),
+
+  /** Reassign a task to another user */
+  assignTask: managerProcedure
+    .input(z.object({ id: z.string(), assigneeId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const existing = await findUniqueOrThrow(
+        ctx.db.notification.findUnique({ where: { id: input.id } }),
+        "Task",
+      );
+
+      if (existing.category !== "TASK" && existing.category !== "APPROVAL") {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Only tasks and approvals can be assigned",
+        });
+      }
+
+      const updated = await ctx.db.notification.update({
+        where: { id: input.id },
+        data: { assigneeId: input.assigneeId },
+      });
+
+      emitTaskAssigned(input.assigneeId, updated.id);
+
+      return updated;
+    }),
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // DELETE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Delete own notification */
+  delete: protectedProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = await resolveUserId(ctx);
+
+      const existing = await ctx.db.notification.findFirst({
+        where: { id: input.id, userId },
+      });
+
+      if (!existing) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Notification not found",
+        });
+      }
+
+      // Cannot delete tasks created by others (senderId differs)
+      if (
+        (existing.category === "TASK" || existing.category === "APPROVAL") &&
+        existing.senderId &&
+        existing.senderId !== userId
+      ) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Cannot delete tasks created by others",
+        });
+      }
+
+      await ctx.db.notification.delete({ where: { id: input.id } });
+    }),
 });
diff --git a/packages/api/src/router/project-planning-read-model.ts b/packages/api/src/router/project-planning-read-model.ts
index 90e1218..4c8af80 100644
--- a/packages/api/src/router/project-planning-read-model.ts
+++ b/packages/api/src/router/project-planning-read-model.ts
@@ -1,6 +1,7 @@
 import { buildSplitAllocationReadModel } from "@planarchy/application";
 import type { PrismaClient } from "@planarchy/db";
 import { AllocationStatus } from "@planarchy/shared";
+import { ROLE_BRIEF_SELECT } from "../db/selects.js";
 
 export const PROJECT_PLANNING_ALLOCATION_INCLUDE = {
   resource: {
@@ -31,7 +32,7 @@ export const PROJECT_PLANNING_ALLOCATION_INCLUDE = {
     },
   },
   roleEntity: {
-    select: { id: true, name: true, color: true },
+    select: ROLE_BRIEF_SELECT,
   },
 } as const;
 
diff --git a/packages/api/src/router/project.ts b/packages/api/src/router/project.ts
index d07a443..01840c4 100644
--- a/packages/api/src/router/project.ts
+++ b/packages/api/src/router/project.ts
@@ -11,6 +11,11 @@ import { assertBlueprintDynamicFields } from "./blueprint-validation.js";
 import { buildDynamicFieldWhereClauses } from "./custom-field-filters.js";
 import { loadProjectPlanningReadModel } from "./project-planning-read-model.js";
 import { adminProcedure, controllerProcedure, createTRPCRouter, managerProcedure, protectedProcedure, requirePermission } from "../trpc.js";
+import { createDalleClient, isDalleConfigured, parseAiError } from "../ai-client.js";
+import { invalidateDashboardCache } from "../lib/cache.js";
+import { dispatchWebhooks } from "../lib/webhook-dispatcher.js";
+
+const MAX_COVER_SIZE = 4 * 1024 * 1024; // 4 MB base64 string length limit (client compresses before upload)
 
 export const projectRouter = createTRPCRouter({
   list: protectedProcedure
@@ -152,6 +157,13 @@ export const projectRouter = createTRPCRouter({
         },
       });
 
+      void invalidateDashboardCache();
+      void dispatchWebhooks(ctx.db, "project.created", {
+        id: project.id,
+        shortCode: project.shortCode,
+        name: project.name,
+        status: project.status,
+      });
       return project;
     }),
 
@@ -204,6 +216,7 @@ export const projectRouter = createTRPCRouter({
         },
       });
 
+      void invalidateDashboardCache();
       return updated;
     }),
 
@@ -211,10 +224,18 @@ export const projectRouter = createTRPCRouter({
     .input(z.object({ id: z.string(), status: z.nativeEnum(ProjectStatus) }))
     .mutation(async ({ ctx, input }) => {
       requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
-      return ctx.db.project.update({
+      const result = await ctx.db.project.update({
         where: { id: input.id },
         data: { status: input.status },
       });
+      void invalidateDashboardCache();
+      void dispatchWebhooks(ctx.db, "project.status_changed", {
+        id: result.id,
+        shortCode: result.shortCode,
+        name: result.name,
+        status: result.status,
+      });
+      return result;
     }),
 
   batchUpdateStatus: managerProcedure
@@ -241,6 +262,7 @@ export const projectRouter = createTRPCRouter({
         },
       });
 
+      void invalidateDashboardCache();
       return { count: updated.length };
     }),
 
@@ -346,6 +368,195 @@ export const projectRouter = createTRPCRouter({
         });
       });
 
+      void invalidateDashboardCache();
       return { id: input.id, name: project.name };
     }),
+
+  batchDelete: adminProcedure
+    .input(
+      z.object({
+        ids: z.array(z.string()).min(1).max(50),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const projects = await ctx.db.project.findMany({
+        where: { id: { in: input.ids } },
+        select: { id: true, name: true, shortCode: true },
+      });
+
+      if (projects.length === 0) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "No projects found" });
+      }
+
+      await ctx.db.$transaction(async (tx) => {
+        const ids = projects.map((p) => p.id);
+        await tx.assignment.deleteMany({ where: { projectId: { in: ids } } });
+        await tx.demandRequirement.deleteMany({ where: { projectId: { in: ids } } });
+        await tx.calculationRule.updateMany({
+          where: { projectId: { in: ids } },
+          data: { projectId: null },
+        });
+        await tx.project.deleteMany({ where: { id: { in: ids } } });
+        await tx.auditLog.create({
+          data: {
+            entityType: "Project",
+            entityId: ids.join(","),
+            action: "DELETE",
+            ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+            changes: { before: projects } as never,
+          },
+        });
+      });
+
+      void invalidateDashboardCache();
+      return { count: projects.length };
+    }),
+
+  // ─── Cover Art ──────────────────────────────────────────────────────────────
+
+  generateCover: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      prompt: z.string().max(500).optional(),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      const project = await findUniqueOrThrow(
+        ctx.db.project.findUnique({
+          where: { id: input.projectId },
+          include: { client: { select: { name: true } } },
+        }),
+        "Project",
+      );
+
+      const settings = await ctx.db.systemSettings.findUnique({
+        where: { id: "singleton" },
+      });
+
+      if (!isDalleConfigured(settings)) {
+        throw new TRPCError({
+          code: "PRECONDITION_FAILED",
+          message: "DALL-E is not configured. Set up the DALL-E deployment in Admin → Settings.",
+        });
+      }
+
+      const clientName = project.client?.name ? ` for ${project.client.name}` : "";
+      const basePrompt = `Professional cover art for a 3D automotive visualization project: "${project.name}"${clientName}. Style: cinematic, modern, photorealistic CGI rendering, dramatic lighting, studio environment. No text or typography in the image.`;
+      const finalPrompt = input.prompt
+        ? `${basePrompt} Additional direction: ${input.prompt}`
+        : basePrompt;
+
+      const dalleClient = createDalleClient(settings!);
+      const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let response: any;
+      try {
+        response = await dalleClient.images.generate({
+          model,
+          prompt: finalPrompt,
+          size: "1024x1024",
+          n: 1,
+          response_format: "b64_json",
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: `DALL-E error: ${parseAiError(err)}`,
+        });
+      }
+
+      const b64 = response.data?.[0]?.b64_json;
+      if (!b64) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "No image data returned from DALL-E",
+        });
+      }
+
+      const coverImageUrl = `data:image/png;base64,${b64}`;
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl },
+      });
+
+      return { coverImageUrl };
+    }),
+
+  uploadCover: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      imageDataUrl: z.string(),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      if (!input.imageDataUrl.startsWith("data:image/")) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Invalid image format. Must be a data URL starting with 'data:image/'.",
+        });
+      }
+
+      if (input.imageDataUrl.length > MAX_COVER_SIZE) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Image too large. Maximum compressed size is 4 MB.",
+        });
+      }
+
+      await findUniqueOrThrow(
+        ctx.db.project.findUnique({ where: { id: input.projectId } }),
+        "Project",
+      );
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl: input.imageDataUrl },
+      });
+
+      return { coverImageUrl: input.imageDataUrl };
+    }),
+
+  removeCover: managerProcedure
+    .input(z.object({ projectId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      await findUniqueOrThrow(
+        ctx.db.project.findUnique({ where: { id: input.projectId } }),
+        "Project",
+      );
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl: null },
+      });
+
+      return { ok: true };
+    }),
+
+  updateCoverFocus: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      coverFocusY: z.number().int().min(0).max(100),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverFocusY: input.coverFocusY },
+      });
+      return { ok: true };
+    }),
+
+  isDalleConfigured: protectedProcedure
+    .query(async ({ ctx }) => {
+      const settings = await ctx.db.systemSettings.findUnique({
+        where: { id: "singleton" },
+      });
+      return { configured: isDalleConfigured(settings) };
+    }),
 });
diff --git a/packages/api/src/router/report.ts b/packages/api/src/router/report.ts
new file mode 100644
index 0000000..2060b37
--- /dev/null
+++ b/packages/api/src/router/report.ts
@@ -0,0 +1,387 @@
+import { z } from "zod";
+import { createTRPCRouter, controllerProcedure } from "../trpc.js";
+import { TRPCError } from "@trpc/server";
+
+// ─── Column Definitions ──────────────────────────────────────────────────────
+
+interface ColumnDef {
+  key: string;
+  label: string;
+  dataType: "string" | "number" | "date" | "boolean";
+  /** Prisma select path — nested relations use dot notation */
+  prismaPath?: string;
+}
+
+const RESOURCE_COLUMNS: ColumnDef[] = [
+  { key: "id", label: "ID", dataType: "string" },
+  { key: "eid", label: "Employee ID", dataType: "string" },
+  { key: "displayName", label: "Name", dataType: "string" },
+  { key: "email", label: "Email", dataType: "string" },
+  { key: "chapter", label: "Chapter", dataType: "string" },
+  { key: "resourceType", label: "Resource Type", dataType: "string" },
+  { key: "lcrCents", label: "LCR (cents)", dataType: "number" },
+  { key: "ucrCents", label: "UCR (cents)", dataType: "number" },
+  { key: "currency", label: "Currency", dataType: "string" },
+  { key: "chargeabilityTarget", label: "Chargeability Target (%)", dataType: "number" },
+  { key: "fte", label: "FTE", dataType: "number" },
+  { key: "isActive", label: "Active", dataType: "boolean" },
+  { key: "chgResponsibility", label: "Chg Responsibility", dataType: "boolean" },
+  { key: "rolledOff", label: "Rolled Off", dataType: "boolean" },
+  { key: "departed", label: "Departed", dataType: "boolean" },
+  { key: "postalCode", label: "Postal Code", dataType: "string" },
+  { key: "federalState", label: "Federal State", dataType: "string" },
+  { key: "country.name", label: "Country", dataType: "string", prismaPath: "country" },
+  { key: "metroCity.name", label: "Metro City", dataType: "string", prismaPath: "metroCity" },
+  { key: "orgUnit.name", label: "Org Unit", dataType: "string", prismaPath: "orgUnit" },
+  { key: "managementLevelGroup.name", label: "Mgmt Level Group", dataType: "string", prismaPath: "managementLevelGroup" },
+  { key: "managementLevel.name", label: "Mgmt Level", dataType: "string", prismaPath: "managementLevel" },
+  { key: "areaRole.name", label: "Area Role", dataType: "string", prismaPath: "areaRole" },
+  { key: "createdAt", label: "Created At", dataType: "date" },
+  { key: "updatedAt", label: "Updated At", dataType: "date" },
+];
+
+const PROJECT_COLUMNS: ColumnDef[] = [
+  { key: "id", label: "ID", dataType: "string" },
+  { key: "shortCode", label: "Short Code", dataType: "string" },
+  { key: "name", label: "Name", dataType: "string" },
+  { key: "orderType", label: "Order Type", dataType: "string" },
+  { key: "allocationType", label: "Allocation Type", dataType: "string" },
+  { key: "status", label: "Status", dataType: "string" },
+  { key: "winProbability", label: "Win Probability (%)", dataType: "number" },
+  { key: "budgetCents", label: "Budget (cents)", dataType: "number" },
+  { key: "startDate", label: "Start Date", dataType: "date" },
+  { key: "endDate", label: "End Date", dataType: "date" },
+  { key: "responsiblePerson", label: "Responsible Person", dataType: "string" },
+  { key: "client.name", label: "Client", dataType: "string", prismaPath: "client" },
+  { key: "utilizationCategory.name", label: "Util. Category", dataType: "string", prismaPath: "utilizationCategory" },
+  { key: "blueprint.name", label: "Blueprint", dataType: "string", prismaPath: "blueprint" },
+  { key: "createdAt", label: "Created At", dataType: "date" },
+  { key: "updatedAt", label: "Updated At", dataType: "date" },
+];
+
+const ASSIGNMENT_COLUMNS: ColumnDef[] = [
+  { key: "id", label: "ID", dataType: "string" },
+  { key: "resource.displayName", label: "Resource", dataType: "string", prismaPath: "resource" },
+  { key: "resource.eid", label: "Resource EID", dataType: "string", prismaPath: "resource" },
+  { key: "project.name", label: "Project", dataType: "string", prismaPath: "project" },
+  { key: "project.shortCode", label: "Project Code", dataType: "string", prismaPath: "project" },
+  { key: "startDate", label: "Start Date", dataType: "date" },
+  { key: "endDate", label: "End Date", dataType: "date" },
+  { key: "hoursPerDay", label: "Hours/Day", dataType: "number" },
+  { key: "percentage", label: "Percentage", dataType: "number" },
+  { key: "role", label: "Role (legacy)", dataType: "string" },
+  { key: "roleEntity.name", label: "Role", dataType: "string", prismaPath: "roleEntity" },
+  { key: "dailyCostCents", label: "Daily Cost (cents)", dataType: "number" },
+  { key: "status", label: "Status", dataType: "string" },
+  { key: "createdAt", label: "Created At", dataType: "date" },
+  { key: "updatedAt", label: "Updated At", dataType: "date" },
+];
+
+const COLUMN_MAP: Record<EntityKey, ColumnDef[]> = {
+  resource: RESOURCE_COLUMNS,
+  project: PROJECT_COLUMNS,
+  assignment: ASSIGNMENT_COLUMNS,
+};
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const ENTITY_MAP = {
+  resource: "resource",
+  project: "project",
+  assignment: "assignment",
+} as const;
+
+type EntityKey = keyof typeof ENTITY_MAP;
+
+/** Allowlist of top-level scalar fields per entity that can be filtered/sorted on. */
+const ALLOWED_SCALAR_FIELDS: Record<EntityKey, Set<string>> = {
+  resource: new Set([
+    "id", "eid", "displayName", "email", "chapter", "resourceType",
+    "lcrCents", "ucrCents", "currency", "chargeabilityTarget", "fte",
+    "isActive", "chgResponsibility", "rolledOff", "departed",
+    "postalCode", "federalState", "createdAt", "updatedAt",
+  ]),
+  project: new Set([
+    "id", "shortCode", "name", "orderType", "allocationType", "status",
+    "winProbability", "budgetCents", "startDate", "endDate",
+    "responsiblePerson", "createdAt", "updatedAt",
+  ]),
+  assignment: new Set([
+    "id", "startDate", "endDate", "hoursPerDay", "percentage",
+    "role", "dailyCostCents", "status", "createdAt", "updatedAt",
+  ]),
+};
+
+function getValidScalarField(entity: EntityKey, field: string): string | null {
+  // Only allow top-level scalar fields for filter/sort (no relation traversal in where/orderBy)
+  if (ALLOWED_SCALAR_FIELDS[entity].has(field)) return field;
+  return null;
+}
+
+/**
+ * Build a Prisma `select` object from the requested columns.
+ * Always includes `id`. For relation columns like "country.name",
+ * we include the relation with `select: { name: true }`.
+ */
+function buildSelect(entity: EntityKey, columns: string[]): Record<string, unknown> {
+  const entityColumns = COLUMN_MAP[entity];
+  const select: Record<string, unknown> = { id: true };
+
+  for (const colKey of columns) {
+    const def = entityColumns.find((c) => c.key === colKey);
+    if (!def) continue;
+
+    if (colKey.includes(".")) {
+      // Relation column, e.g. "country.name" => select: { country: { select: { name: true } } }
+      const relationName = def.prismaPath ?? colKey.split(".")[0]!;
+      const fieldName = colKey.split(".").slice(1).join(".");
+      const existing = select[relationName];
+      if (existing && typeof existing === "object" && existing !== null && "select" in existing) {
+        (existing as { select: Record<string, boolean> }).select[fieldName] = true;
+      } else {
+        select[relationName] = { select: { [fieldName]: true } };
+      }
+    } else {
+      select[colKey] = true;
+    }
+  }
+
+  return select;
+}
+
+/**
+ * Build a Prisma `where` from the filter array.
+ * Only scalar top-level fields are allowed for safety.
+ */
+function buildWhere(
+  entity: EntityKey,
+  filters: Array<{ field: string; op: string; value: string }>,
+): Record<string, unknown> {
+  const where: Record<string, unknown> = {};
+
+  for (const filter of filters) {
+    const field = getValidScalarField(entity, filter.field);
+    if (!field) continue;
+
+    const entityColumns = COLUMN_MAP[entity];
+    const colDef = entityColumns.find((c) => c.key === field);
+    const dataType = colDef?.dataType ?? "string";
+
+    // Parse value based on data type
+    let parsedValue: unknown = filter.value;
+    if (dataType === "number") {
+      parsedValue = Number(filter.value);
+      if (Number.isNaN(parsedValue as number)) continue;
+    } else if (dataType === "boolean") {
+      parsedValue = filter.value === "true";
+    } else if (dataType === "date") {
+      parsedValue = new Date(filter.value);
+      if (Number.isNaN((parsedValue as Date).getTime())) continue;
+    }
+
+    switch (filter.op) {
+      case "eq":
+        where[field] = parsedValue;
+        break;
+      case "neq":
+        where[field] = { not: parsedValue };
+        break;
+      case "gt":
+        where[field] = { gt: parsedValue };
+        break;
+      case "lt":
+        where[field] = { lt: parsedValue };
+        break;
+      case "gte":
+        where[field] = { gte: parsedValue };
+        break;
+      case "lte":
+        where[field] = { lte: parsedValue };
+        break;
+      case "contains":
+        if (dataType === "string") {
+          where[field] = { contains: filter.value, mode: "insensitive" };
+        }
+        break;
+      case "in":
+        if (dataType === "string") {
+          where[field] = { in: filter.value.split(",").map((v) => v.trim()) };
+        }
+        break;
+    }
+  }
+
+  return where;
+}
+
+/**
+ * Flatten a Prisma result row so nested relations become dot-notation keys.
+ * E.g. { country: { name: "DE" } } => { "country.name": "DE" }
+ */
+function flattenRow(row: Record<string, unknown>, prefix = ""): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(row)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value !== null && typeof value === "object" && !(value instanceof Date) && !Array.isArray(value)) {
+      Object.assign(result, flattenRow(value as Record<string, unknown>, fullKey));
+    } else {
+      result[fullKey] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * Format a value for CSV output.
+ */
+function csvEscape(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return value.toISOString();
+  const str = String(value);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+// ─── Input Schema ───────────────────────────────────────────────────────────
+
+const FilterSchema = z.object({
+  field: z.string().min(1),
+  op: z.enum(["eq", "neq", "gt", "lt", "gte", "lte", "contains", "in"]),
+  value: z.string(),
+});
+
+const ReportInputSchema = z.object({
+  entity: z.enum(["resource", "project", "assignment"]),
+  columns: z.array(z.string()).min(1),
+  filters: z.array(FilterSchema).default([]),
+  groupBy: z.string().optional(),
+  sortBy: z.string().optional(),
+  sortDir: z.enum(["asc", "desc"]).default("asc"),
+  limit: z.number().int().min(1).max(5000).default(50),
+  offset: z.number().int().min(0).default(0),
+});
+
+// ─── Router ──────────────────────────────────────────────────────────────────
+
+export const reportRouter = createTRPCRouter({
+  /**
+   * Return available columns for a given entity type.
+   */
+  getAvailableColumns: controllerProcedure
+    .input(z.object({ entity: z.enum(["resource", "project", "assignment"]) }))
+    .query(({ input }) => {
+      const columns = COLUMN_MAP[input.entity];
+      if (!columns) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: `Unknown entity: ${input.entity}` });
+      }
+      return columns.map(({ key, label, dataType }) => ({ key, label, dataType }));
+    }),
+
+  /**
+   * Fetch report data with dynamic columns, filters, sorting and pagination.
+   */
+  getReportData: controllerProcedure
+    .input(ReportInputSchema)
+    .query(async ({ ctx, input }) => {
+      const { entity, columns, filters, sortBy, sortDir, limit, offset } = input;
+
+      const select = buildSelect(entity, columns);
+      const where = buildWhere(entity, filters);
+
+      // Build orderBy (only scalar fields)
+      let orderBy: Record<string, string> | undefined;
+      if (sortBy) {
+        const validField = getValidScalarField(entity, sortBy);
+        if (validField) {
+          orderBy = { [validField]: sortDir };
+        }
+      }
+
+      const modelDelegate = getModelDelegate(ctx.db, entity);
+
+      const [rawRows, totalCount] = await Promise.all([
+        (modelDelegate as any).findMany({
+          select,
+          where,
+          ...(orderBy ? { orderBy } : {}),
+          take: limit,
+          skip: offset,
+        }),
+        (modelDelegate as any).count({ where }),
+      ]);
+
+      // Flatten nested relations into dot-notation keys
+      const rows = (rawRows as Record<string, unknown>[]).map((row) => flattenRow(row));
+
+      // Ensure column order matches request (plus id)
+      const outputColumns = ["id", ...columns.filter((c) => c !== "id")];
+
+      return { rows, columns: outputColumns, totalCount };
+    }),
+
+  /**
+   * Same as getReportData but returns a CSV string for download.
+   */
+  exportReport: controllerProcedure
+    .input(ReportInputSchema.omit({ offset: true }).extend({
+      limit: z.number().int().min(1).max(50000).default(5000),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      const { entity, columns, filters, sortBy, sortDir, limit } = input;
+
+      const select = buildSelect(entity, columns);
+      const where = buildWhere(entity, filters);
+
+      let orderBy: Record<string, string> | undefined;
+      if (sortBy) {
+        const validField = getValidScalarField(entity, sortBy);
+        if (validField) {
+          orderBy = { [validField]: sortDir };
+        }
+      }
+
+      const modelDelegate = getModelDelegate(ctx.db, entity);
+
+      const rawRows = await (modelDelegate as any).findMany({
+        select,
+        where,
+        ...(orderBy ? { orderBy } : {}),
+        take: limit,
+      });
+
+      const rows = (rawRows as Record<string, unknown>[]).map((row) => flattenRow(row));
+      const outputColumns = ["id", ...columns.filter((c) => c !== "id")];
+
+      // Build CSV
+      const entityColumns = COLUMN_MAP[entity];
+      const headerLabels = outputColumns.map((key) => {
+        const def = entityColumns.find((c) => c.key === key);
+        return def?.label ?? key;
+      });
+
+      const csvLines = [
+        headerLabels.map(csvEscape).join(","),
+        ...rows.map((row) =>
+          outputColumns.map((col) => csvEscape(row[col])).join(","),
+        ),
+      ];
+
+      return { csv: csvLines.join("\n"), rowCount: rows.length };
+    }),
+});
+
+/** Resolve the Prisma model delegate from entity key. */
+function getModelDelegate(db: any, entity: EntityKey) {
+  switch (entity) {
+    case "resource":
+      return db.resource;
+    case "project":
+      return db.project;
+    case "assignment":
+      return db.assignment;
+    default:
+      throw new TRPCError({ code: "BAD_REQUEST", message: `Unknown entity: ${entity}` });
+  }
+}
diff --git a/packages/api/src/router/resource.ts b/packages/api/src/router/resource.ts
index 602927e..d2d14a7 100644
--- a/packages/api/src/router/resource.ts
+++ b/packages/api/src/router/resource.ts
@@ -291,6 +291,54 @@ export const resourceRouter = createTRPCRouter({
       return { resources, total, page, limit, nextCursor };
     }),
 
+  /** Lightweight resource card for hover tooltips on the timeline. */
+  getHoverCard: protectedProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const resource = await findUniqueOrThrow(
+        ctx.db.resource.findUnique({
+          where: { id: input.id },
+          select: {
+            id: true,
+            displayName: true,
+            eid: true,
+            email: true,
+            chapter: true,
+            lcrCents: true,
+            ucrCents: true,
+            currency: true,
+            chargeabilityTarget: true,
+            skills: true,
+            availability: true,
+            isActive: true,
+            areaRole: { select: ROLE_BRIEF_SELECT },
+            country: { select: { name: true, code: true } },
+            managementLevel: { select: { name: true } },
+            resourceType: true,
+          },
+        }),
+        "Resource",
+      );
+      const directory = await getAnonymizationDirectory(ctx.db);
+      const anon = anonymizeResource(resource, directory);
+      return {
+        id: anon.id,
+        displayName: anon.displayName ?? "",
+        eid: anon.eid ?? "",
+        chapter: resource.chapter,
+        lcrCents: resource.lcrCents,
+        ucrCents: resource.ucrCents,
+        currency: resource.currency,
+        chargeabilityTarget: resource.chargeabilityTarget,
+        skills: resource.skills as Record<string, unknown>[],
+        isActive: resource.isActive,
+        resourceType: resource.resourceType,
+        areaRole: resource.areaRole,
+        country: resource.country,
+        managementLevel: resource.managementLevel,
+      };
+    }),
+
   getById: protectedProcedure
     .input(z.object({ id: z.string() }))
     .query(async ({ ctx, input }) => {
@@ -585,11 +633,14 @@ export const resourceRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       // Find the resource linked to this user
-      const user = await ctx.db.user.findUnique({
-        where: { email: ctx.session.user?.email ?? "" },
-        include: { resource: true },
-      });
-      if (!user?.resource) {
+      const user = await findUniqueOrThrow(
+        ctx.db.user.findUnique({
+          where: { email: ctx.session.user?.email ?? "" },
+          include: { resource: true },
+        }),
+        "User",
+      );
+      if (!user.resource) {
         throw new TRPCError({ code: "NOT_FOUND", message: "No resource linked to your account" });
       }
       const resourceId = user.resource.id;
@@ -700,17 +751,16 @@ export const resourceRouter = createTRPCRouter({
     .input(z.object({ resourceId: z.string() }))
     .mutation(async ({ ctx, input }) => {
       const [resource, settings] = await Promise.all([
-        ctx.db.resource.findUnique({
-          where: { id: input.resourceId },
-          include: { areaRole: { select: { name: true } } },
-        }),
+        findUniqueOrThrow(
+          ctx.db.resource.findUnique({
+            where: { id: input.resourceId },
+            include: { areaRole: { select: { name: true } } },
+          }),
+          "Resource",
+        ),
         ctx.db.systemSettings.findUnique({ where: { id: "singleton" } }),
       ]);
 
-      if (!resource) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Resource not found" });
-      }
-
       if (!isAiConfigured(settings)) {
         throw new TRPCError({
           code: "PRECONDITION_FAILED",
@@ -1141,4 +1191,228 @@ export const resourceRouter = createTRPCRouter({
 
       return { updated: input.ids.length };
     }),
+
+  // ─── Skill Marketplace ────────────────────────────────────────────────────
+
+  getSkillMarketplace: controllerProcedure
+    .input(
+      z.object({
+        // Section 1: Skill search
+        searchSkill: z.string().optional(),
+        minProficiency: z.number().int().min(1).max(5).optional().default(1),
+        availableOnly: z.boolean().optional().default(false),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const now = new Date();
+      const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
+
+      type SkillRow = { skill: string; category?: string; proficiency: number; isMainSkill?: boolean };
+
+      // ── Fetch all active resources with skills ──
+      const resources = await ctx.db.resource.findMany({
+        where: { isActive: true },
+        select: {
+          id: true,
+          displayName: true,
+          eid: true,
+          chapter: true,
+          skills: true,
+          availability: true,
+          chargeabilityTarget: true,
+        },
+      });
+
+      // ── Fetch current assignments for utilization calc ──
+      const allResourceIds = resources.map((r) => r.id);
+      const assignments = await ctx.db.assignment.findMany({
+        where: {
+          resourceId: { in: allResourceIds },
+          status: { in: ["PROPOSED", "CONFIRMED", "ACTIVE", "COMPLETED"] },
+          endDate: { gte: now },
+          startDate: { lte: thirtyDaysFromNow },
+        },
+        select: {
+          resourceId: true,
+          startDate: true,
+          endDate: true,
+          hoursPerDay: true,
+        },
+      });
+
+      // Build utilization map (simple: booked hours per day / available hours per day)
+      const utilizationMap = new Map<string, { utilizationPercent: number; earliestAvailableDate: Date | null }>();
+      for (const r of resources) {
+        const avail = r.availability as Record<string, number>;
+        const dailyAvailHours = Object.values(avail).reduce((s, h) => s + (h ?? 0), 0) / 5;
+        const resourceAssignments = assignments.filter((a) => a.resourceId === r.id);
+
+        // Current daily booked hours (assignments overlapping today)
+        let todayBooked = 0;
+        for (const a of resourceAssignments) {
+          if (a.startDate <= now && a.endDate >= now) {
+            todayBooked += a.hoursPerDay;
+          }
+        }
+        const utilizationPercent = dailyAvailHours > 0 ? Math.round((todayBooked / dailyAvailHours) * 100) : 0;
+
+        // Find earliest date when resource has capacity (within 30 days)
+        let earliestAvailableDate: Date | null = null;
+        const checkDate = new Date(now);
+        for (let i = 0; i < 30; i++) {
+          const day = checkDate.getDay();
+          if (day !== 0 && day !== 6) {
+            let dayBooked = 0;
+            for (const a of resourceAssignments) {
+              if (a.startDate <= checkDate && a.endDate >= checkDate) {
+                dayBooked += a.hoursPerDay;
+              }
+            }
+            if (dayBooked < dailyAvailHours * 0.8) {
+              earliestAvailableDate = new Date(checkDate);
+              break;
+            }
+          }
+          checkDate.setDate(checkDate.getDate() + 1);
+        }
+
+        utilizationMap.set(r.id, { utilizationPercent, earliestAvailableDate });
+      }
+
+      // ── Section 1: Skill Search ──
+      let searchResults: Array<{
+        id: string;
+        displayName: string;
+        chapter: string | null;
+        skillProficiency: number;
+        skillName: string;
+        utilizationPercent: number;
+        availableFrom: string | null;
+      }> = [];
+
+      if (input.searchSkill && input.searchSkill.trim().length > 0) {
+        const needle = input.searchSkill.toLowerCase();
+        for (const r of resources) {
+          const skills = (r.skills as unknown as SkillRow[]) ?? [];
+          const match = skills.find(
+            (s) => s.skill.toLowerCase().includes(needle) && s.proficiency >= input.minProficiency,
+          );
+          if (!match) continue;
+
+          const util = utilizationMap.get(r.id);
+          if (input.availableOnly && !util?.earliestAvailableDate) continue;
+
+          searchResults.push({
+            id: r.id,
+            displayName: r.displayName,
+            chapter: r.chapter,
+            skillProficiency: match.proficiency,
+            skillName: match.skill,
+            utilizationPercent: util?.utilizationPercent ?? 0,
+            availableFrom: util?.earliestAvailableDate?.toISOString() ?? null,
+          });
+        }
+        searchResults.sort((a, b) => b.skillProficiency - a.skillProficiency || a.utilizationPercent - b.utilizationPercent);
+      }
+
+      // ── Section 2: Skill Gap Heat Map ──
+      // Demand: from unfilled DemandRequirements + project staffingReqs skills
+      const unfilled = await ctx.db.demandRequirement.findMany({
+        where: {
+          endDate: { gte: now },
+          assignments: { none: {} },
+        },
+        select: {
+          id: true,
+          role: true,
+          roleId: true,
+          headcount: true,
+          project: {
+            select: { staffingReqs: true },
+          },
+        },
+      });
+
+      // Collect demanded skills from project staffingReqs
+      const demandSkillCounts = new Map<string, number>();
+      for (const demand of unfilled) {
+        const staffingReqs = (demand.project.staffingReqs as unknown as Array<{
+          role?: string;
+          roleId?: string;
+          requiredSkills?: string[];
+        }>) ?? [];
+
+        // Match demand to staffing req by role or roleId
+        const matchedReq = staffingReqs.find(
+          (sr) =>
+            (demand.roleId && sr.roleId === demand.roleId) ||
+            (demand.role && sr.role === demand.role),
+        );
+
+        if (matchedReq?.requiredSkills) {
+          for (const skill of matchedReq.requiredSkills) {
+            demandSkillCounts.set(skill, (demandSkillCounts.get(skill) ?? 0) + demand.headcount);
+          }
+        }
+      }
+
+      // Supply: count resources with skill at proficiency >= 3
+      const supplySkillCounts = new Map<string, number>();
+      const allSkillCounts = new Map<string, number>();
+      for (const r of resources) {
+        const skills = (r.skills as unknown as SkillRow[]) ?? [];
+        for (const s of skills) {
+          allSkillCounts.set(s.skill, (allSkillCounts.get(s.skill) ?? 0) + 1);
+          if (s.proficiency >= 3) {
+            supplySkillCounts.set(s.skill, (supplySkillCounts.get(s.skill) ?? 0) + 1);
+          }
+        }
+      }
+
+      // Merge all skill names from both demand and supply
+      const allGapSkills = new Set([...demandSkillCounts.keys(), ...supplySkillCounts.keys()]);
+      const gapData = Array.from(allGapSkills)
+        .map((skill) => {
+          const supply = supplySkillCounts.get(skill) ?? 0;
+          const demand = demandSkillCounts.get(skill) ?? 0;
+          return { skill, supply, demand, gap: demand - supply };
+        })
+        .sort((a, b) => b.gap - a.gap);
+
+      // ── Section 3: Distribution (top 20 by resource count) ──
+      const aggregated = Array.from(
+        (() => {
+          const map = new Map<string, { skill: string; count: number; totalProficiency: number }>();
+          for (const r of resources) {
+            const skills = (r.skills as unknown as SkillRow[]) ?? [];
+            for (const s of skills) {
+              const entry = map.get(s.skill);
+              if (entry) {
+                entry.count++;
+                entry.totalProficiency += s.proficiency;
+              } else {
+                map.set(s.skill, { skill: s.skill, count: 1, totalProficiency: s.proficiency });
+              }
+            }
+          }
+          return map;
+        })().values(),
+      )
+        .map((e) => ({
+          skill: e.skill,
+          count: e.count,
+          avgProficiency: Math.round((e.totalProficiency / e.count) * 10) / 10,
+        }))
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 20);
+
+      const directory = await getAnonymizationDirectory(ctx.db);
+
+      return {
+        searchResults: anonymizeResources(searchResults, directory),
+        gapData,
+        distribution: aggregated,
+        totalResources: resources.length,
+      };
+    }),
 });
diff --git a/packages/api/src/router/role.ts b/packages/api/src/router/role.ts
index 50a3f12..508ada6 100644
--- a/packages/api/src/router/role.ts
+++ b/packages/api/src/router/role.ts
@@ -3,6 +3,7 @@ import { CreateRoleSchema, PermissionKey, UpdateRoleSchema } from "@planarchy/sh
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { RESOURCE_BRIEF_SELECT } from "../db/selects.js";
 import { emitRoleCreated, emitRoleDeleted, emitRoleUpdated } from "../sse/event-bus.js";
 import { createTRPCRouter, managerProcedure, protectedProcedure, requirePermission } from "../trpc.js";
 
@@ -89,7 +90,7 @@ export const roleRouter = createTRPCRouter({
             _count: { select: { resourceRoles: true } },
             resourceRoles: {
               include: {
-                resource: { select: { id: true, displayName: true, eid: true } },
+                resource: { select: RESOURCE_BRIEF_SELECT },
               },
             },
           },
diff --git a/packages/api/src/router/scenario.ts b/packages/api/src/router/scenario.ts
new file mode 100644
index 0000000..e208202
--- /dev/null
+++ b/packages/api/src/router/scenario.ts
@@ -0,0 +1,553 @@
+import { calculateAllocation, countWorkingDays } from "@planarchy/engine/allocation";
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { createTRPCRouter, controllerProcedure, protectedProcedure } from "../trpc.js";
+
+const DEFAULT_AVAILABILITY = {
+  monday: 8,
+  tuesday: 8,
+  wednesday: 8,
+  thursday: 8,
+  friday: 8,
+  saturday: 0,
+  sunday: 0,
+} as const;
+
+const ScenarioChangeSchema = z.object({
+  /** Existing assignment to modify — omit to add a new allocation */
+  assignmentId: z.string().optional(),
+  resourceId: z.string().optional(),
+  roleId: z.string().optional(),
+  startDate: z.coerce.date(),
+  endDate: z.coerce.date(),
+  hoursPerDay: z.number().min(0).max(24),
+  /** Set to true to mark an existing assignment for removal */
+  remove: z.boolean().optional(),
+});
+
+const SimulateInputSchema = z.object({
+  projectId: z.string(),
+  changes: z.array(ScenarioChangeSchema).min(1),
+});
+
+export const scenarioRouter = createTRPCRouter({
+  /**
+   * Returns current allocations/costs for a project — the baseline for comparison.
+   */
+  getProjectBaseline: protectedProcedure
+    .input(z.object({ projectId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const project = await ctx.db.project.findUnique({
+        where: { id: input.projectId },
+        select: {
+          id: true,
+          name: true,
+          shortCode: true,
+          startDate: true,
+          endDate: true,
+          budgetCents: true,
+          orderType: true,
+        },
+      });
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+
+      const assignments = await ctx.db.assignment.findMany({
+        where: {
+          projectId: input.projectId,
+          status: { not: "CANCELLED" },
+        },
+        include: {
+          resource: {
+            select: {
+              id: true,
+              displayName: true,
+              eid: true,
+              lcrCents: true,
+              availability: true,
+              chargeabilityTarget: true,
+              skills: true,
+            },
+          },
+          roleEntity: { select: { id: true, name: true, color: true } },
+        },
+      });
+
+      const demands = await ctx.db.demandRequirement.findMany({
+        where: {
+          projectId: input.projectId,
+          status: { not: "CANCELLED" },
+        },
+        include: {
+          roleEntity: { select: { id: true, name: true, color: true } },
+        },
+      });
+
+      // Calculate baseline totals
+      let totalCostCents = 0;
+      let totalHours = 0;
+
+      const baselineAllocations = assignments.map((a) => {
+        const availability = (a.resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY;
+        const lcrCents = a.resource?.lcrCents ?? 0;
+        const result = calculateAllocation({
+          lcrCents,
+          hoursPerDay: a.hoursPerDay,
+          startDate: a.startDate,
+          endDate: a.endDate,
+          availability,
+        });
+
+        totalCostCents += result.totalCostCents;
+        totalHours += result.totalHours;
+
+        return {
+          id: a.id,
+          resourceId: a.resourceId,
+          resourceName: a.resource?.displayName ?? "Unknown",
+          resourceEid: a.resource?.eid ?? "",
+          lcrCents,
+          roleId: a.roleId,
+          roleName: a.roleEntity?.name ?? a.role ?? "",
+          roleColor: a.roleEntity?.color ?? null,
+          startDate: a.startDate.toISOString(),
+          endDate: a.endDate.toISOString(),
+          hoursPerDay: a.hoursPerDay,
+          status: a.status,
+          costCents: result.totalCostCents,
+          totalHours: result.totalHours,
+          workingDays: result.workingDays,
+        };
+      });
+
+      const baselineDemands = demands.map((d) => ({
+        id: d.id,
+        roleId: d.roleId,
+        roleName: d.roleEntity?.name ?? d.role ?? "",
+        roleColor: d.roleEntity?.color ?? null,
+        startDate: d.startDate.toISOString(),
+        endDate: d.endDate.toISOString(),
+        hoursPerDay: d.hoursPerDay,
+        headcount: d.headcount,
+        status: d.status,
+      }));
+
+      return {
+        project,
+        assignments: baselineAllocations,
+        demands: baselineDemands,
+        totalCostCents,
+        totalHours,
+        budgetCents: project.budgetCents,
+      };
+    }),
+
+  /**
+   * Pure simulation: computes cost/hours/utilization impact of scenario changes
+   * without persisting anything.
+   */
+  simulate: controllerProcedure
+    .input(SimulateInputSchema)
+    .mutation(async ({ ctx, input }) => {
+      const { projectId, changes } = input;
+
+      // Load project
+      const project = await ctx.db.project.findUnique({
+        where: { id: projectId },
+        select: { id: true, name: true, budgetCents: true, orderType: true, startDate: true, endDate: true },
+      });
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+
+      // Load current assignments for baseline
+      const currentAssignments = await ctx.db.assignment.findMany({
+        where: { projectId, status: { not: "CANCELLED" } },
+        include: {
+          resource: {
+            select: {
+              id: true,
+              displayName: true,
+              eid: true,
+              lcrCents: true,
+              availability: true,
+              chargeabilityTarget: true,
+              skills: true,
+            },
+          },
+        },
+      });
+
+      // Compute baseline totals
+      let baselineCostCents = 0;
+      let baselineHours = 0;
+      for (const a of currentAssignments) {
+        const availability = (a.resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY;
+        const result = calculateAllocation({
+          lcrCents: a.resource?.lcrCents ?? 0,
+          hoursPerDay: a.hoursPerDay,
+          startDate: a.startDate,
+          endDate: a.endDate,
+          availability,
+        });
+        baselineCostCents += result.totalCostCents;
+        baselineHours += result.totalHours;
+      }
+
+      // Collect all resource IDs we need to look up (from changes)
+      const resourceIds = new Set<string>();
+      for (const c of changes) {
+        if (c.resourceId) resourceIds.add(c.resourceId);
+      }
+      // Also add resources from existing assignments
+      for (const a of currentAssignments) {
+        if (a.resourceId) resourceIds.add(a.resourceId);
+      }
+
+      // Load resources
+      const resources = await ctx.db.resource.findMany({
+        where: { id: { in: [...resourceIds] } },
+        select: {
+          id: true,
+          displayName: true,
+          eid: true,
+          lcrCents: true,
+          availability: true,
+          chargeabilityTarget: true,
+          skills: true,
+        },
+      });
+      const resourceMap = new Map(resources.map((r) => [r.id, r]));
+
+      // Load roles referenced in changes
+      const roleIds = new Set<string>();
+      for (const c of changes) {
+        if (c.roleId) roleIds.add(c.roleId);
+      }
+      const roles = roleIds.size > 0
+        ? await ctx.db.role.findMany({
+            where: { id: { in: [...roleIds] } },
+            select: { id: true, name: true, color: true },
+          })
+        : [];
+      const roleMap = new Map(roles.map((r) => [r.id, r]));
+
+      // Build scenario: start from current assignments, apply changes
+      const removedAssignmentIds = new Set(
+        changes.filter((c) => c.remove && c.assignmentId).map((c) => c.assignmentId!),
+      );
+      const modifiedAssignmentIds = new Set(
+        changes.filter((c) => !c.remove && c.assignmentId).map((c) => c.assignmentId!),
+      );
+
+      // Keep untouched assignments
+      const scenarioEntries: Array<{
+        resourceId: string | null;
+        lcrCents: number;
+        hoursPerDay: number;
+        startDate: Date;
+        endDate: Date;
+        availability: typeof DEFAULT_AVAILABILITY;
+        isNew: boolean;
+      }> = [];
+
+      for (const a of currentAssignments) {
+        if (removedAssignmentIds.has(a.id)) continue;
+        if (modifiedAssignmentIds.has(a.id)) continue;
+
+        scenarioEntries.push({
+          resourceId: a.resourceId,
+          lcrCents: a.resource?.lcrCents ?? 0,
+          hoursPerDay: a.hoursPerDay,
+          startDate: a.startDate,
+          endDate: a.endDate,
+          availability: (a.resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY,
+          isNew: false,
+        });
+      }
+
+      // Add modified and new entries from changes
+      for (const c of changes) {
+        if (c.remove) continue;
+
+        const resource = c.resourceId ? resourceMap.get(c.resourceId) : null;
+        const lcrCents = resource?.lcrCents ?? 0;
+        const availability = (resource?.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY;
+
+        scenarioEntries.push({
+          resourceId: c.resourceId ?? null,
+          lcrCents,
+          hoursPerDay: c.hoursPerDay,
+          startDate: c.startDate,
+          endDate: c.endDate,
+          availability,
+          isNew: !c.assignmentId,
+        });
+      }
+
+      // Compute scenario totals
+      let scenarioCostCents = 0;
+      let scenarioHours = 0;
+
+      for (const entry of scenarioEntries) {
+        const result = calculateAllocation({
+          lcrCents: entry.lcrCents,
+          hoursPerDay: entry.hoursPerDay,
+          startDate: entry.startDate,
+          endDate: entry.endDate,
+          availability: entry.availability,
+        });
+        scenarioCostCents += result.totalCostCents;
+        scenarioHours += result.totalHours;
+      }
+
+      // Compute per-resource utilization impact
+      // Load ALL assignments for affected resources (across all projects) to measure total utilization
+      const affectedResourceIds = [...new Set(scenarioEntries.map((e) => e.resourceId).filter(Boolean))] as string[];
+
+      const allAssignmentsForResources = affectedResourceIds.length > 0
+        ? await ctx.db.assignment.findMany({
+            where: {
+              resourceId: { in: affectedResourceIds },
+              status: { not: "CANCELLED" },
+            },
+            select: {
+              id: true,
+              resourceId: true,
+              projectId: true,
+              hoursPerDay: true,
+              startDate: true,
+              endDate: true,
+            },
+          })
+        : [];
+
+      // Group by resource
+      const assignmentsByResource = new Map<string, typeof allAssignmentsForResources>();
+      for (const a of allAssignmentsForResources) {
+        if (!a.resourceId) continue;
+        const list = assignmentsByResource.get(a.resourceId) ?? [];
+        list.push(a);
+        assignmentsByResource.set(a.resourceId, list);
+      }
+
+      // Determine analysis window (the widest date range from scenario changes)
+      let windowStart = project.startDate;
+      let windowEnd = project.endDate;
+      for (const e of scenarioEntries) {
+        if (e.startDate < windowStart) windowStart = e.startDate;
+        if (e.endDate > windowEnd) windowEnd = e.endDate;
+      }
+
+      const resourceImpacts = affectedResourceIds.map((resId) => {
+        const resource = resourceMap.get(resId);
+        if (!resource) return null;
+
+        const availability = (resource.availability as typeof DEFAULT_AVAILABILITY) ?? DEFAULT_AVAILABILITY;
+        const totalWorkDays = countWorkingDays(windowStart, windowEnd, availability);
+        const totalAvailableHours = totalWorkDays * (availability.monday ?? 8);
+
+        // Current utilization on this project
+        const currentProjectAssignments = (assignmentsByResource.get(resId) ?? []).filter(
+          (a) => a.projectId === projectId,
+        );
+        let currentProjectHours = 0;
+        for (const a of currentProjectAssignments) {
+          const r = calculateAllocation({
+            lcrCents: 0,
+            hoursPerDay: a.hoursPerDay,
+            startDate: a.startDate,
+            endDate: a.endDate,
+            availability,
+          });
+          currentProjectHours += r.totalHours;
+        }
+
+        // Scenario hours for this resource on this project
+        const scenarioResourceEntries = scenarioEntries.filter((e) => e.resourceId === resId);
+        let scenarioProjectHours = 0;
+        for (const e of scenarioResourceEntries) {
+          const r = calculateAllocation({
+            lcrCents: 0,
+            hoursPerDay: e.hoursPerDay,
+            startDate: e.startDate,
+            endDate: e.endDate,
+            availability,
+          });
+          scenarioProjectHours += r.totalHours;
+        }
+
+        // Total hours across all projects (excluding this project's current, adding scenario)
+        const otherProjectAssignments = (assignmentsByResource.get(resId) ?? []).filter(
+          (a) => a.projectId !== projectId,
+        );
+        let otherProjectsHours = 0;
+        for (const a of otherProjectAssignments) {
+          const r = calculateAllocation({
+            lcrCents: 0,
+            hoursPerDay: a.hoursPerDay,
+            startDate: a.startDate,
+            endDate: a.endDate,
+            availability,
+          });
+          otherProjectsHours += r.totalHours;
+        }
+
+        const currentTotalHours = otherProjectsHours + currentProjectHours;
+        const scenarioTotalHours = otherProjectsHours + scenarioProjectHours;
+
+        const currentUtilization = totalAvailableHours > 0 ? (currentTotalHours / totalAvailableHours) * 100 : 0;
+        const scenarioUtilization = totalAvailableHours > 0 ? (scenarioTotalHours / totalAvailableHours) * 100 : 0;
+
+        return {
+          resourceId: resId,
+          resourceName: resource.displayName,
+          chargeabilityTarget: resource.chargeabilityTarget,
+          currentUtilization: Math.round(currentUtilization * 10) / 10,
+          scenarioUtilization: Math.round(scenarioUtilization * 10) / 10,
+          utilizationDelta: Math.round((scenarioUtilization - currentUtilization) * 10) / 10,
+          isOverallocated: scenarioUtilization > 100,
+        };
+      }).filter((x): x is NonNullable<typeof x> => x !== null);
+
+      // Build warnings
+      const warnings: string[] = [];
+      for (const impact of resourceImpacts) {
+        if (impact && impact.isOverallocated) {
+          warnings.push(
+            `${impact.resourceName} would be at ${impact.scenarioUtilization.toFixed(1)}% utilization (over-allocated)`,
+          );
+        }
+      }
+
+      const budgetCents = project.budgetCents ?? 0;
+      if (budgetCents > 0 && scenarioCostCents > budgetCents) {
+        const overBudgetPct = Math.round(((scenarioCostCents - budgetCents) / budgetCents) * 100);
+        warnings.push(`Scenario exceeds budget by ${overBudgetPct}%`);
+      }
+
+      // Skill coverage: how many unique skills does the scenario team bring vs. current?
+      const currentSkills = new Set<string>();
+      const scenarioSkills = new Set<string>();
+
+      for (const a of currentAssignments) {
+        const skills = (a.resource?.skills ?? []) as Array<{ skill: string }>;
+        for (const s of skills) currentSkills.add(s.skill.toLowerCase());
+      }
+
+      for (const entry of scenarioEntries) {
+        if (!entry.resourceId) continue;
+        const resource = resourceMap.get(entry.resourceId);
+        const skills = (resource?.skills ?? []) as Array<{ skill: string }>;
+        for (const s of skills) scenarioSkills.add(s.skill.toLowerCase());
+      }
+
+      const baselineSkillCount = currentSkills.size;
+      const scenarioSkillCount = scenarioSkills.size;
+      const skillCoveragePct = baselineSkillCount > 0
+        ? Math.round((scenarioSkillCount / baselineSkillCount) * 100)
+        : scenarioSkillCount > 0 ? 100 : 0;
+
+      return {
+        baseline: {
+          totalCostCents: baselineCostCents,
+          totalHours: baselineHours,
+          headcount: currentAssignments.length,
+          skillCount: baselineSkillCount,
+        },
+        scenario: {
+          totalCostCents: scenarioCostCents,
+          totalHours: scenarioHours,
+          headcount: scenarioEntries.length,
+          skillCount: scenarioSkillCount,
+        },
+        delta: {
+          costCents: scenarioCostCents - baselineCostCents,
+          hours: scenarioHours - baselineHours,
+          headcount: scenarioEntries.length - currentAssignments.length,
+          skillCoveragePct,
+        },
+        resourceImpacts,
+        warnings,
+        budgetCents,
+      };
+    }),
+
+  /**
+   * Applies a scenario: creates real assignments from scenario changes.
+   * Manager+ access required.
+   */
+  applyScenario: controllerProcedure
+    .input(SimulateInputSchema)
+    .mutation(async ({ ctx, input }) => {
+      const { projectId, changes } = input;
+
+      const project = await ctx.db.project.findUnique({
+        where: { id: projectId },
+        select: { id: true },
+      });
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+
+      const created: string[] = [];
+
+      for (const change of changes) {
+        if (change.remove && change.assignmentId) {
+          // Cancel the existing assignment
+          await ctx.db.assignment.update({
+            where: { id: change.assignmentId },
+            data: { status: "CANCELLED" },
+          });
+          continue;
+        }
+
+        if (change.assignmentId) {
+          // Modify existing assignment
+          await ctx.db.assignment.update({
+            where: { id: change.assignmentId },
+            data: {
+              startDate: change.startDate,
+              endDate: change.endDate,
+              hoursPerDay: change.hoursPerDay,
+              ...(change.resourceId ? { resourceId: change.resourceId } : {}),
+              ...(change.roleId ? { roleId: change.roleId } : {}),
+            },
+          });
+          created.push(change.assignmentId);
+          continue;
+        }
+
+        if (!change.resourceId) {
+          // Skip entries without a resource — cannot create an assignment
+          continue;
+        }
+
+        // Look up the resource LCR for dailyCostCents
+        const resource = await ctx.db.resource.findUnique({
+          where: { id: change.resourceId },
+          select: { lcrCents: true },
+        });
+        const dailyCostCents = Math.round((resource?.lcrCents ?? 0) * change.hoursPerDay);
+
+        const newAssignment = await ctx.db.assignment.create({
+          data: {
+            projectId,
+            resourceId: change.resourceId,
+            ...(change.roleId ? { roleId: change.roleId } : {}),
+            startDate: change.startDate,
+            endDate: change.endDate,
+            hoursPerDay: change.hoursPerDay,
+            percentage: 100,
+            dailyCostCents,
+            status: "PROPOSED",
+            metadata: {},
+          },
+        });
+        created.push(newAssignment.id);
+      }
+
+      return { appliedCount: created.length };
+    }),
+});
diff --git a/packages/api/src/router/settings.ts b/packages/api/src/router/settings.ts
index fbb87dc..da2d75a 100644
--- a/packages/api/src/router/settings.ts
+++ b/packages/api/src/router/settings.ts
@@ -42,8 +42,14 @@ export const settingsRouter = createTRPCRouter({
       anonymizationEnabled: settings?.anonymizationEnabled ?? false,
       anonymizationDomain: settings?.anonymizationDomain ?? "superhartmut.de",
       anonymizationMode: settings?.anonymizationMode ?? "global",
+      // DALL-E
+      azureDalleDeployment: settings?.azureDalleDeployment ?? null,
+      azureDalleEndpoint: settings?.azureDalleEndpoint ?? null,
+      hasDalleApiKey: !!settings?.azureDalleApiKey,
       // Vacation defaults
       vacationDefaultDays: settings?.vacationDefaultDays ?? 28,
+      // Timeline
+      timelineUndoMaxSteps: settings?.timelineUndoMaxSteps ?? 50,
     };
   }),
 
@@ -84,8 +90,14 @@ export const settingsRouter = createTRPCRouter({
         anonymizationDomain: z.string().trim().min(1).optional(),
         anonymizationSeed: z.string().trim().min(1).optional().or(z.literal("")),
         anonymizationMode: z.enum(["global"]).optional(),
+        // DALL-E image generation
+        azureDalleDeployment: z.string().optional(),
+        azureDalleEndpoint: z.string().url().optional().or(z.literal("")),
+        azureDalleApiKey: z.string().optional(),
         // Vacation
         vacationDefaultDays: z.number().int().min(0).max(365).optional(),
+        // Timeline
+        timelineUndoMaxSteps: z.number().int().min(1).max(200).optional(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -127,8 +139,17 @@ export const settingsRouter = createTRPCRouter({
         data.anonymizationMode = input.anonymizationMode;
         data.anonymizationAliases = null;
       }
+      // DALL-E
+      if (input.azureDalleDeployment !== undefined)
+        data.azureDalleDeployment = input.azureDalleDeployment || null;
+      if (input.azureDalleEndpoint !== undefined)
+        data.azureDalleEndpoint = input.azureDalleEndpoint || null;
+      if (input.azureDalleApiKey !== undefined)
+        data.azureDalleApiKey = input.azureDalleApiKey || null;
       // Vacation
       if (input.vacationDefaultDays !== undefined) data.vacationDefaultDays = input.vacationDefaultDays;
+      // Timeline
+      if (input.timelineUndoMaxSteps !== undefined) data.timelineUndoMaxSteps = input.timelineUndoMaxSteps;
 
       await ctx.db.systemSettings.upsert({
         where: { id: "singleton" },
diff --git a/packages/api/src/router/system-role-config.ts b/packages/api/src/router/system-role-config.ts
new file mode 100644
index 0000000..94dd1a3
--- /dev/null
+++ b/packages/api/src/router/system-role-config.ts
@@ -0,0 +1,40 @@
+import { z } from "zod";
+import { adminProcedure, createTRPCRouter, invalidateRoleDefaultsCache, protectedProcedure } from "../trpc.js";
+
+export const systemRoleConfigRouter = createTRPCRouter({
+  /** List all role configs (sorted by sortOrder) */
+  list: protectedProcedure.query(async ({ ctx }) => {
+    return ctx.db.systemRoleConfig.findMany({
+      orderBy: { sortOrder: "asc" },
+    });
+  }),
+
+  /** Update a role's default permissions, label, description, and color */
+  update: adminProcedure
+    .input(
+      z.object({
+        role: z.string(),
+        label: z.string().min(1).optional(),
+        description: z.string().nullable().optional(),
+        color: z.string().nullable().optional(),
+        defaultPermissions: z.array(z.string()).optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const data: Record<string, unknown> = {};
+      if (input.label !== undefined) data.label = input.label;
+      if (input.description !== undefined) data.description = input.description;
+      if (input.color !== undefined) data.color = input.color;
+      if (input.defaultPermissions !== undefined) data.defaultPermissions = input.defaultPermissions;
+
+      const result = await ctx.db.systemRoleConfig.update({
+        where: { role: input.role as never },
+        data,
+      });
+
+      // Invalidate cached role defaults so changes take effect immediately
+      invalidateRoleDefaultsCache();
+
+      return result;
+    }),
+});
diff --git a/packages/api/src/router/timeline.ts b/packages/api/src/router/timeline.ts
index 988396e..2d8979f 100644
--- a/packages/api/src/router/timeline.ts
+++ b/packages/api/src/router/timeline.ts
@@ -143,23 +143,22 @@ async function loadTimelineEntriesReadModel(
 
 async function loadProjectShiftContext(db: ShiftDbClient, projectId: string) {
   const [project, planningRead] = await Promise.all([
-    db.project.findUnique({
-      where: { id: projectId },
-      select: {
-        id: true,
-        budgetCents: true,
-        winProbability: true,
-        startDate: true,
-        endDate: true,
-      },
-    }),
+    findUniqueOrThrow(
+      db.project.findUnique({
+        where: { id: projectId },
+        select: {
+          id: true,
+          budgetCents: true,
+          winProbability: true,
+          startDate: true,
+          endDate: true,
+        },
+      }),
+      "Project",
+    ),
     loadProjectPlanningReadModel(db, { projectId, activeOnly: true }),
   ]);
 
-  if (!project) {
-    throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
-  }
-
   const { demandRequirements, assignments, readModel: projectReadModel } = planningRead;
 
   const resourceIds = getAssignmentResourceIds(projectReadModel);
@@ -337,31 +336,30 @@ export const timelineRouter = createTRPCRouter({
     .input(z.object({ projectId: z.string() }))
     .query(async ({ ctx, input }) => {
       const [project, planningRead] = await Promise.all([
-        ctx.db.project.findUnique({
-          where: { id: input.projectId },
-          select: {
-            id: true,
-            name: true,
-            shortCode: true,
-            orderType: true,
-            budgetCents: true,
-            winProbability: true,
-            status: true,
-            startDate: true,
-            endDate: true,
-            staffingReqs: true,
-          },
-        }),
+        findUniqueOrThrow(
+          ctx.db.project.findUnique({
+            where: { id: input.projectId },
+            select: {
+              id: true,
+              name: true,
+              shortCode: true,
+              orderType: true,
+              budgetCents: true,
+              winProbability: true,
+              status: true,
+              startDate: true,
+              endDate: true,
+              staffingReqs: true,
+            },
+          }),
+          "Project",
+        ),
         loadProjectPlanningReadModel(ctx.db, {
           projectId: input.projectId,
           activeOnly: true,
         }),
       ]);
 
-      if (!project) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
-      }
-
       const resourceIds = getAssignmentResourceIds(planningRead.readModel);
       const allResourceAllocations =
         resourceIds.length === 0
@@ -721,6 +719,182 @@ export const timelineRouter = createTRPCRouter({
       return allocation;
     }),
 
+  /**
+   * Batch quick-assign multiple resources to a project for a date range.
+   * Used by the multi-selection floating action bar.
+   */
+  batchQuickAssign: managerProcedure
+    .input(
+      z.object({
+        assignments: z
+          .array(
+            z.object({
+              resourceId: z.string(),
+              projectId: z.string(),
+              startDate: z.coerce.date(),
+              endDate: z.coerce.date(),
+              hoursPerDay: z.number().min(0.5).max(24).default(8),
+              role: z.string().min(1).max(200).default("Team Member"),
+              status: z
+                .nativeEnum(AllocationStatus)
+                .default(AllocationStatus.PROPOSED),
+            }),
+          )
+          .min(1)
+          .max(50),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_ALLOCATIONS);
+
+      // Validate all date ranges
+      for (const a of input.assignments) {
+        if (a.endDate < a.startDate) {
+          throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "End date must be after start date",
+          });
+        }
+      }
+
+      const results = await ctx.db.$transaction(async (tx) => {
+        const created = [];
+        for (const a of input.assignments) {
+          const percentage = Math.min(
+            100,
+            Math.round((a.hoursPerDay / 8) * 100),
+          );
+          const metadata = {
+            source: "batchQuickAssign",
+          } satisfies Record<string, unknown>;
+
+          const assignment = await createAssignment(
+            tx as unknown as Parameters<typeof createAssignment>[0],
+            {
+              resourceId: a.resourceId,
+              projectId: a.projectId,
+              startDate: a.startDate,
+              endDate: a.endDate,
+              hoursPerDay: a.hoursPerDay,
+              percentage,
+              role: a.role,
+              status: a.status,
+              metadata,
+            },
+          );
+          created.push(assignment);
+        }
+        return created;
+      });
+
+      // Fire SSE events
+      for (const assignment of results) {
+        emitAllocationCreated({
+          id: assignment.id,
+          projectId: assignment.projectId,
+          resourceId: assignment.resourceId,
+        });
+      }
+
+      return { count: results.length };
+    }),
+
+  /**
+   * Batch-shift multiple allocations by the same number of days.
+   * Used by multi-select drag on the timeline.
+   */
+  batchShiftAllocations: managerProcedure
+    .input(
+      z.object({
+        allocationIds: z.array(z.string()).min(1).max(100),
+        daysDelta: z.number().int().min(-3650).max(3650),
+        mode: z.enum(["move", "resize-start", "resize-end"]).default("move"),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_ALLOCATIONS);
+
+      if (input.daysDelta === 0) return { count: 0 };
+
+      // Load all allocations
+      const entries = await Promise.all(
+        input.allocationIds.map((id) => findAllocationEntry(ctx.db, id)),
+      );
+      const resolved = entries.filter(
+        (e): e is NonNullable<typeof e> => e !== null,
+      );
+
+      if (resolved.length === 0) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "No allocations found" });
+      }
+
+      const results = await ctx.db.$transaction(async (tx) => {
+        const updated = [];
+        for (const entry of resolved) {
+          const existing = entry.entry;
+          const newStart = new Date(existing.startDate);
+          const newEnd = new Date(existing.endDate);
+
+          if (input.mode === "move") {
+            newStart.setDate(newStart.getDate() + input.daysDelta);
+            newEnd.setDate(newEnd.getDate() + input.daysDelta);
+          } else if (input.mode === "resize-start") {
+            newStart.setDate(newStart.getDate() + input.daysDelta);
+            // Clamp: start must not exceed end
+            if (newStart > newEnd) newStart.setTime(newEnd.getTime());
+          } else {
+            // resize-end
+            newEnd.setDate(newEnd.getDate() + input.daysDelta);
+            // Clamp: end must not precede start
+            if (newEnd < newStart) newEnd.setTime(newStart.getTime());
+          }
+
+          const result = await updateAllocationEntry(
+            tx as unknown as Parameters<typeof updateAllocationEntry>[0],
+            {
+              id: existing.id,
+              demandRequirementUpdate: {
+                startDate: newStart,
+                endDate: newEnd,
+              },
+              assignmentUpdate: {
+                startDate: newStart,
+                endDate: newEnd,
+              },
+            },
+          );
+          updated.push(result.allocation);
+        }
+
+        await tx.auditLog.create({
+          data: {
+            entityType: "Allocation",
+            entityId: input.allocationIds.join(","),
+            action: "UPDATE",
+            changes: {
+              operation: "batchShift",
+              mode: input.mode,
+              daysDelta: input.daysDelta,
+              count: resolved.length,
+            } as unknown as import("@planarchy/db").Prisma.InputJsonValue,
+          },
+        });
+
+        return updated;
+      });
+
+      // Fire SSE events
+      for (const alloc of results) {
+        emitAllocationUpdated({
+          id: alloc.id,
+          projectId: alloc.projectId,
+          resourceId: alloc.resourceId,
+        });
+      }
+
+      return { count: results.length };
+    }),
+
   /**
    * Get budget status for a project.
    */
diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 0002810..0fc5d54 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -12,9 +12,21 @@ import { Prisma } from "@planarchy/db";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
-import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
+import { adminProcedure, createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
 
 export const userRouter = createTRPCRouter({
+  /** Lightweight user list for task assignment (ADMIN + MANAGER) */
+  listAssignable: managerProcedure.query(async ({ ctx }) => {
+    return ctx.db.user.findMany({
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+      orderBy: { name: "asc" },
+    });
+  }),
+
   list: adminProcedure.query(async ({ ctx }) => {
     return ctx.db.user.findMany({
       select: {
@@ -23,11 +35,23 @@ export const userRouter = createTRPCRouter({
         email: true,
         systemRole: true,
         createdAt: true,
+        lastLoginAt: true,
+        lastActiveAt: true,
+        permissionOverrides: true,
       },
       orderBy: { name: "asc" },
     });
   }),
 
+  /** Count of users active in the last 5 minutes */
+  activeCount: adminProcedure.query(async ({ ctx }) => {
+    const fiveMinAgo = new Date(Date.now() - 5 * 60 * 1000);
+    const count = await ctx.db.user.count({
+      where: { lastActiveAt: { gte: fiveMinAgo } },
+    });
+    return { count };
+  }),
+
   me: protectedProcedure.query(async ({ ctx }) => {
     const user = await findUniqueOrThrow(
       ctx.db.user.findUnique({
diff --git a/packages/api/src/router/vacation.ts b/packages/api/src/router/vacation.ts
index 5722bfe..a90e4fd 100644
--- a/packages/api/src/router/vacation.ts
+++ b/packages/api/src/router/vacation.ts
@@ -1,12 +1,15 @@
-import { UpdateVacationStatusSchema, getPublicHolidays } from "@planarchy/shared";
+import { UpdateVacationStatusSchema, getPublicHolidays, buildTaskAction } from "@planarchy/shared";
 import { VacationStatus, VacationType } from "@planarchy/db";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
-import { emitVacationCreated, emitVacationUpdated, emitNotificationCreated } from "../sse/event-bus.js";
+import { RESOURCE_BRIEF_SELECT } from "../db/selects.js";
+import { emitVacationCreated, emitVacationUpdated, emitNotificationCreated, emitTaskAssigned } from "../sse/event-bus.js";
 import { createTRPCRouter, adminProcedure, managerProcedure, protectedProcedure } from "../trpc.js";
 import { sendEmail } from "../lib/email.js";
 import { anonymizeResource, anonymizeUser, getAnonymizationDirectory } from "../lib/anonymization.js";
+import { checkVacationConflicts, checkBatchVacationConflicts } from "../lib/vacation-conflicts.js";
+import { dispatchWebhooks } from "../lib/webhook-dispatcher.js";
 
 /** Types that consume from annual leave balance */
 const BALANCE_TYPES = [VacationType.ANNUAL, VacationType.OTHER];
@@ -99,7 +102,7 @@ export const vacationRouter = createTRPCRouter({
           ...(input.endDate ? { startDate: { lte: input.endDate } } : {}),
         },
         include: {
-          resource: { select: { id: true, displayName: true, eid: true } },
+          resource: { select: RESOURCE_BRIEF_SELECT },
           requestedBy: { select: { id: true, name: true, email: true } },
           approvedBy: { select: { id: true, name: true, email: true } },
         },
@@ -120,7 +123,7 @@ export const vacationRouter = createTRPCRouter({
         ctx.db.vacation.findUnique({
           where: { id: input.id },
           include: {
-            resource: { select: { id: true, displayName: true, eid: true } },
+            resource: { select: RESOURCE_BRIEF_SELECT },
             requestedBy: { select: { id: true, name: true, email: true } },
             approvedBy: { select: { id: true, name: true, email: true } },
           },
@@ -210,13 +213,48 @@ export const vacationRouter = createTRPCRouter({
             : {}),
         },
         include: {
-          resource: { select: { id: true, displayName: true, eid: true } },
+          resource: { select: RESOURCE_BRIEF_SELECT },
           requestedBy: { select: { id: true, name: true, email: true } },
         },
       });
 
       emitVacationCreated({ id: vacation.id, resourceId: vacation.resourceId, status: vacation.status });
 
+      // Create approval tasks for managers when a non-manager submits a vacation request
+      if (status === VacationStatus.PENDING) {
+        const resourceName = vacation.resource?.displayName ?? "Unknown";
+        const startStr = input.startDate.toISOString().slice(0, 10);
+        const endStr = input.endDate.toISOString().slice(0, 10);
+
+        const managers = await ctx.db.user.findMany({
+          where: { systemRole: { in: ["ADMIN", "MANAGER"] } },
+          select: { id: true },
+        });
+
+        for (const manager of managers) {
+          if (manager.id === userRecord.id) continue;
+          const task = await ctx.db.notification.create({
+            data: {
+              userId: manager.id,
+              category: "APPROVAL",
+              type: "VACATION_APPROVAL",
+              priority: "NORMAL",
+              title: `Vacation approval: ${resourceName}`,
+              body: `${resourceName} requests ${input.type} from ${startStr} to ${endStr}`,
+              taskStatus: "OPEN",
+              taskAction: buildTaskAction("approve_vacation", vacation.id),
+              entityId: vacation.id,
+              entityType: "vacation",
+              link: "/vacations",
+              senderId: userRecord.id,
+              channel: "in_app",
+            },
+          });
+          emitNotificationCreated(manager.id, task.id);
+          emitTaskAssigned(manager.id, task.id);
+        }
+      }
+
       const directory = await getAnonymizationDirectory(ctx.db);
       return anonymizeVacationRecord(vacation, directory);
     }),
@@ -241,6 +279,10 @@ export const vacationRouter = createTRPCRouter({
         select: { id: true },
       });
 
+      // Check for team conflicts before approving (non-blocking)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const conflictResult = await checkVacationConflicts(ctx.db as any, input.id, userRecord?.id);
+
       const updated = await ctx.db.vacation.update({
         where: { id: input.id },
         data: {
@@ -252,12 +294,32 @@ export const vacationRouter = createTRPCRouter({
       });
 
       emitVacationUpdated({ id: updated.id, resourceId: updated.resourceId, status: updated.status });
+      void dispatchWebhooks(ctx.db, "vacation.approved", {
+        id: updated.id,
+        resourceId: updated.resourceId,
+        startDate: updated.startDate.toISOString(),
+        endDate: updated.endDate.toISOString(),
+      });
+
+      // Mark approval tasks as DONE
+      await ctx.db.notification.updateMany({
+        where: {
+          taskAction: buildTaskAction("approve_vacation", input.id),
+          category: "APPROVAL",
+          taskStatus: "OPEN",
+        },
+        data: {
+          taskStatus: "DONE",
+          completedAt: new Date(),
+          ...(userRecord?.id ? { completedBy: userRecord.id } : {}),
+        },
+      });
 
       if (existing.status === VacationStatus.PENDING) {
         void notifyVacationStatus(ctx.db, updated.id, updated.resourceId, VacationStatus.APPROVED);
       }
 
-      return updated;
+      return { ...updated, warnings: conflictResult.warnings };
     }),
 
   /**
@@ -283,6 +345,25 @@ export const vacationRouter = createTRPCRouter({
       });
 
       emitVacationUpdated({ id: updated.id, resourceId: updated.resourceId, status: updated.status });
+
+      // Mark approval tasks as DONE
+      const userRecord = await ctx.db.user.findUnique({
+        where: { email: ctx.session.user?.email ?? "" },
+        select: { id: true },
+      });
+      await ctx.db.notification.updateMany({
+        where: {
+          taskAction: buildTaskAction("approve_vacation", input.id),
+          category: "APPROVAL",
+          taskStatus: "OPEN",
+        },
+        data: {
+          taskStatus: "DONE",
+          completedAt: new Date(),
+          ...(userRecord?.id ? { completedBy: userRecord.id } : {}),
+        },
+      });
+
       void notifyVacationStatus(ctx.db, updated.id, updated.resourceId, VacationStatus.REJECTED, input.rejectionReason);
 
       return updated;
@@ -304,6 +385,14 @@ export const vacationRouter = createTRPCRouter({
         select: { id: true, resourceId: true },
       });
 
+      // Check for team conflicts before approving (non-blocking)
+      const conflictMap = await checkBatchVacationConflicts(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ctx.db as any,
+        vacations.map((v) => v.id),
+        userRecord?.id,
+      );
+
       await ctx.db.vacation.updateMany({
         where: { id: { in: vacations.map((v) => v.id) } },
         data: {
@@ -317,9 +406,29 @@ export const vacationRouter = createTRPCRouter({
       for (const v of vacations) {
         emitVacationUpdated({ id: v.id, resourceId: v.resourceId, status: VacationStatus.APPROVED });
         void notifyVacationStatus(ctx.db, v.id, v.resourceId, VacationStatus.APPROVED);
+
+        // Mark approval tasks as DONE
+        await ctx.db.notification.updateMany({
+          where: {
+            taskAction: buildTaskAction("approve_vacation", v.id),
+            category: "APPROVAL",
+            taskStatus: "OPEN",
+          },
+          data: {
+            taskStatus: "DONE",
+            completedAt: new Date(),
+            ...(userRecord?.id ? { completedBy: userRecord.id } : {}),
+          },
+        });
       }
 
-      return { approved: vacations.length };
+      // Flatten all warnings into a single array
+      const warnings: string[] = [];
+      for (const [, w] of conflictMap) {
+        warnings.push(...w);
+      }
+
+      return { approved: vacations.length, warnings };
     }),
 
   /**
@@ -333,6 +442,11 @@ export const vacationRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
+      const userRecord = await ctx.db.user.findUnique({
+        where: { email: ctx.session.user?.email ?? "" },
+        select: { id: true },
+      });
+
       const vacations = await ctx.db.vacation.findMany({
         where: { id: { in: input.ids }, status: VacationStatus.PENDING },
         select: { id: true, resourceId: true },
@@ -349,6 +463,20 @@ export const vacationRouter = createTRPCRouter({
       for (const v of vacations) {
         emitVacationUpdated({ id: v.id, resourceId: v.resourceId, status: VacationStatus.REJECTED });
         void notifyVacationStatus(ctx.db, v.id, v.resourceId, VacationStatus.REJECTED, input.rejectionReason);
+
+        // Mark approval tasks as DONE
+        await ctx.db.notification.updateMany({
+          where: {
+            taskAction: buildTaskAction("approve_vacation", v.id),
+            category: "APPROVAL",
+            taskStatus: "OPEN",
+          },
+          data: {
+            taskStatus: "DONE",
+            completedAt: new Date(),
+            ...(userRecord?.id ? { completedBy: userRecord.id } : {}),
+          },
+        });
       }
 
       return { rejected: vacations.length };
@@ -438,7 +566,7 @@ export const vacationRouter = createTRPCRouter({
     return ctx.db.vacation.findMany({
       where: { status: VacationStatus.PENDING },
       include: {
-        resource: { select: { id: true, displayName: true, eid: true } },
+        resource: { select: RESOURCE_BRIEF_SELECT },
         requestedBy: { select: { id: true, name: true, email: true } },
       },
       orderBy: { startDate: "asc" },
@@ -475,7 +603,7 @@ export const vacationRouter = createTRPCRouter({
           endDate: { gte: input.startDate },
         },
         include: {
-          resource: { select: { id: true, displayName: true, eid: true } },
+          resource: { select: RESOURCE_BRIEF_SELECT },
         },
         orderBy: { startDate: "asc" },
         take: 20,
diff --git a/packages/api/src/router/webhook.ts b/packages/api/src/router/webhook.ts
new file mode 100644
index 0000000..96f3d76
--- /dev/null
+++ b/packages/api/src/router/webhook.ts
@@ -0,0 +1,152 @@
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { createTRPCRouter, adminProcedure } from "../trpc.js";
+import { WEBHOOK_EVENTS } from "../lib/webhook-dispatcher.js";
+
+const webhookEventEnum = z.enum(WEBHOOK_EVENTS as unknown as [string, ...string[]]);
+
+export const webhookRouter = createTRPCRouter({
+  /** List all webhooks. */
+  list: adminProcedure.query(async ({ ctx }) => {
+    return ctx.db.webhook.findMany({
+      orderBy: { createdAt: "desc" },
+    });
+  }),
+
+  /** Get a single webhook by ID. */
+  getById: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const wh = await ctx.db.webhook.findUnique({ where: { id: input.id } });
+      if (!wh) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
+      }
+      return wh;
+    }),
+
+  /** Create a new webhook. */
+  create: adminProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(200),
+        url: z.string().url(),
+        secret: z.string().optional(),
+        events: z.array(webhookEventEnum).min(1),
+        isActive: z.boolean().default(true),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      return ctx.db.webhook.create({
+        data: {
+          name: input.name,
+          url: input.url,
+          ...(input.secret !== undefined ? { secret: input.secret } : {}),
+          events: input.events,
+          isActive: input.isActive,
+        },
+      });
+    }),
+
+  /** Update an existing webhook. */
+  update: adminProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        data: z.object({
+          name: z.string().min(1).max(200).optional(),
+          url: z.string().url().optional(),
+          secret: z.string().nullish(),
+          events: z.array(webhookEventEnum).min(1).optional(),
+          isActive: z.boolean().optional(),
+        }),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.webhook.findUnique({ where: { id: input.id } });
+      if (!existing) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
+      }
+
+      return ctx.db.webhook.update({
+        where: { id: input.id },
+        data: {
+          ...(input.data.name !== undefined ? { name: input.data.name } : {}),
+          ...(input.data.url !== undefined ? { url: input.data.url } : {}),
+          ...(input.data.secret !== undefined ? { secret: input.data.secret } : {}),
+          ...(input.data.events !== undefined ? { events: input.data.events } : {}),
+          ...(input.data.isActive !== undefined ? { isActive: input.data.isActive } : {}),
+        },
+      });
+    }),
+
+  /** Delete a webhook. */
+  delete: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.webhook.findUnique({ where: { id: input.id } });
+      if (!existing) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
+      }
+      await ctx.db.webhook.delete({ where: { id: input.id } });
+    }),
+
+  /** Send a test payload to a webhook URL. */
+  test: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const wh = await ctx.db.webhook.findUnique({ where: { id: input.id } });
+      if (!wh) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
+      }
+
+      const testPayload = {
+        event: "webhook.test",
+        timestamp: new Date().toISOString(),
+        payload: {
+          webhookId: wh.id,
+          webhookName: wh.name,
+          message: "This is a test payload from Planarchy.",
+        },
+      };
+
+      const body = JSON.stringify(testPayload);
+
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Webhook-Event": "webhook.test",
+      };
+
+      if (wh.secret) {
+        const { createHmac } = await import("node:crypto");
+        const signature = createHmac("sha256", wh.secret)
+          .update(body)
+          .digest("hex");
+        headers["X-Webhook-Signature"] = signature;
+      }
+
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5_000);
+
+      try {
+        const response = await fetch(wh.url, {
+          method: "POST",
+          headers,
+          body,
+          signal: controller.signal,
+        });
+        return {
+          success: response.ok,
+          statusCode: response.status,
+          statusText: response.statusText,
+        };
+      } catch (err) {
+        return {
+          success: false,
+          statusCode: 0,
+          statusText: err instanceof Error ? err.message : "Unknown error",
+        };
+      } finally {
+        clearTimeout(timeout);
+      }
+    }),
+});
diff --git a/packages/api/src/sse/event-bus.ts b/packages/api/src/sse/event-bus.ts
index f7648b2..3ec701f 100644
--- a/packages/api/src/sse/event-bus.ts
+++ b/packages/api/src/sse/event-bus.ts
@@ -209,3 +209,23 @@ export const emitRoleDeleted = (roleId: string) =>
 export function emitNotificationCreated(userId: string, notificationId: string): void {
   eventBus.emit(SSE_EVENT_TYPES.NOTIFICATION_CREATED, { userId, notificationId });
 }
+
+export function emitTaskAssigned(userId: string, notificationId: string): void {
+  eventBus.emit(SSE_EVENT_TYPES.TASK_ASSIGNED, { userId, notificationId });
+}
+
+export function emitTaskCompleted(userId: string, notificationId: string): void {
+  eventBus.emit(SSE_EVENT_TYPES.TASK_COMPLETED, { userId, notificationId });
+}
+
+export function emitTaskStatusChanged(userId: string, notificationId: string): void {
+  eventBus.emit(SSE_EVENT_TYPES.TASK_STATUS_CHANGED, { userId, notificationId });
+}
+
+export function emitReminderDue(userId: string, notificationId: string): void {
+  eventBus.emit(SSE_EVENT_TYPES.REMINDER_DUE, { userId, notificationId });
+}
+
+export function emitBroadcastSent(broadcastId: string, recipientCount: number): void {
+  eventBus.emit(SSE_EVENT_TYPES.BROADCAST_SENT, { broadcastId, recipientCount });
+}
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index 9292cf5..8e643dd 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -2,6 +2,7 @@ import { prisma } from "@planarchy/db";
 import { resolvePermissions, PermissionKey, SystemRole } from "@planarchy/shared";
 import { initTRPC, TRPCError } from "@trpc/server";
 import { ZodError } from "zod";
+import { loggingMiddleware } from "./middleware/logging.js";
 
 // Minimal Session type to avoid next-auth peer-dep in this package
 interface Session {
@@ -15,16 +16,48 @@ export interface TRPCContext {
   session: Session | null;
   db: typeof prisma;
   dbUser: { id: string; systemRole: string; permissionOverrides: unknown } | null;
+  roleDefaults: Record<string, PermissionKey[]> | null;
+  requestId?: string;
+}
+
+// Cache role defaults for 60 seconds to avoid DB hit on every request
+let _roleDefaultsCache: Record<string, PermissionKey[]> | null = null;
+let _roleDefaultsCacheTime = 0;
+const ROLE_DEFAULTS_TTL = 60_000;
+
+export async function loadRoleDefaults(): Promise<Record<string, PermissionKey[]>> {
+  const now = Date.now();
+  if (_roleDefaultsCache && now - _roleDefaultsCacheTime < ROLE_DEFAULTS_TTL) {
+    return _roleDefaultsCache;
+  }
+  const configs = await prisma.systemRoleConfig.findMany({
+    select: { role: true, defaultPermissions: true },
+  });
+  const map: Record<string, PermissionKey[]> = {};
+  for (const c of configs) {
+    map[c.role] = c.defaultPermissions as PermissionKey[];
+  }
+  _roleDefaultsCache = map;
+  _roleDefaultsCacheTime = now;
+  return map;
+}
+
+/** Invalidate the role defaults cache (call after updating SystemRoleConfig) */
+export function invalidateRoleDefaultsCache(): void {
+  _roleDefaultsCache = null;
+  _roleDefaultsCacheTime = 0;
 }
 
 export function createTRPCContext(opts: {
   session: Session | null;
   dbUser?: { id: string; systemRole: string; permissionOverrides: unknown } | null;
+  roleDefaults?: Record<string, PermissionKey[]> | null;
 }): TRPCContext {
   return {
     session: opts.session,
     db: prisma,
     dbUser: opts.dbUser ?? null,
+    roleDefaults: opts.roleDefaults ?? null,
   };
 }
 
@@ -53,11 +86,14 @@ export const createCallerFactory = t.createCallerFactory;
  */
 export const publicProcedure = t.procedure;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const withLogging = t.middleware(loggingMiddleware as any);
+
 /**
  * Protected procedure — requires authenticated session AND a valid DB user record.
  * This prevents stale sessions from accessing data after the DB user is deleted.
  */
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+export const protectedProcedure = t.procedure.use(withLogging).use(({ ctx, next }) => {
   if (!ctx.session?.user) {
     throw new TRPCError({ code: "UNAUTHORIZED", message: "Authentication required" });
   }
@@ -86,7 +122,8 @@ export const managerProcedure = protectedProcedure.use(({ ctx, next }) => {
   }
   const permissions = resolvePermissions(
     user.systemRole as SystemRole,
-    user.permissionOverrides as import("@planarchy/shared").PermissionOverrides | null
+    user.permissionOverrides as import("@planarchy/shared").PermissionOverrides | null,
+    ctx.roleDefaults ?? undefined,
   );
   return next({ ctx: { ...ctx, user, permissions } });
 });
@@ -104,7 +141,8 @@ export const controllerProcedure = protectedProcedure.use(({ ctx, next }) => {
   }
   const permissions = resolvePermissions(
     user.systemRole as SystemRole,
-    user.permissionOverrides as import("@planarchy/shared").PermissionOverrides | null
+    user.permissionOverrides as import("@planarchy/shared").PermissionOverrides | null,
+    ctx.roleDefaults ?? undefined,
   );
   return next({ ctx: { ...ctx, user, permissions } });
 });
@@ -117,7 +155,7 @@ export const adminProcedure = protectedProcedure.use(({ ctx, next }) => {
   if (!user || user.systemRole !== SystemRole.ADMIN) {
     throw new TRPCError({ code: "FORBIDDEN", message: "Admin role required" });
   }
-  const permissions = resolvePermissions(SystemRole.ADMIN, null);
+  const permissions = resolvePermissions(SystemRole.ADMIN, null, ctx.roleDefaults ?? undefined);
   return next({ ctx: { ...ctx, user, permissions } });
 });
 
diff --git a/packages/api/vitest.config.ts b/packages/api/vitest.config.ts
index 3f824fb..f0eb8c8 100644
--- a/packages/api/vitest.config.ts
+++ b/packages/api/vitest.config.ts
@@ -4,5 +4,14 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "node",
+    coverage: {
+      provider: "v8",
+      thresholds: {
+        lines: 80,
+        functions: 75,
+        branches: 75,
+        statements: 80,
+      },
+    },
   },
 });
diff --git a/packages/application/src/index.ts b/packages/application/src/index.ts
index 069470f..faafd81 100644
--- a/packages/application/src/index.ts
+++ b/packages/application/src/index.ts
@@ -80,6 +80,12 @@ export {
   type GetDashboardTopValueResourcesInput,
   type GetDashboardDemandInput,
   type GetDashboardChargeabilityOverviewInput,
+  getDashboardBudgetForecast,
+  type BudgetForecastRow,
+  getDashboardSkillGaps,
+  type SkillGapRow,
+  getDashboardProjectHealth,
+  type ProjectHealthRow,
 } from "./use-cases/dashboard/index.js";
 
 export {
diff --git a/packages/application/src/use-cases/dashboard/get-budget-forecast.ts b/packages/application/src/use-cases/dashboard/get-budget-forecast.ts
new file mode 100644
index 0000000..fdd1814
--- /dev/null
+++ b/packages/application/src/use-cases/dashboard/get-budget-forecast.ts
@@ -0,0 +1,99 @@
+import type { PrismaClient } from "@planarchy/db";
+import { calculateInclusiveDays, MILLISECONDS_PER_DAY } from "./shared.js";
+
+export interface BudgetForecastRow {
+  projectName: string;
+  shortCode: string;
+  budgetCents: number;
+  spentCents: number;
+  burnRate: number;
+  estimatedExhaustionDate: string | null;
+  pctUsed: number;
+}
+
+export async function getDashboardBudgetForecast(
+  db: PrismaClient,
+): Promise<BudgetForecastRow[]> {
+  const projects = await db.project.findMany({
+    where: { status: "ACTIVE" },
+    select: {
+      id: true,
+      name: true,
+      shortCode: true,
+      budgetCents: true,
+      startDate: true,
+      endDate: true,
+    },
+  });
+
+  if (projects.length === 0) return [];
+
+  const projectIds = projects.map((p) => p.id);
+
+  const assignments = await db.assignment.findMany({
+    where: {
+      projectId: { in: projectIds },
+      status: { not: "CANCELLED" },
+    },
+    select: {
+      projectId: true,
+      startDate: true,
+      endDate: true,
+      dailyCostCents: true,
+    },
+  });
+
+  const now = new Date();
+  const spentByProject = new Map<string, number>();
+  const monthlyBurnByProject = new Map<string, number>();
+
+  for (const a of assignments) {
+    const days = calculateInclusiveDays(a.startDate, a.endDate);
+    const totalCost = (a.dailyCostCents ?? 0) * days;
+
+    spentByProject.set(
+      a.projectId,
+      (spentByProject.get(a.projectId) ?? 0) + totalCost,
+    );
+
+    // Approximate monthly burn from active assignments that overlap today
+    if (a.startDate <= now && a.endDate >= now) {
+      // ~22 working days per month
+      const monthlyContribution = (a.dailyCostCents ?? 0) * 22;
+      monthlyBurnByProject.set(
+        a.projectId,
+        (monthlyBurnByProject.get(a.projectId) ?? 0) + monthlyContribution,
+      );
+    }
+  }
+
+  const rows: BudgetForecastRow[] = projects.map((p) => {
+    const spentCents = spentByProject.get(p.id) ?? 0;
+    const burnRate = monthlyBurnByProject.get(p.id) ?? 0;
+    const pctUsed =
+      p.budgetCents > 0 ? Math.round((spentCents / p.budgetCents) * 100) : 0;
+
+    let estimatedExhaustionDate: string | null = null;
+    if (burnRate > 0 && p.budgetCents > spentCents) {
+      const remainingCents = p.budgetCents - spentCents;
+      const monthsRemaining = remainingCents / burnRate;
+      const exhaustionDate = new Date(
+        now.getTime() + monthsRemaining * 30 * MILLISECONDS_PER_DAY,
+      );
+      estimatedExhaustionDate = exhaustionDate.toISOString().slice(0, 10);
+    }
+
+    return {
+      projectName: p.name,
+      shortCode: p.shortCode,
+      budgetCents: p.budgetCents,
+      spentCents,
+      burnRate,
+      estimatedExhaustionDate,
+      pctUsed,
+    };
+  });
+
+  rows.sort((a, b) => b.pctUsed - a.pctUsed);
+  return rows;
+}
diff --git a/packages/application/src/use-cases/dashboard/get-project-health.ts b/packages/application/src/use-cases/dashboard/get-project-health.ts
new file mode 100644
index 0000000..9169230
--- /dev/null
+++ b/packages/application/src/use-cases/dashboard/get-project-health.ts
@@ -0,0 +1,104 @@
+import type { PrismaClient } from "@planarchy/db";
+import { calculateInclusiveDays } from "./shared.js";
+
+export interface ProjectHealthRow {
+  projectName: string;
+  shortCode: string;
+  budgetHealth: number;
+  staffingHealth: number;
+  timelineHealth: number;
+  compositeScore: number;
+}
+
+export async function getDashboardProjectHealth(
+  db: PrismaClient,
+): Promise<ProjectHealthRow[]> {
+  const projects = await db.project.findMany({
+    where: { status: "ACTIVE" },
+    select: {
+      id: true,
+      name: true,
+      shortCode: true,
+      budgetCents: true,
+      endDate: true,
+      demandRequirements: {
+        select: {
+          id: true,
+          headcount: true,
+          status: true,
+          assignments: {
+            where: { status: { not: "CANCELLED" } },
+            select: { id: true },
+          },
+        },
+      },
+    },
+  });
+
+  if (projects.length === 0) return [];
+
+  const projectIds = projects.map((p) => p.id);
+
+  // Fetch assignments for budget calculation
+  const assignments = await db.assignment.findMany({
+    where: {
+      projectId: { in: projectIds },
+      status: { not: "CANCELLED" },
+    },
+    select: {
+      projectId: true,
+      startDate: true,
+      endDate: true,
+      dailyCostCents: true,
+    },
+  });
+
+  const spentByProject = new Map<string, number>();
+  for (const a of assignments) {
+    const days = calculateInclusiveDays(a.startDate, a.endDate);
+    const cost = (a.dailyCostCents ?? 0) * days;
+    spentByProject.set(a.projectId, (spentByProject.get(a.projectId) ?? 0) + cost);
+  }
+
+  const now = new Date();
+
+  const rows: ProjectHealthRow[] = projects.map((p) => {
+    // Budget health: 100 - pctUsed (capped at 100)
+    const spentCents = spentByProject.get(p.id) ?? 0;
+    const pctUsed =
+      p.budgetCents > 0
+        ? Math.round((spentCents / p.budgetCents) * 100)
+        : 0;
+    const budgetHealth = Math.max(0, 100 - Math.min(pctUsed, 100));
+
+    // Staffing health: filledDemands / totalDemands * 100
+    let totalDemands = 0;
+    let filledDemands = 0;
+    for (const dr of p.demandRequirements) {
+      totalDemands += dr.headcount;
+      filledDemands += Math.min(dr.assignments.length, dr.headcount);
+    }
+    const staffingHealth =
+      totalDemands > 0 ? Math.round((filledDemands / totalDemands) * 100) : 100;
+
+    // Timeline health: 100 if end date > today, else 0
+    const timelineHealth = p.endDate > now ? 100 : 0;
+
+    // Composite = average of 3 dimensions
+    const compositeScore = Math.round(
+      (budgetHealth + staffingHealth + timelineHealth) / 3,
+    );
+
+    return {
+      projectName: p.name,
+      shortCode: p.shortCode,
+      budgetHealth,
+      staffingHealth,
+      timelineHealth,
+      compositeScore,
+    };
+  });
+
+  rows.sort((a, b) => a.compositeScore - b.compositeScore);
+  return rows;
+}
diff --git a/packages/application/src/use-cases/dashboard/get-skill-gaps.ts b/packages/application/src/use-cases/dashboard/get-skill-gaps.ts
new file mode 100644
index 0000000..8cb331e
--- /dev/null
+++ b/packages/application/src/use-cases/dashboard/get-skill-gaps.ts
@@ -0,0 +1,89 @@
+import type { PrismaClient } from "@planarchy/db";
+
+export interface SkillGapRow {
+  skill: string;
+  demand: number;
+  supply: number;
+  gap: number;
+}
+
+interface SkillEntry {
+  name: string;
+  level?: number;
+}
+
+export async function getDashboardSkillGaps(
+  db: PrismaClient,
+): Promise<SkillGapRow[]> {
+  // Count open demand requirements grouped by required skill (from role name)
+  const openDemands = await db.demandRequirement.findMany({
+    where: {
+      status: { in: ["PROPOSED", "CONFIRMED"] },
+      project: { status: "ACTIVE" },
+    },
+    select: {
+      role: true,
+      roleId: true,
+      roleEntity: { select: { name: true } },
+      headcount: true,
+      metadata: true,
+    },
+  });
+
+  // Build demand map by skill/role name
+  const demandMap = new Map<string, number>();
+
+  for (const d of openDemands) {
+    // Try to extract required skills from metadata
+    const meta = d.metadata as Record<string, unknown> | null;
+    const requiredSkills = Array.isArray(meta?.requiredSkills)
+      ? (meta.requiredSkills as string[])
+      : [];
+
+    if (requiredSkills.length > 0) {
+      for (const skill of requiredSkills) {
+        const normalized = skill.trim();
+        if (normalized) {
+          demandMap.set(normalized, (demandMap.get(normalized) ?? 0) + d.headcount);
+        }
+      }
+    } else {
+      // Fall back to role name as the "skill"
+      const roleName = d.roleEntity?.name ?? d.role;
+      if (roleName) {
+        demandMap.set(roleName, (demandMap.get(roleName) ?? 0) + d.headcount);
+      }
+    }
+  }
+
+  if (demandMap.size === 0) return [];
+
+  // Count active resources with each skill at proficiency >= 3
+  const resources = await db.resource.findMany({
+    where: { isActive: true },
+    select: { skills: true },
+  });
+
+  const supplyMap = new Map<string, number>();
+  for (const r of resources) {
+    const skills = (r.skills ?? []) as unknown as SkillEntry[];
+    if (!Array.isArray(skills)) continue;
+    for (const skill of skills) {
+      if (!skill.name) continue;
+      if ((skill.level ?? 0) >= 3) {
+        supplyMap.set(skill.name, (supplyMap.get(skill.name) ?? 0) + 1);
+      }
+    }
+  }
+
+  // Build gap rows for demanded skills
+  const rows: SkillGapRow[] = [];
+  for (const [skill, demand] of demandMap) {
+    const supply = supplyMap.get(skill) ?? 0;
+    rows.push({ skill, demand, supply, gap: supply - demand });
+  }
+
+  // Sort by largest shortage first (most negative gap), take top 10
+  rows.sort((a, b) => a.gap - b.gap);
+  return rows.slice(0, 10);
+}
diff --git a/packages/application/src/use-cases/dashboard/index.ts b/packages/application/src/use-cases/dashboard/index.ts
index cfda7d9..640e530 100644
--- a/packages/application/src/use-cases/dashboard/index.ts
+++ b/packages/application/src/use-cases/dashboard/index.ts
@@ -21,3 +21,18 @@ export {
   getDashboardChargeabilityOverview,
   type GetDashboardChargeabilityOverviewInput,
 } from "./get-chargeability-overview.js";
+
+export {
+  getDashboardBudgetForecast,
+  type BudgetForecastRow,
+} from "./get-budget-forecast.js";
+
+export {
+  getDashboardSkillGaps,
+  type SkillGapRow,
+} from "./get-skill-gaps.js";
+
+export {
+  getDashboardProjectHealth,
+  type ProjectHealthRow,
+} from "./get-project-health.js";
diff --git a/packages/application/vitest.config.ts b/packages/application/vitest.config.ts
new file mode 100644
index 0000000..f0eb8c8
--- /dev/null
+++ b/packages/application/vitest.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "node",
+    coverage: {
+      provider: "v8",
+      thresholds: {
+        lines: 80,
+        functions: 75,
+        branches: 75,
+        statements: 80,
+      },
+    },
+  },
+});
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 3a33023..6ffa41e 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -177,6 +177,8 @@ model User {
   dashboardLayout    Json?     @db.JsonB
   columnPreferences  Json?     @db.JsonB
   favoriteProjectIds Json?     @db.JsonB  // string[] of project IDs
+  lastLoginAt        DateTime?
+  lastActiveAt       DateTime?
 
   accounts          Account[]
   sessions          Session[]
@@ -185,6 +187,10 @@ model User {
   vacationsApproved  Vacation[] @relation("vacation_approved")
   resource           Resource?
   notifications      Notification[]
+  tasksAssigned      Notification[]          @relation("taskAssignee")
+  notificationsSent  Notification[]          @relation("notificationSender")
+  broadcasts         NotificationBroadcast[] @relation("broadcastSender")
+  comments           Comment[]
 
   createdAt         DateTime  @default(now())
   updatedAt         DateTime  @updatedAt
@@ -807,6 +813,8 @@ model Project {
   status          ProjectStatus  @default(DRAFT)
   responsiblePerson String?
   color             String?           // Hex color for timeline display, e.g. "#3b82f6"
+  coverImageUrl     String?  @db.Text // Base64 data-URL for project cover art
+  coverFocusY       Int      @default(50) // Vertical focus point 0-100 (% from top)
 
   // staffingReqs: StaffingRequirement[]
   staffingReqs    Json           @db.JsonB @default("[]")
@@ -1284,6 +1292,29 @@ model VacationEntitlement {
   @@map("vacation_entitlements")
 }
 
+// ─── Notification Enums ──────────────────────────────────────────────────────
+
+enum NotificationCategory {
+  NOTIFICATION
+  REMINDER
+  TASK
+  APPROVAL
+}
+
+enum NotificationPriority {
+  LOW
+  NORMAL
+  HIGH
+  URGENT
+}
+
+enum TaskStatus {
+  OPEN
+  IN_PROGRESS
+  DONE
+  DISMISSED
+}
+
 // ─── Notification ─────────────────────────────────────────────────────────────
 
 model Notification {
@@ -1297,12 +1328,89 @@ model Notification {
   readAt     DateTime?
   createdAt  DateTime  @default(now())
 
-  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  // Extended fields
+  category   NotificationCategory @default(NOTIFICATION)
+  priority   NotificationPriority @default(NORMAL)
+  link       String?
+
+  // Task fields
+  taskStatus   TaskStatus?
+  taskAction   String?
+  assigneeId   String?
+  dueDate      DateTime?
+  completedAt  DateTime?
+  completedBy  String?
+
+  // Reminder fields
+  remindAt     DateTime?
+  recurrence   String?      // "daily" | "weekly" | "monthly" | null
+  nextRemindAt DateTime?
+
+  // Targeting
+  sourceId     String?
+  senderId     String?
+  channel      String  @default("in_app")
+
+  updatedAt    DateTime @updatedAt
+
+  // Relations
+  user     User  @relation(fields: [userId], references: [id], onDelete: Cascade)
+  assignee User? @relation("taskAssignee", fields: [assigneeId], references: [id])
+  sender   User? @relation("notificationSender", fields: [senderId], references: [id])
 
   @@index([userId, readAt])
+  @@index([userId, category, taskStatus])
+  @@index([nextRemindAt])
+  @@index([assigneeId, taskStatus])
+  @@index([category, nextRemindAt])
+  @@index([userId, dueDate])
   @@map("notifications")
 }
 
+// ─── Notification Broadcast ─────────────────────────────────────────────────
+
+model NotificationBroadcast {
+  id             String               @id @default(cuid())
+  senderId       String
+  title          String
+  body           String?
+  link           String?
+  category       NotificationCategory @default(NOTIFICATION)
+  priority       NotificationPriority @default(NORMAL)
+  channel        String               @default("in_app")
+
+  targetType     String   // "user" | "role" | "project" | "orgUnit" | "all"
+  targetValue    String?
+
+  scheduledAt    DateTime?
+  sentAt         DateTime?
+  recipientCount Int @default(0)
+
+  createdAt      DateTime @default(now())
+
+  sender User @relation("broadcastSender", fields: [senderId], references: [id])
+
+  @@index([senderId])
+  @@index([scheduledAt, sentAt])
+  @@map("notification_broadcasts")
+}
+
+// ─── System Role Configuration ────────────────────────────────────────────────
+
+model SystemRoleConfig {
+  role              SystemRole @id
+  label             String     // Display label, e.g. "Manager"
+  description       String?    // Optional description of the role
+  defaultPermissions Json      @db.JsonB  // PermissionKey[] — default permissions for this role
+  color             String?    // Badge color, e.g. "purple", "blue"
+  sortOrder         Int        @default(0)
+
+  createdAt         DateTime   @default(now())
+  updatedAt         DateTime   @updatedAt
+
+  @@map("system_role_configs")
+}
+
 // ─── System Settings ──────────────────────────────────────────────────────────
 
 model SystemSettings {
@@ -1332,6 +1440,12 @@ model SystemSettings {
   anonymizationAliases    Json?    @db.JsonB
   // Vacation defaults
   vacationDefaultDays     Int?     @default(28)  // default annual entitlement
+  // Timeline undo
+  timelineUndoMaxSteps    Int?     @default(50)  // max undo history depth
+  // DALL-E image generation (Azure requires separate deployment)
+  azureDalleDeployment    String?  // e.g. "dall-e-3" — Azure DALL-E deployment name
+  azureDalleEndpoint      String?  // Optional: separate endpoint for DALL-E (if different from chat)
+  azureDalleApiKey        String?  // Optional: separate API key for DALL-E
   updatedAt               DateTime @updatedAt
 
   @@map("system_settings")
@@ -1368,6 +1482,29 @@ model CalculationRule {
   @@map("calculation_rules")
 }
 
+// ─── Comment ─────────────────────────────────────────────────────────────────
+
+model Comment {
+  id            String    @id @default(cuid())
+  entityType    String    // "estimate", "estimate_version", "scope_item", "demand_line"
+  entityId      String
+  parentId      String?   // for replies
+  authorId      String
+  body          String    @db.Text
+  mentions      String[]  // user IDs mentioned
+  resolved      Boolean   @default(false)
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt
+
+  author        User      @relation(fields: [authorId], references: [id])
+  parent        Comment?  @relation("CommentReplies", fields: [parentId], references: [id])
+  replies       Comment[] @relation("CommentReplies")
+
+  @@index([entityType, entityId])
+  @@index([authorId])
+  @@map("comments")
+}
+
 // ─── Audit Log ────────────────────────────────────────────────────────────────
 
 model AuditLog {
@@ -1386,3 +1523,18 @@ model AuditLog {
   @@index([createdAt])
   @@map("audit_logs")
 }
+
+// ─── Webhook ──────────────────────────────────────────────────────────────────
+
+model Webhook {
+  id        String   @id @default(cuid())
+  name      String
+  url       String
+  secret    String?  // HMAC signing secret
+  events    String[] // ["allocation.created", "project.status_changed", etc.]
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("webhooks")
+}
diff --git a/packages/shared/src/constants/index.ts b/packages/shared/src/constants/index.ts
index c657870..d973d6c 100644
--- a/packages/shared/src/constants/index.ts
+++ b/packages/shared/src/constants/index.ts
@@ -53,6 +53,11 @@ export const SSE_EVENT_TYPES = {
   ROLE_UPDATED: "role.updated",
   ROLE_DELETED: "role.deleted",
   NOTIFICATION_CREATED: "notification:created",
+  TASK_ASSIGNED: "task.assigned",
+  TASK_COMPLETED: "task.completed",
+  TASK_STATUS_CHANGED: "task.status_changed",
+  REMINDER_DUE: "reminder.due",
+  BROADCAST_SENT: "broadcast.sent",
   PING: "ping",
 } as const;
 
diff --git a/packages/shared/src/schemas/dashboard.schema.ts b/packages/shared/src/schemas/dashboard.schema.ts
index acc4beb..ef8ffc4 100644
--- a/packages/shared/src/schemas/dashboard.schema.ts
+++ b/packages/shared/src/schemas/dashboard.schema.ts
@@ -77,6 +77,9 @@ export const dashboardWidgetConfigSchemas = {
   "top-value-resources": topValueWidgetConfigSchema,
   "chargeability-overview": chargeabilityWidgetConfigSchema,
   "my-projects": myProjectsWidgetConfigSchema,
+  "budget-forecast": z.object({}),
+  "skill-gap": z.object({}),
+  "project-health": z.object({}),
 } as const;
 
 type DashboardWidgetConfigSchemaMap = typeof dashboardWidgetConfigSchemas;
diff --git a/packages/shared/src/schemas/project.schema.ts b/packages/shared/src/schemas/project.schema.ts
index a0ac569..d0a9b26 100644
--- a/packages/shared/src/schemas/project.schema.ts
+++ b/packages/shared/src/schemas/project.schema.ts
@@ -32,6 +32,7 @@ export const CreateProjectBaseSchema = z.object({
   color: z.string().regex(/^#[0-9a-fA-F]{6}$/, "Must be a hex color like #3b82f6").optional(),
   utilizationCategoryId: z.string().optional(),
   clientId: z.string().optional(),
+  coverImageUrl: z.string().optional(),
 });
 
 // Full schema with date-range validation
diff --git a/packages/shared/src/types/dashboard.ts b/packages/shared/src/types/dashboard.ts
index 90d954f..71da67f 100644
--- a/packages/shared/src/types/dashboard.ts
+++ b/packages/shared/src/types/dashboard.ts
@@ -42,6 +42,12 @@ export interface MyProjectsWidgetConfig {
   showResponsible?: boolean;
 }
 
+export interface BudgetForecastWidgetConfig {}
+
+export interface SkillGapWidgetConfig {}
+
+export interface ProjectHealthWidgetConfig {}
+
 export interface DashboardWidgetConfigMap {
   "stat-cards": StatCardsWidgetConfig;
   "resource-table": ResourceTableWidgetConfig;
@@ -51,6 +57,9 @@ export interface DashboardWidgetConfigMap {
   "top-value-resources": TopValueResourcesWidgetConfig;
   "chargeability-overview": ChargeabilityOverviewWidgetConfig;
   "my-projects": MyProjectsWidgetConfig;
+  "budget-forecast": BudgetForecastWidgetConfig;
+  "skill-gap": SkillGapWidgetConfig;
+  "project-health": ProjectHealthWidgetConfig;
 }
 
 export const DASHBOARD_WIDGET_TYPES = [
@@ -62,6 +71,9 @@ export const DASHBOARD_WIDGET_TYPES = [
   "top-value-resources",
   "chargeability-overview",
   "my-projects",
+  "budget-forecast",
+  "skill-gap",
+  "project-health",
 ] as const;
 
 export type DashboardWidgetType = (typeof DASHBOARD_WIDGET_TYPES)[number];
@@ -182,4 +194,31 @@ export const DASHBOARD_WIDGET_CATALOG = [
       showResponsible: true,
     },
   },
+  {
+    type: "budget-forecast",
+    label: "Budget Forecast",
+    description: "Budget burn rate and projected exhaustion per active project",
+    icon: "💰",
+    defaultSize: { w: 6, h: 5 },
+    minSize: { w: 4, h: 4 },
+    defaultConfig: {},
+  },
+  {
+    type: "skill-gap",
+    label: "Skill Gap Analysis",
+    description: "Top skill shortages: open demand vs available supply",
+    icon: "🎯",
+    defaultSize: { w: 6, h: 5 },
+    minSize: { w: 4, h: 4 },
+    defaultConfig: {},
+  },
+  {
+    type: "project-health",
+    label: "Project Health",
+    description: "Composite health score per project: budget, staffing, timeline",
+    icon: "🏥",
+    defaultSize: { w: 6, h: 5 },
+    minSize: { w: 4, h: 4 },
+    defaultConfig: {},
+  },
 ] as const satisfies readonly DashboardWidgetCatalogEntry[];
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index bbf159b..769270d 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -7,7 +7,7 @@ export * from "./engine.js";
 export * from "./staffing.js";
 export * from "./vacation.js";
 export * from "./role.js";
-export type { Notification } from "./notification.js";
+export * from "./notification.js";
 export * from "./permissions.js";
 export * from "./columns.js";
 export * from "./dashboard.js";
diff --git a/packages/shared/src/types/notification.ts b/packages/shared/src/types/notification.ts
index 084b964..8246929 100644
--- a/packages/shared/src/types/notification.ts
+++ b/packages/shared/src/types/notification.ts
@@ -1,3 +1,37 @@
+// ─── Notification Category / Priority / TaskStatus ──────────────────────────
+// Mirror Prisma enums for use in frontend/shared code
+
+export type NotificationCategory =
+  | "NOTIFICATION"
+  | "REMINDER"
+  | "TASK"
+  | "APPROVAL";
+
+export type NotificationPriority = "LOW" | "NORMAL" | "HIGH" | "URGENT";
+
+export type TaskStatus = "OPEN" | "IN_PROGRESS" | "DONE" | "DISMISSED";
+
+// ─── Task Action Helpers ────────────────────────────────────────────────────
+
+export interface TaskActionDef {
+  action: string; // e.g. "approve_vacation"
+  entityId: string; // e.g. vacation ID
+}
+
+/** Parse a taskAction string like "approve_vacation:clxyz123" */
+export function parseTaskAction(taskAction: string): TaskActionDef | null {
+  const idx = taskAction.indexOf(":");
+  if (idx < 0) return null;
+  return { action: taskAction.slice(0, idx), entityId: taskAction.slice(idx + 1) };
+}
+
+/** Build a taskAction string */
+export function buildTaskAction(action: string, entityId: string): string {
+  return `${action}:${entityId}`;
+}
+
+// ─── Notification Interface ─────────────────────────────────────────────────
+
 export interface Notification {
   id: string;
   userId: string;
@@ -8,4 +42,50 @@ export interface Notification {
   entityType?: string | null;
   readAt?: Date | null;
   createdAt: Date;
+  updatedAt?: Date;
+
+  // Extended fields
+  category?: NotificationCategory;
+  priority?: NotificationPriority;
+  link?: string | null;
+
+  // Task fields
+  taskStatus?: TaskStatus | null;
+  taskAction?: string | null;
+  assigneeId?: string | null;
+  dueDate?: Date | null;
+  completedAt?: Date | null;
+  completedBy?: string | null;
+
+  // Reminder fields
+  remindAt?: Date | null;
+  recurrence?: string | null;
+  nextRemindAt?: Date | null;
+
+  // Targeting
+  sourceId?: string | null;
+  senderId?: string | null;
+  channel?: string;
+}
+
+// ─── Broadcast Interface ────────────────────────────────────────────────────
+
+export interface NotificationBroadcast {
+  id: string;
+  senderId: string;
+  title: string;
+  body?: string | null;
+  link?: string | null;
+  category?: NotificationCategory;
+  priority?: NotificationPriority;
+  channel?: string;
+
+  targetType: string; // "user" | "role" | "project" | "orgUnit" | "all"
+  targetValue?: string | null;
+
+  scheduledAt?: Date | null;
+  sentAt?: Date | null;
+  recipientCount?: number;
+
+  createdAt: Date;
 }
diff --git a/packages/shared/src/types/permissions.ts b/packages/shared/src/types/permissions.ts
index 2023375..ba4c587 100644
--- a/packages/shared/src/types/permissions.ts
+++ b/packages/shared/src/types/permissions.ts
@@ -49,9 +49,12 @@ export const ROLE_DEFAULT_PERMISSIONS: Record<SystemRole, PermissionKey[]> = {
 
 export function resolvePermissions(
   systemRole: SystemRole,
-  overrides?: PermissionOverrides | null
+  overrides?: PermissionOverrides | null,
+  /** Optional DB-based defaults per role. If provided, takes precedence over ROLE_DEFAULT_PERMISSIONS. */
+  roleDefaults?: Record<string, PermissionKey[]>,
 ): Set<PermissionKey> {
-  const base = new Set<PermissionKey>(ROLE_DEFAULT_PERMISSIONS[systemRole] ?? []);
+  const defaults = roleDefaults?.[systemRole] ?? ROLE_DEFAULT_PERMISSIONS[systemRole] ?? [];
+  const base = new Set<PermissionKey>(defaults);
   if (overrides?.granted) {
     for (const p of overrides.granted) base.add(p);
   }
diff --git a/packages/shared/src/types/project.ts b/packages/shared/src/types/project.ts
index 837ead7..600bac7 100644
--- a/packages/shared/src/types/project.ts
+++ b/packages/shared/src/types/project.ts
@@ -30,6 +30,7 @@ export interface Project {
   blueprintId?: string | null;
   status: ProjectStatus;
   responsiblePerson?: string | null;
+  coverImageUrl?: string | null;
   createdAt: Date;
   updatedAt: Date;
 }
diff --git a/packages/shared/vitest.config.ts b/packages/shared/vitest.config.ts
index 3f824fb..34ab343 100644
--- a/packages/shared/vitest.config.ts
+++ b/packages/shared/vitest.config.ts
@@ -4,5 +4,14 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "node",
+    coverage: {
+      provider: "v8",
+      thresholds: {
+        lines: 70,
+        functions: 70,
+        branches: 65,
+        statements: 70,
+      },
+    },
   },
 });
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index e5d9419..8ad7305 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -30,8 +30,9 @@ export function Button({
   return (
     <button
       className={clsx(
-        "inline-flex items-center justify-center font-medium rounded-lg transition-colors",
+        "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-75",
         "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+        "active:scale-[0.97]",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         variantClasses[variant],
         sizeClasses[size],
diff --git a/plan.md b/plan.md
index 2794814..15aa887 100644
--- a/plan.md
+++ b/plan.md
@@ -1,123 +1,265 @@
-# Plan: Budget per Role / Demand
+# Planarchy — Product Owner Strategic Plan
 
-## Anforderungsanalyse
-
-Jede Staffing-Demand (Rolle) in einem Projekt soll ein eigenes Budget bekommen. Aktuell gibt es nur ein einziges `budgetCents` auf Projektebene. Ziel:
-
-1. **DemandRequirement** bekommt ein `budgetCents` Feld (wie viel Budget ist dieser Rolle zugewiesen)
-2. **StaffingRequirement** (JSONB auf Project) bekommt ein optionales `budgetCents` Feld fuer den Wizard
-3. **Project Wizard Step 3** zeigt Budget-Input pro Rolle + verbleibendes unverteiltes Projekt-Budget
-4. **Project Detail Page** zeigt pro Demand: zugewiesenes Budget vs. gebuchtes Budget (aus Assignments berechnet)
-5. **Fill Demand Modal** zeigt verbleibendes Rollen-Budget beim Zuweisen von Ressourcen
-
-### Architektur-Entscheidung
-
-`budgetCents` als **explizite Spalte** auf `DemandRequirement` (nicht in `metadata` JSONB), weil:
-- Typsicher, indizierbar, aggregierbar via SQL
-- Konsistent mit dem Muster auf `Project.budgetCents`
-- Default `0` = kein Budget zugewiesen (abwaertskompatibel)
+> Consolidated analysis from 4 expert agents: Roadmap, API Surface, Frontend UX, and Test Infrastructure.
+> Date: 2026-03-19
 
 ---
 
-## Betroffene Pakete & Dateien
+## Executive Summary
 
-| Paket | Dateien | Art der Aenderung |
-|-------|---------|-----------------|
-| `packages/db` | `prisma/schema.prisma` | **edit** — `budgetCents` auf DemandRequirement |
-| `packages/shared` | `src/types/project.ts` | **edit** — `budgetCents?` auf StaffingRequirement |
-| `packages/shared` | `src/types/allocation.ts` | **edit** — `budgetCents` auf DemandRequirementRecord |
-| `packages/shared` | `src/schemas/allocation.schema.ts` | **edit** — `budgetCents` in CreateDemandRequirementSchema |
-| `packages/api` | `src/router/allocation.ts` | **edit** — budgetCents durchreichen in create/update |
-| `packages/api` | `src/router/project.ts` | **edit** — bei Demand-Erstellung aus Wizard budgetCents uebernehmen |
-| `apps/web` | `src/components/projects/ProjectWizard.tsx` | **edit** — Step 3: Budget-Input pro Rolle + Restbudget-Anzeige |
-| `apps/web` | `src/components/projects/ProjectDemandsTable.tsx` | **edit** — Spalten: Allocated Budget, Booked Budget |
-| `apps/web` | `src/components/allocations/FillOpenDemandModal.tsx` | **edit** — Rollen-Budget-Anzeige |
+Planarchy has reached **Phase 9** with a mature core: timeline planning, allocation management, estimating, vacation pro, skill matrix, RBAC, and chargeability reporting. The product covers 34 routes, 47 DB models, ~200 tRPC procedures, and 109+ domain components.
+
+**However, the product has critical gaps preventing production readiness and growth:**
+
+| Dimension | Score | Verdict |
+|-----------|-------|---------|
+| Feature completeness | 85% | Strong core, thin edges (staffing, reporting) |
+| Code quality | 90% | Zero TODOs, clean architecture, typed end-to-end |
+| Test coverage | 55% | Engine excellent, API routers ~5%, no integration tests |
+| CI/CD & DevOps | 10% | No pipeline, no prod Docker, no monitoring |
+| UX polish | 75% | Deep timeline/estimates, but gaps in staffing workflow |
+| Growth readiness | 40% | No scenario planning, no integrations, no mobile |
 
 ---
 
-## Task-Liste
+## Part 1: Bottlenecks
 
-### Task 1: Prisma Schema — `budgetCents` auf DemandRequirement
+### 1.1 Production Readiness Blockers (Critical)
 
-Datei: `packages/db/prisma/schema.prisma`
+| # | Bottleneck | Impact | Severity |
+|---|-----------|--------|----------|
+| B1 | **No CI/CD pipeline** — tests, lint, tsc not automated on PR | Regressions ship undetected | CRITICAL |
+| B2 | **No production Docker image** — only dev Dockerfile exists | Cannot deploy containerized | CRITICAL |
+| B3 | **No monitoring/logging** — no Sentry, no Pino, no APM | Blind in production, cannot debug | CRITICAL |
+| B4 | **No health check endpoints** — `/health`, `/ready` missing | Cannot detect/recover from failures | HIGH |
+| B5 | **API router test coverage ~5%** — 28 routers, almost no unit tests | Mutations untested at API boundary | HIGH |
 
-- [ ] `budgetCents Int @default(0)` auf DemandRequirement hinzufuegen
-- [ ] `pnpm db:push` ausfuehren (generiert Prisma Client)
-- [ ] Dev-Server neustarten (`.next/` Cache loeschen)
+### 1.2 UX Bottlenecks
 
-### Task 2: Shared Types aktualisieren
+| # | Bottleneck | Impact | Severity |
+|---|-----------|--------|----------|
+| B6 | **Staffing -> Allocation gap** — match results don't link to allocation creation | Users must manually recreate allocations after finding matches | HIGH |
+| B7 | **Reporting is thin** — only 2 report types (chargeability, PDF allocations) | Finance/PMs can't self-serve custom reports | MEDIUM |
+| B8 | **No bulk operations in list views** — no multi-select outside timeline | Slow to manage 10+ resources/projects at once | MEDIUM |
+| B9 | **Dashboard metrics computed live** — no caching/pre-computation | Slow dashboard load with growing data | MEDIUM |
+| B10 | **Timeline 3.3K LOC ecosystem** — ResourcePanel 1035, ProjectPanel 1315 LOC | Hard to maintain, risky to modify | LOW |
 
-Dateien:
-- `packages/shared/src/types/project.ts` — `budgetCents?: number` auf `StaffingRequirement`
-- `packages/shared/src/types/allocation.ts` — `budgetCents: number` auf `DemandRequirementRecord`
-- `packages/shared/src/schemas/allocation.schema.ts` — `budgetCents: z.number().int().min(0).default(0)` in `CreateDemandRequirementBaseSchema`
+### 1.3 Architecture Bottlenecks
 
-### Task 3: API — budgetCents durchreichen
-
-Datei: `packages/api/src/router/allocation.ts`
-
-- [ ] `createDemandRequirement` — `budgetCents` aus Input an Prisma create weitergeben
-- [ ] `updateDemandRequirement` — `budgetCents` updatebar machen
-- [ ] `checkResourceAvailability` — optional: gebuchte Kosten vs. Rollen-Budget zurueckgeben
-
-Datei: `packages/api/src/router/project.ts`
-
-- [ ] Bei Projekt-Erstellung mit StaffingReqs: wenn `staffingReq.budgetCents` vorhanden, an DemandRequirement weitergeben
-
-### Task 4: Project Wizard Step 3 — Budget-Input pro Rolle
-
-Datei: `apps/web/src/components/projects/ProjectWizard.tsx`
-
-- [ ] Pro StaffingRequirement-Karte: neues Feld "Role Budget (EUR)" (Input, konvertiert zu Cents)
-- [ ] Oben im Step: Anzeige "Project Budget: X EUR | Allocated: Y EUR | Remaining: Z EUR"
-- [ ] Farbkodierung: gruen wenn alles verteilt, amber wenn Rest, rot wenn ueberallokiert
-- [ ] Budget-Wert wird in `state.staffingReqs[i].budgetCents` gespeichert
-
-### Task 5: Project Detail Page — Budget-Spalten pro Demand
-
-Datei: `apps/web/src/components/projects/ProjectDemandsTable.tsx`
-
-- [ ] Neue Spalte "Allocated Budget" — zeigt `demand.budgetCents` formatiert als EUR
-- [ ] Neue Spalte "Booked Budget" — berechnet: Summe der `dailyCostCents * Arbeitstage` aller Assignments dieses Demands
-  - Hinweis: Die Demand-Daten vom Server enthalten `assignments[]` — daraus berechnen
-- [ ] Neue Spalte "Remaining" — Allocated minus Booked
-- [ ] Farbkodierung: gruen wenn unter Budget, rot wenn ueber Budget
-
-### Task 6: Fill Demand Modal — Rollen-Budget anzeigen
-
-Datei: `apps/web/src/components/allocations/FillOpenDemandModal.tsx`
-
-- [ ] Im Demand-Summary oben: "Role Budget: X EUR | Booked: Y EUR | Remaining: Z EUR"
-- [ ] Beim Hinzufuegen einer Ressource zum Plan: geschaetzte Kosten anzeigen (LCR * verfuegbare Stunden)
-- [ ] Warnung wenn geplante Kosten das Rollen-Budget ueberschreiten
+| # | Bottleneck | Impact | Severity |
+|---|-----------|--------|----------|
+| B11 | **Prisma client cache invalidation** — dev server restart required after schema changes | Developer friction, CI complexity | MEDIUM |
+| B12 | **No webhook/event outbound** — SSE event bus exists but no external subscriptions | Cannot notify external systems (Slack, Jira) | MEDIUM |
+| B13 | **No soft-delete strategy** — mixed approach (isActive, status, hard delete) | Data loss risk, no audit trail on deletions | LOW |
+| B14 | **Rate card lookup manual in estimates** — no auto-lookup by resource chapter/level | Estimate creation slower than needed | LOW |
 
 ---
 
-## Abhaengigkeiten
+## Part 2: Growth Potential
 
-- **Task 1 → Task 2 → Task 3** (sequentiell: Schema → Types → API)
-- **Task 4** benoetigt Task 2 (StaffingRequirement-Typ mit budgetCents)
-- **Task 5** benoetigt Task 1+3 (budgetCents auf DemandRequirement + API liefert es)
-- **Task 6** benoetigt Task 5 (gleiche Berechnung)
-- Task 4 und Task 5 koennen **parallel** nach Task 3
+### 2.1 High-Value Feature Opportunities
+
+#### Tier 1 — Quick Wins (1-3 days each)
+
+| # | Feature | Value | Effort |
+|---|---------|-------|--------|
+| G1 | **Staffing "Assign" button** — pre-populate allocation modal from match result | Closes biggest UX gap, saves 5+ clicks per staffing decision | 1-2 days |
+| G2 | **Dashboard caching** — pre-compute metrics, invalidate on SSE events | 3-5x dashboard load speed improvement | 1-2 days |
+| G3 | **Bulk list operations** — multi-select + context menu on resources/projects | Enables batch edit, export, status change | 2-3 days |
+| G4 | **Health check endpoints** — `/api/health` (liveness), `/api/ready` (DB + Redis) | Production deployment prerequisite | 0.5 day |
+
+#### Tier 2 — Strategic Features (1-2 weeks each)
+
+| # | Feature | Value | Effort |
+|---|---------|-------|--------|
+| G5 | **Scenario/What-If Planning** — alternate staffing mixes, cost simulations | Differentiation for PMs and finance; leverages existing engine | 1-2 weeks |
+| G6 | **Skill Marketplace** — searchable skill inventory, gap heat map, hiring priorities | High leverage from existing skill matrix; enables org-wide planning | 1 week |
+| G7 | **Custom Report Builder** — drag columns, pivot, grouping, scheduled exports | Unlocks self-service analytics for finance and executives | 1-2 weeks |
+| G8 | **Collaboration Layer** — inline comments on estimates, @mention, approval feedback | Enables cross-functional workflows (finance, PM, staffing) | 1-2 weeks |
+
+#### Tier 3 — Market Differentiators (2-4 weeks each)
+
+| # | Feature | Value | Effort |
+|---|---------|-------|--------|
+| G9 | **AI-Powered Insights** — auto-suggest staffing, anomaly detection, narrative reports | Leverages existing Azure OpenAI integration; executive decision support | 2-3 weeks |
+| G10 | **External Integrations** — Jira/Linear sync, Slack notifications, Google Calendar | Stickiness; connects Planarchy into existing workflows | 2-4 weeks |
+| G11 | **Mobile Companion** — PWA with quick-view (status, gaps, approvals, push notifications) | Engagement for field PMs and remote staff | 3-4 weeks |
+| G12 | **Dispo V2 Clean-Slate Import** — design doc + tickets exist, ready for implementation | Unblocks migration from legacy system; critical for customer onboarding | 1-2 weeks |
+
+### 2.2 Missing Dashboard Widgets
+
+| Widget | Purpose | Effort |
+|--------|---------|--------|
+| Budget spend forecast | Forward-looking actuals vs budget trend line | 2 days |
+| Team utilization heatmap | Resource x week grid with color intensity | 2 days |
+| Skill gap analysis | Required vs available skills across open demands | 3 days |
+| Project health scorecard | On-time, on-budget, quality composite score | 2 days |
+| Hiring pipeline | Forecast unfilled demand 3-6 months out | 3 days |
 
 ---
 
-## Akzeptanzkriterien
+## Part 3: Automation Potential
 
-- [ ] `pnpm db:push` laeuft ohne Fehler
-- [ ] `pnpm test:unit` — alle Tests gruen
-- [ ] `pnpm --filter @planarchy/web exec tsc --noEmit` — keine neuen Errors
-- [ ] Project Wizard Step 3: Budget-Input pro Rolle sichtbar, Restbudget wird live berechnet
-- [ ] Project Detail `/projects/[id]`: Demands-Tabelle zeigt Allocated / Booked / Remaining Budget
-- [ ] Fill Demand Modal: Rollen-Budget und geschaetzte Kosten sichtbar
-- [ ] Bestehende Projekte/Demands funktionieren weiterhin (budgetCents default 0)
+### 3.1 Development Workflow Automation
+
+| # | Automation | Current State | Target | Effort |
+|---|-----------|--------------|--------|--------|
+| A1 | **CI/CD Pipeline** | None | GitHub Actions: test + lint + tsc on PR, build + deploy on merge | 1-2 days |
+| A2 | **Dependency scanning** | None | Dependabot + npm audit in CI | 0.5 day |
+| A3 | **E2E test suite expansion** | 4 specs (auth, timeline, projects, resources) | 20+ specs covering key user flows | 1 week |
+| A4 | **API integration tests** | ~5% router coverage | 80% coverage with mock DB layer | 1-2 weeks |
+| A5 | **Coverage gates** | Engine 95%, staffing 90%, others none | All packages minimum 80% | 2 days config |
+
+### 3.2 Business Process Automation
+
+| # | Automation | Current Manual Process | Automated Process | Effort |
+|---|-----------|----------------------|-------------------|--------|
+| A6 | **Auto-staffing suggestions** | PM manually searches for resources per demand | System proposes top-3 matches when demand is created | 3 days |
+| A7 | **Vacation conflict alerts** | Manager manually checks team calendar before approving | Auto-detect overlap > threshold, flag in approval flow | 2 days |
+| A8 | **Budget overrun notifications** | Finance checks dashboards manually | SSE-triggered notification when project hits 80%/100% budget | 1 day |
+| A9 | **Estimate approval reminders** | Verbal follow-up | Scheduled notification after N days in SUBMITTED status | 1 day |
+| A10 | **Chargeability alerts** | Monthly manual review | Weekly auto-email when resource chargeability drops below target | 2 days |
+| A11 | **Rate card auto-apply** | Manual rate lookup when creating estimate demand lines | Auto-fill LCR/UCR from rate card by resource chapter + level + client | 2 days |
+| A12 | **Public holiday auto-import** | Admin manually batch-creates per year | Auto-generate on year rollover based on country/state config | 1 day |
+
+### 3.3 Monitoring & Observability Automation
+
+| # | Automation | Target | Effort |
+|---|-----------|--------|--------|
+| A13 | **Structured logging** (Pino) | All API requests logged with correlation ID | 2 days |
+| A14 | **Error tracking** (Sentry) | Unhandled exceptions captured with context | 1 day |
+| A15 | **Performance monitoring** | Slow query detection, API response time tracking | 2 days |
+| A16 | **Uptime monitoring** | External health check probe, alerting | 0.5 day |
 
 ---
 
-## Risiken & offene Fragen
+## Part 4: Prioritized Roadmap
 
-1. **Abwaertskompatibilitaet:** `@default(0)` stellt sicher, dass bestehende Demands kein Budget haben (0 = nicht gesetzt). UI sollte "Not set" anzeigen wenn 0.
-2. **Budget-Berechnung Booked:** `dailyCostCents` ist pro Tag. Gebuchte Kosten = `dailyCostCents * Anzahl Arbeitstage im Zeitraum`. Diese Berechnung existiert bereits im Engine-Paket (`computeBudgetStatus`).
-3. **StaffingReqs JSONB:** Die `staffingReqs` auf Project sind JSONB. Aeltere Projekte haben kein `budgetCents` darin — der Wizard muss `budgetCents ?? 0` defaulten.
-4. **Budget-Ueberschreitung:** Soll weiterhin erlaubt sein (Warnung, kein Block) — konsistent mit dem bestehenden Ansatz bei Projekt-Budget.
+### Sprint 0: Production Foundation (Week 1)
+
+**Goal:** Unblock production deployment.
+
+- [ ] **A1** — GitHub Actions CI pipeline (test + lint + tsc + build)
+- [ ] **G4** — Health check endpoints (`/api/health`, `/api/ready`)
+- [ ] **A14** — Sentry error tracking integration
+- [ ] **A13** — Pino structured logging in API layer
+- [ ] Production Dockerfile (multi-stage, distroless base)
+- [ ] docker-compose.prod.yml with env-based config
+- [ ] Database backup strategy (pg_dump cron + S3)
+
+**Acceptance:** `main` branch has green CI, production image builds, errors are captured.
+
+### Sprint 1: Quick Wins (Week 2)
+
+**Goal:** Close the biggest UX gaps and improve daily workflows.
+
+- [ ] **G1** — Staffing "Assign" button (match -> allocation in 1 click)
+- [ ] **G2** — Dashboard metric caching (Redis-backed, SSE-invalidated)
+- [ ] **G3** — Bulk operations on resource/project lists
+- [ ] **A8** — Budget overrun notifications (80% + 100% thresholds)
+- [ ] **A9** — Estimate approval reminders (auto-notify after 3 days)
+
+**Acceptance:** Staffing-to-allocation is 1 click, dashboard loads <500ms, bulk select works.
+
+### Sprint 2: Test Coverage & Stability (Week 3)
+
+**Goal:** Harden the codebase for confident iteration.
+
+- [ ] **A4** — API router integration tests (target 15 most-used routers)
+- [ ] **A5** — Coverage gates: api + application packages at 80%
+- [ ] **A3** — E2E expansion: 10 new specs (estimate lifecycle, vacation flow, bulk ops, filters)
+- [ ] **A2** — Dependabot + npm audit in CI
+
+**Acceptance:** `pnpm test:unit` covers all routers, E2E suite runs in CI, zero high-severity vulnerabilities.
+
+### Sprint 3: Automation & Intelligence (Week 4-5)
+
+**Goal:** Automate repetitive decisions, surface insights proactively.
+
+- [ ] **A6** — Auto-staffing suggestions on demand creation
+- [ ] **A7** — Vacation conflict detection in approval flow
+- [ ] **A10** — Weekly chargeability alerts
+- [ ] **A11** — Rate card auto-apply in estimate demand lines
+- [ ] **A12** — Public holiday auto-import on year rollover
+- [ ] **G6** — Skill marketplace MVP (searchable inventory + gap heat map)
+
+**Acceptance:** Demands auto-suggest resources, vacation conflicts auto-flagged, rate cards auto-filled.
+
+### Sprint 4: Strategic Features (Week 6-8)
+
+**Goal:** Build differentiation features that create competitive moat.
+
+- [ ] **G5** — Scenario/what-if planning (staffing mix simulator)
+- [ ] **G7** — Custom report builder MVP (column picker, filters, export)
+- [ ] **G8** — Collaboration layer (comments on estimates, @mention)
+- [ ] **G12** — Dispo V2 clean-slate import (leverage existing design docs + tickets)
+- [ ] Dashboard new widgets: budget forecast, skill gap, project health scorecard
+
+**Acceptance:** PMs can simulate staffing scenarios, finance can build custom reports, Dispo import onboards first customer.
+
+### Sprint 5: Market Expansion (Week 9-12)
+
+**Goal:** Expand the platform beyond core planning.
+
+- [ ] **G9** — AI insights: auto-staffing, anomaly detection, narrative summaries
+- [ ] **G10** — Jira/Linear integration + Slack notifications
+- [ ] **G11** — Mobile PWA companion
+- [ ] **A15** — Performance monitoring + load testing baseline
+- [ ] Advanced: multi-tenant architecture planning
+
+**Acceptance:** AI suggestions active, Jira sync live, mobile app installable.
+
+---
+
+## Part 5: Risk Register
+
+| # | Risk | Probability | Impact | Mitigation |
+|---|------|-------------|--------|------------|
+| R1 | Production deployment without CI catches regressions | HIGH | CRITICAL | Sprint 0 is mandatory before any feature work |
+| R2 | Timeline 3.3K LOC becomes unmaintainable | MEDIUM | HIGH | Decompose into sub-hook modules when next touching timeline |
+| R3 | Dashboard performance degrades with data growth | MEDIUM | MEDIUM | G2 (caching) in Sprint 1; monitor query times |
+| R4 | Prisma schema changes break dev workflow | HIGH | LOW | Automate restart in dev scripts (already documented) |
+| R5 | Skill matrix AI costs grow with usage | LOW | MEDIUM | Add token budget tracking in SystemSettings |
+| R6 | No data backup strategy | MEDIUM | CRITICAL | Add pg_dump cron + S3 upload in Sprint 0 |
+| R7 | Single-point-of-failure (1 dev, 1 server) | HIGH | CRITICAL | Document architecture, automate deployment, enable team onboarding |
+
+---
+
+## Part 6: Key Metrics to Track
+
+### Product Metrics
+- **Time-to-staff**: Minutes from demand creation to resource assignment
+- **Estimate turnaround**: Days from estimate creation to approval
+- **Vacation approval latency**: Hours from request to decision
+- **Dashboard load time**: P95 response time for dashboard page
+- **Chargeability accuracy**: Forecast vs actual deviation %
+
+### Engineering Metrics
+- **Test coverage**: % by package (target: all >=80%)
+- **CI green rate**: % of PRs passing all gates
+- **Build time**: Minutes for full `next build`
+- **Error rate**: Sentry exceptions per hour
+- **API latency**: P95 tRPC procedure response time
+
+---
+
+## Appendix: Current State Snapshot
+
+| Dimension | Count |
+|-----------|-------|
+| Database models | 47 |
+| tRPC routers | 28 |
+| tRPC procedures | ~200 (120Q + 80M) |
+| Frontend routes | 34 |
+| Domain components | 109+ |
+| Shared UI components | 20+ |
+| Unit test files | 62 |
+| E2E test specs | 4 |
+| Engine test coverage | 95% (gated) |
+| Staffing test coverage | 90% (gated) |
+| API router test coverage | ~5% (not gated) |
+| CI/CD pipeline | None |
+| Production Docker | None |
+| Monitoring/APM | None |
+| Completed phases | 9 |
+| Known pain points | 24 (documented in LEARNINGS.md) |
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 019057a..41dfa83 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      framer-motion:
+        specifier: ^12.38.0
+        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     devDependencies:
       '@planarchy/eslint-config':
         specifier: workspace:*
@@ -50,6 +54,9 @@ importers:
       '@react-pdf/renderer':
         specifier: ^4.3.2
         version: 4.3.2(react@19.2.4)
+      '@sentry/nextjs':
+        specifier: ^10.45.0
+        version: 10.45.0(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(webpack@5.105.4)
       '@tanstack/react-query':
         specifier: ^5.62.16
         version: 5.90.21(react@19.2.4)
@@ -68,12 +75,15 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      framer-motion:
+        specifier: ^12.38.0
+        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next:
         specifier: ^15.1.7
-        version: 15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-auth:
         specifier: ^5.0.0-beta.25
-        version: 5.0.0-beta.30(next@15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+        version: 5.0.0-beta.30(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       react:
         specifier: ^19.0.0
         version: 19.2.4
@@ -174,6 +184,9 @@ importers:
       openai:
         specifier: ^6.27.0
         version: 6.27.0(zod@3.25.76)
+      pino:
+        specifier: ^10.3.1
+        version: 10.3.1
       zod:
         specifier: ^3.23.8
         version: 3.25.76
@@ -189,7 +202,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^2.1.8
-        version: 2.1.9(@types/node@22.19.13)
+        version: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
 
   packages/application:
     dependencies:
@@ -223,7 +236,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^2.1.8
-        version: 2.1.9(@types/node@22.19.13)
+        version: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
 
   packages/db:
     dependencies:
@@ -276,7 +289,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^2.1.8
-        version: 2.1.9(@types/node@22.19.13)
+        version: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
 
   packages/shared:
     dependencies:
@@ -292,7 +305,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^2.1.8
-        version: 2.1.9(@types/node@22.19.13)
+        version: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
 
   packages/staffing:
     dependencies:
@@ -308,7 +321,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^2.1.8
-        version: 2.1.9(@types/node@22.19.13)
+        version: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
 
   packages/ui:
     dependencies:
@@ -384,10 +397,77 @@ packages:
       nodemailer:
         optional: true
 
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.2':
+    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.2':
+    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.28.6':
     resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
   '@dimforge/rapier3d-compat@0.12.0':
     resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
 
@@ -738,6 +818,11 @@ packages:
   '@fast-csv/parse@4.3.6':
     resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==}
 
+  '@fastify/otel@0.17.1':
+    resolution: {integrity: sha512-K4wyxfUZx2ux5o+b6BtTqouYFVILohLZmSbA2tKUueJstNcBnoGPVhllCaOvbQ3ZrXdUxUC/fyrSWSCqHhdOPg==}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -897,10 +982,16 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -1060,9 +1151,216 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@opentelemetry/api-logs@0.207.0':
+    resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/api-logs@0.212.0':
+    resolution: {integrity: sha512-TEEVrLbNROUkYY51sBJGk7lO/OLjuepch8+hmpM6ffMJQ2z/KVCjdHuCFX6fJj8OkJP2zckPjrJzQtXU3IAsFg==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/api-logs@0.213.0':
+    resolution: {integrity: sha512-zRM5/Qj6G84Ej3F1yt33xBVY/3tnMxtL1fiDIxYbDWYaZ/eudVw3/PBiZ8G7JwUxXxjW8gU4g6LnOyfGKYHYgw==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/context-async-hooks@2.6.0':
+    resolution: {integrity: sha512-L8UyDwqpTcbkIK5cgwDRDYDoEhQoj8wp8BwsO19w3LB1Z41yEQm2VJyNfAi9DrLP/YTqXqWpKHyZfR9/tFYo1Q==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/core@2.6.0':
+    resolution: {integrity: sha512-HLM1v2cbZ4TgYN6KEOj+Bbj8rAKriOdkF9Ed3tG25FoprSiQl7kYc+RRT6fUZGOvx0oMi5U67GoFdT+XUn8zEg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/instrumentation-amqplib@0.60.0':
+    resolution: {integrity: sha512-q/B2IvoVXRm1M00MvhnzpMN6rKYOszPXVsALi6u0ss4AYHe+TidZEtLW9N1ZhrobI1dSriHnBqqtAOZVAv07sg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-connect@0.56.0':
+    resolution: {integrity: sha512-PKp+sSZ7AfzMvGgO3VCyo1inwNu+q7A1k9X88WK4PQ+S6Hp7eFk8pie+sWHDTaARovmqq5V2osav3lQej2B0nw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-dataloader@0.30.0':
+    resolution: {integrity: sha512-MXHP2Q38cd2OhzEBKAIXUi9uBlPEYzF6BNJbyjUXBQ6kLaf93kRC41vNMIz0Nl5mnuwK7fDvKT+/lpx7BXRwdg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-express@0.61.0':
+    resolution: {integrity: sha512-Xdmqo9RZuZlL29Flg8QdwrrX7eW1CZ7wFQPKHyXljNymgKhN1MCsYuqQ/7uxavhSKwAl7WxkTzKhnqpUApLMvQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-fs@0.32.0':
+    resolution: {integrity: sha512-koR6apx0g0wX6RRiPpjA4AFQUQUbXrK16kq4/SZjVp7u5cffJhNkY4TnITxcGA4acGSPYAfx3NHRIv4Khn1axQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-generic-pool@0.56.0':
+    resolution: {integrity: sha512-fg+Jffs6fqrf0uQS0hom7qBFKsbtpBiBl8+Vkc63Gx8xh6pVh+FhagmiO6oM0m3vyb683t1lP7yGYq22SiDnqg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-graphql@0.61.0':
+    resolution: {integrity: sha512-pUiVASv6nh2XrerTvlbVHh7vKFzscpgwiQ/xvnZuAIzQ5lRjWVdRPUuXbvZJ/Yq79QsE81TZdJ7z9YsXiss1ew==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-hapi@0.59.0':
+    resolution: {integrity: sha512-33wa4mEr+9+ztwdgLor1SeBu4Opz4IsmpcLETXAd3VmBrOjez8uQtrsOhPCa5Vhbm5gzDlMYTgFRLQzf8/YHFA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-http@0.213.0':
+    resolution: {integrity: sha512-B978Xsm5XEPGhm1P07grDoaOFLHapJPkOG9h016cJsyWWxmiLnPu2M/4Nrm7UCkHSiLnkXgC+zVGUAIahy8EEA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-ioredis@0.61.0':
+    resolution: {integrity: sha512-hsHDadUtAFbws1YSDc1XW0svGFKiUbqv2td1Cby+UAiwvojm1NyBo/taifH0t8CuFZ0x/2SDm0iuTwrM5pnVOg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-kafkajs@0.22.0':
+    resolution: {integrity: sha512-wJU4IBQMUikdJAcTChLFqK5lo+flo7pahqd8DSLv7uMxsdOdAHj6RzKYAm8pPfUS6ItKYutYyuicwKaFwQKsoA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-knex@0.57.0':
+    resolution: {integrity: sha512-vMCSh8kolEm5rRsc+FZeTZymWmIJwc40hjIKnXH4O0Dv/gAkJJIRXCsPX5cPbe0c0j/34+PsENd0HqKruwhVYw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-koa@0.61.0':
+    resolution: {integrity: sha512-lvrfWe9ShK/D2X4brmx8ZqqeWPfRl8xekU0FCn7C1dHm5k6+rTOOi36+4fnaHAP8lig9Ux6XQ1D4RNIpPCt1WQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+
+  '@opentelemetry/instrumentation-lru-memoizer@0.57.0':
+    resolution: {integrity: sha512-cEqpUocSKJfwDtLYTTJehRLWzkZ2eoePCxfVIgGkGkb83fMB71O+y4MvRHJPbeV2bdoWdOVrl8uO0+EynWhTEA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-mongodb@0.66.0':
+    resolution: {integrity: sha512-d7m9QnAY+4TCWI4q1QRkfrc6fo/92VwssaB1DzQfXNRvu51b78P+HJlWP7Qg6N6nkwdb9faMZNBCZJfftmszkw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-mongoose@0.59.0':
+    resolution: {integrity: sha512-6/jWU+c1NgznkVLDU/2y0bXV2nJo3o9FWZ9mZ9nN6T/JBNRoMnVXZl2FdBmgH+a5MwaWLs5kmRJTP5oUVGIkPw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-mysql2@0.59.0':
+    resolution: {integrity: sha512-n9/xrVCRBfG9egVbffnlU1uhr+HX0vF4GgtAB/Bvm48wpFgRidqD8msBMiym1kRYzmpWvJqTxNT47u1MkgBEdw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-mysql@0.59.0':
+    resolution: {integrity: sha512-r+V/Fh0sm7Ga8/zk/TI5H5FQRAjwr0RrpfPf8kNIehlsKf12XnvIaZi8ViZkpX0gyPEpLXqzqWD6QHlgObgzZw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-pg@0.65.0':
+    resolution: {integrity: sha512-W0zpHEIEuyZ8zvb3njaX9AAbHgPYOsSWVOoWmv1sjVRSF6ZpBqtlxBWbU+6hhq1TFWBeWJOXZ8nZS/PUFpLJYQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-redis@0.61.0':
+    resolution: {integrity: sha512-JnPexA034/0UJRsvH96B0erQoNOqKJZjE2ZRSw9hiTSC23LzE0nJE/u6D+xqOhgUhRnhhcPHq4MdYtmUdYTF+Q==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-tedious@0.32.0':
+    resolution: {integrity: sha512-BQS6gG8RJ1foEqfEZ+wxoqlwfCAzb1ZVG0ad8Gfe4x8T658HJCLGLd4E4NaoQd8EvPfLqOXgzGaE/2U4ytDSWA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation-undici@0.23.0':
+    resolution: {integrity: sha512-LL0VySzKVR2cJSFVZaTYpZl1XTpBGnfzoQPe2W7McS2267ldsaEIqtQY6VXs2KCXN0poFjze5110PIpxHDaDGg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.7.0
+
+  '@opentelemetry/instrumentation@0.207.0':
+    resolution: {integrity: sha512-y6eeli9+TLKnznrR8AZlQMSJT7wILpXH+6EYq5Vf/4Ao+huI7EedxQHwRgVUOMLFbe7VFDvHJrX9/f4lcwnJsA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation@0.212.0':
+    resolution: {integrity: sha512-IyXmpNnifNouMOe0I/gX7ENfv2ZCNdYTF0FpCsoBcpbIHzk81Ww9rQTYTnvghszCg7qGrIhNvWC8dhEifgX9Jg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/instrumentation@0.213.0':
+    resolution: {integrity: sha512-3i9NdkET/KvQomeh7UaR/F4r9P25Rx6ooALlWXPIjypcEOUxksCmVu0zA70NBJWlrMW1rPr/LRidFAflLI+s/w==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/redis-common@0.38.2':
+    resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+
+  '@opentelemetry/resources@2.6.0':
+    resolution: {integrity: sha512-D4y/+OGe3JSuYUCBxtH5T9DSAWNcvCb/nQWIga8HNtXTVPQn59j0nTBAgaAXxUVBDl40mG3Tc76b46wPlZaiJQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/sdk-trace-base@2.6.0':
+    resolution: {integrity: sha512-g/OZVkqlxllgFM7qMKqbPV9c1DUPhQ7d4n3pgZFcrnrNft9eJXZM2TNHTPYREJBrtNdRytYyvwjgL5geDKl3EQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/semantic-conventions@1.40.0':
+    resolution: {integrity: sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==}
+    engines: {node: '>=14'}
+
+  '@opentelemetry/sql-common@0.41.2':
+    resolution: {integrity: sha512-4mhWm3Z8z+i508zQJ7r6Xi7y4mmoJpdvH0fZPFRkWrdp5fq7hhZ2HhYokEOLkfqSMgPR4Z9EyB3DBkbKGOqZiQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+
   '@panva/hkdf@1.2.1':
     resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
 
+  '@pinojs/redact@0.4.0':
+    resolution: {integrity: sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==}
+
   '@playwright/test@1.58.2':
     resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
     engines: {node: '>=18'}
@@ -1092,6 +1390,11 @@ packages:
   '@prisma/get-platform@5.22.0':
     resolution: {integrity: sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==}
 
+  '@prisma/instrumentation@7.4.2':
+    resolution: {integrity: sha512-r9JfchJF1Ae6yAxcaLu/V1TGqBhAuSDe3mRNOssBfx1rMzfZ4fdNvrgUBwyb/TNTGXFxlH9AZix5P257x07nrg==}
+    peerDependencies:
+      '@opentelemetry/api': ^1.8
+
   '@react-pdf/fns@3.1.2':
     resolution: {integrity: sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==}
 
@@ -1146,6 +1449,24 @@ packages:
       react-redux:
         optional: true
 
+  '@rollup/plugin-commonjs@28.0.1':
+    resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.59.0':
     resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
     cpu: [arm]
@@ -1274,6 +1595,153 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sentry-internal/browser-utils@10.45.0':
+    resolution: {integrity: sha512-ZPZpeIarXKScvquGx2AfNKcYiVNDA4wegMmjyGVsTA2JPmP0TrJoO3UybJS6KGDeee8V3I3EfD/ruauMm7jOFQ==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/feedback@10.45.0':
+    resolution: {integrity: sha512-vCSurazFVq7RUeYiM5X326jA5gOVrWYD6lYX2fbjBOMcyCEhDnveNxMT62zKkZDyNT/jyD194nz/cjntBUkyWA==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/replay-canvas@10.45.0':
+    resolution: {integrity: sha512-nvq/AocdZTuD7y0KSiWi3gVaY0s5HOFy86mC/v1kDZmT/jsBAzN5LDkk/f1FvsWma1peqQmpUqxvhC+YIW294Q==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/replay@10.45.0':
+    resolution: {integrity: sha512-vjosRoGA1bzhVAEO1oce+CsRdd70quzBeo7WvYqpcUnoLe/Rv8qpOMqWX3j26z7XfFHMExWQNQeLxmtYOArvlw==}
+    engines: {node: '>=18'}
+
+  '@sentry/babel-plugin-component-annotate@5.1.1':
+    resolution: {integrity: sha512-x2wEpBHwsTyTF2rWsLKJlzrRF1TTIGOfX+ngdE+Yd5DBkoS58HwQv824QOviPGQRla4/ypISqAXzjdDPL/zalg==}
+    engines: {node: '>= 18'}
+
+  '@sentry/browser@10.45.0':
+    resolution: {integrity: sha512-e/a8UMiQhqqv706McSIcG6XK+AoQf9INthi2pD+giZfNRTzXTdqHzUT5OIO5hg8Am6eF63nDJc+vrYNPhzs51Q==}
+    engines: {node: '>=18'}
+
+  '@sentry/bundler-plugin-core@5.1.1':
+    resolution: {integrity: sha512-F+itpwR9DyQR7gEkrXd2tigREPTvtF5lC8qu6e4anxXYRTui1+dVR0fXNwjpyAZMhIesLfXRN7WY7ggdj7hi0Q==}
+    engines: {node: '>= 18'}
+
+  '@sentry/cli-darwin@2.58.5':
+    resolution: {integrity: sha512-lYrNzenZFJftfwSya7gwrHGxtE+Kob/e1sr9lmHMFOd4utDlmq0XFDllmdZAMf21fxcPRI1GL28ejZ3bId01fQ==}
+    engines: {node: '>=10'}
+    os: [darwin]
+
+  '@sentry/cli-linux-arm64@2.58.5':
+    resolution: {integrity: sha512-/4gywFeBqRB6tR/iGMRAJ3HRqY6Z7Yp4l8ZCbl0TDLAfHNxu7schEw4tSnm2/Hh9eNMiOVy4z58uzAWlZXAYBQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-arm@2.58.5':
+    resolution: {integrity: sha512-KtHweSIomYL4WVDrBrYSYJricKAAzxUgX86kc6OnlikbyOhoK6Fy8Vs6vwd52P6dvWPjgrMpUYjW2M5pYXQDUw==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-i686@2.58.5':
+    resolution: {integrity: sha512-G7261dkmyxqlMdyvyP06b+RTIVzp1gZNgglj5UksxSouSUqRd/46W/2pQeOMPhloDYo9yLtCN2YFb3Mw4aUsWw==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-x64@2.58.5':
+    resolution: {integrity: sha512-rP04494RSmt86xChkQ+ecBNRYSPbyXc4u0IA7R7N1pSLCyO74e5w5Al+LnAq35cMfVbZgz5Sm0iGLjyiUu4I1g==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-win32-arm64@2.58.5':
+    resolution: {integrity: sha512-AOJ2nCXlQL1KBaCzv38m3i2VmSHNurUpm7xVKd6yAHX+ZoVBI8VT0EgvwmtJR2TY2N2hNCC7UrgRmdUsQ152bA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@sentry/cli-win32-i686@2.58.5':
+    resolution: {integrity: sha512-EsuboLSOnlrN7MMPJ1eFvfMDm+BnzOaSWl8eYhNo8W/BIrmNgpRUdBwnWn9Q2UOjJj5ZopukmsiMYtU/D7ml9g==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [win32]
+
+  '@sentry/cli-win32-x64@2.58.5':
+    resolution: {integrity: sha512-IZf+XIMiQwj+5NzqbOQfywlOitmCV424Vtf9c+ep61AaVScUFD1TSrQbOcJJv5xGxhlxNOMNgMeZhdexdzrKZg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@sentry/cli@2.58.5':
+    resolution: {integrity: sha512-tavJ7yGUZV+z3Ct2/ZB6mg339i08sAk6HDkgqmSRuQEu2iLS5sl9HIvuXfM6xjv8fwlgFOSy++WNABNAcGHUbg==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
+  '@sentry/core@10.45.0':
+    resolution: {integrity: sha512-s69UXxvefeQxuZ5nY7/THtTrIEvJxNVCp3ns4kwoCw1qMpgpvn/296WCKVmM7MiwnaAdzEKnAvLAwaxZc2nM7Q==}
+    engines: {node: '>=18'}
+
+  '@sentry/nextjs@10.45.0':
+    resolution: {integrity: sha512-4LE+UvnfdOYyG8YEb/9TWaJQzMPuGLlph/iqowvsMdxaW6la+mvADiuzNTXly4QfsjeD3KIb7dKlGTqiVV0Ttw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      next: ^13.2.0 || ^14.0 || ^15.0.0-rc.0 || ^16.0.0-0
+
+  '@sentry/node-core@10.45.0':
+    resolution: {integrity: sha512-KQZEvLKM344+EqXiA9HIzWbW5hzq6/9nnFUQ8niaBPoOgR9AiJhrccfIscfgb8vjkriiEtzE03OW/4h1CTgZ3Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0
+      '@opentelemetry/core': ^1.30.1 || ^2.1.0
+      '@opentelemetry/instrumentation': '>=0.57.1 <1'
+      '@opentelemetry/resources': ^1.30.1 || ^2.1.0
+      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@opentelemetry/context-async-hooks':
+        optional: true
+      '@opentelemetry/core':
+        optional: true
+      '@opentelemetry/instrumentation':
+        optional: true
+      '@opentelemetry/resources':
+        optional: true
+      '@opentelemetry/sdk-trace-base':
+        optional: true
+      '@opentelemetry/semantic-conventions':
+        optional: true
+
+  '@sentry/node@10.45.0':
+    resolution: {integrity: sha512-Kpiq9lRGnJc1ex8SwxOBl+FLQNl4Y137BydVooP7AFiAYZ6ftwHsIEF1bcYXaipHMT1YHS2bdhC2UQaaB2jkuQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/opentelemetry@10.45.0':
+    resolution: {integrity: sha512-PmuGO+p/gC3ZQ8ddOeJ5P9ApnTTm35i12Bpuyb13AckCbNSJFvG2ggZda35JQOmiFU0kKYiwkoFAa8Mvj9od3Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0
+      '@opentelemetry/core': ^1.30.1 || ^2.1.0
+      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
+
+  '@sentry/react@10.45.0':
+    resolution: {integrity: sha512-jLezuxi4BUIU3raKyAPR5xMbQG/nhwnWmKo5p11NCbLmWzkS+lxoyDTUB4B8TAKZLfdtdkKLOn1S0tFc8vbUHw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.14.0 || 17.x || 18.x || 19.x
+
+  '@sentry/vercel-edge@10.45.0':
+    resolution: {integrity: sha512-sSF+Ex5NwT60gMinLcP/JNZb3cDaIv0mL1cRjfvN6zN2ZNEw0C9rhdgxa0EdD4G6PCHQ0XnCuAMDsfJ6gnRmfA==}
+    engines: {node: '>=18'}
+
+  '@sentry/webpack-plugin@5.1.1':
+    resolution: {integrity: sha512-XgQg+t2aVrlQDfIiAEizqR/bsy6GtBygwgR+Kw11P/cYczj4W9PZ2IYqQEStBzHqnRTh5DbpyMcUNW2CujdA9A==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      webpack: '>=5.0.0'
+
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -1329,6 +1797,9 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -1356,6 +1827,12 @@ packages:
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
+  '@types/eslint-scope@3.7.7':
+    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
+
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1365,6 +1842,9 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/mysql@2.15.27':
+    resolution: {integrity: sha512-YfWiV16IY0OeBfBCk8+hXKmdTKrKlwKN1MNKAPBu5JYxLwBEZl7QzeEpGnlZb3VMGJrrGmB84gXiH+ofs/TezA==}
+
   '@types/node@14.18.63':
     resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
 
@@ -1374,6 +1854,12 @@ packages:
   '@types/nodemailer@7.0.11':
     resolution: {integrity: sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==}
 
+  '@types/pg-pool@2.0.7':
+    resolution: {integrity: sha512-U4CwmGVQcbEuqpyju8/ptOKg6gEC+Tqsvj2xS9o1g71bUh8twxnC6ZL5rZKCsGN0iyH0CwgUyc9VR5owNQF9Ng==}
+
+  '@types/pg@8.15.6':
+    resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
+
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -1389,6 +1875,9 @@ packages:
   '@types/stats.js@0.17.4':
     resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
 
+  '@types/tedious@4.0.14':
+    resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
+
   '@types/three@0.183.1':
     resolution: {integrity: sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==}
 
@@ -1486,9 +1975,60 @@ packages:
   '@vitest/utils@2.1.9':
     resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
+  '@webassemblyjs/ieee754@1.13.2':
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+
+  '@webassemblyjs/leb128@1.13.2':
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+
+  '@webassemblyjs/utf8@1.13.2':
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
+
   '@webgpu/types@0.1.69':
     resolution: {integrity: sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==}
 
+  '@xtuc/ieee754@1.2.0':
+    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+
+  '@xtuc/long@4.2.2':
+    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+
   abs-svg-path@0.1.1:
     resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==}
 
@@ -1496,6 +2036,17 @@ packages:
     resolution: {integrity: sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==}
     engines: {node: '>=12'}
 
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
+
+  acorn-import-phases@1.0.4:
+    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      acorn: ^8.14.0
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1510,9 +2061,29 @@ packages:
     resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
     engines: {node: '>=0.8'}
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-keywords@5.1.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+
   ajv@6.14.0:
     resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1577,6 +2148,10 @@ packages:
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
+  atomic-sleep@1.0.0:
+    resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
+    engines: {node: '>=8.0.0'}
+
   autoprefixer@10.4.27:
     resolution: {integrity: sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1655,6 +2230,9 @@ packages:
   buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
 
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
   buffer-indexof-polyfill@1.0.2:
     resolution: {integrity: sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==}
     engines: {node: '>=0.10'}
@@ -1716,6 +2294,13 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
+    engines: {node: '>=6.0'}
+
+  cjs-module-lexer@2.2.0:
+    resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -1745,10 +2330,16 @@ packages:
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
   compress-commons@4.1.2:
     resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==}
     engines: {node: '>= 10'}
@@ -1756,6 +2347,9 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1928,6 +2522,10 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1944,6 +2542,10 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
   es-abstract@1.24.1:
     resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
     engines: {node: '>= 0.4'}
@@ -1959,6 +2561,9 @@ packages:
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -2036,6 +2641,10 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
+  eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2074,10 +2683,17 @@ packages:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
 
+  estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -2120,6 +2736,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -2165,6 +2784,9 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  forwarded-parse@2.1.2:
+    resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
+
   frac@1.1.2:
     resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
     engines: {node: '>=0.8'}
@@ -2172,6 +2794,20 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  framer-motion@12.38.0:
+    resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -2207,6 +2843,10 @@ packages:
     resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
     engines: {node: '>= 0.4'}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -2230,6 +2870,13 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
+
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
@@ -2282,6 +2929,10 @@ packages:
   hsl-to-rgb-for-reals@1.1.1:
     resolution: {integrity: sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   hyphen@1.14.1:
     resolution: {integrity: sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==}
 
@@ -2309,6 +2960,13 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
+  import-in-the-middle@2.0.6:
+    resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
+
+  import-in-the-middle@3.0.0:
+    resolution: {integrity: sha512-OnGy+eYT7wVejH2XWgLRgbmzujhhVIATQH0ztIeRilwHBjTeG3pD+XnH3PKX0r9gJ0BuJmJ68q/oh9qgXnNDQg==}
+    engines: {node: '>=18'}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2403,6 +3061,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -2458,6 +3119,10 @@ packages:
     resolution: {integrity: sha512-YKnxXEekXKzhpf7CLYA0A+oDP8V0OhICNCr5lv96FvSsDEmrb0GKM776JgQvHTMjr7DTTPEVv/1Ciaw0uEWzBA==}
     engines: {node: '>=12'}
 
+  jest-worker@27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -2472,12 +3137,23 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -2485,6 +3161,11 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
@@ -2519,6 +3200,10 @@ packages:
   listenercount@1.0.1:
     resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
 
+  loader-runner@4.3.1:
+    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
+    engines: {node: '>=6.11.5'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2579,6 +3264,13 @@ packages:
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
+  lru-cache@11.2.7:
+    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -2589,6 +3281,9 @@ packages:
   media-engine@1.0.3:
     resolution: {integrity: sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==}
 
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2600,6 +3295,14 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   minimatch@10.2.4:
     resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
     engines: {node: 18 || 20 || >=22}
@@ -2614,10 +3317,23 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  module-details-from-path@1.0.4:
+    resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
+
+  motion-dom@12.38.0:
+    resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
+
+  motion-utils@12.36.0:
+    resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2632,6 +3348,9 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
   next-auth@5.0.0-beta.30:
     resolution: {integrity: sha512-+c51gquM3F6nMVmoAusRJ7RIoY0K4Ts9HCCwyy/BRoe4mp3msZpOzYMyb5LAYc1wSo74PMQkGDcaghIO7W6Xjg==}
     peerDependencies:
@@ -2684,6 +3403,15 @@ packages:
   ngraph.random@1.2.0:
     resolution: {integrity: sha512-4EUeAGbB2HWX9njd6bP6tciN6ByJfoaAvmVL9QTaZSeXrW46eNGA9GajiXiPBbvFqxUWFkEbyo6x5qsACUuVfA==}
 
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -2733,6 +3461,10 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  on-exit-leak-free@2.1.2:
+    resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
+    engines: {node: '>=14.0.0'}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -2792,6 +3524,10 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -2799,6 +3535,17 @@ packages:
     resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
     engines: {node: '>= 14.16'}
 
+  pg-int8@1.0.1:
+    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
+    engines: {node: '>=4.0.0'}
+
+  pg-protocol@1.13.0:
+    resolution: {integrity: sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==}
+
+  pg-types@2.2.0:
+    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
+    engines: {node: '>=4'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2814,6 +3561,16 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pino-abstract-transport@3.0.0:
+    resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
+
+  pino-std-serializers@7.1.0:
+    resolution: {integrity: sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==}
+
+  pino@10.3.1:
+    resolution: {integrity: sha512-r34yH/GlQpKZbU1BvFFqOjhISRo1MNx1tWYsYvmj6KIRHSPMT2+yHOEb1SG6NMvRoHRF0a07kCOox/9yakl1vg==}
+    hasBin: true
+
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -2887,6 +3644,22 @@ packages:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postgres-array@2.0.0:
+    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
+    engines: {node: '>=4'}
+
+  postgres-bytea@1.0.1:
+    resolution: {integrity: sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-date@1.0.7:
+    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-interval@1.2.0:
+    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
+    engines: {node: '>=0.10.0'}
+
   preact-render-to-string@6.5.11:
     resolution: {integrity: sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==}
     peerDependencies:
@@ -2912,9 +3685,19 @@ packages:
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
+  process-warning@5.0.0:
+    resolution: {integrity: sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2925,6 +3708,9 @@ packages:
   queue@6.0.2:
     resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
 
+  quick-format-unescaped@4.0.4:
+    resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
+
   react-dom@19.2.4:
     resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
     peerDependencies:
@@ -2996,6 +3782,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  real-require@0.2.0:
+    resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
+    engines: {node: '>= 12.13.0'}
+
   recharts@3.7.0:
     resolution: {integrity: sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==}
     engines: {node: '>=18'}
@@ -3032,6 +3822,10 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  require-in-the-middle@8.0.1:
+    resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
+    engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
+
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
@@ -3088,6 +3882,10 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  safe-stable-stringify@2.5.0:
+    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
+    engines: {node: '>=10'}
+
   saxes@5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
     engines: {node: '>=10'}
@@ -3098,6 +3896,10 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
+    engines: {node: '>= 10.13.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3156,10 +3958,24 @@ packages:
   simple-swizzle@0.2.4:
     resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
 
+  sonic-boom@4.2.1:
+    resolution: {integrity: sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
   ssf@0.11.2:
     resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
     engines: {node: '>=0.8'}
@@ -3167,6 +3983,10 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
+  stacktrace-parser@0.1.11:
+    resolution: {integrity: sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg==}
+    engines: {node: '>=6'}
+
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -3225,6 +4045,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -3240,10 +4064,35 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
+  terser-webpack-plugin@5.4.0:
+    resolution: {integrity: sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+
+  terser@5.46.1:
+    resolution: {integrity: sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -3251,6 +4100,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  thread-stream@4.0.0:
+    resolution: {integrity: sha512-4iMVL6HAINXWf1ZKZjIPcz5wYaOdPhtO8ATvZ+Xqp3BTdaqtAwQkNmKORqcIo5YkQqGXq5cwfswDwMqqQNrpJA==}
+    engines: {node: '>=20'}
+
   three-forcegraph@1.43.1:
     resolution: {integrity: sha512-lQnYPLvR31gb91mF5xHhU0jPHJgBPw9QB23R6poCk8Tgvz8sQtq7wTxwClcPdfKCBbHXsb7FSqK06Osiu1kQ5A==}
     engines: {node: '>=12'}
@@ -3305,6 +4158,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
   traverse@0.3.9:
     resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
 
@@ -3366,6 +4222,10 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@0.7.1:
+    resolution: {integrity: sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==}
+    engines: {node: '>=8'}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -3424,6 +4284,10 @@ packages:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
 
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
   victory-vendor@37.3.6:
     resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
 
@@ -3492,6 +4356,30 @@ packages:
       jsdom:
         optional: true
 
+  watchpack@2.5.1:
+    resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
+    engines: {node: '>=10.13.0'}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webpack-sources@3.3.4:
+    resolution: {integrity: sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==}
+    engines: {node: '>=10.13.0'}
+
+  webpack@5.105.4:
+    resolution: {integrity: sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -3541,6 +4429,13 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -3575,8 +4470,108 @@ snapshots:
       preact: 10.24.3
       preact-render-to-string: 6.5.11(preact@10.24.3)
 
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.29.2
+      '@babel/parser': 7.29.2
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.29.2':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.2':
+    dependencies:
+      '@babel/types': 7.29.0
+
   '@babel/runtime@7.28.6': {}
 
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.2
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
   '@dimforge/rapier3d-compat@0.12.0': {}
 
   '@emnapi/core@1.8.1':
@@ -3807,6 +4802,16 @@ snapshots:
       lodash.isundefined: 3.0.1
       lodash.uniq: 4.5.0
 
+  '@fastify/otel@0.17.1(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.212.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      minimatch: 10.2.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -3922,8 +4927,18 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.31':
@@ -4037,8 +5052,273 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
+  '@opentelemetry/api-logs@0.207.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/api-logs@0.212.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/api-logs@0.213.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/api@1.9.0': {}
+
+  '@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/instrumentation-amqplib@0.60.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-connect@0.56.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@types/connect': 3.4.38
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-dataloader@0.30.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-express@0.61.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-fs@0.32.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-generic-pool@0.56.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-graphql@0.61.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-hapi@0.59.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-http@0.213.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      forwarded-parse: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-ioredis@0.61.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/redis-common': 0.38.2
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-kafkajs@0.22.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-knex@0.57.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-koa@0.61.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-lru-memoizer@0.57.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-mongodb@0.66.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-mongoose@0.59.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-mysql2@0.59.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-mysql@0.59.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@types/mysql': 2.15.27
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-pg@0.65.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+      '@types/pg': 8.15.6
+      '@types/pg-pool': 2.0.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-redis@0.61.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/redis-common': 0.38.2
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-tedious@0.32.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@types/tedious': 4.0.14
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation-undici@0.23.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.207.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.207.0
+      import-in-the-middle: 2.0.6
+      require-in-the-middle: 8.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.212.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.212.0
+      import-in-the-middle: 2.0.6
+      require-in-the-middle: 8.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.213.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.213.0
+      import-in-the-middle: 3.0.0
+      require-in-the-middle: 8.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/redis-common@0.38.2': {}
+
+  '@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/semantic-conventions@1.40.0': {}
+
+  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+
   '@panva/hkdf@1.2.1': {}
 
+  '@pinojs/redact@0.4.0': {}
+
   '@playwright/test@1.58.2':
     dependencies:
       playwright: 1.58.2
@@ -4068,6 +5348,13 @@ snapshots:
     dependencies:
       '@prisma/debug': 5.22.0
 
+  '@prisma/instrumentation@7.4.2(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/instrumentation': 0.207.0(@opentelemetry/api@1.9.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@react-pdf/fns@3.1.2': {}
 
   '@react-pdf/font@4.0.4':
@@ -4181,6 +5468,26 @@ snapshots:
       react: 19.2.4
       react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1)
 
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.59.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      is-reference: 1.2.1
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.59.0
+
+  '@rollup/pluginutils@5.3.0(rollup@4.59.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.59.0
+
   '@rollup/rollup-android-arm-eabi@4.59.0':
     optional: true
 
@@ -4258,6 +5565,202 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sentry-internal/browser-utils@10.45.0':
+    dependencies:
+      '@sentry/core': 10.45.0
+
+  '@sentry-internal/feedback@10.45.0':
+    dependencies:
+      '@sentry/core': 10.45.0
+
+  '@sentry-internal/replay-canvas@10.45.0':
+    dependencies:
+      '@sentry-internal/replay': 10.45.0
+      '@sentry/core': 10.45.0
+
+  '@sentry-internal/replay@10.45.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 10.45.0
+      '@sentry/core': 10.45.0
+
+  '@sentry/babel-plugin-component-annotate@5.1.1': {}
+
+  '@sentry/browser@10.45.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 10.45.0
+      '@sentry-internal/feedback': 10.45.0
+      '@sentry-internal/replay': 10.45.0
+      '@sentry-internal/replay-canvas': 10.45.0
+      '@sentry/core': 10.45.0
+
+  '@sentry/bundler-plugin-core@5.1.1':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@sentry/babel-plugin-component-annotate': 5.1.1
+      '@sentry/cli': 2.58.5
+      dotenv: 16.6.1
+      find-up: 5.0.0
+      glob: 13.0.6
+      magic-string: 0.30.21
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@sentry/cli-darwin@2.58.5':
+    optional: true
+
+  '@sentry/cli-linux-arm64@2.58.5':
+    optional: true
+
+  '@sentry/cli-linux-arm@2.58.5':
+    optional: true
+
+  '@sentry/cli-linux-i686@2.58.5':
+    optional: true
+
+  '@sentry/cli-linux-x64@2.58.5':
+    optional: true
+
+  '@sentry/cli-win32-arm64@2.58.5':
+    optional: true
+
+  '@sentry/cli-win32-i686@2.58.5':
+    optional: true
+
+  '@sentry/cli-win32-x64@2.58.5':
+    optional: true
+
+  '@sentry/cli@2.58.5':
+    dependencies:
+      https-proxy-agent: 5.0.1
+      node-fetch: 2.7.0
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    optionalDependencies:
+      '@sentry/cli-darwin': 2.58.5
+      '@sentry/cli-linux-arm': 2.58.5
+      '@sentry/cli-linux-arm64': 2.58.5
+      '@sentry/cli-linux-i686': 2.58.5
+      '@sentry/cli-linux-x64': 2.58.5
+      '@sentry/cli-win32-arm64': 2.58.5
+      '@sentry/cli-win32-i686': 2.58.5
+      '@sentry/cli-win32-x64': 2.58.5
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@sentry/core@10.45.0': {}
+
+  '@sentry/nextjs@10.45.0(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(webpack@5.105.4)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@rollup/plugin-commonjs': 28.0.1(rollup@4.59.0)
+      '@sentry-internal/browser-utils': 10.45.0
+      '@sentry/bundler-plugin-core': 5.1.1
+      '@sentry/core': 10.45.0
+      '@sentry/node': 10.45.0
+      '@sentry/opentelemetry': 10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)
+      '@sentry/react': 10.45.0(react@19.2.4)
+      '@sentry/vercel-edge': 10.45.0
+      '@sentry/webpack-plugin': 5.1.1(webpack@5.105.4)
+      next: 15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      rollup: 4.59.0
+      stacktrace-parser: 0.1.11
+    transitivePeerDependencies:
+      - '@opentelemetry/context-async-hooks'
+      - '@opentelemetry/core'
+      - '@opentelemetry/sdk-trace-base'
+      - encoding
+      - react
+      - supports-color
+      - webpack
+
+  '@sentry/node-core@10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.213.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)':
+    dependencies:
+      '@sentry/core': 10.45.0
+      '@sentry/opentelemetry': 10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@sentry/node@10.45.0':
+    dependencies:
+      '@fastify/otel': 0.17.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-amqplib': 0.60.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-connect': 0.56.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-dataloader': 0.30.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-express': 0.61.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-fs': 0.32.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-generic-pool': 0.56.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-graphql': 0.61.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-hapi': 0.59.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-http': 0.213.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-ioredis': 0.61.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-kafkajs': 0.22.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-knex': 0.57.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-koa': 0.61.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-lru-memoizer': 0.57.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mongodb': 0.66.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mongoose': 0.59.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mysql': 0.59.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-mysql2': 0.59.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-pg': 0.65.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-redis': 0.61.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-tedious': 0.32.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation-undici': 0.23.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@prisma/instrumentation': 7.4.2(@opentelemetry/api@1.9.0)
+      '@sentry/core': 10.45.0
+      '@sentry/node-core': 10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.213.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)
+      '@sentry/opentelemetry': 10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sentry/opentelemetry@10.45.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.40.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@sentry/core': 10.45.0
+
+  '@sentry/react@10.45.0(react@19.2.4)':
+    dependencies:
+      '@sentry/browser': 10.45.0
+      '@sentry/core': 10.45.0
+      react: 19.2.4
+
+  '@sentry/vercel-edge@10.45.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
+      '@sentry/core': 10.45.0
+
+  '@sentry/webpack-plugin@5.1.1(webpack@5.105.4)':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.1.1
+      uuid: 9.0.1
+      webpack: 5.105.4
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@standard-schema/spec@1.1.0': {}
 
   '@standard-schema/utils@0.3.0': {}
@@ -4307,6 +5810,10 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 22.19.13
+
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-color@3.1.3': {}
@@ -4331,12 +5838,26 @@ snapshots:
 
   '@types/d3-timer@3.0.2': {}
 
+  '@types/eslint-scope@3.7.7':
+    dependencies:
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.8
+
+  '@types/eslint@9.6.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
 
+  '@types/mysql@2.15.27':
+    dependencies:
+      '@types/node': 22.19.13
+
   '@types/node@14.18.63': {}
 
   '@types/node@22.19.13':
@@ -4347,6 +5868,16 @@ snapshots:
     dependencies:
       '@types/node': 22.19.13
 
+  '@types/pg-pool@2.0.7':
+    dependencies:
+      '@types/pg': 8.15.6
+
+  '@types/pg@8.15.6':
+    dependencies:
+      '@types/node': 22.19.13
+      pg-protocol: 1.13.0
+      pg-types: 2.2.0
+
   '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
       '@types/react': 19.2.14
@@ -4364,6 +5895,10 @@ snapshots:
 
   '@types/stats.js@0.17.4': {}
 
+  '@types/tedious@4.0.14':
+    dependencies:
+      '@types/node': 22.19.13
+
   '@types/three@0.183.1':
     dependencies:
       '@dimforge/rapier3d-compat': 0.12.0
@@ -4476,13 +6011,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.13))':
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.13)(terser@5.46.1))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 5.4.21(@types/node@22.19.13)
+      vite: 5.4.21(@types/node@22.19.13)(terser@5.46.1)
 
   '@vitest/pretty-format@2.1.9':
     dependencies:
@@ -4509,12 +6044,100 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 1.2.0
 
+  '@webassemblyjs/ast@1.14.1':
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
+
+  '@webassemblyjs/helper-api-error@1.13.2': {}
+
+  '@webassemblyjs/helper-buffer@1.14.1': {}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.13.2
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/wasm-gen': 1.14.1
+
+  '@webassemblyjs/ieee754@1.13.2':
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+
+  '@webassemblyjs/leb128@1.13.2':
+    dependencies:
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/utf8@1.13.2': {}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/helper-wasm-section': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-opt': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      '@webassemblyjs/wast-printer': 1.14.1
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@xtuc/long': 4.2.2
+
   '@webgpu/types@0.1.69': {}
 
+  '@xtuc/ieee754@1.2.0': {}
+
+  '@xtuc/long@4.2.2': {}
+
   abs-svg-path@0.1.1: {}
 
   accessor-fn@1.5.3: {}
 
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn-import-phases@1.0.4(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -4523,6 +6146,21 @@ snapshots:
 
   adler-32@1.3.1: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  ajv-formats@2.1.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv-keywords@5.1.0(ajv@8.18.0):
+    dependencies:
+      ajv: 8.18.0
+      fast-deep-equal: 3.1.3
+
   ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -4530,6 +6168,13 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.18.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -4637,6 +6282,8 @@ snapshots:
 
   async@3.2.6: {}
 
+  atomic-sleep@1.0.0: {}
+
   autoprefixer@10.4.27(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
@@ -4716,6 +6363,8 @@ snapshots:
 
   buffer-crc32@0.2.13: {}
 
+  buffer-from@1.1.2: {}
+
   buffer-indexof-polyfill@1.0.2: {}
 
   buffer@5.7.1:
@@ -4786,6 +6435,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chrome-trace-event@1.0.4: {}
+
+  cjs-module-lexer@2.2.0: {}
+
   client-only@0.0.1: {}
 
   clone@2.1.2: {}
@@ -4807,8 +6460,12 @@ snapshots:
       color-name: 1.1.4
       simple-swizzle: 0.2.4
 
+  commander@2.20.3: {}
+
   commander@4.1.1: {}
 
+  commondir@1.0.1: {}
+
   compress-commons@4.1.2:
     dependencies:
       buffer-crc32: 0.2.13
@@ -4818,6 +6475,8 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  convert-source-map@2.0.0: {}
+
   core-util-is@1.0.3: {}
 
   crc-32@1.2.2: {}
@@ -4965,6 +6624,8 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dotenv@16.6.1: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -4983,6 +6644,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -5046,6 +6712,8 @@ snapshots:
 
   es-module-lexer@1.7.0: {}
 
+  es-module-lexer@2.0.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -5179,6 +6847,11 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-scope@5.1.1:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
@@ -5245,8 +6918,12 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  estraverse@4.3.0: {}
+
   estraverse@5.3.0: {}
 
+  estree-walker@2.0.2: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -5292,6 +6969,8 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-uri@3.1.0: {}
+
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -5344,10 +7023,21 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  forwarded-parse@2.1.2: {}
+
   frac@1.1.2: {}
 
   fraction.js@5.3.4: {}
 
+  framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      motion-dom: 12.38.0
+      motion-utils: 12.36.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   fs-constants@1.0.0: {}
 
   fs.realpath@1.0.0: {}
@@ -5380,6 +7070,8 @@ snapshots:
 
   generator-function@2.0.1: {}
 
+  gensync@1.0.0-beta.2: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -5416,6 +7108,14 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob-to-regexp@0.4.1: {}
+
+  glob@13.0.6:
+    dependencies:
+      minimatch: 10.2.4
+      minipass: 7.1.3
+      path-scurry: 2.0.2
+
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -5464,6 +7164,13 @@ snapshots:
 
   hsl-to-rgb-for-reals@1.1.1: {}
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   hyphen@1.14.1: {}
 
   ieee754@1.2.1: {}
@@ -5483,6 +7190,20 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-in-the-middle@2.0.6:
+    dependencies:
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
+      module-details-from-path: 1.0.4
+
+  import-in-the-middle@3.0.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
+      module-details-from-path: 1.0.4
+
   imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
@@ -5589,6 +7310,10 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -5642,6 +7367,12 @@ snapshots:
 
   jerrypick@1.1.2: {}
 
+  jest-worker@27.5.1:
+    dependencies:
+      '@types/node': 22.19.13
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
   jiti@1.21.7: {}
 
   jose@6.1.3: {}
@@ -5652,16 +7383,24 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
+  json-parse-even-better-errors@2.3.1: {}
+
   json-schema-traverse@0.4.1: {}
 
+  json-schema-traverse@1.0.0: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
 
+  json5@2.2.3: {}
+
   jszip@3.10.1:
     dependencies:
       lie: 3.3.0
@@ -5701,6 +7440,8 @@ snapshots:
 
   listenercount@1.0.1: {}
 
+  loader-runner@4.3.1: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -5743,6 +7484,12 @@ snapshots:
 
   loupe@3.2.1: {}
 
+  lru-cache@11.2.7: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -5751,6 +7498,8 @@ snapshots:
 
   media-engine@1.0.3: {}
 
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
   meshoptimizer@1.0.1: {}
@@ -5760,6 +7509,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   minimatch@10.2.4:
     dependencies:
       brace-expansion: 5.0.4
@@ -5774,10 +7529,20 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@7.1.3: {}
+
   mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
 
+  module-details-from-path@1.0.4: {}
+
+  motion-dom@12.38.0:
+    dependencies:
+      motion-utils: 12.36.0
+
+  motion-utils@12.36.0: {}
+
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -5790,13 +7555,15 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next-auth@5.0.0-beta.30(next@15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
+  neo-async@2.6.2: {}
+
+  next-auth@5.0.0-beta.30(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
     dependencies:
       '@auth/core': 0.41.0
-      next: 15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next: 15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
 
-  next@15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@next/env': 15.5.12
       '@swc/helpers': 0.5.15
@@ -5804,7 +7571,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
-      styled-jsx: 5.1.6(react@19.2.4)
+      styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.4)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.5.12
       '@next/swc-darwin-x64': 15.5.12
@@ -5814,6 +7581,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 15.5.12
       '@next/swc-win32-arm64-msvc': 15.5.12
       '@next/swc-win32-x64-msvc': 15.5.12
+      '@opentelemetry/api': 1.9.0
       '@playwright/test': 1.58.2
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -5836,6 +7604,10 @@ snapshots:
 
   ngraph.random@1.2.0: {}
 
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
   node-releases@2.0.27: {}
 
   nodemailer@8.0.1: {}
@@ -5885,6 +7657,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  on-exit-leak-free@2.1.2: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -5934,10 +7708,27 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.2.7
+      minipass: 7.1.3
+
   pathe@1.1.2: {}
 
   pathval@2.0.1: {}
 
+  pg-int8@1.0.1: {}
+
+  pg-protocol@1.13.0: {}
+
+  pg-types@2.2.0:
+    dependencies:
+      pg-int8: 1.0.1
+      postgres-array: 2.0.0
+      postgres-bytea: 1.0.1
+      postgres-date: 1.0.7
+      postgres-interval: 1.2.0
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -5946,6 +7737,26 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pino-abstract-transport@3.0.0:
+    dependencies:
+      split2: 4.2.0
+
+  pino-std-serializers@7.1.0: {}
+
+  pino@10.3.1:
+    dependencies:
+      '@pinojs/redact': 0.4.0
+      atomic-sleep: 1.0.0
+      on-exit-leak-free: 2.1.2
+      pino-abstract-transport: 3.0.0
+      pino-std-serializers: 7.1.0
+      process-warning: 5.0.0
+      quick-format-unescaped: 4.0.4
+      real-require: 0.2.0
+      safe-stable-stringify: 2.5.0
+      sonic-boom: 4.2.1
+      thread-stream: 4.0.0
+
   pirates@4.0.7: {}
 
   playwright-core@1.58.2: {}
@@ -6006,6 +7817,16 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postgres-array@2.0.0: {}
+
+  postgres-bytea@1.0.1: {}
+
+  postgres-date@1.0.7: {}
+
+  postgres-interval@1.2.0:
+    dependencies:
+      xtend: 4.0.2
+
   preact-render-to-string@6.5.11(preact@10.24.3):
     dependencies:
       preact: 10.24.3
@@ -6024,12 +7845,18 @@ snapshots:
 
   process-nextick-args@2.0.1: {}
 
+  process-warning@5.0.0: {}
+
+  progress@2.0.3: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -6038,6 +7865,8 @@ snapshots:
     dependencies:
       inherits: 2.0.4
 
+  quick-format-unescaped@4.0.4: {}
+
   react-dom@19.2.4(react@19.2.4):
     dependencies:
       react: 19.2.4
@@ -6121,6 +7950,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  real-require@0.2.0: {}
+
   recharts@3.7.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@16.13.1)(react@19.2.4)(redux@5.0.1):
     dependencies:
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)
@@ -6175,6 +8006,13 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  require-in-the-middle@8.0.1:
+    dependencies:
+      debug: 4.4.3
+      module-details-from-path: 1.0.4
+    transitivePeerDependencies:
+      - supports-color
+
   reselect@5.1.1: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -6255,6 +8093,8 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safe-stable-stringify@2.5.0: {}
+
   saxes@5.0.1:
     dependencies:
       xmlchars: 2.2.0
@@ -6263,6 +8103,13 @@ snapshots:
 
   scheduler@0.27.0: {}
 
+  schema-utils@4.3.3:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
+
   semver@6.3.1: {}
 
   semver@7.7.4: {}
@@ -6363,14 +8210,31 @@ snapshots:
     dependencies:
       is-arrayish: 0.3.4
 
+  sonic-boom@4.2.1:
+    dependencies:
+      atomic-sleep: 1.0.0
+
   source-map-js@1.2.1: {}
 
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  split2@4.2.0: {}
+
   ssf@0.11.2:
     dependencies:
       frac: 1.1.2
 
   stackback@0.0.2: {}
 
+  stacktrace-parser@0.1.11:
+    dependencies:
+      type-fest: 0.7.1
+
   standard-as-callback@2.1.0: {}
 
   std-env@3.10.0: {}
@@ -6415,10 +8279,12 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  styled-jsx@5.1.6(react@19.2.4):
+  styled-jsx@5.1.6(@babel/core@7.29.0)(react@19.2.4):
     dependencies:
       client-only: 0.0.1
       react: 19.2.4
+    optionalDependencies:
+      '@babel/core': 7.29.0
 
   sucrase@3.35.1:
     dependencies:
@@ -6434,6 +8300,10 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   svg-arc-to-cubic-bezier@3.2.0: {}
@@ -6468,6 +8338,8 @@ snapshots:
       - tsx
       - yaml
 
+  tapable@2.3.0: {}
+
   tar-stream@2.2.0:
     dependencies:
       bl: 4.1.0
@@ -6476,6 +8348,21 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  terser-webpack-plugin@5.4.0(webpack@5.105.4):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.46.1
+      webpack: 5.105.4
+
+  terser@5.46.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.16.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -6484,6 +8371,10 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  thread-stream@4.0.0:
+    dependencies:
+      real-require: 0.2.0
+
   three-forcegraph@1.43.1(three@0.183.2):
     dependencies:
       accessor-fn: 1.5.3
@@ -6536,6 +8427,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  tr46@0.0.3: {}
+
   traverse@0.3.9: {}
 
   ts-api-utils@2.4.0(typescript@5.9.3):
@@ -6591,6 +8484,8 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@0.7.1: {}
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -6676,6 +8571,8 @@ snapshots:
 
   uuid@8.3.2: {}
 
+  uuid@9.0.1: {}
+
   victory-vendor@37.3.6:
     dependencies:
       '@types/d3-array': 3.2.2
@@ -6699,13 +8596,13 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  vite-node@2.1.9(@types/node@22.19.13):
+  vite-node@2.1.9(@types/node@22.19.13)(terser@5.46.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.21(@types/node@22.19.13)
+      vite: 5.4.21(@types/node@22.19.13)(terser@5.46.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -6717,7 +8614,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.21(@types/node@22.19.13):
+  vite@5.4.21(@types/node@22.19.13)(terser@5.46.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.8
@@ -6725,11 +8622,12 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.13
       fsevents: 2.3.3
+      terser: 5.46.1
 
-  vitest@2.1.9(@types/node@22.19.13):
+  vitest@2.1.9(@types/node@22.19.13)(terser@5.46.1):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.13))
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.13)(terser@5.46.1))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -6745,8 +8643,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.21(@types/node@22.19.13)
-      vite-node: 2.1.9(@types/node@22.19.13)
+      vite: 5.4.21(@types/node@22.19.13)(terser@5.46.1)
+      vite-node: 2.1.9(@types/node@22.19.13)(terser@5.46.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.19.13
@@ -6761,6 +8659,52 @@ snapshots:
       - supports-color
       - terser
 
+  watchpack@2.5.1:
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+
+  webidl-conversions@3.0.1: {}
+
+  webpack-sources@3.3.4: {}
+
+  webpack@5.105.4:
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.16.0
+      acorn-import-phases: 1.0.4(acorn@8.16.0)
+      browserslist: 4.28.1
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.20.1
+      es-module-lexer: 2.0.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.4.0(webpack@5.105.4)
+      watchpack: 2.5.1
+      webpack-sources: 3.3.4
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -6831,6 +8775,10 @@ snapshots:
 
   xmlchars@2.2.0: {}
 
+  xtend@4.0.2: {}
+
+  yallist@3.1.1: {}
+
   yocto-queue@0.1.0: {}
 
   yoga-layout@3.2.1: {}