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

package/src/components/chat/entity-cards/slack-message-card.tsx

@@ -15,6 +15,7 @@ import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { SlackIcon } from '../../icons-v2-generated/brand-logos/slack-icon';
 import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { SlackMessageItem } from '../types/entities/slack-message';
 import {
   COMPACT_CARD_ICON_SLOT,
@@ -23,14 +24,13 @@ import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
   safeHref,
 } from '../utils/compact-card-classes';
+import { ActivityRowSkeleton, CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 export interface SlackMessageCardAnchorProps {
   href: string;
@@ -61,6 +61,7 @@ function parseChannelFromUrl(url: string | null | undefined): string | null {
 }
 
 export function SlackMessageCard({ item, variant = 'compact', className, anchorProps }: SlackMessageCardProps) {
+  if (useLoadingScope()) return <SlackMessageCardSkeleton variant={variant} className={className} />;
   const channel = item.channel ?? parseChannelFromUrl(item.url) ?? null;
   const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' });
 
@@ -161,32 +162,24 @@ export function SlackMessageCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
-        <UnifiedSkeleton className="h-3.5 w-3.5 shrink-0 rounded" />
-        <UnifiedSkeleton className="h-3 w-32 shrink-0 rounded" />
-        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
-        <UnifiedSkeleton className="h-3 w-24 shrink-0 rounded" />
-        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
-      </div>
+      <ActivityRowSkeleton
+        lead={
+          <>
+            <UnifiedSkeleton className="h-3.5 w-3.5 shrink-0 rounded" />
+            <UnifiedSkeleton className="h-3 w-32 shrink-0 rounded" />
+          </>
+        }
+        trailingWidths={['w-24', 'w-20']}
+        className={className}
+      />
     );
   }
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <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-2/3 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-5/6 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-1/3 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
+      titleWidth="w-2/3"
+      rows={[{ width: 'w-5/6' }, { width: 'w-1/3' }]}
+      trailingIcon
+      className={className}
+    />
   );
 }

package/src/components/chat/hooks/index.ts

@@ -25,7 +25,7 @@ export * from './use-sse';
 // Unified chat surface — single public hook + two transport adapters.
 // Consumers typically use `useUnifiedChat({ modes, activeMode })`; the
 // adapter hooks are exposed for advanced cases where direct transport
-// access is needed. `useEmbeddedChat` is the legacy SSE alias.
+// access is needed..
 export * from './use-sse-chat-adapter';
 export * from './use-nats-chat-adapter';
 // Shared dialog-list state machine behind both adapters' managed modes.
@@ -33,7 +33,6 @@ export * from './use-managed-dialog-list';
 // Reference latch for host-supplied inline objects used as memo dependencies.
 export * from './use-stable-shallow';
 export * from './use-unified-chat';
-export * from './use-embedded-chat';
 
 // useProxiedImageUrl — runtime-driven hook wrapping pure
 // `getProxiedImageUrl`. Reads proxy prefix + skip-domain list from
@@ -53,3 +52,14 @@ export {
   type UseAskSurfaceOptions,
   type UseAskSurfaceResult,
 } from './use-ask-prompts';
+export type { SlashCommandActionId, SlashCommandSummaryAction, SlashCommandSummary } from '../types/component.types';
+export type { Message } from '../types/message.types';
+export {
+  appendToTrailingAssistant,
+  applyToolExecutionToMessages,
+  upsertTrailingCompaction,
+} from '../stream/message-mutations';
+export type { FetchDialogsParams, FetchDialogsResult } from '../types/unified-chat-state.types';
+export type { ChatTurnMeta } from '../stream/chat-stream-reducer';
+export type { ChatSource } from '../types/message.types';
+export type { StreamingPhase } from '../types/unified-chat-state.types';

package/src/components/chat/hooks/use-ask-prompts.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../contexts/assistant-runtime-context';
 import { useSelfFetch } from '../../../hooks/use-self-fetch';
 import { openAskAi } from '../../navigation/mingo-ai-button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { AskPrompt } from '../ask-prompts';
 
 /** The answer of a host's questions endpoint (`AssistantRuntime.askPromptsUrl`). */
@@ -227,7 +228,10 @@ export function useAskSurface({
   const assistant = useAssistantRuntime();
   const surface = useId();
   const queue = useAskQueue();
-  const picks = assistantAvailable(assistant) && !!assistant.askPromptsUrl && enabled && exclude !== null;
+  // In a loading scope a surface takes no turn and picks nothing: it draws its loading state.
+  const held = useLoadingScope();
+  const picks =
+    !held && assistantAvailable(assistant) && !!assistant.askPromptsUrl && enabled && exclude !== null;
 
   // A layout effect: surfaces a page mounts together take their turns in document order.
   useLayoutEffect(() => {

package/src/components/chat/hooks/use-chat-dialog-manager.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo, useRef, useState } from 'react';
 import type { DialogItem } from '../types/component.types';
-import type { FetchDialogsParams, FetchDialogsResult } from './use-nats-chat-adapter';
+import type { FetchDialogsParams, FetchDialogsResult } from '../types/unified-chat-state.types';
 
 export interface UseChatDialogManagerArgs {
   /** Active (non-archived) dialogs from the unified chat state. */

package/src/components/chat/hooks/use-chat-history-hydration.ts

@@ -20,8 +20,8 @@
 import { useEffect, useRef, useState, type MutableRefObject } from 'react';
 import { isRecord, unwrapEnvelope } from '../../../chat-protocol/wire-narrow';
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch';
+import type { Message } from '../types/message.types';
 import { AUTO_CONTINUATION_DIRECTIVE_PREFIX } from '../utils/auto-continuation-directive';
-import type { Message } from './use-chat';
 
 export interface UseChatHistoryHydrationArgs {
   /** Mirrors the adapter's `active` gate — an idle (Mingo-mode) mount never fetches. */

package/src/components/chat/hooks/use-chat.ts

@@ -12,9 +12,6 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import type { ApprovalRequestSegment, Message, MessageSegment, ToolExecutionData } from '../types/message.types';
 import { useSSE, type StreamFn, type StreamFnExtraOptions } from './use-sse';
 
-export type { Message } from '../types/message.types';
-export type { StreamFnExtraOptions } from './use-sse';
-
 interface UseChatOptions {
   useMock?: boolean;
   debugMode?: boolean;

package/src/components/chat/hooks/use-nats-chat-adapter.ts

@@ -79,26 +79,6 @@ import { useChunkCatchup } from './use-chunk-catchup';
 import { useManagedDialogList } from './use-managed-dialog-list';
 import { useNatsDialogSubscription } from './use-nats-dialog-subscription';
 
-// Legacy public home of the pure message-mutation helpers ("exported for
-// host reuse"). Canonical implementation moved to the stream module in
-// Phase 3 — these re-exports keep the import path stable until Phase 4
-// migrates consumers.
-export {
-  appendToTrailingAssistant,
-  applyToolExecutionToMessages,
-  upsertTrailingCompaction,
-} from '../stream/message-mutations';
-
-// =============================================================================
-// Config + options
-// =============================================================================
-
-// `FetchDialogsParams` / `FetchDialogsResult` moved to the unified types
-// module (they are the host contract of the SHARED `useManagedDialogList`
-// hook, consumed by both adapters); re-exported here so the public import
-// path stays stable.
-export type { FetchDialogsParams, FetchDialogsResult } from '../types/unified-chat-state.types';
-
 /** Page-fetch parameters passed to `fetchDialogMessages`. */
 export interface FetchDialogMessagesParams {
   dialogId: string;

package/src/components/chat/hooks/use-proxied-image-url.ts

@@ -1,31 +1,38 @@
 'use client';
 
-import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context';
+import { useChatRuntime } from '../../../contexts/chat-runtime-context';
 import { getProxiedImageUrl } from '../../../utils/image-proxy';
 
+export interface UseProxiedImageUrlOptions {
+  /** A host-injected mapper. When given it wins over the ambient runtime (a host that resolves its own images). */
+  proxyImageUrl?: (url: string) => string;
+  /**
+   * Load an `https://` image directly instead of through the proxy. Default `true` (the proxy is for `http://` and
+   * hosts that refuse a cross-origin request); pass `false` for an image that must go through the proxy.
+   */
+  directHttps?: boolean;
+}
+
 /**
- * Hook-version of `getProxiedImageUrl` that reads `proxyPrefix` and
- * `skipDomains` from the ambient `ChatRuntime`. Use anywhere inside
- * a `<ChatRuntimeContext.Provider>`.
+ * THE way a component resolves an image URL through the image proxy: every avatar, logo and cover in the lib and its
+ * hosts reads it here, never by calling `getProxiedImageUrl` with the runtime's endpoints by hand.
  *
- * Returns the input URL (or `''` for null/undefined) when no
- * `imageProxyUrlPrefix` is configured. Always passes `directHttps: true`
- * — callers that need proxied https (e.g. raster-only) must use the pure
- * `getProxiedImageUrl` from `@flamingo-stack/openframe-frontend-core/utils`
- * directly.
+ * Order: the host's `proxyImageUrl` → the ambient `ChatRuntime`'s `imageProxyUrlPrefix` / `imageProxySkipDomains` →
+ * the URL as it is (a bare embed with no runtime loads images directly). Returns `''` for no URL, so a caller writes
+ * `const src = useProxiedImageUrl(url); src ? <Image src={src}/> : <Initials/>`.
  *
- * Rules of hooks: call at the TOP of a component, NOT inside loops/maps.
- * For `.map(item => proxy(item.url))` patterns, use the pure
- * `getProxiedImageUrl` and hardcode the proxy config — the rare
- * non-React-tree caller pattern.
+ * Rules of hooks: call at the top of a component, never inside a loop. A list of images is a list of components, each
+ * calling it for its own row; a server or non-React caller uses the pure `getProxiedImageUrl`.
  */
-export function useProxiedImageUrl(url: string | null | undefined): string {
-  const r = useRequiredChatRuntime();
+export function useProxiedImageUrl(url: string | null | undefined, options?: UseProxiedImageUrlOptions): string {
+  const runtime = useChatRuntime();
+  if (!url) return '';
+  if (options?.proxyImageUrl) return options.proxyImageUrl(url);
   return (
-    getProxiedImageUrl(url ?? '', {
-      proxyPrefix: r.endpoints.imageProxyUrlPrefix,
-      skipDomains: r.endpoints.imageProxySkipDomains,
-      directHttps: true,
-    }) ?? ''
+    getProxiedImageUrl(url, {
+      proxyPrefix: runtime?.endpoints.imageProxyUrlPrefix,
+      skipDomains: runtime?.endpoints.imageProxySkipDomains,
+      directHttps: options?.directHttps ?? true,
+    }) ?? url
   );
 }

package/src/components/chat/hooks/use-slash-commands.ts

@@ -16,13 +16,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch';
-import type { SlashCommandActionId, SlashCommandSummaryAction, SlashCommandSummary } from '../types/component.types';
-
-// Re-export so callers can `import { SlashCommandSummary } from
-// '@flamingo-stack/openframe-frontend-core/components/chat/hooks'`
-// without reaching into types. The component.types module is the
-// canonical declaration.
-export type { SlashCommandActionId, SlashCommandSummaryAction, SlashCommandSummary };
+import type { SlashCommandSummary } from '../types/component.types';
 
 /**
  * Fetch slash-command suggestions for the CURRENT deployment platform,

package/src/components/chat/hooks/use-sse-chat-adapter.ts

@@ -57,12 +57,14 @@ import { createSseFrameDecoder } from '../../../chat-protocol/decode';
 import type { ChatStreamEvent } from '../../../chat-protocol/events';
 import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context';
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch';
+import { defaultTableIdForDocumentType } from '../../../utils/source-icons';
 import type { ChatRef } from '../chat-ref.types';
 import { createChatDialogStore } from '../stream/chat-dialog-store';
 import type { ChatDialogStore } from '../stream/chat-dialog-store';
 import type { ChatStreamReducerOptions } from '../stream/chat-stream-reducer';
 import { useChatStreamReducer } from '../stream/use-chat-stream-reducer';
-import type { ChatSource, Message, MessageSegment } from '../types/message.types';
+import type { SlashCommandSummary } from '../types/component.types';
+import type { ChatSource, Message, MessageSegment, ScrollAnchor } from '../types/message.types';
 import type {
   ChatDialogCapabilities,
   FetchDialogsParams,
@@ -73,17 +75,11 @@ import type {
 import { createChatConversationStorage, pruneStaleChatConversationStorage } from '../utils/chat-conversation-storage';
 import { createChatConversationsApi } from '../utils/chat-conversations-api';
 import { buildDiscussPrompt } from '../utils/discuss-ref-prompt';
-import type { ScrollAnchor } from '../utils/scroll-anchor';
 import { sanitizeTitleForChat } from '../utils/slash-dispatch-utils';
 import type { WireCommandOverride } from '../utils/slash-dispatch-utils';
-import { defaultTableIdForDocumentType } from '../utils/source-icons';
 import { useChatHistoryHydration } from './use-chat-history-hydration';
 import { useManagedDialogList } from './use-managed-dialog-list';
-import { useSlashCommandRegistry, type SlashCommandSummary } from './use-slash-commands';
-
-// Canonical home of the per-turn meta row moved to the stream module in
-// Phase 3; re-exported here to keep the legacy import path stable.
-export type { ChatTurnMeta } from '../stream/chat-stream-reducer';
+import { useSlashCommandRegistry } from './use-slash-commands';
 
 // ─── Stable no-op references for the capabilities Guide mode never has ──
 // Plain module-scope constants so the adapter's return identity stays stable
@@ -121,11 +117,6 @@ const noopBumpMetaTick = (): void => {};
  *  hub-side platform-utils, not in lib). */
 export type DocSource = string;
 
-/** Re-export: `ChatSource` moved to `message.types` when the NATS transport
- *  started producing it too. Kept so existing `use-sse-chat-adapter` imports
- *  keep resolving. */
-export type { ChatSource };
-
 export interface DocChatMessage {
   id: string;
   role: 'user' | 'assistant';
@@ -143,11 +134,6 @@ export interface DocChatMessage {
   hidden?: boolean;
 }
 
-// `StreamingPhase` is unified across transports — re-exported here to
-// preserve the legacy import path. Canonical home is now
-// `types/unified-chat-state.types.ts`.
-export type { StreamingPhase } from '../types/unified-chat-state.types';
-
 /**
  * Optional dependency-injection options for `useSseChatAdapter`.
  *

package/src/components/chat/index.ts

@@ -1,9 +1,10 @@
 'use client';
 
 // Chat components exports
-import { createElement, forwardRef, lazy, Suspense, useEffect } from 'react';
+import { createElement, forwardRef, lazy, Suspense, useEffect, useState } from 'react';
+import { afterPageLoad } from '../../utils/after-page-load';
 import type { EmbeddableChatHandle, EmbeddableChatProps } from './embeddable-chat';
-import { holdAskAiOpens } from './utils/ask-ai-events';
+import { ASK_AI_OPEN_EVENTS, holdAskAiOpens } from './utils/ask-ai-events';
 export * from './approval-request-message';
 export * from './approval-batch-message';
 export * from './escalation-offer-message';
@@ -104,15 +105,31 @@ export * from './stream';
 export * from './utils';
 
 // EmbeddableChat — THE chat. Hosts mount it once at the root after providing a
-// <ChatRuntimeContext.Provider>. Its module is loaded on its own, after the
-// page's code (`lazy`), so a page never ships the chat with its first script;
-// an open sent before it has loaded is held and delivered (`ask-ai-events`).
+// <ChatRuntimeContext.Provider>. Its module is loaded on its own (`lazy`), and
+// only once the page has loaded and the browser is idle (`afterPageLoad`), or at
+// once when something asks for it (an open event, `open` or `defaultOpen`): a
+// chat that starts closed must not download and run beside the page's first
+// paint, which is what slowed every page's LCP on phones. An open sent before it
+// has loaded is held and delivered (`ask-ai-events`).
 export type { ChatPrefillDraft, EmbeddableChatHandle, EmbeddableChatProps } from './embeddable-chat';
 const LoadedEmbeddableChat = lazy(() =>
   import('./embeddable-chat').then(module => ({ default: module.EmbeddableChat })),
 );
 export const EmbeddableChat = forwardRef<EmbeddableChatHandle, EmbeddableChatProps>((props, ref) => {
+  const [loadRequested, setLoadRequested] = useState(false);
+  const load = loadRequested || Boolean(props.open) || Boolean(props.defaultOpen);
   useEffect(() => holdAskAiOpens(), []);
+  useEffect(() => {
+    if (load) return undefined;
+    const start = () => setLoadRequested(true);
+    for (const name of ASK_AI_OPEN_EVENTS) window.addEventListener(name, start);
+    const cancel = afterPageLoad(start);
+    return () => {
+      cancel();
+      for (const name of ASK_AI_OPEN_EVENTS) window.removeEventListener(name, start);
+    };
+  }, [load]);
+  if (!load) return null;
   return createElement(Suspense, { fallback: null }, createElement(LoadedEmbeddableChat, { ...props, ref }));
 });
 EmbeddableChat.displayName = 'EmbeddableChat';

package/src/components/chat/stream/chat-stream-reducer.ts

@@ -50,7 +50,6 @@
  * approval segments.
  */
 
-import { escapeThinkingTags } from '../../../chat-protocol/decode';
 import { errorDetailsMessage } from '../../../chat-protocol/events';
 import {
   CHAT_OWNER_ADMIN,
@@ -60,6 +59,7 @@ import {
   type ParticipantEvent,
   type UsageEvent,
 } from '../../../chat-protocol/events';
+import { escapeThinkingTags } from '../../../chat-protocol/leading-frames';
 import type { ChatProgress } from '../../../chat-protocol/progress';
 import { mergeSourceMetadata, type SourceMetadata } from '../../../chat-protocol/source-metadata';
 import type {
@@ -72,6 +72,7 @@ import type {
   ToolExecutionSegment,
   ExecutingToolState,
 } from '../types';
+import type { ScrollAnchor } from '../types/message.types';
 import type { PendingApproval } from '../types/processing.types';
 import type {
   DialogTokenUsage,
@@ -85,7 +86,7 @@ import {
   createMessageSegmentAccumulator,
   type AccumulatorCallbacks,
 } from '../utils/message-segment-accumulator';
-import { parseScrollAnchor, type ScrollAnchor } from '../utils/scroll-anchor';
+import { parseScrollAnchor } from '../utils/scroll-anchor';
 import { getCommandText } from '../utils/tool-call-helpers';
 import {
   CONTENT_DEDUP_WINDOW,

package/src/components/chat/types/entities/index.ts

@@ -14,10 +14,6 @@
  * (+ pure formatters that operate on it) lives here.
  */
 
-export * from './blog';
-export * from './case-study';
-export * from './content-ref';
-export * from './customer-interview';
 export * from './data-room-doc';
 export * from './github-activity';
 export * from './hubspot-ticket';
@@ -26,3 +22,27 @@ export * from './onboarding-guide';
 export * from './program-types';
 export * from './roadmap-item';
 export * from './slack-message';
+export type {
+  BlogPost,
+  BlogPostSummary,
+  BlogPostPlatform,
+  BlogPostCategory,
+  BlogPostTag,
+  BlogCategory,
+  BlogTag,
+  BlogAuthor,
+  BlogMediaAsset,
+  BlogStatus,
+  BlogPagination,
+  BlogSearchParams,
+} from '../../../../types/blog';
+export type { CaseStudy, CaseStudyFilters, CaseStudyListResponse } from '../../../../types/case-study';
+export type { ContentRef, ContentRefWithReason } from '../../../../types/content-ref';
+export type {
+  CustomerInterview,
+  CustomerInterviewConfig,
+  CustomerInterviewFilters,
+  CustomerInterviewListResponse,
+} from '../../../../types/customer-interview';
+export { programItemToStripProfile } from '../../../features/video-bites-shared';
+export type { ProgramAuthorRef } from '../../../features/video-bites-shared';

package/src/components/chat/types/entities/investor-update.ts

@@ -8,8 +8,8 @@
  * formatter move here.
  */
 
+import type { ContentRef } from '../../../../types/content-ref';
 import { formatDateWithTimezone } from '../../../../utils/format';
-import type { ContentRef } from './content-ref';
 
 export interface MetricEntry {
   current: number;

package/src/components/chat/types/entities/program-types.ts

@@ -35,11 +35,6 @@ export interface ProgramHost {
   role?: string; // e.g., "Host", "Speaker", "Guest"
 }
 
-// The author ref and its strip-profile adapter live in the server-safe leaf
-// (`features/video-bites-shared`): a server module that imports them from this
-// chat tree makes the whole chat a client reference of its page.
-export { programItemToStripProfile, type ProgramAuthorRef } from '../../../features/video-bites-shared';
-
 // ============================================================================
 // DATABASE ROW TYPES
 // ============================================================================
@@ -292,6 +287,8 @@ export interface ProgramConfig<T extends BaseProgramItem = BaseProgramItem> {
   showInNav?: boolean; // Whether to show in navigation
   platformUrl?: string; // Fallback URL to external platform (e.g., Podbean main page)
   heroCoverAspect?: 'landscape' | 'square'; // Hero cover image aspect ratio (default: 'landscape')
+  /** A card of this type shows its hosts (a webinar presents its speakers): the card's skeleton draws the hosts row. */
+  cardShowsHosts?: boolean;
 }
 
 // ============================================================================

package/src/components/chat/utils/compact-card-classes.ts

@@ -1,3 +1,4 @@
+import { MEDIA_ASPECT, TILE_SIZE } from '../../../styles/component-sizes';
 import { UNSAFE_URL_CHARS, isSameOriginPath } from '../../../utils/url-safety';
 
 /**
@@ -35,7 +36,7 @@ export const COMPACT_CARD_IMAGE_SLOT =
   'relative block shrink-0 self-start w-14 h-14 aspect-square overflow-hidden rounded-md bg-ods-bg';
 
 /** 56×56 placeholder slot for skeletons: the box of a `UnifiedSkeleton as="span"`, which draws the surface. */
-export const COMPACT_CARD_SKELETON_IMAGE_SLOT = 'block h-14 w-14 aspect-square shrink-0 self-start rounded-md';
+export const COMPACT_CARD_SKELETON_IMAGE_SLOT = `block ${TILE_SIZE.thumb} ${MEDIA_ASPECT.square} shrink-0 self-start rounded-md`;
 
 /** 56×56 icon slot — for cards without a cover image. */
 export const COMPACT_CARD_ICON_SLOT =
@@ -50,8 +51,20 @@ export const COMPACT_CARD_TITLE_ROW = 'flex items-center min-w-0 h-5';
 /** Subtitle / summary row container — fixed 16px (h-4). */
 export const COMPACT_CARD_META_ROW_BOX = 'flex items-center min-w-0 h-4';
 
+/** The title's type: bold 14px on a 20px line (the skeleton's title bar takes the same line). */
+export const COMPACT_CARD_TITLE_TYPE = 'text-sm font-semibold leading-5';
+
 /** Title text — bold 14px on a 20px line. */
-export const COMPACT_CARD_TITLE = 'truncate text-sm font-semibold leading-5 text-ods-text-primary';
+export const COMPACT_CARD_TITLE = `truncate ${COMPACT_CARD_TITLE_TYPE} text-ods-text-primary`;
+
+/** Title row that wraps (the title followed by its badges), for cards with no fixed title row. */
+export const COMPACT_CARD_TITLE_WRAP_ROW = 'flex min-w-0 flex-wrap items-center gap-1.5';
+
+/** Two-line preview under the title (data-room docs, generic entities, tickets). */
+export const COMPACT_CARD_PREVIEW = 'line-clamp-2 whitespace-pre-wrap break-words text-ods-text-secondary text-h6';
+
+/** The trailing external-link icon's slot, top-aligned with the title. */
+export const COMPACT_CARD_TRAILING_ICON = 'flex h-5 shrink-0 items-center self-start text-ods-text-secondary';
 
 /** Subtitle text — 11px on a 16px line. */
 export const COMPACT_CARD_SUBTITLE = 'truncate text-h6 text-ods-text-secondary';

package/src/components/chat/utils/compact-card-skeleton.tsx

@@ -0,0 +1,111 @@
+import { ExternalLink } from 'lucide-react';
+import type React from 'react';
+import { cn } from '../../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { StatusBadgeSkeleton } from '../../ui/status-badge';
+import {
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE_ROW,
+  COMPACT_CARD_TITLE_TYPE,
+  COMPACT_CARD_TITLE_WRAP_ROW,
+  COMPACT_CARD_TRAILING_ICON,
+} from './compact-card-classes';
+
+/** One `text-h6` row under the title: its bar's width, its line count, and anything drawn after it in the row. */
+export interface CompactCardSkeletonRow {
+  /** The bar's width class. Omitted: the row is kept empty (a card whose row holds no read words). */
+  width?: string;
+  /** Lines of `text-h6`. One line sits in the card's fixed 16px row box; more lines are a free block (a preview). */
+  lines?: number;
+  /** Drawn after the bar in the same row (an avatar box, a short count bar). */
+  after?: React.ReactNode;
+}
+
+/** The rows most compact cards draw: a meta line and a summary line. */
+const DEFAULT_ROWS: CompactCardSkeletonRow[] = [{ width: 'w-2/5' }, { width: 'w-11/12' }];
+
+/**
+ * THE compact (`size="sm"`) entity card while it is read, in the compact card's own boxes: the 56px slot, the title
+ * as a bar of the title's own line, the `text-h6` rows, and the trailing link icon (static, drawn for real). Every
+ * card's `sm` skeleton is this, configured by the parts that card draws.
+ */
+export function CompactCardSkeleton({
+  slot = true,
+  slotClassName,
+  titleWidth = 'w-3/5',
+  titleBadges = [],
+  rows = DEFAULT_ROWS,
+  trailingIcon = false,
+  className,
+}: {
+  /** Draw the 56px image/icon slot. */
+  slot?: boolean;
+  /** A card whose slot is not the standard image slot (the roadmap's bordered logo box). */
+  slotClassName?: string;
+  titleWidth?: string;
+  /** Width classes of the status stamps after the title (`StatusBadgeSkeleton variant="button"`); the title row then wraps like the card's. */
+  titleBadges?: string[];
+  rows?: CompactCardSkeletonRow[];
+  /** The card shows the trailing external-link icon. */
+  trailingIcon?: boolean;
+  className?: string;
+}) {
+  return (
+    <span className={cn(COMPACT_CARD_SKELETON_OUTER, className)} aria-hidden>
+      {slot && <UnifiedSkeleton as="span" className={slotClassName ?? COMPACT_CARD_SKELETON_IMAGE_SLOT} />}
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={titleBadges.length > 0 ? COMPACT_CARD_TITLE_WRAP_ROW : COMPACT_CARD_TITLE_ROW}>
+          <TextLineSkeleton as="span" type="inherit" className={cn(COMPACT_CARD_TITLE_TYPE, titleWidth)} />
+          {titleBadges.map((width, i) => (
+            // The compact cards' title badges are `StatusBadge variant="button"` stamps: their own skeleton.
+            <StatusBadgeSkeleton key={i} variant="button" className={cn('shrink-0', width)} />
+          ))}
+        </span>
+        {rows.map((row, i) =>
+          (row.lines ?? 1) > 1 ? (
+            <TextLineSkeleton key={i} as="span" type="h6" lines={row.lines} className={row.width} />
+          ) : (
+            <span key={i} className={cn(COMPACT_CARD_META_ROW_BOX, row.after ? 'gap-2' : undefined)}>
+              {row.width && <TextLineSkeleton as="span" type="h6" className={row.width} />}
+              {row.after}
+            </span>
+          ),
+        )}
+      </span>
+      {trailingIcon && (
+        <span className={COMPACT_CARD_TRAILING_ICON}>
+          <ExternalLink className="h-3.5 w-3.5" />
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * THE one-line activity row (a card's `variant="row"`) while it is read: the card's leading cells, the flexible text
+ * bar, then one fixed `text-h6`-high bar per trailing cell. Shared by every activity row (GitHub, Slack).
+ */
+export function ActivityRowSkeleton({
+  lead,
+  trailingWidths,
+  className,
+}: {
+  /** The row's leading cells (its kind icon and its id or author), drawn in the loaded row's own boxes. */
+  lead: React.ReactNode;
+  /** Width classes of the fixed cells after the text (a repository, a channel, a date). */
+  trailingWidths: string[];
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex min-w-0 items-center gap-3', className)}>
+      {lead}
+      <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+      {trailingWidths.map((width, i) => (
+        <UnifiedSkeleton key={i} className={cn('h-3 shrink-0 rounded', width)} />
+      ))}
+    </div>
+  );
+}

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

@@ -32,8 +32,6 @@ import { platformAccentVarName } from '../../../utils/platform-identity';
 import { iconFromSet, iconOf, lucideIcon, setIcon, type IconComponent, type IconRef } from './icon-loading';
 import { getIconComponent, normalizeIconKey, registryIcon } from './icon-registry';
 
-export type { IconComponent } from './icon-loading';
-
 // 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.