improvement(copilot): diff controls

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts

@@ -7,6 +7,7 @@ import type { GlobalCommand } from '@/app/workspace/[workspaceId]/providers/glob
  * ad-hoc ids or shortcuts to ensure a single source of truth.
  */
 export type CommandId =
+  | 'accept-diff-changes'
   | 'add-agent'
   | 'goto-templates'
   | 'goto-logs'
@@ -43,6 +44,11 @@ export interface CommandDefinition {
  * All global commands must be declared here to be usable.
  */
 export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
+  'accept-diff-changes': {
+    id: 'accept-diff-changes',
+    shortcut: 'Mod+Shift+Enter',
+    allowInEditable: true,
+  },
   'add-agent': {
     id: 'add-agent',
     shortcut: 'Mod+Shift+A',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx

@@ -1,10 +1,11 @@
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { Eye, EyeOff } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { createCommand } from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
+import { usePanelStore } from '@/stores/panel/store'
 import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -15,28 +16,20 @@ const logger = createLogger('DiffControls')
 
 export const DiffControls = memo(function DiffControls() {
   const isTerminalResizing = useTerminalStore((state) => state.isResizing)
-  const {
-    isShowingDiff,
-    isDiffReady,
-    hasActiveDiff,
-    toggleDiffView,
-    acceptChanges,
-    rejectChanges,
-    baselineWorkflow,
-  } = useWorkflowDiffStore(
-    useCallback(
-      (state) => ({
-        isShowingDiff: state.isShowingDiff,
-        isDiffReady: state.isDiffReady,
-        hasActiveDiff: state.hasActiveDiff,
-        toggleDiffView: state.toggleDiffView,
-        acceptChanges: state.acceptChanges,
-        rejectChanges: state.rejectChanges,
-        baselineWorkflow: state.baselineWorkflow,
-      }),
-      []
+  const isPanelResizing = usePanelStore((state) => state.isResizing)
+  const { isDiffReady, hasActiveDiff, acceptChanges, rejectChanges, baselineWorkflow } =
+    useWorkflowDiffStore(
+      useCallback(
+        (state) => ({
+          isDiffReady: state.isDiffReady,
+          hasActiveDiff: state.hasActiveDiff,
+          acceptChanges: state.acceptChanges,
+          rejectChanges: state.rejectChanges,
+          baselineWorkflow: state.baselineWorkflow,
+        }),
+        []
+      )
     )
-  )
 
   const { updatePreviewToolCallState, currentChat, messages } = useCopilotStore(
     useCallback(
@@ -53,11 +46,6 @@ export const DiffControls = memo(function DiffControls() {
     useCallback((state) => ({ activeWorkflowId: state.activeWorkflowId }), [])
   )
 
-  const handleToggleDiff = useCallback(() => {
-    logger.info('Toggling diff view', { currentState: isShowingDiff })
-    toggleDiffView()
-  }, [isShowingDiff, toggleDiffView])
-
   const createCheckpoint = useCallback(async () => {
     if (!activeWorkflowId || !currentChat?.id) {
       logger.warn('Cannot create checkpoint: missing workflowId or chatId', {
@@ -286,54 +274,82 @@ export const DiffControls = memo(function DiffControls() {
 
   const preventZoomRef = usePreventZoom()
 
+  // Register global command to accept changes (Cmd/Ctrl + Shift + Enter)
+  const acceptCommand = useMemo(
+    () =>
+      createCommand({
+        id: 'accept-diff-changes',
+        handler: () => {
+          if (hasActiveDiff && isDiffReady) {
+            handleAccept()
+          }
+        },
+      }),
+    [hasActiveDiff, isDiffReady, handleAccept]
+  )
+  useRegisterGlobalCommands([acceptCommand])
+
   // Don't show anything if no diff is available or diff is not ready
   if (!hasActiveDiff || !isDiffReady) {
     return null
   }
 
+  const isResizing = isTerminalResizing || isPanelResizing
+
   return (
     <div
       ref={preventZoomRef}
       className={clsx(
-        '-translate-x-1/2 fixed left-1/2 z-30',
-        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+        'fixed z-30',
+        !isResizing && 'transition-[bottom,right] duration-100 ease-out'
       )}
-      style={{ bottom: 'calc(var(--terminal-height) + 40px)' }}
+      style={{
+        bottom: 'calc(var(--terminal-height) + 8px)',
+        right: 'calc(var(--panel-width) + 8px)',
+      }}
     >
-      <div className='flex items-center gap-[6px] rounded-[10px] p-[6px]'>
-        {/* Toggle (left, icon-only) */}
-        <Button
-          variant='active'
-          onClick={handleToggleDiff}
-          className='h-[30px] w-[30px] rounded-[8px] p-0'
-          title={isShowingDiff ? 'View original' : 'Preview changes'}
-        >
-          {isShowingDiff ? (
-            <Eye className='h-[14px] w-[14px]' />
-          ) : (
-            <EyeOff className='h-[14px] w-[14px]' />
-          )}
-        </Button>
-
-        {/* Reject */}
-        <Button
-          variant='active'
+      <div
+        className='group relative flex h-[30px] overflow-hidden rounded-[4px]'
+        style={{ isolation: 'isolate' }}
+      >
+        {/* Reject side */}
+        <button
           onClick={handleReject}
-          className='h-[30px] rounded-[8px] px-3'
           title='Reject changes'
+          className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-[20px] pl-[12px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
+          style={{
+            clipPath: 'polygon(0 0, calc(100% + 10px) 0, 100% 100%, 0 100%)',
+            borderRadius: '4px 0 0 4px',
+          }}
         >
           Reject
-        </Button>
-
-        {/* Accept */}
-        <Button
-          variant='tertiary'
+        </button>
+        {/* Slanted divider - split gray/green */}
+        <div
+          className='pointer-events-none absolute top-0 bottom-0 z-10'
+          style={{
+            left: '66px',
+            width: '2px',
+            transform: 'skewX(-18.4deg)',
+            background:
+              'linear-gradient(to right, var(--border) 50%, color-mix(in srgb, var(--brand-tertiary-2) 70%, black) 50%)',
+          }}
+        />
+        {/* Accept side */}
+        <button
           onClick={handleAccept}
-          className='h-[30px] rounded-[8px] px-3'
-          title='Accept changes'
+          title='Accept changes (⇧⌘⏎)'
+          className='-ml-[10px] relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-tertiary-2)] pr-[12px] pl-[20px] font-medium text-[13px] text-[var(--text-inverse)] transition-[background-color,border-color,fill,stroke] hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
+          style={{
+            clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%)',
+            borderRadius: '0 4px 4px 0',
+          }}
         >
           Accept
-        </Button>
+          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-[10px]'>
+            ⇧⌘<span className='translate-y-[-1px]'>⏎</span>
+          </kbd>
+        </button>
       </div>
     </div>
   )

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

@@ -11,6 +11,7 @@ import {
   openCopilotWithMessage,
   useNotificationStore,
 } from '@/stores/notifications'
+import { useSidebarStore } from '@/stores/sidebar/store'
 import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
@@ -19,7 +20,7 @@ const MAX_VISIBLE_NOTIFICATIONS = 4
 
 /**
  * Notifications display component
- * Positioned in the bottom-right workspace area, aligned with terminal and panel spacing
+ * Positioned in the bottom-left workspace area, reactive to sidebar width and terminal height
  * Shows both global notifications and workflow-specific notifications
  */
 export const Notifications = memo(function Notifications() {
@@ -36,6 +37,7 @@ export const Notifications = memo(function Notifications() {
       .slice(0, MAX_VISIBLE_NOTIFICATIONS)
   }, [allNotifications, activeWorkflowId])
   const isTerminalResizing = useTerminalStore((state) => state.isResizing)
+  const isSidebarResizing = useSidebarStore((state) => state.isResizing)
 
   /**
    * Executes a notification action and handles side effects.
@@ -103,12 +105,14 @@ export const Notifications = memo(function Notifications() {
     return null
   }
 
+  const isResizing = isTerminalResizing || isSidebarResizing
+
   return (
     <div
       ref={preventZoomRef}
       className={clsx(
-        'fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end',
-        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+        'fixed bottom-[calc(var(--terminal-height)+16px)] left-[calc(var(--sidebar-width)+16px)] z-30 flex flex-col items-start',
+        !isResizing && 'transition-[bottom,left] duration-100 ease-out'
       )}
     >
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useState } from 'react'
-import { ArrowUp, ChevronDown, ChevronRight, MoreHorizontal, Trash2 } from 'lucide-react'
+import { ArrowUp, ChevronDown, ChevronRight, Trash2 } from 'lucide-react'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
 
 /**
@@ -48,7 +48,6 @@ export function QueuedMessages() {
             {messageQueue.length} Queued
           </span>
         </div>
-        <MoreHorizontal className='h-3 w-3 text-[var(--text-tertiary)]' />
       </button>
 
       {/* Message list */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
-import { ChevronUp } from 'lucide-react'
+import { ChevronUp, LayoutList } from 'lucide-react'
 import { Button, Code } from '@/components/emcn'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/base-tool'
 import { getClientTool } from '@/lib/copilot/tools/client/manager'
@@ -201,28 +201,10 @@ function PlanSteps({
 
   return (
     <div className='mt-1.5 overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-      <div className='flex items-center justify-between border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
-          <svg
-            className='h-3 w-3 flex-shrink-0 text-[var(--text-tertiary)]'
-            viewBox='0 0 24 24'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          >
-            {/* Three horizontal lines with circles at different positions */}
-            <line x1='4' y1='6' x2='20' y2='6' />
-            <circle cx='8' cy='6' r='2' fill='currentColor' />
-            <line x1='4' y1='12' x2='20' y2='12' />
-            <circle cx='16' cy='12' r='2' fill='currentColor' />
-            <line x1='4' y1='18' x2='20' y2='18' />
-            <circle cx='10' cy='18' r='2' fill='currentColor' />
-          </svg>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>To-dos</span>
-        </div>
-        <span className='flex-shrink-0 font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
+        <LayoutList className='ml-[2px] h-3 w-3 flex-shrink-0 text-[var(--text-tertiary)]' />
+        <span className='font-medium text-[12px] text-[var(--text-primary)]'>To-dos</span>
+        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
           {sortedSteps.length}
         </span>
       </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { PANEL_WIDTH } from '@/stores/constants'
 import { usePanelStore } from '@/stores/panel/store'
 
@@ -10,15 +10,14 @@ import { usePanelStore } from '@/stores/panel/store'
  * @returns Resize state and handlers
  */
 export function usePanelResize() {
-  const { setPanelWidth } = usePanelStore()
-  const [isResizing, setIsResizing] = useState(false)
+  const { setPanelWidth, isResizing, setIsResizing } = usePanelStore()
 
   /**
    * Handles mouse down on resize handle
    */
   const handleMouseDown = useCallback(() => {
     setIsResizing(true)
-  }, [])
+  }, [setIsResizing])
 
   /**
    * Setup resize event listeners and body styles when resizing
@@ -52,7 +51,7 @@ export function usePanelResize() {
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
-  }, [isResizing, setPanelWidth])
+  }, [isResizing, setPanelWidth, setIsResizing])
 
   return {
     isResizing,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -136,7 +136,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
   const ringStyles = cn(
     hasRing && 'ring-[1.75px]',
     (isFocused || isPreviewSelected) && 'ring-[var(--brand-secondary)]',
-    diffStatus === 'new' && 'ring-[#22C55F]',
+    diffStatus === 'new' && 'ring-[var(--brand-tertiary-2)]',
     diffStatus === 'edited' && 'ring-[var(--warning)]'
   )
 

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

@@ -93,7 +93,7 @@ const WorkflowEdgeComponent = ({
     } else if (isErrorEdge) {
       color = 'var(--text-error)'
     } else if (edgeDiffStatus === 'new') {
-      color = 'var(--brand-tertiary)'
+      color = 'var(--brand-tertiary-2)'
     } else if (edgeRunStatus === 'success') {
       // Use green for preview mode, default for canvas execution
       color = previewExecutionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'

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

@@ -3304,8 +3304,6 @@ const WorkflowContent = React.memo(() => {
               <LazyChat />
             </Suspense>
 
-            <DiffControls />
-
             {/* Context Menus */}
             <BlockContextMenu
               isOpen={isBlockMenuOpen}
@@ -3361,6 +3359,8 @@ const WorkflowContent = React.memo(() => {
         <Panel />
       </div>
 
+      <DiffControls />
+
       <Terminal />
 
       {oauthModal && (

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { SIDEBAR_WIDTH } from '@/stores/constants'
 import { useSidebarStore } from '@/stores/sidebar/store'
 
@@ -10,8 +10,7 @@ import { useSidebarStore } from '@/stores/sidebar/store'
  * @returns Resize state and handlers
  */
 export function useSidebarResize() {
-  const { setSidebarWidth } = useSidebarStore()
-  const [isResizing, setIsResizing] = useState(false)
+  const { setSidebarWidth, isResizing, setIsResizing } = useSidebarStore()
 
   /**
    * Handles mouse down on resize handle