@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/stories/ChatMingoInfoCards.stories.tsx

@@ -0,0 +1,748 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { ReactNode } from 'react'
+import { MingoInfoCard } from '../components/chat/mingo-info-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { MingoIcon } from '../components/icons'
+import { EyeIcon } from '../components/icons-v2-generated/interface/eye-icon'
+import { ArrowRightUpIcon } from '../components/icons-v2-generated/arrows/arrow-right-up-icon'
+import { TagIcon } from '../components/icons-v2-generated/shopping/tag-icon'
+import { CodingCommitIcon } from '../components/icons-v2-generated/coding/coding-commit-icon'
+import { CodingPullRequestIcon } from '../components/icons-v2-generated/coding/coding-pull-request-icon'
+import { CodeIcon } from '../components/icons-v2-generated/coding/code-icon'
+import { SlackLogoGreyIcon } from '../components/icons-v2-generated/brand-logos/slack-logo-grey-icon'
+import { FileContentIcon } from '../components/icons-v2-generated/documents/file-content-icon'
+import { ChartBar01VerIcon } from '../components/icons-v2-generated/charts/chart-bar-01-ver-icon'
+import { ChartPieIcon } from '../components/icons-v2-generated/charts/chart-pie-icon'
+import { MoneyBillDollarIcon } from '../components/icons-v2-generated/finance/money-bill-dollar-icon'
+import { BankIcon } from '../components/icons-v2-generated/finance/bank-icon'
+import { CoinsExchangeCurrencyIcon } from '../components/icons-v2-generated/finance/coins-exchange-currency-icon'
+import { NewspaperIcon } from '../components/icons-v2-generated/documents/newspaper-icon'
+import { TrophyIcon } from '../components/icons-v2-generated/sport/trophy-icon'
+import { MicrophoneIcon } from '../components/icons-v2-generated/household/microphone-icon'
+import { Rocket02Icon } from '../components/icons-v2-generated/vehicles-and-delivery/rocket-02-icon'
+import { TruckFastIcon } from '../components/icons-v2-generated/vehicles-and-delivery/truck-fast-icon'
+import { PresentationBarIcon } from '../components/icons-v2-generated/charts/presentation-bar-icon'
+import { PresentationLineIcon } from '../components/icons-v2-generated/charts/presentation-line-icon'
+import { CalendarIcon } from '../components/icons-v2-generated/date-and-time/calendar-icon'
+import { CompassIcon } from '../components/icons-v2-generated/map-and-travel/compass-icon'
+import { MapIcon } from '../components/icons-v2-generated/map-and-travel/map-icon'
+import { CheckSquareIcon } from '../components/icons-v2-generated/signs-and-symbols/check-square-icon'
+import { Megaphone01Icon } from '../components/icons-v2-generated/shopping/megaphone-01-icon'
+
+/**
+ * Chat entity-cards re-skinned with `MingoInfoCard`.
+ *
+ * As each `[card://type:id]` registry entry in `entity-cards/dispatch.tsx` is
+ * migrated to render a `MingoInfoCard`, its variants are mirrored here so the
+ * compact in-chat appearance can be reviewed in isolation — same column width
+ * and background the dispatch renders into, without booting the chat runtime.
+ *
+ * Each `render` reproduces the registry's field mapping for that card type
+ * (icon, status pill, description, "⋯" menu). Anchor clicks are neutralized via
+ * `makeAnchorProps` so the Storybook iframe doesn't navigate away.
+ */
+const meta: Meta<typeof MingoInfoCard> = {
+  title: 'Chat/ChatMingoInfoCards',
+  component: MingoInfoCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'In-chat entity cards rendered through `MingoInfoCard`. One section per migrated `CHAT_CARD_REGISTRY` type — mirrors the icon / status / description / menu mapping from `entity-cards/dispatch.tsx`.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ChatColumnDecorator>
+        <Story />
+      </ChatColumnDecorator>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Shared "⋯" overflow menu (Figma `7740:55075`): "Ask Mingo" (Mingo logo)
+ *  followed by "Open Details" (eye) with a trailing ↗ open-in-new-tab side
+ *  button. */
+const openMenu = (
+  href: string,
+  openDetails?: { label: string; icon: ReactNode },
+) => [
+  {
+    items: [
+      {
+        id: 'discuss',
+        label: 'Ask Mingo',
+        icon: (
+          <MingoIcon
+            className="size-5"
+            color="white"
+            eyesColor="var(--ods-flamingo-cyan-base)"
+            cornerColor="var(--ods-flamingo-cyan-base)"
+          />
+        ),
+        onClick: () => {
+          // eslint-disable-next-line no-console
+          console.log('[story] ask mingo', href)
+        },
+      },
+      {
+        id: 'open-details',
+        label: openDetails?.label ?? 'Open Details',
+        icon: openDetails?.icon ?? <EyeIcon size={20} />,
+        onClick: () => {
+          // eslint-disable-next-line no-console
+          console.log('[story] open details', href)
+        },
+        iconAction: {
+          icon: <ArrowRightUpIcon size={20} />,
+          'aria-label': 'Open in new tab',
+          onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('[story] open in new tab', href)
+          },
+        },
+      },
+    ],
+  },
+]
+
+// =============================================================================
+// HubSpot ticket — icon: HubSpot grey logo · status: ticket state · desc: preview
+// =============================================================================
+
+export const HubspotTicket: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry types `hubspot_ticket` / `_anon` / `_self`. Status pill maps the ticket state (Closed → green, Open → amber, other → grey); description is the ticket preview.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://app.hubspot.com/contacts/0/ticket/123'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Login page returns 500 after SSO redirect"
+          description="Customer cannot sign in via Google SSO since this morning…"
+          icon={<TagIcon size={24} />}
+          status={{ label: 'Open', variant: 'warning' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF, {
+            label: 'Open Ticket Details',
+            icon: <TagIcon size={20} />,
+          })}
+          menuAriaLabel="Ticket actions"
+        />
+        <MingoInfoCard
+          title="Export to CSV missing last column"
+          description="Resolved — shipped in 2.14.1, customer confirmed the fix."
+          icon={<TagIcon size={24} />}
+          status={{ label: 'Closed', variant: 'success' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF, {
+            label: 'Open Ticket Details',
+            icon: <TagIcon size={20} />,
+          })}
+          menuAriaLabel="Ticket actions"
+        />
+        <MingoInfoCard
+          title="Waiting on customer logs for the sync failure"
+          description="Pending — asked for the agent log bundle from the affected host."
+          icon={<TagIcon size={24} />}
+          status={{ label: 'Waiting on us', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF, {
+            label: 'Open Ticket Details',
+            icon: <TagIcon size={20} />,
+          })}
+          menuAriaLabel="Ticket actions"
+        />
+        <MingoInfoCard
+          title="Ticket with no preview text and no status set at all"
+          icon={<TagIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF, {
+            label: 'Open Ticket Details',
+            icon: <TagIcon size={20} />,
+          })}
+          menuAriaLabel="Ticket actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// GitHub activity — icon per kind · status: review state or activity type ·
+// description: "<id> · <date>"
+// =============================================================================
+
+export const GithubActivity: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry types `github_commit` / `github_pull_request` / `github_pr_review` (+ `_public`). Icon differs per kind (commit / pull-request / code); the pill shows the PR review state (Approved → green, Changes → red, Comment → grey) or, for commits/PRs, the neutral activity type.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://github.com/flamingo/openframe/commit/a1b2c3d'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="fix(auth): guard SSO redirect against null session"
+          description="a1b2c3d · May 28, 2026"
+          icon={<CodingCommitIcon size={24} />}
+          status={{ label: 'Commit', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Activity actions"
+        />
+        <MingoInfoCard
+          title="Add device bulk-actions to the fleet table"
+          description="#482 · May 27, 2026"
+          icon={<CodingPullRequestIcon size={24} />}
+          status={{ label: 'PR', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Activity actions"
+        />
+        <MingoInfoCard
+          title="Pavlo Shylo"
+          description="#482 · May 27, 2026"
+          icon={<CodeIcon size={24} />}
+          status={{ label: 'Approved', variant: 'success' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Activity actions"
+        />
+        <MingoInfoCard
+          title="Alex Rivera"
+          description="#479 · May 26, 2026"
+          icon={<CodeIcon size={24} />}
+          status={{ label: 'Changes', variant: 'error' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Activity actions"
+        />
+        <MingoInfoCard
+          title="Sam Lee"
+          description="#477 · May 25, 2026"
+          icon={<CodeIcon size={24} />}
+          status={{ label: 'Comment', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Activity actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Slack message — icon: Slack grey logo · no pill · description: message text
+// =============================================================================
+
+export const SlackMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry type `slack_message`. No status pill (Slack has no status); the channel is appended to the author title ("Author · #channel"), and the description is the message preview text.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://flamingo.slack.com/archives/C12345/p1700000000'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Pavlo Shylo · #deploys"
+          description="Heads up — the staging deploy is going out in 10 minutes, hold any merges to main."
+          icon={<SlackLogoGreyIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Message actions"
+        />
+        <MingoInfoCard
+          title="Alex Rivera · #incidents"
+          description="Found the root cause of the sync failure — it's the token refresh race. PR incoming."
+          icon={<SlackLogoGreyIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Message actions"
+        />
+        <MingoInfoCard
+          title="Sam Lee · #general"
+          icon={<SlackLogoGreyIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Message actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Data-room doc / markdown — icon: FileContent · status: source badge ·
+// description: preview
+// =============================================================================
+
+export const DataRoomDoc: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry types `data_room_doc` / `markdown`. Status pill is the provenance label (the source-repo label, or a neutral "Document" when unknown); the description is the content preview.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/docs/openframe/getting-started'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Getting started with OpenFrame"
+          description="Install the agent, connect your first device, and open the fleet view."
+          icon={<FileContentIcon size={24} />}
+          status={{ label: 'OpenFrame Docs', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Series A — financial model (Q1 2026)"
+          description="Revenue, burn, and runway projections for the upcoming raise."
+          icon={<FileContentIcon size={24} />}
+          status={{ label: 'Data room', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Unlabeled doc — source repo unknown, falls back to Document"
+          description="Neutral provenance so unknown content can't be mislabeled."
+          icon={<FileContentIcon size={24} />}
+          status={{ label: 'Document', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Financial — distinct icon per type · no pill · description: subtitle
+// =============================================================================
+
+export const Financial: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry types `financial_kpi` / `cap_table` / `profit_loss` / `balance_sheet` / `cash_flow`. No status pill — the per-type icon carries the type signal (chart / pie / money / bank / exchange); the description is the subtitle.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/data-room/financials'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Net revenue retention"
+          description="TTM · 118%"
+          icon={<ChartBar01VerIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Cap table — Series A"
+          description="Post-money · $42M"
+          icon={<ChartPieIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Profit & loss"
+          description="Q1 2026"
+          icon={<MoneyBillDollarIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Balance sheet"
+          description="As of Mar 31, 2026"
+          icon={<BankIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+        <MingoInfoCard
+          title="Cash flow statement"
+          description="Q1 2026 · burn $1.1M/mo"
+          icon={<CoinsExchangeCurrencyIcon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Document actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Blog post — media: cover image (newspaper-icon fallback) · pill: category ·
+// description: summary
+// =============================================================================
+
+export const BlogPost: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry type `blog_post` (fetch mode). Media is the cover `featured_image` (OG placeholder, then a newspaper glyph as fallbacks); the pill is the first category; the description is the post summary.',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://openmsp.com/blog/rmm-buyers-guide'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="The 2026 RMM buyer's guide"
+          description="What to look for when choosing a remote monitoring and management platform."
+          imageSrc="https://picsum.photos/seed/rmm/80"
+          imageAlt="The 2026 RMM buyer's guide"
+          icon={<NewspaperIcon size={24} />}
+          status={{ label: 'Guides', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Article actions"
+        />
+        <MingoInfoCard
+          title="Post with no cover image — falls back to the newspaper icon"
+          description="When featured_image and the OG placeholder are both missing."
+          icon={<NewspaperIcon size={24} />}
+          status={{ label: 'News', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Article actions"
+        />
+        <MingoInfoCard
+          title="How we built the Mingo chat: streaming, citations and inline cards"
+          description="A deep-dive into the unified chat runtime that powers Guide and Mingo modes…"
+          imageSrc="https://picsum.photos/seed/videopost/80"
+          imageAlt="How we built the Mingo chat"
+          icon={<NewspaperIcon size={24} />}
+          status={{ label: 'Video', variant: 'primary' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Article actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Case study — trophy fallback icon · "Case study" pill · cover image
+// =============================================================================
+
+export const CaseStudy: Story = {
+  render: () => {
+    const HREF = 'https://openmsp.com/case-studies/acme-it'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="How Acme IT cut ticket volume by 40%"
+          description="Acme IT · Jordan Blake"
+          imageSrc="https://picsum.photos/seed/acme/80"
+          imageAlt="How Acme IT cut ticket volume by 40%"
+          icon={<TrophyIcon size={24} />}
+          status={{ label: 'Case study', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Case study actions"
+        />
+        <MingoInfoCard
+          title="Case study without a cover — trophy icon fallback"
+          description="NorthStar MSP"
+          icon={<TrophyIcon size={24} />}
+          status={{ label: 'Case study', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Case study actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Customer interview — microphone fallback · "Interview" pill
+// =============================================================================
+
+export const CustomerInterview: Story = {
+  render: () => {
+    const HREF = 'https://openmsp.com/interviews/jamie-fox'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Scaling an MSP from 5 to 50 technicians"
+          description="Jamie Fox · BrightLayer"
+          imageSrc="https://picsum.photos/seed/interview/80"
+          imageAlt="Scaling an MSP from 5 to 50 technicians"
+          icon={<MicrophoneIcon size={24} />}
+          status={{ label: 'Interview', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Interview actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Product release — rocket fallback · version pill · description: summary/date
+// =============================================================================
+
+export const ProductRelease: Story = {
+  render: () => {
+    const HREF = 'https://openframe.org/releases/2-14-0'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="OpenFrame 2.14"
+          description="Bulk device actions, faster fleet table, SSO hardening."
+          imageSrc="https://picsum.photos/seed/release/80"
+          imageAlt="OpenFrame 2.14"
+          icon={<Rocket02Icon size={24} />}
+          status={{ label: 'v2.14', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Release actions"
+        />
+        <MingoInfoCard
+          title="OpenFrame 2.13.2 — patch release"
+          description="May 12, 2026"
+          icon={<Rocket02Icon size={24} />}
+          status={{ label: 'v2.13.2', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Release actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Programs — podcast / webinar / event, distinct icon + type pill
+// =============================================================================
+
+export const Programs: Story = {
+  render: () => {
+    const HREF = 'https://openmsp.com/podcasts/ep-42'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Ep. 42 — The economics of co-managed IT"
+          description="May 28, 2026 · 42 min"
+          imageSrc="https://picsum.photos/seed/podcast/80"
+          imageAlt="Ep. 42 — The economics of co-managed IT"
+          icon={<MicrophoneIcon size={24} />}
+          status={{ label: 'Podcast', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Podcast actions"
+        />
+        <MingoInfoCard
+          title="Live: securing the MSP supply chain"
+          description="Jun 4, 2026 · 11:00 AM PT · 1h"
+          icon={<PresentationBarIcon size={24} />}
+          status={{ label: 'Webinar', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Webinar actions"
+        />
+        <MingoInfoCard
+          title="OpenMSP meetup — Austin"
+          description="Jun 18, 2026 · Austin, TX"
+          icon={<CalendarIcon size={24} />}
+          status={{ label: 'Event', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Event actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Investor update — presentation fallback · "Investor update" pill
+// =============================================================================
+
+export const InvestorUpdate: Story = {
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/investor-updates/2026-q1'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Q1 2026 investor update"
+          description="118% NRR, $42M post-money, 14 months runway."
+          imageSrc="https://picsum.photos/seed/investor/80"
+          imageAlt="Q1 2026 investor update"
+          icon={<PresentationLineIcon size={24} />}
+          status={{ label: 'Investor update', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Update actions"
+        />
+        <MingoInfoCard
+          title="Update #7"
+          description="Title-less row falls back to the update number."
+          icon={<PresentationLineIcon size={24} />}
+          status={{ label: 'Investor update', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Update actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Onboarding guide — compass fallback · "Guide" pill
+// =============================================================================
+
+export const OnboardingGuide: Story = {
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/guides/first-device'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Connect your first device"
+          description="A five-minute walkthrough from install to live telemetry."
+          imageSrc="https://picsum.photos/seed/guide/80"
+          imageAlt="Connect your first device"
+          icon={<CompassIcon size={24} />}
+          status={{ label: 'Guide', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Guide actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Roadmap / delivery / task — per-type icon · coloured status pill · no image
+// =============================================================================
+
+export const Roadmap: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Registry types `roadmap_item` / `delivery_item` / `internal_task`. Icon priority mirrors RoadmapCard: server integration logo (`item.icon`, shown contained) → task-type glyph → per-type default (map / truck / check-square). The status pill is coloured via the shared `getStatusColorScheme` mapping (done → green, in-progress → amber, blocked → red, other → grey).',
+      },
+    },
+  },
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/roadmap/RM-128'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Per-tenant audit log export"
+          description="Server integration logo (e.g. ClickUp) shown contained in the box."
+          icon={
+            <img
+              src="https://picsum.photos/seed/clickuplogo/48"
+              alt=""
+              className="size-6 object-contain"
+            />
+          }
+          status={{ label: 'In Progress', variant: 'warning' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Roadmap actions"
+        />
+        <MingoInfoCard
+          title="Roadmap item with no logo — per-type default glyph"
+          description="Falls back to the map glyph when there's no server icon."
+          icon={<MapIcon size={24} />}
+          status={{ label: 'Planned', variant: 'grey' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Roadmap actions"
+        />
+        <MingoInfoCard
+          title="Ship bulk device tagging"
+          description="Tag and filter devices in bulk from the fleet table."
+          icon={<TruckFastIcon size={24} />}
+          status={{ label: 'Done', variant: 'success' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Roadmap actions"
+        />
+        <MingoInfoCard
+          title="Investigate flaky NATS reconnect"
+          description="Reconnect storm under network partition — needs a repro."
+          icon={<CheckSquareIcon size={24} />}
+          status={{ label: 'Blocked', variant: 'error' }}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Roadmap actions"
+        />
+      </div>
+    )
+  },
+}
+
+// =============================================================================
+// Marketing campaign — megaphone icon · coloured status pill
+// =============================================================================
+
+export const MarketingCampaign: Story = {
+  render: () => {
+    const HREF = 'https://hub.flamingo.cx/admin/campaigns/c-91'
+    return (
+      <div className="flex flex-col gap-3">
+        <MingoInfoCard
+          title="Spring RMM migration push"
+          description="Apr 1, 2026 · 3 goals · Marketing campaign"
+          icon={<Megaphone01Icon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Campaign actions"
+        />
+        <MingoInfoCard
+          title="Webinar promo — supply chain security"
+          description="May 20, 2026 · 1 goal · Marketing campaign"
+          icon={<Megaphone01Icon size={24} />}
+          anchorProps={makeAnchorProps(HREF)}
+          menuGroups={openMenu(HREF)}
+          menuAriaLabel="Campaign actions"
+        />
+      </div>
+    )
+  },
+}