<!-- source-hash: 88aa76a71f078b18928be54e60fe0a71 -->
A clickable ticket row component for chat interfaces, rendering ticket details (title, number, category, time), a status tag, an optional linked-work chip, and a chevron affordance.

## Key Components

### `ChatTicketItemData`
Data interface for the ticket row:
- `id`, `title`, `ticketNumber` — core identifiers
- `status` — accepts any known format (`ACTIVE`, `active`, `ACTION_REQUIRED`, etc.)
- `statusLabel?` — overrides the badge text while preserving status variant/icon (e.g. HubSpot pipeline stage labels)
- `linkedTaskLabel?` — when set, renders a wrench-icon "linked work" chip indicating an in-flight delivery task
- `category?`, `timeAgo?` — optional subtitle fields joined with `•`

### `ChatTicketItemProps`
Extends `ButtonHTMLAttributes` (omitting `onClick`) with a typed `onClick?: (ticketId: string) => void` callback.

### `ChatTicketItem`
A `forwardRef` button component that:
- Dims the title (`text-ods-text-secondary`) when the ticket is resolved
- Builds a dot-separated subtitle from `ticketNumber`, `category`, and `timeAgo`
- Renders `Tag` with `WrenchIcon` (hidden on `sm` screens) when `linkedTaskLabel` is present
- Handles focus ring via `focus-visible` to prevent stray white borders after click in jsdom/Chromium

## Usage Example

```typescript
<ChatTicketItem
  ticket={{
    id: 'tkt-001',
    title: 'Email not syncing after password reset',
    ticketNumber: '#1042',
    status: 'ACTION_REQUIRED',
    statusLabel: 'Waiting on contact',
    category: 'Email',
    timeAgo: '2h ago',
    linkedTaskLabel: 'Waiting on version release',
  }}
  onClick={(ticketId) => router.push(`/tickets/${ticketId}`)}
/>
```