@flamingo-stack/openframe-frontend-core 0.0.347 → 0.0.349-snapshot.20260701004402

package/src/components/announcement-bar.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import Image from '../embed-shims/next-image';
 import { X } from 'lucide-react';
 import { Button } from './ui/button';
-import { renderSvgIcon } from './icon-utils';
+import { EntityIcon } from './icon-display';
 import {
   setStoredAnnouncement,
   getStoredAnnouncement,
@@ -14,19 +13,6 @@ import { Announcement } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
 import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
 
-// Helper that defers to renderSvgIcon so we don't need local icon imports
-const getSvgIcon = (
-  name: string,
-  size: 'main' | 'cta' = 'main',
-  extra: Record<string, any> = {}
-) => {
-  const cls =
-    size === 'cta'
-      ? 'relative shrink-0 w-3 h-3 md:w-4 md:h-4'
-      : 'relative shrink-0 w-6 h-6 md:w-8 md:h-8';
-  return renderSvgIcon(name, { className: cls, ...extra });
-};
-
 export function AnnouncementBar() {
   const [announcement, setAnnouncement] = useState<Announcement | null>(null);
   const [isVisible, setIsVisible] = useState<boolean>(false);
@@ -138,24 +124,18 @@ export function AnnouncementBar() {
 
   const renderIcon = () => {
     if (!announcement) return null;
-
-    if (announcement.icon_type === 'png' && announcement.icon_png_url) {
-      return (
-        <Image
-          src={announcement.icon_png_url}
-          alt="Announcement icon"
-          width={32}
-          height={32}
-          className="relative shrink-0"
-          aria-hidden
-        />
-      );
-    }
-
-    return getSvgIcon(
-      announcement.icon_svg_name || 'openframe-logo',
-      'main',
-      announcement.icon_svg_props ?? {}
+    // ONE unified display path (shared with the chat): uploaded image URL wins,
+    // else a library glyph by name (+ props), via <EntityIcon>.
+    return (
+      <EntityIcon
+        icon={{
+          name: announcement.icon_name || 'openframe-logo',
+          url: announcement.icon_url,
+          props: announcement.icon_props,
+        }}
+        size={32}
+        className="relative shrink-0 w-6 h-6 md:w-8 md:h-8"
+      />
     );
   };
 
@@ -201,11 +181,13 @@ export function AnnouncementBar() {
                 variant="outline"
                 size="small-legacy"
                 leftIcon={
-                  announcement.cta_show_icon && announcement.cta_icon
-                    ? getSvgIcon(
-                        announcement.cta_icon,
-                        'cta',
-                        announcement.cta_icon_props ?? {}
+                  announcement.cta_show_icon && announcement.cta_icon_name
+                    ? (
+                        <EntityIcon
+                          icon={{ name: announcement.cta_icon_name, props: announcement.cta_icon_props }}
+                          size={16}
+                          className="w-3 h-3 md:w-4 md:h-4"
+                        />
                       )
                     : undefined
                 }

package/src/components/chat/embeddable-chat.tsx

@@ -99,8 +99,7 @@ import { resolveHrefForRuntime } from './utils/chat-nav-resolution'
 import { ChatPanelContext, type ChatPanelHandle } from './chat-panel-context'
 import { resolveSourceRowCTA, sourceRowCtxFromRuntime } from './utils/source-row-cta'
 import { chatChipClass } from './utils/chip-styles'
-import { getIconComponent } from './utils/icon-registry'
-import { resolveOnboardingIcon } from './utils/onboarding-icons'
+import { resolveIcon } from './utils/icon-library'
 import { getSourceIconName } from './utils/source-icons'
 import { formatSingularLookupInvocation } from './utils/slash-dispatch-utils'
 
@@ -442,7 +441,7 @@ function dispatchSlashCommandAction(
  */
 function resolveChipIcon(src: ChatSource): React.ReactNode {
   const iconName = getSourceIconName(src.sourceRepo)
-  const Icon = iconName ? getIconComponent(iconName) : FileText
+  const Icon = iconName ? resolveIcon(iconName, { variant: 'brand' }) : FileText
   return <Icon className="h-3.5 w-3.5" />
 }
 
@@ -874,7 +873,7 @@ function EmbeddableChatInner({
       resolveSourceIcon: (sourceId: string) => {
         const iconName = getSourceIconName(sourceId)
         if (!iconName) return undefined
-        return { Icon: getIconComponent(iconName), label: sourceId }
+        return { Icon: resolveIcon(iconName, { variant: 'brand' }), label: sourceId }
       },
       onAction: (cmd: SlashCommandSummary, actionId: SlashCommandActionId) => {
         dispatchSlashCommandAction(actionId, cmd.id, chatInputRef)
@@ -1837,7 +1836,7 @@ function EmbeddableChatInner({
                             />
                           ))}
                         {chipCommands.map((cmd) => {
-                          const Icon = resolveOnboardingIcon(cmd.iconName)
+                          const Icon = resolveIcon(cmd.iconName)
                           const cmdId = cmd.id
                           const label = cmd.label ?? `/${cmdId}`
                           const cardActions = cmd.actions.map((action) => ({

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/footer.tsx

@@ -79,7 +79,7 @@ function UniversalFooter({ config, renderLink }: { config: FooterConfig; renderL
   const linkRenderer = renderLink || defaultRenderLink
   
   return (
-    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-bg-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-50 border-t border-ods-border`}>
+    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-bg-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-[44] border-t border-ods-border`}>
       <div className="w-full grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 items-start">
         
         {/* Column 1: Logo and optionally description */}

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/components/navigation/sliding-sidebar.tsx

@@ -155,7 +155,11 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
 
   return (
     <>
-      {/* Overlay */}
+      {/* Overlay — admin-drawer tier (overlay z-[45] / panel z-[46]): ABOVE the
+          footer (lowered to z-[44]) so the open drawer covers it, but BEHIND the
+          header (z-[50]) so the header stays visible on top (the panel has a
+          header spacer below). Kept under z-50 so it also stays beneath modals/
+          dialogs (z-50+). See the z-index hierarchy in ODS_TOKEN_RULES.md. */}
       <AnimatePresence>
         {config.isOpen && (
           <motion.div
@@ -166,7 +170,7 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
               duration: 0.3, 
               ease: [0.4, 0, 0.2, 1]
             }}
-            className="fixed inset-0 bg-black/50 z-[40]"
+            className="fixed inset-0 bg-black/50 z-[45]"
             onClick={() => config.onClose()}
           />
         )}
@@ -187,7 +191,7 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
           velocity: config.isOpen ? 5 : -5
         }}
         className={cn(
-          "fixed top-0 bottom-0 z-[45] w-72 bg-ods-card border-ods-border flex flex-col shadow-xl",
+          "fixed top-0 bottom-0 z-[46] w-72 bg-ods-card border-ods-border flex flex-col shadow-xl",
           config.position === 'right' ? "right-0 border-l" : "left-0 border-r",
           config.className
         )}

package/src/stories/AnnouncementBar.stories.tsx

@@ -40,8 +40,7 @@ const baseAnnouncement: Announcement = {
   title: 'New Feature Released',
   description: 'Check out our latest updates and improvements to the platform.',
   background_color: '#FFD951',
-  icon_type: 'svg',
-  icon_svg_name: 'rocket',
+  icon_name: 'rocket',
   platform_id: 'openframe',
   is_active: true,
   created_at: now,
@@ -95,12 +94,12 @@ export const WithCTA: Story = {
         title: 'OpenFrame v2.0 is here!',
         description: 'Explore the new dashboard, improved device management, and more.',
         background_color: '#FFD951',
-        icon_svg_name: 'star',
+        icon_name: 'star',
         cta_enabled: true,
         cta_text: 'Learn More',
         cta_url: 'https://example.com',
         cta_target: '_blank',
-        cta_icon: 'rocket',
+        cta_icon_name: 'rocket',
         cta_show_icon: true,
         cta_button_background_color: '#1A1A1A',
         cta_button_text_color: '#FFFFFF',
@@ -122,7 +121,7 @@ export const WithCTASameTab: Story = {
         title: 'Scheduled Maintenance',
         description: 'We will perform maintenance on Saturday from 2:00 AM to 4:00 AM UTC.',
         background_color: '#FFE082',
-        icon_svg_name: 'info',
+        icon_name: 'info',
         cta_enabled: true,
         cta_text: 'View Status',
         cta_url: '/status',
@@ -145,7 +144,7 @@ export const BlueBackground: Story = {
         title: 'Join our Community',
         description: 'Connect with other MSPs and share best practices.',
         background_color: '#60A5FA',
-        icon_svg_name: 'megaphone',
+        icon_name: 'megaphone',
       })
       return <Story />
     },
@@ -164,7 +163,7 @@ export const GreenBackground: Story = {
         title: 'All Systems Operational',
         description: 'Everything is running smoothly. No issues detected.',
         background_color: '#86EFAC',
-        icon_svg_name: 'bell',
+        icon_name: 'bell',
       })
       return <Story />
     },
@@ -183,7 +182,7 @@ export const WithOpenFrameLogo: Story = {
         title: 'Welcome to OpenFrame',
         description: 'Your open-source IT infrastructure management platform.',
         background_color: '#FFD951',
-        icon_svg_name: 'openframe-logo',
+        icon_name: 'openframe-logo',
         cta_enabled: true,
         cta_text: 'Get Started',
         cta_url: '/getting-started',
@@ -208,8 +207,7 @@ export const WithPNGIcon: Story = {
         title: 'Partner Program Launch',
         description: 'Become an OpenFrame certified partner and grow your business.',
         background_color: '#C4B5FD',
-        icon_type: 'png',
-        icon_png_url: 'https://placehold.co/32x32/1a1a1a/white?text=OF',
+        icon_url: 'https://placehold.co/32x32/1a1a1a/white?text=OF',
       })
       return <Story />
     },
@@ -229,7 +227,7 @@ export const LongContent: Story = {
         description:
           'This is an extremely long description that goes into great detail about the announcement. It should be truncated on the desktop view and hidden on mobile view to keep the bar compact and readable.',
         background_color: '#FCA5A5',
-        icon_svg_name: 'info',
+        icon_name: 'info',
         cta_enabled: true,
         cta_text: 'Read Full Announcement',
         cta_url: '/announcements/long',