feat(access): localize curated capability labels client-side (#2600 B5 follow-up) (#2657)

Follow-up to #2653 (which localized the picker's group headers). The capability
chip *labels* (Manage Metadata, Studio Access, …) are served in English by the
sys_capability registry. Framework registry localization turned out to require a
new record-data i18n pattern (no existing convention), which is disproportionate
for this — the curated platform capabilities are a FIXED, known set, so localize
just those on the client:

- CapabilityMultiSelectField resolves labels for the 7 curated platform caps via
  `capability.label.<name>` (dots → underscores); package-/admin-authored
  capabilities keep their registry-served label.
- Added the keys to useFieldTranslation defaults + en/zh bundles (others fall
  back to en; nested under the existing top-level `capability` key so locale
  parity is unaffected).

Also made the toggle-off test re-query the chip at click time: the label now
resolves through i18n, so an async translation-settle can re-render the chips
between findBy and click — asserting on a re-queried node avoids a detached-node
race. Adds a curated-vs-registry label test.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

packages/fields/src/widgets/CapabilityMultiSelectField.test.tsx

@@ -106,7 +106,11 @@ describe('CapabilityMultiSelectField', () => {
         dataSource={mockDataSource()}
       />,
     );
-    fireEvent.click(await screen.findByRole('button', { name: 'Studio Access' }));
+    // Chip labels now resolve through the i18n bundle (objectui#2600 B5), so an
+    // async translation-settle can re-render the chips between findBy and the
+    // click — re-query at click time so we act on the live node, not a detached one.
+    await screen.findByRole('button', { name: 'Studio Access' });
+    fireEvent.click(screen.getByRole('button', { name: 'Studio Access' }));
     const emitted = onChange.mock.calls[0][0];
     expect(typeof emitted).toBe('string');
     expect(JSON.parse(emitted)).toEqual(['manage_users']);
@@ -140,4 +144,25 @@ describe('CapabilityMultiSelectField', () => {
     expect(await screen.findByText('Studio Access')).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Manage Users' })).not.toBeInTheDocument();
   });
+
+  // objectui#2600 B5 — curated platform caps get a localized label; package/
+  // admin-authored caps keep whatever label the registry served.
+  it('localizes curated capability labels but preserves registry labels for others', async () => {
+    render(
+      <CapabilityMultiSelectField
+        value={'[]'}
+        onChange={vi.fn()}
+        field={{ name: 'system_permissions' } as any}
+        dataSource={mockDataSource([
+          // Registry sends a shorter label; the curated client map wins.
+          { name: 'manage_org_users', label: 'Manage Org Users', description: 'Org members', scope: 'org', active: true },
+          // Not a curated platform capability — its registry label is kept.
+          { name: 'export_data', label: 'Export Data', description: 'Export', scope: 'org', active: true },
+        ])}
+      />,
+    );
+    expect(await screen.findByRole('button', { name: 'Manage Organization Users' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Manage Org Users' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Export Data' })).toBeInTheDocument();
+  });
 });

packages/fields/src/widgets/CapabilityMultiSelectField.tsx

@@ -63,6 +63,23 @@ export function parseCapabilityNames(value: unknown): string[] {
  */
 const SCOPE_ORDER = ['platform', 'org', 'other'] as const;
 
+/**
+ * objectui#2600 B5 — the curated platform capabilities are a FIXED, known set
+ * whose labels the sys_capability registry serves in English. Localize just
+ * these client-side via `capability.label.<name>` (dots → underscores);
+ * package- and admin-authored capabilities keep their authored registry label.
+ * (Mirrors @objectstack/spec/security `PLATFORM_CAPABILITIES`.)
+ */
+const CURATED_CAPABILITY_LABELS = new Set([
+  'manage_users',
+  'manage_org_users',
+  'manage_metadata',
+  'manage_platform_settings',
+  'setup_access',
+  'setup_write',
+  'studio_access',
+]);
+
 export function CapabilityMultiSelectField({
   value,
   onChange,
@@ -121,7 +138,13 @@ export function CapabilityMultiSelectField({
     return map;
   }, [caps, selected]);
 
-  const labelFor = (name: string) => byName.get(name)?.label || name;
+  // Curated platform caps get a localized label (objectui#2600 B5); everything
+  // else keeps the registry-served label.
+  const labelFor = (name: string) => {
+    const norm = name.replace(/\./g, '_');
+    if (CURATED_CAPABILITY_LABELS.has(norm)) return t(`capability.label.${norm}`);
+    return byName.get(name)?.label || name;
+  };
 
   // Group options by scope for the editable grid. Computed BEFORE the readonly
   // early-return so the hook order stays stable regardless of `readonly`.
@@ -192,7 +215,7 @@ export function CapabilityMultiSelectField({
                       : 'border-input bg-background text-foreground hover:bg-accent',
                   )}
                 >
-                  {cap.label || cap.name}
+                  {labelFor(cap.name)}
                 </button>
               );
             })}

packages/fields/src/widgets/useFieldTranslation.ts

@@ -43,6 +43,15 @@ const FIELD_DEFAULTS: Record<string, string> = {
   'capability.group.platform': 'Platform',
   'capability.group.org': 'Organization',
   'capability.group.other': 'Other',
+  // objectui#2600 B5 — curated platform capability labels (registry serves
+  // English; dots in the api-name become underscores in the key).
+  'capability.label.manage_users': 'Manage Users',
+  'capability.label.manage_org_users': 'Manage Organization Users',
+  'capability.label.manage_metadata': 'Manage Metadata',
+  'capability.label.manage_platform_settings': 'Manage Platform Settings',
+  'capability.label.setup_access': 'Setup Access',
+  'capability.label.setup_write': 'Write Settings',
+  'capability.label.studio_access': 'Studio Access',
 };
 
 export const useFieldTranslation = createSafeTranslation(

packages/i18n/src/locales/en.ts

@@ -10,6 +10,17 @@ const en = {
       org: 'Organization',
       other: 'Other',
     },
+    // Curated platform capability labels (objectui#2600 B5). Registry-served
+    // labels are English; these mirror them and give non-en locales a fallback.
+    label: {
+      manage_users: 'Manage Users',
+      manage_org_users: 'Manage Organization Users',
+      manage_metadata: 'Manage Metadata',
+      manage_platform_settings: 'Manage Platform Settings',
+      setup_access: 'Setup Access',
+      setup_write: 'Write Settings',
+      studio_access: 'Studio Access',
+    },
   },
   lookup: {
     recentlyUsed: 'Recently used',

packages/i18n/src/locales/zh.ts

@@ -10,6 +10,16 @@ const zh = {
       org: '组织',
       other: '其他',
     },
+    // 精选平台能力标签(objectui#2600 B5)。注册表 label 为英文,这里本地化。
+    label: {
+      manage_users: '管理用户',
+      manage_org_users: '管理组织用户',
+      manage_metadata: '管理元数据',
+      manage_platform_settings: '管理平台设置',
+      setup_access: '访问 Setup',
+      setup_write: '保存设置',
+      studio_access: '访问 Studio',
+    },
   },
   lookup: {
     recentlyUsed: '最近使用',