Console UI

Backend components for ZGI workbenches.

A standalone console pattern library for sidebars, secondary navigation, workflow toolbars, node libraries, canvas nodes, and compact backend tables.

Workflow editor

Last saved 16:38:39Autosave enabled

Validated

Node library

Flow control

Condition Branch

AI capability

LLM

Data process

Document Extractor

Start

entry

Code Execution

result: number

Direct Reply

result

Recent backend surfaces

Workflow intake

Validated

12 nodes

2m ago

Research agent

Draft

8 nodes

18m ago

Knowledge sync

Running

5 jobs

Now

Extracted pieces

Small components with clear ownership.

These are the canonical building blocks for console layouts. Compose them rather than rewriting one-off sidebars or node cards per workflow.

Primary sidebar

Secondary sidebar

Toolbar

Workflow editor

Last saved 16:38:39Autosave enabled

Validated

Node library

Flow control

Condition Branch

AI capability

LLM

Data process

Document Extractor

Workflow nodes

Start

entry

Code Execution

result: number

Direct Reply

result

Backend table

Recent backend surfaces

Workflow intake

Validated

12 nodes

2m ago

Research agent

Draft

8 nodes

18m ago

Knowledge sync

Running

5 jobs

Now

Micro components

Atomic console states for direct reuse.

Workspace identity

Workspace

R&D Workspace

Sidebar items

Subnav items

Status chip

ValidatedDraft

Node library item

Data process

Document Extractor

Workflow node states

Code Execution

result: number

Direct Reply

result

Table row

Workflow intake

Validated

12 nodes

2m ago

Primary action

Skill spec

Console component rules.

ComponentPurposeRule

ConsoleSidebar

Primary navigation rail for workspace-wide destinations.

220px width, white surface, active left border + cool gray fill.

ConsoleSubnav

Object-level secondary navigation for the active app or agent.

168px width, one primary creation action, 8px item radius.

ConsoleToolbar

Current object identity, save state, validation, debug, and publish actions.

Border bottom, compact 13-14px text, publish is the only blue action.

NodeLibraryPanel

Workflow node picker grouped by capability.

12px panel radius, 8px node item radius, icon bg #eef0f3.

WorkflowNode

Canvas module with ports and selected state.

12px radius, selected blue border + 3px soft focus ring.

RecentSurfacesTable

Compact table for backend object status.

13px rows, subtle dividers, no heavy card shadow.