@flamingo-stack/openframe-frontend-core 0.0.382 → 0.0.383-snapshot.20260708154433

package/src/components/features/notifications/approval-request-notification-tile.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { cn } from '../../../utils/cn'
-import { ApprovalBatchMessage } from '../../chat/approval-batch-message'
+import { Button } from '../../ui/button'
+import { ApprovalBatchMessage, ApprovalStatusTag } from '../../chat/approval-batch-message'
 import { ExpandChevron } from '../../chat/expand-chevron'
 import { useCollapsible } from '../../chat/hooks/use-collapsible'
 import type { ChatApprovalStatus } from '../../chat/types'
@@ -35,6 +35,7 @@ export function ApprovalRequestNotificationTile({
   // Toggling the command section pins the tile so a live pop-up doesn't
   // auto-dismiss out from under the user mid-read.
   const [pinned, setPinned] = useState(defaultExpanded)
+  const [processing, setProcessing] = useState(false)
   // Optimistic status for this user's own click; backend resolution (below) wins once it arrives.
   const [localStatus, setLocalStatus] = useState<ChatApprovalStatus | null>(null)
 
@@ -48,66 +49,89 @@ export function ApprovalRequestNotificationTile({
 
   if (!approval || !batchData) return null
 
-  const commandWord = batchData.toolCalls.length > 1 ? 'Commands' : 'Command'
-  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord}`
+  const tileNotification: Notification = {
+    ...notification,
+    type: notification.type ?? 'Approval Required',
+  }
+
+  const commandWord = batchData.toolCalls.length > 1 ? 'commands' : 'command'
+  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord} section`
 
-  const handleApprove = async () => {
-    setLocalStatus('approved')
+  const resolve = async (
+    nextStatus: 'approved' | 'rejected',
+    action: (approvalRequestId: string) => void | Promise<void>,
+  ) => {
+    setProcessing(true)
+    setLocalStatus(nextStatus)
     try {
-      await onApprove(batchData.approvalRequestId)
-      onComplete(notification.id)
+      await action(batchData.approvalRequestId)
     } catch {
       setLocalStatus(null) // roll back the optimistic flip; the request failed
+      return
+    } finally {
+      setProcessing(false)
     }
-  }
-  const handleReject = async () => {
-    setLocalStatus('rejected')
-    try {
-      await onReject(batchData.approvalRequestId)
-      onComplete(notification.id)
-    } catch {
-      setLocalStatus(null)
-    }
+    // Outside the try: a throwing consumer callback must not roll back a request
+    // that already succeeded server-side.
+    onComplete(notification.id)
   }
 
   return (
     <NotificationTile
-      notification={notification}
+      notification={tileNotification}
       liveDurationMs={liveDurationMs}
       onComplete={onComplete}
       onSettle={onSettle}
       className={className}
-      paused={pinned}
+      paused={pinned || processing}
+      actions={
+        <div className="flex w-full items-center gap-[var(--spacing-system-xs)]">
+          {status === 'pending' ? (
+            <>
+              <Button variant="accent" size="small" onClick={() => resolve('approved', onApprove)} disabled={processing}>
+                Approve
+              </Button>
+              <Button variant="outline" size="small" onClick={() => resolve('rejected', onReject)} disabled={processing}>
+                Reject
+              </Button>
+            </>
+          ) : (
+            <span className="flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+              <ApprovalStatusTag status={status} />
+              {approval.resolvedByName ? (
+                <span className="truncate text-h6 text-ods-text-secondary">by {approval.resolvedByName}</span>
+              ) : null}
+            </span>
+          )}
+          <Button
+            variant="outline"
+            size="small"
+            onClick={() => {
+              setExpanded(prev => !prev)
+              setPinned(true)
+            }}
+            aria-expanded={expanded}
+            aria-label={toggleLabel}
+            className="ml-auto w-6 shrink-0 px-0 md:w-8"
+          >
+            <ExpandChevron expanded={expanded} />
+          </Button>
+        </div>
+      }
     >
-      {/* Persistent collapse/expand control for the command section. */}
-      <button
-        type="button"
-        onClick={() => {
-          setExpanded(prev => !prev)
-          setPinned(true)
-        }}
-        aria-expanded={expanded}
-        className={cn(
-          'flex w-full items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-xs)] text-left',
-          expanded && 'border-b border-ods-border',
-        )}
-      >
-        <span className="min-w-0 flex-1 text-h6 text-ods-text-primary">{toggleLabel}</span>
-        <ExpandChevron expanded={expanded} />
-      </button>
-
       <div style={containerStyle}>
+        {/* Divider lives inside the measured element — useCollapsible caps the
+            container at the inner scrollHeight, which excludes the inner's own borders. */}
         <div ref={innerRef}>
-          <ApprovalBatchMessage
-            data={batchData}
-            status={status}
-            resolvedByName={approval.resolvedByName}
-            showExecutionStatus={false}
-            onApprove={handleApprove}
-            onReject={handleReject}
-            maxBodyHeight="50vh"
-            className="mb-0 rounded-none border-0"
-          />
+          <div className="border-t border-ods-border">
+            <ApprovalBatchMessage
+              data={batchData}
+              showExecutionStatus={false}
+              showFooterActions={false}
+              maxBodyHeight="50vh"
+              className="mb-0 rounded-none border-0"
+            />
+          </div>
         </div>
       </div>
     </NotificationTile>

package/src/components/features/notifications/notification-tile.tsx

@@ -1,12 +1,32 @@
 'use client'
 
-import { useMemo, useEffect, type ReactNode } from 'react'
+import { useMemo, useEffect, useState, type ReactNode } from 'react'
 import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon'
 import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon'
-import { Button } from '../../ui/button/button'
 import { dotColorByVariant, progressColorByVariant } from '../../ui/toaster'
 import { cn } from '../../../utils/cn'
-import type { Notification } from './types'
+import { formatTicketRelativeTime } from '../../../utils/date-utils'
+import type { Notification, NotificationSeverity, NotificationVariant } from './types'
+
+/** Backend severity → tile color variant; overrides `notification.variant` when present. */
+const variantBySeverity: Record<NotificationSeverity, NotificationVariant> = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'error',
+}
+
+/** Severity color applied to the header type label and icon slot. */
+const typeColorByVariant: Record<NotificationVariant, string> = {
+  default: 'text-ods-text-secondary',
+  info: 'text-ods-text-secondary',
+  success: 'text-ods-success',
+  warning: 'text-ods-warning',
+  error: 'text-ods-error',
+}
+
+const headerControlClass =
+  'absolute inset-0 flex items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary'
 
 export interface NotificationTileProps {
   notification: Notification
@@ -14,7 +34,13 @@ export interface NotificationTileProps {
   onComplete: (id: string) => void
   onSettle?: (id: string) => void
   className?: string
-  /** Extra content rendered below the header inside the same card (e.g. an approval command section). */
+  /** Action row rendered below the body inside the padded section (e.g. approval buttons). */
+  actions?: ReactNode
+  /**
+   * Extra content rendered below the padded section (e.g. a collapsible approval command
+   * section). Bring your own top divider — the tile no longer draws one, so a zero-height
+   * collapsed child doesn't leave a stray border above the card's bottom edge.
+   */
   children?: ReactNode
   /** Pin the tile: cancel the live auto-dismiss countdown (timer + progress bar) without settling it. */
   paused?: boolean
@@ -26,10 +52,36 @@ export function NotificationTile({
   onComplete,
   onSettle,
   className,
+  actions,
   children,
   paused = false,
 }: NotificationTileProps) {
-  const { id, variant = 'default', title, description, createdAt, read, settled } = notification
+  const {
+    id,
+    variant = 'default',
+    severity,
+    type,
+    icon,
+    imageUrl,
+    title,
+    description,
+    createdAt,
+    read,
+    settled,
+  } = notification
+
+  // Unknown severity strings (backend data can outrun the union) degrade to `variant`.
+  const accentVariant = (severity ? variantBySeverity[severity] : undefined) ?? variant
+
+  // A blocked/broken image (ad-blockers routinely kill external avatars) falls
+  // through to the icon/category/dot chain instead of a broken-image glyph.
+  const [failedImageUrl, setFailedImageUrl] = useState<string | null>(null)
+  const image = imageUrl && imageUrl !== failedImageUrl ? imageUrl : undefined
+
+  // Gate on the Date, not the number: NaN, Infinity AND finite-but-out-of-range
+  // epochs (e.g. nanoseconds) all make toISOString() throw.
+  const createdAtDate = new Date(createdAt)
+  const createdAtIso = Number.isNaN(createdAtDate.getTime()) ? null : createdAtDate.toISOString()
 
   const initialElapsed = useMemo(() => Date.now() - createdAt, [createdAt])
   const isLive = !read && !settled && initialElapsed < liveDurationMs
@@ -53,43 +105,89 @@ export function NotificationTile({
     >
       <div
         className={cn(
-          'relative flex items-center gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
-          children ? 'border-b border-ods-border' : null,
+          'relative flex flex-col gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
+          isLive && 'pb-[var(--spacing-system-m)]',
         )}
       >
-        <div className="flex size-6 shrink-0 items-center justify-center">
-          <span className={cn('size-1.5 rounded-full', dotColorByVariant[variant])} />
+        {/* Header: icon/image + type label (both severity-colored) + time + dismiss/complete control. */}
+        <div className="flex items-center gap-[var(--spacing-system-xs)]">
+          <span
+            className={cn(
+              'flex size-4 shrink-0 items-center justify-center',
+              typeColorByVariant[accentVariant],
+            )}
+          >
+            {image ? (
+              <img
+                src={image}
+                alt=""
+                onError={() => setFailedImageUrl(image)}
+                className="size-4 rounded-[2px] object-cover"
+              />
+            ) : (
+              icon ?? <span className={cn('size-1.5 rounded-full', dotColorByVariant[accentVariant])} />
+            )}
+          </span>
+
+          {type ? (
+            <p
+              className={cn('min-w-0 flex-1 truncate text-h5', typeColorByVariant[accentVariant])}
+              title={type}
+            >
+              {type}
+            </p>
+          ) : (
+            <span className="min-w-0 flex-1" />
+          )}
+
+          {!isLive && createdAtIso ? (
+            <time
+              dateTime={createdAtIso}
+              className="shrink-0 whitespace-nowrap text-h6 text-ods-text-secondary"
+            >
+              {formatTicketRelativeTime(createdAtIso)}
+            </time>
+          ) : null}
+
+          {/* Live X and settled check swap in the same 16px slot; the inactive
+              one is removed from the a11y tree and disabled, not just faded. */}
+          <span className="relative size-4 shrink-0">
+            {[
+              { active: isLive, label: 'Dismiss notification', icon: <XmarkIcon size={16} />, onClick: () => onSettle?.(id) },
+              { active: !isLive, label: 'Mark notification complete', icon: <CheckCircleIcon size={16} />, onClick: () => onComplete(id) },
+            ].map(({ active, label, icon, onClick }) => (
+              <button
+                key={label}
+                type="button"
+                onClick={onClick}
+                aria-label={label}
+                aria-hidden={!active}
+                disabled={!active}
+                tabIndex={active ? 0 : -1}
+                className={cn(headerControlClass, !active && 'pointer-events-none opacity-0')}
+              >
+                {icon}
+              </button>
+            ))}
+          </span>
         </div>
 
-        <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex min-w-0 flex-col">
           {title ? <p className="truncate text-h4 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p> : null}
           {description ? (
-            <p className="text-h6 line-clamp-2 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
+            <p className="text-h6 line-clamp-3 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
           ) : null}
         </div>
 
-        {/* Settled action. */}
-        <Button
-          variant="outline"
-          size="small"
-          onClick={() => onComplete(id)}
-          aria-label="Mark notification complete"
-          tabIndex={isLive ? -1 : 0}
-          className={cn(
-            'shrink-0 hover:text-ods-text-primary',
-            isLive && 'invisible',
-          )}
-        >
-          <CheckCircleIcon />
-        </Button>
+        {actions}
 
-        {/* Progress sits at the header's bottom edge (above any children). */}
+        {/* Progress sits at the section's bottom edge (above any children). */}
         {counting ? (
           <div
             aria-hidden
             className={cn(
               'absolute inset-x-0 -bottom-px h-1 origin-left',
-              progressColorByVariant[variant],
+              progressColorByVariant[accentVariant],
             )}
             style={{
               animation: `toast-progress ${liveDurationMs}ms linear forwards`,
@@ -100,20 +198,6 @@ export function NotificationTile({
       </div>
 
       {children}
-
-      {/* Live-only bare X overlay */}
-      <button
-        type="button"
-        onClick={() => onSettle?.(id)}
-        aria-label="Dismiss notification"
-        tabIndex={isLive ? 0 : -1}
-        className={cn(
-          'absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] flex size-4 items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary',
-          !isLive && 'pointer-events-none opacity-0',
-        )}
-      >
-        <XmarkIcon size={16} />
-      </button>
     </output>
   )
 }

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