<!-- source-hash: 17cedfbecac10b0f21e310ac541210e2 -->
Storybook stories for the `InfoSection` component, demonstrating a labelled info card used in ticket detail views within the OpenFrame MSP platform.

## Key Components

| Export | Type | Description |
|---|---|---|
| `TicketDetails` | `Story` | Static story showing all row value types: plain text, text-with-avatar, assignee picker, and status dropdown |
| `Interactive` | `Story` | Live stateful story where assigning a user or changing status updates the card in place |

## Usage Example

```typescript
import { InfoSection, type InfoSectionRow } from '../components/ui/info-section';

const rows: InfoSectionRow[] = [
  // Plain text
  { id: 'customer', label: 'Customer', value: { text: 'Acme Corp', imageFallback: 'Acme Corp' } },

  // Clickable text
  { id: 'device', label: 'Device', value: { text: 'TB-156-SEA', onClick: () => navigate('/devices/TB-156-SEA') } },

  // Inline assignee autocomplete
  {
    id: 'assigned',
    label: 'Assigned',
    value: { type: 'assignee', options: assigneeOptions, onAssign: (id) => handleAssign(id) },
  },

  // Inline status dropdown
  {
    id: 'status',
    label: 'Status',
    value: { type: 'status', status: 'AI_ASSISTANCE', options: statusOptions, onSelect: (id) => handleStatus(id) },
  },

  // Arbitrary node
  { id: 'priority', label: 'Priority', value: { type: 'custom', content: <Badge>High</Badge> } },
];

<InfoSection title="Ticket Details" rows={rows} />
```

## Row Value Types

| Type | Description |
|---|---|
| `text` | Plain string, optional `imageFallback` avatar, optional `onClick` |
| `assignee` | Autocomplete picker with `options`, `currentAssignee`, and `onAssign` callback |
| `status` | Dropdown with color-coded options, `status` key, and `onSelect` callback |
| `custom` | Any React node via `content` prop |

## Source

[`InfoSection.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/InfoSection.stories.tsx)