@flamingo-stack/openframe-frontend-core 0.0.270 → 0.0.271-snapshot.20260616021758

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.270",
+  "version": "0.0.271-snapshot.20260616021758",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -102,7 +102,7 @@ const ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(
                 <Avatar
                   src={userAvatar}
                   alt={userName}
-                  fallback="F"
+                  fallback={userName}
                   size="xl"
                   variant="round"
                   className="bg-ods-flamingo-pink"

package/src/components/chat/entity-cards/index.ts

@@ -17,6 +17,8 @@ export {
 } from './entity-author-card'
 export { BlogImagePlaceholder } from './blog-image-placeholder'
 export { AdminContentCard } from './admin-content-card'
+export { WhatIShippedCard, WhatIShippedCardSkeleton } from './what-i-shipped-card'
+export type { WhatIShippedCardData, WhatIShippedCardProps } from './what-i-shipped-card'
 
 // Moved-into-subdir flat cards
 export { BlockCard, type BlockCardProps } from './block-card'

package/src/components/chat/entity-cards/what-i-shipped-card.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { AdminContentCard } from './admin-content-card'
+import { formatEntryMonthUTC } from '../../../utils/format'
+import { getProxiedImageUrl } from '../../../utils/image-proxy-stub'
+
+/** Minimal row shape the card renders. Both the hub dashboard entry and the
+ *  related-content hydrated row satisfy it structurally. */
+export interface WhatIShippedCardData {
+  title?: string | null
+  summary?: string | null
+  status?: string | null
+  featured_image?: string | null
+  main_video_thumbnail?: string | null
+  entry_month?: string | null
+  author?: { full_name?: string | null; avatar_url?: string | null } | null
+}
+
+export interface WhatIShippedCardProps {
+  entry: WhatIShippedCardData
+  /** OG fallback cover. Caller computes it (hub: `useOgPlaceholder`; related
+   *  rail: `extras.buildOgPlaceholderUrl`). */
+  placeholderUrl?: string | null
+  /** Owner action row (dashboard). Omit for a read-only card. */
+  actions?: React.ReactNode
+  /** When provided, the WHOLE card becomes a link (related-rail click-through).
+   *  Don't combine with `actions` (nested interactive). */
+  anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>
+  className?: string
+}
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  published: 'bg-ods-success-secondary text-ods-success',
+  draft: 'bg-ods-warning-secondary text-ods-warning',
+  archived: 'bg-ods-border text-ods-text-secondary',
+}
+
+/**
+ * THE single "What I Shipped" card. Wraps `AdminContentCard` with the canonical
+ * mapping (cover = featured_image || main_video_thumbnail, OG placeholder
+ * fallback, title, 140-char summary, status badge, author avatar+name +
+ * reporting month). Used by BOTH the people-hub dashboard (with owner `actions`)
+ * and the related-content rail (with `anchorProps` for click-through), so the
+ * card is byte-identical everywhere — one component, one mapping, no drift.
+ */
+export function WhatIShippedCard({ entry, placeholderUrl, actions, anchorProps, className }: WhatIShippedCardProps) {
+  const month = formatEntryMonthUTC(entry.entry_month, 'short')
+  const card = (
+    <AdminContentCard
+      imageUrl={entry.featured_image || entry.main_video_thumbnail}
+      placeholderUrl={placeholderUrl}
+      title={entry.title || 'Untitled entry'}
+      summary={(entry.summary ?? '').slice(0, 140) || 'No description'}
+      badges={
+        entry.status ? (
+          <span
+            className={`px-2 py-1 rounded text-xs font-medium ${
+              STATUS_BADGE_CLASS[entry.status] ?? 'bg-ods-card border border-ods-border text-ods-text-secondary'
+            }`}
+          >
+            {entry.status}
+          </span>
+        ) : null
+      }
+      meta={
+        <>
+          <span className="flex items-center gap-2 min-w-0">
+            {entry.author?.avatar_url ? (
+              <img src={getProxiedImageUrl(entry.author.avatar_url) ?? entry.author.avatar_url} alt="" className="h-5 w-5 rounded-full object-cover shrink-0" />
+            ) : null}
+            <span className="truncate">{entry.author?.full_name ?? ''}</span>
+          </span>
+          {month ? <span>{month}</span> : null}
+        </>
+      }
+      actions={actions}
+      className={className}
+    />
+  )
+  return anchorProps ? (
+    <a {...anchorProps} className="block h-full">
+      {card}
+    </a>
+  ) : (
+    card
+  )
+}
+
+/** Loading skeleton matching WhatIShippedCard's AdminContentCard shape (3:2 cover
+ *  + title / summary / meta lines). Used by the related-content rail while a
+ *  group hydrates so there's no shape jump when the real card lands. */
+export function WhatIShippedCardSkeleton({ className }: { className?: string }) {
+  // Same convention as BlogCardSkeleton et al.: animate-pulse on the container,
+  // `bg-ods-bg` placeholder blocks, flex-grow body with an `mt-auto` avatar+name
+  // row. Shape mirrors WhatIShippedCard's AdminContentCard (rounded-2xl, 3:2 cover).
+  return (
+    <div className={`group bg-ods-card border border-ods-border rounded-2xl overflow-hidden h-full flex flex-col animate-pulse ${className ?? ''}`}>
+      <div className="aspect-[3/2] bg-ods-bg" />
+      <div className="p-4 flex flex-col flex-grow space-y-3">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-3 w-full bg-ods-bg/60 rounded" />
+        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
+        <div className="mt-auto flex items-center gap-2">
+          <div className="h-8 w-8 rounded-full bg-ods-bg" />
+          <div className="h-3 w-24 bg-ods-bg/60 rounded" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/features/status-filter-component.tsx

@@ -16,6 +16,11 @@ export interface StatusFilterComponentProps {
   showCount?: boolean;
   count?: number;
   className?: string;
+  /** Status values (incl. `'all'`) to render but DISABLE — the buttons stay
+   *  visible (so the full set is always shown) but are non-clickable. Lets a
+   *  dashboard expose every status while gating which ones a given viewer may
+   *  actually select (e.g. non-management can only pick `published`). */
+  disabledValues?: string[];
 }
 
 /**
@@ -29,7 +34,8 @@ export function StatusFilterComponent({
   statusOptions,
   showCount = false,
   count = 0,
-  className = ''
+  className = '',
+  disabledValues = []
 }: StatusFilterComponentProps) {
   // Filter out 'all' from options since we render it separately
   const filteredOptions = statusOptions.filter(option => option.value !== 'all');
@@ -49,6 +55,7 @@ export function StatusFilterComponent({
         variant={selectedStatus === 'all' ? "accent" : "outline"}
         size="small-legacy"
         onClick={() => onStatusChange('all')}
+        disabled={disabledValues.includes('all')}
         className="text-h3"
       >
         All
@@ -62,6 +69,7 @@ export function StatusFilterComponent({
           variant={selectedStatus === option.value ? "accent" : "outline"}
           size="small-legacy"
           onClick={() => onStatusChange(option.value)}
+          disabled={disabledValues.includes(option.value)}
           className="text-h3"
         >
           {option.label}

package/src/components/related-content/related-content-section.tsx

@@ -64,6 +64,7 @@ import { decideNewTab } from '../chat/utils/decide-new-tab';
 // guarantee that matters here is the RUNTIME one: nothing on this path ever
 // instantiates a QueryClient, so embedders need NO QueryClientProvider.
 import { BlogCard, BlogCardSkeleton } from '../chat/entity-cards/blog-card';
+import { WhatIShippedCard, WhatIShippedCardSkeleton } from '../chat/entity-cards/what-i-shipped-card';
 import { CaseStudyCard, CaseStudyCardSkeleton } from '../chat/entity-cards/case-study-card';
 import { CustomerInterviewCard, CustomerInterviewCardSkeleton } from '../chat/entity-cards/customer-interview-card';
 import { ProductReleaseCard, ProductReleaseCardSkeleton } from '../chat/entity-cards/product-release-card';
@@ -163,6 +164,9 @@ function renderSkeletonForType(
       // the step-numbered 'default' variant is for the guide detail page's
       // "More in section" rail, not this full-width row.
       return <OnboardingGuideCardSkeleton size={size === 'sm' ? 'sm' : 'catalog'} />;
+    case 'what_i_shipped':
+      // Matches the WhatIShippedCard (AdminContentCard 3:2) shape.
+      return <WhatIShippedCardSkeleton />;
     case 'marketing_campaign':
       return adminCampaignCard ? <adminCampaignCard.Skeleton size={legacySize} /> : null;
     case 'roadmap_item':
@@ -273,6 +277,25 @@ function CardForType({
       // Catalog variant (see skeleton note) — full-width rich card with a
       // line-clamped description instead of the step-numbered rail card.
       return <OnboardingGuideCard guide={item} size={size === 'sm' ? 'sm' : 'catalog'} href={href} targetPlatform={targetPlatform} placeholderUrl={placeholderUrl} {...anchorAttrs} />;
+    case 'what_i_shipped':
+      // THE single What I Shipped card — same lib component the people-hub
+      // dashboard renders, so the card is identical in the rail and the
+      // dashboard. `anchorProps` makes the whole card a click-through link
+      // (rail is read-only — no owner actions).
+      return (
+        <WhatIShippedCard
+          entry={item}
+          placeholderUrl={placeholderUrl}
+          // Only pass anchorProps when there's a REAL href — a fallback object
+          // with `href: undefined` is still truthy and would make WhatIShippedCard
+          // wrap the card in a dead <a> (no URL). Mirrors the ProductReleaseCard
+          // `linkProps ?? undefined` pattern above.
+          anchorProps={
+            linkProps ??
+            (href ? ({ href, ...anchorAttrs } as React.AnchorHTMLAttributes<HTMLAnchorElement>) : undefined)
+          }
+        />
+      );
     case 'marketing_campaign':
       return adminCampaignCard ? <adminCampaignCard.Card campaign={item} /> : null;
     case 'roadmap_item':
@@ -586,6 +609,18 @@ export interface RelatedContentSectionProps {
   /** Renderer pair for the admin-only `marketing_campaign` type. Absent →
    *  the type renders nothing. */
   adminCampaignCard?: AdminCampaignCardSlot;
+  /** When true, render the section shell (title + an empty-state line) even
+   *  with ZERO refs, instead of returning null. Default false (the original
+   *  behavior — empty rail = no shell). Opt-in per host page (e.g. people-hub's
+   *  "What I Shipped", where the section should always be present). */
+  showWhenEmpty?: boolean;
+  /** Empty-state copy shown under the title when `showWhenEmpty` and no refs.
+   *  Default: "No related content yet." */
+  emptyStateText?: string;
+  /** Custom empty-state node (e.g. a hub `<EmptyState/>`) rendered under the
+   *  title when `showWhenEmpty` and there are no refs — overrides
+   *  `emptyStateText`. Lets a host match its canonical empty state. */
+  emptyState?: React.ReactNode;
 }
 
 export function RelatedContentSection({
@@ -606,6 +641,9 @@ export function RelatedContentSection({
   buildListUrl,
   LinkProvider = DefaultLinkPropsProvider,
   adminCampaignCard,
+  showWhenEmpty = false,
+  emptyStateText = 'No related content yet.',
+  emptyState,
 }: RelatedContentSectionProps) {
   // ── Hooks above EVERY early return (the original `if (!contentRefs.length)
   // return null` guard moved below them). ──
@@ -660,7 +698,7 @@ export function RelatedContentSection({
     () => (!suggestionsDisabled && initialItems ? { refs: initialItems } : undefined),
     [initialItems, suggestionsDisabled],
   );
-  const { data } = useSelfFetch<RelatedContentResponse>(suggestUrl, { initialData });
+  const { data, isLoading } = useSelfFetch<RelatedContentResponse>(suggestUrl, { initialData });
 
   // Default group fetcher: the lib's byte-parity-tested builder, prefixed for
   // embeds. Memoized so group-fetch URLs stay value-stable across renders.
@@ -677,9 +715,37 @@ export function RelatedContentSection({
   // IS the mechanism in controlled mode (original behavior).
   const exclude = new Set(excludeTypes || []);
   const visibleRefs = exclude.size > 0 ? refs.filter((r) => !exclude.has(r.type)) : refs;
-  // Zero refs (still loading in suggestion mode, or genuinely empty) → no
-  // empty shell.
-  if (!visibleRefs.length) return null;
+  // Zero refs (still loading in suggestion mode, or genuinely empty). Default:
+  // no empty shell. Opt-in (`showWhenEmpty`): render the title + an empty-state
+  // line so the section is always present (e.g. people-hub "What I Shipped").
+  if (!visibleRefs.length) {
+    if (!showWhenEmpty) return null; // non-showWhenEmpty consumers stay blank (unchanged)
+    // Client-fetch loading (author/suggestion mode, no SSR initialItems): render a
+    // SKELETON grid — reserves height + matches the rest of the app's loading, so
+    // there's no blank-then-pop jump (the prior `return null` collapsed the tab to
+    // zero height during the fetch). SSR controlled mode has isLoading=false → it
+    // skips straight to the empty state below. Skeleton type = the requested rail
+    // type (author mode passes a single `includeTypes`).
+    if (isLoading) {
+      const skeletonType = includeTypes?.[0] ?? entityType ?? 'blog_post_existing';
+      return (
+        <div className="space-y-8">
+          <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
+          <div className={gridClassFor(columns)}>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i}>{renderSkeletonForType(skeletonType, 'default', adminCampaignCard)}</div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="space-y-8">
+        <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
+        {emptyState ?? <p className="text-ods-text-secondary">{emptyStateText}</p>}
+      </div>
+    );
+  }
 
   const grouped: Record<string, ContentRef[]> = {};
   for (const ref of visibleRefs) {

package/src/types/marketing.ts

@@ -346,6 +346,7 @@ export type ContentSourceType =
   | 'webinar'             // Webinars
   | 'investor_update'     // Investor updates
   | 'onboarding_guide'    // Onboarding guides (lives on openframe platform)
+  | 'what_i_shipped'      // What I Shipped employee check-ins (lives on people-hub)
   | 'from_scratch';
 
 export type URLInjectionPreference = 'none' | 'in_post' | 'as_comment';

package/src/types/video-processing.ts

@@ -95,6 +95,7 @@ export interface VideoProcessingFields {
  * - marketing_campaign: Marketing campaign content generation (autonomous workflow)
  * - case_study: Case study generation from customer interviews
  * - onboarding_guide: Step-by-step onboarding guides with optional video walkthrough
+ * - what_i_shipped: Monthly employee "What I Shipped" entries (people-hub) with transcription/bites/highlight
  */
 export type VideoProcessingEntityType =
   | 'customer_interview'
@@ -105,4 +106,5 @@ export type VideoProcessingEntityType =
   | 'podcast_episode'
   | 'investor_update'
   | 'onboarding_guide'
+  | 'what_i_shipped'
 // Fri May 15 14:58:59 EDT 2026

package/src/utils/content-ref-groups.ts

@@ -53,6 +53,7 @@ export const CONTENT_REF_GROUPS: Record<string, ContentRefGroupConfig> = {
   blog_post_existing:  { label: 'Blog Posts',          order: 7, layout: 'grid', gridSize: 'default' },
   customer_interview:  { label: 'Customer Interviews', order: 8, layout: 'grid', gridSize: 'default' },
   onboarding_guide:    { label: 'Onboarding Guides',   order: 9, layout: 'list', gridSize: 'default' },
+  what_i_shipped:      { label: 'What I Shipped',      order: 10, layout: 'grid', gridSize: 'default' },
 }
 
 /** Human-readable label for a content_ref `type`. Returns null when the type

package/src/utils/format.ts

@@ -311,6 +311,21 @@ export function formatDateUTC(
   })
 }
 
+/**
+ * Format a reporting-month value (`entry_month`) as "Mon YYYY" / "Month YYYY",
+ * always anchored to UTC. THE single home for the "What I Shipped" month label —
+ * both the lib card (`'short'`) and the hub detail page (`'long'`) call this, so
+ * the React #418 UTC-pin convention lives in exactly one place. Returns `null`
+ * for empty input (callers omit the label entirely).
+ */
+export function formatEntryMonthUTC(
+  entryMonth: string | null | undefined,
+  style: 'short' | 'long' = 'short',
+): string | null {
+  if (!entryMonth) return null
+  return new Date(entryMonth).toLocaleDateString('en-US', { month: style, year: 'numeric', timeZone: 'UTC' })
+}
+
 /**
  * Format a date string as `MM/DD/YYYY` for legal-document display
  * (privacy policy, terms of service). Locale-stable: always en-US.

package/src/utils/index.ts

@@ -84,6 +84,7 @@ export {
   formatDurationFromRange,
   type FormatDateUTCOptions,
   formatDateUTC,
+  formatEntryMonthUTC,
   formatCurrency,
   formatPercent,
   formatWholeDollars,