@flamingo-stack/openframe-frontend-core 0.0.341 → 0.0.342-snapshot.20260630085305

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

@@ -790,10 +790,11 @@ function EmbeddableChatInner({
 
   // Imperative handle to the chat input.
   const chatInputRef = useRef<ChatInputRef | null>(null)
-  // Saved composer draft while a quick-action chip is hovered/focused (its full
-  // prompt is previewed in the composer); restored on hover-end. `null` = not
-  // currently previewing.
-  const quickActionDraftRef = useRef<string | null>(null)
+  // Full prompt of the currently hovered/focused quick-action chip, previewed
+  // as ghost text in the empty composer (`ChatInput.previewText`) — declarative
+  // + non-destructive: it never writes the editor value, so it can't clobber a
+  // draft. `null` = not previewing.
+  const [quickActionPreview, setQuickActionPreview] = useState<string | null>(null)
 
   // The slash-command registry (Guide onboarding cards) is loaded via
   // react-query below, after `activeMode` is resolved — gated on Guide mode and
@@ -1400,6 +1401,12 @@ function EmbeddableChatInner({
   // Guide-mode empty state (no open conversation) — drives the "Mingo Guide"
   // header, the guide banner, and the GuideWelcome content branch.
   const isGuideEmpty = !hasConversation && activeMode === 'guide'
+  // Quick-action chips only exist in the guide empty state. If it goes away
+  // (a message is sent, or the mode switches) while a chip is still hovered,
+  // drop the in-flight preview so it can't leak into the next composer state.
+  useEffect(() => {
+    if (!isGuideEmpty) setQuickActionPreview(null)
+  }, [isGuideEmpty])
   // The guide-empty back-chevron returns to Mingo — only offer it when Mingo
   // mode actually exists to return to (guide is normally entered from Mingo).
   const guideCanReturnToMingo = isGuideEmpty && hasMingoMode
@@ -1691,27 +1698,17 @@ function EmbeddableChatInner({
                     }
                     // Quick-action chips SEND the prompt immediately on click.
                     onQuickAction={(action) => {
-                      // Clear any hover-preview text first so nothing lingers
-                      // in the composer after the message is sent.
-                      quickActionDraftRef.current = null
-                      chatInputRef.current?.setValue('')
+                      setQuickActionPreview(null)
                       handleSend(action.prompt ?? action.label)
                     }}
-                    // Hover/focus PREVIEWS the action's full prompt in the
-                    // composer (the label chip is short; this reveals what will
-                    // be sent). Leaving restores whatever the user had typed.
-                    onQuickActionHover={(action) => {
-                      if (quickActionDraftRef.current === null) {
-                        quickActionDraftRef.current = chatInputRef.current?.getValue() ?? ''
-                      }
-                      chatInputRef.current?.setValue(action.prompt ?? action.label)
-                    }}
-                    onQuickActionHoverEnd={() => {
-                      if (quickActionDraftRef.current !== null) {
-                        chatInputRef.current?.setValue(quickActionDraftRef.current)
-                        quickActionDraftRef.current = null
-                      }
-                    }}
+                    // Hover/focus PREVIEWS the action's full prompt as ghost text
+                    // in the empty composer (the chip label is short; this reveals
+                    // what will be sent). Declarative + non-destructive — see
+                    // `quickActionPreview` / `ChatInput.previewText`.
+                    onQuickActionHover={(action) =>
+                      setQuickActionPreview(action.prompt ?? action.label)
+                    }
+                    onQuickActionHoverEnd={() => setQuickActionPreview(null)}
                   >
                     {/* Figma node 7363:205938 — single-column slash-command
                         list. No own scroll (GuideWelcome's region scrolls); the
@@ -1779,6 +1776,7 @@ function EmbeddableChatInner({
                 }
                 autoFocus={autoFocusInput}
                 slashCommands={slashCommandsProp}
+                previewText={quickActionPreview ?? undefined}
                 showAttachmentButton={attachmentsEnabled && activeMode === 'guide'}
                 attachmentsCount={stagedAttachments.length}
                 onAddFiles={addAttachmentFiles}

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

@@ -32,12 +32,12 @@ export interface GuideWelcomeProps {
    *  `subtitle` is present. */
   subtitleLoading?: boolean
   /** Quick-action chips — caller-provided; there are no built-in defaults, so
-   *  the chip row is omitted entirely unless the host supplies actions. The row
-   *  is a single line: as many chips as fit render inline and the rest collapse
-   *  under a trailing "⋯" overflow menu (width-measured by `ChatQuickActionRow`,
-   *  so the inline count adapts to the available width — no fixed cap). */
+   *  the chip row is omitted entirely unless the host supplies actions. ALL
+   *  chips render in a wrapping row (no "⋯" overflow collapse) so every action
+   *  is directly hoverable — hover/focus previews the action's full `prompt` in
+   *  the composer; click sends it. */
   quickActions?: ReadonlyArray<GuideQuickAction>
-  /** Fired when a quick-action chip (inline or menu) is activated. */
+  /** Fired when a quick-action chip is activated (click). */
   onQuickAction?: (action: GuideQuickAction) => void
   /** Pointer/keyboard focus enters a quick-action chip — e.g. preview the
    *  action's full `prompt` in the composer input. */
@@ -105,8 +105,9 @@ export function GuideWelcome({
     return () => ro.disconnect()
   }, [updateScrollFade])
 
-  // Map to the shared width-measured chip row's shape. As many chips as fit on
-  // ONE line render inline; the rest collapse under the trailing "⋯" menu.
+  // Map to the shared `ChatQuickActionRow` chip shape. In `wrap` mode every chip
+  // renders (no overflow), and `onHoverStart`/`onHoverEnd` drive the composer
+  // prompt preview.
   const chipItems = React.useMemo(
     () =>
       quickActions.map((action) => ({
@@ -197,10 +198,19 @@ export function GuideWelcome({
         />
       </div>
 
-      {/* Pinned quick-action chips — always visible above the composer.
-          Single line: as many chips as fit render inline, the rest collapse
-          into the trailing "⋯" menu (width-measured by `ChatQuickActionRow`). */}
-      {quickActions.length > 0 && <ChatQuickActionRow chips={chipItems} />}
+      {/* Pinned quick-action chips above the composer — the shared
+          `ChatQuickActionRow` in `wrap` mode: ALL chips render (no "⋯" overflow
+          collapse) so every action is directly hoverable; hover/focus previews
+          the action's full prompt in the composer, click sends it. Capped height
+          + internal scroll so a long (host/admin-driven) list can't grow the
+          pinned area without bound and squeeze the composer on short screens. */}
+      {quickActions.length > 0 && (
+        <ChatQuickActionRow
+          wrap
+          chips={chipItems}
+          className="max-h-28 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30"
+        />
+      )}
     </div>
   )
 }

package/src/components/chat/types/component.types.ts

@@ -399,6 +399,12 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
   /** Suppress the textarea's own border/bg/radius — an outer card draws it
    *  instead (composer context-chip layout). Forwarded to `Textarea.hideBorder`. */
   hideBorder?: boolean
+  /** Ephemeral, non-destructive preview text shown over the editor — e.g.
+   *  previewing a hovered quick-action's full prompt before the user commits it.
+   *  Purely declarative: it NEVER touches the editor's real value. While set, it
+   *  visually replaces the editor (even an in-progress draft); clearing it
+   *  (undefined) restores whatever the user had — empty or typed — verbatim. */
+  previewText?: string
 }
 
 export interface ChatInputRef {

package/src/components/ui/dashboard-info-card.tsx

@@ -17,11 +17,15 @@ import { Tag } from './tag'
 export type DashboardInfoCardPercentageDisplay = 'auto' | 'plain' | 'tag'
 
 /**
- * Size of the progress ring in px. A single number applies at all breakpoints;
- * `{ base, lg }` renders a `base`-sized ring below the `lg` breakpoint (e.g.
- * mobile) and an `lg`-sized ring from `lg` up.
+ * Size of the progress ring in px. A single number applies at all breakpoints.
+ * The responsive form sets `base` (mobile) plus optional `md` / `lg` overrides
+ * that take effect from the Tailwind `md` (768px) / `lg` (1024px) breakpoints
+ * up — e.g. `{ base: 24, md: 56 }` is 24px on mobile and 56px on tablet and
+ * desktop, while `{ base: 24, lg: 56 }` keeps the smaller ring through tablet.
  */
-export type DashboardInfoCardProgressSize = number | { base: number; lg: number }
+export type DashboardInfoCardProgressSize =
+  | number
+  | { base: number; md?: number; lg?: number }
 
 export interface DashboardInfoCardProps {
   title?: string
@@ -45,8 +49,9 @@ export interface DashboardInfoCardProps {
   /**
    * Size of the circular progress ring. Defaults to `CircularProgress`'s own
    * default (56px) at all breakpoints. Pass a number for a fixed size, or
-   * `{ base, lg }` for a responsive ring (e.g. `{ base: 24, lg: 56 }` to match
-   * the Figma mobile spec). Stroke width scales proportionally with the size.
+   * `{ base, md?, lg? }` for a responsive ring (e.g. `{ base: 24, md: 56 }` for
+   * the Figma spec — 24px on mobile, 56px on tablet and desktop). Stroke width
+   * scales proportionally with the size.
    */
   progressSize?: DashboardInfoCardProgressSize
   className?: string
@@ -129,21 +134,38 @@ export function DashboardInfoCard({
       return <CircularProgress {...common} size={progressSize} strokeWidth={strokeFor(progressSize)} />
     }
 
-    // Responsive: smaller ring below `lg`, larger from `lg` up.
+    // Responsive: `base` (mobile) plus optional `md` / `lg` overrides. Each ring
+    // is toggled with Tailwind display utilities so only one shows per breakpoint.
+    // NOTE: the class names must stay static string literals — Tailwind's JIT
+    // scanner can't see dynamically-built names (e.g. `${bp}:hidden`).
+    const { base, md, lg } = progressSize
+
+    const rings: Array<{ key: string; size: number; className: string }> = []
+    if (md !== undefined && lg !== undefined) {
+      rings.push({ key: 'base', size: base, className: 'md:hidden' })
+      rings.push({ key: 'md', size: md, className: 'hidden md:block lg:hidden' })
+      rings.push({ key: 'lg', size: lg, className: 'hidden lg:block' })
+    } else if (md !== undefined) {
+      rings.push({ key: 'base', size: base, className: 'md:hidden' })
+      rings.push({ key: 'md', size: md, className: 'hidden md:block' })
+    } else if (lg !== undefined) {
+      rings.push({ key: 'base', size: base, className: 'lg:hidden' })
+      rings.push({ key: 'lg', size: lg, className: 'hidden lg:block' })
+    } else {
+      rings.push({ key: 'base', size: base, className: '' })
+    }
+
     return (
       <>
-        <CircularProgress
-          {...common}
-          size={progressSize.base}
-          strokeWidth={strokeFor(progressSize.base)}
-          className="lg:hidden"
-        />
-        <CircularProgress
-          {...common}
-          size={progressSize.lg}
-          strokeWidth={strokeFor(progressSize.lg)}
-          className="hidden lg:block"
-        />
+        {rings.map(ring => (
+          <CircularProgress
+            key={ring.key}
+            {...common}
+            size={ring.size}
+            strokeWidth={strokeFor(ring.size)}
+            className={ring.className}
+          />
+        ))}
       </>
     )
   }

package/src/stories/DashboardInfoCard.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
     },
     progressSize: {
       control: { type: 'number' },
-      description: 'Ring diameter in px (number), or `{ base, lg }` for a responsive ring. Default 56.',
+      description: 'Ring diameter in px (number), or `{ base, md?, lg? }` for a responsive ring. Default 56.',
     },
     href: { control: 'text', description: 'Navigation URL — renders as a Next.js Link with pointer cursor' },
     tooltip: { control: 'text', description: 'Tooltip content for the question-mark icon' },
@@ -276,7 +276,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="success"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Offline Devices"
@@ -285,7 +285,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="error"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Pending Devices"
@@ -294,7 +294,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="warning"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Archived Devices"
@@ -303,7 +303,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="info"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
     </div>
   ),
@@ -311,7 +311,7 @@ export const DeviceStatusesOverview: Story = {
     docs: {
       description: {
         story:
-          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`, and a responsive ring (`progressSize={{ base: 24, lg: 56 }}`) that is 24px on mobile and 56px from the `lg` breakpoint up.',
+          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`, and a responsive ring (`progressSize={{ base: 24, md: 56 }}`) that is 24px on mobile and 56px on tablet and desktop (from the `md` breakpoint up).',
       },
     },
   },
@@ -320,7 +320,7 @@ export const DeviceStatusesOverview: Story = {
 /**
  * `progressSize` controls the ring diameter (stroke scales with it). Left: the
  * 24px mobile spec. Right: the 56px desktop default. In production pass
- * `progressSize={{ base: 24, lg: 56 }}` for the responsive switch.
+ * `progressSize={{ base: 24, md: 56 }}` for the responsive switch.
  */
 export const ProgressSizeComparison: Story = {
   render: () => (