## Summary
This PR introduces a new `DyadCardPrimitives` component library and
refactors all Dyad markdown action cards to use these reusable
primitives. This improves consistency, reduces code duplication, and
makes styling changes easier to maintain across the codebase.

## Key Changes

- **New `DyadCardPrimitives.tsx`**: Created a comprehensive library of
reusable card components including:
- `DyadCard`: Main container with accent color support and state
indicators
  - `DyadCardHeader`: Header row with icon and flexible content area
  - `DyadBadge`: Small pill badges for card type labels
  - `DyadExpandIcon`: Animated chevron for expand/collapse
- `DyadStateIndicator`: Spinner/X/checkmark for pending/aborted/finished
states
  - `DyadCardContent`: Expandable content area with smooth animations
- `DyadFilePath`, `DyadDescription`, `DyadFinishedIcon`: Additional
utility components
- Support for 11 accent colors (blue, purple, violet, red, amber, green,
emerald, teal, sky, indigo, slate)

- **Refactored components** to use new primitives:
- `DyadAddDependency`: Simplified layout, improved package display
styling
- `DyadAddIntegration`: Consistent card styling for both pending and
completed states
  - `DyadCodeSearch`: Cleaner header with state indicator
  - `DyadCodeSearchResult`: Standardized file list display
  - `DyadCodebaseContext`: Unified expand/collapse behavior
  - `DyadDatabaseSchema`: Simplified header structure
  - `DyadDelete`: Consistent red accent styling
  - `DyadEdit`: Improved state indicators and layout
  - `DyadExecuteSql`: Cleaner SQL badge and state handling
  - And 19+ additional components

## Implementation Details

- All components now use semantic color tokens (`foreground`,
`muted-foreground`, `background-lightest`, etc.) for better dark mode
support
- Consistent spacing and sizing across all cards (px-3, py-2 for
headers, px-3 pb-3 for content)
- Smooth transitions for expand/collapse animations using `max-h` and
`opacity`
- Left border accent (3px) appears only when card is in pending or
aborted state
- Removed inline icon imports from individual components; now
centralized in primitives
- Improved accessibility with proper semantic HTML and ARIA attributes

https://claude.ai/code/session_01AAvVLShqeRjs42LhUdeK3e
<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2482">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Large UI refactor across many chat card components and accessibility
attributes; primary risk is visual/interaction regressions and
snapshot/test churn rather than data/security impact.
> 
> **Overview**
> **Refactors Dyad chat “action cards” to a shared component library.**
Introduces `DyadCardPrimitives` (e.g., `DyadCard`, `DyadCardHeader`,
`DyadBadge`, `DyadStateIndicator`, `DyadCardContent`) and migrates many
markdown-rendered cards
(edit/write/delete/grep/logs/list-files/code-search, integrations, etc.)
to use these primitives for consistent styling, expand/collapse
behavior, and keyboard/ARIA interaction.
> 
> Updates E2E ARIA snapshots to match the new card structure and
accessibility tree, slightly tweaks chat message typography, bumps
`@playwright/test` to `^1.58.2`, and expands `lint-staged` formatting
(`oxfmt`) to include `*.json`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e020627fdb8955d948d982cb525c929b0610ee77. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Refactored all Dyad markdown action cards to use new DyadCardPrimitives
for a consistent, accessible card UI with smoother interactions and
easier styling. Adds lazy-mounted content and keyboard-accessible
expand/collapse, reduces duplication, and improves dark mode across 28+
components.

- **New Features**
- Added DyadCardPrimitives: DyadCard, DyadCardHeader, DyadBadge,
DyadExpandIcon, DyadStateIndicator (with finished state),
DyadCardContent, plus helpers (DyadFilePath, DyadDescription,
DyadFinishedIcon).
- 11 accent colors with tinted icon circles and a left accent border
shown for pending/aborted states; showAccent prop for explicit control.
- Smooth expand/collapse using CSS grid with a rotating chevron;
DyadCardContent lazy-mounts heavy children.
  - Semantic color tokens for reliable light/dark theming.
- Improved accessibility: role="button", tabIndex, Enter/Space handlers,
and aria-expanded on interactive cards.

- **Refactors**
- Migrated 28+ markdown action cards (e.g., AddDependency, CodeSearch,
Edit, ExecuteSql, Status, WebSearch, Write) to the primitives; unified
headers, badges, spacing, state indicators, and expand/collapse
behavior.
- Fixed regressions: correct state extraction (Delete/Rename/Output),
restored children rendering (Delete/Read/Rename), passed isExpanded to
all interactive cards, click propagation fix in Grep.
- Removed per-component icon imports and ad‑hoc styles; net reduction of
~480 LOC.

<sup>Written for commit e020627fdb8955d948d982cb525c929b0610ee77.
Summary will update on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

---------
Co-authored-by: Claude <noreply@anthropic.com>