Ui updates

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/debug/debug.tsx

@@ -27,6 +27,7 @@ import {
   FastForward, 
   Square, 
   Circle,
+  RotateCcw,
   AlertCircle,
   Check,
   X,
@@ -1053,6 +1054,86 @@ export function DebugPanel() {
 
   return (
     <div className='flex h-full flex-col'>
+      {/* Controls Section */}
+      <div className='border-b border-border/50 p-3'>
+        {isChatMode && !hasStartedRef.current && (
+          <div className='mb-3'>
+            <Textarea
+              placeholder='Enter message to start debugging...'
+              value={chatMessage}
+              onChange={(e) => setChatMessage(e.target.value)}
+              className='min-h-[60px] resize-none border-border/50 bg-background/50 placeholder:text-muted-foreground/50'
+            />
+          </div>
+        )}
+        <div className='flex items-center gap-2'>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size='icon'
+                  variant='ghost'
+                  onClick={handleStep}
+                  aria-label='Step'
+                  className='h-8 w-8 rounded-md bg-blue-500/10 text-blue-600 hover:bg-blue-500/20'
+                >
+                  <Play className='h-4 w-4' />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Execute next step</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size='icon'
+                  variant='ghost'
+                  onClick={handleResumeUntilBreakpoint}
+                  disabled={isChatMode ? (!hasStartedRef.current && chatMessage.trim() === '') : false}
+                  aria-label='Resume'
+                  className='h-8 w-8 rounded-md bg-indigo-500/10 text-indigo-600 hover:bg-indigo-500/20 disabled:opacity-40'
+                >
+                  <FastForward className='h-4 w-4' />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {breakpointId ? 'Continue until breakpoint' : 'Continue execution'}
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size='icon'
+                  variant='ghost'
+                  onClick={handleRestart}
+                  aria-label='Restart'
+                  className='h-8 w-8 rounded-md bg-amber-500/10 text-amber-600 hover:bg-amber-500/20'
+                >
+                  <RotateCcw className='h-4 w-4' />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Restart from the beginning</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size='icon'
+                  variant='ghost'
+                  onClick={handleCancelDebug}
+                  aria-label='Stop'
+                  className='h-8 w-8 rounded-md bg-red-500/10 text-red-600 hover:bg-red-500/20'
+                >
+                  <Square className='h-4 w-4' />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Stop debugging</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+
       {/* Header Section - Single Line */}
       <div className='flex items-center justify-between border-b border-border/50 px-3 py-2.5'>
         <div className='flex items-center gap-2'>
@@ -1091,86 +1172,6 @@ export function DebugPanel() {
         </div>
       </div>
 
-      {/* Controls Section */}
-      <div className='border-b border-border/50 p-3'>
-        {isChatMode && !hasStartedRef.current && (
-          <div className='mb-3'>
-            <Textarea
-              placeholder='Enter message to start debugging...'
-              value={chatMessage}
-              onChange={(e) => setChatMessage(e.target.value)}
-              className='min-h-[60px] resize-none border-border/50 bg-background/50 placeholder:text-muted-foreground/50'
-            />
-          </div>
-        )}
-        <div className='flex items-center gap-2'>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size='sm'
-                  variant='outline'
-                  onClick={handleStep}
-                  className='gap-2 border-border/50 hover:bg-muted/50'
-                >
-                  <Play className='h-3.5 w-3.5' />
-                  Step
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Execute next step</TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size='sm'
-                  variant='outline'
-                  onClick={handleResumeUntilBreakpoint}
-                  disabled={isChatMode ? (!hasStartedRef.current && chatMessage.trim() === '') : false}
-                  className='gap-2 border-border/50 hover:bg-muted/50 disabled:opacity-40'
-                >
-                  <FastForward className='h-3.5 w-3.5' />
-                  Resume
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {breakpointId ? 'Continue until breakpoint' : 'Continue execution'}
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size='sm'
-                  variant='outline'
-                  onClick={handleRestart}
-                  className='gap-2 border-border/50 hover:bg-muted/50'
-                >
-                  <Circle className='h-3.5 w-3.5' />
-                  Restart
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Restart from the beginning</TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size='sm'
-                  variant='outline'
-                  onClick={handleCancelDebug}
-                  className='gap-2 border-border/50 hover:bg-destructive/10 hover:text-destructive'
-                >
-                  <Square className='h-3.5 w-3.5' />
-                  Stop
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Stop debugging</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </div>
-
       {/* Main Content Area - Split into two sections */}
       <div className='flex flex-1 flex-col overflow-hidden'>
         {/* Top Section - Input/Output */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -617,11 +617,11 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
           displayIsWide ? 'w-[480px]' : 'w-[320px]',
           !isEnabled && 'shadow-sm',
           // Panel-focused block highlight
-          isPanelFocused && 'bg-amber-50 dark:bg-amber-900/10',
+          isPanelFocused && 'bg-blue-50/60 dark:bg-blue-900/5',
           // Executing blocks match staging: pulsing blue ring
           isExecutingNow && 'animate-pulse-ring ring-2 ring-blue-500',
           // Pending blocks show green border when not executing
-          !isExecutingNow && isCurrentBlock && 'ring-2 ring-green-500',
+          !isExecutingNow && isCurrentBlock && 'ring-2 ring-blue-500',
           // Diff highlighting
           diffStatus === 'new' && 'bg-green-50/50 ring-2 ring-green-500 dark:bg-green-900/10',
           diffStatus === 'edited' && 'bg-orange-50/50 ring-2 ring-orange-500 dark:bg-orange-900/10',
@@ -633,7 +633,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
       >
         {/* Show debug indicator for current blocks in debug mode (pending or executing) */}
         {isDebugModeEnabled && (isPending || executingBlockIds.has(id)) && (
-          <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-green-500 px-2 py-0.5 text-white text-xs'>
+          <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-blue-500 px-2 py-0.5 text-white text-xs'>
             Current
           </div>
         )}