feat(terminal): height memory

Author: emir-karabeg

.cursorrules

@@ -8,7 +8,7 @@ ENSURE that you use the logger.info and logger.warn and logger.error instead of
 
 ## Comments
 
-You must use TSDOC for comments. Do not use ==== for comments to separate sections.
+You must use TSDOC for comments. Do not use ==== for comments to separate sections. Do not leave any comments that are not TSDOC. 
 
 ## Globals styles
 

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

@@ -1,8 +1,10 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
+import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
@@ -11,6 +13,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const logger = createLogger('DiffControls')
 
 export const DiffControls = memo(function DiffControls() {
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
   // Optimized: Single diff store subscription
   const {
     isShowingDiff,
@@ -312,7 +315,10 @@ export const DiffControls = memo(function DiffControls() {
 
   return (
     <div
-      className='-translate-x-1/2 fixed left-1/2 z-30'
+      className={clsx(
+        '-translate-x-1/2 fixed left-1/2 z-30',
+        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+      )}
       style={{ bottom: 'calc(var(--terminal-height) + 40px)' }}
     >
       <div className='flex items-center gap-[6px] rounded-[10px] p-[6px]'>

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

@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
@@ -10,6 +11,7 @@ import {
   openCopilotWithMessage,
   useNotificationStore,
 } from '@/stores/notifications'
+import { useTerminalStore } from '@/stores/terminal'
 
 const logger = createLogger('Notifications')
 const MAX_VISIBLE_NOTIFICATIONS = 4
@@ -29,6 +31,7 @@ export const Notifications = memo(function Notifications() {
   const removeNotification = useNotificationStore((state) => state.removeNotification)
   const clearNotifications = useNotificationStore((state) => state.clearNotifications)
   const visibleNotifications = notifications.slice(0, MAX_VISIBLE_NOTIFICATIONS)
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
 
   /**
    * Executes a notification action and handles side effects.
@@ -95,7 +98,12 @@ export const Notifications = memo(function Notifications() {
   }
 
   return (
-    <div className='fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end'>
+    <div
+      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'
+      )}
+    >
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {
         const depth = stacked.length - index - 1
         const xOffset = depth * 3

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTerminalStore } from '@/stores/terminal'
 
 /**
@@ -15,15 +15,14 @@ const MAX_HEIGHT_PERCENTAGE = 0.7 // 70% of viewport height
  * @returns Resize state and handlers
  */
 export function useTerminalResize() {
-  const { setTerminalHeight } = useTerminalStore()
-  const [isResizing, setIsResizing] = useState(false)
+  const { setTerminalHeight, isResizing, setIsResizing } = useTerminalStore()
 
   /**
    * Handles mouse down on resize handle
    */
   const handleMouseDown = useCallback(() => {
     setIsResizing(true)
-  }, [])
+  }, [setIsResizing])
 
   /**
    * Setup resize event listeners and body styles when resizing
@@ -57,7 +56,7 @@ export function useTerminalResize() {
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
-  }, [isResizing, setTerminalHeight])
+  }, [isResizing, setTerminalHeight, setIsResizing])
 
   return {
     isResizing,

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

@@ -35,11 +35,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks'
 import { getBlock } from '@/blocks'
 import type { ConsoleEntry } from '@/stores/terminal'
-import {
-  DEFAULT_TERMINAL_HEIGHT,
-  useTerminalConsoleStore,
-  useTerminalStore,
-} from '@/stores/terminal'
+import { useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 /**
@@ -254,9 +250,11 @@ const isEventFromEditableElement = (e: KeyboardEvent): boolean => {
 export function Terminal() {
   const terminalRef = useRef<HTMLElement>(null)
   const prevEntriesLengthRef = useRef(0)
+  const prevWorkflowEntriesLengthRef = useRef(0)
   const {
     terminalHeight,
     setTerminalHeight,
+    lastExpandedHeight,
     outputPanelWidth,
     setOutputPanelWidth,
     openOnRun,
@@ -301,6 +299,22 @@ export function Terminal() {
 
   const isExpanded = terminalHeight > NEAR_MIN_THRESHOLD
 
+  /**
+   * Expands the terminal to its last meaningful height, with safeguards:
+   * - Never expands below {@link DEFAULT_EXPANDED_HEIGHT}.
+   * - Never exceeds 70% of the viewport height.
+   */
+  const expandToLastHeight = useCallback(() => {
+    setIsToggling(true)
+    const maxHeight = window.innerHeight * 0.7
+    const desiredHeight = Math.max(
+      lastExpandedHeight || DEFAULT_EXPANDED_HEIGHT,
+      DEFAULT_EXPANDED_HEIGHT
+    )
+    const targetHeight = Math.min(desiredHeight, maxHeight)
+    setTerminalHeight(targetHeight)
+  }, [lastExpandedHeight, setTerminalHeight])
+
   /**
    * Get all entries for current workflow (before filtering) for filter options
    */
@@ -404,6 +418,28 @@ export function Terminal() {
     return selectedEntry.output
   }, [selectedEntry, showInput])
 
+  /**
+   * Auto-open the terminal on new entries when "Open on run" is enabled.
+   * This mirrors the header toggle behavior by using expandToLastHeight,
+   * ensuring we always get the same smooth height transition.
+   */
+  useEffect(() => {
+    if (!openOnRun) {
+      prevWorkflowEntriesLengthRef.current = allWorkflowEntries.length
+      return
+    }
+
+    const previousLength = prevWorkflowEntriesLengthRef.current
+    const currentLength = allWorkflowEntries.length
+
+    // Only react when new entries are added for the active workflow
+    if (currentLength > previousLength && terminalHeight <= MIN_HEIGHT) {
+      expandToLastHeight()
+    }
+
+    prevWorkflowEntriesLengthRef.current = currentLength
+  }, [allWorkflowEntries.length, expandToLastHeight, openOnRun, terminalHeight])
+
   /**
    * Handle row click - toggle if clicking same entry
    * Disables auto-selection when user manually selects, re-enables when deselecting
@@ -421,14 +457,13 @@ export function Terminal() {
    * Handle header click - toggle between expanded and collapsed
    */
   const handleHeaderClick = useCallback(() => {
-    setIsToggling(true)
-
     if (isExpanded) {
+      setIsToggling(true)
       setTerminalHeight(MIN_HEIGHT)
     } else {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
+      expandToLastHeight()
     }
-  }, [isExpanded, setTerminalHeight])
+  }, [expandToLastHeight, isExpanded, setTerminalHeight])
 
   /**
    * Handle transition end - reset toggling state
@@ -628,10 +663,7 @@ export function Terminal() {
       e.preventDefault()
 
       if (!isExpanded) {
-        setIsToggling(true)
-        const maxHeight = window.innerHeight * 0.7
-        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-        setTerminalHeight(targetHeight)
+        expandToLastHeight()
       }
 
       if (e.key === 'ArrowLeft') {
@@ -647,7 +679,7 @@ export function Terminal() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedEntry, showInput, hasInputData, isExpanded])
+  }, [expandToLastHeight, selectedEntry, showInput, hasInputData, isExpanded])
 
   /**
    * Handle Escape to unselect and Enter to re-enable auto-selection
@@ -1188,10 +1220,7 @@ export function Terminal() {
                     onClick={(e) => {
                       e.stopPropagation()
                       if (!isExpanded) {
-                        setIsToggling(true)
-                        const maxHeight = window.innerHeight * 0.7
-                        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                        setTerminalHeight(targetHeight)
+                        expandToLastHeight()
                       }
                       if (showInput) setShowInput(false)
                     }}
@@ -1209,10 +1238,7 @@ export function Terminal() {
                       onClick={(e) => {
                         e.stopPropagation()
                         if (!isExpanded) {
-                          setIsToggling(true)
-                          const maxHeight = window.innerHeight * 0.7
-                          const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                          setTerminalHeight(targetHeight)
+                          expandToLastHeight()
                         }
                         setShowInput(true)
                       }}

apps/sim/stores/terminal/console/store.ts

@@ -7,7 +7,6 @@ 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')
 
@@ -130,16 +129,6 @@ 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
         },