improvement(editor): replace mode toggle buttons with a switch

[j15z]

Summary

Replaces the ⇄ toggle button with a two-option switch wherever an input can flip between two modes. The old button only hinted at the current mode through its tint. The switch shows both modes side by side with the active one selected, so it's clear which mode a field is in and the other mode is one click away.

The switch is a new emcn component, IconSwitch: two 16px icon squares in a small frame, built on native radio buttons so arrow keys move between options, with each option's name shown as a tooltip.

Where it changed:

• Selector-or-ID fields on blocks and on Agent block tools, such as Slack's Channel or the Jira tool's Project: Selector / Variable. The field header renders it through a shared CanonicalModeToggle.
• Start block Files inputs: File uploader / JSON. The switch still hides when the uploader can't represent the current value.
• Variables block boolean values: Selector / Variable
• Knowledge base connector fields, such as Gmail's Labels: Selector / Manual input. The switch sits in a new ChipModalField titleAdornment slot outside the <label>, so clicking the field title doesn't change the mode, and it is disabled while the connector is being saved.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: UI improvement

Testing

• apps/sim and packages/emcn type checks pass.
• 56 tests pass across 6 files covering IconSwitch, ChipModal, the connector config fields, the field header, subblocks, and Start file inputs.
• New tests cover switching connector modes while keeping each mode's stored values, clicking the field title without changing the mode, and disabled switches during submission. The field header test now selects the Variable option instead of looking for the old button.
• Biome passes on all changed files.
• The screenshots below come from the running app. Before is improvement/editor-deploy-experience (087a21d); after is this branch (09cc11a).

Reviewers: please check the switch's alignment in the block field header, where it shares the row with Copy, Generate and link actions.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Selector-or-ID fields on blocks (Slack Channel)

Before	After

Agent block tool fields (Jira Account and Project)

Before	After

Start block Files input

Before	After

Variables block boolean value

Before	After

Knowledge base connector field (Gmail Labels)

Before	After

🤖 Generated with Claude Code

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Sep 15, 2026 3:12am UTC

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with the prior connector focus issue fixed and no actionable new findings.

Summary

Replaces two-mode toggle buttons with a shared, radio-based IconSwitch across editor and connector fields.

• Shows both modes with labeled tooltips and disabled-state support.
• Adds a separate titleAdornment slot to ChipModalField.
• The latest revision preserves connector headers and switches under canonical-group keys while retaining field-specific control keys.
• Adds regression coverage for radio identity and focus retention through a mode round trip.

_{Reviews (2) · Last reviewed commit: "fix(knowledge): keep connector mode swit..."}

[j15z]

@greptile

[j15z]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

@j15z I have started the AI code review. It will take a few minutes to complete.