diff --git a/web/src/lib/components/diff-filtering/DiffFilterDialog.svelte b/web/src/lib/components/diff-filtering/DiffFilterDialog.svelte
new file mode 100644
index 0000000..a15d82c
--- /dev/null
+++ b/web/src/lib/components/diff-filtering/DiffFilterDialog.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { getFileStatusProps, MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
+    import { Button, Dialog, ToggleGroup } from "bits-ui";
+    import { tryCompileRegex } from "$lib/util";
+    import { FILE_STATUSES } from "$lib/github.svelte";
+    import { slide } from "svelte/transition";
+    import { type FilePathFilterMode } from "$lib/components/diff-filtering/index.svelte";
+
+    const viewer = MultiFileDiffViewerState.get();
+    const instance = viewer.filter;
+
+    let newFilePathFilterElement: HTMLInputElement | undefined = $state();
+    let newFilePathFilterInput = $state("");
+    let newFilePathFilterInputResult = $derived(tryCompileRegex(newFilePathFilterInput));
+    $effect(() => {
+        if (newFilePathFilterElement && newFilePathFilterInputResult.success) {
+            newFilePathFilterElement.setCustomValidity("");
+        } else if (newFilePathFilterElement && !newFilePathFilterInputResult.success) {
+            newFilePathFilterElement.setCustomValidity(newFilePathFilterInputResult.error);
+        }
+    });
+
+    let newFilePathFilterMode: FilePathFilterMode = $state("exclude");
+</script>
+
+<Dialog.Root bind:open={viewer.diffFilterDialogOpen}>
+    <Dialog.Portal>
+        <Dialog.Overlay
+            class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <Dialog.Content
+            class="fixed top-1/2 left-1/2 z-50 flex max-h-svh w-2xl max-w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded-sm border bg-neutral shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[95%]"
+        >
+            <header class="flex shrink-0 flex-row items-center justify-between rounded-t-sm border-b bg-neutral-2 p-4">
+                <Dialog.Title class="text-xl font-semibold">Edit Filters</Dialog.Title>
+                <Dialog.Close title="Close dialog" class="flex size-6 items-center justify-center rounded-sm btn-ghost text-em-med">
+                    <span class="iconify octicon--x-16" aria-hidden="true"></span>
+                </Dialog.Close>
+            </header>
+
+            <section class="m-4">
+                <header class="px-2 py-1 text-lg font-semibold">File Status</header>
+                <ToggleGroup.Root class="flex flex-wrap gap-0.5" type="multiple" bind:value={instance.selectedFileStatuses}>
+                    {#each FILE_STATUSES as status (status)}
+                        {@const statusProps = getFileStatusProps(status)}
+                        <ToggleGroup.Item
+                            aria-label="Toggle {statusProps.title} Files"
+                            value={status}
+                            class="flex cursor-pointer items-center gap-1 rounded-sm btn-ghost px-2 py-1 data-[state=off]:text-em-med data-[state=off]:hover:text-em-high data-[state=on]:btn-ghost-visible"
+                        >
+                            <span class="aria-hidden size-4 {statusProps.iconClasses}"></span>
+                            {statusProps.title}
+                        </ToggleGroup.Item>
+                    {/each}
+                </ToggleGroup.Root>
+                {#if instance.selectedFileStatuses.length === 0}
+                    <p transition:slide class="px-2 text-em-med italic">No file statuses selected; all files will be excluded.</p>
+                {/if}
+            </section>
+
+            <section class="m-4 mt-0">
+                <header class="px-2 py-1 text-lg font-semibold">File Path</header>
+                <div class="flex flex-col">
+                    <form
+                        class="mb-1 flex w-full items-center gap-1"
+                        onsubmit={(e) => {
+                            e.preventDefault();
+                            if (!newFilePathFilterInputResult.success) return;
+                            instance.addFilePathFilter(newFilePathFilterInputResult, newFilePathFilterMode);
+                            newFilePathFilterInput = "";
+                        }}
+                    >
+                        <input
+                            type="text"
+                            placeholder="Enter regular expression here..."
+                            class="grow rounded-md border px-2 py-1 inset-shadow-xs ring-focus focus:outline-none focus-visible:ring-2"
+                            bind:value={newFilePathFilterInput}
+                            bind:this={newFilePathFilterElement}
+                        />
+                        <Button.Root
+                            type="button"
+                            title="Toggle include/exclude mode (currently {newFilePathFilterMode})"
+                            class="flex shrink-0 items-center justify-center rounded-md btn-fill-neutral p-2 text-em-med"
+                            onclick={() => {
+                                newFilePathFilterMode = newFilePathFilterMode === "exclude" ? "include" : "exclude";
+                            }}
+                        >
+                            {#if newFilePathFilterMode === "exclude"}
+                                <span class="aria-hidden iconify octicon--filter-remove-16"></span>
+                            {:else}
+                                <span class="aria-hidden iconify octicon--filter-16"></span>
+                            {/if}
+                        </Button.Root>
+                        <Button.Root type="submit" title="Add filter" class="flex shrink-0 items-center justify-center rounded-md btn-fill-primary p-2">
+                            <span class="iconify size-4 shrink-0 place-self-center octicon--plus-16" aria-hidden="true"></span>
+                        </Button.Root>
+                    </form>
+                    <ul class="h-48 overflow-y-auto rounded-md border inset-shadow-xs">
+                        {#each instance.reverseFilePathFilters as filter, i (i)}
+                            <li class="flex gap-1 border-b px-2 py-1">
+                                <span class="grow">
+                                    {filter.text}
+                                </span>
+                                <div class="flex size-6 shrink-0 items-center justify-center">
+                                    {#if filter.mode === "exclude"}
+                                        <span class="aria-hidden iconify size-4 text-em-med octicon--filter-remove-16"></span>
+                                    {:else}
+                                        <span class="aria-hidden iconify size-4 text-em-med octicon--filter-16"></span>
+                                    {/if}
+                                </div>
+                                <Button.Root
+                                    type="button"
+                                    title="Delete filter"
+                                    class="flex size-6 items-center justify-center rounded-sm btn-ghost-danger"
+                                    onclick={() => {
+                                        instance.filePathFilters.delete(filter);
+                                    }}
+                                >
+                                    <span class="iconify size-4 shrink-0 place-self-center octicon--trash-16" aria-hidden="true"></span>
+                                </Button.Root>
+                            </li>
+                        {/each}
+                        {#if instance.reverseFilePathFilters.length === 0}
+                            <li class="flex size-full items-center justify-center px-4 text-em-med">No file path filters. Add one using the above form.</li>
+                        {/if}
+                    </ul>
+                </div>
+            </section>
+        </Dialog.Content>
+    </Dialog.Portal>
+</Dialog.Root>
diff --git a/web/src/lib/components/diff-filtering/index.svelte.ts b/web/src/lib/components/diff-filtering/index.svelte.ts
new file mode 100644
index 0000000..a101ef8
--- /dev/null
+++ b/web/src/lib/components/diff-filtering/index.svelte.ts
@@ -0,0 +1,66 @@
+import type { FileDetails } from "$lib/diff-viewer.svelte";
+import { FILE_STATUSES } from "$lib/github.svelte";
+import type { TryCompileRegexSuccess } from "$lib/util";
+import { SvelteSet } from "svelte/reactivity";
+
+export type FilePathFilterMode = "include" | "exclude";
+export class FilePathFilter {
+    text: string;
+    regex: RegExp;
+    mode: FilePathFilterMode;
+
+    constructor(text: string, regex: RegExp, mode: FilePathFilterMode) {
+        this.text = $state(text);
+        this.regex = $state.raw(regex);
+        this.mode = $state(mode);
+    }
+}
+
+export class DiffFilterDialogState {
+    filePathFilters = new SvelteSet<FilePathFilter>();
+    reverseFilePathFilters = $derived([...this.filePathFilters].toReversed());
+    filterFunction = $derived(this.createFilterFunction());
+
+    selectedFileStatuses: string[] = $state([...FILE_STATUSES]);
+
+    addFilePathFilter(regex: TryCompileRegexSuccess, mode: FilePathFilterMode) {
+        const newFilter = new FilePathFilter(regex.input, regex.regex, mode);
+        this.filePathFilters.add(newFilter);
+    }
+
+    setDefaults() {
+        this.filePathFilters.clear();
+        this.selectedFileStatuses = [...FILE_STATUSES];
+    }
+
+    filterFile(file: FileDetails): boolean {
+        return this.filterFunction(file);
+    }
+
+    private createFilterFunction() {
+        const filePathInclusions = this.reverseFilePathFilters.filter((f) => f.mode === "include");
+        const filePathExclusions = this.reverseFilePathFilters.filter((f) => f.mode === "exclude");
+        const selectedFileStatuses = [...this.selectedFileStatuses];
+
+        return (file: FileDetails) => {
+            const statusAllowed = selectedFileStatuses.includes(file.status);
+            if (!statusAllowed) {
+                return false;
+            }
+            for (const exclude of filePathExclusions) {
+                if (exclude.regex.test(file.toFile) || exclude.regex.test(file.fromFile)) {
+                    return false;
+                }
+            }
+            if (filePathInclusions.length > 0) {
+                for (const include of filePathInclusions) {
+                    if (include.regex.test(file.toFile) || include.regex.test(file.fromFile)) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+            return true;
+        };
+    }
+}
diff --git a/web/src/lib/components/diff/concise-diff-view.svelte.ts b/web/src/lib/components/diff/concise-diff-view.svelte.ts
index a19de04..a8a636b 100644
--- a/web/src/lib/components/diff/concise-diff-view.svelte.ts
+++ b/web/src/lib/components/diff/concise-diff-view.svelte.ts
@@ -1076,6 +1076,7 @@ async function getTheme(theme: BundledTheme | undefined): Promise<null | { defau
 
 export class ConciseDiffViewCachedState {
     diffViewerPatch: Promise<DiffViewerPatch>;
+    cacheKey: unknown;
     syntaxHighlighting: boolean;
     syntaxHighlightingTheme: BundledTheme | undefined;
     omitPatchHeaderOnlyHunks: boolean;
@@ -1083,6 +1084,7 @@ export class ConciseDiffViewCachedState {
 
     constructor(diffViewerPatch: Promise<DiffViewerPatch>, props: ConciseDiffViewStateProps<unknown>) {
         this.diffViewerPatch = diffViewerPatch;
+        this.cacheKey = props.cacheKey.current;
         this.syntaxHighlighting = props.syntaxHighlighting.current;
         this.syntaxHighlightingTheme = props.syntaxHighlightingTheme.current;
         this.omitPatchHeaderOnlyHunks = props.omitPatchHeaderOnlyHunks.current;
@@ -1188,8 +1190,8 @@ export class ConciseDiffViewState<K> {
         });
 
         onDestroy(() => {
-            if (this.props.cache.current !== undefined && this.props.cacheKey.current !== undefined && this.cachedState !== undefined) {
-                this.props.cache.current.set(this.props.cacheKey.current, this.cachedState);
+            if (this.props.cache.current !== undefined && this.cachedState !== undefined) {
+                this.props.cache.current.set(this.cachedState.cacheKey as K, this.cachedState);
             }
         });
     }
diff --git a/web/src/lib/components/menu-bar/MenuBar.svelte b/web/src/lib/components/menu-bar/MenuBar.svelte
index e376d8a..8da419c 100644
--- a/web/src/lib/components/menu-bar/MenuBar.svelte
+++ b/web/src/lib/components/menu-bar/MenuBar.svelte
@@ -53,7 +53,7 @@
                 <Menubar.Item
                     class="flex justify-between gap-2 btn-ghost px-2 py-1 select-none"
                     onSelect={() => {
-                        viewer.openSettingsDialog();
+                        viewer.openDialog("settings");
                     }}
                 >
                     Open Settings
@@ -69,7 +69,7 @@
                 <Menubar.Item
                     class="flex justify-between gap-2 btn-ghost px-2 py-1 select-none"
                     onSelect={() => {
-                        viewer.openOpenDiffDialog();
+                        viewer.openDialog("open-diff");
                     }}
                 >
                     Open
@@ -82,6 +82,14 @@
         <Menubar.Trigger class="btn-ghost px-2 py-1 text-sm data-[state=open]:btn-ghost-hover">View</Menubar.Trigger>
         <Menubar.Portal>
             <Menubar.Content class="z-20 border bg-neutral text-sm" align="start">
+                <Menubar.Item
+                    class="btn-ghost px-2 py-1 select-none"
+                    onSelect={() => {
+                        viewer.openDialog("diff-filter");
+                    }}
+                >
+                    Edit Filters
+                </Menubar.Item>
                 <Menubar.Item
                     class="btn-ghost px-2 py-1 select-none"
                     onSelect={() => {
@@ -137,7 +145,7 @@
                         }
                     }}
                 >
-                    Go to Selection
+                    Jump to Selection
                 </Menubar.Item>
             </Menubar.Content>
         </Menubar.Portal>
diff --git a/web/src/routes/Sidebar.svelte b/web/src/lib/components/sidebar/Sidebar.svelte
similarity index 90%
rename from web/src/routes/Sidebar.svelte
rename to web/src/lib/components/sidebar/Sidebar.svelte
index b083aac..6040951 100644
--- a/web/src/routes/Sidebar.svelte
+++ b/web/src/lib/components/sidebar/Sidebar.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-    import { type FileTreeNodeData } from "$lib/util";
     import { type FileDetails, getFileStatusProps, MultiFileDiffViewerState, staticSidebar } from "$lib/diff-viewer.svelte";
     import Tree from "$lib/components/tree/Tree.svelte";
     import { type TreeNode } from "$lib/components/tree/index.svelte";
     import { on } from "svelte/events";
     import { createAttachmentKey, type Attachment } from "svelte/attachments";
     import { boolAttr } from "runed";
+    import type { FileTreeNodeData } from "$lib/components/sidebar/index.svelte";
 
     const viewer = MultiFileDiffViewerState.get();
+    const fileTree = viewer.fileTree;
 
     function filterFileNode(file: TreeNode<FileTreeNodeData>): boolean {
-        return file.data.type === "file" && viewer.filterFile(file.data.file);
+        return file.data.type === "file" && fileTree.filterFile(file.data.file);
     }
 
     function shouldScrollToFile(nodeInteractionEvent: Event): boolean {
@@ -101,28 +102,28 @@
             <input
                 type="text"
                 placeholder="Filter file tree..."
-                bind:value={viewer.fileTreeFilter}
+                bind:value={fileTree.filter}
                 class="w-full rounded-md border px-8 py-1 overflow-ellipsis focus:ring-2 focus:ring-focus focus:outline-none"
                 autocomplete="off"
             />
             <span aria-hidden="true" class="absolute top-1/2 left-2 iconify size-4 -translate-y-1/2 text-em-med octicon--filter-16"></span>
-            {#if viewer.fileTreeFilterDebounced.current}
+            {#if fileTree.filterDebounced.current}
                 <button
-                    class="absolute top-1/2 right-2 iconify size-4 -translate-y-1/2 text-gray-500 octicon--x-16 hover:text-gray-700"
-                    onclick={() => viewer.clearSearch()}
+                    class="absolute top-1/2 right-2 iconify size-4 -translate-y-1/2 text-em-med octicon--x-16 hover:text-em-high"
+                    onclick={() => (fileTree.filter = "")}
                     aria-label="clear filter"
                 ></button>
             {/if}
         </div>
     </div>
-    {#if viewer.filteredFileDetails.length !== viewer.fileDetails.length}
-        <div class="ms-2 mb-2 text-sm text-gray-600">
-            Showing {viewer.filteredFileDetails.length} of {viewer.fileDetails.length} files
+    {#if fileTree.filteredFileDetails.length !== viewer.filteredFileDetails.array.length}
+        <div class="ms-2 mb-2 text-sm text-em-med">
+            Showing {fileTree.filteredFileDetails.length} of {viewer.filteredFileDetails.array.length} files
         </div>
     {/if}
     <div class="flex h-full flex-col overflow-y-auto border-t">
         <div class="h-100">
-            <Tree roots={viewer.fileTreeRoots} filter={filterFileNode} bind:instance={viewer.tree}>
+            <Tree roots={fileTree.roots} filter={filterFileNode} bind:instance={fileTree.tree}>
                 {#snippet nodeRenderer({ node, collapsed, toggleCollapse })}
                     <div
                         role="button"
diff --git a/web/src/lib/components/sidebar/index.svelte.ts b/web/src/lib/components/sidebar/index.svelte.ts
new file mode 100644
index 0000000..a07b027
--- /dev/null
+++ b/web/src/lib/components/sidebar/index.svelte.ts
@@ -0,0 +1,94 @@
+import type { TreeNode, TreeState } from "$lib/components/tree/index.svelte";
+import type { FileDetails, MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
+import { Debounced } from "runed";
+
+export class FileTreeState {
+    tree: TreeState<FileTreeNodeData> | undefined = $state();
+    filter: string = $state("");
+    readonly roots: TreeNode<FileTreeNodeData>[];
+    readonly filterDebounced = new Debounced(() => this.filter, 500);
+    readonly filteredFileDetails: FileDetails[];
+
+    constructor(viewer: MultiFileDiffViewerState) {
+        this.roots = $derived(makeFileTree(viewer.filteredFileDetails.array));
+        this.filteredFileDetails = $derived(
+            this.filterDebounced.current ? viewer.filteredFileDetails.array.filter((f) => this.filterFile(f)) : viewer.filteredFileDetails.array,
+        );
+    }
+
+    filterFile(file: FileDetails): boolean {
+        const queryLower = this.filterDebounced.current.toLowerCase();
+        return file.toFile.toLowerCase().includes(queryLower) || file.fromFile.toLowerCase().includes(queryLower);
+    }
+}
+
+export type FileTreeNodeData =
+    | {
+          type: "file";
+          file: FileDetails;
+      }
+    | {
+          type: "directory";
+          name: string;
+      };
+
+export function makeFileTree(paths: FileDetails[]): TreeNode<FileTreeNodeData>[] {
+    if (paths.length === 0) {
+        return [];
+    }
+
+    const root: TreeNode<FileTreeNodeData> = {
+        children: [],
+        data: { type: "directory", name: "" },
+    };
+
+    for (const details of paths) {
+        const parts = details.toFile.split("/");
+        let current = root;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const existingChild = current.children.find((child) => child.data.type === "directory" && child.data.name === part);
+            if (existingChild) {
+                current = existingChild;
+            } else {
+                const file = i === parts.length - 1;
+                const newChild: TreeNode<FileTreeNodeData> = {
+                    children: [],
+                    data: file
+                        ? {
+                              type: "file",
+                              file: details,
+                          }
+                        : {
+                              type: "directory",
+                              name: part,
+                          },
+                };
+                current.children.push(newChild);
+                current = newChild;
+            }
+        }
+    }
+
+    function mergeRedundantDirectories(node: TreeNode<FileTreeNodeData>) {
+        for (const child of node.children) {
+            mergeRedundantDirectories(child);
+        }
+
+        if (node.children.length === 1 && node.data.type === "directory" && node.children[0].data.type === "directory") {
+            if (node.data.name !== "") {
+                node.data.name = `${node.data.name}/${node.children[0].data.name}`;
+            } else {
+                node.data.name = node.children[0].data.name;
+            }
+            node.children = node.children[0].children;
+        }
+    }
+
+    mergeRedundantDirectories(root);
+
+    if (root.data.type === "directory" && root.data.name === "") {
+        return root.children;
+    }
+    return [root];
+}
diff --git a/web/src/lib/components/tree/Tree.svelte b/web/src/lib/components/tree/Tree.svelte
index 51de774..58c983a 100644
--- a/web/src/lib/components/tree/Tree.svelte
+++ b/web/src/lib/components/tree/Tree.svelte
@@ -3,10 +3,12 @@
 
     let { instance = $bindable(undefined), roots, nodeRenderer, childWrapper = null, filter = null }: TreeProps<T> = $props();
 
-    instance = new TreeState(
-        () => roots,
-        () => filter,
-    );
+    if (!instance) {
+        instance = new TreeState(
+            () => roots,
+            () => filter,
+        );
+    }
 
     function requireInstance() {
         if (instance === undefined) {
diff --git a/web/src/lib/diff-viewer.svelte.ts b/web/src/lib/diff-viewer.svelte.ts
index 9801ed8..b12482b 100644
--- a/web/src/lib/diff-viewer.svelte.ts
+++ b/web/src/lib/diff-viewer.svelte.ts
@@ -19,9 +19,8 @@ import {
     parseLineRef,
     type UnresolvedLineSelection,
 } from "$lib/components/diff/concise-diff-view.svelte";
-import { countOccurrences, type FileTreeNodeData, makeFileTree, type LazyPromise, lazyPromise, animationFramePromise, yieldToBrowser } from "$lib/util";
+import { countOccurrences, type LazyPromise, lazyPromise, animationFramePromise, yieldToBrowser } from "$lib/util";
 import { onDestroy, onMount, tick } from "svelte";
-import { type TreeNode, TreeState } from "$lib/components/tree/index.svelte";
 import { VList } from "virtua/svelte";
 import { Context, Debounced, watch } from "runed";
 import { MediaQuery } from "svelte/reactivity";
@@ -31,6 +30,8 @@ import { LayoutState, type PersistentLayoutState } from "./layout.svelte";
 import { page } from "$app/state";
 import { afterNavigate, goto, replaceState } from "$app/navigation";
 import { type AfterNavigate } from "@sveltejs/kit";
+import { DiffFilterDialogState } from "./components/diff-filtering/index.svelte";
+import { FileTreeState } from "./components/sidebar/index.svelte";
 
 export const GITHUB_URL_PARAM = "github_url";
 export const PATCH_URL_PARAM = "patch_url";
@@ -50,6 +51,8 @@ export interface TextFileDetails extends CommonFileDetails {
     type: "text";
     structuredPatch: StructuredPatch;
     patchHeaderDiffOnly: boolean;
+    addedLines: number;
+    removedLines: number;
 }
 
 export interface ImageFileDetails extends CommonFileDetails {
@@ -59,6 +62,23 @@ export interface ImageFileDetails extends CommonFileDetails {
 
 export function makeTextDetails(fromFile: string, toFile: string, status: FileStatus, patchText: string): TextFileDetails {
     const patch = parseSinglePatch(patchText);
+
+    let addedLines = 0;
+    let removedLines = 0;
+    for (let j = 0; j < patch.hunks.length; j++) {
+        const hunk = patch.hunks[j];
+
+        for (let k = 0; k < hunk.lines.length; k++) {
+            const line = hunk.lines[k];
+
+            if (line.startsWith("+")) {
+                addedLines++;
+            } else if (line.startsWith("-")) {
+                removedLines++;
+            }
+        }
+    }
+
     return {
         index: -1,
         type: "text",
@@ -67,6 +87,8 @@ export function makeTextDetails(fromFile: string, toFile: string, status: FileSt
         status,
         structuredPatch: patch,
         patchHeaderDiffOnly: patchHeaderDiffOnly(patch),
+        addedLines,
+        removedLines,
     };
 }
 
@@ -254,13 +276,6 @@ export function getFileStatusProps(status: FileStatus): FileStatusProps {
     }
 }
 
-export interface ViewerStatistics {
-    addedLines: number;
-    removedLines: number;
-    fileAddedLines: number[];
-    fileRemovedLines: number[];
-}
-
 export interface BaseDiffMetadata {
     linkable: boolean;
 }
@@ -298,6 +313,8 @@ export interface LoadPatchesOptions {
     state?: "push" | "replace";
 }
 
+export type DialogId = "open-diff" | "settings" | "diff-filter";
+
 export class MultiFileDiffViewerState {
     private static readonly context = new Context<MultiFileDiffViewerState>("MultiFileDiffViewerState");
 
@@ -310,14 +327,39 @@ export class MultiFileDiffViewerState {
     }
 
     // Main diff state
+    readonly filter = new DiffFilterDialogState();
     diffMetadata: DiffMetadata | null = $state(null);
     fileDetails: FileDetails[] = $state([]); // Read-only state
+    readonly filteredFileDetails = $derived.by(() => {
+        const filtered: FileDetails[] = [];
+        const vlistIndices: number[] = [];
+        for (let i = 0; i < this.fileDetails.length; i++) {
+            const file = this.fileDetails[i];
+            if (this.filter.filterFile(file)) {
+                const newLen = filtered.push(file);
+                vlistIndices[file.index] = newLen - 1;
+            } else {
+                vlistIndices[file.index] = -1;
+            }
+        }
+        return { array: filtered, vlistIndices };
+    });
     fileStates: FileState[] = $state([]); // Mutable state
-    stats: ViewerStatistics = $state({
-        addedLines: 0,
-        removedLines: 0,
-        fileAddedLines: [],
-        fileRemovedLines: [],
+    readonly statsSummary = $derived.by(() => {
+        let addedLines = 0;
+        let removedLines = 0;
+        for (let i = 0; i < this.filteredFileDetails.array.length; i++) {
+            const details = this.filteredFileDetails.array[i];
+            if (details.type !== "text") {
+                continue;
+            }
+            addedLines += details.addedLines;
+            removedLines += details.removedLines;
+        }
+        return {
+            addedLines,
+            removedLines,
+        };
     });
 
     // Content search state
@@ -327,13 +369,7 @@ export class MultiFileDiffViewerState {
     jumpToSearchResult: boolean = $state(false);
 
     // File tree state
-    tree: TreeState<FileTreeNodeData> | undefined = $state();
-    fileTreeFilter: string = $state("");
-    readonly fileTreeRoots: TreeNode<FileTreeNodeData>[] = $derived(makeFileTree(this.fileDetails));
-    readonly fileTreeFilterDebounced = new Debounced(() => this.fileTreeFilter, 500);
-    readonly filteredFileDetails: FileDetails[] = $derived(
-        this.fileTreeFilterDebounced.current ? this.fileDetails.filter((f) => this.filterFile(f)) : this.fileDetails,
-    );
+    readonly fileTree = new FileTreeState(this);
 
     // Selection state
     urlSelection: UnresolvedSelection | undefined = $state();
@@ -344,11 +380,12 @@ export class MultiFileDiffViewerState {
     diffViewCache: Map<FileDetails, ConciseDiffViewCachedState> = new Map();
     vlist: VList<FileDetails> | undefined = $state();
     readonly loadingState = new LoadingState();
-    readonly layoutState;
+    readonly layoutState: LayoutState;
 
     // Transient state
     openDiffDialogOpen = $state(false);
     settingsDialogOpen = $state(false);
+    diffFilterDialogOpen = $state(false);
     activeSearchResult: ActiveSearchResult | null = $state(null);
 
     private constructor(layoutState: PersistentLayoutState | null) {
@@ -372,8 +409,8 @@ export class MultiFileDiffViewerState {
 
     private registerKeybinds() {
         const keybinds = new Keybinds();
-        keybinds.registerModifierBind("o", () => this.openOpenDiffDialog());
-        keybinds.registerModifierBind(",", () => this.openSettingsDialog());
+        keybinds.registerModifierBind("o", () => this.openDialog("open-diff"));
+        keybinds.registerModifierBind(",", () => this.openDialog("settings"));
         keybinds.registerModifierBind("b", () => this.layoutState.toggleSidebar());
     }
 
@@ -414,23 +451,10 @@ export class MultiFileDiffViewerState {
         }
     }
 
-    openOpenDiffDialog() {
-        this.openDiffDialogOpen = true;
-        this.settingsDialogOpen = false;
-    }
-
-    openSettingsDialog() {
-        this.settingsDialogOpen = true;
-        this.openDiffDialogOpen = false;
-    }
-
-    filterFile(file: FileDetails): boolean {
-        const queryLower = this.fileTreeFilterDebounced.current.toLowerCase();
-        return file.toFile.toLowerCase().includes(queryLower) || file.fromFile.toLowerCase().includes(queryLower);
-    }
-
-    clearSearch() {
-        this.fileTreeFilter = "";
+    openDialog(id: DialogId) {
+        this.openDiffDialogOpen = id === "open-diff";
+        this.settingsDialogOpen = id === "settings";
+        this.diffFilterDialogOpen = id === "diff-filter";
     }
 
     toggleCollapse(idx: number) {
@@ -504,22 +528,23 @@ export class MultiFileDiffViewerState {
         }
     }
 
-    scrollToFile(index: number, options: { autoExpand?: boolean; smooth?: boolean; focus?: boolean } = {}) {
+    scrollToFile(fileIdx: number, options: { autoExpand?: boolean; smooth?: boolean; focus?: boolean } = {}) {
         if (!this.vlist) return;
 
         const autoExpand = options.autoExpand ?? true;
         const smooth = options.smooth ?? false;
         const focus = options.focus ?? false;
 
-        const fileState = this.fileStates[index];
+        const fileState = this.fileStates[fileIdx];
         if (autoExpand && !fileState.checked) {
             // Auto-expand on jump when not checked
             fileState.collapsed = false;
         }
-        this.vlist.scrollToIndex(index, { align: "start", smooth });
+        const vlistFileIdx = this.filteredFileDetails.vlistIndices[fileIdx];
+        this.vlist.scrollToIndex(vlistFileIdx, { align: "start", smooth });
         if (focus) {
             requestAnimationFrame(() => {
-                const headerElement = document.getElementById(`file-header-${index}`);
+                const headerElement = document.getElementById(`file-header-${fileIdx}`);
                 headerElement?.focus();
             });
         }
@@ -529,16 +554,17 @@ export class MultiFileDiffViewerState {
     // https://github.com/inokawa/virtua/discussions/542#discussioncomment-11214618
     async scrollToMatch(file: FileDetails, idx: number) {
         if (!this.vlist) return;
-        const fileIdx = file.index;
-        this.fileStates[fileIdx].collapsed = false;
+        this.fileStates[file.index].collapsed = false;
+
         const startIdx = this.vlist.findItemIndex(this.vlist.scrollOffset);
         const endIdx = this.vlist.findItemIndex(this.vlist.scrollOffset + this.vlist.viewportSize);
-        if (fileIdx < startIdx || fileIdx > endIdx) {
-            this.vlist.scrollToIndex(fileIdx, { align: "start" });
+        const vlistFileIdx = this.filteredFileDetails.vlistIndices[file.index];
+        if (vlistFileIdx < startIdx || vlistFileIdx > endIdx) {
+            this.vlist.scrollToIndex(vlistFileIdx, { align: "start" });
         }
 
         requestAnimationFrame(() => {
-            const fileElement = document.getElementById(`file-${fileIdx}`);
+            const fileElement = document.getElementById(`file-${file.index}`);
             const resultElement = fileElement?.querySelector(`[data-match-id='${idx}']`) as HTMLElement | null | undefined;
             if (!resultElement) {
                 this.jumpToSearchResult = true;
@@ -662,7 +688,6 @@ export class MultiFileDiffViewerState {
 
             this.fileDetails = tempDetails;
             this.fileStates = statesArray;
-            this.stats = this.countStats();
 
             await tick();
             await animationFramePromise();
@@ -765,39 +790,6 @@ export class MultiFileDiffViewerState {
         return false;
     }
 
-    private countStats(): ViewerStatistics {
-        let addedLines = 0;
-        let removedLines = 0;
-        const fileAddedLines: number[] = [];
-        const fileRemovedLines: number[] = [];
-
-        for (let i = 0; i < this.fileDetails.length; i++) {
-            const details = this.fileDetails[i];
-            if (details.type !== "text") {
-                continue;
-            }
-            const diff = details.structuredPatch;
-
-            for (let j = 0; j < diff.hunks.length; j++) {
-                const hunk = diff.hunks[j];
-
-                for (let k = 0; k < hunk.lines.length; k++) {
-                    const line = hunk.lines[k];
-
-                    if (line.startsWith("+")) {
-                        addedLines++;
-                        fileAddedLines[i] = (fileAddedLines[i] || 0) + 1;
-                    } else if (line.startsWith("-")) {
-                        removedLines++;
-                        fileRemovedLines[i] = (fileRemovedLines[i] || 0) + 1;
-                    }
-                }
-            }
-        }
-
-        return { addedLines, removedLines, fileAddedLines, fileRemovedLines };
-    }
-
     private async findSearchResults(): Promise<SearchResults> {
         let query = this.searchQueryDebounced.current;
         if (!query) {
diff --git a/web/src/lib/github.svelte.ts b/web/src/lib/github.svelte.ts
index f945346..62674e1 100644
--- a/web/src/lib/github.svelte.ts
+++ b/web/src/lib/github.svelte.ts
@@ -74,6 +74,7 @@ export function installGithubApp() {
 
 export type GithubPR = components["schemas"]["pull-request"];
 export type FileStatus = "added" | "removed" | "modified" | "renamed" | "renamed_modified";
+export const FILE_STATUSES: FileStatus[] = ["added", "removed", "modified", "renamed", "renamed_modified"];
 export type GithubUser = components["schemas"]["private-user"];
 export type GithubCommitDetails = components["schemas"]["commit"];
 export interface GithubTokenResponse {
diff --git a/web/src/lib/open-diff-dialog.svelte.ts b/web/src/lib/open-diff-dialog.svelte.ts
index b2bdf6b..19983bd 100644
--- a/web/src/lib/open-diff-dialog.svelte.ts
+++ b/web/src/lib/open-diff-dialog.svelte.ts
@@ -3,7 +3,7 @@ import { DirectoryEntry, FileEntry, MultimodalFileInputState, type MultimodalFil
 import { SvelteSet } from "svelte/reactivity";
 import { type FileStatus } from "$lib/github.svelte";
 import { makeImageDetails, makeTextDetails, MultiFileDiffViewerState, type LoadPatchesOptions } from "$lib/diff-viewer.svelte";
-import { binaryFileDummyDetails, bytesEqual, isBinaryFile, isImageFile, parseMultiFilePatch } from "$lib/util";
+import { binaryFileDummyDetails, bytesEqual, isBinaryFile, isImageFile, parseMultiFilePatch, tryCompileRegex } from "$lib/util";
 import { createTwoFilesPatch } from "diff";
 
 export interface OpenDiffDialogProps {
@@ -47,13 +47,9 @@ export class OpenDiffDialogState {
     }
 
     addBlacklistEntry() {
-        if (this.dirBlacklistInput === "") {
-            return;
-        }
-        try {
-            new RegExp(this.dirBlacklistInput); // Validate regex
-        } catch (e) {
-            alert("'" + this.dirBlacklistInput + "' is not a valid regex pattern. Error: " + e);
+        const result = tryCompileRegex(this.dirBlacklistInput);
+        if (!result.success) {
+            alert(result.error);
             return;
         }
         this.dirBlacklist.add(this.dirBlacklistInput);
diff --git a/web/src/lib/util.ts b/web/src/lib/util.ts
index e09488c..f7d1488 100644
--- a/web/src/lib/util.ts
+++ b/web/src/lib/util.ts
@@ -1,6 +1,5 @@
 import { type FileDetails, type ImageFileDetails, LoadingState, makeTextDetails } from "./diff-viewer.svelte";
 import type { FileStatus } from "./github.svelte";
-import type { TreeNode } from "$lib/components/tree/index.svelte";
 import type { BundledLanguage, SpecialLanguage } from "shiki";
 import { onMount } from "svelte";
 import { on } from "svelte/events";
@@ -190,77 +189,6 @@ export function splitMultiFilePatch(patchContent: string): [BasicHeader, string]
     return patches;
 }
 
-export type FileTreeNodeData =
-    | {
-          type: "file";
-          file: FileDetails;
-      }
-    | {
-          type: "directory";
-          name: string;
-      };
-
-export function makeFileTree(paths: FileDetails[]): TreeNode<FileTreeNodeData>[] {
-    if (paths.length === 0) {
-        return [];
-    }
-
-    const root: TreeNode<FileTreeNodeData> = {
-        children: [],
-        data: { type: "directory", name: "" },
-    };
-
-    for (const details of paths) {
-        const parts = details.toFile.split("/");
-        let current = root;
-        for (let i = 0; i < parts.length; i++) {
-            const part = parts[i];
-            const existingChild = current.children.find((child) => child.data.type === "directory" && child.data.name === part);
-            if (existingChild) {
-                current = existingChild;
-            } else {
-                const file = i === parts.length - 1;
-                const newChild: TreeNode<FileTreeNodeData> = {
-                    children: [],
-                    data: file
-                        ? {
-                              type: "file",
-                              file: details,
-                          }
-                        : {
-                              type: "directory",
-                              name: part,
-                          },
-                };
-                current.children.push(newChild);
-                current = newChild;
-            }
-        }
-    }
-
-    function mergeRedundantDirectories(node: TreeNode<FileTreeNodeData>) {
-        for (const child of node.children) {
-            mergeRedundantDirectories(child);
-        }
-
-        if (node.children.length === 1 && node.data.type === "directory" && node.children[0].data.type === "directory") {
-            if (node.data.name !== "") {
-                node.data.name = `${node.data.name}/${node.children[0].data.name}`;
-            } else {
-                node.data.name = node.children[0].data.name;
-            }
-            node.children = node.children[0].children;
-        }
-    }
-
-    mergeRedundantDirectories(root);
-
-    if (root.data.type === "directory" && root.data.name === "") {
-        return root.children;
-    }
-    return [root];
-}
-
 const imageExtensions: Set<string> = new Set(["jpg", "jpeg", "png", "gif", "webp", "bmp", /*"svg",*/ "tiff", "ico"]);
 
 export function isImageFile(fileName: string | null) {
@@ -492,3 +420,19 @@ export function animationFramePromise() {
 export async function yieldToBrowser() {
     await new Promise((resolve) => setTimeout(resolve, 0));
 }
+
+export type TryCompileRegexSuccess = { success: true; regex: RegExp; input: string };
+export type TryCompileRegexFailure = { success: false; error: string; input: string };
+export type TryCompileRegexResult = TryCompileRegexSuccess | TryCompileRegexFailure;
+
+export function tryCompileRegex(pattern: string, options?: { allowEmpty?: boolean }): TryCompileRegexResult {
+    const allowEmpty = options?.allowEmpty ?? false;
+    if (pattern === "" && !allowEmpty) {
+        return { success: false, error: "Pattern cannot be empty", input: pattern };
+    }
+    try {
+        return { success: true, regex: new RegExp(pattern), input: pattern };
+    } catch (e) {
+        return { success: false, error: e instanceof Error ? e.message : String(e), input: pattern };
+    }
+}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index fd80a1f..2ea4bca 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -11,9 +11,10 @@
     import { GlobalOptions } from "$lib/global-options.svelte";
     import MenuBar from "$lib/components/menu-bar/MenuBar.svelte";
     import SettingsDialog from "$lib/components/settings/SettingsDialog.svelte";
-    import Sidebar from "./Sidebar.svelte";
+    import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
     import DiffWrapper from "./DiffWrapper.svelte";
     import { PaneGroup, Pane, PaneResizer } from "paneforge";
+    import DiffFilterDialog from "$lib/components/diff-filtering/DiffFilterDialog.svelte";
 
     let { data }: PageProps = $props();
     const globalOptions = GlobalOptions.get();
@@ -52,6 +53,7 @@
 
 <OpenDiffDialog bind:open={viewer.openDiffDialogOpen} />
 <SettingsDialog bind:open={viewer.settingsDialogOpen} />
+<DiffFilterDialog />
 
 {#snippet sidebarPane(order: number)}
     {#if !viewer.layoutState.sidebarCollapsed}
@@ -79,11 +81,11 @@
             </div>
         {/if}
         <div class="flex flex-row items-center gap-2 px-3 py-2">
-            <DiffStats add={viewer.stats.addedLines} remove={viewer.stats.removedLines} />
+            <DiffStats add={viewer.statsSummary.addedLines} remove={viewer.statsSummary.removedLines} />
             <DiffSearch />
         </div>
         <div class="flex flex-1 grow flex-col border-t">
-            <VList data={viewer.fileDetails} style="height: 100%;" getKey={(value) => value.index} bind:this={viewer.vlist}>
+            <VList data={viewer.filteredFileDetails.array} style="height: 100%;" getKey={(value) => value.index} bind:this={viewer.vlist}>
                 {#snippet children(value)}
                     <div id={`file-${value.index}`}>
                         <FileHeader {value} />
diff --git a/web/src/routes/FileHeader.svelte b/web/src/routes/FileHeader.svelte
index c844d94..2b99952 100644
--- a/web/src/routes/FileHeader.svelte
+++ b/web/src/routes/FileHeader.svelte
@@ -24,7 +24,7 @@
         const fileTreeElement = document.getElementById("file-tree-file-" + value.index);
         if (fileTreeElement) {
             popoverOpen = false;
-            viewer.tree?.expandParents((node) => node.type === "file" && node.file === value);
+            viewer.fileTree.tree?.expandParents((node) => node.type === "file" && node.file === value);
             requestAnimationFrame(() => {
                 fileTreeElement.focus();
             });
@@ -132,7 +132,7 @@
     data-selected={boolAttr(selected)}
 >
     {#if value.type === "text"}
-        <DiffStats brief add={viewer.stats.fileAddedLines[value.index]} remove={viewer.stats.fileRemovedLines[value.index]} />
+        <DiffStats brief add={value.addedLines} remove={value.removedLines} />
     {/if}
     {@render fileName()}
     <div class="ms-0.5 ml-auto flex items-center gap-1">