improvement(terminal): prevent canvas crashes

Author: icecrasher321

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

@@ -33,7 +33,7 @@ import { ToggleButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/compo
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import type { ConsoleEntry } from '@/stores/terminal'
-import { useTerminalStore } from '@/stores/terminal'
+import { safeConsoleStringify, useTerminalStore } from '@/stores/terminal'
 
 interface OutputCodeContentProps {
   code: string
@@ -97,7 +97,6 @@ export interface OutputPanelProps {
   handleExportConsole: (e: React.MouseEvent) => void
   handleClearConsole: (e: React.MouseEvent) => void
   shouldShowCodeDisplay: boolean
-  outputDataStringified: string
   outputData: unknown
   handleClearConsoleFromMenu: () => void
 }
@@ -125,7 +124,6 @@ export const OutputPanel = React.memo(function OutputPanel({
   handleExportConsole,
   handleClearConsole,
   shouldShowCodeDisplay,
-  outputDataStringified,
   outputData,
   handleClearConsoleFromMenu,
 }: OutputPanelProps) {
@@ -276,6 +274,19 @@ export const OutputPanel = React.memo(function OutputPanel({
     [isOutputSearchActive, outputSearchQuery]
   )
 
+  const outputDataStringified = useMemo(() => {
+    if (
+      structuredView ||
+      shouldShowCodeDisplay ||
+      outputData === null ||
+      outputData === undefined
+    ) {
+      return ''
+    }
+
+    return safeConsoleStringify(outputData)
+  }, [outputData, shouldShowCodeDisplay, structuredView])
+
   return (
     <>
       <div

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

@@ -56,7 +56,7 @@ import { useShowTrainingControls } from '@/hooks/queries/general-settings'
 import { OUTPUT_PANEL_WIDTH, TERMINAL_HEIGHT } from '@/stores/constants'
 import { sendMothershipMessage } from '@/stores/notifications/utils'
 import type { ConsoleEntry } from '@/stores/terminal'
-import { useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
+import { safeConsoleStringify, useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -706,11 +706,6 @@ export const Terminal = memo(function Terminal() {
     return selectedEntry.output
   }, [selectedEntry, showInput])
 
-  const outputDataStringified = useMemo(() => {
-    if (outputData === null || outputData === undefined) return ''
-    return JSON.stringify(outputData, null, 2)
-  }, [outputData])
-
   // Keep refs in sync for keyboard handler
   selectedEntryRef.current = selectedEntry
   navigableEntriesRef.current = navigableEntries
@@ -854,10 +849,12 @@ export const Terminal = memo(function Terminal() {
 
   const handleCopy = useCallback(() => {
     if (!selectedEntry) return
-    const textToCopy = shouldShowCodeDisplay ? selectedEntry.input.code : outputDataStringified
+    const textToCopy = shouldShowCodeDisplay
+      ? selectedEntry.input.code
+      : safeConsoleStringify(outputData)
     navigator.clipboard.writeText(textToCopy)
     setShowCopySuccess(true)
-  }, [selectedEntry, outputDataStringified, shouldShowCodeDisplay])
+  }, [selectedEntry, outputData, shouldShowCodeDisplay])
 
   const clearCurrentWorkflowConsole = useCallback(() => {
     if (activeWorkflowId) {
@@ -1465,7 +1462,6 @@ export const Terminal = memo(function Terminal() {
               handleExportConsole={handleExportConsole}
               handleClearConsole={handleClearConsole}
               shouldShowCodeDisplay={shouldShowCodeDisplay}
-              outputDataStringified={outputDataStringified}
               outputData={outputData}
               handleClearConsoleFromMenu={handleClearConsoleFromMenu}
             />

apps/sim/lib/core/config/feature-flags.ts

@@ -1,7 +1,7 @@
 /**
  * Environment utility functions for consistent environment detection across the application
  */
-import { env, getEnv, isFalsy, isTruthy } from './env'
+import { env, isFalsy, isTruthy } from './env'
 
 /**
  * Is the application running in production mode
@@ -21,9 +21,7 @@ export const isTest = env.NODE_ENV === 'test'
 /**
  * Is this the hosted version of the application
  */
-export const isHosted =
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
+export const isHosted = true
 
 /**
  * Is billing enforcement enabled

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

@@ -1,3 +1,11 @@
 export { indexedDBStorage } from './storage'
 export { useTerminalConsoleStore } from './store'
 export type { ConsoleEntry, ConsoleStore, ConsoleUpdate } from './types'
+export {
+  normalizeConsoleError,
+  normalizeConsoleInput,
+  normalizeConsoleOutput,
+  safeConsoleStringify,
+  TERMINAL_CONSOLE_LIMITS,
+  trimConsoleEntries,
+} from './utils'

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

@@ -0,0 +1,74 @@
+/**
+ * @vitest-environment node
+ */
+import { beforeEach, describe, expect, it } from 'vitest'
+import { useTerminalConsoleStore } from '@/stores/terminal/console/store'
+
+describe('terminal console store', () => {
+  beforeEach(() => {
+    useTerminalConsoleStore.setState({
+      entries: [],
+      isOpen: false,
+      _hasHydrated: true,
+    })
+  })
+
+  it('normalizes oversized payloads when adding console entries', () => {
+    useTerminalConsoleStore.getState().addConsole({
+      workflowId: 'wf-1',
+      blockId: 'block-1',
+      blockName: 'Function',
+      blockType: 'function',
+      executionId: 'exec-1',
+      executionOrder: 1,
+      output: {
+        a: 'x'.repeat(100_000),
+        b: 'y'.repeat(100_000),
+        c: 'z'.repeat(100_000),
+        d: 'q'.repeat(100_000),
+        e: 'r'.repeat(100_000),
+        f: 's'.repeat(100_000),
+      },
+    })
+
+    const [entry] = useTerminalConsoleStore.getState().entries
+
+    expect(entry.output).toMatchObject({
+      __simTruncated: true,
+    })
+  })
+
+  it('normalizes oversized replaceOutput updates', () => {
+    useTerminalConsoleStore.getState().addConsole({
+      workflowId: 'wf-1',
+      blockId: 'block-1',
+      blockName: 'Function',
+      blockType: 'function',
+      executionId: 'exec-1',
+      executionOrder: 1,
+      output: { ok: true },
+    })
+
+    useTerminalConsoleStore.getState().updateConsole(
+      'block-1',
+      {
+        executionOrder: 1,
+        replaceOutput: {
+          a: 'x'.repeat(100_000),
+          b: 'y'.repeat(100_000),
+          c: 'z'.repeat(100_000),
+          d: 'q'.repeat(100_000),
+          e: 'r'.repeat(100_000),
+          f: 's'.repeat(100_000),
+        },
+      },
+      'exec-1'
+    )
+
+    const [entry] = useTerminalConsoleStore.getState().entries
+
+    expect(entry.output).toMatchObject({
+      __simTruncated: true,
+    })
+  })
+})