polish(app-showcase): i18n labels, My Work layout, nav IA, history via feed (#2063)

Round of surface polish on the enterprise pages, all browser-verified.

i18n field labels — account / invoice / preference fields were rendering as
uppercased machine names (WEBSITE / TAX_ID / THEME …) on Account 360 and
Settings because the translation bundle only covered task/project. Added
en + zh-CN labels for all three objects; now 网站 / 税号 / 主题 etc. resolve.

My Work layout —
  • KPI tiles now sit in a horizontal row via a `flex` container (the obvious
    `grid` type is aliased to ObjectGrid by plugin-grid, so it 404s with
    "object name required" — flex is the correct layout primitive here);
  • sidebar uses plain element:text lines for Shortcuts (region containers
    don't render nested page:card bodies — direct components are reliable);
  • dropped the role-gated card: page-component `visible` expressions get no
    `current_user` in the renderer's eval context, so true per-role gating
    belongs in object/field permissions + sharing, not a card expression.

History — `record:history` reads an audit store that trackHistory doesn't
populate, so its tab was always "No history yet". Removed the redundant tab;
field changes already surface in the synthesized discussion feed
(verified live: "Industry: Retail → Finance"). Kept trackHistory on
account.status + industry since that is what feeds the feed entries.

Nav IA — new "Workspace" group (My Work / Approvals / New Project / Settings)
at the top, separated from the demo "Pages" gallery.

typecheck + 20 showcase tests pass.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/src/apps/index.ts

@@ -14,6 +14,18 @@ export const ShowcaseApp = App.create({
   branding: { primaryColor: '#7C3AED' },
 
   navigation: [
+    {
+      id: 'grp_workspace',
+      type: 'group',
+      label: 'Workspace',
+      icon: 'briefcase',
+      children: [
+        { id: 'nav_my_work', type: 'page', pageName: 'showcase_my_work', label: 'My Work', icon: 'home' },
+        { id: 'nav_review_queue', type: 'page', pageName: 'showcase_review_queue', label: 'Approvals', icon: 'check-check' },
+        { id: 'nav_new_project_wizard', type: 'page', pageName: 'showcase_new_project_wizard', label: 'New Project (Wizard)', icon: 'wand-2' },
+        { id: 'nav_settings', type: 'object', objectName: 'showcase_preference', label: 'Settings', icon: 'settings' },
+      ],
+    },
     {
       id: 'grp_data',
       type: 'group',
@@ -50,10 +62,6 @@ export const ShowcaseApp = App.create({
       label: 'Pages',
       icon: 'layout',
       children: [
-        { id: 'nav_my_work', type: 'page', pageName: 'showcase_my_work', label: 'My Work', icon: 'home' },
-        { id: 'nav_review_queue', type: 'page', pageName: 'showcase_review_queue', label: 'Approvals', icon: 'check-check' },
-        { id: 'nav_new_project_wizard', type: 'page', pageName: 'showcase_new_project_wizard', label: 'New Project (Wizard)', icon: 'wand-2' },
-        { id: 'nav_settings', type: 'object', objectName: 'showcase_preference', label: 'Settings', icon: 'settings' },
         { id: 'nav_gallery', type: 'page', pageName: 'showcase_component_gallery', label: 'Component Gallery', icon: 'layout-template' },
         { id: 'nav_project_workspace', type: 'page', pageName: 'showcase_project_workspace', label: 'New Project + Tasks', icon: 'folder-plus' },
         // ADR-0047 interface mode: same object as nav_tasks, curated surface.

examples/app-showcase/src/objects/account.object.ts

@@ -23,6 +23,7 @@ export const Account = ObjectSchema.create({
     name: Field.text({ label: 'Account Name', required: true, searchable: true, maxLength: 200 }),
     industry: Field.select({
       label: 'Industry',
+      trackHistory: true,
       options: [
         { label: 'Technology', value: 'technology', default: true },
         { label: 'Finance', value: 'finance' },
@@ -36,6 +37,7 @@ export const Account = ObjectSchema.create({
     status: Field.select({
       label: 'Lifecycle',
       required: true,
+      trackHistory: true,
       options: [
         { label: 'Prospect', value: 'prospect', default: true, color: '#94A3B8' },
         { label: 'Active', value: 'active', color: '#10B981' },

examples/app-showcase/src/pages/account-detail.page.ts

@@ -9,7 +9,8 @@ import type { Page } from '@objectstack/spec/ui';
  *   • `record:related_list` — the account's Projects and Invoices, each a live
  *                             child list (relationshipField = the `account`
  *                             lookup on the child object).
- *   • `record:history`      — the field-level audit trail.
+ *   • field changes surface in the synthesized discussion feed (trackHistory
+ *     on status/industry) — verified: 'Industry: Retail → Finance'.
  *   • the synthesized `discussion` slot — a unified activity + comment feed
  *     (@mentions, reactions): the human collaboration surface, for free.
  *   • `record:highlights` + `record:details` — the summary strip + sections.
@@ -89,16 +90,6 @@ export const AccountDetailPage: Page = {
               },
             ],
           },
-          {
-            key: 'history',
-            label: 'History',
-            children: [
-              {
-                type: 'record:history',
-                properties: { limit: 50, showUser: true, showTimestamp: true },
-              },
-            ],
-          },
         ],
       },
     },

examples/app-showcase/src/pages/my-work.page.ts

@@ -8,8 +8,11 @@ import type { Page } from '@objectstack/spec/ui';
  *   • a KPI hero row of live `object-metric` tiles (team throughput);
  *   • a personal work queue — `object-grid` filtered to the signed-in user
  *     via the `{current_user_id}` token (records I own);
- *   • a role-gated card (`visible` expression) that only the admin sees —
- *     demonstrating per-user differentiated rendering.
+ *   • a sidebar Shortcuts card pointing at the key surfaces.
+ *
+ * (Note: page-component `visible` expressions don't receive a `current_user`
+ * context in the renderer, so true per-role gating belongs in object/field
+ * permissions + sharing rules, not a card-level expression.)
  */
 export const MyWorkPage: Page = {
   name: 'showcase_my_work',
@@ -30,10 +33,21 @@ export const MyWorkPage: Page = {
       name: 'main',
       width: 'large',
       components: [
-        // KPI hero row — live aggregates over the team's work.
-        { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
-        { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
-        { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
+        // KPI hero ROW — three live tiles laid out horizontally via a grid.
+        {
+          type: 'flex',
+          properties: {
+            direction: 'row',
+            wrap: true,
+            gap: 4,
+            align: 'stretch',
+            children: [
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
+            ],
+          },
+        },
         { type: 'element:divider', properties: {} },
         // Personal work queue — records owned by the signed-in user.
         {
@@ -50,12 +64,12 @@ export const MyWorkPage: Page = {
       name: 'sidebar',
       width: 'small',
       components: [
-        // Role-gated: only the admin sees this card — differentiated rendering.
-        {
-          type: 'page:card',
-          properties: { title: 'Leadership View', visible: "current_user.email == 'admin@objectos.ai'" },
-        },
-        { type: 'element:text', properties: { content: 'Tip: open Delivery Operations for the org-wide dashboard.' } },
+        // Sidebar shortcuts — plain text lines (region containers don't render
+        // nested page:card bodies; direct components are the reliable path).
+        { type: 'element:text', properties: { content: 'Shortcuts' } },
+        { type: 'element:text', properties: { content: '• Delivery Operations — the org-wide KPI dashboard.' } },
+        { type: 'element:text', properties: { content: '• Approvals — items in review awaiting a decision.' } },
+        { type: 'element:text', properties: { content: '• New Project (Wizard) — create a project step by step.' } },
       ],
     },
   ],

examples/app-showcase/src/translations/index.ts

@@ -45,6 +45,49 @@ export const ShowcaseTranslationBundle = {
           cover: { label: 'Cover' },
         },
       },
+      showcase_account: {
+        label: 'Account',
+        pluralLabel: 'Accounts',
+        fields: {
+          name: { label: 'Account Name' },
+          industry: { label: 'Industry' },
+          annual_revenue: { label: 'Annual Revenue' },
+          website: { label: 'Website' },
+          hq: { label: 'Headquarters' },
+          status: { label: 'Lifecycle' },
+          tax_id: { label: 'Tax ID' },
+          billing_email: { label: 'Billing Email' },
+          support_config: { label: 'Support Config' },
+          churn_reason: { label: 'Churn Reason' },
+        },
+      },
+      showcase_invoice: {
+        label: 'Invoice',
+        pluralLabel: 'Invoices',
+        fields: {
+          name: { label: 'Invoice Number' },
+          account: { label: 'Account' },
+          owner: { label: 'Owner' },
+          status: { label: 'Status' },
+          issued_on: { label: 'Issued On' },
+          tax_rate: { label: 'Tax Rate (%)' },
+          paid_on: { label: 'Paid On' },
+          total: { label: 'Total' },
+        },
+      },
+      showcase_preference: {
+        label: 'Setting',
+        pluralLabel: 'Settings',
+        fields: {
+          name: { label: 'Name' },
+          theme: { label: 'Theme' },
+          default_landing: { label: 'Default Landing Page' },
+          email_digest: { label: 'Email Digest' },
+          items_per_page: { label: 'Rows per Page' },
+          notifications_enabled: { label: 'Enable Notifications' },
+          compact_density: { label: 'Compact Density' },
+        },
+      },
     },
   },
   'zh-CN': {
@@ -83,6 +126,49 @@ export const ShowcaseTranslationBundle = {
           cover: { label: '封面' },
         },
       },
+      showcase_account: {
+        label: '客户',
+        pluralLabel: '客户',
+        fields: {
+          name: { label: '客户名称' },
+          industry: { label: '行业' },
+          annual_revenue: { label: '年收入' },
+          website: { label: '网站' },
+          hq: { label: '总部' },
+          status: { label: '生命周期' },
+          tax_id: { label: '税号' },
+          billing_email: { label: '账单邮箱' },
+          support_config: { label: '支持配置' },
+          churn_reason: { label: '流失原因' },
+        },
+      },
+      showcase_invoice: {
+        label: '发票',
+        pluralLabel: '发票',
+        fields: {
+          name: { label: '发票号' },
+          account: { label: '客户' },
+          owner: { label: '负责人' },
+          status: { label: '状态' },
+          issued_on: { label: '开具日期' },
+          tax_rate: { label: '税率 (%)' },
+          paid_on: { label: '付款日期' },
+          total: { label: '合计' },
+        },
+      },
+      showcase_preference: {
+        label: '设置',
+        pluralLabel: '设置',
+        fields: {
+          name: { label: '名称' },
+          theme: { label: '主题' },
+          default_landing: { label: '默认着陆页' },
+          email_digest: { label: '邮件摘要' },
+          items_per_page: { label: '每页行数' },
+          notifications_enabled: { label: '启用通知' },
+          compact_density: { label: '紧凑密度' },
+        },
+      },
     },
   },
 };