# IntegrationServiceCard / IntegrationInstructionCard

## 2026-07-23 | Tighten icon-to-title gap to match AgentCard

**Prompted by:** Hellen (PO)

### What changed
- When `iconNode` is set, the brand logo now renders in a compact 24px (`size-6`) container with `gap-2` to the title, instead of floating in a 40px `Avatar` with `gap-3`.
- The 40px `Avatar` is kept only for the `imageUrl` / `User` fallback path.

### Why
- The 40px avatar added ~8px of internal padding plus a wider gap, so the icon-to-text spacing looked uneven next to `AgentCard` (Platform Connectors) on the same Integrations page. Both card types now share an identical 24px icon + `gap-2`.

### Affected tokens / files
- `packages/shadcn/src/components/ui/ai-builder/integration-card.tsx`


## 2026-07-21 | Coming Soon state for IntegrationServiceCard

**Prompted by:** Clint

### What changed
- New optional `isComingSoon` prop on `IntegrationServiceCard`: shows a secondary "Coming Soon" badge next to the title, dims the avatar, and disables the connect click-through.
- Connected state always wins over Coming Soon (badge never doubles up).

### Why
- The Settings/Integrations page needs to advertise upcoming connectors (Zapier, Xero, Facebook, WhatsApp) without offering a dead connect flow.

### Affected tokens / files
- `packages/shadcn/src/components/ui/ai-builder/integration-card.tsx`


## 2026-07-13 — Center-align header row (BUILD-2354 round 4)

**Prompted by:** QA pass on the Platform Connectors grid (Gmail/Outlook/Slack row).

### What changed
- Header row's flex alignment: `items-start` → `items-center`.

### Why
- The 40px `Avatar` (and the 28px settings gear button, shown only when connected) sat top-aligned
  against the much shorter single-line title/badge column, so icon, title, and gear button didn't
  share a common vertical center — visibly uneven across a row of cards, most noticeable comparing
  a connected card (Gmail, with a "Connected" badge) against a not-yet-connected one (Microsoft
  Workspace, no badge) side by side.

### Affected tokens / files
- `packages/shadcn/src/components/ui/ai-builder/integration-card.tsx`

## 2026-07-13 — Semantic typography + fill-height description (BUILD-2354 round 2)

**Prompted by:** QA pass on BUILD-2354 ("AI Builder Agent List: Categories, Agent-Specific Details
& Default-Off Toggles") after `IntegrationServiceCard` started rendering alongside `AgentCard` in
the new "Platform Connectors" category grid for the first time.

### What changed
- `IntegrationServiceCard` title: `text-base font-semibold` → `text-label-medium`.
- `IntegrationServiceCard` description: `text-sm leading-relaxed text-muted-foreground` →
  `text-body-small flex-1 text-muted-foreground`.

### Why
- Title/description previously used raw Tailwind sizing instead of the design system's semantic
  typography scale (see `typography.md`) — invisible until this card started sharing a grid row
  with `AgentCard` (which already uses `text-label-medium`/`text-body-small`), at which point the
  two cards' text no longer matched, especially at tablet/mobile breakpoints where the semantic
  scale shrinks and the raw classes didn't.
- `AgentCard`'s description already has `flex-1` to absorb the CSS Grid row-stretch and push its
  tags/badge row to the bottom. `IntegrationServiceCard` had no equivalent, so grid stretch (from
  sharing a row with a taller `AgentCard`) left dead whitespace under its content instead of
  growing the description to fill it.

### Affected tokens / files
- `packages/shadcn/src/components/ui/ai-builder/integration-card.tsx`
- Rendered from: `apps/docs/stories/shadcn/pages/ai-builder/ai-builder-agents.stories.tsx`
  (Platform Connectors category), `apps/docs/stories/shadcn/pages/account/integrations-tab.tsx`,
  `apps/docs/stories/shadcn/pages/ai-integration/ai-integration.stories.tsx` (both unaffected
  visually — single-column/list layouts, no grid-stretch interaction)