The User Interface system provides the visual layer for workflow design, execution monitoring, and workspace management. This document covers the frontend components, state management patterns, and user interaction flows that make up the Sim platform's UI.
The UI follows a hierarchical component structure with Next.js pages at the root, feature-specific layouts, and reusable components at the leaves. The entry point for the workflow editor is defined in workflow.tsx.
Sources: apps/sim/app/workspace/[workspaceId]/w/page.tsx:13-75, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:1-110, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:1-112
The UI uses Zustand stores for client-side state with a clear separation of concerns between metadata, workflow structure, and UI interactions.
Sources: apps/sim/stores/workflows/registry/store.ts43-225 apps/sim/stores/workflows/workflow/store.ts114-230 apps/sim/stores/operation-queue/store.ts96-100
The useWorkflowRegistry store manages a multi-phase hydration process to prevent data races when switching workspaces or workflows:
| Phase | Description | File Reference |
|---|---|---|
idle | Initial state or after workspace switch | apps/sim/stores/workflows/registry/store.ts18-24 |
state-loading | Fetching full workflow state from getWorkflowStateContract | apps/sim/stores/workflows/registry/store.ts85-91 |
ready | WorkflowStore and SubBlockStore populated | apps/sim/stores/workflows/registry/store.ts177-184 |
error | Failed to load workflow state | apps/sim/stores/workflows/registry/store.ts205-212 |
The sidebar provides workspace-level navigation with a collapsible design. It manages the hierarchy of folders and workflows using the WorkflowRegistry and FolderStore. For details, see Workspace Navigation & Sidebar.
The WorkspaceHeader component handles workspace switching, creation, and organization settings. It includes the CreateWorkspaceModal and InviteModal.
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx:88-109, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:62-62
Workflows and folders support complex interactions including:
createSidebarDragGhost and SIM_RESOURCES_DRAG_TYPE.useFolderStore.useSocket and the operation queue.Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:40-40, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:168-185, apps/sim/app/workspace/providers/socket-provider.tsx95-115
The Panel component is a resizable sidebar on the right side of the workflow canvas. It hosts the primary workflow configuration and interaction tools. For details, see Editor Panel.
The WorkflowBlock component renders individual nodes on the canvas, handling dynamic handles and sub-block visibility based on configuration. For details, see Block Configuration UI.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:106-110, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx:14-25
The Tables feature provides a spreadsheet-like interface for managing structured data. It supports column definitions, row operations, and real-time updates. For details, see Tables Feature.
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:36-36, apps/sim/app/workspace/providers/socket-provider.tsx131-133
The workflow canvas is powered by ReactFlow, supporting node types defined in nodeTypes and edge types in edgeTypes. It handles auto-layout and viewport management. For details, see Canvas Management.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:72-76, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:119-156
The UI implements a robust context menu system for sidebar items and a global search/command palette (⌘K) managed by useSearchModalStore. For details, see Context Menus & Interactions and Search & Command Modal.
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:59-59, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:64-67
The learning platform provides interactive sandbox exercises, while the Workspace Files feature handles multi-format file management. For details, see Sim Academy and Workspace Files.
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:26-30, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:98-98
Refresh this wiki