improvement(copilot): ui/ux; refactor: store dimensions (#2636)

Author: emir-karabeg

apps/sim/app/_styles/globals.css

@@ -5,13 +5,16 @@
 /**
  * CSS-based sidebar and panel widths to prevent SSR hydration mismatches.
  * Default widths are set here and updated via blocking script before React hydrates.
+ *
+ * @important These values must stay in sync with stores/constants.ts
+ * @see stores/constants.ts for the source of truth
  */
 :root {
-  --sidebar-width: 232px;
-  --panel-width: 260px;
-  --toolbar-triggers-height: 300px;
-  --editor-connections-height: 200px;
-  --terminal-height: 155px;
+  --sidebar-width: 232px; /* SIDEBAR_WIDTH.DEFAULT */
+  --panel-width: 290px; /* PANEL_WIDTH.DEFAULT */
+  --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
+  --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
+  --terminal-height: 155px; /* TERMINAL_HEIGHT.DEFAULT */
 }
 
 .sidebar-container {

apps/sim/app/layout.tsx

@@ -41,7 +41,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           }}
         />
 
-        {/* Workspace layout dimensions: set CSS vars before hydration to avoid layout jump */}
+        {/* 
+          Workspace layout dimensions: set CSS vars before hydration to avoid layout jump.
+          
+          IMPORTANT: These hardcoded values must stay in sync with stores/constants.ts
+          We cannot use imports here since this is a blocking script that runs before React.
+        */}
         <script
           id='workspace-layout-dimensions'
           dangerouslySetInnerHTML={{
@@ -84,7 +89,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     var panelWidth = panelState && panelState.panelWidth;
                     var maxPanelWidth = window.innerWidth * 0.4;
 
-                    if (panelWidth >= 260 && panelWidth <= maxPanelWidth) {
+                    if (panelWidth >= 290 && panelWidth <= maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', panelWidth + 'px');
                     } else if (panelWidth > maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', maxPanelWidth + 'px');

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display.tsx

@@ -107,7 +107,7 @@ export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDi
       {fileAttachments.map((file) => (
         <div
           key={file.id}
-          className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-border/50 bg-muted/20 transition-all hover:bg-muted/40'
+          className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-[var(--border-1)] bg-muted/20 transition-all hover:bg-muted/40'
           onClick={() => handleFileClick(file)}
           title={`${file.filename} (${formatFileSize(file.size)})`}
         >

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

@@ -319,7 +319,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
-                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-7)] hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
               >
                 <div
                   ref={messageContentRef}
@@ -350,7 +350,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       nodes.push(
                         <span
                           key={`mention-${i}-${lastIndex}`}
-                          className='rounded-[6px] bg-[rgba(142,76,251,0.65)]'
+                          className='rounded-[4px] bg-[rgba(50,189,126,0.65)] py-[1px]'
                         >
                           {mention}
                         </span>
@@ -365,7 +365,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Gradient fade when truncated - applies to entire message box */}
                 {!isExpanded && needsExpansion && (
-                  <div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[var(--surface-5)] via-40% via-[var(--surface-5)]/70 to-100% to-transparent group-hover:from-[var(--surface-5)] group-hover:via-[var(--surface-5)]/70 dark:from-[var(--surface-5)] dark:via-[var(--surface-5)]/70 dark:group-hover:from-[var(--border-1)] dark:group-hover:via-[var(--border-1)]/70' />
+                  <div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[var(--surface-4)] via-25% via-[var(--surface-4)] to-100% to-transparent opacity-40 group-hover:opacity-30 dark:from-[var(--surface-4)] dark:via-[var(--surface-4)] dark:group-hover:from-[var(--border-1)] dark:group-hover:via-[var(--border-1)]' />
                 )}
 
                 {/* Abort button when hovering and response is generating (only on last user message) */}
@@ -376,13 +376,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                         e.stopPropagation()
                         abortMessage()
                       }}
-                      className='h-[20px] w-[20px] rounded-full bg-[var(--c-C0C0C0)] p-0 transition-colors hover:bg-[var(--c-D0D0D0)]'
+                      className='h-[20px] w-[20px] rounded-full border-0 bg-[var(--c-383838)] p-0 transition-colors hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
                       title='Stop generation'
                     >
                       <svg
-                        className='block h-[13px] w-[13px]'
+                        className='block h-[13px] w-[13px] fill-white dark:fill-black'
                         viewBox='0 0 24 24'
-                        fill='black'
                         xmlns='http://www.w3.org/2000/svg'
                       >
                         <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/model-selector/model-selector.tsx

@@ -140,7 +140,7 @@ export function ModelSelector({ selectedModel, isNearTop, onModelSelect }: Model
               {getModelIconComponent(option.value)}
               <span>{option.label}</span>
               {isMaxModel(option.value) && (
-                <Badge variant='default' className='ml-auto px-[6px] py-[1px] text-[10px]'>
+                <Badge size='sm' className='ml-auto'>
                   MAX
                 </Badge>
               )}

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

@@ -590,7 +590,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         elements.push(
           <span
             key={`mention-${i}-${range.start}-${range.end}`}
-            className='rounded-[6px] bg-[rgba(142,76,251,0.65)]'
+            className='rounded-[4px] bg-[rgba(50,189,126,0.65)] py-[1px]'
           >
             {mentionText}
           </span>
@@ -619,7 +619,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         <div
           ref={setInputContainerRef}
           className={cn(
-            'relative w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-colors dark:bg-[var(--surface-5)]',
+            'relative w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[6px] py-[6px] transition-colors dark:bg-[var(--surface-4)]',
             fileAttachments.isDragging && 'ring-[1.75px] ring-[var(--brand-secondary)]'
           )}
           onDragEnter={fileAttachments.handleDragEnter}
@@ -746,7 +746,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                 onClick={fileAttachments.handleFileSelect}
                 title='Attach file'
                 className={cn(
-                  'cursor-pointer rounded-[6px] bg-transparent p-[0px] dark:bg-transparent',
+                  'cursor-pointer rounded-[6px] border-0 bg-transparent p-[0px] dark:bg-transparent',
                   (disabled || isLoading) && 'cursor-not-allowed opacity-50'
                 )}
               >
@@ -758,20 +758,19 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   onClick={handleAbort}
                   disabled={isAborting}
                   className={cn(
-                    'h-[20px] w-[20px] rounded-full p-0 transition-colors',
+                    'h-[20px] w-[20px] rounded-full border-0 p-0 transition-colors',
                     !isAborting
-                      ? 'bg-[var(--c-C0C0C0)] hover:bg-[var(--c-D0D0D0)]'
-                      : 'bg-[var(--c-C0C0C0)]'
+                      ? 'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
+                      : 'bg-[var(--c-383838)] dark:bg-[var(--c-E0E0E0)]'
                   )}
                   title='Stop generation'
                 >
                   {isAborting ? (
-                    <Loader2 className='block h-[13px] w-[13px] animate-spin text-black' />
+                    <Loader2 className='block h-[13px] w-[13px] animate-spin text-white dark:text-black' />
                   ) : (
                     <svg
-                      className='block h-[13px] w-[13px]'
+                      className='block h-[13px] w-[13px] fill-white dark:fill-black'
                       viewBox='0 0 24 24'
-                      fill='black'
                       xmlns='http://www.w3.org/2000/svg'
                     >
                       <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
@@ -785,16 +784,19 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   }}
                   disabled={!canSubmit}
                   className={cn(
-                    'h-[22px] w-[22px] rounded-full p-0 transition-colors',
+                    'h-[22px] w-[22px] rounded-full border-0 p-0 transition-colors',
                     canSubmit
-                      ? 'bg-[var(--c-C0C0C0)] hover:bg-[var(--c-D0D0D0)]'
-                      : 'bg-[var(--c-C0C0C0)]'
+                      ? 'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
+                      : 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
                   )}
                 >
                   {isLoading ? (
-                    <Loader2 className='block h-3.5 w-3.5 animate-spin text-black' />
+                    <Loader2 className='block h-3.5 w-3.5 animate-spin text-white dark:text-black' />
                   ) : (
-                    <ArrowUp className='block h-3.5 w-3.5 text-black' strokeWidth={2.25} />
+                    <ArrowUp
+                      className='block h-3.5 w-3.5 text-white dark:text-black'
+                      strokeWidth={2.25}
+                    />
                   )}
                 </Button>
               )}

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

@@ -1,12 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
+import { PANEL_WIDTH } from '@/stores/constants'
 import { usePanelStore } from '@/stores/panel/store'
 
-/**
- * Constants for panel sizing
- */
-const MIN_WIDTH = 244
-const MAX_WIDTH_PERCENTAGE = 0.4 // 40% of viewport width
-
 /**
  * Custom hook to handle panel resize functionality.
  * Manages mouse events for resizing and enforces min/max width constraints.
@@ -35,9 +30,9 @@ export function usePanelResize() {
     const handleMouseMove = (e: MouseEvent) => {
       // Calculate width from the right edge of the viewport
       const newWidth = window.innerWidth - e.clientX
-      const maxWidth = window.innerWidth * MAX_WIDTH_PERCENTAGE
+      const maxWidth = window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE
 
-      if (newWidth >= MIN_WIDTH && newWidth <= maxWidth) {
+      if (newWidth >= PANEL_WIDTH.MIN && newWidth <= maxWidth) {
         setPanelWidth(newWidth)
       }
     }

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
+import { OUTPUT_PANEL_WIDTH } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
-const MIN_WIDTH = 440
 const BLOCK_COLUMN_WIDTH = 240
 
 export function useOutputPanelResize() {
@@ -26,7 +26,7 @@ export function useOutputPanelResize() {
       const newWidth = window.innerWidth - e.clientX - panelWidth
       const terminalWidth = window.innerWidth - sidebarWidth - panelWidth
       const maxWidth = terminalWidth - BLOCK_COLUMN_WIDTH
-      const clampedWidth = Math.max(MIN_WIDTH, Math.min(newWidth, maxWidth))
+      const clampedWidth = Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth))
 
       setOutputPanelWidth(clampedWidth)
     }

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

@@ -44,6 +44,7 @@ import {
   useTerminalResize,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks'
 import { getBlock } from '@/blocks'
+import { OUTPUT_PANEL_WIDTH, TERMINAL_HEIGHT } from '@/stores/constants'
 import { useCopilotTrainingStore } from '@/stores/copilot-training/store'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import type { ConsoleEntry } from '@/stores/terminal'
@@ -53,15 +54,15 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 /**
  * Terminal height configuration constants
  */
-const MIN_HEIGHT = 30
+const MIN_HEIGHT = TERMINAL_HEIGHT.MIN
 const NEAR_MIN_THRESHOLD = 40
-const DEFAULT_EXPANDED_HEIGHT = 155
+const DEFAULT_EXPANDED_HEIGHT = TERMINAL_HEIGHT.DEFAULT
 
 /**
  * Column width constants - numeric values for calculations
  */
 const BLOCK_COLUMN_WIDTH_PX = 240
-const MIN_OUTPUT_PANEL_WIDTH_PX = 440
+const MIN_OUTPUT_PANEL_WIDTH_PX = OUTPUT_PANEL_WIDTH.MIN
 
 /**
  * Column width constants - Tailwind classes for styling