@flamingo-stack/openframe-frontend-core 0.0.263 → 0.0.264-snapshot.20260612115719

package/package.json

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

package/src/components/features/board/ticket-card.tsx

@@ -7,7 +7,9 @@ import * as React from 'react'
 import { LaptopIcon, Flag02Icon } from '../../icons-v2-generated'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '../../../utils/cn'
+import { formatTicketRelativeTime, formatTicketFullTimestamp } from '../../../utils/date-utils'
 import type { BoardPriority, BoardTicket } from './types'
 
 const PRIORITY_COLOR_CLASS: Record<BoardPriority, string> = {
@@ -96,6 +98,9 @@ export function TicketCard({
     </div>
   ) : null
 
+  const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null
+  const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null
+
   const body = (
     <>
       <div className="flex items-start gap-[var(--spacing-system-sf)]">
@@ -111,6 +116,16 @@ export function TicketCard({
         {rightSection}
       </div>
       {ticket.tags?.length ? <TicketTagRow tags={ticket.tags} /> : null}
+      {timestampLabel && tooltipLabel && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <p className="pointer-events-auto text-h6 truncate text-ods-text-secondary">{timestampLabel}</p>
+            </TooltipTrigger>
+            <TooltipContent>{tooltipLabel}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
     </>
   )
 

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

@@ -20,6 +20,7 @@ export interface BoardTicket {
   priority?: BoardPriority
   assignees?: BoardTicketAssignee[]
   tags?: string[]
+  createdAt?: string
 }
 
 export interface BoardColumnDef {

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

@@ -7,6 +7,7 @@ import { Button } from '../../ui/button/button'
 import { Drawer, DrawerContent, DrawerTitle } from '../../ui/drawer'
 import { Switch } from '../../ui/switch'
 import { cn } from '../../../utils/cn'
+import { useNotificationPermission } from '../../../hooks/ui'
 import { useOptionalNotifications } from './notifications-context'
 import { NotificationTile } from './notification-tile'
 import type { Notification, RenderNotificationTile } from './types'
@@ -26,6 +27,7 @@ export function NotificationDrawer({
   renderTile: renderTileProp,
 }: NotificationDrawerProps) {
   const ctx = useOptionalNotifications()
+
   if (!ctx) return null
 
   const {
@@ -39,6 +41,9 @@ export function NotificationDrawer({
     markAllRead,
     markSettled,
     setShowPopups,
+    showDesktopPopups,
+    setShowDesktopPopups,
+    desktopPopupsConfigured,
     onHistoryClick,
     hasMore,
     isLoadingMore,
@@ -55,6 +60,7 @@ export function NotificationDrawer({
       <DrawerContent
         side="right"
         aria-describedby={undefined}
+        offsetHeader
         className={cn(
           'w-[calc(100vw-2rem)] sm:w-[26rem] sm:max-w-[calc(100vw-2rem)] gap-[var(--spacing-system-m)] p-[var(--spacing-system-zero)]',
           className,
@@ -62,6 +68,7 @@ export function NotificationDrawer({
       >
         <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
           <DrawerTitle
+            hideClose
             className="truncate"
             actions={
               <button
@@ -91,7 +98,12 @@ export function NotificationDrawer({
         />
 
         <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
-          <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
+          <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
+            <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
+            {desktopPopupsConfigured && (
+              <DesktopNotificationsToggleRow checked={showDesktopPopups} onChange={setShowDesktopPopups} />
+            )}
+          </div>
           <NotificationsHistoryButton
             onClick={onHistoryClick ? () => { onHistoryClick(); close() } : undefined}
           />
@@ -206,7 +218,7 @@ interface ToggleRowProps {
 
 function ShowNotificationsToggleRow({ checked, onChange }: ToggleRowProps) {
   return (
-    <div className="flex items-center gap-[var(--spacing-system-s)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]">
+    <div className="flex items-center gap-[var(--spacing-system-s)] border-b border-ods-border p-[var(--spacing-system-sf)]">
       <Switch
         checked={checked}
         onCheckedChange={onChange}
@@ -220,6 +232,43 @@ function ShowNotificationsToggleRow({ checked, onChange }: ToggleRowProps) {
   )
 }
 
+/** Switching on prompts for browser permission and commits only when granted; denied renders disabled (can't re-prompt programmatically); unsupported (SSR, iOS Safari) hides the row. */
+function DesktopNotificationsToggleRow({ checked, onChange }: ToggleRowProps) {
+  const { supported, permission, request } = useNotificationPermission()
+  if (!supported) return null
+
+  const blocked = permission === 'denied'
+
+  const handleChange = async (value: boolean) => {
+    if (!value || permission === 'granted') {
+      onChange(value)
+      return
+    }
+    if ((await request()) === 'granted') onChange(true)
+  }
+
+  return (
+    <div className="flex items-center gap-[var(--spacing-system-s)] border-b border-ods-border p-[var(--spacing-system-sf)]">
+      <Switch
+        checked={checked && permission === 'granted'}
+        disabled={blocked}
+        onCheckedChange={handleChange}
+        aria-label="Show desktop notifications"
+      />
+      <div className="min-w-0 flex-1">
+        <p className={cn('text-h4', blocked ? 'text-ods-text-secondary' : 'text-ods-text-primary')}>
+          Desktop Notifications
+        </p>
+        <p className="text-h6 text-ods-text-secondary">
+          {blocked
+            ? 'Enable notifications in your browser settings'
+            : 'Notify when this tab is in the background'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
 interface HistoryButtonProps {
   onClick?: () => void
 }

package/src/components/features/notifications/notifications-context.tsx

@@ -20,6 +20,11 @@ interface NotificationsContextValue {
   close: () => void
   toggle: () => void
   setShowPopups: (value: boolean) => void
+  /** OS-level notification preference; only meaningful when `desktopPopupsConfigured`. */
+  showDesktopPopups: boolean
+  setShowDesktopPopups: (value: boolean) => void
+  /** True when the host app wired desktop notifications (passed `onShowDesktopPopupsChange`). */
+  desktopPopupsConfigured: boolean
   onHistoryClick?: () => void
   hasMore: boolean
   isLoadingMore: boolean
@@ -46,6 +51,9 @@ export interface NotificationsProviderProps {
   maxNotifications?: number
   defaultShowPopups?: boolean
   onShowPopupsChange?: (value: boolean) => void
+  /** Desktop (OS-level) notification preference; providing `onShowDesktopPopupsChange` opts into the drawer toggle. */
+  defaultShowDesktopPopups?: boolean
+  onShowDesktopPopupsChange?: (value: boolean) => void
   onHistoryClick?: () => void
   actions?: NotificationsActions
   /** Pagination — when omitted, the drawer hides its load-more sentinel. */
@@ -138,6 +146,8 @@ export function NotificationsProvider({
   maxNotifications = 50,
   defaultShowPopups = true,
   onShowPopupsChange,
+  defaultShowDesktopPopups = false,
+  onShowDesktopPopupsChange,
   onHistoryClick,
   actions,
   hasMore = false,
@@ -148,6 +158,8 @@ export function NotificationsProvider({
   const [notifications, dispatch] = React.useReducer(reducer, initialNotifications)
   const [isOpen, setIsOpen] = React.useState(false)
   const [showPopups, setShowPopupsState] = React.useState(defaultShowPopups)
+  const [showDesktopPopups, setShowDesktopPopupsState] = React.useState(defaultShowDesktopPopups)
+  const desktopPopupsConfigured = onShowDesktopPopupsChange !== undefined
 
   const actionsRef = React.useRef(actions)
   React.useEffect(() => {
@@ -221,6 +233,14 @@ export function NotificationsProvider({
     [onShowPopupsChange],
   )
 
+  const setShowDesktopPopups = React.useCallback(
+    (value: boolean) => {
+      setShowDesktopPopupsState(value)
+      onShowDesktopPopupsChange?.(value)
+    },
+    [onShowDesktopPopupsChange],
+  )
+
   const unreadCount = React.useMemo(
     () => notifications.reduce((acc, n) => (n.read ? acc : acc + 1), 0),
     [notifications],
@@ -244,6 +264,9 @@ export function NotificationsProvider({
       close,
       toggle,
       setShowPopups,
+      showDesktopPopups,
+      setShowDesktopPopups,
+      desktopPopupsConfigured,
       onHistoryClick,
       hasMore,
       isLoadingMore,
@@ -255,6 +278,9 @@ export function NotificationsProvider({
       unreadCount,
       isOpen,
       showPopups,
+      showDesktopPopups,
+      setShowDesktopPopups,
+      desktopPopupsConfigured,
       addNotification,
       upsertNotification,
       setNotifications,

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

@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '../../utils'
+import { useHeaderHeight } from '../../hooks/ui'
 import { SlidingSidebarConfig, NavigationItem } from '../../types/navigation'
 import { Button } from '../ui/button'
 
@@ -13,89 +14,9 @@ export interface SlidingSidebarProps {
 export function SlidingSidebar({ config }: SlidingSidebarProps) {
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
   const [mounted, setMounted] = useState(false)
-  const [headerHeight, setHeaderHeight] = useState(64) // Default to 64px
+  const headerHeight = useHeaderHeight()
 
-  useEffect(() => {
-    setMounted(true)
-    
-    // Function to calculate total header height
-    const calculateHeaderHeight = () => {
-      let totalHeight = 0
-      
-      // Find and measure the header
-      const header = document.querySelector('header')
-      if (header) {
-        totalHeight += header.offsetHeight
-      }
-      
-      // Find and measure the announcement bar (if exists)
-      const announcementBar = document.querySelector('[data-announcement-bar]')
-      if (announcementBar && announcementBar instanceof HTMLElement) {
-        totalHeight += announcementBar.offsetHeight
-      }
-      
-      // Update the header height if we found elements
-      if (totalHeight > 0) {
-        setHeaderHeight(totalHeight)
-      } else {
-        // If no header found, default to 64px
-        setHeaderHeight(64)
-      }
-    }
-    
-    // Calculate initial height with a small delay to ensure elements are rendered
-    setTimeout(calculateHeaderHeight, 100)
-    
-    // Also calculate immediately in case elements are already there
-    calculateHeaderHeight()
-    
-    // Recalculate on window resize
-    window.addEventListener('resize', calculateHeaderHeight)
-    
-    // Use ResizeObserver to detect header size changes
-    const resizeObserver = new ResizeObserver(calculateHeaderHeight)
-    
-    // Observe header
-    const header = document.querySelector('header')
-    if (header) {
-      resizeObserver.observe(header)
-    }
-    
-    // Observe announcement bar
-    const announcementBar = document.querySelector('[data-announcement-bar]')
-    if (announcementBar) {
-      resizeObserver.observe(announcementBar)
-    }
-    
-    // Use MutationObserver to detect when announcement bar is added/removed
-    const mutationObserver = new MutationObserver((mutations) => {
-      // Check if announcement bar was added or removed
-      for (const mutation of mutations) {
-        if (mutation.type === 'childList') {
-          // Recalculate height when DOM changes
-          calculateHeaderHeight()
-          
-          // If announcement bar was added, start observing it
-          const newAnnouncementBar = document.querySelector('[data-announcement-bar]')
-          if (newAnnouncementBar) {
-            resizeObserver.observe(newAnnouncementBar)
-          }
-        }
-      }
-    })
-    
-    // Observe the body for changes (announcement bar might be added/removed)
-    mutationObserver.observe(document.body, {
-      childList: true,
-      subtree: true
-    })
-    
-    return () => {
-      window.removeEventListener('resize', calculateHeaderHeight)
-      resizeObserver.disconnect()
-      mutationObserver.disconnect()
-    }
-  }, [])
+  useEffect(() => { setMounted(true) }, [])
 
   const toggleExpanded = (itemId: string) => {
     const newExpanded = new Set(expandedItems)

package/src/components/ui/drawer.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
 import { cn } from "../../utils/cn"
+import { useHeaderHeight } from "../../hooks/ui/use-header-height"
 
 const Drawer = DialogPrimitive.Root
 
@@ -354,6 +355,9 @@ interface DrawerContentProps
   panelStyle?: React.CSSProperties
   /** Optional className applied to the inner panel. (Alias for `className`.) */
   panelClassName?: string
+  /** Offset the drawer's top edge below the app header + announcement bar.
+   *  Measured live via ResizeObserver so it tracks height changes. */
+  offsetHeader?: boolean
 }
 
 const DrawerContent = React.forwardRef<
@@ -376,6 +380,7 @@ const DrawerContent = React.forwardRef<
       style,
       panelStyle,
       panelClassName,
+      offsetHeader = false,
       children,
       ...props
     },
@@ -385,6 +390,8 @@ const DrawerContent = React.forwardRef<
     const isHorizontal = HORIZONTAL_SIDES.has(resolvedSide)
     const initialSize = defaultSize ?? (isHorizontal ? 560 : 480)
 
+    const headerHeight = useHeaderHeight()
+
     const [isMobile, setIsMobile] = React.useState(false)
     React.useEffect(() => {
       if (typeof window === "undefined") return
@@ -417,7 +424,7 @@ const DrawerContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(drawerVariants({ side, flush }))}
-          style={style}
+          style={{ ...(offsetHeader ? { top: headerHeight } : {}), ...style }}
           {...props}
         >
           {/* Resize handle is a sibling of the panel — outside the panel's
@@ -468,12 +475,14 @@ interface DrawerTitleProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
   /** Optional header actions rendered between the title and the close button. */
   actions?: React.ReactNode
+  /** Hide the close (X) button. */
+  hideClose?: boolean
 }
 
 const DrawerTitle = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Title>,
   DrawerTitleProps
->(({ className, children, actions, ...props }, ref) => (
+>(({ className, children, actions, hideClose, ...props }, ref) => (
   <div className="flex items-start gap-4">
     <DialogPrimitive.Title
       ref={ref}
@@ -486,10 +495,12 @@ const DrawerTitle = React.forwardRef<
       {children}
     </DialogPrimitive.Title>
     {actions}
-    <DialogPrimitive.Close className="shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0">
-      <X className="size-6" />
-      <span className="sr-only">Close</span>
-    </DialogPrimitive.Close>
+    {!hideClose && (
+      <DialogPrimitive.Close className="shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0">
+        <X className="size-6" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    )}
   </div>
 ))
 DrawerTitle.displayName = "DrawerTitle"

package/src/hooks/ui/index.ts

@@ -1,13 +1,15 @@
 // UI Hooks exports
+export * from './use-auto-limit-tags'
 export * from './use-debounce'
+export * from './use-header-height'
+export * from './use-horizontal-scrollbar'
+export * from './use-image-edge-color'
 export * from './use-local-storage'
 export * from './use-media-query'
 export * from './use-memoized-callback'
+export * from './use-notification-permission'
 export * from './use-onboarding-state'
+export * from './use-search'
 export * from './use-table-pagination'
 export * from './use-throttle'
 export * from './use-window-size'
-export * from './use-horizontal-scrollbar'
-export * from './use-image-edge-color'
-export * from './use-search'
-export * from './use-auto-limit-tags'

package/src/hooks/ui/use-header-height.ts

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Returns the combined height (px) of the sticky page header and announcement
+ * bar (if present), updated live via ResizeObserver / MutationObserver.
+ * Useful for offsetting fixed/absolute-positioned panels so they don't
+ * overlap the header.
+ */
+export function useHeaderHeight(defaultHeight = 64): number {
+  const [height, setHeight] = useState(defaultHeight)
+
+  useEffect(() => {
+    const measure = () => {
+      let total = 0
+      const header = document.querySelector('header')
+      if (header) total += header.offsetHeight
+      const bar = document.querySelector('[data-announcement-bar]')
+      if (bar instanceof HTMLElement) total += bar.offsetHeight
+      setHeight(total > 0 ? total : defaultHeight)
+    }
+
+    measure()
+
+    const resizeObserver = new ResizeObserver(measure)
+    const header = document.querySelector('header')
+    if (header) resizeObserver.observe(header)
+    const bar = document.querySelector('[data-announcement-bar]')
+    if (bar) resizeObserver.observe(bar)
+
+    const mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList' || mutation.type === 'attributes') {
+          measure()
+          const newBar = document.querySelector('[data-announcement-bar]')
+          if (newBar) resizeObserver.observe(newBar)
+        }
+      }
+    })
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['data-announcement-bar'],
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [defaultHeight])
+
+  return height
+}

package/src/hooks/ui/use-horizontal-scrollbar.ts

@@ -17,6 +17,7 @@ export function useHorizontalScrollbar() {
   const trackRef = useRef<HTMLDivElement>(null)
   const thumbRef = useRef<HTMLDivElement>(null)
   const roRef = useRef<ResizeObserver | null>(null)
+  const moRef = useRef<MutationObserver | null>(null)
   const [thumbRatio, setThumbRatio] = useState(0)
 
   // Edge-fade state
@@ -94,6 +95,10 @@ export function useHorizontalScrollbar() {
       roRef.current.disconnect()
       roRef.current = null
     }
+    if (moRef.current) {
+      moRef.current.disconnect()
+      moRef.current = null
+    }
     if (rafIdRef.current) {
       cancelAnimationFrame(rafIdRef.current)
       rafIdRef.current = 0
@@ -105,8 +110,20 @@ export function useHorizontalScrollbar() {
       const ratio = node.clientWidth / node.scrollWidth
       setThumbRatio(ratio >= 1 ? 0 : ratio)
 
-      roRef.current = new ResizeObserver(measure)
-      roRef.current.observe(node)
+      const ro = new ResizeObserver(measure)
+      roRef.current = ro
+      const observeAll = () => {
+        ro.disconnect()
+        ro.observe(node)
+        for (const child of Array.from(node.children)) ro.observe(child)
+      }
+      observeAll()
+
+      moRef.current = new MutationObserver(() => {
+        observeAll()
+        measure()
+      })
+      moRef.current.observe(node, { childList: true })
 
       requestAnimationFrame(() => {
         syncThumbToDOM()

package/src/hooks/ui/use-notification-permission.ts

@@ -0,0 +1,64 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+export interface UseNotificationPermissionResult {
+  /** Whether the page-context Notification API exists in this browser (false during SSR and on iOS Safari). */
+  supported: boolean
+  permission: NotificationPermission
+  /** Prompt the user for permission. Must be called from a user gesture or browsers will auto-deny. */
+  request: () => Promise<NotificationPermission>
+}
+
+/**
+ * Tracks the browser's desktop-notification permission, staying in sync when
+ * the user changes the site setting externally (Permissions API change event
+ * where available, visibility/focus re-read as the Safari fallback).
+ */
+export function useNotificationPermission(): UseNotificationPermissionResult {
+  const [supported, setSupported] = useState(false)
+  const [permission, setPermission] = useState<NotificationPermission>('default')
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !('Notification' in window)) return
+    setSupported(true)
+    const sync = () => setPermission(Notification.permission)
+    sync()
+
+    // The query resolves async; without the flag it would attach the listener after unmount.
+    let cancelled = false
+    let status: PermissionStatus | undefined
+    navigator.permissions
+      ?.query({ name: 'notifications' as PermissionName })
+      .then((s) => {
+        if (cancelled) return
+        status = s
+        s.addEventListener('change', sync)
+      })
+      .catch(() => undefined)
+
+    document.addEventListener('visibilitychange', sync)
+    window.addEventListener('focus', sync)
+    return () => {
+      cancelled = true
+      status?.removeEventListener('change', sync)
+      document.removeEventListener('visibilitychange', sync)
+      window.removeEventListener('focus', sync)
+    }
+  }, [])
+
+  const request = useCallback(async () => {
+    if (typeof window === 'undefined' || !('Notification' in window)) {
+      return 'denied' as NotificationPermission
+    }
+    // Older Safari only implements the callback form; resolving from both is harmless.
+    const result = await new Promise<NotificationPermission>((resolve) => {
+      const maybePromise = Notification.requestPermission(resolve)
+      if (maybePromise && typeof maybePromise.then === 'function') void maybePromise.then(resolve)
+    })
+    setPermission(Notification.permission)
+    return result
+  }, [])
+
+  return { supported, permission, request }
+}

package/src/utils/date-utils.ts

@@ -3,6 +3,42 @@
  * Provides consistent date formatting across all components
  */
 
+/**
+ * Relative display label for a ticket timestamp (ISO string).
+ * < 1 min → "Just now" | 1-59 min → "X min ago" | 1-23 h → "X hour(s) ago" | 24+ h → "MM/DD/YYYY"
+ */
+export function formatTicketRelativeTime(iso: string): string {
+  const now = new Date()
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  const diffMs = now.getTime() - date.getTime()
+  const diffMin = Math.floor(diffMs / 60_000)
+  if (diffMin < 1) return 'Just now'
+  if (diffMin < 60) return `${diffMin} min ago`
+  const diffHours = Math.floor(diffMin / 60)
+  if (diffHours < 24) return diffHours === 1 ? '1 hour ago' : `${diffHours} hours ago`
+  const mm = String(date.getMonth() + 1).padStart(2, '0')
+  const dd = String(date.getDate()).padStart(2, '0')
+  const yyyy = date.getFullYear()
+  return `${mm}/${dd}/${yyyy}`
+}
+
+/**
+ * Full tooltip timestamp in "MM/DD/YYYY, H:MM AM/PM" format.
+ */
+export function formatTicketFullTimestamp(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  const mm = String(date.getMonth() + 1).padStart(2, '0')
+  const dd = String(date.getDate()).padStart(2, '0')
+  const yyyy = date.getFullYear()
+  let hours = date.getHours()
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const ampm = hours >= 12 ? 'PM' : 'AM'
+  hours = hours % 12 || 12
+  return `${mm}/${dd}/${yyyy}, ${hours}:${minutes} ${ampm}`
+}
+
 /**
  * Format relative time from ISO timestamp
  * This is the single source of truth for all relative time formatting

package/src/utils/index.ts

@@ -113,6 +113,8 @@ export {
   isToday,
   isWithinMinutes,
   createUTCTimestamp,
+  formatTicketRelativeTime,
+  formatTicketFullTimestamp,
 } from './date-utils'
 
 // Chat source-icons + labels (server-safe — lives here in src/utils/