feat(platform): checkpoint current implementation state

apps/web/e2e/resources.spec.ts

@@ -6,19 +6,52 @@ test.describe("Resources", () => {
     await page.fill('input[type="email"]', "manager@capakraken.dev");
     await page.fill('input[type="password"]', "manager123");
     await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/(dashboard|resources)/);
+    await page.goto("/resources");
     await expect(page).toHaveURL(/\/resources/);
   });
 
   test("shows resources list", async ({ page }) => {
-    await expect(page.locator("h1")).toContainText("Resources");
+    await expect(page.getByRole("heading", { name: "Resources" })).toBeVisible();
     await expect(page.locator("table")).toBeVisible();
   });
 
   test("can search resources", async ({ page }) => {
+    const rows = page.locator("tbody tr");
+    await expect(rows.first()).toBeVisible();
+
+    const firstRowText = (await rows.first().textContent()) ?? "";
+    const searchTerm = firstRowText
+      .split(/\s+/)
+      .map((token) => token.replace(/[^A-Za-z0-9@._-]/g, "").trim())
+      .find((token) => token.length >= 3) ?? "EMP";
+
     const searchInput = page.locator('input[type="search"]');
-    await searchInput.fill("EMP-001");
+    await searchInput.fill(searchTerm);
     await page.waitForTimeout(500);
-    // Should show filtered results
-    await expect(page.locator("tbody tr")).toHaveCount(1);
+    await expect(searchInput).toHaveValue(searchTerm);
+    await expect(page.getByText(`Search: "${searchTerm}"`)).toBeVisible();
+  });
+
+  test("shows a not-found state for a missing resource detail page", async ({ page }) => {
+    await page.goto("/resources/does-not-exist");
+
+    await expect(page.getByText("Resource not found.")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Back to resources" })).toBeVisible();
+  });
+
+  test("shows a generic load error when the resource detail query fails", async ({ page }) => {
+    await page.route("**/api/trpc/resource.getById**", async (route) => {
+      await route.fulfill({
+        status: 500,
+        contentType: "application/json",
+        body: JSON.stringify({ error: { message: "boom" } }),
+      });
+    });
+
+    await page.goto("/resources/test-resource-id");
+
+    await expect(page.getByText("This resource could not be loaded right now.")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Back to resources" })).toBeVisible();
   });
 });

apps/web/e2e/test-server.mjs

@@ -1,4 +1,5 @@
 import { spawn } from "node:child_process";
+import { randomBytes } from "node:crypto";
 import { existsSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
 import { createServer } from "node:net";
 import { dirname, resolve } from "node:path";
@@ -7,12 +8,16 @@ import { fileURLToPath } from "node:url";
 const currentDir = dirname(fileURLToPath(import.meta.url));
 const workspaceRoot = resolve(currentDir, "../../..");
 const webRoot = resolve(currentDir, "..");
+const runtimeEnvPath = resolve(currentDir, ".playwright-runtime.json");
 const webEnvLocal = resolve(webRoot, ".env.local");
 const webEnvBackup = resolve(webRoot, ".env.local.e2e-backup");
 const webDistDir = ".next-e2e";
 const webDistDirPath = resolve(webRoot, webDistDir);
+const managedEnvBanner = "# Managed by apps/web/e2e/test-server.mjs";
 const e2ePort = process.env.PLAYWRIGHT_TEST_PORT ?? "3110";
 const e2eBaseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL ?? `http://localhost:${e2ePort}`;
+const e2eAuthSecret = process.env.PLAYWRIGHT_AUTH_SECRET ?? `capakraken-e2e-${randomBytes(24).toString("hex")}`;
+const manageWebEnvFile = process.env.PLAYWRIGHT_MANAGE_WEB_ENV_FILE === "true";
 const composeProjectName = `capakraken-e2e-${process.pid}`;
 const managedEnvKeys = [
   "DATABASE_URL",
@@ -68,12 +73,24 @@ function applyEnv(env) {
 }
 
 function writeManagedWebEnv(rootEnv) {
-  if (existsSync(webEnvBackup)) {
+  if (!manageWebEnvFile) {
+    restoreWebEnv();
+    return;
+  }
+
+  if (existsSync(webEnvBackup) && isManagedEnvFile(webEnvBackup)) {
     rmSync(webEnvBackup, { force: true });
   }
 
   if (existsSync(webEnvLocal)) {
-    renameSync(webEnvLocal, webEnvBackup);
+    if (isManagedEnvFile(webEnvLocal)) {
+      rmSync(webEnvLocal, { force: true });
+    } else {
+      if (existsSync(webEnvBackup)) {
+        rmSync(webEnvBackup, { force: true });
+      }
+      renameSync(webEnvLocal, webEnvBackup);
+    }
   }
 
   const contents = managedEnvKeys
@@ -84,16 +101,41 @@ function writeManagedWebEnv(rootEnv) {
     .filter(Boolean)
     .join("\n");
 
-  writeFileSync(webEnvLocal, `${contents}\n`, "utf8");
+  writeFileSync(webEnvLocal, `${managedEnvBanner}\n${contents}\n`, "utf8");
 }
 
 function restoreWebEnv() {
-  if (existsSync(webEnvLocal)) {
+  if (existsSync(webEnvLocal) && isManagedEnvFile(webEnvLocal)) {
     rmSync(webEnvLocal, { force: true });
   }
 
   if (existsSync(webEnvBackup)) {
-    renameSync(webEnvBackup, webEnvLocal);
+    if (isManagedEnvFile(webEnvBackup)) {
+      rmSync(webEnvBackup, { force: true });
+    } else {
+      renameSync(webEnvBackup, webEnvLocal);
+    }
+  }
+}
+
+let restoredManagedEnv = false;
+
+function restoreWebEnvOnce() {
+  if (restoredManagedEnv) {
+    return;
+  }
+
+  restoredManagedEnv = true;
+  restoreWebEnv();
+  rmSync(runtimeEnvPath, { force: true });
+}
+
+function isManagedEnvFile(filePath) {
+  try {
+    const contents = readFileSync(filePath, "utf8");
+    return contents.includes(managedEnvBanner) || contents.includes("E2E_TEST_MODE=true");
+  } catch {
+    return false;
   }
 }
 
@@ -307,15 +349,33 @@ if (!/(^|_)(test|e2e|ci)$/u.test(playwrightDatabaseName)) {
 process.env.DATABASE_URL = playwrightDatabaseUrl;
 process.env.PLAYWRIGHT_DATABASE_URL = playwrightDatabaseUrl;
 process.env.POSTGRES_TEST_PORT = String(selectedTestDbPort);
+process.env.CAPAKRAKEN_EXPECTED_DB_NAME = playwrightDatabaseName;
 process.env.ALLOW_DESTRUCTIVE_DB_TOOLS = "true";
 process.env.CONFIRM_DESTRUCTIVE_DB_NAME = playwrightDatabaseName;
 process.env.NODE_ENV = process.env.NODE_ENV ?? "development";
 process.env.PORT = e2ePort;
 process.env.NEXTAUTH_URL = e2eBaseUrl;
 process.env.AUTH_URL = e2eBaseUrl;
+process.env.NEXTAUTH_SECRET = e2eAuthSecret;
+process.env.AUTH_SECRET = e2eAuthSecret;
 process.env.NEXT_DIST_DIR = webDistDir;
 process.env.E2E_TEST_MODE = "true";
+writeFileSync(
+  runtimeEnvPath,
+  JSON.stringify(
+    {
+      DATABASE_URL: process.env.DATABASE_URL,
+      PLAYWRIGHT_DATABASE_URL: process.env.PLAYWRIGHT_DATABASE_URL,
+      POSTGRES_TEST_PORT: process.env.POSTGRES_TEST_PORT,
+      BASE_URL: e2eBaseUrl,
+    },
+    null,
+    2,
+  ),
+  "utf8",
+);
 writeManagedWebEnv(rootEnv);
+process.on("exit", restoreWebEnvOnce);
 
 try {
   await cleanupStaleE2eArtifacts();
@@ -333,19 +393,19 @@ try {
 
   for (const signal of ["SIGINT", "SIGTERM"]) {
     process.on(signal, () => {
-      restoreWebEnv();
+      restoreWebEnvOnce();
       void cleanupComposeProject();
       server.kill(signal);
     });
   }
 
   server.on("exit", async (code) => {
-    restoreWebEnv();
+    restoreWebEnvOnce();
     await cleanupComposeProject();
     process.exit(code ?? 0);
   });
 } catch (error) {
-  restoreWebEnv();
+  restoreWebEnvOnce();
   await cleanupComposeProject();
   throw error;
 }

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+/// <reference path="./.next-e2e/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/src/app/api/cron/chargeability-alerts/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@capakraken/db";
 import { checkChargeabilityAlerts } from "@capakraken/api";
+import { logger } from "@capakraken/api/lib/logger";
 
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
@@ -35,7 +36,7 @@ export async function GET(request: Request) {
       checkedAt: new Date().toISOString(),
     });
   } catch (error) {
-    console.error("[cron/chargeability-alerts] Error:", error);
+    logger.error({ error, route: "/api/cron/chargeability-alerts" }, "Chargeability alert cron failed");
     return NextResponse.json(
       { ok: false, error: "Internal error" },
       { status: 500 },

apps/web/src/app/api/cron/estimate-reminders/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@capakraken/db";
 import { checkPendingEstimateReminders } from "@capakraken/api";
+import { logger } from "@capakraken/api/lib/logger";
 
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
@@ -37,7 +38,7 @@ export async function GET(request: Request) {
       checkedAt: new Date().toISOString(),
     });
   } catch (error) {
-    console.error("[cron/estimate-reminders] Error:", error);
+    logger.error({ error, route: "/api/cron/estimate-reminders" }, "Estimate reminder cron failed");
     return NextResponse.json(
       { ok: false, error: "Internal error" },
       { status: 500 },

apps/web/src/app/api/cron/health-check/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@capakraken/db";
 import { createNotificationsForUsers } from "@capakraken/api";
+import { logger } from "@capakraken/api/lib/logger";
 import { createConnection } from "net";
 
 export const dynamic = "force-dynamic";
@@ -123,7 +124,7 @@ export async function GET(request: Request) {
       { status: allHealthy ? 200 : 503 },
     );
   } catch (error) {
-    console.error("[cron/health-check] Error:", error);
+    logger.error({ error, route: "/api/cron/health-check" }, "Health check cron failed");
     return NextResponse.json(
       { ok: false, error: "Internal error" },
       { status: 500 },

apps/web/src/app/api/cron/public-holidays/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@capakraken/db";
 import { autoImportPublicHolidays } from "@capakraken/api";
+import { logger } from "@capakraken/api/lib/logger";
 
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
@@ -49,7 +50,7 @@ export async function GET(request: Request) {
       skippedExisting: result.skippedExisting,
     });
   } catch (error) {
-    console.error("[cron/public-holidays] Error:", error);
+    logger.error({ error, route: "/api/cron/public-holidays", year }, "Public holiday import cron failed");
     return NextResponse.json(
       { ok: false, error: "Internal error" },
       { status: 500 },

apps/web/src/app/api/cron/security-audit/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@capakraken/db";
 import { createNotificationsForUsers } from "@capakraken/api";
+import { logger } from "@capakraken/api/lib/logger";
 import { readFileSync } from "fs";
 import { join } from "path";
 
@@ -87,7 +88,7 @@ function scanPackageJson(): Finding[] {
       }
     }
   } catch (error) {
-    console.error("[security-audit] Error scanning package.json:", error);
+    logger.error({ error, route: "/api/cron/security-audit" }, "Failed to scan package manifests for security audit");
   }
 
   return findings;
@@ -149,7 +150,7 @@ export async function GET(request: Request) {
       scannedAt: new Date().toISOString(),
     });
   } catch (error) {
-    console.error("[cron/security-audit] Error:", error);
+    logger.error({ error, route: "/api/cron/security-audit" }, "Security audit cron failed");
     return NextResponse.json(
       { ok: false, error: "Internal error" },
       { status: 500 },

apps/web/src/app/api/trpc/[trpc]/route.ts

@@ -45,8 +45,19 @@ const handler = async (req: NextRequest) => {
   };
 
   if (process.env["NODE_ENV"] === "development") {
-    options.onError = ({ path, error }: { path?: string; error: { message: string } }) => {
-      console.error(`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`);
+    options.onError = ({
+      path,
+      error,
+    }: {
+      path?: string;
+      error: { message: string; code?: string };
+    }) => {
+      const label = `tRPC ${path ?? "<no-path>"}`;
+      if (error.code === "NOT_FOUND") {
+        console.warn(`⚠️ ${label}: ${error.message}`);
+        return;
+      }
+      console.error(`❌ ${label}: ${error.message}`);
     };
   }
 

apps/web/src/components/comments/CommentThread.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { CommentEntityType } from "@capakraken/shared";
 import { useState } from "react";
 import { clsx } from "clsx";
 import { trpc } from "~/lib/trpc/client.js";
@@ -7,6 +8,11 @@ import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { CommentInput } from "./CommentInput.js";
 import { sanitizeHtml } from "~/lib/sanitize.js";
 
+interface CommentTarget {
+  entityType: CommentEntityType;
+  entityId: string;
+}
+
 interface CommentAuthor {
   id: string;
   name: string | null;
@@ -32,7 +38,7 @@ interface CommentItem {
 }
 
 interface CommentThreadProps {
-  entityId: string;
+  commentTarget: CommentTarget;
 }
 
 function formatRelativeTime(date: Date | string): string {
@@ -110,18 +116,16 @@ function CommentBody({ body }: { body: string }) {
 
 function SingleComment({
   comment,
-  entityId,
+  commentTarget,
   isReply = false,
 }: {
   comment: CommentItem | CommentReply;
-  entityId: string;
+  commentTarget: CommentTarget;
   isReply?: boolean;
 }) {
   const [showReplyInput, setShowReplyInput] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const utils = trpc.useUtils();
-  const commentTarget = { entityType: "estimate" as const, entityId };
-
   const createMutation = trpc.comment.create.useMutation({
     onSuccess: () => {
       setShowReplyInput(false);
@@ -212,17 +216,17 @@ function SingleComment({
           {/* Inline reply input */}
           {showReplyInput && (
             <div className="mt-3">
-              <CommentInput
-                entityType={commentTarget.entityType}
-                entityId={entityId}
-                parentId={comment.id}
-                onSubmit={(replyBody) => {
-                  createMutation.mutate({
-                    entityType: commentTarget.entityType,
-                    entityId,
-                    parentId: comment.id,
-                    body: replyBody,
-                  });
+                <CommentInput
+                  entityType={commentTarget.entityType}
+                  entityId={commentTarget.entityId}
+                  parentId={comment.id}
+                  onSubmit={(replyBody) => {
+                    createMutation.mutate({
+                      entityType: commentTarget.entityType,
+                      entityId: commentTarget.entityId,
+                      parentId: comment.id,
+                      body: replyBody,
+                    });
                 }}
                 onCancel={() => setShowReplyInput(false)}
                 isSubmitting={createMutation.isPending}
@@ -255,7 +259,7 @@ function SingleComment({
             <SingleComment
               key={reply.id}
               comment={reply}
-              entityId={entityId}
+              commentTarget={commentTarget}
               isReply
             />
           ))}
@@ -265,9 +269,8 @@ function SingleComment({
   );
 }
 
-export function CommentThread({ entityId }: CommentThreadProps) {
+export function CommentThread({ commentTarget }: CommentThreadProps) {
   const utils = trpc.useUtils();
-  const commentTarget = { entityType: "estimate" as const, entityId };
 
   const commentsQuery = trpc.comment.list.useQuery(
     commentTarget,
@@ -308,7 +311,7 @@ export function CommentThread({ entityId }: CommentThreadProps) {
             <SingleComment
               key={comment.id}
               comment={comment}
-              entityId={entityId}
+              commentTarget={commentTarget}
             />
           ))}
         </div>
@@ -318,11 +321,11 @@ export function CommentThread({ entityId }: CommentThreadProps) {
       <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
         <CommentInput
           entityType={commentTarget.entityType}
-          entityId={entityId}
+          entityId={commentTarget.entityId}
           onSubmit={(body) => {
             createMutation.mutate({
               entityType: commentTarget.entityType,
-              entityId,
+              entityId: commentTarget.entityId,
               body,
             });
           }}

apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx

@@ -42,6 +42,19 @@ type BudgetForecastRow = {
   pctUsed: number;
   activeAssignmentCount?: number;
   calendarLocations?: BudgetForecastLocation[];
+  derivation?: {
+    periodStart: string;
+    periodEnd: string;
+    calendarContextCount: number;
+    holidayAwareAssignmentCount: number;
+    fallbackAssignmentCount: number;
+    baseBurnRateCents: number;
+    adjustedBurnRateCents: number;
+    publicHolidayDayEquivalent: number;
+    publicHolidayCostDeductionCents: number;
+    absenceDayEquivalent: number;
+    absenceCostDeductionCents: number;
+  } | null;
 };
 
 function formatCurrency(cents: number | undefined): string {
@@ -49,6 +62,11 @@ function formatCurrency(cents: number | undefined): string {
   return `${(cents / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} €`;
 }
 
+function formatDayEquivalent(value: number | undefined): string {
+  if (value === undefined) return "—";
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
 function formatLocation(location: BudgetForecastLocation): string {
   const parts = [
     location.countryCode ?? location.countryName ?? null,
@@ -65,7 +83,7 @@ function SummaryCard({
 }: {
   label: string;
   value: string;
-  helper: string;
+  helper?: string;
 }) {
   return (
     <div className="rounded-2xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/40">
@@ -73,7 +91,9 @@ function SummaryCard({
         {label}
       </div>
       <div className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{value}</div>
-      <div className="mt-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">{helper}</div>
+      {helper ? (
+        <div className="mt-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">{helper}</div>
+      ) : null}
     </div>
   );
 }
@@ -113,6 +133,9 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
     acc.remainingCents += row.remainingCents ?? Math.max(0, row.budgetCents - row.spentCents);
     acc.burnRate += row.burnRate;
     acc.activeAssignmentCount += row.activeAssignmentCount ?? 0;
+    acc.baseBurnRateCents += row.derivation?.baseBurnRateCents ?? row.burnRate;
+    acc.publicHolidayCostDeductionCents += row.derivation?.publicHolidayCostDeductionCents ?? 0;
+    acc.absenceCostDeductionCents += row.derivation?.absenceCostDeductionCents ?? 0;
     return acc;
   }, {
     budgetCents: 0,
@@ -120,6 +143,9 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
     remainingCents: 0,
     burnRate: 0,
     activeAssignmentCount: 0,
+    baseBurnRateCents: 0,
+    publicHolidayCostDeductionCents: 0,
+    absenceCostDeductionCents: 0,
   }), [rows]);
 
   if (isLoading && !data) {
@@ -154,22 +180,26 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
         <SummaryCard
           label="Projects"
           value={String(rows.length)}
-          helper={`${totals.activeAssignmentCount} active assignments in scope`}
+          {...(showDetails ? { helper: `${totals.activeAssignmentCount} active assignments in scope` } : {})}
         />
         <SummaryCard
           label="Budget"
           value={formatCurrency(totals.budgetCents)}
-          helper={`${formatCurrency(totals.spentCents)} spent`}
+          {...(showDetails ? { helper: `${formatCurrency(totals.spentCents)} spent` } : {})}
         />
         <SummaryCard
           label="Remaining"
           value={formatCurrency(totals.remainingCents)}
-          helper={`${rows.filter((row) => row.remainingCents !== undefined && row.remainingCents <= 0).length} exhausted`}
+          {...(showDetails
+            ? { helper: `${rows.filter((row) => row.remainingCents !== undefined && row.remainingCents <= 0).length} exhausted` }
+            : {})}
         />
         <SummaryCard
           label="Burn / Month"
           value={formatCurrency(totals.burnRate)}
-          helper="Holiday- and absence-adjusted active burn"
+          {...(showDetails ? {
+            helper: `Base ${formatCurrency(totals.baseBurnRateCents)} · Hol -${formatCurrency(totals.publicHolidayCostDeductionCents)} · Abs -${formatCurrency(totals.absenceCostDeductionCents)}`,
+          } : {})}
         />
       </div>
       <div className="overflow-auto flex-1">
@@ -200,15 +230,21 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
                   </div>
                   <div className="mt-1 text-[10px] font-normal leading-4 text-gray-500 dark:text-gray-400">
                     {row.clientName ?? "No client"}
-                    {!showDetails && row.calendarLocations && row.calendarLocations.length > 0
-                      ? ` · ${formatLocation(row.calendarLocations[0]!)}`
-                      : ""}
                   </div>
                   {showDetails ? (
                     <div className="mt-1 space-y-1 text-[10px] font-normal leading-4 text-gray-500 dark:text-gray-400">
                       <div className="grid gap-x-3 gap-y-0.5 sm:grid-cols-2">
                         <div>{row.activeAssignmentCount ?? 0} active assignments</div>
                         <div>Remaining {formatCurrency(row.remainingCents ?? Math.max(0, row.budgetCents - row.spentCents))}</div>
+                        {row.derivation ? (
+                          <>
+                            <div>{row.derivation.calendarContextCount} calendar bases</div>
+                            <div>
+                              {row.derivation.holidayAwareAssignmentCount} holiday-aware
+                              {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                            </div>
+                          </>
+                        ) : null}
                       </div>
                       <div className="flex flex-wrap gap-1">
                         {row.calendarLocations && row.calendarLocations.length > 0 ? (
@@ -254,7 +290,22 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
                   </div>
                   {showDetails ? (
                     <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">
-                      <div>{row.activeAssignmentCount ?? 0} active assignments</div>
+                      {row.derivation ? (
+                        <>
+                          <div>
+                            Base {formatCurrency(row.derivation.baseBurnRateCents)} {"->"} Adj {formatCurrency(row.derivation.adjustedBurnRateCents)}
+                          </div>
+                          <div>
+                            Hol -{formatCurrency(row.derivation.publicHolidayCostDeductionCents)} ({formatDayEquivalent(row.derivation.publicHolidayDayEquivalent)}d) · Abs -{formatCurrency(row.derivation.absenceCostDeductionCents)} ({formatDayEquivalent(row.derivation.absenceDayEquivalent)}d)
+                          </div>
+                          <div>
+                            {row.derivation.holidayAwareAssignmentCount} holiday-aware assignment{row.derivation.holidayAwareAssignmentCount === 1 ? "" : "s"}
+                            {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                          </div>
+                        </>
+                      ) : (
+                        <div>{row.activeAssignmentCount ?? 0} active assignments</div>
+                      )}
                       {(row.calendarLocations ?? []).slice(0, 3).map((location) => (
                         <div key={`${location.countryCode ?? location.countryName ?? "na"}:${location.federalState ?? "na"}:${location.metroCityName ?? "na"}`}>
                           {formatLocation(location)} · {location.activeAssignmentCount ?? 0}x · {formatCurrency(location.burnRateCents)}

apps/web/src/components/dashboard/widgets/DemandWidget.tsx

@@ -53,6 +53,17 @@ function formatDemandSource(source: DemandDerivation["demandSource"] | undefined
   return "No demand basis";
 }
 
+function renderCalendarBasis(derivation: DemandDerivation): string {
+  if (derivation.calendarLocations.length === 0) {
+    return "No location-based booking basis";
+  }
+
+  return derivation.calendarLocations
+    .slice(0, 2)
+    .map((location) => `${formatLocation(location)} (${formatHours(location.allocatedHours)})`)
+    .join(" · ");
+}
+
 export function DemandWidget({ config, onConfigChange }: WidgetProps) {
   const showDetails = config.showDetails === true;
   const groupBy = (config.groupBy as GroupBy) || "project";
@@ -198,21 +209,15 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                       row.name
                     )}
                   </div>
-                  {showDetails && groupBy === "project" && row.derivation ? (
+                  {showDetails && row.derivation ? (
                     <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500">
                       <div>
                         {row.derivation.periodStart} to {row.derivation.periodEnd}
                       </div>
-                      <div>
-                        {row.derivation.calendarLocations.length > 0
-                          ? row.derivation.calendarLocations
-                            .slice(0, 2)
-                            .map((location) =>
-                              `${formatLocation(location)} (${formatHours(location.allocatedHours)})`,
-                            )
-                            .join(" · ")
-                          : "No location-based booking basis"}
-                      </div>
+                      <div>{renderCalendarBasis(row.derivation)}</div>
+                      {groupBy !== "project" ? (
+                        <div>{formatHours(row.derivation.periodWorkingHoursBase)} per 1.0 FTE base</div>
+                      ) : null}
                       {row.derivation.calendarLocations.length > 2 ? (
                         <div>+ {row.derivation.calendarLocations.length - 2} more calendar contexts</div>
                       ) : null}
@@ -221,7 +226,7 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                 </td>
                 <td className="px-3 py-2 text-right align-top">
                   <div className="text-gray-700">{row.allocatedHours}h</div>
-                  {showDetails && groupBy === "project" && row.derivation ? (
+                  {showDetails && row.derivation ? (
                     <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500">
                       <div>{row.derivation.calendarLocations.length} calendar basis{row.derivation.calendarLocations.length === 1 ? "" : "es"}</div>
                       <div>{row.resourceCount} resource{row.resourceCount === 1 ? "" : "s"} in scope</div>
@@ -262,7 +267,7 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                 )}
                 <td className="px-3 py-2 text-right align-top text-gray-500">
                   <div>{row.resourceCount}</div>
-                  {showDetails && groupBy === "project" && row.derivation?.calendarLocations.length ? (
+                  {showDetails && row.derivation?.calendarLocations.length ? (
                     <div className="mt-1 text-[10px] leading-4 text-gray-500">
                       {row.derivation.calendarLocations.reduce((sum, location) => sum + location.resourceCount, 0)} resource entries across locations
                     </div>

apps/web/src/components/dashboard/widgets/PeakTimesChart.tsx

@@ -7,10 +7,23 @@ type PeakTimesChartRow = {
   label: string;
   bookedHours: number;
   capacityHours: number;
+  baseAvailableHours: number;
+  holidayHoursDeduction: number;
+  absenceDayEquivalent: number;
+  absenceHoursDeduction: number;
   utilizationPct: number;
   remainingHours: number;
   overbookedHours: number;
   isCurrentPeriod: boolean;
+  calendarContextCount: number;
+  calendarLocations: Array<{
+    countryCode: string | null;
+    countryName: string | null;
+    federalState: string | null;
+    metroCityName: string | null;
+    resourceCount: number;
+    effectiveAvailableHours: number;
+  }>;
 };
 
 interface PeakTimesChartProps {
@@ -26,6 +39,16 @@ function formatHours(value: number): string {
   }).format(value);
 }
 
+function formatDayEquivalent(value: number): string {
+  return Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1);
+}
+
+function formatLocation(input: PeakTimesChartRow["calendarLocations"][number]): string {
+  const parts = [input.countryCode ?? input.countryName, input.federalState, input.metroCityName]
+    .filter((part): part is string => Boolean(part));
+  return parts.length > 0 ? parts.join(" / ") : "No calendar context";
+}
+
 function utilizationBarTone(utilizationPct: number): string {
   if (utilizationPct > 100) return "bg-red-500";
   if (utilizationPct > 75) return "bg-emerald-500";
@@ -132,7 +155,19 @@ export default function PeakTimesChart({
                   key={row.period}
                   type="button"
                   className="group flex h-full min-w-0 flex-col items-center rounded-2xl px-1 text-left transition-colors"
-                  title={`${row.label}: ${row.utilizationPct}% utilization, ${formatHours(row.bookedHours)}h booked, ${formatHours(row.capacityHours)}h capacity, ${formatHours(row.remainingHours)}h free, ${formatHours(row.overbookedHours)}h overbooked`}
+                  title={[
+                    `${row.label}: ${row.utilizationPct}% utilization`,
+                    `${formatHours(row.bookedHours)}h booked`,
+                    `${formatHours(row.capacityHours)}h effective capacity`,
+                    `${formatHours(row.baseAvailableHours)}h base`,
+                    `${formatHours(row.holidayHoursDeduction)}h holidays`,
+                    `${formatHours(row.absenceHoursDeduction)}h absences (${formatDayEquivalent(row.absenceDayEquivalent)}d)`,
+                    `${row.calendarContextCount} calendar base${row.calendarContextCount === 1 ? "" : "s"}`,
+                    ...row.calendarLocations.slice(0, 3).map((location) =>
+                      `${formatLocation(location)}: ${location.resourceCount}x, ${formatHours(location.effectiveAvailableHours)}h capacity`),
+                    `${formatHours(row.remainingHours)}h free`,
+                    `${formatHours(row.overbookedHours)}h overbooked`,
+                  ].join(", ")}
                   onMouseEnter={() => setHoveredPeriod(row.period)}
                   onMouseLeave={() => setHoveredPeriod((current) => (current === row.period ? null : current))}
                   onClick={() => onSelectedPeriodChange?.(row.period)}

apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx

@@ -10,6 +10,51 @@ import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/Widge
 import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 import { formatMoney } from "~/lib/format.js";
 
+type ProjectHealthRow = {
+  id: string;
+  projectName: string;
+  shortCode: string;
+  status: string;
+  clientId: string | null;
+  clientName: string | null;
+  budgetHealth: number;
+  staffingHealth: number;
+  timelineHealth: number;
+  compositeScore: number;
+  budgetCents?: number | null;
+  spentCents?: number;
+  remainingBudgetCents?: number | null;
+  budgetUtilizationPercent?: number | null;
+  demandHeadcountTotal?: number;
+  demandHeadcountFilled?: number;
+  demandHeadcountOpen?: number;
+  demandRequirementCount?: number;
+  plannedEndDate?: string | Date | null;
+  daysUntilEndDate?: number | null;
+  timelineStatus?: "ON_TRACK" | "DUE_SOON" | "OVERDUE" | "UNSCHEDULED" | null;
+  calendarLocations?: Array<{
+    countryCode?: string | null;
+    countryName?: string | null;
+    federalState?: string | null;
+    metroCityName?: string | null;
+    assignmentCount: number;
+    spentCents: number;
+  }>;
+  derivation?: {
+    periodStart: string;
+    periodEnd: string;
+    calendarContextCount: number;
+    holidayAwareAssignmentCount: number;
+    fallbackAssignmentCount: number;
+    baseSpentCents: number;
+    adjustedSpentCents: number;
+    publicHolidayDayEquivalent: number;
+    publicHolidayCostDeductionCents: number;
+    absenceDayEquivalent: number;
+    absenceCostDeductionCents: number;
+  } | null;
+};
+
 function healthDot(value: number): string {
   if (value >= 70) return "bg-green-500";
   if (value >= 40) return "bg-amber-400";
@@ -69,6 +114,11 @@ function formatLocation(location: {
   return parts.length > 0 ? parts.join(" / ") : "No calendar context";
 }
 
+function formatDayEquivalent(value?: number | null): string {
+  if (value == null) return "—";
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
 export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
   const showDetails = config.showDetails === true;
   const { clients } = useWidgetFilterOptions({ clients: true });
@@ -90,7 +140,7 @@ export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
   const clientId = (config.clientId as string) ?? "";
 
   const rows = useMemo(() => {
-    const all = data ?? [];
+    const all = (data ?? []) as ProjectHealthRow[];
     return all.filter((r) => {
       if (search && !r.projectName.toLowerCase().includes(search) && !r.shortCode.toLowerCase().includes(search)) return false;
       if (clientId && r.clientId !== clientId) return false;
@@ -174,6 +224,22 @@ export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
                       <div>
                         Timeline: {formatShortDate(row.plannedEndDate)} · {formatTimeline(row.daysUntilEndDate, row.timelineStatus)}
                       </div>
+                      {row.derivation ? (
+                        <>
+                          <div>
+                            Spend basis: {row.derivation.calendarContextCount} calendar bases · {row.derivation.holidayAwareAssignmentCount} holiday-aware
+                            {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                          </div>
+                          <div>
+                            Base {formatMoney(row.derivation.baseSpentCents)} {"->"} Effective {formatMoney(row.derivation.adjustedSpentCents)}
+                          </div>
+                          <div>
+                            Holidays -{formatMoney(row.derivation.publicHolidayCostDeductionCents)} ({formatDayEquivalent(row.derivation.publicHolidayDayEquivalent)}d)
+                            {" · "}
+                            Absence -{formatMoney(row.derivation.absenceCostDeductionCents)} ({formatDayEquivalent(row.derivation.absenceDayEquivalent)}d)
+                          </div>
+                        </>
+                      ) : null}
                       {(row.calendarLocations ?? []).length > 0 ? (
                         <div>
                           Calendar basis: {(row.calendarLocations ?? [])

apps/web/src/components/estimates/EstimateWorkspaceClient.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import dynamic from "next/dynamic";
 import { EstimateExportFormat } from "@capakraken/shared";
 import { clsx } from "clsx";
+import { useSession } from "next-auth/react";
 import type {
   EstimateWorkspaceView,
   WorkspaceTab,
@@ -113,17 +114,19 @@ function ActionNotice({
 }
 
 export function EstimateWorkspaceClient({ estimateId }: { estimateId: string }) {
+  const { status: sessionStatus } = useSession();
   const [tab, setTab] = useState<WorkspaceTab>("overview");
   const [isEditing, setIsEditing] = useState(false);
   const [actionMessage, setActionMessage] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const { canEdit, canViewCosts } = usePermissions();
+  const isPermissionsLoading = sessionStatus === "loading";
   const utils = trpc.useUtils();
 
   const detailQuery = trpc.estimate.getById.useQuery(
     { id: estimateId },
     {
-      enabled: canViewCosts,
+      enabled: canViewCosts && !isPermissionsLoading,
       staleTime: 15_000,
     },
   );
@@ -132,10 +135,16 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
   const createRevisionMutation = trpc.estimate.createRevision.useMutation();
   const createExportMutation = trpc.estimate.createExport.useMutation();
   const createPlanningHandoffMutation = trpc.estimate.createPlanningHandoff.useMutation();
+  const estimateCommentTarget = { entityType: "estimate" as const, entityId: estimateId };
+  const canLoadCommentCount =
+    canViewCosts
+    && !isPermissionsLoading
+    && detailQuery.status === "success"
+    && detailQuery.data != null;
 
   const commentCountQuery = trpc.comment.count.useQuery(
-    { entityType: "estimate", entityId: estimateId },
-    { enabled: canViewCosts, staleTime: 30_000 },
+    estimateCommentTarget,
+    { enabled: canLoadCommentCount, staleTime: 30_000 },
   );
   const commentCount = commentCountQuery.data ?? 0;
 
@@ -281,7 +290,9 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
         </div>
       </div>
 
-      {!canViewCosts ? (
+      {isPermissionsLoading ? (
+        <EmptyState>Loading estimate workspace...</EmptyState>
+      ) : !canViewCosts ? (
         <EmptyState>Your role can access the estimate list, but not the detailed financial workspace.</EmptyState>
       ) : detailQuery.isLoading ? (
         <EmptyState>Loading estimate workspace...</EmptyState>
@@ -364,7 +375,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
                   <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-50">
                     Comments
                   </h2>
-                  <CommentThread entityId={estimate.id} />
+                  <CommentThread commentTarget={estimateCommentTarget} />
                 </div>
               )}
             </>

apps/web/src/components/reports/reportBuilderExplainability.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildReportWorkbookSheets,
+  buildResourceMonthExplainabilitySheetRows,
+} from "./reportBuilderExplainability.js";
+
+describe("reportBuilderExplainability", () => {
+  it("builds a readable explainability sheet for resource month reports", () => {
+    const rows = buildResourceMonthExplainabilitySheetRows(
+      {
+        entity: "resource_month",
+        periodMonth: "2026-01",
+        locationContextColumns: ["countryCode", "federalState"],
+        holidayMetricColumns: ["monthlyPublicHolidayCount"],
+        absenceMetricColumns: ["monthlyAbsenceHoursDeduction"],
+        capacityMetricColumns: ["monthlyBaseAvailableHours", "monthlySahHours"],
+        chargeabilityMetricColumns: ["monthlyActualChargeabilityPct"],
+        missingRecommendedColumns: ["countryName", "monthlyTargetHours"],
+        notes: ["SAH is holiday-adjusted."],
+      },
+      (column) => ({
+        countryCode: "Country Code",
+        federalState: "Federal State",
+        monthlyPublicHolidayCount: "Holiday Dates",
+        monthlyAbsenceHoursDeduction: "Absence Hours Deduction",
+        monthlyBaseAvailableHours: "Base Available Hours",
+        monthlySahHours: "SAH",
+        monthlyActualChargeabilityPct: "Actual Chargeability (%)",
+        countryName: "Country",
+        monthlyTargetHours: "Target Hours",
+      }[column] ?? column),
+    );
+
+    expect(rows).toEqual([
+      ["Resource Month Explainability"],
+      ["Period Month", "2026-01"],
+      ["Location Context Columns", "Country Code", "Federal State"],
+      ["Holiday Metric Columns", "Holiday Dates"],
+      ["Absence Metric Columns", "Absence Hours Deduction"],
+      ["Capacity Metric Columns", "Base Available Hours", "SAH"],
+      ["Chargeability Metric Columns", "Actual Chargeability (%)"],
+      ["Missing Recommended Columns", "Country", "Target Hours"],
+      [],
+      ["Notes"],
+      ["SAH is holiday-adjusted."],
+    ]);
+  });
+
+  it("adds grouped report rows and an explainability sheet to workbook output", () => {
+    const sheets = buildReportWorkbookSheets({
+      columns: ["displayName", "monthlySahHours"],
+      rows: [
+        { displayName: "Alice", monthlySahHours: 160 },
+        { displayName: "Bob", monthlySahHours: 152 },
+      ],
+      groups: [{ key: "BY", label: "Bayern", rowCount: 2, startIndex: 0 }],
+      groupBy: "federalState",
+      explainability: {
+        entity: "resource_month",
+        periodMonth: "2026-01",
+        locationContextColumns: [],
+        holidayMetricColumns: [],
+        absenceMetricColumns: [],
+        capacityMetricColumns: [],
+        chargeabilityMetricColumns: [],
+        missingRecommendedColumns: [],
+        notes: [],
+      },
+      resolveColumnLabel: (column) => ({
+        displayName: "Name",
+        monthlySahHours: "SAH",
+        federalState: "Federal State",
+      }[column] ?? column),
+    });
+
+    expect(sheets[0]).toEqual({
+      name: "Report",
+      rows: [
+        ["Name", "SAH"],
+        ["Federal State: Bayern (2)", ""],
+        ["Alice", 160],
+        ["Bob", 152],
+      ],
+    });
+    expect(sheets[1]?.name).toBe("Explainability");
+  });
+});

apps/web/src/components/reports/reportBuilderExplainability.ts

@@ -0,0 +1,91 @@
+type WorkbookCellValue = boolean | Date | number | string | null | undefined;
+
+export type ResourceMonthReportExplainability = {
+  entity: "resource_month";
+  periodMonth: string | null;
+  locationContextColumns: string[];
+  holidayMetricColumns: string[];
+  absenceMetricColumns: string[];
+  capacityMetricColumns: string[];
+  chargeabilityMetricColumns: string[];
+  missingRecommendedColumns: string[];
+  notes: string[];
+};
+
+export type ReportExplainability = ResourceMonthReportExplainability;
+
+export type ReportExportSheet = {
+  name: string;
+  rows: WorkbookCellValue[][];
+};
+
+type BuildReportWorkbookSheetsInput = {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  groups: Array<{ key: string; label: string; rowCount: number; startIndex: number }>;
+  groupBy?: string;
+  explainability?: ReportExplainability;
+  resolveColumnLabel: (column: string) => string;
+};
+
+export function buildResourceMonthExplainabilitySheetRows(
+  explainability: ReportExplainability,
+  resolveColumnLabel: (column: string) => string,
+): WorkbookCellValue[][] {
+  const mapLabels = (columns: string[]) => (
+    columns.length > 0 ? columns.map(resolveColumnLabel) : ["none"]
+  );
+
+  return [
+    ["Resource Month Explainability"],
+    ["Period Month", explainability.periodMonth ?? "current month"],
+    ["Location Context Columns", ...mapLabels(explainability.locationContextColumns)],
+    ["Holiday Metric Columns", ...mapLabels(explainability.holidayMetricColumns)],
+    ["Absence Metric Columns", ...mapLabels(explainability.absenceMetricColumns)],
+    ["Capacity Metric Columns", ...mapLabels(explainability.capacityMetricColumns)],
+    ["Chargeability Metric Columns", ...mapLabels(explainability.chargeabilityMetricColumns)],
+    ["Missing Recommended Columns", ...mapLabels(explainability.missingRecommendedColumns)],
+    [],
+    ["Notes"],
+    ...explainability.notes.map((note) => [note]),
+  ];
+}
+
+export function buildReportWorkbookSheets(
+  input: BuildReportWorkbookSheetsInput,
+): ReportExportSheet[] {
+  const headerRow = input.columns.map(input.resolveColumnLabel);
+  const groupStartByIndex = new Map(
+    input.groups.map((group) => [group.startIndex, group] as const),
+  );
+  const groupByLabel = input.groupBy ? input.resolveColumnLabel(input.groupBy) : null;
+
+  const reportRows: WorkbookCellValue[][] = [headerRow];
+  input.rows.forEach((row, index) => {
+    const group = groupStartByIndex.get(index);
+    if (group && groupByLabel) {
+      reportRows.push([
+        `${groupByLabel}: ${group.label} (${group.rowCount})`,
+        ...Array.from({ length: Math.max(0, input.columns.length - 1) }, () => ""),
+      ]);
+    }
+
+    reportRows.push(input.columns.map((column) => {
+      const value = row[column];
+      if (value === undefined) {
+        return "";
+      }
+      return value as WorkbookCellValue;
+    }));
+  });
+
+  const sheets: ReportExportSheet[] = [{ name: "Report", rows: reportRows }];
+  if (input.explainability?.entity === "resource_month") {
+    sheets.push({
+      name: "Explainability",
+      rows: buildResourceMonthExplainabilitySheetRows(input.explainability, input.resolveColumnLabel),
+    });
+  }
+
+  return sheets;
+}

apps/web/src/components/resources/ResourceDetail.tsx

@@ -26,6 +26,7 @@ const SkillMatrixUpload = dynamic(
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ProgressRing } from "~/components/ui/ProgressRing.js";
 import { FadeIn } from "~/components/ui/FadeIn.js";
+import { CommentThread } from "~/components/comments/CommentThread.js";
 
 interface ResourceDetailProps {
   resourceId: string;
@@ -91,6 +92,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
   const resource = _resourceQuery.data as unknown as Resource | undefined;
   const loadingResource = _resourceQuery.isLoading;
   const error = _resourceQuery.error;
+  const errorCode = (error as any)?.data?.code as string | undefined;
 
   // Fetch allocations for this resource (all non-cancelled)
   const now = new Date();
@@ -119,6 +121,14 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
     },
     { enabled: !!resourceId },
   );
+  const vacationList = (vacations ?? []) as Array<{
+    endDate: Date | string;
+    id: string;
+    note?: string | null;
+    startDate: Date | string;
+    status: string;
+    type: string;
+  }>;
 
   const chargeabilityStatsResult = trpc.resource.getChargeabilityStats.useQuery(
     { includeProposed: includeProposedChargeability, resourceId },
@@ -143,7 +153,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
     );
   }
 
-  if (error || !resource) {
+  if (errorCode === "NOT_FOUND") {
     return (
       <div className="p-6">
         <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-red-700 text-sm">
@@ -154,6 +164,17 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
     );
   }
 
+  if (error || !resource) {
+    return (
+      <div className="p-6">
+        <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 text-amber-800 text-sm">
+          This resource could not be loaded right now.{" "}
+          <Link href="/resources" className="underline">Back to resources</Link>
+        </div>
+      </div>
+    );
+  }
+
   const skills = resource.skills as unknown as SkillEntry[];
   const resourceRoles = (resource as unknown as {
     resourceRoles?: { isPrimary: boolean; role: { id: string; name: string; color: string | null } }[];
@@ -433,6 +454,24 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
         onGenerated={async () => { await utils.resource.getById.invalidate({ id: resourceId }); }}
       />
 
+      <section
+        id="comments"
+        className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5 scroll-mt-24"
+      >
+        <div className="mb-4">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Discussion for this resource follows the same visibility as the resource detail itself.
+          </p>
+        </div>
+        <CommentThread
+          commentTarget={{
+            entityType: "resource",
+            entityId: resourceId,
+          }}
+        />
+      </section>
+
       {/* Main Skills Badges */}
       {mainSkills.length > 0 && (
         <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
@@ -594,11 +633,11 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
         </div>
         {loadingVacations ? (
           <div className="p-6 text-center text-gray-400 text-sm animate-pulse">Loading…</div>
-        ) : (vacations ?? []).length === 0 ? (
+        ) : vacationList.length === 0 ? (
           <div className="text-center py-8 text-gray-400 text-sm">No vacations recorded.</div>
         ) : (
           <div className="divide-y divide-gray-100">
-            {(vacations ?? []).map((v) => {
+            {vacationList.map((v) => {
               const days =
                 Math.round(
                   (new Date(v.endDate).getTime() - new Date(v.startDate).getTime()) / (1000 * 60 * 60 * 24),

apps/web/src/components/timeline/AllocationPopover.tsx

@@ -13,11 +13,13 @@ import { DateInput } from "~/components/ui/DateInput.js";
 interface AllocationPopoverProps {
   allocationId: string;
   projectId: string;
+  initialAllocation?: AllocationPopoverAssignment | null;
   onClose: () => void;
   onOpenPanel: (projectId: string) => void;
   /** Pixel position relative to the viewport */
   anchorX: number;
   anchorY: number;
+  contextDate?: Date;
 }
 
 type AllocationPopoverAssignment = Assignment<AllocationLike>;
@@ -25,10 +27,12 @@ type AllocationPopoverAssignment = Assignment<AllocationLike>;
 export function AllocationPopover({
   allocationId,
   projectId,
+  initialAllocation = null,
   onClose,
   onOpenPanel,
   anchorX,
   anchorY,
+  contextDate,
 }: AllocationPopoverProps) {
   const utils = trpc.useUtils();
   const invalidateTimeline = useInvalidateTimeline();
@@ -41,15 +45,22 @@ export function AllocationPopover({
 
   const { data: allocationView, isLoading } = trpc.allocation.listView.useQuery(
     { projectId },
-    { staleTime: 10_000 },
+    { staleTime: 10_000, enabled: !initialAllocation },
   ) as { data: AllocationReadModel<AllocationLike> | undefined; isLoading: boolean };
-  const allocation = allocationView?.assignments.find((entry) => entry.id === allocationId) as AllocationPopoverAssignment | undefined;
+  const allocation = initialAllocation ?? allocationView?.assignments.find((entry) => (
+    entry.id === allocationId
+    || entry.entityId === allocationId
+    || entry.sourceAllocationId === allocationId
+    || getPlanningEntryMutationId(entry) === allocationId
+  )) as AllocationPopoverAssignment | undefined;
 
   const [hoursPerDay, setHoursPerDay] = useState<number | null>(null);
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
   const [includeSaturday, setIncludeSaturday] = useState(false);
   const [role, setRole] = useState("");
+  const [carveStartDate, setCarveStartDate] = useState("");
+  const [carveEndDate, setCarveEndDate] = useState("");
 
   useEffect(() => {
     if (allocation) {
@@ -59,8 +70,11 @@ export function AllocationPopover({
       const meta = allocation.metadata as { includeSaturday?: boolean } | null;
       setIncludeSaturday(meta?.includeSaturday ?? false);
       setRole(allocation.role ?? "");
+      const defaultCarveDate = contextDate ? toDateInput(contextDate) : "";
+      setCarveStartDate(defaultCarveDate);
+      setCarveEndDate(defaultCarveDate);
     }
-  }, [allocation]);
+  }, [allocation, contextDate]);
 
   const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
     onSuccess: () => {
@@ -70,6 +84,14 @@ export function AllocationPopover({
     },
   });
 
+  const carveMutation = trpc.timeline.carveAllocationRange.useMutation({
+    onSuccess: () => {
+      invalidateTimeline();
+      void utils.allocation.listView.invalidate();
+      onClose();
+    },
+  });
+
   function toDateInput(d: Date): string {
     const y = d.getFullYear();
     const m = String(d.getMonth() + 1).padStart(2, "0");
@@ -89,7 +111,16 @@ export function AllocationPopover({
     });
   }
 
-  if (isLoading || !allocation) {
+  function handleCarveRange() {
+    if (!allocation || !carveStartDate || !carveEndDate) return;
+    carveMutation.mutate({
+      allocationId: getPlanningEntryMutationId(allocation),
+      startDate: new Date(carveStartDate),
+      endDate: new Date(carveEndDate),
+    });
+  }
+
+  if (isLoading) {
     const loadingPopover = (
       <div ref={ref} style={style} className="bg-white border border-gray-200 rounded-xl shadow-xl p-4 text-sm text-gray-500">
         Loading...
@@ -98,13 +129,38 @@ export function AllocationPopover({
     return typeof document === "undefined" ? loadingPopover : createPortal(loadingPopover, document.body);
   }
 
+  if (!allocation) {
+    const missingPopover = (
+      <div
+        ref={ref}
+        style={style}
+        className="flex max-w-[300px] flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-xl"
+      >
+        <div className="text-sm font-medium text-gray-800">Allocation unavailable</div>
+        <p className="text-xs text-gray-500">
+          The selected booking could not be resolved from the current timeline data.
+        </p>
+        <button
+          onClick={() => { onClose(); onOpenPanel(projectId); }}
+          className="w-full rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700"
+        >
+          Open Project Panel
+        </button>
+      </div>
+    );
+    return typeof document === "undefined" ? missingPopover : createPortal(missingPopover, document.body);
+  }
+
   const dailyCostEUR = ((hoursPerDay ?? allocation.hoursPerDay) * (allocation.resource?.lcrCents ?? 0) / 100).toFixed(2);
 
+  const carveDateRangeInvalid =
+    Boolean(carveStartDate && carveEndDate) && carveEndDate < carveStartDate;
+
   const popover = (
     <div
       ref={ref}
       style={style}
-      className="bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden"
+      className="flex max-h-[calc(100vh-32px)] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl"
     >
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
@@ -114,7 +170,7 @@ export function AllocationPopover({
         <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">&times;</button>
       </div>
 
-      <div className="p-4 space-y-3">
+      <div className="space-y-3 overflow-y-auto p-4">
         {/* Resource */}
         <div className="text-xs text-gray-500">
           Resource: <span className="font-medium text-gray-700">{allocation.resource?.displayName}</span>
@@ -182,6 +238,9 @@ export function AllocationPopover({
         {updateMutation.isError && (
           <p className="text-xs text-red-600">{updateMutation.error.message}</p>
         )}
+        {carveMutation.isError && (
+          <p className="text-xs text-red-600">{carveMutation.error.message}</p>
+        )}
 
         {/* Actions */}
         <div className="flex items-center gap-2 pt-1">
@@ -203,6 +262,57 @@ export function AllocationPopover({
           </button>
         </div>
 
+        <div className="border-t border-gray-100 pt-3 space-y-2">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-xs font-medium text-gray-700">Remove Date Range</div>
+              <div className="text-[11px] text-gray-500">
+                {contextDate ? `Prefilled from ${toDateInput(contextDate)}` : "Create a gap or split this booking."}
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">From</label>
+              <DateInput
+                value={carveStartDate}
+                onChange={setCarveStartDate}
+                min={startDate}
+                max={endDate}
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-red-300"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">To</label>
+              <DateInput
+                value={carveEndDate}
+                onChange={setCarveEndDate}
+                min={carveStartDate || startDate}
+                max={endDate}
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-red-300"
+              />
+            </div>
+          </div>
+
+          {carveDateRangeInvalid && (
+            <p className="text-xs text-red-600">End date must be on or after the start date.</p>
+          )}
+
+          <button
+            onClick={handleCarveRange}
+            disabled={
+              carveMutation.isPending ||
+              !carveStartDate ||
+              !carveEndDate ||
+              carveDateRangeInvalid
+            }
+            className="w-full py-1.5 rounded-lg text-sm font-medium transition-colors bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
+          >
+            {carveMutation.isPending ? "Removing…" : "Remove Selected Range"}
+          </button>
+        </div>
+
         {/* Link to full panel */}
         <button
           onClick={() => { onClose(); onOpenPanel(projectId); }}

apps/web/src/components/timeline/BatchAssignPopover.tsx

@@ -8,6 +8,8 @@ import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
 
+const ENTITY_COMBOBOX_OVERLAY_SELECTOR = "[data-entity-combobox-overlay='true']";
+
 interface BatchAssignPopoverProps {
   resourceIds: string[];
   startDate: Date;
@@ -49,13 +51,23 @@ export function BatchAssignPopover({
 
   // Close on outside click
   useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (ref.current?.contains(target)) {
+        return;
+      }
+      if (target instanceof Element && target.closest(ENTITY_COMBOBOX_OVERLAY_SELECTOR)) {
+        return;
+      }
+      if (ref.current) {
         onClose();
       }
     }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
   }, [onClose]);
 
   // Close on ESC
@@ -88,7 +100,7 @@ export function BatchAssignPopover({
   const popover = (
     <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"
+      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9998] 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">

apps/web/src/components/timeline/NewAllocationPopover.tsx

@@ -44,6 +44,7 @@ export function NewAllocationPopover({
     width: 320,
     estimatedHeight: 440,
     onClose,
+    ignoreSelectors: ["[data-entity-combobox-overlay='true']"],
   });
   const invalidateTimeline = useInvalidateTimeline();
 
@@ -82,7 +83,7 @@ export function NewAllocationPopover({
     <div
       ref={ref}
       style={style}
-      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"
+      className="flex max-h-[calc(100vh-32px)] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-800 dark:shadow-black/40"
     >
       {/* 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">
@@ -90,7 +91,7 @@ export function NewAllocationPopover({
         <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">
+      <div className="space-y-3 overflow-y-auto p-4">
         {/* Date range */}
         <div className="grid grid-cols-2 gap-2">
           <div>

apps/web/src/components/timeline/TimelineContext.tsx

@@ -19,6 +19,7 @@ export type TimelineDisplayMode = "strip" | "bar" | "heatmap";
 import { addDays } from "./utils.js";
 import { DEFAULT_FILTERS, type TimelineFilters } from "./TimelineFilter.js";
 import { DONE_STATUSES } from "./timelineConstants.js";
+import { toLocalDateKey } from "./timelineAvailability.js";
 
 // ─── Local timeline types ─────────────────────────────────────────────────────
 // These re-declare the shapes that the original TimelineView used internally.
@@ -133,6 +134,13 @@ export type VacationEntry = {
   startDate: Date | string;
   endDate: Date | string;
   note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
   status: string;
   requestedBy?: { name?: string | null; email: string } | null;
   approvedBy?: { name?: string | null; email: string } | null;
@@ -149,6 +157,13 @@ export type HolidayOverlayEntry = {
   startDate: Date | string;
   endDate: Date | string;
   note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
 };
 
 // ─── Context shape ──────────────────────────────────────────────────────────
@@ -224,7 +239,7 @@ export function TimelineProvider({
     ? ((session.user as { role?: string } | undefined)?.role ?? "USER")
     : null;
   const isSelfServiceTimeline = role === "USER" || role === "VIEWER";
-  const isRoleLoading = sessionStatus !== "authenticated";
+  const isRoleLoading = sessionStatus === "loading";
 
   const today = useMemo(() => {
     const d = new Date();
@@ -289,7 +304,7 @@ export function TimelineProvider({
   const blinkOverbookedDays = appPrefs.blinkOverbookedDays;
 
   // ─── Data queries ──────────────────────────────────────────────────────────
-  const mountedRef = useRef(false);
+  const initialRefreshKeyRef = useRef<string | null>(null);
   const timelineQueryInput = {
     startDate: viewStart,
     endDate: viewEnd,
@@ -338,13 +353,31 @@ export function TimelineProvider({
   const assignments = entriesView?.assignments ?? [];
   const demands = entriesView?.demands ?? [];
 
-  const {
-    data: vacationEntries = [],
-    refetch: refetchVacations,
-  } = trpc.vacation.list.useQuery(
+  // Avoid TS deep-instantiation blow-ups on the large TRPC hook type here.
+  const vacationListQuery = trpc.vacation.list.useQuery as unknown as (
+    input: {
+      startDate: Date;
+      endDate: Date;
+      status: VacationStatus[];
+      limit: number;
+    },
+    options: {
+      placeholderData: (prev: VacationEntry[] | undefined) => VacationEntry[] | undefined;
+      refetchOnWindowFocus: boolean;
+      staleTime: number;
+    },
+  ) => {
+    data: VacationEntry[] | undefined;
+    refetch: () => Promise<unknown>;
+  };
+  const vacationEntriesQuery = vacationListQuery(
     { startDate: viewStart, endDate: viewEnd, status: [VacationStatus.APPROVED, VacationStatus.PENDING], limit: 500 },
     { placeholderData: (prev) => prev, refetchOnWindowFocus: false, staleTime: 90_000 },
   );
+  const {
+    data: vacationEntries = [],
+    refetch: refetchVacations,
+  } = vacationEntriesQuery;
 
   const staffHolidayOverlayQuery = trpc.timeline.getHolidayOverlays.useQuery(
     timelineQueryInput,
@@ -370,32 +403,63 @@ export function TimelineProvider({
     refetch: refetchHolidayOverlays,
   } = activeHolidayOverlayQuery;
 
-  useEffect(() => {
-    if (mountedRef.current) return;
-    if (isRoleLoading) return;
-    mountedRef.current = true;
+  const initialRefreshKey = useMemo(
+    () =>
+      JSON.stringify({
+        isSelfServiceTimeline,
+        start: viewStart.toISOString(),
+        end: viewEnd.toISOString(),
+        clients: filters.clientIds,
+        projects: filters.projectIds,
+        chapters: filters.chapters,
+        eids: filters.eids,
+        countries: filters.countryCodes,
+      }),
+    [
+      filters.chapters,
+      filters.clientIds,
+      filters.countryCodes,
+      filters.eids,
+      filters.projectIds,
+      isSelfServiceTimeline,
+      viewEnd,
+      viewStart,
+    ],
+  );
 
-    // Harden client-side route transitions: the timeline must actively refresh
-    // its core read models once on mount instead of relying on a prefetched shell.
+  useEffect(() => {
+    if (isRoleLoading) return;
+    if (initialRefreshKeyRef.current === initialRefreshKey) return;
+    initialRefreshKeyRef.current = initialRefreshKey;
+
+    // Harden client-side route and filter transitions: refresh the core
+    // read models once per active timeline query context instead of trusting
+    // prefetched or placeholder state to self-heal.
     void refetchEntriesView();
     void refetchVacations();
     void refetchHolidayOverlays();
-  }, [isRoleLoading, refetchEntriesView, refetchHolidayOverlays, refetchVacations]);
+  }, [
+    initialRefreshKey,
+    isRoleLoading,
+    refetchEntriesView,
+    refetchHolidayOverlays,
+    refetchVacations,
+  ]);
 
   const vacationsByResource = useMemo(() => {
     const map = new Map<string, VacationEntry[]>();
     const mergedEntries = [...(vacationEntries as VacationEntry[])];
     const existingKeys = new Set(
       mergedEntries.map((vacation) => {
-        const start = new Date(vacation.startDate).toISOString().slice(0, 10);
-        const end = new Date(vacation.endDate).toISOString().slice(0, 10);
+        const start = toLocalDateKey(vacation.startDate);
+        const end = toLocalDateKey(vacation.endDate);
         return `${vacation.resourceId}:${vacation.type}:${start}:${end}`;
       }),
     );
 
     for (const holiday of holidayOverlayEntries as HolidayOverlayEntry[]) {
-      const start = new Date(holiday.startDate).toISOString().slice(0, 10);
-      const end = new Date(holiday.endDate).toISOString().slice(0, 10);
+      const start = toLocalDateKey(holiday.startDate);
+      const end = toLocalDateKey(holiday.endDate);
       const key = `${holiday.resourceId}:${holiday.type}:${start}:${end}`;
       if (existingKeys.has(key)) {
         continue;

apps/web/src/components/timeline/TimelineProjectPanel.tsx

@@ -9,10 +9,21 @@ import {
   type TimelineAssignmentEntry,
   type TimelineDemandEntry,
 } from "./TimelineContext.js";
+import {
+  applyPointerOffsetPreviewRect,
+  applyVisualOverrides,
+  getDragPointerOffset,
+  type TimelineVisualOverrides,
+} from "./allocationVisualState.js";
 import { heatmapColor } from "./heatmapUtils.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { formatDateLong } from "~/lib/format.js";
-import { TimelineTooltip } from "./TimelineTooltip.js";
+import {
+  TimelineTooltip,
+  type DemandHoverData,
+  type HeatmapHoverData,
+  type VacationHoverData,
+} from "./TimelineTooltip.js";
 import {
   ROW_HEIGHT,
   SUB_LANE_HEIGHT,
@@ -24,11 +35,31 @@ 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 {
+  buildVacationBlocksByResource,
   renderVacationBlocks,
   renderRangeOverlay,
   renderOverbookingBlink,
   type VacationBlockInfo,
 } from "./renderHelpers.js";
+import {
+  buildDemandHoverData,
+  cancelHoverFrame,
+  collectResourcesWithVacations,
+  scheduleVacationHoverUpdate,
+  updateTooltipPosition,
+} from "./timelineHover.js";
+import { buildResourceHeatmapSeries } from "./timelineHeatmap.js";
+import { buildResourceCapacitySeries } from "./timelineCapacity.js";
+import {
+  buildProjectRowMetrics,
+  type ProjectDayMetric,
+} from "./timelineProjectMetrics.js";
+import {
+  buildProjectFlatRows,
+  estimateProjectRowHeight,
+  type OpenDemandRowLayout,
+  type ProjectFlatRow,
+} from "./timelineProjectRows.js";
 
 // ─── Props ──────────────────────────────────────────────────────────────────
 
@@ -46,11 +77,13 @@ interface TimelineProjectPanelProps {
   onOpenPanel: (projectId: string) => void;
   onOpenDemandClick: (demand: TimelineDemandEntry, anchorX: number, anchorY: number) => void;
   onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
     anchorX: number,
     anchorY: number,
   ) => void;
   multiSelectState: MultiSelectState;
+  optimisticAllocations: TimelineVisualOverrides;
+  suppressHoverInteractions: boolean;
   // Layout from useTimelineLayout
   CELL_WIDTH: number;
   dates: Date[];
@@ -82,57 +115,7 @@ export interface OpenDemandAssignment {
   project?: { id: string; name: string; shortCode: string };
 }
 
-type HeatmapBreakdownEntry = {
-  projectId: string;
-  shortCode: string;
-  projectName: string;
-  orderType: string;
-  hoursPerDay: number;
-  responsiblePerson?: string | null;
-};
-
-type HeatmapHoverState = {
-  date: Date;
-  totalH: number;
-  pct: number;
-  breakdown: HeatmapBreakdownEntry[];
-};
-
-type ProjectDayMetric = {
-  projH: number;
-  totalH: number;
-};
-
-type HeatmapBreakdownAccumulator = {
-  shortCode: string;
-  projectName: string;
-  orderType: string;
-  responsiblePerson: string | null;
-  hours: number;
-};
-
-type ProjectFlatRow =
-  | {
-      type: "header";
-      key: string;
-      project: NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
-    }
-  | {
-      type: "open-demand";
-      key: string;
-      projectId: string;
-      openDemands: TimelineDemandEntry[];
-    }
-  | {
-      type: "resource";
-      key: string;
-      project: NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
-      resource: NonNullable<
-        ReturnType<typeof useTimelineContext>["projectGroups"]
-      >[number]["resourceRows"][number]["resource"];
-      allocs: TimelineAssignmentEntry[];
-      metricsKey: string;
-    };
+type HeatmapHoverState = HeatmapHoverData;
 
 const EMPTY_DAY_METRICS: ProjectDayMetric[] = [];
 const SVG_XMLNS = "http://www.w3.org/2000/svg";
@@ -154,6 +137,8 @@ function TimelineProjectPanelInner({
   onOpenDemandClick,
   onAllocationContextMenu,
   multiSelectState,
+  optimisticAllocations,
+  suppressHoverInteractions,
   CELL_WIDTH,
   dates,
   totalCanvasWidth,
@@ -175,6 +160,27 @@ function TimelineProjectPanelInner({
     today,
   } = useTimelineContext();
 
+  const visualAllocsByResource = useMemo(() => {
+    if (optimisticAllocations.size === 0) return allocsByResource;
+
+    const next = new Map<string, TimelineAssignmentEntry[]>();
+    for (const [resourceId, allocs] of allocsByResource) {
+      next.set(resourceId, applyVisualOverrides(allocs, optimisticAllocations));
+    }
+    return next;
+  }, [allocsByResource, optimisticAllocations]);
+
+  const visualProjectGroups = useMemo(
+    () => projectGroups.map((project) => ({
+      ...project,
+      resourceRows: project.resourceRows.map((row) => ({
+        ...row,
+        allocs: applyVisualOverrides(row.allocs, optimisticAllocations),
+      })),
+    })),
+    [projectGroups, optimisticAllocations],
+  );
+
   // ─── Heatmap hover (same mechanism as resource panel) ─────────────────────
   const heatmapRafRef = useRef<number | null>(null);
   const lastHeatmapDayRef = useRef<number>(-1);
@@ -193,239 +199,65 @@ function TimelineProjectPanelInner({
   const vacationTooltipPosRef = useRef({ left: 0, top: 0 });
   const demandTooltipPosRef = useRef({ left: 0, top: 0 });
 
-  const [heatmapHover, setHeatmapHover] = useState<{
-    date: Date;
-    totalH: number;
-    pct: number;
-    breakdown: HeatmapBreakdownEntry[];
-  } | null>(null);
-  const [vacationHover, setVacationHover] = useState<null | {
-    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);
-  const [demandHover, setDemandHover] = useState<null | {
-    roleName: string;
-    roleColor: string;
-    projectName: string;
-    projectShortCode?: string | null;
-    requestedHeadcount: number;
-    unfilledHeadcount: number;
-    startDate: Date | string;
-    endDate: Date | string;
-    hoursPerDay: number;
-    totalHours: number;
-    percentage?: number;
-    status?: string;
-    totalCostCents?: number;
-    dailyCostCents?: number;
-  }>(null);
+  const [heatmapHover, setHeatmapHover] = useState<HeatmapHoverState | null>(null);
+  const [vacationHover, setVacationHover] = useState<VacationHoverData | null>(null);
+  const [demandHover, setDemandHover] = useState<DemandHoverData | null>(null);
 
-  const { resourceHeatmapById, resourceTotalHoursById } = useMemo(() => {
-    const dateIndexByTime = new Map<number, number>();
-    dates.forEach((date, index) => {
-      const normalized = new Date(date);
-      normalized.setHours(0, 0, 0, 0);
-      dateIndexByTime.set(normalized.getTime(), index);
-    });
+  const resourceCapacityById = useMemo(
+    () => buildResourceCapacitySeries(visualAllocsByResource, vacationsByResource, dates),
+    [dates, vacationsByResource, visualAllocsByResource],
+  );
 
-    const nextHeatmapById = new Map<string, (HeatmapHoverState | null)[]>();
-    const nextTotalHoursById = new Map<string, number[]>();
+  const { resourceHeatmapById, resourceTotalHoursById } = useMemo(
+    () => buildResourceHeatmapSeries(visualAllocsByResource, dates, resourceCapacityById),
+    [dates, resourceCapacityById, visualAllocsByResource],
+  );
 
-    for (const [resourceId, allocs] of allocsByResource) {
-      if (allocs.length === 0) continue;
-
-      const totalHours = new Array<number>(dates.length).fill(0);
-      const breakdownMaps = Array.from({ length: dates.length }, () => new Map<string, HeatmapBreakdownAccumulator>());
-
-      for (const alloc of allocs) {
-        const current = new Date(alloc.startDate);
-        current.setHours(0, 0, 0, 0);
-        const end = new Date(alloc.endDate);
-        end.setHours(0, 0, 0, 0);
-
-        while (current.getTime() <= end.getTime()) {
-          const dayIndex = dateIndexByTime.get(current.getTime());
-          if (dayIndex !== undefined) {
-            totalHours[dayIndex] = (totalHours[dayIndex] ?? 0) + alloc.hoursPerDay;
-
-            const dayBreakdown = breakdownMaps[dayIndex];
-            if (!dayBreakdown) {
-              current.setDate(current.getDate() + 1);
-              continue;
-            }
-
-            const existing = dayBreakdown.get(alloc.projectId);
-            if (existing) {
-              existing.hours += alloc.hoursPerDay;
-            } else {
-              dayBreakdown.set(alloc.projectId, {
-                shortCode: alloc.project.shortCode,
-                projectName: alloc.project.name,
-                orderType: alloc.project.orderType,
-                responsiblePerson:
-                  (alloc.project as { responsiblePerson?: string | null }).responsiblePerson ??
-                  null,
-                hours: alloc.hoursPerDay,
-              });
-            }
-          }
-          current.setDate(current.getDate() + 1);
-        }
-      }
-
-      nextTotalHoursById.set(resourceId, totalHours);
-      nextHeatmapById.set(
-        resourceId,
-        totalHours.map((totalH, dayIndex) => {
-          if (totalH === 0) return null;
-
-          const dayBreakdown = breakdownMaps[dayIndex];
-          if (!dayBreakdown) return null;
-
-          const breakdown: HeatmapBreakdownEntry[] = [...dayBreakdown.entries()]
-            .map(([projectId, value]) => ({
-              projectId,
-              shortCode: value.shortCode,
-              projectName: value.projectName,
-              orderType: value.orderType,
-              responsiblePerson: value.responsiblePerson,
-              hoursPerDay: value.hours,
-            }))
-            .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
-
-          return {
-            date: dates[dayIndex] ?? new Date(),
-            totalH,
-            pct: (totalH / 8) * 100,
-            breakdown,
-          };
-        }),
-      );
-    }
-
-    return {
-      resourceHeatmapById: nextHeatmapById,
-      resourceTotalHoursById: nextTotalHoursById,
-    };
-  }, [allocsByResource, dates]);
+  const vacationBlocksByResource = useMemo(
+    () =>
+      buildVacationBlocksByResource(
+        vacationsByResource,
+        filters.showVacations,
+        toLeft,
+        toWidth,
+        CELL_WIDTH,
+        totalCanvasWidth,
+      ),
+    [CELL_WIDTH, filters.showVacations, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
+  );
 
   const projectRowMetrics = useMemo(() => {
-    const dateIndexByTime = new Map<number, number>();
-    dates.forEach((date, index) => {
-      const normalized = new Date(date);
-      normalized.setHours(0, 0, 0, 0);
-      dateIndexByTime.set(normalized.getTime(), index);
-    });
+    return buildProjectRowMetrics(
+      dates,
+      visualProjectGroups,
+      resourceTotalHoursById,
+      resourceCapacityById,
+    );
+  }, [dates, resourceCapacityById, resourceTotalHoursById, visualProjectGroups]);
 
-    const nextMetrics = new Map<string, ProjectDayMetric[]>();
-
-    for (const project of projectGroups) {
-      for (const { resource, allocs } of project.resourceRows) {
-        const projectHours = new Array<number>(dates.length).fill(0);
-
-        for (const alloc of allocs) {
-          const current = new Date(alloc.startDate);
-          current.setHours(0, 0, 0, 0);
-          const end = new Date(alloc.endDate);
-          end.setHours(0, 0, 0, 0);
-
-        while (current.getTime() <= end.getTime()) {
-          const dayIndex = dateIndexByTime.get(current.getTime());
-          if (dayIndex !== undefined) {
-            projectHours[dayIndex] = (projectHours[dayIndex] ?? 0) + alloc.hoursPerDay;
-          }
-          current.setDate(current.getDate() + 1);
-        }
-        }
-
-        const totalHours = resourceTotalHoursById.get(resource.id);
-        nextMetrics.set(
-          `${project.id}:${resource.id}`,
-          projectHours.map((projH, dayIndex) => ({
-            projH,
-            totalH: totalHours?.[dayIndex] ?? 0,
-          })),
-        );
-      }
-    }
-
-    return nextMetrics;
-  }, [dates, projectGroups, resourceTotalHoursById]);
-
-  const flatRows = useMemo(() => {
-    const rows: ProjectFlatRow[] = [];
-
-    for (const project of projectGroups) {
-      rows.push({ type: "header", key: `header-${project.id}`, project });
-
-      const openDemands = openDemandsByProject.get(project.id) ?? [];
-      if (openDemands.length > 0) {
-        rows.push({
-          type: "open-demand",
-          key: `open-demand-${project.id}`,
-          projectId: project.id,
-          openDemands,
-        });
-      }
-
-      for (const { resource, allocs } of project.resourceRows) {
-        rows.push({
-          type: "resource",
-          key: `${project.id}-${resource.id}`,
-          project,
-          resource,
-          allocs,
-          metricsKey: `${project.id}:${resource.id}`,
-        });
-      }
-    }
-
-    return rows;
-  }, [openDemandsByProject, projectGroups]);
+  const flatRows = useMemo(
+    () => buildProjectFlatRows(visualProjectGroups, openDemandsByProject, optimisticAllocations),
+    [openDemandsByProject, optimisticAllocations, visualProjectGroups],
+  );
 
   const rowVirtualizer = useVirtualizer({
     count: flatRows.length,
     getScrollElement: () => scrollContainerRef.current,
-    estimateSize: (index) => {
-      const row = flatRows[index];
-      if (!row) return ROW_HEIGHT;
-      if (row.type === "header") return PROJECT_HEADER_HEIGHT;
-      if (row.type === "open-demand") {
-        const laneCount = assignDemandLanes(row.openDemands).size > 0
-          ? Math.max(...assignDemandLanes(row.openDemands).values()) + 1
-          : 1;
-        return Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
-      }
-      return ROW_HEIGHT;
-    },
+    estimateSize: (index) => estimateProjectRowHeight(flatRows[index]),
     overscan: 8,
     getItemKey: (index) => flatRows[index]?.key ?? index,
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalRowHeight = rowVirtualizer.getTotalSize();
 
-  const resourcesWithVacations = useMemo(() => {
-    const result = new Set<string>();
-    for (const [resourceId, vacations] of vacationsByResource) {
-      if (vacations.length > 0) {
-        result.add(resourceId);
-      }
-    }
-    return result;
-  }, [vacationsByResource]);
+  const resourcesWithVacations = useMemo(
+    () => collectResourcesWithVacations(vacationsByResource),
+    [vacationsByResource],
+  );
 
   const handleRowHeatmapMove = useCallback(
     (e: React.MouseEvent, resourceId: string) => {
-      heatmapTooltipPosRef.current = { left: e.clientX + 16, top: e.clientY - 52 };
-      if (heatmapTooltipRef.current) {
-        heatmapTooltipRef.current.style.left = `${heatmapTooltipPosRef.current.left}px`;
-        heatmapTooltipRef.current.style.top = `${heatmapTooltipPosRef.current.top}px`;
-      }
+      updateTooltipPosition(heatmapTooltipPosRef, heatmapTooltipRef, e.clientX, e.clientY, 16, -52);
 
       const rect = e.currentTarget.getBoundingClientRect();
       const dayIndex = Math.floor((e.clientX - rect.left) / CELL_WIDTH);
@@ -477,52 +309,28 @@ function TimelineProjectPanelInner({
         return;
       }
 
-      vacationTooltipPosRef.current = { left: e.clientX + 14, top: e.clientY - 8 };
-      if (vacationTooltipRef.current) {
-        vacationTooltipRef.current.style.left = `${vacationTooltipPosRef.current.left}px`;
-        vacationTooltipRef.current.style.top = `${vacationTooltipPosRef.current.top}px`;
-      }
-
-      const rect = e.currentTarget.getBoundingClientRect();
-      const clientX = e.clientX;
-      if (vacationHoverRafRef.current !== null) return;
-
-      vacationHoverRafRef.current = requestAnimationFrame(() => {
-        vacationHoverRafRef.current = null;
-        const date = xToDate(clientX, rect);
-        date.setHours(0, 0, 0, 0);
-        const time = date.getTime();
-        const resourceVacations = vacationsByResource.get(resourceId) ?? [];
-        const hit =
-          resourceVacations.find((vacation) => {
-            const start = new Date(vacation.startDate);
-            start.setHours(0, 0, 0, 0);
-            const end = new Date(vacation.endDate);
-            end.setHours(0, 0, 0, 0);
-            return time >= start.getTime() && time <= end.getTime();
-          }) ?? null;
-
-        const nextKey = hit ? `${resourceId}:${hit.id}` : null;
-        if (nextKey === hoveredVacationKeyRef.current) return;
-
-        hoveredVacationKeyRef.current = nextKey;
-        startTransition(() => {
-          setVacationHover(hit);
-        });
+      updateTooltipPosition(vacationTooltipPosRef, vacationTooltipRef, e.clientX, e.clientY, 14, -8);
+      scheduleVacationHoverUpdate({
+        frameRef: vacationHoverRafRef,
+        hoveredKeyRef: hoveredVacationKeyRef,
+        resourceId,
+        clientX: e.clientX,
+        rect: e.currentTarget.getBoundingClientRect(),
+        xToDate,
+        vacations: vacationsByResource.get(resourceId) ?? [],
+        onHoverChange: (hit) => {
+          startTransition(() => {
+            setVacationHover(hit);
+          });
+        },
       });
     },
     [resourcesWithVacations, vacationsByResource, xToDate],
   );
 
   const clearHoverTooltips = useCallback(() => {
-    if (heatmapRafRef.current !== null) {
-      cancelAnimationFrame(heatmapRafRef.current);
-      heatmapRafRef.current = null;
-    }
-    if (vacationHoverRafRef.current !== null) {
-      cancelAnimationFrame(vacationHoverRafRef.current);
-      vacationHoverRafRef.current = null;
-    }
+    cancelHoverFrame(heatmapRafRef);
+    cancelHoverFrame(vacationHoverRafRef);
 
     const shouldClearHeatmap = lastHeatmapDayRef.current !== -1;
     const shouldClearVacation = hoveredVacationKeyRef.current !== null;
@@ -543,37 +351,10 @@ function TimelineProjectPanelInner({
 
   const handleDemandHoverMove = useCallback(
     (e: React.MouseEvent, demand: TimelineDemandEntry) => {
-      demandTooltipPosRef.current = { left: e.clientX + 16, top: e.clientY - 36 };
-      if (demandTooltipRef.current) {
-        demandTooltipRef.current.style.left = `${demandTooltipPosRef.current.left}px`;
-        demandTooltipRef.current.style.top = `${demandTooltipPosRef.current.top}px`;
-      }
-
-      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);
+      updateTooltipPosition(demandTooltipPosRef, demandTooltipRef, e.clientX, e.clientY, 16, -36);
 
       startTransition(() => {
-        setDemandHover({
-          roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
-          roleColor: demand.roleEntity?.color ?? "#f59e0b",
-          projectName: demand.project.name,
-          projectShortCode: demand.project.shortCode,
-          requestedHeadcount: demand.requestedHeadcount,
-          unfilledHeadcount: demand.unfilledHeadcount,
-          startDate: demand.startDate,
-          endDate: demand.endDate,
-          hoursPerDay: demand.hoursPerDay,
-          totalHours: demand.hoursPerDay * days,
-          percentage: demand.percentage,
-          status: demand.status,
-          ...(demand.dailyCostCents > 0
-            ? {
-                totalCostCents: demand.dailyCostCents * days,
-                dailyCostCents: demand.dailyCostCents,
-              }
-            : {}),
-        });
+        setDemandHover(buildDemandHoverData(demand));
       });
     },
     [],
@@ -581,13 +362,18 @@ function TimelineProjectPanelInner({
 
   useEffect(
     () => () => {
-      if (heatmapRafRef.current !== null) cancelAnimationFrame(heatmapRafRef.current);
-      if (vacationHoverRafRef.current !== null) cancelAnimationFrame(vacationHoverRafRef.current);
+      cancelHoverFrame(heatmapRafRef);
+      cancelHoverFrame(vacationHoverRafRef);
     },
     [],
   );
 
-  if (projectGroups.length === 0) {
+  useEffect(() => {
+    if (!suppressHoverInteractions) return;
+    clearHoverTooltips();
+  }, [clearHoverTooltips, suppressHoverInteractions]);
+
+  if (visualProjectGroups.length === 0) {
     return (
       <div className="text-center py-16 text-gray-400">
         No projects in this time range{activeFilterCount > 0 && " (filtered)"}.
@@ -677,11 +463,14 @@ function TimelineProjectPanelInner({
                       {gridLines}
                       {projWidth > 0 && projLeft < totalCanvasWidth && (
                         <div
+                          data-timeline-entry-type="project-bar"
+                          data-timeline-drag-preview="project-shift"
+                          data-timeline-project-id={project.id}
                           className={clsx(
-                            "absolute rounded flex items-center px-2 gap-1.5 transition-all duration-75 text-white",
+                            "absolute rounded flex items-center px-2 gap-1.5 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",
+                              : "cursor-grab transition-[opacity,box-shadow] duration-75 hover:opacity-90 hover:ring-2 hover:ring-white hover:ring-offset-1",
                           )}
                           style={{
                             left: projLeft + 2,
@@ -689,18 +478,35 @@ function TimelineProjectPanelInner({
                             top: 8,
                             height: 24,
                             backgroundColor: customColor ?? projectColor.hex + "CC",
+                            ...(isThisProjectShifting
+                              ? {
+                                  transform: `translateX(${getDragPointerOffset(
+                                    dragState.pointerDeltaX,
+                                    dragState.daysDelta,
+                                    CELL_WIDTH,
+                                  )}px)`,
+                                }
+                              : {}),
                           }}
                           onClick={() => {
                             if (!dragState.isDragging) onOpenPanel(project.id);
                           }}
-                          onMouseDown={(e) =>
+                          onMouseDown={(e) => {
+                            if (e.button === 2) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (!dragState.isDragging) {
+                                onOpenPanel(project.id);
+                              }
+                              return;
+                            }
                             onProjectBarMouseDown(e, {
                               projectId: project.id,
                               projectName: project.name,
                               startDate: project.startDate,
                               endDate: project.endDate,
-                            })
-                          }
+                            });
+                          }}
                           onTouchStart={(e) =>
                             onProjectBarTouchStart(e, {
                               projectId: project.id,
@@ -709,7 +515,13 @@ function TimelineProjectPanelInner({
                               endDate: project.endDate,
                             })
                           }
-                          onContextMenu={(e) => e.preventDefault()}
+                          onContextMenu={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (!dragState.isDragging) {
+                              onOpenPanel(project.id);
+                            }
+                          }}
                         >
                           <span className="text-xs font-semibold truncate">{project.name}</span>
                         </div>
@@ -720,7 +532,8 @@ function TimelineProjectPanelInner({
               })()
             ) : row.type === "open-demand" ? (
               renderOpenDemandRow(
-                row.openDemands,
+                row.openDemandCount,
+                row.layout,
                 row.projectId,
                 CELL_WIDTH,
                 totalCanvasWidth,
@@ -735,6 +548,7 @@ function TimelineProjectPanelInner({
                 clearHoverTooltips,
                 multiSelectState,
                 allocDragState,
+                suppressHoverInteractions,
               )
             ) : (
               <div
@@ -788,6 +602,7 @@ function TimelineProjectPanelInner({
                     });
                   }}
                   onMouseMove={(e) => {
+                    if (suppressHoverInteractions) return;
                     handleRowHeatmapMove(e, row.resource.id);
                     handleRowVacationHover(e, row.resource.id);
                   }}
@@ -812,29 +627,20 @@ function TimelineProjectPanelInner({
                     onAllocTouchStart,
                     onAllocationContextMenu,
                     multiSelectState,
+                    suppressHoverInteractions,
                   )}
                   {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;
-                        },
-                        [],
-                      ),
+                      vacationBlocksByResource.get(row.resource.id) ?? [],
                       ROW_HEIGHT,
                     )}
                   {blinkOverbookedDays &&
                     renderOverbookingBlink(
-                      allocsByResource.get(row.resource.id) ?? [],
+                      visualAllocsByResource.get(row.resource.id) ?? [],
                       dates,
                       CELL_WIDTH,
+                      resourceCapacityById.get(row.resource.id)?.capacityHoursByDay,
+                      resourceCapacityById.get(row.resource.id)?.bookingFactorsByDay,
                     )}
                   {renderRangeOverlay(
                     rangeState,
@@ -870,41 +676,9 @@ function TimelineProjectPanelInner({
 
 // ─── Pure render functions ──────────────────────────────────────────────────
 
-/** Assign lane indices to demands so overlapping bars don't stack on top of each other. */
-function assignDemandLanes(
-  demands: TimelineDemandEntry[],
-): Map<string, number> {
-  const laneMap = new Map<string, number>();
-  // Each lane tracks the latest end-date occupying it
-  const laneEnds: Date[] = [];
-
-  // Sort by start date for greedy lane assignment
-  const sorted = [...demands].sort(
-    (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
-  );
-
-  for (const d of sorted) {
-    const start = new Date(d.startDate);
-    let assigned = -1;
-    for (let i = 0; i < laneEnds.length; i++) {
-      if (laneEnds[i]! < start) {
-        assigned = i;
-        laneEnds[i] = new Date(d.endDate);
-        break;
-      }
-    }
-    if (assigned === -1) {
-      assigned = laneEnds.length;
-      laneEnds.push(new Date(d.endDate));
-    }
-    laneMap.set(d.id, assigned);
-  }
-
-  return laneMap;
-}
-
 function renderOpenDemandRow(
-  openDemands: TimelineDemandEntry[],
+  openDemandCount: number,
+  layout: OpenDemandRowLayout,
   projectId: string,
   CELL_WIDTH: number,
   totalCanvasWidth: number,
@@ -915,7 +689,7 @@ function renderOpenDemandRow(
   onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
   onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
   onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
     anchorX: number,
     anchorY: number,
   ) => void,
@@ -923,12 +697,10 @@ function renderOpenDemandRow(
   onClearHoverTooltips: () => void,
   multiSelectState: MultiSelectState,
   allocDragState: AllocDragState,
+  suppressHoverInteractions: boolean,
 ) {
-  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 * SUB_LANE_HEIGHT + 16);
+  const { visibleOpenDemands, laneMap, rowHeight } = layout;
+  if (visibleOpenDemands.length === 0) return null;
 
   return (
     <div
@@ -949,7 +721,7 @@ function renderOpenDemandRow(
           <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" : ""}
+              {openDemandCount} open demand{openDemandCount > 1 ? "s" : ""}
             </div>
           </div>
         </div>
@@ -963,7 +735,7 @@ function renderOpenDemandRow(
         {rowGridLines}
         <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) => {
+        {visibleOpenDemands.map((alloc) => {
           const allocStart = new Date(alloc.startDate);
           const allocEnd = new Date(alloc.endDate);
 
@@ -984,7 +756,26 @@ function renderOpenDemandRow(
 
           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
+          let dragTransform: string | undefined;
+
+          if (isAllocDragged) {
+            const preview = applyPointerOffsetPreviewRect({
+              left,
+              width,
+              mode: allocDragState.mode,
+              pointerOffsetX: getDragPointerOffset(
+                allocDragState.pointerDeltaX,
+                allocDragState.daysDelta,
+                CELL_WIDTH,
+              ),
+              minWidth: CELL_WIDTH,
+            });
+            left = preview.left;
+            width = preview.width;
+            dragTransform = preview.transform;
+          }
+
+          // Clamp negative left (bar starts before view) to avoid extending outside canvas.
           if (left < 0) {
             width += left;
             left = 0;
@@ -1025,6 +816,10 @@ function renderOpenDemandRow(
           return (
             <div
               key={alloc.id}
+              data-allocation-id={alloc.id}
+              data-timeline-entry-type="demand"
+              data-timeline-drag-preview="project-shift allocation"
+              data-timeline-project-id={alloc.projectId}
               className={clsx(
                 "absolute rounded-md flex items-stretch overflow-hidden z-[10] group/demand",
                 isAllocDragged
@@ -1039,8 +834,14 @@ function renderOpenDemandRow(
                 height: blockHeight,
                 backgroundColor: `${roleColor}4D`,
                 border: `2px dashed ${roleColor}B3`,
-                ...(multiDragPx && multiDragMode === "move"
-                  ? { transform: `translateX(${multiDragPx}px)` }
+                ...((multiDragPx && multiDragMode === "move") || dragTransform
+                  ? {
+                      transform: [dragTransform, multiDragPx && multiDragMode === "move"
+                        ? `translateX(${multiDragPx}px)`
+                        : null]
+                        .filter(Boolean)
+                        .join(" "),
+                    }
                   : {}),
               }}
               onMouseDown={(e) => {
@@ -1049,15 +850,20 @@ function renderOpenDemandRow(
               onContextMenu={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                if (suppressHoverInteractions) return;
                 onAllocationContextMenu(
                   { allocationId: alloc.id, projectId: alloc.projectId },
                   e.clientX,
                   e.clientY,
                 );
               }}
-              onMouseMove={(e) => onDemandHoverMove(e, alloc)}
+              onMouseMove={(e) => {
+                if (suppressHoverInteractions) return;
+                onDemandHoverMove(e, alloc);
+              }}
               onClick={(e) => {
                 e.stopPropagation();
+                if (suppressHoverInteractions) return;
                 onOpenDemandClick(alloc, e.clientX, e.clientY);
               }}
               onKeyDown={(e) => {
@@ -1066,6 +872,7 @@ function renderOpenDemandRow(
                 }
                 e.preventDefault();
                 e.stopPropagation();
+                if (suppressHoverInteractions) return;
                 const rect = e.currentTarget.getBoundingClientRect();
                 onOpenDemandClick(alloc, rect.left + rect.width / 2, rect.top + rect.height / 2);
               }}
@@ -1136,25 +943,24 @@ function renderProjectUtilOverlay(
 
   const BAND_H = 7;
   const BAR_H = ROW_HEIGHT - BAND_H - 11;
-  const REF_H = 8;
   const useHeatmapColors = displayMode === "bar";
   const svgParts: string[] = [
     `<svg xmlns="${SVG_XMLNS}" width="${totalCanvasWidth}" height="${ROW_HEIGHT}" viewBox="0 0 ${totalCanvasWidth} ${ROW_HEIGHT}" preserveAspectRatio="none" shape-rendering="crispEdges">`,
   ];
 
-  dayMetrics.forEach(({ projH, totalH }, i) => {
-    if (totalH === 0 && projH === 0) return;
+  dayMetrics.forEach(({ projH, totalH, capacityH }, i) => {
+    if ((totalH === 0 && projH === 0) || capacityH <= 0) return;
 
-    const isOver = totalH > REF_H;
+    const isOver = totalH > capacityH;
     const totalBarH = Math.max(
       projH > 0 ? 2 : 0,
-      Math.round((Math.min(totalH, REF_H) / REF_H) * BAR_H),
+      Math.round((Math.min(totalH, capacityH) / capacityH) * BAR_H),
     );
     const projBarH =
-      projH > 0 ? Math.min(totalBarH, Math.max(2, Math.round((projH / REF_H) * BAR_H))) : 0;
+      projH > 0 ? Math.min(totalBarH, Math.max(2, Math.round((projH / capacityH) * BAR_H))) : 0;
     const otherBarH = totalBarH - projBarH;
-    const projPct = (projH / REF_H) * 100;
-    const totalPct = (totalH / REF_H) * 100;
+    const projPct = (projH / capacityH) * 100;
+    const totalPct = (totalH / capacityH) * 100;
     const projColor = useHeatmapColors
       ? heatmapColor(
           projPct,
@@ -1229,11 +1035,12 @@ function renderProjectDragHandles(
   onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
   onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
   onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
     anchorX: number,
     anchorY: number,
   ) => void,
   multiSelectState: MultiSelectState,
+  suppressHoverInteractions: boolean,
 ) {
   return allocs.map((alloc) => {
     const allocStart = new Date(alloc.startDate);
@@ -1249,6 +1056,24 @@ function renderProjectDragHandles(
 
     let left = toLeft(dispStart);
     let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+    let dragTransform: string | undefined;
+
+    if (isAllocDragged) {
+      const preview = applyPointerOffsetPreviewRect({
+        left,
+        width,
+        mode: allocDragState.mode,
+        pointerOffsetX: getDragPointerOffset(
+          allocDragState.pointerDeltaX,
+          allocDragState.daysDelta,
+          CELL_WIDTH,
+        ),
+        minWidth: CELL_WIDTH,
+      });
+      left = preview.left;
+      width = preview.width;
+      dragTransform = preview.transform;
+    }
     if (width <= 0 || left >= totalCanvasWidth) return null;
 
     // Multi-drag visual offset
@@ -1283,6 +1108,10 @@ function renderProjectDragHandles(
     return (
       <div
         key={`dh-${alloc.id}`}
+        data-allocation-id={alloc.id}
+        data-timeline-entry-type="allocation"
+        data-timeline-drag-preview="project-shift allocation"
+        data-timeline-project-id={alloc.projectId}
         className={clsx(
           "absolute flex items-stretch rounded",
           hasRecurrence && "border-2 border-dashed border-brand-400/60",
@@ -1296,9 +1125,18 @@ function renderProjectDragHandles(
           width: width - 4,
           top: 2,
           bottom: 2,
-          ...(multiDragPx && multiDragMode === "move"
-              ? { transform: `translateX(${multiDragPx}px)` }
-              : {}),
+          ...((multiDragPx && multiDragMode === "move") || dragTransform
+            ? {
+                transform: [
+                  dragTransform,
+                  multiDragPx && multiDragMode === "move"
+                    ? `translateX(${multiDragPx}px)`
+                    : null,
+                ]
+                  .filter(Boolean)
+                  .join(" "),
+              }
+            : {}),
         }}
         onMouseDown={(e) => {
           if (e.button === 2) e.stopPropagation();
@@ -1306,6 +1144,7 @@ function renderProjectDragHandles(
         onContextMenu={(e) => {
           e.preventDefault();
           e.stopPropagation();
+          if (suppressHoverInteractions) return;
           onAllocationContextMenu(
             { allocationId: alloc.id, projectId: alloc.projectId },
             e.clientX,
@@ -1316,7 +1155,10 @@ function renderProjectDragHandles(
         <div
           className="flex-shrink-0 cursor-ew-resize"
           style={{ width: HANDLE_W }}
-          onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" })}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" });
+          }}
           onTouchStart={(e) => {
             e.stopPropagation();
             onAllocTouchStart(e, { ...allocInfo, mode: "resize-start" });
@@ -1327,7 +1169,10 @@ function renderProjectDragHandles(
             "flex-1 min-w-0 flex items-center",
             isAllocDragged ? "cursor-grabbing" : "cursor-grab",
           )}
-          onMouseDown={(e) => onAllocMouseDown(e, allocInfo)}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, allocInfo);
+          }}
           onTouchStart={(e) => {
             e.stopPropagation();
             onAllocTouchStart(e, allocInfo);
@@ -1342,7 +1187,10 @@ function renderProjectDragHandles(
         <div
           className="flex-shrink-0 cursor-ew-resize"
           style={{ width: HANDLE_W }}
-          onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" })}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" });
+          }}
           onTouchStart={(e) => {
             e.stopPropagation();
             onAllocTouchStart(e, { ...allocInfo, mode: "resize-end" });

apps/web/src/components/timeline/TimelineTooltip.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { GERMAN_FEDERAL_STATES } from "@capakraken/shared";
 import { createPortal } from "react-dom";
 import { formatCents, formatDateLong } from "~/lib/format.js";
 
@@ -33,11 +34,73 @@ export type VacationHoverData = {
   startDate: Date | string;
   endDate: Date | string;
   note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
   requestedBy?: { name?: string | null; email: string } | null;
   approvedBy?: { name?: string | null; email: string } | null;
   approvedAt?: Date | string | null;
 };
 
+function formatHolidayScope(scope?: string | null): string | null {
+  switch (scope) {
+    case "COUNTRY":
+      return "Country";
+    case "STATE":
+      return "State";
+    case "CITY":
+      return "City";
+    default:
+      return scope ? scope.replaceAll("_", " ") : null;
+  }
+}
+
+function formatHolidaySourceType(sourceType?: string | null): string | null {
+  switch (sourceType) {
+    case "SYSTEM":
+      return "Built-in";
+    case "CALENDAR":
+      return "Calendar";
+    default:
+      return sourceType ? sourceType.replaceAll("_", " ") : null;
+  }
+}
+
+function formatHolidayStateName(
+  federalState?: string | null,
+  countryCode?: string | null,
+): string | null {
+  if (!federalState) {
+    return null;
+  }
+
+  if (countryCode === "DE") {
+    return GERMAN_FEDERAL_STATES[federalState] ?? federalState;
+  }
+
+  return federalState;
+}
+
+function buildHolidayLocationBasis(vacation: VacationHoverData): string | null {
+  const parts = [
+    vacation.countryName
+      ? `Country: ${vacation.countryName}`
+      : vacation.countryCode
+        ? `Country: ${vacation.countryCode}`
+        : null,
+    formatHolidayStateName(vacation.federalState, vacation.countryCode)
+      ? `State: ${formatHolidayStateName(vacation.federalState, vacation.countryCode)}`
+      : null,
+    vacation.metroCityName ? `City: ${vacation.metroCityName}` : null,
+  ].filter(Boolean);
+
+  return parts.length > 0 ? parts.join(" · ") : null;
+}
+
 export type DemandHoverData = {
   roleName: string;
   roleColor: string;
@@ -67,6 +130,142 @@ interface TimelineTooltipProps {
   demandHover?: DemandHoverData | null;
 }
 
+function renderTooltipPortal(content: React.ReactNode) {
+  return typeof document === "undefined" ? content : createPortal(content, document.body);
+}
+
+function TooltipSurface({
+  children,
+  position,
+  tooltipRef,
+  className,
+  dataTestId,
+  backgroundColor,
+}: {
+  children: React.ReactNode;
+  position: { left: number; top: number };
+  tooltipRef?: React.Ref<HTMLDivElement>;
+  className: string;
+  dataTestId?: string;
+  backgroundColor: string;
+}) {
+  return (
+    <div
+      ref={tooltipRef}
+      data-testid={dataTestId}
+      style={{
+        left: position.left,
+        top: position.top,
+        backgroundColor,
+      }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TooltipMetric({
+  label,
+  value,
+  valueClassName = "font-medium text-gray-100",
+}: {
+  label: string;
+  value: React.ReactNode;
+  valueClassName?: string;
+}) {
+  return (
+    <div>
+      <div className="text-gray-500">{label}</div>
+      <div className={valueClassName}>{value}</div>
+    </div>
+  );
+}
+
+function HeatmapBreakdownList({ breakdown }: { breakdown: HeatmapHoverData["breakdown"] }) {
+  if (breakdown.length === 0) {
+    return <div className="text-[11px] text-gray-400">No bookings on this day.</div>;
+  }
+
+  return (
+    <>
+      {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.role,
+                entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
+                entry.orderType,
+              ].filter(Boolean).join(" · ")}
+            </div>
+            {entry.startDate && entry.endDate ? (
+              <div className="text-[10px] text-gray-500">
+                {entry.startDate} → {entry.endDate}
+                {entry.status && entry.status !== "CONFIRMED" ? (
+                  <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
+            {entry.hoursPerDay}h
+          </span>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function VacationSummary({
+  vacation,
+  title,
+  className,
+}: {
+  vacation: VacationHoverData;
+  title: string;
+  className?: string;
+}) {
+  const isPublicHoliday = vacation.type === "PUBLIC_HOLIDAY";
+  const scopeLabel = formatHolidayScope(vacation.scope);
+  const sourceLabel = formatHolidaySourceType(vacation.sourceType);
+  const holidayMeta = [scopeLabel, sourceLabel].filter(Boolean).join(" · ");
+  const holidayLocationBasis = isPublicHoliday ? buildHolidayLocationBasis(vacation) : null;
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-1.5">
+        <span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-amber-500" />
+        <span className="font-semibold text-amber-300">{title}</span>
+      </div>
+      <div className="mt-0.5 text-[11px] text-amber-200/80">
+        {formatDateLong(vacation.startDate)} to {formatDateLong(vacation.endDate)}
+      </div>
+      {holidayMeta ? (
+        <div className="mt-1 text-[11px] text-amber-100/75">{holidayMeta}</div>
+      ) : null}
+      {holidayLocationBasis ? (
+        <div className="mt-1 text-[11px] text-amber-100/85">{holidayLocationBasis}</div>
+      ) : null}
+      {isPublicHoliday && vacation.calendarName ? (
+        <div className="mt-1 text-[11px] text-amber-200/60">
+          Calendar: {vacation.calendarName}
+        </div>
+      ) : null}
+      {vacation.note && !isPublicHoliday ? (
+        <div className="mt-1 text-[11px] text-amber-200/60">{vacation.note}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export function TimelineTooltip({
   heatmapTooltipRef,
   heatmapTooltipPos,
@@ -79,18 +278,14 @@ export function TimelineTooltip({
   demandHover,
 }: TimelineTooltipProps) {
   const vacationTitle = vacationHover ? getVacationTitle(vacationHover) : null;
-  const renderTooltip = (content: React.ReactNode) =>
-    typeof document === "undefined" ? content : createPortal(content, document.body);
 
   if (demandHover && demandTooltipRef && demandTooltipPos) {
-    return renderTooltip(
-      <div
-        ref={demandTooltipRef}
-        style={{
-          left: demandTooltipPos.left,
-          top: demandTooltipPos.top,
-          backgroundColor: "rgba(3, 7, 18, 0.96)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={demandTooltipRef}
+        dataTestId="timeline-demand-tooltip"
+        position={demandTooltipPos}
+        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-start justify-between gap-3">
@@ -115,73 +310,58 @@ export function TimelineTooltip({
         </div>
 
         <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1.5 text-[11px]">
-          <div>
-            <div className="text-gray-500">Requested</div>
-            <div className="font-medium text-gray-100">
-              {demandHover.requestedHeadcount} {demandHover.requestedHeadcount === 1 ? "seat" : "seats"}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Open</div>
-            <div className="font-medium text-amber-300">
-              {demandHover.unfilledHeadcount} {demandHover.unfilledHeadcount === 1 ? "seat" : "seats"}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Range</div>
-            <div className="font-medium text-gray-100">
-              {formatDateLong(demandHover.startDate)} to {formatDateLong(demandHover.endDate)}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Load</div>
-            <div className="font-medium text-gray-100">
-              {demandHover.hoursPerDay}h/day · {demandHover.totalHours}h
-            </div>
-          </div>
+          <TooltipMetric
+            label="Requested"
+            value={`${demandHover.requestedHeadcount} ${demandHover.requestedHeadcount === 1 ? "seat" : "seats"}`}
+          />
+          <TooltipMetric
+            label="Open"
+            value={`${demandHover.unfilledHeadcount} ${demandHover.unfilledHeadcount === 1 ? "seat" : "seats"}`}
+            valueClassName="font-medium text-amber-300"
+          />
+          <TooltipMetric
+            label="Range"
+            value={`${formatDateLong(demandHover.startDate)} to ${formatDateLong(demandHover.endDate)}`}
+          />
+          <TooltipMetric
+            label="Load"
+            value={`${demandHover.hoursPerDay}h/day · ${demandHover.totalHours}h`}
+          />
           {typeof demandHover.percentage === "number" && demandHover.percentage > 0 ? (
-            <div>
-              <div className="text-gray-500">Allocation</div>
-              <div className="font-medium text-gray-100">{demandHover.percentage}%</div>
-            </div>
+            <TooltipMetric label="Allocation" value={`${demandHover.percentage}%`} />
           ) : null}
           {typeof demandHover.totalCostCents === "number" && demandHover.totalCostCents > 0 ? (
-            <div>
-              <div className="text-gray-500">Cost</div>
-              <div className="font-medium text-gray-100">
-                {formatCents(demandHover.totalCostCents)} EUR
-                {typeof demandHover.dailyCostCents === "number" && demandHover.dailyCostCents > 0
+            <TooltipMetric
+              label="Cost"
+              value={`${formatCents(demandHover.totalCostCents)} EUR${
+                typeof demandHover.dailyCostCents === "number" && demandHover.dailyCostCents > 0
                   ? ` · ${formatCents(demandHover.dailyCostCents)}/d`
-                  : ""}
-              </div>
-            </div>
+                  : ""
+              }`}
+            />
           ) : null}
         </div>
 
         <div className="mt-2 border-t border-gray-800/90 pt-2 text-[10px] uppercase tracking-[0.14em] text-gray-500">
           Click for details and actions
         </div>
-      </div>,
+      </TooltipSurface>,
     );
   }
 
   // When both are active, render a single merged tooltip using the heatmap position
   if (heatmapHover && vacationHover) {
-    return renderTooltip(
-      <div
-        ref={(el) => {
-          // Wire both refs to the same element so position updates work from either handler
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={(el) => {
           (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)",
+          // Keep the merged tooltip attached to the heatmap pointer path only.
+          (vacationTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = null;
         }}
+        position={heatmapTooltipPos}
+        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">
@@ -189,72 +369,26 @@ export function TimelineTooltip({
           </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.role,
-                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
-                      entry.orderType,
-                    ].filter(Boolean).join(" · ")}
-                  </div>
-                  {entry.startDate && entry.endDate && (
-                    <div className="text-[10px] text-gray-500">
-                      {entry.startDate} → {entry.endDate}
-                      {entry.status && entry.status !== "CONFIRMED" && (
-                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
-                      )}
-                    </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>
-          )}
+          <HeatmapBreakdownList breakdown={heatmapHover.breakdown} />
         </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">{vacationTitle}</span>
-          </div>
-          <div className="mt-0.5 text-[11px] text-amber-200/80">
-            {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-          </div>
-          {vacationHover.note && vacationHover.type !== "PUBLIC_HOLIDAY" ? (
-            <div className="mt-1 text-[11px] text-amber-200/60">{vacationHover.note}</div>
-          ) : null}
-        </div>
-      </div>,
+        <VacationSummary
+          vacation={vacationHover}
+          title={vacationTitle ?? "Vacation"}
+          className="mt-2 border-t border-amber-700/40 pt-2"
+        />
+      </TooltipSurface>,
     );
   }
 
   // Heatmap only
   if (heatmapHover) {
-    return renderTooltip(
-      <div
-        ref={heatmapTooltipRef}
-        style={{
-          left: heatmapTooltipPos.left,
-          top: heatmapTooltipPos.top,
-          backgroundColor: "rgba(3, 7, 18, 0.96)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={heatmapTooltipRef}
+        position={heatmapTooltipPos}
+        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">
@@ -264,66 +398,23 @@ export function TimelineTooltip({
           </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.role,
-                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
-                      entry.orderType,
-                    ].filter(Boolean).join(" · ")}
-                  </div>
-                  {entry.startDate && entry.endDate && (
-                    <div className="text-[10px] text-gray-500">
-                      {entry.startDate} → {entry.endDate}
-                      {entry.status && entry.status !== "CONFIRMED" && (
-                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
-                      )}
-                    </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>
-          )}
+          <HeatmapBreakdownList breakdown={heatmapHover.breakdown} />
         </div>
-      </div>,
+      </TooltipSurface>,
     );
   }
 
   // Vacation only
   if (vacationHover) {
-    return renderTooltip(
-      <div
-        ref={vacationTooltipRef}
-        style={{
-          left: vacationTooltipPos.left,
-          top: vacationTooltipPos.top,
-          backgroundColor: "rgba(120, 53, 15, 0.95)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={vacationTooltipRef}
+        position={vacationTooltipPos}
+        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">{vacationTitle}</div>
-        <div className="mt-1 text-[11px] text-amber-100/90">
-          {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-        </div>
-        {vacationHover.note && vacationHover.type !== "PUBLIC_HOLIDAY" ? (
-          <div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
-        ) : null}
-      </div>,
+        <VacationSummary vacation={vacationHover} title={vacationTitle ?? "Vacation"} />
+      </TooltipSurface>,
     );
   }
 

apps/web/src/components/timeline/TimelineView.tsx

@@ -9,6 +9,7 @@ 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 { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
 import { AllocationPopover } from "./AllocationPopover.js";
 import { DemandPopover } from "./DemandPopover.js";
@@ -33,6 +34,7 @@ import { TimelineResourcePanel } from "./TimelineResourcePanel.js";
 import { TimelineProjectPanel, type OpenDemandAssignment } from "./TimelineProjectPanel.js";
 import { ProjectColorLegend } from "./ProjectColorLegend.js";
 import { useMultiSelectIntersection } from "~/hooks/useMultiSelectIntersection.js";
+import type { TimelineVisualOverrides } from "./allocationVisualState.js";
 
 // ─── Entry point ────────────────────────────────────────────────────────────
 // Two-layer mount: the outer shell creates drag state + project context,
@@ -56,8 +58,10 @@ export function TimelineView() {
   const [popover, setPopover] = useState<{
     allocationId: string;
     projectId: string;
+    allocation?: TimelineAssignmentEntry | null;
     x: number;
     y: number;
+    contextDate?: Date;
   } | null>(null);
   const [newAllocPopover, setNewAllocPopover] = useState<{
     resourceId: string;
@@ -88,6 +92,8 @@ export function TimelineView() {
     rangeState,
     multiSelectState,
     setMultiSelectState,
+    optimisticAllocations,
+    reconcileOptimisticAllocations,
     shiftPreview,
     isPreviewLoading,
     isApplying,
@@ -106,7 +112,7 @@ export function TimelineView() {
     onCanvasTouchMove,
     onCanvasTouchEnd,
   } = useTimelineDrag({
-    cellWidth: cellWidthRef.current,
+    cellWidthRef,
     onBlockClick: (info) => {
       setPopover({
         allocationId: info.allocationId,
@@ -170,6 +176,8 @@ export function TimelineView() {
         rangeState={rangeState}
         multiSelectState={multiSelectState}
         setMultiSelectState={setMultiSelectState}
+        optimisticAllocations={optimisticAllocations}
+        reconcileOptimisticAllocations={reconcileOptimisticAllocations}
         onCanvasRightMouseDown={onCanvasRightMouseDown}
         clearMultiSelect={clearMultiSelect}
         shiftPreview={shiftPreview}
@@ -214,6 +222,8 @@ function TimelineViewContent({
   rangeState,
   multiSelectState,
   setMultiSelectState,
+  optimisticAllocations,
+  reconcileOptimisticAllocations,
   onCanvasRightMouseDown,
   clearMultiSelect,
   shiftPreview,
@@ -251,6 +261,8 @@ function TimelineViewContent({
   rangeState: ReturnType<typeof useTimelineDrag>["rangeState"];
   multiSelectState: ReturnType<typeof useTimelineDrag>["multiSelectState"];
   setMultiSelectState: ReturnType<typeof useTimelineDrag>["setMultiSelectState"];
+  optimisticAllocations: TimelineVisualOverrides;
+  reconcileOptimisticAllocations: ReturnType<typeof useTimelineDrag>["reconcileOptimisticAllocations"];
   onCanvasRightMouseDown: ReturnType<typeof useTimelineDrag>["onCanvasRightMouseDown"];
   clearMultiSelect: ReturnType<typeof useTimelineDrag>["clearMultiSelect"];
   shiftPreview: ReturnType<typeof useTimelineDrag>["shiftPreview"];
@@ -269,7 +281,14 @@ function TimelineViewContent({
   onCanvasTouchMove: ReturnType<typeof useTimelineDrag>["onCanvasTouchMove"];
   onCanvasTouchEnd: ReturnType<typeof useTimelineDrag>["onCanvasTouchEnd"];
   contextResourceIds: string[];
-  popover: { allocationId: string; projectId: string; x: number; y: number } | null;
+  popover: {
+    allocationId: string;
+    projectId: string;
+    allocation?: TimelineAssignmentEntry | null;
+    x: number;
+    y: number;
+    contextDate?: Date;
+  } | null;
   setPopover: React.Dispatch<React.SetStateAction<typeof popover>>;
   newAllocPopover: {
     resourceId: string;
@@ -300,6 +319,8 @@ function TimelineViewContent({
     viewStart,
     viewEnd,
     viewDays,
+    visibleAssignments,
+    visibleDemands,
     setViewStart,
     setViewDays,
     filters,
@@ -348,6 +369,23 @@ function TimelineViewContent({
   const hasActivePointerOverlay =
     dragState.isDragging || allocDragState.isActive || rangeState.isSelecting || multiSelectState.isMultiDragging;
 
+  useEffect(() => {
+    if (optimisticAllocations.size === 0) return;
+    reconcileOptimisticAllocations([...visibleAssignments, ...visibleDemands]);
+  }, [
+    optimisticAllocations,
+    reconcileOptimisticAllocations,
+    visibleAssignments,
+    visibleDemands,
+  ]);
+
+  useEffect(() => {
+    if (!hasActivePointerOverlay) return;
+    setPopover(null);
+    setDemandPopover(null);
+    setResourceHover(null);
+  }, [hasActivePointerOverlay]);
+
   // ─── Keep selection overlay visible while popover is open ───────────────────
   const effectiveRangeState: typeof rangeState = rangeState.isSelecting
     ? rangeState
@@ -386,10 +424,12 @@ function TimelineViewContent({
     info: {
       allocationId: string;
       projectId: string;
+      contextDate?: Date;
     },
     anchorX: number,
     anchorY: number,
   ) {
+    if (hasActivePointerOverlay) return;
     // 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);
@@ -397,11 +437,19 @@ function TimelineViewContent({
       setDemandPopover({ demand, x: anchorX, y: anchorY });
       return;
     }
+    const allocation = visibleAssignments.find((entry) => (
+      entry.id === info.allocationId
+      || entry.entityId === info.allocationId
+      || entry.sourceAllocationId === info.allocationId
+      || getPlanningEntryMutationId(entry) === info.allocationId
+    )) ?? null;
     setPopover({
       allocationId: info.allocationId,
       projectId: info.projectId,
+      allocation,
       x: anchorX,
       y: anchorY,
+      ...(info.contextDate ? { contextDate: info.contextDate } : {}),
     });
   }
 
@@ -505,12 +553,22 @@ function TimelineViewContent({
 
   // ─── Resource hover card — event delegation on label columns ──────────────
   useEffect(() => {
+    if (hasActivePointerOverlay) {
+      if (resourceHoverTimerRef.current) {
+        clearTimeout(resourceHoverTimerRef.current);
+        resourceHoverTimerRef.current = null;
+      }
+      setResourceHover(null);
+      return;
+    }
+
     const canvas = canvasRef.current;
     if (!canvas) return;
 
     const HOVER_DELAY = 400;
 
     function onMouseOver(e: MouseEvent) {
+      if (hasActivePointerOverlay) return;
       const target = (e.target as HTMLElement).closest<HTMLElement>("[data-resource-hover-id]");
       if (!target) return;
       const rid = target.dataset.resourceHoverId;
@@ -532,6 +590,7 @@ function TimelineViewContent({
     }
 
     function onMouseOut(e: MouseEvent) {
+      if (hasActivePointerOverlay) return;
       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;
@@ -557,7 +616,7 @@ function TimelineViewContent({
         resourceHoverTimerRef.current = null;
       }
     };
-  }, [resourceHover?.resourceId, isInitialLoading]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [resourceHover?.resourceId, isInitialLoading, hasActivePointerOverlay]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // ─── Lazy-extend date range on scroll ─────────────────────────────────────
   function handleContainerScroll() {
@@ -682,6 +741,8 @@ function TimelineViewContent({
                   onRowTouchStart={isSelfServiceTimeline ? () => undefined : onRowTouchStart}
                   onAllocationContextMenu={isSelfServiceTimeline ? () => undefined : openAllocationPopoverAt}
                   multiSelectState={multiSelectState}
+                  optimisticAllocations={optimisticAllocations}
+                  suppressHoverInteractions={hasActivePointerOverlay}
                   CELL_WIDTH={CELL_WIDTH}
                   dates={dates}
                   totalCanvasWidth={totalCanvasWidth}
@@ -707,9 +768,12 @@ function TimelineViewContent({
                   onRowTouchStart={isSelfServiceTimeline ? () => undefined : onRowTouchStart}
                   onOpenPanel={isSelfServiceTimeline ? () => undefined : setOpenPanelProjectId}
                   onOpenDemandClick={isSelfServiceTimeline ? () => undefined : (demand, anchorX, anchorY) => {
+                    if (hasActivePointerOverlay) return;
                     setDemandPopover({ demand, x: anchorX, y: anchorY });
                   }}
                   onAllocationContextMenu={isSelfServiceTimeline ? () => undefined : openAllocationPopoverAt}
+                  optimisticAllocations={optimisticAllocations}
+                  suppressHoverInteractions={hasActivePointerOverlay}
                   CELL_WIDTH={CELL_WIDTH}
                   dates={dates}
                   totalCanvasWidth={totalCanvasWidth}
@@ -827,7 +891,7 @@ function TimelineViewContent({
       )}
 
       {/* Allocation / Demand popover (click path) */}
-      {!isSelfServiceTimeline && popover && (() => {
+      {!isSelfServiceTimeline && !hasActivePointerOverlay && popover && (() => {
         // Check if clicked allocation is actually a demand
         const clickedDemand = openDemandsByProject.get(popover.projectId)?.find((d) => d.id === popover.allocationId);
         if (clickedDemand) {
@@ -863,6 +927,7 @@ function TimelineViewContent({
           <AllocationPopover
             allocationId={popover.allocationId}
             projectId={popover.projectId}
+            initialAllocation={popover.allocation ?? null}
             onClose={() => setPopover(null)}
             onOpenPanel={(pid) => {
               setPopover(null);
@@ -870,12 +935,13 @@ function TimelineViewContent({
             }}
             anchorX={popover.x}
             anchorY={popover.y}
+            {...(popover.contextDate ? { contextDate: popover.contextDate } : {})}
           />
         );
       })()}
 
       {/* Demand popover */}
-      {!isSelfServiceTimeline && demandPopover && (
+      {!isSelfServiceTimeline && !hasActivePointerOverlay && demandPopover && (
         <DemandPopover
           demand={demandPopover.demand}
           onClose={() => setDemandPopover(null)}
@@ -962,7 +1028,7 @@ function TimelineViewContent({
       )}
 
       {/* Resource hover card */}
-      {resourceHover && (
+      {!hasActivePointerOverlay && resourceHover && (
         <ResourceHoverCard
           resourceId={resourceHover.resourceId}
           anchorEl={resourceHover.anchorEl}

apps/web/src/components/timeline/allocationVisualState.ts

@@ -0,0 +1,89 @@
+"use client";
+
+export type TimelineVisualEntry = {
+  id: string;
+  startDate: Date | string;
+  endDate: Date | string;
+};
+
+export type TimelineVisualOverride = {
+  startDate: Date;
+  endDate: Date;
+};
+
+export type TimelineVisualOverrides = ReadonlyMap<string, TimelineVisualOverride>;
+
+export function getDragPointerOffset(
+  pointerDeltaX: number,
+  daysDelta: number,
+  cellWidth: number,
+): number {
+  return pointerDeltaX - daysDelta * cellWidth;
+}
+
+export function applyPointerOffsetPreviewRect({
+  left,
+  width,
+  mode,
+  pointerOffsetX,
+  minWidth,
+}: {
+  left: number;
+  width: number;
+  mode: "move" | "resize-start" | "resize-end";
+  pointerOffsetX: number;
+  minWidth: number;
+}): { left: number; width: number; transform?: string } {
+  if (pointerOffsetX === 0) {
+    return { left, width };
+  }
+
+  if (mode === "move") {
+    return { left, width, transform: `translateX(${pointerOffsetX}px)` };
+  }
+
+  if (mode === "resize-start") {
+    const nextWidth = width - pointerOffsetX;
+    if (nextWidth < minWidth) {
+      return {
+        left: left + (width - minWidth),
+        width: minWidth,
+      };
+    }
+    return {
+      left: left + pointerOffsetX,
+      width: nextWidth,
+    };
+  }
+
+  return {
+    left,
+    width: Math.max(minWidth, width + pointerOffsetX),
+  };
+}
+
+export function applyVisualOverrides<T extends TimelineVisualEntry>(
+  entries: readonly T[],
+  overrides: TimelineVisualOverrides,
+): T[] {
+  if (overrides.size === 0) {
+    return entries as T[];
+  }
+
+  let changed = false;
+  const nextEntries = entries.map((entry) => {
+    const override = overrides.get(entry.id);
+    if (!override) {
+      return entry;
+    }
+
+    changed = true;
+    return {
+      ...entry,
+      startDate: new Date(override.startDate),
+      endDate: new Date(override.endDate),
+    };
+  });
+
+  return changed ? nextEntries : (entries as T[]);
+}

apps/web/src/components/timeline/renderHelpers.tsx

@@ -21,6 +21,34 @@ export interface VacationBlockInfo {
   width: number;
 }
 
+export function buildVacationBlocksByResource(
+  vacationsByResource: Map<string, VacationEntry[]>,
+  showVacations: boolean,
+  toLeft: (date: Date) => number,
+  toWidth: (start: Date, end: Date) => number,
+  cellWidth: number,
+  totalCanvasWidth: number,
+) {
+  if (!showVacations) return new Map<string, VacationBlockInfo[]>();
+
+  const result = new Map<string, VacationBlockInfo[]>();
+  for (const [resourceId, vacations] of vacationsByResource) {
+    const blocks: VacationBlockInfo[] = [];
+    for (const vacation of vacations) {
+      const start = new Date(vacation.startDate);
+      const end = new Date(vacation.endDate);
+      const left = toLeft(start);
+      const width = Math.max(cellWidth, toWidth(start, end));
+      if (width <= 0 || left >= totalCanvasWidth) continue;
+      blocks.push({ vacation, left, width });
+    }
+    if (blocks.length > 0) {
+      result.set(resourceId, blocks);
+    }
+  }
+  return result;
+}
+
 // ─── Vacation block overlays ─────────────────────────────────────────────────
 
 export function renderVacationBlocks(blocks: VacationBlockInfo[], rowHeight: number) {
@@ -92,8 +120,9 @@ export function renderOverbookingBlink(
   allocs: TimelineAssignmentEntry[],
   dates: Date[],
   CELL_WIDTH: number,
+  capacityHoursByDay?: number[],
+  bookingFactorsByDay?: number[],
 ) {
-  const REF_H = 8;
   const overbooked: number[] = [];
 
   for (let i = 0; i < dates.length; i++) {
@@ -106,9 +135,11 @@ export function renderOverbookingBlink(
       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 (t >= s.getTime() && t <= e.getTime()) {
+        totalH += a.hoursPerDay * (bookingFactorsByDay?.[i] ?? 1);
+      }
     }
-    if (totalH > REF_H) overbooked.push(i);
+    if (totalH > (capacityHoursByDay?.[i] ?? 8)) overbooked.push(i);
   }
 
   if (overbooked.length === 0) return null;

apps/web/src/components/timeline/timelineAvailability.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildAllocationWorkingDaySegments,
+  isAllocationScheduledOnDate,
+  toLocalDateKey,
+} from "./timelineAvailability.js";
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+
+function createAllocation(overrides?: Partial<TimelineAssignmentEntry>): TimelineAssignmentEntry {
+  return {
+    id: "alloc-1",
+    resourceId: "resource-1",
+    projectId: "project-1",
+    startDate: new Date(2026, 2, 30),
+    endDate: new Date(2026, 3, 6),
+    hoursPerDay: 8,
+    metadata: null,
+    project: {
+      id: "project-1",
+      name: "Gelddruckmaschine",
+      shortCode: "GDM",
+      status: "ACTIVE",
+      startDate: new Date(2026, 2, 30),
+      endDate: new Date(2026, 3, 6),
+      orderType: "CHARGEABLE",
+    },
+    resource: {
+      id: "resource-1",
+      displayName: "Peter Parker",
+      eid: "E-001",
+      chapter: "Delivery",
+      lcrCents: 10000,
+      availability: {
+        sunday: 0,
+        monday: 8,
+        tuesday: 8,
+        wednesday: 8,
+        thursday: 8,
+        friday: 8,
+        saturday: 6,
+      },
+    },
+    ...overrides,
+  } as TimelineAssignmentEntry;
+}
+
+describe("timelineAvailability", () => {
+  it("does not treat Saturday as scheduled unless includeSaturday is enabled", () => {
+    const allocation = createAllocation();
+
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 4))).toBe(false);
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 6))).toBe(true);
+  });
+
+  it("supports Saturday working allocations when includeSaturday is enabled", () => {
+    const allocation = createAllocation({
+      metadata: { includeSaturday: true },
+    });
+
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 4))).toBe(true);
+  });
+
+  it("splits working spans at non-working weekend days", () => {
+    const allocation = createAllocation();
+    const segments = buildAllocationWorkingDaySegments(allocation);
+
+    expect(segments).toEqual([
+      { start: new Date(2026, 2, 30), end: new Date(2026, 3, 3) },
+      { start: new Date(2026, 3, 6), end: new Date(2026, 3, 6) },
+    ]);
+  });
+
+  it("formats local calendar days without shifting them through UTC serialization", () => {
+    expect(toLocalDateKey(new Date(2026, 3, 6))).toBe("2026-04-06");
+    expect(toLocalDateKey(new Date(2026, 3, 10))).toBe("2026-04-10");
+  });
+});

apps/web/src/components/timeline/timelineAvailability.ts

@@ -0,0 +1,129 @@
+import type { WeekdayAvailability } from "@capakraken/shared";
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+
+const DAY_KEYS: (keyof WeekdayAvailability)[] = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+];
+
+export const DEFAULT_TIMELINE_AVAILABILITY: WeekdayAvailability = {
+  sunday: 0,
+  monday: 8,
+  tuesday: 8,
+  wednesday: 8,
+  thursday: 8,
+  friday: 8,
+  saturday: 0,
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+export function toLocalStartOfDay(value: Date | string): Date {
+  const date = value instanceof Date ? new Date(value) : new Date(value);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+export function toLocalDateKey(value: Date | string): string {
+  const date = toLocalStartOfDay(value);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function normalizeTimelineAvailability(value: unknown): WeekdayAvailability {
+  if (!isRecord(value)) {
+    return DEFAULT_TIMELINE_AVAILABILITY;
+  }
+
+  const normalized = { ...DEFAULT_TIMELINE_AVAILABILITY };
+  for (const key of DAY_KEYS) {
+    const next = value[key];
+    if (typeof next === "number" && Number.isFinite(next)) {
+      normalized[key] = next;
+    }
+  }
+  return normalized;
+}
+
+export function getTimelineAvailabilityHoursForDate(
+  availability: WeekdayAvailability,
+  date: Date,
+): number {
+  const dayKey = DAY_KEYS[toLocalStartOfDay(date).getDay()];
+  return dayKey ? (availability[dayKey] ?? 0) : 0;
+}
+
+export function getEffectiveAllocationAvailability(
+  allocation: Pick<TimelineAssignmentEntry, "resource" | "metadata">,
+): WeekdayAvailability {
+  const availability = normalizeTimelineAvailability(allocation.resource?.availability);
+  const metadata = allocation.metadata as Record<string, unknown> | null;
+  const includeSaturday = metadata?.includeSaturday === true;
+  return includeSaturday ? availability : { ...availability, saturday: 0 };
+}
+
+export function isAllocationScheduledOnDate(
+  allocation: Pick<TimelineAssignmentEntry, "startDate" | "endDate" | "resource" | "metadata">,
+  date: Date,
+): boolean {
+  const target = toLocalStartOfDay(date);
+  const start = toLocalStartOfDay(allocation.startDate);
+  const end = toLocalStartOfDay(allocation.endDate);
+
+  if (target < start || target > end) {
+    return false;
+  }
+
+  return getTimelineAvailabilityHoursForDate(getEffectiveAllocationAvailability(allocation), target) > 0;
+}
+
+export function buildAllocationWorkingDaySegments(
+  allocation: Pick<TimelineAssignmentEntry, "startDate" | "endDate" | "resource" | "metadata">,
+  rangeStart?: Date,
+  rangeEnd?: Date,
+): Array<{ start: Date; end: Date }> {
+  const availability = getEffectiveAllocationAvailability(allocation);
+  const start = toLocalStartOfDay(rangeStart ?? allocation.startDate);
+  const end = toLocalStartOfDay(rangeEnd ?? allocation.endDate);
+
+  if (start > end) {
+    return [];
+  }
+
+  const segments: Array<{ start: Date; end: Date }> = [];
+  let segmentStart: Date | null = null;
+  let segmentEnd: Date | null = null;
+  const cursor = new Date(start);
+
+  while (cursor <= end) {
+    const isWorkingDay = getTimelineAvailabilityHoursForDate(availability, cursor) > 0;
+
+    if (isWorkingDay) {
+      if (!segmentStart) {
+        segmentStart = new Date(cursor);
+      }
+      segmentEnd = new Date(cursor);
+    } else if (segmentStart && segmentEnd) {
+      segments.push({ start: segmentStart, end: segmentEnd });
+      segmentStart = null;
+      segmentEnd = null;
+    }
+
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  if (segmentStart && segmentEnd) {
+    segments.push({ start: segmentStart, end: segmentEnd });
+  }
+
+  return segments;
+}

apps/web/src/components/timeline/timelineCapacity.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { buildResourceCapacitySeries } from "./timelineCapacity.js";
+import type { TimelineAssignmentEntry, VacationEntry } from "./TimelineContext.js";
+
+function createAssignmentWithAvailability(availability: Record<string, number>): TimelineAssignmentEntry {
+  return {
+    resource: {
+      id: "resource-1",
+      displayName: "Peter Parker",
+      eid: "E-001",
+      chapter: "Delivery",
+      lcrCents: 10000,
+      availability,
+    },
+  } as TimelineAssignmentEntry;
+}
+
+function buildSeries(args: { dates: Date[]; vacations?: VacationEntry[]; availability: Record<string, number> }) {
+  return buildResourceCapacitySeries(
+    new Map([["resource-1", [createAssignmentWithAvailability(args.availability)]]]),
+    new Map([["resource-1", args.vacations ?? []]]),
+    args.dates,
+  ).get("resource-1");
+}
+
+describe("timelineCapacity", () => {
+  it("maps local weekdays without UTC drift", () => {
+    const series = buildSeries({
+      dates: [
+        new Date(2026, 2, 30),
+        new Date(2026, 3, 4),
+        new Date(2026, 3, 5),
+      ],
+      availability: {
+        sunday: 1,
+        monday: 6,
+        tuesday: 7,
+        wednesday: 8,
+        thursday: 5,
+        friday: 4,
+        saturday: 2,
+      },
+    });
+
+    expect(series?.baseHoursByDay).toEqual([6, 2, 1]);
+    expect(series?.capacityHoursByDay).toEqual([6, 2, 1]);
+    expect(series?.bookingFactorsByDay).toEqual([1, 1, 1]);
+  });
+
+  it("applies approved absences using the local calendar day key", () => {
+    const series = buildSeries({
+      dates: [new Date(2026, 2, 30)],
+      availability: {
+        sunday: 0,
+        monday: 8,
+        tuesday: 8,
+        wednesday: 8,
+        thursday: 8,
+        friday: 8,
+        saturday: 0,
+      },
+      vacations: [
+        {
+          id: "vac-1",
+          resourceId: "resource-1",
+          type: "ANNUAL",
+          status: "APPROVED",
+          startDate: "2026-03-30",
+          endDate: "2026-03-30",
+          isHalfDay: false,
+        } as VacationEntry,
+      ],
+    });
+
+    expect(series?.baseHoursByDay).toEqual([8]);
+    expect(series?.capacityHoursByDay).toEqual([0]);
+    expect(series?.bookingFactorsByDay).toEqual([0]);
+  });
+});

apps/web/src/components/timeline/timelineCapacity.ts

@@ -0,0 +1,147 @@
+import type { WeekdayAvailability } from "@capakraken/shared";
+import type { TimelineAssignmentEntry, VacationEntry } from "./TimelineContext.js";
+import {
+  DEFAULT_TIMELINE_AVAILABILITY,
+  getTimelineAvailabilityHoursForDate,
+  normalizeTimelineAvailability,
+  toLocalDateKey,
+  toLocalStartOfDay,
+} from "./timelineAvailability.js";
+
+const DEFAULT_AVAILABILITY: WeekdayAvailability = DEFAULT_TIMELINE_AVAILABILITY;
+
+export type ResourceCapacitySeries = {
+  baseHoursByDay: number[];
+  capacityHoursByDay: number[];
+  bookingFactorsByDay: number[];
+};
+
+function normalizeAvailability(value: unknown): WeekdayAvailability {
+  return normalizeTimelineAvailability(value);
+}
+
+function getAvailabilityHoursForDate(availability: WeekdayAvailability, date: Date): number {
+  return getTimelineAvailabilityHoursForDate(availability, date);
+}
+
+function resolveResourceAvailability(allocs: TimelineAssignmentEntry[]): WeekdayAvailability {
+  for (const alloc of allocs) {
+    const availability = alloc.resource?.availability;
+    if (availability !== null && availability !== undefined) {
+      return normalizeAvailability(availability);
+    }
+  }
+  return DEFAULT_AVAILABILITY;
+}
+
+function buildAbsenceFractionsByDate(
+  vacations: VacationEntry[],
+  periodStart: Date,
+  periodEnd: Date,
+): Map<string, number> {
+  const holidayDates = new Set<string>();
+  const vacationFractionsByDate = new Map<string, number>();
+  const absenceFractionsByDate = new Map<string, number>();
+  const normalizedStart = toLocalStartOfDay(periodStart);
+  const normalizedEnd = toLocalStartOfDay(periodEnd);
+
+  for (const vacation of vacations) {
+    const isPublicHoliday = vacation.type === "PUBLIC_HOLIDAY";
+    const isApprovedVacation = vacation.status === "APPROVED";
+
+    if (!isPublicHoliday && !isApprovedVacation) {
+      continue;
+    }
+
+    const overlapStart = new Date(
+      Math.max(
+        toLocalStartOfDay(vacation.startDate).getTime(),
+        normalizedStart.getTime(),
+      ),
+    );
+    const overlapEnd = new Date(
+      Math.min(
+        toLocalStartOfDay(vacation.endDate).getTime(),
+        normalizedEnd.getTime(),
+      ),
+    );
+
+    if (overlapStart > overlapEnd) {
+      continue;
+    }
+
+    const fraction = vacation.isHalfDay ? 0.5 : 1;
+    const cursor = new Date(overlapStart);
+
+    while (cursor <= overlapEnd) {
+      const isoDate = toLocalDateKey(cursor);
+
+      if (isPublicHoliday) {
+        holidayDates.add(isoDate);
+      } else {
+        const existingVacation = vacationFractionsByDate.get(isoDate) ?? 0;
+        vacationFractionsByDate.set(isoDate, Math.max(existingVacation, fraction));
+      }
+
+      const existingAbsence = absenceFractionsByDate.get(isoDate) ?? 0;
+      if (isPublicHoliday || !holidayDates.has(isoDate)) {
+        absenceFractionsByDate.set(isoDate, Math.max(existingAbsence, fraction));
+      }
+
+      cursor.setDate(cursor.getDate() + 1);
+    }
+  }
+
+  for (const isoDate of holidayDates) {
+    const existingAbsence = absenceFractionsByDate.get(isoDate) ?? 0;
+    absenceFractionsByDate.set(isoDate, Math.max(existingAbsence, 1));
+  }
+
+  return absenceFractionsByDate;
+}
+
+export function buildResourceCapacitySeries(
+  allocsByResource: Map<string, TimelineAssignmentEntry[]>,
+  vacationsByResource: Map<string, VacationEntry[]>,
+  dates: Date[],
+): Map<string, ResourceCapacitySeries> {
+  const result = new Map<string, ResourceCapacitySeries>();
+
+  if (dates.length === 0) {
+    return result;
+  }
+
+  const periodStart = dates[0]!;
+  const periodEnd = dates[dates.length - 1]!;
+
+  for (const [resourceId, allocs] of allocsByResource) {
+    const availability = resolveResourceAvailability(allocs);
+    const absenceFractionsByDate = buildAbsenceFractionsByDate(
+      vacationsByResource.get(resourceId) ?? [],
+      periodStart,
+      periodEnd,
+    );
+
+    const baseHoursByDay: number[] = [];
+    const capacityHoursByDay: number[] = [];
+    const bookingFactorsByDay: number[] = [];
+
+    for (const date of dates) {
+      const baseHours = getAvailabilityHoursForDate(availability, date);
+      const absenceFraction = absenceFractionsByDate.get(toLocalDateKey(date)) ?? 0;
+      const bookingFactor = baseHours > 0 ? Math.max(0, 1 - absenceFraction) : 0;
+
+      baseHoursByDay.push(baseHours);
+      bookingFactorsByDay.push(bookingFactor);
+      capacityHoursByDay.push(baseHours * bookingFactor);
+    }
+
+    result.set(resourceId, {
+      baseHoursByDay,
+      capacityHoursByDay,
+      bookingFactorsByDay,
+    });
+  }
+
+  return result;
+}

apps/web/src/components/timeline/timelineHeatmap.ts

@@ -0,0 +1,187 @@
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+import type { HeatmapHoverData } from "./TimelineTooltip.js";
+import type { ResourceCapacitySeries } from "./timelineCapacity.js";
+import { toLocalDateKey } from "./timelineAvailability.js";
+
+type HeatmapAccumulator = {
+  shortCode: string;
+  projectName: string;
+  orderType: string;
+  hours: number;
+  responsiblePerson?: string | null;
+  role?: string | null;
+  status?: string;
+  startDate?: string;
+  endDate?: string;
+};
+
+export function buildResourceHeatmapHover(
+  date: Date,
+  allocations: TimelineAssignmentEntry[],
+  options?: {
+    capacityHours?: number;
+    bookingFactor?: number;
+  },
+): HeatmapHoverData {
+  const target = new Date(date);
+  target.setHours(0, 0, 0, 0);
+  const targetTime = target.getTime();
+  const bookingFactor = options?.bookingFactor ?? 1;
+  const capacityHours = options?.capacityHours ?? 8;
+
+  const projectHours = new Map<string, HeatmapAccumulator>();
+
+  for (const allocation of allocations) {
+    const start = new Date(allocation.startDate);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(allocation.endDate);
+    end.setHours(0, 0, 0, 0);
+    if (targetTime < start.getTime() || targetTime > end.getTime()) continue;
+
+    const existing = projectHours.get(allocation.projectId);
+    if (existing) {
+      existing.hours += allocation.hoursPerDay * bookingFactor;
+      continue;
+    }
+
+    projectHours.set(allocation.projectId, {
+      shortCode: allocation.project.shortCode,
+      projectName: allocation.project.name,
+      orderType: allocation.project.orderType,
+      hours: allocation.hoursPerDay * bookingFactor,
+      responsiblePerson:
+        (allocation.project as { responsiblePerson?: string | null }).responsiblePerson ?? null,
+      role: allocation.role ?? allocation.roleEntity?.name ?? null,
+      status: allocation.status,
+      startDate: toLocalDateKey(allocation.startDate),
+      endDate: toLocalDateKey(allocation.endDate),
+    });
+  }
+
+  const breakdown: HeatmapHoverData["breakdown"] = [...projectHours.entries()]
+    .map(([projectId, value]) => ({
+      projectId,
+      shortCode: value.shortCode,
+      projectName: value.projectName,
+      orderType: value.orderType,
+      hoursPerDay: value.hours,
+      ...(value.responsiblePerson !== undefined ? { responsiblePerson: value.responsiblePerson } : {}),
+      ...(value.role !== undefined ? { role: value.role } : {}),
+      ...(value.status !== undefined ? { status: value.status } : {}),
+      ...(value.startDate !== undefined ? { startDate: value.startDate } : {}),
+      ...(value.endDate !== undefined ? { endDate: value.endDate } : {}),
+    }))
+    .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
+
+  const totalH = breakdown.reduce((sum, entry) => sum + entry.hoursPerDay, 0);
+
+  return {
+    date,
+    totalH,
+    pct: capacityHours > 0 ? (totalH / capacityHours) * 100 : 0,
+    breakdown,
+  };
+}
+
+export function buildResourceHeatmapSeries(
+  allocsByResource: Map<string, TimelineAssignmentEntry[]>,
+  dates: Date[],
+  resourceCapacityById?: Map<string, ResourceCapacitySeries>,
+): {
+  resourceHeatmapById: Map<string, (HeatmapHoverData | null)[]>;
+  resourceTotalHoursById: Map<string, number[]>;
+} {
+  const dateIndexByTime = new Map<number, number>();
+  dates.forEach((date, index) => {
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    dateIndexByTime.set(normalized.getTime(), index);
+  });
+
+  const resourceHeatmapById = new Map<string, (HeatmapHoverData | null)[]>();
+  const resourceTotalHoursById = new Map<string, number[]>();
+
+  for (const [resourceId, allocs] of allocsByResource) {
+    if (allocs.length === 0) continue;
+    const capacity = resourceCapacityById?.get(resourceId);
+
+    const totalHours = new Array<number>(dates.length).fill(0);
+    const breakdownMaps = Array.from(
+      { length: dates.length },
+      () => new Map<string, HeatmapAccumulator>(),
+    );
+
+    for (const alloc of allocs) {
+      const current = new Date(alloc.startDate);
+      current.setHours(0, 0, 0, 0);
+      const end = new Date(alloc.endDate);
+      end.setHours(0, 0, 0, 0);
+
+      while (current.getTime() <= end.getTime()) {
+        const dayIndex = dateIndexByTime.get(current.getTime());
+        if (dayIndex !== undefined) {
+          const effectiveHours =
+            alloc.hoursPerDay * (capacity?.bookingFactorsByDay[dayIndex] ?? 1);
+          totalHours[dayIndex] = (totalHours[dayIndex] ?? 0) + effectiveHours;
+
+          const dayBreakdown = breakdownMaps[dayIndex];
+          if (dayBreakdown) {
+            const existing = dayBreakdown.get(alloc.projectId);
+            if (existing) {
+              existing.hours += effectiveHours;
+            } else {
+              dayBreakdown.set(alloc.projectId, {
+                shortCode: alloc.project.shortCode,
+                projectName: alloc.project.name,
+                orderType: alloc.project.orderType,
+                responsiblePerson:
+                  (alloc.project as { responsiblePerson?: string | null }).responsiblePerson ??
+                  null,
+                hours: effectiveHours,
+              });
+            }
+          }
+        }
+
+        current.setDate(current.getDate() + 1);
+      }
+    }
+
+    resourceTotalHoursById.set(resourceId, totalHours);
+    resourceHeatmapById.set(
+      resourceId,
+      totalHours.map((totalH, dayIndex) => {
+        if (totalH === 0) return null;
+
+        const dayBreakdown = breakdownMaps[dayIndex];
+        if (!dayBreakdown) return null;
+
+        const breakdown = [...dayBreakdown.entries()]
+          .map(([projectId, value]) => ({
+            projectId,
+            shortCode: value.shortCode,
+            projectName: value.projectName,
+            orderType: value.orderType,
+            responsiblePerson: value.responsiblePerson ?? null,
+            hoursPerDay: value.hours,
+          }))
+          .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
+
+        return {
+          date: dates[dayIndex] ?? new Date(),
+          totalH,
+          pct:
+            (capacity?.capacityHoursByDay[dayIndex] ?? 8) > 0
+              ? (totalH / (capacity?.capacityHoursByDay[dayIndex] ?? 8)) * 100
+              : 0,
+          breakdown,
+        };
+      }),
+    );
+  }
+
+  return {
+    resourceHeatmapById,
+    resourceTotalHoursById,
+  };
+}

apps/web/src/components/timeline/timelineHover.ts

@@ -0,0 +1,124 @@
+import type { MutableRefObject, RefObject } from "react";
+import type { TimelineDemandEntry, VacationEntry } from "./TimelineContext.js";
+import type { DemandHoverData } from "./TimelineTooltip.js";
+
+export type TooltipPosition = {
+  left: number;
+  top: number;
+};
+
+export function updateTooltipPosition(
+  positionRef: MutableRefObject<TooltipPosition>,
+  tooltipRef: RefObject<HTMLDivElement | null>,
+  clientX: number,
+  clientY: number,
+  offsetX: number,
+  offsetY: number,
+) {
+  positionRef.current = { left: clientX + offsetX, top: clientY + offsetY };
+  if (!tooltipRef.current) return;
+
+  tooltipRef.current.style.left = `${positionRef.current.left}px`;
+  tooltipRef.current.style.top = `${positionRef.current.top}px`;
+}
+
+export function cancelHoverFrame(frameRef: MutableRefObject<number | null>) {
+  if (frameRef.current === null) return;
+  cancelAnimationFrame(frameRef.current);
+  frameRef.current = null;
+}
+
+export function findVacationHit<T extends { startDate: Date | string; endDate: Date | string }>(
+  vacations: T[],
+  date: Date,
+): T | null {
+  const time = new Date(date);
+  time.setHours(0, 0, 0, 0);
+  const target = time.getTime();
+
+  return (
+    vacations.find((vacation) => {
+      const start = new Date(vacation.startDate);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(vacation.endDate);
+      end.setHours(0, 0, 0, 0);
+      return target >= start.getTime() && target <= end.getTime();
+    }) ?? null
+  );
+}
+
+export function collectResourcesWithVacations(
+  vacationsByResource: Map<string, VacationEntry[]>,
+) {
+  const result = new Set<string>();
+  for (const [resourceId, vacations] of vacationsByResource) {
+    if (vacations.length > 0) {
+      result.add(resourceId);
+    }
+  }
+  return result;
+}
+
+export function scheduleVacationHoverUpdate<T extends { id: string; startDate: Date | string; endDate: Date | string }>(
+  args: {
+    frameRef: MutableRefObject<number | null>;
+    hoveredKeyRef: MutableRefObject<string | null>;
+    resourceId: string;
+    clientX: number;
+    rect: DOMRect;
+    xToDate: (clientX: number, rect: DOMRect) => Date;
+    vacations: T[];
+    onHoverChange: (vacation: T | null) => void;
+  },
+) {
+  const {
+    frameRef,
+    hoveredKeyRef,
+    resourceId,
+    clientX,
+    rect,
+    xToDate,
+    vacations,
+    onHoverChange,
+  } = args;
+
+  if (frameRef.current !== null) return;
+
+  frameRef.current = requestAnimationFrame(() => {
+    frameRef.current = null;
+    const date = xToDate(clientX, rect);
+    const hit = findVacationHit(vacations, date);
+    const nextKey = hit ? `${resourceId}:${hit.id}` : null;
+    if (nextKey === hoveredKeyRef.current) return;
+
+    hoveredKeyRef.current = nextKey;
+    onHoverChange(hit);
+  });
+}
+
+export function buildDemandHoverData(demand: TimelineDemandEntry): DemandHoverData {
+  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);
+
+  return {
+    roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
+    roleColor: demand.roleEntity?.color ?? "#f59e0b",
+    projectName: demand.project.name,
+    projectShortCode: demand.project.shortCode,
+    requestedHeadcount: demand.requestedHeadcount,
+    unfilledHeadcount: demand.unfilledHeadcount,
+    startDate: demand.startDate,
+    endDate: demand.endDate,
+    hoursPerDay: demand.hoursPerDay,
+    totalHours: demand.hoursPerDay * days,
+    percentage: demand.percentage,
+    status: demand.status,
+    ...(demand.dailyCostCents > 0
+      ? {
+          totalCostCents: demand.dailyCostCents * days,
+          dailyCostCents: demand.dailyCostCents,
+        }
+      : {}),
+  };
+}

apps/web/src/components/timeline/timelineProjectMetrics.ts

@@ -0,0 +1,74 @@
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+import type { ResourceCapacitySeries } from "./timelineCapacity.js";
+
+export type ProjectDayMetric = {
+  projH: number;
+  totalH: number;
+  capacityH: number;
+};
+
+type ProjectMetricRow = {
+  resource: { id: string };
+  allocs: TimelineAssignmentEntry[];
+};
+
+type ProjectMetricGroup = {
+  id: string;
+  resourceRows: ProjectMetricRow[];
+};
+
+export function getProjectRowMetricsKey(projectId: string, resourceId: string): string {
+  return `${projectId}:${resourceId}`;
+}
+
+export function buildProjectRowMetrics(
+  dates: Date[],
+  projectGroups: ProjectMetricGroup[],
+  resourceTotalHoursById: Map<string, number[]>,
+  resourceCapacityById: Map<string, ResourceCapacitySeries>,
+): Map<string, ProjectDayMetric[]> {
+  const dateIndexByTime = new Map<number, number>();
+  dates.forEach((date, index) => {
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    dateIndexByTime.set(normalized.getTime(), index);
+  });
+
+  const nextMetrics = new Map<string, ProjectDayMetric[]>();
+
+  for (const project of projectGroups) {
+    for (const { resource, allocs } of project.resourceRows) {
+      const projectHours = new Array<number>(dates.length).fill(0);
+      const capacity = resourceCapacityById.get(resource.id);
+
+      for (const alloc of allocs) {
+        const current = new Date(alloc.startDate);
+        current.setHours(0, 0, 0, 0);
+        const end = new Date(alloc.endDate);
+        end.setHours(0, 0, 0, 0);
+
+        while (current.getTime() <= end.getTime()) {
+          const dayIndex = dateIndexByTime.get(current.getTime());
+          if (dayIndex !== undefined) {
+            projectHours[dayIndex] =
+              (projectHours[dayIndex] ?? 0) +
+              alloc.hoursPerDay * (capacity?.bookingFactorsByDay[dayIndex] ?? 1);
+          }
+          current.setDate(current.getDate() + 1);
+        }
+      }
+
+      const totalHours = resourceTotalHoursById.get(resource.id);
+      nextMetrics.set(
+        getProjectRowMetricsKey(project.id, resource.id),
+        projectHours.map((projH, dayIndex) => ({
+          projH,
+          totalH: totalHours?.[dayIndex] ?? 0,
+          capacityH: capacity?.capacityHoursByDay[dayIndex] ?? 8,
+        })),
+      );
+    }
+  }
+
+  return nextMetrics;
+}

apps/web/src/components/timeline/timelineProjectRows.ts

@@ -0,0 +1,129 @@
+import {
+  applyVisualOverrides,
+  type TimelineVisualOverrides,
+} from "./allocationVisualState.js";
+import type {
+  TimelineAssignmentEntry,
+  TimelineDemandEntry,
+  useTimelineContext,
+} from "./TimelineContext.js";
+import { PROJECT_HEADER_HEIGHT, ROW_HEIGHT, SUB_LANE_HEIGHT } from "./timelineConstants.js";
+import { getProjectRowMetricsKey } from "./timelineProjectMetrics.js";
+
+export type TimelineProjectGroup = NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
+
+export type OpenDemandRowLayout = {
+  visibleOpenDemands: TimelineDemandEntry[];
+  laneMap: Map<string, number>;
+  laneCount: number;
+  rowHeight: number;
+};
+
+export type ProjectFlatRow =
+  | {
+      type: "header";
+      key: string;
+      project: TimelineProjectGroup;
+    }
+  | {
+      type: "open-demand";
+      key: string;
+      projectId: string;
+      openDemandCount: number;
+      layout: OpenDemandRowLayout;
+    }
+  | {
+      type: "resource";
+      key: string;
+      project: TimelineProjectGroup;
+      resource: TimelineProjectGroup["resourceRows"][number]["resource"];
+      allocs: TimelineAssignmentEntry[];
+      metricsKey: string;
+    };
+
+export function estimateProjectRowHeight(row: ProjectFlatRow | undefined) {
+  if (!row) return ROW_HEIGHT;
+  if (row.type === "header") return PROJECT_HEADER_HEIGHT;
+  if (row.type === "open-demand") return row.layout.rowHeight;
+  return ROW_HEIGHT;
+}
+
+export function buildProjectFlatRows(
+  visualProjectGroups: TimelineProjectGroup[],
+  openDemandsByProject: Map<string, TimelineDemandEntry[]>,
+  optimisticAllocations: TimelineVisualOverrides,
+): ProjectFlatRow[] {
+  const rows: ProjectFlatRow[] = [];
+
+  for (const project of visualProjectGroups) {
+    rows.push({ type: "header", key: `header-${project.id}`, project });
+
+    const openDemands = openDemandsByProject.get(project.id) ?? [];
+    if (openDemands.length > 0) {
+      rows.push({
+        type: "open-demand",
+        key: `open-demand-${project.id}`,
+        projectId: project.id,
+        openDemandCount: openDemands.length,
+        layout: buildOpenDemandRowLayout(openDemands, optimisticAllocations),
+      });
+    }
+
+    for (const { resource, allocs } of project.resourceRows) {
+      rows.push({
+        type: "resource",
+        key: `${project.id}-${resource.id}`,
+        project,
+        resource,
+        allocs,
+        metricsKey: getProjectRowMetricsKey(project.id, resource.id),
+      });
+    }
+  }
+
+  return rows;
+}
+
+function assignDemandLanes(demands: TimelineDemandEntry[]): Map<string, number> {
+  const laneMap = new Map<string, number>();
+  const laneEnds: Date[] = [];
+
+  const sorted = [...demands].sort(
+    (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
+  );
+
+  for (const demand of sorted) {
+    const start = new Date(demand.startDate);
+    let assigned = -1;
+    for (let i = 0; i < laneEnds.length; i++) {
+      if (laneEnds[i]! < start) {
+        assigned = i;
+        laneEnds[i] = new Date(demand.endDate);
+        break;
+      }
+    }
+    if (assigned === -1) {
+      assigned = laneEnds.length;
+      laneEnds.push(new Date(demand.endDate));
+    }
+    laneMap.set(demand.id, assigned);
+  }
+
+  return laneMap;
+}
+
+function buildOpenDemandRowLayout(
+  openDemands: TimelineDemandEntry[],
+  optimisticAllocations: TimelineVisualOverrides,
+): OpenDemandRowLayout {
+  const visibleOpenDemands = applyVisualOverrides(openDemands, optimisticAllocations);
+  const laneMap = assignDemandLanes(visibleOpenDemands);
+  const laneCount = laneMap.size > 0 ? Math.max(...laneMap.values()) + 1 : 1;
+
+  return {
+    visibleOpenDemands,
+    laneMap,
+    laneCount,
+    rowHeight: Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16),
+  };
+}

apps/web/src/components/ui/EntityCombobox.tsx

@@ -112,6 +112,7 @@ export function EntityCombobox<T extends { id: string }>({
           ? createPortal(
               <div
                 ref={panelRef}
+                data-entity-combobox-overlay="true"
                 className="fixed z-[9998] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
                 style={{
                   top: position.top,

apps/web/src/components/vacations/BalanceCard.tsx

@@ -3,7 +3,6 @@
 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;
   year?: number;
@@ -11,7 +10,7 @@ interface BalanceCardProps {
 }
 
 export function BalanceCard({ resourceId, year = new Date().getFullYear(), compact = false }: BalanceCardProps) {
-  const { data: balance, isLoading } = trpc.entitlement.getBalance.useQuery(
+  const { data: balance, isLoading } = trpc.entitlement.getBalanceDetail.useQuery(
     { resourceId, year },
     { staleTime: 30_000 },
   );
@@ -27,20 +26,20 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
 
   if (!balance) return null;
 
-  const pct = balance.entitledDays > 0
-    ? Math.round((balance.usedDays / balance.entitledDays) * 100)
+  const pct = balance.entitlement > 0
+    ? Math.round((balance.taken / balance.entitlement) * 100)
     : 0;
 
   if (compact) {
     return (
       <div className="flex items-center gap-3 text-sm">
-        <span className="font-medium text-gray-900 dark:text-gray-100">{balance.remainingDays}d remaining</span>
+        <span className="font-medium text-gray-900 dark:text-gray-100">{balance.remaining}d remaining</span>
         <span className="text-gray-400 dark:text-gray-600">·</span>
-        <span className="text-gray-500 dark:text-gray-400">{balance.usedDays}d used of {balance.entitledDays}d</span>
-        {balance.pendingDays > 0 && (
+        <span className="text-gray-500 dark:text-gray-400">{balance.taken}d used of {balance.entitlement}d</span>
+        {balance.pending > 0 && (
           <>
             <span className="text-gray-400 dark:text-gray-600">·</span>
-            <span className="text-amber-600">{balance.pendingDays}d pending</span>
+            <span className="text-amber-600">{balance.pending}d pending</span>
           </>
         )}
       </div>
@@ -52,31 +51,36 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
     : pct >= 70
       ? "var(--color-amber-500, #f59e0b)"
       : "var(--color-emerald-500, #10b981)";
+  const holidayBasisVariants = balance.deductionSummary?.holidayBasisVariants ?? [];
+  const excludedHolidayCount = balance.deductionSummary?.excludedHolidayDates.length ?? 0;
+  const excludedHolidayTooltip = (balance.vacations ?? [])
+    .flatMap((vacation) => vacation.holidayDetails.map((detail) => `${detail.date} · ${detail.source}`))
+    .join("\n");
 
   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">
         <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>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{balance.remaining}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>
+            <p className="text-xs text-gray-400 dark:text-gray-500">{balance.taken} of {balance.entitlement} days used</p>
           </div>
         </div>
-        {balance.carryoverDays > 0 && (
-          <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>
+        {balance.carryOver > 0 && (
+          <span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryOver}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 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." />
+        <Stat label="Entitled" value={balance.entitlement} 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.taken} color="text-gray-600 dark:text-gray-400" tooltip="Days already consumed by approved vacations that have passed." />
+        <Stat label="Pending" value={balance.pending} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
+        <Stat label="Remaining" value={balance.remaining} color={balance.remaining < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
       </div>
 
       {/* Progress bar */}
@@ -85,12 +89,12 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
           className="absolute inset-y-0 left-0 bg-emerald-500 rounded-full transition-all"
           style={{ width: `${Math.min(100, pct)}%` }}
         />
-        {balance.pendingDays > 0 && (
+        {balance.pending > 0 && (
           <div
             className="absolute inset-y-0 bg-amber-400 rounded-full"
             style={{
               left: `${Math.min(100, pct)}%`,
-              width: `${Math.min(100 - pct, Math.round((balance.pendingDays / balance.entitledDays) * 100))}%`,
+              width: `${Math.min(100 - pct, Math.round((balance.pending / balance.entitlement) * 100))}%`,
             }}
           />
         )}
@@ -101,6 +105,35 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
           {balance.sickDays} sick day{balance.sickDays !== 1 ? "s" : ""} recorded (not deducted from annual leave)
         </p>
       )}
+
+      {!!balance.deductionSummary && (balance.deductionSummary.approvedVacationCount > 0 || balance.deductionSummary.pendingVacationCount > 0) && (
+        <div className="rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-xs text-gray-500 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-400">
+          <div className="flex flex-wrap gap-x-3 gap-y-1">
+            <span className="inline-flex items-center gap-1">
+              Formula
+              <InfoTooltip content={balance.deductionSummary.formula} />
+            </span>
+            <span>
+              Vacation deductions: {balance.deductionSummary.approvedDeductedDays}d approved
+              {balance.deductionSummary.pendingDeductedDays > 0 ? ` · ${balance.deductionSummary.pendingDeductedDays}d pending` : ""}
+            </span>
+            <span>
+              Requested: {balance.deductionSummary.approvedRequestedDays + balance.deductionSummary.pendingRequestedDays}d
+            </span>
+            {excludedHolidayCount > 0 && (
+              <span className="inline-flex items-center gap-1">
+                Excluded holidays: {excludedHolidayCount}
+                {excludedHolidayTooltip.length > 0 && <InfoTooltip content={excludedHolidayTooltip} />}
+              </span>
+            )}
+          </div>
+          {holidayBasisVariants.length > 0 && (
+            <div className="mt-1">
+              Holiday basis: {holidayBasisVariants.join(" · ")}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

apps/web/src/components/vacations/EntitlementManager.tsx

@@ -79,6 +79,11 @@ export function EntitlementManager() {
               <tr className="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
                 <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Resource</th>
                 <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Chapter</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <span className="inline-flex items-center gap-0.5">
+                    Location <InfoTooltip content="Country, state and city determine which regional holidays can reduce deducted vacation days differently per person." />
+                  </span>
+                </th>
                 <th className="text-right px-4 py-2.5 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">
                     Entitled <InfoTooltip content="Total vacation days granted to this resource for the selected year." />
@@ -114,6 +119,11 @@ export function EntitlementManager() {
                     <span className="text-xs text-gray-400 dark:text-gray-500 ml-1">({row.eid})</span>
                   </td>
                   <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">{row.chapter ?? "—"}</td>
+                  <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">
+                    {[row.countryCode ?? row.countryName, row.federalState, row.metroCityName]
+                      .filter((value): value is string => Boolean(value))
+                      .join(" / ") || "—"}
+                  </td>
                   <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.entitledDays}</td>
                   <td className="px-4 py-2.5 text-right text-gray-400 dark:text-gray-500">{row.carryoverDays}</td>
                   <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.usedDays}</td>

apps/web/src/components/vacations/HolidayCalendarEditor.tsx

@@ -32,6 +32,28 @@ type CountryRow = {
   metroCities: { id: string; name: string }[];
 };
 
+type HolidayPreviewDetail = {
+  count: number;
+  locationContext: {
+    countryCode: string | null;
+    stateCode: string | null;
+    metroCity: string | null;
+    year: number;
+  };
+  summary: {
+    byScope: Array<{ scope: string; count: number }>;
+    bySourceType: Array<{ sourceType: string; count: number }>;
+    byCalendar: Array<{ calendarName: string; count: number }>;
+  };
+  holidays: Array<{
+    date: string;
+    name: string;
+    scope: string;
+    calendarName: string;
+    sourceType: string;
+  }>;
+};
+
 const SCOPE_LABELS: Record<ScopeType, string> = {
   COUNTRY: "Land",
   STATE: "Bundesland/Region",
@@ -87,7 +109,15 @@ export function HolidayCalendarEditor() {
     return rows.find((country) => country.id === selectedCalendar?.country.id) ?? null;
   }, [countries, selectedCalendar]);
 
-  const previewQuery = trpc.holidayCalendar.previewResolvedHolidays.useQuery(
+  const previewQuery = (trpc.holidayCalendar.previewResolvedHolidaysDetail.useQuery as unknown as (
+    input: {
+      countryId: string;
+      year: number;
+      stateCode?: string;
+      metroCityId?: string;
+    },
+    options: { enabled: boolean; staleTime: number },
+  ) => { data: HolidayPreviewDetail | undefined; isLoading: boolean })( 
     {
       countryId: selectedCalendar?.country.id ?? countryId,
       year: previewYear,
@@ -105,6 +135,7 @@ export function HolidayCalendarEditor() {
       utils.holidayCalendar.listCalendars.invalidate(),
       utils.holidayCalendar.getCalendarById.invalidate(),
       utils.holidayCalendar.previewResolvedHolidays.invalidate(),
+      utils.holidayCalendar.previewResolvedHolidaysDetail.invalidate(),
     ]);
   };
 
@@ -829,26 +860,45 @@ export function HolidayCalendarEditor() {
                 </div>
 
                 <div className="max-h-80 overflow-auto rounded-lg border border-gray-200 dark:border-gray-700">
+                  {previewQuery.data && (
+                    <div className="border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300">
+                      <div className="font-medium text-gray-700 dark:text-gray-200">
+                        Basis: {[
+                          previewQuery.data.locationContext.countryCode,
+                          previewQuery.data.locationContext.stateCode,
+                          previewQuery.data.locationContext.metroCity,
+                        ].filter(Boolean).join(" / ") || "n/a"}
+                      </div>
+                      <div className="mt-1">
+                        Scope: {previewQuery.data.summary.byScope.map((item) => `${item.scope} ${item.count}`).join(" · ") || "none"}
+                      </div>
+                      <div className="mt-1">
+                        Sources: {previewQuery.data.summary.bySourceType.map((item) => `${item.sourceType} ${item.count}`).join(" · ") || "none"}
+                      </div>
+                    </div>
+                  )}
                   <table data-testid="holiday-preview-table" className="w-full text-sm">
                     <thead className="bg-gray-50 dark:bg-gray-900/60">
                       <tr>
                         <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Datum</th>
                         <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Name</th>
+                        <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Scope</th>
                         <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Quelle</th>
                       </tr>
                     </thead>
                     <tbody>
-                      {(previewQuery.data ?? []).length === 0 && (
+                      {(!previewQuery.data || previewQuery.data.holidays.length === 0) && (
                         <tr>
-                          <td colSpan={3} className="px-3 py-6 text-center text-sm text-gray-400">
+                          <td colSpan={4} className="px-3 py-6 text-center text-sm text-gray-400">
                             {previewQuery.isLoading ? "Laedt Vorschau..." : "Keine Feiertage fuer diese Auswahl vorhanden."}
                           </td>
                         </tr>
                       )}
-                      {(previewQuery.data ?? []).map((entry) => (
+                      {(previewQuery.data?.holidays ?? []).map((entry) => (
                         <tr key={`${entry.date}-${entry.name}`} className="border-t border-gray-200 dark:border-gray-700">
                           <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{entry.date}</td>
                           <td className="px-3 py-2 text-gray-900 dark:text-gray-100">{entry.name}</td>
+                          <td className="px-3 py-2 text-gray-600 dark:text-gray-400">{entry.scope}</td>
                           <td className="px-3 py-2 text-gray-600 dark:text-gray-400">{entry.calendarName}</td>
                         </tr>
                       ))}

apps/web/src/components/vacations/MyVacationsClient.tsx

@@ -8,6 +8,17 @@ import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { BalanceCard } from "./BalanceCard.js";
 import { VacationCalendar } from "./VacationCalendar.js";
 import { VACATION_STATUS_BADGE as STATUS_BADGE, VACATION_TYPE_LABELS as TYPE_LABELS, VACATION_TYPE_BADGE } from "~/lib/status-styles.js";
+import { getHolidayBasis, getHolidayBreakdown, getRequestedDays, type VacationExplainabilityEntry } from "./vacationExplainability.js";
+
+type VacationListItem = VacationExplainabilityEntry & {
+  id: string;
+  startDate: Date | string;
+  endDate: Date | string;
+  status: string;
+  type: string;
+  note?: string | null;
+  rejectionReason?: string | null;
+};
 
 export function MyVacationsClient() {
   const [showModal, setShowModal] = useState(false);
@@ -21,8 +32,17 @@ export function MyVacationsClient() {
 
   const resourceId = myResource?.id;
 
-  const { data: vacations, isLoading, refetch } = trpc.vacation.list.useQuery(
-    { resourceId, limit: 200 },
+  const vacationListQuery = trpc.vacation.list.useQuery as unknown as (
+    input: { limit: number; resourceId?: string | undefined },
+    options: { enabled: boolean; staleTime: number },
+  ) => {
+    data: VacationListItem[] | undefined;
+    isLoading: boolean;
+    refetch: () => Promise<unknown>;
+  };
+
+  const { data: vacations, isLoading, refetch } = vacationListQuery(
+    { limit: 200, ...(resourceId ? { resourceId } : {}) },
     { enabled: !!resourceId, staleTime: 15_000 },
   );
 
@@ -33,7 +53,7 @@ export function MyVacationsClient() {
     },
   });
 
-  const vacationList = vacations ?? [];
+  const vacationList: VacationListItem[] = vacations ?? [];
 
   return (
     <div className="p-6 max-w-4xl mx-auto space-y-6">
@@ -102,10 +122,13 @@ export function MyVacationsClient() {
               {vacationList.map((v) => {
                 const start = new Date(v.startDate);
                 const end = new Date(v.endDate);
-                const days = Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
+                const requestedDays = getRequestedDays(v);
+                const deductedDays = typeof v.deductedDays === "number" ? v.deductedDays : null;
+                const holidayBasis = getHolidayBasis(v);
+                const holidayBreakdown = getHolidayBreakdown(v);
                 const status = v.status as string;
                 const type = v.type as string;
-                const vWithExtra = v as unknown as { rejectionReason?: string | null; isHalfDay?: boolean };
+                const affectsBalance = type === VacationType.ANNUAL || type === VacationType.OTHER;
 
                 return (
                   <tr key={v.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
@@ -116,16 +139,54 @@ export function MyVacationsClient() {
                     </td>
                     <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{start.toLocaleDateString("en-GB")}</td>
                     <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{end.toLocaleDateString("en-GB")}</td>
-                    <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{vWithExtra.isHalfDay ? "0.5" : days}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">
+                      <div className="space-y-1">
+                        <div>{requestedDays}</div>
+                        {affectsBalance && deductedDays !== null && (
+                          <div className="text-[11px] text-gray-400 dark:text-gray-500">
+                            Deducted: {deductedDays}
+                          </div>
+                        )}
+                        {affectsBalance && deductedDays === 0 && holidayBreakdown.length > 0 && (
+                          <div className="text-[11px] text-emerald-600 dark:text-emerald-400">
+                            Fully covered by holidays
+                          </div>
+                        )}
+                      </div>
+                    </td>
                     <td className="px-4 py-3">
                       <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[status] ?? ""}`}>
                         {status}
                       </span>
                     </td>
-                    <td className="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs max-w-[200px]">
-                      {vWithExtra.rejectionReason ? (
-                        <span className="text-red-500">{vWithExtra.rejectionReason}</span>
-                      ) : (v.note ?? "—")}
+                    <td className="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs max-w-[280px]">
+                      {v.rejectionReason ? (
+                        <span className="text-red-500">{v.rejectionReason}</span>
+                      ) : (
+                        <div className="space-y-1">
+                          <div>{v.note ?? "—"}</div>
+                          {affectsBalance && holidayBasis.length > 0 && (
+                            <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                              Holiday basis: {holidayBasis.join(" / ")}
+                            </div>
+                          )}
+                          {affectsBalance && holidayBreakdown.length > 0 && (
+                            <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                              Excluded holidays: {holidayBreakdown.map((holiday) => `${holiday.date} (${holiday.source})`).join(", ")}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {!v.rejectionReason && affectsBalance && deductedDays !== null && deductedDays !== requestedDays && holidayBreakdown.length === 0 && (
+                        <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          Local holiday-adjusted deduction snapshot applied.
+                        </div>
+                      )}
+                      {!v.rejectionReason && !affectsBalance && (
+                        <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          This leave type does not reduce annual vacation entitlement.
+                        </div>
+                      )}
                     </td>
                     <td className="px-4 py-3 text-right">
                       {(status === VacationStatus.PENDING || status === VacationStatus.APPROVED) && (

apps/web/src/components/vacations/VacationCalendar.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { VacationStatus, VacationType } from "@capakraken/shared";
+import { VacationStatus } from "@capakraken/shared";
 import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
+import { buildVacationExplainabilityTooltip, type VacationExplainabilityEntry } from "./vacationExplainability.js";
 
-interface VacationEntry {
+interface VacationEntry extends VacationExplainabilityEntry {
   id: string;
   startDate: Date | string;
   endDate: Date | string;
@@ -142,11 +143,12 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
                   const colorClass = VACATION_CALENDAR_COLORS[v.type] ?? "bg-gray-400";
                   const opacityClass = STATUS_OPACITY[v.status] ?? "opacity-100";
                   const name = v.resource?.displayName ?? "—";
+                  const explainabilityTitle = buildVacationExplainabilityTooltip(v);
                   return (
                     <div
                       key={v.id + dateStr}
                       className={`${colorClass} ${opacityClass} text-white text-xs px-1 rounded truncate`}
-                      title={`${name} — ${v.type} (${v.status})`}
+                      title={[`${name} — ${v.type} (${v.status})`, explainabilityTitle].filter(Boolean).join("\n")}
                     >
                       {name.split(" ")[0]}
                     </div>

apps/web/src/components/vacations/vacationExplainability.ts

@@ -0,0 +1,88 @@
+"use client";
+
+export const HOLIDAY_SOURCE_LABELS = {
+  CALENDAR: "Holiday Calendar",
+  LEGACY_PUBLIC_HOLIDAY: "Legacy import",
+  CALENDAR_AND_LEGACY: "Holiday Calendar + legacy",
+} as const;
+
+export type VacationExplainabilityEntry = {
+  startDate: Date | string;
+  endDate: Date | string;
+  isHalfDay?: boolean | null;
+  deductedDays?: number | null;
+  holidayCountryCode?: string | null;
+  holidayCountryName?: string | null;
+  holidayFederalState?: string | null;
+  holidayMetroCityName?: string | null;
+  holidayCalendarDates?: unknown;
+  holidayLegacyPublicHolidayDates?: unknown;
+};
+
+function toSortedDateList(value: unknown): string[] {
+  return Array.isArray(value) && value.every((entry) => typeof entry === "string")
+    ? [...value].sort()
+    : [];
+}
+
+export function getRequestedDays(vacation: Pick<VacationExplainabilityEntry, "startDate" | "endDate" | "isHalfDay">): number {
+  if (vacation.isHalfDay) {
+    return 0.5;
+  }
+
+  const start = new Date(vacation.startDate);
+  const end = new Date(vacation.endDate);
+  return Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
+}
+
+export function getHolidayBasis(vacation: VacationExplainabilityEntry): string[] {
+  return [
+    vacation.holidayCountryName ?? vacation.holidayCountryCode ?? null,
+    vacation.holidayFederalState ?? null,
+    vacation.holidayMetroCityName ?? null,
+  ].filter((value): value is string => Boolean(value));
+}
+
+export function getHolidayBreakdown(vacation: VacationExplainabilityEntry): Array<{ date: string; source: string }> {
+  const calendarDates = toSortedDateList(vacation.holidayCalendarDates);
+  const legacyDates = toSortedDateList(vacation.holidayLegacyPublicHolidayDates);
+  const uniqueDates = [...new Set([...calendarDates, ...legacyDates])].sort();
+
+  return uniqueDates.map((date) => ({
+    date,
+    source:
+      calendarDates.includes(date) && legacyDates.includes(date)
+        ? HOLIDAY_SOURCE_LABELS.CALENDAR_AND_LEGACY
+        : calendarDates.includes(date)
+          ? HOLIDAY_SOURCE_LABELS.CALENDAR
+          : HOLIDAY_SOURCE_LABELS.LEGACY_PUBLIC_HOLIDAY,
+  }));
+}
+
+export function buildVacationExplainabilityTooltip(
+  vacation: VacationExplainabilityEntry & { type?: string | null },
+): string | null {
+  const requestedDays = getRequestedDays(vacation);
+  const deductedDays = typeof vacation.deductedDays === "number" ? vacation.deductedDays : null;
+  const holidayBasis = getHolidayBasis(vacation);
+  const holidayBreakdown = getHolidayBreakdown(vacation);
+  const lines = [`Requested: ${requestedDays}d`];
+
+  if (deductedDays !== null) {
+    lines.push(`Deducted: ${deductedDays}d`);
+  }
+
+  if (holidayBasis.length > 0) {
+    lines.push(`Holiday basis: ${holidayBasis.join(" / ")}`);
+  }
+
+  if (holidayBreakdown.length > 0) {
+    lines.push(`Excluded holidays: ${holidayBreakdown.map((holiday) => `${holiday.date} (${holiday.source})`).join(", ")}`);
+  }
+
+  if ((vacation.type === "SICK" || vacation.type === "PUBLIC_HOLIDAY") && deductedDays === 0) {
+    lines.push("Does not reduce annual vacation entitlement.");
+  }
+
+  return lines.length > 0 ? lines.join("\n") : null;
+}

apps/web/src/hooks/useAnchoredOverlay.ts

@@ -14,6 +14,8 @@ interface UseAnchoredOverlayOptions<TTrigger extends HTMLElement> {
   crossAlign?: VerticalAlign;
   matchTriggerWidth?: boolean;
   triggerRef?: RefObject<TTrigger | null>;
+  ignoreElements?: Array<HTMLElement | null>;
+  ignoreSelectors?: string[];
 }
 
 interface OverlayPosition {
@@ -32,15 +34,19 @@ export function useAnchoredOverlay<TTrigger extends HTMLElement = HTMLElement>({
   crossAlign = "start",
   matchTriggerWidth = false,
   triggerRef: externalTriggerRef,
+  ignoreElements = [],
+  ignoreSelectors = [],
 }: UseAnchoredOverlayOptions<TTrigger>) {
   const internalTriggerRef = useRef<TTrigger | null>(null);
   const triggerRef = externalTriggerRef ?? internalTriggerRef;
   const panelRef = useRef<HTMLDivElement | null>(null);
+  const frameRef = useRef<number | null>(null);
   const [position, setPosition] = useState<OverlayPosition>({ top: 0, left: 0 });
 
   const updatePosition = useCallback(() => {
     const trigger = triggerRef.current;
-    if (!trigger) {
+    if (!trigger || !trigger.isConnected) {
+      onClose();
       return;
     }
 
@@ -89,18 +95,30 @@ export function useAnchoredOverlay<TTrigger extends HTMLElement = HTMLElement>({
       left: boundedLeft,
       ...(matchTriggerWidth ? { minWidth: rect.width } : {}),
     });
-  }, [align, crossAlign, matchTriggerWidth, offset, side, triggerRef, viewportPadding]);
+  }, [align, crossAlign, matchTriggerWidth, offset, onClose, side, triggerRef, viewportPadding]);
 
   useEffect(() => {
     if (!open) {
       return;
     }
 
-    function handlePointerDown(event: MouseEvent) {
-      const target = event.target as Node;
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
       if (triggerRef.current?.contains(target) || panelRef.current?.contains(target)) {
         return;
       }
+      if (ignoreElements.some((element) => element?.contains(target))) {
+        return;
+      }
+      if (
+        target instanceof Element
+        && ignoreSelectors.some((selector) => target.closest(selector) !== null)
+      ) {
+        return;
+      }
       onClose();
     }
 
@@ -110,30 +128,52 @@ export function useAnchoredOverlay<TTrigger extends HTMLElement = HTMLElement>({
       }
     }
 
-    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("pointerdown", handlePointerDown, true);
     window.addEventListener("keydown", handleEscape);
 
     return () => {
-      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
       window.removeEventListener("keydown", handleEscape);
     };
-  }, [onClose, open]);
+  }, [ignoreElements, ignoreSelectors, onClose, open, triggerRef]);
 
   useEffect(() => {
     if (!open) {
       return;
     }
 
-    updatePosition();
-    const rafId = window.requestAnimationFrame(updatePosition);
+    function cancelScheduledFrame() {
+      if (frameRef.current === null) {
+        return;
+      }
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
 
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
+    function scheduleUpdate() {
+      if (frameRef.current !== null) {
+        return;
+      }
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        updatePosition();
+      });
+    }
+
+    updatePosition();
+    scheduleUpdate();
+
+    window.addEventListener("resize", scheduleUpdate, { passive: true });
+    window.addEventListener("scroll", scheduleUpdate, true);
+    window.visualViewport?.addEventListener("resize", scheduleUpdate, { passive: true });
+    window.visualViewport?.addEventListener("scroll", scheduleUpdate, { passive: true });
 
     return () => {
-      window.cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
+      cancelScheduledFrame();
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("scroll", scheduleUpdate, true);
+      window.visualViewport?.removeEventListener("resize", scheduleUpdate);
+      window.visualViewport?.removeEventListener("scroll", scheduleUpdate);
     };
   }, [open, updatePosition]);
 

apps/web/src/hooks/useInvalidatePlanningViews.ts

@@ -9,6 +9,7 @@ export function useInvalidateTimeline() {
     void utils.timeline.getMyEntriesView.invalidate();
     void utils.timeline.getHolidayOverlays.invalidate();
     void utils.timeline.getMyHolidayOverlays.invalidate();
+    void utils.vacation.list.invalidate();
     void utils.timeline.getProjectContext.invalidate();
     void utils.timeline.getBudgetStatus.invalidate();
   };
@@ -31,6 +32,7 @@ export function useInvalidatePlanningViews() {
     void utils.timeline.getMyEntriesView.invalidate();
     void utils.timeline.getHolidayOverlays.invalidate();
     void utils.timeline.getMyHolidayOverlays.invalidate();
+    void utils.vacation.list.invalidate();
     void utils.timeline.getProjectContext.invalidate();
     void utils.timeline.getBudgetStatus.invalidate();
   };

apps/web/src/hooks/useTimelineDrag.ts

@@ -1,10 +1,12 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "./useInvalidatePlanningViews.js";
 import { pixelsToDays, computeDragDates } from "~/components/timeline/dragMath.js";
 
+const DRAG_CLICK_THRESHOLD_PX = 5;
+
 // ─── Project-shift drag state ───────────────────────────────────────────────
 
 export interface DragState {
@@ -17,6 +19,7 @@ export interface DragState {
   currentStartDate: Date | null;
   currentEndDate: Date | null;
   startMouseX: number;
+  pointerDeltaX: number;
   originalLeft: number;
   blockWidth: number;
   daysDelta: number;
@@ -50,6 +53,7 @@ const INITIAL_DRAG_STATE: DragState = {
   currentStartDate: null,
   currentEndDate: null,
   startMouseX: 0,
+  pointerDeltaX: 0,
   originalLeft: 0,
   blockWidth: 0,
   daysDelta: 0,
@@ -58,39 +62,175 @@ const INITIAL_DRAG_STATE: DragState = {
 // ─── Per-allocation drag state ──────────────────────────────────────────────
 
 export type AllocDragMode = "move" | "resize-start" | "resize-end";
+export type AllocDragScope = "allocation" | "segment";
 
 export interface AllocDragState {
   isActive: boolean;
   mode: AllocDragMode;
+  scope: AllocDragScope;
   allocationId: string | null;
   mutationAllocationId: string | null;
   projectId: string | null;
   projectName: string | null;
   resourceId: string | null;
+  allocationStartDate: Date | null;
+  allocationEndDate: Date | null;
   originalStartDate: Date | null;
   originalEndDate: Date | null;
   currentStartDate: Date | null;
   currentEndDate: Date | null;
   startMouseX: number;
+  pointerDeltaX: number;
   daysDelta: number;
 }
 
 const INITIAL_ALLOC_DRAG: AllocDragState = {
   isActive: false,
   mode: "move",
+  scope: "allocation",
   allocationId: null,
   mutationAllocationId: null,
   projectId: null,
   projectName: null,
   resourceId: null,
+  allocationStartDate: null,
+  allocationEndDate: null,
   originalStartDate: null,
   originalEndDate: null,
   currentStartDate: null,
   currentEndDate: null,
   startMouseX: 0,
+  pointerDeltaX: 0,
   daysDelta: 0,
 };
 
+type LivePreviewMode = AllocDragMode;
+
+type LivePreviewTarget = {
+  element: HTMLElement;
+  baseLeft: number;
+  baseWidth: number;
+  baseTransform: string;
+};
+
+type LivePreviewSession = {
+  mode: LivePreviewMode;
+  cellWidth: number;
+  targets: LivePreviewTarget[];
+  pointerDeltaX: number;
+  daysDelta: number;
+  frame: number | null;
+};
+
+function toPxValue(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function joinTransforms(...parts: Array<string | undefined>): string {
+  return parts
+    .map((part) => part?.trim())
+    .filter((part): part is string => Boolean(part) && part !== "none")
+    .join(" ");
+}
+
+function captureLivePreviewTargets(elements: Iterable<HTMLElement>): LivePreviewTarget[] {
+  const seen = new Set<HTMLElement>();
+  const targets: LivePreviewTarget[] = [];
+
+  for (const element of elements) {
+    if (seen.has(element)) continue;
+    seen.add(element);
+    targets.push({
+      element,
+      baseLeft: toPxValue(element.style.left),
+      baseWidth: toPxValue(element.style.width),
+      baseTransform: element.style.transform,
+    });
+  }
+
+  return targets;
+}
+
+function renderLivePreview(session: LivePreviewSession) {
+  const pointerOffsetX = session.pointerDeltaX - session.daysDelta * session.cellWidth;
+
+  for (const target of session.targets) {
+    let left = target.baseLeft;
+    let width = target.baseWidth;
+
+    if (session.mode === "move") {
+      left += session.daysDelta * session.cellWidth;
+    } else if (session.mode === "resize-start") {
+      left += session.daysDelta * session.cellWidth;
+      width = Math.max(session.cellWidth, width - session.daysDelta * session.cellWidth);
+    } else {
+      width = Math.max(session.cellWidth, width + session.daysDelta * session.cellWidth);
+    }
+
+    if (session.mode === "resize-start") {
+      const nextWidth = width - pointerOffsetX;
+      if (nextWidth < session.cellWidth) {
+        left += width - session.cellWidth;
+        width = session.cellWidth;
+      } else {
+        left += pointerOffsetX;
+        width = nextWidth;
+      }
+    } else if (session.mode === "resize-end") {
+      width = Math.max(session.cellWidth, width + pointerOffsetX);
+    }
+
+    target.element.style.left = `${left}px`;
+    target.element.style.width = `${Math.max(session.cellWidth, width)}px`;
+    target.element.style.transform = joinTransforms(
+      target.baseTransform,
+      session.mode === "move" && pointerOffsetX !== 0
+        ? `translateX(${pointerOffsetX}px)`
+        : undefined,
+    );
+  }
+}
+
+function scheduleLivePreview(session: LivePreviewSession) {
+  if (session.frame !== null) return;
+  session.frame = requestAnimationFrame(() => {
+    session.frame = null;
+    renderLivePreview(session);
+  });
+}
+
+function clearLivePreview(session: LivePreviewSession | null) {
+  if (!session) return;
+  if (session.frame !== null) {
+    cancelAnimationFrame(session.frame);
+  }
+
+  for (const target of session.targets) {
+    target.element.style.left = `${target.baseLeft}px`;
+    target.element.style.width = `${target.baseWidth}px`;
+    target.element.style.transform = target.baseTransform;
+  }
+}
+
+function datesMatch(a: Date | null, b: Date | null) {
+  return Boolean(a && b) && a!.getTime() === b!.getTime();
+}
+
+function preserveLivePreview(session: LivePreviewSession | null) {
+  if (!session) return;
+  if (session.frame !== null) {
+    cancelAnimationFrame(session.frame);
+    session.frame = null;
+  }
+
+  for (const target of session.targets) {
+    target.baseLeft = toPxValue(target.element.style.left);
+    target.baseWidth = toPxValue(target.element.style.width);
+    target.baseTransform = target.element.style.transform;
+  }
+}
+
 // ─── Range-select state ─────────────────────────────────────────────────────
 
 export interface RangeState {
@@ -163,8 +303,19 @@ export interface AllocationMovedSnapshot {
   after: { startDate: Date; endDate: Date };
 }
 
+export interface OptimisticTimelineEntry {
+  id: string;
+  startDate: Date | string;
+  endDate: Date | string;
+}
+
+export interface OptimisticTimelineOverride {
+  startDate: Date;
+  endDate: Date;
+}
+
 export function useTimelineDrag({
-  cellWidth,
+  cellWidthRef,
   onShiftApplied,
   onBlockClick,
   onRangeSelected,
@@ -172,7 +323,7 @@ export function useTimelineDrag({
   onShiftClickAlloc,
   onMultiDragComplete,
 }: {
-  cellWidth: number;
+  cellWidthRef: MutableRefObject<number>;
   onShiftApplied?: (projectId: string) => void;
   onBlockClick?: (info: BlockClickInfo) => void;
   onRangeSelected?: (info: RangeSelectedInfo) => void;
@@ -189,13 +340,14 @@ export function useTimelineDrag({
   const allocDragRef = useRef<AllocDragState>(INITIAL_ALLOC_DRAG);
   const rangeStateRef = useRef<RangeState>(INITIAL_RANGE_STATE);
   const multiSelectRef = useRef<MultiSelectState>(INITIAL_MULTI_SELECT);
+  const projectPreviewRef = useRef<LivePreviewSession | null>(null);
+  const allocPreviewRef = useRef<LivePreviewSession | null>(null);
+  const projectDragCleanupRef = useRef<(() => void) | null>(null);
+  const allocDragCleanupRef = useRef<(() => void) | null>(null);
+  const multiSelectCleanupRef = useRef<(() => void) | null>(null);
   // 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);
-  cellWidthRef.current = cellWidth;
-
   // Touch disambiguation: track initial touch position to distinguish horizontal drag from vertical scroll
   const touchStartRef = useRef<{ x: number; y: number; decided: boolean }>({
     x: 0,
@@ -218,6 +370,148 @@ export function useTimelineDrag({
   const utils = trpc.useUtils();
   const invalidateTimeline = useInvalidateTimeline();
 
+  const setProjectPreviewTargets = useCallback((projectId: string, currentTarget?: EventTarget | null) => {
+    clearLivePreview(projectPreviewRef.current);
+
+    const projectTargets = captureLivePreviewTargets(
+      document.querySelectorAll<HTMLElement>(
+        `[data-timeline-drag-preview~="project-shift"][data-timeline-project-id="${projectId}"]`,
+      ),
+    );
+
+    if (projectTargets.length === 0 && currentTarget instanceof HTMLElement) {
+      projectTargets.push(...captureLivePreviewTargets([currentTarget]));
+    }
+
+    projectPreviewRef.current =
+      projectTargets.length > 0
+        ? {
+            mode: "move",
+            cellWidth: cellWidthRef.current,
+            targets: projectTargets,
+            pointerDeltaX: 0,
+            daysDelta: 0,
+            frame: null,
+          }
+        : null;
+  }, []);
+
+  const setAllocationPreviewTarget = useCallback((currentTarget?: EventTarget | null, mode: AllocDragMode = "move") => {
+    clearLivePreview(allocPreviewRef.current);
+
+    const root =
+      currentTarget instanceof HTMLElement
+        ? currentTarget.closest<HTMLElement>('[data-timeline-drag-preview~="allocation"]')
+        : null;
+    const targets = root ? captureLivePreviewTargets([root]) : [];
+
+    allocPreviewRef.current =
+      targets.length > 0
+        ? {
+            mode,
+            cellWidth: cellWidthRef.current,
+            targets,
+            pointerDeltaX: 0,
+            daysDelta: 0,
+            frame: null,
+          }
+        : null;
+  }, []);
+
+  const updateLivePreview = useCallback(
+    (previewRef: MutableRefObject<LivePreviewSession | null>, pointerDeltaX: number, daysDelta: number) => {
+      const preview = previewRef.current;
+      if (!preview) return;
+      preview.cellWidth = cellWidthRef.current;
+      preview.pointerDeltaX = pointerDeltaX;
+      preview.daysDelta = daysDelta;
+      scheduleLivePreview(preview);
+    },
+    [],
+  );
+
+  const updateProjectDragPosition = useCallback(
+    (clientX: number) => {
+      const drag = dragStateRef.current;
+      if (!drag.isDragging || !drag.originalStartDate || !drag.originalEndDate) return false;
+
+      const deltaX = clientX - drag.startMouseX;
+      const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
+      updateLivePreview(projectPreviewRef, deltaX, daysDelta);
+
+      if (daysDelta === drag.daysDelta) {
+        if (deltaX !== drag.pointerDeltaX) {
+          dragStateRef.current = { ...drag, pointerDeltaX: deltaX };
+        }
+        return true;
+      }
+
+      const { start: newStart, end: newEnd } = computeDragDates(
+        "move",
+        drag.originalStartDate,
+        drag.originalEndDate,
+        daysDelta,
+      );
+      const updated: DragState = {
+        ...drag,
+        currentStartDate: newStart,
+        currentEndDate: newEnd,
+        pointerDeltaX: deltaX,
+        daysDelta,
+      };
+      dragStateRef.current = updated;
+      setDragState(updated);
+      return true;
+    },
+    [updateLivePreview],
+  );
+
+  const updateAllocationDragPosition = useCallback(
+    (clientX: number) => {
+      const alloc = allocDragRef.current;
+      if (!alloc.isActive || !alloc.originalStartDate || !alloc.originalEndDate) return false;
+
+      const pointerDeltaX = clientX - alloc.startMouseX;
+      const daysDelta = pixelsToDays(pointerDeltaX, cellWidthRef.current);
+      updateLivePreview(allocPreviewRef, pointerDeltaX, daysDelta);
+
+      if (daysDelta === alloc.daysDelta) {
+        if (pointerDeltaX !== alloc.pointerDeltaX) {
+          allocDragRef.current = { ...alloc, pointerDeltaX };
+        }
+        return true;
+      }
+
+      const { start: newStart, end: newEnd } = computeDragDates(
+        alloc.mode,
+        alloc.originalStartDate,
+        alloc.originalEndDate,
+        daysDelta,
+      );
+
+      const updated: AllocDragState = {
+        ...alloc,
+        currentStartDate: newStart,
+        currentEndDate: newEnd,
+        pointerDeltaX,
+        daysDelta,
+      };
+      allocDragRef.current = updated;
+      setAllocDragState(updated);
+      return true;
+    },
+    [updateLivePreview],
+  );
+
+  const clearProjectDragSession = useCallback(() => {
+    projectDragCleanupRef.current?.();
+    projectDragCleanupRef.current = null;
+    clearLivePreview(projectPreviewRef.current);
+    projectPreviewRef.current = null;
+    dragStateRef.current = INITIAL_DRAG_STATE;
+    setDragState(INITIAL_DRAG_STATE);
+  }, []);
+
   // Project-shift preview
   const { data: previewData, isFetching: isPreviewLoading } = trpc.timeline.previewShift.useQuery(
     {
@@ -248,7 +542,46 @@ export function useTimelineDrag({
     mutateAsync: (...args: unknown[]) => Promise<unknown>;
   };
 
+  const finalizeProjectDrag = useCallback(
+    (clientX: number, mode: "mutate" | "mutateAsync" = "mutate") => {
+      updateProjectDragPosition(clientX);
+      const finalDrag = dragStateRef.current;
+      if (!finalDrag.isDragging) return null;
+
+      const mutationInput =
+        finalDrag.daysDelta !== 0 &&
+        finalDrag.projectId &&
+        finalDrag.currentStartDate &&
+        finalDrag.currentEndDate
+          ? {
+              projectId: finalDrag.projectId,
+              newStartDate: finalDrag.currentStartDate,
+              newEndDate: finalDrag.currentEndDate,
+            }
+          : null;
+
+      if (finalDrag.daysDelta !== 0) {
+        preserveLivePreview(projectPreviewRef.current);
+      }
+
+      clearProjectDragSession();
+
+      if (!mutationInput) return null;
+      if (mode === "mutateAsync") {
+        return applyShiftMutation.mutateAsync(mutationInput);
+      }
+
+      applyShiftMutation.mutate(mutationInput);
+      return null;
+    },
+    [applyShiftMutation, clearProjectDragSession, updateProjectDragPosition],
+  );
+
   const pendingSnapshotRef = useRef<AllocationMovedSnapshot | null>(null);
+  const pendingOptimisticAllocationIdRef = useRef<string | null>(null);
+  const [optimisticAllocations, setOptimisticAllocations] = useState<Map<string, OptimisticTimelineOverride>>(
+    () => new Map(),
+  );
 
   const updateAllocMutation = trpc.timeline.updateAllocationInline.useMutation({
     onSuccess: () => {
@@ -259,8 +592,60 @@ export function useTimelineDrag({
         pendingSnapshotRef.current = null;
       }
     },
+    onError: () => {
+      clearPendingOptimisticAllocation();
+    },
   });
 
+  const extractAllocFragmentMutation = trpc.timeline.extractAllocationFragment.useMutation({
+    onSuccess: () => {
+      invalidateTimeline();
+    },
+  });
+
+  const clearPendingOptimisticAllocation = useCallback((allocationId?: string | null) => {
+    pendingSnapshotRef.current = null;
+    const optimisticAllocationId = allocationId ?? pendingOptimisticAllocationIdRef.current;
+    if (!optimisticAllocationId) {
+      pendingOptimisticAllocationIdRef.current = null;
+      return;
+    }
+
+    setOptimisticAllocations((prev) => {
+      if (!prev.has(optimisticAllocationId)) return prev;
+      const next = new Map(prev);
+      next.delete(optimisticAllocationId);
+      return next;
+    });
+    pendingOptimisticAllocationIdRef.current = null;
+  }, []);
+
+  const reconcileOptimisticAllocations = useCallback((entries: readonly OptimisticTimelineEntry[]) => {
+    setOptimisticAllocations((prev) => {
+      if (prev.size === 0) return prev;
+
+      const next = new Map(prev);
+      for (const entry of entries) {
+        const override = next.get(entry.id);
+        if (!override) continue;
+
+        const startTime = new Date(entry.startDate).getTime();
+        const endTime = new Date(entry.endDate).getTime();
+        if (
+          startTime === override.startDate.getTime() &&
+          endTime === override.endDate.getTime()
+        ) {
+          next.delete(entry.id);
+          if (pendingOptimisticAllocationIdRef.current === entry.id) {
+            pendingOptimisticAllocationIdRef.current = null;
+          }
+        }
+      }
+
+      return next.size === prev.size ? prev : next;
+    });
+  }, []);
+
   // ── Project-bar drag (shifts all allocations) ──────────────────────────────
 
   const onProjectBarMouseDown = useCallback(
@@ -286,14 +671,36 @@ export function useTimelineDrag({
         currentStartDate: opts.startDate,
         currentEndDate: opts.endDate,
         startMouseX: e.clientX,
+        pointerDeltaX: 0,
         originalLeft: 0,
         blockWidth: 0,
         daysDelta: 0,
       };
       dragStateRef.current = state;
       setDragState(state);
+
+      setProjectPreviewTargets(opts.projectId, e.currentTarget);
+      projectDragCleanupRef.current?.();
+
+      function handleMove(ev: MouseEvent) {
+        updateProjectDragPosition(ev.clientX);
+      }
+
+      function handleUp(ev: MouseEvent) {
+        projectDragCleanupRef.current?.();
+        projectDragCleanupRef.current = null;
+        void finalizeProjectDrag(ev.clientX);
+        ev.preventDefault();
+      }
+
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleUp);
+      projectDragCleanupRef.current = () => {
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleUp);
+      };
     },
-    [],
+    [finalizeProjectDrag, setProjectPreviewTargets, updateProjectDragPosition],
   );
 
   // Legacy — kept for backward compat (triggers project shift from allocation block)
@@ -323,6 +730,7 @@ export function useTimelineDrag({
         currentStartDate: opts.startDate,
         currentEndDate: opts.endDate,
         startMouseX: e.clientX,
+        pointerDeltaX: 0,
         originalLeft: opts.blockLeft,
         blockWidth: opts.blockWidth,
         daysDelta: 0,
@@ -351,6 +759,9 @@ export function useTimelineDrag({
         resourceId: string | null;
         startDate: Date;
         endDate: Date;
+        allocationStartDate?: Date;
+        allocationEndDate?: Date;
+        scope?: AllocDragScope;
       },
     ) => {
       if (e.button !== 0) return;
@@ -373,6 +784,7 @@ export function useTimelineDrag({
 
         setMultiSelectState((prev) => ({ ...prev, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode }));
         multiSelectRef.current = { ...ms, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode };
+        multiSelectCleanupRef.current?.();
 
         function handleMultiMove(ev: MouseEvent) {
           const deltaX = ev.clientX - startMouseX;
@@ -384,11 +796,11 @@ export function useTimelineDrag({
           multiSelectRef.current = { ...multiSelectRef.current, multiDragDaysDelta: daysDelta };
         }
 
-        function handleMultiUp() {
-          document.removeEventListener("mousemove", handleMultiMove);
-          document.removeEventListener("mouseup", handleMultiUp);
+        function handleMultiUp(ev: MouseEvent) {
+          multiSelectCleanupRef.current?.();
+          multiSelectCleanupRef.current = null;
 
-          const finalDelta = currentDaysDelta;
+          const finalDelta = pixelsToDays(ev.clientX - startMouseX, cellWidthRef.current);
 
           setMultiSelectState((prev) => ({ ...prev, isMultiDragging: false, multiDragDaysDelta: 0 }));
           multiSelectRef.current = { ...multiSelectRef.current, isMultiDragging: false, multiDragDaysDelta: 0 };
@@ -402,6 +814,10 @@ export function useTimelineDrag({
 
         document.addEventListener("mousemove", handleMultiMove);
         document.addEventListener("mouseup", handleMultiUp);
+        multiSelectCleanupRef.current = () => {
+          document.removeEventListener("mousemove", handleMultiMove);
+          document.removeEventListener("mouseup", handleMultiUp);
+        };
         return;
       }
 
@@ -410,56 +826,57 @@ export function useTimelineDrag({
       const initial: AllocDragState = {
         isActive: true,
         mode: opts.mode,
+        scope: opts.scope ?? "allocation",
         allocationId: opts.allocationId,
         mutationAllocationId: opts.mutationAllocationId ?? opts.allocationId,
         projectId: opts.projectId,
         projectName: opts.projectName,
         resourceId: opts.resourceId,
+        allocationStartDate: opts.allocationStartDate ?? opts.startDate,
+        allocationEndDate: opts.allocationEndDate ?? opts.endDate,
         originalStartDate: opts.startDate,
         originalEndDate: opts.endDate,
         currentStartDate: opts.startDate,
         currentEndDate: opts.endDate,
         startMouseX: e.clientX,
+        pointerDeltaX: 0,
         daysDelta: 0,
       };
       allocDragRef.current = initial;
       setAllocDragState(initial);
+      setAllocationPreviewTarget(e.currentTarget, opts.mode);
+      allocDragCleanupRef.current?.();
 
       // ── document handlers ────────────────────────────────────────────────
-
       function handleMove(ev: MouseEvent) {
-        const alloc = allocDragRef.current;
-        if (!alloc.isActive || !alloc.originalStartDate || !alloc.originalEndDate) return;
-
-        const deltaX = ev.clientX - alloc.startMouseX;
-        const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
-        if (daysDelta === alloc.daysDelta) return;
-
-        const { start: newStart, end: newEnd } = computeDragDates(
-          alloc.mode,
-          alloc.originalStartDate,
-          alloc.originalEndDate,
-          daysDelta,
-        );
-
-        const updated: AllocDragState = {
-          ...alloc,
-          currentStartDate: newStart,
-          currentEndDate: newEnd,
-          daysDelta,
-        };
-        allocDragRef.current = updated;
-        setAllocDragState(updated);
+        updateAllocationDragPosition(ev.clientX);
       }
 
-      function handleUp() {
-        document.removeEventListener("mousemove", handleMove);
-        document.removeEventListener("mouseup", handleUp);
-
+      function handleUp(ev: MouseEvent) {
+        allocDragCleanupRef.current?.();
+        allocDragCleanupRef.current = null;
+        updateAllocationDragPosition(ev.clientX);
         const alloc = allocDragRef.current;
         if (!alloc.isActive) return;
+        const pointerDelta = Math.abs(alloc.pointerDeltaX);
+        const hasDateChange =
+          Boolean(alloc.originalStartDate && alloc.currentStartDate && alloc.originalEndDate && alloc.currentEndDate) &&
+          (
+            alloc.originalStartDate!.getTime() !== alloc.currentStartDate!.getTime() ||
+            alloc.originalEndDate!.getTime() !== alloc.currentEndDate!.getTime()
+          );
 
-        if (alloc.daysDelta === 0 && alloc.allocationId) {
+        if (hasDateChange) {
+          preserveLivePreview(allocPreviewRef.current);
+        }
+        clearLivePreview(allocPreviewRef.current);
+        allocPreviewRef.current = null;
+        const shouldTreatAsClick =
+          alloc.mode === "move" &&
+          alloc.daysDelta === 0 &&
+          pointerDelta <= DRAG_CLICK_THRESHOLD_PX;
+
+        if (shouldTreatAsClick && alloc.allocationId) {
           // No movement → treat as click
           if (wasShift) {
             // Shift+Click → toggle multi-selection for this allocation
@@ -474,19 +891,61 @@ export function useTimelineDrag({
               endDate: alloc.originalEndDate!,
             });
           }
-        } else if (alloc.allocationId && alloc.currentStartDate && alloc.currentEndDate) {
+        } else if (hasDateChange && alloc.allocationId && alloc.currentStartDate && alloc.currentEndDate) {
+          const activeAllocationId = alloc.allocationId;
+          const currentStartDate = alloc.currentStartDate;
+          const currentEndDate = alloc.currentEndDate;
+          const baseMutationAllocationId = alloc.mutationAllocationId ?? activeAllocationId;
+          const requiresExtraction =
+            alloc.scope === "segment" &&
+            (!datesMatch(alloc.originalStartDate, alloc.allocationStartDate) ||
+              !datesMatch(alloc.originalEndDate, alloc.allocationEndDate));
+
           pendingSnapshotRef.current = {
-            allocationId: alloc.allocationId,
-            mutationAllocationId: alloc.mutationAllocationId ?? alloc.allocationId,
+            allocationId: activeAllocationId,
+            mutationAllocationId: baseMutationAllocationId,
             projectName: alloc.projectName ?? "",
             before: { startDate: alloc.originalStartDate!, endDate: alloc.originalEndDate! },
-            after: { startDate: alloc.currentStartDate, endDate: alloc.currentEndDate },
+            after: { startDate: currentStartDate, endDate: currentEndDate },
           };
-          updateAllocMutation.mutate({
-            allocationId: alloc.mutationAllocationId ?? alloc.allocationId,
-            startDate: alloc.currentStartDate,
-            endDate: alloc.currentEndDate,
+          pendingOptimisticAllocationIdRef.current = activeAllocationId;
+          setOptimisticAllocations((prev) => {
+            const next = new Map(prev);
+            next.set(activeAllocationId, {
+              startDate: currentStartDate,
+              endDate: currentEndDate,
+            });
+            return next;
           });
+          void (async () => {
+            try {
+              let mutationAllocationId = baseMutationAllocationId;
+
+              if (requiresExtraction) {
+                const extracted = await extractAllocFragmentMutation.mutateAsync({
+                  allocationId: mutationAllocationId,
+                  startDate: alloc.originalStartDate!,
+                  endDate: alloc.originalEndDate!,
+                });
+                mutationAllocationId = extracted.extractedAllocationId;
+              }
+
+              pendingSnapshotRef.current = pendingSnapshotRef.current
+                ? {
+                    ...pendingSnapshotRef.current,
+                    mutationAllocationId,
+                  }
+                : null;
+
+              updateAllocMutation.mutate({
+                allocationId: mutationAllocationId,
+                startDate: currentStartDate,
+                endDate: currentEndDate,
+              });
+            } catch {
+              clearPendingOptimisticAllocation(activeAllocationId);
+            }
+          })();
         }
 
         allocDragRef.current = INITIAL_ALLOC_DRAG;
@@ -495,8 +954,18 @@ export function useTimelineDrag({
 
       document.addEventListener("mousemove", handleMove);
       document.addEventListener("mouseup", handleUp);
+      allocDragCleanupRef.current = () => {
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleUp);
+      };
     },
-    [updateAllocMutation.mutate], // mutate is stable across renders (React Query guarantee)
+    [
+      clearPendingOptimisticAllocation,
+      extractAllocFragmentMutation,
+      setAllocationPreviewTarget,
+      updateAllocationDragPosition,
+      updateAllocMutation,
+    ],
   );
 
   // ── Range-select ────────────────────────────────────────────────────────────
@@ -531,27 +1000,7 @@ export function useTimelineDrag({
 
   const onCanvasMouseMove = useCallback(
     (e: React.MouseEvent) => {
-      // Project shift
-      const drag = dragStateRef.current;
-      if (drag.isDragging && drag.originalStartDate && drag.originalEndDate) {
-        const deltaX = e.clientX - drag.startMouseX;
-        const daysDelta = pixelsToDays(deltaX, cellWidth);
-        if (daysDelta !== drag.daysDelta) {
-          const { start: newStart, end: newEnd } = computeDragDates(
-            "move",
-            drag.originalStartDate,
-            drag.originalEndDate,
-            daysDelta,
-          );
-          const updated: DragState = {
-            ...drag,
-            currentStartDate: newStart,
-            currentEndDate: newEnd,
-            daysDelta,
-          };
-          dragStateRef.current = updated;
-          setDragState(updated);
-        }
+      if (updateProjectDragPosition(e.clientX)) {
         return;
       }
 
@@ -559,7 +1008,7 @@ export function useTimelineDrag({
       const range = rangeStateRef.current;
       if (range.isSelecting && range.startDate) {
         const deltaX = e.clientX - range.startClientX;
-        const daysDelta = pixelsToDays(deltaX, cellWidth);
+        const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
         const currentDate = new Date(range.startDate);
         currentDate.setDate(currentDate.getDate() + daysDelta);
 
@@ -573,7 +1022,7 @@ export function useTimelineDrag({
         setRangeState(updated);
       }
     },
-    [cellWidth],
+    [updateProjectDragPosition],
   );
 
   const onCanvasMouseUp = useCallback(
@@ -581,29 +1030,11 @@ export function useTimelineDrag({
       // Project shift
       const drag = dragStateRef.current;
       if (drag.isDragging) {
-        if (drag.daysDelta === 0) {
-          if (drag.projectId && drag.originalStartDate && drag.originalEndDate) {
-            onBlockClick?.({
-              allocationId: drag.allocationId ?? "",
-              projectId: drag.projectId,
-              projectName: drag.projectName ?? "",
-              startDate: drag.originalStartDate,
-              endDate: drag.originalEndDate,
-            });
-          }
-        } else if (drag.projectId && drag.currentStartDate && drag.currentEndDate) {
-          try {
-            await applyShiftMutation.mutateAsync({
-              projectId: drag.projectId,
-              newStartDate: drag.currentStartDate,
-              newEndDate: drag.currentEndDate,
-            });
-          } catch {
-            // Validation error — revert visually
-          }
+        try {
+          await finalizeProjectDrag(e.clientX, "mutateAsync");
+        } catch {
+          // Validation error — revert visually
         }
-        dragStateRef.current = INITIAL_DRAG_STATE;
-        setDragState(INITIAL_DRAG_STATE);
         return;
       }
 
@@ -627,16 +1058,12 @@ export function useTimelineDrag({
         setRangeState(INITIAL_RANGE_STATE);
       }
     },
-    [applyShiftMutation, onBlockClick, onRangeSelected],
+    [finalizeProjectDrag, onRangeSelected],
   );
 
   const onCanvasMouseLeave = useCallback(() => {
     // Only cancel project-shift and range-select on canvas leave.
     // Alloc drag is managed by document-level listeners and must NOT be cancelled here.
-    if (dragStateRef.current.isDragging) {
-      dragStateRef.current = INITIAL_DRAG_STATE;
-      setDragState(INITIAL_DRAG_STATE);
-    }
     if (rangeStateRef.current.isSelecting) {
       rangeStateRef.current = INITIAL_RANGE_STATE;
       setRangeState(INITIAL_RANGE_STATE);
@@ -664,6 +1091,7 @@ export function useTimelineDrag({
     };
     multiSelectRef.current = initial;
     setMultiSelectState(initial);
+    multiSelectCleanupRef.current?.();
 
     function handleMove(ev: MouseEvent) {
       const ms = multiSelectRef.current;
@@ -679,8 +1107,8 @@ export function useTimelineDrag({
     }
 
     function handleUp(ev: MouseEvent) {
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("mouseup", handleUp);
+      multiSelectCleanupRef.current?.();
+      multiSelectCleanupRef.current = null;
 
       const ms = multiSelectRef.current;
       if (!ms.isSelecting) return;
@@ -711,6 +1139,10 @@ export function useTimelineDrag({
 
     document.addEventListener("mousemove", handleMove);
     document.addEventListener("mouseup", handleUp);
+    multiSelectCleanupRef.current = () => {
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+    };
   }, []);
 
   const clearMultiSelect = useCallback(() => {
@@ -761,6 +1193,9 @@ export function useTimelineDrag({
         resourceId: string | null;
         startDate: Date;
         endDate: Date;
+        allocationStartDate?: Date;
+        allocationEndDate?: Date;
+        scope?: AllocDragScope;
       },
     ) => {
       e.preventDefault();
@@ -831,6 +1266,25 @@ export function useTimelineDrag({
     [onCanvasMouseUp],
   );
 
+  useEffect(() => {
+    return () => {
+      projectDragCleanupRef.current?.();
+      allocDragCleanupRef.current?.();
+      multiSelectCleanupRef.current?.();
+      projectDragCleanupRef.current = null;
+      allocDragCleanupRef.current = null;
+      multiSelectCleanupRef.current = null;
+      clearLivePreview(projectPreviewRef.current);
+      clearLivePreview(allocPreviewRef.current);
+      projectPreviewRef.current = null;
+      allocPreviewRef.current = null;
+      dragStateRef.current = INITIAL_DRAG_STATE;
+      allocDragRef.current = INITIAL_ALLOC_DRAG;
+      rangeStateRef.current = INITIAL_RANGE_STATE;
+      multiSelectRef.current = INITIAL_MULTI_SELECT;
+    };
+  }, []);
+
   // ── Derived ─────────────────────────────────────────────────────────────────
 
   const shiftPreview: ShiftPreviewData | null =
@@ -852,6 +1306,8 @@ export function useTimelineDrag({
     rangeState,
     multiSelectState,
     setMultiSelectState,
+    optimisticAllocations,
+    reconcileOptimisticAllocations,
     shiftPreview,
     isPreviewLoading,
     isApplying: applyShiftMutation.isPending,

apps/web/src/hooks/useViewportPopover.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, type CSSProperties } from "react";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
 
 type PopoverAnchor =
   | { kind: "point"; x: number; y: number }
@@ -17,6 +17,8 @@ interface UseViewportPopoverOptions {
   offset?: number;
   viewportPadding?: number;
   ignoreElements?: Array<HTMLElement | null>;
+  ignoreSelectors?: string[];
+  zIndex?: number;
 }
 
 export function useViewportPopover({
@@ -29,37 +31,23 @@ export function useViewportPopover({
   offset = 8,
   viewportPadding = 16,
   ignoreElements = [],
+  ignoreSelectors = [],
+  zIndex = 9998,
 }: UseViewportPopoverOptions) {
   const ref = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    function handlePointerDown(event: MouseEvent) {
-      const target = event.target as Node;
-      if (ref.current?.contains(target)) {
-        return;
-      }
-      if (ignoreElements.some((element) => element?.contains(target))) {
-        return;
-      }
-      onClose();
+  const computeStyle = (): CSSProperties => {
+    if (typeof window === "undefined") {
+      return {
+        position: "fixed",
+        left: viewportPadding,
+        top: viewportPadding,
+        width,
+        zIndex,
+      };
     }
 
-    function handleEscape(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    }
-
-    document.addEventListener("mousedown", handlePointerDown);
-    window.addEventListener("keydown", handleEscape);
-
-    return () => {
-      document.removeEventListener("mousedown", handlePointerDown);
-      window.removeEventListener("keydown", handleEscape);
-    };
-  }, [ignoreElements, onClose]);
-
-  const style = useMemo<CSSProperties>(() => {
     let left = 0;
     let top = 0;
 
@@ -94,17 +82,134 @@ export function useViewportPopover({
       }
     }
 
-    const maxLeft = Math.max(viewportPadding, window.innerWidth - width - viewportPadding);
-    const maxTop = Math.max(viewportPadding, window.innerHeight - estimatedHeight - viewportPadding);
+    const measuredWidth = ref.current?.offsetWidth ?? width;
+    const measuredHeight = ref.current?.offsetHeight ?? estimatedHeight;
+    const maxLeft = Math.max(viewportPadding, window.innerWidth - measuredWidth - viewportPadding);
+    const maxTop = Math.max(viewportPadding, window.innerHeight - measuredHeight - viewportPadding);
 
     return {
       position: "fixed",
       left: Math.min(Math.max(left, viewportPadding), maxLeft),
       top: Math.min(Math.max(top, viewportPadding), maxTop),
       width,
-      zIndex: 60,
+      zIndex,
     };
-  }, [align, anchor, estimatedHeight, offset, side, viewportPadding, width]);
+  };
+
+  const [style, setStyle] = useState<CSSProperties>(() => computeStyle());
+
+  useEffect(() => {
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (ref.current?.contains(target)) {
+        return;
+      }
+      if (ignoreElements.some((element) => element?.contains(target))) {
+        return;
+      }
+      if (
+        target instanceof Element
+        && ignoreSelectors.some((selector) => target.closest(selector) !== null)
+      ) {
+        return;
+      }
+      onClose();
+    }
+
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    window.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [ignoreElements, ignoreSelectors, onClose]);
+
+  useEffect(() => {
+    setStyle(computeStyle());
+  }, [align, anchor, estimatedHeight, offset, side, viewportPadding, width, zIndex]);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      setStyle(computeStyle());
+    });
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [align, anchor, estimatedHeight, offset, side, viewportPadding, width, zIndex]);
+
+  useEffect(() => {
+    function cancelScheduledFrame() {
+      if (frameRef.current === null) return;
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+
+    function updateOrClose() {
+      if (anchor.kind === "element" && !anchor.element.isConnected) {
+        onClose();
+        return;
+      }
+
+      setStyle(computeStyle());
+    }
+
+    function scheduleUpdate(reason: "scroll" | "resize") {
+      if (frameRef.current !== null) return;
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        updateOrClose();
+      });
+    }
+
+    updateOrClose();
+
+    const handleScroll = () => {
+      scheduleUpdate("scroll");
+    };
+    const handleResize = () => {
+      scheduleUpdate("resize");
+    };
+
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleResize, { passive: true });
+    window.visualViewport?.addEventListener("resize", handleResize, { passive: true });
+    window.visualViewport?.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      cancelScheduledFrame();
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleResize);
+      window.visualViewport?.removeEventListener("resize", handleResize);
+      window.visualViewport?.removeEventListener("scroll", handleScroll);
+    };
+  }, [
+    align,
+    anchor,
+    estimatedHeight,
+    offset,
+    onClose,
+    side,
+    viewportPadding,
+    width,
+    zIndex,
+  ]);
 
   return { ref, style };
 }

apps/web/tsconfig.typecheck.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "e2e/**/*.ts",
+    ".next/types/**/*.ts",
+    "typecheck-env.d.ts",
+    "next.config.ts",
+    "playwright.config.ts",
+    "sentry.client.config.ts",
+    "sentry.edge.config.ts",
+    "sentry.server.config.ts",
+    "tailwind.config.ts",
+    "postcss.config.js",
+    "vitest.config.mts"
+  ],
+  "exclude": [
+    "node_modules",
+    ".next-e2e",
+    "playwright-report",
+    "test-results"
+  ]
+}

apps/web/typecheck-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+

apps/web/vitest.config.mts

@@ -0,0 +1,20 @@
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    environment: "node",
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "lcov"],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["src/**/*.d.ts", "src/**/*.{test,spec}.{ts,tsx}"],
+    },
+  },
+});