Fix homepage localization for chip labels and translations

apps/web/src/components/HomeHero.tsx

@@ -1511,6 +1511,7 @@ function TypeTabBar({
   onPickChip,
 }: TypeTabBarProps) {
   const chips = useMemo(() => chipsForGroup('create'), []);
+  const t = useT();
   return (
     <div className="home-hero__type-tabs" role="tablist" aria-label="Output type">
       {chips.map((chip) => {
@@ -1530,9 +1531,9 @@ function TypeTabBar({
             onClick={() => onPickChip(chip)}
             disabled={pluginsLoading || isPending || pendingPluginId !== null}
             aria-selected={isActive}
-            title={chip.hint ?? chip.label}
+            title={homeHeroChipTitle(chip, t)}
           >
-            <span>{chip.label}</span>
+         <span>{chip.group === 'create' ? t(chip.labelKey) : homeHeroChipLabel(chip.id, t)}</span>
           </button>
         );
       })}

apps/web/src/components/home-hero/chips.ts

@@ -22,6 +22,7 @@
 import type { ProjectKind } from '@open-design/contracts';
 import type { DefaultScenarioPluginId } from '@open-design/contracts';
 import type { IconName } from '../Icon';
+import type { Dict } from '../../i18n/types';
 
 // Plugin ids the chip rail can dispatch to. Most chips route to a
 // `DefaultScenarioPluginId` so the same fallback table the daemon
@@ -59,19 +60,28 @@ export type ChipAction =
 // narrow viewports without horizontal scrolling.
 export type ChipGroup = 'create' | 'migrate';
 
-export interface HomeHeroChip {
+export interface CreateChip {
   id: string;
-  label: string;
+  labelKey: keyof Dict;
   icon: IconName;
-  group: ChipGroup;
-  hint?: string;
+  group: 'create';
   action: ChipAction;
 }
 
+export interface MigrateChip {
+  id: string;
+  icon: IconName;
+  group: 'migrate';
+  hint: string;
+  action: ChipAction;
+}
+
+export type HomeHeroChip = CreateChip | MigrateChip;
+
 export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   {
     id: 'prototype',
-    label: 'Prototype',
+    labelKey: 'homeHero.chip.prototype',
     icon: 'palette',
     group: 'create',
     // Prototype now binds to the bundled `example-web-prototype` plugin,
@@ -91,7 +101,7 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'deck',
-    label: 'Slide deck',
+    labelKey: 'homeHero.chip.deck',
     icon: 'present',
     group: 'create',
     // Slide deck binds to `example-simple-deck`, which ships a 353-line
@@ -112,7 +122,7 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'image',
-    label: 'Image',
+    labelKey: 'homeHero.chip.image',
     icon: 'image',
     group: 'create',
     action: {
@@ -129,7 +139,7 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'video',
-    label: 'Video',
+    labelKey: 'homeHero.chip.video',
     icon: 'play',
     group: 'create',
     action: {
@@ -146,7 +156,7 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'hyperframes',
-    label: 'HyperFrames',
+    labelKey: 'homeHero.chip.hyperframes',
     icon: 'orbit',
     group: 'create',
     hint: 'Author HTML-based motion: captions, audio-reactive visuals, scene transitions.',
@@ -158,7 +168,7 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'audio',
-    label: 'Audio',
+    labelKey: 'homeHero.chip.audio',
     icon: 'mic',
     group: 'create',
     action: {
@@ -175,15 +185,13 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'create-plugin',
-    label: 'Create plugin',
     icon: 'edit',
     group: 'migrate',
     hint: 'Author a reusable Open Design plugin and add it to My plugins.',
     action: { kind: 'create-plugin' },
   },
   {
     id: 'figma',
-    label: 'From Figma',
     icon: 'import',
     group: 'migrate',
     hint: 'Migrate a Figma frame into the active design system.',
@@ -199,15 +207,13 @@ export const HOME_HERO_CHIPS: ReadonlyArray<HomeHeroChip> = [
   },
   {
     id: 'folder',
-    label: 'From folder',
     icon: 'folder',
     group: 'migrate',
     hint: 'Import an existing local folder and continue editing.',
     action: { kind: 'import-folder' },
   },
   {
     id: 'template',
-    label: 'From template',
     icon: 'file-code',
     group: 'migrate',
     hint: 'Start from a bundled template.',

apps/web/src/i18n/locales/zh-CN.ts

@@ -352,7 +352,7 @@ export const zhCN: Dict = {
   'recentProjects.title': '最近项目',
   'recentProjects.viewAll': '查看全部',
   'recentProjects.empty': '还没有项目 — 输入 Prompt 即可开始。',
-  'pluginsHome.title': '官方 starter',
+  'pluginsHome.title': '官方入门',
   'pluginsHome.subtitle': '当前运行环境内置的 Open Design 工作流。选择一个加载 starter prompt，或浏览插件市场查看更多。',
   'pluginsHome.browseRegistry': '浏览插件市场',
   'pluginsHome.count': '{filtered} / {total}',

apps/web/tests/components/HomeHero.rail.test.tsx

@@ -11,6 +11,7 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { I18nProvider } from '../../src/i18n';
 import { HomeHero } from '../../src/components/HomeHero';
 import {
   HOME_HERO_CHIPS,
@@ -135,4 +136,38 @@ describe('HomeHero intent rail', () => {
     });
     expect(findChip('live-artifact')).toBeUndefined();
   });
+
+  it('renders localized chip labels and tooltips in zh-CN', () => {
+  render(
+    <I18nProvider initial="zh-CN">
+      <HomeHero
+        prompt=""
+        onPromptChange={() => undefined}
+        onSubmit={() => undefined}
+        activePluginTitle={null}
+        activeChipId={null}
+        onClearActivePlugin={() => undefined}
+        pluginOptions={[]}
+        pluginsLoading={false}
+        pendingPluginId={null}
+        pendingChipId={null}
+        onPickPlugin={vi.fn()}
+        onPickChip={vi.fn()}
+        contextItemCount={0}
+        error={null}
+      />
+    </I18nProvider>
+  );
+
+  // Prototype chip label should be zh-CN
+  const prototypeChip = screen.getByTestId('home-hero-rail-prototype');
+  expect(prototypeChip.textContent).toContain('原型');
+
+  // HyperFrames tooltip should be the zh-CN string
+  const hyperframes = screen.getByTestId('home-hero-rail-hyperframes');
+  expect(hyperframes.getAttribute('title')).toBe(
+    '创作基于 HTML 的动态内容：字幕、音频响应视觉和场景转场。'
+  );
+});
+
 });