@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -67,7 +67,7 @@ function kindIcon(kind: GitHubActivityKind, className = 'h-4 w-4') {
   }
 }
 
-function kindLabel(kind: GitHubActivityKind): string {
+export function kindLabel(kind: GitHubActivityKind): string {
   switch (kind) {
     case 'pull_request': return 'PR'
     case 'pr_review': return 'Review'
@@ -76,14 +76,14 @@ function kindLabel(kind: GitHubActivityKind): string {
   }
 }
 
-function formatActivityId(id: string, kind: GitHubActivityKind): string {
+export function formatActivityId(id: string, kind: GitHubActivityKind): string {
   if (!id) return ''
   if (kind === 'pull_request' || kind === 'pr_review') return `#${id}`
   if (/^[0-9a-f]{40}$/i.test(id)) return id.slice(0, 7)
   return id.length > 12 ? id.slice(0, 12) : id
 }
 
-function parseGithubTitle(title: string, kind: GitHubActivityKind): { display: string; reviewState: PrReviewState | null } {
+export function parseGithubTitle(title: string, kind: GitHubActivityKind): { display: string; reviewState: PrReviewState | null } {
   if (!title) return { display: '', reviewState: null }
 
   // Split prefix-tag from rest by hand instead of one giant regex.
@@ -150,6 +150,12 @@ const REVIEW_STATE_STYLE: Record<PrReviewState, { label: string; className: stri
   },
 }
 
+/** Short review-state label ("APPROVED" → "Approved") shared with the
+ *  MingoInfoCard dispatch mapping so both surfaces read identically. */
+export function reviewStateLabel(state: PrReviewState): string {
+  return (REVIEW_STATE_STYLE[state] ?? REVIEW_STATE_STYLE.COMMENTED).label
+}
+
 function ReviewStateBadge({ state, className = '' }: { state: PrReviewState; className?: string }) {
   const { label, className: paint } = REVIEW_STATE_STYLE[state] ?? REVIEW_STATE_STYLE.COMMENTED
   return (

package/src/components/chat/guide-welcome.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { Tag } from '../ui/tag'
-import { MoreActionsMenu } from '../ui/more-actions-menu'
+import { ActionsMenuDropdown } from '../ui/actions-menu'
 import { Ellipsis01Icon } from '../icons-v2-generated'
 
 // =============================================================================
@@ -174,14 +174,17 @@ export function GuideWelcome({
             </button>
           ))}
           {overflowActions.length > 0 && (
-            <MoreActionsMenu
-              ariaLabel="More quick actions"
+            <ActionsMenuDropdown
+              triggerAriaLabel="More quick actions"
               onCloseAutoFocus={(e) => e.preventDefault()}
-              items={overflowActions.map((action) => ({
-                label: action.label,
-                onClick: () => onQuickAction?.(action),
-              }))}
-              trigger={
+              groups={[{
+                items: overflowActions.map((action) => ({
+                  id: action.id,
+                  label: action.label,
+                  onClick: () => onQuickAction?.(action),
+                })),
+              }]}
+              customTrigger={
                 <button
                   type="button"
                   aria-label="More quick actions"

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

@@ -307,6 +307,16 @@ export interface UseNatsChatAdapterConfig {
 
   /** Default page size for message history pagination. Defaults to 50. */
   messagesPageSize?: number
+
+  /**
+   * Baseline model display for the composer's `<ModelDisplay>` — used as the
+   * empty-state fallback before any streaming `metadata` frame arrives (e.g.
+   * a brand-new chat). The host typically sources these from its AI-config
+   * endpoint. Live `metadata` frames refine them per-turn. NATS-only; SSE
+   * (guide) derives its own model from the stream.
+   */
+  modelProvider?: string | null
+  modelLabel?: string | null
 }
 
 /**
@@ -431,6 +441,8 @@ export function useNatsChatAdapter(
     chatTypeFilter,
     dialogsPageSize = 20,
     messagesPageSize = 50,
+    modelProvider = null,
+    modelLabel = null,
   } = config
 
   // ─── Active dialog id resolution ──────────────────────────────────────────
@@ -467,6 +479,7 @@ export function useNatsChatAdapter(
   const [dialogs, setDialogs] = useState<DialogItem[]>([])
   const [dialogsNextCursor, setDialogsNextCursor] = useState<string | null>(null)
   const [isDialogsLoading, setIsDialogsLoading] = useState<boolean>(false)
+  const [dialogsError, setDialogsError] = useState<boolean>(false)
   const [isCreatingDialog, setIsCreatingDialog] = useState<boolean>(false)
 
   // ─── Message-history pagination ───────────────────────────────────────────
@@ -480,6 +493,15 @@ export function useNatsChatAdapter(
     null,
   )
 
+  // ─── Live model metadata (from streaming `metadata` frames) ───────────────
+  // Refines the composer's model badge per-turn. Falls back to the config
+  // baseline (`modelProvider`/`modelLabel`) until the first frame lands.
+  const [liveModel, setLiveModel] = useState<{
+    provider: string | null
+    modelLabel: string | null
+    contextWindowMaxTokens: number | null
+  } | null>(null)
+
   // ─── Connection state ─────────────────────────────────────────────────────
 
   const [connectionState, setConnectionState] =
@@ -554,12 +576,29 @@ export function useNatsChatAdapter(
     onSegmentsUpdate: (segments: MessageSegment[]) => void
     onStreamStart: () => void
     onStreamEnd: () => void
+    onTokenUsage: (data: DialogTokenUsage) => void
+    onMetadata: (meta: {
+      modelDisplayName?: string
+      modelName: string
+      providerName: string
+      contextWindow: number
+    }) => void
   }> = useRef({
     onSegmentsUpdate: (segments: MessageSegment[]) => {
       setMessages((prev) => updateTrailingAssistant(prev, segments))
     },
     onStreamStart: () => setStreamingPhase('streaming'),
     onStreamEnd: () => setStreamingPhase('idle'),
+    // Live cumulative token counter for the active dialog — drives the
+    // composer's "X / Y tokens used" tail as the assistant streams.
+    onTokenUsage: (data: DialogTokenUsage) => setDialogTokenUsage(data),
+    // Per-turn model badge (provider/label/context window).
+    onMetadata: (meta) =>
+      setLiveModel({
+        provider: meta.providerName || null,
+        modelLabel: meta.modelDisplayName || meta.modelName || null,
+        contextWindowMaxTokens: meta.contextWindow || null,
+      }),
   })
 
   // Real-time chunk → segment processor. Approval handlers route through
@@ -570,6 +609,8 @@ export function useNatsChatAdapter(
       onSegmentsUpdate: (segments) => callbacksRef.current.onSegmentsUpdate(segments),
       onStreamStart: () => callbacksRef.current.onStreamStart(),
       onStreamEnd: () => callbacksRef.current.onStreamEnd(),
+      onTokenUsage: (data) => callbacksRef.current.onTokenUsage(data),
+      onMetadata: (meta) => callbacksRef.current.onMetadata(meta),
       onApprove: accumApprove,
       onReject: accumReject,
     },
@@ -679,6 +720,9 @@ export function useNatsChatAdapter(
     setMessages([])
     setMessagesNextCursor(null)
     setDialogTokenUsage(null)
+    // Clear per-dialog live model metadata too — otherwise the composer briefly
+    // shows the previous dialog's provider/model until the next chunk streams.
+    setLiveModel(null)
     setStreamingPhase('idle')
     // No load runs when there's no active dialog, so clear the flag here;
     // otherwise the superseded load's guarded `finally` leaves it stuck on.
@@ -740,10 +784,16 @@ export function useNatsChatAdapter(
 
   // ─── Dialog list management (managed-dialog mode) ─────────────────────────
 
+  // Forward-declared so `loadDialogsPage` can reset the initial-load guard on
+  // a first-page failure (enabling retry / auto-retry on re-activation).
+  const initialDialogsLoadedRef = useRef(false)
+
   const loadDialogsPage = useCallback(
     async (cursor?: string): Promise<void> => {
       if (!fetchDialogs) return
       setIsDialogsLoading(true)
+      // Clear a prior first-page error when (re)loading the first page.
+      if (cursor === undefined) setDialogsError(false)
       try {
         const result = await fetchDialogs({
           cursor,
@@ -757,6 +807,13 @@ export function useNatsChatAdapter(
         }
       } catch (err) {
         console.error('[useNatsChatAdapter] fetchDialogs failed:', err)
+        // Only the FIRST page failing is a "can't show the list" error — a
+        // pagination failure keeps the already-loaded list intact. Flag it and
+        // release the initial-load guard so a retry (or re-activation) re-runs.
+        if (cursor === undefined) {
+          setDialogsError(true)
+          initialDialogsLoadedRef.current = false
+        }
       } finally {
         setIsDialogsLoading(false)
       }
@@ -764,8 +821,12 @@ export function useNatsChatAdapter(
     [fetchDialogs, dialogsPageSize],
   )
 
+  // Retry the initial dialog-list load after a failure.
+  const reloadDialogs = useCallback(() => {
+    void loadDialogsPage()
+  }, [loadDialogsPage])
+
   // Initial dialog list load.
-  const initialDialogsLoadedRef = useRef(false)
   useEffect(() => {
     if (!fetchDialogs) return
     if (!active) return
@@ -973,12 +1034,17 @@ export function useNatsChatAdapter(
       clearMessages,
       discussRef,
       displayRef,
-      // SSE-only telemetry — null in NATS mode.
-      currentProvider: null,
-      currentModelLabel: null,
-      currentContextWindowMaxTokens: null,
-      currentInputTokens: null,
-      currentOutputTokens: null,
+      // Model badge + token usage for the composer's `<ModelDisplay>`.
+      // Model: live `metadata` frame → config baseline (host AI-config).
+      // Tokens: live `token_usage` frame / dialog snapshot (`dialogTokenUsage`).
+      // contextWindow uses the dialog's `contextSize` (the "X / Y" denominator,
+      // matching the /mingo page). cacheHitRate/breakdown are SSE-only → null.
+      currentProvider: liveModel?.provider ?? modelProvider ?? null,
+      currentModelLabel: liveModel?.modelLabel ?? modelLabel ?? null,
+      currentContextWindowMaxTokens:
+        dialogTokenUsage?.contextSize ?? liveModel?.contextWindowMaxTokens ?? null,
+      currentInputTokens: dialogTokenUsage?.inputTokensSize ?? null,
+      currentOutputTokens: dialogTokenUsage?.outputTokensSize ?? null,
       currentCacheHitRatePct: null,
       currentUsageBreakdown: null,
       // Dialog management
@@ -990,6 +1056,8 @@ export function useNatsChatAdapter(
       renameDialog,
       archiveDialog,
       isDialogsLoading: isDialogsLoading || isCreatingDialog,
+      dialogsError,
+      reloadDialogs,
       isMessagesLoading,
       hasMoreDialogs,
       loadMoreDialogs,
@@ -1020,6 +1088,8 @@ export function useNatsChatAdapter(
       renameDialog,
       archiveDialog,
       isDialogsLoading,
+      dialogsError,
+      reloadDialogs,
       isCreatingDialog,
       isMessagesLoading,
       hasMoreDialogs,
@@ -1029,6 +1099,9 @@ export function useNatsChatAdapter(
       approveRequest,
       rejectRequest,
       dialogTokenUsage,
+      liveModel,
+      modelProvider,
+      modelLabel,
       connectionState,
     ],
   )

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

@@ -14,6 +14,7 @@
  */
 
 import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { embedAuthedFetch } from "../../../utils/embed-authed-fetch";
 import type {
   SlashCommandActionId,
@@ -113,3 +114,41 @@ export function useSlashCommands(
 
   return { commands, loading };
 }
+
+/**
+ * The full slash-command registry (empty-prefix fetch), shared via
+ * react-query so every consumer in one chat surface dedupes to a SINGLE
+ * network request.
+ *
+ * Keyed on `commandsUrl` ALONE — the request sends no `source` param (the
+ * hub resolves source server-side), so the URL fully determines the
+ * response. Both the onboarding-card list in `<EmbeddableChat>` and the
+ * SSE adapter's `displayRef` table lookup read from this one cache entry
+ * instead of each firing their own `fetchSlashCommands('')`.
+ *
+ * `staleTime`/`gcTime: Infinity` → static per session, so toggling modes
+ * or remounting the (close-on-unmount) drawer reads from cache, never
+ * refetches.
+ *
+ * `enabled` gates the live fetch: pass `activeMode === 'guide'` (or the
+ * SSE adapter's `active` flag) so opening the panel in Mingo mode does
+ * NOT hit the commands endpoint at all.
+ */
+export function useSlashCommandRegistry(
+  commandsUrl: string,
+  options?: { enabled?: boolean },
+): { commands: SlashCommandSummary[]; loading: boolean; loaded: boolean } {
+  const query = useQuery({
+    queryKey: ["chat-slash-commands", commandsUrl],
+    queryFn: ({ signal }) => fetchSlashCommands("", signal, commandsUrl),
+    enabled: options?.enabled ?? true,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+  return {
+    commands: query.data ?? [],
+    loading: query.isLoading,
+    // "Loaded" = the fetch has settled, or it isn't running (disabled).
+    loaded: !query.isLoading,
+  };
+}

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

@@ -45,7 +45,7 @@ import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context'
 import type { ChatRef } from '../chat-ref.types'
 import { buildChatRefKey } from '../types/chat.types'
 import type { MessageSegment } from '../types/message.types'
-import { fetchSlashCommands, type SlashCommandSummary } from './use-slash-commands'
+import { useSlashCommandRegistry, type SlashCommandSummary } from './use-slash-commands'
 import { getChatProxyAuth } from '../utils/chat-proxy-auth-storage'
 import { chatAuthedFetch } from '../utils/chat-authed-fetch'
 import { parseScrollAnchor, type ScrollAnchor } from '../utils/scroll-anchor'
@@ -170,6 +170,18 @@ export interface UseSseChatAdapterOptions {
   tableIdForDocumentType?: (documentType: string) => string | null
 }
 
+export interface UseSseChatAdapterRuntimeOptions {
+  /**
+   * When `false` the adapter skips its background slash-command registry
+   * fetch (used to hydrate the `displayRef` table lookup). Mirrors the
+   * NATS adapter's `active` gate: `useUnifiedChat` passes `false` while
+   * Guide mode is configured-but-not-active, so opening the panel in
+   * Mingo mode does NOT hit the commands endpoint. Default `true` so
+   * standalone callers keep the eager prefetch.
+   */
+  active?: boolean
+}
+
 // =============================================================================
 // Internal helpers
 // =============================================================================
@@ -679,7 +691,9 @@ function savePersistedChat(source: DocSource, state: PersistedChatState) {
  */
 export function useSseChatAdapter(
   options?: UseSseChatAdapterOptions,
+  runtimeOptions: UseSseChatAdapterRuntimeOptions = {},
 ): UnifiedChatState {
+  const { active = true } = runtimeOptions
   // Chat-specific code REQUIRES a runtime — the lib's `<HubRuntimeProvider>`
   // (hub) / embedder's provider must wrap the tree.
   const runtime = useRequiredChatRuntime()
@@ -742,54 +756,41 @@ export function useSseChatAdapter(
     ],
   )
 
-  // Per-source tableId → slash-command-id lookup. Hydrated from the
-  // commands endpoint on mount. Used by `displayRef` to translate an
+  // Per-source tableId → slash-command-id lookup, derived from the shared
+  // slash-command registry. Used by `displayRef` to translate an
   // inline-card's Display click into a `/<cmd> display "<value>"`
   // invocation, picking the canonical command for the row's RAG table.
-  const [cmdIdByTableId, setCmdIdByTableId] = useState<Map<string, string>>(
-    () => new Map(),
-  )
+  //
+  // Reads from the SAME react-query cache entry as `<EmbeddableChat>`'s
+  // onboarding-card list (keyed on `commandsUrl`), so Guide mode fetches
+  // `commands` ONCE. Gated on `active` so a Mingo-only panel — where this
+  // adapter is mounted but idle — never hits the endpoint.
   const commandsUrl = runtime.endpoints.commandsUrl
-  useEffect(() => {
-    let cancelled = false
-    const ctrl = new AbortController()
-    fetchSlashCommands('', ctrl.signal, commandsUrl)
-      .then((commands) => {
-        if (cancelled) return
-        const buckets = new Map<string, SlashCommandSummary[]>()
-        for (const cmd of commands) {
-          if (!cmd.primarySourceId) continue
-          const arr = buckets.get(cmd.primarySourceId) ?? []
-          arr.push(cmd)
-          buckets.set(cmd.primarySourceId, arr)
-        }
-        const map = new Map<string, string>()
-        for (const [tableId, cmds] of buckets) {
-          const display = cmds.find((c) => c.actions.some((a) => a.id === 'display'))
-          const picked =
-            display ??
-            [...cmds].sort((a, b) => {
-              const ao = a.displayOrder ?? Number.POSITIVE_INFINITY
-              const bo = b.displayOrder ?? Number.POSITIVE_INFINITY
-              return ao - bo
-            })[0]
-          if (picked) map.set(tableId, picked.id)
-        }
-        setCmdIdByTableId(map)
-      })
-      .catch((err) => {
-        if (!cancelled && (err as Error)?.name !== 'AbortError') {
-          console.warn(
-            '[useSseChatAdapter] failed to fetch slash commands for displayRef:',
-            err,
-          )
-        }
-      })
-    return () => {
-      cancelled = true
-      ctrl.abort()
+  const { commands: slashCommands } = useSlashCommandRegistry(commandsUrl, {
+    enabled: active,
+  })
+  const cmdIdByTableId = useMemo(() => {
+    const buckets = new Map<string, SlashCommandSummary[]>()
+    for (const cmd of slashCommands) {
+      if (!cmd.primarySourceId) continue
+      const arr = buckets.get(cmd.primarySourceId) ?? []
+      arr.push(cmd)
+      buckets.set(cmd.primarySourceId, arr)
+    }
+    const map = new Map<string, string>()
+    for (const [tableId, cmds] of buckets) {
+      const display = cmds.find((c) => c.actions.some((a) => a.id === 'display'))
+      const picked =
+        display ??
+        [...cmds].sort((a, b) => {
+          const ao = a.displayOrder ?? Number.POSITIVE_INFINITY
+          const bo = b.displayOrder ?? Number.POSITIVE_INFINITY
+          return ao - bo
+        })[0]
+      if (picked) map.set(tableId, picked.id)
     }
-  }, [source, commandsUrl])
+    return map
+  }, [slashCommands])
 
   // Persist on every messages change. Sources + sendCount live in refs,
   // so we read their current values at write time.
@@ -1074,6 +1075,9 @@ export function useSseChatAdapter(
     renameDialog: noopRenameDialog,
     archiveDialog: noopArchiveDialog,
     isDialogsLoading: false,
+    // SSE/guide has no server-side dialog list — never errors, nothing to retry.
+    dialogsError: false,
+    reloadDialogs: noopAsync,
     isMessagesLoading: false,
     hasMoreDialogs: false,
     loadMoreDialogs: noopAsync,

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

@@ -60,6 +60,19 @@ export interface UseUnifiedChatModes {
 export interface UseUnifiedChatOptions {
   modes: UseUnifiedChatModes
   activeMode: ChatMode
+
+  /**
+   * Pre-built Mingo-mode state, supplied by the host instead of letting
+   * the internal `useNatsChatAdapter` own it. When provided AND the active
+   * mode is `'mingo'`, this object is used verbatim as the active state and
+   * the internal NATS adapter stays idle (the host should also omit
+   * `modes.mingo` so no live subscription is opened here).
+   *
+   * This is the seam that lets a host keep chat data/streaming in its own
+   * store + cache (so it survives the panel unmounting) rather than in this
+   * hook's local React state. Guide mode is unaffected.
+   */
+  mingoStateOverride?: UnifiedChatState
 }
 
 // =============================================================================
@@ -88,7 +101,7 @@ function createDisabledNatsConfig(): UseNatsChatAdapterConfig {
 export function useUnifiedChat(
   options: UseUnifiedChatOptions,
 ): UnifiedChatState {
-  const { modes, activeMode } = options
+  const { modes, activeMode, mingoStateOverride } = options
 
   // The mingo config object identity matters — `useNatsChatAdapter`
   // wires its `dialogId`/url/publish into deps. Stabilise the disabled
@@ -105,18 +118,21 @@ export function useUnifiedChat(
   const sseActive = activeMode === 'guide' && modes.guide !== undefined
   const natsActive = activeMode === 'mingo' && modes.mingo !== undefined
 
-  const sseState = useSseChatAdapter(modes.guide ?? EMPTY_SSE_OPTIONS)
+  const sseState = useSseChatAdapter(modes.guide ?? EMPTY_SSE_OPTIONS, {
+    active: sseActive,
+  })
   const natsState = useNatsChatAdapter(
     modes.mingo ?? disabledNatsRef.current,
     { active: natsActive },
   )
 
-  // Mark `sseActive` as used — SSE adapter is request-response so it
-  // doesn't currently consume an `active` gate. Keeping the flag here
-  // documents intent + leaves the door open for future SSE backgrounding.
-  void sseActive
-
-  const activeState = activeMode === 'guide' ? sseState : natsState
+  // Host-injected Mingo state wins when present: the internal `natsState`
+  // still runs (rules of hooks) but is idle (no `modes.mingo` → not active),
+  // and we hand the host's store-backed state straight through as active.
+  const activeState =
+    activeMode === 'guide'
+      ? sseState
+      : (mingoStateOverride ?? natsState)
 
   // Re-wrap so the returned identity is stable for the active state.
   // Consumers shouldn't see the inactive adapter's state at all.
@@ -169,6 +185,10 @@ export function useUnifiedChat(
     () => activeState.loadMoreDialogs(),
     [activeState],
   )
+  const reloadDialogs = useCallback(
+    () => activeState.reloadDialogs(),
+    [activeState],
+  )
   const loadMoreMessages = useCallback(
     () => activeState.loadMoreMessages(),
     [activeState],
@@ -209,6 +229,8 @@ export function useUnifiedChat(
       renameDialog,
       archiveDialog,
       isDialogsLoading: activeState.isDialogsLoading,
+      dialogsError: activeState.dialogsError,
+      reloadDialogs,
       isMessagesLoading: activeState.isMessagesLoading,
       hasMoreDialogs: activeState.hasMoreDialogs,
       loadMoreDialogs,
@@ -234,6 +256,7 @@ export function useUnifiedChat(
       renameDialog,
       archiveDialog,
       loadMoreDialogs,
+      reloadDialogs,
       loadMoreMessages,
       approveRequest,
       rejectRequest,