fix(detail+fields+app-shell): ADR-0085 #2548 follow-ups — strip title dedupe, group icon/description, currency channel, approvals Bearer (#2577)

UX follow-ups from the framework#2548 real-backend browser pass, re-verified live (14/14): highlight strip drops the record title (new resolveTitleField, both synth + RecordDetailView paths); fieldGroups icon/description reach detail sections (LazyIcon rendering); currencyConfig passes through field enrichment so spec-authored currency fields render their symbol; RecordMetaFooter actor-less fallback labels (+ zh mistranslation fix); select badges ellipsize with hover title; all approvals fetches (app-shell badge/inbox/record panel + console approvalsApi) send the Bearer token for split-origin deployments.

Author: os-zhuang

.changeset/adr-0085-2548-detail-ux-followups.md

@@ -0,0 +1,47 @@
+---
+'@object-ui/plugin-detail': patch
+'@object-ui/fields': patch
+'@object-ui/i18n': patch
+'@object-ui/app-shell': patch
+---
+
+Detail-page UX follow-ups from the ADR-0085 PR4 real-backend browser pass (framework#2548):
+
+- **Highlight strip no longer repeats the record title.** A declared
+  `highlightFields` list containing the title field rendered it as the first
+  chip — truncated — directly under the identical page H1. `deriveHighlightFields`
+  now resolves the title (`primaryField` / `nameField` / deprecated
+  `displayNameField`, else the conventional display-field names) via the new
+  exported `resolveTitleField` and filters it from declared lists before the
+  4-chip cap, matching what the heuristic branch always did. app-shell's
+  `RecordDetailView` synthParts (which pre-computes the list and bypasses the
+  derivation) applies the same filter.
+- **Per-field currency reaches the renderers.** The spec channel
+  (`currencyConfig.defaultCurrency`) was dropped by the highlight-strip and
+  detail-section field enrichment, so a spec-authored currency field could
+  never show its symbol ("25,000,000" instead of "$25,000,000");
+  `resolveFieldCurrency` reads it second after the designer-only bare
+  `currency` key.
+- **app-shell approvals fetches send the Bearer token.** The header badge
+  poll, home-inbox count, and record-page approvals panel were cookie-only
+  (new shared `bearerAuthHeaders()` util) — same split-origin failure mode as
+  the console `approvalsApi` fix below.
+- **`fieldGroups[].icon` / `description` reach detail pages.** The shared
+  derivation (ADR-0085 §5) already passed them through; the detail synth
+  dropped them. Sections now carry both, and `DetailSection` renders a real
+  Lucide icon for identifier-shaped names (emoji/text values keep the
+  historical text rendering).
+- **Record meta footer stops dangling without an actor.** Seeded/system rows
+  with `created_by: null` rendered "Created by · 10m ago"; the footer now
+  falls back to actor-less labels ("Created / Updated"), with new i18n keys in
+  all six locales (and the zh `createdBy`/`updatedBy` mistranslation fixed:
+  创建人/更新人, not 创建于/更新于).
+- **Select badges ellipsize instead of clipping mid-glyph.** In bounded
+  containers (highlight-strip columns, grid cells) an overlong option label
+  used to be cut at the container edge ("Technolog…"); badges now shrink with
+  an inner truncate and expose the full label as a hover title. The highlight
+  strip's hover title also prefers the option label over the raw stored value.
+
+Console app (unversioned): `approvalsApi` now sends the stored Bearer token
+like every other console call — cookie-only auth silently lost the approvals
+surface on split-origin deployments where the SameSite cookie doesn't flow.

apps/console/src/services/approvalsApi.ts

@@ -2,11 +2,16 @@
  * Approvals REST helper.
  *
  * Thin fetch wrapper around the framework's approval endpoints
- * (`/api/v1/approvals/*`). Sends cookies for auth.
+ * (`/api/v1/approvals/*`). Auth mirrors the rest of the console: the stored
+ * Bearer token when present, plus cookies. Cookie-only auth silently lost
+ * the approvals surface on split-origin deployments (custom-domain console ↔
+ * API, or a dev console pointed at a remote backend) where the SameSite
+ * cookie never flows — every other console call already sends the Bearer.
  *
  * Mirrors the shape exposed by `@objectstack/plugin-approvals` /
  * `packages/rest/src/rest-server.ts`.
  */
+import { TokenStorage } from '@object-ui/auth';
 
 const SERVER_URL = (import.meta.env.VITE_SERVER_URL || '').replace(/\/$/, '');
 const API_BASE = `${SERVER_URL}/api/v1`;
@@ -73,9 +78,14 @@ export interface ApprovalActionRow {
 }
 
 async function call<T>(path: string, init?: RequestInit): Promise<T> {
+  const token = TokenStorage.get();
   const res = await fetch(`${API_BASE}${path}`, {
     credentials: 'include',
-    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(init?.headers || {}),
+    },
     ...init,
   });
   let payload: any = null;

packages/app-shell/src/hooks/useHomeInbox.ts

@@ -17,6 +17,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAdapter } from '../providers/AdapterProvider';
 import { useAuth } from '@object-ui/auth';
+import { bearerAuthHeaders } from '../utils/authToken';
 import type { ActivityItem } from '../layout/ActivityFeed';
 
 export interface HomeNotification {
@@ -134,7 +135,11 @@ export function useHomeInbox(limit = 5): HomeInboxData {
     if (identities.length === 0) return;
     let cancelled = false;
     const qs = new URLSearchParams({ status: 'pending', approverId: identities.join(',') });
-    fetch(`${serverUrl}/api/v1/approvals/requests?${qs}`, { credentials: 'include' })
+    fetch(`${serverUrl}/api/v1/approvals/requests?${qs}`, {
+      credentials: 'include',
+      // Bearer too — see utils/authToken (#2548 split-origin fix).
+      headers: bearerAuthHeaders(),
+    })
       .then(async (res) => {
         if (!res.ok) return;
         const payload = await res.json().catch(() => null);

packages/app-shell/src/hooks/useRecordApprovals.ts

@@ -19,6 +19,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { bearerAuthHeaders } from '../utils/authToken';
 
 export interface ApprovalRequestLite {
   id: string;
@@ -53,7 +54,13 @@ function apiBase() {
 async function fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${apiBase()}${path}`, {
     credentials: 'include',
-    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+    headers: {
+      'Content-Type': 'application/json',
+      // Bearer too — cookie-only auth loses this surface on split-origin
+      // deployments where the SameSite cookie doesn't flow (#2548).
+      ...bearerAuthHeaders(),
+      ...(init?.headers || {}),
+    },
     ...init,
   });
   let payload: any = null;

packages/app-shell/src/layout/AppHeader.tsx

@@ -68,6 +68,7 @@ import { useAuth, getUserInitials, useIsWorkspaceAdmin } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
 import { resolveI18nLabel, preferLocal, matchAppBySegment, appRouteSegment, appStudioRoutePath } from '../utils';
 import { getIcon } from '../utils/getIcon';
+import { bearerAuthHeaders } from '../utils/authToken';
 import { useMobileViewSwitcher } from './MobileViewSwitcherContext';
 import { useNavigationContext } from '../context/NavigationContext';
 import { useCommandPalette } from '../context/CommandPaletteProvider';
@@ -440,7 +441,11 @@ export function AppHeader({
       approvalsInFlightRef.current = true;
       try {
         const qs = new URLSearchParams({ status: 'pending', approverId: identities.join(',') });
-        const res = await fetch(`${base}?${qs}`, { credentials: 'include' });
+        const res = await fetch(`${base}?${qs}`, {
+          credentials: 'include',
+          // Bearer too — see utils/authToken (#2548 split-origin fix).
+          headers: bearerAuthHeaders(),
+        });
         if (res.status === 404) { approvalsUnavailableRef.current = true; return; }
         if (!res.ok) return;
         const payload = await res.json().catch(() => null);

packages/app-shell/src/utils/authToken.ts

@@ -0,0 +1,28 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { TokenStorage } from '@object-ui/auth';
+
+/**
+ * Bearer auth header from the console's stored session token
+ * (`@object-ui/auth` TokenStorage — localStorage with in-memory fallback).
+ *
+ * For app-shell's few direct `fetch` call sites (approvals badge/panel,
+ * home inbox): cookie-only fetches silently lose their surface on
+ * split-origin deployments (custom-domain console ↔ API) where the
+ * SameSite cookie never flows — every dataSource call already sends this
+ * bearer, so these fetches must too (#2548).
+ */
+export function bearerAuthHeaders(): Record<string, string> {
+  try {
+    const token = TokenStorage.get();
+    return token ? { Authorization: `Bearer ${token}` } : {};
+  } catch {
+    return {};
+  }
+}

packages/app-shell/src/views/RecordDetailView.tsx

@@ -10,7 +10,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useParams, useNavigate, useLocation, useSearchParams, Link } from 'react-router-dom';
-import { RecordChatterPanel, InlineEditSaveBar, buildDefaultPageSchema, deriveFieldGroupDetailSections, extractMentions } from '@object-ui/plugin-detail';
+import { RecordChatterPanel, InlineEditSaveBar, buildDefaultPageSchema, deriveFieldGroupDetailSections, extractMentions, resolveTitleField } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
 import { usePermissions } from '@object-ui/permissions';
@@ -1513,9 +1513,14 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     // to their name. Empty → undefined below, so the synthesizer
     // auto-derives instead.
     const rawHighlightFields = (objectDef as any).highlightFields ?? [];
+    // Drop the record's title field: it is the page H1 and repeating it as
+    // the first chip duplicated the name, truncated, right under the
+    // heading. Mirrors deriveHighlightFields' declared-list handling —
+    // this pre-computed list bypasses that derivation (#2548).
+    const titleField = resolveTitleField(objectDef as any);
     const highlightFields: string[] = (Array.isArray(rawHighlightFields) ? rawHighlightFields : [])
       .map((f: any) => (typeof f === 'string' ? f : f?.name))
-      .filter((n: any): n is string => typeof n === 'string' && n.length > 0);
+      .filter((n: any): n is string => typeof n === 'string' && n.length > 0 && n !== titleField);
 
     // Related child lists from reverse-reference relationships, in
     // `buildDefaultPageSchema`'s `related` shape. `relationshipField` is

packages/fields/src/index.tsx

@@ -1050,13 +1050,18 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
     }
 
     const colorClasses = getBadgeColorClasses(option?.color, val);
+    // max-w-full + inner truncate: in bounded containers (detail highlight
+    // strip columns, grid cells) an overlong label used to clip mid-glyph at
+    // the container edge; now the badge shrinks and ellipsizes, with the full
+    // label on hover.
     return (
       <Badge
         key={key}
         variant="outline"
-        className={colorClasses}
+        className={cn('max-w-full min-w-0', colorClasses)}
+        title={label}
       >
-        {label}
+        <span className="truncate">{label}</span>
       </Badge>
     );
   };

packages/i18n/src/locales/de.ts

@@ -510,6 +510,8 @@ const de = {
     highlightFields: "Schlüsselfelder",
     createdBy: "Erstellt von",
     updatedBy: "Aktualisiert von",
+    created: "Erstellt",
+    updated: "Aktualisiert",
     showEmptyRelated_one: "+ {{count}} leer",
     showEmptyRelated_other: "+ {{count}} leer",
     copyEmail: "E-Mail kopieren",

packages/i18n/src/locales/en.ts

@@ -614,9 +614,13 @@ const en = {
     // Activity feed actors
     systemActor: 'System',
     unknownUser: 'Unknown',
-    // Record meta footer (audit provenance)
+    // Record meta footer (audit provenance). `created`/`updated` are the
+    // actor-less variants — "Created by · 5m ago" dangles when created_by
+    // is null (system/seeded rows), so the footer falls back to these.
     createdBy: 'Created by',
     updatedBy: 'Updated by',
+    created: 'Created',
+    updated: 'Updated',
     // Attachments
     dropFilesToUpload: 'Drop files here or click to upload',
     attachmentCount: '{{count}} attachment',