fix(plugin-detail,i18n,e2e): the five UI gates the record page v3 branch tripped

- useRelatedArrangement reads the 48 h 「新」 clock once per mount
  (useState initializer) instead of Date.now() in render; every edit still
  stamps its own time in the handler (react-hooks purity).
- RelatedCardStack-27055's tabbed-tier probe reports the scope through a
  callback prop instead of reassigning an outer variable from a component.
- RecordMetaFooter's OWNER_FIELD is SystemFieldName.OWNER_ID from
  @objectstack/spec/system, backing its "canonical" claim
  (check:spec-symbols).
- RelatedList formats body-table totals and the compact card's date chip
  in useDisplayLocale(), not the machine locale (machineLocaleCensus-9909).
- residue-namespaces-3546 pins RelatedList's three `detail.add`
  affordances (picker title, compact ＋, full list Add).
- record-header-title-width re-anchors page:header's tail on
  PageHeaderActions' toolbar now that refresh lives in ⋯, with a mobile
  tail of one inline action plus ⋯.

Claude-Session: https://claude.ai/code/session_cdb7a717def74e719988f089fbaa18ff
Co-Authored-By: Claude <noreply@anthropic.com>

Author: hotlong

ui/e2e/record-header-title-width.spec.ts

@@ -574,16 +574,18 @@ const PAGE_HEADER = {
     'sm:flex-row',
   ]),
   titleColumn: classBefore(containersSrc, CONTAINERS_FILE, '<RecordTitleChip', ['flex-col', 'min-w-0']),
-  // The tail as it renders when the host wires `refresh` (the console does).
-  tail: classAt(containersSrc, CONTAINERS_FILE, 'if (!refreshButton) return actions;', 1, ['shrink-0']),
+  // The tail is `PageHeaderActions`' toolbar — the one row whether or not the
+  // host wires `refresh`, which is the first item of its `⋯` menu since
+  // objectstack#27055 (no separate `⟳` button).
+  tail: classBefore(containersSrc, CONTAINERS_FILE, 'role="toolbar"', ['shrink-0']),
   chip: classByPattern(chipSrc, CHIP_FILE, /<div className=\{cn\('([^']+)', className\)\}>/, ['min-w-0']),
   chipRow: classBefore(chipSrc, CHIP_FILE, '{icon && (', ['flex-wrap']),
   // #1 after the anchor is the icon's own span; #2 is the h1, #3 the object label.
   h1: classAt(chipSrc, CHIP_FILE, '{icon && (', 2, ['truncate']),
   objectLabel: classAt(chipSrc, CHIP_FILE, '{icon && (', 3, ['shrink-0']),
 };
 
-/** The mobile tail: one inline action, the `⋯` trigger and the `⟳` chrome. */
+/** The mobile tail: one inline action (`mobileMaxVisible` 1) and the `⋯` trigger, which carries refresh. */
 const PAGE_HEADER_TAIL_BOX = 'h-9 w-12 shrink-0';
 
 const pageHeaderFixture = (title: string) =>
@@ -598,7 +600,7 @@ const pageHeaderFixture = (title: string) =>
           `<h1 class="${PAGE_HEADER.h1}">${title}</h1><span class="${PAGE_HEADER.objectLabel}">Case</span>`,
         ),
       ),
-    ) + box(PAGE_HEADER.tail, Array.from({ length: 3 }, () => box(PAGE_HEADER_TAIL_BOX)).join('')),
+    ) + box(PAGE_HEADER.tail, Array.from({ length: 2 }, () => box(PAGE_HEADER_TAIL_BOX)).join('')),
   );
 
 const PAGE_HEADER_CANDIDATES = [...Object.values(PAGE_HEADER), PAGE_HEADER_TAIL_BOX]

ui/packages/i18n/src/__tests__/residue-namespaces-3546.test.tsx

@@ -382,12 +382,14 @@ describe('objectui#3546 slice seven — the ratchet residue', () => {
       }
     }
     // PageView uses it twice on the same button (title + aria-label) and
-    // RelatedList twice in two different affordances — the counts are pinned so a
-    // silent drop of one of them is visible. AppContent's two record-save toast
+    // RelatedList three times in three different affordances (the picker title,
+    // the compact card's icon-only ＋ and the full list's Add button,
+    // objectstack#27055) — the counts are pinned so a silent drop of one of them
+    // is visible. AppContent's two record-save toast
     // sites share one message builder since objectstack-ai/objectstack#26172,
     // so its fallback label is written once.
     expect(sourceOf(PAGE_VIEW).split("t('common.editInStudio', { defaultValue: 'Edit in studio' })").length - 1).toBe(2);
-    expect(sourceOf(RELATED_LIST).split("t('detail.add', { defaultValue: 'Add' })").length - 1).toBe(2);
+    expect(sourceOf(RELATED_LIST).split("t('detail.add', { defaultValue: 'Add' })").length - 1).toBe(3);
     expect(sourceOf(APP_CONTENT).split("t('common.record', { defaultValue: 'Record' })").length - 1).toBe(1);
   });
 

ui/packages/plugin-detail/src/RecordMetaFooter.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@object-ui/components';
 import { getCellRenderer, resolveCellRendererType } from '@object-ui/fields';
+import { SystemFieldName } from '@objectstack/spec/system';
 import { AUDIT_FIELD_BY_ROLE } from '@object-ui/types';
 import type { FieldMetadata } from '@object-ui/types';
 import { useDisplayLocale } from '@object-ui/i18n';
@@ -18,9 +19,9 @@ import { useDefaultRecordPage } from './defaultRecordPage';
 
 /**
  * The record's reassignable owner column — the canonical injected
- * `owner_id` (`@objectstack/spec` `injected-system-column-provenance.ts`).
+ * `owner_id`, read from `@objectstack/spec`'s `SystemFieldName`.
  */
-const OWNER_FIELD = 'owner_id';
+const OWNER_FIELD = SystemFieldName.OWNER_ID;
 
 /**
  * Audit field names auto-injected by the framework's `applySystemFields` —

ui/packages/plugin-detail/src/RelatedList.tsx

@@ -75,6 +75,7 @@ import {
 } from '@object-ui/core';
 import { useSafeFieldLabel } from '@object-ui/react';
 import { usePermissions } from '@object-ui/permissions';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { useDetailTranslation } from './useDetailTranslation';
 import { isMaskedDetailFieldType } from './fieldEnrichment';
 import {
@@ -654,6 +655,8 @@ const BodyTableTotals: React.FC<{ rows: readonly any[]; columns: any[] | undefin
   objectSchema,
 }) => {
   const { t } = useDetailTranslation();
+  // The totals format in the reader's display locale, never the machine's.
+  const displayLocale = useDisplayLocale();
   const fields: Record<string, any> = (objectSchema?.fields as any) ?? {};
   const totals: Array<{ key: string; label: string; text: string }> = [];
   for (const col of columns ?? []) {
@@ -673,8 +676,8 @@ const BodyTableTotals: React.FC<{ rows: readonly any[]; columns: any[] | undefin
     let text: string;
     try {
       text = currency
-        ? new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(sum)
-        : new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(sum);
+        ? new Intl.NumberFormat(displayLocale, { style: 'currency', currency }).format(sum)
+        : new Intl.NumberFormat(displayLocale, { maximumFractionDigits: 2 }).format(sum);
     } catch {
       text = String(sum);
     }
@@ -772,6 +775,8 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   // The host predicate scope a child row's declared deadline is judged in
   // (objectui#11815) — the scope the grid's cells read.
   const predicateScope = usePredicateScope();
+  // The compact card's date chip formats in the reader's display locale.
+  const displayLocale = useDisplayLocale();
   const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
   // Add-by-picker (generic m2m/junction assignment). `refreshNonce` re-runs the
   // auto-fetch after an add/remove so the list reflects the new link rows.
@@ -2687,7 +2692,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
         if (Number.isNaN(date.getTime())) continue;
         return (
           <span className="shrink-0 text-[11px] text-muted-foreground" data-related-card-chip="date">
-            {date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+            {date.toLocaleDateString(displayLocale, { month: 'short', day: 'numeric' })}
           </span>
         );
       }

ui/packages/plugin-detail/src/__tests__/RelatedCardStack-27055.test.tsx

@@ -206,19 +206,20 @@ describe('the tabbed tier 关联 tab reads the same arrangement (objectstack#270
     let stored = editRelatedArrangement(DEFAULT, undefined, { kind: 'move', id: 'call.lead_id', to: 0 }, Date.now());
     stored = editRelatedArrangement(DEFAULT, stored, { kind: 'hide', id: 'note.parent_id' }, Date.now());
     let arranged: any = null;
-    let scope: any = null;
-    const Probe = () => {
-      scope = React.useContext(RelatedArrangementScopeContext);
+    const onScope = vi.fn();
+    const Probe = ({ report }: { report: (value: unknown) => void }) => {
+      report(React.useContext(RelatedArrangementScopeContext));
       return null;
     };
     render(
       <ArrangedRelatedTab page={pageOf()} arrangement={stored} onArrangementChange={vi.fn()}>
         {(page) => {
           arranged = page;
-          return <Probe />;
+          return <Probe report={onScope} />;
         }}
       </ArrangedRelatedTab>,
     );
+    const scope: any = onScope.mock.calls.at(-1)?.[0];
     const children = relatedTabOf(arranged).children;
     expect(children.map((n: any) => n.properties?.objectName ?? n.type)).toEqual(['call', 'task', 'record:attachments']);
     expect(scope.lastId).toBe('task.lead_id');

ui/packages/plugin-detail/src/useRelatedArrangement.ts

@@ -64,7 +64,10 @@ export function useRelatedArrangement({
   const [localArrangement, setLocalArrangement] = React.useState<RelatedArrangement | undefined>(undefined);
   const stored = onArrangementChange ? arrangement : localArrangement;
   const write = onArrangementChange ?? setLocalArrangement;
-  const resolved = resolveRelatedArrangement(defaultOrder, stored, Date.now());
+  // The 48 h 「新」 clock is read once per mount (a render must stay pure);
+  // every edit below stamps its own time in the event handler.
+  const [now] = React.useState(() => Date.now());
+  const resolved = resolveRelatedArrangement(defaultOrder, stored, now);
   const edit = (change: RelatedArrangementEdit) =>
     write(editRelatedArrangement(defaultOrder, stored, change, Date.now()));