Make project workspace changes tab load stale diff plugin

packages/plugins/plugin-workspace-diff/src/ui/index.tsx

@@ -215,10 +215,10 @@ function FileDiffPanel({
 
   return (
     <div className="space-y-3">
-      {file.patches.map((patch) => {
+      {file.patches.map((patch, index) => {
         const patchWarning = patchWarningText(patch);
         return (
-          <div key={patch.kind} className="overflow-hidden border border-border bg-background">
+          <div key={`${patch.kind}:${index}`} className="overflow-hidden border border-border bg-background">
             {file.patches.length > 1 ? (
               <div className="flex items-center gap-2 border-b border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
                 <span className="font-medium text-foreground">{patchKindLabel(patch.kind)}</span>
@@ -453,9 +453,9 @@ export function ChangesTab({ context }: PluginDetailTabProps) {
               Files
             </div>
             <div key="list" className="max-h-[70vh] overflow-auto lg:max-h-none lg:flex-1">
-              {files.map((file) => (
+              {files.map((file, index) => (
                 <FileRow
-                  key={file.path}
+                  key={`${file.path}:${index}`}
                   file={file}
                   active={file.path === selectedFile?.path}
                   expanded={expandedFiles.has(file.path)}
@@ -474,9 +474,9 @@ export function ChangesTab({ context }: PluginDetailTabProps) {
             onScroll={handleDiffScroll}
           >
             {files
-              .map((file) => (
+              .map((file, index) => (
                 <section
-                  key={file.path}
+                  key={`${file.path}:${index}`}
                   ref={setFileSectionRef(file.path)}
                   className={file.path === selectedFile?.path ? "scroll-mt-2" : undefined}
                 >

ui/src/pages/ProjectWorkspaceDetail.test.tsx

@@ -55,20 +55,23 @@ vi.mock("@/plugins/slots", () => ({
   },
   usePluginSlots: (filters: unknown) => {
     mockUsePluginSlots(filters);
+    const entityType = (filters as { entityType?: string }).entityType;
     return {
-      slots: [
-        {
-          id: "workspace-changes-tab",
-          type: "detailTab",
-          displayName: "Changes",
-          exportName: "WorkspaceChangesTab",
-          entityTypes: ["project_workspace"],
-          pluginId: "plugin-1",
-          pluginKey: "paperclip.workspace-diff",
-          pluginDisplayName: "Workspace Diff",
-          pluginVersion: "0.1.0",
-        },
-      ],
+      slots: entityType === "execution_workspace"
+        ? [
+          {
+            id: "workspace-changes-tab",
+            type: "detailTab",
+            displayName: "Changes",
+            exportName: "WorkspaceChangesTab",
+            entityTypes: ["execution_workspace"],
+            pluginId: "plugin-1",
+            pluginKey: "paperclip.workspace-diff",
+            pluginDisplayName: "Workspace Diff",
+            pluginVersion: "0.1.0",
+          },
+        ]
+        : [],
       isLoading: false,
       errorMessage: null,
     };

ui/src/pages/ProjectWorkspaceDetail.tsx

@@ -278,6 +278,16 @@ export function ProjectWorkspaceDetail() {
     companyId: project?.companyId ?? null,
     enabled: Boolean(project?.companyId),
   });
+  const {
+    slots: legacyWorkspacePluginDetailSlots,
+    isLoading: legacyWorkspacePluginDetailSlotsLoading,
+    errorMessage: legacyWorkspacePluginDetailSlotsError,
+  } = usePluginSlots({
+    slotTypes: ["detailTab"],
+    entityType: "execution_workspace",
+    companyId: project?.companyId ?? null,
+    enabled: Boolean(project?.companyId),
+  });
   const pluginTabItems = useMemo(
     () => pluginDetailSlots.map((slot) => ({
       value: `plugin:${slot.pluginKey}:${slot.id}`,
@@ -286,7 +296,19 @@ export function ProjectWorkspaceDetail() {
     })),
     [pluginDetailSlots],
   );
-  const changesPluginTab = pluginTabItems.find((item) => item.value === WORKSPACE_CHANGES_PLUGIN_TAB) ?? null;
+  const legacyWorkspacePluginTabItems = useMemo(
+    () => legacyWorkspacePluginDetailSlots.map((slot) => ({
+      value: `plugin:${slot.pluginKey}:${slot.id}`,
+      label: slot.displayName,
+      slot,
+    })),
+    [legacyWorkspacePluginDetailSlots],
+  );
+  const changesPluginTab = pluginTabItems.find((item) => item.value === WORKSPACE_CHANGES_PLUGIN_TAB)
+    ?? legacyWorkspacePluginTabItems.find((item) => item.value === WORKSPACE_CHANGES_PLUGIN_TAB)
+    ?? null;
+  const changesPluginTabLoading = pluginDetailSlotsLoading || legacyWorkspacePluginDetailSlotsLoading;
+  const changesPluginTabError = pluginDetailSlotsError ?? legacyWorkspacePluginDetailSlotsError;
 
   useEffect(() => {
     if (!project?.companyId || project.companyId === selectedCompanyId) return;
@@ -726,9 +748,9 @@ export function ProjectWorkspaceDetail() {
           />
         ) : (
           <div className="rounded-lg border border-dashed border-border bg-background px-4 py-8 text-sm text-muted-foreground">
-            {pluginDetailSlotsError
-              ? `Workspace changes failed to load: ${pluginDetailSlotsError}`
-              : pluginDetailSlotsLoading
+            {changesPluginTabError
+              ? `Workspace changes failed to load: ${changesPluginTabError}`
+              : changesPluginTabLoading
                 ? "Loading workspace changes..."
                 : "Workspace changes are not available."}
           </div>