refactor(ui): use EMCN fields in deployment and setup modals

[BillLeoutsakosvl346]

Replace the remaining flagged field wrappers in Chat deployment, MCP deployment, and the Slack setup wizard with ChipModalField. Reuse its labels, spacing, hints, and errors, and allow custom fields to associate their label with an existing control ID.

The fields adopt EMCN’s muted labels, 9px label/control gaps, and aligned side gutters. Existing input surfaces, corners, textarea minimum heights, Slack input height, native required validation, and form submission remain intact. No new component variants are introduced.

Validation:

• All 8 modal-field audit findings removed; no new styling findings.
• EMCN: 351 tests passed; relevant consumer suites: 26 tests passed.
• All workspace type checks and lint checks passed, along with import resolution and mandatory API validation.
• Browser verification is incomplete: the local application loads the deployment modal, but Chat and MCP data requests leave its fields in loading states. The Slack wizard was not visually verified. No deployment was submitted during this check.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Sep 23, 2026 2:13am UTC

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with no actionable correctness, accessibility, security, or repository-rule failures identified.

Summary

This PR migrates the remaining Chat deployment, MCP deployment, and Slack setup fields to the shared ChipModalField presentation and accessibility model.

• Adds optional custom-control label association through htmlFor.
• Preserves controlled values, native required validation, textarea dimensions, and form submission behavior.
• Aligns labels, hints, errors, and horizontal gutters across the affected modal fields.
• Adds coverage for custom-field labels, error descriptions, native validation, and Enter behavior.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Consumer[Chat, MCP, or Slack field] --> Field[ChipModalField]
  Field --> Label[Associated muted label]
  Field --> Control[Existing input, textarea, or combobox]
  Field --> Feedback[Hint or error message]
  Feedback --> ARIA[aria-describedby / aria-invalid]
  Label --> Association[htmlFor / control id]
  ARIA --> Control
  Association --> Control

Loading

_{Reviews (2) · Last reviewed commit: "refactor(ui): use EMCN fields in deploym..."}

[cubic-dev-ai]

No issues found across 5 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[BillLeoutsakosvl346]

Before / after visual comparison

Chat deployment Title, validation error and Welcome message now use ChipModalField. Labels become muted, field gutters become 8px, and shared label spacing is used; existing input surfaces and the 80px textarea minimum remain.

Left = before; right = after.

Rendered component fixtures with application CSS and local data, rather than authenticated product-page screenshots. These are representative visual examples, not end-to-end behavior coverage.

Fresh isolated render of the chat field compositions; this does not claim live Chat/MCP deployment or Slack setup coverage.

Current PR head checked at posting: 4360284d13.

[BillLeoutsakosvl346]

@greptile

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

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

[cubic-dev-ai]

No issues found across 5 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}