A client-side React component that renders a user profile summary card with avatar, name, email/subtitle, auth provider icons, and optional MSP organization preview — supporting both full and compact display modes. ## Key Components ### `UserSummary` (default export) The primary component accepting the following props: | Prop | Type | Description | |---|---|---| | `name` | `string` | User's display name | | `email` | `string` | User's email address | | `avatarUrl` | `string \| null` | Optional avatar image URL (proxied) | | `subtitle` | `string \| null` | Replaces the email line when provided | | `authProviders` | `string[]` | Provider names (e.g. `"google"`, `"microsoft"`) | | `mspPreview` | `object \| null` | MSP org info: name, logo, seat/technician count, revenue | | `compact` | `boolean` | Horizontal mini-row mode for comment headers | | `avatarSize` | `number` | Avatar px size in compact mode (default `40`) | | `showEditButton` | `boolean` | Renders an Edit Profile placeholder | | `editablePhoto` | `boolean` | Swaps static avatar for an upload widget | | `onPhotoChange` | `(url) => void` | Callback when photo is updated | ### Internal Helpers - **`getAuthProviderIcon(provider)`** — returns an `` or fallback `

` for Google, Microsoft/Azure, and Slack providers. - **`formatNumber(n)`** — abbreviates large numbers to `K`, `M`, or `B` suffixes (e.g. `15000 → 15K`). ## Usage Example ```typescript import { UserSummary } from "./user-summary-stub"; // Full card // Compact mode (e.g. comment header) ``` ## Notes - Avatar images are routed through `getProxiedImageUrl` to avoid CORS/hotlinking issues. - Falls back to initials (up to 2 characters in compact, 1 character in full mode) when no `avatarUrl` is provided. - Auth provider icons and the Edit button are rendered in a responsive layout — stacked on mobile, inline on `md+` screens. - Source: [`user-summary-stub.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/user-summary-stub.tsx)