Smart Component Logic View

A Smart Component is a reusable piece of logic or UI that Creators can embed in any module across the workspace. It reads inputs, performs computations and state changes, and returns outputs every time a module uses it. Smart Component Logic View displays a component's internal logic as ordered chains. Creators can follow exactly what the component does: which values it reads, which steps it runs, and what it returns. Logic View is read-only and is available for Logic Smart Components and Query Smart Components.

Opening Logic View

There are two ways to open Logic View.

From the Smart Components Hub:

1. Select Library in the global header.
2. Select Smart Components Hub.
3. Select a component from the list to open it in the Smart Component Editor.
4. Select Logic in the view tabs.

Logic Smart Components and Query Smart Components open directly in Logic View. UI Smart Components open in UI View by default. Select Logic in the view tabs to switch.

From a module:

1. In the Module Builder, select a Smart Component on the canvas.
2. In the Properties panel, select Open in Library at the top of the component strip.
3. The component opens in the Smart Component Editor. Select Logic in the view tabs.

Data and Chains Panel

The left panel, titled Data & Chains, lists all the values a component works with and the chains that define its behavior. It has five collapsible sections. Each section has a search box.

Each value row in the panel has a button that opens a value detail panel showing more information about that value. The label on the button changes based on the type of value.

From Inputs

The From Inputs section lists values the host module passes in when it uses the component. In Query Smart Components, this section is labeled Parameters.

Each input row displays the input name and how many chains use it. Select the See rules & source button on a row to open the value detail panel for that input.

The value detail panel for an input displays the following:

• The input's data type.
• Used By: the chains that read this input, with the chain name and how the chain uses the value.

State

The State section lists internal values that stay in memory between renders. In Query Smart Components, this section is labeled Form Collections.

Each state row displays the value name and how many chains use it. Select the See rules & source button on a row to open the value detail panel.

The value detail panel for a state value displays the following:

• The value's data type.
• Used By: the chains that read or write this value.

Computed

The Computed section lists values that are derived from other values in the component. In Query Smart Components, this section is labeled Result.

Each computed value row shows the value name, a short description of its source, and how many chains use it. Select the See how it is computed button on a row to open the value detail panel.

The value detail panel for a computed value displays the following:

• Result of Computation: the value's data type.
• How It Works:
  • Uses: the inputs and other values this computation reads, with the role each plays.
  • The Rule: the expression or formula that produces the value.
  • Used By: the chains that use this computed value and how they use it.

Outputs

The Outputs section lists values the component sends back to the host module. This section displays only in Logic Smart Components. Output rows do not have a value detail panel button.

System Logic

The System Logic section lists internal platform chains that the component uses but Creators did not author — for example, validation and accessibility integrations. These chains are read-only and display for observability only.

Chains

The Chains section lists every chain in the component. Each row displays a numbered locator tag (a teal square), the chain name, and the number of values it uses.

Select a chain row to focus that chain on the canvas. All other chains are hidden until the canvas background is selected to return to the full view.

Chain Canvas

The center of Logic View is the chain canvas. Chains appear as vertical columns. Each column maps to one and has a fixed width. The canvas pans horizontally. Nothing is draggable.

Numbered locator tags (teal squares: 1, 2, 3...) appear in chain column headers and in the Chains section of the panel. The number on the tag matches the row in the panel to the column on the canvas.

Chain Anatomy

Each chain column has four parts, from top to bottom. Select a label in the diagram to jump to its description.

IO shelf: The values this chain reads at the start. Labeled Reads for render chains and Uses for all other chain types. Each row displays the value's origin type (, Computed, and so on) and its name.

Narration band: A plain-language sentence between the IO shelf and the body that describes what triggers this chain and what it sets out to do.

Body: The ordered steps of the chain, including computations, state writes, calls to helper functions, and conditions. Some simple chains have no body steps and go directly from the narration band to the terminal.

Terminal: The chain's final action. A terminal is one of three types: Renders, Notifies, or Returns an outcome. The terminal card displays what value or structure the chain produces.

Chain Controls

Each chain column header contains five controls to the right of the locator tag.

Control	Icon	Description
See All Chains		Returns to the full canvas view when a chain is focused. When no chain is focused, this button displays as Focus and isolates the selected chain.
Inspect		Opens the Code panel with the focused chain's source lines highlighted. Other lines are dimmed.
Add to Agent Context		Sends the focused chain's logic and data as context to the Build Agent. Available when UnqorkAI is enabled.
Expand Full Execution		Expands the complete execution of the focused chain on the canvas, showing every downstream chain it calls.
Expand Full Composition		Expands the full composition of the chain, rendering every composed Smart Component inline.

Chain Types

The type of a chain depends on when it runs.

Right-Side Panels

Three panels can open on the right side of the canvas. Only one panel is open at a time.

Panel	How to open	Available for
Details	Opens automatically when Logic View loads. Shows About info (type, category, description) and Used In (which workspaces and modules use this component).	Logic and Query Smart Components
Code	Select Inspect in a chain column header. Shows the component's source code with the focused chain's lines highlighted. Other lines are dimmed.	Logic Smart Components on local development environments; Query Smart Components in all environments
UI	Select UI in the toolbar. Shows a live, interactive preview of the component with bolt badges (a lightning bolt icon) marking elements the focused chain touches.	UI Smart Components

Select a bolt badge in the UI panel to open Logic View with that chain focused and the UI panel still open.

Canvas Interactions

Action	Result
Select a chain column header	Focuses that chain and hides all other chains.
Select the canvas background	Returns to showing all chains.
Select a chain row in the panel	Same as selecting that column header.
Select Select Cards in the toolbar	Toggles Select mode. In Select mode, selecting cards adds them to the selection and a lasso is available.
Select Go to First Chain in the toolbar	Scrolls the canvas to the first chain.
Select Show All Chains in the toolbar	Drops any focused chain and returns to the full canvas view.
Scroll	Pans the canvas left or right.
Select the 100% zoom control	Opens the zoom preset menu. The slider and field also accept a custom value. Zoom range is 10% to 400%.
Select Fit to View in the toolbar	Resets zoom and centers all chains in the visible area.

Keyboard Navigation

The canvas has one tab stop. After the canvas has focus, use arrow keys to move between cards and chains.

These three shortcuts are active when the canvas has focus and are customizable in Settings.

Query Smart Components

Query Smart Components use the same Logic View as Logic Smart Components. A Query Smart Component has one chain: an Invoke chain that displays the MQL query pipeline as ordered stages.

Each stage card displays the following:

• The stage name (for example, $match, $lookup, or $group).
• The values it reads and the fields it produces.
• For $lookup: both collections involved, the join keys, and a sub-pipeline panel connected by a dashed line.

The Parameters section in the panel lists query parameters defined with :name tokens in the query source.