improvement(emcn): show per-chip error tooltips on invalid email chips

[waleedlatif1]

Summary

• Invalid email chips in TagInput now show the rejection reason in a tooltip on hover (TagItem gains an optional error, with an sr-only fallback for screen readers)
• ChipModalField type='emails' attaches the reason to each rejected chip — format failures (previously a red chip with no message at all) now carry quickValidateEmail's reason, and validate callback rejections (already a teammate / already in org / self-invite) show on the chip instead of the shared banner
• The inline banner below the field is now reserved for consumer/server errors (error prop)
• Threaded validation reasons through the other invalid-chip producers (credential sets, chat deploy allowlist) for consistency

Type of Change

• Improvement

Testing

Verified in the running app via Playwright on /playground: tooltip shows on hover of an invalid chip with a reason, hides on pointer leave, and does not appear for valid chips or invalid chips without a reason. Typecheck and biome pass.

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 12, 2026 5:46pm

[cursor]

PR Summary

Low Risk
UI-only validation feedback changes in shared TagInput/ChipModal with no auth or data-path changes; consumers must supply error on invalid chips for tooltips to appear.

Overview
Invalid email chips now carry an optional error on TagItem and show that reason in a hover tooltip (plus sr-only text), instead of leaving invalid chips unexplained.

ChipModalFieldtype='emails' stores format and validate rejection reasons on each invalid chip and drops the shared inline banner for those cases; the banner below the field is only for the consumer error prop (e.g. submit failures). Call sites that build invalid chips (credential sets, chat deploy allowlist, playground demo) pass through quickValidateEmail / validation messages for consistency.

^{Reviewed by Cursor Bugbot for commit fde36b4. Configure here.}

[greptile-apps]

Greptile Summary

Invalid email chips now show their rejection reason in a cursor-following tooltip on hover, backed by an always-present sr-only span for screen readers. The shared inline error banner is narrowed to consumer/server-supplied errors only, replacing the previous internalError state that mixed format failures and validate-callback rejections into the same banner.

• TagItem.error — optional field added to tag-input; TagInputTag conditionally wraps the chip in Tooltip.Root/Trigger(asChild)/Content, correctly leveraging ChipTag's ...props spread so pointer/focus handlers land on the underlying <span>.
• ChipModalEmailsControl — internalError state and the handleInputChange clearing callback are fully removed; format-check and validate-callback rejections both write their reason onto the chip item; the error banner now renders only when the consumer passes an error prop.
• credential-sets / chat — same error: validation.reason ?? 'Invalid email format' pattern applied to the two other invalid-chip producers, with the previously reviewed ?? fallback already in place.

Confidence Score: 5/5

Safe to merge — the change is additive (a new optional field on TagItem), the tooltip wiring is consistent with existing Tooltip usage in the same file, and all three callsites correctly apply the ?? 'Invalid email format' fallback.

The internalError state removal is clean: every path that previously set it either no longer exists or now writes the reason directly to the chip item. The ChipTag root is a span that spreads ...props, so Radix Slot correctly merges the pointer/focus handlers from Tooltip.Trigger. The sr-only span ensures screen readers receive the error text without depending on hover. No data flow regressions or broken contracts identified.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/tag-input/tag-input.tsx	Adds optional error field to TagItem; wraps invalid chips with Tooltip.Root/Trigger(asChild)/Content and a sr-only fallback — correctly uses ChipTag's ...props spread to pass merged pointer/focus handlers from Slot
apps/sim/components/emcn/components/chip-modal/chip-modal.tsx	Removes internalError state and handleInputChange; threads rejection reasons directly onto chip items; inline banner is now reserved for the consumer error prop only — clean removal of the now-redundant onInputChange prop call
apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx	Adds error field with validation.reason ?? 'Invalid email format' fallback to new chip items; consistent with the chip-modal pattern
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx	Adds error: validation.reason ?? 'Invalid email format' to invalid email chip items in the chat deploy allowlist — same pattern as credential-sets
apps/sim/app/playground/page.tsx	Updates hardcoded test data to include error: 'Invalid email format' on the invalid chip, keeping the playground demo in sync with the new feature

Sequence Diagram

sequenceDiagram
participant User
participant TagInput
participant ChipModalEmailsControl
participant TagItem
participant Tooltip
User->>TagInput: types email + presses Enter
TagInput->>ChipModalEmailsControl: onAdd(email)
ChipModalEmailsControl->>ChipModalEmailsControl: quickValidateEmail(email)
alt format invalid
ChipModalEmailsControl->>TagItem: isValid: false, error: reason ?? 'Invalid email format'
else validate() returns reason
ChipModalEmailsControl->>TagItem: isValid: false, error: reason
else valid
ChipModalEmailsControl->>TagItem: isValid: true
ChipModalEmailsControl->>ChipModalEmailsControl: onChange(validEmails)
end
TagItem->>TagItem: render sr-only span with error text
User->>TagItem: hover (pointerenter)
TagItem->>Tooltip: show Tooltip.Content(error)
User->>TagItem: pointer leave
TagItem->>Tooltip: hide tooltip

Loading

_{Reviews (2): Last reviewed commit: "improvement(emcn): fall back to generic ..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit fde36b4. Configure here.}