@@ -105,6 +105,12 @@ line with its verdict, and a newer beta gets its own line. Clicking a cell
 expands the per-version timeline with the declared range, every older
 version, and LTS and beta markers.
 
+The "By toolchain" view flips the axes: rows are toolchain versions and a cell
+names the run of consecutive releases that support one, `9.0.3+` while the
+newest release still does or `8.2.0 – 8.5.3` once a newer release dropped it,
+with the release CI first verified on a second line when proof starts later
+than the declaration. Clicking a cell shows the same timeline over releases.
+
 ## Endpoints
 
 - `/` the app.
 
@@ -480,3 +480,86 @@ export function prettyRange(range: string): string {
 function shortVersion(version: string): string {
 	return version.replace(/(\.0)+$/, "");
 }
+
+export interface ToolchainSummary {
+	state: CellState;
+	/** "9.0.3+" while the newest stable release supports it, "8.2.0 – 8.5.3" once support ended, empty when nothing does. */
+	text: string;
+	since?: { version: string; cell: Cell };
+	/** The last release that supported it, once a newer one stopped. */
+	until?: { version: string; cell: Cell };
+	/** The oldest release of the supported run that CI verified. */
+	verifiedSince?: string;
+	/** Every tracked release of the package, newest first. */
+	releases: Array<{ version: string; prerelease?: boolean; tags: string[]; date?: string; cell: Cell }>;
+}
+
+const SUPPORTED_STATES: CellState[] = ["verified", "declared", "advisory"];
+
+/**
+ * The toolchain-first question: which releases of a package take this
+ * toolchain version? The answer is the run of consecutive stable releases
+ * nearest the present that support it, so an old release that happened to
+ * work does not claim support for everything after it.
+ */
+export function summarizeToolchain(
+	document: CompatibilityDocument,
+	key: ToolchainKey,
+	toolchainVersion: string,
+	packageName: string,
+): ToolchainSummary {
+	const pkg = document.packages[packageName];
+	if (!pkg) {
+		return { state: "unverified", text: "", releases: [] };
+	}
+	const tags = new Map<string, string[]>();
+	for (const [tag, version] of Object.entries(pkg.distTags)) {
+		tags.set(version, [...(tags.get(version) ?? []), tag]);
+	}
+	const releases = Object.keys(pkg.versions)
+		.sort(semver.rcompare)
+		.map((version) => ({
+			version,
+			prerelease: semver.prerelease(version) ? true : undefined,
+			tags: tags.get(version) ?? [],
+			date: pkg.versions[version].publishedAt,
+			cell: cellFor(document, packageName, version, key, toolchainVersion),
+		}));
+
+	const stable = releases.filter((release) => !release.prerelease).reverse();
+	const newest = stable[stable.length - 1];
+	let run: typeof stable = [];
+	let current: typeof stable = [];
+	for (const release of stable) {
+		if (SUPPORTED_STATES.includes(release.cell.state)) {
+			current.push(release);
+			run = current;
+		} else {
+			current = [];
+		}
+	}
+	if (!run.length) {
+		return { state: newest?.cell.state ?? "unverified", text: "", releases };
+	}
+
+	const since = run[0];
+	const until = run[run.length - 1];
+	const ongoing = until === newest;
+	const verifiedSince = run.find((release) => release.cell.state === "verified")?.version;
+	const state: CellState = !ongoing
+		? newest.cell.state
+		: newest.cell.state === "advisory"
+			? "advisory"
+			: verifiedSince
+				? "verified"
+				: "declared";
+
+	return {
+		state,
+		text: ongoing ? `${since.version}+` : `${since.version} – ${until.version}`,
+		since: { version: since.version, cell: since.cell },
+		...(ongoing ? {} : { until: { version: until.version, cell: until.cell } }),
+		...(verifiedSince ? { verifiedSince } : {}),
+		releases,
+	};
+}
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { buildDocument, cellFor, effectiveRequirements, matchingAdvisories } from "../shared/compute";
+import { buildDocument, cellFor, effectiveRequirements, matchingAdvisories, summarizeToolchain } from "../shared/compute";
 import type { CompatibilityDocument, Overrides, VerificationResult } from "../shared/types";
 
 const overrides: Overrides = {
@@ -308,3 +308,48 @@ describe("failure attribution", () => {
 		expect(cellFor(doc, "@nativescript/android", "9.1.1", "compileSdk", "36").state).toBe("unverified");
 	});
 });
+
+describe("summarizeToolchain", () => {
+	it("names the run of releases that support a toolchain version", () => {
+		const doc = document();
+		const verified = summarizeToolchain(doc, "xcode", "26.2", "@nativescript/ios");
+		expect(verified).toMatchObject({ state: "verified", text: "9.1.0+", verifiedSince: "9.1.0" });
+		expect(verified.releases.map((r) => r.version)).toEqual(["9.1.0", "8.9.0"]);
+		expect(verified.releases[0].tags).toEqual(["latest"]);
+
+		const declared = summarizeToolchain(doc, "xcode", "16.4", "@nativescript/ios");
+		expect(declared).toMatchObject({ state: "declared", text: "8.9.0+" });
+		expect(declared.verifiedSince).toBeUndefined();
+
+		expect(summarizeToolchain(doc, "xcode", "27.0", "@nativescript/ios")).toMatchObject({ state: "unsupported", text: "" });
+		expect(summarizeToolchain(doc, "xcode", "26.2", "@nativescript/android")).toMatchObject({ state: "unverified", text: "" });
+	});
+
+	it("reports a range once a newer release dropped the toolchain", () => {
+		const doc = buildDocument({
+			generatedAt: "2026-09-09T00:00:00.000Z",
+			toolchains: { xcode: [], cocoapods: [], compileSdk: [], buildTools: [], jdk: [{ version: "17" }, { version: "11" }], node: [] },
+			packages: [
+				{
+					spec: { name: "@nativescript/android", toolchains: ["jdk"], keep: 5 },
+					document: {
+						distTags: {},
+						manifests: [
+							{ version: "9.1.0", requirements: { jdk: ">=17" } },
+							{ version: "9.0.0", requirements: { jdk: ">=11" } },
+							{ version: "8.9.0", requirements: { jdk: ">=11" } },
+						],
+					},
+				},
+			],
+			overrides: { requirements: [], advisories: [] },
+			verified: [],
+		});
+		expect(summarizeToolchain(doc, "jdk", "11", "@nativescript/android")).toMatchObject({
+			state: "unsupported",
+			text: "8.9.0 – 9.0.0",
+			until: { version: "9.0.0" },
+		});
+		expect(summarizeToolchain(doc, "jdk", "17", "@nativescript/android")).toMatchObject({ state: "declared", text: "8.9.0+" });
+	});
+});
@@ -6,13 +6,15 @@ import CompatGrid from "./components/CompatGrid.vue";
 import LegendItem from "./components/LegendItem.vue";
 import StateIcon from "./components/StateIcon.vue";
 import ThemeToggle from "./components/ThemeToggle.vue";
+import ToolchainGrid from "./components/ToolchainGrid.vue";
+import ViewToggle from "./components/ViewToggle.vue";
 import { useUrlState } from "./urlState";
 
 const STATES: CellState[] = ["verified", "declared", "unverified", "advisory", "unsupported"];
 
 const document = ref<CompatibilityDocument | null>(null);
 const error = ref<string | null>(null);
-const { query, showPrereleases, open, expanded } = useUrlState();
+const { query, showPrereleases, open, expanded, byToolchain, openToolchain } = useUrlState();
 
 onMounted(async () => {
 	try {
@@ -68,10 +70,11 @@ function label(key: string): string {
 		</nav>
 		<div class="mt-4 flex flex-wrap items-center justify-between gap-x-8 gap-y-3 md:mt-5">
 			<div class="flex flex-wrap items-center gap-5">
+				<ViewToggle v-model="byToolchain" />
 				<input
 					v-model="query"
 					type="search"
-					placeholder="Filter by package, version or tag…"
+					placeholder="Filter by package, version, tag or toolchain…"
 					aria-label="Filter releases"
 					class="w-full rounded-lg border sm:w-80 border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-declared focus:ring-2 focus:ring-declared/30 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
 				/>
@@ -92,7 +95,15 @@ function label(key: string): string {
 		<p v-if="error" class="px-6 text-bad">Could not load compatibility data: {{ error }}</p>
 		<p v-else-if="!document" class="px-6 text-neutral-500 dark:text-neutral-400">Loading…</p>
 		<div v-else class="min-w-(--grid-min-width)">
-			<CompatGrid v-model:open="open" v-model:expanded="expanded" :document="document" :query="query" :show-prereleases="showPrereleases" />
+			<ToolchainGrid
+				v-if="byToolchain"
+				v-model:open="openToolchain"
+				v-model:expanded="expanded"
+				:document="document"
+				:query="query"
+				:show-prereleases="showPrereleases"
+			/>
+			<CompatGrid v-else v-model:open="open" v-model:expanded="expanded" :document="document" :query="query" :show-prereleases="showPrereleases" />
 
 			<section v-if="document.advisories.length" class="sticky left-0 max-w-[100cqw] px-6 pt-10">
 				<h2 class="text-base font-semibold">Advisories</h2>
 
@@ -1,18 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import type { CellSummary } from "../../../shared/compute";
-import { TOOLCHAIN_LABELS, type CellState, type CompatibilityDocument, type ToolchainKey } from "../../../shared/types";
-import { STATE_HELP } from "../states";
-import BetaChip from "./BetaChip.vue";
-import Chip from "./Chip.vue";
-import StateIcon from "./StateIcon.vue";
-
-const INITIAL_NODES = 5;
+import { TOOLCHAIN_LABELS, type CompatibilityDocument, type ToolchainKey } from "../../../shared/types";
+import Timeline, { type TimelineItem } from "./Timeline.vue";
 
 const props = defineProps<{ summary: CellSummary; toolchain: ToolchainKey; document: CompatibilityDocument }>();
 
-const showAll = ref(false);
-
 const label = computed(() => TOOLCHAIN_LABELS[props.toolchain]);
 const sourceText = computed(() =>
 	props.summary.source === "manifest"
@@ -21,57 +14,14 @@ const sourceText = computed(() =>
 			? "maintainer override"
 			: "nothing published",
 );
-const dates = computed(() =>
-	Object.fromEntries(props.document.toolchains[props.toolchain].map((tool) => [tool.version, tool.date])),
-);
-
-/** Oldest first, so time runs left to right; the newest few unless expanded. */
-const nodes = computed(() => {
-	const all = [...props.summary.breakdown].reverse();
-	return showAll.value ? all : all.slice(-INITIAL_NODES);
+const items = computed<TimelineItem[]>(() => {
+	const dates = new Map(props.document.toolchains[props.toolchain].map((tool) => [tool.version, tool.date]));
+	return props.summary.breakdown.map((item) => ({ ...item, date: dates.get(item.version) }));
 });
-const hiddenCount = computed(() => Math.max(0, props.summary.breakdown.length - INITIAL_NODES));
-
-/** Only nodes that need an explanation; plain declared, verified and unknown states speak for themselves. */
-const notes = computed(() =>
-	[...nodes.value].reverse().filter((item) => {
-		switch (item.cell.state) {
-			case "declared":
-				return false;
-			case "verified":
-				return item.cell.reason !== "verified by CI";
-			case "unverified":
-				return item.cell.reason !== "no requirement published" && item.cell.reason !== "no data";
-			default:
-				return true;
-		}
-	}),
-);
-
-const SEGMENT: Record<CellState, string> = {
-	verified: "bg-ok/55",
-	declared: "bg-ok/55",
-	unverified: "bg-unverified/40",
-	advisory: "bg-advisory/60",
-	unsupported: "bg-bad/55",
-};
-const LABEL: Record<CellState, string> = {
-	verified: "text-ok",
-	declared: "",
-	unverified: "",
-	advisory: "text-advisory",
-	unsupported: "text-bad",
-};
-
-function shortDate(version: string): string {
-	const date = dates.value[version];
-	return date ? date.slice(0, 7) : "";
-}
 </script>
 
 <template>
-	<!-- isolate: the timeline raises its icons above the track, and that must not reach the grid's sticky headers. -->
-	<div class="isolate">
+	<div>
 		<p class="text-sm">
 			<strong>{{ label }}</strong>
 			<template v-if="summary.rawRange">
@@ -82,62 +32,6 @@ function shortDate(version: string): string {
 			<span v-if="summary.verified.length" class="text-ok"> · verified by CI with {{ summary.verified.join(", ") }}</span>
 		</p>
 
-		<div class="mt-4 flex items-stretch" role="list">
-			<div v-if="hiddenCount" class="mr-3 flex shrink-0 flex-col items-center" role="presentation">
-				<span class="h-6"></span>
-				<span class="flex h-6 items-center">
-					<button
-						type="button"
-						class="rounded-full border border-neutral-300 bg-neutral-100 px-2.5 py-0.5 text-xs font-medium whitespace-nowrap hover:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-						@click="showAll = !showAll"
-					>
-						{{ showAll ? "Hide older" : `${hiddenCount} older` }}
-					</button>
-				</span>
-				<span class="h-5"></span>
-			</div>
-			<div
-				v-for="(item, index) in nodes"
-				:key="item.version"
-				class="flex min-w-0 flex-1 flex-col items-center text-center"
-				role="listitem"
-				:title="`${label} ${item.version}: ${STATE_HELP[item.cell.state]} ${item.cell.reason}`"
-			>
-				<span class="flex h-6 items-center gap-1 text-sm leading-6 font-semibold tabular-nums whitespace-nowrap" :class="LABEL[item.cell.state]">
-					{{ item.version }}
-					<BetaChip v-if="item.prerelease" />
-					<Chip v-else-if="item.lts" :title="`${label} ${item.version} is a long-term-support line`">LTS</Chip>
-				</span>
-				<span class="relative flex h-6 w-full items-center justify-center">
-					<span
-						class="absolute top-1/2 h-1 -translate-y-1/2"
-						:class="[SEGMENT[item.cell.state], index === 0 ? 'left-1/2 rounded-l-full' : 'left-0', index === nodes.length - 1 ? 'right-1/2 rounded-r-full' : 'right-0']"
-					></span>
-					<StateIcon
-						:state="item.cell.state"
-						:size="16"
-						class="relative z-10 rounded-full bg-white ring-[3px] ring-white dark:bg-neutral-950 dark:ring-neutral-950"
-					/>
-				</span>
-				<span class="h-5 text-[11px] leading-5 text-neutral-500 dark:text-neutral-400 tabular-nums">{{ shortDate(item.version) }}</span>
-			</div>
-		</div>
-
-		<ul v-if="notes.length" class="mt-4 max-w-4xl space-y-1.5 text-[13px]">
-			<li v-for="item in notes" :key="item.version" class="flex items-start gap-2">
-				<StateIcon :state="item.cell.state" :size="14" class="mt-0.5" />
-				<span>
-					<strong :class="LABEL[item.cell.state]">{{ label }} {{ item.version }}<template v-if="item.prerelease"> beta</template></strong>
-					<span class="text-neutral-500 dark:text-neutral-400"> · </span>
-					<template v-if="item.cell.advisory">
-						{{ item.cell.advisory.message }}
-						<em v-if="item.cell.advisory.fix" class="ml-1">{{ item.cell.advisory.fix }}</em>
-						<a v-if="item.cell.advisory.url" :href="item.cell.advisory.url" class="ml-1 text-declared hover:underline">details</a>
-						<code class="ml-2 text-[11px] text-neutral-400">{{ item.cell.advisory.id }}</code>
-					</template>
-					<template v-else>{{ item.cell.reason }}</template>
-				</span>
-			</li>
-		</ul>
+		<Timeline class="mt-4" :items="items" :label="label" />
 	</div>
 </template>