From ed6e073ededb7b1a34079f60e88c989d8266342f Mon Sep 17 00:00:00 2001
From: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
Date: Sat, 18 Apr 2026 19:49:09 +0800
Subject: [PATCH 1/2] feat(desktop): surface language toggle

Signed-off-by: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
---
 apps/desktop/package.json                     |  1 +
 apps/desktop/src/main/index.ts                |  2 +
 apps/desktop/src/preload/index.ts             |  5 +++
 apps/desktop/src/renderer/src/App.tsx         |  4 +-
 .../src/components/LanguageToggle.tsx         | 41 +++++++++++++++++++
 .../src/renderer/src/components/TopBar.tsx    | 18 ++++----
 apps/desktop/src/renderer/src/main.tsx        | 19 ++++++---
 .../src/renderer/src/onboarding/index.tsx     |  6 ++-
 pnpm-lock.yaml                                |  3 ++
 9 files changed, 85 insertions(+), 14 deletions(-)
 create mode 100644 apps/desktop/src/renderer/src/components/LanguageToggle.tsx

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 46fbf9e5..ea1a3729 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -16,6 +16,7 @@
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/core": "workspace:*",
     "@open-codesign/exporters": "workspace:*",
+    "@open-codesign/i18n": "workspace:*",
     "@open-codesign/providers": "workspace:*",
     "@open-codesign/runtime": "workspace:*",
     "@open-codesign/shared": "workspace:*",
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index 33a94563..7d2a2d29 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -9,6 +9,7 @@ import { autoUpdater } from 'electron-updater';
 import { scanDesignSystem } from './design-system';
 import { BrowserWindow, app, dialog, ipcMain, shell } from './electron-runtime';
 import { registerExporterIpc } from './exporter-ipc';
+import { registerLocaleIpc } from './locale-ipc';
 import { getLogPath, getLogger, initLogger } from './logger';
 import {
   getApiKeyForProvider,
@@ -254,6 +255,7 @@ void app.whenReady().then(async () => {
   initLogger();
   await loadConfigOnBoot();
   registerIpcHandlers();
+  registerLocaleIpc();
   registerOnboardingIpc();
   registerExporterIpc(() => mainWindow);
   setupAutoUpdater();
diff --git a/apps/desktop/src/preload/index.ts b/apps/desktop/src/preload/index.ts
index b55abefa..ca3179b1 100644
--- a/apps/desktop/src/preload/index.ts
+++ b/apps/desktop/src/preload/index.ts
@@ -52,6 +52,11 @@ const api = {
     ipcRenderer.invoke('codesign:clear-design-system') as Promise<OnboardingState>,
   export: (payload: { format: ExportFormat; htmlContent: string; defaultFilename?: string }) =>
     ipcRenderer.invoke('codesign:export', payload) as Promise<ExportInvokeResponse>,
+  locale: {
+    getSystem: () => ipcRenderer.invoke('locale:get-system') as Promise<string>,
+    getCurrent: () => ipcRenderer.invoke('locale:get-current') as Promise<string>,
+    set: (locale: string) => ipcRenderer.invoke('locale:set', locale) as Promise<string>,
+  },
   checkForUpdates: () => ipcRenderer.invoke('codesign:check-for-updates'),
   downloadUpdate: () => ipcRenderer.invoke('codesign:download-update'),
   installUpdate: () => ipcRenderer.invoke('codesign:install-update'),
diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index 7259f8ad..d7458eed 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { useEffect, useMemo, useState } from 'react';
 import { CommandPalette } from './components/CommandPalette';
 import { PreviewPane } from './components/PreviewPane';
@@ -10,6 +11,7 @@ import { Onboarding } from './onboarding';
 import { useCodesignStore } from './store';
 
 export function App() {
+  const t = useT();
   const config = useCodesignStore((s) => s.config);
   const configLoaded = useCodesignStore((s) => s.configLoaded);
   const loadConfig = useCodesignStore((s) => s.loadConfig);
@@ -90,7 +92,7 @@ export function App() {
   if (!configLoaded) {
     return (
       <div className="h-full flex items-center justify-center bg-[var(--color-background)] text-[var(--text-sm)] text-[var(--color-text-muted)]">
-        Loading…
+        {t('common.loading')}
       </div>
     );
   }
diff --git a/apps/desktop/src/renderer/src/components/LanguageToggle.tsx b/apps/desktop/src/renderer/src/components/LanguageToggle.tsx
new file mode 100644
index 00000000..1c907277
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/LanguageToggle.tsx
@@ -0,0 +1,41 @@
+import { setLocale as applyLocale, getCurrentLocale, useT } from '@open-codesign/i18n';
+import type { Locale } from '@open-codesign/i18n';
+import { Globe } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+function nextLocale(locale: Locale): Locale {
+  return locale === 'en' ? 'zh-CN' : 'en';
+}
+
+function localeLabel(locale: Locale): string {
+  return locale === 'zh-CN' ? 'ZH' : 'EN';
+}
+
+export function LanguageToggle() {
+  const t = useT();
+  const [locale, setLocaleState] = useState<Locale>(getCurrentLocale());
+
+  useEffect(() => {
+    setLocaleState(getCurrentLocale());
+  }, []);
+
+  async function handleToggle(): Promise<void> {
+    const target = nextLocale(locale);
+    const persisted = window.codesign ? await window.codesign.locale.set(target) : target;
+    const applied = await applyLocale(persisted);
+    setLocaleState(applied);
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => void handleToggle()}
+      className="inline-flex items-center gap-2 h-8 px-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[12px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+      aria-label={t('settings.language.label')}
+      title={t('settings.language.label')}
+    >
+      <Globe className="w-3.5 h-3.5 text-[var(--color-text-secondary)]" />
+      <span>{localeLabel(locale)}</span>
+    </button>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/TopBar.tsx b/apps/desktop/src/renderer/src/components/TopBar.tsx
index bed8a175..9abc3077 100644
--- a/apps/desktop/src/renderer/src/components/TopBar.tsx
+++ b/apps/desktop/src/renderer/src/components/TopBar.tsx
@@ -1,23 +1,26 @@
+import { useT } from '@open-codesign/i18n';
 import { IconButton, Tooltip, Wordmark } from '@open-codesign/ui';
 import { Command, Settings as SettingsIcon } from 'lucide-react';
 import type { CSSProperties } from 'react';
 import { useCodesignStore } from '../store';
+import { LanguageToggle } from './LanguageToggle';
 import { ThemeToggle } from './ThemeToggle';
 
 const dragStyle = { WebkitAppRegion: 'drag' } as CSSProperties;
 const noDragStyle = { WebkitAppRegion: 'no-drag' } as CSSProperties;
 
 export function TopBar() {
+  const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const isGenerating = useCodesignStore((s) => s.isGenerating);
   const errorMessage = useCodesignStore((s) => s.errorMessage);
   const openSettings = useCodesignStore((s) => s.openSettings);
   const openCommandPalette = useCodesignStore((s) => s.openCommandPalette);
 
-  let crumb = 'Untitled design';
+  let crumb = t('preview.noDesign');
   if (errorMessage) crumb = 'Error';
-  else if (isGenerating) crumb = 'Generating…';
-  else if (previewHtml) crumb = 'Preview ready';
+  else if (isGenerating) crumb = t('preview.loading.title');
+  else if (previewHtml) crumb = t('preview.ready');
 
   return (
     <header
@@ -25,7 +28,7 @@ export function TopBar() {
       style={dragStyle}
     >
       <div className="flex items-center gap-3 min-w-0">
-        <Wordmark badge="pre-alpha" size="sm" />
+        <Wordmark badge={t('common.preAlpha')} size="sm" />
         <span className="text-[var(--color-text-muted)]">/</span>
         <span className="text-[var(--text-sm)] text-[var(--color-text-secondary)] truncate">
           {crumb}
@@ -33,14 +36,15 @@ export function TopBar() {
       </div>
 
       <div className="flex items-center gap-1" style={noDragStyle}>
-        <Tooltip label="Command palette  ⌘K">
+        <Tooltip label="Command palette  Ctrl/Cmd+K">
           <IconButton label="Open command palette" size="sm" onClick={openCommandPalette}>
             <Command className="w-4 h-4" />
           </IconButton>
         </Tooltip>
+        <LanguageToggle />
         <ThemeToggle />
-        <Tooltip label="Settings  ⌘,">
-          <IconButton label="Open settings" size="sm" onClick={openSettings}>
+        <Tooltip label="Settings  Ctrl/Cmd+,">
+          <IconButton label={t('commands.items.openSettings')} size="sm" onClick={openSettings}>
             <SettingsIcon className="w-4 h-4" />
           </IconButton>
         </Tooltip>
diff --git a/apps/desktop/src/renderer/src/main.tsx b/apps/desktop/src/renderer/src/main.tsx
index c4f2b183..e9c1867f 100644
--- a/apps/desktop/src/renderer/src/main.tsx
+++ b/apps/desktop/src/renderer/src/main.tsx
@@ -1,3 +1,4 @@
+import { initI18n } from '@open-codesign/i18n';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
@@ -5,9 +6,17 @@ import './index.css';
 
 const container = document.getElementById('root');
 if (!container) throw new Error('Root element #root not found');
+const root = createRoot(container);
 
-createRoot(container).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+async function bootstrap(): Promise<void> {
+  const locale = window.codesign ? await window.codesign.locale.getCurrent() : undefined;
+  await initI18n(locale);
+
+  root.render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}
+
+void bootstrap();
diff --git a/apps/desktop/src/renderer/src/onboarding/index.tsx b/apps/desktop/src/renderer/src/onboarding/index.tsx
index fee392e4..04776131 100644
--- a/apps/desktop/src/renderer/src/onboarding/index.tsx
+++ b/apps/desktop/src/renderer/src/onboarding/index.tsx
@@ -1,6 +1,7 @@
 import { PROVIDER_SHORTLIST, type SupportedOnboardingProvider } from '@open-codesign/shared';
 import { Wordmark } from '@open-codesign/ui';
 import { useState } from 'react';
+import { LanguageToggle } from '../components/LanguageToggle';
 import { useCodesignStore } from '../store';
 import { ChooseModel } from './ChooseModel';
 import { PasteKey } from './PasteKey';
@@ -65,7 +66,10 @@ export function Onboarding() {
       <div className="relative w-full max-w-[480px] bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-card)] p-8 flex flex-col gap-6">
         <header className="flex items-center justify-between">
           <Wordmark badge="pre-alpha" />
-          <Stepper current={idx} total={3} />
+          <div className="flex items-center gap-2">
+            <LanguageToggle />
+            <Stepper current={idx} total={3} />
+          </div>
         </header>
 
         {step === 'welcome' ? (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e15fcba9..2ab9dd75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@open-codesign/exporters':
         specifier: workspace:*
         version: link:../../packages/exporters
+      '@open-codesign/i18n':
+        specifier: workspace:*
+        version: link:../../packages/i18n
       '@open-codesign/providers':
         specifier: workspace:*
         version: link:../../packages/providers

From bca121ff87eeb3a96cb9220204cb2511a33dd853 Mon Sep 17 00:00:00 2001
From: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
Date: Sat, 18 Apr 2026 20:24:39 +0800
Subject: [PATCH 2/2] feat(desktop): localize workspace chrome

Signed-off-by: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
---
 apps/desktop/src/main/index.ts                |  1 +
 .../src/components/CanvasErrorBar.tsx         | 16 +---
 .../src/components/CommandPalette.tsx         | 58 +++++------
 .../src/components/InlineCommentComposer.tsx  | 15 +--
 .../renderer/src/components/PreviewPane.tsx   |  4 +-
 .../src/components/PreviewToolbar.tsx         | 43 ++++++---
 .../src/renderer/src/components/Sidebar.tsx   | 35 +++----
 .../src/renderer/src/components/TopBar.tsx    |  8 +-
 .../src/renderer/src/preview/EmptyState.tsx   | 38 +++-----
 .../src/renderer/src/preview/ErrorState.tsx   | 12 ++-
 apps/desktop/src/renderer/src/store.ts        | 57 +++++++----
 packages/i18n/src/locales/en.json             | 96 +++++++++++++++++--
 packages/i18n/src/locales/zh-CN.json          | 96 +++++++++++++++++--
 13 files changed, 335 insertions(+), 144 deletions(-)

diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index 7d2a2d29..c694d8ee 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -33,6 +33,7 @@ function createWindow(): void {
     height: 820,
     minWidth: 960,
     minHeight: 640,
+    autoHideMenuBar: process.platform !== 'darwin',
     titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
     backgroundColor: BRAND.backgroundColor,
     show: false,
diff --git a/apps/desktop/src/renderer/src/components/CanvasErrorBar.tsx b/apps/desktop/src/renderer/src/components/CanvasErrorBar.tsx
index 5a7342e6..69a6d599 100644
--- a/apps/desktop/src/renderer/src/components/CanvasErrorBar.tsx
+++ b/apps/desktop/src/renderer/src/components/CanvasErrorBar.tsx
@@ -1,16 +1,9 @@
-/**
- * CanvasErrorBar — slim red strip shown above the preview iframe when the
- * sandbox runtime postMessages an IFRAME_ERROR.
- *
- * Loud surface (PRINCIPLES §10): every JS exception thrown inside the
- * generated HTML lands here with file + line. Users can dismiss the bar
- * (it clears the store slice) but errors are never auto-hidden.
- */
-
+import { useT } from '@open-codesign/i18n';
 import { X } from 'lucide-react';
 import { useCodesignStore } from '../store';
 
 export function CanvasErrorBar() {
+  const t = useT();
   const errors = useCodesignStore((s) => s.iframeErrors);
   const clear = useCodesignStore((s) => s.clearIframeErrors);
   if (errors.length === 0) return null;
@@ -24,7 +17,8 @@ export function CanvasErrorBar() {
       <span className="mt-0.5 inline-block w-2 h-2 rounded-full bg-[var(--color-error)] shrink-0" />
       <div className="flex-1 min-w-0">
         <div className="text-xs font-semibold uppercase tracking-wide text-[var(--color-error)]">
-          Preview runtime error{errors.length > 1 ? ` (${errors.length})` : ''}
+          {t('preview.runtimeError')}
+          {errors.length > 1 ? ` (${errors.length})` : ''}
         </div>
         <div className="text-sm text-[var(--color-text-primary)] truncate" title={latest}>
           {latest}
@@ -33,7 +27,7 @@ export function CanvasErrorBar() {
       <button
         type="button"
         onClick={clear}
-        aria-label="Dismiss preview errors"
+        aria-label={t('preview.dismissErrors')}
         className="shrink-0 p-1 rounded-[var(--radius-md)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
       >
         <X className="w-4 h-4" />
diff --git a/apps/desktop/src/renderer/src/components/CommandPalette.tsx b/apps/desktop/src/renderer/src/components/CommandPalette.tsx
index 8fbe6ee6..b7cb0bb7 100644
--- a/apps/desktop/src/renderer/src/components/CommandPalette.tsx
+++ b/apps/desktop/src/renderer/src/components/CommandPalette.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { Download, Moon, Plus, Settings as SettingsIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useCodesignStore } from '../store';
@@ -11,6 +12,7 @@ interface PaletteAction {
 }
 
 export function CommandPalette() {
+  const t = useT();
   const open = useCodesignStore((s) => s.commandPaletteOpen);
   const close = useCodesignStore((s) => s.closeCommandPalette);
   const openSettings = useCodesignStore((s) => s.openSettings);
@@ -24,8 +26,8 @@ export function CommandPalette() {
     () => [
       {
         id: 'new-design',
-        label: 'New Design',
-        hint: 'Clear chat and start fresh',
+        label: t('commands.items.newDesign'),
+        hint: t('commands.hints.newDesign'),
         icon: Plus,
         run: () => {
           useCodesignStore.setState({
@@ -35,44 +37,44 @@ export function CommandPalette() {
             iframeErrors: [],
             selectedElement: null,
           });
-          pushToast({ variant: 'info', title: 'Workspace cleared' });
+          pushToast({ variant: 'info', title: t('commands.cleared') });
         },
       },
       {
         id: 'toggle-theme',
-        label: 'Toggle Theme',
-        hint: 'Switch between light and dark',
+        label: t('commands.items.toggleTheme'),
+        hint: t('commands.hints.toggleTheme'),
         icon: Moon,
         run: toggleTheme,
       },
       {
         id: 'open-settings',
-        label: 'Open Settings',
-        hint: 'Models, appearance, storage',
+        label: t('commands.items.openSettings'),
+        hint: t('commands.hints.openSettings'),
         icon: SettingsIcon,
         run: openSettings,
       },
       {
         id: 'export',
-        label: 'Export',
-        hint: 'PDF and PPTX coming soon',
+        label: t('commands.items.export'),
+        hint: t('commands.hints.export'),
         icon: Download,
         run: () =>
           pushToast({
             variant: 'info',
-            title: 'Export not available yet',
-            description: 'PDF and PPTX exporters land in v0.2. HTML export is in the toolbar.',
+            title: t('commands.exportUseToolbarTitle'),
+            description: t('commands.exportUseToolbarBody'),
           }),
       },
     ],
-    [openSettings, toggleTheme, pushToast],
+    [openSettings, pushToast, t, toggleTheme],
   );
 
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return actions;
     return actions.filter(
-      (a) => a.label.toLowerCase().includes(q) || a.hint.toLowerCase().includes(q),
+      (action) => action.label.toLowerCase().includes(q) || action.hint.toLowerCase().includes(q),
     );
   }, [actions, query]);
 
@@ -89,8 +91,8 @@ export function CommandPalette() {
 
   if (!open) return null;
 
-  function runAt(i: number) {
-    const action = filtered[i];
+  function runAt(index: number) {
+    const action = filtered[index];
     if (!action) return;
     action.run();
     close();
@@ -101,7 +103,7 @@ export function CommandPalette() {
       // biome-ignore lint/a11y/useSemanticElements: native <dialog> top-layer rendering interferes with our overlay stack
       role="dialog"
       aria-modal="true"
-      aria-label="Command palette"
+      aria-label={t('commands.title')}
       className="fixed inset-0 z-50 flex items-start justify-center pt-24 px-6 bg-[var(--color-overlay)] animate-[overlay-in_120ms_ease-out]"
       onClick={close}
       onKeyDown={(e) => {
@@ -114,10 +116,10 @@ export function CommandPalette() {
         onKeyDown={(e) => {
           if (e.key === 'ArrowDown') {
             e.preventDefault();
-            setCursor((c) => Math.min(c + 1, filtered.length - 1));
+            setCursor((current) => Math.min(current + 1, filtered.length - 1));
           } else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            setCursor((c) => Math.max(c - 1, 0));
+            setCursor((current) => Math.max(current - 1, 0));
           } else if (e.key === 'Enter') {
             e.preventDefault();
             runAt(cursor);
@@ -136,24 +138,24 @@ export function CommandPalette() {
             setQuery(e.target.value);
             setCursor(0);
           }}
-          placeholder="Type a command…"
+          placeholder={t('commands.placeholder')}
           className="w-full px-5 h-12 bg-transparent border-b border-[var(--color-border)] text-[var(--text-sm)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none"
         />
         <ul className="max-h-72 overflow-y-auto py-2">
           {filtered.length === 0 ? (
             <li className="px-5 py-3 text-[var(--text-sm)] text-[var(--color-text-muted)]">
-              No matches.
+              {t('commands.noMatches')}
             </li>
           ) : (
-            filtered.map((a, i) => {
-              const Icon = a.icon;
-              const active = i === cursor;
+            filtered.map((action, index) => {
+              const Icon = action.icon;
+              const active = index === cursor;
               return (
-                <li key={a.id}>
+                <li key={action.id}>
                   <button
                     type="button"
-                    onMouseEnter={() => setCursor(i)}
-                    onClick={() => runAt(i)}
+                    onMouseEnter={() => setCursor(index)}
+                    onClick={() => runAt(index)}
                     className={`w-full flex items-center gap-3 px-5 py-2.5 text-left transition-colors ${
                       active
                         ? 'bg-[var(--color-surface-active)]'
@@ -163,10 +165,10 @@ export function CommandPalette() {
                     <Icon className="w-4 h-4 text-[var(--color-text-secondary)] shrink-0" />
                     <span className="flex-1 min-w-0">
                       <span className="block text-[var(--text-sm)] text-[var(--color-text-primary)]">
-                        {a.label}
+                        {action.label}
                       </span>
                       <span className="block text-[var(--text-xs)] text-[var(--color-text-muted)]">
-                        {a.hint}
+                        {action.hint}
                       </span>
                     </span>
                   </button>
diff --git a/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx b/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
index 007b4183..9ef56dea 100644
--- a/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
+++ b/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import type { SelectedElement } from '@open-codesign/shared';
 import { MessageSquareText, X } from 'lucide-react';
 import { useState } from 'react';
@@ -16,6 +17,7 @@ interface InlineCommentComposerCardProps {
 }
 
 function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCardProps) {
+  const t = useT();
   const clearCanvasElement = useCodesignStore((s) => s.clearCanvasElement);
   const applyInlineComment = useCodesignStore((s) => s.applyInlineComment);
   const isGenerating = useCodesignStore((s) => s.isGenerating);
@@ -27,7 +29,7 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
         <div className="min-w-0">
           <div className="inline-flex items-center gap-2 text-[12px] font-medium text-[var(--color-text-primary)]">
             <MessageSquareText className="h-4 w-4 text-[var(--color-accent)]" />
-            Comment on <code className="text-[11px]">{selectedElement.tag}</code>
+            {t('inlineComment.title')} <code className="text-[11px]">{selectedElement.tag}</code>
           </div>
           <p
             className="mt-1 truncate text-[11px] text-[var(--color-text-muted)]"
@@ -40,7 +42,7 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
           type="button"
           onClick={clearCanvasElement}
           className="rounded-[var(--radius-md)] p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
-          aria-label="Close inline comment composer"
+          aria-label={t('inlineComment.closeComposer')}
         >
           <X className="h-4 w-4" />
         </button>
@@ -48,13 +50,12 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
 
       <div className="space-y-3 p-4">
         <p className="text-[12px] leading-[1.5] text-[var(--color-text-secondary)]">
-          Clicked elements stay selected in the canvas. Describe the visual or content change you
-          want, and open-codesign will rewrite the artifact around that target.
+          {t('inlineComment.description')}
         </p>
         <textarea
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
-          placeholder="Make this section more compact, sharpen the headline, and align it with the linked design system..."
+          placeholder={t('inlineComment.placeholder')}
           rows={4}
           disabled={isGenerating}
           className="w-full resize-none rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-background)] px-3 py-2 text-[13px] leading-[1.5] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] transition-[box-shadow,border-color] duration-150 focus:border-[var(--color-accent)] focus:shadow-[0_0_0_3px_var(--color-focus-ring)] focus:outline-none"
@@ -65,7 +66,7 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
             onClick={clearCanvasElement}
             className="text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
           >
-            Cancel
+            {t('common.cancel')}
           </button>
           <button
             type="button"
@@ -73,7 +74,7 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
             onClick={() => void applyInlineComment(draft)}
             className="inline-flex items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-accent)] px-3 py-2 text-[12px] font-medium text-white shadow-[var(--shadow-soft)] transition-colors hover:bg-[var(--color-accent-hover)] disabled:pointer-events-none disabled:opacity-40"
           >
-            {isGenerating ? 'Applying...' : 'Apply change'}
+            {isGenerating ? t('inlineComment.applying') : t('inlineComment.applyChange')}
           </button>
         </div>
       </div>
diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.tsx b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
index 17e2b756..ad971602 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { buildSrcdoc, isIframeErrorMessage, isOverlayMessage } from '@open-codesign/runtime';
 import { useEffect, useRef } from 'react';
 import { EmptyState } from '../preview/EmptyState';
@@ -20,6 +21,7 @@ export function isTrustedPreviewMessageSource(
 }
 
 export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
+  const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const isGenerating = useCodesignStore((s) => s.isGenerating);
   const errorMessage = useCodesignStore((s) => s.errorMessage);
@@ -74,7 +76,7 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
       <div className="h-full p-6">
         <div className="relative h-full">
           <div className="absolute left-5 top-5 z-10 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.88)] px-3 py-1 text-[11px] text-[var(--color-text-secondary)] shadow-[var(--shadow-soft)] backdrop-blur">
-            Click any element in the preview to leave an inline comment.
+            {t('preview.clickToComment')}
           </div>
           <iframe
             ref={iframeRef}
diff --git a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
index d8a432ca..274fd81d 100644
--- a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { Download } from 'lucide-react';
 import { type ReactElement, useEffect, useRef, useState } from 'react';
 import type { ExportFormat } from '../../../preload/index';
@@ -10,14 +11,8 @@ interface ExportItem {
   ready: boolean;
 }
 
-const EXPORT_ITEMS: ExportItem[] = [
-  { format: 'html', label: 'HTML', ready: true, hint: 'Single self-contained .html file' },
-  { format: 'pdf', label: 'PDF', ready: true, hint: 'Rendered via your installed Chrome' },
-  { format: 'pptx', label: 'PPTX', ready: true, hint: 'Editable slides; one per <section>' },
-  { format: 'zip', label: 'ZIP bundle', ready: true, hint: 'index.html + assets + README.md' },
-];
-
 export function PreviewToolbar(): ReactElement {
+  const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const exportActive = useCodesignStore((s) => s.exportActive);
   const toastMessage = useCodesignStore((s) => s.toastMessage);
@@ -36,11 +31,37 @@ export function PreviewToolbar(): ReactElement {
 
   useEffect(() => {
     if (!toastMessage) return;
-    const t = setTimeout(() => dismissToast(), 4000);
-    return () => clearTimeout(t);
+    const timeout = setTimeout(() => dismissToast(), 4000);
+    return () => clearTimeout(timeout);
   }, [toastMessage, dismissToast]);
 
   const disabled = !previewHtml;
+  const exportItems: ExportItem[] = [
+    {
+      format: 'html',
+      label: t('export.items.html.label'),
+      ready: true,
+      hint: t('export.items.html.hint'),
+    },
+    {
+      format: 'pdf',
+      label: t('export.items.pdf.label'),
+      ready: true,
+      hint: t('export.items.pdf.hint'),
+    },
+    {
+      format: 'pptx',
+      label: t('export.items.pptx.label'),
+      ready: true,
+      hint: t('export.items.pptx.hint'),
+    },
+    {
+      format: 'zip',
+      label: t('export.items.zip.label'),
+      ready: true,
+      hint: t('export.items.zip.hint'),
+    },
+  ];
 
   return (
     <div className="flex items-center justify-end gap-2 px-6 py-2 border-b border-[var(--color-border-muted)] bg-[var(--color-background-secondary)]">
@@ -60,7 +81,7 @@ export function PreviewToolbar(): ReactElement {
           aria-expanded={open}
         >
           <Download className="w-[14px] h-[14px]" aria-hidden="true" />
-          Export
+          {t('export.button')}
         </button>
 
         {open && (
@@ -68,7 +89,7 @@ export function PreviewToolbar(): ReactElement {
             role="menu"
             className="absolute right-0 top-full mt-2 min-w-[200px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-elevated)] py-1 z-10"
           >
-            {EXPORT_ITEMS.map((item) => (
+            {exportItems.map((item) => (
               <button
                 key={item.format}
                 type="button"
diff --git a/apps/desktop/src/renderer/src/components/Sidebar.tsx b/apps/desktop/src/renderer/src/components/Sidebar.tsx
index 3b073621..0fbe7bed 100644
--- a/apps/desktop/src/renderer/src/components/Sidebar.tsx
+++ b/apps/desktop/src/renderer/src/components/Sidebar.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { ArrowUp, FolderOpen, Link2, Paperclip, X } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { useCodesignStore } from '../store';
@@ -9,6 +10,7 @@ export interface SidebarProps {
 }
 
 export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
+  const t = useT();
   const config = useCodesignStore((s) => s.config);
   const messages = useCodesignStore((s) => s.messages);
   const isGenerating = useCodesignStore((s) => s.isGenerating);
@@ -50,7 +52,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
       <div className="px-5 py-5 border-b border-[var(--color-border-muted)] space-y-3">
         <div className="space-y-2">
           <div className="text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-muted)] font-medium">
-            Local Context
+            {t('sidebar.localContext')}
           </div>
           <div className="grid grid-cols-1 gap-2">
             <button
@@ -59,7 +61,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
               className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-[12px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
             >
               <Paperclip className="w-4 h-4 text-[var(--color-text-secondary)]" />
-              Attach local files
+              {t('sidebar.attachLocalFiles')}
             </button>
             <button
               type="button"
@@ -67,7 +69,9 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
               className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-[12px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
             >
               <FolderOpen className="w-4 h-4 text-[var(--color-text-secondary)]" />
-              {designSystem ? 'Refresh design system repo' : 'Link design system repo'}
+              {designSystem
+                ? t('sidebar.refreshDesignSystemRepo')
+                : t('sidebar.linkDesignSystemRepo')}
             </button>
           </div>
         </div>
@@ -75,7 +79,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
         <label className="block space-y-2">
           <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-muted)] font-medium">
             <Link2 className="w-3.5 h-3.5" />
-            Reference URL
+            {t('sidebar.referenceUrl')}
           </span>
           <input
             type="url"
@@ -89,7 +93,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
         {inputFiles.length > 0 ? (
           <div className="space-y-2">
             <div className="text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-muted)] font-medium">
-              Attached Files
+              {t('sidebar.attachedFiles')}
             </div>
             <div className="flex flex-wrap gap-2">
               {inputFiles.map((file) => (
@@ -104,7 +108,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
                     type="button"
                     onClick={() => removeInputFile(file.path)}
                     className="inline-flex items-center justify-center rounded-full text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
-                    aria-label={`Remove ${file.name}`}
+                    aria-label={t('sidebar.removeFile', { name: file.name })}
                   >
                     <X className="w-3 h-3" />
                   </button>
@@ -119,7 +123,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
             <div className="flex items-start justify-between gap-3">
               <div>
                 <div className="text-[12px] font-medium text-[var(--color-text-primary)]">
-                  Active design system
+                  {t('sidebar.activeDesignSystem')}
                 </div>
                 <div className="text-[11px] text-[var(--color-text-muted)] break-all">
                   {designSystem.rootPath}
@@ -130,7 +134,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
                 onClick={() => void clearDesignSystem()}
                 className="text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
               >
-                Clear
+                {t('sidebar.clear')}
               </button>
             </div>
             <p className="text-[12px] text-[var(--color-text-secondary)] leading-[1.5]">
@@ -139,8 +143,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
           </div>
         ) : (
           <p className="text-[12px] text-[var(--color-text-muted)] leading-[1.5]">
-            Link a repo to extract colors, typography, spacing, and other styling cues for future
-            generations.
+            {t('sidebar.designSystemHint')}
           </p>
         )}
       </div>
@@ -148,7 +151,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
       <div className="flex-1 overflow-y-auto px-5 py-6 space-y-3">
         {messages.length === 0 ? (
           <p className="text-[var(--text-sm)] text-[var(--color-text-muted)] leading-[var(--leading-body)]">
-            Start with a brief, then add files, a URL, or a local repo to ground the result.
+            {t('sidebar.startHint')}
           </p>
         ) : (
           messages.map((m, i) => (
@@ -177,7 +180,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
               e.currentTarget.style.height = `${Math.min(e.currentTarget.scrollHeight, 160)}px`;
             }}
             onKeyDown={handleKeyDown}
-            placeholder="Describe what to design..."
+            placeholder={t('chat.placeholder')}
             disabled={isGenerating}
             rows={1}
             className="flex-1 resize-none bg-transparent px-2 py-1 text-[var(--text-sm)] leading-[1.5] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none min-h-[24px] max-h-[160px]"
@@ -185,7 +188,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
           <button
             type="submit"
             disabled={!canSend}
-            aria-label="Send prompt"
+            aria-label={t('common.send')}
             className="shrink-0 inline-flex items-center justify-center w-8 h-8 rounded-[var(--radius-md)] bg-[var(--color-accent)] text-white shadow-[var(--shadow-soft)] hover:bg-[var(--color-accent-hover)] hover:scale-[1.04] active:scale-[0.96] disabled:opacity-30 disabled:hover:scale-100 disabled:pointer-events-none transition-[transform,background-color,opacity] duration-150 ease-[var(--ease-out)]"
           >
             <ArrowUp className="w-4 h-4" strokeWidth={2.4} />
@@ -199,19 +202,19 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
             >
               Enter
             </kbd>{' '}
-            send ·{' '}
+            {t('chat.sendAction')} /{' '}
             <kbd
               className="px-[5px] py-[1px] rounded-[4px] bg-[var(--color-surface-active)] text-[10px] text-[var(--color-text-secondary)]"
               style={{ fontFamily: 'var(--font-mono)' }}
             >
               Cmd/Ctrl+Enter
             </kbd>{' '}
-            anywhere
+            {t('chat.sendAnywhere')}
           </span>
           {isGenerating ? (
             <span className="inline-flex items-center gap-1.5 text-[var(--color-accent)]">
               <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-accent)] animate-pulse" />
-              Working
+              {t('common.working')}
             </span>
           ) : null}
         </div>
diff --git a/apps/desktop/src/renderer/src/components/TopBar.tsx b/apps/desktop/src/renderer/src/components/TopBar.tsx
index 9abc3077..d5262087 100644
--- a/apps/desktop/src/renderer/src/components/TopBar.tsx
+++ b/apps/desktop/src/renderer/src/components/TopBar.tsx
@@ -18,7 +18,7 @@ export function TopBar() {
   const openCommandPalette = useCodesignStore((s) => s.openCommandPalette);
 
   let crumb = t('preview.noDesign');
-  if (errorMessage) crumb = 'Error';
+  if (errorMessage) crumb = t('preview.error.title');
   else if (isGenerating) crumb = t('preview.loading.title');
   else if (previewHtml) crumb = t('preview.ready');
 
@@ -36,14 +36,14 @@ export function TopBar() {
       </div>
 
       <div className="flex items-center gap-1" style={noDragStyle}>
-        <Tooltip label="Command palette  Ctrl/Cmd+K">
-          <IconButton label="Open command palette" size="sm" onClick={openCommandPalette}>
+        <Tooltip label={t('commands.tooltips.commandPalette')}>
+          <IconButton label={t('commands.openPalette')} size="sm" onClick={openCommandPalette}>
             <Command className="w-4 h-4" />
           </IconButton>
         </Tooltip>
         <LanguageToggle />
         <ThemeToggle />
-        <Tooltip label="Settings  Ctrl/Cmd+,">
+        <Tooltip label={t('commands.tooltips.settings')}>
           <IconButton label={t('commands.items.openSettings')} size="sm" onClick={openSettings}>
             <SettingsIcon className="w-4 h-4" />
           </IconButton>
diff --git a/apps/desktop/src/renderer/src/preview/EmptyState.tsx b/apps/desktop/src/renderer/src/preview/EmptyState.tsx
index 654488de..feb7bbb9 100644
--- a/apps/desktop/src/renderer/src/preview/EmptyState.tsx
+++ b/apps/desktop/src/renderer/src/preview/EmptyState.tsx
@@ -1,28 +1,15 @@
+import { useT } from '@open-codesign/i18n';
 import { Sparkles } from 'lucide-react';
 
 export interface EmptyStateProps {
   onPickStarter: (prompt: string) => void;
 }
 
-const STARTERS: ReadonlyArray<{ label: string; prompt: string }> = [
-  {
-    label: 'Mobile meditation app',
-    prompt:
-      'Design a mobile app prototype for a meditation app called Calm Spaces. Show a phone frame containing a home screen with a meditation list, play button, and progress tracker.',
-  },
-  {
-    label: 'B2B pitch deck',
-    prompt:
-      'Create a 6-slide B2B SaaS pitch deck for an AI workflow tool. Include problem, solution, market, demo screenshot, traction, and ask.',
-  },
-  {
-    label: 'Case study one-pager',
-    prompt:
-      'Create a one-page client case study with hero metrics, a CEO quote, and a logo placeholder. Clean, minimal, dark theme.',
-  },
-];
+const STARTERS = ['meditationApp', 'pitchDeck', 'caseStudy'] as const;
 
 export function EmptyState({ onPickStarter }: EmptyStateProps) {
+  const t = useT();
+
   return (
     <div className="h-full flex items-center justify-center px-6">
       <div className="text-center max-w-md flex flex-col items-center">
@@ -36,20 +23,23 @@ export function EmptyState({ onPickStarter }: EmptyStateProps) {
           </div>
         </div>
         <h2 className="text-[var(--text-lg)] font-semibold text-[var(--color-text-primary)] tracking-[var(--tracking-heading)] mb-2">
-          A blank canvas, ready when you are.
+          {t('preview.empty.title')}
         </h2>
-        <p className="text-[var(--text-sm)] text-[var(--color-text-secondary)] leading-[var(--leading-body)] mb-6">
-          Describe what you want to build, or start from one of these:
+        <p className="text-[var(--text-sm)] text-[var(--color-text-secondary)] leading-[var(--leading-body)] mb-4">
+          {t('preview.empty.body')}
         </p>
+        <div className="mb-3 text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-muted)]">
+          {t('preview.empty.starterChip')}
+        </div>
         <div className="flex flex-wrap gap-2 justify-center">
-          {STARTERS.map((s) => (
+          {STARTERS.map((starterId) => (
             <button
-              key={s.label}
+              key={starterId}
               type="button"
-              onClick={() => onPickStarter(s.prompt)}
+              onClick={() => onPickStarter(t(`demos.${starterId}.prompt`))}
               className="px-3 py-1.5 rounded-[var(--radius-full)] text-[var(--text-xs)] font-medium bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] transition-colors"
             >
-              {s.label}
+              {t(`demos.${starterId}.title`)}
             </button>
           ))}
         </div>
diff --git a/apps/desktop/src/renderer/src/preview/ErrorState.tsx b/apps/desktop/src/renderer/src/preview/ErrorState.tsx
index 47c881ae..23c1bf23 100644
--- a/apps/desktop/src/renderer/src/preview/ErrorState.tsx
+++ b/apps/desktop/src/renderer/src/preview/ErrorState.tsx
@@ -1,3 +1,4 @@
+import { useT } from '@open-codesign/i18n';
 import { Button } from '@open-codesign/ui';
 import { AlertTriangle, Copy, RotateCw } from 'lucide-react';
 import { useState } from 'react';
@@ -9,6 +10,7 @@ export interface ErrorStateProps {
 }
 
 export function ErrorState({ message, onRetry, onDismiss }: ErrorStateProps) {
+  const t = useT();
   const [copied, setCopied] = useState(false);
 
   async function copy() {
@@ -26,10 +28,10 @@ export function ErrorState({ message, onRetry, onDismiss }: ErrorStateProps) {
           </div>
           <div className="flex-1 min-w-0">
             <h3 className="text-[var(--text-base)] font-semibold text-[var(--color-text-primary)]">
-              Generation failed
+              {t('preview.error.title')}
             </h3>
             <p className="text-[var(--text-sm)] text-[var(--color-text-secondary)] mt-1">
-              The model returned an error. You can retry or copy the details below.
+              {t('preview.error.body')}
             </p>
           </div>
         </div>
@@ -39,16 +41,16 @@ export function ErrorState({ message, onRetry, onDismiss }: ErrorStateProps) {
         <div className="flex items-center gap-2 justify-end">
           {onDismiss ? (
             <Button variant="ghost" size="sm" onClick={onDismiss}>
-              Dismiss
+              {t('common.close')}
             </Button>
           ) : null}
           <Button variant="secondary" size="sm" onClick={copy}>
             <Copy className="w-4 h-4" />
-            {copied ? 'Copied' : 'Copy Error'}
+            {copied ? t('common.copied') : t('preview.error.copyError')}
           </Button>
           <Button variant="primary" size="sm" onClick={onRetry}>
             <RotateCw className="w-4 h-4" />
-            Retry
+            {t('common.retry')}
           </Button>
         </div>
       </div>
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index c389bfc8..0856fbfe 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -1,3 +1,4 @@
+import { i18n } from '@open-codesign/i18n';
 import type {
   ChatMessage,
   LocalInputFile,
@@ -141,6 +142,10 @@ function uniqueFiles(files: LocalInputFile[]): LocalInputFile[] {
   return result;
 }
 
+function tr(key: string, options?: Record<string, unknown>): string {
+  return i18n.t(key, options ?? {}) as string;
+}
+
 export const useCodesignStore = create<CodesignState>((set, get) => ({
   messages: [],
   previewHtml: null,
@@ -176,7 +181,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     if (!window.codesign) {
       set({
         configLoaded: true,
-        errorMessage: 'Renderer is not connected to the main process.',
+        errorMessage: tr('errors.rendererDisconnected'),
       });
       return;
     }
@@ -215,15 +220,15 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       if (next.designSystem) {
         get().pushToast({
           variant: 'success',
-          title: 'Design system linked',
+          title: tr('notifications.designSystemLinked'),
           description: next.designSystem.summary,
         });
       }
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to scan design system.';
+      const message = err instanceof Error ? err.message : tr('errors.generic');
       get().pushToast({
         variant: 'error',
-        title: 'Design system scan failed',
+        title: tr('notifications.designSystemScanFailed'),
         description: message,
       });
     }
@@ -234,12 +239,12 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     try {
       const next = await window.codesign.clearDesignSystem();
       set({ config: next });
-      get().pushToast({ variant: 'info', title: 'Design system cleared' });
+      get().pushToast({ variant: 'info', title: tr('notifications.designSystemCleared') });
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to clear design system.';
+      const message = err instanceof Error ? err.message : tr('errors.generic');
       get().pushToast({
         variant: 'error',
-        title: 'Unable to clear design system',
+        title: tr('notifications.clearDesignSystemFailed'),
         description: message,
       });
     }
@@ -248,13 +253,13 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   async sendPrompt(input) {
     if (get().isGenerating) return;
     if (!window.codesign) {
-      const msg = 'Renderer is not connected to the main process.';
+      const msg = tr('errors.rendererDisconnected');
       set({ errorMessage: msg, lastError: msg });
       return;
     }
     const cfg = get().config;
     if (cfg === null || !cfg.hasKey || cfg.provider === null || cfg.modelPrimary === null) {
-      const msg = 'Onboarding is not complete.';
+      const msg = tr('errors.onboardingIncomplete');
       set({ errorMessage: msg, lastError: msg });
       return;
     }
@@ -291,19 +296,26 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       });
       const firstArtifact = result.artifacts[0];
       set((s) => ({
-        messages: [...s.messages, { role: 'assistant', content: result.message || 'Done.' }],
+        messages: [
+          ...s.messages,
+          { role: 'assistant', content: result.message || tr('common.done') },
+        ],
         previewHtml: firstArtifact?.content ?? s.previewHtml,
         isGenerating: false,
       }));
     } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Unknown error';
+      const msg = err instanceof Error ? err.message : tr('errors.unknown');
       set((s) => ({
         messages: [...s.messages, { role: 'assistant', content: `Error: ${msg}` }],
         isGenerating: false,
         errorMessage: msg,
         lastError: msg,
       }));
-      get().pushToast({ variant: 'error', title: 'Generation failed', description: msg });
+      get().pushToast({
+        variant: 'error',
+        title: tr('notifications.generationFailed'),
+        description: msg,
+      });
     }
   },
 
@@ -352,20 +364,27 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       });
       const firstArtifact = result.artifacts[0];
       set((s) => ({
-        messages: [...s.messages, { role: 'assistant', content: result.message || 'Applied.' }],
+        messages: [
+          ...s.messages,
+          { role: 'assistant', content: result.message || tr('common.applied') },
+        ],
         previewHtml: firstArtifact?.content ?? s.previewHtml,
         isGenerating: false,
         selectedElement: null,
       }));
     } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Unknown error';
+      const msg = err instanceof Error ? err.message : tr('errors.unknown');
       set((s) => ({
         messages: [...s.messages, { role: 'assistant', content: `Error: ${msg}` }],
         isGenerating: false,
         errorMessage: msg,
         lastError: msg,
       }));
-      get().pushToast({ variant: 'error', title: 'Inline comment failed', description: msg });
+      get().pushToast({
+        variant: 'error',
+        title: tr('notifications.inlineCommentFailed'),
+        description: msg,
+      });
     }
   },
 
@@ -376,11 +395,11 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   async exportActive(format: ExportFormat) {
     const html = get().previewHtml;
     if (!html) {
-      set({ toastMessage: 'No design to export yet.' });
+      set({ toastMessage: tr('notifications.noDesignToExport') });
       return;
     }
     if (!window.codesign) {
-      set({ errorMessage: 'Renderer is not connected to the main process.' });
+      set({ errorMessage: tr('errors.rendererDisconnected') });
       return;
     }
     try {
@@ -391,10 +410,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         defaultFilename: `codesign-${stamp}.${format}`,
       });
       if (res.status === 'saved' && res.path) {
-        set({ toastMessage: `Exported to ${res.path}` });
+        set({ toastMessage: tr('notifications.exportedTo', { path: res.path }) });
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Unknown error';
+      const msg = err instanceof Error ? err.message : tr('errors.unknown');
       set({ toastMessage: msg, errorMessage: msg, lastError: msg });
     }
   },
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index e89605f6..a1f4399c 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -13,9 +13,12 @@
     "copy": "Copy",
     "copied": "Copied",
     "comingSoon": "Coming soon",
-    "loading": "Loading…",
+    "loading": "Loading\u2026",
     "preAlpha": "pre-alpha",
-    "tagline": "BYOK · local-first · multi-model"
+    "tagline": "BYOK · local-first · multi-model",
+    "done": "Done.",
+    "applied": "Applied.",
+    "working": "Working"
   },
   "preview": {
     "empty": {
@@ -24,7 +27,7 @@
       "starterChip": "Try a starter prompt:"
     },
     "loading": {
-      "title": "Generating your design…"
+      "title": "Generating your design\u2026"
     },
     "error": {
       "title": "Generation failed",
@@ -32,12 +35,30 @@
       "copyError": "Copy error details"
     },
     "ready": "Preview",
-    "noDesign": "No design yet"
+    "noDesign": "No design yet",
+    "clickToComment": "Click any element in the preview to leave an inline comment.",
+    "runtimeError": "Preview runtime error",
+    "dismissErrors": "Dismiss preview errors"
   },
   "chat": {
-    "placeholder": "Describe what to design…",
+    "placeholder": "Describe what to design\u2026",
     "sendShortcut": "Send (Enter)",
-    "emptyHint": "Start with a starter prompt or your own idea."
+    "emptyHint": "Start with a starter prompt or your own idea.",
+    "sendAction": "send",
+    "sendAnywhere": "anywhere"
+  },
+  "sidebar": {
+    "localContext": "Local context",
+    "attachLocalFiles": "Attach local files",
+    "linkDesignSystemRepo": "Link design system repo",
+    "refreshDesignSystemRepo": "Refresh design system repo",
+    "referenceUrl": "Reference URL",
+    "attachedFiles": "Attached files",
+    "removeFile": "Remove {{name}}",
+    "activeDesignSystem": "Active design system",
+    "clear": "Clear",
+    "designSystemHint": "Link a repo to extract colors, typography, spacing, and other styling cues for future generations.",
+    "startHint": "Start with a brief, then add files, a URL, or a local repo to ground the result."
   },
   "settings": {
     "title": "Settings",
@@ -68,7 +89,7 @@
     },
     "paste": {
       "title": "Paste your API key",
-      "placeholder": "sk-…",
+      "placeholder": "sk-\u2026",
       "recognized": "Detected provider: {{provider}}",
       "connected_one": "Connected {{count}} model",
       "connected_other": "Connected {{count}} models",
@@ -94,20 +115,77 @@
   },
   "commands": {
     "title": "Commands",
-    "placeholder": "Type a command or search…",
+    "placeholder": "Type a command or search\u2026",
+    "noMatches": "No matches.",
+    "openPalette": "Open command palette",
     "items": {
       "newDesign": "New design",
       "toggleTheme": "Toggle theme",
       "openSettings": "Open settings",
       "export": "Export current design"
+    },
+    "hints": {
+      "newDesign": "Clear chat and start fresh",
+      "toggleTheme": "Switch between light and dark",
+      "openSettings": "Models, appearance, storage",
+      "export": "Use the export button in the toolbar"
+    },
+    "tooltips": {
+      "commandPalette": "Command palette  Ctrl/Cmd+K",
+      "settings": "Settings  Ctrl/Cmd+,"
+    },
+    "cleared": "Workspace cleared",
+    "exportUseToolbarTitle": "Use toolbar export",
+    "exportUseToolbarBody": "Use the Export button in the toolbar."
+  },
+  "export": {
+    "button": "Export",
+    "items": {
+      "html": {
+        "label": "HTML",
+        "hint": "Single self-contained .html file"
+      },
+      "pdf": {
+        "label": "PDF",
+        "hint": "Rendered via your installed Chrome"
+      },
+      "pptx": {
+        "label": "PPTX",
+        "hint": "Editable slides; one per <section>"
+      },
+      "zip": {
+        "label": "ZIP bundle",
+        "hint": "index.html + assets + README.md"
+      }
     }
   },
+  "notifications": {
+    "designSystemLinked": "Design system linked",
+    "designSystemScanFailed": "Design system scan failed",
+    "designSystemCleared": "Design system cleared",
+    "clearDesignSystemFailed": "Unable to clear design system",
+    "generationFailed": "Generation failed",
+    "inlineCommentFailed": "Inline comment failed",
+    "noDesignToExport": "No design to export yet.",
+    "exportedTo": "Exported to {{path}}"
+  },
+  "inlineComment": {
+    "title": "Comment on",
+    "closeComposer": "Close inline comment composer",
+    "description": "Clicked elements stay selected in the canvas. Describe the visual or content change you want, and open-codesign will rewrite the artifact around that target.",
+    "placeholder": "Make this section more compact, sharpen the headline, and align it with the linked design system\u2026",
+    "applying": "Applying\u2026",
+    "applyChange": "Apply change"
+  },
   "errors": {
     "generic": "Something went wrong.",
     "providerAuthMissing": "No API key configured. Open Settings to add one.",
     "providerError": "Provider error: {{message}}",
     "ipcBadInput": "Invalid input passed to the main process.",
-    "exporterNotReady": "Exporter is still loading. Try again in a moment."
+    "exporterNotReady": "Exporter is still loading. Try again in a moment.",
+    "rendererDisconnected": "Renderer is not connected to the main process.",
+    "onboardingIncomplete": "Onboarding is not complete.",
+    "unknown": "Unknown error"
   },
   "demos": {
     "meditationApp": {
diff --git a/packages/i18n/src/locales/zh-CN.json b/packages/i18n/src/locales/zh-CN.json
index 79ed9914..80f39536 100644
--- a/packages/i18n/src/locales/zh-CN.json
+++ b/packages/i18n/src/locales/zh-CN.json
@@ -13,9 +13,12 @@
     "copy": "复制",
     "copied": "已复制",
     "comingSoon": "即将推出",
-    "loading": "加载中…",
+    "loading": "加载中\u2026",
     "preAlpha": "预览版",
-    "tagline": "自带密钥 · 本地优先 · 多模型"
+    "tagline": "自带密钥 · 本地优先 · 多模型",
+    "done": "完成。",
+    "applied": "已应用。",
+    "working": "处理中"
   },
   "preview": {
     "empty": {
@@ -24,7 +27,7 @@
       "starterChip": "试试这些范例提示词："
     },
     "loading": {
-      "title": "正在生成你的设计…"
+      "title": "正在生成你的设计\u2026"
     },
     "error": {
       "title": "生成失败",
@@ -32,12 +35,30 @@
       "copyError": "复制错误详情"
     },
     "ready": "预览",
-    "noDesign": "还没有设计"
+    "noDesign": "还没有设计",
+    "clickToComment": "点击预览中的任意元素即可留下局部评论。",
+    "runtimeError": "预览运行时错误",
+    "dismissErrors": "关闭预览错误"
   },
   "chat": {
     "placeholder": "想设计什么？",
     "sendShortcut": "发送（回车）",
-    "emptyHint": "可以从范例开始，也可以直接说出你的想法。"
+    "emptyHint": "可以从范例开始，也可以直接说出你的想法。",
+    "sendAction": "发送",
+    "sendAnywhere": "任意位置发送"
+  },
+  "sidebar": {
+    "localContext": "本地上下文",
+    "attachLocalFiles": "添加本地文件",
+    "linkDesignSystemRepo": "关联设计系统仓库",
+    "refreshDesignSystemRepo": "刷新设计系统仓库",
+    "referenceUrl": "参考链接",
+    "attachedFiles": "已附加文件",
+    "removeFile": "移除 {{name}}",
+    "activeDesignSystem": "当前设计系统",
+    "clear": "清除",
+    "designSystemHint": "关联一个仓库，提取颜色、排版、间距等样式线索，用于后续生成。",
+    "startHint": "先写一段简要需求，再补充文件、链接或本地仓库，让生成结果更贴近你的上下文。"
   },
   "settings": {
     "title": "设置",
@@ -68,7 +89,7 @@
     },
     "paste": {
       "title": "粘贴你的 API Key",
-      "placeholder": "sk-…",
+      "placeholder": "sk-\u2026",
       "recognized": "已识别提供商：{{provider}}",
       "connected_one": "已连接 {{count}} 个模型",
       "connected_other": "已连接 {{count}} 个模型",
@@ -93,21 +114,78 @@
     }
   },
   "commands": {
-    "title": "命令",
-    "placeholder": "输入命令或搜索…",
+    "title": "命令面板",
+    "placeholder": "输入命令或搜索\u2026",
+    "noMatches": "没有匹配项。",
+    "openPalette": "打开命令面板",
     "items": {
       "newDesign": "新建设计",
       "toggleTheme": "切换主题",
       "openSettings": "打开设置",
       "export": "导出当前设计"
+    },
+    "hints": {
+      "newDesign": "清空当前会话并重新开始",
+      "toggleTheme": "在浅色和深色之间切换",
+      "openSettings": "模型、外观、存储",
+      "export": "使用顶部工具栏里的导出按钮"
+    },
+    "tooltips": {
+      "commandPalette": "命令面板  Ctrl/Cmd+K",
+      "settings": "设置  Ctrl/Cmd+,"
+    },
+    "cleared": "工作区已清空",
+    "exportUseToolbarTitle": "请使用顶部导出",
+    "exportUseToolbarBody": "请使用顶部工具栏里的“导出”按钮。"
+  },
+  "export": {
+    "button": "导出",
+    "items": {
+      "html": {
+        "label": "HTML",
+        "hint": "导出为单个自包含 .html 文件"
+      },
+      "pdf": {
+        "label": "PDF",
+        "hint": "通过你本机已安装的 Chrome 渲染"
+      },
+      "pptx": {
+        "label": "PPTX",
+        "hint": "可编辑幻灯片；每个 <section> 一页"
+      },
+      "zip": {
+        "label": "ZIP 包",
+        "hint": "index.html + 资源文件 + README.md"
+      }
     }
   },
+  "notifications": {
+    "designSystemLinked": "设计系统已关联",
+    "designSystemScanFailed": "设计系统扫描失败",
+    "designSystemCleared": "设计系统已清除",
+    "clearDesignSystemFailed": "无法清除设计系统",
+    "generationFailed": "生成失败",
+    "inlineCommentFailed": "局部修改失败",
+    "noDesignToExport": "当前还没有可导出的设计。",
+    "exportedTo": "已导出到 {{path}}"
+  },
+  "inlineComment": {
+    "title": "评论",
+    "closeComposer": "关闭局部评论面板",
+    "description": "被点击的元素会在画布中保持选中。描述你想调整的视觉或内容变化，open-codesign 会围绕该目标重写产物。",
+    "placeholder": "让这个区块更紧凑、标题更有冲击力，并与已关联的设计系统对齐\u2026",
+    "applying": "应用中\u2026",
+    "applyChange": "应用修改"
+  },
   "errors": {
     "generic": "出错了。",
     "providerAuthMissing": "还没配置 API Key。打开设置去添加一个。",
     "providerError": "提供商错误：{{message}}",
     "ipcBadInput": "传给主进程的参数不合法。",
-    "exporterNotReady": "导出器还在加载，稍等片刻再试。"
+    "exporterNotReady": "导出器还在加载，稍等片刻再试。",
+    "rendererDisconnected": "渲染进程未连接到主进程。",
+    "onboardingIncomplete": "引导流程尚未完成。",
+    "unknown": "未知错误"
   },
   "demos": {
     "meditationApp": {