@flamingo-stack/openframe-frontend-core 0.0.481 → 0.0.482

package/src/stories/.ErrorMessageDisplay.stories.md

@@ -0,0 +1,45 @@
+<!-- source-hash: d9d0bd3ed94737e7f33194b665ee6cf9 -->
+Storybook stories for the `ErrorMessageDisplay` chat component, covering error, warning, and info severity variants with and without expandable details.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `WithDetails` | Error card with an expandable details section (chevron toggle visible) |
+| `TitleOnly` | Minimal error card — title row only, no chevron, non-interactive |
+| `Warning` | Yellow-tinted warning variant with expandable details |
+| `Info` | Grey-tinted info variant with expandable details |
+
+## Usage Example
+
+```typescript
+import { ErrorMessageDisplay } from "../components/chat/error-message-display";
+
+// Error with expandable details
+<ErrorMessageDisplay
+  title="Tool execution failed"
+  details="run_script exited with code 1: brew not found on this endpoint."
+/>
+
+// Warning variant
+<ErrorMessageDisplay
+  type="warning"
+  title="Approval expired"
+  details="The approval request timed out after 15 minutes."
+/>
+
+// Info variant — no details, title-only row
+<ErrorMessageDisplay
+  type="info"
+  title="Session resumed"
+/>
+```
+
+## Notes
+
+- **`type` prop** controls icon tint: `"error"` → red, `"warning"` → yellow, `"info"` → grey. Defaults to `"error"`.
+- **`details` prop** is optional. When omitted the chevron is hidden and the row is non-interactive (`TitleOnly` story).
+- The `plainDecorator` wraps each story in a `max-w-[640px]` container with the design-system background token (`--color-bg`) to approximate chat-panel rendering.
+- Stories are tagged `autodocs` — Storybook auto-generates a prop table from the component's TypeScript types.
+
+**Source:** [`ErrorMessageDisplay.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ErrorMessageDisplay.stories.tsx)

package/src/stories/.FilterModal.stories.md

@@ -1,33 +1,34 @@
-<!-- source-hash: 997a920fba0072bc3666a97dfbeeae72 -->
-Storybook stories for the `FilterModal` component, covering all major prop combinations including filter groups, sorting, tag key:value filters, loading states, and interactive stateful examples.
+<!-- source-hash: 9509e44233b791e36e569c6416edb3ad -->
+Storybook stories file for the `FilterModal` component, demonstrating all supported configurations including filter groups, sorting, tag key:value filtering, and interactive state management.
 
 ## Key Components
 
-### Exported Stories
+**Exported Stories**
 
 | Story | Description |
-|-------|-------------|
+|---|---|
 | `Default` | Basic modal with status filter group and pre-selected filters |
 | `Interactive` | Stateful example with open/close toggle and live filter count |
-| `MultipleGroups` | Modal with several filter groups (statuses, types, OS) |
-| `WithoutCounts` | Filter options rendered without item counts |
-| `WithSorting` | Combined sort columns + filter groups |
+| `MultipleGroups` | Multiple filter group categories (statuses, device types, OS) |
+| `WithoutCounts` | Filter options without item counts |
+| `WithSorting` | Combined sort columns and filter groups |
 | `SortingOnly` | Sort configuration with no filter groups |
-| `InteractiveWithSorting` | Stateful sort + filter with live sort display |
+| `InteractiveWithSorting` | Stateful sort + filter with live sort indicator |
 | `EmptyFilters` | Filter groups present but nothing selected |
-| `NoFiltersAvailable` / `FullyEmpty` | Edge cases with no options or config |
-| `Loading` | Skeleton placeholder state during data fetch |
-| `WithTagFilter` | Tag key:value filter section alongside regular filters |
-| `TagFilterOnly` | Tag filters with no regular filter groups |
-| `FullFeatured` | All features combined: sort + filters + tags |
-| `InteractiveWithTags` | Fully interactive with tags, sort, and filters |
+| `NoFiltersAvailable` | Modal open with no filter options |
+| `FullyEmpty` | All optional props omitted |
+| `Loading` | Skeleton loading state via `isLoading: true` |
+| `WithTagFilter` | Tag key:value filter section alongside standard filters |
+| `TagFilterOnly` | Tag filter without regular filter groups |
+| `FullFeatured` | All features combined: sort + filters + tag filters |
+| `InteractiveWithTags` | Fully stateful with tags, sort, and filters |
 
-### Key Types Used
+**Key Types Used**
 
-- `FilterGroup` — group id, title, and options array (with optional counts)
-- `SortConfig` — column definitions, active sort key, and direction
-- `TagKeyConfig` — tag key with label and selectable values
-- `TableFilters` — record mapping filter group ids to selected option ids
+- `FilterGroup` — filter section with options, labels, and optional counts
+- `SortConfig` — sort column list plus active sort key and direction
+- `TagKeyConfig` — tag key with filterable values (e.g. `site:chicago`)
+- `TableFilters` — active filter state as `Record<string, string[]>`
 
 ## Usage Example
 
@@ -47,7 +48,10 @@ const filterGroups: FilterGroup[] = [
 ]
 
 const sortConfig: SortConfig = {
-  columns: [{ key: 'name', label: 'Name' }, { key: 'date', label: 'Date' }],
+  columns: [
+    { key: 'name', label: 'Name' },
+    { key: 'date', label: 'Date' },
+  ],
   sortBy: 'name',
   sortDirection: 'asc',
 }
@@ -60,13 +64,15 @@ function MyPage() {
     <FilterModal
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
-      title="Sort and Filter"
       filterGroups={filterGroups}
       currentFilters={filters}
       onFilterChange={setFilters}
       sortConfig={sortConfig}
       onSort={(col, dir) => console.log(col, dir)}
+      isLoading={false}
     />
   )
 }
-```
+```
+
+**Source:** [`FilterModal.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/FilterModal.stories.tsx)

package/src/stories/.GenericEntityCard.stories.md

@@ -0,0 +1,50 @@
+<!-- source-hash: b13dc32d405e2d773dba9e6f3c613739 -->
+Storybook stories for `GenericEntityCard`, a fallback chat card renderer covering financial document types that don't require a bespoke UI. Each story demonstrates a distinct financial entity category with realistic fixture data.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `FinancialKpi` | `Story` | Renders a financial KPI summary card |
+| `CapTable` | `Story` | Renders a capitalization table card |
+| `ProfitLoss` | `Story` | Renders a profit & loss statement card |
+| `BalanceSheet` | `Story` | Renders a balance sheet card |
+| `CashFlow` | `Story` | Renders a cash flow statement card |
+
+**Meta config:**
+- `title`: `Chat/EntityCards/GenericEntityCard`
+- `layout`: `fullscreen`
+- Wrapped in `ChatColumnDecorator` to simulate the chat column context
+
+## Usage Example
+
+```typescript
+import { GenericEntityCard } from '../components/chat/entity-cards'
+import { makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { financialKpiItem } from './__fixtures__/chat-cards'
+
+// Each story passes an `item` (entity data) and `anchorProps` (link behavior)
+<GenericEntityCard
+  item={financialKpiItem}
+  anchorProps={makeAnchorProps(financialKpiItem.url ?? '#')}
+/>
+```
+
+## Story Structure Pattern
+
+All stories share the same shape — only the fixture differs:
+
+```typescript
+export const CapTable: Story = {
+  args: {
+    item: capTableItem,                          // entity data with facts[] + badge
+    anchorProps: makeAnchorProps(capTableItem.url ?? '#'), // anchor link props
+  },
+}
+```
+
+The `facts` array on each item drives the key-value strip at the card bottom; the `badge` field controls the colored chip displayed on the right.
+
+## Source
+
+[`GenericEntityCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/GenericEntityCard.stories.tsx)

package/src/stories/.GitHubActivityCard.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: ec96cdad8bd44e2cf349d694fdfcb820 -->
+Storybook stories for the `GitHubActivityCard` component, covering the three GitHub doc types (`github_commit`, `github_pull_request`, `github_pr_review`) in both `compact` and `row` display variants.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `Commit` | Story rendering a GitHub commit card in `compact` variant |
+| `PullRequest` | Story rendering a pull request card in `compact` variant |
+| `PullRequestReview` | Story rendering a PR review card with `[review:STATE]` badge parsing in `compact` variant |
+| `RowVariant` | Story rendering a pull request card in `row` variant |
+
+**Decorators & Fixtures:**
+- `ChatColumnDecorator` — wraps each story in a chat column layout
+- `makeAnchorProps` — generates resolved anchor props from an item URL
+- `githubCommitItem`, `githubPullRequestItem`, `githubPrReviewItem` — pre-built fixture data for each GitHub doc type
+
+## Usage Example
+
+```typescript
+// Rendering GitHubActivityCard directly (as used in stories)
+import { GitHubActivityCard } from '../components/chat/entity-cards'
+import { makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { githubPullRequestItem } from './__fixtures__/chat-cards'
+
+<GitHubActivityCard
+  item={githubPullRequestItem}
+  variant="compact"           // or "row"
+  anchorProps={makeAnchorProps(githubPullRequestItem.url ?? '#')}
+/>
+```
+
+## Notes
+
+- The component is **pure presentation** — callers are responsible for passing resolved `anchorProps`
+- `owner/repo` is derived from the item URL when `item.repo` is omitted
+- Long commit SHAs are automatically shortened
+- PR review titles containing `[review:STATE]` markers drive the state badge color
+- Stories are scoped under `Chat/EntityCards/GitHubActivityCard` in the Storybook sidebar
+
+**Source:** [`GitHubActivityCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/GitHubActivityCard.stories.tsx)

package/src/stories/.GuideWelcome.stories.md

@@ -0,0 +1,38 @@
+<!-- source-hash: efd42b7951b9364bba2e80f38794e5df -->
+Storybook stories for the `GuideWelcome` component, covering the guide-mode chat empty state with configurable quick actions, slash-command onboarding cards, and custom greeting copy.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `Default` | `Story` | Full guide-mode empty state with slash-command list and quick-action chips |
+| `NoCommands` | `Story` | Greeting and quick-action chips only, no slash-command list |
+| `NoQuickActions` | `Story` | Slash-command list only, chip row omitted entirely |
+| `CustomCopy` | `Story` | Overrides default `title` and `subtitle` greeting text |
+
+**Supporting fixtures:**
+
+- `SAMPLE_QUICK_ACTIONS` — Seven action chips demonstrating inline display and `⋯` overflow menu
+- `SAMPLE_LIST` — Three `MingoOnboardingCard` entries (Product Releases, Blog Posts, Onboarding Guides) rendered inside a shared scroll region
+- `ACTIONS` — Reusable Recent / Search / Find handlers passed to each card
+
+## Usage Example
+
+```typescript
+// Render the default guide-mode empty state inside the decorator shell
+<GuideWelcome
+  quickActions={SAMPLE_QUICK_ACTIONS}
+  onQuickAction={(action) => console.log('quick action', action.id)}
+>
+  {SAMPLE_LIST}
+</GuideWelcome>
+```
+
+The shared decorator wraps every story in a `440×760px` dark panel that mimics the narrow guide drawer, with `GuideModeBanner` pinned at the top and the story content padded below it.
+
+## Notes
+
+- `quickActions` and `onQuickAction` use `control: false` in `argTypes` — configure them directly in story `args`, not the Storybook controls panel.
+- `GuideWelcome` ships no default quick actions; the chip row is omitted entirely when none are supplied (`NoQuickActions`).
+- Figma reference: node `7532:328214`.
+- Source: [`GuideWelcome.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/GuideWelcome.stories.tsx)

package/src/stories/.Header.stories.md

@@ -1,48 +1,58 @@
-<!-- source-hash: 5344552d615a3d0d05eef4235e82937c -->
-Storybook stories for the `Header` navigation component, covering dropdown behavior, SEO link visibility, and scroll auto-hide functionality.
+<!-- source-hash: febe8e9eae91e12c08acbe71e368d956 -->
+Storybook stories for the `Header` navigation component, covering dropdown behavior, SEO link visibility, auto-hide, and Mingo AI integration scenarios.
 
 ## Key Components
 
 | Export | Type | Description |
-|--------|------|-------------|
+|---|---|---|
 | `Default` | `Story` | Standard header with dropdown navigation and auto-hide enabled |
-| `DropdownOpen` | `Story` | Programmatically opens the first dropdown on mount for visual regression snapshots |
-| `SeoLinksAlwaysInDom` | `Story` | Live DOM inspector that counts `<a href>` anchors in the header, proving SEO crawler visibility regardless of dropdown state |
-| `FixedHeader` | `Story` | Header with `autoHide: false` — remains fixed during scroll |
-
-**Shared fixtures:**
-- `flamingoLogo` — branded logo element using `FlamingoLogo` icon + DM Sans wordmark
-- `baseNavigation` — three-item nav config (`OpenFrame`, `OpenMSP`, `Company`) with nested dropdown children
-- `rightActions` — accent CTA button linking to `/signup`
+| `DropdownOpen` | `Story` | Header with the first dropdown programmatically opened on mount |
+| `SeoLinksAlwaysInDom` | `Story` | Live demo proving dropdown `<a>` links stay in the DOM when collapsed |
+| `FixedHeader` | `Story` | Header with `autoHide: false`, stays fixed while scrolling |
+| `WithMingoAi` | `Story` | Header with the Mingo AI launcher button enabled |
+| `baseNavigation` | `HeaderConfig['navigation']` | Shared nav fixture with OpenFrame, OpenMSP, and Company items |
 
 ## Usage Example
 
 ```typescript
+// Render the default header in a Next.js page
 import { Header } from '../components/navigation/header';
+import { FlamingoLogo } from '../components/icons';
+import { Button } from '../components/ui/button';
 import type { HeaderConfig } from '../types/navigation';
 
 const config: HeaderConfig = {
-  logo: { element: <FlamingoLogo />, href: '/' },
+  logo: {
+    element: (
+      <div className="flex items-center gap-2">
+        <FlamingoLogo className="h-8 w-8" />
+        <span className="font-bold text-[18px]">Flamingo</span>
+      </div>
+    ),
+    href: '/',
+  },
   navigation: {
     position: 'center',
     items: [
-      {
-        id: 'docs',
-        label: 'Docs',
-        children: [
-          { id: 'getting-started', label: 'Getting Started', href: '/docs/getting-started' },
-        ],
-      },
+      { id: 'company', label: 'Company', href: '/company' },
     ],
   },
   actions: {
-    right: [<Button key="cta" variant="accent" href="/signup">Start Free Trial</Button>],
+    right: [
+      <Button key="cta" variant="accent" href="/signup">
+        Start Free Trial
+      </Button>,
+    ],
   },
   autoHide: true,
   mobile: { enabled: true, onToggle: () => {} },
 };
 
-<Header config={config} />
+export default function Page() {
+  return <Header config={config} />;
+}
 ```
 
-> **SEO note:** Dropdown children are always rendered in the DOM and hidden via CSS `visibility: hidden` + `aria-hidden`, keeping all `<a href>` links crawlable without JavaScript execution.
+## SEO Notes
+
+Dropdown child links are always rendered in the DOM and hidden via CSS `visibility: hidden` rather than conditional rendering. This ensures crawlers index all navigation links regardless of dropdown state. The `SeoLinksAlwaysInDom` story demonstrates this with a live link counter that remains constant whether dropdowns are open or closed.

package/src/stories/.HubspotTicketCard.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 358ffdf181cff4b3e4624b75c91df29a -->
+Storybook stories for the `HubspotTicketCard` chat entity card, covering all three doc type variants (`hubspot_ticket`, `hubspot_ticket_anon`, `hubspot_ticket_self`) and both layout modes.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `Full` | Standard ticket card with all fields populated and a clickable anchor |
+| `Anon` | Anonymous variant with `customerCompany` and `url` nulled out server-side, rendering as a non-clickable shell |
+| `SelfTicket` | Ticket owned by the chatting user; admin URL stripped, status set to `NEW` |
+| `ClosedTicket` | Ticket in `CLOSED`/`LOW` priority state with anchor |
+| `RowVariant` | Same full data rendered in `row` layout instead of `compact` |
+
+## Usage Example
+
+```typescript
+import { HubspotTicketCard } from '../components/chat/entity-cards'
+import { hubspotTicketItem } from './__fixtures__/chat-cards'
+import { makeAnchorProps } from './__fixtures__/chat-card-decorator'
+
+// Compact (default) — full ticket with link
+<HubspotTicketCard
+  item={hubspotTicketItem}
+  variant="compact"
+  anchorProps={makeAnchorProps(hubspotTicketItem.url ?? '#')}
+/>
+
+// Anon variant — server redacts sensitive fields before sending
+<HubspotTicketCard
+  item={{ ...hubspotTicketItem, customerCompany: null, url: null }}
+  variant="compact"
+/>
+```
+
+## Notes
+
+- The single `HubspotTicketCard` component handles all three doc types; field redaction (`customerCompany`, `url`) is performed server-side before the item reaches the card.
+- Status and priority badges drive the visual treatment — stories cover `NEW`, `CLOSED`, `MEDIUM`, and `LOW` combinations.
+- All stories are wrapped in `ChatColumnDecorator` to simulate the chat column layout.
+
+**Source:** [`HubspotTicketCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/HubspotTicketCard.stories.tsx)

package/src/stories/.InfoCard.stories.md

@@ -1,22 +1,27 @@
-<!-- source-hash: 5b42d2668b0cbc76ddb288a5b0d0cf2b -->
-Storybook stories for the `InfoCard` UI component, demonstrating various configurations including disk usage, RAM stats, copyable network values, and a multi-card grid layout.
+<!-- source-hash: c32546958851d971ee61fe36c097b05c -->
+Storybook stories for the `InfoCard` component, demonstrating all supported variants including progress bars, copyable values, item icons, footers, and multi-card grid layouts.
 
 ## Key Components
 
-| Story | Description |
-|-------|-------------|
-| `DiskC` | SSD drive card with usage percentage and capacity, default progress bar |
-| `DiskD` | HDD drive card with warning/critical thresholds on the progress bar |
-| `PhysicalRAM` | RAM card showing DDR4 memory usage and capacity |
-| `WithCopyableValues` | Network info card with copyable hostname, IPv4, and MAC fields |
-| `Grid` | Three-column grid layout showcasing multiple `InfoCard` instances side by side |
+| Export | Description |
+|---|---|
+| `DiskC` | Basic card with title, subtitle, usage items, and a progress bar |
+| `DiskD` | Progress bar with `warningThreshold` and `criticalThreshold` thresholds configured |
+| `PhysicalRAM` | RAM metric card showing the standard progress bar pattern |
+| `WithCopyableValues` | Items with `copyable: true`, plus a footer with icon, logo, and external link |
+| `WithItemIcon` | Inline icon rendered alongside individual item labels |
+| `WithFooter` | Full footer with icon, signed-by text, logo, and a link |
+| `WithFooterWithoutLink` | Footer without an external `link` href |
+| `Grid` | Three `InfoCard` instances arranged in a responsive 3-column grid |
 
 ## Usage Example
 
 ```typescript
 import { InfoCard } from '../components'
+import { ShieldCheckIcon } from '../components/icons-v2-generated/security'
+import { FlamingoLogo } from '../components/icons'
 
-// Basic disk card with progress bar
+// Basic card with progress bar
 <InfoCard
   data={{
     title: 'C:',
@@ -25,30 +30,36 @@ import { InfoCard } from '../components'
       { label: 'Current Usage', value: '42.6%' },
       { label: 'Capacity', value: '931 GB' },
     ],
-    progress: { value: 42.6 },
+    progress: { value: 42.6, warningThreshold: 60, criticalThreshold: 85 },
   }}
 />
 
-// With warning/critical thresholds
-<InfoCard
-  data={{
-    title: 'D:',
-    progress: {
-      value: 62.3,
-      warningThreshold: 60,
-      criticalThreshold: 85,
-    },
-    items: [{ label: 'Current Usage', value: '62.3%' }],
-  }}
-/>
-
-// With copyable values
+// Card with copyable values and footer
 <InfoCard
   data={{
     title: 'Network',
     items: [
       { label: 'IPv4', value: '192.168.1.100', copyable: true },
+      { label: 'Hostname', value: 'srv-prod-01', copyable: true },
+      {
+        label: 'toolType',
+        value: 'Fleet',
+        icon: <ShieldCheckIcon size={16} />,
+      },
     ],
+    footer: {
+      icon: <ShieldCheckIcon size={24} className="text-ods-success" />,
+      text: 'Signed by Flamingo',
+      logo: <FlamingoLogo width={24} height={24} />,
+      link: { href: 'https://github.com/flamingo-ai/fleetdm' },
+    },
   }}
 />
-```
+```
+
+## Notes
+
+- All stories wrap the card in a fixed-width `div` (`w-80` or `w-96`) to simulate real layout constraints.
+- The `progress` object accepts an optional `warningThreshold` and `criticalThreshold` to change bar color at defined percentages.
+- The `footer.link` property is optional; omitting it renders the footer without an external link anchor.
+- Source: [`InfoCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/InfoCard.stories.tsx)

package/src/stories/.InfoCardRow.stories.md

@@ -0,0 +1,48 @@
+<!-- source-hash: f31b4ccb2870f56d7cfa24206432f5bf -->
+Storybook stories for the `InfoCardRow` UI component, providing visual documentation and interactive examples with and without icons.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `Default` | `Story` | Full row with company logo avatar, title/caption lead, and two stat sections with icons |
+| `WithoutIcons` | `Story` | Text-only variant with all icon slots omitted |
+| `meta` | `Meta` | Storybook metadata defining layout, argTypes, and component-level docs |
+
+## Usage Example
+
+```typescript
+import { InfoCardRow } from '../components/ui/info-card-row'
+import { CheckCircleIcon } from '../components/icons-v2-generated/signs-and-symbols/check-circle-icon'
+import { TagIcon } from '../components/icons-v2-generated/shopping/tag-icon'
+
+// Full row with icons
+<InfoCardRow
+  lead={{
+    title: 'Precision Accounting Partners',
+    caption: '847 devices',
+    icon: <img src="/logo.png" className="size-full object-cover" />,
+  }}
+  stats={[
+    {
+      title: 'Resolved this week',
+      caption: '312',
+      icon: <CheckCircleIcon className="text-ods-success" />,
+    },
+    {
+      title: 'Open tickets',
+      caption: '2',
+      icon: <TagIcon className="text-ods-text-secondary" />,
+    },
+  ]}
+/>
+```
+
+## Story Variants
+
+- **`Default`** — Matches the Figma spec: gradient avatar in the lead slot, `CheckCircleIcon` and `TagIcon` in the stat sections.
+- **`WithoutIcons`** — All `icon` props omitted; validates the text-only layout path.
+
+The decorator constrains each story to a `max-w-[1024px]` container to reflect realistic dashboard widths. The component internally uses a 50/25/25 column split, collapses stat sections to a wrapped row on mobile, and shares inner borders between neighbouring sections.
+
+> View the full source on GitHub: [`InfoCardRow.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/InfoCardRow.stories.tsx)

package/src/stories/.InfoSection.stories.md

@@ -0,0 +1,55 @@
+<!-- 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)