@flamingo-stack/openframe-frontend-core 0.0.705 → 0.0.706-snapshot.20261006181108

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 /**
- * CaseStudyCard (pure presentation). Two densities — `default` (vertical
- * detail) and `sm` (compact horizontal for chat-inline).
+ * CaseStudyCard (pure presentation). Four densities — `default` (vertical
+ * detail), `sm` (compact horizontal for chat-inline), `portrait` (rails and
+ * strips) and `menu` (the site menu's card, hover-plays the highlight cut).
  *
  * The card writes NO click logic — callers wrap with their own anchor
  * and pass the resolved detail URL via `href`.
@@ -12,9 +13,15 @@
  *   `useOgPlaceholderUrl(...)`) → `bg-ods-bg`.
  */
 
+import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
-import type { CaseStudy } from '../../../types/case-study';
+import Link from '../../../embed-shims/next-link';
+import type { CaseStudyCardData } from '../../../types/case-study';
 import { cn } from '../../../utils/cn';
+import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
+import { CardHoverPlay } from '../../features/video-center-badge';
+import { VideoHoverPreviewSurface } from '../../features/video-hover-preview';
+import { EntityIcon } from '../../icon-display';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -36,7 +43,7 @@ import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
 export interface CaseStudyCardProps {
-  study: CaseStudy;
+  study: CaseStudyCardData;
   /** Detail URL resolved by the caller. */
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -46,7 +53,14 @@ export interface CaseStudyCardProps {
   targetPlatform?: string | null;
   /** OG placeholder URL, used when `study.featured_image` is missing. */
   placeholderUrl?: string | null;
-  size?: 'default' | 'sm' | 'portrait';
+  /** `menu` is the site menu's card: the story's video plays muted on hover or
+   *  focus (the video bites' hover grammar), then who it is about and who tells it. */
+  size?: 'default' | 'sm' | 'portrait' | 'menu';
+  /** `menu`: mount the hover player (the host passes whether its panel is open,
+   *  so a closed menu holds no player). Omitted: the card's own viewport gate. */
+  mediaMounted?: boolean;
+  /** `menu`: runs on click, before the navigation (the host closes its panel). */
+  onNavigate?: () => void;
   /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
   showTypeBadge?: boolean;
   className?: string;
@@ -92,6 +106,22 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   );
 }
 
+/**
+ * A story's HIGHLIGHT cut, the short video a card previews: its highlight
+ * video, else the bite an admin featured (the newest when several are; featuring
+ * is independent of the bite's own `published` flag, as on every featured surface). Never
+ * the full video: that plays on the story's own page. Null when it has neither.
+ */
+function caseStudyHighlight(study: CaseStudyCardData): { url: string; posterUrl: string | null } | null {
+  if (study.highlight_video_url) {
+    return { url: study.highlight_video_url, posterUrl: study.highlight_video_thumbnail ?? null };
+  }
+  const bite = (study.video_bites ?? [])
+    .filter(candidate => candidate.featured === true && candidate.url)
+    .sort(sortBitesByFeaturedAtDesc)[0];
+  return bite ? { url: bite.url, posterUrl: bite.thumbnail_url ?? null } : null;
+}
+
 export function CaseStudyCard({
   study,
   href,
@@ -101,8 +131,11 @@ export function CaseStudyCard({
   placeholderUrl: placeholderUrlProp,
   size = 'default',
   showTypeBadge = true,
+  mediaMounted,
+  onNavigate,
   className,
 }: CaseStudyCardProps) {
+  const [hovered, setHovered] = useState(false);
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -149,6 +182,83 @@ export function CaseStudyCard({
     );
   }
 
+  if (size === 'menu') {
+    const preview = caseStudyHighlight(study);
+    const videoUrl = preview?.url ?? null;
+    const hasAnyVideo = !!(videoUrl || study.main_video_url);
+    // The cover is the FULL video's poster (wide, like the card); the highlight
+    // cut's own frame is usually upright and would not fill a 16:9 slot.
+    const poster = study.main_video_thumbnail || study.featured_image || preview?.posterUrl || null;
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        onClick={onNavigate}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        onFocus={() => setHovered(true)}
+        onBlur={() => setHovered(false)}
+        className={cn(
+          // `group/card` is what the shared play glyph accents on.
+          'group/card group flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
+          className,
+        )}
+      >
+        {/* The media never takes the click: the whole card is the link. */}
+        <span className="pointer-events-none relative block aspect-video w-full shrink-0 overflow-hidden rounded-md bg-ods-bg">
+          {videoUrl ? (
+            // The shared hover surface, filled the way the walkthrough card fills
+            // its own 16:9 slot (`cover`): an upright cut is cropped to the slot,
+            // never letterboxed. Sound on hover, muted when the browser blocks it.
+            <VideoHoverPreviewSurface
+              url={videoUrl}
+              posterUrl={poster}
+              active={hovered}
+              playerMounted={mediaMounted}
+              fit="cover"
+              posterSizes="360px"
+            />
+          ) : (
+            <>
+              {(poster ?? placeholderUrl) && (
+                <Image
+                  src={poster ?? placeholderUrl ?? ''}
+                  alt=""
+                  className="object-cover"
+                  fill
+                  sizes="360px"
+                  unoptimized
+                  onError={hideOnError}
+                />
+              )}
+              {hasAnyVideo && <CardHoverPlay size="md" />}
+            </>
+          )}
+        </span>
+        {study.msp?.name && (
+          <span className="flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h6">
+            {study.msp.icon_url && (
+              <EntityIcon
+                icon={{ url: study.msp.icon_url }}
+                size={20}
+                className="size-5 shrink-0 rounded object-contain"
+              />
+            )}
+            <span className="min-w-0 truncate">{study.msp.name}</span>
+          </span>
+        )}
+        <span className="line-clamp-2 text-h6">{study.title}</span>
+        {study.user?.full_name && (
+          <span className="truncate text-ods-text-muted text-h6">
+            {study.user.job_title ? `${study.user.full_name}, ${study.user.job_title}` : study.user.full_name}
+          </span>
+        )}
+        <span className="mt-auto text-ods-accent text-h6">{hasAnyVideo ? 'Watch the story' : 'Read the story'}</span>
+      </Link>
+    );
+  }
+
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell.
     return (

package/src/components/chat/types/message.types.ts

@@ -12,15 +12,13 @@ export const MESSAGE_TYPE = {
   TEXT: 'TEXT',
   THINKING: 'THINKING',
   ASK: 'ASK',
-  /** Per-answer source metadata (documents, videos, entity cards).
+  /** Per-answer attachments (cited documents, videos, entity cards).
    *
-   *  TWO names for ONE payload, on purpose. `SOURCES` is the contract the
-   *  backend is moving to; `GUIDE` is the envelope it ships in today, reused
-   *  from Guide Mode v2 so a released frontend keeps working during the v2→v3
-   *  rollout. Both decode through the same path, so dropping `GUIDE` later is a
-   *  deletion here and nothing else. */
+   *  `ATTACHMENTS` carries `sources` / `videos` / `cards` on the record itself.
+   *  `GUIDE` is the envelope it replaced — the same arrays under `payload` —
+   *  and stays only until every backend ships `ATTACHMENTS`. */
+  ATTACHMENTS: 'ATTACHMENTS',
   GUIDE: 'GUIDE',
-  SOURCES: 'SOURCES',
   EXECUTING_TOOL: 'EXECUTING_TOOL',
   EXECUTED_TOOL: 'EXECUTED_TOOL',
   APPROVAL_REQUEST: 'APPROVAL_REQUEST',
@@ -412,7 +410,7 @@ export interface ThinkingMessageData extends MessageDataBase {
  *
  * Lives here, beside `Message`, because BOTH transports produce it now: the SSE
  * adapter reads it off the per-turn metadata frame, and the NATS path decodes it
- * out of a `GUIDE`/`SOURCES` chunk. It used to be declared inside
+ * out of an `ATTACHMENTS` chunk. It used to be declared inside
  * `use-sse-chat-adapter`, which made "a Guide answer's citations" structurally a
  * property of one transport — `use-sse-chat-adapter` still re-exports the name
  * so existing imports keep working.
@@ -451,13 +449,20 @@ export interface ChatSource {
   label?: string;
 }
 
-/** Persisted source-metadata row. `payload` is the SAME object the live chunk
- *  carries, so history and realtime share one decoder (`sourceMetadataEvent`)
- *  and cannot drift apart. Left as an open record here rather than typed
- *  structurally: it is unvalidated wire data, and the decoder is what turns it
- *  into `ChatSource[]` / `ChatRef[]`. */
+/** Persisted attachments row (GraphQL `AttachmentsData`). The arrays are the
+ *  SAME ones the live chunk carries, so history and realtime share one decoder
+ *  (`attachmentsEvent`) and cannot drift apart. Left untyped: it is unvalidated
+ *  wire data, and the decoder is what turns it into `ChatSource[]` / `ChatRef[]`. */
+export interface AttachmentsMessageData extends MessageDataBase {
+  type: 'ATTACHMENTS';
+  sources?: unknown;
+  videos?: unknown;
+  cards?: unknown;
+}
+
+/** The envelope `ATTACHMENTS` replaced: the same arrays under `payload`. */
 export interface SourceMetadataMessageData extends MessageDataBase {
-  type: 'GUIDE' | 'SOURCES';
+  type: 'GUIDE';
   payload?: unknown;
 }
 
@@ -603,6 +608,7 @@ export type MessageData =
   | TextMessageData
   | ThinkingMessageData
   | AskMessageData
+  | AttachmentsMessageData
   | SourceMetadataMessageData
   | ExecutingToolMessageData
   | ExecutedToolMessageData
@@ -654,7 +660,7 @@ export interface ProcessedMessage {
    *  Absent when the source row(s) carried no seq. */
   streamSeq?: number;
   /** Documents this answer cited — see `Message.sources`, the same field.
-   *  Replayed from the turn's persisted `GUIDE`/`SOURCES` row, so a reloaded
+   *  Replayed from the turn's persisted `ATTACHMENTS` row, so a reloaded
    *  answer carries the citations the live one did. */
   sources?: ChatSource[];
   /** Entity references this answer's metadata described — see `Message.refs`. */

package/src/components/chat/types/unified-chat-state.types.ts

@@ -239,7 +239,7 @@ export interface UnifiedChatMessage {
   /**
    * Documents this answer cited, rendered as chips beneath it. Produced by
    * BOTH transports now — SSE reads them off the per-turn metadata frame, NATS
-   * decodes them out of a `GUIDE`/`SOURCES` chunk.
+   * decodes them out of an `ATTACHMENTS` chunk.
    */
   sources?: ChatSource[];
   /**

package/src/components/chat/utils/icon-library.tsx

@@ -30,6 +30,7 @@
 
 import { Megaphone, Bell, Info, Star, Package as PackageGlyph } from 'lucide-react';
 import type { ComponentType, CSSProperties } from 'react';
+import { platformAccentVarName } from '../../../utils/platform-identity';
 import * as IconsV2 from '../../icons-v2-generated';
 import { HeadphoneIcon } from '../../icons-v2-generated/audio-and-visual/headphone-icon';
 import { VideoRecorderIcon } from '../../icons-v2-generated/audio-and-visual/video-recorder-icon';
@@ -52,6 +53,8 @@ import { GraduationCapIcon } from '../../icons-v2-generated/school/graduation-ca
 import { TicketIcon } from '../../icons-v2-generated/shopping/ticket-icon';
 import { Rocket02Icon } from '../../icons-v2-generated/vehicles-and-delivery/rocket-02-icon';
 import { FlamingoLogo } from '../../icons/flamingo-logo';
+import { MiamiCyberGangLogoFaceOnly } from '../../icons/miami-cyber-gang-logo-face-only';
+import { MlgLogo } from '../../icons/mlg-logo';
 import { OpenFrameLogo } from '../../icons/openframe-logo';
 import { OpenmspLogo } from '../../icons/openmsp-logo';
 import { getIconComponent } from './icon-registry';
@@ -71,8 +74,37 @@ function sizedLogo(Logo: ComponentType<{ className?: string; style?: CSSProperti
     return <Logo className={className} style={{ width: size, height: size }} />;
   };
 }
-const OpenmspLogoIcon = sizedLogo(OpenmspLogo);
+// A sister platform's mark is drawn in THAT platform's brand colour (the
+// platform brand registry), never in the accent of the page showing it: on
+// flamingo.run the OpenMSP mark stays OpenMSP yellow, not flamingo pink.
+const brandColor = (platform: string) => `var(${platformAccentVarName(platform)})`;
+// The OpenMSP mark's own defaults are black and white (made for a light page):
+// on the dark surfaces every glyph sits on, the bubbles take the theme's text
+// and background tokens and the back bubble OpenMSP's brand colour.
+const OpenmspLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <OpenmspLogo
+    className={className}
+    style={{ width: size, height: size }}
+    frontBubbleColor="var(--color-text-primary)"
+    innerFrontBubbleColor="var(--color-bg)"
+    backBubbleColor={brandColor('openmsp')}
+  />
+);
 const FlamingoLogoIcon = sizedLogo(FlamingoLogo);
+// The two community marks size themselves through a `size` prop, the resolver's own contract.
+// Major League GitHub draws its mark in the theme's text colour on its own site
+// (its header, hero and footer), never in an accent: so does every glyph of it.
+const MlgLogoIcon: IconComponent = ({ size = 16, className, color }) => (
+  <MlgLogo size={size} className={className} color={color ?? 'var(--color-text-primary)'} />
+);
+const TmcgLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <MiamiCyberGangLogoFaceOnly
+    size={size}
+    className={className}
+    originalPink={brandColor('tmcg')}
+    originalWhite="var(--color-text-primary)"
+  />
+);
 
 /**
  * `OpenFrameLogo` from `components/icons/` predates the v2 set and:
@@ -138,6 +170,8 @@ export const ICON_ALIASES: Record<string, IconComponent> = {
   // (was the separate `renderSvgIcon` map; now ONE resolver everywhere).
   'openframe-logo': LogoOpenframeIcon,
   'openmsp-logo': OpenmspLogoIcon,
+  'mlg-logo': MlgLogoIcon,
+  'tmcg-logo': TmcgLogoIcon,
   flamingo: FlamingoLogoIcon,
   'flamingo-logo': FlamingoLogoIcon,
   megaphone: Megaphone,

package/src/components/chat/utils/process-historical-messages.ts

@@ -34,7 +34,12 @@ import {
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
 import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
-import { mergeSourceMetadata, sourceMetadataEvent, type SourceMetadata } from '../../../chat-protocol/source-metadata';
+import {
+  attachmentsEvent,
+  mergeSourceMetadata,
+  sourceMetadataEvent,
+  type SourceMetadata,
+} from '../../../chat-protocol/source-metadata';
 import { applyApprovalStatusToSegment } from '../stream/message-mutations';
 import {
   MESSAGE_TYPE,
@@ -122,11 +127,14 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null;
 
-    // Persisted source metadata, through the SAME decoder the live chunk uses
-    // (`sourceMetadataEvent`). That shared parse is the whole reason a reloaded
+    // Persisted attachments, through the SAME decoder the live chunk uses
+    // (`attachmentsEvent`). That shared parse is the whole reason a reloaded
     // answer renders identically to the one the reader watched arrive.
+    case MESSAGE_TYPE.ATTACHMENTS:
+      return attachmentsEvent(data);
+
+    // The envelope `ATTACHMENTS` replaced (see `MESSAGE_TYPE.GUIDE`).
     case MESSAGE_TYPE.GUIDE:
-    case MESSAGE_TYPE.SOURCES:
       return 'payload' in data ? sourceMetadataEvent(data.payload) : null;
 
     // Same completeness gate as the live decoder (`decodeNatsChunk`): a

package/src/components/index.ts

@@ -33,10 +33,8 @@ export * from './faq-accordion';
 export * from './faq';
 export * from './related-content';
 export * from './filter-chip';
-export * from './footer';
 export * from './unified-filter-logic';
 export * from './unified-pagination';
-export * from './footer-waitlist-button';
 export * from './hero-image-uploader';
 export * from './icons-block';
 export * from './image-cropper';

package/src/components/loading/page-layout-skeleton.tsx

@@ -33,7 +33,7 @@ export function AnnouncementBarSkeleton() {
 }
 
 /**
- * Header skeleton that matches the ClientOnlyHeader placeholder but with proper animations
+ * Header skeleton for a page that is still loading: logo, navigation and action placeholders
  */
 export function HeaderSkeleton() {
   return (

package/src/components/navigation/index.ts

@@ -1,20 +1,22 @@
 'use client';
 
 // Navigation component exports
-export { Header } from './header';
-export type { HeaderConfig, HeaderProps } from './header';
-
-export { MingoAiButton } from './mingo-ai-button';
+// Site navigation: one data model (`SiteNav`), rendered by the header, its
+// menu panels, the mobile sheet and the footer.
+export { SiteHeader } from './site-header';
+export type { SiteHeaderProps } from './site-header';
+export { NavPanel, isMegaMenu } from './nav-panel';
+export type { NavPanelProps } from './nav-panel';
+export { NavItemRow } from './nav-item-row';
+export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
+export { ASK_AI_OPEN_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
 export type { MingoAiButtonProps } from './mingo-ai-button';
-
-export { ClientOnlyHeader } from './client-only-header';
-export type { ClientOnlyHeaderProps } from './client-only-header';
-
-export { HeaderSkeleton } from './header-skeleton';
-export type { HeaderSkeletonProps } from './header-skeleton';
-
-export { MobileNavPanel, MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
-export type { MobileNavPanelProps } from './mobile-nav-panel';
+export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
+export type { MobileNavSheetProps } from './mobile-nav-sheet';
+export { SiteFooter } from './site-footer';
+export type { SiteFooterProps } from './site-footer';
+export { defaultRenderSiteNavLink, navLinkLabel } from './site-nav-link';
+export type { SiteNavLinkRenderer } from './site-nav-link';
 
 export { SlidingSidebar } from './sliding-sidebar';
 export type { SlidingSidebarProps } from './sliding-sidebar';
@@ -81,10 +83,15 @@ export type { NavigationNode } from './multi-level-navigation';
 
 // Re-export types from navigation types
 export type {
-  MobileNavConfig,
+  NavFeature,
+  NavGroup,
+  NavLink,
+  NavMenu,
   NavigationItem,
   NavigationSidebarConfig,
   NavigationSidebarItem,
+  SiteNav,
+  SiteNavPrimaryCta,
   SlidingSidebarConfig,
   UnifiedSidebarUser,
 } from '../../types/navigation';