fix(editor): Truncate long AIA context chips

[heymynameisrob]

Summary

• Truncate long AI context chip labels so that they stay inside the input container.
• Keep the chip icon visible when the label is long.
• Allow N8nTag text to shrink and use an optional maximum width.

Before	After

How to test

1. Open the Instance AI input.
2. Add a context chip with a long label.
3. Confirm that the chip stays inside the input container.
4. Confirm that the label ends with an ellipsis.
5. Confirm that the icon remains visible.

Related Linear tickets, Github issues, and Community forum posts

AI-2752

Review / Merge checklist

• I have seen this code, I have run this code, and I take responsibility for this code.
• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with Backport to Beta, Backport to Stable, or Backport to v1 (if the PR is an urgent fix that needs to be backported)

[n8n-assistant]

PR review overview

Based on ownership of the 2 changed files in this PR:

Ownership	Files owned	Share	Source code	Test files	Misc
@n8n-io/ai	1	50%	+32 / -29	+0 / -0	+0 / -0
@n8n-io/design	1	50%	+11 / -2	+0 / -0	+0 / -0
Total	2	100%	+43 / -31	+0 / -0	+0 / -0

[codecov]

Bundle Report

Changes will increase total bundle size by 5.23kB (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
editor-ui-esm	63.32MB	5.23kB (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: editor-ui-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/src-*.js	297 bytes	3.37MB	0.01%
assets/src-*.js	608 bytes	805.38kB	0.08%
assets/worker-*.js	-3.2MB	18.44kB	-99.43%
assets/worker-*.js	3.2MB	3.22MB	17352.85% ⚠️
assets/WorkflowBuilderUnavailableNotice-*.js	60 bytes	68.05kB	0.09%
assets/SettingsOpenTelemetryView-*.js	2.69kB	60.3kB	4.66%
assets/WorkflowBuilderUnavailableNotice-*.css	-5 bytes	58.21kB	-0.01%
assets/SettingsUsageAndPlan-*.css	97 bytes	27.63kB	0.35%
assets/SettingsUsageAndPlan-*.js	997 bytes	24.64kB	4.22%
assets/Tag-*.css	328 bytes	22.71kB	1.47%
assets/Tag-*.js	82 bytes	3.28kB	2.56%
assets/otel.constants-*.js	82 bytes	1.42kB	6.15% ⚠️

Files in assets/WorkflowBuilderUnavailableNotice-*.js:

• ./src/features/ai/instanceAi/components/InstanceAiInput.vue → Total Size: 354 bytes

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

0 issues found across 2 files (changes from recent commits).

Confidence score: 5/5

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

<sub>Shadow auto-approve: would auto-approve. Fixes long AI context chip labels overflowing by adding ellipsis truncation with a hover tooltip, and refines tag styling to support it. Bounded visual change with no broader impact.

Re-trigger cubic</sub>

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Confidence score: 4/5

• In packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue, removing N8nTooltip leaves ellipsized .contextChipText labels unreadable in full, which can make selected context ambiguous; retain an accessible way to view the complete label.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue">

<violation number="1">
P2: With the N8nTooltip removed, a long chip label that is truncated with an ellipsis (`.contextChipText` sets `text-overflow: ellipsis`) can no longer be read in full — the PR's goal is precisely to truncate long labels, so there is now no way for a user to see the full text of a truncated chip. Re-add a `title` attribute or tooltip to reveal the full label, or confirm this is intentional.</violation>
</file>

<sub>Shadow auto-approve: would not auto-approve because issues were found.
Tip: Review your code locally with the cubic CLI to iterate faster.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: With the N8nTooltip removed, a long chip label that is truncated with an ellipsis (.contextChipText sets text-overflow: ellipsis) can no longer be read in full — the PR's goal is precisely to truncate long labels, so there is now no way for a user to see the full text of a truncated chip. Re-add a title attribute or tooltip to reveal the full label, or confirm this is intentional.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue, line 579:

<comment>With the N8nTooltip removed, a long chip label that is truncated with an ellipsis (`.contextChipText` sets `text-overflow: ellipsis`) can no longer be read in full — the PR's goal is precisely to truncate long labels, so there is now no way for a user to see the full text of a truncated chip. Re-add a `title` attribute or tooltip to reveal the full label, or confirm this is intentional.</comment>

<file context>
@@ -576,31 +576,29 @@ const resizable = computed(() => {
-									:aria-label="i18n.baseText('generic.close')"
-									data-test-id="instance-ai-handoff-context-chip-dismiss"
-									@click.stop="emit('dismiss-context-chip')"
+					<N8nTag :text="props.contextChip.label" :clickable="false" size="lg">
+						<template #tag>
+							<span :class="$style.contextChipContent">
</file context>