mgv-backoffice 1.25.0 → 1.28.0

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "mgv-backoffice",
-  "version": "1.25.0",
-  "description": "Shared Vue 3 UI component library",
-  "type": "module",
-  "main": "./dist/ui-lib.umd.cjs",
-  "module": "./dist/ui-lib.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/ui-lib.js",
-      "require": "./dist/ui-lib.umd.cjs"
-    },
-    "./dist/style.css": "./dist/ui-lib.css",
-    "./tailwind.safelist": "./tailwind.safelist.js",
-    "./tailwind.safelist.css": "./tailwind.safelist.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "tailwind.safelist.js",
-    "tailwind.safelist.css"
-  ],
-  "scripts": {
-    "safelist": "node scripts/generate-safelist.mjs",
-    "prebuild": "npm run safelist",
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "peerDependencies": {
-    "@heroicons/vue": "^2.0.0",
-    "vue": "^3.5.0",
-    "vue-router": "^5.0.0"
-  },
-  "devDependencies": {
-    "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.3.1",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/language-core": "^3.3.5",
-    "@vue/test-utils": "^2.4.11",
-    "jsdom": "^29.1.1",
-    "sass": "^1.101.0",
-    "tailwindcss": "^4.3.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0"
-  }
-}
+{
+  "name": "mgv-backoffice",
+  "version": "1.28.0",
+  "description": "Shared Vue 3 UI component library",
+  "type": "module",
+  "main": "./dist/ui-lib.umd.cjs",
+  "module": "./dist/ui-lib.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui-lib.js",
+      "require": "./dist/ui-lib.umd.cjs"
+    },
+    "./dist/style.css": "./dist/ui-lib.css",
+    "./tailwind.safelist": "./tailwind.safelist.js",
+    "./tailwind.safelist.css": "./tailwind.safelist.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.safelist.js",
+    "tailwind.safelist.css"
+  ],
+  "scripts": {
+    "safelist": "node scripts/generate-safelist.mjs",
+    "prebuild": "npm run safelist",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@heroicons/vue": "^2.0.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0"
+  },
+  "devDependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/language-core": "^3.3.5",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "sass": "^1.101.0",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
+  }
+}

package/src/components/BaseAlert.vue

@@ -1,8 +1,31 @@
 <template>
-  <div :class="computeCss()" role="alert">
-    <component :is="iconComponent" class="w-6 h-6 flex-shrink-0" :class="iconColorClass"/>
-    <div>
-      <span class="font-medium pl-1">{{ title }}</span>
+  <!--
+    Inline notice panel (error / warning / success / info).
+
+    v2 (1.27.0): rewritten from the legacy dynamic-class version —
+      • theme-aware via the shared `isDark` ref (same pattern as the other
+        extracted components; no runtime-composed class names, so every
+        class survives Tailwind's static scan)
+      • optional default slot for body content below the title
+      • `compact` variant for slim in-form warnings (text-xs, small icon)
+    Backward compatible: `<BaseAlert title="..." :color="AlertEnum.X" />`
+    renders the same single-line alert as before, mb-4 included.
+  -->
+  <div
+    role="alert"
+    class="flex gap-3 mb-4 rounded-lg border text-sm transition-colors"
+    :class="[compact ? 'items-start px-3 py-2 text-xs' : 'items-start p-4', palette]"
+  >
+    <component
+      :is="iconComponent"
+      class="shrink-0"
+      :class="[compact ? 'w-4 h-4 mt-px' : 'w-5 h-5 mt-0.5', iconColorClass]"
+      aria-hidden="true"
+    />
+    <div class="min-w-0 flex-1">
+      <p v-if="title" class="font-medium">{{ title }}</p>
+      <!-- Body — caller-styled free-form content under the title. -->
+      <slot />
     </div>
   </div>
 </template>
@@ -14,45 +37,68 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from '@heroicons/vue/24/outline'
-import { AlertEnum } from "../enums/AlertEnum";
-import { computed, PropType } from "vue";
-import { getBaseColor } from "../utils/util";
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  color: {
-    type: String as PropType<AlertEnum>,
-    required: false,
-    default: AlertEnum.ERROR
-  }
+import { AlertEnum } from '../enums/AlertEnum'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** Bold headline. Optional when the slot carries the whole message. */
+  title?: string
+  /** Alert mode — drives palette and icon. Defaults to ERROR. */
+  color?: AlertEnum
+  /** Slim variant for in-form warnings: text-xs, smaller icon/padding. */
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  color: AlertEnum.ERROR,
+  compact: false,
 })
 
+const { isDark } = useTheme()
+
+// Literal palette table so Tailwind's scanner sees every class.
+const PALETTES: Record<AlertEnum, { light: string; dark: string }> = {
+  [AlertEnum.ERROR]: {
+    light: 'bg-red-50 border-red-200 text-red-700',
+    dark: 'bg-red-500/10 border-red-500/30 text-red-300',
+  },
+  [AlertEnum.WARNING]: {
+    light: 'bg-amber-50 border-amber-200 text-amber-700',
+    dark: 'bg-amber-500/10 border-amber-500/30 text-amber-300',
+  },
+  [AlertEnum.SUCCESS]: {
+    light: 'bg-emerald-50 border-emerald-200 text-emerald-700',
+    dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300',
+  },
+  [AlertEnum.INFO]: {
+    light: 'bg-sky-50 border-sky-200 text-sky-700',
+    dark: 'bg-sky-500/10 border-sky-500/30 text-sky-300',
+  },
+}
+
+const palette = computed(() =>
+  isDark.value ? PALETTES[props.color].dark : PALETTES[props.color].light,
+)
+
 // Icon + tint follow the alert mode so an error doesn't render with a
 // neutral info glyph.
 const iconComponent = computed(() => {
   switch (props.color) {
-    case AlertEnum.SUCCESS: return CheckCircleIcon;
-    case AlertEnum.WARNING: return ExclamationTriangleIcon;
-    case AlertEnum.INFO: return InformationCircleIcon;
-    default: return ExclamationCircleIcon;
+    case AlertEnum.SUCCESS: return CheckCircleIcon
+    case AlertEnum.WARNING: return ExclamationTriangleIcon
+    case AlertEnum.INFO: return InformationCircleIcon
+    default: return ExclamationCircleIcon
   }
 })
 
 const iconColorClass = computed(() => {
   switch (props.color) {
-    case AlertEnum.SUCCESS: return 'text-green-500';
-    case AlertEnum.WARNING: return 'text-yellow-500';
-    case AlertEnum.INFO: return 'text-gray-500';
-    default: return 'text-red-500';
+    case AlertEnum.SUCCESS: return 'text-emerald-500'
+    case AlertEnum.WARNING: return 'text-amber-500'
+    case AlertEnum.INFO: return 'text-sky-500'
+    default: return 'text-red-500'
   }
 })
-
-function computeCss() {
-  let baseColor = getBaseColor(props.color);
-  return "flex items-center p-4 mb-4 text-sm text-" + baseColor + "-800 border border-" + baseColor + "-300 rounded-lg bg-" + baseColor + "-50 dark:bg-gray-800 dark:text-" + baseColor + "-400 dark:border-" + baseColor + "-800"
-}
 </script>

package/src/components/BaseChipButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <!--
+    Small tinted "chip" action button — the compact emerald "+ Add" pill
+    used above repeatable form rows (extracted from WireMate's CreateMock,
+    where the identical class string appeared seven times).
+
+    Label comes from the default slot so callers can mix text and icons.
+  -->
+  <button
+    type="button"
+    :disabled="disabled"
+    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    :class="[
+      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
+      isDark
+        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
+        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
+    ]"
+    @click="emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
+  size?: 'xs' | 'sm'
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  disabled: false,
+})
+
+const emit = defineEmits<{ click: [] }>()
+
+const { isDark } = useTheme()
+</script>

package/src/components/BaseCollapsibleSection.vue

@@ -18,11 +18,17 @@
       • toggle — fired when the user clicks the header. The parent
         flips its own collapsed state in response.
   -->
-  <section class="rounded-xl border overflow-hidden transition-colors" :class="t.cardAlt">
+  <!--
+    NOTE: no `overflow-hidden` on the section — it would clip floating
+    menus (BaseDropdown) rendered near the bottom of the body. The child
+    corners are rounded explicitly instead so the card silhouette is
+    unchanged.
+  -->
+  <section class="rounded-xl border transition-colors" :class="t.cardAlt">
     <button
       type="button"
       class="w-full flex items-center justify-between p-4 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
-      :class="headerClasses"
+      :class="[headerClasses, collapsed ? 'rounded-xl' : 'rounded-t-xl']"
       :aria-expanded="!collapsed"
       @click="emit('toggle')"
     >
@@ -50,7 +56,7 @@
     </button>
     <div
       v-show="!collapsed"
-      class="p-6 border-t"
+      class="p-6 border-t rounded-b-xl"
       :class="[t.border, resolvedBodyClass]"
     >
       <slot />

package/src/components/BaseDropdown.vue

@@ -25,7 +25,9 @@
       :aria-expanded="open"
       @click="toggle"
     >
-      <span :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+      <!-- min-w-0 + truncate so long labels ellipsize inside narrow
+           (fixed-column) triggers instead of wrapping or widening them. -->
+      <span class="min-w-0 truncate" :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
         {{ selectedOption ? selectedOption.label : placeholder }}
       </span>
       <ChevronDownIcon
@@ -39,7 +41,7 @@
       v-if="open"
       role="listbox"
       :aria-label="ariaLabel || placeholder"
-      class="absolute z-20 mt-1 w-full max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
+      class="absolute z-20 mt-1 w-full min-w-max max-w-xs max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
     >
       <li
         v-for="opt in options"

package/src/components/BaseRemoveButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <!--
+    The "×" remove-row affordance used beside repeatable form rows
+    (extracted from WireMate's CreateMock, where the identical red ×
+    button appeared on every key/value, matcher, and cookie row).
+
+    Renders a multiplication sign; name it for screen readers via
+    `aria-label` (falls through as an attr, as do `title`, `disabled`,
+    and any extra classes like `pt-1` / `self-start`).
+  -->
+  <button
+    type="button"
+    class="px-2 text-lg leading-none text-red-400 hover:text-red-600 transition-colors cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400"
+    @click="emit('click')"
+  >
+    &times;
+  </button>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{ click: [] }>()
+</script>

package/src/components/BaseStatBreakdown.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseStatBreakdown from './BaseStatBreakdown.vue'
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const items: StatBreakdownItem[] = [
+  { label: 'Alpaca', value: 12.5 },
+  { label: 'Kraken', value: -3 },
+  { label: 'Binance', value: null },
+]
+
+describe('BaseStatBreakdown', () => {
+  it('renders one row per item with label and formatted value', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$' },
+    })
+    const rows = wrapper.findAll('.flex')
+    expect(rows).toHaveLength(3)
+    expect(rows[0].text()).toContain('Alpaca')
+    expect(rows[0].text()).toContain('$12.50')
+  })
+
+  it('renders an em-dash for null values instead of a misleading 0', () => {
+    const wrapper = mount(BaseStatBreakdown, { props: { items } })
+    const rows = wrapper.findAll('.flex')
+    expect(rows[2].text()).toContain('—')
+    expect(rows[2].text()).not.toContain('0.00')
+  })
+
+  it('honours the decimals prop', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'BTC', value: 0.5 }], decimals: 8 },
+    })
+    expect(wrapper.text()).toContain('0.50000000')
+  })
+
+  it('prefixes a plus and colours by sign when signed', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$', signed: true },
+    })
+    const values = wrapper.findAll('.font-mono')
+    expect(values[0].text()).toBe('+$12.50')
+    expect(values[0].classes().join(' ')).toContain('text-emerald-600')
+    expect(values[1].text()).toBe('-$3.00')
+    expect(values[1].classes().join(' ')).toContain('text-red-600')
+    // Null rows stay neutral even in signed mode.
+    expect(values[2].classes().join(' ')).toContain('text-slate-500')
+  })
+
+  it('stays neutral-coloured when signed is off', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'Alpaca', value: 12.5 }] },
+    })
+    expect(wrapper.find('.font-mono').classes().join(' ')).toContain('text-slate-500')
+  })
+})

package/src/components/BaseStatBreakdown.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Compact per-item breakdown meant to sit under a summary/stat card (pairs
+// with EarningsCard). Each item renders on its own line — label left, value
+// right in monospace. A null/undefined value (a source that is unconfigured,
+// unreachable, or has no matching rows) shows a dash rather than a
+// misleading 0. With `signed`, values gain an explicit "+" and are coloured
+// green/red by sign.
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const props = withDefaults(
+  defineProps<{
+    items: StatBreakdownItem[]
+    currency?: string
+    decimals?: number
+    signed?: boolean
+  }>(),
+  { currency: '', decimals: 2, signed: false },
+)
+
+function fmt(v: number | null | undefined): string {
+  if (v === null || v === undefined) return '—'
+  // Sign sits before the currency symbol ("-$3.00", "+$5.00" — same shape
+  // as fmtUsd); the plus only appears in signed mode.
+  const sign = v < 0 ? '-' : props.signed ? '+' : ''
+  return `${sign}${props.currency}${Math.abs(v).toFixed(props.decimals)}`
+}
+
+function color(v: number | null | undefined): string {
+  if (!props.signed || v === null || v === undefined) {
+    return 'text-slate-500 dark:text-slate-400'
+  }
+  return v >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
+}
+</script>
+
+<template>
+  <div class="mt-1.5 space-y-0.5 px-1">
+    <div
+      v-for="item in items"
+      :key="item.label"
+      class="flex items-center justify-between text-[11px]"
+    >
+      <span class="text-slate-400 dark:text-slate-500">{{ item.label }}</span>
+      <span class="font-mono tabular-nums font-medium" :class="color(item.value)">
+        {{ fmt(item.value) }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/BaseStatusPill.vue

@@ -0,0 +1,54 @@
+<template>
+  <!--
+    Connection/health status pill: a colored dot (pulsing while ok) next
+    to a short label, on a tinted rounded background. Extracted from
+    WireMate's sidebar WireMock health indicator.
+
+    status: 'ok' → emerald + pulse, 'error' → red, 'unknown' → gray.
+  -->
+  <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs" :class="pillClass">
+    <span class="relative flex h-2 w-2">
+      <span
+        v-if="status === 'ok'"
+        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
+        aria-hidden="true"
+      ></span>
+      <span class="relative inline-flex rounded-full h-2 w-2" :class="dotClass"></span>
+    </span>
+    {{ label }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  status: 'ok' | 'error' | 'unknown'
+  /** Short text next to the dot, e.g. "WireMock Connected". */
+  label: string
+}
+
+const props = defineProps<Props>()
+
+const { isDark } = useTheme()
+
+const pillClass = computed(() => {
+  switch (props.status) {
+    case 'ok':
+      return isDark.value ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700'
+    case 'error':
+      return isDark.value ? 'bg-red-500/10 text-red-400' : 'bg-red-50 text-red-700'
+    default:
+      return isDark.value ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500'
+  }
+})
+
+const dotClass = computed(() => {
+  switch (props.status) {
+    case 'ok': return 'bg-emerald-500'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-gray-400'
+  }
+})
+</script>

package/src/index.ts

@@ -33,6 +33,9 @@ export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
 export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignInButton.vue'
 export { default as BaseLoginForm } from './components/BaseLoginForm.vue'
 export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue'
+export { default as BaseChipButton } from './components/BaseChipButton.vue'
+export { default as BaseRemoveButton } from './components/BaseRemoveButton.vue'
+export { default as BaseStatusPill } from './components/BaseStatusPill.vue'
 
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'
@@ -41,6 +44,7 @@ export { default as BaseDropdown } from './components/BaseDropdown.vue'
 export { default as BaseSegmentedControl } from './components/BaseSegmentedControl.vue'
 export { default as BaseTable } from './components/BaseTable.vue'
 export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
+export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
@@ -77,6 +81,7 @@ export type { SegmentedOption } from './types/segmented'
 export type { DropdownOption } from './types/dropdown'
 export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
+export type { StatBreakdownItem } from './types/statBreakdown'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'
@@ -95,6 +100,7 @@ export {
   fmtPrice,
   fmtPct,
   fmtUsd,
+  fmtDuration,
 } from './utils/format'
 export { computePnL } from './utils/pnl'
 export type { PnL, PnLInputs } from './utils/pnl'

package/src/style.css

@@ -1 +1,10 @@
 @import "tailwindcss";
+
+/* Compile `dark:` variants against the `.dark` class that useTheme()/initTheme()
+   toggle on <html> — NOT the OS-level prefers-color-scheme media query
+   (Tailwind v4's default). Both consumers (TradeAutomation, WireMate) switch
+   themes with the class toggle, so media-gated dark rules leak the dark skin
+   into the light theme for users whose OS prefers dark.
+   Use a specificity-bearing selector (:is, not :where) so dark: utilities win
+   over plain base utilities like bg-slate-50 on a cascade tie. */
+@custom-variant dark (&:is(.dark, .dark *));

package/src/types/statBreakdown.ts

@@ -0,0 +1,6 @@
+export interface StatBreakdownItem {
+  /** Row label rendered on the left (e.g. a venue or category name). */
+  label: string
+  /** Numeric value; null/undefined renders as an em-dash rather than 0. */
+  value: number | null | undefined
+}

package/src/utils/format.test.ts

@@ -7,6 +7,7 @@ import {
   fmtPrice,
   fmtPct,
   fmtUsd,
+  fmtDuration,
 } from './format'
 
 const EM_DASH = '—'
@@ -127,3 +128,37 @@ describe('fmtUsd', () => {
     expect(fmtUsd(0)).toBe('+$0.00')
   })
 })
+
+describe('fmtDuration', () => {
+  it('renders an em-dash for null/undefined/non-finite input', () => {
+    expect(fmtDuration(null)).toBe(EM_DASH)
+    expect(fmtDuration(undefined)).toBe(EM_DASH)
+    expect(fmtDuration(NaN)).toBe(EM_DASH)
+    expect(fmtDuration(Infinity)).toBe(EM_DASH)
+  })
+
+  it('drops zero-value leading units', () => {
+    expect(fmtDuration(12 * 60_000)).toBe('12m')
+    expect(fmtDuration((5 * 60 + 12) * 60_000)).toBe('5h 12m')
+    expect(fmtDuration((3 * 1440 + 5 * 60 + 12) * 60_000)).toBe('3d 5h')
+  })
+
+  it('caps the rendered units at maxUnits', () => {
+    const ms = (2 * 1440 + 5 * 60 + 13) * 60_000
+    expect(fmtDuration(ms, 3)).toBe('2d 5h 13m')
+    expect(fmtDuration(ms, 2)).toBe('2d 5h')
+    expect(fmtDuration(ms, 1)).toBe('2d')
+  })
+
+  it('keeps the hours unit when days are present even if hours are zero', () => {
+    expect(fmtDuration(2 * 1440 * 60_000, 3)).toBe('2d 0h 0m')
+  })
+
+  it('clamps negative durations to zero', () => {
+    expect(fmtDuration(-5000)).toBe('0m')
+  })
+
+  it('renders sub-minute durations as 0m', () => {
+    expect(fmtDuration(59_000)).toBe('0m')
+  })
+})

package/src/utils/format.ts

@@ -87,3 +87,22 @@ export function fmtUsd(v: number): string {
   const sign = v < 0 ? '-' : '+'
   return `${sign}$${Math.abs(v).toFixed(2)}`
 }
+
+/**
+ * Format a millisecond duration as compact day/hour/minute units, e.g.
+ * "3d 5h", "5h 12m" or "12m". Zero-value leading units are dropped;
+ * `maxUnits` caps how many units render (2 → "3d 5h", 3 → "3d 5h 12m").
+ * Renders an em-dash for null/undefined/non-finite input.
+ */
+export function fmtDuration(ms: number | null | undefined, maxUnits = 2): string {
+  if (ms === null || ms === undefined || !isFinite(ms)) return EM_DASH
+  const totalMins = Math.floor(Math.max(0, ms) / 60_000)
+  const days = Math.floor(totalMins / 1440)
+  const hours = Math.floor((totalMins % 1440) / 60)
+  const mins = totalMins % 60
+  const parts: string[] = []
+  if (days > 0) parts.push(`${days}d`)
+  if (days > 0 || hours > 0) parts.push(`${hours}h`)
+  parts.push(`${mins}m`)
+  return parts.slice(0, maxUnits).join(' ')
+}