@flamingo-stack/openframe-frontend-core 0.0.254 → 0.0.255-snapshot.20260611213621

package/package.json

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

package/src/components/chat/entity-cards/entity-author-card.tsx

@@ -1,3 +1,5 @@
+import Link from '../../../embed-shims/next-link'
+import type { EntityAuthor } from '../../../types/entity-author'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { formatDate, nameInitials } from '../../../utils/format'
 
@@ -23,8 +25,10 @@ import { formatDate, nameInitials } from '../../../utils/format'
  * Renders null when `author` is null/empty unless `renderEmptyAuthor` is set.
  */
 /**
- * Documented empty-author placeholder. Single source for the visual
- * shape of "author cell with no author".
+ * Documented empty-author placeholder for CHAT CARD surfaces ("—" name,
+ * "Unknown" role). The release detail page deliberately keeps its legacy
+ * empty rendering instead ("Unknown Author"/"Author" via a null-field stub
+ * — see release-detail-page.tsx) — two documented empty styles, one cell.
  */
 export const EMPTY_AUTHOR_PLACEHOLDER = {
   full_name: '—',
@@ -33,14 +37,14 @@ export const EMPTY_AUTHOR_PLACEHOLDER = {
 } as const
 
 export interface EntityAuthorCardProps {
-  author: {
-    full_name: string | null
-    avatar_url: string | null
-    job_title: string | null
-  } | null | undefined
+  author: EntityAuthor | null | undefined
   /** Role label rendered under the name. Defaults to "Author". Override
    *  to e.g. "Presenter" / "Contributor" if semantics differ. */
   roleLabel?: string
+  /** Link target for the author name (e.g. the public author page). The
+   *  HOST computes it (route availability is host knowledge) — absent ⇒
+   *  plain text, exactly the prior render. */
+  authorHref?: string
   /** Optional publication date. When provided, the component renders as a
    *  2-cell grid (Published | Author). When omitted, only the Author cell
    *  renders inside the same bordered container. */
@@ -102,13 +106,19 @@ export function EntityMetadataValueCell({
 export function EntityMetadataAuthorCell({
   author,
   roleLabel = 'Author',
+  authorHref,
   className,
 }: {
   author: NonNullable<EntityAuthorCardProps['author']>
   roleLabel?: string
+  authorHref?: string
   className?: string
 }) {
-  const fullName = author.full_name || 'Unknown Author'
+  // Trimmed real name gates the LINK — a placeholder/unknown label must
+  // never render as a clickable author (an authorHref passed alongside an
+  // empty name would link "Unknown Author").
+  const trimmedName = typeof author.full_name === 'string' ? author.full_name.trim() : ''
+  const fullName = trimmedName || 'Unknown Author'
   return (
     <div className={`bg-ods-card p-4 flex items-center gap-3 ${className ?? ''}`}>
       <SquareAvatar
@@ -119,8 +129,16 @@ export function EntityMetadataAuthorCell({
         variant="round"
       />
       <div className="flex flex-col gap-0 flex-1 min-w-0">
-        <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
-          {fullName}
+        {/* title = full-name tooltip on truncation (carried over from the
+            release page's cell when it adopted this shared one). */}
+        <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={fullName}>
+          {authorHref && trimmedName ? (
+            <Link href={authorHref} className="hover:text-ods-accent transition-colors">
+              {fullName}
+            </Link>
+          ) : (
+            fullName
+          )}
         </p>
         <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
           {author.job_title || roleLabel}
@@ -133,6 +151,7 @@ export function EntityMetadataAuthorCell({
 export function EntityAuthorCard({
   author,
   roleLabel = 'Author',
+  authorHref,
   publishedAt,
   publishedLabel = 'Published',
   extraCells,
@@ -187,7 +206,7 @@ export function EntityAuthorCard({
           className={dividerClass}
         />
       )}
-      <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} />
+      <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} authorHref={authorHref} />
     </div>
   )
 }

package/src/components/chat/hooks/use-nats-dialog-subscription.ts

@@ -136,10 +136,8 @@ export function useNatsDialogSubscription({
       abortControllerRef.current = null
     }
 
-    // This hook treats 'error' as a disconnect (pre-existing behaviour); JetStream's
-    // hook does not — it skips retry on protocol errors.
     const isDisconnectStatus = (status: NatsStatus) =>
-      status === 'closed' || status === 'disconnected' || status === 'error'
+      status === 'closed' || status === 'disconnected'
 
     const lifecycle = startConnectionLifecycle({
       conn: sharedConn,
@@ -148,7 +146,7 @@ export function useNatsDialogSubscription({
       backoff: reconnectionBackoffRef.current,
       getFreshUrl: () => getNatsWsUrlRef.current(),
       shouldRetryOn: isDisconnectStatus,
-      onStatusChange: (status) => {
+      onStatusChange: (status, evt) => {
         if (status === 'connected') {
           setIsConnected(true)
           if (hadConnectionBeforeRef.current) {
@@ -157,6 +155,10 @@ export function useNatsDialogSubscription({
           hadConnectionBeforeRef.current = true
           onConnectRef.current?.()
         }
+        if (status === 'error') {
+          console.warn('[NATS] protocol error:', evt.data)
+          return
+        }
         if (isDisconnectStatus(status)) {
           setIsConnected(false)
           setIsSubscribed(false)

package/src/components/chat/index.ts

@@ -16,6 +16,7 @@ export * from './chat-message-row'
 export * from './chat-message-skeleton'
 
 export * from './chat-quick-action'
+export * from './chat-quick-action-row'
 export * from './chat-ticket-list'
 export * from './chat-typing-indicator'
 export * from './tool-execution-display'

package/src/components/chat/types/entities/onboarding-guide.ts

@@ -1,3 +1,5 @@
+import type { EntityAuthor } from '../../../../types/entity-author';
+
 /**
  * Onboarding Guide entity — wire shape for the chat onboarding-guide
  * card + the `/api/onboarding-guides` reads.
@@ -52,13 +54,7 @@ export interface OnboardingGuide {
   status: string;
   published_at: string | null;
   author_id: string | null;
-  author?: {
-    id: string;
-    full_name: string;
-    avatar_url: string | null;
-    job_title: string | null;
-    email?: string | null;
-  };
+  author?: EntityAuthor;
   custom_instructions: string | null;
   config: Record<string, unknown> | null;
   ai_effort_score: number | null;

package/src/components/faq/faq-section.tsx

@@ -5,6 +5,7 @@ import type { Faq } from '../../types/faq'
 import { FaqAccordion, type FaqItem } from '../faq-accordion'
 import { useSelfFetch } from '../../hooks/use-self-fetch'
 import { buildSuggestionUrl } from '../../utils/suggestion-url'
+import { serializeJsonLd } from '../../utils/common'
 import { buildFaqJsonLdFromFaqs, type FaqSchemaOptions } from './json-ld'
 
 export interface FaqSectionProps {
@@ -202,7 +203,9 @@ export function FaqSection({
         <script
           type="application/ld+json"
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+          // serializeJsonLd, NOT raw JSON.stringify — FAQ answers are
+          // admin-entered; an embedded "</script>" must not break the tag.
+          dangerouslySetInnerHTML={{ __html: serializeJsonLd(schema) }}
         />
       )}
     </>

package/src/components/features/notifications/notification-drawer.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { useEffect, useRef } from 'react'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
 import { Button } from '../../ui/button/button'
-import { Drawer, DrawerContent } from '../../ui/drawer'
+import { Drawer, DrawerContent, DrawerTitle } from '../../ui/drawer'
 import { Switch } from '../../ui/switch'
 import { cn } from '../../../utils/cn'
 import { useOptionalNotifications } from './notifications-context'
@@ -61,18 +60,22 @@ export function NotificationDrawer({
           className,
         )}
       >
-        <div className="flex items-baseline justify-between gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
-          <DialogPrimitive.Title className="min-w-0 flex-1 truncate text-h3 text-ods-text-primary">
-            New Notifications
-          </DialogPrimitive.Title>
-          <button
-            type="button"
-            disabled={unreadCount === 0}
-            onClick={markAllRead}
-            className="text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
+        <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
+          <DrawerTitle
+            className="truncate"
+            actions={
+              <button
+                type="button"
+                disabled={unreadCount === 0}
+                onClick={markAllRead}
+                className="self-center text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
+              >
+                Complete All
+              </button>
+            }
           >
-            Complete All
-          </button>
+            New Notifications
+          </DrawerTitle>
         </div>
 
         <DrawerScrollList

package/src/components/icons/x-logo.tsx

@@ -16,8 +16,8 @@ export function XLogo({ className = '', color = 'white', ...props }: XLogoProps)
       className={className}
       {...props}
     >
-      <path d="M9.75292 12.6562C10.1923 12.2169 10.9044 12.2169 11.3437 12.6562C11.7831 13.0956 11.7831 13.8077 11.3437 14.2471L3.7954 21.7954C3.35606 22.2348 2.64392 22.2348 2.20458 21.7954C1.76524 21.3561 1.76524 20.6439 2.20458 20.2046L9.75292 12.6562ZM20.2046 2.20459C20.6439 1.76525 21.3561 1.76525 21.7954 2.20459C22.2347 2.64393 22.2347 3.35607 21.7954 3.79541L14.2471 11.3438C13.8077 11.7831 13.0956 11.7831 12.6562 11.3438C12.2169 10.9044 12.2169 10.1923 12.6562 9.75293L20.2046 2.20459Z" fill="#FAFAFA" />
-      <path d="M7.9995 1.875L8.13426 1.88232C8.444 1.91951 8.72702 2.08473 8.9121 2.34082L21.9126 20.3408C22.1599 20.6833 22.1943 21.1365 22.0019 21.5127C21.8096 21.8887 21.4223 22.125 21 22.125H16.0005C15.6393 22.125 15.2994 21.9519 15.0879 21.6592L2.08739 3.65918C1.84004 3.31669 1.8057 2.86346 1.99803 2.4873C2.19042 2.11133 2.57763 1.875 2.99999 1.875H7.9995ZM16.5747 19.875H18.7983L7.42528 4.125H5.20165L16.5747 19.875Z" fill="#FAFAFA" />
+      <path d="M9.75292 12.6562C10.1923 12.2169 10.9044 12.2169 11.3437 12.6562C11.7831 13.0956 11.7831 13.8077 11.3437 14.2471L3.7954 21.7954C3.35606 22.2348 2.64392 22.2348 2.20458 21.7954C1.76524 21.3561 1.76524 20.6439 2.20458 20.2046L9.75292 12.6562ZM20.2046 2.20459C20.6439 1.76525 21.3561 1.76525 21.7954 2.20459C22.2347 2.64393 22.2347 3.35607 21.7954 3.79541L14.2471 11.3438C13.8077 11.7831 13.0956 11.7831 12.6562 11.3438C12.2169 10.9044 12.2169 10.1923 12.6562 9.75293L20.2046 2.20459Z" fill={color} />
+      <path d="M7.9995 1.875L8.13426 1.88232C8.444 1.91951 8.72702 2.08473 8.9121 2.34082L21.9126 20.3408C22.1599 20.6833 22.1943 21.1365 22.0019 21.5127C21.8096 21.8887 21.4223 22.125 21 22.125H16.0005C15.6393 22.125 15.2994 21.9519 15.0879 21.6592L2.08739 3.65918C1.84004 3.31669 1.8057 2.86346 1.99803 2.4873C2.19042 2.11133 2.57763 1.875 2.99999 1.875H7.9995ZM16.5747 19.875H18.7983L7.42528 4.125H5.20165L16.5747 19.875Z" fill={color} />
     </svg>
   );
 } 

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -23,6 +23,8 @@ export function NavigationSidebarItemButton({
   onClick,
 }: NavigationSidebarItemButtonProps) {
   const isActive = item.isActive ?? false
+  const unreadCount = item.unreadCount ?? 0
+  const hasUnread = unreadCount > 0
 
   return (
     <button
@@ -49,10 +51,13 @@ export function NavigationSidebarItemButton({
       aria-label={item.label}
       aria-current={isActive ? 'page' : undefined}
     >
-      <div className="flex items-center justify-center flex-shrink-0">
+      <div className="relative flex items-center justify-center flex-shrink-0">
         {cloneElement(item.icon as ReactElement<IconProps>, {
           color: isActive && !disabled ? "text-ods-accent" : "text-ods-text-secondary",
         })}
+        {hasUnread && !showLabel && (
+          <span className="absolute top-0 right-0 bg-ods-warning rounded-full w-2 h-2" />
+        )}
       </div>
 
       <span
@@ -65,6 +70,14 @@ export function NavigationSidebarItemButton({
         {item.label}
       </span>
 
+      {hasUnread && showLabel && (
+        <span className="bg-ods-accent flex items-center justify-center flex-shrink-0 p-2 rounded-md size-6">
+          <span className="text-xs font-medium text-ods-text-on-accent">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        </span>
+      )}
+
       {item.badge && showLabel && (
         <span
           className={cn(

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -50,6 +50,9 @@ export interface OnboardingGuideDetailViewProps {
    *  e.g. `(s) => \`/content/api/onboarding-guides/${s}\``. */
   guideEndpoint?: (slug: string) => string
   related?: OnboardingGuide[]
+  /** Link target for the author name in the metadata grid — the host
+   *  computes it (public author page; absent ⇒ plain text). */
+  authorHref?: string
   /** Optional markdown renderer override. Defaults to lib
    *  `<SimpleMarkdownRenderer>`. */
   MarkdownRenderer?: ComponentType<{ content: string }>
@@ -65,6 +68,7 @@ export interface OnboardingGuideDetailViewProps {
 }
 
 export function OnboardingGuideDetailView({
+  authorHref,
   initialData,
   slug,
   guideEndpoint,
@@ -139,6 +143,7 @@ export function OnboardingGuideDetailView({
         {/* Metadata grid — Section · Step | Published | Author. */}
         <EntityAuthorCard
           author={guide.author}
+          authorHref={authorHref}
           publishedAt={guide.published_at}
           extraCells={[
             {

package/src/components/related-content/index.ts

@@ -1,6 +1,7 @@
 // CLIENT subpath barrel — `@flamingo-stack/openframe-frontend-core/components/related-content`
 export {
   RelatedContentSection,
+  GROUP_PAGE_SIZE,
   type RelatedContentSectionProps,
   type CardLinkProvider,
   type CardLinkProviderProps,

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

@@ -42,7 +42,7 @@
  * content type, add it BOTH there and here (cards + skeleton + list URL).
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   CONTENT_REF_GROUPS,
   getContentRefLabelOrTitleCase,
@@ -51,6 +51,7 @@ import {
 } from '../../utils/content-ref-groups';
 import type { ContentRef, ContentRefWithReason } from '../../types/content-ref';
 import { useSelfFetch } from '../../hooks/use-self-fetch';
+import { Pagination } from '../pagination';
 import { extractItems, extractItemId } from '../../utils/extract-items';
 import { buildListUrl as libBuildListUrl, canonicalContentRefType } from '../../utils/list-url';
 import { buildSuggestionUrl } from '../../utils/suggestion-url';
@@ -342,6 +343,16 @@ function resolveGroupConfig(type: string): ContentRefGroupConfig {
   };
 }
 
+/** Items per page within one type group. Groups larger than this paginate
+ *  with the standard Pagination control (NO nested scrolling — a bounded
+ *  scrollbox inside the page traps wheel events and hides the sections
+ *  below it). MUST stay at or above the largest suggestion fill
+ *  (RELATED_SAME_TYPE_COUNT in the hub's lib/constants/suggestions.ts) so
+ *  current rails never paginate — only genuinely big groups (author pages)
+ *  do. Exported through the subpath barrel for the hub's module-load
+ *  assertion of that relation (entity-suggestion-sections.tsx). */
+export const GROUP_PAGE_SIZE = 12;
+
 function ContentGroup({
   type,
   refs,
@@ -371,11 +382,38 @@ function ContentGroup({
   const isListLayout = config.layout === 'list';
   const cardSize = config.gridSize;
 
+  // Per-group pagination for big groups (author pages): GROUP_PAGE_SIZE items
+  // per page with the standard Pagination control below the group. Client-side
+  // slicing — useGroupItems already fetched every row in one batched call, so
+  // page flips are instant. Hooks live above every early return (file
+  // convention). Page is clamped so a shrinking refs array (suggestion
+  // refetch) can never strand the view past the last page, and RESET when the
+  // ref set actually changes (shrink→grow must not return to a stale page).
+  const [page, setPage] = useState(1);
+  const refsKey = refs.map((r) => r.id).join('|');
+  const prevRefsKeyRef = useRef(refsKey);
+  useEffect(() => {
+    if (prevRefsKeyRef.current !== refsKey) {
+      prevRefsKeyRef.current = refsKey;
+      setPage(1);
+    }
+  }, [refsKey]);
+  const totalGroupPages = Math.max(1, Math.ceil(refs.length / GROUP_PAGE_SIZE));
+  const safePage = Math.min(page, totalGroupPages);
+  const visibleGroupRefs =
+    refs.length > GROUP_PAGE_SIZE
+      ? refs.slice((safePage - 1) * GROUP_PAGE_SIZE, safePage * GROUP_PAGE_SIZE)
+      : refs;
+  const groupPagination =
+    totalGroupPages > 1 ? (
+      <Pagination currentPage={safePage} totalPages={totalGroupPages} onPageChange={setPage} />
+    ) : null;
+
   // Skeleton gate: `isLoading && !items` — SSR HTML and the client's first
   // paint render identical skeletons (useSelfFetch starts isLoading=true on
   // both sides), and once items exist they are never replaced by skeletons.
   if (isLoading && !items) {
-    const skeletons = refs.map((r) => (
+    const skeletons = visibleGroupRefs.map((r) => (
       <div key={r.id}>{renderSkeletonForType(type, cardSize, adminCampaignCard)}</div>
     ));
     return (
@@ -404,7 +442,7 @@ function ContentGroup({
     (items as any[]).map((it) => [extractItemId(type, it) ?? String((it as any)?.id), it]),
   );
 
-  const cards = refs
+  const cards = visibleGroupRefs
     .map((contentRef) => {
       const itemId = String(contentRef.id);
       const item = itemById.get(itemId);
@@ -436,7 +474,22 @@ function ContentGroup({
     })
     .filter(Boolean);
 
-  if (cards.length === 0) return null;
+  if (cards.length === 0) {
+    // Current PAGE resolved zero cards (rows deleted between the ref fetch
+    // and the group fetch, or a stricter list-API gate dropped them). When a
+    // pager exists the user must keep the controls to navigate back —
+    // dropping the whole group would strand them. A genuinely empty group
+    // (no pager) still vanishes with its heading.
+    if (groupPagination) {
+      return (
+        <div className="space-y-4">
+          {heading}
+          {groupPagination}
+        </div>
+      );
+    }
+    return null;
+  }
 
   return (
     <div className="space-y-4">
@@ -446,6 +499,7 @@ function ContentGroup({
       ) : (
         <div className={gridClassFor(columns)}>{cards}</div>
       )}
+      {groupPagination}
     </div>
   );
 }
@@ -467,6 +521,12 @@ export interface RelatedContentSectionProps {
    *  `contentRefs` is provided. */
   entityType?: string;
   entityId?: number | string;
+  /** AUTHOR mode: self-fetch ALL published content authored by this profile
+   *  from `{apiBaseUrl}/api/related-content?authorId=…` (grouped per type,
+   *  endless within each group). Ignored when `contentRefs` is provided;
+   *  takes precedence over the entityType/entityId suggestion scope.
+   *  SSR-hydrate via `initialItems`, same as suggestion mode. */
+  authorId?: string;
   /** Maps to the suggestion API's `count` param — the PER-TYPE fill target
    *  for every candidate type EXCEPT the host's own. Absent → param not sent
    *  (server default applies). */
@@ -532,6 +592,7 @@ export function RelatedContentSection({
   contentRefs,
   entityType,
   entityId,
+  authorId,
   minResults,
   sameTypeMinResults,
   includeTypes,
@@ -555,8 +616,24 @@ export function RelatedContentSection({
   // entirely (an empty-string `types=` param would be dropped by the URL
   // builder and read server-side as "all candidates") AND ignore SSR refs.
   const suggestionsDisabled = includeTypes?.length === 0;
+  // Shared type-filter params — one spelling for both fetch modes so a future
+  // normalization (trim/dedupe) can't diverge between them.
+  const typeFilterParams = {
+    types: includeTypes !== undefined ? includeTypes.join(',') : undefined,
+    excludeTypes: excludeTypes && excludeTypes.length > 0 ? excludeTypes.join(',') : undefined,
+  };
+  // AUTHOR mode beats suggestion mode: when `authorId` is set the rail lists
+  // everything that profile authored (the server returns ALL, no count).
+  const authorUrl =
+    contentRefs === undefined && authorId && !suggestionsDisabled
+      ? buildSuggestionUrl('/api/related-content', {
+          apiBaseUrl,
+          extraParams: { authorId, ...typeFilterParams },
+        })
+      : null;
   const suggestUrl =
-    contentRefs === undefined &&
+    authorUrl ??
+    (contentRefs === undefined &&
     entityType &&
     entityId !== undefined &&
     entityId !== null &&
@@ -569,11 +646,10 @@ export function RelatedContentSection({
           count: minResults,
           extraParams: {
             sameTypeCount: sameTypeMinResults !== undefined ? String(sameTypeMinResults) : undefined,
-            types: includeTypes !== undefined ? includeTypes.join(',') : undefined,
-            excludeTypes: excludeTypes && excludeTypes.length > 0 ? excludeTypes.join(',') : undefined,
+            ...typeFilterParams,
           },
         })
-      : null;
+      : null);
   // Memoize the initialData wrapper — useSelfFetch re-syncs on [initialData],
   // and a fresh per-render object would loop setState under re-rendering
   // parents (the latent FaqSection bug, fixed there in the same change).

package/src/components/shared/product-release/release-detail-page.tsx

@@ -11,12 +11,12 @@ import { PageShell } from '../../layout/article-detail-layout';
 import { BackButton } from '../../layout/back-button';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
-import { SquareAvatar } from '../../ui/square-avatar';
+import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
+import type { EntityAuthor } from '../../../types/entity-author';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
-import { nameInitials } from '../../../utils/format';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
@@ -103,6 +103,9 @@ export interface ReleaseDetailPageProps {
    *  `LegalDocumentPage`. Pass `false` to hide. Default
    *  `{ label: 'Back to home', href: '/' }`. */
   backButton?: { label?: string; href?: string } | false;
+  /** Link target for the author name in the metadata grid — the host
+   *  computes it (public author page; absent ⇒ plain text). */
+  authorHref?: string;
 }
 
 // Default simple markdown renderer (just renders as text)
@@ -111,6 +114,7 @@ function DefaultMarkdownRenderer({ content }: MarkdownRendererProps) {
 }
 
 export function ReleaseDetailPage({
+  authorHref,
   slug,
   initialData,
   useRelease,
@@ -207,7 +211,9 @@ export function ReleaseDetailPage({
   const releaseType = release.release_type as string;
   const releaseStatus = release.release_status as string;
   const releaseMedia = release.release_media as Array<{ id?: string; media_type: string; media_url: string; title?: string }> | undefined;
-  const author = release.author as { avatar_url?: string; full_name?: string } | undefined;
+  // Field-cast per this file's loose-release idiom (release_type etc. above)
+  // — but to the SHARED EntityAuthor, never an inline shadow author shape.
+  const author = release.author as EntityAuthor | undefined;
   const githubReleases = release.github_releases as Array<{ id: string; github_release_url: string }> | undefined;
   const knowledgeBaseLinks = release.knowledge_base_links as Array<{ id?: string; kb_article_path: string }> | string[] | undefined;
   const migrationGuideUrl = release.migration_guide_url as string | undefined;
@@ -290,24 +296,15 @@ export function ReleaseDetailPage({
             </div>
           </div>
 
-          {/* Author */}
-          <div className="bg-ods-card p-4 flex items-center gap-3">
-            <SquareAvatar
-              src={author?.avatar_url || ''}
-              alt={author?.full_name || 'Author'}
-              fallback={nameInitials(author?.full_name || 'Unknown', '')}
-              size="md"
-              variant="round"
-            />
-            <div className="flex flex-col gap-0 flex-1 min-w-0">
-              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={author?.full_name || 'Unknown Author'}>
-                {author?.full_name || 'Unknown Author'}
-              </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
-                Author
-              </p>
-            </div>
-          </div>
+          {/* Author — the shared metadata-grid author cell (it was extracted
+              FROM this page; rendering the export instead of an inline copy
+              keeps the two in lockstep). The stub author preserves the legacy
+              "Unknown Author" rendering for author-less releases; the
+              job_title-over-roleLabel rule matches the guide detail page. */}
+          <EntityMetadataAuthorCell
+            author={author ?? { full_name: null, avatar_url: null }}
+            authorHref={author?.full_name ? authorHref : undefined}
+          />
         </div>
 
         {/* Image Gallery - Horizontal Scrolling */}