@flamingo-stack/openframe-frontend-core 0.0.383 → 0.0.384-snapshot.20260708165758

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

@@ -3,11 +3,21 @@ import { APPROVAL_STATUS, type ApprovalBatchData, type ChatApprovalStatus } from
 
 export type NotificationVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
 
-export type NotificationSeverity = 'INFO' | 'WARNING' | 'DANGER'
+export type NotificationSeverity = 'INFO' | 'SUCCESS' | 'WARNING' | 'DANGER'
 
 export interface Notification {
   id: string
   variant?: NotificationVariant
+  /** Kind label rendered uppercase in the tile header (e.g. "New Customer Created"). */
+  type?: string
+  /** Custom icon for the tile header slot; inherits the severity color via `currentColor`. */
+  icon?: ReactNode
+  /**
+   * Image URL for the tile header slot; takes precedence over `icon`. Proxy external
+   * URLs on the consumer side (ad-blockers routinely block direct third-party avatars);
+   * on load failure the tile falls back to `icon`/dot.
+   */
+  imageUrl?: string
   title: ReactNode
   description?: ReactNode
   createdAt: number

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

@@ -67,6 +67,14 @@ export interface AppLayoutProps {
    * the drawer is part of the layout chrome, not page content.
    */
   drawer?: React.ReactNode
+  /**
+   * Full-width banner rendered ABOVE both the sidebar and the header, spanning
+   * the entire viewport width and pinned to the top of the layout. Optional —
+   * when omitted the layout is unchanged. Used for global, cross-page callouts
+   * (e.g. an onboarding "complete your setup" bar). The sidebar + header + main
+   * area occupy the remaining height below it.
+   */
+  topBar?: React.ReactNode
 }
 
 export function AppLayout({
@@ -79,6 +87,7 @@ export function AppLayout({
   mobileBurgerMenuProps,
   disabled = false,
   drawer,
+  topBar,
 }: AppLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [drawerContainer, setDrawerContainer] = useState<HTMLDivElement | null>(null)
@@ -114,7 +123,13 @@ export function AppLayout({
   return (
     <AppLayoutDrawerContainerContext.Provider value={drawerContainer}>
       <AppLayoutDrawerCoordinationContext.Provider value={drawerCoordination}>
-      <div className={cn("flex h-screen bg-ods-bg", className)}>
+      <div className={cn("flex flex-col h-screen bg-ods-bg", className)}>
+        {/* Full-width top banner above sidebar + header (optional) */}
+        {topBar}
+        {/* Sidebar + header + main occupy the remaining height below the banner.
+            `relative` so the tablet sidebar (position:absolute) anchors to this
+            row — below the topBar — instead of the viewport. */}
+        <div className="flex flex-1 min-h-0 relative">
         <NavigationSidebar config={sidebarConfig} disabled={disabled} />
         {/* Mobile Burger Menu - opens below header */}
         <MobileBurgerMenu
@@ -158,6 +173,7 @@ export function AppLayout({
             {drawer}
           </div>
         </div>
+        </div>
       </div>
       </AppLayoutDrawerCoordinationContext.Provider>
     </AppLayoutDrawerContainerContext.Provider>

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

@@ -72,22 +72,11 @@ export function NavigationSidebarItemButton({
 
       {hasUnread && showLabel && (
         <span className="bg-ods-accent flex items-center justify-center flex-shrink-0 p-2 rounded-md size-6">
-          <span className="text-xs font-medium text-ods-text-on-accent">
+          <span className="text-h5 text-ods-text-on-accent">
             {unreadCount > 99 ? '99+' : unreadCount}
           </span>
         </span>
       )}
-
-      {item.badge && showLabel && (
-        <span
-          className={cn(
-            "text-sm flex-shrink-0 transition-colors duration-300",
-            isActive && !disabled ? "text-ods-accent" : "text-ods-text-secondary",
-          )}
-        >
-          {item.badge}
-        </span>
-      )}
     </button>
   )
 }

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

@@ -136,7 +136,12 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
         className={cn(
           "flex-col hidden md:flex flex-shrink-0",
           "bg-ods-card border-r border-ods-border",
-          isTablet ? "fixed top-0 left-0 h-screen z-[45]" : "relative h-full",
+          // Tablet: float the sidebar over content. Anchored to the layout row
+          // (`absolute` within AppLayout's `relative` row) — NOT the viewport —
+          // so an optional `topBar` above the row is not overlapped. With no
+          // topBar the row spans the full viewport, so this is visually
+          // identical to a viewport-fixed sidebar.
+          isTablet ? "absolute inset-y-0 left-0 z-[45]" : "relative h-full",
           transitionsEnabled && "transition-[width] duration-300",
           config.className,
         )}

package/src/components/ui/data-table/data-table-body.tsx

@@ -29,6 +29,11 @@ export interface DataTableBodyProps<T = any> {
   rowClassName?: string | ((item: T, index: number) => string)
   /** Dense row height. */
   compact?: boolean
+  /**
+   * Treat the design row height as a minimum so multi-line cell content grows
+   * the row instead of clipping. Default keeps the fixed height.
+   */
+  autoHeight?: boolean
   /**
    * Click anywhere on a row (except elements with `data-no-row-click`). Prefer
    * `useCallback` to avoid breaking `React.memo` on rows.
@@ -66,6 +71,7 @@ export function DataTableBody<T = any>({
   className,
   rowClassName,
   compact,
+  autoHeight,
   onRowClick,
   rowHref,
   minRows,
@@ -112,6 +118,7 @@ export function DataTableBody<T = any>({
             onClick={onRowClick}
             href={href}
             compact={compact}
+            autoHeight={autoHeight}
             className={cls}
             subRow={renderSubRow?.(item)}
           />

package/src/components/ui/data-table/data-table-row.tsx

@@ -13,6 +13,12 @@ export interface DataTableRowProps<T> {
   href?: string | null
   /** Dense row height. */
   compact?: boolean
+  /**
+   * Treat the design row height as a minimum: a cell rendering multi-line
+   * content (e.g. a line-clamped description) grows the row instead of being
+   * clipped. Default keeps the fixed height.
+   */
+  autoHeight?: boolean
   className?: string
   /** Expandable content rendered below the cells, inside the same card. */
   subRow?: ReactNode
@@ -60,6 +66,7 @@ function DataTableRowImpl<T>({
   onClick,
   href,
   compact,
+  autoHeight,
   className,
   subRow,
 }: DataTableRowProps<T>) {
@@ -100,7 +107,11 @@ function DataTableRowImpl<T>({
     <div
       className={cn(
         'flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
-        compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
+        compact
+          ? 'py-[var(--spacing-system-xsf)]'
+          : autoHeight
+            ? 'py-[var(--spacing-system-sf)] min-h-[68px] md:min-h-[80px]'
+            : `py-0 ${ROW_HEIGHT_DESKTOP}`,
         hasSubRow && 'border-b border-ods-border',
       )}
     >

package/src/stories/NotificationDrawer.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import * as React from 'react';
 import { Button } from '../components/ui/button';
+import { BracketCurlyIcon } from '../components/icons-v2-generated/coding/bracket-curly-icon';
+import { MonitorIcon } from '../components/icons-v2-generated/devices/monitor-icon';
+import { AlertTriangleIcon } from '../components/icons-v2-generated/interface/alert-triangle-icon';
+import { BannedIcon } from '../components/icons-v2-generated/security/banned-icon';
+import { UserPlusIcon } from '../components/icons-v2-generated/users/user-plus-icon';
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
   ApprovalRequestNotificationTile,
@@ -44,47 +49,100 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** Inline avatar stand-in so the image slot renders without network access. */
+const CUSTOMER_AVATAR =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="#5EFC8D"/><circle cx="16" cy="12" r="6" fill="#212121"/><path d="M4 32c0-6.6 5.4-12 12-12s12 5.4 12 12" fill="#212121"/></svg>',
+  );
+
+/** Seed an approval-request notification in a given resolution state. */
+const approvalSeed = (
+  n: number,
+  resolution: string | null,
+  resolvedByName: string | null,
+  minutesAgo: number,
+): Notification => ({
+  id: `seed-approval-${n}`,
+  variant: 'warning',
+  title: 'Clear stuck print queue',
+  description: 'Mingo wants to restart the Spooler service on SRV-PRINT01.',
+  createdAt: Date.now() - 1_000 * 60 * minutesAgo,
+  read: false,
+  meta: {
+    contextType: ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
+    approvalRequestId: `seed-req-${n}`,
+    approvalType: 'ADMIN',
+    resolution,
+    resolvedByName,
+    toolCalls: [
+      {
+        toolExecutionRequestId: `seed-ter-${n}`,
+        toolName: 'run_command',
+        toolTitle: 'Restart print spooler',
+        toolType: 'OPENFRAME_RMM',
+        toolExplanation: 'Restarts the Spooler service to clear a stuck print queue.',
+        requiresApproval: true,
+        toolCallArguments: { command: 'Restart-Service -Name Spooler -Force' },
+      },
+    ],
+  },
+});
+
 const SEED: Notification[] = [
   {
     id: 'seed-1',
-    variant: 'success',
-    title: 'Device Deployment Complete',
-    description: 'HP EliteBook deployed to Marketing Dept',
+    severity: 'INFO',
+    type: 'New Customer Created',
+    imageUrl: CUSTOMER_AVATAR,
+    title: 'Acme Corp',
+    description: 'Added by John Smith',
     createdAt: Date.now() - 1_000 * 30,
     read: false,
   },
+  approvalSeed(1, null, null, 2),
   {
     id: 'seed-2',
     variant: 'success',
-    title: 'Device Deployment Complete',
-    description: 'HP EliteBook deployed to Marketing Dept',
+    type: 'Device Deployment Complete',
+    icon: <MonitorIcon size={16} />,
+    title: 'HP EliteBook',
+    description: 'Deployed to Marketing Dept',
     createdAt: Date.now() - 1_000 * 60 * 5,
     read: false,
   },
   {
     id: 'seed-3',
-    variant: 'error',
-    title: 'Policy Violation Detected',
-    description: 'USB storage device connected to ACME-WS01',
+    severity: 'DANGER',
+    type: 'Policy Violation Detected',
+    icon: <BannedIcon size={16} />,
+    title: 'ACME-WS01',
+    description: 'USB storage device connected',
     createdAt: Date.now() - 1_000 * 60 * 12,
     read: false,
   },
   {
     id: 'seed-4',
-    variant: 'error',
-    title: 'Disk Space Check Failed',
-    description: 'C: drive at 95% capacity on SRV-DB01',
+    severity: 'WARNING',
+    type: 'Disk Space Check Failed',
+    icon: <AlertTriangleIcon size={16} />,
+    title: 'SRV-DB01',
+    description: 'C: drive at 95% capacity',
     createdAt: Date.now() - 1_000 * 60 * 35,
     read: false,
   },
+  approvalSeed(2, 'APPROVED', 'John Smith', 45),
   {
     id: 'seed-5',
     variant: 'success',
-    title: 'Script Execution Complete',
-    description: 'Windows Update script finished on 45 devices',
+    type: 'Script Execution Complete',
+    icon: <BracketCurlyIcon size={16} />,
+    title: 'Windows Update',
+    description: 'Script finished on 45 devices',
     createdAt: Date.now() - 1_000 * 60 * 60,
     read: false,
   },
+  approvalSeed(3, 'REJECTED', 'Jane Doe', 90),
   {
     id: 'seed-6',
     variant: 'warning',
@@ -93,6 +151,7 @@ const SEED: Notification[] = [
     createdAt: Date.now() - 1_000 * 60 * 60 * 2,
     read: false,
   },
+  approvalSeed(4, 'CANCELLED', null, 180),
 ];
 
 function AutoOpen() {
@@ -104,7 +163,9 @@ function AutoOpen() {
 }
 
 /**
- * Static preview of every tile variant — settled (non-live) state.
+ * Static preview of every tile variant — settled (non-live) state. The `type`
+ * header label picks up the variant color; tiles without an icon/image fall
+ * back to the severity dot in the header slot.
  */
 export const AllTileVariants: Story = {
   render: () => {
@@ -115,6 +176,7 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-default',
             variant: 'default',
+            type: 'System Notice',
             title: 'Heads up',
             description: 'Neutral notification, no specific status.',
             ...base,
@@ -125,8 +187,9 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-success',
             variant: 'success',
-            title: 'Device Deployment Complete',
-            description: 'HP EliteBook deployed to Marketing Dept',
+            type: 'Device Deployment Complete',
+            title: 'HP EliteBook',
+            description: 'Deployed to Marketing Dept',
             ...base,
           }}
           onComplete={() => {}}
@@ -135,8 +198,9 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-error',
             variant: 'error',
-            title: 'Policy Violation Detected',
-            description: 'USB storage device connected to ACME-WS01',
+            type: 'Policy Violation Detected',
+            title: 'ACME-WS01',
+            description: 'USB storage device connected',
             ...base,
           }}
           onComplete={() => {}}
@@ -145,6 +209,7 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-warning',
             variant: 'warning',
+            type: 'Approval Required',
             title: 'Tech Required',
             description: 'Approval is required to execute the command.',
             ...base,
@@ -155,12 +220,97 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-info',
             variant: 'info',
+            type: 'Agent Update',
             title: 'Update available',
             description: 'A new agent version is ready to install.',
             ...base,
           }}
           onComplete={() => {}}
         />
+        <NotificationTile
+          notification={{
+            id: 't-legacy',
+            variant: 'default',
+            title: 'Legacy notification',
+            description: 'No type, icon or image — header shows the dot fallback.',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * The new header fields: `severity` colors the type label and icon slot
+ * (INFO grey, WARNING amber, DANGER red) and overrides `variant`; `imageUrl`
+ * wins over `icon`, which wins over the dot fallback.
+ */
+export const SeverityIconAndImage: Story = {
+  render: () => {
+    const base = { createdAt: Date.now() - 60_000, read: true } as const;
+    return (
+      <div className="flex max-w-md flex-col gap-2">
+        <NotificationTile
+          notification={{
+            id: 's-image',
+            severity: 'INFO',
+            type: 'New Customer Created',
+            imageUrl: CUSTOMER_AVATAR,
+            title: 'Acme Corp',
+            description: 'Added by John Smith',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
+        <NotificationTile
+          notification={{
+            id: 's-icon-info',
+            severity: 'INFO',
+            type: 'New User Invited',
+            icon: <UserPlusIcon size={16} />,
+            title: 'jane.doe@acme.com',
+            description: 'Invited by John Smith',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
+        <NotificationTile
+          notification={{
+            id: 's-icon-warning',
+            severity: 'WARNING',
+            type: 'Disk Space Warning',
+            icon: <AlertTriangleIcon size={16} />,
+            title: 'SRV-DB01',
+            description: 'C: drive at 85% capacity',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
+        <NotificationTile
+          notification={{
+            id: 's-icon-danger',
+            severity: 'DANGER',
+            type: 'Policy Violation Detected',
+            icon: <BannedIcon size={16} />,
+            title: 'ACME-WS01',
+            description: 'USB storage device connected',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
+        <NotificationTile
+          notification={{
+            id: 's-dot-danger',
+            severity: 'DANGER',
+            type: 'Agent Offline',
+            title: 'ACME-WS07',
+            description: 'No icon configured — severity dot fallback.',
+            ...base,
+          }}
+          onComplete={() => {}}
+        />
       </div>
     );
   },
@@ -179,9 +329,11 @@ export const LiveTile: Story = {
           key={tick}
           notification={{
             id: 'live-tile',
-            variant: 'success',
-            title: 'Device Deployment Complete',
-            description: 'HP EliteBook deployed to Marketing Dept',
+            severity: 'INFO',
+            type: 'New Customer Created',
+            imageUrl: CUSTOMER_AVATAR,
+            title: 'Acme Corp',
+            description: 'Added by John Smith',
             createdAt: Date.now(),
             read: false,
           }}
@@ -212,7 +364,9 @@ export const DrawerEmpty: Story = {
 
 /**
  * Drawer pre-seeded to mirror the Figma reference, with the toggle row and the
- * history button wired.
+ * history button wired. Includes approval-request notifications in every
+ * resolution state: pending (buttons), approved, rejected and cancelled
+ * (status tag + resolver name in place of the buttons).
  */
 export const DrawerWithSeedData: Story = {
   render: function DrawerWithSeedDataRender() {
@@ -222,11 +376,13 @@ export const DrawerWithSeedData: Story = {
         onHistoryClick={() => alert('Navigate to /notifications')}
         historyHref="/notifications"
         onShowPopupsChange={(v) => console.log('showPopups →', v)}
+        renderTile={renderApprovalTile}
       >
         <AutoOpen />
         <NotificationDrawer />
         <p className="text-h6 text-ods-text-secondary">
-          Six seeded notifications matching the Figma reference.
+          Seeded notifications matching the Figma reference, including approvals
+          in all four resolution states.
         </p>
       </NotificationsProvider>
     );
@@ -312,8 +468,13 @@ function PlaygroundControls() {
     useNotifications();
   const approvalSeq = React.useRef(0);
 
-  const fire = (variant: NotificationVariant, title: string, description: string) => {
-    addNotification({ variant, title, description });
+  const fire = (
+    variant: NotificationVariant,
+    title: string,
+    description: string,
+    extra?: Partial<Pick<Notification, 'type' | 'icon' | 'imageUrl' | 'severity'>>,
+  ) => {
+    addNotification({ variant, title, description, ...extra });
   };
 
   const fireWithDeepLink = () => {
@@ -417,7 +578,9 @@ function PlaygroundControls() {
         <Button
           variant="accent"
           onClick={() =>
-            fire('success', 'Device Deployment Complete', 'HP EliteBook deployed to Marketing Dept')
+            fire('success', 'HP EliteBook', 'Deployed to Marketing Dept', {
+              type: 'Device Deployment Complete',
+            })
           }
         >
           Fire success
@@ -425,23 +588,49 @@ function PlaygroundControls() {
         <Button
           variant="destructive"
           onClick={() =>
-            fire('error', 'Policy Violation Detected', 'USB storage device connected to ACME-WS01')
+            fire('error', 'ACME-WS01', 'USB storage device connected', {
+              type: 'Policy Violation Detected',
+              severity: 'DANGER',
+              icon: <BannedIcon size={16} />,
+            })
           }
         >
-          Fire error
+          Fire danger + icon
         </Button>
         <Button
           variant="outline"
-          onClick={() => fire('warning', 'Tech Required', 'Approval is required to execute the command.')}
+          onClick={() =>
+            fire('warning', 'Tech Required', 'Approval is required to execute the command.', {
+              type: 'Approval Required',
+              severity: 'WARNING',
+              icon: <AlertTriangleIcon size={16} />,
+            })
+          }
         >
-          Fire warning
+          Fire warning + icon
         </Button>
         <Button
           variant="transparent"
-          onClick={() => fire('info', 'Update available', 'A new agent version is ready to install.')}
+          onClick={() =>
+            fire('info', 'Update available', 'A new agent version is ready to install.', {
+              type: 'Agent Update',
+            })
+          }
         >
           Fire info
         </Button>
+        <Button
+          variant="outline"
+          onClick={() =>
+            fire('info', 'Acme Corp', 'Added by John Smith', {
+              type: 'New Customer Created',
+              severity: 'INFO',
+              imageUrl: CUSTOMER_AVATAR,
+            })
+          }
+        >
+          Fire with image
+        </Button>
         <Button
           variant="outline"
           onClick={() => fire('default', 'Heads up', 'Neutral notification without a specific status.')}

package/src/types/navigation.ts

@@ -94,7 +94,6 @@ export interface NavigationSidebarItem {
   label: string
   icon: React.ReactNode
   path?: string
-  badge?: string | React.ReactNode
   unreadCount?: number
   isActive?: boolean
   onClick?: () => void

package/tailwind.config.ts

@@ -199,7 +199,10 @@ const config: Config = {
             pink: "var(--ods-flamingo-pink-base)",
             cyan: "var(--ods-flamingo-cyan-base)",
           },
-          "open-yellow": "var(--ods-open-yellow-base)",
+          "open-yellow": {
+            DEFAULT: "var(--ods-open-yellow-base)",
+            secondary: "var(--ods-open-yellow-secondary)",
+          },
 
           // Attention tokens (ods-colors.css). Components reference these BY
           // NAME (error-state.tsx: `border-ods-attention-red-error` etc.) —