@flamingo-stack/openframe-frontend-core 0.0.692 → 0.0.693-snapshot.20261002120603

package/dist/{chunk-Y7ZEVTLC.js → chunk-BW6YBATM.js}

@@ -16,13 +16,12 @@ import {
   useDebounce,
   useHeaderHeight,
   useIsTruncated,
-  useIsomorphicLayoutEffect,
   useMarqueeEngine,
   useMediaQuery,
   useNearViewport,
   useResetOnPageHidden,
   useSuppressCloneFocus
-} from "./chunk-JUNOY5HK.js";
+} from "./chunk-2HX6AADM.js";
 import {
   useRouter
 } from "./chunk-XXMHLZ3Y.js";
@@ -198,7 +197,7 @@ import {
   trustFrameworkMonitoringEntry,
   trustFrameworksSummary,
   useCoverImageFallback
-} from "./chunk-2YVTGPM7.js";
+} from "./chunk-XZILGCXJ.js";
 import {
   next_image_default
 } from "./chunk-MDKCTSDS.js";
@@ -213,8 +212,9 @@ import {
   getPlatformDisplayName,
   setEmbedProxyAuth,
   useAuthedAssetSrc,
-  useAuthedImageSrc
-} from "./chunk-UVUNBXS6.js";
+  useAuthedImageSrc,
+  useIsomorphicLayoutEffect
+} from "./chunk-7IINE3MK.js";
 import {
   OpenFrameLogo
 } from "./chunk-OTX6XNSA.js";
@@ -3785,6 +3785,25 @@ function resolveTextSizeConfig(config) {
 // src/components/ui/markdown/engine.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var NO_BROKEN_LINKS = [];
+var BARE_FENCE_LANGUAGE = "code";
+function rehypeLabelBareFences() {
+  const visit4 = (node) => {
+    for (const child of node.children) {
+      if (child.type !== "element") continue;
+      if (child.tagName === "pre") {
+        for (const code of child.children) {
+          if (code.type !== "element" || code.tagName !== "code") continue;
+          const classes = Array.isArray(code.properties.className) ? code.properties.className : [];
+          if (!classes.some((c) => String(c).startsWith("language-"))) {
+            code.properties.className = [...classes, `language-${BARE_FENCE_LANGUAGE}`];
+          }
+        }
+      }
+      visit4(child);
+    }
+  };
+  return (tree) => visit4(tree);
+}
 var StreamingBlockRenderer = memo(function StreamingBlockRendererImpl({
   text: text2,
   remarkPlugins,
@@ -3834,19 +3853,27 @@ var MarkdownEngineImpl = ({
     () => [remarkGfm, remarkBreaks, ...additionalRemarkPlugins ?? []],
     [additionalRemarkPlugins]
   );
-  const rehypePlugins = useMemo4(() => {
+  const { rehypePlugins, liveRehypePlugins } = useMemo4(() => {
     const schema = buildSanitizeSchema({
       extraAllowedHtmlTags: extraTagsKey ? extraTagsKey.split("|") : void 0
     });
-    return [
-      // ORDER MATTERS: rehype-raw parses embedded raw HTML into HAST;
-      // rehypeSanitize is the allow-list boundary; rehypeStripUnsafe is
-      // defense-in-depth (srcset scanning, iframe[srcdoc]); highlight last.
-      rehypeRaw,
-      [rehypeSanitize, schema],
-      rehypeStripUnsafe,
-      [rehypeHighlight, { detect: true, ignoreMissing: true }]
+    const safe = [rehypeRaw, [rehypeSanitize, schema], rehypeStripUnsafe, rehypeLabelBareFences];
+    const highlighted = [
+      ...safe,
+      // No language detection: it ran highlightAuto over every registered
+      // grammar for each unlabelled fence (~2.5x the cost of opening a
+      // thread) and often guessed wrong (PowerShell shown as "VBNET").
+      [rehypeHighlight, { plainText: [BARE_FENCE_LANGUAGE] }]
     ];
+    return {
+      rehypePlugins: highlighted,
+      // The streaming tail re-parses on every chunk, and a code fence being
+      // typed is one tail block — highlighting it every chunk was the
+      // costliest step of a streamed reply. It is highlighted once it
+      // completes: every block before the tail and the final parse use
+      // `rehypePlugins`.
+      liveRehypePlugins: safe
+    };
   }, [extraTagsKey]);
   const components = useMemo4(
     () => ({
@@ -3872,7 +3899,7 @@ var MarkdownEngineImpl = ({
     // aria-live: readers announce coherent appended chunks, not per-token
     // spam (polite + additions). Streaming caret/pulse affordances live in
     // chat components and honor prefers-reduced-motion there.
-    /* @__PURE__ */ jsx15("div", { "aria-live": "polite", "aria-relevant": "additions text", children: streamingBlocks.map((block) => (
+    /* @__PURE__ */ jsx15("div", { "aria-live": "polite", "aria-relevant": "additions text", children: streamingBlocks.map((block, i) => (
       // Each unit is parsed on its own, so hast positions restart at 1;
       // the offset maps them back onto the document-wide heading-id map.
       /* @__PURE__ */ jsx15(HeadingLineOffsetContext.Provider, { value: block.startLine - 1, children: block.memoizable ? /* @__PURE__ */ jsx15(
@@ -3887,7 +3914,7 @@ var MarkdownEngineImpl = ({
         ReactMarkdown,
         {
           remarkPlugins,
-          rehypePlugins,
+          rehypePlugins: i === streamingBlocks.length - 1 ? liveRehypePlugins : rehypePlugins,
           urlTransform: cardAwareUrlTransform,
           components,
           children: block.text
@@ -5406,50 +5433,40 @@ var ChatTypingIndicator = forwardRef14(
       md: "h-6",
       lg: "h-8"
     };
-    const dotAnimation = `
-      @keyframes dotPulse {
-        0%, 80%, 100% {
-          transform: scale(1);
-          opacity: 0.7;
-        }
-        40% {
-          transform: scale(1.5);
-          opacity: 1;
-        }
-      }
-    `;
     return /* @__PURE__ */ jsxs19("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: [
-      /* @__PURE__ */ jsx28("style", { dangerouslySetInnerHTML: { __html: dotAnimation } }),
       showText && /* @__PURE__ */ jsx28("span", { className: "text-ods-text-secondary text-h6", children: "Assistant is typing" }),
       /* @__PURE__ */ jsxs19("div", { className: cn("inline-flex items-center justify-center gap-1", containerSizeClasses[size2]), children: [
         /* @__PURE__ */ jsx28(
           "div",
           {
-            className: cn(dotSizeClasses[size2], "rounded-full", dotClassName || "bg-ods-text-primary"),
-            style: {
-              animation: "dotPulse 1.4s ease-in-out infinite",
-              animationDelay: "0ms"
-            }
+            className: cn(
+              dotSizeClasses[size2],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "0ms" }
           }
         ),
         /* @__PURE__ */ jsx28(
           "div",
           {
-            className: cn(dotSizeClasses[size2], "rounded-full", dotClassName || "bg-ods-text-primary"),
-            style: {
-              animation: "dotPulse 1.4s ease-in-out infinite",
-              animationDelay: "200ms"
-            }
+            className: cn(
+              dotSizeClasses[size2],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "200ms" }
           }
         ),
         /* @__PURE__ */ jsx28(
           "div",
           {
-            className: cn(dotSizeClasses[size2], "rounded-full", dotClassName || "bg-ods-text-primary"),
-            style: {
-              animation: "dotPulse 1.4s ease-in-out infinite",
-              animationDelay: "400ms"
-            }
+            className: cn(
+              dotSizeClasses[size2],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "400ms" }
           }
         )
       ] })
@@ -7710,7 +7727,7 @@ var ChatMessageEnhanced = forwardRef17(
                   "span",
                   {
                     className: cn(
-                      "flex-1 !font-mono !font-medium text-h3",
+                      "min-w-0 flex-1 truncate !font-mono !font-medium text-h3",
                       authorType === "system" ? "text-ods-open-yellow" : authorType === "admin" ? "text-ods-open-yellow" : authorType === "mingo" ? "text-ods-flamingo-cyan" : authorType === "fae" ? "text-ods-flamingo-pink" : "text-ods-text-secondary"
                     ),
                     children: [
@@ -7917,11 +7934,6 @@ function ChatMessageListSkeleton({
 // src/components/chat/cycling-phrase.tsx
 import { useEffect as useEffect7, useMemo as useMemo10, useState as useState13 } from "react";
 import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
-var BLINK_KEYFRAMES = `
-  @keyframes cyclingCursorBlink {
-    50% { opacity: 0; }
-  }
-`;
 function CyclingPhrase({ words, className, charMs = 60, holdMs = 4500 }) {
   const [wordIndex, setWordIndex] = useState13(0);
   const [text2, setText] = useState13("");
@@ -7962,19 +7974,17 @@ function CyclingPhrase({ words, className, charMs = 60, holdMs = 4500 }) {
     "span",
     {
       "aria-hidden": true,
-      className: "inline-block bg-current align-baseline",
+      className: "inline-block animate-cursor-blink bg-current align-baseline",
       style: {
         width: "0.6em",
         height: "1em",
         verticalAlign: "-0.1em",
         marginLeft: "1px",
-        marginRight: "1px",
-        animation: "cyclingCursorBlink 1s steps(1) infinite"
+        marginRight: "1px"
       }
     }
   );
   return /* @__PURE__ */ jsxs27("span", { className: cn("relative inline-block whitespace-nowrap", className), children: [
-    /* @__PURE__ */ jsx38("style", { dangerouslySetInnerHTML: { __html: BLINK_KEYFRAMES } }),
     /* @__PURE__ */ jsxs27("span", { "aria-hidden": true, className: "invisible", children: [
       placeholder,
       "..."
@@ -8004,6 +8014,8 @@ var STREAMING_WORDS = [
 ];
 var BOTTOM_THRESHOLD_PX = 70;
 var FOLLOW_RETAIN_MS = 350;
+var GROWTH_WATCH_IDLE_MS = 1e4;
+var MEDIA_SETTLE_EVENTS = ["load", "error", "loadedmetadata"];
 function hasNonEmptyContent(content) {
   if (typeof content === "string") return content.length > 0;
   if (!Array.isArray(content)) return false;
@@ -8021,6 +8033,7 @@ var ChatMessageList = forwardRef18(
     dialogId,
     isLoading = false,
     isTyping = false,
+    typingMessage,
     autoScroll = true,
     overscrollContain = true,
     pinBottom = false,
@@ -8080,6 +8093,7 @@ var ChatMessageList = forwardRef18(
     const dialogIdRef = useRef6(dialogId);
     dialogIdRef.current = dialogId;
     const followBottomRef = useRef6(false);
+    const kickGrowthWatchRef = useRef6(null);
     const [atBottom, setAtBottom] = useState14(true);
     const prevRenderRef = useRef6({ dialogId: void 0, messageCount: 0, lastMessageId: void 0 });
     const loadOlderAnchorRef = useRef6(null);
@@ -8131,19 +8145,33 @@ var ChatMessageList = forwardRef18(
         }
         measure();
       };
-      const ro = new ResizeObserver(reassert);
-      ro.observe(content);
-      ro.observe(scroller);
       let growthRaf = 0;
       let lastScrollHeight = scroller.scrollHeight;
-      const watchGrowth = () => {
-        growthRaf = requestAnimationFrame(watchGrowth);
+      let lastGrowthAt = performance.now();
+      const watchGrowth = (now) => {
         const height = scroller.scrollHeight;
-        if (height === lastScrollHeight) return;
-        lastScrollHeight = height;
-        reassert();
+        if (height !== lastScrollHeight) {
+          lastScrollHeight = height;
+          lastGrowthAt = now;
+          reassert();
+        } else if (now - lastGrowthAt > GROWTH_WATCH_IDLE_MS) {
+          growthRaf = 0;
+          return;
+        }
+        growthRaf = requestAnimationFrame(watchGrowth);
+      };
+      const kick = () => {
+        lastGrowthAt = performance.now();
+        if (!growthRaf) growthRaf = requestAnimationFrame(watchGrowth);
       };
-      growthRaf = requestAnimationFrame(watchGrowth);
+      kick();
+      kickGrowthWatchRef.current = kick;
+      const ro = new ResizeObserver(() => {
+        kick();
+        reassert();
+      });
+      ro.observe(content);
+      ro.observe(scroller);
       const disarm = () => {
         followBottomRef.current = false;
         stopScroll();
@@ -8179,6 +8207,7 @@ var ChatMessageList = forwardRef18(
         rearmIfAtBottom();
       };
       const onScroll = () => {
+        kick();
         const st = scroller.scrollTop;
         if (pointerDown && st < lastScrollTop) disarm();
         lastScrollTop = st;
@@ -8195,23 +8224,29 @@ var ChatMessageList = forwardRef18(
       scroller.addEventListener("touchmove", onTouchMove, { passive: true });
       window.addEventListener("pointerdown", onPointerDown, winCapture);
       scroller.addEventListener("scroll", onScroll, { passive: true });
+      for (const type of MEDIA_SETTLE_EVENTS) scroller.addEventListener(type, kick, { capture: true, passive: true });
       window.addEventListener("pointerup", endPointer, winCapture);
       window.addEventListener("pointercancel", endPointer, winCapture);
       window.addEventListener("blur", endPointer, { passive: true });
       return () => {
         ro.disconnect();
         cancelAnimationFrame(growthRaf);
+        kickGrowthWatchRef.current = null;
         scroller.removeEventListener("wheel", onWheel);
         scroller.removeEventListener("keydown", onKeyDown);
         scroller.removeEventListener("touchstart", onTouchStart);
         scroller.removeEventListener("touchmove", onTouchMove);
         window.removeEventListener("pointerdown", onPointerDown, { capture: true });
         scroller.removeEventListener("scroll", onScroll);
+        for (const type of MEDIA_SETTLE_EVENTS) scroller.removeEventListener(type, kick, { capture: true });
         window.removeEventListener("pointerup", endPointer, { capture: true });
         window.removeEventListener("pointercancel", endPointer, { capture: true });
         window.removeEventListener("blur", endPointer);
       };
     }, [autoScroll, scrollRef, contentRef, scrollToBottom, stopScroll, isLoading]);
+    useEffect8(() => {
+      kickGrowthWatchRef.current?.();
+    }, [messages, isTyping]);
     const pinPrevHeightRef = useRef6(0);
     useLayoutEffect4(() => {
       if (!pinBottom) {
@@ -8466,7 +8501,7 @@ var ChatMessageList = forwardRef18(
           "aria-live": "polite",
           children: [
             /* @__PURE__ */ jsx39(DotsLoaderIcon, { className: "h-6 w-6" }),
-            /* @__PURE__ */ jsx39(CyclingPhrase, { words: STREAMING_WORDS, className: "text-h6" })
+            typingMessage ? /* @__PURE__ */ jsx39("span", { className: "text-h6", "aria-atomic": "true", children: typingMessage }) : /* @__PURE__ */ jsx39(CyclingPhrase, { words: STREAMING_WORDS, className: "text-h6" })
           ]
         }
       ),
@@ -19310,6 +19345,26 @@ var FRAME_TERMINATOR = "\0";
 var END_OF_LEADING = "";
 var TRAILER_SENTINEL = "";
 
+// src/chat-protocol/progress.ts
+var CHAT_PROGRESS_STAGES = ["understanding", "searching", "searching_again", "reading"];
+function isChatProgressStage(value) {
+  return typeof value === "string" && CHAT_PROGRESS_STAGES.includes(value);
+}
+function chatProgressOf(frame) {
+  if (!isChatProgressStage(frame.stage)) return null;
+  const count = typeof frame.count === "number" && Number.isFinite(frame.count) && frame.count > 0 ? Math.floor(frame.count) : void 0;
+  return count === void 0 ? { stage: frame.stage } : { stage: frame.stage, count };
+}
+var PROGRESS_LABEL = {
+  understanding: () => "Understanding your question",
+  searching: (count) => count ? `Searching ${count} ${count === 1 ? "source" : "sources"}` : "Searching",
+  searching_again: () => "Searching more broadly",
+  reading: (count) => count ? `Reading ${count} ${count === 1 ? "result" : "results"}` : "Reading the results"
+};
+function chatProgressLabel(progress) {
+  return PROGRESS_LABEL[progress.stage](progress.count);
+}
+
 // src/chat-protocol/leading-frames.ts
 function escapeThinkingTags(text2) {
   return text2.replace(/</g, "&lt;");
@@ -19322,7 +19377,8 @@ function frameNum(value) {
 }
 function mapLeadingFrame(meta, out) {
   if (meta.status === "thinking") {
-    out.push({ type: "status", phase: "thinking" });
+    const progress = chatProgressOf(meta);
+    out.push(progress ? { type: "status", phase: "thinking", progress } : { type: "status", phase: "thinking" });
   } else if (meta.kind === "thinking-delta" && typeof meta.text === "string") {
     out.push({ type: "thinking-delta", text: meta.text });
   } else if (meta.kind === "usage" && meta.stage === "start") {
@@ -20603,6 +20659,7 @@ function createChatStreamReducer(options = {}) {
   } = options;
   let messages = [];
   let streamingPhase = "idle";
+  let streamingProgress = null;
   let dialogTokenUsage = null;
   let liveModel = null;
   let approvalStatuses = {
@@ -20661,6 +20718,8 @@ function createChatStreamReducer(options = {}) {
       stateCache = {
         messages,
         streamingPhase,
+        // A stage describes the wait before the first token only.
+        streamingProgress: streamingPhase === "thinking" ? streamingProgress : null,
         turnMeta: { meta: metaMap, sources: sourcesMap, sendCount },
         dialogTokenUsage,
         liveModel,
@@ -21281,6 +21340,10 @@ function createChatStreamReducer(options = {}) {
     const sendIdx = sendCount - 1;
     switch (event.type) {
       case "status":
+        if (event.progress) {
+          streamingProgress = event.progress;
+          invalidate();
+        }
         setPhaseInternal("thinking");
         break;
       case "thinking-delta":
@@ -21513,6 +21576,7 @@ function createChatStreamReducer(options = {}) {
         { id: nextId("assistant"), role: "assistant", content: "", segments: [] }
       ];
       streamingPhase = "thinking";
+      streamingProgress = null;
       invalidate();
     },
     clearThread() {
@@ -21557,6 +21621,7 @@ function createChatStreamReducer(options = {}) {
       sendCount += 1;
       sseCurrentText = "";
       streamingPhase = "thinking";
+      streamingProgress = null;
       invalidate();
     },
     endSseTurn() {
@@ -21652,6 +21717,7 @@ var MAX_PENDING_RETAIN_KEYS = 256;
 var EMPTY_STATE = Object.freeze({
   messages: Object.freeze([]),
   streamingPhase: "idle",
+  streamingProgress: null,
   turnMeta: Object.freeze({
     meta: /* @__PURE__ */ new Map(),
     sources: /* @__PURE__ */ new Map(),
@@ -22839,6 +22905,8 @@ function useSseChatAdapter(options, runtimeOptions = {}) {
     stopMessage,
     clearMessages,
     streamingPhase,
+    /** The stage the pending turn reports before its first token, or null. */
+    streamingProgress: state.streamingProgress,
     /** True while the mount-time rebuild from the server transcript runs. */
     isHydratingHistory,
     /** Provider key for the lib's `<ModelDisplay>` icon. */
@@ -24392,6 +24460,7 @@ function useUnifiedChat(options) {
       messages: activeState.messages,
       isLoading: activeState.isLoading,
       streamingPhase: activeState.streamingPhase,
+      streamingProgress: activeState.streamingProgress ?? null,
       sendMessage,
       stopMessage,
       clearMessages,
@@ -26037,6 +26106,7 @@ function EmbeddableChatInner({
   const {
     messages: rawMessages,
     isLoading: chatLoading,
+    streamingProgress,
     sendMessage: sendMessageRaw,
     discussRef,
     stopMessage,
@@ -26412,19 +26482,19 @@ function EmbeddableChatInner({
   );
   const [portalHost, setPortalHost] = useState49(null);
   const [panelBoundary, setPanelBoundary] = useState49(null);
-  const [panelWidth, setPanelWidth] = useState49(0);
+  const [canSplit, setCanSplit] = useState49(false);
   useEffect38(() => {
     if (!panelBoundary || typeof ResizeObserver === "undefined") return void 0;
     const ro = new ResizeObserver((entries) => {
       const w = entries[0]?.contentRect?.width;
-      if (typeof w === "number") setPanelWidth(w);
+      if (typeof w === "number") setCanSplit(w >= SPLIT_MIN_WIDTH);
     });
     ro.observe(panelBoundary);
     return () => ro.disconnect();
   }, [panelBoundary]);
   const setPanelNode = useCallback28((node) => {
     setPanelBoundary(node);
-    if (node) setPanelWidth(node.clientWidth);
+    if (node) setCanSplit(node.clientWidth >= SPLIT_MIN_WIDTH);
   }, []);
   const [railCollapsed, setRailCollapsed] = useState49(false);
   const railStorageHydrated = useIsHydrated();
@@ -26448,7 +26518,6 @@ function EmbeddableChatInner({
   }, []);
   const [railSearchOpen, setRailSearchOpen] = useState49(false);
   const splitEligible = historyListMode;
-  const canSplit = panelWidth >= SPLIT_MIN_WIDTH;
   const wideMingo = splitEligible && canSplit && !previewMode;
   const splitActive = wideMingo && !railCollapsed;
   const railPresence = useRailPresence(splitActive);
@@ -26586,7 +26655,7 @@ function EmbeddableChatInner({
             // expand toggle + the chat-block header (the fill column shows
             // the chat / new-chat welcome). No back chevron — chat-list
             // navigation is the rail toggle. Shown whenever the panel is wide
-            // enough to split (`panelWidth ≥ SPLIT_MIN_WIDTH`), NOT gated on
+            // enough to split (width ≥ `SPLIT_MIN_WIDTH`), NOT gated on
             // the viewport `md` breakpoint — otherwise a 720–799px panel on a
             // sub-`md` viewport would split the body yet drop to the mobile
             // single-bar header (no rail search / collapse controls).
@@ -26777,6 +26846,7 @@ function EmbeddableChatInner({
                     {
                       messages,
                       isTyping: chatLoading,
+                      typingMessage: streamingProgress ? chatProgressLabel(streamingProgress) : void 0,
                       pendingApprovals,
                       autoScroll: !previewMode,
                       pinBottom: previewMode,
@@ -27706,4 +27776,4 @@ export {
   EmbeddableChat,
   ProxyCredentialsPanel
 };
-//# sourceMappingURL=chunk-Y7ZEVTLC.js.map
+//# sourceMappingURL=chunk-BW6YBATM.js.map