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 all Smart Component types.

Opening Logic View

There are two ways to open Logic View.

From the Smart Components Hub:

1. Click   Libraries in the global header, then select   Smart Components Hub.

2. Select a component to open it in the Smart Component Editor.

3. 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 the component name at the top of the panel to open the Focused Component View.

3. 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. The sections available depend on the component type. Most sections have a search box.

Value rows in the From Inputs, State, and Computed sections each have a button that opens a value detail panel showing more information about that value. The tooltip 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 where this value is listed on the IO shelf.

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 displays 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, including validation . 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.

• 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 the causal relationship between the values read and the action the chain takes. For example: "Because of these values, this structure renders."

• 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.

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.

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

Canvas Interactions

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.