@reqord/web 0.1.0

package/src/__tests__/components/gantt/gantt-header.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { GanttHeader } from "@/components/gantt/gantt-header";
+
+describe("GanttHeader", () => {
+  it("renders hour markers from 0 to timelineEnd", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={16} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const texts = container.querySelectorAll("text");
+    expect(texts.length).toBeGreaterThan(0);
+  });
+
+  it("renders hour labels at 4-hour intervals", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={16} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const texts = Array.from(container.querySelectorAll("text")).map(
+      (el) => el.textContent
+    );
+    expect(texts).toContain("0h");
+    expect(texts).toContain("4h");
+    expect(texts).toContain("8h");
+    expect(texts).toContain("12h");
+    expect(texts).toContain("16h");
+  });
+
+  it("renders correct number of markers for timelineEnd=16", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={16} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const texts = Array.from(container.querySelectorAll("text"));
+    expect(texts.length).toBe(5); // 0, 4, 8, 12, 16
+  });
+
+  it("positions hour markers correctly with hourWidth", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={8} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const texts = Array.from(container.querySelectorAll("text"));
+    const firstText = texts[0];
+    expect(firstText).toHaveAttribute("x", "200"); // leftLabelWidth + 0 * hourWidth
+
+    const secondText = texts[1];
+    expect(secondText).toHaveAttribute("x", "440"); // leftLabelWidth + 4 * hourWidth
+  });
+
+  it("renders vertical lines for each marker", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={8} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const lines = container.querySelectorAll("line");
+    expect(lines.length).toBe(3); // 0, 4, 8
+  });
+
+  it("handles timelineEnd=0 gracefully", () => {
+    const { container } = render(
+      <svg>
+        <GanttHeader timelineEnd={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const texts = container.querySelectorAll("text");
+    expect(texts.length).toBe(1); // Only 0h marker
+  });
+});

package/src/__tests__/components/gantt/gantt-legend.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { GanttLegend } from "@/components/gantt/gantt-legend";
+
+describe("GanttLegend", () => {
+  it("renders all 4 state labels", () => {
+    render(<GanttLegend />);
+
+    expect(screen.getByText("Completed")).toBeInTheDocument();
+    expect(screen.getByText("In Progress")).toBeInTheDocument();
+    expect(screen.getByText("Blocked")).toBeInTheDocument();
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("renders colored indicators for each state", () => {
+    const { container } = render(<GanttLegend />);
+
+    const indicators = container.querySelectorAll('[data-testid^="legend-indicator-"]');
+    expect(indicators.length).toBe(4);
+  });
+
+  it("renders Completed with green color", () => {
+    const { container } = render(<GanttLegend />);
+
+    const completed = container.querySelector('[data-testid="legend-indicator-closed"]');
+    expect(completed).toHaveStyle({ backgroundColor: "#22c55e" });
+  });
+
+  it("renders In Progress with blue color", () => {
+    const { container } = render(<GanttLegend />);
+
+    const inProgress = container.querySelector('[data-testid="legend-indicator-in_progress"]');
+    expect(inProgress).toHaveStyle({ backgroundColor: "#3b82f6" });
+  });
+
+  it("renders Blocked with red color", () => {
+    const { container } = render(<GanttLegend />);
+
+    const blocked = container.querySelector('[data-testid="legend-indicator-blocked"]');
+    expect(blocked).toHaveStyle({ backgroundColor: "#ef4444" });
+  });
+
+  it("renders Pending with gray color", () => {
+    const { container } = render(<GanttLegend />);
+
+    const pending = container.querySelector('[data-testid="legend-indicator-open"]');
+    expect(pending).toHaveStyle({ backgroundColor: "#9ca3af" });
+  });
+});

package/src/__tests__/components/graph/dag-layout.test.ts

@@ -0,0 +1,129 @@
+import { describe, it, expect } from "vitest";
+import type { Requirement } from "@reqord/shared";
+import { computeDagLayout } from "../../../components/graph/dag-layout";
+
+function makeReq(
+  id: string,
+  blockedBy: string[] = [],
+  blocks: string[] = [],
+): Requirement {
+  return {
+    id,
+    version: "1.0.0",
+    title: `Requirement ${id}`,
+    status: "draft",
+    priority: "medium",
+    createdAt: "2025-01-01T00:00:00Z",
+    updatedAt: "2025-01-01T00:00:00Z",
+    versionHistory: [],
+    files: { description: `${id}/description.md`, supplementary: [] },
+    successCriteria: [],
+    format: { type: "free-form" },
+    dependencies: { blockedBy, blocks, relatedTo: [] },
+  };
+}
+
+describe("computeDagLayout", () => {
+  it("returns empty layout for empty input", () => {
+    const { nodes, edges } = computeDagLayout([]);
+    expect(nodes).toEqual([]);
+    expect(edges).toEqual([]);
+  });
+
+  it("places a single node at origin", () => {
+    const { nodes, edges } = computeDagLayout([makeReq("req-000001")]);
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0].x).toBe(0);
+    expect(nodes[0].y).toBe(0);
+    expect(edges).toHaveLength(0);
+  });
+
+  it("places dependent node in a later column", () => {
+    const reqs = [
+      makeReq("req-000001"),
+      makeReq("req-000002", ["req-000001"]),
+    ];
+    const { nodes, edges } = computeDagLayout(reqs);
+
+    const node1 = nodes.find((n) => n.id === "req-000001")!;
+    const node2 = nodes.find((n) => n.id === "req-000002")!;
+
+    expect(node1.x).toBeLessThan(node2.x);
+    expect(edges).toHaveLength(1);
+    expect(edges[0]).toMatchObject({
+      source: "req-000001",
+      target: "req-000002",
+    });
+  });
+
+  it("handles a chain of dependencies", () => {
+    const reqs = [
+      makeReq("req-000001"),
+      makeReq("req-000002", ["req-000001"]),
+      makeReq("req-000003", ["req-000002"]),
+    ];
+    const { nodes } = computeDagLayout(reqs);
+
+    const n1 = nodes.find((n) => n.id === "req-000001")!;
+    const n2 = nodes.find((n) => n.id === "req-000002")!;
+    const n3 = nodes.find((n) => n.id === "req-000003")!;
+
+    expect(n1.x).toBeLessThan(n2.x);
+    expect(n2.x).toBeLessThan(n3.x);
+  });
+
+  it("places independent nodes in the same column", () => {
+    const reqs = [makeReq("req-000001"), makeReq("req-000002")];
+    const { nodes } = computeDagLayout(reqs);
+
+    const n1 = nodes.find((n) => n.id === "req-000001")!;
+    const n2 = nodes.find((n) => n.id === "req-000002")!;
+
+    expect(n1.x).toBe(n2.x);
+    expect(n1.y).not.toBe(n2.y);
+  });
+
+  it("ignores edges to non-existent requirements", () => {
+    const reqs = [makeReq("req-000001", ["req-999999"])];
+    const { nodes, edges } = computeDagLayout(reqs);
+
+    expect(nodes).toHaveLength(1);
+    expect(edges).toHaveLength(0);
+  });
+
+  it("uses longest path for depth calculation (diamond dependency)", () => {
+    // A -> B -> D
+    // A -> C -> D
+    const reqs = [
+      makeReq("req-000001"),
+      makeReq("req-000002", ["req-000001"]),
+      makeReq("req-000003", ["req-000001"]),
+      makeReq("req-000004", ["req-000002", "req-000003"]),
+    ];
+    const { nodes } = computeDagLayout(reqs);
+
+    const nA = nodes.find((n) => n.id === "req-000001")!;
+    const nD = nodes.find((n) => n.id === "req-000004")!;
+
+    // D should be 2 columns after A
+    expect(nD.x).toBeGreaterThan(nA.x);
+    // B and C should be at the same depth (1)
+    const nB = nodes.find((n) => n.id === "req-000002")!;
+    const nC = nodes.find((n) => n.id === "req-000003")!;
+    expect(nB.x).toBe(nC.x);
+  });
+
+  it("preserves requirement metadata in layout nodes", () => {
+    const req = makeReq("req-000001");
+    req.status = "approved";
+    req.priority = "high";
+    const { nodes } = computeDagLayout([req]);
+
+    expect(nodes[0]).toMatchObject({
+      id: "req-000001",
+      title: "Requirement req-000001",
+      status: "approved",
+      priority: "high",
+    });
+  });
+});

package/src/__tests__/components/graph/dependency-graph.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import type { Requirement } from "@reqord/shared";
+
+// Capture nodes passed to ReactFlow
+let capturedNodes: any[] = [];
+
+vi.mock("@xyflow/react", () => ({
+  ReactFlow: ({ nodes, edges, children }: any) => {
+    capturedNodes = nodes;
+    return (
+      <div data-testid="react-flow" data-nodes={nodes.length} data-edges={edges.length}>
+        {children}
+      </div>
+    );
+  },
+  Background: () => <div data-testid="background" />,
+  Controls: () => <div data-testid="controls" />,
+  MiniMap: () => <div data-testid="minimap" />,
+  useNodesState: (initial: any[]) => [initial, vi.fn(), vi.fn()],
+  useEdgesState: (initial: any[]) => [initial, vi.fn(), vi.fn()],
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+import { DependencyGraph } from "../../../components/graph/dependency-graph";
+
+function makeReq(
+  id: string,
+  overrides: Partial<Requirement> = {},
+): Requirement {
+  return {
+    id,
+    version: "1.0.0",
+    title: `Requirement ${id}`,
+    status: "draft",
+    priority: "medium",
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+    versionHistory: [],
+    files: {
+      description: `requirements/${id}/description.md`,
+      supplementary: [],
+    },
+    successCriteria: [],
+    format: { type: "free-form" },
+    dependencies: { blockedBy: [], blocks: [], relatedTo: [] },
+    ...overrides,
+  } as Requirement;
+}
+
+describe("DependencyGraph", () => {
+  afterEach(() => {
+    cleanup();
+    capturedNodes = [];
+  });
+
+  it("passes onDrillDown in node data when onRequirementClick is provided", () => {
+    const handleClick = vi.fn();
+    const req = makeReq("req-000001");
+
+    render(
+      <DependencyGraph
+        requirements={[req]}
+        specCountMap={{ "req-000001": 2 }}
+        onRequirementClick={handleClick}
+      />
+    );
+
+    expect(capturedNodes).toHaveLength(1);
+    expect(capturedNodes[0].data.onDrillDown).toBe(handleClick);
+  });
+
+  it("does not include onDrillDown in node data when onRequirementClick is not provided", () => {
+    const req = makeReq("req-000001");
+
+    render(
+      <DependencyGraph
+        requirements={[req]}
+        specCountMap={{ "req-000001": 2 }}
+      />
+    );
+
+    expect(capturedNodes).toHaveLength(1);
+    expect(capturedNodes[0].data.onDrillDown).toBeUndefined();
+  });
+});

package/src/__tests__/components/graph/drilldown-breadcrumb.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { DrillDownBreadcrumb } from "../../../components/graph/drilldown-breadcrumb";
+
+describe("DrillDownBreadcrumb", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders requirement title", () => {
+    const onBack = vi.fn();
+
+    render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    expect(screen.getByText("User Login")).toBeInTheDocument();
+  });
+
+  it("calls onBack when back button is clicked", () => {
+    const onBack = vi.fn();
+
+    render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /back to overview/i }));
+
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onBack when Escape key is pressed", () => {
+    const onBack = vi.fn();
+
+    render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    fireEvent.keyDown(window, { key: "Escape" });
+
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows Esc hint text", () => {
+    const onBack = vi.fn();
+
+    render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    expect(screen.getByText("(Press Esc to go back)")).toBeInTheDocument();
+  });
+
+  it("cleans up event listener on unmount", () => {
+    const onBack = vi.fn();
+
+    const { unmount } = render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    unmount();
+
+    fireEvent.keyDown(window, { key: "Escape" });
+
+    expect(onBack).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/graph/drilldown-graph.test.tsx

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import type { Requirement, Specification, TaskEntry } from "@reqord/shared";
+
+vi.mock("@xyflow/react", () => ({
+  ReactFlow: ({ nodes, edges, children }: any) => (
+    <div data-testid="react-flow" data-nodes={nodes.length} data-edges={edges.length}>
+      {nodes.map((n: any) => (
+        <div key={n.id} data-testid={`node-${n.id}`} />
+      ))}
+      {children}
+    </div>
+  ),
+  Background: () => <div data-testid="background" />,
+  Controls: () => <div data-testid="controls" />,
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+import { DrillDownGraph } from "../../../components/graph/drilldown-graph";
+
+function makeReq(id: string, overrides: Partial<Requirement> = {}): Requirement {
+  return {
+    id, version: "1.0.0", title: `Requirement ${id}`, status: "draft", priority: "medium",
+    createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", versionHistory: [],
+    files: { description: `requirements/${id}/description.md`, supplementary: [] },
+    successCriteria: [], format: { type: "free-form" },
+    dependencies: { blockedBy: [], blocks: [], relatedTo: [] },
+    ...overrides,
+  } as Requirement;
+}
+
+function makeSpec(id: string, reqId: string, overrides: Partial<Specification> = {}): Specification {
+  return {
+    id, requirementId: reqId, version: "1.0.0", status: "draft",
+    createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", versionHistory: [],
+    files: { design: `specifications/${id}/design.md`, supplementary: [] },
+    ...overrides,
+  } as Specification;
+}
+
+function makeTask(number: number, specIds: string[], overrides: Partial<TaskEntry> = {}): TaskEntry {
+  return {
+    number, title: `Task ${number}`, url: `https://github.com/test/repo/issues/${number}`,
+    linkedTo: { specifications: specIds }, status: "open", syncedAt: "2026-01-01T00:00:00Z",
+    ...overrides,
+  };
+}
+
+describe("DrillDownGraph", () => {
+  afterEach(() => { cleanup(); });
+
+  it("renders ReactFlow with nodes from requirement and specifications", () => {
+    const req = makeReq("req-000001");
+    const spec1 = makeSpec("spec-000001", "req-000001");
+    const spec2 = makeSpec("spec-000002", "req-000001");
+
+    const { getByTestId } = render(
+      <DrillDownGraph requirement={req} specifications={[spec1, spec2]} tasks={[]} />
+    );
+
+    const flow = getByTestId("react-flow");
+    expect(flow.getAttribute("data-nodes")).toBe("3");
+    expect(flow.getAttribute("data-edges")).toBe("2");
+  });
+
+  it("renders ReactFlow with Background and Controls", () => {
+    const req = makeReq("req-000001");
+
+    const { getByTestId } = render(
+      <DrillDownGraph requirement={req} specifications={[]} tasks={[]} />
+    );
+
+    expect(getByTestId("background")).toBeInTheDocument();
+    expect(getByTestId("controls")).toBeInTheDocument();
+  });
+
+  it("renders requirement node", () => {
+    const req = makeReq("req-000001");
+
+    const { getByTestId } = render(
+      <DrillDownGraph requirement={req} specifications={[]} tasks={[]} />
+    );
+
+    expect(getByTestId("node-req-000001")).toBeInTheDocument();
+  });
+
+  it("renders ReactFlow with issue nodes when tasks are linked to specs", () => {
+    const req = makeReq("req-000001");
+    const spec1 = makeSpec("spec-000001", "req-000001");
+    const task = makeTask(42, ["spec-000001"]);
+
+    const { getByTestId } = render(
+      <DrillDownGraph requirement={req} specifications={[spec1]} tasks={[task]} />
+    );
+
+    const flow = getByTestId("react-flow");
+    expect(flow.getAttribute("data-nodes")).toBe("3");
+    expect(flow.getAttribute("data-edges")).toBe("2");
+  });
+});

package/src/__tests__/components/graph/edge-styles.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { EDGE_STYLES } from "../../../components/graph/edge-styles";
+
+describe("EDGE_STYLES", () => {
+  it("dependency has stroke #64748b and strokeWidth 2", () => {
+    expect(EDGE_STYLES.dependency).toEqual({
+      stroke: "#64748b",
+      strokeWidth: 2,
+    });
+  });
+
+  it("implements has stroke #3b82f6, strokeWidth 2, and strokeDasharray '5,5'", () => {
+    expect(EDGE_STYLES.implements).toEqual({
+      stroke: "#3b82f6",
+      strokeWidth: 2,
+      strokeDasharray: "5,5",
+    });
+  });
+
+  it("tracks has stroke #22c55e, strokeWidth 1.5, and strokeDasharray '2,2'", () => {
+    expect(EDGE_STYLES.tracks).toEqual({
+      stroke: "#22c55e",
+      strokeWidth: 1.5,
+      strokeDasharray: "2,2",
+    });
+  });
+});

package/src/__tests__/components/graph/graph-page-client.test.tsx

@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi, beforeEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import type { Requirement, Specification, TaskEntry } from "@reqord/shared";
+
+const mockPush = vi.fn();
+const mockGet = vi.fn();
+
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => ({ get: mockGet }),
+  useRouter: () => ({ push: mockPush }),
+}));
+
+vi.mock("next/dynamic", () => ({
+  default: (loader: () => Promise<any>) => {
+    let Component: any = () => <div data-testid="loading" />;
+    loader().then((mod: any) => {
+      Component = mod.default || mod.DependencyGraph || mod.DrillDownGraph || mod;
+    });
+    return (props: any) => <Component {...props} />;
+  },
+}));
+
+vi.mock("@xyflow/react", () => ({
+  ReactFlow: ({ nodes, edges, children }: any) => (
+    <div data-testid="react-flow" data-nodes={nodes?.length} data-edges={edges?.length}>
+      {children}
+    </div>
+  ),
+  default: ({ nodes, edges, children }: any) => (
+    <div data-testid="react-flow" data-nodes={nodes?.length} data-edges={edges?.length}>
+      {children}
+    </div>
+  ),
+  Background: () => <div data-testid="background" />,
+  Controls: () => <div data-testid="controls" />,
+  MiniMap: () => <div data-testid="minimap" />,
+  useNodesState: (initial: any[]) => [initial, vi.fn(), vi.fn()],
+  useEdgesState: (initial: any[]) => [initial, vi.fn(), vi.fn()],
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+import { GraphPageClient } from "../../../components/graph/graph-page-client";
+
+function makeReq(id: string, overrides: Partial<Requirement> = {}): Requirement {
+  return {
+    id, version: "1.0.0", title: `Requirement ${id}`, status: "draft", priority: "medium",
+    createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", versionHistory: [],
+    files: { description: `requirements/${id}/description.md`, supplementary: [] },
+    successCriteria: [], format: { type: "free-form" },
+    dependencies: { blockedBy: [], blocks: [], relatedTo: [] },
+    ...overrides,
+  } as Requirement;
+}
+
+function makeSpec(id: string, reqId: string, overrides: Partial<Specification> = {}): Specification {
+  return {
+    id, requirementId: reqId, version: "1.0.0", status: "draft",
+    createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", versionHistory: [],
+    files: { design: `specifications/${id}/design.md`, supplementary: [] },
+    ...overrides,
+  } as Specification;
+}
+
+function makeTask(number: number, specIds: string[], overrides: Partial<TaskEntry> = {}): TaskEntry {
+  return {
+    number, title: `Task ${number}`, url: `https://github.com/test/repo/issues/${number}`,
+    linkedTo: { specifications: specIds }, status: "open", syncedAt: "2026-01-01T00:00:00Z",
+    ...overrides,
+  };
+}
+
+const defaultProps = {
+  requirements: [makeReq("req-000001"), makeReq("req-000002")],
+  specifications: [makeSpec("spec-000001", "req-000001")],
+  specCountMap: { "req-000001": 1, "req-000002": 0 } as Record<string, number>,
+  tasks: [makeTask(42, ["spec-000001"])],
+};
+
+describe("GraphPageClient", () => {
+  beforeEach(() => { vi.clearAllMocks(); });
+  afterEach(() => { cleanup(); });
+
+  describe("when no ?req= param (overview mode)", () => {
+    it("renders overview heading", () => {
+      mockGet.mockReturnValue(null);
+      render(<GraphPageClient {...defaultProps} />);
+      expect(screen.getByText("Dependency Graph")).toBeInTheDocument();
+    });
+
+    it("does not render DrillDownBreadcrumb", () => {
+      mockGet.mockReturnValue(null);
+      render(<GraphPageClient {...defaultProps} />);
+      expect(screen.queryByText("← Back to overview")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when ?req= has a valid id (drilldown mode)", () => {
+    it("renders DrillDownBreadcrumb with requirement title", () => {
+      mockGet.mockReturnValue("req-000001");
+      render(<GraphPageClient {...defaultProps} />);
+      expect(screen.getByText("← Back to overview")).toBeInTheDocument();
+      expect(screen.getByText("Requirement req-000001")).toBeInTheDocument();
+    });
+
+    it("does not render the overview heading", () => {
+      mockGet.mockReturnValue("req-000001");
+      render(<GraphPageClient {...defaultProps} />);
+      expect(screen.queryByText("Dependency Graph")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when ?req= has an invalid id (fallback)", () => {
+    it("falls back to DependencyGraph overview", () => {
+      mockGet.mockReturnValue("req-999999");
+      render(<GraphPageClient {...defaultProps} />);
+      expect(screen.getByText("Dependency Graph")).toBeInTheDocument();
+      expect(screen.queryByText("← Back to overview")).not.toBeInTheDocument();
+    });
+  });
+});