@flamingo-stack/openframe-frontend-core 0.0.217 → 0.0.218

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

@@ -14,6 +14,7 @@
  */
 
 import { useEffect, useState } from "react";
+import { embedAuthedFetch } from "../../../utils/embed-authed-fetch";
 import type {
   SlashCommandActionId,
   SlashCommandSummaryAction,
@@ -44,6 +45,12 @@ export type {
  * (e.g. `https://hub.openframe.ai/api/commands` → the base arg is
  * ignored).
  *
+ * Auth: rides on `embedAuthedFetch` (same bearer-act-as + 401 self-heal
+ * as the chat stream / identity / attachment calls) so a host that runs
+ * proxy-impersonation or a refresh-capable auth adapter gets its creds
+ * attached here too — no host-side `window.fetch` patch required. Hosts
+ * with no adapter fall through to cookie auth unchanged.
+ *
  * Returns the parsed `commands` array; on any non-2xx (auth,
  * rate-limit, chat-disabled) returns an empty array — the autocomplete
  * UI silently shows no suggestions rather than surfacing 401/403/429
@@ -56,7 +63,9 @@ export async function fetchSlashCommands(
 ): Promise<SlashCommandSummary[]> {
   const url = new URL(commandsUrl, window.location.origin);
   if (prefix) url.searchParams.set("q", prefix);
-  const res = await fetch(url.toString(), { signal });
+  // `headers: {}` opts out of the default `Content-Type: application/json`
+  // — this is a bare GET with no body, so no content-type is needed.
+  const res = await embedAuthedFetch(url.toString(), { signal, headers: {} });
   if (!res.ok) return [];
   const data = (await res.json()) as { commands?: SlashCommandSummary[] };
   return data.commands ?? [];

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

@@ -57,6 +57,7 @@ import type {
   UnifiedSendMessageOptions,
   StreamingPhase,
 } from '../types/unified-chat-state.types'
+import type { DialogItem } from '../types/component.types'
 
 // =============================================================================
 // Public types
@@ -1054,5 +1055,49 @@ export function useSseChatAdapter(
     /** Cross-call usage breakdown (Haiku rewriter/classifier/summarizer
      *  token counts). null until the trailing usage frame lands. */
     currentUsageBreakdown: latestMeta?.breakdown ?? null,
+    // ─── Dialog management — stubs for v1 ────────────────────────────────
+    // Guide mode currently keeps its history in `localStorage` opaquely
+    // under the hood (`runtime.source` namespaced key). Surfacing that
+    // history as a structured dialog list is a follow-up; for now the
+    // shape is satisfied with empty defaults so the unified contract
+    // type-checks and EmbeddableChat hides sidebar affordances when
+    // `dialogs.length === 0`.
+    dialogs: SSE_EMPTY_DIALOGS,
+    activeDialogId: null,
+    selectDialog: noopSelectDialog,
+    startNewDialog: noopStartNewDialog,
+    deleteDialog: noopDeleteDialog,
+    isDialogsLoading: false,
+    isMessagesLoading: false,
+    hasMoreDialogs: false,
+    loadMoreDialogs: noopAsync,
+    hasMoreMessages: false,
+    loadMoreMessages: noopAsync,
+    approveRequest: noopApproveRequest,
+    rejectRequest: noopRejectRequest,
+    dialogTokenUsage: null,
+    connectionState: 'connected' as const,
   }
 }
+
+// ─── Stable no-op references for the Guide-mode dialog-management stubs ──
+// Plain module-scope constants so the adapter's return identity stays
+// stable across renders — consumers that memo on these fields don't get
+// spurious re-runs.
+const SSE_EMPTY_DIALOGS: DialogItem[] = []
+const noopSelectDialog = (_id: string | null): void => {
+  /* Guide mode has no managed dialog list yet */
+}
+const noopStartNewDialog = async (): Promise<string | null> => null
+const noopDeleteDialog = async (_id: string): Promise<void> => {
+  /* no-op until Guide localStorage history is exposed */
+}
+const noopAsync = async (): Promise<void> => {
+  /* no-op pagination stub */
+}
+const noopApproveRequest = async (_id: string): Promise<void> => {
+  /* Guide mode has no tool-call approval workflow */
+}
+const noopRejectRequest = async (_id: string, _reason?: string): Promise<void> => {
+  /* Guide mode has no tool-call approval workflow */
+}

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

@@ -141,6 +141,40 @@ export function useUnifiedChat(
     [activeState],
   )
 
+  // Dialog-management forwards — one thin wrapper per action so the
+  // returned identity stays stable as long as the active adapter's
+  // identity does. We don't recreate per-call to avoid spurious child
+  // re-renders downstream.
+  const selectDialog = useCallback(
+    (id: string | null) => activeState.selectDialog(id),
+    [activeState],
+  )
+  const startNewDialog = useCallback(
+    () => activeState.startNewDialog(),
+    [activeState],
+  )
+  const deleteDialog = useCallback(
+    (id: string) => activeState.deleteDialog(id),
+    [activeState],
+  )
+  const loadMoreDialogs = useCallback(
+    () => activeState.loadMoreDialogs(),
+    [activeState],
+  )
+  const loadMoreMessages = useCallback(
+    () => activeState.loadMoreMessages(),
+    [activeState],
+  )
+  const approveRequest = useCallback(
+    (requestId: string) => activeState.approveRequest(requestId),
+    [activeState],
+  )
+  const rejectRequest = useCallback(
+    (requestId: string, reason?: string) =>
+      activeState.rejectRequest(requestId, reason),
+    [activeState],
+  )
+
   return useMemo<UnifiedChatState>(
     () => ({
       messages: activeState.messages,
@@ -158,6 +192,24 @@ export function useUnifiedChat(
       currentOutputTokens: activeState.currentOutputTokens,
       currentCacheHitRatePct: activeState.currentCacheHitRatePct,
       currentUsageBreakdown: activeState.currentUsageBreakdown,
+      // Dialog management (forwarded from active adapter)
+      dialogs: activeState.dialogs,
+      activeDialogId: activeState.activeDialogId,
+      selectDialog,
+      startNewDialog,
+      deleteDialog,
+      isDialogsLoading: activeState.isDialogsLoading,
+      isMessagesLoading: activeState.isMessagesLoading,
+      hasMoreDialogs: activeState.hasMoreDialogs,
+      loadMoreDialogs,
+      hasMoreMessages: activeState.hasMoreMessages,
+      loadMoreMessages,
+      // Approvals
+      approveRequest,
+      rejectRequest,
+      // Token usage + connection
+      dialogTokenUsage: activeState.dialogTokenUsage,
+      connectionState: activeState.connectionState,
     }),
     [
       activeState,
@@ -166,6 +218,13 @@ export function useUnifiedChat(
       clearMessages,
       discussRef,
       displayRef,
+      selectDialog,
+      startNewDialog,
+      deleteDialog,
+      loadMoreDialogs,
+      loadMoreMessages,
+      approveRequest,
+      rejectRequest,
     ],
   )
 }

package/src/components/chat/types/unified-chat-state.types.ts

@@ -21,6 +21,44 @@ import type { ScrollAnchor } from './message.types'
 import type { ChatRef } from '../chat-ref.types'
 import type { ChatSource } from '../hooks/use-sse-chat-adapter'
 import type { ChatAttachment } from '../utils/chat-attachment-markdown'
+import type { DialogItem } from './component.types'
+
+// ─── Per-dialog token usage (Mingo backend telemetry) ────────────────────────
+
+/**
+ * Token usage snapshot for the active Mingo dialog, hydrated from the
+ * backend's `dialog.tokenUsage` GraphQL field. Mirrors the shape returned
+ * by the openframe `dialogs` GraphQL endpoint so hosts can pass it through
+ * `fetchDialogMessages` without re-mapping.
+ *
+ * Null when no Mingo dialog is active, when the backend hasn't reported
+ * usage yet, or when the active mode is Guide (SSE telemetry surfaces via
+ * `currentInputTokens`/`currentOutputTokens` instead).
+ */
+export interface DialogTokenUsage {
+  /** Backend chat-type discriminator, e.g. `ADMIN_AI_CHAT`. Free-form. */
+  chatType?: string
+  /** Total input tokens consumed so far in this dialog. */
+  inputTokensSize: number
+  /** Total output tokens emitted so far in this dialog. */
+  outputTokensSize: number
+  /** Sum of input + output. May be > input + output when the backend
+   *  counts cache reads in a separate bucket — trust the backend value. */
+  totalTokensSize: number
+  /** Current LLM context-window occupancy in tokens — what the model
+   *  has loaded right now, not the cumulative dialog sum. */
+  contextSize?: number
+}
+
+// ─── Connection state (transport-level) ──────────────────────────────────────
+
+/**
+ * High-level transport connection status. Drives any UI affordance that
+ * needs to communicate "live tail is/isn't healthy" to the user. SSE/Guide
+ * adapter currently reports `'connected'` whenever a turn isn't streaming
+ * — the SSE side is request-response and has no long-lived socket.
+ */
+export type ChatConnectionState = 'connected' | 'connecting' | 'disconnected'
 
 // ─── Streaming phase (unified across transports) ─────────────────────────────
 
@@ -212,4 +250,82 @@ export interface UnifiedChatState {
    * arrives. Always null in Mingo mode.
    */
   currentUsageBreakdown: UnifiedUsageBreakdown | null
+
+  // ─── Dialog management (Mingo: backend; Guide: localStorage) ──────────────
+  //
+  // All fields below are optional in practice: a transport adapter that
+  // doesn't manage multi-dialog history (older `useNatsChatAdapter`
+  // configs, the Guide adapter with localStorage disabled) returns the
+  // empty/null defaults so existing consumers keep working unchanged.
+  // Callers gate UI on `dialogs.length > 0` or `activeDialogId != null`.
+
+  /**
+   * History of dialogs available for the active mode. Mingo: paginated
+   * from the openframe backend. Guide: list of recent threads from
+   * localStorage. Empty when the active adapter doesn't expose dialog
+   * management.
+   */
+  dialogs: DialogItem[]
+
+  /** Currently-selected dialog id, or `null` when no dialog is active
+   *  (draft state — "start a new conversation"). */
+  activeDialogId: string | null
+
+  /** Switch the panel to an existing dialog. Idempotent — selecting the
+   *  active id is a no-op. Pass `null` to drop back to draft state. */
+  selectDialog: (id: string | null) => void
+
+  /** Allocate a fresh dialog on the backend (Mingo) or in localStorage
+   *  (Guide) and switch to it. Returns the new dialog id. When the
+   *  adapter doesn't support creation, resolves to `null`. */
+  startNewDialog: () => Promise<string | null>
+
+  /** Delete a dialog from history. No-op when the adapter doesn't
+   *  expose `deleteDialog` (Guide localStorage always supports it;
+   *  Mingo gates on the host-provided callback). */
+  deleteDialog: (id: string) => Promise<void>
+
+  /** True while the dialog list is being fetched for the first time. */
+  isDialogsLoading: boolean
+
+  /** True while message history for the active dialog is being fetched. */
+  isMessagesLoading: boolean
+
+  /** Whether more dialogs remain on the server (Mingo cursor pagination). */
+  hasMoreDialogs: boolean
+
+  /** Fetch the next page of dialogs. No-op when `hasMoreDialogs` is false. */
+  loadMoreDialogs: () => Promise<void>
+
+  /** Whether more historical messages remain in the active dialog. */
+  hasMoreMessages: boolean
+
+  /** Fetch the next page of historical messages for the active dialog. */
+  loadMoreMessages: () => Promise<void>
+
+  // ─── Approval mutations (Mingo agent tool-call workflow) ──────────────────
+
+  /** Approve an in-flight tool-call request. Errors surface via the
+   *  host-supplied toast in the callback config (lib does not own UI). */
+  approveRequest: (requestId: string) => Promise<void>
+
+  /** Reject an in-flight tool-call request. Optional `reason` is
+   *  forwarded to the backend when supported. */
+  rejectRequest: (requestId: string, reason?: string) => Promise<void>
+
+  // ─── Per-dialog token usage (Mingo only) ──────────────────────────────────
+
+  /** Cumulative token usage for the active Mingo dialog. Null in Guide
+   *  mode or when the backend hasn't reported usage yet. Per-turn
+   *  metadata (`currentInputTokens` etc.) is orthogonal — that fires on
+   *  every SSE `message_start`, while this hydrates from the dialog
+   *  fetch + live `TOKEN_USAGE` events. */
+  dialogTokenUsage: DialogTokenUsage | null
+
+  // ─── Connection state ─────────────────────────────────────────────────────
+
+  /** High-level transport connection state. Drives reconnect UI in
+   *  Mingo mode; always `'connected'` in Guide mode (SSE is request-
+   *  response and has no persistent socket to monitor). */
+  connectionState: ChatConnectionState
 }

package/src/components/navigation/app-header.tsx

@@ -10,6 +10,7 @@ import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui'
 import { HeaderButton } from './header-button'
 import { HeaderGlobalSearch } from './header-global-search'
+import { HeaderMingoButton } from './header-mingo-button'
 import { HeaderOrganizationFilter } from './header-organization-filter'
 
 export interface AppHeaderProps {
@@ -21,6 +22,13 @@ export interface AppHeaderProps {
   onOrgChange?: (id: string) => void
   showNotifications?: boolean
   unreadCount?: number
+  /** Render the "Mingo AI" launcher button (drawer-style trigger for an
+   *  in-layout `AppLayoutDrawer` hosting the chat panel). Defaults to off. */
+  showMingoAI?: boolean
+  /** Click handler for the Mingo AI button — typically toggles the drawer. */
+  onMingoAI?: () => void
+  /** Whether the Mingo drawer is currently open (visually pressed state). */
+  isMingoAIActive?: boolean
   // User block
   showUser?: boolean
   userName?: string
@@ -49,6 +57,9 @@ export const AppHeader = React.memo(function AppHeader({
   onOrgChange,
   showNotifications,
   unreadCount = 0,
+  showMingoAI = false,
+  onMingoAI,
+  isMingoAIActive = false,
   showUser,
   userName,
   userEmail,
@@ -118,6 +129,18 @@ export const AppHeader = React.memo(function AppHeader({
         />
       )}
 
+      {/* Mingo AI launcher — placed to the LEFT of notifications so the user
+          menu cluster (notifications → avatar) stays anchored to the right. */}
+      {showMingoAI && (
+        <HeaderMingoButton
+          onClick={onMingoAI}
+          isActive={isMingoAIActive}
+          iconOnly={!isMdUp}
+          disabled={disabled || !onMingoAI}
+          className={dimmedClass}
+        />
+      )}
+
       {/* Notifications button */}
       {showNotifications && (
         <NotificationsHeaderButton