feat(apollo-react): Input/Output panel prototype

[dbacomputer]

Summary

Property panel Input/Output experience. The story renders two panels side by side — Input (left) and Output (right) — with a context toggle switching between In Flow and In Studio product surfaces.

This PR has been refined from the initial prototype to be production-ready: semantic tokens throughout, Apollo Wind components as the foundational building blocks, and correct cursor behavior on interactive elements.

What is in the prototype

Context toggle (In Flow / In Studio)

• In Flow: shows the node identity row (label + ID) above the panel. Status badge visible on Output only.
• In Studio: hides the identity row. Status badge moves inline with the Schema/JSON tab strip (Output only).

Status badge (Output mode only)

• Pill dropdown with four execution modes: Live, Static mock, Simulated, Skip node
• Closed trigger and open dropdown both show the mode icon for consistency
• Icons: CircleDot (Live), FileBracesCorner (Static mock), Sparkles (Simulated), CircleOff (Skip node)
• No colored dots: avoids conflict with TypeBadge color vocabulary

TypeBadge

• Inline badge on each tree row indicating the data type: T (string), # (number), ? (boolean), {} (object), [] (array), null
• Colors use semantic tokens: text-info/bg-info/border-info for string, text-warning for number, text-success for boolean, text-chart-purple for object/array

Tree (Input panel)

• Four collapsible root nodes representing upstream workflow nodes
• Three levels: Node Root > Variable > Sub Variable

Tree (Output panel)

• Single root node with inline value editing on leaf fields
• Value colors use semantic tokens: text-success (string), text-info (number), text-success/text-error (boolean true/false)
• Copy button writes {{node.path}} expression to clipboard with a confirmation icon

Filter button

• Default: "Filter". After selection: "Filter: Referenced in this node" or "Filter: All"
• Referenced filter hides root nodes with zero matching children

JSON tab

• Read-only Monaco editor showing the node's data as formatted JSON, consistent with the other editor stories

---

Apollo Wind component changes (apollo-wind package)

These additions are production-ready and available for use beyond this prototype.

Button: new 4xs size

• size="4xs" adds h-5 (20px) with px-1, text-xs, and [&_svg]:size-3 icon scaling
• Intended for compact ghost icon buttons in dense panel UIs
• Covered by unit tests and visible in the Button VariantSizeMatrix Storybook story

Input: new ghost variant and xs size

• variant="ghost" removes the border and sets bg-surface-overlay
• size="xs" sets h-6 (24px), px-2, text-xs, rounded
• Combine as variant="ghost" size="xs" for compact toolbar search fields
• Uses Omit<InputHTMLAttributes, 'size'> to avoid collision with the HTML size attribute
• Future-theme overrides are gated to default variant + default size only
• Covered by unit tests and documented in new Ghost and CompactSearch Storybook stories

---

How to review

Open Storybook > Apollo React / Canvas Components / Panels / Node Property Panel > Input / Output

• Toggle In Flow / In Studio to see the status badge and identity row reposition
• On the Output panel, open the status badge dropdown. The closed trigger now shows the mode icon
• Expand/collapse tree nodes; try the Filter button; hover leaf rows for the copy affordance
• Inline editing on leaf values: click to edit, Enter or blur to save, Escape to cancel
• Inspect TypeBadge colors and output value colors: all use semantic tokens, not hard-coded values
• Hover the drag handle (cursor-grab) and the Filter/mode triggers (cursor-pointer)

---

NodePropertyPanel component changes

• Added headerExtra?: ReactNode slot: renders on the right side of the title bar immediately before the close button, used here for compact controls

---

Test plan

• Both panels render in light and dark themes
• In Flow / In Studio toggle updates both panels simultaneously
• Status badge shows correct icon in closed trigger state
• Status badge appears on Output only
• Tree expands/collapses; filter works; copy writes to clipboard
• Inline editing saves on Enter/blur, cancels on Escape
• Button size="4xs" icon renders at 20px with 12px icons
• Input variant="ghost" size="xs" renders at 24px with no border
• TypeScript build passes: pnpm --filter @uipath/apollo-react exec tsc --noEmit
• Unit tests pass: pnpm --filter @uipath/apollo-wind test

🤖 Generated with Claude Code

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 02, 2026, 01:24:56 PM
apollo-docs	🟢 Ready	Preview, Logs	Jul 02, 2026, 01:24:56 PM
apollo-landing	🟢 Ready	Preview, Logs	Jul 02, 2026, 01:24:56 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 02, 2026, 01:24:56 PM

[github-actions]

Dependency License Review

• ✅ 1945 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1715
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[github-actions]

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
@uipath/apollo-core	9.0%	—	43.82 MB	57.31 MB	±0
@uipath/apollo-react	34.5%	0.0% (0/117)	7.27 MB	27.60 MB	+278 B
@uipath/apollo-wind	40.1%	— (58 untracked)	392.6 KB	2.55 MB	+193 B
@uipath/ap-chat	85.8%	—	43.41 MB	55.85 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

[Copilot]

Pull request overview

Adds a Storybook prototype for a node property panel Input/Output experience (three side-by-side UX concepts), and extends NodePropertyPanel with a small new title-bar slot to support compact controls used by the concepts.

Changes:

• Added headerExtra?: ReactNode to NodePropertyPanelProps and rendered it in the title bar (between title and close button).
• Implemented three Input/Output panel concept prototypes in Storybook, including expandable trees, inline editing, search/filter, copy affordances, and Monaco-based Schema/JSON/Types views.
• Added @monaco-editor/react to Storybook app deps and updated the lockfile accordingly.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks @monaco-editor/react (and its dependency graph) for the Storybook prototype.
apps/storybook/package.json	Adds @monaco-editor/react as a dev dependency to support Monaco usage in Storybook.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts	Extends the public API with headerExtra for title-bar customization.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx	Renders headerExtra in the title bar next to the close button.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx	Adds the three Input/Output UX concept prototypes, Monaco editor tabs, and supporting helpers.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

packages/apollo-wind/src/components/ui/search.tsx:21

• SearchProps no longer allows passing the new Input-level variant/size props (and it omits size entirely). Since Search forwards props to Input, its prop type should be based on InputProps so consumers can use variant="ghost" size="xs" and stay in sync with Input’s API.

export interface SearchProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
  value?: string;
  onChange?: (value: string) => void;
  onClear?: () => void;
  showClearButton?: boolean;
}

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file