improvement(perf): eight verified cuts to workspace cold-load JavaScript

Second round of load-time work, adversarially verified for strict behaviour
preservation before implementation. Each item is an import-graph fix — none
changes what renders, when it renders, or any data path:

- knowledge/[id] imported one modal through the [documentId] components
  barrel, which also exports the chunk editor and therefore js-tiktoken
  (~2.5 MB gzip of BPE tables) on a route that never edits chunks. Deep
  import.
- prepareBlockState moved out of stores/workflows/utils.ts into its own
  module. It is the only function there needing the block registry and the
  generated tool-outputs artifact (~476 KB gzip), and utils.ts is reached by
  the persistent shell — so every workspace route paid for a canvas-only
  helper, including a module-scope JSON.parse of a 5.4 MB string.
- ExecutionSnapshot (the frozen-canvas modal) is now React.lazy behind its
  interaction gates, per the code-splitting procedure in sim-imports.md:
  deep import, dead barrel re-export deleted, sibling imports in log-details
  deepened to break the parent->child barrel cycle, local Suspense at both
  render sites. Takes ~7.6 MB of source off logs hydration.
- The api contracts barrel no longer re-exports ./tools, ./selectors, ./v1,
  or ./demo-requests (~58 KB gzip of Zod schema construction on every
  route). Zero importers used the barrel path for any of them.
- createCsvParser (streaming csv-parse, a Node Transform) moved to a
  server-only module so its stream polyfill leaves client bundles.
  Deliberately not re-exported from the lib/table barrel.
- jszip is dynamically imported at both remaining static call sites (skill
  zip extraction, pptx parsing) — both already-async, user-triggered paths,
  mirroring the existing pattern in workflow import-export.
- The desktop local-filesystem tool executor is dynamically imported in
  use-chat; a chunk-load failure now reports an error completion so the
  server-side tool call settles instead of hanging.

Production build, JS downloaded before the load event, vs the previous
release:

  /home       4.44 -> 3.87 MB   /logs    4.44 -> 3.64 MB
  /knowledge  4.22 -> 3.68 MB   /tables  4.17 -> 3.61 MB
  /files      4.68 -> 4.10 MB   /w/[id]  4.80 -> 4.67 MB
  /home total after idle prefetch: 8.15 -> 5.52 MB

The lazy snapshot was exercised end-to-end: its chunk loads when a log
detail opens (off the route's cold path, warm before the View Snapshot
click) and the modal renders without errors. Boundary baseline retightened.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -74,7 +74,6 @@ import {
   TERMINAL_SESSION_RESOURCE_ID,
 } from '@/lib/copilot/resources/types'
 import { executeBrowserToolOnClient } from '@/lib/copilot/tools/client/browser-tool-execution'
-import { executeLocalFilesystemTool } from '@/lib/copilot/tools/client/local-filesystem'
 import {
   bindRunToolToExecution,
   cancelRunToolExecution,
@@ -2009,11 +2008,36 @@ export function useChat(
         return
       }
       handledClientLocalFilesystemToolIdsRef.current.add(toolCallId)
-      executeLocalFilesystemTool(toolCallId, toolName, toolArgs, {
+      const options = {
         workspaceId,
         chatId: chatIdRef.current ?? selectedChatIdRef.current,
         signal: abortControllerRef.current?.signal,
-      })
+      }
+      /**
+       * Dynamic on purpose: the local-filesystem executor only runs for desktop-local
+       * VFS tool calls, and a static import kept it in the shared chat chunk on every
+       * surface that mounts the composer. The guard, the dedupe add, and the option
+       * capture above stay synchronous, so re-entrancy behaviour is unchanged. If the
+       * chunk fails to load (deploy skew), the server-side tool call must still settle:
+       * report an error completion rather than leaving it hanging with the dedupe ref
+       * already marked handled.
+       */
+      import('@/lib/copilot/tools/client/local-filesystem').then(
+        (m) => m.executeLocalFilesystemTool(toolCallId, toolName, toolArgs, options),
+        async (error) => {
+          logger.error('Failed to load local filesystem tool executor', { error })
+          const [{ reportClientToolCompletion }, { ASYNC_TOOL_CONFIRMATION_STATUS }] =
+            await Promise.all([
+              import('@/lib/copilot/tools/client/completion'),
+              import('@/lib/copilot/async-runs/lifecycle'),
+            ])
+          await reportClientToolCompletion(
+            toolCallId,
+            ASYNC_TOOL_CONFIRMATION_STATUS.error,
+            'Local filesystem tool failed to load'
+          )
+        }
+      )
     },
     [workspaceId]
   )

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -77,7 +77,13 @@ import {
   useFolderAncestors,
 } from '@/app/workspace/[workspaceId]/components/folders'
 import { DocumentsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
-import { DocumentTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components'
+/**
+ * Deep import on purpose: the `[documentId]/components` barrel also exports `ChunkEditor`,
+ * which needs exact token counts and therefore `js-tiktoken` (~2.5 MB gzip of BPE rank
+ * tables). Importing the modal through the barrel shipped the tokenizer to the document
+ * LIST route, which never edits chunks.
+ */
+import { DocumentTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal'
 import {
   ActionBar,
   AddConnectorModal,

apps/sim/app/workspace/[workspaceId]/logs/components/index.ts

@@ -1,6 +1,5 @@
 export { Dashboard } from './dashboard'
 export { LogDetails, LogDetailsContent } from './log-details'
-export { ExecutionSnapshot } from './log-details/components/execution-snapshot'
 export { FileCards } from './log-details/components/file-download'
 export { TraceView } from './log-details/components/trace-view'
 export { LogRowContextMenu } from './log-row-context-menu'

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/index.ts

@@ -1,6 +1,16 @@
 'use client'
 
-import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import {
+  lazy,
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   Badge,
   Button,
@@ -48,11 +58,13 @@ import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-s
 import type { TraceSpan } from '@/lib/logs/types'
 import { sendMothershipMessage } from '@/lib/mothership/events'
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
-import {
-  ExecutionSnapshot,
-  FileCards,
-  TraceView,
-} from '@/app/workspace/[workspaceId]/logs/components'
+/**
+ * Deep imports on purpose: importing these back through the parent `logs/components`
+ * barrel forms a parent->child cycle that would keep the barrel edge to the snapshot
+ * alive and silently defeat the ExecutionSnapshot lazy split below.
+ */
+import { FileCards } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/file-download'
+import { TraceView } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view'
 import { useLogDetailsResize } from '@/app/workspace/[workspaceId]/logs/hooks'
 import {
   logDetailsTabParam,
@@ -73,6 +85,17 @@ import { useLogDetailsUIStore } from '@/stores/logs/store'
 import { MAX_LOG_DETAILS_WIDTH_RATIO, MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
 import type { ChatContext } from '@/stores/panel'
 
+/**
+ * Lazy per the code-splitting rule in `sim-imports.md`: the snapshot renders the workflow
+ * preview canvas, whose graph is ~7.6 MB of source. Rendering is gated on the detail's
+ * open state, so the chunk is fetched on first use, never during SSR or hydration.
+ */
+const ExecutionSnapshot = lazy(() =>
+  import(
+    '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot'
+  ).then((m) => ({ default: m.ExecutionSnapshot }))
+)
+
 /**
  * Renders an already-apportioned integer credit value. `dollars` is only used
  * to distinguish a genuine zero ("0 credits") from a sub-credit charge that
@@ -679,13 +702,15 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
 
       {/* Frozen Canvas Modal */}
       {log.executionId && (
-        <ExecutionSnapshot
-          executionId={log.executionId}
-          traceSpans={traceSpans}
-          isModal
-          isOpen={isExecutionSnapshotOpen}
-          onClose={() => setIsExecutionSnapshotOpen(false)}
-        />
+        <Suspense fallback={null}>
+          <ExecutionSnapshot
+            executionId={log.executionId}
+            traceSpans={traceSpans}
+            isModal
+            isOpen={isExecutionSnapshotOpen}
+            onClose={() => setIsExecutionSnapshotOpen(false)}
+          />
+        </Suspense>
       )}
     </>
   )

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import {
+  lazy,
+  Suspense,
   useCallback,
   useEffect,
   useEffectEvent,
@@ -93,7 +95,7 @@ import { useDebounce } from '@/hooks/use-debounce'
 import { useUrlSort } from '@/hooks/use-url-sort'
 import { useFilterStore } from '@/stores/logs/filters/store'
 import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
-import { Dashboard, ExecutionSnapshot, LogDetails, LogRowContextMenu } from './components'
+import { Dashboard, LogDetails, LogRowContextMenu } from './components'
 import {
   formatDate,
   getDisplayStatus,
@@ -106,6 +108,20 @@ import {
   workflowEditorPath,
 } from './utils'
 
+/**
+ * Lazy per the code-splitting rule in `sim-imports.md`: the snapshot renders the workflow
+ * preview canvas, whose graph is ~7.6 MB of source (the editor's sub-block components and
+ * the generated tool metadata). Both render sites are gated on client-only state (a preview
+ * selection / an opened detail), so the chunk is fetched on first use, never during SSR or
+ * hydration. The now-dead barrel re-export is deleted — with no `sideEffects: false`, a
+ * leftover re-export would silently defeat this split.
+ */
+const ExecutionSnapshot = lazy(() =>
+  import(
+    '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot'
+  ).then((m) => ({ default: m.ExecutionSnapshot }))
+)
+
 const LOGS_PER_PAGE = 50 as const
 const REFRESH_SPINNER_DURATION_MS = 1000 as const
 const LIVE_REFRESH_INTERVAL_MS = 10_000 as const
@@ -1259,13 +1275,15 @@ export default function Logs() {
       />
 
       {previewLogId !== null && previewDetailQuery.data?.executionId && (
-        <ExecutionSnapshot
-          executionId={previewDetailQuery.data.executionId}
-          traceSpans={previewDetailQuery.data.executionData?.traceSpans}
-          isModal
-          isOpen={previewLogId !== null}
-          onClose={handleClosePreview}
-        />
+        <Suspense fallback={null}>
+          <ExecutionSnapshot
+            executionId={previewDetailQuery.data.executionId}
+            traceSpans={previewDetailQuery.data.executionData?.traceSpans}
+            isModal
+            isOpen={previewLogId !== null}
+            onClose={handleClosePreview}
+          />
+        </Suspense>
       )}
     </>
   )

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -1,4 +1,3 @@
-import JSZip from 'jszip'
 import { isApiClientError } from '@/lib/api/client/errors'
 
 export interface ParsedSkill {
@@ -91,6 +90,12 @@ function inferNameFromHeading(markdown: string): string {
 export async function extractSkillFromZip(
   data: File | Blob | ArrayBuffer | Uint8Array
 ): Promise<string> {
+  /**
+   * Dynamic on purpose (mirrors `lib/workflows/operations/import-export.ts`): jszip is
+   * ~28 KB gzip and this user-triggered upload path is the only reason it would sit in
+   * the initial bundle of every route that links the skills surface.
+   */
+  const { default: JSZip } = await import('jszip')
   const zip = await JSZip.loadAsync(data)
 
   const candidates: string[] = []

apps/sim/app/workspace/[workspaceId]/skills/components/utils.ts

@@ -151,8 +151,9 @@ import { useUndoRedoStore } from '@/stores/undo-redo'
 import { useVariablesModalStore } from '@/stores/variables/modal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowSearchReplaceStore } from '@/stores/workflow-search-replace/store'
+import { prepareBlockState } from '@/stores/workflows/prepare-block-state'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { getUniqueBlockName, prepareBlockState } from '@/stores/workflows/utils'
+import { getUniqueBlockName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 

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

@@ -1,3 +1,11 @@
+/**
+ * Deliberately NOT re-exported from this barrel: `./tools` (per-integration tool
+ * contracts), `./selectors`, `./v1` (admin API), and `./demo-requests`. All of their
+ * consumers import those files directly, and re-exporting them here shipped their Zod
+ * schema construction (~60 KB gzip) to every route that touches any contract — schema
+ * objects are built at module scope, so `export *` defeats tree-shaking for them.
+ * Import from the specific contract file instead.
+ */
 export * from './admin'
 export * from './api-keys'
 export * from './audit-logs'
@@ -7,7 +15,6 @@ export * from './cli-auth'
 export * from './common'
 export * from './copilot'
 export * from './credentials'
-export * from './demo-requests'
 export * from './desktop-auth'
 export * from './desktop-tool-authorization'
 export * from './environment'
@@ -23,15 +30,12 @@ export * from './primitives'
 export * from './sandboxes'
 export * from './secret-mount-policy'
 export * from './secrets'
-export * from './selectors'
 export * from './skills'
 export * from './storage-transfer'
 export * from './subscription'
 export * from './tool-primitives'
-export * from './tools'
 export * from './types'
 export * from './user'
-export * from './v1'
 export * from './workflows'
 export * from './workspace-file-folders'
 export * from './workspace-files'

apps/sim/lib/api/contracts/index.ts

@@ -4,7 +4,6 @@
  */
 
 import type { JSZipObject } from 'jszip'
-import JSZip from 'jszip'
 
 export interface PptxFiles {
   contentTypes: string
@@ -80,6 +79,9 @@ export async function parseZip(
     throwZipLimitExceeded(`maxConcurrency ${limits.maxConcurrency} must be an integer >= 1`)
   }
 
+  /** Dynamic on purpose — keeps jszip out of the initial bundle of routes that only
+   * *can* open a PPTX; the archive load below is already async. */
+  const { default: JSZip } = await import('jszip')
   const zip = await JSZip.loadAsync(buffer)
   const entries = Object.entries(zip.files).filter(([, file]) => !file.dir)