fix(workflow-error): allow users to delete workflows with invalid configs/state (#1000)

* fix(workflow-error): allow users to delete workflows with invalid configs/state

* cleanup

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx

@@ -341,10 +341,11 @@ export function ControlBar({ hasValidationErrors = false }: ControlBarProps) {
    * Handle deleting the current workflow
    */
   const handleDeleteWorkflow = () => {
-    if (!activeWorkflowId || !userPermissions.canEdit) return
+    const currentWorkflowId = params.workflowId as string
+    if (!currentWorkflowId || !userPermissions.canEdit) return
 
     const sidebarWorkflows = getSidebarOrderedWorkflows()
-    const currentIndex = sidebarWorkflows.findIndex((w) => w.id === activeWorkflowId)
+    const currentIndex = sidebarWorkflows.findIndex((w) => w.id === currentWorkflowId)
 
     // Find next workflow: try next, then previous
     let nextWorkflowId: string | null = null
@@ -363,8 +364,8 @@ export function ControlBar({ hasValidationErrors = false }: ControlBarProps) {
       router.push(`/workspace/${workspaceId}`)
     }
 
-    // Remove the workflow from the registry
-    useWorkflowRegistry.getState().removeWorkflow(activeWorkflowId)
+    // Remove the workflow from the registry using the URL parameter
+    useWorkflowRegistry.getState().removeWorkflow(currentWorkflowId)
   }
 
   // Helper function to open subscription settings

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx

@@ -4,6 +4,8 @@ import { Component, type ReactNode, useEffect } from 'react'
 import { BotIcon } from 'lucide-react'
 import { Card } from '@/components/ui/card'
 import { createLogger } from '@/lib/logs/console/logger'
+import { ControlBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar'
+import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel'
 
 const logger = createLogger('ErrorBoundary')
 
@@ -22,18 +24,32 @@ export function ErrorUI({
   fullScreen = false,
 }: ErrorUIProps) {
   const containerClass = fullScreen
-    ? 'flex items-center justify-center w-full h-screen bg-muted/40'
-    : 'flex items-center justify-center w-full h-full bg-muted/40'
+    ? 'flex flex-col w-full h-screen bg-muted/40'
+    : 'flex flex-col w-full h-full bg-muted/40'
 
   return (
     <div className={containerClass}>
-      <Card className='max-w-md space-y-4 p-6 text-center'>
-        <div className='flex justify-center'>
-          <BotIcon className='h-16 w-16 text-muted-foreground' />
+      {/* Control bar */}
+      <ControlBar hasValidationErrors={false} />
+
+      {/* Main content area */}
+      <div className='relative flex flex-1'>
+        {/* Error message */}
+        <div className='flex flex-1 items-center justify-center'>
+          <Card className='max-w-md space-y-4 p-6 text-center'>
+            <div className='flex justify-center'>
+              <BotIcon className='h-16 w-16 text-muted-foreground' />
+            </div>
+            <h3 className='font-semibold text-lg'>{title}</h3>
+            <p className='text-muted-foreground'>{message}</p>
+          </Card>
         </div>
-        <h3 className='font-semibold text-lg'>{title}</h3>
-        <p className='text-muted-foreground'>{message}</p>
-      </Card>
+
+        {/* Console panel */}
+        <div className='fixed top-0 right-0 z-10'>
+          <Panel />
+        </div>
+      </div>
     </div>
   )
 }