feat(chat): redesign ice breaker prompts as card grid with connection icons

[rafavalls]

What is this contribution about?

Redesigns the ice breaker prompts from a horizontal scrollable pill list into a responsive card grid. Each card shows the originating connection's icon (top-left) and the prompt description (bottom-left), making it easy to understand which integration a prompt comes from. Overflow prompts are accessible via a "+N more" card with a popover. Also removes the IceBreakers component from the home empty state (it was rendering in two places).

Screenshots/Demonstration

UI changes — cards show connection icon + prompt label in a 2×2 grid layout.

How to Test

1. Open a chat with a Virtual MCP that has multiple connections exposing prompts.
2. Verify the home screen shows prompt cards in a grid (up to 3 cards + overflow card).
3. Each card should display the connection icon and prompt description.
4. Click a card — it should submit the prompt as expected.
5. If there are >3 prompts, click "+N more" to see the overflow popover.

Migration Notes

N/A

Review Checklist

• PR title is clear and descriptive
• Changes are tested and working
• Documentation is updated (if needed)
• No breaking changes

---

Summary by cubic

Redesigned ice breaker prompts as a card grid with connection icons and prompt names, plus a searchable “+N more” modal (fixed height; mobile uses a drawer). The / prompt dropdown shows connection icons with a taller layout; ice breakers expand up to max‑w‑3xl in the sidebar and are removed from the home empty state.

• New Features

  • Grid shows up to 3 prompt cards; extra prompts open via a searchable modal (1100px, 4‑col on large; 3‑line card descriptions). Cards expand up to max‑w‑3xl in the sidebar.
  • Cards show the connection icon and prompt name above the description; hover shows the full description in a tooltip.
  • Accurate prompt → connection mapping via per‑connection fetch using createMCPClient + listPrompts from @decocms/mesh-sdk, cached with @tanstack/react-query.
  • Prompt mention dropdown shows each prompt’s connection icon and uses taller rows with the name label above the description; increased max height for easier browsing.

• Bug Fixes

  • Fixed all‑prompts modal height and switched to a mobile drawer to prevent resizing while searching.
  • Robust fallbacks: always render a fallback integration icon; use description || title || name for labels.
  • Added min‑height on cards so single‑line descriptions have more breathing room.
  • Set per‑tooltip delayDuration so hover tooltips appear promptly.

^{Written for commit 3a9b909. Summary will update on new commits.}

[github-actions]

🧪 Benchmark

Should we run the Virtual MCP strategy benchmark for this PR?

React with 👍 to run the benchmark.

Reaction	Action
👍	Run quick benchmark (10 & 128 tools)

Benchmark will run on the next push after you react.

[github-actions]

Release Options

Suggested: Minor (2.232.0) — based on feat: prefix

React with an emoji to override the release type:

Reaction	Type	Next Version
👍	Prerelease	2.231.17-alpha.1
🎉	Patch	2.231.17
❤️	Minor	2.232.0
🚀	Major	3.0.0

Current version: 2.231.16

Note: If multiple reactions exist, the smallest bump wins. If no reactions, the suggested bump is used (default: patch).

[cubic-dev-ai]

2 issues found across 3 files

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="apps/mesh/src/web/components/chat/ice-breakers.tsx">

<violation number="1" location="apps/mesh/src/web/components/chat/ice-breakers.tsx:221">
P2: Always render `IntegrationIcon` in overflow items; the current icon guard skips the component and prevents fallback icons for connections without an icon URL.</violation>
</file>

<file name="apps/mesh/src/web/components/chat/tiptap/mention/suggestion.tsx">

<violation number="1" location="apps/mesh/src/web/components/chat/tiptap/mention/suggestion.tsx:134">
P2: Using `??` for `description` can render blank mention labels when `description` is an empty string. Fall back to title/name when description is empty.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

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

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="apps/mesh/src/web/components/chat/ice-breakers.tsx">

<violation number="1" location="apps/mesh/src/web/components/chat/ice-breakers.tsx:257">
P2: `colsClass` now forces 3/4 columns at all sizes, removing the previous responsive fallback and causing cramped card layouts in narrow containers.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}