From d3adca81d544474a061b4aa679bbc5dc5b1f2794 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 21 Oct 2026 15:13:14 +0200
Subject: [PATCH] web/repo: split the overview into sections and add a
 languages page

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/api/repoIndex.ts                  |   2 +-
 ...readme--rendered-sanitized-html.bones.json |  60 +--
 ...dexview--panel-skeleton-fixture.bones.json | 402 +++++++--------
 ...repoindexview--skeleton-fixture.bones.json | 464 ++++++++----------
 .../components/repo/BranchList.stories.svelte |   4 +-
 web/src/lib/components/repo/BranchList.svelte |  31 +-
 web/src/lib/components/repo/CommitList.svelte | 106 ++--
 .../repo/LanguageBar.stories.svelte           |  40 --
 .../lib/components/repo/LanguageBar.svelte    |  49 --
 .../repo/LanguageList.stories.svelte          |  45 ++
 .../lib/components/repo/LanguageList.svelte   |  61 +++
 .../repo/LanguageStats.stories.svelte         |  33 ++
 .../lib/components/repo/LanguageStats.svelte  | 107 ++++
 .../lib/components/repo/PanelHeader.svelte    |   9 +-
 web/src/lib/components/repo/Readme.svelte     |  50 +-
 .../repo/RepoIndexView.stories.svelte         |   4 +-
 .../lib/components/repo/RepoIndexView.svelte  | 195 ++++----
 .../lib/components/repo/RepoSection.svelte    |  45 ++
 .../lib/components/repo/RepoToolbar.svelte    |   2 +-
 web/src/lib/components/repo/TagList.svelte    |  12 +-
 web/src/lib/components/repo/types.ts          |   1 +
 .../[handle]/[repo]/languages/+page.svelte    |  10 +
 .../routes/[handle]/[repo]/languages/+page.ts |  15 +
 23 files changed, 938 insertions(+), 809 deletions(-)
 delete mode 100644 web/src/lib/components/repo/LanguageBar.stories.svelte
 delete mode 100644 web/src/lib/components/repo/LanguageBar.svelte
 create mode 100644 web/src/lib/components/repo/LanguageList.stories.svelte
 create mode 100644 web/src/lib/components/repo/LanguageList.svelte
 create mode 100644 web/src/lib/components/repo/LanguageStats.stories.svelte
 create mode 100644 web/src/lib/components/repo/LanguageStats.svelte
 create mode 100644 web/src/lib/components/repo/RepoSection.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/languages/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/languages/+page.ts

diff --git a/web/src/lib/api/repoIndex.ts b/web/src/lib/api/repoIndex.ts
index 82659d4e5..a7b2c706b 100644
--- a/web/src/lib/api/repoIndex.ts
+++ b/web/src/lib/api/repoIndex.ts
@@ -55,7 +55,7 @@ export const toLanguageSlices = (languages: { name: string; size: number }[]): L
 
 	const slices = sized.map((language) => {
 		const share = (language.size / total) * 100;
-		return { name: language.name, share, percentage: Math.floor(share) };
+		return { name: language.name, size: language.size, share, percentage: Math.floor(share) };
 	});
 
 	const short = 100 - slices.reduce((sum, slice) => sum + slice.percentage, 0);
diff --git a/web/src/lib/bones/repo-readme--rendered-sanitized-html.bones.json b/web/src/lib/bones/repo-readme--rendered-sanitized-html.bones.json
index f52c22261..a5b095b04 100644
--- a/web/src/lib/bones/repo-readme--rendered-sanitized-html.bones.json
+++ b/web/src/lib/bones/repo-readme--rendered-sanitized-html.bones.json
@@ -4,59 +4,59 @@
 			"name": "repo-readme--rendered-sanitized-html",
 			"viewportWidth": 343,
 			"width": 343,
-			"height": 225,
+			"height": 239,
 			"bones": [
-				[0, 0, 100, 225, 8, true, 0, true],
-				[0, 0, 100, 33, 0, true, 4, false],
-				[4.6647, 8, 25.3098, 16, 6],
-				[6.9971, 49, 24.5035, 29, 6],
-				[6.9971, 103, 68.7773, 18, 6],
-				[6.9971, 127, 18.1897, 18, 6],
-				[6.9971, 174, 40.2196, 24, 6]
+				[0, 0, 100, 239, 12, true, 0, true],
+				[5.8309, 14, 4.0816, 14, 0],
+				[1.1662, 43, 97.6676, 192, 8, true, 0, true],
+				[8.1633, 59, 24.5035, 29, 6],
+				[8.1633, 113, 68.7773, 18, 6],
+				[8.1633, 137, 18.1897, 18, 6],
+				[8.1633, 184, 40.2196, 24, 6]
 			]
 		},
 		"768": {
 			"name": "repo-readme--rendered-sanitized-html",
 			"viewportWidth": 736,
 			"width": 736,
-			"height": 201,
+			"height": 215,
 			"bones": [
-				[0, 0, 100, 201, 8, true, 0, true],
-				[0, 0, 100, 33, 0, true, 4, false],
-				[2.1739, 8, 11.7952, 16, 6],
-				[3.2609, 49, 11.4194, 29, 6],
-				[3.2609, 103, 41.0199, 18, 6],
-				[3.2609, 150, 18.7436, 24, 6]
+				[0, 0, 100, 215, 12, true, 0, true],
+				[2.7174, 14, 1.9022, 14, 0],
+				[0.5435, 43, 98.913, 168, 8, true, 0, true],
+				[3.8043, 59, 11.4194, 29, 6],
+				[3.8043, 113, 41.0199, 18, 6],
+				[3.8043, 160, 18.7436, 24, 6]
 			]
 		},
 		"1024": {
 			"name": "repo-readme--rendered-sanitized-html",
 			"viewportWidth": 992,
 			"width": 992,
-			"height": 201,
+			"height": 215,
 			"bones": [
-				[0, 0, 100, 201, 8, true, 0, true],
-				[0, 0, 100, 33, 0, true, 4, false],
-				[1.6129, 8, 8.7513, 16, 6],
-				[2.4194, 49, 8.4725, 29, 6],
-				[2.4194, 103, 30.4341, 18, 6],
-				[2.4194, 150, 13.9066, 24, 6]
+				[0, 0, 100, 215, 12, true, 0, true],
+				[2.0161, 14, 1.4113, 14, 0],
+				[0.4032, 43, 99.1935, 168, 8, true, 0, true],
+				[2.8226, 59, 8.4725, 29, 6],
+				[2.8226, 113, 30.4341, 18, 6],
+				[2.8226, 160, 13.9066, 24, 6]
 			]
 		},
 		"1440": {
 			"name": "repo-readme--rendered-sanitized-html",
 			"viewportWidth": 1408,
 			"width": 1408,
-			"height": 201,
+			"height": 215,
 			"bones": [
-				[0, 0, 100, 201, 8, true, 0, true],
-				[0, 0, 100, 33, 0, true, 4, false],
-				[1.1364, 8, 6.1657, 16, 6],
-				[1.7045, 49, 5.9692, 29, 6],
-				[1.7045, 103, 21.4422, 18, 6],
-				[1.7045, 150, 9.7978, 24, 6]
+				[0, 0, 100, 215, 12, true, 0, true],
+				[1.4205, 14, 0.9943, 14, 0],
+				[0.2841, 43, 99.4318, 168, 8, true, 0, true],
+				[1.9886, 59, 5.9692, 29, 6],
+				[1.9886, 113, 21.4422, 18, 6],
+				[1.9886, 160, 9.7978, 24, 6]
 			]
 		}
 	},
-	"_hash": "c9f626b19237edcb881c93605d193fd1"
+	"_hash": "e1a92a492d91d44b7cb976877b986842"
 }
diff --git a/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json b/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
index 29d217479..64f964ee1 100644
--- a/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
+++ b/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
@@ -1,254 +1,196 @@
 {
 	"breakpoints": {
-		"375": {
-			"name": "repo-repoindexview--panel-skeleton-fixture",
-			"viewportWidth": 343,
-			"width": 343,
-			"height": 911,
-			"bones": [
-				[0, 0, 100, 911, 8, true, 0, true],
-				[0, 0, 70.2624, 4, 0],
-				[70.5539, 0, 29.4461, 4, 0],
-				[3.4985, 16, 81.3411, 32, 8],
-				[87.172, 16, 9.3294, 32, 8, true, 15, false],
-				[89.7959, 25, 4.0816, 14, 0],
-				[3.4985, 104, 93.0029, 1, 0],
-				[5.8309, 126, 4.0816, 14, 0],
-				[12.2449, 124, 81.9242, 20, 0],
-				[3.4985, 68, 31.7602, 16, 6],
-				[85.4227, 60, 11.0787, 32, 8],
-				[5.2478, 174, 11.6117, 20, 6],
-				[5.2478, 202, 20.8227, 20, 6],
-				[5.2478, 230, 18.5086, 20, 6],
-				[5.2478, 258, 14.1673, 20, 6],
-				[5.2478, 286, 17.2239, 20, 6],
-				[5.2478, 314, 14.8734, 20, 6],
-				[5.2478, 342, 24.918, 20, 6],
-				[5.2478, 370, 20.5813, 20, 6],
-				[5.2478, 398, 11.475, 20, 6],
-				[5.2478, 426, 14.2948, 20, 6],
-				[5.2478, 454, 18.8092, 20, 6],
-				[5.2478, 482, 15.7526, 20, 6],
-				[5.2478, 510, 15.9257, 20, 6],
-				[5.2478, 538, 13.6844, 20, 6],
-				[5.2478, 566, 22.9956, 20, 6],
-				[5.2478, 594, 28.5168, 20, 6],
-				[5.2478, 622, 25.4783, 20, 6],
-				[5.2478, 650, 25.8746, 20, 6],
-				[5.2478, 678, 22.5082, 20, 6],
-				[5.2478, 706, 29.4415, 20, 6],
-				[5.2478, 734, 21.2008, 20, 6],
-				[5.2478, 762, 23.0913, 20, 6],
-				[5.2478, 790, 20.9411, 20, 6],
-				[5.2478, 818, 19.8934, 20, 6],
-				[5.2478, 846, 19.4925, 20, 6],
-				[5.2478, 874, 40.3608, 20, 6]
-			]
-		},
 		"768": {
 			"name": "repo-repoindexview--panel-skeleton-fixture",
 			"viewportWidth": 736,
 			"width": 736,
-			"height": 811,
+			"height": 977,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.1214, 4, 0],
-				[70.2573, 0, 29.7427, 4, 0],
-				[1.6304, 16, 34.7826, 32, 8],
-				[37.5, 16, 4.3478, 32, 8, true, 15, false],
-				[38.7228, 25, 1.9022, 14, 0],
-				[52.7068, 25, 1.9022, 14, 0],
-				[55.6959, 23, 29.6196, 20, 0],
-				[88.0329, 16, 10.3367, 32, 8],
-				[1.6304, 68, 47.8261, 731, 0, true, 2, false],
-				[2.4457, 73, 5.4114, 20, 6],
-				[2.4457, 101, 9.7041, 20, 6],
-				[2.4457, 129, 8.6256, 20, 6],
-				[2.4457, 157, 6.6024, 20, 6],
-				[2.4457, 185, 8.0269, 20, 6],
-				[2.4457, 213, 6.9315, 20, 6],
-				[2.4457, 241, 11.6126, 20, 6],
-				[2.4457, 269, 9.5915, 20, 6],
-				[2.4457, 297, 5.3477, 20, 6],
-				[2.4457, 325, 6.6619, 20, 6],
-				[2.4457, 353, 8.7657, 20, 6],
-				[2.4457, 381, 7.3412, 20, 6],
-				[2.4457, 409, 7.4219, 20, 6],
-				[2.4457, 437, 6.3774, 20, 6],
-				[2.4457, 465, 10.7167, 20, 6],
-				[2.4457, 493, 13.2897, 20, 6],
-				[2.4457, 521, 11.8737, 20, 6],
-				[2.4457, 549, 12.0584, 20, 6],
-				[2.4457, 577, 10.4896, 20, 6],
-				[2.4457, 605, 13.7207, 20, 6],
-				[2.4457, 633, 9.8803, 20, 6],
-				[2.4457, 661, 10.7613, 20, 6],
-				[2.4457, 689, 9.7593, 20, 6],
-				[2.4457, 717, 9.271, 20, 6],
-				[2.4457, 745, 9.0842, 20, 6],
-				[2.4457, 773, 18.8094, 20, 6],
-				[51.6304, 71, 14.6697, 16, 6],
-				[51.6304, 98, 19.4633, 16, 6],
-				[51.6304, 121, 26.7897, 20, 6],
-				[51.6304, 159, 29.3521, 16, 6],
-				[51.6304, 182, 26.7897, 20, 6],
-				[51.6304, 220, 21.0853, 16, 6],
-				[51.6304, 243, 26.7897, 20, 6],
-				[51.6304, 281, 19.4633, 16, 6],
-				[51.6304, 304, 26.7897, 20, 6],
-				[51.6304, 342, 29.3521, 16, 6],
-				[51.6304, 365, 26.7897, 20, 6],
-				[51.6304, 403, 21.0853, 16, 6],
-				[51.6304, 426, 26.7897, 20, 6],
-				[51.6304, 464, 19.4633, 16, 6],
-				[51.6304, 487, 26.7897, 20, 6],
-				[51.6304, 525, 29.3521, 16, 6],
-				[51.6304, 548, 26.7897, 20, 6],
-				[51.6304, 586, 21.0853, 16, 6],
-				[51.6304, 609, 26.7897, 20, 6],
-				[51.6304, 647, 19.4633, 16, 6],
-				[51.6304, 670, 26.7897, 20, 6],
-				[50.5435, 706, 47.8261, 93, 0, true, 1, false],
-				[51.6304, 726, 13.9712, 16, 6],
-				[51.6304, 757, 22.117, 20, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[1.6304, 12, 34.7826, 32, 8],
+				[37.5, 12, 4.3478, 32, 8, true, 15, false],
+				[38.7228, 21, 1.9022, 14, 0],
+				[52.7068, 21, 1.9022, 14, 0],
+				[55.6959, 19, 29.6196, 20, 0],
+				[88.0329, 12, 10.3367, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9992, 920, 0, true, 2, false],
+				[2.1739, 76, 1.9022, 14, 0],
+				[2.1739, 106, 5.4114, 20, 6],
+				[2.1739, 134, 9.7041, 20, 6],
+				[2.1739, 162, 8.6256, 20, 6],
+				[2.1739, 190, 6.6024, 20, 6],
+				[2.1739, 218, 8.0269, 20, 6],
+				[2.1739, 246, 6.9315, 20, 6],
+				[2.1739, 274, 11.6126, 20, 6],
+				[2.1739, 302, 9.5915, 20, 6],
+				[2.1739, 330, 5.3477, 20, 6],
+				[2.1739, 358, 6.6619, 20, 6],
+				[2.1739, 386, 8.7657, 20, 6],
+				[2.1739, 414, 7.3412, 20, 6],
+				[2.1739, 442, 7.4219, 20, 6],
+				[2.1739, 470, 6.3774, 20, 6],
+				[2.1739, 498, 10.7167, 20, 6],
+				[2.1739, 526, 13.2897, 20, 6],
+				[2.1739, 554, 11.8737, 20, 6],
+				[2.1739, 582, 12.0584, 20, 6],
+				[2.1739, 610, 10.4896, 20, 6],
+				[2.1739, 638, 13.7207, 20, 6],
+				[2.1739, 666, 9.8803, 20, 6],
+				[2.1739, 694, 10.7613, 20, 6],
+				[2.1739, 722, 9.7593, 20, 6],
+				[2.1739, 750, 9.271, 20, 6],
+				[2.1739, 778, 9.0842, 20, 6],
+				[2.1739, 806, 18.8094, 20, 6],
+				[59.9992, 57, 39.9987, 121, 0, true, 4, false],
+				[62.1731, 76, 1.9022, 14, 0],
+				[64.6187, 101, 8.0566, 15, 6],
+				[94.2998, 101, 3.5241, 15, 6],
+				[64.6187, 137, 4.5983, 15, 6],
+				[94.2956, 137, 3.5284, 15, 6],
+				[59.9992, 178, 39.9987, 707, 0, true, 4, false],
+				[62.1731, 197, 14.6697, 16, 6],
+				[62.1731, 232, 19.4633, 16, 6],
+				[62.1731, 297, 29.3521, 16, 6],
+				[62.1731, 362, 21.0853, 16, 6],
+				[62.1731, 427, 19.4633, 16, 6],
+				[62.1731, 492, 29.3521, 16, 6],
+				[62.1731, 557, 21.0853, 16, 6],
+				[62.1731, 622, 19.4633, 16, 6],
+				[62.1731, 687, 29.3521, 16, 6],
+				[62.1731, 752, 21.0853, 16, 6],
+				[62.1731, 817, 19.4633, 16, 6],
+				[62.1731, 904, 13.9712, 16, 6],
+				[62.1731, 935, 21.8495, 20, 6]
 			]
 		},
 		"1024": {
 			"name": "repo-repoindexview--panel-skeleton-fixture",
 			"viewportWidth": 992,
 			"width": 992,
-			"height": 811,
+			"height": 977,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.0904, 4, 0],
-				[70.1912, 0, 29.8088, 4, 0],
-				[1.2097, 16, 25.8065, 32, 8],
-				[27.8226, 16, 3.2258, 32, 8, true, 15, false],
-				[28.7298, 25, 1.4113, 14, 0],
-				[64.9115, 25, 1.4113, 14, 0],
-				[67.1292, 23, 21.9758, 20, 0],
-				[91.1212, 16, 7.6692, 32, 8],
-				[1.2097, 68, 48.3871, 731, 0, true, 2, false],
-				[1.8145, 73, 4.0149, 20, 6],
-				[1.8145, 101, 7.1998, 20, 6],
-				[1.8145, 129, 6.3996, 20, 6],
-				[1.8145, 157, 4.8986, 20, 6],
-				[1.8145, 185, 5.9555, 20, 6],
-				[1.8145, 213, 5.1427, 20, 6],
-				[1.8145, 241, 8.6158, 20, 6],
-				[1.8145, 269, 7.1163, 20, 6],
-				[1.8145, 297, 3.9677, 20, 6],
-				[1.8145, 325, 4.9427, 20, 6],
-				[1.8145, 353, 6.5036, 20, 6],
-				[1.8145, 381, 5.4467, 20, 6],
-				[1.8145, 409, 5.5066, 20, 6],
-				[1.8145, 437, 4.7316, 20, 6],
-				[1.8145, 465, 7.9511, 20, 6],
-				[1.8145, 493, 9.8601, 20, 6],
-				[1.8145, 521, 8.8095, 20, 6],
-				[1.8145, 549, 8.9466, 20, 6],
-				[1.8145, 577, 7.7826, 20, 6],
-				[1.8145, 605, 10.1799, 20, 6],
-				[1.8145, 633, 7.3305, 20, 6],
-				[1.8145, 661, 7.9842, 20, 6],
-				[1.8145, 689, 7.2407, 20, 6],
-				[1.8145, 717, 6.8785, 20, 6],
-				[1.8145, 745, 6.7399, 20, 6],
-				[1.8145, 773, 13.9554, 20, 6],
-				[51.2097, 71, 10.8839, 16, 6],
-				[51.2097, 98, 14.4405, 16, 6],
-				[51.2097, 121, 19.8762, 20, 6],
-				[51.2097, 159, 21.7773, 16, 6],
-				[51.2097, 182, 19.8762, 20, 6],
-				[51.2097, 220, 15.6439, 16, 6],
-				[51.2097, 243, 19.8762, 20, 6],
-				[51.2097, 281, 14.4405, 16, 6],
-				[51.2097, 304, 19.8762, 20, 6],
-				[51.2097, 342, 21.7773, 16, 6],
-				[51.2097, 365, 19.8762, 20, 6],
-				[51.2097, 403, 15.6439, 16, 6],
-				[51.2097, 426, 19.8762, 20, 6],
-				[51.2097, 464, 14.4405, 16, 6],
-				[51.2097, 487, 19.8762, 20, 6],
-				[51.2097, 525, 21.7773, 16, 6],
-				[51.2097, 548, 19.8762, 20, 6],
-				[51.2097, 586, 15.6439, 16, 6],
-				[51.2097, 609, 19.8762, 20, 6],
-				[51.2097, 647, 14.4405, 16, 6],
-				[51.2097, 670, 19.8762, 20, 6],
-				[50.4032, 706, 48.3871, 93, 0, true, 1, false],
-				[51.2097, 726, 10.3657, 16, 6],
-				[51.2097, 757, 16.4094, 20, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[1.2097, 12, 25.8065, 32, 8],
+				[27.8226, 12, 3.2258, 32, 8, true, 15, false],
+				[28.7298, 21, 1.4113, 14, 0],
+				[64.9115, 21, 1.4113, 14, 0],
+				[67.1292, 19, 21.9758, 20, 0],
+				[91.1212, 12, 7.6692, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9987, 920, 0, true, 2, false],
+				[1.6129, 76, 1.4113, 14, 0],
+				[1.6129, 106, 4.0149, 20, 6],
+				[1.6129, 134, 7.1998, 20, 6],
+				[1.6129, 162, 6.3996, 20, 6],
+				[1.6129, 190, 4.8986, 20, 6],
+				[1.6129, 218, 5.9555, 20, 6],
+				[1.6129, 246, 5.1427, 20, 6],
+				[1.6129, 274, 8.6158, 20, 6],
+				[1.6129, 302, 7.1163, 20, 6],
+				[1.6129, 330, 3.9677, 20, 6],
+				[1.6129, 358, 4.9427, 20, 6],
+				[1.6129, 386, 6.5036, 20, 6],
+				[1.6129, 414, 5.4467, 20, 6],
+				[1.6129, 442, 5.5066, 20, 6],
+				[1.6129, 470, 4.7316, 20, 6],
+				[1.6129, 498, 7.9511, 20, 6],
+				[1.6129, 526, 9.8601, 20, 6],
+				[1.6129, 554, 8.8095, 20, 6],
+				[1.6129, 582, 8.9466, 20, 6],
+				[1.6129, 610, 7.7826, 20, 6],
+				[1.6129, 638, 10.1799, 20, 6],
+				[1.6129, 666, 7.3305, 20, 6],
+				[1.6129, 694, 7.9842, 20, 6],
+				[1.6129, 722, 7.2407, 20, 6],
+				[1.6129, 750, 6.8785, 20, 6],
+				[1.6129, 778, 6.7399, 20, 6],
+				[1.6129, 806, 13.9554, 20, 6],
+				[59.9987, 57, 39.9997, 121, 0, true, 4, false],
+				[61.6116, 76, 1.4113, 14, 0],
+				[63.4262, 101, 5.9775, 15, 6],
+				[95.7709, 101, 2.6147, 15, 6],
+				[63.4262, 137, 3.4117, 15, 6],
+				[95.7677, 137, 2.6178, 15, 6],
+				[59.9987, 178, 39.9997, 707, 0, true, 4, false],
+				[61.6116, 197, 10.8839, 16, 6],
+				[61.6116, 232, 14.4405, 16, 6],
+				[61.6116, 297, 21.7773, 16, 6],
+				[61.6116, 362, 15.6439, 16, 6],
+				[61.6116, 427, 14.4405, 16, 6],
+				[61.6116, 492, 21.7773, 16, 6],
+				[61.6116, 557, 15.6439, 16, 6],
+				[61.6116, 622, 14.4405, 16, 6],
+				[61.6116, 687, 21.7773, 16, 6],
+				[61.6116, 752, 15.6439, 16, 6],
+				[61.6116, 817, 14.4405, 16, 6],
+				[61.6116, 904, 10.3657, 16, 6],
+				[61.6116, 935, 16.2109, 20, 6]
 			]
 		},
 		"1440": {
 			"name": "repo-repoindexview--panel-skeleton-fixture",
 			"viewportWidth": 1408,
 			"width": 1408,
-			"height": 811,
+			"height": 977,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.0639, 4, 0],
-				[70.1349, 0, 29.8651, 4, 0],
-				[0.8523, 16, 18.1818, 32, 8],
-				[19.6023, 16, 2.2727, 32, 8, true, 15, false],
-				[20.2415, 25, 0.9943, 14, 0],
-				[75.2785, 25, 0.9943, 14, 0],
-				[76.841, 23, 15.483, 20, 0],
-				[93.7445, 16, 5.4033, 32, 8],
-				[0.8523, 68, 48.8636, 731, 0, true, 2, false],
-				[1.2784, 73, 2.8287, 20, 6],
-				[1.2784, 101, 5.0726, 20, 6],
-				[1.2784, 129, 4.5088, 20, 6],
-				[1.2784, 157, 3.4513, 20, 6],
-				[1.2784, 185, 4.1959, 20, 6],
-				[1.2784, 213, 3.6233, 20, 6],
-				[1.2784, 241, 6.0702, 20, 6],
-				[1.2784, 269, 5.0138, 20, 6],
-				[1.2784, 297, 2.7954, 20, 6],
-				[1.2784, 325, 3.4823, 20, 6],
-				[1.2784, 353, 4.5821, 20, 6],
-				[1.2784, 381, 3.8374, 20, 6],
-				[1.2784, 409, 3.8796, 20, 6],
-				[1.2784, 437, 3.3336, 20, 6],
-				[1.2784, 465, 5.6019, 20, 6],
-				[1.2784, 493, 6.9469, 20, 6],
-				[1.2784, 521, 6.2067, 20, 6],
-				[1.2784, 549, 6.3033, 20, 6],
-				[1.2784, 577, 5.4832, 20, 6],
-				[1.2784, 605, 7.1722, 20, 6],
-				[1.2784, 633, 5.1647, 20, 6],
-				[1.2784, 661, 5.6252, 20, 6],
-				[1.2784, 689, 5.1014, 20, 6],
-				[1.2784, 717, 4.8462, 20, 6],
-				[1.2784, 745, 4.7485, 20, 6],
-				[1.2784, 773, 9.8322, 20, 6],
-				[50.8523, 71, 7.6682, 16, 6],
-				[50.8523, 98, 10.174, 16, 6],
-				[50.8523, 121, 14.0037, 20, 6],
-				[50.8523, 159, 15.3431, 16, 6],
-				[50.8523, 182, 14.0037, 20, 6],
-				[50.8523, 220, 11.0218, 16, 6],
-				[50.8523, 243, 14.0037, 20, 6],
-				[50.8523, 281, 10.174, 16, 6],
-				[50.8523, 304, 14.0037, 20, 6],
-				[50.8523, 342, 15.3431, 16, 6],
-				[50.8523, 365, 14.0037, 20, 6],
-				[50.8523, 403, 11.0218, 16, 6],
-				[50.8523, 426, 14.0037, 20, 6],
-				[50.8523, 464, 10.174, 16, 6],
-				[50.8523, 487, 14.0037, 20, 6],
-				[50.8523, 525, 15.3431, 16, 6],
-				[50.8523, 548, 14.0037, 20, 6],
-				[50.8523, 586, 11.0218, 16, 6],
-				[50.8523, 609, 14.0037, 20, 6],
-				[50.8523, 647, 10.174, 16, 6],
-				[50.8523, 670, 14.0037, 20, 6],
-				[50.2841, 706, 48.8636, 93, 0, true, 1, false],
-				[50.8523, 726, 7.3031, 16, 6],
-				[50.8523, 757, 11.5612, 20, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[0.8523, 12, 18.1818, 32, 8],
+				[19.6023, 12, 2.2727, 32, 8, true, 15, false],
+				[20.2415, 21, 0.9943, 14, 0],
+				[75.2785, 21, 0.9943, 14, 0],
+				[76.841, 19, 15.483, 20, 0],
+				[93.7445, 12, 5.4033, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9998, 920, 0, true, 2, false],
+				[1.1364, 76, 0.9943, 14, 0],
+				[1.1364, 106, 2.8287, 20, 6],
+				[1.1364, 134, 5.0726, 20, 6],
+				[1.1364, 162, 4.5088, 20, 6],
+				[1.1364, 190, 3.4513, 20, 6],
+				[1.1364, 218, 4.1959, 20, 6],
+				[1.1364, 246, 3.6233, 20, 6],
+				[1.1364, 274, 6.0702, 20, 6],
+				[1.1364, 302, 5.0138, 20, 6],
+				[1.1364, 330, 2.7954, 20, 6],
+				[1.1364, 358, 3.4823, 20, 6],
+				[1.1364, 386, 4.5821, 20, 6],
+				[1.1364, 414, 3.8374, 20, 6],
+				[1.1364, 442, 3.8796, 20, 6],
+				[1.1364, 470, 3.3336, 20, 6],
+				[1.1364, 498, 5.6019, 20, 6],
+				[1.1364, 526, 6.9469, 20, 6],
+				[1.1364, 554, 6.2067, 20, 6],
+				[1.1364, 582, 6.3033, 20, 6],
+				[1.1364, 610, 5.4832, 20, 6],
+				[1.1364, 638, 7.1722, 20, 6],
+				[1.1364, 666, 5.1647, 20, 6],
+				[1.1364, 694, 5.6252, 20, 6],
+				[1.1364, 722, 5.1014, 20, 6],
+				[1.1364, 750, 4.8462, 20, 6],
+				[1.1364, 778, 4.7485, 20, 6],
+				[1.1364, 806, 9.8322, 20, 6],
+				[59.9998, 57, 40.0002, 121, 0, true, 4, false],
+				[61.1361, 76, 0.9943, 14, 0],
+				[62.4146, 101, 4.2114, 15, 6],
+				[97.0215, 101, 1.8422, 15, 6],
+				[62.4146, 137, 2.4037, 15, 6],
+				[97.0193, 137, 1.8444, 15, 6],
+				[59.9998, 178, 40.0002, 707, 0, true, 4, false],
+				[61.1361, 197, 7.6682, 16, 6],
+				[61.1361, 232, 10.174, 16, 6],
+				[61.1361, 297, 15.3431, 16, 6],
+				[61.1361, 362, 11.0218, 16, 6],
+				[61.1361, 427, 10.174, 16, 6],
+				[61.1361, 492, 15.3431, 16, 6],
+				[61.1361, 557, 11.0218, 16, 6],
+				[61.1361, 622, 10.174, 16, 6],
+				[61.1361, 687, 15.3431, 16, 6],
+				[61.1361, 752, 11.0218, 16, 6],
+				[61.1361, 817, 10.174, 16, 6],
+				[61.1361, 904, 7.3031, 16, 6],
+				[61.1361, 935, 11.4213, 20, 6]
 			]
 		}
-	},
-	"_hash": "8be89ded5603adb372f4eb19ccc87631"
+	}
 }
diff --git a/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json b/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
index 1364ec7ee..9589fac6b 100644
--- a/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
+++ b/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
@@ -1,292 +1,220 @@
 {
 	"breakpoints": {
-		"375": {
-			"name": "repo-repoindexview--skeleton-fixture",
-			"viewportWidth": 343,
-			"width": 343,
-			"height": 1332,
-			"bones": [
-				[0, 0, 100, 911, 8, true, 0, true],
-				[0, 0, 70.2624, 4, 0],
-				[70.5539, 0, 29.4461, 4, 0],
-				[3.4985, 16, 81.3411, 32, 8],
-				[87.172, 16, 9.3294, 32, 8, true, 15, false],
-				[89.7959, 25, 4.0816, 14, 0],
-				[3.4985, 104, 93.0029, 1, 0],
-				[5.8309, 126, 4.0816, 14, 0],
-				[12.2449, 124, 81.9242, 20, 0],
-				[3.4985, 68, 31.7602, 16, 6],
-				[85.4227, 60, 11.0787, 32, 8],
-				[5.2478, 174, 11.6117, 20, 6],
-				[5.2478, 202, 20.8227, 20, 6],
-				[5.2478, 230, 18.5086, 20, 6],
-				[5.2478, 258, 14.1673, 20, 6],
-				[5.2478, 286, 17.2239, 20, 6],
-				[5.2478, 314, 14.8734, 20, 6],
-				[5.2478, 342, 24.918, 20, 6],
-				[5.2478, 370, 20.5813, 20, 6],
-				[5.2478, 398, 11.475, 20, 6],
-				[5.2478, 426, 14.2948, 20, 6],
-				[5.2478, 454, 18.8092, 20, 6],
-				[5.2478, 482, 15.7526, 20, 6],
-				[5.2478, 510, 15.9257, 20, 6],
-				[5.2478, 538, 13.6844, 20, 6],
-				[5.2478, 566, 22.9956, 20, 6],
-				[5.2478, 594, 28.5168, 20, 6],
-				[5.2478, 622, 25.4783, 20, 6],
-				[5.2478, 650, 25.8746, 20, 6],
-				[5.2478, 678, 22.5082, 20, 6],
-				[5.2478, 706, 29.4415, 20, 6],
-				[5.2478, 734, 21.2008, 20, 6],
-				[5.2478, 762, 23.0913, 20, 6],
-				[5.2478, 790, 20.9411, 20, 6],
-				[5.2478, 818, 19.8934, 20, 6],
-				[5.2478, 846, 19.4925, 20, 6],
-				[5.2478, 874, 40.3608, 20, 6],
-				[0, 927, 100, 405, 8, true, 0, true],
-				[0, 927, 100, 33, 0, true, 4, false],
-				[4.6647, 935, 25.3098, 16, 6],
-				[6.9971, 976, 25.5876, 29, 6],
-				[6.9971, 1030, 85.7507, 18, 6],
-				[6.9971, 1054, 68.2444, 18, 6],
-				[6.9971, 1078, 76.8267, 18, 6],
-				[6.9971, 1102, 82.7396, 18, 6],
-				[6.9971, 1126, 56.9288, 18, 6],
-				[6.9971, 1173, 36.1288, 24, 6],
-				[6.9971, 1223, 85.9922, 18, 6],
-				[6.9971, 1247, 72.0117, 18, 6],
-				[6.9971, 1271, 78.3619, 18, 6],
-				[6.9971, 1295, 15.8254, 18, 6]
-			]
-		},
 		"768": {
 			"name": "repo-repoindexview--skeleton-fixture",
 			"viewportWidth": 736,
 			"width": 736,
-			"height": 1112,
+			"height": 1292,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.1214, 4, 0],
-				[70.2573, 0, 29.7427, 4, 0],
-				[1.6304, 16, 34.7826, 32, 8],
-				[37.5, 16, 4.3478, 32, 8, true, 15, false],
-				[38.7228, 25, 1.9022, 14, 0],
-				[52.7068, 25, 1.9022, 14, 0],
-				[55.6959, 23, 29.6196, 20, 0],
-				[88.0329, 16, 10.3367, 32, 8],
-				[1.6304, 68, 47.8261, 731, 0, true, 2, false],
-				[2.4457, 73, 5.4114, 20, 6],
-				[2.4457, 101, 9.7041, 20, 6],
-				[2.4457, 129, 8.6256, 20, 6],
-				[2.4457, 157, 6.6024, 20, 6],
-				[2.4457, 185, 8.0269, 20, 6],
-				[2.4457, 213, 6.9315, 20, 6],
-				[2.4457, 241, 11.6126, 20, 6],
-				[2.4457, 269, 9.5915, 20, 6],
-				[2.4457, 297, 5.3477, 20, 6],
-				[2.4457, 325, 6.6619, 20, 6],
-				[2.4457, 353, 8.7657, 20, 6],
-				[2.4457, 381, 7.3412, 20, 6],
-				[2.4457, 409, 7.4219, 20, 6],
-				[2.4457, 437, 6.3774, 20, 6],
-				[2.4457, 465, 10.7167, 20, 6],
-				[2.4457, 493, 13.2897, 20, 6],
-				[2.4457, 521, 11.8737, 20, 6],
-				[2.4457, 549, 12.0584, 20, 6],
-				[2.4457, 577, 10.4896, 20, 6],
-				[2.4457, 605, 13.7207, 20, 6],
-				[2.4457, 633, 9.8803, 20, 6],
-				[2.4457, 661, 10.7613, 20, 6],
-				[2.4457, 689, 9.7593, 20, 6],
-				[2.4457, 717, 9.271, 20, 6],
-				[2.4457, 745, 9.0842, 20, 6],
-				[2.4457, 773, 18.8094, 20, 6],
-				[51.6304, 71, 14.6697, 16, 6],
-				[51.6304, 98, 19.4633, 16, 6],
-				[51.6304, 121, 26.7897, 20, 6],
-				[51.6304, 159, 29.3521, 16, 6],
-				[51.6304, 182, 26.7897, 20, 6],
-				[51.6304, 220, 21.0853, 16, 6],
-				[51.6304, 243, 26.7897, 20, 6],
-				[51.6304, 281, 19.4633, 16, 6],
-				[51.6304, 304, 26.7897, 20, 6],
-				[51.6304, 342, 29.3521, 16, 6],
-				[51.6304, 365, 26.7897, 20, 6],
-				[51.6304, 403, 21.0853, 16, 6],
-				[51.6304, 426, 26.7897, 20, 6],
-				[51.6304, 464, 19.4633, 16, 6],
-				[51.6304, 487, 26.7897, 20, 6],
-				[51.6304, 525, 29.3521, 16, 6],
-				[51.6304, 548, 26.7897, 20, 6],
-				[51.6304, 586, 21.0853, 16, 6],
-				[51.6304, 609, 26.7897, 20, 6],
-				[51.6304, 647, 19.4633, 16, 6],
-				[51.6304, 670, 26.7897, 20, 6],
-				[50.5435, 706, 47.8261, 93, 0, true, 1, false],
-				[51.6304, 726, 13.9712, 16, 6],
-				[51.6304, 757, 22.117, 20, 6],
-				[0, 827, 100, 285, 8, true, 0, true],
-				[0, 827, 100, 33, 0, true, 4, false],
-				[2.1739, 835, 11.7952, 16, 6],
-				[3.2609, 876, 11.9247, 29, 6],
-				[3.2609, 930, 91.4721, 18, 6],
-				[3.2609, 954, 82.666, 18, 6],
-				[3.2609, 1001, 16.8372, 24, 6],
-				[3.2609, 1051, 91.3213, 18, 6],
-				[3.2609, 1075, 27.2164, 18, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[1.6304, 12, 34.7826, 32, 8],
+				[37.5, 12, 4.3478, 32, 8, true, 15, false],
+				[38.7228, 21, 1.9022, 14, 0],
+				[52.7068, 21, 1.9022, 14, 0],
+				[55.6959, 19, 29.6196, 20, 0],
+				[88.0329, 12, 10.3367, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9992, 920, 0, true, 2, false],
+				[2.1739, 76, 1.9022, 14, 0],
+				[2.1739, 106, 5.4114, 20, 6],
+				[2.1739, 134, 9.7041, 20, 6],
+				[2.1739, 162, 8.6256, 20, 6],
+				[2.1739, 190, 6.6024, 20, 6],
+				[2.1739, 218, 8.0269, 20, 6],
+				[2.1739, 246, 6.9315, 20, 6],
+				[2.1739, 274, 11.6126, 20, 6],
+				[2.1739, 302, 9.5915, 20, 6],
+				[2.1739, 330, 5.3477, 20, 6],
+				[2.1739, 358, 6.6619, 20, 6],
+				[2.1739, 386, 8.7657, 20, 6],
+				[2.1739, 414, 7.3412, 20, 6],
+				[2.1739, 442, 7.4219, 20, 6],
+				[2.1739, 470, 6.3774, 20, 6],
+				[2.1739, 498, 10.7167, 20, 6],
+				[2.1739, 526, 13.2897, 20, 6],
+				[2.1739, 554, 11.8737, 20, 6],
+				[2.1739, 582, 12.0584, 20, 6],
+				[2.1739, 610, 10.4896, 20, 6],
+				[2.1739, 638, 13.7207, 20, 6],
+				[2.1739, 666, 9.8803, 20, 6],
+				[2.1739, 694, 10.7613, 20, 6],
+				[2.1739, 722, 9.7593, 20, 6],
+				[2.1739, 750, 9.271, 20, 6],
+				[2.1739, 778, 9.0842, 20, 6],
+				[2.1739, 806, 18.8094, 20, 6],
+				[59.9992, 57, 39.9987, 121, 0, true, 4, false],
+				[62.1731, 76, 1.9022, 14, 0],
+				[64.6187, 101, 8.0566, 15, 6],
+				[94.2998, 101, 3.5241, 15, 6],
+				[64.6187, 137, 4.5983, 15, 6],
+				[94.2956, 137, 3.5284, 15, 6],
+				[59.9992, 178, 39.9987, 707, 0, true, 4, false],
+				[62.1731, 197, 14.6697, 16, 6],
+				[62.1731, 232, 19.4633, 16, 6],
+				[62.1731, 297, 29.3521, 16, 6],
+				[62.1731, 362, 21.0853, 16, 6],
+				[62.1731, 427, 19.4633, 16, 6],
+				[62.1731, 492, 29.3521, 16, 6],
+				[62.1731, 557, 21.0853, 16, 6],
+				[62.1731, 622, 19.4633, 16, 6],
+				[62.1731, 687, 29.3521, 16, 6],
+				[62.1731, 752, 21.0853, 16, 6],
+				[62.1731, 817, 19.4633, 16, 6],
+				[62.1731, 904, 13.9712, 16, 6],
+				[62.1731, 935, 21.8495, 20, 6],
+				[0, 993, 100, 299, 12, true, 0, true],
+				[2.7174, 1007, 1.9022, 14, 0],
+				[0.5435, 1036, 98.913, 252, 8, true, 0, true],
+				[3.8043, 1052, 11.9247, 29, 6],
+				[3.8043, 1106, 91.4721, 18, 6],
+				[3.8043, 1130, 82.666, 18, 6],
+				[3.8043, 1177, 16.8372, 24, 6],
+				[3.8043, 1227, 91.3213, 18, 6],
+				[3.8043, 1251, 27.2164, 18, 6]
 			]
 		},
 		"1024": {
 			"name": "repo-repoindexview--skeleton-fixture",
 			"viewportWidth": 992,
 			"width": 992,
-			"height": 1088,
+			"height": 1268,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.0904, 4, 0],
-				[70.1912, 0, 29.8088, 4, 0],
-				[1.2097, 16, 25.8065, 32, 8],
-				[27.8226, 16, 3.2258, 32, 8, true, 15, false],
-				[28.7298, 25, 1.4113, 14, 0],
-				[64.9115, 25, 1.4113, 14, 0],
-				[67.1292, 23, 21.9758, 20, 0],
-				[91.1212, 16, 7.6692, 32, 8],
-				[1.2097, 68, 48.3871, 731, 0, true, 2, false],
-				[1.8145, 73, 4.0149, 20, 6],
-				[1.8145, 101, 7.1998, 20, 6],
-				[1.8145, 129, 6.3996, 20, 6],
-				[1.8145, 157, 4.8986, 20, 6],
-				[1.8145, 185, 5.9555, 20, 6],
-				[1.8145, 213, 5.1427, 20, 6],
-				[1.8145, 241, 8.6158, 20, 6],
-				[1.8145, 269, 7.1163, 20, 6],
-				[1.8145, 297, 3.9677, 20, 6],
-				[1.8145, 325, 4.9427, 20, 6],
-				[1.8145, 353, 6.5036, 20, 6],
-				[1.8145, 381, 5.4467, 20, 6],
-				[1.8145, 409, 5.5066, 20, 6],
-				[1.8145, 437, 4.7316, 20, 6],
-				[1.8145, 465, 7.9511, 20, 6],
-				[1.8145, 493, 9.8601, 20, 6],
-				[1.8145, 521, 8.8095, 20, 6],
-				[1.8145, 549, 8.9466, 20, 6],
-				[1.8145, 577, 7.7826, 20, 6],
-				[1.8145, 605, 10.1799, 20, 6],
-				[1.8145, 633, 7.3305, 20, 6],
-				[1.8145, 661, 7.9842, 20, 6],
-				[1.8145, 689, 7.2407, 20, 6],
-				[1.8145, 717, 6.8785, 20, 6],
-				[1.8145, 745, 6.7399, 20, 6],
-				[1.8145, 773, 13.9554, 20, 6],
-				[51.2097, 71, 10.8839, 16, 6],
-				[51.2097, 98, 14.4405, 16, 6],
-				[51.2097, 121, 19.8762, 20, 6],
-				[51.2097, 159, 21.7773, 16, 6],
-				[51.2097, 182, 19.8762, 20, 6],
-				[51.2097, 220, 15.6439, 16, 6],
-				[51.2097, 243, 19.8762, 20, 6],
-				[51.2097, 281, 14.4405, 16, 6],
-				[51.2097, 304, 19.8762, 20, 6],
-				[51.2097, 342, 21.7773, 16, 6],
-				[51.2097, 365, 19.8762, 20, 6],
-				[51.2097, 403, 15.6439, 16, 6],
-				[51.2097, 426, 19.8762, 20, 6],
-				[51.2097, 464, 14.4405, 16, 6],
-				[51.2097, 487, 19.8762, 20, 6],
-				[51.2097, 525, 21.7773, 16, 6],
-				[51.2097, 548, 19.8762, 20, 6],
-				[51.2097, 586, 15.6439, 16, 6],
-				[51.2097, 609, 19.8762, 20, 6],
-				[51.2097, 647, 14.4405, 16, 6],
-				[51.2097, 670, 19.8762, 20, 6],
-				[50.4032, 706, 48.3871, 93, 0, true, 1, false],
-				[51.2097, 726, 10.3657, 16, 6],
-				[51.2097, 757, 16.4094, 20, 6],
-				[0, 827, 100, 261, 8, true, 0, true],
-				[0, 827, 100, 33, 0, true, 4, false],
-				[1.6129, 835, 8.7513, 16, 6],
-				[2.4194, 876, 8.8473, 29, 6],
-				[2.4194, 930, 88.6262, 18, 6],
-				[2.4194, 954, 40.5714, 18, 6],
-				[2.4194, 1001, 12.4921, 24, 6],
-				[2.4194, 1051, 88.3254, 18, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[1.2097, 12, 25.8065, 32, 8],
+				[27.8226, 12, 3.2258, 32, 8, true, 15, false],
+				[28.7298, 21, 1.4113, 14, 0],
+				[64.9115, 21, 1.4113, 14, 0],
+				[67.1292, 19, 21.9758, 20, 0],
+				[91.1212, 12, 7.6692, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9987, 920, 0, true, 2, false],
+				[1.6129, 76, 1.4113, 14, 0],
+				[1.6129, 106, 4.0149, 20, 6],
+				[1.6129, 134, 7.1998, 20, 6],
+				[1.6129, 162, 6.3996, 20, 6],
+				[1.6129, 190, 4.8986, 20, 6],
+				[1.6129, 218, 5.9555, 20, 6],
+				[1.6129, 246, 5.1427, 20, 6],
+				[1.6129, 274, 8.6158, 20, 6],
+				[1.6129, 302, 7.1163, 20, 6],
+				[1.6129, 330, 3.9677, 20, 6],
+				[1.6129, 358, 4.9427, 20, 6],
+				[1.6129, 386, 6.5036, 20, 6],
+				[1.6129, 414, 5.4467, 20, 6],
+				[1.6129, 442, 5.5066, 20, 6],
+				[1.6129, 470, 4.7316, 20, 6],
+				[1.6129, 498, 7.9511, 20, 6],
+				[1.6129, 526, 9.8601, 20, 6],
+				[1.6129, 554, 8.8095, 20, 6],
+				[1.6129, 582, 8.9466, 20, 6],
+				[1.6129, 610, 7.7826, 20, 6],
+				[1.6129, 638, 10.1799, 20, 6],
+				[1.6129, 666, 7.3305, 20, 6],
+				[1.6129, 694, 7.9842, 20, 6],
+				[1.6129, 722, 7.2407, 20, 6],
+				[1.6129, 750, 6.8785, 20, 6],
+				[1.6129, 778, 6.7399, 20, 6],
+				[1.6129, 806, 13.9554, 20, 6],
+				[59.9987, 57, 39.9997, 121, 0, true, 4, false],
+				[61.6116, 76, 1.4113, 14, 0],
+				[63.4262, 101, 5.9775, 15, 6],
+				[95.7709, 101, 2.6147, 15, 6],
+				[63.4262, 137, 3.4117, 15, 6],
+				[95.7677, 137, 2.6178, 15, 6],
+				[59.9987, 178, 39.9997, 707, 0, true, 4, false],
+				[61.6116, 197, 10.8839, 16, 6],
+				[61.6116, 232, 14.4405, 16, 6],
+				[61.6116, 297, 21.7773, 16, 6],
+				[61.6116, 362, 15.6439, 16, 6],
+				[61.6116, 427, 14.4405, 16, 6],
+				[61.6116, 492, 21.7773, 16, 6],
+				[61.6116, 557, 15.6439, 16, 6],
+				[61.6116, 622, 14.4405, 16, 6],
+				[61.6116, 687, 21.7773, 16, 6],
+				[61.6116, 752, 15.6439, 16, 6],
+				[61.6116, 817, 14.4405, 16, 6],
+				[61.6116, 904, 10.3657, 16, 6],
+				[61.6116, 935, 16.2109, 20, 6],
+				[0, 993, 100, 275, 12, true, 0, true],
+				[2.0161, 1007, 1.4113, 14, 0],
+				[0.4032, 1036, 99.1935, 228, 8, true, 0, true],
+				[2.8226, 1052, 8.8473, 29, 6],
+				[2.8226, 1106, 88.6262, 18, 6],
+				[2.8226, 1130, 40.5714, 18, 6],
+				[2.8226, 1177, 12.4921, 24, 6],
+				[2.8226, 1227, 88.3254, 18, 6]
 			]
 		},
 		"1440": {
 			"name": "repo-repoindexview--skeleton-fixture",
 			"viewportWidth": 1408,
 			"width": 1408,
-			"height": 1064,
+			"height": 1244,
 			"bones": [
-				[0, 0, 100, 811, 8, true, 0, true],
-				[0, 0, 70.0639, 4, 0],
-				[70.1349, 0, 29.8651, 4, 0],
-				[0.8523, 16, 18.1818, 32, 8],
-				[19.6023, 16, 2.2727, 32, 8, true, 15, false],
-				[20.2415, 25, 0.9943, 14, 0],
-				[75.2785, 25, 0.9943, 14, 0],
-				[76.841, 23, 15.483, 20, 0],
-				[93.7445, 16, 5.4033, 32, 8],
-				[0.8523, 68, 48.8636, 731, 0, true, 2, false],
-				[1.2784, 73, 2.8287, 20, 6],
-				[1.2784, 101, 5.0726, 20, 6],
-				[1.2784, 129, 4.5088, 20, 6],
-				[1.2784, 157, 3.4513, 20, 6],
-				[1.2784, 185, 4.1959, 20, 6],
-				[1.2784, 213, 3.6233, 20, 6],
-				[1.2784, 241, 6.0702, 20, 6],
-				[1.2784, 269, 5.0138, 20, 6],
-				[1.2784, 297, 2.7954, 20, 6],
-				[1.2784, 325, 3.4823, 20, 6],
-				[1.2784, 353, 4.5821, 20, 6],
-				[1.2784, 381, 3.8374, 20, 6],
-				[1.2784, 409, 3.8796, 20, 6],
-				[1.2784, 437, 3.3336, 20, 6],
-				[1.2784, 465, 5.6019, 20, 6],
-				[1.2784, 493, 6.9469, 20, 6],
-				[1.2784, 521, 6.2067, 20, 6],
-				[1.2784, 549, 6.3033, 20, 6],
-				[1.2784, 577, 5.4832, 20, 6],
-				[1.2784, 605, 7.1722, 20, 6],
-				[1.2784, 633, 5.1647, 20, 6],
-				[1.2784, 661, 5.6252, 20, 6],
-				[1.2784, 689, 5.1014, 20, 6],
-				[1.2784, 717, 4.8462, 20, 6],
-				[1.2784, 745, 4.7485, 20, 6],
-				[1.2784, 773, 9.8322, 20, 6],
-				[50.8523, 71, 7.6682, 16, 6],
-				[50.8523, 98, 10.174, 16, 6],
-				[50.8523, 121, 14.0037, 20, 6],
-				[50.8523, 159, 15.3431, 16, 6],
-				[50.8523, 182, 14.0037, 20, 6],
-				[50.8523, 220, 11.0218, 16, 6],
-				[50.8523, 243, 14.0037, 20, 6],
-				[50.8523, 281, 10.174, 16, 6],
-				[50.8523, 304, 14.0037, 20, 6],
-				[50.8523, 342, 15.3431, 16, 6],
-				[50.8523, 365, 14.0037, 20, 6],
-				[50.8523, 403, 11.0218, 16, 6],
-				[50.8523, 426, 14.0037, 20, 6],
-				[50.8523, 464, 10.174, 16, 6],
-				[50.8523, 487, 14.0037, 20, 6],
-				[50.8523, 525, 15.3431, 16, 6],
-				[50.8523, 548, 14.0037, 20, 6],
-				[50.8523, 586, 11.0218, 16, 6],
-				[50.8523, 609, 14.0037, 20, 6],
-				[50.8523, 647, 10.174, 16, 6],
-				[50.8523, 670, 14.0037, 20, 6],
-				[50.2841, 706, 48.8636, 93, 0, true, 1, false],
-				[50.8523, 726, 7.3031, 16, 6],
-				[50.8523, 757, 11.5612, 20, 6],
-				[0, 827, 100, 237, 8, true, 0, true],
-				[0, 827, 100, 33, 0, true, 4, false],
-				[1.1364, 835, 6.1657, 16, 6],
-				[1.7045, 876, 6.2334, 29, 6],
-				[1.7045, 930, 91.2831, 18, 6],
-				[1.7045, 977, 8.8013, 24, 6],
-				[1.7045, 1027, 62.2292, 18, 6]
+				[0, 0, 100, 977, 8, true, 0, true],
+				[0.8523, 12, 18.1818, 32, 8],
+				[19.6023, 12, 2.2727, 32, 8, true, 15, false],
+				[20.2415, 21, 0.9943, 14, 0],
+				[75.2785, 21, 0.9943, 14, 0],
+				[76.841, 19, 15.483, 20, 0],
+				[93.7445, 12, 5.4033, 32, 8],
+				[0, 56, 100, 921, 0, true, 1, false],
+				[0, 57, 59.9998, 920, 0, true, 2, false],
+				[1.1364, 76, 0.9943, 14, 0],
+				[1.1364, 106, 2.8287, 20, 6],
+				[1.1364, 134, 5.0726, 20, 6],
+				[1.1364, 162, 4.5088, 20, 6],
+				[1.1364, 190, 3.4513, 20, 6],
+				[1.1364, 218, 4.1959, 20, 6],
+				[1.1364, 246, 3.6233, 20, 6],
+				[1.1364, 274, 6.0702, 20, 6],
+				[1.1364, 302, 5.0138, 20, 6],
+				[1.1364, 330, 2.7954, 20, 6],
+				[1.1364, 358, 3.4823, 20, 6],
+				[1.1364, 386, 4.5821, 20, 6],
+				[1.1364, 414, 3.8374, 20, 6],
+				[1.1364, 442, 3.8796, 20, 6],
+				[1.1364, 470, 3.3336, 20, 6],
+				[1.1364, 498, 5.6019, 20, 6],
+				[1.1364, 526, 6.9469, 20, 6],
+				[1.1364, 554, 6.2067, 20, 6],
+				[1.1364, 582, 6.3033, 20, 6],
+				[1.1364, 610, 5.4832, 20, 6],
+				[1.1364, 638, 7.1722, 20, 6],
+				[1.1364, 666, 5.1647, 20, 6],
+				[1.1364, 694, 5.6252, 20, 6],
+				[1.1364, 722, 5.1014, 20, 6],
+				[1.1364, 750, 4.8462, 20, 6],
+				[1.1364, 778, 4.7485, 20, 6],
+				[1.1364, 806, 9.8322, 20, 6],
+				[59.9998, 57, 40.0002, 121, 0, true, 4, false],
+				[61.1361, 76, 0.9943, 14, 0],
+				[62.4146, 101, 4.2114, 15, 6],
+				[97.0215, 101, 1.8422, 15, 6],
+				[62.4146, 137, 2.4037, 15, 6],
+				[97.0193, 137, 1.8444, 15, 6],
+				[59.9998, 178, 40.0002, 707, 0, true, 4, false],
+				[61.1361, 197, 7.6682, 16, 6],
+				[61.1361, 232, 10.174, 16, 6],
+				[61.1361, 297, 15.3431, 16, 6],
+				[61.1361, 362, 11.0218, 16, 6],
+				[61.1361, 427, 10.174, 16, 6],
+				[61.1361, 492, 15.3431, 16, 6],
+				[61.1361, 557, 11.0218, 16, 6],
+				[61.1361, 622, 10.174, 16, 6],
+				[61.1361, 687, 15.3431, 16, 6],
+				[61.1361, 752, 11.0218, 16, 6],
+				[61.1361, 817, 10.174, 16, 6],
+				[61.1361, 904, 7.3031, 16, 6],
+				[61.1361, 935, 11.4213, 20, 6],
+				[0, 993, 100, 251, 12, true, 0, true],
+				[1.4205, 1007, 0.9943, 14, 0],
+				[0.2841, 1036, 99.4318, 204, 8, true, 0, true],
+				[1.9886, 1052, 6.2334, 29, 6],
+				[1.9886, 1106, 91.2831, 18, 6],
+				[1.9886, 1153, 8.8013, 24, 6],
+				[1.9886, 1203, 62.2292, 18, 6]
 			]
 		}
-	},
-	"_hash": "4d8efb9c935d0095e77bca72ad3c811c"
+	}
 }
diff --git a/web/src/lib/components/repo/BranchList.stories.svelte b/web/src/lib/components/repo/BranchList.stories.svelte
index cb9813920..8ecde1aef 100644
--- a/web/src/lib/components/repo/BranchList.stories.svelte
+++ b/web/src/lib/components/repo/BranchList.stories.svelte
@@ -24,14 +24,12 @@
 		args: {
 			ownerHandle: "alice",
 			repoName: "tangled",
-			currentRef: "main",
 			branches
 		}
 	});
 </script>
 
-<Story name="Current branch has no compare link" />
-<Story name="Feature branch selected" args={{ currentRef: "feature/storybook" }} />
+<Story name="Default and feature branches" />
 <Story
 	name="Branch without timestamp"
 	args={{ branches: [{ name: "main", hash: "0123456789abcdef", isDefault: true }] }}
diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 69e97539c..d81a0098a 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import GitCompare from "$icon/git-compare";
-	import Button from "#lib/components/ui/Button.svelte";
 	import Separator from "#lib/components/ui/Separator.svelte";
 	import Tag from "#lib/components/ui/Tag.svelte";
 	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
@@ -10,22 +8,23 @@
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
-		currentRef: string;
 		branches: BranchSummary[];
 	}
 
-	let { ownerHandle, repoName, currentRef, branches }: Props = $props();
+	let { ownerHandle, repoName, branches }: Props = $props();
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 </script>
 
 <div class="flex flex-col gap-2xs">
 	{#each branches as branch (branch.name)}
-		<div class="flex min-h-8 items-center justify-between overflow-hidden">
+		<div
+			class="group relative flex min-h-8 items-center overflow-hidden rounded-md px-1.5 py-2xs hover:bg-background-subtle"
+		>
 			<div class="flex min-w-0 flex-1 items-center gap-xs">
 				<a
 					href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
-					class="truncate text-foreground-default no-underline hover:underline"
+					class="truncate text-foreground-default no-underline after:absolute after:inset-0 hover:no-underline"
 				>
 					{branch.name}
 				</a>
@@ -33,29 +32,13 @@
 					<Separator variant="dot" class="shrink-0 text-foreground-subtle!" />
 					<TimeAgo
 						value={branch.when}
-						class="shrink-0 typography-paragraph-small whitespace-nowrap text-foreground-muted"
+						class="shrink-0 typography-paragraph-small whitespace-nowrap text-foreground-muted group-hover:text-foreground-default"
 					/>
 				{/if}
 				{#if branch.isDefault}
-					<Tag color="gray" class="shrink-0 typography-monospace-regular font-normal"
-						>Default</Tag
-					>
+					<Tag color="gray" class="shrink-0">Default</Tag>
 				{/if}
 			</div>
-			{#if branch.name !== currentRef}
-				<Button
-					variant="ghost"
-					size="small"
-					icon={GitCompare}
-					href={resolve(
-						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
-					)}
-					class="ml-xs shrink-0"
-					title="Compare branches or tags"
-				>
-					Compare
-				</Button>
-			{/if}
 		</div>
 	{/each}
 </div>
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 3bc2a90d7..f5ba11541 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import CommitBodyToggle from "#lib/components/repo/CommitBodyToggle.svelte";
 	import CommitSignOff from "#lib/components/repo/CommitSignOff.svelte";
+	import Button from "#lib/components/ui/Button.svelte";
+	import Tooltip from "#lib/components/ui/Tooltip.svelte";
 	import Tag from "#lib/components/ui/Tag.svelte";
 	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
 	import Pending from "#lib/components/ui/Pending.svelte";
 	import User from "#lib/components/ui/User.svelte";
+	import ProfilePopover from "#lib/components/profile/ProfilePopover.svelte";
 	import Separator from "#lib/components/ui/Separator.svelte";
 	import PipelineWorkflows from "#lib/components/repo/pipelines/PipelineWorkflows.svelte";
 	import type { CommitSummary } from "#lib/components/repo/types.ts";
 	import { hasBodyBeyondSignOffs, signOffsFrom } from "#lib/api/repo.ts";
 	import type { CommitStatuses } from "#lib/api/commitStatuses.ts";
+	import SquareText from "$icon/square-text";
 
 	interface Props {
 		ownerHandle: string;
@@ -30,56 +33,49 @@
 	);
 </script>
 
-<div class="flex flex-col gap-md">
+<div class="flex flex-col gap-2xs">
 	{#each commits as commit (commit.hash)}
-		<div>
+		<div class="group relative rounded-md px-1.5 py-xs hover:bg-background-subtle">
 			<span class="space-x-1.5">
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
-					class="no-underline hover:underline"
+					class="text-foreground-default no-underline after:absolute after:inset-0 hover:no-underline"
 				>
 					{commit.subject}
 				</a>
 				{#if signOffsByCommit[commit.hash].length > 0}
 					<CommitSignOff
 						signOffs={signOffsByCommit[commit.hash]}
-						class="align-middle"
+						class="relative align-middle"
 						size="small"
 					/>
 				{/if}
-				{#if hasBodyBeyondSignOffs(commit.body)}
-					<CommitBodyToggle
-						class="inline-flex align-middle"
-						expanded={expanded[commit.hash] === true}
-						onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
-					/>
-				{/if}
 			</span>
 
-			{#if hasBodyBeyondSignOffs(commit.body) && expanded[commit.hash]}
-				<p
-					class="mt-2xs pb-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted"
-				>
-					{commit.body}
-				</p>
-			{/if}
-
 			<div
-				class="mt-1.25 flex flex-wrap items-center gap-xs typography-paragraph-small text-foreground-muted"
+				class="mt-1.25 flex flex-wrap items-center gap-xs typography-paragraph-small text-foreground-muted group-hover:text-foreground-default"
 			>
-				<a
-					href={resolve(`${base}/commit/${commit.hash}` as "/")}
-					title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-					class="rounded-md bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline"
-				>
-					{commit.shortHash}
-				</a>
-				{#if commit.authorHandle}
-					<User did={commit.authorDid} handle={commit.authorHandle} size="small" link />
+				{#if commit.authorHandle && commit.authorDid}
+					<ProfilePopover identifier={commit.authorDid} class="relative">
+						<User
+							did={commit.authorDid}
+							handle={commit.authorHandle}
+							size="small"
+							link
+						/>
+					</ProfilePopover>
+				{:else if commit.authorHandle}
+					<User
+						did={commit.authorDid}
+						handle={commit.authorHandle}
+						size="small"
+						link
+						class="relative"
+					/>
 				{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
 					<a
 						href="mailto:{commit.authorEmail}"
-						class="inline-flex items-center text-inherit hover:underline"
+						class="relative inline-flex items-center text-inherit hover:underline"
 					>
 						<User handle={commit.authorName} size="small" link={false} />
 					</a>
@@ -105,17 +101,51 @@
 					<Pending>
 						{@const pipeline = (await pipelineStatuses)?.[commit.hash]}
 						{#if pipeline}
-							<PipelineWorkflows
-								{ownerHandle}
-								{repoName}
-								size="mini"
-								{pipeline}
-								variant="symbol"
-							/>
+							<span class="relative">
+								<PipelineWorkflows
+									{ownerHandle}
+									{repoName}
+									size="mini"
+									{pipeline}
+									variant="symbol"
+								/>
+							</span>
 						{/if}
 					</Pending>
 				{/if}
+				<div class="relative ml-auto flex items-center gap-xs">
+					{#if hasBodyBeyondSignOffs(commit.body)}
+						{@const toggleLabel = expanded[commit.hash]
+							? "Hide description"
+							: "Show description"}
+						<Tooltip content={toggleLabel}>
+							<Button
+								variant="ghost"
+								size="mini"
+								icon={SquareText}
+								aria-label={toggleLabel}
+								aria-expanded={expanded[commit.hash] === true}
+								onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
+							/>
+						</Tooltip>
+					{/if}
+					<a
+						href={resolve(`${base}/commit/${commit.hash}` as "/")}
+						title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
+						class="rounded-md bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline"
+					>
+						{commit.shortHash}
+					</a>
+				</div>
 			</div>
+
+			{#if hasBodyBeyondSignOffs(commit.body) && expanded[commit.hash]}
+				<p
+					class="relative mt-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted"
+				>
+					{commit.body}
+				</p>
+			{/if}
 		</div>
 	{/each}
 </div>
diff --git a/web/src/lib/components/repo/LanguageBar.stories.svelte b/web/src/lib/components/repo/LanguageBar.stories.svelte
deleted file mode 100644
index 81506424d..000000000
--- a/web/src/lib/components/repo/LanguageBar.stories.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script module lang="ts">
-	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
-	import { expect } from "storybook/test";
-	import LanguageBar from "#lib/components/repo/LanguageBar.svelte";
-
-	const languages = [
-		{ name: "TypeScript", percentage: 58, share: 58.2 },
-		{ name: "Svelte", percentage: 31, share: 30.7 },
-		{ name: "CSS", percentage: 10, share: 10.1 },
-		{ name: "Other", percentage: 0, share: 0.4 }
-	];
-	type PlayContext = Pick<
-		StoryContext<Record<string, unknown>>,
-		"canvas" | "canvasElement" | "userEvent"
-	>;
-
-	const expandBreakdown = async ({ canvas, canvasElement, userEvent }: PlayContext) => {
-		const details = canvasElement.querySelector("details");
-		const summary = details?.querySelector("summary");
-		if (!(summary instanceof HTMLElement)) throw new Error("language summary was not rendered");
-		await userEvent.click(summary);
-		await expect(details).toHaveAttribute("open");
-		await expect(canvas.getByText("TypeScript")).toBeVisible();
-	};
-
-	const { Story } = defineMeta({
-		title: "Repo/LanguageBar",
-		component: LanguageBar,
-		tags: ["autodocs"],
-		args: { languages }
-	});
-</script>
-
-<Story name="Collapsed language bar" />
-<Story name="Expanded percentage breakdown" play={expandBreakdown} />
-<Story
-	name="Sub-percent slice"
-	args={{ languages: [{ name: "Other", percentage: 0, share: 0.4 }] }}
-/>
-<Story name="No languages" args={{ languages: [] }} />
diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte
deleted file mode 100644
index 92a4a9f75..000000000
--- a/web/src/lib/components/repo/LanguageBar.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-	import ColorBall from "#lib/components/ui/ColorBall.svelte";
-	import {
-		LANGUAGE_COLORS,
-		LANGUAGE_COLOR_FALLBACK
-	} from "#lib/components/repo/languageColors.ts";
-	import type { LanguageSlice } from "#lib/components/repo/types.ts";
-
-	interface Props {
-		languages: LanguageSlice[];
-	}
-
-	let { languages }: Props = $props();
-
-	const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK;
-	const percent = (language: LanguageSlice) =>
-		language.share < 1 ? "<1" : String(language.percentage);
-	const label = (language: LanguageSlice) => `${language.name} ${percent(language)}%`;
-</script>
-
-<details
-	class="group -mx-md -mt-md mb-2xs before:pointer-events-none before:absolute before:z-10 before:ml-2xs before:h-24 before:w-full before:translate-y-md before:bg-ease-in-out-to-b before:from-transparent before:to-transparent before:select-none not-open:has-[summary:hover]:before:from-background-default"
->
-	<summary
-		class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px rounded-t group-open:scale-y-100 hover:scale-y-100"
-	>
-		{#each languages as language (language.name)}
-			{#if language.share > 0.5}
-				<div
-					title={label(language)}
-					style={`background-color: ${colorFor(language.name)}; flex: ${language.share} 0 0px`}
-				></div>
-			{/if}
-		{/each}
-	</summary>
-	<div
-		class="mb-md flex flex-wrap items-center justify-center gap-md border-b border-border-default px-md py-xs"
-	>
-		{#each languages as language (language.name)}
-			<div class="flex items-center gap-xs typography-paragraph-small">
-				<ColorBall color={colorFor(language.name)} class="size-2.5" />
-				<span>
-					{language.name}
-					<span class="text-foreground-subtle">{percent(language)}%</span>
-				</span>
-			</div>
-		{/each}
-	</div>
-</details>
diff --git a/web/src/lib/components/repo/LanguageList.stories.svelte b/web/src/lib/components/repo/LanguageList.stories.svelte
new file mode 100644
index 000000000..4e1130f81
--- /dev/null
+++ b/web/src/lib/components/repo/LanguageList.stories.svelte
@@ -0,0 +1,45 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import LanguageList from "#lib/components/repo/LanguageList.svelte";
+
+	const languages = [
+		{ name: "TypeScript", size: 238387, percentage: 58, share: 58.2 },
+		{ name: "Svelte", size: 125747, percentage: 31, share: 30.7 },
+		{ name: "CSS", size: 41370, percentage: 10, share: 10.1 },
+		{ name: "Other", size: 1638, percentage: 0, share: 0.4 }
+	];
+
+	const manyLanguages = [
+		{ name: "TypeScript", size: 168755, percentage: 41, share: 41.2 },
+		{ name: "Svelte", size: 91750, percentage: 22, share: 22.4 },
+		{ name: "Go", size: 57754, percentage: 14, share: 14.1 },
+		{ name: "CSS", size: 38093, percentage: 9, share: 9.3 },
+		{ name: "Nix", size: 25395, percentage: 6, share: 6.2 },
+		{ name: "Shell", size: 16794, percentage: 4, share: 4.1 },
+		{ name: "HTML", size: 9421, percentage: 2, share: 2.3 },
+		{ name: "Other", size: 1638, percentage: 0, share: 0.4 }
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/LanguageList",
+		component: LanguageList,
+		tags: ["autodocs"],
+		args: { languages }
+	});
+</script>
+
+<Story name="Few languages" />
+<Story
+	name="Past the limit"
+	args={{ languages: manyLanguages }}
+	play={async ({ canvas }) => {
+		await expect(canvas.getAllByRole("listitem")).toHaveLength(6);
+		await expect(canvas.queryByText("HTML")).toBeNull();
+		await expect(canvas.getByText("3 more languages")).toBeVisible();
+	}}
+/>
+<Story
+	name="Sub-percent slice"
+	args={{ languages: [{ name: "Other", size: 1638, percentage: 0, share: 0.4 }] }}
+/>
diff --git a/web/src/lib/components/repo/LanguageList.svelte b/web/src/lib/components/repo/LanguageList.svelte
new file mode 100644
index 000000000..1e7911677
--- /dev/null
+++ b/web/src/lib/components/repo/LanguageList.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import ColorBall from "#lib/components/ui/ColorBall.svelte";
+	import {
+		LANGUAGE_COLORS,
+		LANGUAGE_COLOR_FALLBACK
+	} from "#lib/components/repo/languageColors.ts";
+	import type { LanguageSlice } from "#lib/components/repo/types.ts";
+
+	interface Props {
+		languages: LanguageSlice[];
+		limit?: number;
+	}
+
+	let { languages, limit = 5 }: Props = $props();
+
+	const visible = $derived(languages.slice(0, limit));
+	const hidden = $derived(languages.slice(limit));
+	const hiddenShare = $derived(hidden.reduce((sum, language) => sum + language.share, 0));
+	const hiddenPercentage = $derived(
+		hidden.reduce((sum, language) => sum + language.percentage, 0)
+	);
+	const hiddenLabel = $derived(
+		hidden.length === 1 ? "1 more language" : `${hidden.length} more languages`
+	);
+	const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK;
+	const percentLabel = (share: number, percentage: number) =>
+		share < 1 ? "<1" : String(percentage);
+</script>
+
+{#snippet row(name: string, color: string, share: number, percentage: number, muted = false)}
+	<li class="flex flex-col gap-2xs">
+		<div class="flex items-center gap-xs typography-paragraph-small">
+			<ColorBall {color} class="size-2.5" />
+			<span
+				class={[
+					"min-w-0 flex-1 truncate",
+					muted ? "text-foreground-muted" : "text-foreground-default"
+				]}>{name}</span
+			>
+			<span class="text-foreground-subtle tabular-nums"
+				>{percentLabel(share, percentage)}%</span
+			>
+		</div>
+		<div class="h-1 overflow-hidden rounded-full bg-background-inset" aria-hidden="true">
+			<div
+				class="h-full rounded-full"
+				style:background-color={color}
+				style:width={`max(${share}%, 2px)`}
+			></div>
+		</div>
+	</li>
+{/snippet}
+
+<ul class="flex flex-col gap-sm">
+	{#each visible as language (language.name)}
+		{@render row(language.name, colorFor(language.name), language.share, language.percentage)}
+	{/each}
+	{#if hidden.length > 0}
+		{@render row(hiddenLabel, LANGUAGE_COLOR_FALLBACK, hiddenShare, hiddenPercentage, true)}
+	{/if}
+</ul>
diff --git a/web/src/lib/components/repo/LanguageStats.stories.svelte b/web/src/lib/components/repo/LanguageStats.stories.svelte
new file mode 100644
index 000000000..7daeb2040
--- /dev/null
+++ b/web/src/lib/components/repo/LanguageStats.stories.svelte
@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import LanguageStats from "#lib/components/repo/LanguageStats.svelte";
+
+	const languages = [
+		{ name: "TypeScript", size: 412_000, percentage: 41, share: 41.2 },
+		{ name: "Svelte", size: 224_000, percentage: 22, share: 22.4 },
+		{ name: "Go", size: 141_000, percentage: 14, share: 14.1 },
+		{ name: "CSS", size: 93_000, percentage: 9, share: 9.3 },
+		{ name: "Nix", size: 62_000, percentage: 6, share: 6.2 },
+		{ name: "Shell", size: 41_000, percentage: 4, share: 4.1 },
+		{ name: "HTML", size: 23_000, percentage: 3, share: 2.3 },
+		{ name: "Other", size: 4_000, percentage: 1, share: 0.4 }
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/LanguageStats",
+		component: LanguageStats,
+		tags: ["autodocs"],
+		args: { languages }
+	});
+</script>
+
+<Story
+	name="Many languages"
+	play={async ({ canvas }) => {
+		await expect(canvas.getByText("8")).toBeVisible();
+		await expect(canvas.getByText("1.0 MB")).toBeVisible();
+		await expect(canvas.getAllByRole("row")).toHaveLength(9);
+	}}
+/>
+<Story name="No languages" args={{ languages: [] }} />
diff --git a/web/src/lib/components/repo/LanguageStats.svelte b/web/src/lib/components/repo/LanguageStats.svelte
new file mode 100644
index 000000000..969b8f010
--- /dev/null
+++ b/web/src/lib/components/repo/LanguageStats.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { formatBytes } from "#lib/api/blob.ts";
+	import ColorBall from "#lib/components/ui/ColorBall.svelte";
+	import Card from "#lib/components/ui/Card.svelte";
+	import Tooltip from "#lib/components/ui/Tooltip.svelte";
+	import {
+		LANGUAGE_COLORS,
+		LANGUAGE_COLOR_FALLBACK
+	} from "#lib/components/repo/languageColors.ts";
+	import type { LanguageSlice } from "#lib/components/repo/types.ts";
+
+	interface Props {
+		languages: LanguageSlice[];
+	}
+
+	let { languages }: Props = $props();
+
+	const totalSize = $derived(languages.reduce((sum, language) => sum + language.size, 0));
+	const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK;
+	const percent = (language: LanguageSlice) =>
+		language.share < 1 ? "<1" : String(language.percentage);
+</script>
+
+<Card padding="none" class="flex flex-col gap-lg p-md">
+	{#if languages.length === 0}
+		<div class="flex flex-col gap-2xs">
+			<p class="font-medium text-foreground-default">No languages detected</p>
+			<p class="typography-paragraph-small text-foreground-muted">
+				Language stats appear once the default branch contains source files.
+			</p>
+		</div>
+	{:else}
+		<dl class="flex flex-wrap gap-x-xl gap-y-sm">
+			<div class="flex flex-col gap-3xs">
+				<dt class="typography-paragraph-small text-foreground-muted">Languages</dt>
+				<dd class="typography-heading-4 tabular-nums">{languages.length}</dd>
+			</div>
+			<div class="flex flex-col gap-3xs">
+				<dt class="typography-paragraph-small text-foreground-muted">Total size</dt>
+				<dd class="typography-heading-4 tabular-nums">{formatBytes(totalSize)}</dd>
+			</div>
+			<div class="flex flex-col gap-3xs">
+				<dt class="typography-paragraph-small text-foreground-muted">Primary language</dt>
+				<dd class="typography-heading-4">{languages[0]?.name}</dd>
+			</div>
+		</dl>
+
+		<div class="flex h-2 gap-px overflow-hidden rounded-full">
+			{#each languages as language (language.name)}
+				<div style:flex={`${language.share} 0 2px`}>
+					<Tooltip
+						class="block h-full"
+						content={`${language.name}: ${percent(language)}%, ${formatBytes(language.size)}`}
+						delay={0}
+						group
+					>
+						<span class="block h-full" style:background-color={colorFor(language.name)}
+						></span>
+					</Tooltip>
+				</div>
+			{/each}
+		</div>
+
+		<table class="w-full typography-paragraph-small">
+			<thead class="text-foreground-muted">
+				<tr>
+					<th class="pb-xs text-left font-normal">Language</th>
+					<th class="pb-xs text-right font-normal">Size</th>
+					<th class="pb-xs text-right font-normal">Share</th>
+					<td class="hidden w-1/3 md:table-cell" aria-hidden="true"></td>
+				</tr>
+			</thead>
+			<tbody class="divide-y divide-border-default">
+				{#each languages as language (language.name)}
+					<tr class="group">
+						<td class="py-xs group-last:pb-0">
+							<span class="flex items-center gap-xs">
+								<ColorBall color={colorFor(language.name)} class="size-2.5" />
+								{language.name}
+							</span>
+						</td>
+						<td
+							class="py-xs text-right text-foreground-muted tabular-nums group-last:pb-0"
+						>
+							{formatBytes(language.size)}
+						</td>
+						<td class="py-xs pl-md text-right tabular-nums group-last:pb-0"
+							>{percent(language)}%</td
+						>
+						<td
+							class="hidden py-xs pl-md group-last:pb-0 md:table-cell"
+							aria-hidden="true"
+						>
+							<div class="h-1 overflow-hidden rounded-full bg-background-inset">
+								<div
+									class="h-full rounded-full"
+									style:background-color={colorFor(language.name)}
+									style:width={`max(${language.share}%, 2px)`}
+								></div>
+							</div>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</Card>
diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index 63c79e13b..b1d73dec5 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -6,7 +6,7 @@
 
 	interface Props {
 		title: string;
-		href: string;
+		href?: string;
 		icon: Component<SvelteHTMLElements["svg"]>;
 		count?: number;
 		approximate?: boolean;
@@ -34,10 +34,7 @@
 		{formattedCount}
 	</a>
 {:else}
-	<a
-		href={resolve(href as "/")}
-		class="flex items-center gap-xs pb-xs font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
-	>
+	<span class="flex items-center gap-xs font-medium text-foreground-default">
 		<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
 		{title}
 		{#if count !== undefined}
@@ -45,5 +42,5 @@
 				{formattedCount}
 			</span>
 		{/if}
-	</a>
+	</span>
 {/if}
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 614aaab2f..d47c12caa 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import FileText from "$icon/file-text";
-	import Card from "#lib/components/ui/Card.svelte";
+	import PanelHeader from "#lib/components/repo/PanelHeader.svelte";
+	import LayerCard from "#lib/components/ui/LayerCard.svelte";
+	import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte";
+	import LayerCardSecondary from "#lib/components/ui/LayerCardSecondary.svelte";
 	import { mermaidDiagrams } from "#lib/components/ui/mermaidDiagrams.ts";
 
 	interface Props {
@@ -12,26 +15,25 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<Card padding="none" class="mt-md w-full overflow-hidden defer-render-256">
-	<div class="border-b border-border-default px-md py-xs">
-		<span class="flex items-center gap-xs">
-			<FileText class="size-3.5 text-foreground-subtle" aria-hidden="true" />
-			<span class="typography-monospace-small text-foreground-muted">{filename}</span>
-		</span>
-	</div>
-	{#if html}
-		<div
-			data-testid="renderedMarkdownBody"
-			class="markup overflow-x-auto px-xl py-md"
-			use:mermaidDiagrams={html}
-		>
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-			{@html html}
-		</div>
-	{:else}
-		<div class="overflow-x-auto px-xl py-md">
-			<pre
-				class="typography-monospace-small whitespace-pre text-foreground-default">{contents}</pre>
-		</div>
-	{/if}
-</Card>
+<LayerCard class="mt-md w-full defer-render-256">
+	<LayerCardSecondary class="min-h-[calc(2.5rem-2*var(--layer-gap))] py-0">
+		<PanelHeader title={filename} icon={FileText} />
+	</LayerCardSecondary>
+	<LayerCardPrimary padding="none">
+		{#if html}
+			<div
+				data-testid="renderedMarkdownBody"
+				class="markup overflow-x-auto px-xl py-md"
+				use:mermaidDiagrams={html}
+			>
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+				{@html html}
+			</div>
+		{:else}
+			<div class="overflow-x-auto px-xl py-md">
+				<pre
+					class="typography-monospace-small whitespace-pre text-foreground-default">{contents}</pre>
+			</div>
+		{/if}
+	</LayerCardPrimary>
+</LayerCard>
diff --git a/web/src/lib/components/repo/RepoIndexView.stories.svelte b/web/src/lib/components/repo/RepoIndexView.stories.svelte
index 7fba5899c..18767185a 100644
--- a/web/src/lib/components/repo/RepoIndexView.stories.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.stories.svelte
@@ -86,8 +86,8 @@
 		languages:
 			streamed.languages ??
 			Promise.resolve([
-				{ name: "TypeScript", percentage: 70, share: 70 },
-				{ name: "Svelte", percentage: 30, share: 30 }
+				{ name: "TypeScript", size: 286720, percentage: 70, share: 70 },
+				{ name: "Svelte", size: 122880, percentage: 30, share: 30 }
 			]),
 		readmeBody:
 			streamed.readmeBody ?? Promise.resolve({ html: "<h1>tangled</h1>", contents: "" }),
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 2027d62b8..90c6da5cc 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Code from "$icon/code";
+	import FolderTree from "$icon/folder-tree";
 	import GitBranch from "$icon/git-branch";
 	import Logs from "$icon/logs";
 	import Tags from "$icon/tags";
@@ -7,8 +9,8 @@
 	import CommitList from "#lib/components/repo/CommitList.svelte";
 	import EmptyRepo from "#lib/components/repo/EmptyRepo.svelte";
 	import FileTree from "#lib/components/repo/FileTree.svelte";
-	import LanguageBar from "#lib/components/repo/LanguageBar.svelte";
-	import PanelHeader from "#lib/components/repo/PanelHeader.svelte";
+	import LanguageList from "#lib/components/repo/LanguageList.svelte";
+	import RepoSection from "#lib/components/repo/RepoSection.svelte";
 	import Readme from "#lib/components/repo/Readme.svelte";
 	import RepoIndexPanelSkeleton from "#lib/components/repo/RepoIndexPanelSkeleton.svelte";
 	import RepoReadmeSkeleton from "#lib/components/repo/RepoReadmeSkeleton.svelte";
@@ -45,84 +47,102 @@
 
 	{@const content = await data.content}
 	{@const availability = content && withImportAvailability(content.availability, importStatus)}
-	<Card class="relative mx-auto w-full">
-		{#if !hasGit(repo) || !content}
-			<p class="flex h-96 items-center justify-center text-center text-foreground-subtle">
-				This repository doesn't support git. You can still create issues.
-			</p>
-		{:else if availability === "not-synced"}
-			<p class="flex h-96 items-center justify-center text-center text-foreground-subtle">
-				This repository hasn't been mirrored yet. Its content will appear here once it
-				syncs.
-			</p>
-		{:else if availability === "error"}
-			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
-				<span class="flex items-center gap-xs">
-					<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
-					Something went wrong loading this repository. Try again in a moment.
-				</span>
-			</div>
-		{:else if availability === "importing"}
-			<div class="flex h-96 items-center justify-center text-center">
-				<span class="flex items-center gap-2">
-					<Spinner class="size-5 shrink-0" />
-					This repository is still importing from {repo.importSource ?? "its source"}. Its
-					content will appear here as it lands.
-				</span>
-			</div>
-		{:else if availability === "import-failed"}
-			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
-				<div>
-					<span class="flex items-center justify-center gap-2">
+	{#if !hasGit(repo) || !content || availability !== "ok"}
+		<Card class="relative mx-auto w-full">
+			{#if !hasGit(repo) || !content}
+				<p class="flex h-96 items-center justify-center text-center text-foreground-subtle">
+					This repository doesn't support git. You can still create issues.
+				</p>
+			{:else if availability === "not-synced"}
+				<p class="flex h-96 items-center justify-center text-center text-foreground-subtle">
+					This repository hasn't been mirrored yet. Its content will appear here once it
+					syncs.
+				</p>
+			{:else if availability === "error"}
+				<div
+					class="flex h-96 items-center justify-center text-center text-foreground-danger"
+				>
+					<span class="flex items-center gap-xs">
 						<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
-						The import from {repo.importSource ?? "its source"} failed.
+						Something went wrong loading this repository. Try again in a moment.
 					</span>
-					{#if importStatus?.reason}
-						<p class="mt-2 text-foreground-muted">
-							{importStatus.reason}
-						</p>
-					{/if}
 				</div>
+			{:else if availability === "importing"}
+				<div class="flex h-96 items-center justify-center text-center">
+					<span class="flex items-center gap-2">
+						<Spinner class="size-5 shrink-0" />
+						This repository is still importing from {repo.importSource ?? "its source"}.
+						Its content will appear here as it lands.
+					</span>
+				</div>
+			{:else if availability === "import-failed"}
+				<div
+					class="flex h-96 items-center justify-center text-center text-foreground-danger"
+				>
+					<div>
+						<span class="flex items-center justify-center gap-2">
+							<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
+							The import from {repo.importSource ?? "its source"} failed.
+						</span>
+						{#if importStatus?.reason}
+							<p class="mt-2 text-foreground-muted">
+								{importStatus.reason}
+							</p>
+						{/if}
+					</div>
+				</div>
+			{:else if availability === "empty"}
+				<EmptyRepo {repo} />
+			{/if}
+		</Card>
+	{:else}
+		<Card padding="none" class="mx-auto w-full">
+			<div class="p-sm">
+				<RepoToolbar
+					{repo}
+					ref={content.ref}
+					refs={content.refs}
+					totalCommits={content.totalCommits}
+					totalBranches={content.totalBranches}
+					totalTags={content.totalTags}
+					{bobbinUrl}
+				/>
 			</div>
-		{:else if availability === "empty"}
-			<EmptyRepo {repo} />
-		{:else}
-			<!-- fills in silently, it's a thin strip -->
-			<Pending>
-				{@const languages = await data.languages}
-				{#if languages.length > 0}
-					<LanguageBar {languages} />
-				{/if}
-			</Pending>
-
-			<RepoToolbar
-				{repo}
-				ref={content.ref}
-				refs={content.refs}
-				totalCommits={content.totalCommits}
-				totalBranches={content.totalBranches}
-				totalTags={content.totalTags}
-				{bobbinUrl}
-			/>
-			<div class="grid grid-cols-1 gap-xs md:grid-cols-2">
-				<div class="min-w-0 pr-md md:border-r md:border-border-default">
+			<div
+				class="grid grid-cols-1 border-t border-border-default md:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]"
+			>
+				<RepoSection
+					class="pb-2 md:border-r md:border-border-default"
+					title="Files"
+					icon={FolderTree}
+					bodyClass="-mx-1.5"
+				>
 					<FileTree
 						ownerHandle={repo.ownerHandle}
 						repoName={repo.name}
 						ref={content.ref}
 						entries={content.files}
 					/>
-				</div>
+				</RepoSection>
+
+				<div class="hidden flex-col divide-y divide-border-default md:flex">
+					<Pending>
+						{@const languages = await data.languages}
+						{#if languages.length > 0}
+							<RepoSection title="Languages" icon={Code} href={`${base}/languages`}>
+								<LanguageList {languages} />
+							</RepoSection>
+						{/if}
+					</Pending>
 
-				<div class="hidden md:block">
 					{#if content.commits.length > 0}
-						<div class="border-border-default pr-xs pb-md md:px-xs">
-							<PanelHeader
-								title="Commits"
-								icon={Logs}
-								href={`${base}/commits/${encodeURIComponent(content.ref)}`}
-								count={content.totalCommits}
-							/>
+						<RepoSection
+							title="Commits"
+							icon={Logs}
+							href={`${base}/commits/${encodeURIComponent(content.ref)}`}
+							bodyClass="-mx-1.5"
+							count={content.totalCommits}
+						>
 							<CommitList
 								ownerHandle={repo.ownerHandle}
 								repoName={repo.name}
@@ -130,45 +150,44 @@
 								tagsByCommit={content.tagsByCommit}
 								{pipelineStatuses}
 							/>
-						</div>
+						</RepoSection>
 					{/if}
 
 					{#if content.branches.length > 0}
-						<div class="border-t border-border-default py-md pr-xs md:px-xs">
-							<PanelHeader
-								title="Branches"
-								icon={GitBranch}
-								href={`${base}/branches`}
-								count={content.totalBranches}
-							/>
+						<RepoSection
+							title="Branches"
+							icon={GitBranch}
+							href={`${base}/branches`}
+							bodyClass="-mx-1.5"
+							count={content.totalBranches}
+						>
 							<BranchList
 								ownerHandle={repo.ownerHandle}
 								repoName={repo.name}
-								currentRef={content.ref}
 								branches={content.branches}
 							/>
-						</div>
+						</RepoSection>
 					{/if}
 
 					{#if content.tags.length > 0}
-						<div class="border-t border-border-default py-md pr-xs md:px-xs">
-							<PanelHeader
-								title="Tags"
-								icon={Tags}
-								href={`${base}/tags`}
-								count={content.totalTags}
-							/>
+						<RepoSection
+							title="Tags"
+							icon={Tags}
+							href={`${base}/tags`}
+							bodyClass="-mx-1.5"
+							count={content.totalTags}
+						>
 							<TagList
 								ownerHandle={repo.ownerHandle}
 								repoName={repo.name}
 								tags={content.tags}
 							/>
-						</div>
+						</RepoSection>
 					{/if}
 				</div>
 			</div>
-		{/if}
-	</Card>
+		</Card>
+	{/if}
 </Pending>
 
 <Pending>
diff --git a/web/src/lib/components/repo/RepoSection.svelte b/web/src/lib/components/repo/RepoSection.svelte
new file mode 100644
index 000000000..b2423856c
--- /dev/null
+++ b/web/src/lib/components/repo/RepoSection.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { resolve } from "$app/paths";
+	import ArrowUpRight from "$icon/arrow-up-right";
+	import PanelHeader from "#lib/components/repo/PanelHeader.svelte";
+
+	interface Props {
+		title: string;
+		href?: string;
+		icon: Component<SvelteHTMLElements["svg"]>;
+		count?: number;
+		class?: string;
+		bodyClass?: string;
+		children: Snippet;
+	}
+
+	let { title, href, icon, count, class: className, bodyClass, children }: Props = $props();
+</script>
+
+<section class={["flex min-w-0 flex-col gap-xs p-md", className]}>
+	<div class="flex items-center gap-xs">
+		{#if href}
+			<a
+				href={resolve(href as "/")}
+				class="group -mx-1.5 -my-2xs flex items-center rounded-md px-1.5 py-2xs no-underline hover:bg-background-subtle hover:no-underline focus-visible:outline-2 focus-visible:outline-border-default"
+			>
+				<PanelHeader {title} {icon} {count} />
+				<span
+					class="relative w-0 self-stretch transition-[width] duration-200 ease-out-strong group-hover:w-4.5 group-focus-visible:w-4.5 motion-reduce:transition-none"
+				>
+					<ArrowUpRight
+						class="absolute top-1/2 left-2xs size-3.5 origin-bottom-left -translate-y-1/2 scale-50 text-foreground-muted opacity-0 transition-[scale,opacity] duration-200 ease-out-strong group-hover:scale-100 group-hover:opacity-100 group-focus-visible:scale-100 group-focus-visible:opacity-100 motion-reduce:scale-100 motion-reduce:transition-opacity"
+						aria-hidden="true"
+					/>
+				</span>
+			</a>
+		{:else}
+			<PanelHeader {title} {icon} {count} />
+		{/if}
+	</div>
+	<div class={bodyClass}>
+		{@render children()}
+	</div>
+</section>
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index 6b4f92ed2..2c6d6da64 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -27,7 +27,7 @@
 	const encodedRef = $derived(encodeURIComponent(ref));
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-sm pb-lg">
+<div class="flex flex-wrap items-center justify-between gap-sm">
 	<RefSelector
 		ownerHandle={repo.ownerHandle}
 		repoName={repo.name}
diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte
index 691efaec0..15cd14405 100644
--- a/web/src/lib/components/repo/TagList.svelte
+++ b/web/src/lib/components/repo/TagList.svelte
@@ -15,13 +15,15 @@
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 </script>
 
-<div class="flex flex-col gap-md py-2xs">
+<div class="flex flex-col gap-2xs">
 	{#each tags as tag, index (tag.name)}
-		<div class="flex flex-col gap-3xs">
+		<div
+			class="group relative flex flex-col gap-3xs rounded-md px-1.5 py-xs hover:bg-background-subtle"
+		>
 			<div class="flex items-center">
 				<a
 					href={resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/")}
-					class="truncate no-underline hover:underline"
+					class="truncate text-foreground-default no-underline after:absolute after:inset-0 hover:no-underline"
 				>
 					{tag.name}
 				</a>
@@ -31,11 +33,11 @@
 					{#if tag.when}
 						<TimeAgo
 							value={tag.when}
-							class="typography-paragraph-regular text-foreground-muted"
+							class="typography-paragraph-regular text-foreground-muted group-hover:text-foreground-default"
 						/>
 					{/if}
 					{#if index === 0}
-						<Tag color="gray" class="typography-monospace-regular">Latest</Tag>
+						<Tag color="gray">Latest</Tag>
 					{/if}
 				</div>
 			{/if}
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 39968a882..655c71f03 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -47,6 +47,7 @@ export interface RepoCounts {
 
 export interface LanguageSlice {
 	name: string;
+	size: number;
 	percentage: number;
 	share: number;
 }
diff --git a/web/src/routes/[handle]/[repo]/languages/+page.svelte b/web/src/routes/[handle]/[repo]/languages/+page.svelte
new file mode 100644
index 000000000..72bf5d7e0
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/languages/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import LanguageStats from "#lib/components/repo/LanguageStats.svelte";
+	import Pending from "#lib/components/ui/Pending.svelte";
+
+	let { data } = $props();
+</script>
+
+<Pending>
+	<LanguageStats languages={await data.languages} />
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/languages/+page.ts b/web/src/routes/[handle]/[repo]/languages/+page.ts
new file mode 100644
index 000000000..ab551ec38
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/languages/+page.ts
@@ -0,0 +1,15 @@
+import { gitTarget, languages, requireGit } from "#lib/api/gitclient.ts";
+import { settle, stream } from "#lib/api/load.ts";
+import { toLanguageSlices } from "#lib/api/repoIndex.ts";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const slices = Promise.resolve(parent.repo).then(async (repo) => {
+		const target = requireGit(repo);
+		const git = gitTarget(parent.publicConfig, target, event.fetch);
+		const result = await languages(git, target.git.defaultBranch);
+		return toLanguageSlices(result.languages ?? []);
+	});
+	return settle({ languages: stream(slices) });
+};
-- 
2.54.0