feat(workflow-renderer): extract pure SubBlockRowView from the block's summary row

Splits the canvas block's collapsed subblock summary row into a pure SubBlockRowView (title + resolved displayValue + monospace flag) in @sim/workflow-renderer. The ~9 selector-name hydration hooks stay in the SubBlockRow container behind its memo comparator; the view receives only resolved strings. Byte-identical row JSX. First step toward the full WorkflowBlockView.

Author: waleedlatif1

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

@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
-import { HANDLE_POSITIONS } from '@sim/workflow-renderer'
+import { HANDLE_POSITIONS, SubBlockRowView } from '@sim/workflow-renderer'
 import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
 import { Handle, type NodeProps, Position, useUpdateNodeInternals } from 'reactflow'
@@ -371,25 +371,7 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-2'>
-      <span
-        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
-        title={title}
-      >
-        {title}
-      </span>
-      {displayValue !== undefined && (
-        <span
-          className={cn(
-            'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
-            isMonospaceField && 'font-mono'
-          )}
-          title={displayValue}
-        >
-          {displayValue}
-        </span>
-      )}
-    </div>
+    <SubBlockRowView title={title} displayValue={displayValue} isMonospace={isMonospaceField} />
   )
 }, areSubBlockRowPropsEqual)
 

packages/workflow-renderer/src/index.ts

@@ -7,3 +7,4 @@ export {
   type SubflowNodeViewProps,
 } from './subflow/subflow-node-view'
 export type { BlockRunStatus, DiffStatus, EdgeDiffStatus, EdgeRunStatus } from './types'
+export { SubBlockRowView, type SubBlockRowViewProps } from './workflow-block/sub-block-row-view'

packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx

@@ -0,0 +1,44 @@
+import { cn } from '@sim/emcn'
+
+/**
+ * Props for the pure subblock summary row. The container resolves the value —
+ * including all selector-name hydration (credentials, knowledge bases, tables,
+ * MCP servers/tools, sub-workflows, skills, …) — and passes only the final
+ * strings, so this view carries no store, query, or registry coupling.
+ */
+export interface SubBlockRowViewProps {
+  /** Subblock label, rendered capitalized on the left. */
+  title: string
+  /** Resolved display value on the right; `undefined` hides the value span. */
+  displayValue?: string
+  /** Render the value in a monospace font (e.g. filter expressions). */
+  isMonospace?: boolean
+}
+
+/**
+ * Pure renderer for a collapsed block's subblock summary row: a capitalized
+ * title and its resolved display value.
+ */
+export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
+  return (
+    <div className='flex items-center gap-2'>
+      <span
+        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
+        title={title}
+      >
+        {title}
+      </span>
+      {displayValue !== undefined && (
+        <span
+          className={cn(
+            'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
+            isMonospace && 'font-mono'
+          )}
+          title={displayValue}
+        >
+          {displayValue}
+        </span>
+      )}
+    </div>
+  )
+}