@flamingo-stack/openframe-frontend-core 0.0.503 → 0.0.504-snapshot.20260801181709

package/dist/utils/sse-subscription.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Fetch-based SSE subscription primitive.
+ *
+ * Why not `EventSource`: cross-origin embedders authenticate via the
+ * `embedAuthedFetch` adapter's HEADERS (OpenFrame bearer), which
+ * `EventSource` cannot carry. This reads `response.body` from a normal
+ * authed fetch and parses standard `event:`/`data:` frames.
+ *
+ * Lifecycle (never-terminating by design):
+ *   - Infinite reconnects with capped exponential backoff (~30s max +
+ *     jitter), reset on a successful open. Do NOT copy the terminating
+ *     `maxRetries → exhausted` model of the hub's server-side
+ *     `RealtimeRetryManager` — a long outage must self-heal when the
+ *     backend returns, because there is NO polling fallback behind this.
+ *   - Liveness by silence: the server keepalives every ~15s; any bytes
+ *     (INCLUDING `: keepalive` comment lines — they reset the timer
+ *     before frame parsing drops them) count as life. Silence beyond
+ *     `silenceTimeoutMs` (default 45s = 3× keepalive) aborts + reconnects.
+ *   - Terminal responses (NO retry): any 4xx except 408/429 — the
+ *     `x-block-layer` header, when readable, is logged for attribution
+ *     only, never used as a retry gate (proxies may strip it); and
+ *     204 → a distinct `no-stream` status (the caller decides when to
+ *     try again). Backoff-retry is for transport errors, 408/429, and 5xx.
+ *
+ * THE common SSE client for lib + hosts — exported from the `utils`
+ * barrel. Consumers: `TicketLiveProvider` (lib) and the hub's
+ * workflow/invocation stream hooks (which replaced the hub's old
+ * EventSource-based `sse-client.ts`). Finite streams (workflows,
+ * invocations) end with a terminal event and a server-side close —
+ * their handlers MUST call `close()` on the terminal event, or the
+ * never-terminating reconnect loop re-opens the finished stream.
+ */
+/** Transport-level status. Server-sent `status` FRAMES (`subscribed` /
+ *  `retrying` / `reconnect_failed`) arrive via `onEvent('status', …)` —
+ *  callers derive their "connected" notion from those, not from these. */
+export type SseTransportStatus = 'connecting' | 'open' | 'reconnecting' | 'no-stream' | 'terminal' | 'closed';
+export interface SseSubscriptionOptions {
+    url: string;
+    /** Defaults to `embedAuthedFetch` (adapter headers + credentials). */
+    fetchImpl?: (url: string, init?: RequestInit) => Promise<Response>;
+    /** Called per parsed frame: `eventName` from `event:` (default
+     *  'message'), `data` JSON-parsed when possible (raw string otherwise). */
+    onEvent: (eventName: string, data: unknown) => void;
+    onStatusChange?: (status: SseTransportStatus) => void;
+    /** Silence threshold before the connection is presumed dead. MUST be
+     *  ≥2.5× the server keepalive cadence or jitter causes false-disconnect
+     *  churn (each one costs a full server invocation). */
+    silenceTimeoutMs?: number;
+    maxBackoffMs?: number;
+    initialBackoffMs?: number;
+}
+export interface SseSubscription {
+    /** Permanently stop — no further reconnects, no callbacks. */
+    close: () => void;
+    /** Drop the current connection (if any) and reconnect immediately,
+     *  resetting backoff. No-op after `close()`. */
+    reconnectNow: () => void;
+}
+export declare function createSseSubscription(options: SseSubscriptionOptions): SseSubscription;
+//# sourceMappingURL=sse-subscription.d.ts.map

package/dist/utils/sse-subscription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sse-subscription.d.ts","sourceRoot":"","sources":["../../src/utils/sse-subscription.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH;;0EAE0E;AAC1E,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ,MAAM,GACN,cAAc,GACd,WAAW,GACX,UAAU,GACV,QAAQ,CAAA;AAEZ,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,sEAAsE;IACtE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IAClE;+EAC2E;IAC3E,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACrD;;2DAEuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB;oDACgD;IAChD,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAMD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,sBAAsB,GAAG,eAAe,CAyMtF"}

package/package.json

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

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -93,7 +93,7 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
             <>
               <ClockHistoryIcon
                 className={cn(
-                  'h-4 w-4 md:h-6 md:w-6',
+                  'h-6 w-6',
                   isPaused ? 'text-ods-text-secondary' : isActive && 'text-ods-accent',
                 )}
               />

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

@@ -11,6 +11,7 @@ import { BellIcon } from '../icons-v2-generated/interface/bell-icon';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui';
 import { HeaderButton } from './header-button';
 import { HeaderGlobalSearch } from './header-global-search';
+import { TicketAlertsButton } from './ticket-alerts-button';
 import { HeaderMingoButton } from './header-mingo-button';
 import { HeaderOrganizationFilter } from './header-organization-filter';
 import { TopNavigation } from './top-navigation';
@@ -24,6 +25,14 @@ export interface AppHeaderProps {
   onOrgChange?: (id: string) => void;
   showNotifications?: boolean;
   unreadCount?: number;
+  /** Render the support-ticket alerts cell (`TicketAlertsButton`).
+   *  Requires wrapping the app in `<TicketLiveProvider>` — without it
+   *  the cell renders nothing. */
+  showTicketAlerts?: boolean;
+  /** Navigation target for the tickets surface (e.g. '/help-center/tickets'). */
+  ticketAlertsHref?: string;
+  /** Host navigation for the tickets cell (router push). Wins over href. */
+  onTicketAlerts?: () => void;
   /** Render the time-tracker button + popup. Requires wrapping the app in `<TimeTrackerProvider>`. */
   showTimeTracker?: boolean;
   /** Render the "Mingo AI" launcher button (drawer-style trigger for an
@@ -110,6 +119,9 @@ export const AppHeader = React.memo(function AppHeader({
   onOrgChange,
   showNotifications,
   unreadCount = 0,
+  showTicketAlerts = false,
+  ticketAlertsHref,
+  onTicketAlerts,
   showTimeTracker = false,
   showMingoAI = false,
   onMingoAI,
@@ -145,6 +157,7 @@ export const AppHeader = React.memo(function AppHeader({
             showOrganizations && 'icon-lg',
             showTimeTracker && 'icon',
             showNotifications && 'icon',
+            showTicketAlerts && 'icon',
             showUser && 'icon-md',
             showMingoAI && 'wide',
           ].filter(Boolean) as HeaderLoadingCell[])
@@ -169,7 +182,7 @@ export const AppHeader = React.memo(function AppHeader({
           <HeaderButton
             onClick={onToggleMobileMenu}
             isActive={isMobileMenuOpen}
-            icon={isMobileMenuOpen ? <XmarkIcon className="w-4 h-4" /> : <Menu01Icon className="w-4 h-4" />}
+            icon={isMobileMenuOpen ? <XmarkIcon className="w-6 h-6" /> : <Menu01Icon className="w-6 h-6" />}
             aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
             aria-expanded={isMobileMenuOpen}
             className="border-r border-ods-border"
@@ -195,7 +208,7 @@ export const AppHeader = React.memo(function AppHeader({
           {/* Mobile: Search button */}
           {showSearch && (
             <HeaderButton
-              icon={<SearchIcon className="w-4 h-4 md:w-6 md:h-6" />}
+              icon={<SearchIcon className="w-6 h-6" />}
               aria-label="Search"
               className={cn('md:hidden', cellDivider, dimmedClass)}
               disabled={disabled}
@@ -224,6 +237,17 @@ export const AppHeader = React.memo(function AppHeader({
             />
           )}
 
+          {/* Support-ticket alerts (Help Center) — renders nothing when
+              no <TicketLiveProvider> is mounted. */}
+          {showTicketAlerts && (
+            <TicketAlertsButton
+              href={ticketAlertsHref}
+              onClick={onTicketAlerts}
+              disabled={disabled}
+              className={cn(cellDivider, dimmedClass)}
+            />
+          )}
+
           {isMdUp && showUser && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild disabled={disabled}>
@@ -322,18 +346,10 @@ function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass
 
   return (
     <HeaderButton
-      icon={
-        isActive ? (
-          <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
-        ) : (
-          <div className="relative w-4 h-4 md:w-6 md:h-6">
-            <BellIcon className="w-full h-full" />
-            {hasUnread && (
-              <span className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2" />
-            )}
-          </div>
-        )
-      }
+      icon={isActive ? <XmarkIcon className="w-6 h-6" /> : <BellIcon className="w-6 h-6" />}
+      // Shared dot primitive on the cell — same markup every indicator
+      // cell renders (see HeaderButton.showUnreadDot / <UnreadDot>).
+      showUnreadDot={!isActive && hasUnread}
       aria-label={isActive ? 'Close notifications' : 'Notifications'}
       onClick={onClick}
       isActive={isActive}
@@ -357,11 +373,11 @@ function HeaderCellSkeleton({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'flex h-full w-12 shrink-0 items-center justify-center border-l border-ods-border md:w-14',
+        'flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border',
         className,
       )}
     >
-      <div className="h-4 w-4 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+      <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
     </div>
   );
 }
@@ -376,8 +392,8 @@ function HeaderCellSkeleton({ className }: { className?: string }) {
  */
 function HeaderWideCellSkeleton() {
   return (
-    <div className="flex h-full w-12 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4">
-      <div className="h-4 w-4 shrink-0 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+    <div className="flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4">
+      <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" />
       <div className="hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" />
     </div>
   );
@@ -411,8 +427,8 @@ function AppHeaderSkeleton({
       aria-busy="true"
       leading={
         // Burger cell: mobile only, in CSS.
-        <div className="flex h-full w-12 shrink-0 items-center justify-center border-r border-ods-border md:hidden">
-          <div className="h-4 w-4 animate-pulse rounded bg-ods-border" />
+        <div className="flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden">
+          <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
         </div>
       }
       logo={

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

@@ -2,12 +2,17 @@
 
 import React from 'react'
 import { cn } from '../../utils/cn'
+import { UnreadDot } from './unread-dot'
 
 export interface HeaderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Whether the button is in active/pressed state */
   isActive?: boolean
   /** Icon to display in the button */
   icon: React.ReactNode
+  /** Render the shared `UnreadDot` at the icon's top-right (the
+   *  notifications-bell treatment, promoted to the cell primitive so
+   *  indicator cells never copy the dot markup). */
+  showUnreadDot?: boolean
   /** Additional class names */
   className?: string
 }
@@ -15,6 +20,7 @@ export interface HeaderButtonProps extends React.ButtonHTMLAttributes<HTMLButton
 export function HeaderButton({
   isActive = false,
   icon,
+  showUnreadDot = false,
   className,
   ...props
 }: HeaderButtonProps) {
@@ -23,7 +29,10 @@ export function HeaderButton({
       className={cn(
         "flex items-center justify-center shrink-0",
         "transition-colors duration-200",
-        "w-12 h-full md:w-14",
+        // Square cell width follows the TopNavigation size (56px small /
+        // 72px big) via the shell's --top-nav-cell var; 56px fallback for
+        // standalone use.
+        "w-[var(--top-nav-cell,3.5rem)] h-full",
         isActive
           ? "text-ods-text-primary bg-ods-bg-active"
           : // Transparent at rest so the cell inherits the bar's background
@@ -33,7 +42,14 @@ export function HeaderButton({
       )}
       {...props}
     >
-      {icon}
+      {showUnreadDot ? (
+        <span className="relative inline-flex">
+          {icon}
+          <UnreadDot />
+        </span>
+      ) : (
+        icon
+      )}
     </button>
   )
 }

package/src/components/navigation/header-mingo-button.tsx

@@ -57,7 +57,7 @@ export function HeaderMingoButton({
         // Mobile, drawer open: the icon-only button doubles as the close
         // affordance, so swap the Mingo logo for an X. Match the other header
         // icons (e.g. notifications): secondary color, w-4 h-4 → md:w-6 h-6.
-        <XmarkIcon className="w-4 h-4 md:w-6 md:h-6 shrink-0 text-ods-text-secondary" />
+        <XmarkIcon className="w-6 h-6 shrink-0 text-ods-text-secondary" />
       ) : (
         // Outer frame follows the button's text color (currentColor); the eyes
         // and corner block are ODS cyan.
@@ -65,7 +65,7 @@ export function HeaderMingoButton({
           color="currentColor"
           eyesColor="var(--ods-flamingo-cyan-base)"
           cornerColor="var(--ods-flamingo-cyan-base)"
-          className="w-4 h-4 md:w-6 md:h-6 shrink-0"
+          className="w-6 h-6 shrink-0"
         />
       )}
       {!iconOnly && (

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

@@ -21,20 +21,20 @@ export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
     <div className="sticky top-0 z-[50] w-full">
       <header
         className={cn(
-          'flex h-12 w-full items-center border-b border-t border-ods-border md:h-14 md:border-t-0',
+          'flex h-[72px] w-full items-center border-b border-t border-ods-border md:border-t-0',
           config?.backgroundColor || 'bg-ods-card',
           config?.className,
         )}
       >
         {/* Leading cells: admin toggle / burger */}
         {showLeftActions && (
-          <div className="flex h-full w-12 items-center justify-center border-r border-ods-border md:w-14">
+          <div className="flex h-full w-[72px] items-center justify-center border-r border-ods-border">
             <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
           </div>
         )}
         {showMobileMenu && (
-          <div className="flex h-full w-12 items-center justify-center border-r border-ods-border md:w-14 lg:hidden">
-            <div className="h-4 w-4 animate-pulse rounded bg-ods-border md:h-6 md:w-6" />
+          <div className="flex h-full w-[72px] items-center justify-center border-r border-ods-border lg:hidden">
+            <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
           </div>
         )}
 

package/src/components/navigation/header.tsx

@@ -8,6 +8,7 @@ import { Menu01Icon, XmarkIcon } from '../icons-v2-generated';
 import { Button } from '../ui/button';
 import { HeaderButton } from './header-button';
 import { MingoAiButton } from './mingo-ai-button';
+import { TicketAlertsButton } from './ticket-alerts-button';
 import { MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
 import { TopNavigation } from './top-navigation';
 
@@ -135,11 +136,12 @@ export function Header({ config, platform }: HeaderProps) {
                 [item.id]: !prev[item.id],
               }));
             }}
-            size="small-legacy"
+            size="default"
+            font="regular"
             className={cn(
-              // Top-level nav links: h3 bold per the ODS top-navigation spec
-              // (Figma 2797-5978); dropdown children stay on the h6 step.
-              'text-h3 font-bold tracking-[-0.36px]',
+              // Top-level nav links: the default-size button with the h4
+              // (DM Sans 500) `font="regular"` label — Figma 133-740, added
+              // for navigation; dropdown children stay on the h6 step.
               item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
               isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
               item.className,
@@ -227,9 +229,9 @@ export function Header({ config, platform }: HeaderProps) {
           onClick={item.onClick} // Only for non-navigation actions
           leftIcon={item.icon}
           rightIcon={item.badge}
-          size="small-legacy"
+          size="default"
+          font="regular"
           className={cn(
-            'text-h3 font-bold tracking-[-0.36px]',
             'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
             'whitespace-nowrap',
             'text-ods-text-primary', // All items use primary text color
@@ -251,9 +253,9 @@ export function Header({ config, platform }: HeaderProps) {
         onClick={item.onClick}
         leftIcon={item.icon}
         rightIcon={item.badge}
-        size="small-legacy"
+        size="default"
+        font="regular"
         className={cn(
-          'text-h3 font-bold tracking-[-0.36px]',
           'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
           'whitespace-nowrap',
           'text-ods-text-primary', // All items use primary text color
@@ -301,15 +303,16 @@ export function Header({ config, platform }: HeaderProps) {
         style={config.style}
         backgroundClassName={config.backgroundColor}
         centerBreakpoint="lg"
+        size="big"
         leading={
           <>
             {/* Length-guarded: platform configs often pass `left: []`, and an
                 empty array is truthy — without the guard the cell would render
                 as a bare divider + padding. */}
+            {/* No padding on the wrapper: leading cells (HeaderButton-based
+                admin toggles) size themselves to the bar's square cell. */}
             {!!config.actions?.left?.length && (
-              <div className="flex h-full items-center border-r border-ods-border px-[var(--spacing-system-xs)]">
-                {config.actions.left}
-              </div>
+              <div className="flex h-full items-center border-r border-ods-border">{config.actions.left}</div>
             )}
             {/* Mobile/tablet menu toggle — a leading cell per the ODS spec
               (banded with the nav breakpoint `lg` so the desktop nav and the
@@ -328,8 +331,8 @@ export function Header({ config, platform }: HeaderProps) {
                 aria-controls={config.mobile?.isOpen ? MOBILE_NAV_PANEL_ID : undefined}
                 icon={
                   config.mobile?.isOpen
-                    ? config.mobile?.closeIcon || <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
-                    : config.mobile?.menuIcon || <Menu01Icon className="w-4 h-4 md:w-6 md:h-6" />
+                    ? config.mobile?.closeIcon || <XmarkIcon className="w-6 h-6" />
+                    : config.mobile?.menuIcon || <Menu01Icon className="w-6 h-6" />
                 }
               />
             )}
@@ -340,7 +343,11 @@ export function Header({ config, platform }: HeaderProps) {
             {config.logo.element}
           </Link>
         }
-        logoClassName={hasLeftCells ? 'lg:pl-[var(--spacing-system-l)]' : undefined}
+        // Logo inset for the hub sites: 12px on mobile (the shell's base p-m),
+        // 16px on tablet (mf token; the shell default is pl-l = 24px there),
+        // desktop unchanged — pl-xxl, collapsed to pl-l when an always-visible
+        // leading cell sits before the logo.
+        logoClassName={cn('md:pl-[var(--spacing-system-mf)]', hasLeftCells && 'lg:pl-[var(--spacing-system-l)]')}
         center={
           hasNav ? (
             <nav
@@ -378,13 +385,26 @@ export function Header({ config, platform }: HeaderProps) {
         }
         ctaClassName="gap-3"
         sideActions={
-          config.mingo?.enabled ? (
-            <MingoAiButton
-              source={config.mingo.source}
-              icon={config.mingo.icon}
-              label={config.mingo.label}
-              className={config.mingo.className}
-            />
+          config.tickets || config.mingo?.enabled ? (
+            <>
+              {/* Support-ticket alerts cell — before Mingo, flush cell row.
+                  Renders nothing unless the host mounted <TicketLiveProvider>. */}
+              {config.tickets && (
+                <TicketAlertsButton
+                  href={config.tickets.href}
+                  onClick={config.tickets.onClick}
+                  className="border-l border-ods-border"
+                />
+              )}
+              {config.mingo?.enabled && (
+                <MingoAiButton
+                  source={config.mingo.source}
+                  icon={config.mingo.icon}
+                  label={config.mingo.label}
+                  className={config.mingo.className}
+                />
+              )}
+            </>
           ) : undefined
         }
       />

package/src/components/navigation/index.ts

@@ -49,6 +49,10 @@ export type { MobileBurgerMenuProps } from './mobile-burger-menu'
 
 export { HeaderButton } from './header-button'
 export type { HeaderButtonProps } from './header-button'
+export { UnreadDot } from './unread-dot'
+export type { UnreadDotProps } from './unread-dot'
+export { TicketAlertsButton } from './ticket-alerts-button'
+export type { TicketAlertsButtonProps } from './ticket-alerts-button'
 
 export { TopNavigation } from './top-navigation'
 export type { TopNavigationProps, TopNavigationCenterBreakpoint } from './top-navigation'

package/src/components/navigation/mingo-ai-button.tsx

@@ -1,20 +1,20 @@
-'use client'
+'use client';
 
-import React from 'react'
-import { MingoIcon } from '../icons'
-import { cn } from '../../utils'
+import React from 'react';
+import { cn } from '../../utils';
+import { MingoIcon } from '../icons';
 
 export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  source?: string
+  source?: string;
   /** The platform's Mingo identity glyph — pass the SAME server-configured
    *  icon the chat panel renders (host-side: `EntityIcon` fed by the admin
    *  `assistantIcon`), so the launcher and the panel can never diverge.
    *  Falls back to the packaged Mingo mark when the server has none. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
   /** The launcher's wordmark + aria-label — pass the server-configured
    *  assistant name (same `assistantName` the chat panel shows) so the
    *  launcher never hardcodes an identity the admin has renamed. */
-  label?: string
+  label?: string;
 }
 
 /**
@@ -32,7 +32,7 @@ export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButto
  * icon-only collapse that `Button` cannot express (same precedent as
  * `header-mingo-button.tsx`).
  */
-const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)'
+const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
 
 export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onClick, ...props }: MingoAiButtonProps) {
   return (
@@ -40,12 +40,12 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
       {...props}
       type="button"
       aria-label={label}
-      onClick={(e) => {
+      onClick={e => {
         // Coalesce to '' so a source-less mount still matches EmbeddableChat's
         // own `runtime.source ?? ''` comparison (undefined !== '' would make
         // the panel silently ignore the event).
-        window.dispatchEvent(new CustomEvent('ask-ai:open', { detail: { source: source ?? '' } }))
-        onClick?.(e)
+        window.dispatchEvent(new CustomEvent('ask-ai:open', { detail: { source: source ?? '' } }));
+        onClick?.(e);
       }}
       className={cn(
         // Unified ODS top-navigation cell (Figma 2797-6808 desktop /
@@ -58,11 +58,11 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
         className,
       )}
     >
-      {/* Inner box = 1:1 twin of the header CTA's `size="small"` Button
-          geometry (rounded-md, h-6 md:h-8) so the animated ring traces
-          exactly where a normal small-button border would sit inside the
-          48/56px cell. */}
-      <span className="relative flex h-6 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-xsf)] md:h-8">
+      {/* Inner box = 1:1 twin of the DEFAULT-size Button geometry (rounded-md,
+          h-11 md:h-12, px-m) — the same footprint as the header's "Try for
+          Free" CTA — so the animated ring traces exactly where a full button
+          border would sit inside the 72px bar. */}
+      <span className="relative flex h-11 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-m)] md:h-12">
         {/* AI edge light (Apple-Intelligence-style): a rotating accent-
             gradient arc clipped to a 3px ring on the box outline via CSS
             mask (.mingo-edge-frame) — NO opaque cover, so the launcher
@@ -92,13 +92,14 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
           />
         )}
         {/* Wordmark collapses below md — the mobile cell is icon-only per
-            spec. `text-code` (sentence-case mono caption, matching the small
-            CTA next to it) by product decision — the Figma wordmark is h3
-            bold; flagged for the designer. */}
-        <span className="relative hidden whitespace-nowrap text-code text-ods-text-primary md:inline">{label}</span>
+            spec. h3 bold, matching the default-size CTA label next to it
+            (Figma 2936-6825). */}
+        {/* Bare `text-h3` — the exact composite the default-size Button label
+            uses (bold 700 and -0.02em tracking are built into the utility). */}
+        <span className="relative hidden whitespace-nowrap text-h3 text-ods-text-primary md:inline">{label}</span>
       </span>
     </button>
-  )
+  );
 }
 
-export default MingoAiButton
+export default MingoAiButton;

package/src/components/navigation/mobile-burger-menu.tsx

@@ -9,8 +9,8 @@ import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated
 import { Button, SquareAvatar } from '../ui'
 import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
 
-// Header height constant (h-12 = 48px)
-const HEADER_HEIGHT = 48
+// Header height constant — the unified top-navigation `small` bar (56px on all screens)
+const HEADER_HEIGHT = 56
 
 export interface MobileBurgerMenuProps {
   /** Whether the menu is open */
@@ -188,7 +188,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
                 fallback={user.userName}
                 size="lg"
                 variant="round"
-                className="w-12 h-12 shrink-0"
+                className="w-14 h-14 shrink-0"
               />
 
               {/* User Info */}

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -4,6 +4,7 @@ import { cloneElement, memo, type ReactElement, type ReactNode } from 'react'
 import Link from '../../embed-shims/next-link'
 import { NavigationSidebarItem } from '../../types/navigation'
 import { cn } from '../../utils'
+import { UnreadDot } from './unread-dot'
 
 interface IconProps {
   color?: string
@@ -82,9 +83,7 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
         {cloneElement(item.icon as ReactElement<IconProps>, {
           color: isActive && !disabled ? "text-ods-accent" : "text-ods-text-secondary",
         })}
-        {hasUnread && !showLabel && (
-          <span className="absolute top-0 right-0 bg-ods-warning rounded-full w-2 h-2" />
-        )}
+        {hasUnread && !showLabel && <UnreadDot size="fixed" />}
       </div>
 
       <span

package/src/components/navigation/ticket-alerts-button.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+/**
+ * TicketAlertsButton — the unified header affordance for support-ticket
+ * unread indication. Mounted by BOTH header shells (hub `Header` via
+ * `HeaderConfig.tickets`, console `AppHeader` via `showTicketAlerts`).
+ *
+ * Design note: the console's NATS-backed notifications bell covers
+ * OpenFrame-internal events; Help Center replies come from the HubSpot
+ * mirror domain and must ALSO surface on the hub, which mounts no
+ * notifications system — so the affordance both hosts can share is this
+ * dedicated cell, not the bell. (Optional follow-up, out of scope:
+ * bridge ticket events into the console bell as well.)
+ *
+ * Renders nothing when no `TicketLiveProvider` is mounted (host didn't
+ * opt into ticket realtime) — the cell can be composed unconditionally.
+ * Unread state comes exclusively from the provider's single summary map.
+ */
+
+import React from 'react'
+import { cn } from '../../utils/cn'
+import { LifeBuoyIcon } from '../icons-v2-generated/interface/life-buoy-icon'
+import { useOptionalTicketLive } from '../tickets/ticket-live-provider'
+import { HeaderButton } from './header-button'
+
+export interface TicketAlertsButtonProps {
+  /** Navigation target for the host's tickets surface (hub `/tickets`,
+   *  console `/help-center/tickets`). Used when `onClick` is absent. */
+  href?: string
+  /** Host-provided navigation (e.g. router push). Wins over `href`. */
+  onClick?: () => void
+  disabled?: boolean
+  className?: string
+}
+
+export function TicketAlertsButton({ href, onClick, disabled, className }: TicketAlertsButtonProps) {
+  const live = useOptionalTicketLive()
+  // No provider (host didn't opt in) or signed-out viewer → no cell.
+  if (!live || !live.authed) return null
+
+  const handleClick =
+    onClick ??
+    (href
+      ? () => {
+          window.location.assign(href)
+        }
+      : undefined)
+
+  return (
+    <HeaderButton
+      icon={<LifeBuoyIcon className="w-6 h-6" />}
+      showUnreadDot={live.unreadTotal > 0}
+      aria-label={live.unreadTotal > 0 ? `Support tickets (${live.unreadTotal} unread)` : 'Support tickets'}
+      onClick={handleClick}
+      disabled={disabled || !handleClick}
+      className={cn(className)}
+    />
+  )
+}
+
+export default TicketAlertsButton