@flamingo-stack/openframe-frontend-core 0.0.841 → 0.0.843

package/dist/utils/index.cjs

@@ -80150,16 +80150,7 @@ function getPlatformByHostname(hostname) {
 function isPreviewHost(hostname) {
   return hostname.endsWith(".vercel.app");
 }
-function getAllPlatformBaseDomains() {
-  if (typeof window === "undefined") return [];
-  const hostname = window.location.hostname;
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname.startsWith("127.")) {
-    return [];
-  }
-  const previewEnv = process.env.VERCEL_ENV === "preview" || process.env.NEXT_PUBLIC_VERCEL_ENV === "preview" || isPreviewHost(hostname);
-  if (previewEnv) {
-    return [".vercel.app", "vercel.app"];
-  }
+function getPlatformBaseDomains() {
   const baseDomains = /* @__PURE__ */ new Set();
   for (const entry of PLATFORM_DOMAINS) {
     if (entry.pseudo) continue;
@@ -80173,6 +80164,18 @@ function getAllPlatformBaseDomains() {
   }
   return Array.from(baseDomains);
 }
+function getAllPlatformBaseDomains() {
+  if (typeof window === "undefined") return [];
+  const hostname = window.location.hostname;
+  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname.startsWith("127.")) {
+    return [];
+  }
+  const previewEnv = process.env.VERCEL_ENV === "preview" || process.env.NEXT_PUBLIC_VERCEL_ENV === "preview" || isPreviewHost(hostname);
+  if (previewEnv) {
+    return [".vercel.app", "vercel.app"];
+  }
+  return getPlatformBaseDomains();
+}
 var _orderIdx = (k) => PLATFORM_DOMAINS.findIndex((e) => e.key === k);
 if (_orderIdx("flamingo") > _orderIdx("universal") || getPlatformByHostname("flamingo.cx") !== "flamingo" || getPlatformByHostname("hub.openframe.ai") !== "openframe") {
   console.error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.841",
+  "version": "0.0.843",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/devices/device-unread-indicator.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { UnreadNotificationsIndicator } from '../../navigation/unread-notifications-indicator';
+import { useDevicesViewConfig } from './devices-view-config';
+import type { DeviceRow } from './types';
+
+/** The viewer's unread notifications about a device, opening them where the host lists them. Nothing at 0. */
+export function DeviceUnreadIndicator({ device }: { device: DeviceRow }) {
+  const { getDeviceNotificationsHref } = useDevicesViewConfig();
+  const count = device.unreadNotificationCount ?? 0;
+  return (
+    <UnreadNotificationsIndicator count={count} href={count > 0 ? getDeviceNotificationsHref?.(device) : undefined} />
+  );
+}

package/src/components/features/devices/devices-grid.tsx

@@ -7,6 +7,7 @@ import { DeviceCard } from '../../ui';
 import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { getDeviceName } from './device-name';
 import { getDeviceOperatingSystem, getDeviceStatusConfig } from './device-status';
+import { DeviceUnreadIndicator } from './device-unread-indicator';
 import { useDevicesViewConfig } from './devices-view-config';
 import type { DeviceRow } from './types';
 
@@ -102,7 +103,14 @@ export function DevicesGrid<T extends DeviceRow = DeviceRow>({
                       : undefined
                   }
                   onDeviceClick={() => handleDeviceClick(device)}
-                  actions={GRID_CARD_ACTIONS}
+                  actions={
+                    device.unreadNotificationCount
+                      ? {
+                          ...GRID_CARD_ACTIONS,
+                          detailsButton: { component: <DeviceUnreadIndicator device={device} /> },
+                        }
+                      : GRID_CARD_ACTIONS
+                  }
                   className="h-full"
                   // One card of a read list: how many there are is the record's (the height gate counts them).
                   data-loading-item

package/src/components/features/devices/devices-table-columns.tsx

@@ -27,6 +27,7 @@ import { getDeviceName } from './device-name';
 import { getDeviceStatusConfig } from './device-status';
 import { DEFAULT_VISIBLE_STATUSES } from './device-statuses';
 import { DeviceTypeTile } from './device-type-tile';
+import { DeviceUnreadIndicator } from './device-unread-indicator';
 import { useDeviceImageUrl, useDevicesViewConfig } from './devices-view-config';
 import type { DeviceFilters, DeviceRow } from './types';
 
@@ -341,6 +342,8 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
             <div className="min-w-0 flex-1">
               <TruncateText>{getDeviceName(device)}</TruncateText>
             </div>
+            {/* In the name's cell, not the open column: that one is dropped on a narrow page. */}
+            <DeviceUnreadIndicator device={device} />
           </div>
         );
       },

package/src/components/features/devices/devices-view-config.tsx

@@ -5,14 +5,16 @@ import type { DeviceRow } from './types';
 
 /**
  * What the device views cannot know by themselves, because it belongs to the
- * host: where a device's page lives, where images are served from, and whether
- * the page runs inside the mobile shell. The product provides it once, above
- * every page; without a provider the views render as a picture (no links,
- * image URLs used as given).
+ * host: where a device's page and its notifications live, where images are
+ * served from, and whether the page runs inside the mobile shell. The product
+ * provides it once, above every page; without a provider the views render as a
+ * picture (no links, image URLs used as given).
  */
 export interface DevicesViewConfig {
   /** The device's page. Absent: rows and cards are not links. */
   getDeviceHref?: (device: DeviceRow) => string | undefined;
+  /** The viewer's notifications about the device. Absent: the unread indicator is a counter, not a button. */
+  getDeviceNotificationsHref?: (device: DeviceRow) => string | undefined;
   /** A customer image's full URL from its stored path and content hash. */
   resolveImageUrl?: (imageUrl: string | null | undefined, hash?: string | null) => string | undefined;
   /** The page runs inside the mobile shell: options nobody can pick there are dropped. */

package/src/components/features/devices/index.ts

@@ -38,6 +38,7 @@ export {
 export { DeviceTagsFilterButton } from './device-tags-filter-button';
 export { renderDeviceTypeIcon } from './device-type-icon';
 export { DeviceTypeTile } from './device-type-tile';
+export { DeviceUnreadIndicator } from './device-unread-indicator';
 export { DevicesFilterToolbar, type DevicesFilterToolbarProps } from './devices-filter-toolbar';
 export { DevicesGrid, type DevicesGridProps } from './devices-grid';
 export { DevicesGridFilters, type DevicesGridFiltersProps } from './devices-grid-filters';

package/src/components/features/devices/types.ts

@@ -34,6 +34,8 @@ export interface DeviceRow extends DeviceNameSource {
   organizationImageUrl?: string | null;
   organizationImageHash?: string | null;
   tags?: DeviceTag[];
+  /** The viewer's unread notifications about this device. Absent or 0: no indicator. */
+  unreadNotificationCount?: number;
 }
 
 export interface DeviceFilterValue {

package/src/components/navigation/count-pill.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+
+export interface CountPillProps {
+  count: number;
+  className?: string;
+}
+
+/**
+ * The navigation's unread count: a 24px accent pill, widening for "99+". The grouped sidebar ends its rows with it,
+ * and a list row that counts the same notifications draws the same pill, so the two read alike.
+ */
+export function CountPill({ count, className }: CountPillProps) {
+  return (
+    <span
+      className={cn(
+        'flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xxs)]',
+        className,
+      )}
+    >
+      <span className="text-ods-text-on-accent text-h5">{count > 99 ? '99+' : count}</span>
+    </span>
+  );
+}

package/src/components/navigation/index.ts

@@ -90,6 +90,10 @@ export { HeaderButton } from './header-button';
 export type { HeaderButtonProps } from './header-button';
 export { UnreadDot, UnreadCountBadge } from './unread-dot';
 export type { UnreadDotProps, UnreadCountBadgeProps } from './unread-dot';
+export { CountPill } from './count-pill';
+export type { CountPillProps } from './count-pill';
+export { UnreadNotificationsIndicator, unreadNotificationsLabel } from './unread-notifications-indicator';
+export type { UnreadNotificationsIndicatorProps } from './unread-notifications-indicator';
 export { NavigationItemBadge } from './navigation-item-badge';
 export type { NavigationItemBadgeProps } from './navigation-item-badge';
 export { TicketAlertsButton } from './ticket-alerts-button';

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

@@ -7,6 +7,7 @@ import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { FloatingTooltip } from '../ui/floating-tooltip';
+import { CountPill } from './count-pill';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
@@ -133,20 +134,6 @@ interface RowStateProps {
   disabled: boolean;
 }
 
-/** The count pill: 24px, widening for "99+". */
-function CountPill({ count, className }: { count: number; className?: string }) {
-  return (
-    <span
-      className={cn(
-        'flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xxs)]',
-        className,
-      )}
-    >
-      <span className="text-ods-text-on-accent text-h5">{count > 99 ? '99+' : count}</span>
-    </span>
-  );
-}
-
 /** The row's end, flush right where every row's count sits. */
 function RowEnd({ count }: { count: number }) {
   return count > 0 ? <CountPill count={count} className="ml-auto" /> : null;

package/src/components/navigation/unread-notifications-indicator.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import type { MouseEvent } from 'react';
+import { useChatRuntime } from '../../contexts/chat-runtime-context';
+import { cn } from '../../utils/cn';
+import { isModifierClick } from '../chat/utils/chat-nav-resolution';
+import { executeNavigationImperative, executeNewTabNavigation } from '../chat/utils/execute-navigation';
+import { CountPill } from './count-pill';
+
+/** What the indicator says to a screen reader: the count, in words. */
+export function unreadNotificationsLabel(count: number): string {
+  return `${count} unread ${count === 1 ? 'notification' : 'notifications'}`;
+}
+
+export interface UnreadNotificationsIndicatorProps {
+  /** The viewer's unread notifications about one item. Nothing is drawn at 0. */
+  count: number;
+  /** Where those notifications are listed. Absent: the count alone, not a button. */
+  href?: string;
+  className?: string;
+}
+
+/**
+ * The viewer's unread notifications about one item of a list (a device, an incident), drawn with the sidebar's own
+ * count pill so a row and its section's badge read alike.
+ *
+ * A button, not a link: the row or card it sits in is usually a link itself, and a link cannot hold another
+ * (`data-no-row-click` keeps a table row from following its own). It goes through the lib's navigation executor,
+ * so the host decides how `href` opens, and a modifier click asks for a new tab as it would on a link.
+ */
+export function UnreadNotificationsIndicator({ count, href, className }: UnreadNotificationsIndicatorProps) {
+  const runtime = useChatRuntime();
+  if (count <= 0) return null;
+
+  const label = unreadNotificationsLabel(count);
+
+  if (!href) {
+    return (
+      <span data-loading-optional role="img" aria-label={label} className={cn('inline-flex shrink-0', className)}>
+        <CountPill count={count} />
+      </span>
+    );
+  }
+
+  const open = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isModifierClick(event)) executeNewTabNavigation({ runtime, href });
+    else executeNavigationImperative({ runtime, href });
+  };
+
+  return (
+    <button
+      type="button"
+      data-loading-optional
+      data-no-row-click
+      onClick={open}
+      aria-label={label}
+      title={label}
+      className={cn(
+        'pointer-events-auto inline-flex shrink-0 rounded-md transition-opacity hover:opacity-80',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
+        className,
+      )}
+    >
+      <CountPill count={count} />
+    </button>
+  );
+}

package/src/components/product-demo/fixtures/devices.ts

@@ -4,6 +4,12 @@ import { type DEMO_DEVICES, DEMO_FLEET, DEMO_FLEET_SEARCH_OS, demoMinutesAgo } f
 
 type DemoDevice = (typeof DEMO_DEVICES)[keyof typeof DEMO_DEVICES];
 
+/** The viewer's unread notifications per device: the offline reception desktop's recordings failed overnight. */
+const DEMO_UNREAD_NOTIFICATIONS: Partial<Record<DemoDevice['id'], number>> = {
+  'device-reception': 2,
+  'device-leo': 1,
+};
+
 function device(
   cast: DemoCast,
   demo: DemoDevice,
@@ -24,6 +30,7 @@ function device(
     organizationId: organization.id,
     organization: organization.name,
     organizationImageUrl: organization.logoUrl,
+    unreadNotificationCount: DEMO_UNREAD_NOTIFICATIONS[demo.id],
   };
 }
 

package/src/platform-domains.ts

@@ -309,18 +309,37 @@ export function isPreviewHost(hostname: string): boolean {
 }
 
 /**
- * ALL unique cookie base domains (the cross-subdomain SSO mechanism).
+ * The registrable base of every site in the registry, each as `.base` and bare `base`: for each non-pseudo platform,
+ * the base of its resolved host. It reads the registry only, so it answers the same on a server and in a browser;
+ * a server's cookie rule reads it directly.
+ *
+ * Because `getPlatformProductionUrl` always yields a host (override OR default),
+ * `.flamingo.so` / `.flamingo.run` / `.openmsp.ai` / `.tmcg.miami` / `.openframe.ai`
+ * are ALWAYS present → cross-hub SSO is byte-identical to today.
+ */
+export function getPlatformBaseDomains(): string[] {
+  const baseDomains = new Set<string>();
+  for (const entry of PLATFORM_DOMAINS) {
+    if (entry.pseudo) continue;
+    const host = hostOf(getPlatformProductionUrl(entry.key));
+    if (!host) continue;
+    const base = toRegistrableBaseDomain(host);
+    if (base) {
+      baseDomains.add(`.${base}`);
+      baseDomains.add(base);
+    }
+  }
+  return Array.from(baseDomains);
+}
+
+/**
+ * ALL unique cookie base domains for the PAGE this runs on (the cross-subdomain SSO mechanism).
  *
  * NON-PURE (the sole such export): reads `typeof window` + `process.env` to
  * preserve byte-identical cookie behavior. Keeps the original three branches:
  *   1. localhost / private IP → [] (host-only cookies)
  *   2. Vercel preview (env OR host) → ['.vercel.app','vercel.app']
- *   3. production → for each non-pseudo platform, registrable base of its resolved
- *      host, emitted as both `.base` and bare `base`.
- *
- * Because `getPlatformProductionUrl` always yields a host (override OR default),
- * `.flamingo.so` / `.flamingo.run` / `.openmsp.ai` / `.tmcg.miami` / `.openframe.ai`
- * are ALWAYS present → cross-hub SSO is byte-identical to today.
+ *   3. production → `getPlatformBaseDomains`.
  */
 export function getAllPlatformBaseDomains(): string[] {
   if (typeof window === 'undefined') return [];
@@ -339,19 +358,8 @@ export function getAllPlatformBaseDomains(): string[] {
     return ['.vercel.app', 'vercel.app'];
   }
 
-  // Case 3: production — registrable base of every non-pseudo platform's resolved host
-  const baseDomains = new Set<string>();
-  for (const entry of PLATFORM_DOMAINS) {
-    if (entry.pseudo) continue;
-    const host = hostOf(getPlatformProductionUrl(entry.key));
-    if (!host) continue;
-    const base = toRegistrableBaseDomain(host);
-    if (base) {
-      baseDomains.add(`.${base}`);
-      baseDomains.add(base);
-    }
-  }
-  return Array.from(baseDomains);
+  // Case 3: production
+  return getPlatformBaseDomains();
 }
 
 // ── Cookie-domain guard + match (single owner; shared by the client cookie-domain.ts +