@antelopejs/dms 0.6.0 → 0.6.2

package/frontend-vue/layers/dms-core/app/utils/composedText.ts

@@ -0,0 +1,227 @@
+import type {
+  BlockText,
+  ComposedText,
+  ComposedTextDateFormat,
+  ComposedTextDateParam,
+  ComposedTextMoneyParam,
+  ComposedTextNumberFormat,
+  ComposedTextNumberParam,
+  ComposedTextParam,
+  ComposedTextParamType,
+  ComposedTextRelativeDateParam,
+  ComposedTextTypedParam,
+} from "../types/composed-text";
+import {
+  readTranslationKey,
+  resolveI18nKey,
+} from "../composables/translation/useTranslation";
+import { formatDate, formatNumber, formatRelativeDistance } from "./formatter";
+
+/** `t` as vue-i18n takes it: the key, the named values, the plural count. */
+export type ComposedTextTranslate = (
+  key: string,
+  named: Record<string, unknown>,
+  plural?: number,
+) => string;
+
+/** What a composed text is written with. */
+export interface ComposedTextContext {
+  translate: ComposedTextTranslate;
+  /** The language the values are written in. */
+  locale: string;
+  /** The instant relative dates are measured from; defaults to now. */
+  now?: number;
+}
+
+/** Any value a text slot of a block may receive, fetched data included. */
+export type ComposableText = BlockText | number | null | undefined;
+
+type ParamFormatter<Param extends ComposedTextTypedParam> = (
+  param: Param,
+  context: ComposedTextContext,
+) => string;
+
+type ParamFormatters = {
+  [Type in ComposedTextParamType]: ParamFormatter<
+    Extract<ComposedTextTypedParam, { type: Type }>
+  >;
+};
+
+// What a currency without a known minor unit is assumed to have, as most do.
+const DEFAULT_MINOR_DIGITS = 2;
+const DECIMAL_BASE = 10;
+const DEFAULT_DATE_FORMAT: ComposedTextDateFormat = "medium";
+
+const DATE_FORMATS: Record<ComposedTextDateFormat, Intl.DateTimeFormatOptions> =
+  {
+    day: { month: "short", day: "numeric" },
+    short: { dateStyle: "short" },
+    medium: { dateStyle: "medium" },
+    long: { dateStyle: "long" },
+  };
+
+// Intl refuses `dateStyle` next to `hour`, so each format names its time the
+// way its date is written.
+const DATETIME_FORMATS: Record<
+  ComposedTextDateFormat,
+  Intl.DateTimeFormatOptions
+> = {
+  day: { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" },
+  short: { dateStyle: "short", timeStyle: "short" },
+  medium: { dateStyle: "medium", timeStyle: "short" },
+  long: { dateStyle: "long", timeStyle: "short" },
+};
+
+const NUMBER_FORMATS: Record<
+  ComposedTextNumberFormat,
+  Intl.NumberFormatOptions
+> = {
+  decimal: {},
+  percent: { style: "percent", maximumFractionDigits: 2 },
+  compact: { notation: "compact" },
+};
+
+/** Whether a value is a composed text rather than a plain string. */
+export function isComposedText(value: unknown): value is ComposedText {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as ComposedText).key === "string"
+  );
+}
+
+function isTypedParam(value: unknown): value is ComposedTextTypedParam {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as ComposedTextTypedParam).type === "string"
+  );
+}
+
+function formatMoney(
+  param: ComposedTextMoneyParam,
+  { locale }: ComposedTextContext,
+): string {
+  try {
+    const format = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: param.currency,
+    });
+    const digits =
+      format.resolvedOptions().maximumFractionDigits ?? DEFAULT_MINOR_DIGITS;
+    return format.format(param.value / DECIMAL_BASE ** digits);
+  } catch {
+    // A malformed currency code: the amount is still worth showing.
+    return String(
+      formatNumber(param.value / DECIMAL_BASE ** DEFAULT_MINOR_DIGITS, locale),
+    );
+  }
+}
+
+function dateFormatter(
+  formats: Record<ComposedTextDateFormat, Intl.DateTimeFormatOptions>,
+): ParamFormatter<ComposedTextDateParam> {
+  return (param, { locale }) =>
+    formatDate(
+      param.value,
+      locale,
+      formats[param.format ?? DEFAULT_DATE_FORMAT] ?? formats.medium,
+    ) ?? String(param.value);
+}
+
+function formatNumberParam(
+  param: ComposedTextNumberParam,
+  { locale }: ComposedTextContext,
+): string {
+  const options = NUMBER_FORMATS[param.format ?? "decimal"] ?? {};
+  return String(formatNumber(param.value, locale, options));
+}
+
+function formatRelativeParam(
+  param: ComposedTextRelativeDateParam,
+  { locale, now }: ComposedTextContext,
+): string {
+  // Intl throws on an invalid date: the raw value beats a broken page.
+  if (Number.isNaN(new Date(param.value).getTime())) return String(param.value);
+  return formatRelativeDistance(param.value, locale, { now });
+}
+
+const PARAM_FORMATTERS: ParamFormatters = {
+  money: formatMoney,
+  date: dateFormatter(DATE_FORMATS),
+  datetime: dateFormatter(DATETIME_FORMATS),
+  relative: formatRelativeParam,
+  number: formatNumberParam,
+  count: (param, { locale }) => String(formatNumber(param.value, locale)),
+};
+
+function formatParam(
+  param: ComposedTextParam,
+  context: ComposedTextContext,
+): string {
+  if (typeof param === "string") return param;
+  if (typeof param === "number") {
+    return String(formatNumber(param, context.locale));
+  }
+  if (isComposedText(param)) return composeText(param, context);
+  const formatter = PARAM_FORMATTERS[param.type] as
+    | ParamFormatter<ComposedTextTypedParam>
+    | undefined;
+  // A type from a newer backend: its raw value beats a hole in the sentence.
+  return formatter ? formatter(param, context) : String(param.value ?? "");
+}
+
+function numberOf(param: ComposedTextParam | undefined): number | undefined {
+  if (typeof param === "number") return param;
+  if (isTypedParam(param) && typeof param.value === "number") {
+    return param.value;
+  }
+  return undefined;
+}
+
+function pluralCount(text: ComposedText): number | undefined {
+  const params = text.params ?? {};
+  const name =
+    text.plural ??
+    Object.keys(params).find((candidate) => {
+      const param = params[candidate];
+      return isTypedParam(param) && param.type === "count";
+    });
+  return name === undefined ? undefined : numberOf(params[name]);
+}
+
+function composeText(text: ComposedText, context: ComposedTextContext): string {
+  const { key } = readTranslationKey(text.key);
+  const named = Object.fromEntries(
+    Object.entries(text.params ?? {}).map(([name, param]) => [
+      name,
+      formatParam(param, context),
+    ]),
+  );
+  const plural = pluralCount(text);
+  return plural === undefined
+    ? context.translate(key, named)
+    : context.translate(key, named, plural);
+}
+
+/**
+ * Writes any text a block receives in the reader's language: a
+ * `ComposedText` is translated with its parameters formatted for `locale`
+ * (amounts, dates, counts and their plural), a `$`-prefixed string is
+ * translated, any other string is returned as written, a number is written
+ * for `locale`, and nothing is the empty string.
+ *
+ * A key the active language lacks falls back as vue-i18n does: to the
+ * fallback language, then to the bare key.
+ */
+export function resolveComposedText(
+  text: ComposableText,
+  context: ComposedTextContext,
+): string {
+  if (text === null || text === undefined) return "";
+  if (typeof text === "number") {
+    return String(formatNumber(text, context.locale));
+  }
+  if (isComposedText(text)) return composeText(text, context);
+  return resolveI18nKey(context.translate, String(text));
+}

package/frontend-vue/layers/dms-core/app/utils/formatter.ts

@@ -119,6 +119,55 @@ export function formatRelativeTime(
   });
 }
 
+interface RelativeUnit {
+  unit: Intl.RelativeTimeFormatUnit;
+  ms: number;
+  /** The unit applies below this distance. */
+  below: number;
+}
+
+// Months and years by their average length: a distance, not a calendar span.
+const MONTH_MS = 30 * TIME_UNITS.d;
+const YEAR_MS = 365 * TIME_UNITS.d;
+
+const RELATIVE_UNITS: RelativeUnit[] = [
+  { unit: "minute", ms: TIME_UNITS.m, below: TIME_UNITS.h },
+  { unit: "hour", ms: TIME_UNITS.h, below: TIME_UNITS.d },
+  { unit: "day", ms: TIME_UNITS.d, below: TIME_UNITS.w },
+  { unit: "week", ms: TIME_UNITS.w, below: MONTH_MS },
+  { unit: "month", ms: MONTH_MS, below: YEAR_MS },
+  { unit: "year", ms: YEAR_MS, below: Number.POSITIVE_INFINITY },
+];
+
+export interface RelativeDistanceOptions {
+  /** `long` ("in 3 hours") by default; `short` ("in 3 hr.") for tight cells. */
+  style?: Intl.RelativeTimeFormatStyle;
+  /** The instant the distance is measured from; defaults to now. */
+  now?: number;
+}
+
+/**
+ * "in 3 days", "tomorrow", "2 hours ago": the distance between `date` and
+ * now, past or future, in the largest unit that keeps it a whole number. Not
+ * capitalised, so it reads inside a sentence.
+ */
+export function formatRelativeDistance(
+  date: string | number | Date,
+  locale: string,
+  { style = "long", now = Date.now() }: RelativeDistanceOptions = {},
+): string {
+  const deltaMs = new Date(date).getTime() - now;
+  const distance = Math.abs(deltaMs);
+  const unit =
+    RELATIVE_UNITS.find((candidate) => distance < candidate.below) ??
+    RELATIVE_UNITS[RELATIVE_UNITS.length - 1]!;
+  const value = Math.round(deltaMs / unit.ms);
+  return new Intl.RelativeTimeFormat(locale, { numeric: "auto", style }).format(
+    value,
+    unit.unit,
+  );
+}
+
 const defaultDateFormatterOptions: Intl.DateTimeFormatOptions = {
   year: "numeric",
   month: "long",

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardBanners.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import DmsBlockActions from "#dms-ui/app/build/components/blocks/BlockActions.vue";
+import { useComposedText } from "#dms-core/app/composables/translation/useComposedText";
+
 /**
  * Stacks the global layout banners under the dashboard header, on every page
  * of the dashboard layout. Each banner carries its own live-region role, so a
- * banner appearing after a navigation is announced as well.
+ * banner appearing after a navigation is announced as well. A text is a
+ * string or a composed text, written in the reader's language, followed by
+ * the banner's link buttons.
  */
 const { banners, dismiss } = useLayoutBanners();
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
 // Rows read as tinted bands (design .banner strip): no ring, the colour kept
 // for the icon and the hairline between stacked rows.
@@ -63,7 +68,16 @@ const entries = computed(() =>
             v-if="banner.component"
             v-bind="banner.props"
           />
-          <template v-else>{{ processI18n(banner.text ?? "") }}</template>
+          <template v-else>{{ processText(banner.text) }}</template>
+        </template>
+        <template v-if="!banner.component && banner.actions?.length" #actions>
+          <DmsBlockActions
+            :actions="banner.actions"
+            size="xs"
+            lead-position="last"
+            :lead-color="presentation.color"
+            rest-variant="ghost"
+          />
         </template>
       </UAlert>
     </div>

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue

@@ -14,6 +14,7 @@ import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePe
 import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
 import { runMountedQuickAction } from "#dms-ui/app/build/utils/quickActionTargets";
 import { useActionTargets } from "#dms-ui/app/build/composables/actions/useActionTargets";
+import { refreshPageBlocks } from "#dms-ui/app/utils/blockRefresh";
 import {
   dispatchQuickActionTarget,
   findServedQuickAction,
@@ -60,11 +61,14 @@ const router = useDmsRouter();
 const { $authFetch } = useAuthFetch();
 
 // The page header runs a declared button's target as a table runs its
-// toolbar buttons: confirmation, drawer, modal, API call, export, link.
+// toolbar buttons: confirmation, drawer, modal, API call, export, link. A
+// button that changed something (an API call, a form it opened) changes the
+// record the page shows: its blocks read their data again.
 const { handleCustomButton } = useActionTargets({
   api: $authFetch,
   componentId: "page-header",
   pageId: siteLayout.findMatchingRoute(route.path)?.metadata?.fullId ?? "page",
+  refreshCallback: refreshPageBlocks,
   handleApiError: (error, title) => useApiError(error, { title }),
 });
 

package/frontend-vue/layers/dms-layout/app/types/page.ts

@@ -1,3 +1,6 @@
+import type { BlockText } from "#dms-core/app/types/composed-text";
+import type { BlockAction } from "#dms-ui/app/build/components/blocks/BlockActions.vue";
+
 export type MenuItemType = "label" | "link";
 // MenuItemVariant / MenuItemStatus / MenuItemQuery live in dms-core, the layer
 // that renders them: this one only consumes them.
@@ -101,7 +104,10 @@ export interface LayoutBanner {
   order: number;
   dismissible: boolean;
   icon?: string;
-  text?: string;
+  /** A string (`$` for an i18n key) or a composed text. */
+  text?: BlockText;
+  /** Link buttons after the text; the last one leads. */
+  actions?: BlockAction[];
   component?: string;
   props?: Record<string, unknown>;
 }

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

@@ -5,7 +5,9 @@ import { useFileReadUrls } from "../../../composables/useFileReadUrls";
 /**
  * The `identity` cell of a table: an avatar (or an icon tile), a name with an
  * optional "You" tag and status badges, and a secondary line (an address).
- * Rendered by the `identity` data type, which reads the extras off the row.
+ * A row without a name may stand as a muted `emptyLabel` and an `emptyIcon`
+ * tile ("Automatic" and a robot). Rendered by the `identity` data type, which
+ * reads the extras off the row.
  */
 interface IdentityCellBadge {
   label: string;
@@ -18,6 +20,8 @@ interface IdentityCellProps {
   title?: string;
   /** Secondary line under the title. */
   subtitle?: string;
+  /** Text classes of the secondary line (its tone). */
+  subtitleClass?: string;
   /** Image value (`{ key }`, resolved through the file API) or a URL. */
   avatar?: { key: string; alt?: string } | string | null;
   /** Icon drawn in a tile instead of an avatar. */
@@ -30,17 +34,24 @@ interface IdentityCellProps {
   badges?: IdentityCellBadge[];
   /** Storage the avatar's file key lives in. */
   storage?: string;
+  /** Name drawn, muted, when there is no title. */
+  emptyLabel?: string;
+  /** Icon tile drawn when there is no title; `icon` otherwise. */
+  emptyIcon?: string;
 }
 
 const props = withDefaults(defineProps<IdentityCellProps>(), {
   title: "",
   subtitle: "",
+  subtitleClass: "text-dimmed",
   avatar: null,
   icon: undefined,
   selfId: undefined,
   selfLabel: undefined,
   badges: () => [],
   storage: undefined,
+  emptyLabel: undefined,
+  emptyIcon: undefined,
 });
 
 const { user } = useCurrentUser();
@@ -49,7 +60,22 @@ const { getUrl, resolve } = useFileReadUrls(props.storage);
 const MAX_INITIALS = 2;
 const INITIALS_SPLIT = /[\s.@_-]+/;
 
+const isEmpty = computed(
+  () => !props.title && !!(props.emptyLabel || props.emptyIcon),
+);
 const label = computed(() => props.title || props.subtitle);
+const name = computed(() =>
+  isEmpty.value && props.emptyLabel ? props.emptyLabel : label.value,
+);
+const tileIcon = computed(() =>
+  isEmpty.value ? (props.emptyIcon ?? props.icon) : props.icon,
+);
+// Without a title the subtitle stands as the name, unless an empty label does.
+const hasSubtitleLine = computed(
+  () =>
+    !!props.subtitle &&
+    (!!props.title || (isEmpty.value && !!props.emptyLabel)),
+);
 const isSelf = computed(
   () => !!props.selfId && props.selfId === user.value?._id,
 );
@@ -79,10 +105,10 @@ const initials = computed(() =>
     ellipsis, the full label in their tooltip), then the name. -->
   <div class="flex min-w-0 items-center gap-2.5">
     <span
-      v-if="props.icon"
+      v-if="tileIcon"
       class="bg-accented text-toned grid size-7 shrink-0 place-items-center rounded-[7px]"
     >
-      <UIcon :name="props.icon" class="size-3.5" />
+      <UIcon :name="tileIcon" class="size-3.5" />
     </span>
     <UAvatar
       v-else
@@ -94,9 +120,10 @@ const initials = computed(() =>
     />
     <div class="min-w-0">
       <span
-        class="text-highlighted flex min-w-0 items-center gap-1.5 leading-[1.3] font-semibold"
+        class="flex min-w-0 items-center gap-1.5 leading-[1.3]"
+        :class="isEmpty ? 'text-muted' : 'text-highlighted font-semibold'"
       >
-        <span class="truncate" :title="label">{{ label }}</span>
+        <span class="truncate" :title="name">{{ name }}</span>
         <span
           v-if="isSelf && props.selfLabel"
           class="text-dimmed shrink-0 font-mono text-[10px] font-semibold tracking-[0.06em] uppercase"
@@ -116,8 +143,10 @@ const initials = computed(() =>
         />
       </span>
       <span
-        v-if="props.title && props.subtitle"
-        class="text-dimmed block truncate text-xs leading-[1.2]"
+        v-if="hasSubtitleLine"
+        class="block truncate text-xs leading-[1.2]"
+        :class="props.subtitleClass"
+        :title="props.subtitle"
       >
         {{ props.subtitle }}
       </span>

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

@@ -0,0 +1,7 @@
+import { BlockFunctions, refreshPageBlocks } from "../../../utils/blockRefresh";
+
+export function registerBlockFunctions() {
+  const { registerFunction } = useDefinedFunctions();
+
+  registerFunction(BlockFunctions.REFRESH_PAGE, () => refreshPageBlocks());
+}

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

@@ -12,9 +12,15 @@ export interface BlockItemsResponse<T> {
 export interface UseBlockItemsOptions<T> {
   /** The items written in the block's options (read reactively). */
   items: () => T[] | undefined;
-  /** Route answering `{ items }`; when set it replaces the static items. */
+  /**
+   * Route answering `{ items }`; when set it replaces the static items. Its
+   * `{{params.X}}` and `{{query.X}}` tokens are filled from the page URL, and
+   * nothing is requested while one has no value (see useChartFetch).
+   */
   fetchUrl?: string;
   fetchUrlMethod?: string;
+  /** The parameters of the page route (the block's `routeParams` prop). */
+  routeParams?: () => Record<string, string> | undefined;
   watchActions?: WatchAction[];
   componentId?: string;
 }
@@ -31,8 +37,9 @@ export interface UseBlockItemsReturn<T> {
 /**
  * The items a list block (StatGroup, KeyValueList, NavCardGrid) renders:
  * either the static ones of its options, or the `items` its `fetchUrl`
- * answers with — refetched when a watched event changes the block's state,
- * like the KPI and top-list cards.
+ * answers with — refetched when a watched event changes the block's state or
+ * the page asks its blocks to refresh (refreshPageBlocks), like the KPI and
+ * top-list cards.
  */
 export function useBlockItems<T>(
   options: UseBlockItemsOptions<T>,
@@ -49,6 +56,7 @@ export function useBlockItems<T>(
   >({
     fetchUrl: options.fetchUrl,
     fetchUrlMethod: options.fetchUrlMethod,
+    routeParams: options.routeParams,
     watchSource: () => watchKey.value,
   });
 

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

@@ -1,4 +1,9 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { BlockText } from "../../../../../dms-core/app/types/composed-text";
+import {
+  type ComposableText,
+  isComposedText,
+} from "../../../../../dms-core/app/utils/composedText";
 
 // What the cell data types share: reading a sibling field off the row, and
 // the text tones a cell takes.
@@ -37,3 +42,55 @@ export const toneClass = (
   tone: string | undefined,
   fallback = "default",
 ): string => CELL_TONES[tone ?? fallback] ?? CELL_TONES[fallback]!;
+
+/**
+ * A cell's secondary line with its tone, as a row field holds it. Mirror of
+ * `CellSubline` from `@antelopejs/interface-dms/base/table-view`.
+ */
+export interface CellSubline {
+  text: BlockText;
+  tone?: string;
+}
+
+/** A secondary line written in the reader's language, ready to draw. */
+export interface ResolvedSubline {
+  text: string;
+  /** The row's own tone, when it gives one. */
+  tone?: string;
+}
+
+/** How a display reads the row field of its secondary line. */
+export interface SublineReading {
+  processText: (text: ComposableText) => string;
+  /**
+   * Whether a bare string is a block text (`$`-prefixed for an i18n key)
+   * rather than data drawn as written (an address under a name).
+   */
+  isStringTranslated: boolean;
+}
+
+const isCellSubline = (value: unknown): value is CellSubline =>
+  typeof value === "object" &&
+  value !== null &&
+  "text" in value &&
+  !isComposedText(value);
+
+const toSubline = (text: string, tone?: string): ResolvedSubline | undefined =>
+  text ? { text, tone } : undefined;
+
+/**
+ * The secondary line a row field holds — a string, a composed text, or a text
+ * and its tone — or nothing for an empty field.
+ */
+export function readSubline(
+  value: unknown,
+  { processText, isStringTranslated }: SublineReading,
+): ResolvedSubline | undefined {
+  if (isCellSubline(value)) {
+    return toSubline(processText(value.text), value.tone);
+  }
+  if (isComposedText(value)) return toSubline(processText(value));
+  const plain = stringOf(value);
+  if (!plain) return undefined;
+  return toSubline(isStringTranslated ? processText(plain) : plain);
+}

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

@@ -2,7 +2,8 @@ import { defineAsyncComponent, h } from "vue";
 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 { readRowField, stringOf, toneClass, type Row } from "./cellHelpers";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
+import { readRowField, readSubline, toneClass, type Row } from "./cellHelpers";
 
 const Sparkline = defineAsyncComponent(
   () => import("../../../components/chart/internal/Sparkline.vue"),
@@ -21,6 +22,8 @@ interface SelectItemOption {
 interface StatusPillOptions {
   tones?: Record<string, string>;
   subField?: string;
+  /** Tone of the line under the pill when the row gives none. */
+  subTone?: string;
   liveValues?: string[];
   /** The column's own type options: a select's items name the pill. */
   typeOptions?: { items?: SelectItemOption[] };
@@ -28,10 +31,12 @@ interface StatusPillOptions {
 
 /**
  * `status_pill`: a tinted pill led by a dot, in the tone the value maps to,
- * with an optional line under it in the same tone (a failure's cause).
+ * with an optional line under it (a failure's cause, a composed "retry Oct
+ * 10") in the row's tone, else `subTone`, else the pill's.
  */
 function renderStatusPill(value: unknown, options: unknown, row: Row) {
   const { processI18n } = useTranslation();
+  const { processText } = useComposedText();
   const opts = (options ?? {}) as StatusPillOptions;
   const key = String(value);
   const item = opts.typeOptions?.items?.find(
@@ -44,14 +49,23 @@ function renderStatusPill(value: unknown, options: unknown, row: Row) {
     icon: item?.icon,
     dot: opts.liveValues?.includes(key) ? "live" : "static",
   });
-  const sub = stringOf(readRowField(row, opts.subField));
+  const sub = readSubline(readRowField(row, opts.subField), {
+    processText,
+    isStringTranslated: true,
+  });
   if (!sub) return pill;
   return h("span", { class: "flex min-w-0 flex-col items-start gap-0.5" }, [
     pill,
     h(
       "span",
-      { class: ["max-w-full truncate text-xs", toneClass(tone, "muted")] },
-      processI18n(sub),
+      {
+        class: [
+          "max-w-full truncate text-xs",
+          toneClass(sub.tone ?? opts.subTone ?? tone, "muted"),
+        ],
+        title: sub.text,
+      },
+      sub.text,
     ),
   ]);
 }