@flamingo-stack/openframe-frontend-core 0.0.348 → 0.0.349

package/src/components/chat/guide-welcome.tsx

@@ -5,6 +5,7 @@ import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { Skeleton } from '../ui/skeleton'
 import { ChatQuickActionRow } from './chat-quick-action-row'
+import { EntityIcon } from '../icon-display'
 
 // =============================================================================
 // Types
@@ -18,6 +19,19 @@ export interface GuideQuickAction {
   label: string
   /** Prompt text seeded into the composer on click. Defaults to `label`. */
   prompt?: string
+  /** Optional library-glyph name (resolved via the onboarding-icon registry). */
+  iconName?: string | null
+  /** Optional uploaded image URL (wins over `iconName`). */
+  iconUrl?: string | null
+  /** Optional props spread onto the resolved glyph. */
+  iconProps?: Record<string, unknown> | null
+}
+
+/** A chip's leading icon via the unified <EntityIcon> (shared with the
+ *  announcement bar). Undefined when the chip has no icon. */
+function renderQuickActionIcon(a: GuideQuickAction): React.ReactNode {
+  if (!a.iconName && !a.iconUrl) return undefined
+  return <EntityIcon icon={{ name: a.iconName, url: a.iconUrl, props: a.iconProps }} size={16} />
 }
 
 export interface GuideWelcomeProps {
@@ -113,6 +127,7 @@ export function GuideWelcome({
       quickActions.map((action) => ({
         id: action.id,
         label: action.label,
+        icon: renderQuickActionIcon(action),
         onSelect: () => onQuickAction?.(action),
         onHoverStart: () => onQuickActionHover?.(action),
         onHoverEnd: () => onQuickActionHoverEnd?.(),

package/src/components/chat/slash-command-suggestions.tsx

@@ -3,7 +3,7 @@
 import type { KeyboardEvent } from 'react'
 import { cn } from '../../utils/cn'
 import { MingoOnboardingCard } from './mingo-onboarding-card'
-import { resolveOnboardingIcon } from './utils/onboarding-icons'
+import { resolveIcon } from './utils/icon-library'
 import type {
   SlashCommandActionId,
   SlashCommandSourceMeta,
@@ -24,7 +24,7 @@ interface SlashCommandSuggestionsProps {
   onSelect: (cmd: SlashCommandSummary) => void
   /** Legacy `primarySourceId` → icon resolver. Used as a FALLBACK only
    *  when `cmd.iconName` is missing. Newer command summaries carry
-   *  `iconName` directly and route through `resolveOnboardingIcon` so
+   *  `iconName` directly and route through `resolveIcon` so
    *  the dropdown row uses the same icon registry as the empty-state
    *  onboarding cards. */
   resolveSourceIcon?: (sourceId: string) => SlashCommandSourceMeta | undefined
@@ -47,11 +47,11 @@ interface SlashCommandSuggestionsProps {
  * `border-b` divider into a clean 1-px frame.
  *
  * Icon resolution priority:
- *   1. `cmd.iconName` → `resolveOnboardingIcon` (production path —
+ *   1. `cmd.iconName` → `resolveIcon` (production path —
  *      matches the keys returned by `/api/docs/commands`).
  *   2. `cmd.primarySourceId` → consumer-provided `resolveSourceIcon`
  *      (legacy fallback for command feeds without `iconName`).
- *   3. `FileIcon` (default inside `resolveOnboardingIcon`).
+ *   3. `FileIcon` (default inside `resolveIcon`).
  *
  * Clicking the row body fires `onSelect` (the host typically maps this
  * to Search-mode pre-fill so the user can refine). Clicking an action
@@ -85,7 +85,7 @@ export function SlashCommandSuggestions({
       )}
     >
       {commands.map((cmd, idx) => {
-        const Icon = resolveOnboardingIcon(cmd.iconName)
+        const Icon = resolveIcon(cmd.iconName)
         // Legacy resolver runs ONLY when `iconName` is missing — otherwise
         // the v2 registry above is authoritative.
         const legacyMeta =

package/src/components/chat/utils/__tests__/icon-resolver.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { resolveIcon, ICON_OPTIONS } from '../icon-library'
+import { getIconComponent } from '../icon-registry'
+
+/**
+ * Proof that unifying the two resolvers into one variant-aware `resolveIcon`
+ * does NOT change any glyph:
+ *   - brand variant must be REFERENCE-IDENTICAL to the legacy `getIconComponent`
+ *     (so every social / source-row consumer renders exactly the same icon).
+ *   - design variant must resolve every curated picker name to a real component
+ *     (no new FileIcon regressions), and never throw on null/unknown.
+ */
+
+// Names spanning BOTH consumer families, incl. the overlap set flagged in review
+// (github/slack/clickup/hubspot) and the brand-color social names, plus PascalCase
+// DB values that `getIconComponent` normalises.
+const BRAND_NAMES = [
+  'github', 'slack', 'clickup', 'hubspot', 'openframe',
+  'linkedin', 'facebook', 'youtube', 'twitter', 'instagram', 'discord', 'rocket',
+  // PascalCase social_platforms.icon_name values:
+  'LinkedInIcon', 'XLogo', 'YouTubeIcon', 'Github',
+  // unknown + nullish:
+  'definitely-not-an-icon',
+]
+
+describe('unified resolveIcon — brand variant preserves getIconComponent exactly', () => {
+  for (const name of BRAND_NAMES) {
+    it(`brand('${name}') === getIconComponent('${name}')`, () => {
+      expect(resolveIcon(name, { variant: 'brand' })).toBe(getIconComponent(name))
+    })
+  }
+
+  it('null/undefined brand → same fallback as getIconComponent, no throw', () => {
+    expect(resolveIcon(null, { variant: 'brand' })).toBe(getIconComponent(null))
+    expect(resolveIcon(undefined, { variant: 'brand' })).toBe(getIconComponent(undefined))
+  })
+})
+
+describe('unified resolveIcon — design variant (default) resolves every picker name', () => {
+  it('every ICON_OPTIONS key resolves to a real component', () => {
+    for (const opt of ICON_OPTIONS) {
+      const Comp = resolveIcon(opt.key)
+      expect(Comp, `design('${opt.key}') should resolve`).toBeDefined()
+    }
+  })
+
+  it('null/unknown design → defined fallback, never throws', () => {
+    expect(resolveIcon(null)).toBeDefined()
+    expect(resolveIcon('definitely-not-an-icon')).toBeDefined()
+  })
+})

package/src/components/chat/utils/{onboarding-icons.tsx → icon-library.tsx}

@@ -28,8 +28,9 @@
  * misconfigured row still renders.
  */
 
-import type { ComponentType } from 'react'
+import type { ComponentType, CSSProperties } from 'react'
 
+import { getIconComponent } from './icon-registry'
 import * as IconsV2 from '../../icons-v2-generated'
 import { ClickupLogoGreyIcon } from '../../icons-v2-generated/brand-logos/clickup-logo-grey-icon'
 import { GithubIcon } from '../../icons-v2-generated/brand-logos/github-icon'
@@ -52,14 +53,30 @@ import { VideoRecorderIcon } from '../../icons-v2-generated/audio-and-visual/vid
 import { SearchIcon } from '../../icons-v2-generated/interface/search-icon'
 import { TicketIcon } from '../../icons-v2-generated/shopping/ticket-icon'
 import { OpenFrameLogo } from '../../icons/openframe-logo'
+import { OpenmspLogo } from '../../icons/openmsp-logo'
+import { FlamingoLogo } from '../../icons/flamingo-logo'
+import { Megaphone, Bell, Info, Star, Package as PackageGlyph } from 'lucide-react'
 
 /** Shape used by every icon registered here (matches `icons-v2-generated`). */
-export type OnboardingIconComponent = ComponentType<{
+export type IconComponent = ComponentType<{
   size?: number
   className?: string
   color?: string
 }>
 
+/** Wrap a brand logo (className/SVG-sized) so it satisfies the `size`-prop
+ *  `IconComponent` contract — drives size via `style` (CSS wins over
+ *  the logo's hardcoded width/height), keeping the logo's own brand fill. */
+function sizedLogo(
+  Logo: ComponentType<{ className?: string; style?: CSSProperties }>,
+): IconComponent {
+  return function SizedLogo({ size = 16, className }) {
+    return <Logo className={className} style={{ width: size, height: size }} />
+  }
+}
+const OpenmspLogoIcon = sizedLogo(OpenmspLogo)
+const FlamingoLogoIcon = sizedLogo(FlamingoLogo)
+
 /**
  * `OpenFrameLogo` from `components/icons/` predates the v2 set and:
  *   1. hardcodes `width="32" height="32"` AFTER spreading `{...props}`,
@@ -74,16 +91,20 @@ export type OnboardingIconComponent = ComponentType<{
 function LogoOpenframeIcon({
   size = 16,
   className,
+  color,
 }: {
   size?: number
   className?: string
   color?: string
 }) {
+  // Forward `color` (from `icon_props.color`) like every other resolver-backed
+  // glyph; default to `currentColor` so the logo tints to its slot.
+  const tint = color ?? 'currentColor'
   return (
     <OpenFrameLogo
       className={className}
-      lowerPathColor="currentColor"
-      upperPathColor="currentColor"
+      lowerPathColor={tint}
+      upperPathColor={tint}
       style={{ width: size, height: size }}
     />
   )
@@ -95,7 +116,7 @@ function LogoOpenframeIcon({
  * monochrome v2 glyphs that inherit `currentColor` from the card slot
  * (`text-ods-text-secondary`).
  */
-export const ONBOARDING_ICONS: Record<string, OnboardingIconComponent> = {
+export const ICON_ALIASES: Record<string, IconComponent> = {
   // Production `/api/docs/commands` keys (multi-platform-hub contract)
   clickup: ClickupLogoGreyIcon,
   slack: SlackLogoGreyIcon,
@@ -124,6 +145,18 @@ export const ONBOARDING_ICONS: Record<string, OnboardingIconComponent> = {
   'rocket-01': Rocket02Icon,
   'rocket-02': Rocket02Icon,
 
+  // Announcement-bar legacy names — folded in so resolveIcon covers them too
+  // (was the separate `renderSvgIcon` map; now ONE resolver everywhere).
+  'openframe-logo': LogoOpenframeIcon,
+  'openmsp-logo': OpenmspLogoIcon,
+  flamingo: FlamingoLogoIcon,
+  'flamingo-logo': FlamingoLogoIcon,
+  megaphone: Megaphone,
+  bell: Bell,
+  info: Info,
+  star: Star,
+  package: PackageGlyph,
+
   // Generic v2-native keys — useful fall-throughs for slash commands that
   // don't have a brand-specific glyph in the design.
   search: SearchIcon,
@@ -145,7 +178,7 @@ export const ONBOARDING_ICONS: Record<string, OnboardingIconComponent> = {
  *
  * Every generated icon follows one naming convention: a file named
  * `<kebab>-icon.tsx` exports a component `<PascalCase>Icon` with the
- * `{ size, className, color }` signature `OnboardingIconComponent`
+ * `{ size, className, color }` signature `IconComponent`
  * expects. So any backend `iconName` that names a real icon (e.g.
  * `chart-pie`, `bank`, `money-bill-dollar`, `piggy-bank`) resolves
  * here without a hand-maintained entry — the whole library is
@@ -161,7 +194,7 @@ export const ONBOARDING_ICONS: Record<string, OnboardingIconComponent> = {
  */
 function resolveFromLibrary(
   iconName: string,
-): OnboardingIconComponent | undefined {
+): IconComponent | undefined {
   const tokens = iconName.trim().toLowerCase().replace(/_/g, '-').split('-')
   if (tokens.some((t) => t.length === 0)) return undefined
   const cap = (t: string) => t.charAt(0).toUpperCase() + t.slice(1)
@@ -169,7 +202,7 @@ function resolveFromLibrary(
     `${tokens.map(cap).join('')}Icon`,
     `${tokens.map((t) => (t === 'ai' ? 'AI' : cap(t))).join('')}Icon`,
   ]
-  const registry = IconsV2 as unknown as Record<string, OnboardingIconComponent | undefined>
+  const registry = IconsV2 as unknown as Record<string, IconComponent | undefined>
   for (const name of candidates) {
     const Icon = registry[name]
     if (Icon) return Icon
@@ -178,25 +211,38 @@ function resolveFromLibrary(
 }
 
 /**
- * Look up the icon component for a backend `iconName`. Resolution order:
- *   1. Curated `ONBOARDING_ICONS` alias — wins so brand-grey logos, the
- *      tinted OpenFrame logo, and plural/semantic aliases keep their
- *      intended glyph instead of the literal-name match.
- *   2. Generic `icons-v2-generated` lookup by naming convention — covers
- *      every other icon in the library.
- *   3. `FileIcon` for unknown / missing keys so the card always renders.
+ * THE single icon-name → component resolver for the whole app. Two variants —
+ * one entry point, no duplicated resolver machinery:
+ *
+ *   • `'design'` (DEFAULT): the icons-v2 design set — chat chips, slash
+ *      autocomplete, announcement bar, AI-agent icons, the admin picker.
+ *      Order: curated `ICON_ALIASES` (brand-grey logos, tinted OpenFrame,
+ *      semantic aliases) → generic `icons-v2-generated` by naming convention →
+ *      `FileIcon`.
+ *   • `'brand'`: the brand/social set (lucide + brand-colored logos) via the
+ *      registry resolver `getIconComponent` (PascalCase-normalised) — social
+ *      links, source-row CTAs.
+ *
+ * The two glyph SETS differ on purpose (a grey design 'slack' vs a brand-color
+ * social 'slack'); this resolver is the ONE place that owns both. `getIconComponent`
+ * / `getDynamicIcon` remain as the brand-variant + sized-brand helpers.
  */
-export function resolveOnboardingIcon(
+export function resolveIcon(
   iconName: string | null | undefined,
-): OnboardingIconComponent {
+  opts?: { variant?: 'design' | 'brand' },
+): IconComponent {
+  if (opts?.variant === 'brand') {
+    // Brand variant — delegate to the registry resolver (same glyph as before).
+    return getIconComponent(iconName) as IconComponent
+  }
   if (!iconName) return FileIcon
-  return ONBOARDING_ICONS[iconName] ?? resolveFromLibrary(iconName) ?? FileIcon
+  return ICON_ALIASES[iconName] ?? resolveFromLibrary(iconName) ?? FileIcon
 }
 
 /** One selectable icon in the admin slash-command picker. */
-export interface OnboardingIconOption {
+export interface IconOption {
   /** Stored `icon_name` value — a kebab-case `icons-v2-generated` key (or a
-   *  curated alias) that `resolveOnboardingIcon` displays in the chat. */
+   *  curated alias) that `resolveIcon` displays in the chat. */
   key: string
   /** Human-friendly label shown in the picker dropdown. */
   label: string
@@ -207,14 +253,14 @@ export interface OnboardingIconOption {
  * (`/admin/chat-config` → Edit slash command).
  *
  * THE PICKER AND THE CHAT SHARE ONE ICON SOURCE: every `key` here is an
- * `icons-v2-generated` name (or curated alias) that `resolveOnboardingIcon`
+ * `icons-v2-generated` name (or curated alias) that `resolveIcon`
  * renders — so whatever the admin selects always displays in the chip /
  * autocomplete, with no fallback-glyph drift. (The full library is far larger
  * and resolvable generically; this is the curated, slash-command-relevant
  * subset for a usable dropdown.) Keep keys kebab-case to match the DB
  * `chat_admin_slash_commands.icon_name` convention.
  */
-export const ONBOARDING_ICON_OPTIONS: ReadonlyArray<OnboardingIconOption> = [
+export const ICON_OPTIONS: ReadonlyArray<IconOption> = [
   // Brands
   { key: 'openframe', label: 'OpenFrame' },
   { key: 'slack', label: 'Slack' },

package/src/components/chat/utils/index.ts

@@ -173,16 +173,16 @@ export {
   getDynamicIcon,
   type DynamicIconSize,
 } from './icon-registry'
-// Onboarding/slash-command icons — `icons-v2-generated`-backed resolver shared
-// by the chat empty-state chips, the slash-command autocomplete, AND the admin
-// icon picker (`ONBOARDING_ICON_OPTIONS`), so picked icons always display.
-export {
-  resolveOnboardingIcon,
-  ONBOARDING_ICONS,
-  ONBOARDING_ICON_OPTIONS,
-  type OnboardingIconComponent,
-  type OnboardingIconOption,
-} from './onboarding-icons'
+// Library icon resolver — `icons-v2-generated`-backed, shared by the chat
+// empty-state chips, the slash-command autocomplete, AND the admin icon picker
+// (`ICON_OPTIONS`), so picked icons always display.
+export {
+  resolveIcon,
+  ICON_ALIASES,
+  ICON_OPTIONS,
+  type IconComponent,
+  type IconOption,
+} from './icon-library'
 export {
   SOURCE_ICON_NAMES,
   getSourceIconName,

package/src/components/icon-display.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import * as React from 'react'
+import { AgentMark, type AgentName } from './agent-mark'
+import { resolveIcon } from './chat/utils/icon-library'
+
+/** Unified icon value used across the app (announcement bar, chat quick actions,
+ *  AI-agent identity). Exactly one of `name`/`url` is typically set. */
+export interface EntityIconValue {
+  /** Library glyph name resolved via {@link resolveIcon} (icons-v2 + curated aliases). */
+  name?: string | null
+  /** Uploaded image URL — wins over `name`. */
+  url?: string | null
+  /** Props spread onto the resolved glyph (e.g. `{ color }`). */
+  props?: Record<string, unknown> | null
+}
+
+const BRAND_MARK_NAMES = new Set<string>(['fae', 'mingo'])
+
+/**
+ * THE single icon-display path for the whole app. Resolution order:
+ *   1. `url` → uploaded image
+ *   2. `name` ∈ {fae,mingo} → packaged `AgentMark`
+ *   3. `name` → library glyph via `resolveIcon` (+ `props`)
+ *
+ * Replaces the old per-surface logic (the announcement bar's `renderSvgIcon`
+ * map and the chat's ad-hoc `resolveIcon` calls) so every surface renders an
+ * icon identically.
+ */
+export function EntityIcon({
+  icon,
+  size = 20,
+  className,
+}: {
+  icon?: EntityIconValue | null
+  size?: number
+  className?: string
+}): React.ReactElement {
+  if (icon?.url) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return (
+      <img
+        src={icon.url}
+        alt=""
+        width={size}
+        height={size}
+        className={className}
+        style={{ objectFit: 'contain' }}
+      />
+    )
+  }
+  if (icon?.name && BRAND_MARK_NAMES.has(icon.name)) {
+    // Size via `className` when provided (so responsive Tailwind sizing like
+    // `w-6 md:w-8` works); fall back to a fixed `size` px box ONLY when no
+    // className is given — an inline `style` would otherwise override the class.
+    return (
+      <span
+        className={`inline-flex${className ? ` ${className}` : ''}`}
+        style={className ? undefined : { width: size, height: size }}
+      >
+        <AgentMark agent={icon.name as AgentName} className="w-full h-full" />
+      </span>
+    )
+  }
+  const Glyph = resolveIcon(icon?.name ?? undefined)
+  return <Glyph size={size} className={className} {...(icon?.props ?? {})} />
+}

package/src/components/index.ts

@@ -110,3 +110,5 @@ export { AuthorDetailView, type AuthorDetailViewProps } from './authors/author-d
 
 // Priority UI components that exist in main components directory
 // Note: These are re-exported from ./ui already, no need to duplicate
+
+export { EntityIcon, type EntityIconValue } from './icon-display'

package/src/stories/MingoOnboardingCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { MingoOnboardingCard } from '../components/chat/mingo-onboarding-card'
-import { resolveOnboardingIcon } from '../components/chat/utils/onboarding-icons'
+import { resolveIcon } from '../components/chat/utils/icon-library'
 import { ClickupLogoGreyIcon } from '../components/icons-v2-generated/brand-logos/clickup-logo-grey-icon'
 import { CompassIcon } from '../components/icons-v2-generated/map-and-travel/compass-icon'
 import { Rocket02Icon } from '../components/icons-v2-generated/vehicles-and-delivery/rocket-02-icon'
@@ -126,7 +126,7 @@ export const WithActions: Story = {
 
 // =============================================================================
 // Stack of `chipCommands` — mirrors Figma node 7363:205938 (full empty-state).
-// Icons are resolved via the shared `resolveOnboardingIcon` registry so the
+// Icons are resolved via the shared `resolveIcon` registry so the
 // story stays in sync with the chat's runtime mapping.
 // =============================================================================
 
@@ -247,7 +247,7 @@ export const ChipCommands: Story = {
     <>
       {SAMPLE_CHIP_COMMANDS.map(
         ({ iconName, label, slashCommand, description, actions }) => {
-          const Icon = resolveOnboardingIcon(iconName)
+          const Icon = resolveIcon(iconName)
           return (
             <MingoOnboardingCard
               key={slashCommand + label}

package/src/stories/SlashCommandSuggestions.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof SlashCommandSuggestions> = {
     docs: {
       description: {
         component:
-          'Slash-command autocomplete dropdown — opens above the chat input when the user types `/`. Each row is a `MingoOnboardingCard` so the dropdown and the empty-state list share one card design. Icons resolve through the shared `resolveOnboardingIcon` registry; the production `/api/docs/commands` short keys (`clickup`, `github`, `slack`, `openframe`, `rocket`, `briefcase`, `graduation-cap`, `video`, `headphones`, `calendar`, …) are wired up alongside the legacy Figma-style aliases.',
+          'Slash-command autocomplete dropdown — opens above the chat input when the user types `/`. Each row is a `MingoOnboardingCard` so the dropdown and the empty-state list share one card design. Icons resolve through the shared `resolveIcon` registry; the production `/api/docs/commands` short keys (`clickup`, `github`, `slack`, `openframe`, `rocket`, `briefcase`, `graduation-cap`, `video`, `headphones`, `calendar`, …) are wired up alongside the legacy Figma-style aliases.',
       },
     },
   },