@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -11,25 +11,26 @@
 import { Video } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { MEDIA_ASPECT } from '../../../styles/component-sizes';
 import type { CustomerInterview } from '../../../types/customer-interview';
 import { cn } from '../../../utils/cn';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
+import { useLoadingScope } from '../../ui/loading-scope';
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
 import { hideOnError } from './use-cover-image-fallback';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
@@ -50,46 +51,58 @@ export interface CustomerInterviewCardProps {
   className?: string;
 }
 
-/** `portrait` shares the default skeleton shape (same zone boxes). */
-export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
-  if (size === 'sm') {
+// The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const INTERVIEW_CARD_BODY = 'flex flex-col gap-6 p-6';
+const INTERVIEW_CARD_COVER = `relative ${MEDIA_ASPECT.og} w-full shrink-0 overflow-hidden rounded-sm`;
+const INTERVIEW_CARD_PERSON_ZONE = 'mt-auto flex h-[60px] shrink-0 items-center';
+const INTERVIEW_CARD_PERSON_ROW = 'flex w-full min-w-0 items-center gap-3';
+const INTERVIEW_CARD_PERSON_TEXT = 'min-w-0 flex-1';
+/** The content-type chip a portrait interview card shows (a static label). */
+const INTERVIEW_TYPE_LABEL = 'Customer Interview';
+
+/**
+ * An interview card while it is read, in the card's own boxes: the cover, the title as two `text-h3` lines, the
+ * summary as three `text-h6` lines, and the person row (48px portrait, name and job-title lines). `portrait` is the
+ * shared portrait skeleton with the static chip.
+ */
+export function CustomerInterviewCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  className,
+}: {
+  size?: 'default' | 'sm' | 'portrait';
+  /** `portrait`: the card shows the "Customer Interview" chip. */
+  showTypeBadge?: boolean;
+  className?: string;
+}) {
+  if (size === 'portrait') {
     return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={COMPACT_CARD_TITLE_ROW}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
-          </span>
-        </span>
-      </span>
+      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? INTERVIEW_TYPE_LABEL : undefined} className={className} />
     );
   }
+  if (size === 'sm') {
+    return <CompactCardSkeleton className={className} />;
+  }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
-      {/* Aspect matches the loaded image slot (OG 1200×630) */}
-      <UnifiedSkeleton className="aspect-[1200/630] w-full rounded-sm" />
-      <div className="space-y-2">
-        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
-      </div>
-      <div className="space-y-2">
-        <UnifiedSkeleton className="h-3 w-full rounded" />
-        <UnifiedSkeleton className="h-3 w-5/6 rounded" />
-        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
-      </div>
-      <div className="mt-auto flex h-[60px] items-center gap-3">
-        <UnifiedSkeleton className="h-12 w-12 rounded-full" />
-        <div className="flex-1 space-y-2">
-          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
-          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
+    <div className={cn('block h-full', className)} aria-hidden>
+      <Card className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, INTERVIEW_CARD_BODY)}>
+        <UnifiedSkeleton className={cn(INTERVIEW_CARD_COVER, 'rounded-sm')} />
+        <div className="shrink-0">
+          <TextLineSkeleton type="h3" lines={2} className="w-full" />
         </div>
-      </div>
+        <div className="shrink-0">
+          <TextLineSkeleton type="h6" lines={3} className="w-full" />
+        </div>
+        <div className={INTERVIEW_CARD_PERSON_ZONE}>
+          <div className={INTERVIEW_CARD_PERSON_ROW}>
+            <MediaSkeleton.Avatar size="md" className="shrink-0" />
+            <div className={INTERVIEW_CARD_PERSON_TEXT}>
+              <TextLineSkeleton type="h6" className="w-2/3" />
+              <TextLineSkeleton type="h6" className="w-1/2" />
+            </div>
+          </div>
+        </div>
+      </Card>
     </div>
   );
 }
@@ -117,6 +130,9 @@ export function CustomerInterviewCard({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const thumbnailUrl = interview.featured_image || placeholderUrl || null;
+  if (useLoadingScope()) {
+    return <CustomerInterviewCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
+  }
 
   if (size === 'sm') {
     return (
@@ -163,7 +179,7 @@ export function CustomerInterviewCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Customer Interview' : undefined}
+        typeLabel={showTypeBadge ? INTERVIEW_TYPE_LABEL : undefined}
         imageUrl={interview.featured_image}
         placeholderUrl={placeholderUrl}
         imageAlt={interview.title}
@@ -181,11 +197,11 @@ export function CustomerInterviewCard({
 
   return (
     <Link href={href} target={target} rel={rel} className={cn('block h-full', className)}>
-      <Card className={cn(CONTENT_CARD_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
+      <Card className={cn(CONTENT_CARD_FRAME_CLASS, INTERVIEW_CARD_BODY)}>
         {/* Fixed aspect matching standard OG card source (1200×630, 1.91:1)
             — image renders with near-zero CSS-side crop, subject anchored
             consistently via center-66% safe-zone convention. */}
-        <div className="relative aspect-[1200/630] w-full shrink-0 overflow-hidden rounded-sm bg-ods-bg">
+        <div className={cn(INTERVIEW_CARD_COVER, 'bg-ods-bg')}>
           {thumbnailUrl ? (
             <>
               <Image
@@ -222,8 +238,8 @@ export function CustomerInterviewCard({
           </div>
         )}
 
-        <div className="mt-auto flex h-[60px] shrink-0 items-center">
-          <div className="flex w-full min-w-0 items-center gap-3">
+        <div className={INTERVIEW_CARD_PERSON_ZONE}>
+          <div className={INTERVIEW_CARD_PERSON_ROW}>
             <div className="relative h-12 w-12 shrink-0">
               {interview.user?.avatar_url ? (
                 <Image
@@ -254,7 +270,7 @@ export function CustomerInterviewCard({
                 </div>
               )}
             </div>
-            <div className="min-w-0 flex-1">
+            <div className={INTERVIEW_CARD_PERSON_TEXT}>
               <p className="truncate text-ods-text-primary text-h6">
                 {interview.user?.full_name || 'Anonymous'}
                 {interview.msp?.name && <span className="text-ods-text-secondary"> • {interview.msp.name}</span>}

package/src/components/chat/entity-cards/data-room-doc-card.tsx

@@ -16,16 +16,16 @@
 import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 import type { DataRoomDocCardItem } from '../types/entities/data-room-doc';
 import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 export interface DataRoomDocCardAnchorProps {
   href: string;
@@ -58,6 +58,7 @@ export interface DataRoomDocCardProps {
 }
 
 export function DataRoomDocCard({ item, className, badgeText, anchorProps }: DataRoomDocCardProps) {
+  if (useLoadingScope()) return <DataRoomDocCardSkeleton className={className} />;
   const body = (
     <>
       <span className={COMPACT_CARD_TEXT_COL}>
@@ -102,21 +103,13 @@ export function DataRoomDocCard({ item, className, badgeText, anchorProps }: Dat
 
 export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className="flex min-w-0 items-center gap-1.5">
-          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
-          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
-        </span>
-        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
-        <span className="flex min-w-0 flex-col gap-0">
-          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
-        </span>
-      </span>
-      <span className="flex h-5 shrink-0 items-center self-start">
-        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-      </span>
-    </span>
+    <CompactCardSkeleton
+      slot={false}
+      titleWidth="w-2/3"
+      titleBadges={['w-16']}
+      rows={[{ width: 'w-1/2' }, { width: 'w-5/6', lines: 2 }]}
+      trailingIcon
+      className={className}
+    />
   );
 }

package/src/components/chat/entity-cards/design-doc-card.tsx

@@ -8,6 +8,7 @@
  */
 
 import Link from '../../../embed-shims/next-link';
+import { TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import type { DesignDoc } from '../../../types/design-doc';
 import { cn } from '../../../utils/cn';
 import { formatDateShort } from '../../../utils/date-formatters';
@@ -16,9 +17,10 @@ import {
   designDocReadiness,
   formatCompletionLabelWithBlockers,
 } from '../../../utils/design-doc-readiness';
-import { InteractiveSkeleton, MediaSkeleton, TextSkeleton } from '../../loading/unified-skeleton';
-import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
-import { StatusBadge } from '../../ui/status-badge';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { AvatarStack, AvatarStackSkeleton, type AvatarStackPerson } from '../../ui/avatar-stack';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton } from '../../ui/status-badge';
 import { safeHref } from '../utils/compact-card-classes';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
 
@@ -54,31 +56,46 @@ export interface DesignDocCardProps {
   className?: string;
 }
 
-/** The card's loading state, built from the unified skeleton primitives inside the card's own frame. */
-export function DesignDocCardSkeleton() {
+// The card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const DESIGN_DOC_CARD_BODY = 'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]';
+const DESIGN_DOC_CARD_HEADER = 'flex w-full items-center gap-[16px]';
+const DESIGN_DOC_CARD_HEADING = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h3` lines. */
+const DESIGN_DOC_CARD_TITLE_ROW = `flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const DESIGN_DOC_CARD_META_ROW = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+/** Three `text-h4` lines. */
+const DESIGN_DOC_CARD_SUMMARY_ROW = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const DESIGN_DOC_CARD_FOOTER = 'flex w-full items-center justify-between gap-2';
+
+/**
+ * The card while it is read, in the card's own boxes: the title as two `text-h3` lines, the meta as a `text-h5`
+ * line, the readiness badge's box (beside the title from md, its own row below), the summary as three `text-h4` lines,
+ * the sign-off caption as a `text-h6` line and the people as a 24px avatar.
+ */
+export function DesignDocCardSkeleton({ className }: { className?: string } = {}) {
   return (
-    <div
-      className={cn(
-        CONTENT_CARD_SKELETON_FRAME_CLASS,
-        'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-      )}
-    >
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex min-w-0 flex-1 flex-col gap-2">
-          <TextSkeleton.Subheading className="w-3/4" />
-          <TextSkeleton.Caption className="w-1/3" />
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DESIGN_DOC_CARD_BODY, className)} aria-hidden>
+      <div className={DESIGN_DOC_CARD_HEADER}>
+        <div className={DESIGN_DOC_CARD_HEADING}>
+          <div className={DESIGN_DOC_CARD_TITLE_ROW}>
+            <TextLineSkeleton type="h3" lines={2} className="w-3/4" />
+          </div>
+          <div className={DESIGN_DOC_CARD_META_ROW}>
+            <TextLineSkeleton type="h5" className="w-1/3" />
+          </div>
         </div>
-        <InteractiveSkeleton.Chip className="hidden w-24 md:block" />
+        <StatusBadgeSkeleton variant="button" className="hidden md:inline-flex" />
+      </div>
+      <div className="md:hidden">
+        <StatusBadgeSkeleton variant="button" />
       </div>
-      <div className="flex min-h-[72px] flex-col justify-center gap-2">
-        <TextSkeleton.Body />
-        <TextSkeleton.Body />
-        <TextSkeleton.Body className="w-5/6" />
+      <div className={DESIGN_DOC_CARD_SUMMARY_ROW}>
+        <TextLineSkeleton type="h4" lines={3} className="w-full" />
       </div>
       <div className="flex-1" />
-      <div className="flex w-full items-center justify-between gap-2">
-        <TextSkeleton.Caption className="w-1/3" />
-        <MediaSkeleton.Avatar size="sm" />
+      <div className={DESIGN_DOC_CARD_FOOTER}>
+        <TextLineSkeleton type="h6" className="w-1/3" />
+        <AvatarStackSkeleton count={1} size="xs" className="shrink-0" />
       </div>
     </div>
   );
@@ -88,14 +105,15 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
   const readiness = DESIGN_DOC_READINESS_DISPLAY[designDocReadiness(doc.completion)];
   const people = designDocPeople(doc);
   const link = safeHref(href ?? null);
+  if (useLoadingScope()) return <DesignDocCardSkeleton className={className} />;
   const body = (
     <>
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="flex min-h-[48px] items-center">
+      <div className={DESIGN_DOC_CARD_HEADER}>
+        <div className={DESIGN_DOC_CARD_HEADING}>
+          <div className={DESIGN_DOC_CARD_TITLE_ROW}>
             <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{doc.title || 'Untitled design doc'}</h3>
           </div>
-          <div className="flex min-h-[20px] items-center">
+          <div className={DESIGN_DOC_CARD_META_ROW}>
             <p className="truncate text-ods-text-secondary text-h5">{designDocMetaLine(doc)}</p>
           </div>
         </div>
@@ -110,11 +128,11 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
       <div className="md:hidden">
         <StatusBadge text={readiness.label} colorScheme={readiness.scheme} variant="button" singleLine />
       </div>
-      <div className="flex min-h-[72px] items-center">
+      <div className={DESIGN_DOC_CARD_SUMMARY_ROW}>
         <p className="line-clamp-3 text-ods-text-secondary text-h4">{doc.summary || ''}</p>
       </div>
       <div className="flex-1" />
-      <div className="flex w-full items-center justify-between gap-2">
+      <div className={DESIGN_DOC_CARD_FOOTER}>
         <span className="truncate text-ods-text-secondary text-h6">
           {formatCompletionLabelWithBlockers(doc.completion)}
         </span>
@@ -122,11 +140,7 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
       </div>
     </>
   );
-  const outer = cn(
-    CONTENT_CARD_FRAME_CLASS,
-    'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-    className,
-  );
+  const outer = cn(CONTENT_CARD_FRAME_CLASS, DESIGN_DOC_CARD_BODY, className);
   return link ? (
     <Link href={link} target={target} rel={rel} className={outer}>
       {body}

package/src/components/chat/entity-cards/dispatch.tsx

@@ -56,6 +56,7 @@ import { faqItemAnchor } from '../../../utils/faq-anchor';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
 import { PROGRAM_META_RENDERERS } from '../../../utils/program-meta-renderers';
+import { defaultTableIdForDocumentType, getSourceLabel, SOURCE_ICON_NAMES } from '../../../utils/source-icons';
 import { AgentMark } from '../../agent-mark';
 import { EntityIcon } from '../../icon-display';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
@@ -82,13 +83,14 @@ import { QuestionCircleIcon } from '../../icons-v2-generated/signs-and-symbols/q
 import { TrophyIcon } from '../../icons-v2-generated/sport/trophy-icon';
 import { Rocket02Icon } from '../../icons-v2-generated/vehicles-and-delivery/rocket-02-icon';
 import { TruckFastIcon } from '../../icons-v2-generated/vehicles-and-delivery/truck-fast-icon';
+import type { ProductReleaseCardProps } from '../../shared/product-release/product-release-card';
+import { ProductReleaseCardSkeleton } from '../../shared/product-release/product-release-card-skeleton';
 import type { ActionsMenuGroup } from '../../ui/actions-menu';
 import { VendorIcon } from '../../vendor-icon';
 import { useChatPanel } from '../chat-panel-context';
 import type { ChatRef } from '../chat-ref.types';
 import { useChatCardItem } from '../hooks/use-chat-card-item';
 import { MingoInfoCard, MingoInfoCardSkeleton, type MingoInfoCardStatus } from '../mingo-info-card';
-import { NavLinkAnchorViaRuntime } from '../nav-link-anchor-via-runtime';
 import { SourceActionButton } from '../source-action-button';
 import type { PrReviewState, GitHubActivityKind } from '../types/entities/github-activity';
 import { formatInvestorUpdatePeriod } from '../types/entities/investor-update';
@@ -100,11 +102,9 @@ import { executeNavigation } from '../utils/execute-navigation';
 import { clickupTaskUrl } from '../utils/external-app-urls';
 import { computeIsNewTab, buildAnchorProps } from '../utils/nav-anchor-props';
 import { readFetchedCardTitle } from '../utils/resolve-fetched-card-href';
-import { defaultTableIdForDocumentType, getSourceLabel, SOURCE_ICON_NAMES } from '../utils/source-icons';
 import { resolveSourceIcon, sourceRowCtxFromRuntime } from '../utils/source-row-cta';
 import { BlockCard } from './block-card';
 import { BlogCardSkeleton } from './blog-card';
-import { CampaignCardAdminSkeleton } from './campaign-card-admin';
 import { CaseStudyCardSkeleton } from './case-study-card';
 import { ChatVideoEntityCard } from './chat-video-entity-card';
 import { CustomerInterviewCardSkeleton } from './customer-interview-card';
@@ -118,7 +118,6 @@ import {
 } from './github-activity-card';
 import { InvestorUpdateCardSkeleton } from './investor-update-card';
 import { OnboardingGuideCardSkeleton } from './onboarding-guide-card';
-import { ProductReleaseCardSkeleton, type ProductReleaseCardProps } from './product-release-card';
 import { defaultBuildProductReleaseCardProps } from './product-release-card-defaults';
 import { ProgramCardSkeleton } from './program-card';
 import { RoadmapCardSkeleton } from './roadmap-card';
@@ -894,6 +893,11 @@ function CampaignChatCard({
   );
 }
 
+/** `CampaignChatCard` while its campaign is fetched: the info card it draws (`MingoInfoCard`), as its skeleton. */
+function CampaignChatCardSkeleton() {
+  return <MingoInfoCardSkeleton />;
+}
+
 /**
  * Shared `MingoInfoCard` shell for fetch-mode entity cards. `cover` renders as
  * the 40px image when present; otherwise `fallbackIcon` shows. Anchor + menu +
@@ -1863,7 +1867,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Marketing campaign',
     contentRefType: 'marketing_campaign',
     bareInline: true,
-    skeleton: () => <CampaignCardAdminSkeleton />,
+    skeleton: () => <CampaignChatCardSkeleton />,
     // No public viewer — synthesize the hub-internal admin URL post-fetch
     // so the wrapper + isNewTab computation see the actual destination.
     fallbackHref: (item: ChatCardItem) => (item?.id ? `/admin/campaigns/${encodeURIComponent(String(item.id))}` : null),
@@ -2253,11 +2257,3 @@ export function renderChatInlineEntityCard(
 
   return loader;
 }
-
-// =============================================================================
-// NavLink wiring for callers that need to compose anchors (Task 2 + Task 3)
-// =============================================================================
-
-/** Re-export so call sites can wrap any subtree with chat-runtime
- *  routing in a single import. */
-export { NavLinkAnchorViaRuntime };

package/src/components/chat/entity-cards/employee-entry-card.tsx

@@ -1,10 +1,9 @@
 import type React from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
-import { getProxiedImageUrl } from '../../../utils/image-proxy-stub';
 import { StatusBadge, type StatusBadgeProps } from '../../ui/status-badge';
-import { AdminContentCard } from './admin-content-card';
-import { AdminContentCardSkeleton } from './admin-content-card-grid';
+import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
+import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
 
 /** The fields every people-hub employee entry shares. Entity-specific bindings
  *  (`WhatIShippedCard`, `HowIWorkCard`) map their own date column to `dateLabel`
@@ -76,6 +75,7 @@ export function EmployeeEntryCard({
   anchorProps,
   className,
 }: EmployeeEntryCardProps) {
+  const authorAvatar = useProxiedImageUrl(entry.author?.avatar_url, { directHttps: false });
   const card = (
     <AdminContentCard
       imageUrl={entry.featured_image || entry.main_video_thumbnail}
@@ -100,9 +100,9 @@ export function EmployeeEntryCard({
       meta={
         <>
           <span className="flex min-w-0 items-center gap-2">
-            {entry.author?.avatar_url ? (
+            {authorAvatar ? (
               <Image
-                src={getProxiedImageUrl(entry.author.avatar_url) ?? entry.author.avatar_url}
+                src={authorAvatar}
                 alt=""
                 // One line of the meta row tall (16px on a phone, 20px from md), so the
                 // row is exactly the line the skeleton reserves.