diff --git a/web/src/lib/components/repo/DiffFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte
index 566657dac..b34e19a6e 100644
--- a/web/src/lib/components/repo/DiffFileTree.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.svelte
@@ -3,20 +3,20 @@
 
 	const treeRow = tv({
 		slots: {
-			root: "pt-2xs pr-md pb-2xl pl-1.5",
-			row: "group my-3xs inline-flex w-full items-center gap-xs rounded-md px-1.5 py-0.75 text-foreground-default hover:bg-background-subtle",
+			root: "diff-file-tree pt-2xs pr-md pb-2xl pl-1.5",
+			row: "tree-entry group my-3xs inline-flex w-full items-center gap-xs rounded-md px-1.5 py-0.75 text-foreground-default hover:bg-background-subtle",
 			icon: "size-3.5 shrink-0 text-foreground-placeholder group-hover:text-foreground-default",
-			name: "truncate select-none",
-			children: "ml-[12.5px] border-l border-border-subtle pl-3xs"
+			name: "tree-name truncate select-none",
+			children: "tree-children ml-[12.5px] border-l border-border-subtle pl-3xs"
 		},
 		variants: {
 			kind: {
 				dir: {
-					row: "cursor-pointer text-left",
-					icon: "transition-[rotate] duration-(--fold-duration) ease-(--fold-easing) group-aria-expanded:rotate-90",
+					row: "tree-directory cursor-pointer text-left",
+					icon: "tree-toggle transition-[rotate] duration-(--fold-duration) ease-(--fold-easing) group-aria-expanded:rotate-90",
 					name: "text-foreground-muted group-hover:text-inherit"
 				},
-				file: { row: "flex items-center gap-xs" }
+				file: { row: "tree-file flex items-center gap-xs", icon: "tree-icon" }
 			}
 		}
 	});
@@ -95,6 +95,7 @@
 			<button
 				type="button"
 				class={dir.row()}
+				data-kind="directory"
 				aria-expanded={open}
 				aria-controls={open ? id : undefined}
 				onclick={() => (closed[node.path] = open)}
@@ -117,6 +118,7 @@
 			<a
 				href={fileAnchor(node.path)}
 				class={file.row()}
+				data-kind="file"
 				onclick={onSelect
 					? (event) => {
 							event.preventDefault();
diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index 220098494..1203a2439 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -62,11 +62,12 @@
 	};
 
 	// lucide puts fill="none" on the path itself, which beats anything inherited
-	// from the svg, so the class has to reach the path
-	const iconClassFor = (entry: TreeEntrySummary) =>
+	// from the svg, so the class has to reach the path, and only the last svg so
+	// icon extensions that copy its classes onto an icon put before it keep their fills
+	const iconWrapClassFor = (entry: TreeEntrySummary) =>
 		entry.kind === "directory"
-			? "size-3.5 shrink-0 [&_path]:fill-current"
-			: "size-3.5 shrink-0";
+			? [row.icon(), "[&>svg:last-child_path]:fill-current"]
+			: row.icon();
 
 	const iconFor = (entry: TreeEntrySummary) => {
 		switch (entry.kind) {
@@ -83,16 +84,16 @@
 </script>
 
 <!-- the divider belongs to whatever column the tree is sat in -->
-<div class="min-w-0">
+<div class="file-tree min-w-0">
 	{#each entries as entry (entry.name)}
 		{@const Glyph = iconFor(entry)}
 		{@const href = resolve(linkFor(entry) as "/")}
-		<div class={row.root()}>
-			<a {href} class={row.link()}>
-				<span class={row.icon()}>
-					<Glyph class={iconClassFor(entry)} aria-hidden="true" />
+		<div class={["tree-entry", `tree-${entry.kind}`, row.root()]} data-kind={entry.kind}>
+			<a {href} class={["tree-link", row.link()]}>
+				<span class={iconWrapClassFor(entry)}>
+					<Glyph class="tree-icon size-3.5 shrink-0" aria-hidden="true" />
 				</span>
-				<span class="truncate">{entry.name}</span>
+				<span class="tree-name truncate">{entry.name}</span>
 			</a>
 
 			{#if withMessage}