@flamingo-stack/openframe-frontend-core 0.0.428 → 0.0.429

package/src/components/chat/chat-panel-header.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+import { cn } from '../../utils/cn'
 import { Chevron01LeftIcon } from '../icons-v2-generated/arrows/chevron-01-left-icon'
 import {
   Ellipsis01Icon,
@@ -42,6 +43,11 @@ export interface ChatPanelHeaderProps {
   onArchive?: () => void
   /** Open the Chat Archive page — renders the clock button (list view only). */
   onOpenArchive?: () => void
+  /** Force the COMPACT (`h-14` desktop-style) bar at every width, skipping the
+   *  full-screen mobile header. For EMBEDDED surfaces (e.g. a small preview
+   *  panel) where the phone-sized full-bleed header (large `text-h2` title) is
+   *  wrong regardless of viewport. Default false = viewport-responsive. */
+  compact?: boolean
 }
 
 /**
@@ -61,6 +67,7 @@ export function ChatPanelHeader({
   onRename,
   onArchive,
   onOpenArchive,
+  compact = false,
 }: ChatPanelHeaderProps) {
   // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
@@ -70,23 +77,28 @@ export function ChatPanelHeader({
 
   return (
     <>
-      {/* Mobile (<md): a distinct layout (Figma node 7363:85532). */}
-      <ChatPanelHeaderMobile
-        className="flex md:hidden"
-        showBack={showBack}
-        title={title}
-        backAriaLabel={backAriaLabel}
-        isArchivedView={isArchivedView}
-        onBack={onBack}
-        onClose={onClose}
-        onRestore={onRestore}
-        onRename={onRename}
-        onArchive={onArchive}
-        onOpenArchive={onOpenArchive}
-      />
+      {/* Mobile (<md): a distinct full-screen layout (Figma node 7363:85532).
+          Skipped in `compact` mode — an embedded preview keeps the small bar
+          at every width. */}
+      {!compact && (
+        <ChatPanelHeaderMobile
+          className="flex md:hidden"
+          showBack={showBack}
+          title={title}
+          backAriaLabel={backAriaLabel}
+          isArchivedView={isArchivedView}
+          onBack={onBack}
+          onClose={onClose}
+          onRestore={onRestore}
+          onRename={onRename}
+          onArchive={onArchive}
+          onOpenArchive={onOpenArchive}
+        />
+      )}
 
-      {/* Desktop (md+): fixed-height bar with full-height divider action cells. */}
-      <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
+      {/* Compact bar: `md+` normally, or ALL widths when `compact`. Fixed-height
+          bar with full-height divider action cells. */}
+      <div className={cn('flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card', compact ? 'flex' : 'hidden md:flex')}>
         <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
           {showBack ? (
             <>

package/src/components/chat/chat-quick-action-row.tsx

@@ -9,8 +9,10 @@ import { Ellipsis01Icon } from '../icons-v2-generated'
 import { useAutoLimitTags } from '../../hooks/ui/use-auto-limit-tags'
 import {
   QuickActionChipButton,
+  QuickActionChipSkeleton,
   renderQuickActionIcon,
   type QuickActionIconSpec,
+  type QuickActionAccent,
 } from './quick-action-chip'
 
 // =============================================================================
@@ -27,6 +29,11 @@ export interface QuickActionChip {
   icon?: React.ReactNode | QuickActionIconSpec
   /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
   variant?: 'primary' | 'outline'
+  /** Active single-select state — renders the accented `selected` skin
+   *  (overrides `variant`). */
+  selected?: boolean
+  /** Accent for the `selected` skin (`'cyan'` = cyan twin, else pink). */
+  selectedAccent?: QuickActionAccent
   onSelect?: () => void
   /** Pointer/keyboard focus enters the chip — e.g. preview the full prompt in
    *  the composer. */
@@ -47,9 +54,18 @@ export interface ChatQuickActionRowProps {
    *  for roomy contexts (e.g. the Guide empty state) where overflow-hiding chips
    *  would defeat per-chip hover/preview. */
   wrap?: boolean
+  /** Render `skeletonCount` loading chips (the real {@link QuickActionChipSkeleton},
+   *  so geometry is 1:1 with the loaded chips) instead of `chips`. Wrap-aware. */
+  loading?: boolean
+  /** How many skeleton chips to draw when `loading`. Default 8. */
+  skeletonCount?: number
   className?: string
 }
 
+// Deterministic label widths (in `ch`) so a loading wall reads like a populated
+// one — a varied spread, not a uniform block.
+const SKELETON_LABEL_CHS = [16, 9, 13, 7, 18, 8, 20, 11, 15, 10, 19, 12, 17, 8, 21, 14]
+
 // =============================================================================
 // Chip button
 // =============================================================================
@@ -62,6 +78,8 @@ function ChipButton({ chip }: { chip: QuickActionChip }) {
       label={chip.label}
       icon={chip.icon}
       variant={chip.variant ?? 'outline'}
+      selected={chip.selected}
+      selectedAccent={chip.selectedAccent}
       onSelect={chip.onSelect}
       onHoverStart={chip.onHoverStart}
       onHoverEnd={chip.onHoverEnd}
@@ -86,6 +104,8 @@ export function ChatQuickActionRow({
   leading,
   chips,
   wrap = false,
+  loading = false,
+  skeletonCount = 8,
   className,
 }: ChatQuickActionRowProps) {
   const auto = useAutoLimitTags({
@@ -96,6 +116,19 @@ export function ChatQuickActionRow({
   const visibleChips = chips.slice(0, auto.visibleCount)
   const hiddenChips = chips.slice(auto.visibleCount)
 
+  // Loading: draw skeleton chips (real `QuickActionChipSkeleton`, 1:1 geometry)
+  // in the same wrap/inline layout — one shared skeleton for every consumer, no
+  // hand-rolled bars.
+  if (loading) {
+    return (
+      <div className={cn('flex shrink-0 items-center gap-1', wrap && 'flex-wrap', className)}>
+        {Array.from({ length: skeletonCount }, (_, i) => (
+          <QuickActionChipSkeleton key={i} labelCh={SKELETON_LABEL_CHS[i % SKELETON_LABEL_CHS.length]} />
+        ))}
+      </div>
+    )
+  }
+
   if (!leading && chips.length === 0) return null
 
   // Wrap mode: no width-measurement / "⋯" overflow — every chip renders inline

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

@@ -1557,7 +1557,13 @@ function EmbeddableChatInner({
   // history has loaded (`hasMessages`). Driving the surface + content branch
   // off this makes the normal-chat open animate identically to the archived
   // one instead of lagging behind the message fetch.
-  const hasConversation = hasMessages || isOpeningDialog || isViewingArchived
+  // In `previewMode`, the host drives the whole state (`mingoStateOverride`) and
+  // there is no dialog manager to set `isOpeningDialog`. So an embedded preview
+  // that wants a message-list skeleton (real header + composer, skeleton bubbles)
+  // signals it via `isMessagesLoading` — treat that as an open conversation so
+  // the content branch shows the skeleton instead of the new-user welcome.
+  const hasConversation =
+    hasMessages || isOpeningDialog || isViewingArchived || (previewMode && isMessagesLoading)
   // Opening a dialog whose history hasn't arrived yet — show a message-list
   // skeleton instead of an empty thread so the open reads as "loading" rather
   // than a blank flash before the bubbles stream in.
@@ -1680,6 +1686,10 @@ function EmbeddableChatInner({
                 className="flex flex-1 min-h-0 flex-col animate-in fade-in-0 duration-200"
               >
               <ChatPanelHeader
+                // Embedded previews (the hero demo tabs) keep the small bar at
+                // every width — the phone-sized full-screen header (large title)
+                // is wrong in a small embedded panel.
+                compact={previewMode}
                 // Guide-mode empty state shows a back-chevron + "Mingo Guide"
                 // (back returns to the default Mingo welcome); an open
                 // conversation shows back + the dialog title; the Mingo list

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

@@ -374,8 +374,14 @@ function updateTrailingAssistant(
  * here because the unified contract surfaces errors as banners, not
  * inline messages. (Hosts that need inline error bubbles can extend
  * the contract later.)
+ *
+ * Exported for host reuse (e.g. scripted marketing demos that rehydrate a
+ * stored `HistoricalMessage[]` via `processHistoricalMessagesWithErrors` and
+ * feed a `previewMode` EmbeddableChat). This mapper carries the segment/content
+ * shape only; author identity (name/avatar/authorType/timestamp) that a host
+ * needs for the demo is re-attached by the host from the same processed rows.
  */
-function mapProcessedToUnified(
+export function mapProcessedToUnified(
   processed: Array<{
     id: string
     role: 'user' | 'assistant' | 'error'

package/src/components/chat/quick-action-chip.tsx

@@ -145,6 +145,10 @@ export interface QuickActionChipButtonProps {
    *  Tag's `selected` variant (pink border + pink-secondary fill), overriding
    *  `variant`. Used by chip groups acting as tabs (OpenFrame categories). */
   selected?: boolean
+  /** Accent for the `selected` skin: `'cyan'` uses the cyan twin, anything else
+   *  (default) uses pink. Lets an agent's chip group match its own theme accent
+   *  (fae pink / mingo cyan) instead of the fixed pink. */
+  selectedAccent?: QuickActionAccent
   /** Chip scale, forwarded to `Tag` — `'large'` is the Figma "Feature Item"
    *  48px chip (h3 bold label, 24px icon box). Default `'default'` (32px). */
   size?: 'default' | 'large'
@@ -226,6 +230,7 @@ export function QuickActionChipButton({
   lozenge,
   variant = 'outline',
   selected = false,
+  selectedAccent,
   size = 'default',
   onSelect,
   onHoverStart,
@@ -235,7 +240,7 @@ export function QuickActionChipButton({
 }: QuickActionChipButtonProps) {
   const resolvedIcon = renderQuickActionIcon(icon)
   const resolvedLabel = composeChipLabel(label, lozenge)
-  const tagVariant = selected ? 'selected' : variant
+  const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant
   if (!interactive) {
     return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />
   }

package/src/components/ui/index.ts

@@ -83,6 +83,7 @@ export * from './chevron-button'
 export * from './circular-progress'
 export { CheckIcon, CheckCircleIcon as LucideCheckCircleIcon, XIcon as LucideXIcon, MinusIcon, XCircleIcon } from './custom-icons'
 export * from './dashboard-info-card'
+export * from './info-card-row'
 export * from './device-card'
 export * from './device-card-compact'
 export * from './entity-image'

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

@@ -0,0 +1,70 @@
+import type * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface InfoCardRowSection {
+  title: string
+  caption: string
+  icon?: React.ReactNode
+}
+
+export interface InfoCardRowProps {
+  lead: InfoCardRowSection
+  stats: [InfoCardRowSection, InfoCardRowSection]
+  className?: string
+}
+
+const CELL =
+  'flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] min-h-[60px] md:min-h-[76px]'
+
+function StatCell({ section, className }: { section: InfoCardRowSection; className?: string }) {
+  return (
+    <div className={cn(CELL, 'flex-1', className)}>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="truncate text-h5 uppercase text-ods-text-secondary">{section.title}</p>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-s)]">
+          <p className="min-w-0 flex-1 truncate text-h3 text-ods-text-primary">
+            {section.caption}
+          </p>
+          {section.icon && (
+            <div className="flex size-6 shrink-0 items-center justify-center md:hidden">
+              {section.icon}
+            </div>
+          )}
+        </div>
+      </div>
+      {section.icon && (
+        <div className="hidden size-6 shrink-0 items-center justify-center md:flex">
+          {section.icon}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function InfoCardRow({ lead, stats, className }: InfoCardRowProps) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card md:flex-row',
+        className,
+      )}
+    >
+      <div className={cn(CELL, 'border-b border-ods-border md:flex-1 md:border-b-0 md:border-r')}>
+        {lead.icon && (
+          <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-ods-border [&>*]:size-full [&_img]:object-cover">
+            {lead.icon}
+          </div>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col justify-center">
+          <p className="truncate text-h3 text-ods-text-primary">{lead.title}</p>
+          <p className="truncate text-h6 text-ods-text-secondary">{lead.caption}</p>
+        </div>
+      </div>
+
+      <div className="flex md:flex-1">
+        <StatCell section={stats[0]} className="border-r border-ods-border" />
+        <StatCell section={stats[1]} />
+      </div>
+    </div>
+  )
+}

package/src/components/ui/tag.tsx

@@ -58,6 +58,13 @@ const tagVariants = cva(
           "hover:bg-[var(--ods-flamingo-pink-secondary-hover)] hover:border-[var(--ods-flamingo-pink-base)]",
           "active:bg-[var(--ods-flamingo-pink-secondary-action)]",
         ],
+        // Cyan twin of `selected` (Mingo's accent) — same active-chip skin in the
+        // cyan theme so agent chip groups can match their own accent.
+        selectedCyan: [
+          "bg-[var(--ods-flamingo-cyan-secondary)] text-[var(--ods-system-greys-white)] border border-[var(--ods-flamingo-cyan-base)]",
+          "hover:bg-[var(--ods-flamingo-cyan-secondary-hover)] hover:border-[var(--ods-flamingo-cyan-base)]",
+          "active:bg-[var(--ods-flamingo-cyan-secondary-action)]",
+        ],
         // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
         // mono uppercase) so the tag-editor chips render identically to the public
         // tag badges. Used for FilterChipData variant 'tag' (see search-input).

package/src/stories/InfoCardRow.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { InfoCardRow } from '../components/ui/info-card-row'
+import { CheckCircleIcon } from '../components/icons-v2-generated/signs-and-symbols/check-circle-icon'
+import { TagIcon } from '../components/icons-v2-generated/shopping/tag-icon'
+
+// Stand-in company logo — the lead `icon` fills the 40px bordered avatar box.
+// In real usage this is typically an `<img>` logo (rendered with object-cover).
+const companyLogo = (
+  <div className="size-full" style={{ background: 'linear-gradient(135deg, #5EFAF0, #F357BB)' }} />
+)
+
+const meta = {
+  title: 'UI/InfoCardRow',
+  component: InfoCardRow,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A responsive summary row: a 50%-width lead section (icon + title/caption) and two 25%-width stat sections (title + caption + right icon). On mobile the two stat sections wrap into their own row beneath the lead (76px rows on desktop/tablet, 60px on mobile), and each stat icon drops onto the caption line. Neighbouring sections share inner borders; only the outer edges are rounded. Each section takes a required `title` and `caption`, and an optional `icon`.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    lead: { control: false, description: 'Lead section (50% width): { title, caption, icon? }' },
+    stats: {
+      control: false,
+      description: 'Two stat sections (25% width each): { title, caption, icon? }',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-[1024px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InfoCardRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Full row — lead logo + name/devices, and two stats with icons. Matches Figma. */
+export const Default: Story = {
+  args: {
+    lead: { title: 'Precision Accounting Partners', caption: '847 devices', icon: companyLogo },
+    stats: [
+      {
+        title: 'Resolved this week',
+        caption: '312',
+        icon: <CheckCircleIcon className="text-ods-success" />,
+      },
+      { title: 'Open tickets', caption: '2', icon: <TagIcon className="text-ods-text-secondary" /> },
+    ],
+  },
+}
+
+/** Icons omitted — text-only sections. */
+export const WithoutIcons: Story = {
+  args: {
+    lead: { title: 'Precision Accounting Partners', caption: '847 devices' },
+    stats: [
+      { title: 'Resolved this week', caption: '312' },
+      { title: 'Open tickets', caption: '2' },
+    ],
+  },
+}