<!-- source-hash: 8d3da3a7c730a952779ad08cf7640368 -->
Shared row chrome components for `DevSectionPage` list surfaces (delivery, tickets, etc.), providing a consistent two-column layout with fixed min-height blocks for vertical alignment across grid rows, plus a thread-style conversation variant for ticket detail drawers.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DevCardRowContent` | Component | Two-column card row: left (title/subtitle/description) + right (caller-supplied badges) |
| `DevCardRowSkeleton` | Component | Loading skeleton mirroring `DevCardRowContent` min-heights |
| `ConversationCardRow` | Component | Thread-style message row with avatar, author header, body, and attachments |
| `ConversationCardRowSkeleton` | Component | Loading skeleton for a single `ConversationCardRow` |
| `ConversationCardRowSkeletonList` | Component | Multi-row skeleton list (default: 2 rows) for conversation timeline loading state |
| `DevCardRowContentProps` | Interface | Props for `DevCardRowContent` |
| `ConversationCardRowProps` | Interface | Props for `ConversationCardRow` |

## Usage Example

```typescript
// Static delivery card row (wrapped in a div)
<div className="border-b border-ods-border p-[12px] md:p-[16px]">
  <DevCardRowContent
    title="Deploy v2.4.1 to production"
    subtitle="UPDATED today, #4271, Code review"
    description="Bumps the API gateway to support new webhook endpoints."
    rightBadges={
      <>
        <StatusBadge status="in-progress" />
        <PriorityBadge priority="high" />
      </>
    }
  />
</div>

// Clickable ticket card row (wrapped in a button)
<button onClick={openTicket}>
  <DevCardRowContent
    title="Login page throws 502 on Safari"
    subtitle="OPEN · #1042 · Bug"
    description=""
    emptyDescription="No description provided for this ticket."
    rightBadges={<SeverityBadge level="critical" />}
  />
</button>

// Conversation thread row
<ConversationCardRow
  author="Jane Smith"
  role="Resolution"
  avatarSrc="https://cdn.example.com/avatars/jane.png"
  timestamp="2026-01-15T14:32:00Z"
  body="The issue has been resolved by restarting the gateway service."
  attachments={[{ name: "fix-log.txt", url: "/files/fix-log.txt" }]}
  variant="support"
/>

// Loading state
<ConversationCardRowSkeletonList rows={3} />
```

> **Design note:** `DevCardRowContent` is layout-only — no click behavior is baked in. Wrap in `<div>` for static rows or `<button>` for interactive ones. `rightBadges` accepts any `ReactNode`, keeping badge composition flexible per surface.