Workflow Node Canvas Summary Rendering#

When a workflow node is collapsed on the canvas, each node type renders a compact summary of its configured parameters via a dedicated node.tsx component. These components live at web/app/components/workflow/nodes/<node-type>/node.tsx and are rendered inside the node card. They are read-only displays — configuration happens in the panel, not on the card.

All summary components follow the same shell convention:

• Return null when the node has no meaningful configuration to display 1
• Wrap content in <div className="relative mb-1 px-3 py-1"> 2
• Use bg-workflow-block-parma-bg as the row background for parameter chips 3
• Apply w-0 grow truncate text-right on the value side for responsive overflow 4

Parameter Type Rendering Reference#

Model selectors#

The LLM 5 and Parameter Extractor 6 nodes render the ModelSelector component from web/app/components/header/account-setting/model-provider-page/model-selector in disabled mode, which shows the provider icon and model name as a compact badge.

import { ModelSelector } from '@/app/components/model-selector'

<ModelSelector value={{ provider, model: modelId }} models={textGenerationModelList} size="small" disabled />

The Tool node handles model-selector-typed configuration entries separately — it inspects tool_configurations[key]?.type === FormTypeEnum.modelSelector and displays only the .model field as a plain text string (not a full ModelSelector widget).

File / variable references#

File variables and other variable references are rendered via VariableLabelInNode — a memoized wrapper around the base VariableLabel with node-specific styling (w-full bg-workflow-block-parma-bg px-1 shadow-none). It renders a badge containing:

• VariableNodeLabel — source node icon + title 7
• VariableIcon — semantic icon for the variable type 8
• VariableName — variable path, optionally abbreviated when depth > 2 9

The Document Extractor node uses this directly for its variable_selector field 10. Variable color-coding is applied by useVarColor() in hooks.ts: exception variables → warning, loop → cyan, environment → violet, conversation → teal, global → orange, default → text-accent.

Special variable categories (env, conversation, global, RAG, system) are detected by helpers in variable/utils.ts and skip the source-node label in the badge.

Arrays / multi-select values#

In the Tool node, array-typed configuration values are detected with Array.isArray() and joined into a comma-separated string 11:

{tool_configurations[key].value.join(', ')}

String and number constants#

The Tool node dispatches on typeof at render time 12:

• string → rendered directly (masked as '********' if FormTypeEnum.secretInput)
• number → rendered as-is; NaN is shown as empty string

Inline variable references in text (template syntax)#

Nodes that display mixed text + variable content (e.g., HTTP url, Answer text) use ReadonlyInputWithSelectVar. It parses {{#variable.path#}} patterns, splits the string around them, and renders each variable segment as a VariableLabelInText badge inline. If the variable path has more than two segments, notShowFullPath=true truncates the display 13.

Dataset lists#

The Knowledge Retrieval node renders a list of dataset chips with AppIcon + name 14. Each chip uses the standard bg-workflow-block-parma-bg row style with w-0 grow truncate for the dataset name.

Condition groups#

The If-Else node renders each condition branch using a ConditionValue component, with AND/OR logical operator labels between conditions 15. Unset conditions show a placeholder row with "condition not set up."

Shared Base Components#

Adding a New Node Summary#

To add a canvas summary to a new node type:

1. Create web/app/components/workflow/nodes/<type>/node.tsx exporting a memoized FC<NodeProps<YourNodeType>>.
2. Return null if the node has no configured data worth showing.
3. Wrap content in <div className="relative mb-1 px-3 py-1">.
4. Reuse the shared base components above for consistency — avoid one-off layout or color choices.
5. Register the component in the node registry (look for how existing nodes wire node.tsx into the card renderer, typically through the block definitions in web/app/components/workflow/nodes/_base).