From cf8ca07850e883b1794be2fa1016a00e33483f5b Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sat, 15 Aug 2026 14:17:41 +0800
Subject: [PATCH] fix: allow recovering from part viewer error

Add a Try again button to the ErrorBoundary fallback and key the ModPage boundary by selection so picking another object clears a stuck error.
---
 apps/web/src/pages/ModPage.tsx          |  4 ++--
 packages/tabletop/src/ErrorBoundary.tsx | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/ModPage.tsx b/apps/web/src/pages/ModPage.tsx
index 80ed7ad..77ab076 100644
--- a/apps/web/src/pages/ModPage.tsx
+++ b/apps/web/src/pages/ModPage.tsx
@@ -53,7 +53,7 @@ export default function ModPage() {
         {selected && Viewer ? (
           /* Key by selection path so the Canvas remounts and the camera
              refits to the newly selected object. */
-          <ErrorBoundary>
+          <ErrorBoundary key={selectedPath}>
             <Suspense
               fallback={
                 <div className="flex h-full items-center justify-center text-sm text-zinc-500">
@@ -61,7 +61,7 @@ export default function ModPage() {
                 </div>
               }
             >
-              <Viewer key={selectedPath} object={selected.object} fill />
+              <Viewer object={selected.object} fill />
             </Suspense>
           </ErrorBoundary>
         ) : (
diff --git a/packages/tabletop/src/ErrorBoundary.tsx b/packages/tabletop/src/ErrorBoundary.tsx
index c95daa0..631842f 100644
--- a/packages/tabletop/src/ErrorBoundary.tsx
+++ b/packages/tabletop/src/ErrorBoundary.tsx
@@ -27,17 +27,21 @@ export default class ErrorBoundary extends Component<Props, State> {
     console.error('Part viewer error:', error, info.componentStack);
   }
 
+  private retry = () => {
+    this.setState({ error: null });
+  };
+
   override render() {
     if (this.state.error) {
       return this.props.fallback
         ? this.props.fallback(this.state.error)
-        : <DefaultFallback error={this.state.error} />;
+        : <DefaultFallback error={this.state.error} onRetry={this.retry} />;
     }
     return this.props.children;
   }
 }
 
-function DefaultFallback({ error }: { error: Error }) {
+function DefaultFallback({ error, onRetry }: { error: Error; onRetry: () => void }) {
   return (
     <div className="flex h-80 flex-col items-center justify-center gap-2 overflow-auto rounded-lg border border-zinc-800 bg-zinc-900 p-4 text-center">
       <p className="text-sm font-medium text-zinc-200">Couldn't render this part</p>
@@ -49,6 +53,12 @@ function DefaultFallback({ error }: { error: Error }) {
           {error.stack}
         </pre>
       )}
+      <button
+        onClick={onRetry}
+        className="mt-2 rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-300"
+      >
+        Try again
+      </button>
     </div>
   );
 }
\ No newline at end of file