@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

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

@@ -14,15 +14,17 @@ import { ThumbsUp, ThumbsDown } from 'lucide-react';
 import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { MEDIA_ASPECT, TEXT_LINES_MIN, TILE_SIZE } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
-import { getProxiedImageUrl } from '../../../utils/image-proxy';
 import { ImageClassicIcon } from '../../icons-v2-generated/audio-and-visual/image-classic-icon';
 import { FigmaClassicIcon } from '../../icons-v2-generated/brand-logos/figma-classic-icon';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
-import { StatusBadge, generationTierFromLabel } from '../../ui/status-badge';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton, generationTierFromLabel } from '../../ui/status-badge';
+import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
 import type { RoadmapItem } from '../types/entities/roadmap-item';
 import { getStatusColorScheme } from '../utils/agent-status-message';
 import { getTaskTypeLabel } from '../utils/clickup-task-type-utils';
@@ -31,13 +33,13 @@ import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  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 { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
 import { RoadmapVoteButton } from './roadmap-vote-button';
 import { TaskTypeIcon } from './task-type-icon';
@@ -45,57 +47,80 @@ import { TaskTypeIcon } from './task-type-icon';
 type CardSize = 'default' | 'sm';
 export type VoteType = 'up' | 'down' | null;
 
-export function RoadmapCardSkeleton({ size = 'default' }: { size?: CardSize }) {
+/** The compact card's bordered 48px logo box, read by the card and its skeleton. */
+const ROADMAP_COMPACT_SLOT = `${MEDIA_ASPECT.square} ${TILE_SIZE.xl} shrink-0 self-start overflow-hidden rounded-md border border-ods-border p-1.5`;
+
+// The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const ROADMAP_CARD_BODY =
+  'flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]';
+const ROADMAP_CARD_HEADER = 'flex w-full items-center gap-[16px]';
+const ROADMAP_CARD_ICON_BOX = `flex ${TILE_SIZE.feature} flex-shrink-0 items-center justify-center rounded-lg`;
+const ROADMAP_CARD_HEADING = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h3` lines. */
+const ROADMAP_CARD_TITLE_ROW = `flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const ROADMAP_CARD_META_ROW = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+/** Three `text-h4` lines. */
+const ROADMAP_CARD_SUMMARY_ROW = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROADMAP_CARD_FOOTER = 'flex w-full items-center justify-between';
+const ROADMAP_CARD_VOTES = 'flex h-[48px] overflow-hidden rounded-[6px]';
+const ROADMAP_CARD_FOOTER_END = 'flex min-w-0 items-center gap-2';
+
+/**
+ * A roadmap card while it is read. `default`, in the card's own boxes: the 64px icon box, the title as two `text-h3`
+ * lines, the quarter and id as a `text-h5` line, the status badge's box (beside the heading from md, its own row
+ * below), the description as three `text-h4` lines and the vote buttons' 48px box (with `votes`); the assignees and
+ * target version are drawn only when an item has them, so the skeleton leaves them out. `sm`: the compact card's rows.
+ */
+export function RoadmapCardSkeleton({
+  size = 'default',
+  votes = true,
+  className,
+}: {
+  size?: CardSize;
+  /** `default`: the card shows its vote buttons (the caller passes `onVote`). */
+  votes?: boolean;
+  className?: string;
+}) {
   if (size === 'sm') {
     return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton
-          as="span"
-          className="block aspect-square h-12 w-12 shrink-0 self-start rounded-md border border-ods-border p-1.5"
-        />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-1/2 rounded" />
-            <UnifiedSkeleton as="span" className="h-4 w-12 shrink-0 rounded" />
-          </span>
-          <span className={`${COMPACT_CARD_META_ROW_BOX} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 flex-1 rounded" />
-            <UnifiedSkeleton as="span" className="h-3 w-10 shrink-0 rounded" />
-            {/* assignee-stack placeholder — mirrors the xs AvatarStack
-                slot so row width doesn't shift when assignees load */}
-            <UnifiedSkeleton as="span" className="h-6 w-14 shrink-0 rounded-full" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-5/6 rounded" />
-          </span>
-        </span>
-      </span>
+      <CompactCardSkeleton
+        slotClassName={ROADMAP_COMPACT_SLOT}
+        titleWidth="w-1/2"
+        titleBadges={['w-12']}
+        rows={[
+          // The votes, Figma and screenshot marks after the meta line are the record's (optional): not drawn.
+          { width: 'w-2/5 flex-1' },
+          { width: 'w-5/6' },
+        ]}
+        className={className}
+      />
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex h-full flex-col gap-4 p-[var(--spacing-system-lf)]')}>
-      <div className="flex items-center gap-4">
-        <UnifiedSkeleton className="h-16 w-16 flex-shrink-0 rounded-lg" />
-        <div className="flex-1 space-y-2">
-          <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, ROADMAP_CARD_BODY, className)} aria-hidden>
+      <div className={ROADMAP_CARD_HEADER}>
+        <UnifiedSkeleton className={ROADMAP_CARD_ICON_BOX} />
+        <div className={ROADMAP_CARD_HEADING}>
+          <div className={ROADMAP_CARD_TITLE_ROW}>
+            <TextLineSkeleton type="h3" lines={2} className="w-3/4" />
+          </div>
+          <div className={ROADMAP_CARD_META_ROW}>
+            <TextLineSkeleton type="h5" className="w-1/3" />
+          </div>
         </div>
-        <UnifiedSkeleton className="h-6 w-16 rounded" />
+        <div className="hidden md:block">
+          <StatusBadgeSkeleton />
+        </div>
+      </div>
+      <div className="md:hidden">
+        <StatusBadgeSkeleton />
       </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 className={ROADMAP_CARD_SUMMARY_ROW}>
+        <TextLineSkeleton type="h4" lines={3} className="w-full" />
       </div>
       <div className="flex-1" />
-      <div className="flex items-center justify-between">
-        <UnifiedSkeleton className="h-12 w-32 rounded" />
-        <div className="flex items-center gap-2">
-          {/* assignee-stack placeholder — matches the xs AvatarStack in
-              the loaded card's action row */}
-          <UnifiedSkeleton className="h-6 w-14 rounded-full" />
-          <UnifiedSkeleton className="h-8 w-20 rounded" />
-        </div>
+      <div className={ROADMAP_CARD_FOOTER}>
+        {votes && <UnifiedSkeleton className={cn(ROADMAP_CARD_VOTES, 'w-32')} />}
       </div>
     </div>
   );
@@ -155,9 +180,11 @@ export function RoadmapCard({
   isVoting = false,
 }: RoadmapCardProps) {
   const [showScreenshots, setShowScreenshots] = useState(false);
+  const loading = useLoadingScope();
 
   const logoUrl = item.icon && item.icon.startsWith('http') ? item.icon : null;
-  const iconSrc = logoUrl ? getProxiedImageUrl(logoUrl, { directHttps: true }) || logoUrl : null;
+  const iconSrc = useProxiedImageUrl(logoUrl) || null;
+  if (loading) return <RoadmapCardSkeleton size={size} votes={!!onVote} className={className} />;
 
   if (size === 'sm') {
     const compactHref = safeHref(href ?? null);
@@ -169,7 +196,7 @@ export function RoadmapCard({
     const body = (
       <>
         <span
-          className="flex aspect-square h-12 w-12 shrink-0 items-center justify-center self-start overflow-hidden rounded-md border border-ods-border bg-ods-bg p-1.5 text-ods-accent"
+          className={cn(ROADMAP_COMPACT_SLOT, 'flex items-center justify-center bg-ods-bg text-ods-accent')}
           title={typeLabel ?? undefined}
         >
           {useTypeIcon ? (
@@ -267,16 +294,9 @@ export function RoadmapCard({
   }
 
   return (
-    <div
-      id={id}
-      className={cn(
-        CONTENT_CARD_FRAME_CLASS,
-        'flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-        className,
-      )}
-    >
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg">
+    <div id={id} className={cn(CONTENT_CARD_FRAME_CLASS, ROADMAP_CARD_BODY, className)}>
+      <div className={ROADMAP_CARD_HEADER}>
+        <div className={cn(ROADMAP_CARD_ICON_BOX, 'border border-ods-border bg-ods-bg')}>
           {iconSrc ? (
             <Image
               src={iconSrc}
@@ -293,11 +313,11 @@ export function RoadmapCard({
           )}
         </div>
 
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="flex min-h-[48px] items-center">
+        <div className={ROADMAP_CARD_HEADING}>
+          <div className={ROADMAP_CARD_TITLE_ROW}>
             <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{item.title}</h3>
           </div>
-          <div className="flex min-h-[20px] items-center">
+          <div className={ROADMAP_CARD_META_ROW}>
             <p className="truncate text-ods-text-secondary text-h5">
               {item.quarter}, {item.id}
             </p>
@@ -321,15 +341,15 @@ export function RoadmapCard({
         />
       </div>
 
-      <div className="flex min-h-[72px] items-center">
+      <div className={ROADMAP_CARD_SUMMARY_ROW}>
         <p className="line-clamp-3 text-ods-text-secondary text-h4">{item.description || ''}</p>
       </div>
 
       <div className="flex-1" />
 
-      <div className="flex w-full items-center justify-between">
+      <div className={ROADMAP_CARD_FOOTER}>
         {onVote && (
-          <div className="flex h-[48px] overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
+          <div className={cn(ROADMAP_CARD_VOTES, 'border border-ods-border bg-ods-card')}>
             <RoadmapVoteButton
               voteType="up"
               count={item.upvotes}
@@ -351,7 +371,7 @@ export function RoadmapCard({
           </div>
         )}
 
-        <div className="flex min-w-0 items-center gap-2">
+        <div className={ROADMAP_CARD_FOOTER_END}>
           {item.assignees && item.assignees.length > 0 ? (
             <AvatarStack size="xs" people={assigneePeople(item.assignees)} className="shrink-0" />
           ) : null}

package/src/components/chat/entity-cards/roadmap-vote-button.tsx

@@ -9,7 +9,9 @@
 import { cn } from '../../../utils/cn';
 import { ThumbsDownClassicIcon } from '../../icons-v2-generated/shopping/thumbs-down-classic-icon';
 import { ThumbsUpClassicIcon } from '../../icons-v2-generated/shopping/thumbs-up-classic-icon';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 
 export interface RoadmapVoteButtonProps {
   voteType: 'up' | 'down';
@@ -33,11 +35,15 @@ export function RoadmapVoteButton({
   className,
 }: RoadmapVoteButtonProps) {
   const Icon = voteType === 'up' ? ThumbsUpClassicIcon : ThumbsDownClassicIcon;
+  // In a scope the button and its icon are drawn as they are; only the read count is a bar.
+  const loading = useLoadingScope();
   return (
     <Button
       variant="outline"
       onClick={onClick}
       disabled={disabled}
+      // In a loading scope the button is part of a skeleton: never focused, never announced.
+      {...(loading ? { tabIndex: -1, 'aria-hidden': true } : {})}
       leftIcon={<Icon className="h-5 w-5" color={color} />}
       className={cn(
         className,
@@ -47,7 +53,12 @@ export function RoadmapVoteButton({
         isActive && 'bg-ods-border',
       )}
     >
-      {showCount && <span className="text-h6">{count}</span>}
+      {showCount &&
+        (loading ? (
+          <TextLineSkeleton as="span" type="h6" className="inline-block w-4" />
+        ) : (
+          <span className="text-h6">{count}</span>
+        ))}
     </Button>
   );
 }

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/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,