diff --git a/webui/src/types.ts b/webui/src/types.ts
index 5031739..53cc96f 100644
--- a/webui/src/types.ts
+++ b/webui/src/types.ts
@@ -111,6 +111,7 @@
 
 export interface DiffFile {
 	path: string;
+	old_path: string;
 	old_mode: string;
 	new_mode: string;
 	old_hash: string;
diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 648ca65..894d9aa 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -40,6 +40,7 @@
   private mockDiffFiles: GitDiffFile[] = [
     {
       path: "src/components/FilePicker.js",
+      old_path: "",
       status: "A",
       new_mode: "100644",
       old_mode: "000000",
@@ -50,6 +51,7 @@
     },
     {
       path: "src/components/RangePicker.js",
+      old_path: "",
       status: "A",
       new_mode: "100644",
       old_mode: "000000",
@@ -60,6 +62,7 @@
     },
     {
       path: "src/components/App.js",
+      old_path: "",
       status: "M",
       new_mode: "100644",
       old_mode: "100644",
@@ -70,6 +73,7 @@
     },
     {
       path: "src/styles/main.css",
+      old_path: "",
       status: "M",
       new_mode: "100644",
       old_mode: "100644",
diff --git a/webui/src/web-components/sketch-diff-file-picker.ts b/webui/src/web-components/sketch-diff-file-picker.ts
index eb94a5f..cadafae 100644
--- a/webui/src/web-components/sketch-diff-file-picker.ts
+++ b/webui/src/web-components/sketch-diff-file-picker.ts
@@ -205,7 +205,8 @@
   formatFileOption(file: GitDiffFile): string {
     const statusSymbol = this.getFileStatusSymbol(file.status);
     const changesInfo = this.getChangesInfo(file);
-    return `${statusSymbol} ${file.path}${changesInfo}`;
+    const pathInfo = this.getPathInfo(file);
+    return `${statusSymbol} ${pathInfo}${changesInfo}`;
   }
 
   /**
@@ -231,6 +232,18 @@
   }
 
   /**
+   * Get path information for display, handling renames and copies
+   */
+  getPathInfo(file: GitDiffFile): string {
+    if (file.old_path && file.old_path !== "") {
+      // For renames and copies, show old_path -> new_path
+      return `${file.old_path} → ${file.path}`;
+    }
+    // For regular files, just show the path
+    return file.path;
+  }
+
+  /**
    * Get a short symbol for the file status
    */
   getFileStatusSymbol(status: string): string {
@@ -244,6 +257,14 @@
       case "R":
         return "R";
       default:
+        // Handle copy statuses like C096, C100, etc.
+        if (status.toUpperCase().startsWith("C")) {
+          return "C";
+        }
+        // Handle rename statuses like R096, R100, etc.
+        if (status.toUpperCase().startsWith("R")) {
+          return "R";
+        }
         return "?";
     }
   }
@@ -262,6 +283,14 @@
       case "R":
         return "Renamed";
       default:
+        // Handle copy statuses like C096, C100, etc.
+        if (status.toUpperCase().startsWith("C")) {
+          return "Copied";
+        }
+        // Handle rename statuses like R096, R100, etc.
+        if (status.toUpperCase().startsWith("R")) {
+          return "Renamed";
+        }
         return "Unknown";
     }
   }