Generate
@@ -1244,6 +1245,7 @@ function SubBlockComponent({
onMouseDown={handleMouseDown}
data-workflow-search-subblock-id={config.id}
data-workflow-search-canonical-id={config.canonicalParamId ?? config.id}
+ data-preview-readonly={(isPreview && !disabled) || undefined}
className='subblock-content flex flex-col gap-2.5'
>
{renderLabel(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 61bd02da17b..9222584ba9e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -24,6 +24,7 @@ import { useParams } from 'next/navigation'
import { usePostHog } from 'posthog-js/react'
import { useShallow } from 'zustand/react/shallow'
import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
import { isMcpRuntimeReference } from '@/lib/mcp/operation-policy'
import { resolveMcpBlockConfig } from '@/lib/mcp/workflow-config'
import { captureEvent } from '@/lib/posthog/client'
@@ -610,21 +611,12 @@ export function Editor() {
lightweight
/>
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 7eb787be542..daa24590d8e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -66,7 +66,8 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
code={code}
showGutter
language={language}
- className='m-0 min-h-full rounded-none border-0 bg-[var(--bg)] dark:bg-[var(--bg)]'
+ appearance='flat'
+ className='m-0 min-h-full'
paddingLeft={8}
gutterStyle={{ backgroundColor: 'transparent' }}
wrapText={wrapText}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index b51a54f5277..bba86b895e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -30,6 +30,7 @@ import {
import { formatDuration } from '@sim/utils/formatting'
import { ReactFlowProvider } from '@xyflow/react'
import { useParams } from 'next/navigation'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
import {
buildCanonicalIndexForSurface,
@@ -42,6 +43,7 @@ import {
import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
import { getBlock } from '@/blocks'
import { BlockTile } from '@/blocks/block-tile'
@@ -53,31 +55,6 @@ import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
import { useContextMenu } from '@/hooks/use-context-menu'
import type { BlockState, Loop, Parallel, WorkflowState } from '@/stores/workflows/workflow/types'
-/**
- * CSS override to show full opacity and prevent interaction in readonly preview mode.
- * Extracted to avoid duplicating the style block in multiple places.
- */
-const READONLY_PREVIEW_STYLES = `
- .readonly-preview,
- .readonly-preview * {
- cursor: default !important;
- }
- .readonly-preview [disabled],
- .readonly-preview [data-disabled],
- .readonly-preview input,
- .readonly-preview textarea,
- .readonly-preview [role="combobox"],
- .readonly-preview [role="slider"],
- .readonly-preview [role="switch"],
- .readonly-preview [role="checkbox"] {
- opacity: 1 !important;
- pointer-events: none;
- }
- .readonly-preview .opacity-50 {
- opacity: 1 !important;
- }
-`
-
/**
* Format a value for display as JSON string
*/
@@ -605,7 +582,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
return (
{/* Type Selection - matches SubflowEditor */}
-
+
@@ -628,7 +605,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
{isCountMode ? (
-
+
-
-
-
-
-
- {isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
-
-
+
+ {isExecutionMode && onDrillDown ? (
+
+ ) : (
+
+ )}
+
) : (
@@ -1443,7 +1409,6 @@ function PreviewEditorContent({
...subBlockValues,
__canonicalModes: canonicalModeOverrides,
}}
- disabled={true}
/>
{index < visibleSubBlocks.length - 1 && (
({ useParams: () => ({ workspaceId: 'workspace-1' }) }))
+vi.mock('@/hooks/use-webhook-management', () => ({
+ useWebhookManagement: () => ({ webhookUrl: null }),
+}))
+vi.mock(
+ '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+ () => ({ useSubBlockValue: () => [undefined, vi.fn()] })
+)
+
+import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
+import type { SubBlockConfig } from '@/blocks/types'
+
+const config: SubBlockConfig = { id: 'enabled', type: 'switch', title: 'Enabled' }
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+ ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+})
+
+afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+})
+
+describe('workflow preview read-only appearance', () => {
+ it('shows a preview value at full opacity while retaining the disabled interaction state', () => {
+ act(() =>
+ root.render(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+