diff --git a/packages/plugins/plugin-workspace-diff/src/ui/index.tsx b/packages/plugins/plugin-workspace-diff/src/ui/index.tsx
index a14029af0af..78306d6f5c9 100644
--- a/packages/plugins/plugin-workspace-diff/src/ui/index.tsx
+++ b/packages/plugins/plugin-workspace-diff/src/ui/index.tsx
@@ -189,10 +189,39 @@ function LoadingState() {
);
}
-function ErrorState({ message }: { message: string }) {
+export function ErrorState({
+ message,
+ onRetry,
+}: {
+ message: string;
+ onRetry: () => void;
+}) {
return (
-
- {message}
+
+
+
+
Unable to load workspace changes.
+
+ Retry the request or open the details below for the technical error.
+
+
+
+
+
+
+ Troubleshooting details
+
+
+ {message || "No error message was provided."}
+
+
);
}
@@ -445,7 +474,7 @@ export function ChangesTab({ context }: PluginDetailTabProps) {
{loading ? (
) : error ? (
-
+
) : files.length === 0 ? (
) : (
diff --git a/packages/plugins/plugin-workspace-diff/tests/ui-error-state.spec.ts b/packages/plugins/plugin-workspace-diff/tests/ui-error-state.spec.ts
new file mode 100644
index 00000000000..b81e70c8b50
--- /dev/null
+++ b/packages/plugins/plugin-workspace-diff/tests/ui-error-state.spec.ts
@@ -0,0 +1,20 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ErrorState } from "../src/ui/index.js";
+
+describe("workspace diff error state", () => {
+ it("keeps bridge error details out of the primary headline", () => {
+ const rawError = "Execution workspace not found";
+ const html = renderToStaticMarkup(createElement(ErrorState, {
+ message: rawError,
+ onRetry: () => undefined,
+ }));
+
+ expect(html).toContain("Unable to load workspace changes.");
+ expect(html).toContain("Retry");
+ expect(html).toContain("Troubleshooting details");
+ expect(html).not.toContain(`font-medium text-foreground">${rawError}`);
+ expect(html.indexOf(rawError)).toBeGreaterThan(html.indexOf("Troubleshooting details"));
+ });
+});