polish(app-showcase): clean welcome home + full nav/list i18n (#2067)

QA-pass polish after walking every showcase surface in the browser.

Home (showcase_component_gallery) — the default landing rendered as a debug
canvas: an `ai:input` placeholder, an empty `page:card`, a full-width logo
image, and a static number. Redesigned into a clean welcome: intro + a live
4-tile KPI grid (object-metric in the now-unshadowed layout grid: Projects /
Tasks / Accounts / Open Tasks) + a primary "Create Task" action, with an
"Explore" shortcut list in the sidebar. No placeholders or empty blocks.

i18n — the translation bundle only covered project/task/account/invoice/
preference, so Products / Teams / Categories / Field Zoo (+ memberships)
showed English labels in a zh-CN session — an obvious mixed-locale nav.
Added en + zh-CN object + key-field labels for product / team /
project_membership / category / field_zoo. Nav now reads 项目 / 任务 / 客户 /
发票 / 产品 / 团队 / 分类 / 字段动物园 consistently.

Verified across the gallery, list, visualization (grid/gallery), record,
dashboard and report surfaces on :5181. typecheck + 20 tests pass.

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

Author: os-zhuang

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

@@ -24,10 +24,11 @@ export {
 } from './task-visualizations.pages.js';
 
 /**
- * Component Gallery — a custom page that places a spread of standard page
- * components (header, card, tabs, text/number/image/divider/button elements,
- * and the AI chat window) so the page renderer and component registry can be
- * exercised visually.
+ * Showcase home — a clean welcome landing. A live KPI grid (object-metric in
+ * the layout `grid`) over the seeded data, an intro, and a primary action.
+ * Deliberately avoids components that render as placeholders/empty in a page
+ * region (ai:input, oversized element:image, page:card body) so the first
+ * impression is polished, not a debug canvas.
  */
 export const ComponentGalleryPage: Page = {
   name: 'showcase_component_gallery',
@@ -54,23 +55,33 @@ export const ComponentGalleryPage: Page = {
       name: 'main',
       width: 'large',
       components: [
-        { type: 'element:text', properties: { content: 'This page demonstrates the standard page component set. Open the navigation to explore objects, the 8 list-view types on Tasks, the Chart Gallery dashboard, and the four report types.' } },
-        { type: 'element:divider', properties: {} },
-        { type: 'page:card', properties: { title: 'Getting Started' } },
-        { type: 'element:number', properties: { label: 'Demo Tasks', value: 12 } },
-        { type: 'element:image', properties: { src: 'https://objectstack.ai/logo.png', alt: 'Logo' } },
+        { type: 'element:text', properties: { content: 'A working project-delivery workspace that exercises every metadata type, view, chart, and capability chain. Use the navigation to explore — start with My Work, the Delivery Operations dashboard, or the eight Task visualizations.' } },
+        // Live KPI row over the seeded data (object-metric in the layout grid).
+        {
+          type: 'grid',
+          properties: {
+            columns: 4,
+            gap: 4,
+            children: [
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+            ],
+          },
+        },
         { type: 'element:button', properties: { label: 'Create Task', actionName: 'showcase_new_task' } },
       ],
     },
     {
       name: 'sidebar',
       width: 'small',
       components: [
-        // NOTE: `ai:chat_window` is intentionally NOT a supported inline page
-        // component — the canonical chat entry point is the floating chatbot
-        // overlay (plugin-chatbot), so referencing it here surfaces a loud
-        // "Unknown component type". Use a supported inline AI block instead.
-        { type: 'ai:input', properties: { agentName: 'showcase_assistant', placeholder: 'Ask the showcase assistant…' } },
+        { type: 'element:text', properties: { content: 'Explore' } },
+        { type: 'element:text', properties: { content: '• My Work — your queue & live KPIs' } },
+        { type: 'element:text', properties: { content: '• Delivery Operations — org dashboard' } },
+        { type: 'element:text', properties: { content: '• Tasks → All Views — 8 visualizations' } },
+        { type: 'element:text', properties: { content: '• Field Zoo — every field type' } },
       ],
     },
   ],

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

@@ -88,6 +88,25 @@ export const ShowcaseTranslationBundle = {
           compact_density: { label: 'Compact Density' },
         },
       },
+      showcase_product: {
+        label: 'Product', pluralLabel: 'Products',
+        fields: { name: { label: 'Name' }, sku: { label: 'SKU' }, description: { label: 'Description' }, unit_price: { label: 'Unit Price' }, active: { label: 'Active' } },
+      },
+      showcase_team: {
+        label: 'Team', pluralLabel: 'Teams',
+        fields: { name: { label: 'Team Name' }, lead: { label: 'Lead' }, capacity_hours: { label: 'Capacity (h)' } },
+      },
+      showcase_project_membership: {
+        label: 'Membership', pluralLabel: 'Memberships',
+        fields: { team: { label: 'Team' }, project: { label: 'Project' }, role: { label: 'Role' }, allocation_percent: { label: 'Allocation %' } },
+      },
+      showcase_category: {
+        label: 'Category', pluralLabel: 'Categories',
+        fields: { name: { label: 'Name' }, parent: { label: 'Parent' }, color: { label: 'Color' }, sort_order: { label: 'Sort Order' } },
+      },
+      showcase_field_zoo: {
+        label: 'Field Zoo', pluralLabel: 'Field Zoo',
+      },
     },
   },
   'zh-CN': {
@@ -169,6 +188,25 @@ export const ShowcaseTranslationBundle = {
           compact_density: { label: '紧凑密度' },
         },
       },
+      showcase_product: {
+        label: '产品', pluralLabel: '产品',
+        fields: { name: { label: '名称' }, sku: { label: 'SKU' }, description: { label: '描述' }, unit_price: { label: '单价' }, active: { label: '启用' } },
+      },
+      showcase_team: {
+        label: '团队', pluralLabel: '团队',
+        fields: { name: { label: '团队名称' }, lead: { label: '负责人' }, capacity_hours: { label: '产能(小时)' } },
+      },
+      showcase_project_membership: {
+        label: '成员', pluralLabel: '成员',
+        fields: { team: { label: '团队' }, project: { label: '项目' }, role: { label: '角色' }, allocation_percent: { label: '分配比例' } },
+      },
+      showcase_category: {
+        label: '分类', pluralLabel: '分类',
+        fields: { name: { label: '名称' }, parent: { label: '上级' }, color: { label: '颜色' }, sort_order: { label: '排序' } },
+      },
+      showcase_field_zoo: {
+        label: '字段动物园', pluralLabel: '字段动物园',
+      },
     },
   },
 };