Import error handling and subscribe state

apps/web/src/components/QuickStart.tsx

@@ -181,7 +181,7 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
           <CardDescription>Your project is fully set up</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex items-start gap-4 p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg border border-green-200">
+          <div className="flex items-start gap-4 p-4 bg-green-50 rounded-lg border border-green-200">
             <div className="h-10 w-10 rounded-lg bg-green-100 border border-green-200 flex items-center justify-center flex-shrink-0">
               <CheckCircle2 className="h-5 w-5 text-green-700" />
             </div>

apps/web/src/components/WorkflowBuilder.tsx

@@ -12,7 +12,7 @@ import {
   ReactFlow,
   useEdgesState,
   useNodesState,
-  useReactFlow,
+  useReactFlow
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import type {WorkflowStep} from '@plunk/db';
@@ -702,7 +702,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
 
   return (
     <>
-      <div className="w-full h-[800px] bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-lg border border-neutral-200 shadow-inner relative">
+      <div className="w-full h-[800px] bg-neutral-50 rounded-lg border border-neutral-200 shadow-inner relative">
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -821,42 +821,43 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
         </DialogContent>
       </Dialog>
 
-      {stepToDelete && (() => {
-        const affectedSteps = getAffectedSteps(stepToDelete);
-        const stepToDeleteData = steps.find(s => s.id === stepToDelete);
-        const downstreamSteps = affectedSteps.filter(s => s.id !== stepToDelete);
+      {stepToDelete &&
+        (() => {
+          const affectedSteps = getAffectedSteps(stepToDelete);
+          const stepToDeleteData = steps.find(s => s.id === stepToDelete);
+          const downstreamSteps = affectedSteps.filter(s => s.id !== stepToDelete);
 
-        return (
-          <ConfirmDialog
-            open={showDeleteDialog}
-            onOpenChange={setShowDeleteDialog}
-            onConfirm={handleDeleteStep}
-            title="Delete Step"
-            description={
-              downstreamSteps.length > 0 ? (
-                <div className="space-y-3">
-                  <p>
-                    Deleting &quot;{stepToDeleteData?.name}&quot; will also delete {downstreamSteps.length} downstream{' '}
-                    {downstreamSteps.length === 1 ? 'step' : 'steps'}:
-                  </p>
-                  <ul className="list-disc list-inside text-sm text-neutral-600 max-h-32 overflow-y-auto bg-neutral-50 p-3 rounded border border-neutral-200">
-                    {downstreamSteps.map(step => (
-                      <li key={step.id}>
-                        {step.name} ({step.type})
-                      </li>
-                    ))}
-                  </ul>
-                  <p className="text-sm font-medium text-red-600">This action cannot be undone.</p>
-                </div>
-              ) : (
-                `Are you sure you want to delete "${stepToDeleteData?.name}"? This action cannot be undone.`
-              )
-            }
-            confirmText={downstreamSteps.length > 0 ? `Delete ${affectedSteps.length} Steps` : 'Delete'}
-            variant="destructive"
-          />
-        );
-      })()}
+          return (
+            <ConfirmDialog
+              open={showDeleteDialog}
+              onOpenChange={setShowDeleteDialog}
+              onConfirm={handleDeleteStep}
+              title="Delete Step"
+              description={
+                downstreamSteps.length > 0 ? (
+                  <div className="space-y-3">
+                    <p>
+                      Deleting &quot;{stepToDeleteData?.name}&quot; will also delete {downstreamSteps.length} downstream{' '}
+                      {downstreamSteps.length === 1 ? 'step' : 'steps'}:
+                    </p>
+                    <ul className="list-disc list-inside text-sm text-neutral-600 max-h-32 overflow-y-auto bg-neutral-50 p-3 rounded border border-neutral-200">
+                      {downstreamSteps.map(step => (
+                        <li key={step.id}>
+                          {step.name} ({step.type})
+                        </li>
+                      ))}
+                    </ul>
+                    <p className="text-sm font-medium text-red-600">This action cannot be undone.</p>
+                  </div>
+                ) : (
+                  `Are you sure you want to delete "${stepToDeleteData?.name}"? This action cannot be undone.`
+                )
+              }
+              confirmText={downstreamSteps.length > 0 ? `Delete ${affectedSteps.length} Steps` : 'Delete'}
+              variant="destructive"
+            />
+          );
+        })()}
     </>
   );
 }

apps/web/src/components/WorkflowVisualizer.tsx

@@ -10,7 +10,7 @@ import {
   Position,
   ReactFlow,
   useEdgesState,
-  useNodesState,
+  useNodesState
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import type {WorkflowStep} from '@plunk/db';
@@ -469,7 +469,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
   }
 
   return (
-    <div className="w-full h-[700px] bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-lg border border-neutral-200 shadow-inner">
+    <div className="w-full h-[700px] bg-neutral-50 rounded-lg border border-neutral-200 shadow-inner">
       <ReactFlow
         nodes={nodes}
         edges={edges}