🤖 fix: add downgrade compatibility for incompatible runtime configs (#827)

## Summary

Prepares for #824 by ensuring users can safely upgrade→downgrade without
losing access to their other workspaces.

When users upgrade to a version with new runtime types (like `type:
"local"` without `srcBaseDir` for project-dir mode, or new `type:
"worktree"`) and then downgrade, the old version now shows a clear error
instead of crashing.

## Changes

| File | Change |
|------|--------|
| `src/common/utils/runtimeCompatibility.ts` | New:
`isIncompatibleRuntimeConfig()` helper (in common/ to avoid circular
deps) |
| `src/common/types/workspace.ts` | Added `incompatibleRuntime` field to
`FrontendWorkspaceMetadata` |
| `src/node/config.ts` | Set `incompatibleRuntime` when loading
workspace metadata |
| `src/browser/components/AIView.tsx` | Display error view for
incompatible workspaces |
| `src/browser/App.tsx` | Pass `incompatibleRuntime` to AIView |
| `src/node/runtime/runtimeFactory.ts` | Re-export helper + throw
`IncompatibleRuntimeError` as safety net |
| `src/node/services/ipcMain.ts` | Handle `IncompatibleRuntimeError` in
sendMessage (fallback) |
| `src/common/types/errors.ts` | Added `incompatible_workspace`
SendMessageError type |

## User Experience

When clicking into an incompatible workspace, users see a centered error
view:

> ⚠️ **Incompatible Workspace**  
> This workspace was created with a newer version of mux.  
> Please upgrade mux to use this workspace.  
>  
> You can delete this workspace and create a new one, or upgrade mux to
use it.

## Testing

- Added unit tests for `isIncompatibleRuntimeConfig()`
- Added unit tests for `createRuntime()` throwing on incompatible
configs
- Added tests for error toast display (fallback path)
- Added tests for non-retryable error classification

_Generated with `mux`_

Author: ammar-agent

src/browser/App.stories.tsx

@@ -377,6 +377,83 @@ export const ManyWorkspaces: Story = {
   },
 };
 
+/**
+ * Story demonstrating the incompatible workspace error view.
+ *
+ * When a user downgrades to an older version of mux that doesn't support
+ * a workspace's runtime configuration, the workspace shows an error message
+ * instead of crashing. This ensures graceful degradation.
+ */
+export const IncompatibleWorkspace: Story = {
+  render: () => {
+    const AppWithIncompatibleWorkspace = () => {
+      const initialized = useRef(false);
+
+      if (!initialized.current) {
+        const workspaceId = "incompatible-ws";
+
+        const workspaces: FrontendWorkspaceMetadata[] = [
+          {
+            id: "my-app-main",
+            name: "main",
+            projectPath: "/home/user/projects/my-app",
+            projectName: "my-app",
+            namedWorkspacePath: "/home/user/.mux/src/my-app/main",
+            runtimeConfig: DEFAULT_RUNTIME_CONFIG,
+          },
+          {
+            id: workspaceId,
+            name: "incompatible",
+            projectPath: "/home/user/projects/my-app",
+            projectName: "my-app",
+            namedWorkspacePath: "/home/user/.mux/src/my-app/incompatible",
+            runtimeConfig: DEFAULT_RUNTIME_CONFIG,
+            // This field is set when a workspace has an incompatible runtime config
+            incompatibleRuntime:
+              "This workspace was created with a newer version of mux.\nPlease upgrade mux to use this workspace.",
+          },
+        ];
+
+        setupMockAPI({
+          projects: new Map([
+            [
+              "/home/user/projects/my-app",
+              {
+                workspaces: [
+                  { path: "/home/user/.mux/src/my-app/main", id: "my-app-main", name: "main" },
+                  {
+                    path: "/home/user/.mux/src/my-app/incompatible",
+                    id: workspaceId,
+                    name: "incompatible",
+                  },
+                ],
+              },
+            ],
+          ]),
+          workspaces,
+        });
+
+        // Set initial workspace selection to the incompatible workspace
+        localStorage.setItem(
+          "selectedWorkspace",
+          JSON.stringify({
+            workspaceId: workspaceId,
+            projectPath: "/home/user/projects/my-app",
+            projectName: "my-app",
+            namedWorkspacePath: "/home/user/.mux/src/my-app/incompatible",
+          })
+        );
+
+        initialized.current = true;
+      }
+
+      return <AppLoader />;
+    };
+
+    return <AppWithIncompatibleWorkspace />;
+  },
+};
+
 /**
  * Story demonstrating all possible UI indicators in the project sidebar.
  *

src/browser/App.tsx

@@ -574,6 +574,9 @@ function AppInner() {
                   runtimeConfig={
                     workspaceMetadata.get(selectedWorkspace.workspaceId)?.runtimeConfig
                   }
+                  incompatibleRuntime={
+                    workspaceMetadata.get(selectedWorkspace.workspaceId)?.incompatibleRuntime
+                  }
                 />
               </ErrorBoundary>
             ) : creationProjectPath ? (

src/browser/components/AIView.tsx

@@ -49,6 +49,8 @@ interface AIViewProps {
   namedWorkspacePath: string; // User-friendly path for display and terminal
   runtimeConfig?: RuntimeConfig;
   className?: string;
+  /** If set, workspace is incompatible (from newer mux version) and this error should be displayed */
+  incompatibleRuntime?: string;
 }
 
 const AIViewInner: React.FC<AIViewProps> = ({
@@ -610,8 +612,37 @@ const AIViewInner: React.FC<AIViewProps> = ({
   );
 };
 
+/**
+ * Incompatible workspace error display.
+ * Shown when a workspace was created with a newer version of mux.
+ */
+const IncompatibleWorkspaceView: React.FC<{ message: string; className?: string }> = ({
+  message,
+  className,
+}) => (
+  <div className={cn("flex h-full w-full flex-col items-center justify-center p-8", className)}>
+    <div className="max-w-md text-center">
+      <div className="mb-4 text-4xl">⚠️</div>
+      <h2 className="mb-2 text-xl font-semibold text-[var(--color-text-primary)]">
+        Incompatible Workspace
+      </h2>
+      <p className="mb-4 text-[var(--color-text-secondary)]">{message}</p>
+      <p className="text-sm text-[var(--color-text-tertiary)]">
+        You can delete this workspace and create a new one, or upgrade mux to use it.
+      </p>
+    </div>
+  </div>
+);
+
 // Wrapper component that provides the mode and thinking contexts
 export const AIView: React.FC<AIViewProps> = (props) => {
+  // Early return for incompatible workspaces - no hooks called in this path
+  if (props.incompatibleRuntime) {
+    return (
+      <IncompatibleWorkspaceView message={props.incompatibleRuntime} className={props.className} />
+    );
+  }
+
   return (
     <ModeProvider workspaceId={props.workspaceId}>
       <ProviderOptionsProvider>

src/browser/components/ChatInputToasts.test.ts

@@ -69,5 +69,18 @@ describe("ChatInputToasts", () => {
       expect(toast.title).toBe("Message Send Failed");
       expect(toast.message).toContain("unexpected error");
     });
+
+    test("should create toast for incompatible_workspace error", () => {
+      const error: SendMessageError = {
+        type: "incompatible_workspace",
+        message: "This workspace uses a runtime configuration from a newer version of mux.",
+      };
+
+      const toast = createErrorToast(error);
+
+      expect(toast.type).toBe("error");
+      expect(toast.title).toBe("Incompatible Workspace");
+      expect(toast.message).toContain("newer version");
+    });
   });
 });

src/browser/components/ChatInputToasts.tsx

@@ -195,6 +195,21 @@ export const createErrorToast = (error: SendMessageErrorType): Toast => {
       };
     }
 
+    case "incompatible_workspace": {
+      return {
+        id: Date.now().toString(),
+        type: "error",
+        title: "Incompatible Workspace",
+        message: error.message,
+        solution: (
+          <>
+            <SolutionLabel>Solution:</SolutionLabel>
+            Upgrade mux to use this workspace, or delete it and create a new one.
+          </>
+        ),
+      };
+    }
+
     case "unknown":
     default: {
       const formatted = formatSendMessageError(error);

src/browser/utils/messages/retryEligibility.test.ts

@@ -594,4 +594,12 @@ describe("isNonRetryableSendError", () => {
     };
     expect(isNonRetryableSendError(error)).toBe(false);
   });
+
+  it("returns true for incompatible_workspace error", () => {
+    const error: SendMessageError = {
+      type: "incompatible_workspace",
+      message: "This workspace uses a runtime configuration from a newer version of mux.",
+    };
+    expect(isNonRetryableSendError(error)).toBe(true);
+  });
 });

src/browser/utils/messages/retryEligibility.ts

@@ -52,6 +52,7 @@ export function isNonRetryableSendError(error: SendMessageError): boolean {
     case "api_key_not_found": // Missing API key - user must configure
     case "provider_not_supported": // Unsupported provider - user must switch
     case "invalid_model_string": // Bad model format - user must fix
+    case "incompatible_workspace": // Workspace from newer mux version - user must upgrade
       return true;
     case "unknown":
       return false; // Unknown errors might be transient

src/common/types/errors.ts

@@ -12,6 +12,7 @@ export type SendMessageError =
   | { type: "api_key_not_found"; provider: string }
   | { type: "provider_not_supported"; provider: string }
   | { type: "invalid_model_string"; message: string }
+  | { type: "incompatible_workspace"; message: string }
   | { type: "unknown"; raw: string };
 
 /**

src/common/types/workspace.ts

@@ -74,6 +74,13 @@ export interface GitStatus {
 export interface FrontendWorkspaceMetadata extends WorkspaceMetadata {
   /** Worktree path (uses workspace name as directory) */
   namedWorkspacePath: string;
+
+  /**
+   * If set, this workspace has an incompatible runtime configuration
+   * (e.g., from a newer version of mux). The workspace should be displayed
+   * but interactions should show this error message.
+   */
+  incompatibleRuntime?: string;
 }
 
 export interface WorkspaceActivitySnapshot {

src/common/utils/errors/formatSendError.ts

@@ -32,6 +32,11 @@ export function formatSendMessageError(error: SendMessageError): FormattedError
         message: error.message,
       };
 
+    case "incompatible_workspace":
+      return {
+        message: error.message,
+      };
+
     case "unknown":
       return {
         message: error.raw || "An unexpected error occurred",