fix(workspace): prevent workspace model selection while a generation is running

src/areas/generate/components/WorkspacePanel.tsx

@@ -4,16 +4,19 @@ import { useCollectionsStore } from '@shared/stores/collectionsStore'
 import { ConfirmModal } from '@shared/components/ui'
 import { formatTime, formatDate } from '@shared/utils/format'
 
-function ThumbnailItem({ job, isActive, onClick, onDelete }: {
+function ThumbnailItem({ job, isActive, onClick, onDelete, disabled }: {
   job: GenerationJob
   isActive: boolean
   onClick: () => void
   onDelete: () => void
+  disabled?: boolean
 }): JSX.Element {
   return (
     <div
+      title={disabled ? 'A generation is in progress' : undefined}
       className={`
-        relative group aspect-square rounded-xl overflow-hidden border transition-all duration-150 cursor-pointer
+        relative group aspect-square rounded-xl overflow-hidden border transition-all duration-150
+        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
         ${isActive
           ? 'border-accent ring-1 ring-accent/40'
           : 'border-zinc-700/50 hover:border-zinc-500'
@@ -94,6 +97,7 @@ export default function WorkspacePanel(): JSX.Element {
   const [creating, setCreating] = useState(false)
   const [newName, setNewName] = useState('')
 
+  const isGenerating = currentJob?.status === 'uploading' || currentJob?.status === 'generating'
   const activeCollection = collections.find((c) => c.id === activeCollectionId)
   const jobs = activeCollection?.jobs ?? []
 
@@ -218,8 +222,9 @@ export default function WorkspacePanel(): JSX.Element {
                 key={job.id}
                 job={job}
                 isActive={currentJob?.id === job.id}
-                onClick={() => handleJobClick(job)}
-                onDelete={() => setPendingDeleteId(job.id)}
+                onClick={() => !isGenerating && handleJobClick(job)}
+                onDelete={() => !isGenerating && setPendingDeleteId(job.id)}
+                disabled={isGenerating}
               />
             ))}
           </div>

src/areas/workspace/WorkspacePage.tsx

@@ -19,9 +19,11 @@ export default function WorkspacePage(): JSX.Element {
   const [addingCol, setAddingCol] = useState(false)
   const newColRef = useRef<HTMLInputElement>(null)
 
+  const isGenerating = currentJob?.status === 'uploading' || currentJob?.status === 'generating'
   const activeCollection = collections.find((c) => c.id === activeCollectionId)
 
   const handleJobClick = (job: GenerationJob) => {
+    if (isGenerating) return
     // Always restore the original mesh (before any optimization)
     setCurrentJob({ ...job, outputUrl: job.originalOutputUrl ?? job.outputUrl })
     navigate('generate')
@@ -146,6 +148,7 @@ export default function WorkspacePage(): JSX.Element {
                   isActive={currentJob?.id === job.id}
                   onClick={() => handleJobClick(job)}
                   onDelete={() => setPendingDeleteId(job.id)}
+                  disabled={isGenerating}
                 />
               ))}
             </div>

src/areas/workspace/components/WorkspaceCard.tsx

@@ -6,21 +6,24 @@ interface Props {
   isActive: boolean
   onClick:  () => void
   onDelete: () => void
+  disabled?: boolean
 }
 
-export function WorkspaceCard({ job, isActive, onClick, onDelete }: Props): JSX.Element {
+export function WorkspaceCard({ job, isActive, onClick, onDelete, disabled }: Props): JSX.Element {
   const modelLabel = job.modelId ? (MODEL_LABEL[job.modelId] ?? job.modelId) : null
 
   return (
     <div
+      title={disabled ? 'A generation is in progress' : undefined}
       className={`
-        group flex flex-col rounded-xl overflow-hidden border transition-all duration-150 cursor-pointer
+        group flex flex-col rounded-xl overflow-hidden border transition-all duration-150
+        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
         ${isActive
           ? 'border-accent ring-1 ring-accent/40'
           : 'border-zinc-800 hover:border-zinc-600'
         }
       `}
-      onClick={onClick}
+      onClick={disabled ? undefined : onClick}
     >
       {/* Thumbnail */}
       <div className="relative aspect-square bg-zinc-900 overflow-hidden">