fix(generate): black screen when viewing a deleted workspace model

src/areas/generate/components/Viewer3D.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useEffect, useRef, useState } from 'react'
+import { Component, Suspense, useEffect, useRef, useState } from 'react'
+import type { ReactNode, ErrorInfo } from 'react'
 import { Canvas, useThree } from '@react-three/fiber'
 import { OrbitControls, useGLTF } from '@react-three/drei'
 import * as THREE from 'three'
@@ -59,6 +60,55 @@ function CanvasCapture({
   return null
 }
 
+// ---------------------------------------------------------------------------
+// ModelErrorBoundary — catches useGLTF load failures (e.g. 404)
+// ---------------------------------------------------------------------------
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback: ReactNode
+  resetKey?: string | null
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+}
+
+class ModelErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.warn('[Viewer3D] Failed to load model:', error.message, info.componentStack)
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    if (prevProps.resetKey !== this.props.resetKey && this.state.hasError) {
+      this.setState({ hasError: false })
+    }
+  }
+
+  render(): ReactNode {
+    return this.state.hasError ? this.props.fallback : this.props.children
+  }
+}
+
+function ModelLoadError(): JSX.Element {
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-600 pointer-events-none">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>
+      <p className="mt-3 text-sm">Model file not found</p>
+    </div>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // MeshModel
 // ---------------------------------------------------------------------------
@@ -230,75 +280,77 @@ export default function Viewer3D(): JSX.Element {
   }
 
   return (
-    <div className="relative w-full h-full bg-surface-400">
-      {!modelUrl && <EmptyState />}
-
-      <Canvas
-        camera={{ position: [0, 1.5, 4], fov: 45 }}
-        gl={{
-          antialias: true,
-          preserveDrawingBuffer: true,
-          outputColorSpace: THREE.SRGBColorSpace,
-          toneMapping: THREE.NeutralToneMapping,
-          toneMappingExposure: 1.8,
-        }}
-      >
-        <color attach="background" args={['#18181b']} />
-        <CanvasCapture domRef={canvasRef} />
-
-        <gridHelper args={[10, 20, '#3f3f46', '#27272a']} />
-
-        {modelUrl && currentJob && (
-          <Suspense fallback={null}>
-            <hemisphereLight args={['#ffffff', '#444466', 1.2]} />
-            <directionalLight position={[5, 8, 5]} intensity={1.5} castShadow />
-            <directionalLight position={[-4, 2, -4]} intensity={0.6} />
-            <MeshModel
-              url={modelUrl}
-              jobId={currentJob.id}
-              viewMode={viewMode}
-              onStats={setStoreMeshStats}
-            />
-          </Suspense>
+    <ModelErrorBoundary resetKey={modelUrl} fallback={<ModelLoadError />}>
+      <div className="relative w-full h-full bg-surface-400">
+        {!modelUrl && <EmptyState />}
+
+        <Canvas
+          camera={{ position: [0, 1.5, 4], fov: 45 }}
+          gl={{
+            antialias: true,
+            preserveDrawingBuffer: true,
+            outputColorSpace: THREE.SRGBColorSpace,
+            toneMapping: THREE.NeutralToneMapping,
+            toneMappingExposure: 1.8,
+          }}
+        >
+          <color attach="background" args={['#18181b']} />
+          <CanvasCapture domRef={canvasRef} />
+
+          <gridHelper args={[10, 20, '#3f3f46', '#27272a']} />
+
+          {modelUrl && currentJob && (
+            <Suspense fallback={null}>
+              <hemisphereLight args={['#ffffff', '#444466', 1.2]} />
+              <directionalLight position={[5, 8, 5]} intensity={1.5} castShadow />
+              <directionalLight position={[-4, 2, -4]} intensity={0.6} />
+              <MeshModel
+                url={modelUrl}
+                jobId={currentJob.id}
+                viewMode={viewMode}
+                onStats={setStoreMeshStats}
+              />
+            </Suspense>
+          )}
+
+          <OrbitControls
+            enablePan
+            enableZoom
+            enableRotate
+            minDistance={0.5}
+            maxDistance={20}
+            autoRotate={autoRotate}
+            autoRotateSpeed={1.5}
+          />
+        </Canvas>
+
+        {/* Left toolbar — visible only when a model is loaded */}
+        {modelUrl && (
+          <ViewerToolbar
+            viewMode={viewMode}
+            autoRotate={autoRotate}
+            onViewMode={setViewMode}
+            onAutoRotate={() => setAutoRotate((v) => !v)}
+            onScreenshot={handleScreenshot}
+          />
         )}
 
-        <OrbitControls
-          enablePan
-          enableZoom
-          enableRotate
-          minDistance={0.5}
-          maxDistance={20}
-          autoRotate={autoRotate}
-          autoRotateSpeed={1.5}
-        />
-      </Canvas>
-
-      {/* Left toolbar — visible only when a model is loaded */}
-      {modelUrl && (
-        <ViewerToolbar
-          viewMode={viewMode}
-          autoRotate={autoRotate}
-          onViewMode={setViewMode}
-          onAutoRotate={() => setAutoRotate((v) => !v)}
-          onScreenshot={handleScreenshot}
-        />
-      )}
-
-      {/* Bottom-left stats overlay */}
-      {meshStats && (
-        <div className="absolute bottom-4 left-4 pointer-events-none">
-          <p className="text-xs text-zinc-500">
-            {meshStats.triangles.toLocaleString()} tri &bull; {meshStats.vertices.toLocaleString()} verts
-          </p>
-        </div>
-      )}
-
-      {/* Bottom-right hint */}
-      {modelUrl && (
-        <div className="absolute bottom-4 right-4 pointer-events-none">
-          <p className="text-xs text-zinc-600">Drag to rotate &bull; Scroll to zoom</p>
-        </div>
-      )}
-    </div>
+        {/* Bottom-left stats overlay */}
+        {meshStats && (
+          <div className="absolute bottom-4 left-4 pointer-events-none">
+            <p className="text-xs text-zinc-500">
+              {meshStats.triangles.toLocaleString()} tri &bull; {meshStats.vertices.toLocaleString()} verts
+            </p>
+          </div>
+        )}
+
+        {/* Bottom-right hint */}
+        {modelUrl && (
+          <div className="absolute bottom-4 right-4 pointer-events-none">
+            <p className="text-xs text-zinc-600">Drag to rotate &bull; Scroll to zoom</p>
+          </div>
+        )}
+      </div>
+    </ModelErrorBoundary>
   )
 }

src/areas/generate/components/WorkspacePanel.tsx

@@ -98,7 +98,10 @@ export default function WorkspacePanel(): JSX.Element {
   const jobs = activeCollection?.jobs ?? []
 
   const handleDeleteConfirm = () => {
-    if (pendingDeleteId) removeFromWorkspace(pendingDeleteId)
+    if (pendingDeleteId) {
+      if (currentJob?.id === pendingDeleteId) setCurrentJob(null)
+      removeFromWorkspace(pendingDeleteId)
+    }
     setPendingDeleteId(null)
   }
 

src/areas/workspace/WorkspacePage.tsx

@@ -28,7 +28,10 @@ export default function WorkspacePage(): JSX.Element {
   }
 
   const handleDeleteJobConfirm = () => {
-    if (pendingDeleteId) removeFromWorkspace(pendingDeleteId)
+    if (pendingDeleteId) {
+      if (currentJob?.id === pendingDeleteId) setCurrentJob(null)
+      removeFromWorkspace(pendingDeleteId)
+    }
     setPendingDeleteId(null)
   }