@antelopejs/dms 0.7.6 → 0.7.8

package/frontend-vue/layers/dms-ui/app/build/components/form/FormSectionNav.vue

@@ -25,21 +25,36 @@ const emit = defineEmits<{ select: [sectionId: string] }>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
-// The side list reads its sections in titled runs (`navGroup`); the row of
-// chips has no room for headings and lists them all in one run.
-const GROUPS_CLASSES: Record<FormSectionNavVariant, string> = {
+/**
+ * How the entries are laid out: the side list, the row of chips, or the
+ * chips cut into labelled runs once a section names a `navGroup`.
+ */
+type FormSectionNavLayout = FormSectionNavVariant | "chipGroups";
+
+// A row of chips with no group keeps its one scrolling line; with groups, the
+// runs wrap, each led by its label.
+const GROUPS_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "flex flex-col gap-4",
   chips: "",
+  chipGroups: "flex flex-wrap items-center gap-x-5 gap-y-2.5",
 };
 
-const GROUP_CLASSES: Record<FormSectionNavVariant, string> = {
+const GROUP_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "grid gap-1",
   chips: "contents",
+  chipGroups: "flex flex-wrap items-center gap-x-2 gap-y-1.5",
 };
 
-const VARIANT_CLASSES: Record<FormSectionNavVariant, string> = {
+const LIST_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "flex flex-col gap-0.5",
   chips: "flex gap-1.5 overflow-x-auto pb-1",
+  chipGroups: "flex flex-wrap gap-1.5",
+};
+
+const GROUP_LABEL_CLASSES: Record<FormSectionNavLayout, string> = {
+  list: "px-2.5",
+  chips: "",
+  chipGroups: "shrink-0",
 };
 
 const ITEM_CLASSES: Record<FormSectionNavVariant, string> = {
@@ -55,9 +70,12 @@ const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
 
 const groupIdPrefix = useId();
 const groups = computed<FormSectionNavGroup[]>(() =>
-  props.variant === "list"
-    ? groupSectionsForNav(props.sections)
-    : [{ sections: props.sections }],
+  groupSectionsForNav(props.sections),
+);
+const layout = computed<FormSectionNavLayout>(() =>
+  props.variant === "chips" && groups.value.some((group) => group.label)
+    ? "chipGroups"
+    : props.variant,
 );
 
 function groupHeadingId(index: number): string {
@@ -79,23 +97,20 @@ function onSelect(event: MouseEvent, sectionId: string): void {
 </script>
 
 <template>
-  <nav
-    :aria-label="t('dms.form.sections.nav')"
-    :class="GROUPS_CLASSES[props.variant]"
-  >
+  <nav :aria-label="t('dms.form.sections.nav')" :class="GROUPS_CLASSES[layout]">
     <div
       v-for="(group, groupIndex) in groups"
       :key="group.sections[0]?.id ?? groupIndex"
-      :class="GROUP_CLASSES[props.variant]"
+      :class="GROUP_CLASSES[layout]"
     >
       <DmsEyebrow
         v-if="group.label"
         :id="groupHeadingId(groupIndex)"
         :label="processI18n(group.label)"
-        class="px-2.5"
+        :class="GROUP_LABEL_CLASSES[layout]"
       />
       <ul
-        :class="VARIANT_CLASSES[props.variant]"
+        :class="LIST_CLASSES[layout]"
         :aria-labelledby="group.label ? groupHeadingId(groupIndex) : undefined"
       >
         <li v-for="section in group.sections" :key="section.id">

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -37,6 +37,7 @@ import type {
   FormPageUrls,
 } from "../../composables/table-view/useTableViewConfig";
 import type { CustomRowAction } from "../../../types/row-action";
+import type { TableViewRowClick } from "../../utils/rowClickTrigger";
 import type { RowActionConfig } from "#dms-core/app/types/row-action";
 import type { TableTabItem } from "./Tabs.vue";
 import type { ColumnDisplay } from "../../composables/data-types/useColumnValueRenderer";
@@ -149,6 +150,13 @@ export interface TableProps<T> {
 
   rowIdKey?: string;
   rowActions?: TableRowActionOptions;
+  /**
+   * What runs a row's click action: a double-click (the default) or a single
+   * click (`"single"`). See `isRowClickTrigger`.
+   */
+  rowClick?: TableViewRowClick;
+  /** Id of the row a side panel has open: the grid highlights it. */
+  openRowId?: string;
   customNavItems?: NavItem[];
   tabs?: TableTabItem[];
   customButtons?: CustomButton[];
@@ -412,6 +420,7 @@ import {
 } from "../../composables/table/constants";
 import { mergeColumnOrder } from "../../composables/table/utils/columnOrder";
 import { EYEBROW_CLASS } from "../../utils/eyebrow";
+import { isRowClickTrigger } from "../../utils/rowClickTrigger";
 
 // Same color as the surrounding card frame (.dms-card) so sticky
 // rail/pinned cells blend in instead of showing a contrasting block.
@@ -435,6 +444,12 @@ const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
 const ROW_SELECTED_CELL_BG =
   "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
 
+// The row a side panel has open: the hover tint, held, and an accent rule on
+// its leading edge.
+const ROW_OPEN_BG =
+  "data-[open=true]:bg-elevated data-[open=true]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
+const ROW_OPEN_CELL_BG = "group-data-[open=true]:bg-elevated";
+
 // An expanded row keeps the hover tint and hands its bottom rule to the detail
 // band below it.
 const ROW_EXPANDED_BG = "data-[expanded=true]:bg-elevated";
@@ -501,7 +516,7 @@ const theme = tv({
     colResizer:
       "bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100",
 
-    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG}`,
+    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG} ${ROW_OPEN_BG}`,
     rowCell: `${FIRST_ROW_CELL_GUTTER} border-b-muted border-b h-11 px-3.5 py-0 text-[13px] last:pe-2.5 in-[tr:last-child]:border-b-0 group-data-[expanded=true]:border-b-transparent`,
     rowInternal: "transition-opacity duration-150",
     rowContainer: "relative",
@@ -560,11 +575,11 @@ const theme = tv({
     pinned: {
       left: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
       right: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
     },
     // Dense lists: 36px rows under a 32px header band.
@@ -1205,7 +1220,7 @@ const rowClickAction = (row: T): RowClickAction | undefined =>
 // lights up always opens something.
 const isRowClickable = (row: T): boolean => rowClickAction(row) !== undefined;
 
-const handleRowDoubleClick = (row: T) => {
+const runRowClickAction = (row: T) => {
   const action = rowClickAction(row);
   if (!action) return;
   if (typeof action === "string") {
@@ -1215,6 +1230,19 @@ const handleRowDoubleClick = (row: T) => {
   props.onCustomRowAction?.(action, row);
 };
 
+// Both events reach the row: `rowClick` tells which one runs its action.
+const handleRowPointer = (event: MouseEvent, row: T) => {
+  if (!isRowClickTrigger(props.rowClick, event)) return;
+  runRowClickAction(row);
+};
+
+const isOpenRow = (row: T): boolean =>
+  props.openRowId !== undefined &&
+  String(get(row, rowIdKey)) === props.openRowId;
+
+const isSingleClickRow = (row: T): boolean =>
+  props.rowClick === "single" && isRowClickable(row);
+
 const presenceRailBackground = (row: T): string => {
   if (getRowPresence(row)) return PRESENCE_RAIL_ACTIVE_BG;
   if (props.loading || !isRowClickable(row)) return PANEL_MATCH_BG;
@@ -1339,6 +1367,10 @@ defineShortcuts({
       />
     </template>
 
+    <!-- A strip the table view adds over its rows (the live hold's "N new"),
+         shown whichever chrome the display keeps. -->
+    <slot name="notice" />
+
     <slot name="body" :table="table">
       <section
         ref="tableRoot"
@@ -1472,20 +1504,24 @@ defineShortcuts({
                     <tr
                       :data-selected="row.getIsSelected()"
                       :data-expanded="row.getIsExpanded()"
+                      :data-open="isOpenRow(row.original) || undefined"
+                      :aria-current="isOpenRow(row.original) || undefined"
                       :data-presence="!!getRowPresence(row.original)"
                       :title="
                         getRowPresence(row.original)
                           ? presenceTooltipText(getRowPresence(row.original)!)
                           : undefined
                       "
-                      :class="
+                      :class="[
                         uiTable.row({
                           loading,
                           rowClickable: isRowClickable(row.original),
                           presence: !!getRowPresence(row.original),
-                        })
-                      "
-                      @dblclick="handleRowDoubleClick(row.original)"
+                        }),
+                        { 'cursor-pointer': isSingleClickRow(row.original) },
+                      ]"
+                      @click="handleRowPointer($event, row.original)"
+                      @dblclick="handleRowPointer($event, row.original)"
                       @mouseenter="handleRowHover(row)"
                       @mouseleave="handleRowLeave"
                       @dragover="reorderHandles.allowDrop"

package/frontend-vue/layers/dms-ui/app/build/components/table-view/LiveHoldBanner.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * The strip a `liveHold` table shows while its page is paused and events came
+ * in: "N new · Show". Show reads the rows once; the page stays paused.
+ */
+defineProps<{
+  /** Events the table received since its rows were held or last shown. */
+  count: number;
+}>();
+
+const emit = defineEmits<{ show: [] }>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div
+    role="status"
+    class="dms-live-hold-banner text-highlighted flex items-center gap-2.5 border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]"
+  >
+    <UIcon name="i-ph-pause-circle" class="text-info size-4 shrink-0" />
+    <span class="min-w-0">
+      {{ t("dms.live.new_rows", { count }, count) }}
+    </span>
+    <span aria-hidden="true" class="text-muted">·</span>
+    <UButton
+      :label="t('dms.live.show_new')"
+      color="neutral"
+      variant="link"
+      size="xs"
+      class="p-0 font-medium"
+      @click="emit('show')"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/composables/actions/rowNavigation.ts

@@ -83,3 +83,20 @@ export function listenRowSteps(current: () => RowNavigation | undefined) {
   window.addEventListener("keydown", onKey);
   return () => window.removeEventListener("keydown", onKey);
 }
+
+const CLOSE_KEY = "Escape";
+
+/**
+ * Escape closes a row's side panel, unless the user types in a field or a
+ * layer above it (a dialog, a menu) already handled the key. Returns the
+ * listener's removal.
+ */
+export function listenRowPanelClose(close: () => void) {
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== CLOSE_KEY || event.defaultPrevented) return;
+    if (isTypingTarget(event.target)) return;
+    close();
+  };
+  window.addEventListener("keydown", onKey);
+  return () => window.removeEventListener("keydown", onKey);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -4,7 +4,7 @@ import {
   isConfirmFrom,
 } from "#dms-core/app/types/confirm-dialog";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
-import type { Component } from "vue";
+import { type Component, getCurrentScope, onScopeDispose } from "vue";
 import type { ActionTarget } from "../../../composables/table-view/types/action-target";
 import type { CustomButton } from "../../../composables/table-view/types/custom-button";
 import type { CustomRowAction } from "../../../types/row-action";
@@ -26,7 +26,18 @@ import {
   type RowNavigationSource,
   rowNavigation,
 } from "./rowNavigation";
-import { writeRecordId } from "../table-view/utils/recordLink";
+import {
+  clearWrittenRecord,
+  isDeepLinkAction,
+  writeRecordId,
+  type WrittenRecord,
+} from "../table-view/utils/recordLink";
+import {
+  closeRowSidePanel,
+  closeRowSidePanelOf,
+  openRowSidePanel,
+  rowSidePanelOwnerKey,
+} from "#dms-layout/app/build/composables/layout/rowSidePanel";
 import type { TableUrlScope } from "../table-view/utils/views";
 import { useActionConfirm } from "../confirm/useActionConfirm";
 import {
@@ -72,6 +83,16 @@ interface TargetRunExtras {
   deepLink?: boolean;
 }
 
+type SidePanelTarget = ActionTarget & { type: "sidePanel" };
+
+/** A side panel to open, and on what. */
+interface SidePanelTargetRun extends TargetRunExtras {
+  target: SidePanelTarget;
+  title: string;
+  containerId: string;
+  rowData?: Data;
+}
+
 /** A drawer or modal to open, and on what. */
 interface ComponentTargetRun extends TargetRunExtras {
   target: ActionTarget & { type: "modal" | "drawer" };
@@ -214,14 +235,84 @@ export function useActionTargets(config: ActionTargetsConfig) {
       : openDrawer({ ...options, direction: run.target.direction });
   };
 
+  const resolveTargetComponent = (componentName: string): Component =>
+    (resolveDmsComponent(componentName) || componentName) as Component;
+
+  const rowIdOf = (row?: Data): string | undefined => {
+    if (!row) return undefined;
+    const idKey =
+      config.rowNavigation?.rowIdKey ?? config.rowIdKey ?? DEFAULT_ROW_ID_KEY;
+    const id = get(row, idKey);
+    return id === undefined || id === null ? undefined : String(id);
+  };
+
+  // A deep-linked action keeps the row it has open in the URL; `undefined`
+  // removes it, but only the row this run wrote, on the page it wrote it:
+  // closing as the user navigates leaves the next page's `?record=` alone.
+  const rowRecorder = (deepLink?: boolean) => {
+    let written: WrittenRecord | undefined;
+    return (row?: Data): void => {
+      if (!deepLink || !config.recordScope || !config.rowNavigation) return;
+      if (!row) {
+        clearWrittenRecord(written);
+        written = undefined;
+        return;
+      }
+      written = writeRecordId(config.recordScope, rowIdOf(row));
+    };
+  };
+
+  const ownerKey = rowSidePanelOwnerKey(config.pageId, config.componentId);
+
+  // The panel belongs to the table that opened it: it closes with it.
+  if (getCurrentScope()) onScopeDispose(() => closeRowSidePanelOf(ownerKey));
+
+  // A side panel opened on a listed row steps through the rows shown in place
+  // (the panel computes its position); a deep-linked one keeps the row in the
+  // URL while it is open. A bulk action's panel receives the selection.
+  const handleSidePanelTarget = (run: SidePanelTargetRun) => {
+    const componentName = run.target.component?.componentName;
+    if (!componentName) return;
+    const session = Symbol(componentName);
+    const component = resolveTargetComponent(componentName);
+    const recordRow = rowRecorder(run.deepLink && !run.selection);
+    const componentOptions = {
+      ...run.target.component?.options,
+      pageId: config.pageId,
+      componentId: config.componentId,
+      containerId: run.containerId,
+      selection: run.selection,
+      onSuccessCallback: () => {
+        closeRowSidePanel(session);
+        config.refreshCallback?.();
+      },
+    };
+    const showRow = (row?: Data) => {
+      openRowSidePanel({
+        session,
+        ownerKey,
+        title: run.title,
+        positionLabel: run.target.positionLabel,
+        component,
+        componentOptions,
+        row,
+        rowKey: rowIdOf(row),
+        source: row ? config.rowNavigation : undefined,
+        showRow,
+        onClose: () => recordRow(undefined),
+      });
+      recordRow(row);
+    };
+    showRow(run.rowData);
+  };
+
   // A container opened on a listed row steps through the rows shown (its
   // `navigation` prop, J and K), mounting its component anew on each; a
   // deep-linked one keeps the row in the URL while it is open.
   const handleComponentTarget = (run: ComponentTargetRun) => {
     const componentName = run.target.component?.componentName;
     if (!componentName) return;
-    const component = (resolveDmsComponent(componentName) ||
-      componentName) as Component;
+    const component = resolveTargetComponent(componentName);
     const source = config.rowNavigation;
     let instance: ContainerInstance | undefined;
     let navigation: RowNavigation | undefined;
@@ -242,13 +333,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
         },
       };
     };
-    const recordRow = (row?: Data) => {
-      if (!run.deepLink || !config.recordScope || !source) return;
-      writeRecordId(
-        config.recordScope,
-        row ? String(get(row, source.rowIdKey)) : undefined,
-      );
-    };
+    const recordRow = rowRecorder(run.deepLink);
     function showRow(row: Data) {
       instance?.patch({
         componentOptions: optionsFor(row),
@@ -286,6 +371,15 @@ export function useActionTargets(config: ActionTargetsConfig) {
       ...extras,
     });
 
+  const sidePanelHandler: TargetHandler = (target, label, rowData, extras) =>
+    handleSidePanelTarget({
+      target: target as SidePanelTarget,
+      title: processI18n((target as SidePanelTarget).title || label),
+      containerId: `${config.pageId}-${config.componentId}-${target.type}`,
+      rowData: extras?.selection ? undefined : rowData,
+      ...extras,
+    });
+
   const targetHandlers: Record<string, TargetHandler> = {
     page: (target, _label, rowData) => {
       const pageTarget = target as ActionTarget & { type: "page" };
@@ -332,6 +426,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
       if (quickAction) dispatchQuickActionTarget(quickAction.target);
     },
     drawer: componentHandler,
+    sidePanel: sidePanelHandler,
   };
 
   const targetUrl = (url: string, rowData?: Data): string =>
@@ -421,7 +516,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
       action.label,
       rowData,
       action.confirm,
-      { deepLink: action.deepLink },
+      { deepLink: isDeepLinkAction(action) },
     );
   };
 

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useRefreshTriggers.ts

@@ -1,40 +1,55 @@
 import { onBeforeUnmount, onMounted } from "vue";
 import { useRealtimeTopic } from "../../../../../dms-core/app/composables/realtime/useRealtimeTopic";
-import { onPageBlocksRefresh } from "../../../utils/blockRefresh";
+import {
+  onLivePageBlocksRefresh,
+  onPageBlocksRefresh,
+} from "../../../utils/blockRefresh";
+import { type LiveGate, useLiveGate } from "../live/currentPageLive";
 
 /**
  * Calls `onRefresh` whenever the data behind a block moved without its inputs
  * changing: on each event of one of its realtime topics, and each time the
- * page asks its blocks to refresh (refreshPageBlocks).
+ * page asks its blocks to refresh (refreshPageBlocks, refreshLivePageBlocks).
+ *
+ * On a page declared with `live`, the realtime events and the live refreshes
+ * go through the page's gate: in Direct at most once per `maxRate`, in Pause
+ * not at all — the block counts what it missed and refetches once on resume.
+ * A refresh the user asked for (refreshPageBlocks) reads at once, paused or
+ * not. The returned gate says what was missed.
  */
 export function useRefreshTriggers(
   realtimeTopic: string | string[] | undefined,
   onRefresh: () => void,
-): void {
-  subscribeRealtimeTopics(realtimeTopic, onRefresh);
-  subscribePageRefresh(onRefresh);
+): LiveGate {
+  const gate = useLiveGate(onRefresh);
+  subscribeRealtimeTopics(realtimeTopic, gate.trigger);
+  subscribePageRefresh(gate);
+  return gate;
 }
 
 function subscribeRealtimeTopics(
   topic: string | string[] | undefined,
-  onEvent: () => void,
+  onEvent: (event: object) => void,
 ): void {
   if (!topic) return;
   const topics = Array.isArray(topic) ? topic : [topic];
   for (const entry of topics) {
     useRealtimeTopic(entry, (event) => {
       if (!("type" in event)) return;
-      onEvent();
+      onEvent(event);
     });
   }
 }
 
 // Mounted only: the page refresh is a browser event, and a block the server
 // renders has nothing to refetch.
-function subscribePageRefresh(onRefresh: () => void): void {
-  let unsubscribe: (() => void) | undefined;
+function subscribePageRefresh(gate: LiveGate): void {
+  const unsubscribes: Array<() => void> = [];
   onMounted(() => {
-    unsubscribe = onPageBlocksRefresh(onRefresh);
+    unsubscribes.push(
+      onPageBlocksRefresh(() => gate.catchUp()),
+      onLivePageBlocksRefresh(gate.trigger),
+    );
   });
-  onBeforeUnmount(() => unsubscribe?.());
+  onBeforeUnmount(() => unsubscribes.splice(0).forEach((stop) => stop()));
 }

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/cellHelpers.ts

@@ -4,6 +4,8 @@ import {
   type ComposableText,
   isComposedText,
 } from "../../../../../dms-core/app/utils/composedText";
+import type { Tone } from "../../../types/tone";
+import { DMS_TONE_TEXT, isDmsTone } from "../../utils/tone";
 
 // What the cell data types share: reading a sibling field off the row, and
 // the text tones a cell takes.
@@ -13,6 +15,28 @@ export type Row = Record<string, unknown> | undefined;
 export const readRowField = (row: Row, field: string | undefined): unknown =>
   field && row ? get(row, field) : undefined;
 
+/**
+ * The `Tone` a row field holds (`toneField` of a display), or nothing when the
+ * field is unset or holds no known tone.
+ */
+export const readRowTone = (
+  row: Row,
+  field: string | undefined,
+): Tone | undefined => {
+  const tone = readRowField(row, field);
+  return typeof tone === "string" && isDmsTone(tone) ? tone : undefined;
+};
+
+/** The text colour of the row's tone, else `fallback` (the display's own). */
+export const rowToneTextClass = (
+  row: Row,
+  field: string | undefined,
+  fallback: string,
+): string => {
+  const tone = readRowTone(row, field);
+  return tone ? DMS_TONE_TEXT[tone] : fallback;
+};
+
 export const stringOf = (value: unknown): string | undefined =>
   value === null || value === undefined || value === ""
     ? undefined

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/metricCells.ts

@@ -3,8 +3,14 @@ import type { DataType } from "#dms-core/app/composables/data-types/useDataType"
 import StatusPill from "../../../components/status-pill/StatusPill.vue";
 import MonoCell from "../../components/table/MonoCell.vue";
 import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
-import { isDmsTone } from "../../utils/tone";
-import { readRowField, readSubline, toneClass, type Row } from "./cellHelpers";
+import {
+  readRowField,
+  readRowTone,
+  readSubline,
+  rowToneTextClass,
+  toneClass,
+  type Row,
+} from "./cellHelpers";
 
 const Sparkline = defineAsyncComponent(
   () => import("../../../components/chart/internal/Sparkline.vue"),
@@ -34,9 +40,7 @@ interface StatusPillOptions {
 
 // A row field that holds no known tone gives way to the column's map.
 function statusPillTone(opts: StatusPillOptions, key: string, row: Row) {
-  const rowTone = readRowField(row, opts.toneField);
-  if (typeof rowTone === "string" && isDmsTone(rowTone)) return rowTone;
-  return opts.tones?.[key] ?? "neutral";
+  return readRowTone(row, opts.toneField) ?? opts.tones?.[key] ?? "neutral";
 }
 
 /**
@@ -186,6 +190,17 @@ const withSymbol = (
 ): string =>
   `${new Intl.NumberFormat(locale, { maximumFractionDigits }).format(value)} ${symbol}`;
 
+/** A duration always in milliseconds, its digits grouped: "2,149 ms". */
+export function formatMilliseconds(ms: number, locale: string): string {
+  const figure = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 0,
+    // `true` groups a four-digit figure too, where a locale's default (es,
+    // pl) would leave "2149" against "12.149" further down the column.
+    useGrouping: true,
+  }).format(ms);
+  return `${figure} ms`;
+}
+
 /**
  * A duration in its most readable unit: "910 ms", "1.8 s", "4 min 12 s",
  * "2 h 5 min".
@@ -225,8 +240,42 @@ export function formatBytes(bytes: number, locale: string): string {
   );
 }
 
-const figure = (text: string) =>
-  h("span", { class: [FIGURE_CLASS, "block text-right text-toned"] }, text);
+const FIGURE_TONE_CLASS = "text-toned";
+
+const figure = (text: string, toneClass = FIGURE_TONE_CLASS) =>
+  h("span", { class: [FIGURE_CLASS, "block text-right", toneClass] }, text);
+
+interface DurationOptions {
+  unit?: string;
+  /** `readable` (the default) or `ms`. */
+  format?: string;
+  /** Row field holding the figure's tone. */
+  toneField?: string;
+}
+
+const DURATION_FORMATS: Record<string, typeof formatDuration> = {
+  readable: formatDuration,
+  ms: formatMilliseconds,
+};
+
+/**
+ * `duration`: the figure in its most readable unit, or in milliseconds
+ * (`format: "ms"`), in the tone the row gives (`toneField`).
+ */
+function renderDuration(
+  value: unknown,
+  locale: string,
+  options: unknown,
+  row: Row,
+) {
+  const opts = (options ?? {}) as DurationOptions;
+  const ms = numberOf(value) * (DURATION_UNIT_MS[opts.unit ?? "ms"] ?? 1);
+  const format = DURATION_FORMATS[opts.format ?? "readable"] ?? formatDuration;
+  return figure(
+    format(ms, locale),
+    rowToneTextClass(row, opts.toneField, FIGURE_TONE_CLASS),
+  );
+}
 
 /**
  * Cell data types a column picks through its `display` option to draw a
@@ -259,15 +308,8 @@ export const registerMetricCellTypes = (
   registerDataType({
     id: "duration",
     formatter: {
-      default: (value, locale, options) => {
-        const unit = (options as { unit?: string } | undefined)?.unit ?? "ms";
-        return figure(
-          formatDuration(
-            numberOf(value) * (DURATION_UNIT_MS[unit] ?? 1),
-            locale,
-          ),
-        );
-      },
+      default: (value, locale, options, row) =>
+        renderDuration(value, locale, options, row),
     },
   });
   registerDataType({