A client-side React card component for displaying device information including OS type, status, last-seen timestamp, and configurable action buttons. ## Key Components ### Interfaces - **`Device`** — Shape of a device record, including optional `id`, `machineId`, `name`, `type`, `operatingSystem`, `organization`, `status`, `lastSeen`, `tags`, `ipAddress`, `macAddress`, `version`, and `location`. - **`ActionButton`** — Configuration for a custom action button: `label`, `onClick`, `variant`, and `visible` flag. - **`DeviceCardProps`** — Extends `React.HTMLAttributes` with `device`, `actions`, `statusTag`, and `onDeviceClick`. ### Component - **`DeviceCard`** — Renders a bordered card with three rows: 1. Device type icon, OS icon, device name/organization, and optional action buttons (more, details, custom). 2. Status tag and UTC-formatted last-seen timestamp (hydration-safe via `getUTC*` methods). 3. Device tags rendered as outline `Tag` pills. ## Usage Example ```typescript import { DeviceCard } from './device-card' export function Example() { return ( console.log('More clicked'), }, customActions: [ { label: 'Connect', onClick: () => console.log('Connect'), visible: true }, ], }} onDeviceClick={(device) => console.log('Selected:', device.id)} /> ) } ``` > **Note:** Last-seen dates are formatted using UTC getters (`getUTCFullYear`, etc.) to prevent React hydration mismatch [#418](https://github.com/flamingo-stack/openframe-oss-lib/issues) between server and client rendering environments.