@flamingo-stack/openframe-frontend-core 0.0.219 → 0.0.220-snapshot.20260602172647

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

@@ -0,0 +1,396 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { MingoIcon } from '../icons'
+import { Tag } from '../ui/tag'
+import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
+import {
+  Rocket01Icon,
+  BracketCurlyIcon,
+  SearchIcon,
+  LayersIcon,
+  CompassIcon,
+  Arrow01DownIcon,
+} from '../icons-v2-generated'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** A single capability cell in the 2-up feature grid. */
+export interface MingoFeatureCard {
+  /** Stable React key. */
+  id: string
+  /** Leading 16×16 icon (monochrome `ods-text-secondary`). */
+  icon?: React.ReactNode
+  /** Caption text. Line breaks (`\n`) are honoured (`whitespace-pre-line`)
+   *  so the two-line wrap stays fixed regardless of panel width. */
+  text: React.ReactNode
+}
+
+/** "New to OpenFrame?" one-time notification config. `null` hides the card. */
+export interface MingoWelcomePromo {
+  title: React.ReactNode
+  description: React.ReactNode
+}
+
+/** Extra quick-action chip rendered after the built-in "Start Guide Chat". */
+export interface MingoQuickAction {
+  /** Stable React key. */
+  id: string
+  label: string
+  icon?: React.ReactNode
+  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip. */
+  variant?: 'primary' | 'outline'
+  onClick?: () => void
+}
+
+export interface MingoWelcomeProps {
+  /** First name woven into the greeting. Empty/undefined → no-name variant. */
+  userName?: string
+  /** Greeting heading. Defaults to `Hey{, name}, I'm Mingo`. */
+  title?: React.ReactNode
+  /** Greeting sub-line under the heading. */
+  subtitle?: React.ReactNode
+  /** 2-up capability grid. Defaults to the four OpenFrame highlights. */
+  featureCards?: ReadonlyArray<MingoFeatureCard>
+  /** One-time "New to OpenFrame?" notification below the grid. `null` hides
+   *  it; omitting falls back to the OpenFrame default (only rendered when
+   *  `onStartGuideChat` is wired, i.e. Guide mode exists to advertise). */
+  promo?: MingoWelcomePromo | null
+  /** Storage key used to remember the promo dismissal. */
+  promoStorageKey?: string
+  /** Where the dismissal is persisted. `'local'` (default) survives across
+   *  sessions; `'session'` clears when the tab closes. */
+  promoStorage?: 'local' | 'session'
+  /** Extra quick-action chips appended after the "Start Guide Chat" chip. */
+  quickActions?: ReadonlyArray<MingoQuickAction>
+  /** Returning-user variation: the user already has chats. Hides the
+   *  "New to OpenFrame?" notification entirely and renders the "Start Guide
+   *  Chat" chip in the muted `outline` style instead of the accent yellow. */
+  hasExistingChats?: boolean
+  /** Returning-user main content — when provided (typically a
+   *  `<MingoChatHistory>`), it replaces the greeting + feature grid and owns
+   *  its own scroll region. The chips below stay pinned. */
+  dialogHistory?: React.ReactNode
+  /** When provided, renders the "Start Guide Chat" chip (the only wired
+   *  action — switches the host chat to Guide mode) and enables the default
+   *  promo notification. When omitted, both are suppressed. */
+  onStartGuideChat?: () => void
+  /** Appended to the root element. */
+  className?: string
+}
+
+// =============================================================================
+// Defaults (OpenFrame copy — overridable per Core Rule: platform-agnostic kit)
+// =============================================================================
+
+const DEFAULT_SUBTITLE =
+  'Ready to help with your technical tasks. What can I do for you?'
+
+const DEFAULT_FEATURE_CARDS: ReadonlyArray<MingoFeatureCard> = [
+  {
+    id: 'answers',
+    icon: <Rocket01Icon size={16} />,
+    text: 'Get instant answers about\ndevices, tickets, and clients',
+  },
+  {
+    id: 'scripts',
+    icon: <BracketCurlyIcon size={16} />,
+    text: 'Run scripts and queries\nthrough natural language',
+  },
+  {
+    id: 'summarize',
+    icon: <SearchIcon size={16} />,
+    text: 'Summarize long ticket\nthreads or activity history',
+  },
+  {
+    id: 'delegate',
+    icon: <LayersIcon size={16} />,
+    text: 'Delegate tasks, let Mingo\nwork in the background',
+  },
+]
+
+const DEFAULT_PROMO: MingoWelcomePromo = {
+  title: 'New to OpenFrame?',
+  description: 'Start a Guide Chat to learn how it works and how to set it up.',
+}
+
+const DEFAULT_PROMO_STORAGE_KEY = 'mingo-welcome:promo-dismissed'
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * MingoWelcome — Figma node `7532:222444`.
+ *
+ * Default (Mingo-mode) chat empty state: a vertically-centred greeting that
+ * grows to fill available height, then a pinned stack of a 2-up capability
+ * grid, an optional one-time "New to OpenFrame?" notification, and a
+ * quick-action chip row. The Guide-mode empty state keeps the slash-command
+ * onboarding list.
+ *
+ * Content is configurable (props) with OpenFrame defaults so the kit stays
+ * platform-agnostic. The "Start Guide Chat" chip is the only wired action —
+ * it switches the host chat to Guide mode via `onStartGuideChat`. The
+ * notification carries no action; its dismiss "X" persists to local/session
+ * storage so it shows only until the user closes it once.
+ */
+export function MingoWelcome({
+  userName,
+  title,
+  subtitle = DEFAULT_SUBTITLE,
+  featureCards = DEFAULT_FEATURE_CARDS,
+  promo,
+  promoStorageKey = DEFAULT_PROMO_STORAGE_KEY,
+  promoStorage = 'local',
+  quickActions,
+  hasExistingChats = false,
+  dialogHistory,
+  onStartGuideChat,
+  className,
+}: MingoWelcomeProps) {
+  const heading =
+    title ?? (userName ? `Hey ${userName}, I'm Mingo` : "Hey, I'm Mingo")
+
+  // `promo` omitted → fall back to the OpenFrame default, but only when guide
+  // mode exists to advertise (otherwise the notification points nowhere).
+  // Returning users (`hasExistingChats`) never see the onboarding notification.
+  const resolvedPromo = hasExistingChats
+    ? null
+    : promo === undefined
+      ? onStartGuideChat
+        ? DEFAULT_PROMO
+        : null
+      : promo
+
+  // One-time notification: hydrate the dismissal from storage after mount
+  // (SSR-safe — `window` is untouched on the server). Default to "not
+  // dismissed" so the first paint shows it, then hide if storage says so.
+  const [promoDismissed, setPromoDismissed] = React.useState(false)
+  React.useEffect(() => {
+    if (!resolvedPromo) return
+    try {
+      const store =
+        promoStorage === 'session' ? window.sessionStorage : window.localStorage
+      if (store.getItem(promoStorageKey) === '1') setPromoDismissed(true)
+    } catch {
+      // Storage can throw (private mode, blocked cookies) — treat as
+      // "not dismissed" and simply keep showing the notification.
+    }
+  }, [resolvedPromo, promoStorage, promoStorageKey])
+
+  const dismissPromo = React.useCallback(() => {
+    setPromoDismissed(true)
+    try {
+      const store =
+        promoStorage === 'session' ? window.sessionStorage : window.localStorage
+      store.setItem(promoStorageKey, '1')
+    } catch {
+      // Best-effort persistence; the in-memory state still hides it for
+      // the rest of this session.
+    }
+  }, [promoStorage, promoStorageKey])
+
+  // Scroll-fade affordances: show a 48px gradient at the top/bottom edge of the
+  // scroll region only while content is actually hidden in that direction.
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [scrollFade, setScrollFade] = React.useState({ top: false, bottom: false })
+  const updateScrollFade = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const top = el.scrollTop > 1
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    setScrollFade((prev) =>
+      prev.top === top && prev.bottom === bottom ? prev : { top, bottom },
+    )
+  }, [])
+  React.useEffect(() => {
+    updateScrollFade()
+    const el = scrollRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    // Recompute when the panel resizes — a taller panel may remove the need
+    // to scroll entirely, a shorter one introduces it.
+    const ro = new ResizeObserver(updateScrollFade)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateScrollFade])
+
+  const cellCount = featureCards.length
+  // Last row's first index — used to drop the bottom divider on the final row.
+  const lastRowStart = cellCount - ((cellCount % 2) || 2)
+
+  return (
+    <div
+      className={cn(
+        // `@container` makes the panel itself the responsive context (the
+        // drawer width ≠ viewport width) so the notification's down-arrow can
+        // appear only once the panel is genuinely wide.
+        '@container flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)]',
+        className,
+      )}
+    >
+      {/* Returning users see their dialog history (its own scroll region) in
+          place of the greeting + grid. */}
+      {dialogHistory ?? (
+      <>
+      {/* Scrollable region — only the greeting + grid scroll; the notification
+          and chips below stay pinned so they're always visible above the
+          input. The wrapper is `relative` so the scroll-fade gradients can
+          overlay the top/bottom edges. */}
+      <div className="relative flex flex-1 min-h-0 flex-col">
+      <div
+        ref={scrollRef}
+        onScroll={updateScrollFade}
+        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+      >
+        {/* Greeting — grows to fill (`flex-1`) so it centres vertically,
+            keeping the grid anchored at the bottom of the scroll area. Default
+            `min-height: auto` (no `min-h-0`) stops it shrinking below its own
+            content, so the region scrolls instead of the greeting overlapping
+            the grid. Padding is modest so it never dominates the narrow panel. */}
+        <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-l)] px-[var(--spacing-system-l)] py-[var(--spacing-system-xxl)] text-center">
+        <MingoIcon
+          className="h-12 w-12"
+          color="white"
+          eyesColor="var(--ods-flamingo-cyan-base)"
+          cornerColor="var(--ods-flamingo-cyan-base)"
+        />
+        <div className="flex w-full flex-col gap-1">
+          <p className="text-h4 text-ods-text-primary">{heading}</p>
+          <p className="text-h6 text-ods-text-secondary">{subtitle}</p>
+        </div>
+      </div>
+
+      {/* 2-up capability grid. `shrink-0` keeps every cell at its natural
+          height so the bottom row is never clipped (the root scrolls instead).
+          Cells share the lighter `ods-card` surface; 1px `ods-border` dividers
+          (right on the left column, bottom on every row but the last) draw the
+          inner cross. Captions use explicit `\n` breaks (`whitespace-pre-line`)
+          so the two-line wrap is fixed and never reflows with panel width. */}
+      {cellCount > 0 && (
+        <div className="grid shrink-0 grid-cols-2 overflow-hidden rounded-md border border-ods-border bg-ods-card">
+          {featureCards.map((card, i) => (
+            <div
+              key={card.id}
+              className={cn(
+                'flex flex-col items-center justify-center gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)] text-center',
+                i % 2 === 0 && 'border-r border-ods-border',
+                i < lastRowStart && 'border-b border-ods-border',
+              )}
+            >
+              {card.icon ? (
+                <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-primary">
+                  {card.icon}
+                </span>
+              ) : null}
+              <p className="text-h4 text-ods-text-secondary whitespace-pre-line">
+                {card.text}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+      </div>
+
+      {/* Top scroll-fade — visible only when content is hidden above. */}
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+          scrollFade.top ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
+      {/* Bottom scroll-fade — visible only when content is hidden below. */}
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+          scrollFade.bottom ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
+      </div>
+      </>
+      )}
+
+      {/* Pinned region — always visible above the input. */}
+      <div className="flex shrink-0 flex-col gap-[var(--spacing-system-m)]">
+      {/* "New to OpenFrame?" — a one-time informational notification (no
+          action). The leading down-arrow (Figma node 7532:317130) only shows
+          once the panel is wide (`@2xl`), mirroring the responsive design. The
+          dismiss "X" persists to local/session storage via `dismissPromo`, so
+          once closed it stays hidden. The actual Guide entry point is the
+          "Start Guide Chat" chip below. */}
+      {resolvedPromo && !promoDismissed && (
+        <div className="relative shrink-0 flex items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)] pr-[var(--spacing-system-xl)]">
+          <span className="hidden @2xl:flex size-4 shrink-0 items-center justify-center text-ods-text-primary">
+            <Arrow01DownIcon size={16} />
+          </span>
+          <div className="flex min-w-0 flex-col items-start gap-1">
+            <span className="text-h3 text-ods-text-primary">
+              {resolvedPromo.title}
+            </span>
+            <span className="text-h6 text-ods-text-secondary">
+              {resolvedPromo.description}
+            </span>
+          </div>
+          {/* Plain cross — no button chrome, just a clickable icon. */}
+          <button
+            type="button"
+            onClick={dismissPromo}
+            aria-label="Dismiss"
+            className="absolute right-2 top-2 text-ods-text-secondary transition-colors hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent rounded-sm"
+          >
+            <XmarkIcon size={16} />
+          </button>
+        </div>
+      )}
+
+      {/* Quick-action chips. Only "Start Guide Chat" is wired by default; the
+          chip and any `quickActions` use the design-system <Tag>, wrapped in a
+          real <button> so each chip gets keyboard focus + a focus ring. */}
+      {(onStartGuideChat || (quickActions && quickActions.length > 0)) && (
+        <div className="flex shrink-0 flex-wrap items-center gap-1">
+          {onStartGuideChat && (
+            <button
+              type="button"
+              onClick={onStartGuideChat}
+              className="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+            >
+              <Tag
+                variant={hasExistingChats ? 'outline' : 'primary'}
+                icon={<CompassIcon size={16} />}
+                label="Start Guide Chat"
+              />
+            </button>
+          )}
+          {quickActions?.map((action) => (
+            <button
+              key={action.id}
+              type="button"
+              onClick={action.onClick}
+              className="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+            >
+              <Tag
+                variant={action.variant ?? 'outline'}
+                icon={action.icon}
+                label={action.label}
+              />
+            </button>
+          ))}
+        </div>
+      )}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/types/unified-chat-state.types.ts

@@ -285,6 +285,14 @@ export interface UnifiedChatState {
    *  Mingo gates on the host-provided callback). */
   deleteDialog: (id: string) => Promise<void>
 
+  /** Rename a dialog. Optimistically updates the title in the local list.
+   *  No-op when the adapter doesn't expose a rename callback. */
+  renameDialog: (id: string, title: string) => Promise<void>
+
+  /** Archive a dialog (removes it from the active list). No-op when the
+   *  adapter doesn't expose an archive callback. */
+  archiveDialog: (id: string) => Promise<void>
+
   /** True while the dialog list is being fetched for the first time. */
   isDialogsLoading: boolean
 

package/src/components/icons-v2/brand-logos/fleet-mdm-logo-grey.svg

@@ -1,8 +1,8 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.51209 6.99996C5.89948 6.99996 7.02419 5.88068 7.02419 4.49998C7.02419 3.11928 5.89948 2 4.51209 2C3.1247 2 2 3.11928 2 4.49998C2 5.88068 3.1247 6.99996 4.51209 6.99996Z" fill="#2EC318"/>
-<path d="M12.0483 6.99996C13.4356 6.99996 14.5603 5.88068 14.5603 4.49998C14.5603 3.11928 13.4356 2 12.0483 2C10.6608 2 9.53613 3.11928 9.53613 4.49998C9.53613 5.88068 10.6608 6.99996 12.0483 6.99996Z" fill="#36A8DE"/>
-<path d="M19.5844 6.99996C20.9718 6.99996 22.0964 5.88068 22.0964 4.49998C22.0964 3.11928 20.9718 2 19.5844 2C18.197 2 17.0723 3.11928 17.0723 4.49998C17.0723 5.88068 18.197 6.99996 19.5844 6.99996Z" fill="#F9667D"/>
-<path d="M4.51209 14.5C5.89948 14.5 7.02419 13.3807 7.02419 12C7.02419 10.6193 5.89948 9.5 4.51209 9.5C3.1247 9.5 2 10.6193 2 12C2 13.3807 3.1247 14.5 4.51209 14.5Z" fill="#C561D7"/>
-<path d="M12.0483 14.5C13.4356 14.5 14.5603 13.3807 14.5603 12C14.5603 10.6193 13.4356 9.5 12.0483 9.5C10.6608 9.5 9.53613 10.6193 9.53613 12C9.53613 13.3807 10.6608 14.5 12.0483 14.5Z" fill="#FF9B57"/>
-<path d="M4.51209 22C5.89948 22 7.02419 20.8808 7.02419 19.5C7.02419 18.1194 5.89948 17.0001 4.51209 17.0001C3.1247 17.0001 2 18.1194 2 19.5C2 20.8808 3.1247 22 4.51209 22Z" fill="#00EBBC"/>
+<path d="M4.51209 6.99996C5.89948 6.99996 7.02419 5.88068 7.02419 4.49998C7.02419 3.11928 5.89948 2 4.51209 2C3.1247 2 2 3.11928 2 4.49998C2 5.88068 3.1247 6.99996 4.51209 6.99996Z" fill="#888888"/>
+<path d="M12.0483 6.99996C13.4356 6.99996 14.5603 5.88068 14.5603 4.49998C14.5603 3.11928 13.4356 2 12.0483 2C10.6608 2 9.53613 3.11928 9.53613 4.49998C9.53613 5.88068 10.6608 6.99996 12.0483 6.99996Z" fill="#888888"/>
+<path d="M19.5844 6.99996C20.9718 6.99996 22.0964 5.88068 22.0964 4.49998C22.0964 3.11928 20.9718 2 19.5844 2C18.197 2 17.0723 3.11928 17.0723 4.49998C17.0723 5.88068 18.197 6.99996 19.5844 6.99996Z" fill="#888888"/>
+<path d="M4.51209 14.5C5.89948 14.5 7.02419 13.3807 7.02419 12C7.02419 10.6193 5.89948 9.5 4.51209 9.5C3.1247 9.5 2 10.6193 2 12C2 13.3807 3.1247 14.5 4.51209 14.5Z" fill="#888888"/>
+<path d="M12.0483 14.5C13.4356 14.5 14.5603 13.3807 14.5603 12C14.5603 10.6193 13.4356 9.5 12.0483 9.5C10.6608 9.5 9.53613 10.6193 9.53613 12C9.53613 13.3807 10.6608 14.5 12.0483 14.5Z" fill="#888888"/>
+<path d="M4.51209 22C5.89948 22 7.02419 20.8808 7.02419 19.5C7.02419 18.1194 5.89948 17.0001 4.51209 17.0001C3.1247 17.0001 2 18.1194 2 19.5C2 20.8808 3.1247 22 4.51209 22Z" fill="#888888"/>
 </svg>

package/src/components/icons-v2/brand-logos/fleet-mdm-logo.svg

@@ -1,8 +1,8 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.51209 6.99996C5.89948 6.99996 7.02419 5.88068 7.02419 4.49998C7.02419 3.11928 5.89948 2 4.51209 2C3.1247 2 2 3.11928 2 4.49998C2 5.88068 3.1247 6.99996 4.51209 6.99996Z" fill="#888888"/>
-<path d="M12.0483 6.99996C13.4356 6.99996 14.5603 5.88068 14.5603 4.49998C14.5603 3.11928 13.4356 2 12.0483 2C10.6608 2 9.53613 3.11928 9.53613 4.49998C9.53613 5.88068 10.6608 6.99996 12.0483 6.99996Z" fill="#888888"/>
-<path d="M19.5844 6.99996C20.9718 6.99996 22.0964 5.88068 22.0964 4.49998C22.0964 3.11928 20.9718 2 19.5844 2C18.197 2 17.0723 3.11928 17.0723 4.49998C17.0723 5.88068 18.197 6.99996 19.5844 6.99996Z" fill="#888888"/>
-<path d="M4.51209 14.5C5.89948 14.5 7.02419 13.3807 7.02419 12C7.02419 10.6193 5.89948 9.5 4.51209 9.5C3.1247 9.5 2 10.6193 2 12C2 13.3807 3.1247 14.5 4.51209 14.5Z" fill="#888888"/>
-<path d="M12.0483 14.5C13.4356 14.5 14.5603 13.3807 14.5603 12C14.5603 10.6193 13.4356 9.5 12.0483 9.5C10.6608 9.5 9.53613 10.6193 9.53613 12C9.53613 13.3807 10.6608 14.5 12.0483 14.5Z" fill="#888888"/>
-<path d="M4.51209 22C5.89948 22 7.02419 20.8808 7.02419 19.5C7.02419 18.1194 5.89948 17.0001 4.51209 17.0001C3.1247 17.0001 2 18.1194 2 19.5C2 20.8808 3.1247 22 4.51209 22Z" fill="#888888"/>
+<path d="M4.51209 6.99996C5.89948 6.99996 7.02419 5.88068 7.02419 4.49998C7.02419 3.11928 5.89948 2 4.51209 2C3.1247 2 2 3.11928 2 4.49998C2 5.88068 3.1247 6.99996 4.51209 6.99996Z" fill="#2EC318"/>
+<path d="M12.0483 6.99996C13.4356 6.99996 14.5603 5.88068 14.5603 4.49998C14.5603 3.11928 13.4356 2 12.0483 2C10.6608 2 9.53613 3.11928 9.53613 4.49998C9.53613 5.88068 10.6608 6.99996 12.0483 6.99996Z" fill="#36A8DE"/>
+<path d="M19.5844 6.99996C20.9718 6.99996 22.0964 5.88068 22.0964 4.49998C22.0964 3.11928 20.9718 2 19.5844 2C18.197 2 17.0723 3.11928 17.0723 4.49998C17.0723 5.88068 18.197 6.99996 19.5844 6.99996Z" fill="#F9667D"/>
+<path d="M4.51209 14.5C5.89948 14.5 7.02419 13.3807 7.02419 12C7.02419 10.6193 5.89948 9.5 4.51209 9.5C3.1247 9.5 2 10.6193 2 12C2 13.3807 3.1247 14.5 4.51209 14.5Z" fill="#C561D7"/>
+<path d="M12.0483 14.5C13.4356 14.5 14.5603 13.3807 14.5603 12C14.5603 10.6193 13.4356 9.5 12.0483 9.5C10.6608 9.5 9.53613 10.6193 9.53613 12C9.53613 13.3807 10.6608 14.5 12.0483 14.5Z" fill="#FF9B57"/>
+<path d="M4.51209 22C5.89948 22 7.02419 20.8808 7.02419 19.5C7.02419 18.1194 5.89948 17.0001 4.51209 17.0001C3.1247 17.0001 2 18.1194 2 19.5C2 20.8808 3.1247 22 4.51209 22Z" fill="#00EBBC"/>
 </svg>

package/src/components/icons-v2-generated/brand-logos/fleet-mdm-logo-grey-icon.tsx

@@ -22,28 +22,8 @@ export function FleetMdmLogoGreyIcon({
       {...props}
     >
       <path
-        fill="#2EC318"
-        d="M4.512 7a2.506 2.506 0 0 0 2.512-2.5C7.024 3.12 5.9 2 4.512 2A2.506 2.506 0 0 0 2 4.5C2 5.88 3.125 7 4.512 7"
-      />
-      <path
-        fill="#36A8DE"
-        d="M12.048 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5"
-      />
-      <path
-        fill="#F9667D"
-        d="M19.584 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5"
-      />
-      <path
-        fill="#C561D7"
-        d="M4.512 14.5A2.506 2.506 0 0 0 7.024 12c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 12c0 1.38 1.125 2.5 2.512 2.5"
-      />
-      <path
-        fill="#FF9B57"
-        d="M12.048 14.5A2.506 2.506 0 0 0 14.56 12c0-1.38-1.124-2.5-2.512-2.5A2.506 2.506 0 0 0 9.536 12c0 1.38 1.125 2.5 2.512 2.5"
-      />
-      <path
-        fill="#00EBBC"
-        d="M4.512 22a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 19.5C2 20.88 3.125 22 4.512 22"
+        fill={color}
+        d="M4.512 7a2.506 2.506 0 0 0 2.512-2.5C7.024 3.12 5.9 2 4.512 2A2.506 2.506 0 0 0 2 4.5C2 5.88 3.125 7 4.512 7M12.048 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5M19.584 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5M4.512 14.5A2.506 2.506 0 0 0 7.024 12c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 12c0 1.38 1.125 2.5 2.512 2.5M12.048 14.5A2.506 2.506 0 0 0 14.56 12c0-1.38-1.124-2.5-2.512-2.5A2.506 2.506 0 0 0 9.536 12c0 1.38 1.125 2.5 2.512 2.5M4.512 22a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 19.5C2 20.88 3.125 22 4.512 22"
       />
     </svg>
   );

package/src/components/icons-v2-generated/brand-logos/fleet-mdm-logo-icon.tsx

@@ -22,8 +22,28 @@ export function FleetMdmLogoIcon({
       {...props}
     >
       <path
-        fill={color}
-        d="M4.512 7a2.506 2.506 0 0 0 2.512-2.5C7.024 3.12 5.9 2 4.512 2A2.506 2.506 0 0 0 2 4.5C2 5.88 3.125 7 4.512 7M12.048 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5M19.584 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5M4.512 14.5A2.506 2.506 0 0 0 7.024 12c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 12c0 1.38 1.125 2.5 2.512 2.5M12.048 14.5A2.506 2.506 0 0 0 14.56 12c0-1.38-1.124-2.5-2.512-2.5A2.506 2.506 0 0 0 9.536 12c0 1.38 1.125 2.5 2.512 2.5M4.512 22a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 19.5C2 20.88 3.125 22 4.512 22"
+        fill="#2EC318"
+        d="M4.512 7a2.506 2.506 0 0 0 2.512-2.5C7.024 3.12 5.9 2 4.512 2A2.506 2.506 0 0 0 2 4.5C2 5.88 3.125 7 4.512 7"
+      />
+      <path
+        fill="#36A8DE"
+        d="M12.048 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5"
+      />
+      <path
+        fill="#F9667D"
+        d="M19.584 7a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.124-2.5-2.512-2.5a2.506 2.506 0 0 0-2.512 2.5c0 1.38 1.125 2.5 2.512 2.5"
+      />
+      <path
+        fill="#C561D7"
+        d="M4.512 14.5A2.506 2.506 0 0 0 7.024 12c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 12c0 1.38 1.125 2.5 2.512 2.5"
+      />
+      <path
+        fill="#FF9B57"
+        d="M12.048 14.5A2.506 2.506 0 0 0 14.56 12c0-1.38-1.124-2.5-2.512-2.5A2.506 2.506 0 0 0 9.536 12c0 1.38 1.125 2.5 2.512 2.5"
+      />
+      <path
+        fill="#00EBBC"
+        d="M4.512 22a2.506 2.506 0 0 0 2.512-2.5c0-1.38-1.125-2.5-2.512-2.5A2.506 2.506 0 0 0 2 19.5C2 20.88 3.125 22 4.512 22"
       />
     </svg>
   );

package/src/components/layout/page-heading.tsx

@@ -2,14 +2,15 @@ import type { ReactNode } from 'react'
 
 /**
  * THE page-title style — the ODS `text-h1` token (`--font-size-h1-title` =
- * 40 / 48 / 56px, Azeret Mono semibold) plus the standard heading tracking.
- * Mirrors the global `h1 { @apply text-h1 }` base, so every page heading is
- * the SAME size across the lib and every consuming app.
+ * 40 / 48 / 56px, Azeret Mono semibold), which already owns the responsive
+ * letter-spacing (-0.02em). Mirrors the global `h1 { @apply text-h1 }` base, so
+ * every page heading is the SAME size across the lib and every consuming app.
  *
- * Single source of truth — do NOT hardcode a px size for a page title; render
- * `<PageHeading>` (or, for the rare non-h1 caller, apply `PAGE_HEADING_CLASS`).
+ * Single source of truth — do NOT hardcode a px size or re-assert the token's
+ * tracking; render `<PageHeading>` (or, for the rare non-h1 caller, apply
+ * `PAGE_HEADING_CLASS`).
  */
-export const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary tracking-[-1.12px]'
+export const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary'
 
 const DESCRIPTION_CLASS =
   "mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary"
@@ -45,10 +46,15 @@ export function PageHeading({
 }: PageHeadingProps) {
   const headingClass = className ? `${PAGE_HEADING_CLASS} ${className}` : PAGE_HEADING_CLASS
   const descClass = descriptionClassName ? `${DESCRIPTION_CLASS} ${descriptionClassName}` : DESCRIPTION_CLASS
+  // `description` is a ReactNode, so `description={cond && '...'}` can pass a
+  // boolean `false` — exclude it (and empty string) so we never render an empty
+  // <p> that adds phantom vertical gap beneath the heading.
+  const hasDescription =
+    description != null && description !== '' && typeof description !== 'boolean'
   return (
     <>
       <Tag className={headingClass}>{children}</Tag>
-      {description != null && description !== '' && <p className={descClass}>{description}</p>}
+      {hasDescription && <p className={descClass}>{description}</p>}
     </>
   )
 }

package/src/components/navigation/app-header.tsx

@@ -129,18 +129,6 @@ export const AppHeader = React.memo(function AppHeader({
         />
       )}
 
-      {/* Mingo AI launcher — placed to the LEFT of notifications so the user
-          menu cluster (notifications → avatar) stays anchored to the right. */}
-      {showMingoAI && (
-        <HeaderMingoButton
-          onClick={onMingoAI}
-          isActive={isMingoAIActive}
-          iconOnly={!isMdUp}
-          disabled={disabled || !onMingoAI}
-          className={dimmedClass}
-        />
-      )}
-
       {/* Notifications button */}
       {showNotifications && (
         <NotificationsHeaderButton
@@ -216,6 +204,18 @@ export const AppHeader = React.memo(function AppHeader({
           </DropdownMenuContent>
         </DropdownMenu>
       )}
+
+      {/* Mingo AI launcher — anchored at the very end of the header. On mobile
+          it collapses to an icon-only affordance (no "Mingo AI" wordmark). */}
+      {showMingoAI && (
+        <HeaderMingoButton
+          onClick={onMingoAI}
+          isActive={isMingoAIActive}
+          iconOnly={!isMdUp}
+          disabled={disabled || !onMingoAI}
+          className={dimmedClass}
+        />
+      )}
     </header>
   )
 })