@flamingo-stack/openframe-frontend-core 0.0.428-snapshot.20260715202150 → 0.0.428

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

@@ -1,7 +1,6 @@
 '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,
@@ -43,11 +42,6 @@ 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
 }
 
 /**
@@ -67,7 +61,6 @@ export function ChatPanelHeader({
   onRename,
   onArchive,
   onOpenArchive,
-  compact = false,
 }: ChatPanelHeaderProps) {
   // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
@@ -77,28 +70,23 @@ export function ChatPanelHeader({
 
   return (
     <>
-      {/* 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}
-        />
-      )}
+      {/* 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}
+      />
 
-      {/* 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')}>
+      {/* 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">
         <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,10 +9,8 @@ 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'
 
 // =============================================================================
@@ -29,11 +27,6 @@ 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. */
@@ -54,18 +47,9 @@ 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
 // =============================================================================
@@ -78,8 +62,6 @@ 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}
@@ -104,8 +86,6 @@ export function ChatQuickActionRow({
   leading,
   chips,
   wrap = false,
-  loading = false,
-  skeletonCount = 8,
   className,
 }: ChatQuickActionRowProps) {
   const auto = useAutoLimitTags({
@@ -116,19 +96,6 @@ 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,13 +1557,7 @@ 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.
-  // 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)
+  const hasConversation = hasMessages || isOpeningDialog || isViewingArchived
   // 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.
@@ -1686,10 +1680,6 @@ 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,14 +374,8 @@ 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.
  */
-export function mapProcessedToUnified(
+function mapProcessedToUnified(
   processed: Array<{
     id: string
     role: 'user' | 'assistant' | 'error'

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

@@ -145,10 +145,6 @@ 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'
@@ -230,7 +226,6 @@ export function QuickActionChipButton({
   lozenge,
   variant = 'outline',
   selected = false,
-  selectedAccent,
   size = 'default',
   onSelect,
   onHoverStart,
@@ -240,7 +235,7 @@ export function QuickActionChipButton({
 }: QuickActionChipButtonProps) {
   const resolvedIcon = renderQuickActionIcon(icon)
   const resolvedLabel = composeChipLabel(label, lozenge)
-  const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant
+  const tagVariant = selected ? 'selected' : variant
   if (!interactive) {
     return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />
   }

package/src/components/ui/index.ts

@@ -83,7 +83,6 @@ 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/tag.tsx

@@ -58,13 +58,6 @@ 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).