diff --git a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.test.tsx b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.test.tsx
new file mode 100644
index 0000000000..96ffe13e2e
--- /dev/null
+++ b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.test.tsx
@@ -0,0 +1,173 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { RunTimingData, RunTimingTask } from "./runTiming.types";
+import { RunTimingChart } from "./RunTimingChart";
+
+const START = Date.parse("2026-07-14T10:00:00Z");
+const MINUTE = 60_000;
+
+function task(overrides: Partial<RunTimingTask> = {}): RunTimingTask {
+  return {
+    executionId: "exec-a",
+    parentExecutionId: "root",
+    taskId: "prepare-data",
+    taskName: "prepare-data",
+    navigationPath: ["Pipeline"],
+    depth: 0,
+    dependencyExecutionIds: [],
+    isSubgraph: false,
+    status: "SUCCEEDED",
+    phases: [
+      {
+        name: "startup",
+        startAt: START,
+        endAt: START + MINUTE,
+        durationMs: MINUTE,
+      },
+      {
+        name: "runtime",
+        startAt: START + MINUTE,
+        endAt: START + 3 * MINUTE,
+        durationMs: 2 * MINUTE,
+      },
+    ],
+    startAt: START,
+    endAt: START + 3 * MINUTE,
+    durationMs: 3 * MINUTE,
+    cacheState: "unknown",
+    timingQuality: "partial",
+    ...overrides,
+  };
+}
+
+function timingData(tasks: RunTimingTask[]): RunTimingData {
+  return {
+    tasks,
+    truncated: false,
+    rangeStart: START,
+    rangeEnd: START + 3 * MINUTE,
+    criticalPathExecutionIds: new Set(["exec-a"]),
+    metrics: {
+      wallClockDurationMs: 3 * MINUTE,
+      totalTaskCount: tasks.length,
+      cachedTaskCount: 0,
+      startupCoverage: 1,
+      busyRuntimeMs: 2 * MINUTE,
+      busyPercent: 67,
+      criticalPathDurationMs: 3 * MINUTE,
+    },
+  };
+}
+
+afterEach(cleanup);
+
+describe("RunTimingChart", () => {
+  it("renders phase and critical-path information accessibly", () => {
+    const onTaskSelect = vi.fn();
+    const timingTask = task();
+    render(
+      <RunTimingChart
+        data={timingData([timingTask])}
+        onTaskSelect={onTaskSelect}
+      />,
+    );
+
+    expect(screen.getByRole("table", { name: "Run timing" })).toHaveClass(
+      "min-w-0",
+      "w-full",
+      "max-w-full",
+      "overflow-auto",
+    );
+    expect(screen.getAllByRole("row")[0]).toHaveStyle({
+      gridTemplateColumns: "320px minmax(1200px, 1fr)",
+      minWidth: "1520px",
+    });
+    expect(screen.getAllByText("3m 0s")[0].parentElement).toHaveStyle({
+      right: "12px",
+    });
+    expect(screen.getByText("prepare-data")).toBeInTheDocument();
+    expect(
+      screen.getByRole("img", { name: "startup / queue 1m 0s" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("img", { name: "runtime 2m 0s" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Critical path task/)).toBeInTheDocument();
+    expect(screen.getByText(/Status: Succeeded/)).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open prepare-data task details" }),
+    );
+    expect(onTaskSelect).toHaveBeenCalledWith(timingTask);
+  });
+
+  it("resizes the task name column with mouse and keyboard controls", () => {
+    render(
+      <RunTimingChart data={timingData([task()])} onTaskSelect={vi.fn()} />,
+    );
+
+    const resizeHandle = screen.getByRole("separator", {
+      name: "Resize task name column",
+    });
+    fireEvent.keyDown(resizeHandle, { key: "ArrowRight" });
+
+    expect(resizeHandle).toHaveAttribute("aria-valuenow", "336");
+    expect(screen.getAllByRole("row")[0]).toHaveStyle({
+      gridTemplateColumns: "336px minmax(1200px, 1fr)",
+      minWidth: "1536px",
+    });
+
+    fireEvent.mouseDown(resizeHandle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 164 });
+    fireEvent.mouseUp(document);
+
+    expect(resizeHandle).toHaveAttribute("aria-valuenow", "400");
+  });
+
+  it("identifies cache hits without showing historical runtime", () => {
+    render(
+      <RunTimingChart
+        data={timingData([
+          task({
+            cacheState: "hit",
+            phases: [],
+            startAt: START,
+            endAt: START,
+            durationMs: 0,
+          }),
+        ])}
+        onTaskSelect={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByRole("img", {
+        name: "Cache hit; no container runtime in this run",
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Cache hit\./)).toBeInTheDocument();
+  });
+
+  it("shows an empty state before task executions exist", () => {
+    render(<RunTimingChart data={timingData([])} onTaskSelect={vi.fn()} />);
+
+    expect(
+      screen.getByText("This run has no task executions yet."),
+    ).toBeInTheDocument();
+  });
+
+  it("filters task rows by task or component name", () => {
+    render(
+      <RunTimingChart
+        data={timingData([task({ componentName: "Python component" })])}
+        taskFilter="missing"
+        onTaskSelect={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByText("No tasks match the current filters."),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.tsx b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.tsx
new file mode 100644
index 0000000000..a008bc2c3c
--- /dev/null
+++ b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingChart.tsx
@@ -0,0 +1,475 @@
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  useState,
+} from "react";
+
+import StatusIcon from "@/components/shared/Status/StatusIcon";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+import { getExecutionStatusLabel } from "@/utils/executionStatus";
+import { tracking } from "@/utils/tracking";
+
+import { formatTimingDuration } from "./runTiming";
+import type {
+  RunTimingData,
+  RunTimingPhase,
+  RunTimingTask,
+} from "./runTiming.types";
+
+const DEFAULT_TASK_COLUMN_WIDTH = 320;
+const MIN_TASK_COLUMN_WIDTH = 240;
+const MAX_TASK_COLUMN_WIDTH = 640;
+const TASK_COLUMN_RESIZE_STEP = 16;
+const TIMELINE_EDGE_PADDING = 12;
+const MIN_TIMELINE_WIDTH = 1200;
+const TICK_COUNT = 5;
+
+const PHASE_CLASS: Record<RunTimingPhase["name"], string> = {
+  startup: "bg-slate-400 dark:bg-slate-500",
+  runtime: "bg-emerald-600 dark:bg-emerald-500",
+};
+
+function orderedTasks(tasks: RunTimingTask[]): RunTimingTask[] {
+  const rootParentId = tasks.find(
+    (task) => task.depth === 0,
+  )?.parentExecutionId;
+  if (!rootParentId) return tasks;
+
+  const childrenByParent = new Map<string, RunTimingTask[]>();
+  for (const task of tasks) {
+    const siblings = childrenByParent.get(task.parentExecutionId) ?? [];
+    siblings.push(task);
+    childrenByParent.set(task.parentExecutionId, siblings);
+  }
+
+  const ordered: RunTimingTask[] = [];
+  const appendChildren = (parentExecutionId: string) => {
+    for (const task of childrenByParent.get(parentExecutionId) ?? []) {
+      ordered.push(task);
+      if (task.isSubgraph) appendChildren(task.executionId);
+    }
+  };
+  appendChildren(rootParentId);
+  return ordered;
+}
+
+function percentage(value: number, start: number, duration: number): number {
+  return ((value - start) / duration) * 100;
+}
+
+function TimelineGridLines({ ticks }: { ticks: number[] }) {
+  return (
+    <>
+      {ticks.map((_, index) => (
+        <span
+          key={index}
+          aria-hidden="true"
+          className="absolute inset-y-0 border-l border-border/60"
+          style={{ left: `${(index / (ticks.length - 1)) * 100}%` }}
+        />
+      ))}
+    </>
+  );
+}
+
+function PhaseSegment({
+  phase,
+  rangeStart,
+  rangeDuration,
+}: {
+  phase: RunTimingPhase;
+  rangeStart: number;
+  rangeDuration: number;
+}) {
+  const left = percentage(phase.startAt, rangeStart, rangeDuration);
+  const width = (phase.durationMs / rangeDuration) * 100;
+  const phaseLabel = phase.name === "startup" ? "startup / queue" : "runtime";
+  const label = `${phaseLabel} ${formatTimingDuration(phase.durationMs)}`;
+
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      title={label}
+      className={cn("absolute inset-y-0", PHASE_CLASS[phase.name])}
+      style={{ left: `${left}%`, width: `max(2px, ${width}%)` }}
+    />
+  );
+}
+
+function TaskBar({
+  task,
+  rangeStart,
+  rangeDuration,
+  critical,
+}: {
+  task: RunTimingTask;
+  rangeStart: number;
+  rangeDuration: number;
+  critical: boolean;
+}) {
+  if (task.cacheState === "hit") {
+    return (
+      <span
+        role="img"
+        aria-label="Cache hit; no container runtime in this run"
+        title="Cache hit; no container runtime in this run"
+        className={cn(
+          "absolute top-2 left-0 h-6 w-2 rounded-sm border border-slate-400 bg-slate-300 dark:bg-slate-600",
+          critical && "ring-2 ring-violet-500 ring-offset-1",
+        )}
+      />
+    );
+  }
+
+  if (task.startAt === undefined || task.endAt === undefined) {
+    return (
+      <Text
+        size="xs"
+        tone="subdued"
+        className="absolute inset-0 content-center px-3"
+      >
+        Timing unavailable
+      </Text>
+    );
+  }
+
+  if (task.isSubgraph) {
+    const left = percentage(task.startAt, rangeStart, rangeDuration);
+    const width = ((task.endAt - task.startAt) / rangeDuration) * 100;
+    const label = `Subgraph span ${formatTimingDuration(task.durationMs)}`;
+    return (
+      <span
+        role="img"
+        aria-label={label}
+        title={label}
+        className={cn(
+          "absolute top-2 h-6 rounded-sm bg-blue-500/70",
+          critical && "ring-2 ring-violet-500 ring-offset-1",
+        )}
+        style={{ left: `${left}%`, width: `max(2px, ${width}%)` }}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "absolute top-2 h-6 overflow-hidden rounded-sm",
+        critical && "ring-2 ring-violet-500 ring-offset-1",
+      )}
+      style={{
+        left: `${percentage(task.startAt, rangeStart, rangeDuration)}%`,
+        width: `max(2px, ${((task.durationMs ?? 0) / rangeDuration) * 100}%)`,
+      }}
+    >
+      {task.phases.map((phase) => (
+        <PhaseSegment
+          key={`${phase.name}-${phase.startAt}`}
+          phase={phase}
+          rangeStart={task.startAt ?? rangeStart}
+          rangeDuration={Math.max(1, task.durationMs ?? rangeDuration)}
+        />
+      ))}
+    </span>
+  );
+}
+
+interface TaskColumnResizeHandleProps {
+  width: number;
+  onWidthChange: (width: number) => void;
+}
+
+function TaskColumnResizeHandle({
+  width,
+  onWidthChange,
+}: TaskColumnResizeHandleProps) {
+  const constrainWidth = (nextWidth: number) =>
+    Math.max(MIN_TASK_COLUMN_WIDTH, Math.min(MAX_TASK_COLUMN_WIDTH, nextWidth));
+
+  const handleMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = width;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      onWidthChange(constrainWidth(startWidth + moveEvent.clientX - startX));
+    };
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    let nextWidth = width;
+    if (event.key === "ArrowLeft") nextWidth -= TASK_COLUMN_RESIZE_STEP;
+    else if (event.key === "ArrowRight") nextWidth += TASK_COLUMN_RESIZE_STEP;
+    else if (event.key === "Home") nextWidth = MIN_TASK_COLUMN_WIDTH;
+    else if (event.key === "End") nextWidth = MAX_TASK_COLUMN_WIDTH;
+    else return;
+
+    event.preventDefault();
+    onWidthChange(constrainWidth(nextWidth));
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-label="Resize task name column"
+      aria-orientation="vertical"
+      aria-valuemin={MIN_TASK_COLUMN_WIDTH}
+      aria-valuemax={MAX_TASK_COLUMN_WIDTH}
+      aria-valuenow={width}
+      tabIndex={0}
+      title="Drag to resize the task name column"
+      className="group absolute inset-y-0 right-0 z-40 w-2 translate-x-1/2 cursor-col-resize focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      onMouseDown={handleMouseDown}
+      onDoubleClick={() => onWidthChange(DEFAULT_TASK_COLUMN_WIDTH)}
+      onKeyDown={handleKeyDown}
+    >
+      <span
+        aria-hidden="true"
+        className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border group-hover:bg-primary group-focus-visible:bg-primary"
+      />
+    </div>
+  );
+}
+
+function TimingLegend() {
+  return (
+    <InlineStack gap="4" wrap="wrap" blockAlign="center">
+      {Object.entries(PHASE_CLASS).map(([phase, className]) => (
+        <InlineStack key={phase} gap="1" wrap="nowrap" blockAlign="center">
+          <span
+            aria-hidden="true"
+            className={cn("size-2.5 rounded-sm", className)}
+          />
+          <Text size="xs" className="capitalize">
+            {phase === "startup" ? "Startup / queue" : phase}
+          </Text>
+        </InlineStack>
+      ))}
+      <InlineStack gap="1" wrap="nowrap" blockAlign="center">
+        <span
+          aria-hidden="true"
+          className="size-2.5 rounded-sm border border-slate-400 bg-slate-300 dark:bg-slate-600"
+        />
+        <Text size="xs">Cache hit</Text>
+      </InlineStack>
+      <InlineStack gap="1" wrap="nowrap" blockAlign="center">
+        <span
+          aria-hidden="true"
+          className="size-2.5 rounded-sm border-2 border-violet-500"
+        />
+        <Text size="xs">Critical path</Text>
+      </InlineStack>
+      <InlineStack gap="1" wrap="nowrap" blockAlign="center">
+        <span
+          aria-hidden="true"
+          className="size-2.5 rounded-sm bg-blue-500/70"
+        />
+        <Text size="xs">Subgraph span</Text>
+      </InlineStack>
+    </InlineStack>
+  );
+}
+
+interface RunTimingChartProps {
+  data: RunTimingData;
+  taskFilter?: string;
+  criticalPathOnly?: boolean;
+  onTaskSelect?: (task: RunTimingTask) => void;
+}
+
+export function RunTimingChart({
+  data,
+  taskFilter = "",
+  criticalPathOnly = false,
+  onTaskSelect,
+}: RunTimingChartProps) {
+  const [taskColumnWidth, setTaskColumnWidth] = useState(
+    DEFAULT_TASK_COLUMN_WIDTH,
+  );
+  const normalizedFilter = taskFilter.trim().toLocaleLowerCase();
+  const tasks = orderedTasks(data.tasks).filter((task) => {
+    const matchesFilter =
+      normalizedFilter.length === 0 ||
+      task.taskName.toLocaleLowerCase().includes(normalizedFilter) ||
+      task.componentName?.toLocaleLowerCase().includes(normalizedFilter);
+    const matchesCriticalPath =
+      !criticalPathOnly || data.criticalPathExecutionIds.has(task.executionId);
+    return matchesFilter && matchesCriticalPath;
+  });
+  const rangeStart = data.rangeStart;
+  const rangeEnd = data.rangeEnd;
+
+  if (tasks.length === 0) {
+    const filtersActive = normalizedFilter.length > 0 || criticalPathOnly;
+    return (
+      <Text tone="subdued" className="p-6 text-center">
+        {filtersActive
+          ? "No tasks match the current filters."
+          : "This run has no task executions yet."}
+      </Text>
+    );
+  }
+
+  if (rangeStart === undefined || rangeEnd === undefined) {
+    return (
+      <Text tone="subdued" className="p-6 text-center">
+        Timing data is not available for this run.
+      </Text>
+    );
+  }
+
+  const rangeDuration = Math.max(1, rangeEnd - rangeStart);
+  const ticks = Array.from(
+    { length: TICK_COUNT },
+    (_, index) => rangeStart + (rangeDuration * index) / (TICK_COUNT - 1),
+  );
+  const gridStyle = {
+    gridTemplateColumns: `${taskColumnWidth}px minmax(${MIN_TIMELINE_WIDTH}px, 1fr)`,
+    minWidth: `${taskColumnWidth + MIN_TIMELINE_WIDTH}px`,
+  };
+
+  return (
+    <div
+      className="min-h-0 min-w-0 w-full max-w-full flex-1 overflow-auto rounded-lg border"
+      role="table"
+      aria-label="Run timing"
+    >
+      <div
+        role="row"
+        className="sticky top-0 z-20 grid h-11 border-b bg-muted"
+        style={gridStyle}
+      >
+        <div
+          role="columnheader"
+          className="sticky left-0 z-30 content-center border-r bg-muted px-3"
+        >
+          <Text size="xs" weight="semibold">
+            Task
+          </Text>
+          <TaskColumnResizeHandle
+            width={taskColumnWidth}
+            onWidthChange={setTaskColumnWidth}
+          />
+        </div>
+        <div role="columnheader" className="relative">
+          {ticks.map((tick, index) => (
+            <span
+              key={tick}
+              className="absolute bottom-2"
+              style={
+                index === 0
+                  ? { left: TIMELINE_EDGE_PADDING }
+                  : index === ticks.length - 1
+                    ? { right: TIMELINE_EDGE_PADDING }
+                    : {
+                        left: `${(index / (ticks.length - 1)) * 100}%`,
+                        transform: `translateX(-${(index / (ticks.length - 1)) * 100}%)`,
+                      }
+              }
+            >
+              <Text size="xs" tone="subdued">
+                {formatTimingDuration(tick - rangeStart)}
+              </Text>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {tasks.map((task) => {
+        const critical = data.criticalPathExecutionIds.has(task.executionId);
+        return (
+          <div
+            key={task.executionId}
+            role="row"
+            className="grid h-11 border-b last:border-b-0"
+            style={gridStyle}
+            data-execution-id={task.executionId}
+          >
+            <div
+              role="cell"
+              className="sticky left-0 z-10 min-w-0 border-r bg-background"
+            >
+              <Button
+                type="button"
+                variant="ghost"
+                size="min"
+                className="h-full w-full justify-start rounded-none px-3 font-normal"
+                style={{ paddingLeft: `${12 + task.depth * 16}px` }}
+                onClick={() => onTaskSelect?.(task)}
+                aria-label={`Open ${task.taskName} task details`}
+                {...tracking("v2.run_view.run_timing.task", {
+                  depth: task.depth,
+                  is_subgraph: task.isSubgraph,
+                })}
+              >
+                <StatusIcon status={task.status} />
+                {task.cacheState === "hit" && (
+                  <Text aria-hidden="true" tone="subdued" className="shrink-0">
+                    ⟲
+                  </Text>
+                )}
+                {task.isSubgraph && (
+                  <Icon
+                    name="Workflow"
+                    size="xs"
+                    className="shrink-0 text-blue-500"
+                  />
+                )}
+                {critical && (
+                  <>
+                    <Icon
+                      name="Route"
+                      size="xs"
+                      className="shrink-0 text-violet-500"
+                    />
+                    <span className="sr-only">Critical path task. </span>
+                  </>
+                )}
+                <Text
+                  size="sm"
+                  className="min-w-0 flex-1 truncate text-left"
+                  title={task.taskName}
+                >
+                  {task.taskName}
+                </Text>
+                <Text size="xs" tone="subdued" className="shrink-0">
+                  {formatTimingDuration(task.durationMs)}
+                </Text>
+                <span className="sr-only">
+                  Status: {getExecutionStatusLabel(task.status)}.
+                  {task.cacheState === "hit" && " Cache hit."}
+                </span>
+              </Button>
+            </div>
+            <div role="cell" className="relative bg-muted/15">
+              <TimelineGridLines ticks={ticks} />
+              <TaskBar
+                task={task}
+                rangeStart={rangeStart}
+                rangeDuration={rangeDuration}
+                critical={critical}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function RunTimingChartLegend() {
+  return <TimingLegend />;
+}
diff --git a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.test.tsx b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.test.tsx
new file mode 100644
index 0000000000..99ab4c8eaa
--- /dev/null
+++ b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.test.tsx
@@ -0,0 +1,31 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, it } from "vitest";
+
+import { RunTimingSummary } from "./RunTimingSummary";
+
+afterEach(cleanup);
+
+it("shows Quicksite-compatible timing metrics", () => {
+  render(
+    <RunTimingSummary
+      metrics={{
+        wallClockDurationMs: 5 * 60_000,
+        totalTaskCount: 12,
+        cachedTaskCount: 3,
+        startupCoverage: 4,
+        averageStartupMs: 30_000,
+        busyRuntimeMs: 10 * 60_000,
+        busyPercent: 50,
+        criticalPathDurationMs: 4 * 60_000,
+      }}
+    />,
+  );
+
+  expect(screen.getByText("5m 0s")).toBeInTheDocument();
+  expect(screen.getByText("12")).toBeInTheDocument();
+  expect(screen.getByText("3")).toBeInTheDocument();
+  expect(screen.getByText("4 tasks with startup timing")).toBeInTheDocument();
+  expect(screen.getByText("10m 0s")).toBeInTheDocument();
+  expect(screen.getByText("50% of wall clock")).toBeInTheDocument();
+  expect(screen.getByText("4m 0s")).toBeInTheDocument();
+});
diff --git a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.tsx b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.tsx
new file mode 100644
index 0000000000..428f39d6cd
--- /dev/null
+++ b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingSummary.tsx
@@ -0,0 +1,68 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+
+import { formatTimingDuration } from "./runTiming";
+import type { RunTimingMetrics } from "./runTiming.types";
+
+interface TimingMetricProps {
+  label: string;
+  value: string;
+  detail?: string;
+}
+
+function TimingMetric({ label, value, detail }: TimingMetricProps) {
+  return (
+    <Card className="min-w-0 gap-1 py-3 shadow-none">
+      <CardContent className="px-4">
+        <BlockStack gap="1">
+          <Text size="xs" tone="subdued">
+            {label}
+          </Text>
+          <Text size="lg" weight="semibold">
+            {value}
+          </Text>
+          {detail && (
+            <Text size="xs" tone="subdued">
+              {detail}
+            </Text>
+          )}
+        </BlockStack>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function RunTimingSummary({ metrics }: { metrics: RunTimingMetrics }) {
+  return (
+    <div className="grid min-w-0 grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-6">
+      <TimingMetric
+        label="Wall-clock duration"
+        value={formatTimingDuration(metrics.wallClockDurationMs)}
+      />
+      <TimingMetric label="Tasks" value={String(metrics.totalTaskCount)} />
+      <TimingMetric
+        label="Cached tasks"
+        value={String(metrics.cachedTaskCount)}
+      />
+      <TimingMetric
+        label="Average startup / queue"
+        value={formatTimingDuration(metrics.averageStartupMs)}
+        detail={
+          metrics.startupCoverage > 0
+            ? `${metrics.startupCoverage} tasks with startup timing`
+            : undefined
+        }
+      />
+      <TimingMetric
+        label="Compute / busy"
+        value={formatTimingDuration(metrics.busyRuntimeMs)}
+        detail={`${metrics.busyPercent}% of wall clock`}
+      />
+      <TimingMetric
+        label="Critical path estimate"
+        value={formatTimingDuration(metrics.criticalPathDurationMs)}
+      />
+    </div>
+  );
+}
diff --git a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingView.tsx b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingView.tsx
index a59bd8178a..ec19419020 100644
--- a/src/routes/v2/pages/RunView/components/RunTiming/RunTimingView.tsx
+++ b/src/routes/v2/pages/RunView/components/RunTiming/RunTimingView.tsx
@@ -1,7 +1,6 @@
 import { InfoBox } from "@/components/shared/InfoBox";
 import { LoadingScreen } from "@/components/shared/LoadingScreen";
-import { Icon } from "@/components/ui/icon";
-import { BlockStack } from "@/components/ui/layout";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Paragraph } from "@/components/ui/typography";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
 import {
@@ -9,6 +8,8 @@ import {
   isExecutionComplete,
 } from "@/utils/executionStatus";
 
+import { RunTimingChart, RunTimingChartLegend } from "./RunTimingChart";
+import { RunTimingSummary } from "./RunTimingSummary";
 import { useRunTimingData } from "./useRunTimingData";
 
 export function RunTimingView() {
@@ -34,22 +35,32 @@ export function RunTimingView() {
     );
   }
 
+  if (!data) return null;
+
   return (
     <BlockStack
-      fill
-      gap="3"
-      className="bg-background p-6 text-center"
+      className="h-full min-h-0 w-full min-w-0 max-w-full overflow-hidden bg-background"
       data-testid="run-timing-view"
     >
-      <Icon
-        name="ChartNoAxesGantt"
-        size="xl"
-        className="text-muted-foreground"
-      />
-      <Heading level={1}>Run timing</Heading>
-      <Paragraph tone="subdued">
-        {data?.tasks.length ?? 0} tasks ready for timing analysis.
-      </Paragraph>
+      <BlockStack gap="4" className="shrink-0 border-b p-4">
+        <InlineStack align="space-between" blockAlign="end" wrap="wrap" gap="3">
+          <BlockStack gap="1">
+            <Heading level={1}>Run timing</Heading>
+            <Paragraph tone="subdued" size="sm">
+              Explore where this run spent time across task phases.
+            </Paragraph>
+          </BlockStack>
+          <RunTimingChartLegend />
+        </InlineStack>
+        <RunTimingSummary metrics={data.metrics} />
+      </BlockStack>
+
+      <BlockStack
+        align="stretch"
+        className="min-h-0 min-w-0 max-w-full flex-1 overflow-hidden p-4"
+      >
+        <RunTimingChart data={data} />
+      </BlockStack>
     </BlockStack>
   );
 }