@flamingo-stack/openframe-frontend-core 0.0.277 → 0.0.278

package/package.json

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

package/src/components/features/index.ts

@@ -76,5 +76,6 @@ export * from './ai-enrich'
 export * from './policy-configuration-panel'
 export * from './waitlist-form'
 export * from './notifications'
+export * from './time-tracker'
 export * from './board'
 export * from './ticket-status-config-list'

package/src/components/features/time-tracker/index.ts

@@ -0,0 +1,18 @@
+export {
+  TimeTrackerProvider,
+  useTimeTracker,
+  useOptionalTimeTracker,
+} from './time-tracker-context'
+export type { TimeTrackerProviderProps } from './time-tracker-context'
+export { TimeTrackerPanel } from './time-tracker-panel'
+export type { TimeTrackerPanelProps } from './time-tracker-panel'
+export { TimeTrackerHeaderButton } from './time-tracker-header-button'
+export type { TimeTrackerHeaderButtonProps } from './time-tracker-header-button'
+export { useTrackerClock } from './use-tracker-clock'
+export type { UseTrackerClockArgs } from './use-tracker-clock'
+export type {
+  TimeTrackerStatus,
+  TimeTrackerTicketOption,
+  TimeTrackerEntry,
+  TimeTrackerData,
+} from './types'

package/src/components/features/time-tracker/time-tracker-context.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import type { TimeTrackerData } from './types'
+
+interface TimeTrackerContextValue extends TimeTrackerData {
+  isOpen: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+const TimeTrackerContext = React.createContext<TimeTrackerContextValue | null>(null)
+
+export interface TimeTrackerProviderProps extends TimeTrackerData {
+  children: React.ReactNode
+  defaultOpen?: boolean
+}
+
+export function TimeTrackerProvider({ children, defaultOpen = false, ...data }: TimeTrackerProviderProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen)
+
+  const open = React.useCallback(() => setIsOpen(true), [])
+  const close = React.useCallback(() => setIsOpen(false), [])
+  const toggle = React.useCallback(() => setIsOpen((v) => !v), [])
+
+  // `data` is a fresh object each render, so the value identity tracks the host's
+  // render — the per-second timer tick lives in `useTrackerClock` (local state),
+  // not here, so consumers don't re-render on every tick.
+  const value: TimeTrackerContextValue = { ...data, isOpen, open, close, toggle }
+
+  return <TimeTrackerContext.Provider value={value}>{children}</TimeTrackerContext.Provider>
+}
+
+export function useTimeTracker(): TimeTrackerContextValue {
+  const ctx = React.useContext(TimeTrackerContext)
+  if (!ctx) {
+    throw new Error('useTimeTracker must be used inside <TimeTrackerProvider>')
+  }
+  return ctx
+}
+
+export function useOptionalTimeTracker(): TimeTrackerContextValue | null {
+  return React.useContext(TimeTrackerContext)
+}

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '../../../utils/cn'
+import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
+import { HeaderButton } from '../../navigation/header-button'
+import { TimeTrackerPanel } from './time-tracker-panel'
+import { useOptionalTimeTracker } from './time-tracker-context'
+import { useTrackerClock } from './use-tracker-clock'
+
+export interface TimeTrackerHeaderButtonProps {
+  /** Dimming/disabled passthrough from the header. */
+  className?: string
+  disabled?: boolean
+}
+
+/**
+ * Header affordance for the time tracker. Renders nothing unless wrapped in a
+ * `<TimeTrackerProvider>`. The trigger is the standard `HeaderButton`; when a
+ * session is active it also shows the live elapsed time. The popup is a Radix
+ * Popover anchored under the button (not a modal/drawer).
+ */
+export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHeaderButtonProps) {
+  const ctx = useOptionalTimeTracker()
+  const elapsedLabel = useTrackerClock({
+    status: ctx?.status ?? 'ready',
+    runningSince: ctx?.runningSince,
+    accumulatedMs: ctx?.accumulatedMs,
+  })
+
+  if (!ctx) return null
+
+  const { isOpen, open, close, status } = ctx
+  const isPaused = status === 'paused'
+  const isActive = status === 'tracking' || isPaused
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={(next) => (next ? open() : close())}>
+      <PopoverPrimitive.Trigger asChild>
+        <HeaderButton
+          aria-label="Time tracker"
+          isActive={isOpen}
+          disabled={disabled}
+          className={cn(
+            isActive && 'w-auto gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-sf)] md:w-auto',
+            className,
+          )}
+          icon={
+            <>
+              <ClockHistoryIcon
+                className={cn(
+                  'h-4 w-4 md:h-6 md:w-6',
+                  isPaused ? 'text-ods-text-secondary' : isActive && 'text-ods-accent',
+                )}
+              />
+              {isActive && (
+                <span
+                  className={cn(
+                    'text-h5 tabular-nums md:text-h4',
+                    isPaused ? 'text-ods-text-secondary' : 'text-ods-text-primary',
+                  )}
+                >
+                  {elapsedLabel}
+                </span>
+              )}
+            </>
+          }
+        />
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="end"
+          sideOffset={0}
+          collisionPadding={8}
+          className={cn(
+            'z-[1300] w-[460px] max-w-[calc(100vw-1rem)] outline-none',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          )}
+        >
+          <TimeTrackerPanel {...ctx} onClose={close} />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cn } from '../../../utils/cn'
+import { Autocomplete, type AutocompleteOption } from '../../ui/autocomplete'
+import { Button } from '../../ui/button/button'
+import { SplitButton } from '../../ui/button/split-button'
+import { Tag } from '../../ui/tag'
+import { Textarea } from '../../ui/textarea'
+import {
+  ArrowRightUpIcon,
+  CheckCircleIcon,
+  Chevron02RightIcon,
+  DotsLoaderIcon,
+  PauseIcon,
+  PlayIcon,
+  PlusCircleIcon,
+  XmarkIcon,
+} from '../../icons-v2-generated'
+import { useTrackerClock } from './use-tracker-clock'
+import type { TimeTrackerData, TimeTrackerEntry, TimeTrackerStatus } from './types'
+
+export interface TimeTrackerPanelProps extends TimeTrackerData {
+  onClose: () => void
+  className?: string
+}
+
+export function TimeTrackerPanel({
+  status,
+  runningSince,
+  accumulatedMs,
+  ticketOptions,
+  selectedTicketIds,
+  onSelectedTicketsChange,
+  onTicketSearch,
+  ticketsLoading,
+  notes,
+  onNotesChange,
+  lastEntries,
+  onStart,
+  onPause,
+  onResume,
+  onCancel,
+  onSubmit,
+  onManualEntry,
+  onOpenMyTime,
+  onOpenMyTimeMenu,
+  onEntryClick,
+  isStarting,
+  isSubmitting,
+  onClose,
+  className,
+}: TimeTrackerPanelProps) {
+  const elapsedLabel = useTrackerClock({ status, runningSince, accumulatedMs })
+
+  const [showValidationError, setShowValidationError] = useState(false)
+
+  const isRunning = status === 'tracking'
+  const isActive = status !== 'ready'
+  const hasContent = selectedTicketIds.length > 0 || notes.trim() !== ''
+  const showFieldError = isActive && showValidationError && !hasContent
+
+  // Reset the validation flag once a session ends so the next one starts clean.
+  useEffect(() => {
+    if (status === 'ready') setShowValidationError(false)
+  }, [status])
+
+  const handleSubmit = () => {
+    if (!hasContent) {
+      setShowValidationError(true)
+      return
+    }
+    onSubmit()
+  }
+
+  const ticketAutocompleteOptions: AutocompleteOption[] = ticketOptions.map((t) => ({
+    label: t.label,
+    value: t.id,
+  }))
+
+  const visibleEntries = lastEntries.slice(0, 3)
+
+  return (
+    <div
+      className={cn(
+        'relative flex max-h-[calc(100vh-6rem)] w-full flex-col gap-[var(--spacing-system-l)] overflow-y-auto rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]',
+        className,
+      )}
+    >
+      <Button
+        variant="transparent"
+        size="icon-sm"
+        onClick={onClose}
+        aria-label="Close time tracker"
+        className="absolute right-[var(--spacing-system-sf)] top-[var(--spacing-system-sf)] text-ods-text-secondary hover:text-ods-text-primary [&_svg]:!size-6"
+      >
+        <XmarkIcon />
+      </Button>
+
+      {/* Status + timer + ticket assignment */}
+      <div className="flex flex-col gap-[var(--spacing-system-m)]">
+        <div className="flex items-center gap-[var(--spacing-system-s)]">
+          <StatusTag status={status} />
+          {isActive && (
+            <Button
+              variant="transparent"
+              onClick={onCancel}
+              className="h-auto p-0 text-h6 font-medium text-ods-text-secondary underline hover:bg-transparent hover:text-ods-text-primary"
+            >
+              Cancel Entry
+            </Button>
+          )}
+        </div>
+
+        <div className="flex items-stretch overflow-hidden rounded-md border border-ods-border">
+          <div className="flex flex-1 items-center border-r border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-s)]">
+            <span
+              className={cn(
+                'text-h3 font-bold tabular-nums',
+                isActive ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+              )}
+            >
+              {elapsedLabel}
+            </span>
+          </div>
+
+          <Button
+            size="icon"
+            variant={isActive ? 'transparent' : 'accent'}
+            onClick={status === 'tracking' ? onPause : status === 'paused' ? onResume : onStart}
+            disabled={isStarting}
+            aria-label={isRunning ? 'Pause tracking' : isActive ? 'Resume tracking' : 'Start tracking'}
+            className="h-auto w-auto rounded-none [&_svg]:!size-6"
+          >
+            {isRunning ? <PauseIcon /> : <PlayIcon />}
+          </Button>
+
+          {isActive && (
+            <Button
+              size="icon"
+              variant="accent"
+              onClick={handleSubmit}
+              disabled={isSubmitting}
+              aria-label="Finish and save tracking"
+              className="h-auto w-auto rounded-none border-l border-ods-border [&_svg]:!size-6"
+            >
+              <CheckCircleIcon />
+            </Button>
+          )}
+        </div>
+
+        <Autocomplete
+          multiple
+          value={selectedTicketIds}
+          onChange={onSelectedTicketsChange}
+          options={ticketAutocompleteOptions}
+          placeholder="Assign Ticket"
+          loading={ticketsLoading}
+          invalid={showFieldError}
+          error={showFieldError ? 'Assign a ticket or add notes to finish' : undefined}
+          disableClientFilter={!!onTicketSearch}
+          onInputChange={(value, reason) => {
+            if (reason === 'input') onTicketSearch?.(value)
+          }}
+        />
+      </div>
+
+      <Textarea
+        value={notes}
+        onChange={(e) => onNotesChange(e.target.value)}
+        invalid={showFieldError}
+        placeholder="Additional Notes (optional if ticket selected)"
+        className="max-h-[280px]"
+      />
+
+      {/* Last entries + footer */}
+      <div className="flex flex-col gap-[var(--spacing-system-m)]">
+        <div className="flex flex-col gap-[var(--spacing-system-xs)]">
+          <p className="font-mono text-h6 uppercase tracking-wide text-ods-text-secondary">Last Entries</p>
+          <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
+            {visibleEntries.length === 0 ? (
+              <div className="flex items-center justify-center px-[var(--spacing-system-m)] py-[var(--spacing-system-l)]">
+                <p className="text-h6 text-ods-text-secondary">No tracked sessions yet</p>
+              </div>
+            ) : (
+              visibleEntries.map((entry) => (
+                <LastEntryRow key={entry.id} entry={entry} onClick={onEntryClick} />
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="flex w-full flex-wrap gap-[var(--spacing-system-m)]">
+          <Button
+            variant="outline"
+            className="min-w-0 flex-1"
+            onClick={onManualEntry}
+            disabled={!onManualEntry}
+            leftIcon={<PlusCircleIcon className="text-ods-text-secondary" />}
+          >
+            Manual Entry
+          </Button>
+          <SplitButton
+            variant="outline"
+            onClick={onOpenMyTime}
+            disabled={!onOpenMyTime && !onOpenMyTimeMenu}
+            mainDisabled={!onOpenMyTime}
+            groupAriaLabel="Open my time"
+            iconAction={{
+              icon: <ArrowRightUpIcon size={24} />,
+              'aria-label': 'Open my time in a new view',
+              onClick: onOpenMyTimeMenu,
+              disabled: !onOpenMyTimeMenu,
+            }}
+          >
+            Open My Time
+          </SplitButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const STATUS_TAG_SKIN = 'gap-[var(--spacing-system-xs)] font-mono font-medium uppercase tracking-tight'
+
+function StatusTag({ status }: { status: TimeTrackerStatus }) {
+  if (status === 'tracking') {
+    return (
+      <Tag variant="success" className={STATUS_TAG_SKIN} icon={<DotsLoaderIcon className="h-4 w-4" />} label="Tracking" />
+    )
+  }
+  if (status === 'paused') {
+    return <Tag variant="warning" className={STATUS_TAG_SKIN} icon={<PauseIcon className="h-4 w-4" />} label="Paused" />
+  }
+  return <Tag variant="grey" className={STATUS_TAG_SKIN} label="Ready to Track" />
+}
+
+interface LastEntryRowProps {
+  entry: TimeTrackerEntry
+  onClick?: (entry: TimeTrackerEntry) => void
+}
+
+function LastEntryRow({ entry, onClick }: LastEntryRowProps) {
+  return (
+    <div className="flex items-center gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0">
+      <div className="flex w-[88px] shrink-0 flex-col justify-center">
+        <span className="truncate text-h4 font-medium text-ods-text-primary">{entry.durationLabel}</span>
+        <span className="truncate text-h6 text-ods-text-secondary">{entry.dateLabel}</span>
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
+        <span className="truncate text-h4 font-medium text-ods-text-primary">{entry.title}</span>
+        {entry.description && (
+          <span className="truncate text-h6 text-ods-text-secondary">{entry.description}</span>
+        )}
+      </div>
+
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => onClick?.(entry)}
+        disabled={!onClick}
+        aria-label={`Open entry: ${entry.title}`}
+        className="h-12 w-12 shrink-0 [&_svg]:!size-6"
+      >
+        <Chevron02RightIcon />
+      </Button>
+    </div>
+  )
+}

package/src/components/features/time-tracker/types.ts

@@ -0,0 +1,61 @@
+export type TimeTrackerStatus = 'ready' | 'tracking' | 'paused'
+
+export interface TimeTrackerTicketOption {
+  id: string
+  label: string
+}
+
+export interface TimeTrackerEntry {
+  id: string
+  /** Pre-formatted duration label, e.g. "00:08:17" (host formats it). */
+  durationLabel: string
+  /** Pre-formatted date label, e.g. "07/12/25". */
+  dateLabel: string
+  title: string
+  description?: string
+}
+
+/**
+ * Everything the host feeds into the purely-UI time tracker.
+ * The UI never performs API calls or owns business state — it renders `status` and
+ * the live timer (derived from `runningSince` + `accumulatedMs`) and emits callbacks.
+ */
+export interface TimeTrackerData {
+  status: TimeTrackerStatus
+  /**
+   * Epoch ms when the current running segment started. Only meaningful while
+   * `status === 'tracking'`. The UI ticks a local interval to display elapsed time
+   * from this value — the backend remains the source of truth.
+   */
+  runningSince?: number | null
+  /** Elapsed ms accrued before the current running segment (paused/resumed sessions). */
+  accumulatedMs?: number
+
+  ticketOptions: TimeTrackerTicketOption[]
+  selectedTicketIds: string[]
+  onSelectedTicketsChange: (ids: string[]) => void
+  /** Called as the user types in the ticket field; host performs the search. */
+  onTicketSearch?: (query: string) => void
+  ticketsLoading?: boolean
+
+  notes: string
+  onNotesChange: (value: string) => void
+
+  /** Previous tracked sessions; the UI renders at most three. */
+  lastEntries: TimeTrackerEntry[]
+
+  onStart: () => void
+  onPause: () => void
+  onResume: () => void
+  /** Discard the in-progress session entirely (reset to idle). Shown while tracking/paused. */
+  onCancel: () => void
+  /** Finish the session. The UI only enables this once at least one field is filled. */
+  onSubmit: () => void
+  onManualEntry?: () => void
+  onOpenMyTime?: () => void
+  onOpenMyTimeMenu?: () => void
+  onEntryClick?: (entry: TimeTrackerEntry) => void
+
+  isStarting?: boolean
+  isSubmitting?: boolean
+}

package/src/components/features/time-tracker/use-tracker-clock.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { TimeTrackerStatus } from './types'
+
+export interface UseTrackerClockArgs {
+  status: TimeTrackerStatus
+  /** Epoch ms the current running segment started (only used while tracking). */
+  runningSince?: number | null
+  /** Elapsed ms accrued before the current running segment. */
+  accumulatedMs?: number
+}
+
+function formatElapsed(totalMs: number): string {
+  const totalSeconds = Math.max(0, Math.floor(totalMs / 1000))
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+}
+
+/**
+ * Display-only timer. Ticks once per second while `status === 'tracking'`; otherwise
+ * renders the static `accumulatedMs`. Returns a formatted `HH:MM:SS` string.
+ */
+export function useTrackerClock({ status, runningSince, accumulatedMs = 0 }: UseTrackerClockArgs): string {
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    if (status !== 'tracking') return
+    setNow(Date.now())
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [status, runningSince])
+
+  const liveMs = status === 'tracking' && runningSince ? now - runningSince : 0
+  return formatElapsed(accumulatedMs + liveMs)
+}

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

@@ -4,6 +4,7 @@ import React from 'react'
 import { useMdUp } from '../../hooks/ui/use-media-query'
 import { cn } from '../../utils/cn'
 import { useOptionalNotifications } from '../features/notifications/notifications-context'
+import { TimeTrackerHeaderButton } from '../features/time-tracker'
 import { LogOutIcon, OpenFrameLogo, OpenFrameText, UserIcon } from '../icons'
 import { BellIcon } from '../icons-v2-generated/interface/bell-icon'
 import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated'
@@ -22,6 +23,8 @@ export interface AppHeaderProps {
   onOrgChange?: (id: string) => void
   showNotifications?: boolean
   unreadCount?: number
+  /** Render the time-tracker button + popup. Requires wrapping the app in `<TimeTrackerProvider>`. */
+  showTimeTracker?: boolean
   /** Render the "Mingo AI" launcher button (drawer-style trigger for an
    *  in-layout `AppLayoutDrawer` hosting the chat panel). Defaults to off. */
   showMingoAI?: boolean
@@ -57,6 +60,7 @@ export const AppHeader = React.memo(function AppHeader({
   onOrgChange,
   showNotifications,
   unreadCount = 0,
+  showTimeTracker = false,
   showMingoAI = false,
   onMingoAI,
   isMingoAIActive = false,
@@ -129,6 +133,11 @@ export const AppHeader = React.memo(function AppHeader({
         />
       )}
 
+      {/* Time tracker button */}
+      {showTimeTracker && (
+        <TimeTrackerHeaderButton disabled={disabled} className={dimmedClass} />
+      )}
+
       {/* Notifications button */}
       {showNotifications && (
         <NotificationsHeaderButton

package/src/components/ui/autocomplete.tsx

@@ -635,18 +635,13 @@ function AutocompleteInner<T = string>(
       <div className="relative" ref={containerRef}>
         {popover}
 
-        {/* Hidden tags popup — outside overflow-hidden, positioned under badge */}
+        {/* Hidden tags popup — outside overflow-hidden; right-anchored to the field */}
         {multiple && showHiddenTags && hiddenTagsCount > 0 && (
           <HiddenTagsPopup
             ref={hiddenTagsPopupRef}
             items={hiddenTags}
             disabled={disabled}
-            style={{
-              left: autoLimitTags.badgeRef.current
-                ? autoLimitTags.badgeRef.current.getBoundingClientRect().left -
-                  (containerRef.current?.getBoundingClientRect().left ?? 0)
-                : 0,
-            }}
+            className="left-auto right-0 max-w-full"
             onRemove={(value) => {
               const newValue = valueArray.filter(v => v !== value)
               ;(props as AutocompleteMultipleProps<T>).onChange(newValue)

package/src/components/ui/hidden-tags-popup.tsx

@@ -26,6 +26,8 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopup(
       ref={ref}
       style={style}
       className={cn(
+        // Base positioning is neutral (left-anchored); consumers override via
+        // `style.left` (search-input, tag-search-input) or `className` (autocomplete).
         "absolute top-full left-0 mt-1 z-50 min-w-[200px]",
         "bg-ods-card border border-ods-border rounded-[6px] shadow-lg",
         "animate-in fade-in-0 zoom-in-95 duration-150",
@@ -40,7 +42,7 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopup(
             "border-b border-ods-border last:border-b-0",
           )}
         >
-          <span className="text-h5 truncate uppercase text-ods-text-primary" title={typeof item.label === 'string' ? item.label : undefined}>
+          <span className="min-w-0 flex-1 text-h5 truncate uppercase text-ods-text-primary" title={typeof item.label === 'string' ? item.label : undefined}>
             {item.label}
           </span>
           {!disabled && onRemove && (