@flamingo-stack/openframe-frontend-core 0.0.704 → 0.0.705

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-I7DFUQMN.js";
+} from "./chunk-F6AFPNDF.js";
 import {
   AppHeader,
   AppLayout,
@@ -26,17 +26,18 @@ import {
   NAVIGATION_SIDEBAR_WIDTH_VAR,
   NavigationItemBadge,
   NavigationSidebar,
+  SIDE_PANEL_FRAME_WIDTH,
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-2G546OND.js";
+} from "./chunk-G5A3PSPV.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-ZQFZSFQI.js";
-import "./chunk-7LFIKJX2.js";
+} from "./chunk-DENB2XJC.js";
+import "./chunk-QFXRPRFT.js";
 import {
   AIEnrichButton,
   AIEnrichSection,
@@ -665,7 +666,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-4KGXLVCF.js";
+} from "./chunk-FCGC42TS.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
 import {
@@ -783,7 +784,7 @@ import {
   validateSchema,
   validateVariables,
   variablesToUrlParams
-} from "./chunk-IHU5ANUY.js";
+} from "./chunk-MKXO4Q5P.js";
 import "./chunk-HFL2F4RM.js";
 import {
   CONTENT_REF_GROUPS,
@@ -937,6 +938,7 @@ import {
   MESSAGE_ROLE,
   MESSAGE_TYPE,
   MINGO_V2_RAIL_WIDTH,
+  MINGO_V2_SPLIT_WIDTH,
   MUX_IMAGE_ORIGIN,
   MUX_STREAM_ORIGIN,
   MarkdownEngine,
@@ -1204,7 +1206,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "./chunk-2JDVL7UV.js";
+} from "./chunk-7VVFKJY5.js";
 import {
   HEADING_EMOJI_RE,
   HUB_HEADER_OFFSET_PX,
@@ -1246,7 +1248,7 @@ import {
   usePrefersReducedMotionState,
   useResetOnPageHidden,
   useSuppressCloneFocus
-} from "./chunk-WUJNYGO2.js";
+} from "./chunk-PDWVPI3S.js";
 import "./chunk-GY4IZG22.js";
 import {
   AboutIcon,
@@ -2447,6 +2449,7 @@ export {
   MESSAGE_TYPE,
   MINGO_APPROVAL_REQUEST_TYPE,
   MINGO_V2_RAIL_WIDTH,
+  MINGO_V2_SPLIT_WIDTH,
   MOBILE_NAV_PANEL_ID,
   MUX_IMAGE_ORIGIN,
   MUX_STREAM_ORIGIN,
@@ -2705,6 +2708,7 @@ export {
   SEO_DESCRIPTION_MAX_LENGTH,
   SEO_TITLE_MAX_LENGTH,
   SHELL_TYPES,
+  SIDE_PANEL_FRAME_WIDTH,
   SLOT_STICKINESS,
   SOCIAL_PLATFORM_ALIASES,
   SOCIAL_PLATFORM_ALT_HOSTS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.704",
+  "version": "0.0.705",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/chat-input.tsx

@@ -631,9 +631,12 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
             <div className="relative min-w-0 flex-1">
               {/* No chip-line override on the placeholder: it only renders while
                   the draft is EMPTY, so the editor is always on its plain line
-                  box here. */}
+                  box here. `data-editor-ghost` (here and on the preview) pins
+                  both overlays to 16px on phones alongside `data-editor` — the
+                  iOS focus-zoom rule in app-globals.css. */}
               {isEmpty && !showPreview && (
                 <span
+                  data-editor-ghost
                   className={cn(
                     // One line, clipped with an ellipsis (Figma 954:28455): the
                     // disabled copy is a sentence, and the panel's narrowest
@@ -659,6 +662,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   editor. */}
               {showPreview && (
                 <p
+                  data-editor-ghost
                   className={cn(
                     'pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-ods-text-secondary text-h4',
                     hasChips && '!leading-9',

package/src/components/chat/chat-message-enhanced.tsx

@@ -522,9 +522,10 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     // its own short line above the message (on the right for the user), never
     // beside it: a face in the row indents every line of the message by its
     // width. The NAME is written only where it is the information itself: a
-    // system line and a human technician. Every face carries its name for
-    // assistive tech and on hover.
-    const showName = isSystem || authorType === 'admin';
+    // system line and a human technician answering. Mingo sends the admin's
+    // own turns as `admin` too; those are the user's words and draw as such.
+    // Every face carries its name for assistive tech and on hover.
+    const showName = isSystem || (authorType === 'admin' && !isUser);
     const displayName = name || (isUser ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae');
     const faceBox = 'h-5 w-5 flex-shrink-0';
     const face: ReactNode =

package/src/components/chat/embeddable-chat.tsx

@@ -131,6 +131,8 @@ const HISTORY_RAIL_WIDTH = 320;
 /** The v2 chat list (`MingoChatRail`, Figma `chat-sidebar`): the narrowest the v2 chat draws. */
 export const MINGO_V2_RAIL_WIDTH = 296;
 const CHAT_BLOCK_MIN_WIDTH = 400;
+/** Mingo v2: the list and the chat side by side at their narrowest. */
+export const MINGO_V2_SPLIT_WIDTH = MINGO_V2_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 
 // Desktop drawer is this fraction of the viewport width (clamped to the
@@ -364,6 +366,12 @@ export interface EmbeddableChatProps {
    * the open chat, which stays open.
    */
   collapseTo?: 'list' | 'column';
+  /**
+   * v2: the |← control on the chat list while the panel shows the list alone.
+   * The host widens its panel; the chat opens the conversation open last (or
+   * the newest in the list), or a new chat when there is none.
+   */
+  onExpand?: () => void;
 
   /** v2: the status glyph at the end of a chat's row (working / unread / approval). */
   dialogStatusOf?: (dialog: DialogItem) => MingoDialogStatus | undefined;
@@ -1024,6 +1032,7 @@ function EmbeddableChatInner({
   appearance = CHAT_APPEARANCE.CLASSIC,
   onCollapse,
   collapseTo = 'list',
+  onExpand,
   dialogStatusOf,
   userDisplayName,
   userAvatarUrl,
@@ -1601,18 +1610,25 @@ function EmbeddableChatInner({
     [handleNavigationClose],
   );
 
+  // "Ask Mingo" about a row (a card or source chip in the thread, or a page's
+  // `ask-ai:open-with-ref`): asks in the open conversation. Forwarded through a
+  // ref because what it does depends on dialog state declared further down
+  // (`askAboutRef.current` is set next to it: an archived chat is read-only).
+  const askAboutRef = useRef<(reference: ChatRef) => void>(discussRef);
+  const askAbout = useCallback((reference: ChatRef) => askAboutRef.current(reference), []);
+
   // Host-provided renderer for inline entity cards — routes through the
   // shared dispatcher in lib's `entity-cards/dispatch.tsx`.
   const renderEntityCard = useCallback(
     (reference: ChatRef): React.ReactNode =>
       renderChatInlineEntityCard(reference, {
-        onDiscuss: discussRef,
+        onDiscuss: askAbout,
         onDisplay: displayRef,
         baseRoute: resolvedBaseRoute,
         chipBasePlatform,
         extras,
       }),
-    [discussRef, displayRef, resolvedBaseRoute, chipBasePlatform, extras],
+    [askAbout, displayRef, resolvedBaseRoute, chipBasePlatform, extras],
   );
 
   // Stable assistant-icon element. `<ChatMessageList>` forwards this prop to
@@ -1832,11 +1848,11 @@ function EmbeddableChatInner({
       ).detail;
       if (!detail || detail.source !== source) return;
       setIsOpen(true);
-      setTimeout(() => discussRef(detail.ref as ChatRef), 0);
+      setTimeout(() => askAbout(detail.ref as ChatRef), 0);
     };
     window.addEventListener('ask-ai:open-with-ref', handler);
     return () => window.removeEventListener('ask-ai:open-with-ref', handler);
-  }, [source, discussRef, setIsOpen]);
+  }, [source, askAbout, setIsOpen]);
 
   // Listen for plain "open chat" events (no row context). Fired by the
   // header MingoAiButton. Same strict source filter as `ask-ai:open-with-ref`
@@ -1960,12 +1976,12 @@ function EmbeddableChatInner({
             baseRoute={resolvedBaseRoute}
             chipBasePlatform={chipBasePlatform}
             onClose={handleNavigationClose}
-            onDiscuss={discussRef}
+            onDiscuss={askAbout}
           />
         </div>
       );
     },
-    [chatLoading, messages.length, resolvedBaseRoute, chipBasePlatform, handleNavigationClose, discussRef],
+    [chatLoading, messages.length, resolvedBaseRoute, chipBasePlatform, handleNavigationClose, askAbout],
   );
 
   // Host node for in-panel Radix portals (see the body wrapper below).
@@ -2176,6 +2192,37 @@ function EmbeddableChatInner({
     resetToNewChat();
   }, [resetToNewChat]);
 
+  // "Ask Mingo" from an archived chat: the conversation is read-only (the
+  // backend refuses writes), so the question starts a new chat instead. It is
+  // queued until the host has let go of the archived dialog: until then its
+  // `discussRef` still writes into the dialog it has open.
+  const queuedAskRef = useRef<ChatRef | null>(null);
+  useEffect(() => {
+    askAboutRef.current = reference => {
+      if (!isViewingArchived) {
+        discussRef(reference);
+        return;
+      }
+      queuedAskRef.current = reference;
+      if (archiveOpen) closeArchive();
+      resetToNewChat();
+      setComposeOpen(true);
+    };
+  });
+  useEffect(() => {
+    const reference = queuedAskRef.current;
+    if (!reference || activeDialogId != null) return;
+    queuedAskRef.current = null;
+    discussRef(reference);
+  }, [activeDialogId, discussRef]);
+
+  // The conversation open last, for the |← control: going back to the list
+  // closes it, and widening the panel again should bring it back.
+  const lastDialogIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (activeDialogId && !isViewingArchived) lastDialogIdRef.current = activeDialogId;
+  }, [activeDialogId, isViewingArchived]);
+
   // Host prefill (`prefillDraft`) — staged, not written at once. The composer
   // it goes into may only mount on the commit `resetToNewChat` +
   // `setComposeOpen(true)` produce (narrow layout: list → compose; or the
@@ -2654,6 +2701,17 @@ function EmbeddableChatInner({
                       <MingoChatRail
                         {...mingoRailProps}
                         onNewChat={() => setComposeOpen(true)}
+                        onExpand={
+                          onExpand &&
+                          (() => {
+                            const last = lastDialogIdRef.current;
+                            const target = last && dialogs.some(d => d.id === last) ? last : dialogs[0]?.id;
+                            if (archiveOpen) closeArchive();
+                            if (target) handleSelectDialog(target);
+                            else handleNewChat();
+                            onExpand();
+                          })
+                        }
                         className="w-full border-r-0 duration-200 animate-in fade-in-0"
                       />
                     ) : stackedListView ? (

package/src/components/chat/index.ts

@@ -99,5 +99,6 @@ export {
   type EmbeddableChatHandle,
   type EmbeddableChatProps,
   MINGO_V2_RAIL_WIDTH,
+  MINGO_V2_SPLIT_WIDTH,
 } from './embeddable-chat';
 export * from './proxy-credentials-panel';

package/src/components/chat/mingo-chat-rail.tsx

@@ -4,6 +4,7 @@ import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import {
   AlertCircleIcon,
+  Arrow02LeftIcon,
   ChatPlusIcon,
   ChatQuestionIcon,
   ChatsIcon,
@@ -69,6 +70,8 @@ export interface MingoChatRailProps {
   /** The list failed to load with nothing cached. */
   loadError?: boolean;
   onRetry?: () => void;
+  /** The |← control beside the logo: widen the panel to the list and the chat. */
+  onExpand?: () => void;
   className?: string;
 }
 
@@ -113,6 +116,7 @@ export function MingoChatRail({
   isLoadingHistory = false,
   loadError = false,
   onRetry,
+  onExpand,
   className,
 }: MingoChatRailProps) {
   const [searchOpen, setSearchOpen] = useState(!!searchQuery?.trim());
@@ -251,13 +255,26 @@ export function MingoChatRail({
       data-accent="mingo"
       aria-label="Mingo chats"
       logo={
-        <MingoIcon
-          color="currentColor"
-          eyesColor="var(--ods-flamingo-cyan-base)"
-          cornerColor="var(--ods-flamingo-cyan-base)"
-          className="size-6 text-ods-text-primary"
-          aria-hidden
-        />
+        <div className="flex flex-1 items-center justify-between">
+          <MingoIcon
+            color="currentColor"
+            eyesColor="var(--ods-flamingo-cyan-base)"
+            cornerColor="var(--ods-flamingo-cyan-base)"
+            className="size-6 text-ods-text-primary"
+            aria-hidden
+          />
+          {onExpand && (
+            <Button
+              variant="transparent"
+              size="icon"
+              aria-label="Expand chat"
+              onClick={onExpand}
+              className="size-6 p-0 text-ods-text-secondary hover:text-ods-text-primary md:size-6"
+            >
+              <Arrow02LeftIcon size={24} />
+            </Button>
+          )}
+        </div>
       }
       items={items}
       sectionLabel="Your Current Chats"

package/src/components/navigation/app-layout-side-panel.tsx

@@ -44,13 +44,23 @@ export interface AppLayoutSidePanelRenderState {
   collapsesTo: 'column' | 'minimum' | null;
   /** Step the panel back (see `collapsesTo`), animated. */
   collapse: () => void;
+  /** Docked at its minimum with room for more: `expand` widens it. */
+  canExpand: boolean;
+  /** Widen the panel from its minimum to `defaultWidth` (as much as fits), animated. */
+  expand: () => void;
 }
 
 export interface AppLayoutSidePanelConfig {
   /** Panel body. Told its width so it can choose what fits. */
   children: (state: AppLayoutSidePanelRenderState) => ReactNode;
-  /** Narrowest docked width, and the width it starts at: the narrowest its content draws. */
+  /** Narrowest docked width: the narrowest its content draws. */
   minWidth: number;
+  /**
+   * Width it starts at until the user picks one (a first launch), and the
+   * width `expand` takes it back to from its minimum. As much of it as fits:
+   * with no room the panel stays narrower. Default `minWidth`.
+   */
+  defaultWidth?: number;
   /** Narrowest the content may get before the panel takes over. Default 400. */
   minContentWidth?: number;
   /** localStorage key for the chosen width. Without it the width lasts the session. */
@@ -75,6 +85,11 @@ export interface AppLayoutSidePanelConfig {
 
 /** Inset of the docked card from the window edge and the header. */
 export const SIDE_PANEL_INSET = 16;
+/**
+ * The docked card's 1px border on both sides: its body is this much narrower
+ * than the panel's width. Add it to a content width to size the panel by it.
+ */
+export const SIDE_PANEL_FRAME_WIDTH = 2;
 const MOBILE_QUERY = `not all and ${breakpoints.md}`;
 const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
 /** Length of the docked <-> full morph; keep in step with `duration-300` below. */
@@ -228,6 +243,8 @@ export interface AppLayoutSidePanelState extends SidePanelLayout {
   endMorph: () => void;
   collapsesTo: AppLayoutSidePanelRenderState['collapsesTo'];
   collapse: () => void;
+  canExpand: boolean;
+  expand: () => void;
   toggle: () => void;
   close: () => void;
   resize: (next: number) => void;
@@ -256,6 +273,7 @@ export function useAppLayoutSidePanel(
   const minContentWidth = config?.minContentWidth ?? 400;
   const collapsed = config?.collapsed ?? false;
   const minimum: SidePanelSize = { width: minWidth, expanded: false };
+  const defaultWidth = Math.max(minWidth, config?.defaultWidth ?? minWidth);
 
   const [rowWidth, setRowWidth] = useState(0);
   useIsomorphicLayoutEffect(() => {
@@ -271,7 +289,7 @@ export function useAppLayoutSidePanel(
   const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY) === true;
   const [morph, setMorph] = useState<SidePanelMorph | null>(null);
   const [liveWidth, setLiveWidth] = useState<number | null>(null);
-  const [storedSize, setStoredSize] = useStoredSize(config?.storageKey, minimum);
+  const [storedSize, setStoredSize] = useStoredSize(config?.storageKey, { width: defaultWidth, expanded: false });
   const [ownIsOpen, setOwnIsOpen] = useState(false);
   const isOpen = config?.open ?? ownIsOpen;
   const onOpenChange = config?.onOpenChange;
@@ -340,6 +358,8 @@ export function useAppLayoutSidePanel(
   let collapsesTo: AppLayoutSidePanelRenderState['collapsesTo'] = null;
   if (layout.mode === 'full' && layout.canDock) collapsesTo = layout.dockedWidth > minWidth ? 'column' : 'minimum';
   else if (layout.mode === 'docked' && layout.width > minWidth) collapsesTo = 'minimum';
+  const canExpand =
+    layout.mode === 'docked' && layout.width <= minWidth && defaultWidth > minWidth && layout.maxDockedWidth > minWidth;
 
   return {
     ...layout,
@@ -362,6 +382,12 @@ export function useAppLayoutSidePanel(
         setSize({ width: minWidth, expanded: false });
       }
     },
+    canExpand,
+    expand: () => {
+      if (!canExpand) return;
+      animate('narrow');
+      dock(defaultWidth);
+    },
     toggle: () => setIsOpen(!isOpen),
     close: () => setIsOpen(false),
     resize,
@@ -586,6 +612,8 @@ export function AppLayoutSidePanel({ config, state }: AppLayoutSidePanelProps) {
             close,
             collapsesTo: state.collapsesTo,
             collapse: state.collapse,
+            canExpand: state.canExpand,
+            expand: state.expand,
           })}
         </div>
       </div>

package/src/components/navigation/index.ts

@@ -35,6 +35,7 @@ export type {
   AppLayoutSidePanelMode,
   AppLayoutSidePanelRenderState,
 } from './app-layout-side-panel';
+export { SIDE_PANEL_FRAME_WIDTH } from './app-layout-side-panel';
 
 export {
   AppLayoutDrawer,

package/src/components/platform/SoftwareSourceBadge.tsx

@@ -33,7 +33,7 @@
  */
 
 import type React from 'react';
-import { cn } from '../../utils/common';
+import { cn } from '../../utils/cn';
 import { PackageIcon, WindowsIcon, MacOSIcon, LinuxIcon } from '../icons';
 
 export type SoftwareSource =

package/src/styles/app-globals.css

@@ -154,6 +154,19 @@ body[data-scroll-locked][data-scroll-locked] {
     transform-origin: left top;
     transform: scale(1);
   }
+
+  /* The chat composer (chat-input.tsx) is a contenteditable div, not a
+     textarea, and WebKit's focus auto-zoom keys off its font size the same
+     way. Keyed on its own data-editor rather than [contenteditable]: a global
+     match would also resize consumers' editors (CodeMirror's .cm-content) and
+     drop the composer back to 14px while disabled. Its placeholder and hover
+     preview overlay it as siblings, so they are pinned with it or the text
+     would change size on the first keystroke. Mention chips stay small only
+     because Tag sets its own text-h5. */
+  [data-editor],
+  [data-editor-ghost] {
+    font-size: 16px !important;
+  }
 }
 
 /* Shadcn/ui HSL CSS variables for Tailwind compatibility */