improvement: terminal expand, variables styling; refactor(float): hooks

emir-karabeg · emir-karabeg · commit fbf7455faecf · 2025-11-22T16:55:23.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -28,13 +28,13 @@ import {
   ChatMessage,
   OutputSelect,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components'
-import {
-  useChatBoundarySync,
-  useChatDrag,
-  useChatFileUpload,
-  useChatResize,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
+import { useChatFileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
 import { useScrollManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import type { BlockLog, ExecutionResult } from '@/executor/types'
 import { getChatPosition, useChatStore } from '@/stores/chat/store'
@@ -312,15 +312,15 @@ export function Chat() {
   )
 
   // Drag hook
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
     onPositionChange: setChatPosition,
   })
 
   // Boundary sync hook - keeps chat within bounds when layout changes
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen: isChatOpen,
     position: actualPosition,
     width: chatWidth,
@@ -334,7 +334,7 @@ export function Chat() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
@@ -1,5 +1 @@
-export { useChatBoundarySync } from './use-chat-boundary-sync'
-export { useChatDrag } from './use-chat-drag'
-export type { ChatFile } from './use-chat-file-upload'
-export { useChatFileUpload } from './use-chat-file-upload'
-export { useChatResize } from './use-chat-resize'
+export { type ChatFile, useChatFileUpload } from './use-chat-file-upload'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { Input, Label } from '@/components/emcn'
 import { getEmailDomain } from '@/lib/urls/utils'
 import { cn } from '@/lib/utils'
-import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation'
+import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation'
 
 interface IdentifierInputProps {
   value: string
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -43,7 +43,6 @@ import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspace
 import { useChatStore } from '@/stores/chat/store'
 import { usePanelStore } from '@/stores/panel/store'
 import type { PanelTab } from '@/stores/panel/types'
-import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '@/stores/terminal'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowJsonStore } from '@/stores/workflows/json/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -143,10 +142,6 @@ export function Panel() {
       openSubscriptionSettings()
       return
     }
-    const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
-    if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
-    }
     await handleRunWorkflow()
   }, [usageExceeded, handleRunWorkflow])
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -18,12 +18,23 @@ import {
 import { Label } from '@/components/emcn/components/label/label'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn, validateName } from '@/lib/utils'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useVariablesStore as usePanelVariablesStore } from '@/stores/panel/variables/store'
-import { getVariablesPosition, useVariablesStore } from '@/stores/variables/store'
+import {
+  getVariablesPosition,
+  MAX_VARIABLES_HEIGHT,
+  MAX_VARIABLES_WIDTH,
+  MIN_VARIABLES_HEIGHT,
+  MIN_VARIABLES_WIDTH,
+  useVariablesStore,
+} from '@/stores/variables/store'
 import type { Variable } from '@/stores/variables/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useChatBoundarySync, useChatDrag, useChatResize } from '../chat/hooks'
 
 /**
  * Type options for variable type selection
@@ -41,7 +52,7 @@ const TYPE_OPTIONS: ComboboxOption[] = [
  */
 const BADGE_HEIGHT = 20
 const BADGE_TEXT_SIZE = 13
-const ICON_SIZE = 14
+const ICON_SIZE = 13
 const HEADER_ICON_SIZE = 16
 const LINE_HEIGHT = 21
 const MIN_EDITOR_HEIGHT = 120
@@ -96,14 +107,14 @@ export function Variables() {
     [position, width, height]
   )
 
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
   })
 
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen,
     position: actualPosition,
     width,
@@ -116,12 +127,16 @@ export function Variables() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
     onDimensionsChange: setDimensions,
+    minWidth: MIN_VARIABLES_WIDTH,
+    minHeight: MIN_VARIABLES_HEIGHT,
+    maxWidth: MAX_VARIABLES_WIDTH,
+    maxHeight: MAX_VARIABLES_HEIGHT,
   })
 
   const [collapsedById, setCollapsedById] = useState<Record<string, boolean>>({})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -2,6 +2,7 @@ export { useAutoLayout } from './use-auto-layout'
 export { useBlockCore } from './use-block-core'
 export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
+export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './use-float'
 export { useNodeUtilities } from './use-node-utilities'
 export { useScrollManagement } from './use-scroll-management'
 export { useWorkflowExecution } from './use-workflow-execution'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
@@ -0,0 +1,3 @@
+export { useFloatBoundarySync } from './use-float-boundary-sync'
+export { useFloatDrag } from './use-float-drag'
+export { useFloatResize } from './use-float-resize'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 
-interface UseChatBoundarySyncProps {
+interface UseFloatBoundarySyncProps {
   isOpen: boolean
   position: { x: number; y: number }
   width: number
@@ -9,17 +9,17 @@ interface UseChatBoundarySyncProps {
 }
 
 /**
- * Hook to synchronize chat position with layout boundary changes
- * Keeps chat within bounds when sidebar, panel, or terminal resize
+ * Hook to synchronize floats position with layout boundary changes.
+ * Keeps the float within bounds when sidebar, panel, or terminal resize.
  * Uses requestAnimationFrame for smooth real-time updates
  */
-export function useChatBoundarySync({
+export function useFloatBoundarySync({
   isOpen,
   position,
   width,
   height,
   onPositionChange,
-}: UseChatBoundarySyncProps) {
+}: UseFloatBoundarySyncProps) {
   const rafIdRef = useRef<number | null>(null)
   const positionRef = useRef(position)
   const previousDimensionsRef = useRef({ sidebarWidth: 0, panelWidth: 0, terminalHeight: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
@@ -1,18 +1,18 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { constrainChatPosition } from '@/stores/chat/store'
 
-interface UseChatDragProps {
+interface UseFloatDragProps {
   position: { x: number; y: number }
   width: number
   height: number
   onPositionChange: (position: { x: number; y: number }) => void
 }
 
 /**
- * Hook for handling drag functionality of floating chat modal
+ * Hook for handling drag functionality of floats.
  * Provides mouse event handlers and manages drag state
  */
-export function useChatDrag({ position, width, height, onPositionChange }: UseChatDragProps) {
+export function useFloatDrag({ position, width, height, onPositionChange }: UseFloatDragProps) {
   const isDraggingRef = useRef(false)
   const dragStartRef = useRef({ x: 0, y: 0 })
   const initialPositionRef = useRef({ x: 0, y: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
@@ -6,12 +6,20 @@ import {
   MIN_CHAT_WIDTH,
 } from '@/stores/chat/store'
 
-interface UseChatResizeProps {
+interface UseFloatResizeProps {
   position: { x: number; y: number }
   width: number
   height: number
   onPositionChange: (position: { x: number; y: number }) => void
   onDimensionsChange: (dimensions: { width: number; height: number }) => void
+  /**
+   * Optional dimension constraints.
+   * If omitted, chat defaults are used for backward compatibility.
+   */
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
 }
 
 /**
@@ -34,16 +42,20 @@ type ResizeDirection =
 const EDGE_THRESHOLD = 8
 
 /**
- * Hook for handling multi-directional resize functionality of floating chat modal
- * Supports resizing from all 8 directions: 4 corners and 4 edges
+ * Hook for handling multi-directional resize functionality of floating panels.
+ * Supports resizing from all 8 directions: 4 corners and 4 edges.
  */
-export function useChatResize({
+export function useFloatResize({
   position,
   width,
   height,
   onPositionChange,
   onDimensionsChange,
-}: UseChatResizeProps) {
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: UseFloatResizeProps) {
   const [cursor, setCursor] = useState<string>('')
   const isResizingRef = useRef(false)
   const activeDirectionRef = useRef<ResizeDirection>(null)
@@ -285,9 +297,18 @@ export function useChatResize({
           break
       }
 
-      // Constrain dimensions to min/max
-      const constrainedWidth = Math.max(MIN_CHAT_WIDTH, Math.min(MAX_CHAT_WIDTH, newWidth))
-      const constrainedHeight = Math.max(MIN_CHAT_HEIGHT, Math.min(MAX_CHAT_HEIGHT, newHeight))
+      // Constrain dimensions to min/max. If explicit constraints are not provided,
+      // fall back to the chat defaults for backward compatibility.
+      const effectiveMinWidth = typeof minWidth === 'number' ? minWidth : MIN_CHAT_WIDTH
+      const effectiveMaxWidth = typeof maxWidth === 'number' ? maxWidth : MAX_CHAT_WIDTH
+      const effectiveMinHeight = typeof minHeight === 'number' ? minHeight : MIN_CHAT_HEIGHT
+      const effectiveMaxHeight = typeof maxHeight === 'number' ? maxHeight : MAX_CHAT_HEIGHT
+
+      const constrainedWidth = Math.max(effectiveMinWidth, Math.min(effectiveMaxWidth, newWidth))
+      const constrainedHeight = Math.max(
+        effectiveMinHeight,
+        Math.min(effectiveMaxHeight, newHeight)
+      )
 
       // Adjust position if dimensions were constrained on left/top edges
       if (direction === 'top-left' || direction === 'bottom-left' || direction === 'left') {
diff --git a/apps/sim/stores/terminal/console/store.ts b/apps/sim/stores/terminal/console/store.ts
@@ -7,6 +7,7 @@ import { useExecutionStore } from '@/stores/execution/store'
 import { useNotificationStore } from '@/stores/notifications'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import type { ConsoleEntry, ConsoleStore, ConsoleUpdate } from '@/stores/terminal/console/types'
+import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '../store'
 
 const logger = createLogger('TerminalConsoleStore')
 
@@ -129,6 +130,16 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
             }
           }
 
+          // Auto-expand terminal when new entries are appended and it is minimized
+          try {
+            const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
+            if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
+              setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
+            }
+          } catch (error) {
+            logger.error('Failed to auto-expand terminal on new console entry', { error })
+          }
+
           return newEntry
         },
 
diff --git a/apps/sim/stores/variables/store.ts b/apps/sim/stores/variables/store.ts
@@ -16,10 +16,10 @@ const logger = createLogger('VariablesModalStore')
 
 /**
  * Floating variables modal default dimensions.
- * Matches the chat modal baseline for visual consistency.
+ * Slightly larger than the chat modal for more comfortable editing.
  */
-const DEFAULT_WIDTH = 250
-const DEFAULT_HEIGHT = 286
+const DEFAULT_WIDTH = 320
+const DEFAULT_HEIGHT = 320
 
 /**
  * Minimum and maximum modal dimensions.

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export { useFloatBoundarySync } from './use-float-boundary-sync'`
	`2`	`+export { useFloatDrag } from './use-float-drag'`
	`3`	`+export { useFloatResize } from './use-float-resize'`