@flamingo-stack/openframe-frontend-core 0.0.264 → 0.0.265

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.264",
+  "version": "0.0.265",
   "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/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/