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

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

@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Button } from '../../ui/button'
-import { ApprovalBatchMessage, ApprovalStatusTag } from '../../chat/approval-batch-message'
+import { cn } from '../../../utils/cn'
+import { ApprovalBatchMessage } 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,7 +35,6 @@ 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)
 
@@ -49,89 +48,66 @@ export function ApprovalRequestNotificationTile({
 
   if (!approval || !batchData) return null
 
-  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 commandWord = batchData.toolCalls.length > 1 ? 'Commands' : 'Command'
+  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord}`
 
-  const resolve = async (
-    nextStatus: 'approved' | 'rejected',
-    action: (approvalRequestId: string) => void | Promise<void>,
-  ) => {
-    setProcessing(true)
-    setLocalStatus(nextStatus)
+  const handleApprove = async () => {
+    setLocalStatus('approved')
     try {
-      await action(batchData.approvalRequestId)
+      await onApprove(batchData.approvalRequestId)
+      onComplete(notification.id)
     } catch {
       setLocalStatus(null) // roll back the optimistic flip; the request failed
-      return
-    } finally {
-      setProcessing(false)
     }
-    // Outside the try: a throwing consumer callback must not roll back a request
-    // that already succeeded server-side.
-    onComplete(notification.id)
+  }
+  const handleReject = async () => {
+    setLocalStatus('rejected')
+    try {
+      await onReject(batchData.approvalRequestId)
+      onComplete(notification.id)
+    } catch {
+      setLocalStatus(null)
+    }
   }
 
   return (
     <NotificationTile
-      notification={tileNotification}
+      notification={notification}
       liveDurationMs={liveDurationMs}
       onComplete={onComplete}
       onSettle={onSettle}
       className={className}
-      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>
-      }
+      paused={pinned}
     >
+      {/* 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}>
-          <div className="border-t border-ods-border">
-            <ApprovalBatchMessage
-              data={batchData}
-              showExecutionStatus={false}
-              showFooterActions={false}
-              maxBodyHeight="50vh"
-              className="mb-0 rounded-none border-0"
-            />
-          </div>
+          <ApprovalBatchMessage
+            data={batchData}
+            status={status}
+            resolvedByName={approval.resolvedByName}
+            showExecutionStatus={false}
+            onApprove={handleApprove}
+            onReject={handleReject}
+            maxBodyHeight="50vh"
+            className="mb-0 rounded-none border-0"
+          />
         </div>
       </div>
     </NotificationTile>

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

@@ -1,32 +1,12 @@
 'use client'
 
-import { useMemo, useEffect, useState, type ReactNode } from 'react'
+import { useMemo, useEffect, 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 { 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'
+import type { Notification } from './types'
 
 export interface NotificationTileProps {
   notification: Notification
@@ -34,13 +14,7 @@ export interface NotificationTileProps {
   onComplete: (id: string) => void
   onSettle?: (id: string) => void
   className?: string
-  /** 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.
-   */
+  /** Extra content rendered below the header inside the same card (e.g. an approval command section). */
   children?: ReactNode
   /** Pin the tile: cancel the live auto-dismiss countdown (timer + progress bar) without settling it. */
   paused?: boolean
@@ -52,36 +26,10 @@ export function NotificationTile({
   onComplete,
   onSettle,
   className,
-  actions,
   children,
   paused = false,
 }: NotificationTileProps) {
-  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 { id, variant = 'default', title, description, createdAt, read, settled } = notification
 
   const initialElapsed = useMemo(() => Date.now() - createdAt, [createdAt])
   const isLive = !read && !settled && initialElapsed < liveDurationMs
@@ -105,89 +53,43 @@ export function NotificationTile({
     >
       <div
         className={cn(
-          'relative flex flex-col gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
-          isLive && 'pb-[var(--spacing-system-m)]',
+          'relative flex items-center gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
+          children ? 'border-b border-ods-border' : null,
         )}
       >
-        {/* 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 className="flex size-6 shrink-0 items-center justify-center">
+          <span className={cn('size-1.5 rounded-full', dotColorByVariant[variant])} />
         </div>
 
-        <div className="flex min-w-0 flex-col">
+        <div className="flex min-w-0 flex-1 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-3 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
+            <p className="text-h6 line-clamp-2 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
           ) : null}
         </div>
 
-        {actions}
+        {/* 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>
 
-        {/* Progress sits at the section's bottom edge (above any children). */}
+        {/* Progress sits at the header's bottom edge (above any children). */}
         {counting ? (
           <div
             aria-hidden
             className={cn(
               'absolute inset-x-0 -bottom-px h-1 origin-left',
-              progressColorByVariant[accentVariant],
+              progressColorByVariant[variant],
             )}
             style={{
               animation: `toast-progress ${liveDurationMs}ms linear forwards`,
@@ -198,6 +100,20 @@ 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,21 +3,11 @@ import { APPROVAL_STATUS, type ApprovalBatchData, type ChatApprovalStatus } from
 
 export type NotificationVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
 
-export type NotificationSeverity = 'INFO' | 'SUCCESS' | 'WARNING' | 'DANGER'
+export type NotificationSeverity = 'INFO' | '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