From 91654d8682961cf068afd3f14686872ab87542f4 Mon Sep 17 00:00:00 2001
From: AnonyJcy <jcy20333@gmail.com>
Date: Mon, 24 Aug 2026 16:12:14 +0800
Subject: [PATCH] feat(gui): introduce i18n framework & Simplified Chinese
 (zh-CN) localization (#84)

---
 .../src/lib/components/CommandPalette.svelte  |  31 ++-
 .../ui/src/lib/components/Modal.svelte        |   3 +-
 .../ui/src/lib/components/Sidebar.svelte      |  44 ++--
 .../ui/src/lib/components/StatusBar.svelte    |  14 +-
 .../ui/src/lib/components/SupportModal.svelte |  65 +++--
 .../ui/src/lib/components/UpdateBanner.svelte |  13 +-
 .../ui/src/lib/components/select.test.ts      |   4 +-
 .../omnyssh-gui/ui/src/lib/demo/demoData.ts   | 203 +++++++++++++++
 .../omnyssh-gui/ui/src/lib/i18n/i18n.test.ts  |  41 +++
 crates/omnyssh-gui/ui/src/lib/i18n/index.ts   | 128 +++++++++
 .../omnyssh-gui/ui/src/lib/i18n/locales/en.ts | 244 ++++++++++++++++++
 .../ui/src/lib/i18n/locales/zh-CN.ts          | 244 ++++++++++++++++++
 .../ui/src/lib/screens/Dashboard.svelte       | 108 +++++---
 .../ui/src/lib/screens/HostEditor.svelte      |  45 ++--
 .../src/lib/screens/KeySetupProgress.svelte   |  26 +-
 .../ui/src/lib/screens/Settings.svelte        |  70 +++--
 .../ui/src/lib/screens/SftpPane.svelte        |   5 +-
 .../ui/src/lib/screens/SftpView.svelte        |  53 ++--
 .../ui/src/lib/screens/SnippetEditor.svelte   |  25 +-
 .../ui/src/lib/screens/SnippetResults.svelte  |  16 +-
 .../ui/src/lib/screens/SnippetRunner.svelte   |  26 +-
 .../ui/src/lib/screens/Snippets.svelte        |  35 +--
 .../ui/src/lib/screens/TerminalView.svelte    |   9 +-
 .../omnyssh-gui/ui/src/lib/stores/sessions.ts |   3 +
 .../ui/src/lib/stores/streamer.test.ts        |  45 ++--
 .../omnyssh-gui/ui/src/lib/stores/streamer.ts |  38 ++-
 .../omnyssh-gui/ui/src/routes/+layout.svelte  |  29 ++-
 crates/omnyssh-gui/ui/src/routes/+page.svelte |   1 +
 28 files changed, 1276 insertions(+), 292 deletions(-)
 create mode 100644 crates/omnyssh-gui/ui/src/lib/demo/demoData.ts
 create mode 100644 crates/omnyssh-gui/ui/src/lib/i18n/i18n.test.ts
 create mode 100644 crates/omnyssh-gui/ui/src/lib/i18n/index.ts
 create mode 100644 crates/omnyssh-gui/ui/src/lib/i18n/locales/en.ts
 create mode 100644 crates/omnyssh-gui/ui/src/lib/i18n/locales/zh-CN.ts

diff --git a/crates/omnyssh-gui/ui/src/lib/components/CommandPalette.svelte b/crates/omnyssh-gui/ui/src/lib/components/CommandPalette.svelte
index aec878d..deca2d1 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/CommandPalette.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/CommandPalette.svelte
@@ -11,8 +11,9 @@
   import { sessions, sessionLabel, sessionStatusDot } from '$lib/stores/sessions';
   import { activeEntity } from '$lib/stores/activeEntity';
   import { spawnSession } from '$lib/stores/navigation';
-  import { streamerMode, displayHostname } from '$lib/stores/streamer';
+  import { streamerMode, displayHostname, displayUser, displayHostTitle } from '$lib/stores/streamer';
   import { isPaletteChord } from '$lib/stores/ui';
+  import { t } from '$lib/i18n';
 
   let inputEl = $state<HTMLInputElement>();
   let listEl = $state<HTMLUListElement>();
@@ -27,16 +28,16 @@
   const firstHost = $derived(items.findIndex((it) => it.kind === 'host'));
 
   const placeholder = $derived(
-    $palette.mode === 'pickHost' ? 'Pick a host…' : 'Search hosts and sessions…'
+    $palette.mode === 'pickHost' ? $t('palette.pick_host_placeholder') : $t('palette.search_placeholder')
   );
   const emptyMessage = $derived(
     $palette.mode === 'pickHost'
       ? query
-        ? 'No matching hosts.'
-        : 'No hosts configured.'
+        ? $t('palette.no_matching_hosts')
+        : $t('palette.no_hosts_configured')
       : query
-        ? 'No matches.'
-        : 'No hosts or sessions yet.'
+        ? $t('palette.no_matches')
+        : $t('palette.no_hosts_or_sessions')
   );
 
   // Focus returns here when the overlay closes, so a keyboard user is not dropped to
@@ -146,12 +147,12 @@
     class="fixed inset-0 z-50 flex items-start justify-center px-4 pt-[14vh]"
     role="dialog"
     aria-modal="true"
-    aria-label={$palette.mode === 'pickHost' ? 'Pick a host' : 'Command palette'}
+    aria-label={$palette.mode === 'pickHost' ? $t('palette.pick_host_placeholder') : $t('sidebar.palette')}
   >
     <button
       type="button"
       tabindex="-1"
-      aria-label="Dismiss"
+      aria-label={$t('common.close')}
       class="absolute inset-0 bg-overlay"
       onclick={() => palette.close()}
     ></button>
@@ -181,10 +182,10 @@
                unique, so a name key could throw each_key_duplicate. -->
           {#each items as item, i (i)}
             {#if $palette.mode === 'navigate' && i === firstSession}
-              <li class={sectionHead}>Sessions</li>
+              <li class={sectionHead}>{$t('palette.sessions')}</li>
             {/if}
             {#if $palette.mode === 'navigate' && i === firstHost}
-              <li class={sectionHead}>Hosts</li>
+              <li class={sectionHead}>{$t('palette.hosts')}</li>
             {/if}
             <li>
               <button
@@ -198,12 +199,12 @@
                 {#if item.kind === 'session'}
                   <StatusDot status={sessionStatusDot[item.session.status]} />
                   <Icon name={item.session.kind} size={16} />
-                  <span class="min-w-0 flex-1 truncate">{sessionLabel(item.session)}</span>
+                  <span class="min-w-0 flex-1 truncate">{displayHostTitle(sessionLabel(item.session), $streamerMode)}</span>
                 {:else}
                   <StatusDot status={hostStatusDot($statuses.get(item.host.name))} />
-                  <span class="min-w-0 flex-1 truncate font-medium">{item.host.name}</span>
+                  <span class="min-w-0 flex-1 truncate font-medium">{displayHostTitle(item.host.name, $streamerMode, item.host.hostname)}</span>
                   <span class="shrink-0 truncate font-mono text-xs {selected === i ? '' : 'text-faint'}">
-                    {item.host.user}@{displayHostname(item.host.hostname, $streamerMode)}
+                    {displayUser(item.host.user, $streamerMode)}@{displayHostname(item.host.hostname, $streamerMode)}
                   </span>
                 {/if}
               </button>
@@ -215,9 +216,7 @@
       <div
         class="flex items-center gap-4 border-t border-default px-4 py-2 font-mono text-[11px] text-faint"
       >
-        <span>↑↓ navigate</span>
-        <span>↵ select</span>
-        <span>esc close</span>
+        <span>{$t('palette.shortcuts')}</span>
       </div>
     </div>
   </div>
diff --git a/crates/omnyssh-gui/ui/src/lib/components/Modal.svelte b/crates/omnyssh-gui/ui/src/lib/components/Modal.svelte
index c19deaf..08bbeb3 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/Modal.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/Modal.svelte
@@ -5,6 +5,7 @@
   // passed in; the chrome (scrim, box, key handling) is fixed here so the snippet
   // dialogs don't each re-implement it.
   import type { Snippet } from 'svelte';
+  import { t } from '$lib/i18n';
 
   let {
     label,
@@ -31,7 +32,7 @@
   <button
     type="button"
     tabindex="-1"
-    aria-label="Dismiss"
+    aria-label={$t('common.close')}
     class="absolute inset-0 bg-overlay"
     onclick={onClose}
   ></button>
diff --git a/crates/omnyssh-gui/ui/src/lib/components/Sidebar.svelte b/crates/omnyssh-gui/ui/src/lib/components/Sidebar.svelte
index b57aafc..e9cc6ab 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/Sidebar.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/Sidebar.svelte
@@ -19,6 +19,8 @@
   import { spawnSession, closeSession } from '$lib/stores/navigation';
   import { palette } from '$lib/stores/palette';
   import { support } from '$lib/stores/support';
+  import { streamerMode, displayHostTitle } from '$lib/stores/streamer';
+  import { t, locale, type TranslationKey } from '$lib/i18n';
 
   // Action-first spawn (tech-gui.md §2): a spawner opens the host-picker, then creates
   // a session of its kind for the chosen host. A dismissed picker spawns nothing.
@@ -27,16 +29,16 @@
     if (host) spawnSession(kind, host.name);
   }
 
-  type Selector = { kind: 'dashboard' | 'snippets'; label: string; icon: IconName };
-  type Spawner = { kind: SessionKind; label: string; icon: IconName };
+  type Selector = { kind: 'dashboard' | 'snippets'; key: TranslationKey; icon: IconName };
+  type Spawner = { kind: SessionKind; key: TranslationKey; icon: IconName };
 
   const selectors: Selector[] = [
-    { kind: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
-    { kind: 'snippets', label: 'Snippets', icon: 'snippets' }
+    { kind: 'dashboard', key: 'sidebar.dashboard', icon: 'dashboard' },
+    { kind: 'snippets', key: 'sidebar.snippets', icon: 'snippets' }
   ];
   const spawners: Spawner[] = [
-    { kind: 'sftp', label: 'SFTP', icon: 'sftp' },
-    { kind: 'terminal', label: 'Terminal', icon: 'terminal' }
+    { kind: 'sftp', key: 'sidebar.sftp', icon: 'sftp' },
+    { kind: 'terminal', key: 'sidebar.terminal', icon: 'terminal' }
   ];
 
   const rowBase = 'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition';
@@ -59,7 +61,7 @@
     {/if}
     <Button
       variant="icon"
-      title={$sidebarCollapsed ? 'Expand sidebar (⌘B)' : 'Collapse sidebar (⌘B)'}
+      title={$sidebarCollapsed ? $t('sidebar.expand') : $t('sidebar.collapse')}
       onclick={() => sidebarCollapsed.toggle()}
     >
       <Icon name={$sidebarCollapsed ? 'expand' : 'collapse'} />
@@ -76,13 +78,13 @@
             class="{rowBase} {focusRing} {rowState($activeEntity.kind === sel.kind)} {$sidebarCollapsed
               ? 'justify-center'
               : ''}"
-            title={sel.label}
+            title={$t(sel.key)}
             aria-current={$activeEntity.kind === sel.kind ? 'page' : undefined}
             onclick={() =>
               sel.kind === 'dashboard' ? activeEntity.selectDashboard() : activeEntity.selectSnippets()}
           >
             <Icon name={sel.icon} />
-            {#if !$sidebarCollapsed}<span class="truncate">{sel.label}</span>{/if}
+            {#if !$sidebarCollapsed}<span class="truncate">{$t(sel.key)}</span>{/if}
           </button>
         </li>
       {/each}
@@ -91,11 +93,11 @@
           <button
             type="button"
             class="{rowBase} {focusRing} {rowState(false)} {$sidebarCollapsed ? 'justify-center' : ''}"
-            title={sp.label}
+            title={$t(sp.key)}
             onclick={() => pickAndSpawn(sp.kind)}
           >
             <Icon name={sp.icon} />
-            {#if !$sidebarCollapsed}<span class="truncate">{sp.label}</span>{/if}
+            {#if !$sidebarCollapsed}<span class="truncate">{$t(sp.key)}</span>{/if}
           </button>
         </li>
       {/each}
@@ -114,8 +116,8 @@
                 class="flex min-w-0 items-center gap-2.5 rounded text-left {focusRing} {$sidebarCollapsed
                   ? ''
                   : 'flex-1'}"
-                title={sessionTitle(s)}
-                aria-label={sessionTitle(s)}
+                title={$streamerMode ? `${displayHostTitle(s.hostName, true)} · ${s.kind}` : sessionTitle(s)}
+                aria-label={$streamerMode ? `${displayHostTitle(s.hostName, true)} · ${s.kind}` : sessionTitle(s)}
                 aria-current={active ? 'true' : undefined}
                 onclick={() => activeEntity.activateSession(s.id)}
               >
@@ -129,15 +131,15 @@
                 {:else}
                   <StatusDot status={sessionStatusDot[s.status]} />
                   <Icon name={s.kind} size={16} />
-                  <span class="min-w-0 flex-1 truncate">{sessionLabel(s)}</span>
+                  <span class="min-w-0 flex-1 truncate">{displayHostTitle(sessionLabel(s), $streamerMode)}</span>
                 {/if}
               </button>
               {#if !$sidebarCollapsed}
                 <button
                   type="button"
                   class="shrink-0 rounded p-1 opacity-60 transition hover:opacity-100 {focusRing}"
-                  title="Close {sessionLabel(s)}"
-                  aria-label="Close {sessionLabel(s)}"
+                  title="{$t('sidebar.close_session')} ({displayHostTitle(sessionLabel(s), $streamerMode)})"
+                  aria-label="{$t('sidebar.close_session')} ({displayHostTitle(sessionLabel(s), $streamerMode)})"
                   onclick={() => closeSession(s.id)}
                 >
                   <Icon name="close" size={14} />
@@ -155,15 +157,15 @@
       ? 'flex flex-col items-center gap-1'
       : 'flex items-center gap-1'}"
   >
-    <Button variant="icon" title="Command palette (⌘K)" onclick={() => palette.open()}>
+    <Button variant="icon" title={$t('sidebar.palette')} onclick={() => palette.open()}>
       <Icon name="command" />
     </Button>
     <ThemeToggle />
     <!-- Support/about overlay: free + open-source note and the two ways to help.
          Opens a modal, not a screen, so it holds no highlight and never becomes the
          active entity (§2). Sits left of the gear, icon-only so it survives collapse. -->
-    <Button variant="icon" title="Support OmnySSH" onclick={() => support.open()}>
-      <Icon name="telegram" />
+    <Button variant="icon" title={$t('support.title')} onclick={() => support.open()}>
+      <Icon name={$locale === 'zh-CN' ? 'star' : 'telegram'} />
     </Button>
     <!-- Settings is a selector-like screen; the gear holds the active highlight like
          Dashboard/Snippets do, and stays icon-only so it survives collapse (§5.1). -->
@@ -173,8 +175,8 @@
       'settings'
         ? 'bg-accent text-accent-fg'
         : 'text-muted hover:bg-surface-inset hover:text-fg'}"
-      title="Settings"
-      aria-label="Settings"
+      title={$t('sidebar.settings')}
+      aria-label={$t('sidebar.settings')}
       aria-current={$activeEntity.kind === 'settings' ? 'page' : undefined}
       onclick={() => activeEntity.selectSettings()}
     >
diff --git a/crates/omnyssh-gui/ui/src/lib/components/StatusBar.svelte b/crates/omnyssh-gui/ui/src/lib/components/StatusBar.svelte
index 63e603c..42f580c 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/StatusBar.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/StatusBar.svelte
@@ -4,7 +4,9 @@
   // (§4.1); colour lives only in the status dots, per the brandbook.
   import { lastError } from '$lib/stores/notifications';
   import { hostSummary } from '$lib/stores/hostSummary';
+  import { streamerMode } from '$lib/stores/streamer';
   import { StatusDot } from '$lib/theme';
+  import { t } from '$lib/i18n';
 </script>
 
 <footer
@@ -12,19 +14,21 @@
 >
   {#if $lastError}
     <span class="min-w-0 truncate text-status-crit">{$lastError}</span>
+  {:else if $streamerMode}
+    <span class="min-w-0 truncate text-accent">{$t('statusbar.streamer_active')}</span>
   {:else}
-    <span class="min-w-0 truncate">Ready</span>
+    <span class="min-w-0 truncate">{$t('statusbar.ready')}</span>
   {/if}
   <div class="flex shrink-0 items-center gap-3">
-    <span>{$hostSummary.total} {$hostSummary.total === 1 ? 'host' : 'hosts'}</span>
+    <span>{$hostSummary.total} {$hostSummary.total === 1 ? $t('statusbar.host_singular') : $t('statusbar.host_plural')}</span>
     <span class="flex items-center gap-1.5">
-      <StatusDot status="ok" label="online" />{$hostSummary.online} online
+      <StatusDot status="ok" label={$t('statusbar.online')} />{$hostSummary.online} {$t('statusbar.online')}
     </span>
     <span class="flex items-center gap-1.5">
-      <StatusDot status="warn" label="alert" />{$hostSummary.alert} alert
+      <StatusDot status="warn" label={$t('statusbar.alert')} />{$hostSummary.alert} {$t('statusbar.alert')}
     </span>
     <span class="flex items-center gap-1.5">
-      <StatusDot status="off" label="offline" />{$hostSummary.offline} offline
+      <StatusDot status="off" label={$t('statusbar.offline')} />{$hostSummary.offline} {$t('statusbar.offline')}
     </span>
   </div>
 </footer>
diff --git a/crates/omnyssh-gui/ui/src/lib/components/SupportModal.svelte b/crates/omnyssh-gui/ui/src/lib/components/SupportModal.svelte
index af34a4f..b614322 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/SupportModal.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/SupportModal.svelte
@@ -11,23 +11,35 @@
   import { support } from '$lib/stores/support';
   import { openExternal } from '$lib/ipc/openExternal';
   import { lastError } from '$lib/stores/notifications';
+  import { t, locale } from '$lib/i18n';
 
-  type Link = { icon: IconName; title: string; locator: string; url: string };
+  type Link = { icon: IconName; titleKey: 'support.star_title' | 'support.telegram_title'; locator: string; url: string };
 
-  const links: Link[] = [
-    {
-      icon: 'star',
-      title: 'Star it on GitHub',
-      locator: 'github.com/timhartmann7/omnyssh',
-      url: 'https://github.com/timhartmann7/omnyssh'
-    },
-    {
-      icon: 'telegram',
-      title: 'Follow on Telegram',
-      locator: '@timhartmanndev',
-      url: 'https://t.me/timhartmanndev'
-    }
-  ];
+  const links = $derived<Link[]>(
+    $locale === 'zh-CN'
+      ? [
+          {
+            icon: 'star',
+            titleKey: 'support.star_title',
+            locator: 'github.com/timhartmann7/omnyssh',
+            url: 'https://github.com/timhartmann7/omnyssh'
+          }
+        ]
+      : [
+          {
+            icon: 'star',
+            titleKey: 'support.star_title',
+            locator: 'github.com/timhartmann7/omnyssh',
+            url: 'https://github.com/timhartmann7/omnyssh'
+          },
+          {
+            icon: 'telegram',
+            titleKey: 'support.telegram_title',
+            locator: '@timhartmanndev',
+            url: 'https://t.me/timhartmanndev'
+          }
+        ]
+  );
 
   async function go(url: string): Promise<void> {
     try {
@@ -38,13 +50,13 @@
   }
 </script>
 
-<Modal label="Support OmnySSH" onClose={support.close}>
+<Modal label={$t('support.title')} onClose={support.close}>
   <div class="relative p-6">
     <button
       type="button"
       class="absolute right-4 top-4 rounded-full p-1.5 text-muted transition hover:bg-surface-inset hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
-      title="Close"
-      aria-label="Close"
+      title={$t('common.close')}
+      aria-label={$t('common.close')}
       onclick={support.close}
     >
       <Icon name="close" size={16} />
@@ -56,15 +68,14 @@
     </div>
 
     <h2 class="text-xl font-light leading-snug">
-      Free and <span class="font-bold">open source</span>, forever.
+      {$t('support.headline_prefix')}<span class="font-bold">{$t('support.headline_highlight')}</span>{$t('support.headline_suffix')}
     </h2>
     <p class="mt-3 text-sm leading-relaxed text-muted">
-      No paid tiers, no ads, no upsells. I build OmnySSH in the open and I do not plan to
-      monetize it.
+      {$t('support.body')}
     </p>
 
     <p class="mt-5 text-[11px] font-medium uppercase tracking-[0.18em] text-faint">
-      Two small things help it grow
+      {$locale === 'zh-CN' ? $t('support.support_ways') : $t('support.two_things')}
     </p>
 
     <div class="mt-2.5 space-y-2.5">
@@ -80,7 +91,7 @@
             <Icon name={link.icon} />
           </span>
           <span class="min-w-0 flex-1">
-            <span class="block text-sm font-medium">{link.title}</span>
+            <span class="block text-sm font-medium">{$t(link.titleKey)}</span>
             <span class="block truncate font-mono text-xs text-muted">{link.locator}</span>
           </span>
           <span
@@ -91,8 +102,10 @@
       {/each}
     </div>
 
-    <p class="mt-4 text-xs leading-relaxed text-faint">
-      Telegram is where I post release notes and the rest of what I build.
-    </p>
+    {#if $locale !== 'zh-CN'}
+      <p class="mt-4 text-xs leading-relaxed text-faint">
+        {$t('support.telegram_desc')}
+      </p>
+    {/if}
   </div>
 </Modal>
diff --git a/crates/omnyssh-gui/ui/src/lib/components/UpdateBanner.svelte b/crates/omnyssh-gui/ui/src/lib/components/UpdateBanner.svelte
index 9a3a647..3a9ca1d 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/UpdateBanner.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/components/UpdateBanner.svelte
@@ -10,6 +10,7 @@
   import { loadUpdateConfig, saveUpdateConfig } from '$lib/ipc/commands';
   import { openExternal } from '$lib/ipc/openExternal';
   import { lastError } from '$lib/stores/notifications';
+  import { t } from '$lib/i18n';
 
   const message = (e: unknown): string => (e instanceof Error ? e.message : String(e));
   let busy = $state(false);
@@ -49,8 +50,8 @@
     >
       <span class="shrink-0 text-muted"><Icon name="download" size={18} /></span>
       <div class="min-w-0">
-        <p class="text-sm font-medium">Update available — v{info.version}</p>
-        <p class="truncate text-xs text-muted">A newer OmnySSH release is ready.</p>
+        <p class="text-sm font-medium">{$t('update_banner.available', { version: info.version })}</p>
+        <p class="truncate text-xs text-muted">{$t('update_banner.desc')}</p>
       </div>
       <div class="ml-auto flex shrink-0 items-center gap-1.5">
         <button
@@ -59,7 +60,7 @@
           disabled={busy}
           onclick={() => download(info.url)}
         >
-          Download
+          {$t('update_banner.download')}
         </button>
         <button
           type="button"
@@ -67,13 +68,13 @@
           disabled={busy}
           onclick={() => skip(info.version)}
         >
-          Skip
+          {$t('update_banner.skip')}
         </button>
         <button
           type="button"
           class="grid h-8 w-8 place-items-center rounded-full text-muted transition hover:bg-surface-inset hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
-          title="Dismiss"
-          aria-label="Dismiss update notice"
+          title={$t('update_banner.dismiss')}
+          aria-label={$t('update_banner.dismiss')}
           onclick={dismissUpdate}
         >
           <Icon name="close" size={15} />
diff --git a/crates/omnyssh-gui/ui/src/lib/components/select.test.ts b/crates/omnyssh-gui/ui/src/lib/components/select.test.ts
index 5be5f1e..7572062 100644
--- a/crates/omnyssh-gui/ui/src/lib/components/select.test.ts
+++ b/crates/omnyssh-gui/ui/src/lib/components/select.test.ts
@@ -23,7 +23,9 @@ describe('select controls', () => {
     expect(files.length).toBeGreaterThan(0);
 
     const offenders = files.filter(
-      (file) => !file.endsWith(COMPONENT) && readFileSync(file, 'utf8').includes('<select')
+      (file) =>
+        !file.replaceAll('\\', '/').endsWith(COMPONENT) &&
+        readFileSync(file, 'utf8').includes('<select')
     );
     expect(offenders).toEqual([]);
   });
diff --git a/crates/omnyssh-gui/ui/src/lib/demo/demoData.ts b/crates/omnyssh-gui/ui/src/lib/demo/demoData.ts
new file mode 100644
index 0000000..5e5e1b5
--- /dev/null
+++ b/crates/omnyssh-gui/ui/src/lib/demo/demoData.ts
@@ -0,0 +1,203 @@
+import type { HostDto, ConnectionStatusDto, MetricsDto } from '$lib/bindings';
+import { hosts } from '$lib/stores/hosts';
+import { statuses } from '$lib/stores/statuses';
+import { metrics } from '$lib/stores/metrics';
+import { services, type HostServices } from '$lib/stores/services';
+import { sessions } from '$lib/stores/sessions';
+
+export const DEMO_HOSTS: HostDto[] = [
+  {
+    name: 'prod-web-1',
+    hostname: '10.0.1.12',
+    port: 22,
+    user: 'deploy',
+    tags: ['prod', 'web'],
+    source: 'manual',
+    hasKey: true,
+    passwordAuthDisabled: true,
+    monitoring: 'ssh'
+  },
+  {
+    name: 'prod-db-primary',
+    hostname: '10.0.1.20',
+    port: 22,
+    user: 'postgres',
+    tags: ['prod', 'db'],
+    source: 'sshConfig',
+    hasKey: true,
+    passwordAuthDisabled: false,
+    monitoring: 'ssh'
+  },
+  {
+    name: 'staging-api',
+    hostname: '192.168.1.105',
+    port: 2222,
+    user: 'ubuntu',
+    tags: ['staging'],
+    source: 'manual',
+    hasKey: true,
+    passwordAuthDisabled: false,
+    monitoring: 'ssh'
+  },
+  {
+    name: 'cache-cluster-1',
+    hostname: '10.0.2.15',
+    port: 22,
+    user: 'root',
+    tags: ['redis', 'cluster'],
+    source: 'manual',
+    hasKey: true,
+    passwordAuthDisabled: true,
+    monitoring: 'ssh'
+  },
+  {
+    name: 'backup-node-eu',
+    hostname: '198.51.100.42',
+    port: 22,
+    user: 'backup',
+    tags: ['backup', 'eu'],
+    source: 'manual',
+    hasKey: true,
+    passwordAuthDisabled: false,
+    monitoring: 'ssh'
+  },
+  {
+    name: 'monitoring-edge',
+    hostname: '10.0.99.1',
+    port: 22,
+    user: 'admin',
+    tags: ['monitoring'],
+    source: 'manual',
+    hasKey: true,
+    passwordAuthDisabled: false,
+    monitoring: 'tcpPort',
+    monitorPort: 9100
+  }
+];
+
+export function seedDemoData(): void {
+  hosts.set(DEMO_HOSTS);
+
+  const statusMap = new Map<string, ConnectionStatusDto>();
+  DEMO_HOSTS.forEach((h) => statusMap.set(h.name, { kind: 'connected' }));
+  statuses.set(statusMap);
+
+  const metricsMap = new Map<string, MetricsDto>();
+  metricsMap.set('prod-web-1', {
+    cpuPercent: 12,
+    ramPercent: 48,
+    diskPercent: 62,
+    uptime: '42d 18h',
+    loadAvg: '0.35, 0.42, 0.38',
+    osInfo: 'Ubuntu 24.04.1 LTS',
+    topProcesses: [
+      { name: 'nginx', cpuPercent: 6.2, memPercent: 1.2 },
+      { name: 'node', cpuPercent: 4.8, memPercent: 3.5 }
+    ],
+    ageSeconds: 2
+  });
+
+  metricsMap.set('prod-db-primary', {
+    cpuPercent: 28,
+    ramPercent: 76,
+    diskPercent: 41,
+    uptime: '118d 04h',
+    loadAvg: '1.20, 0.95, 0.88',
+    osInfo: 'Debian 12.7 (bookworm)',
+    topProcesses: [
+      { name: 'postgres', cpuPercent: 22.4, memPercent: 18.2 },
+      { name: 'wal-g', cpuPercent: 4.1, memPercent: 0.8 }
+    ],
+    ageSeconds: 1
+  });
+
+  metricsMap.set('staging-api', {
+    cpuPercent: 5,
+    ramPercent: 32,
+    diskPercent: 22,
+    uptime: '14d 06h',
+    loadAvg: '0.10, 0.15, 0.12',
+    osInfo: 'Ubuntu 22.04.4 LTS',
+    topProcesses: [
+      { name: 'api-server', cpuPercent: 3.5, memPercent: 4.2 },
+      { name: 'docker-proxy', cpuPercent: 1.2, memPercent: 0.5 }
+    ],
+    ageSeconds: 3
+  });
+
+  metricsMap.set('cache-cluster-1', {
+    cpuPercent: 3,
+    ramPercent: 18,
+    diskPercent: 15,
+    uptime: '89d 21h',
+    loadAvg: '0.05, 0.08, 0.06',
+    osInfo: 'Alpine Linux 3.19',
+    topProcesses: [{ name: 'redis-server', cpuPercent: 2.8, memPercent: 2.1 }],
+    ageSeconds: 2
+  });
+
+  metricsMap.set('backup-node-eu', {
+    cpuPercent: 88,
+    ramPercent: 24,
+    diskPercent: 82,
+    uptime: '310d 12h',
+    loadAvg: '2.80, 2.40, 2.10',
+    osInfo: 'Debian 12.5',
+    topProcesses: [
+      { name: 'borg', cpuPercent: 82.0, memPercent: 4.1 },
+      { name: 'restic', cpuPercent: 5.1, memPercent: 1.2 }
+    ],
+    ageSeconds: 1
+  });
+
+  metrics.set(metricsMap);
+
+  const servicesMap = new Map<string, HostServices>();
+  servicesMap.set('prod-web-1', {
+    kind: 'detected',
+    services: [
+      {
+        kind: 'docker',
+        metrics: [
+          { name: 'containers_total', value: 4 },
+          { name: 'containers_running', value: 4 }
+        ]
+      },
+      { kind: 'nginx', metrics: [] }
+    ]
+  });
+
+  servicesMap.set('prod-db-primary', {
+    kind: 'detected',
+    services: [
+      { kind: 'postgresql', metrics: [] },
+      { kind: 'redis', metrics: [] }
+    ]
+  });
+
+  servicesMap.set('staging-api', {
+    kind: 'detected',
+    services: [
+      {
+        kind: 'docker',
+        metrics: [
+          { name: 'containers_total', value: 2 },
+          { name: 'containers_running', value: 2 }
+        ]
+      }
+    ]
+  });
+
+  servicesMap.set('cache-cluster-1', {
+    kind: 'detected',
+    services: [{ kind: 'redis', metrics: [] }]
+  });
+
+  services.set(servicesMap);
+
+  // Seed sample sessions in sidebar
+  sessions.set([
+    { id: 1, kind: 'terminal', hostName: 'prod-web-1', status: 'connected' },
+    { id: 2, kind: 'sftp', hostName: 'prod-db-primary', status: 'connected' }
+  ]);
+}
diff --git a/crates/omnyssh-gui/ui/src/lib/i18n/i18n.test.ts b/crates/omnyssh-gui/ui/src/lib/i18n/i18n.test.ts
new file mode 100644
index 0000000..d2f4d21
--- /dev/null
+++ b/crates/omnyssh-gui/ui/src/lib/i18n/i18n.test.ts
@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { describe, expect, it, beforeEach } from 'vitest';
+import { get } from 'svelte/store';
+import { locale, t, translate, SUPPORTED_LOCALES } from './index';
+
+describe('i18n module', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('supports zh-CN and en locales', () => {
+    expect(SUPPORTED_LOCALES).toHaveLength(2);
+    expect(SUPPORTED_LOCALES.map((l) => l.code)).toEqual(['zh-CN', 'en']);
+  });
+
+  it('translates basic keys in zh-CN and en', () => {
+    expect(translate('zh-CN', 'dashboard.title')).toBe('仪表盘');
+    expect(translate('en', 'dashboard.title')).toBe('Dashboard');
+  });
+
+  it('interpolates parameters correctly', () => {
+    expect(translate('zh-CN', 'dashboard.no_match', { query: 'test-server' })).toBe(
+      '没有匹配 “test-server” 的主机。'
+    );
+    expect(translate('en', 'dashboard.no_match', { query: 'test-server' })).toBe(
+      'No hosts match “test-server”.'
+    );
+  });
+
+  it('reactive t store reflects locale changes', () => {
+    locale.set('zh-CN');
+    expect(get(locale)).toBe('zh-CN');
+    const translateFnZh = get(t);
+    expect(translateFnZh('sidebar.dashboard')).toBe('仪表盘');
+
+    locale.set('en');
+    expect(get(locale)).toBe('en');
+    const translateFnEn = get(t);
+    expect(translateFnEn('sidebar.dashboard')).toBe('Dashboard');
+  });
+});
diff --git a/crates/omnyssh-gui/ui/src/lib/i18n/index.ts b/crates/omnyssh-gui/ui/src/lib/i18n/index.ts
new file mode 100644
index 0000000..5a5b7d6
--- /dev/null
+++ b/crates/omnyssh-gui/ui/src/lib/i18n/index.ts
@@ -0,0 +1,128 @@
+import { writable, derived, get } from 'svelte/store';
+import { en, type TranslationKey } from './locales/en';
+import { zhCN } from './locales/zh-CN';
+
+export type Locale = 'zh-CN' | 'en';
+
+export interface LocaleOption {
+  code: Locale;
+  label: string;
+}
+
+export const SUPPORTED_LOCALES: LocaleOption[] = [
+  { code: 'zh-CN', label: '简体中文' },
+  { code: 'en', label: 'English' }
+];
+
+const LOCAL_KEY = 'omnyssh-locale';
+const STORE_FILE = 'settings.json';
+const STORE_KEY = 'locale';
+
+const dictionaries: Record<Locale, Record<TranslationKey, string>> = {
+  'zh-CN': zhCN,
+  'en': en
+};
+
+function detectInitialLocale(): Locale {
+  try {
+    const saved = localStorage.getItem(LOCAL_KEY);
+    if (saved === 'zh-CN' || saved === 'en') return saved;
+  } catch {
+    // localStorage unavailable
+  }
+
+  // Fallback to browser/system language
+  if (typeof navigator !== 'undefined' && navigator.language) {
+    if (navigator.language.toLowerCase().startsWith('zh')) {
+      return 'zh-CN';
+    }
+  }
+
+  // Default to zh-CN in the Chinese fork
+  return 'zh-CN';
+}
+
+function mirrorLocal(l: Locale): void {
+  try {
+    localStorage.setItem(LOCAL_KEY, l);
+  } catch {
+    // Ignored in hardened webviews
+  }
+}
+
+async function persistStore(l: Locale): Promise<void> {
+  try {
+    const { load } = await import('@tauri-apps/plugin-store');
+    const store = await load(STORE_FILE);
+    await store.set(STORE_KEY, l);
+    await store.save();
+  } catch {
+    // Non-Tauri environment (e.g. tests)
+  }
+}
+
+export function translate(
+  currentLocale: Locale,
+  key: TranslationKey,
+  params?: Record<string, string | number>
+): string {
+  const dict = dictionaries[currentLocale] || dictionaries['zh-CN'];
+  let text: string = dict[key] || dictionaries['en'][key] || key;
+
+  if (params) {
+    for (const [paramKey, value] of Object.entries(params)) {
+      text = text.replaceAll(`{${paramKey}}`, String(value));
+    }
+  }
+
+  return text;
+}
+
+function createLocaleStore() {
+  const initial = detectInitialLocale();
+  const { subscribe, set: setStore } = writable<Locale>(initial);
+  let current = initial;
+  let interacted = false;
+
+  function apply(nextLocale: Locale, userInitiated: boolean): void {
+    current = nextLocale;
+    setStore(nextLocale);
+    mirrorLocal(nextLocale);
+    if (userInitiated) {
+      interacted = true;
+      void persistStore(nextLocale);
+    }
+  }
+
+  return {
+    subscribe,
+    set: (nextLocale: Locale) => apply(nextLocale, true),
+    get: () => current,
+    async hydrate(): Promise<void> {
+      try {
+        const { load } = await import('@tauri-apps/plugin-store');
+        const store = await load(STORE_FILE);
+        const saved = await store.get<string>(STORE_KEY);
+        if (!interacted && (saved === 'zh-CN' || saved === 'en')) {
+          apply(saved as Locale, false);
+        }
+      } catch {
+        // Store unreachable
+      }
+    }
+  };
+}
+
+export const locale = createLocaleStore();
+
+/**
+ * Derived reactive translation function.
+ * Usage in Svelte: `{$t('dashboard.title')}` or `{$t('dashboard.no_match', { query })}`
+ */
+export const t = derived(
+  locale,
+  ($locale) => (key: TranslationKey, params?: Record<string, string | number>) =>
+    translate($locale, key, params)
+);
+
+export type { TranslationKey };
diff --git a/crates/omnyssh-gui/ui/src/lib/i18n/locales/en.ts b/crates/omnyssh-gui/ui/src/lib/i18n/locales/en.ts
new file mode 100644
index 0000000..dfb1972
--- /dev/null
+++ b/crates/omnyssh-gui/ui/src/lib/i18n/locales/en.ts
@@ -0,0 +1,244 @@
+export const en = {
+  // Sidebar
+  'sidebar.dashboard': 'Dashboard',
+  'sidebar.snippets': 'Snippets',
+  'sidebar.sftp': 'SFTP',
+  'sidebar.terminal': 'Terminal',
+  'sidebar.expand': 'Expand sidebar (⌘B)',
+  'sidebar.collapse': 'Collapse sidebar (⌘B)',
+  'sidebar.sessions': 'Sessions',
+  'sidebar.palette': 'Command Palette (⌘K)',
+  'sidebar.settings': 'Settings',
+  'sidebar.support': 'Support OmnySSH',
+  'sidebar.close_session': 'Close session',
+
+  // Status Bar
+  'statusbar.ready': 'Ready',
+  'statusbar.connecting': 'connecting',
+  'statusbar.online': 'online',
+  'statusbar.alert': 'alert',
+  'statusbar.degraded': 'degraded',
+  'statusbar.offline': 'offline',
+  'statusbar.host_singular': 'host',
+  'statusbar.host_plural': 'hosts',
+  'statusbar.streamer_active': 'Streamer mode active — hostnames redacted',
+
+  // Command Palette
+  'palette.pick_host_placeholder': 'Pick a host…',
+  'palette.search_placeholder': 'Search hosts and sessions…',
+  'palette.no_matching_hosts': 'No matching hosts.',
+  'palette.no_hosts_configured': 'No hosts configured.',
+  'palette.no_matches': 'No matches.',
+  'palette.no_hosts_or_sessions': 'No hosts or sessions yet.',
+  'palette.sessions': 'Sessions',
+  'palette.hosts': 'Hosts',
+  'palette.shortcuts': '↑↓ to navigate · ↵ to select · esc to close',
+
+  // Dashboard
+  'dashboard.title': 'Dashboard',
+  'dashboard.search_placeholder': 'Search hosts…',
+  'dashboard.close_search': 'Close search',
+  'dashboard.search_hosts': 'Search hosts',
+  'dashboard.refresh_metrics': 'Refresh metrics (R)',
+  'dashboard.add_host': 'Add host',
+  'dashboard.no_servers': 'No servers yet',
+  'dashboard.no_servers_desc': 'Add a host, or import one from your SSH config, to see it here.',
+  'dashboard.no_match': 'No hosts match “{query}”.',
+  'dashboard.ssh_config_badge': 'ssh config',
+  'dashboard.ssh_config_title': 'Imported from ~/.ssh/config — editing saves your own copy, which takes priority',
+  'dashboard.key_only_badge': 'key-only',
+  'dashboard.key_only_title': 'Password authentication disabled — key only',
+  'dashboard.key_badge': 'key',
+  'dashboard.key_title': 'Key authentication configured',
+  'dashboard.quick_sh': 'Terminal',
+  'dashboard.quick_files': 'SFTP',
+  'dashboard.setup_key_title': 'Set up an SSH key for {name}',
+  'dashboard.edit_host_title': 'Edit {name}',
+  'dashboard.delete_host_title': 'Delete {name}',
+  'dashboard.offline': 'offline',
+  'dashboard.up': 'up {uptime}',
+  'dashboard.service_scan_unavailable': 'Service scan unavailable',
+  'dashboard.reachable': 'reachable',
+  'dashboard.unreachable': 'unreachable',
+  'dashboard.checking': 'checking',
+  'dashboard.port_label': 'port {port}',
+  'dashboard.metric_cpu': 'CPU',
+  'dashboard.metric_ram': 'RAM',
+  'dashboard.metric_disk': 'Disk',
+  'dashboard.docker_no_containers': 'no containers',
+  'dashboard.docker_running': '{running}/{total} running',
+  'dashboard.delete_host': 'Delete host',
+  'dashboard.delete_confirm': 'Delete “{name}”? This removes it from hosts.toml. If your SSH config defines the same name, it comes back as an import.',
+  'dashboard.cancel': 'Cancel',
+  'dashboard.delete': 'Delete',
+
+  // Host Editor
+  'host_editor.add_title': 'Add host',
+  'host_editor.edit_title': 'Edit host',
+  'host_editor.imported_notice': 'Imported from ~/.ssh/config. Saving keeps your own copy in hosts.toml and OmnySSH uses it from then on — your SSH config file is never written, and later edits to it stop showing up for this host.',
+  'host_editor.name': 'Name',
+  'host_editor.name_fixed': 'Name (fixed)',
+  'host_editor.name_fixed_title': 'To rename, delete this host and add it again',
+  'host_editor.hostname': 'Host / IP',
+  'host_editor.port': 'Port',
+  'host_editor.user': 'User',
+  'host_editor.password': 'Password',
+  'host_editor.identity_file': 'Key file path',
+  'host_editor.passphrase': 'Key passphrase',
+  'host_editor.tags': 'Tags (comma-separated)',
+  'host_editor.notes': 'Notes',
+  'host_editor.notes_placeholder': 'Optional',
+  'host_editor.monitoring': 'Monitoring',
+  'host_editor.monitoring_ssh': 'SSH metrics',
+  'host_editor.monitoring_tcp': 'TCP port check',
+  'host_editor.monitor_port': 'Monitor TCP port (optional)',
+  'host_editor.tcp_port_hint': 'Checks the port only — no login, and no metrics on the card.',
+  'host_editor.secret_hint': 'Leave blank to keep the current value',
+  'host_editor.save': 'Save host',
+  'host_editor.saving': 'Saving…',
+  'host_editor.cancel': 'Cancel',
+
+  // Snippets
+  'snippets.title': 'Snippets',
+  'snippets.search_placeholder': 'Search snippets…',
+  'snippets.add_snippet': 'New snippet',
+  'snippets.no_snippets': 'No snippets yet',
+  'snippets.no_snippets_desc': 'Save shell commands you run regularly across one or more hosts.',
+  'snippets.no_match': 'No snippets match “{query}”.',
+  'snippets.run': 'Run',
+  'snippets.edit': 'Edit',
+  'snippets.delete': 'Delete',
+  'snippets.delete_title': 'Delete snippet',
+  'snippets.delete_confirm': 'Delete “{name}”? This removes it from snippets.toml.',
+  'snippets.cancel': 'Cancel',
+
+  // Snippet Editor
+  'snippet_editor.add_title': 'New snippet',
+  'snippet_editor.edit_title': 'Edit snippet',
+  'snippet_editor.name': 'Name',
+  'snippet_editor.command': 'Command',
+  'snippet_editor.scope': 'Scope',
+  'snippet_editor.scope_global': 'global',
+  'snippet_editor.scope_host': 'host',
+  'snippet_editor.host': 'Host',
+  'snippet_editor.host_required': 'Host (required)',
+  'snippet_editor.host_optional': 'Host (optional)',
+  'snippet_editor.description': 'Description (optional)',
+  'snippet_editor.tags': 'Tags (comma-separated)',
+  'snippet_editor.save': 'Save snippet',
+  'snippet_editor.saving': 'Saving…',
+  'snippet_editor.cancel': 'Cancel',
+
+  // Snippet Runner
+  'snippet_runner.title': 'Run “{name}”',
+  'snippet_runner.parameters': 'Parameters',
+  'snippet_runner.target_hosts': 'Run on {selected} of {total}',
+  'snippet_runner.no_hosts': 'No hosts configured.',
+  'snippet_runner.run': 'Run on {count} {hosts}',
+  'snippet_runner.host_singular': 'host',
+  'snippet_runner.host_plural': 'hosts',
+  'snippet_runner.cancel': 'Cancel',
+
+  // Snippet Results
+  'snippet_results.title': 'Results — “{name}”',
+  'snippet_results.running': 'Running…',
+  'snippet_results.no_output': '(no output)',
+  'snippet_results.close': 'Close',
+
+  // SFTP
+  'sftp.local': 'Local',
+  'sftp.remote': 'Remote',
+  'sftp.upload': 'Upload',
+  'sftp.upload_tooltip': 'Upload marked files to the remote directory',
+  'sftp.download': 'Download',
+  'sftp.download_tooltip': 'Download marked files to the local directory',
+  'sftp.new_folder': 'Folder',
+  'sftp.rename': 'Rename',
+  'sftp.delete': 'Delete',
+  'sftp.refresh': 'Refresh',
+  'sftp.loading': 'Loading…',
+  'sftp.empty_directory': 'Empty directory',
+  'sftp.uploading': 'Uploading',
+  'sftp.downloading': 'Downloading',
+  'sftp.open_failed': 'Could not open SFTP on {name}',
+  'sftp.connecting': 'Connecting to {name}…',
+  'sftp.modal_new_folder': 'New folder',
+  'sftp.modal_rename': 'Rename {name}',
+  'sftp.folder_name_placeholder': 'Folder name',
+  'sftp.new_name_placeholder': 'New name',
+  'sftp.create': 'Create',
+  'sftp.cancel': 'Cancel',
+  'sftp.file_preview': 'File preview',
+  'sftp.empty_file': 'Empty file.',
+  'sftp.close': 'Close',
+
+  // Terminal
+  'terminal.reconnect': 'Reconnect',
+  'terminal.clear': 'Clear',
+
+  // Key Setup
+  'keysetup.title': 'SSH key setup — {name}',
+  'keysetup.connecting': 'Connecting…',
+  'keysetup.explainer': 'Generating a key, authorising it on the server, and — with sudo — disabling password auth. Password auth is never disabled before key auth is verified.',
+  'keysetup.success_title': 'Key authentication configured',
+  'keysetup.failed_title': 'Key setup failed',
+  'keysetup.failed_hint': 'Password authentication was not changed.',
+  'keysetup.rollback_title': 'Rolled back',
+  'keysetup.rollback_hint': 'The server’s password authentication was restored.',
+  'keysetup.done': 'Done',
+  'keysetup.close': 'Close',
+
+  // Settings
+  'settings.title': 'Settings',
+  'settings.appearance': 'Appearance',
+  'settings.theme': 'Theme',
+  'settings.theme_desc': 'Mirrors the toggle in the sidebar.',
+  'settings.theme_light': 'Light',
+  'settings.theme_dark': 'Dark',
+  'settings.language': 'Language / 界面语言',
+  'settings.language_desc': 'Choose the display language for the application.',
+  'settings.streamer_mode': 'Streamer mode',
+  'settings.streamer_mode_desc': 'Mask hostnames and IPs on screen for streaming or screen shares.',
+  'settings.streamer_mode_active': 'Active',
+  'settings.streamer_mode_inactive': 'Inactive',
+  'settings.metrics_refresh': 'Metrics refresh interval',
+  'settings.metrics_refresh_desc': 'How often the background worker polls each host for metrics.',
+  'settings.updates': 'Updates',
+  'settings.check_startup': 'Check on startup',
+  'settings.check_startup_desc': 'Check for new releases in the background when the app starts.',
+  'settings.check_now': 'Check now',
+  'settings.checking': 'Checking…',
+  'settings.up_to_date': 'Up to date.',
+  'settings.update_available': 'Update available: v{version}',
+  'settings.download': 'Download',
+
+  // Update Banner
+  'update_banner.available': 'Update available — v{version}',
+  'update_banner.desc': 'A newer OmnySSH release is ready.',
+  'update_banner.download': 'Download',
+  'update_banner.skip': 'Skip',
+  'update_banner.dismiss': 'Dismiss',
+
+  // Support Modal
+  'support.title': 'Support OmnySSH',
+  'support.headline_prefix': 'Free and ',
+  'support.headline_highlight': 'open source',
+  'support.headline_suffix': ', forever.',
+  'support.body': 'No paid tiers, no ads, no upsells. I build OmnySSH in the open and I do not plan to monetize it.',
+  'support.two_things': 'Two small things help it grow',
+  'support.support_ways': 'Two small things help it grow',
+  'support.star_title': 'Star it on GitHub',
+  'support.telegram_title': 'Follow on Telegram',
+  'support.telegram_desc': 'Telegram is where I post release notes and the rest of what I build.',
+
+  // Common
+  'common.close': 'Close',
+  'common.cancel': 'Cancel',
+  'common.save': 'Save',
+  'common.delete': 'Delete',
+  'common.confirm': 'Confirm',
+  'common.loading': 'Loading…',
+  'common.error': 'Error'
+} as const;
+
+export type TranslationKey = keyof typeof en;
diff --git a/crates/omnyssh-gui/ui/src/lib/i18n/locales/zh-CN.ts b/crates/omnyssh-gui/ui/src/lib/i18n/locales/zh-CN.ts
new file mode 100644
index 0000000..9b7a1bd
--- /dev/null
+++ b/crates/omnyssh-gui/ui/src/lib/i18n/locales/zh-CN.ts
@@ -0,0 +1,244 @@
+import type { TranslationKey } from './en';
+
+export const zhCN: Record<TranslationKey, string> = {
+  // Sidebar
+  'sidebar.dashboard': '仪表盘',
+  'sidebar.snippets': '命令片段',
+  'sidebar.sftp': '文件传输 (SFTP)',
+  'sidebar.terminal': '终端',
+  'sidebar.expand': '展开侧边栏 (⌘B)',
+  'sidebar.collapse': '折叠侧边栏 (⌘B)',
+  'sidebar.sessions': '活动会话',
+  'sidebar.palette': '命令面板 (⌘K)',
+  'sidebar.settings': '设置',
+  'sidebar.support': '支持 OmnySSH',
+  'sidebar.close_session': '关闭会话',
+
+  // Status Bar
+  'statusbar.ready': '就绪',
+  'statusbar.connecting': '正在连接',
+  'statusbar.online': '在线',
+  'statusbar.alert': '告警',
+  'statusbar.degraded': '降级',
+  'statusbar.offline': '离线',
+  'statusbar.host_singular': '台主机',
+  'statusbar.host_plural': '台主机',
+  'statusbar.streamer_active': '主播模式已开启 —— 主机名已脱敏',
+
+  // Command Palette
+  'palette.pick_host_placeholder': '选择主机…',
+  'palette.search_placeholder': '搜索主机与会话…',
+  'palette.no_matching_hosts': '未找到匹配的主机。',
+  'palette.no_hosts_configured': '尚未配置任何主机。',
+  'palette.no_matches': '无匹配项。',
+  'palette.no_hosts_or_sessions': '暂无主机或会话。',
+  'palette.sessions': '会话',
+  'palette.hosts': '主机',
+  'palette.shortcuts': '↑↓ 导航 · ↵ 选择 · esc 关闭',
+
+  // Dashboard
+  'dashboard.title': '仪表盘',
+  'dashboard.search_placeholder': '搜索主机…',
+  'dashboard.close_search': '关闭搜索',
+  'dashboard.search_hosts': '搜索主机',
+  'dashboard.refresh_metrics': '刷新指标 (R)',
+  'dashboard.add_host': '添加主机',
+  'dashboard.no_servers': '暂无服务器',
+  'dashboard.no_servers_desc': '添加主机，或从 ~/.ssh/config 导入以在此处查看。',
+  'dashboard.no_match': '没有匹配 “{query}” 的主机。',
+  'dashboard.ssh_config_badge': 'ssh 配置',
+  'dashboard.ssh_config_title': '从 ~/.ssh/config 导入 —— 编辑将保存独立副本并优先使用',
+  'dashboard.key_only_badge': '仅密钥',
+  'dashboard.key_only_title': '密码认证已禁用 —— 仅允许密钥登录',
+  'dashboard.key_badge': '密钥',
+  'dashboard.key_title': '已配置密钥认证',
+  'dashboard.quick_sh': '终端',
+  'dashboard.quick_files': 'SFTP',
+  'dashboard.setup_key_title': '为 {name} 自动配置 SSH 密钥',
+  'dashboard.edit_host_title': '编辑主机 {name}',
+  'dashboard.delete_host_title': '删除主机 {name}',
+  'dashboard.offline': '离线',
+  'dashboard.up': '已运行 {uptime}',
+  'dashboard.service_scan_unavailable': '服务扫描不可用',
+  'dashboard.reachable': '可达',
+  'dashboard.unreachable': '不可达',
+  'dashboard.checking': '检查中…',
+  'dashboard.port_label': '端口 {port}',
+  'dashboard.metric_cpu': 'CPU',
+  'dashboard.metric_ram': '内存',
+  'dashboard.metric_disk': '磁盘',
+  'dashboard.docker_no_containers': '无容器运行',
+  'dashboard.docker_running': '{running}/{total} 运行中',
+  'dashboard.delete_host': '删除主机',
+  'dashboard.delete_confirm': '确定要删除主机 “{name}” 吗？这将从 hosts.toml 中移除。如果你的 SSH 配置文件中定义了同名主机，它将作为导入项重新出现。',
+  'dashboard.cancel': '取消',
+  'dashboard.delete': '删除',
+
+  // Host Editor
+  'host_editor.add_title': '添加主机',
+  'host_editor.edit_title': '编辑主机',
+  'host_editor.imported_notice': '从 ~/.ssh/config 导入。保存后将在 hosts.toml 中保留独立副本供 OmnySSH 使用 —— 原 SSH 配置文件不会被修改，后续对其更改不会再同步到此主机。',
+  'host_editor.name': '主机标识',
+  'host_editor.name_fixed': '主机标识 (不可变)',
+  'host_editor.name_fixed_title': '若需重命名，请删除此主机后重新添加',
+  'host_editor.hostname': '主机地址 / IP',
+  'host_editor.port': '端口',
+  'host_editor.user': '登录用户名',
+  'host_editor.password': '密码',
+  'host_editor.identity_file': '私钥文件路径',
+  'host_editor.passphrase': '私钥密码 (Passphrase)',
+  'host_editor.tags': '标签 (英文逗号分隔)',
+  'host_editor.notes': '备注信息',
+  'host_editor.notes_placeholder': '可选备注',
+  'host_editor.monitoring': '健康监测方式',
+  'host_editor.monitoring_ssh': 'SSH 系统指标 (CPU/内存/磁盘)',
+  'host_editor.monitoring_tcp': 'TCP 端口探测 (无登录/轻量)',
+  'host_editor.monitor_port': 'TCP 监控端口 (可选)',
+  'host_editor.tcp_port_hint': '仅探测端口连通性 —— 无需登录，卡片上不采集系统指标。',
+  'host_editor.secret_hint': '留空表示保留当前保存的值',
+  'host_editor.save': '保存主机',
+  'host_editor.saving': '正在保存…',
+  'host_editor.cancel': '取消',
+
+  // Snippets
+  'snippets.title': '命令片段',
+  'snippets.search_placeholder': '搜索命令片段…',
+  'snippets.add_snippet': '新建片段',
+  'snippets.no_snippets': '暂无命令片段',
+  'snippets.no_snippets_desc': '保存常用 Shell 命令，以便跨单个或多个服务器批量运行。',
+  'snippets.no_match': '没有匹配 “{query}” 的片段。',
+  'snippets.run': '运行',
+  'snippets.edit': '编辑',
+  'snippets.delete': '删除',
+  'snippets.delete_title': '删除命令片段',
+  'snippets.delete_confirm': '确定要删除命令片段 “{name}” 吗？这将从 snippets.toml 中永久移除。',
+  'snippets.cancel': '取消',
+
+  // Snippet Editor
+  'snippet_editor.add_title': '新建命令片段',
+  'snippet_editor.edit_title': '编辑命令片段',
+  'snippet_editor.name': '片段名称',
+  'snippet_editor.command': '命令内容',
+  'snippet_editor.scope': '作用域',
+  'snippet_editor.scope_global': '全局 (所有主机)',
+  'snippet_editor.scope_host': '指定主机',
+  'snippet_editor.host': '目标主机',
+  'snippet_editor.host_required': '目标主机 (必填)',
+  'snippet_editor.host_optional': '目标主机 (可选)',
+  'snippet_editor.description': '描述信息 (可选)',
+  'snippet_editor.tags': '标签 (英文逗号分隔)',
+  'snippet_editor.save': '保存片段',
+  'snippet_editor.saving': '正在保存…',
+  'snippet_editor.cancel': '取消',
+
+  // Snippet Runner
+  'snippet_runner.title': '运行片段 “{name}”',
+  'snippet_runner.parameters': '参数配置',
+  'snippet_runner.target_hosts': '在选中的 {selected} / {total} 台主机上运行',
+  'snippet_runner.no_hosts': '未配置任何主机。',
+  'snippet_runner.run': '在 {count} 台主机上执行',
+  'snippet_runner.host_singular': '台主机',
+  'snippet_runner.host_plural': '台主机',
+  'snippet_runner.cancel': '取消',
+
+  // Snippet Results
+  'snippet_results.title': '执行结果 —— “{name}”',
+  'snippet_results.running': '正在执行…',
+  'snippet_results.no_output': '(无输出)',
+  'snippet_results.close': '关闭',
+
+  // SFTP
+  'sftp.local': '本地',
+  'sftp.remote': '远程',
+  'sftp.upload': '上传',
+  'sftp.upload_tooltip': '上传选中文件到远程目录',
+  'sftp.download': '下载',
+  'sftp.download_tooltip': '下载选中文件到本地目录',
+  'sftp.new_folder': '新建文件夹',
+  'sftp.rename': '重命名',
+  'sftp.delete': '删除',
+  'sftp.refresh': '刷新',
+  'sftp.loading': '正在加载…',
+  'sftp.empty_directory': '空文件夹',
+  'sftp.uploading': '正在上传',
+  'sftp.downloading': '正在下载',
+  'sftp.open_failed': '无法在 {name} 上打开 SFTP',
+  'sftp.connecting': '正在连接至 {name}…',
+  'sftp.modal_new_folder': '新建文件夹',
+  'sftp.modal_rename': '重命名 {name}',
+  'sftp.folder_name_placeholder': '文件夹名称',
+  'sftp.new_name_placeholder': '新名称',
+  'sftp.create': '创建',
+  'sftp.cancel': '取消',
+  'sftp.file_preview': '文件预览',
+  'sftp.empty_file': '空文件。',
+  'sftp.close': '关闭',
+
+  // Terminal
+  'terminal.reconnect': '重新连接',
+  'terminal.clear': '清屏',
+
+  // Key Setup
+  'keysetup.title': 'SSH 密钥自动化配置 —— {name}',
+  'keysetup.connecting': '正在连接…',
+  'keysetup.explainer': '自动生成密钥、在服务器上完成授权，并在具备 sudo 权限时禁用密码登录。在密钥认证未完全验证前，绝不会提前禁用密码认证。',
+  'keysetup.success_title': '密钥免密认证配置成功',
+  'keysetup.failed_title': '密钥配置失败',
+  'keysetup.failed_hint': '服务器密码认证配置未被更改。',
+  'keysetup.rollback_title': '已自动回滚',
+  'keysetup.rollback_hint': '服务器密码登录配置已完整恢复。',
+  'keysetup.done': '完成',
+  'keysetup.close': '关闭',
+
+  // Settings
+  'settings.title': '设置',
+  'settings.appearance': '外观界面',
+  'settings.theme': '主题模式',
+  'settings.theme_desc': '与侧边栏快速切换开关同步。',
+  'settings.theme_light': '浅色',
+  'settings.theme_dark': '深色',
+  'settings.language': '界面语言 / Language',
+  'settings.language_desc': '选择应用界面的首选显示语言。',
+  'settings.streamer_mode': '主播 / 隐私模式',
+  'settings.streamer_mode_desc': '在界面中隐藏服务器主机名与 IP 地址，便于直播或屏幕共享。',
+  'settings.streamer_mode_active': '已开启',
+  'settings.streamer_mode_inactive': '未开启',
+  'settings.metrics_refresh': '指标刷新频率',
+  'settings.metrics_refresh_desc': '后台轮询服务器健康状态的时间间隔。',
+  'settings.updates': '版本更新',
+  'settings.check_startup': '启动时自动检查更新',
+  'settings.check_startup_desc': '打开 OmnySSH 时在后台静默检查 GitHub 发行版。',
+  'settings.check_now': '立即检查更新',
+  'settings.checking': '正在检查更新…',
+  'settings.up_to_date': '当前已是最新版本。',
+  'settings.update_available': '发现新版本 v{version} 可用。',
+  'settings.download': '前往下载',
+
+  // Update Banner
+  'update_banner.available': '发现新版本 —— v{version}',
+  'update_banner.desc': '已有更新的 OmnySSH 发行版可供下载。',
+  'update_banner.download': '下载更新',
+  'update_banner.skip': '跳过此版本',
+  'update_banner.dismiss': '稍后提醒',
+
+  // Support Modal
+  'support.title': '支持 OmnySSH',
+  'support.headline_prefix': '永久免费且',
+  'support.headline_highlight': '完全开源',
+  'support.headline_suffix': '。',
+  'support.body': '无付费门槛、无内置广告、无强制营销。本项目以开源精神构建，并不打算将其商业化。',
+  'support.two_things': '两种让项目变得更好的方式',
+  'support.support_ways': '给项目一份支持与鼓励',
+  'support.star_title': '在 GitHub 上点个 Star ⭐',
+  'support.telegram_title': '关注 Telegram 频道',
+  'support.telegram_desc': '作者在 Telegram 发布发版公告以及其它开源项目动态。',
+
+  // Common
+  'common.close': '关闭',
+  'common.cancel': '取消',
+  'common.save': '保存',
+  'common.delete': '删除',
+  'common.confirm': '确认',
+  'common.loading': '正在加载…',
+  'common.error': '错误'
+};
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/Dashboard.svelte b/crates/omnyssh-gui/ui/src/lib/screens/Dashboard.svelte
index a8012cf..813a6f0 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/Dashboard.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/Dashboard.svelte
@@ -11,7 +11,7 @@
   import { Surface, Chip, StatusDot, Icon, Button, statusToken } from '$lib/theme';
   import { serverCards, filterHosts, QUICK_ACTIONS } from './serverCard';
   import { spawnSession } from '$lib/stores/navigation';
-  import { streamerMode, displayHostname } from '$lib/stores/streamer';
+  import { streamerMode, displayHostname, displayUser, displayHostTitle } from '$lib/stores/streamer';
   import { hosts } from '$lib/stores/hosts';
   import { lastError } from '$lib/stores/notifications';
   import { saveHost, deleteHost, reloadHosts, startKeySetup, refreshMetrics } from '$lib/ipc/commands';
@@ -20,6 +20,7 @@
   import { emptyForm, formFromHost } from './hostForm';
   import HostEditor from './HostEditor.svelte';
   import Modal from '$lib/components/Modal.svelte';
+  import { t } from '$lib/i18n';
 
   type Dialog = { kind: 'add' } | { kind: 'edit'; host: HostDto } | { kind: 'delete'; host: HostDto };
 
@@ -125,7 +126,7 @@
 
 <section class="min-h-full px-6 pb-8 pt-3">
   <div class="mb-5 flex items-center gap-3">
-    <h1 class="text-lg font-semibold tracking-tight">Dashboard</h1>
+    <h1 class="text-lg font-semibold tracking-tight">{$t('dashboard.title')}</h1>
     <div class="ml-auto flex items-center gap-2">
       <!-- Host search: a round toggle that slides a live filter field out to its left. -->
       <div class="flex items-center">
@@ -133,8 +134,8 @@
           bind:this={searchInput}
           bind:value={query}
           type="text"
-          placeholder="Search hosts…"
-          aria-label="Search hosts"
+          placeholder={$t('dashboard.search_placeholder')}
+          aria-label={$t('dashboard.search_hosts')}
           disabled={!searchOpen}
           class="{search} {searchOpen
             ? 'mr-2 w-52 px-3 opacity-100'
@@ -146,8 +147,8 @@
         <button
           type="button"
           class={roundBtn}
-          title={searchOpen ? 'Close search' : 'Search hosts'}
-          aria-label={searchOpen ? 'Close search' : 'Search hosts'}
+          title={searchOpen ? $t('dashboard.close_search') : $t('dashboard.search_hosts')}
+          aria-label={searchOpen ? $t('dashboard.close_search') : $t('dashboard.search_hosts')}
           aria-expanded={searchOpen}
           onclick={toggleSearch}
         >
@@ -159,8 +160,8 @@
       <button
         type="button"
         class="{roundBtn} disabled:opacity-60"
-        title="Refresh metrics (R)"
-        aria-label="Refresh metrics"
+        title={$t('dashboard.refresh_metrics')}
+        aria-label={$t('dashboard.refresh_metrics')}
         disabled={refreshing}
         onclick={() => refresh()}
       >
@@ -170,23 +171,23 @@
       </button>
       <button type="button" class={pill} onclick={() => (dialog = { kind: 'add' })}>
         <Icon name="plus" size={13} />
-        Add host
+        {$t('dashboard.add_host')}
       </button>
     </div>
   </div>
 
   {#if $serverCards.length === 0}
     <div class="flex flex-col items-center justify-center gap-2 py-20 text-center">
-      <p class="font-medium">No servers yet</p>
-      <p class="text-sm text-muted">Add a host, or import one from your SSH config, to see it here.</p>
+      <p class="font-medium">{$t('dashboard.no_servers')}</p>
+      <p class="text-sm text-muted">{$t('dashboard.no_servers_desc')}</p>
       <button type="button" class="{pill} mt-2" onclick={() => (dialog = { kind: 'add' })}>
         <Icon name="plus" size={13} />
-        Add host
+        {$t('dashboard.add_host')}
       </button>
     </div>
   {:else if visibleCards.length === 0}
     <div class="flex flex-col items-center justify-center gap-2 py-20 text-center">
-      <p class="text-sm text-muted">No hosts match “{query}”.</p>
+      <p class="text-sm text-muted">{$t('dashboard.no_match', { query })}</p>
     </div>
   {:else}
     <div class="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))]">
@@ -197,17 +198,17 @@
           <div class="flex flex-col gap-3">
             <div class="flex min-w-0 items-start gap-2.5">
               <span class="mt-1 shrink-0">
-                <StatusDot status={card.overall} size={9} label="{card.host.name} status" />
+                <StatusDot status={card.overall} size={9} label="{displayHostTitle(card.host.name, $streamerMode, card.host.hostname)} status" />
               </span>
               <div class="min-w-0">
                 <div class="flex min-w-0 items-center gap-2">
-                  <span class="truncate font-medium" title={card.host.name}>{card.host.name}</span>
+                  <span class="truncate font-medium" title={displayHostTitle(card.host.name, $streamerMode, card.host.hostname)}>{displayHostTitle(card.host.name, $streamerMode, card.host.hostname)}</span>
                   {#if card.host.source === 'sshConfig'}
                     <span
                       class="shrink-0 rounded-full border border-default px-1.5 py-0.5 text-[10px] text-faint"
-                      title="Imported from ~/.ssh/config — editing saves your own copy, which takes priority"
+                      title={$t('dashboard.ssh_config_title')}
                     >
-                      ssh config
+                      {$t('dashboard.ssh_config_badge')}
                     </span>
                   {/if}
                   <!-- Auth-state reflection (tech-gui.md §4.2): key-only once password
@@ -215,37 +216,38 @@
                   {#if card.host.passwordAuthDisabled}
                     <span
                       class="inline-flex shrink-0 items-center gap-1 rounded-full border border-default px-1.5 py-0.5 text-[10px] text-faint"
-                      title="Password authentication disabled — key only"
+                      title={$t('dashboard.key_only_title')}
                     >
                       <Icon name="shield" size={10} />
-                      key-only
+                      {$t('dashboard.key_only_badge')}
                     </span>
                   {:else if card.host.hasKey}
                     <span
                       class="inline-flex shrink-0 items-center gap-1 rounded-full border border-default px-1.5 py-0.5 text-[10px] text-faint"
-                      title="Key authentication configured"
+                      title={$t('dashboard.key_title')}
                     >
                       <Icon name="key" size={10} />
-                      key
+                      {$t('dashboard.key_badge')}
                     </span>
                   {/if}
                 </div>
                 <div class="truncate font-mono text-xs text-faint">
-                  {card.host.user}@{displayHostname(card.host.hostname, $streamerMode)}:{card.host
+                  {displayUser(card.host.user, $streamerMode)}@{displayHostname(card.host.hostname, $streamerMode)}:{card.host
                     .port}
                 </div>
               </div>
             </div>
             <div class="flex flex-wrap items-center gap-1.5">
               {#each QUICK_ACTIONS as action (action.id)}
+                {@const label = action.kind === 'terminal' ? $t('dashboard.quick_sh') : $t('dashboard.quick_files')}
                 <button
                   type="button"
                   class={pill}
-                  title="{action.label} on {card.host.name}"
+                  title="{label} ({displayHostTitle(card.host.name, $streamerMode, card.host.hostname)})"
                   onclick={() => spawnSession(action.kind, card.host.name)}
                 >
                   <Icon name={action.kind} size={13} />
-                  {action.label}
+                  {label}
                 </button>
               {/each}
               <!-- Key setup stays manual-only even though edit no longer is: it records
@@ -256,8 +258,8 @@
                 <button
                   type="button"
                   class={iconBtn}
-                  title="Set up an SSH key for {card.host.name}"
-                  aria-label="Set up an SSH key for {card.host.name}"
+                  title={$t('dashboard.setup_key_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
+                  aria-label={$t('dashboard.setup_key_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
                   onclick={() => setupKey(card.host)}
                 >
                   <Icon name="key" size={14} />
@@ -269,8 +271,8 @@
               <button
                 type="button"
                 class={iconBtn}
-                title="Edit {card.host.name}"
-                aria-label="Edit {card.host.name}"
+                title={$t('dashboard.edit_host_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
+                aria-label={$t('dashboard.edit_host_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
                 onclick={() => (dialog = { kind: 'edit', host: card.host })}
               >
                 <Icon name="edit" size={14} />
@@ -279,8 +281,8 @@
                 <button
                   type="button"
                   class={iconBtn}
-                  title="Delete {card.host.name}"
-                  aria-label="Delete {card.host.name}"
+                  title={$t('dashboard.delete_host_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
+                  aria-label={$t('dashboard.delete_host_title', { name: displayHostTitle(card.host.name, $streamerMode, card.host.hostname) })}
                   onclick={() => (dialog = { kind: 'delete', host: card.host })}
                 >
                   <Icon name="trash" size={14} />
@@ -295,15 +297,29 @@
               class="rounded-lg bg-surface-inset px-3 py-3 text-center text-xs"
               style="color: {statusToken(card.overall)};"
             >
-              {card.reachability}{card.host.monitorPort ? ` · port ${card.host.monitorPort}` : ''}
+              {card.reachability === 'reachable'
+                ? $t('dashboard.reachable')
+                : card.reachability === 'unreachable'
+                  ? $t('dashboard.unreachable')
+                  : $t('dashboard.checking')}{card.host.monitorPort
+                ? ` · ${$t('dashboard.port_label', { port: card.host.monitorPort })}`
+                : ''}
             </div>
           {:else if card.offline}
-            <div class="rounded-lg bg-surface-inset px-3 py-3 text-center text-xs text-faint">offline</div>
+            <div class="rounded-lg bg-surface-inset px-3 py-3 text-center text-xs text-faint">{$t('dashboard.offline')}</div>
           {:else}
             <div class="space-y-2">
               {#each card.metricRows as row (row.label)}
+                {@const label =
+                  row.label === 'CPU'
+                    ? $t('dashboard.metric_cpu')
+                    : row.label === 'RAM'
+                      ? $t('dashboard.metric_ram')
+                      : row.label === 'Disk'
+                        ? $t('dashboard.metric_disk')
+                        : row.label}
                 <div class="flex items-center gap-3">
-                  <span class="w-9 shrink-0 text-[11px] uppercase tracking-wider text-faint">{row.label}</span>
+                  <span class="w-9 shrink-0 text-[11px] uppercase tracking-wider text-faint">{label}</span>
                   <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-inset">
                     {#if row.percent != null}
                       <div
@@ -325,7 +341,7 @@
 
             {#if card.uptime || card.osInfo}
               <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
-                {#if card.uptime}<span>up {card.uptime}</span>{/if}
+                {#if card.uptime}<span>{$t('dashboard.up', { uptime: card.uptime })}</span>{/if}
                 {#if card.uptime && card.osInfo}<span class="text-faint">·</span>{/if}
                 {#if card.osInfo}<span class="min-w-0 truncate">{card.osInfo}</span>{/if}
               </div>
@@ -347,11 +363,20 @@
           {#if card.detectedServices.length}
             <div class="flex flex-wrap gap-1.5">
               {#each card.detectedServices as service (service.kind)}
-                <Chip>{service.detail ? `${service.name} · ${service.detail}` : service.name}</Chip>
+                {@const detail =
+                  service.detail === 'no containers'
+                    ? $t('dashboard.docker_no_containers')
+                    : service.detail.includes('/') && service.detail.endsWith(' running')
+                      ? $t('dashboard.docker_running', {
+                          running: service.detail.split('/')[0],
+                          total: service.detail.split('/')[1].replace(' running', '')
+                        })
+                      : service.detail}
+                <Chip>{detail ? `${service.name} · ${detail}` : service.name}</Chip>
               {/each}
             </div>
           {:else if card.servicesError}
-            <div class="text-xs text-faint">Service scan unavailable</div>
+            <div class="text-xs text-faint">{$t('dashboard.service_scan_unavailable')}</div>
           {/if}
         </Surface>
       {/each}
@@ -373,16 +398,15 @@
   />
 {:else if dialog?.kind === 'delete'}
   {@const host = dialog.host}
-  <Modal label="Delete host" onClose={() => (dialog = null)}>
+  <Modal label={$t('dashboard.delete_host')} onClose={() => (dialog = null)}>
     <div class="space-y-3 px-5 py-4">
-      <h2 class="text-sm font-semibold">Delete host</h2>
+      <h2 class="text-sm font-semibold">{$t('dashboard.delete_host')}</h2>
       <p class="text-sm text-muted">
-        Delete “{host.name}”? This removes it from <span class="font-mono">hosts.toml</span>. If
-        your SSH config defines the same name, it comes back as an import.
+        {$t('dashboard.delete_confirm', { name: host.name })}
       </p>
       <div class="flex justify-end gap-2 pt-1">
-        <Button variant="ghost" onclick={() => (dialog = null)}>Cancel</Button>
-        <Button variant="primary" onclick={() => confirmDelete(host.name)}>Delete</Button>
+        <Button variant="ghost" onclick={() => (dialog = null)}>{$t('dashboard.cancel')}</Button>
+        <Button variant="primary" onclick={() => confirmDelete(host.name)}>{$t('dashboard.delete')}</Button>
       </div>
     </div>
   </Modal>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/HostEditor.svelte b/crates/omnyssh-gui/ui/src/lib/screens/HostEditor.svelte
index f5f23ec..bfb9b57 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/HostEditor.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/HostEditor.svelte
@@ -9,6 +9,7 @@
   import Modal from '$lib/components/Modal.svelte';
   import Select from '$lib/components/Select.svelte';
   import { formToInput, type HostFormFields } from './hostForm';
+  import { t } from '$lib/i18n';
 
   let {
     mode,
@@ -60,7 +61,7 @@
 
   // On edit the DTO omits identity/password (§3.4), so the fields start blank and mean
   // "keep the stored value"; on add they mean "none".
-  const secretHint = $derived(mode === 'edit' ? 'Leave blank to keep the current value' : undefined);
+  const secretHint = $derived(mode === 'edit' ? $t('host_editor.secret_hint') : undefined);
 
   const label = 'block space-y-1 text-xs font-medium text-muted';
   const field =
@@ -68,7 +69,7 @@
     'focus-visible:ring-2 focus-visible:ring-focus placeholder:text-faint';
 </script>
 
-<Modal label={mode === 'add' ? 'Add host' : 'Edit host'} onClose={onCancel}>
+<Modal label={mode === 'add' ? $t('host_editor.add_title') : $t('host_editor.edit_title')} onClose={onCancel}>
   <form
     onsubmit={(e) => {
       e.preventDefault();
@@ -77,47 +78,45 @@
     class="flex min-h-0 flex-col"
   >
     <header class="border-b border-default px-5 py-3.5">
-      <h2 class="text-sm font-semibold">{mode === 'add' ? 'Add host' : 'Edit host'}</h2>
+      <h2 class="text-sm font-semibold">{mode === 'add' ? $t('host_editor.add_title') : $t('host_editor.edit_title')}</h2>
     </header>
 
     <div class="min-h-0 flex-1 space-y-3.5 overflow-y-auto px-5 py-4">
       {#if imported}
         <p class="rounded-lg bg-surface-inset px-3 py-2 text-xs text-muted">
-          Imported from <span class="font-mono">~/.ssh/config</span>. Saving keeps your own copy in
-          <span class="font-mono">hosts.toml</span> and OmnySSH uses it from then on — your SSH config
-          file is never written, and later edits to it stop showing up for this host.
+          {$t('host_editor.imported_notice')}
         </p>
       {/if}
       <label class={label}>
-        <span>Name {mode === 'edit' ? '(fixed)' : ''}</span>
+        <span>{mode === 'edit' ? $t('host_editor.name_fixed') : $t('host_editor.name')}</span>
         <input
           bind:this={nameEl}
           bind:value={fields.name}
           class="{field} {mode === 'edit' ? 'cursor-not-allowed text-muted' : ''}"
           placeholder="web-prod-1"
           readonly={mode === 'edit'}
-          title={mode === 'edit' ? 'To rename, delete this host and add it again' : undefined}
+          title={mode === 'edit' ? $t('host_editor.name_fixed_title') : undefined}
         />
       </label>
 
       <label class={label}>
-        <span>Hostname / IP</span>
+        <span>{$t('host_editor.hostname')}</span>
         <input bind:this={hostnameEl} bind:value={fields.hostname} class="{field} font-mono" placeholder="10.0.0.1" />
       </label>
 
       <div class="grid grid-cols-[1fr,7rem] gap-3">
         <label class={label}>
-          <span>User</span>
+          <span>{$t('host_editor.user')}</span>
           <input bind:value={fields.user} class={field} placeholder="root" />
         </label>
         <label class={label}>
-          <span>Port</span>
+          <span>{$t('host_editor.port')}</span>
           <input bind:value={fields.port} inputmode="numeric" class={field} placeholder="22" />
         </label>
       </div>
 
       <label class={label}>
-        <span>Identity file</span>
+        <span>{$t('host_editor.identity_file')}</span>
         <input
           bind:value={fields.identityFile}
           class="{field} font-mono"
@@ -126,7 +125,7 @@
       </label>
 
       <label class={label}>
-        <span>Password</span>
+        <span>{$t('host_editor.password')}</span>
         <input
           type="password"
           bind:value={fields.password}
@@ -137,26 +136,26 @@
       </label>
 
       <label class={label}>
-        <span>Tags</span>
+        <span>{$t('host_editor.tags')}</span>
         <input bind:value={fields.tags} class={field} placeholder="prod, web" />
       </label>
 
       <label class={label}>
-        <span>Notes</span>
-        <textarea bind:value={fields.notes} rows="2" class="{field} resize-y" placeholder="Optional"></textarea>
+        <span>{$t('host_editor.notes')}</span>
+        <textarea bind:value={fields.notes} rows="2" class="{field} resize-y" placeholder={$t('host_editor.notes_placeholder')}></textarea>
       </label>
 
       <div class="grid grid-cols-2 gap-3">
         <label class={label}>
-          <span>Monitoring</span>
+          <span>{$t('host_editor.monitoring')}</span>
           <Select bind:value={fields.monitoring} class={field}>
-            <option value="ssh">SSH metrics</option>
-            <option value="tcpPort">TCP port check</option>
+            <option value="ssh">{$t('host_editor.monitoring_ssh')}</option>
+            <option value="tcpPort">{$t('host_editor.monitoring_tcp')}</option>
           </Select>
         </label>
         {#if fields.monitoring === 'tcpPort'}
           <label class={label}>
-            <span>Probe port</span>
+            <span>{$t('host_editor.monitor_port')}</span>
             <input
               bind:value={fields.monitorPort}
               inputmode="numeric"
@@ -167,7 +166,7 @@
         {/if}
       </div>
       {#if fields.monitoring === 'tcpPort'}
-        <p class="text-xs text-faint">Checks the port only — no login, and no metrics on the card.</p>
+        <p class="text-xs text-faint">{$t('host_editor.tcp_port_hint')}</p>
       {/if}
 
       {#if error}
@@ -176,9 +175,9 @@
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-default px-5 py-3">
-      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+      <Button variant="ghost" onclick={onCancel}>{$t('common.cancel')}</Button>
       <Button variant="primary" type="submit" disabled={saving}>
-        {mode === 'add' ? 'Add host' : 'Save'}
+        {mode === 'add' ? $t('host_editor.add_title') : $t('host_editor.save')}
       </Button>
     </footer>
   </form>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/KeySetupProgress.svelte b/crates/omnyssh-gui/ui/src/lib/screens/KeySetupProgress.svelte
index 265399f..7933442 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/KeySetupProgress.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/KeySetupProgress.svelte
@@ -10,6 +10,7 @@
   import { keySetup, dismissKeySetup } from '$lib/stores/keySetup';
   import { reloadHosts } from '$lib/ipc/commands';
   import { lastError } from '$lib/stores/notifications';
+  import { t } from '$lib/i18n';
 
   const message = (e: unknown): string => (e instanceof Error ? e.message : String(e));
 
@@ -33,11 +34,11 @@
 {#if $keySetup}
   {@const run = $keySetup}
   {@const phase = run.phase}
-  <Modal label="Key setup" onClose={dismissKeySetup}>
+  <Modal label={$t('keysetup.title', { name: run.hostName })} onClose={dismissKeySetup}>
     <div class="space-y-4 px-5 py-4">
       <div class="flex items-center gap-2.5">
         <Icon name="key" size={16} />
-        <h2 class="min-w-0 truncate text-sm font-semibold">SSH key setup — {run.hostName}</h2>
+        <h2 class="min-w-0 truncate text-sm font-semibold">{$t('keysetup.title', { name: run.hostName })}</h2>
       </div>
 
       {#if phase.kind === 'running'}
@@ -45,7 +46,7 @@
         {@const total = phase.step?.total ?? 6}
         <div class="space-y-2">
           <div class="flex items-center justify-between gap-3 text-xs">
-            <span class="min-w-0 truncate text-muted">{phase.step?.description ?? 'Connecting…'}</span>
+            <span class="min-w-0 truncate text-muted">{phase.step?.description ?? $t('keysetup.connecting')}</span>
             <span class="shrink-0 tabular-nums text-faint">{index}/{total}</span>
           </div>
           <div class="h-1.5 overflow-hidden rounded-full bg-surface-inset">
@@ -56,43 +57,42 @@
           </div>
         </div>
         <p class="text-xs text-faint">
-          Generating a key, authorising it on the server, and — with sudo — disabling
-          password auth. Password auth is never disabled before key auth is verified.
+          {$t('keysetup.explainer')}
         </p>
       {:else if phase.kind === 'complete'}
         <div class="flex items-start gap-2.5">
           <span class="mt-0.5 shrink-0"><StatusDot status="ok" size={9} /></span>
           <div class="min-w-0 space-y-1">
-            <p class="text-sm font-medium">Key authentication configured</p>
+            <p class="text-sm font-medium">{$t('keysetup.success_title')}</p>
             <p class="break-all font-mono text-xs text-muted">{phase.keyPath}</p>
           </div>
         </div>
         <div class="flex justify-end">
-          <Button variant="primary" onclick={dismissKeySetup}>Done</Button>
+          <Button variant="primary" onclick={dismissKeySetup}>{$t('keysetup.done')}</Button>
         </div>
       {:else if phase.kind === 'failed'}
         <div class="flex items-start gap-2.5">
           <span class="mt-0.5 shrink-0"><StatusDot status="crit" size={9} /></span>
           <div class="min-w-0 space-y-1">
-            <p class="text-sm font-medium">Key setup failed</p>
+            <p class="text-sm font-medium">{$t('keysetup.failed_title')}</p>
             <p class="break-words text-xs text-muted">{phase.error}</p>
-            <p class="text-xs text-faint">Password authentication was not changed.</p>
+            <p class="text-xs text-faint">{$t('keysetup.failed_hint')}</p>
           </div>
         </div>
         <div class="flex justify-end">
-          <Button variant="ghost" onclick={dismissKeySetup}>Close</Button>
+          <Button variant="ghost" onclick={dismissKeySetup}>{$t('keysetup.close')}</Button>
         </div>
       {:else}
         <div class="flex items-start gap-2.5">
           <span class="mt-0.5 shrink-0"><StatusDot status="warn" size={9} /></span>
           <div class="min-w-0 space-y-1">
-            <p class="text-sm font-medium">Rolled back</p>
+            <p class="text-sm font-medium">{$t('keysetup.rollback_title')}</p>
             <p class="break-words text-xs text-muted">{phase.result}</p>
-            <p class="text-xs text-faint">The server's password authentication was restored.</p>
+            <p class="text-xs text-faint">{$t('keysetup.rollback_hint')}</p>
           </div>
         </div>
         <div class="flex justify-end">
-          <Button variant="ghost" onclick={dismissKeySetup}>Close</Button>
+          <Button variant="ghost" onclick={dismissKeySetup}>{$t('keysetup.close')}</Button>
         </div>
       {/if}
     </div>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/Settings.svelte b/crates/omnyssh-gui/ui/src/lib/screens/Settings.svelte
index 55933b2..4c54fcd 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/Settings.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/Settings.svelte
@@ -12,6 +12,7 @@
   import { offerUpdate } from '$lib/stores/update';
   import { lastError } from '$lib/stores/notifications';
   import { checkUpdate, loadUpdateConfig, saveUpdateConfig } from '$lib/ipc/commands';
+  import { locale, SUPPORTED_LOCALES, t } from '$lib/i18n';
 
   const message = (e: unknown): string => (e instanceof Error ? e.message : String(e));
   const formatInterval = (secs: number): string => (secs < 60 ? `${secs}s` : `${secs / 60}m`);
@@ -75,16 +76,39 @@
 </script>
 
 <section class="mx-auto h-full max-w-2xl p-6">
-  <h1 class="mb-5 text-lg font-semibold tracking-tight">Settings</h1>
+  <h1 class="mb-5 text-lg font-semibold tracking-tight">{$t('settings.title')}</h1>
 
   <div class="space-y-4">
+    <!-- Language / 语言 -->
+    <Surface class="p-5">
+      <h2 class="mb-3 text-sm font-semibold">{$t('settings.language')}</h2>
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <p class="text-sm">{$t('settings.language')}</p>
+          <p class="text-xs text-muted">{$t('settings.language_desc')}</p>
+        </div>
+        <div class="flex gap-1 rounded-xl bg-surface-inset p-1">
+          {#each SUPPORTED_LOCALES as loc (loc.code)}
+            <button
+              type="button"
+              class="{seg} {segState($locale === loc.code)}"
+              aria-pressed={$locale === loc.code}
+              onclick={() => locale.set(loc.code)}
+            >
+              {loc.label}
+            </button>
+          {/each}
+        </div>
+      </div>
+    </Surface>
+
     <!-- Appearance -->
     <Surface class="p-5">
-      <h2 class="mb-3 text-sm font-semibold">Appearance</h2>
+      <h2 class="mb-3 text-sm font-semibold">{$t('settings.appearance')}</h2>
       <div class="flex items-center justify-between gap-4">
         <div>
-          <p class="text-sm">Theme</p>
-          <p class="text-xs text-muted">Mirrors the sidebar toggle.</p>
+          <p class="text-sm">{$t('settings.theme')}</p>
+          <p class="text-xs text-muted">{$t('settings.theme_desc')}</p>
         </div>
         <div class="flex gap-1 rounded-xl bg-surface-inset p-1">
           <button
@@ -93,7 +117,7 @@
             aria-pressed={$theme === 'light'}
             onclick={() => theme.set('light')}
           >
-            <span class="flex items-center gap-1.5"><Icon name="sun" size={14} /> Light</span>
+            <span class="flex items-center gap-1.5"><Icon name="sun" size={14} /> {$t('settings.theme_light')}</span>
           </button>
           <button
             type="button"
@@ -101,7 +125,7 @@
             aria-pressed={$theme === 'dark'}
             onclick={() => theme.set('dark')}
           >
-            <span class="flex items-center gap-1.5"><Icon name="moon" size={14} /> Dark</span>
+            <span class="flex items-center gap-1.5"><Icon name="moon" size={14} /> {$t('settings.theme_dark')}</span>
           </button>
         </div>
       </div>
@@ -109,19 +133,19 @@
 
     <!-- Privacy -->
     <Surface class="p-5">
-      <h2 class="mb-3 text-sm font-semibold">Privacy</h2>
+      <h2 class="mb-3 text-sm font-semibold">{$t('settings.streamer_mode')}</h2>
       <div class="flex items-center justify-between gap-4">
         <div class="min-w-0">
-          <p class="text-sm">Streamer mode</p>
+          <p class="text-sm">{$t('settings.streamer_mode')}</p>
           <p class="text-xs text-muted">
-            Mask host addresses with realistic fakes, so real IPs stay off-screen while recording.
+            {$t('settings.streamer_mode_desc')}
           </p>
         </div>
         <button
           type="button"
           role="switch"
           aria-checked={$streamerMode}
-          aria-label="Streamer mode"
+          aria-label={$t('settings.streamer_mode')}
           onclick={() => streamerMode.toggle()}
           class="relative h-6 w-11 shrink-0 rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus {$streamerMode
             ? 'bg-accent'
@@ -138,11 +162,11 @@
 
     <!-- Dashboard -->
     <Surface class="p-5">
-      <h2 class="mb-3 text-sm font-semibold">Dashboard</h2>
+      <h2 class="mb-3 text-sm font-semibold">{$t('dashboard.title')}</h2>
       <div class="flex items-center justify-between gap-4">
         <div>
-          <p class="text-sm">Auto-refresh interval</p>
-          <p class="text-xs text-muted">How often the dashboard forces a metric refresh.</p>
+          <p class="text-sm">{$t('settings.metrics_refresh')}</p>
+          <p class="text-xs text-muted">{$t('settings.metrics_refresh_desc')}</p>
         </div>
         <div class="flex flex-wrap justify-end gap-1 rounded-xl bg-surface-inset p-1">
           {#each REFRESH_OPTIONS as secs (secs)}
@@ -161,18 +185,18 @@
 
     <!-- Updates -->
     <Surface class="p-5">
-      <h2 class="mb-3 text-sm font-semibold">Updates</h2>
+      <h2 class="mb-3 text-sm font-semibold">{$t('settings.updates')}</h2>
       <div class="space-y-4">
         <div class="flex items-center justify-between gap-4">
           <div>
-            <p class="text-sm">Check for updates on startup</p>
-            <p class="text-xs text-muted">Look for a newer release when the app launches.</p>
+            <p class="text-sm">{$t('settings.check_startup')}</p>
+            <p class="text-xs text-muted">{$t('settings.check_startup_desc')}</p>
           </div>
           <button
             type="button"
             role="switch"
             aria-checked={updateConfig?.checkOnStartup ?? false}
-            aria-label="Check for updates on startup"
+            aria-label={$t('settings.check_startup')}
             disabled={!updateConfig}
             onclick={toggleCheckOnStartup}
             class="relative h-6 w-11 shrink-0 rounded-full transition disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus {updateConfig?.checkOnStartup
@@ -189,13 +213,13 @@
 
         <div class="flex items-center justify-between gap-4 border-t border-default pt-4">
           <div class="min-w-0">
-            <p class="text-sm">Manual check</p>
+            <p class="text-sm">{$t('settings.check_now')}</p>
             <p class="text-xs text-muted">
-              {#if check.kind === 'checking'}Checking…
-              {:else if check.kind === 'upToDate'}You're on the latest version.
-              {:else if check.kind === 'available'}Version {check.version} is available.
+              {#if check.kind === 'checking'}{$t('settings.checking')}
+              {:else if check.kind === 'upToDate'}{$t('settings.up_to_date')}
+              {:else if check.kind === 'available'}{$t('settings.update_available', { version: check.version })}
               {:else if check.kind === 'error'}{check.message}
-              {:else}Check GitHub for a newer release.
+              {:else}{$t('settings.check_startup_desc')}
               {/if}
             </p>
           </div>
@@ -206,7 +230,7 @@
             onclick={checkNow}
           >
             <Icon name="refresh" size={14} />
-            Check now
+            {$t('settings.check_now')}
           </button>
         </div>
       </div>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/SftpPane.svelte b/crates/omnyssh-gui/ui/src/lib/screens/SftpPane.svelte
index 0a74a3c..d3db26a 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/SftpPane.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/SftpPane.svelte
@@ -7,6 +7,7 @@
   import { Icon } from '$lib/theme';
   import type { FileEntryDto } from '$lib/bindings';
   import { formatBytes, type Pane } from '$lib/stores/sftp';
+  import { t } from '$lib/i18n';
 
   let {
     title,
@@ -51,9 +52,9 @@
     {#if pane.error}
       <p class="px-2 py-6 text-center text-sm text-status-crit">{pane.error}</p>
     {:else if pane.loading && pane.entries.length === 0}
-      <p class="px-2 py-6 text-center text-sm text-faint">Loading…</p>
+      <p class="px-2 py-6 text-center text-sm text-faint">{$t('sftp.loading')}</p>
     {:else if pane.entries.length === 0}
-      <p class="px-2 py-6 text-center text-sm text-faint">Empty directory</p>
+      <p class="px-2 py-6 text-center text-sm text-faint">{$t('sftp.empty_directory')}</p>
     {:else}
       <ul class="space-y-0.5">
         {#each pane.entries as entry, i (i)}
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/SftpView.svelte b/crates/omnyssh-gui/ui/src/lib/screens/SftpView.svelte
index 3441080..e8c0d5f 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/SftpView.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/SftpView.svelte
@@ -14,6 +14,8 @@
   import { sessions, type Session } from '$lib/stores/sessions';
   import { sftp, markedEntries, formatBytes, type PaneSide } from '$lib/stores/sftp';
   import { lastError } from '$lib/stores/notifications';
+  import { streamerMode, displayHostTitle } from '$lib/stores/streamer';
+  import { t } from '$lib/i18n';
   import {
     sftpOpen,
     sftpList,
@@ -94,6 +96,9 @@
       } catch {
         home = '/';
       }
+      if (typeof window !== 'undefined' && !('__TAURI_INTERNALS__' in window)) {
+        return;
+      }
       let id: number;
       try {
         id = await sftpOpen(session.hostName);
@@ -282,17 +287,17 @@
 <div class="absolute inset-0 flex flex-col bg-surface pt-[var(--titlebar-h)] {active ? '' : 'hidden'}">
   {#if openError}
     <div class="flex flex-1 flex-col items-center justify-center gap-2 p-10 text-center">
-      <p class="font-medium">Could not open SFTP on {session.hostName}</p>
+      <p class="font-medium">{$t('sftp.open_failed', { name: displayHostTitle(session.hostName, $streamerMode) })}</p>
       <p class="max-w-md text-sm text-muted">{openError}</p>
     </div>
   {:else if !view}
     <div class="flex flex-1 items-center justify-center p-10 text-center">
-      <p class="text-sm text-muted">Connecting to {session.hostName}…</p>
+      <p class="text-sm text-muted">{$t('sftp.connecting', { name: displayHostTitle(session.hostName, $streamerMode) })}</p>
     </div>
   {:else}
     <div class="grid min-h-0 flex-1 grid-cols-2 divide-x divide-default">
       <SftpPane
-        title="Local"
+        title={$t('sftp.local')}
         pane={view.local}
         onNavigate={(e) => navigate('local', e)}
         onToggleMark={(p) => toggleMark('local', p)}
@@ -302,17 +307,17 @@
           <button
             type="button"
             class={toolBtn}
-            title="Upload marked files to the remote directory"
+            title={$t('sftp.upload_tooltip')}
             disabled={localMarkedFiles.length === 0}
             onclick={upload}
           >
             <Icon name="upload" size={13} />
-            Upload
+            {$t('sftp.upload')}
           </button>
           <button
             type="button"
             class={toolBtn}
-            title="Refresh"
+            title={$t('sftp.refresh')}
             aria-label="Refresh local"
             onclick={() => refreshLocal(view.local.path)}
           >
@@ -322,7 +327,7 @@
       </SftpPane>
 
       <SftpPane
-        title={session.hostName}
+        title={displayHostTitle(session.hostName, $streamerMode)}
         pane={view.remote}
         onNavigate={(e) => navigate('remote', e)}
         onToggleMark={(p) => toggleMark('remote', p)}
@@ -332,21 +337,21 @@
           <button
             type="button"
             class={toolBtn}
-            title="Download marked files to the local directory"
+            title={$t('sftp.download_tooltip')}
             disabled={remoteMarkedFiles.length === 0}
             onclick={download}
           >
             <Icon name="download" size={13} />
-            Download
+            {$t('sftp.download')}
           </button>
-          <button type="button" class={toolBtn} title="New folder" onclick={() => openPrompt('mkdir')}>
+          <button type="button" class={toolBtn} title={$t('sftp.new_folder')} onclick={() => openPrompt('mkdir')}>
             <Icon name="plus" size={13} />
-            Folder
+            {$t('sftp.new_folder')}
           </button>
           <button
             type="button"
             class={toolBtn}
-            title="Rename the marked entry"
+            title={$t('sftp.rename')}
             disabled={!singleRemoteMark}
             onclick={() => openPrompt('rename')}
           >
@@ -355,7 +360,7 @@
           <button
             type="button"
             class={toolBtn}
-            title="Delete marked entries"
+            title={$t('sftp.delete')}
             aria-label="Delete marked entries"
             disabled={remoteMarked.length === 0}
             onclick={remove}
@@ -365,7 +370,7 @@
           <button
             type="button"
             class={toolBtn}
-            title="Refresh"
+            title={$t('sftp.refresh')}
             aria-label="Refresh remote"
             onclick={() => refreshRemote(view.remote.path)}
           >
@@ -379,7 +384,7 @@
       <div class="shrink-0 border-t border-default px-4 py-2.5" aria-label="transfer progress">
         <div class="flex items-center justify-between gap-3 text-xs text-muted">
           <span class="min-w-0 truncate">
-            {transfer.kind === 'upload' ? 'Uploading' : 'Downloading'}
+            {transfer.kind === 'upload' ? $t('sftp.uploading') : $t('sftp.downloading')}
             <span class="font-mono text-fg">{transfer.name}</span>
           </span>
           <span class="shrink-0 tabular-nums">
@@ -404,7 +409,7 @@
 </div>
 
 {#if active && prompt}
-  <Modal label={prompt.kind === 'mkdir' ? 'New folder' : 'Rename'} onClose={() => (prompt = null)}>
+  <Modal label={prompt.kind === 'mkdir' ? $t('sftp.modal_new_folder') : $t('sftp.rename')} onClose={() => (prompt = null)}>
     <form
       onsubmit={(e) => {
         e.preventDefault();
@@ -413,7 +418,7 @@
     >
       <header class="border-b border-default px-5 py-3.5">
         <h2 class="text-sm font-semibold">
-          {prompt.kind === 'mkdir' ? 'New folder' : `Rename ${prompt.target?.name ?? ''}`}
+          {prompt.kind === 'mkdir' ? $t('sftp.modal_new_folder') : $t('sftp.modal_rename', { name: prompt.target?.name ?? '' })}
         </h2>
       </header>
       <div class="px-5 py-4">
@@ -422,8 +427,8 @@
           autofocus
           bind:value={prompt.value}
           class={field}
-          placeholder={prompt.kind === 'mkdir' ? 'Folder name' : 'New name'}
-          aria-label={prompt.kind === 'mkdir' ? 'Folder name' : 'New name'}
+          placeholder={prompt.kind === 'mkdir' ? $t('sftp.folder_name_placeholder') : $t('sftp.new_name_placeholder')}
+          aria-label={prompt.kind === 'mkdir' ? $t('sftp.folder_name_placeholder') : $t('sftp.new_name_placeholder')}
         />
       </div>
       <footer class="flex justify-end gap-2 border-t border-default px-5 py-3">
@@ -432,14 +437,14 @@
           class="rounded-full px-4 py-2 text-sm text-muted transition hover:bg-surface-inset hover:text-fg"
           onclick={() => (prompt = null)}
         >
-          Cancel
+          {$t('sftp.cancel')}
         </button>
         <button
           type="submit"
           class="rounded-full bg-accent px-5 py-2 text-sm font-medium text-accent-fg transition hover:opacity-90 disabled:opacity-50"
           disabled={!prompt.value.trim()}
         >
-          {prompt.kind === 'mkdir' ? 'Create' : 'Rename'}
+          {prompt.kind === 'mkdir' ? $t('sftp.create') : $t('sftp.rename')}
         </button>
       </footer>
     </form>
@@ -447,7 +452,7 @@
 {/if}
 
 {#if active && view?.preview}
-  <Modal label="File preview" onClose={closePreview}>
+  <Modal label={$t('sftp.file_preview')} onClose={closePreview}>
     <header class="border-b border-default px-5 py-3.5">
       <h2 class="truncate font-mono text-xs text-muted" title={view.preview.path}>
         {view.preview.path}
@@ -455,7 +460,7 @@
     </header>
     <div class="min-h-0 flex-1 overflow-auto px-5 py-4">
       {#if view.preview.content.length === 0}
-        <p class="text-sm text-faint">Empty file.</p>
+        <p class="text-sm text-faint">{$t('sftp.empty_file')}</p>
       {:else}
         <pre class="select-text whitespace-pre-wrap break-words font-mono text-xs text-fg">{view.preview
             .content}</pre>
@@ -467,7 +472,7 @@
         class="rounded-full px-4 py-2 text-sm text-muted transition hover:bg-surface-inset hover:text-fg"
         onclick={closePreview}
       >
-        Close
+        {$t('sftp.close')}
       </button>
     </footer>
   </Modal>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/SnippetEditor.svelte b/crates/omnyssh-gui/ui/src/lib/screens/SnippetEditor.svelte
index 36cb43f..f6a826e 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/SnippetEditor.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/SnippetEditor.svelte
@@ -8,6 +8,7 @@
   import Modal from '$lib/components/Modal.svelte';
   import Select from '$lib/components/Select.svelte';
   import { formToSnippet, type SnippetFormFields } from './snippetForm';
+  import { t } from '$lib/i18n';
 
   let {
     mode,
@@ -56,7 +57,7 @@
     'focus-visible:ring-2 focus-visible:ring-focus placeholder:text-faint';
 </script>
 
-<Modal label={mode === 'add' ? 'New snippet' : 'Edit snippet'} onClose={onCancel}>
+<Modal label={mode === 'add' ? $t('snippet_editor.add_title') : $t('snippet_editor.edit_title')} onClose={onCancel}>
   <form
     onsubmit={(e) => {
       e.preventDefault();
@@ -65,17 +66,17 @@
     class="flex min-h-0 flex-col"
   >
     <header class="border-b border-default px-5 py-3.5">
-      <h2 class="text-sm font-semibold">{mode === 'add' ? 'New snippet' : 'Edit snippet'}</h2>
+      <h2 class="text-sm font-semibold">{mode === 'add' ? $t('snippet_editor.add_title') : $t('snippet_editor.edit_title')}</h2>
     </header>
 
     <div class="min-h-0 flex-1 space-y-3.5 overflow-y-auto px-5 py-4">
       <label class={label}>
-        <span>Name</span>
+        <span>{$t('snippet_editor.name')}</span>
         <input bind:this={nameEl} bind:value={fields.name} class={field} placeholder="restart-service" />
       </label>
 
       <label class={label}>
-        <span>Command</span>
+        <span>{$t('snippet_editor.command')}</span>
         <textarea
           bind:value={fields.command}
           rows="3"
@@ -86,26 +87,26 @@
 
       <div class="grid grid-cols-2 gap-3">
         <label class={label}>
-          <span>Scope</span>
+          <span>{$t('snippet_editor.scope')}</span>
           <Select bind:value={fields.scope} class={field}>
-            <option value="global">global</option>
-            <option value="host">host</option>
+            <option value="global">{$t('snippet_editor.scope_global')}</option>
+            <option value="host">{$t('snippet_editor.scope_host')}</option>
           </Select>
         </label>
         <label class={label}>
-          <span>Host {fields.scope === 'host' ? '(required)' : '(optional)'}</span>
+          <span>{fields.scope === 'host' ? $t('snippet_editor.host_required') : $t('snippet_editor.host_optional')}</span>
           <input bind:value={fields.host} class={field} placeholder="web-1" />
         </label>
       </div>
 
       <label class={label}>
-        <span>Tags</span>
+        <span>{$t('snippet_editor.tags')}</span>
         <input bind:value={fields.tags} class={field} placeholder="ops, deploy" />
       </label>
 
       <div class="space-y-1">
         <label class={label}>
-          <span>Params</span>
+          <span>{$t('snippet_runner.parameters')}</span>
           <input bind:value={fields.params} class={field} placeholder="service, timeout" />
         </label>
         <p class="text-[11px] text-faint">
@@ -119,9 +120,9 @@
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-default px-5 py-3">
-      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+      <Button variant="ghost" onclick={onCancel}>{$t('common.cancel')}</Button>
       <Button variant="primary" type="submit" disabled={saving}>
-        {mode === 'add' ? 'Add snippet' : 'Save'}
+        {mode === 'add' ? $t('snippet_editor.add_title') : $t('snippet_editor.save')}
       </Button>
     </footer>
   </form>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/SnippetResults.svelte b/crates/omnyssh-gui/ui/src/lib/screens/SnippetResults.svelte
index 2d31707..6c5b07d 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/SnippetResults.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/SnippetResults.svelte
@@ -5,6 +5,8 @@
   import { StatusDot, Button, type Status } from '$lib/theme';
   import Modal from '$lib/components/Modal.svelte';
   import { snippetRun, clearRun, type SnippetResultEntry } from '$lib/stores/snippets';
+  import { streamerMode, displayHostTitle } from '$lib/stores/streamer';
+  import { t } from '$lib/i18n';
 
   function dot(entry: SnippetResultEntry): Status {
     if (entry.pending) return 'unknown';
@@ -19,35 +21,35 @@
 
 {#if $snippetRun}
   {@const run = $snippetRun}
-  <Modal label="Snippet results" onClose={clearRun}>
+  <Modal label={$t('snippet_results.title', { name: run.snippetName })} onClose={clearRun}>
     <header class="border-b border-default px-5 py-3.5">
-      <h2 class="truncate text-sm font-semibold">Results — “{run.snippetName}”</h2>
+      <h2 class="truncate text-sm font-semibold">{$t('snippet_results.title', { name: run.snippetName })}</h2>
     </header>
 
     <div class="min-h-0 flex-1 space-y-3 overflow-y-auto px-5 py-4">
       {#each run.entries as entry (entry.hostName)}
         <div class="rounded-lg border border-default">
           <div class="flex items-center gap-2.5 border-b border-default px-3 py-2">
-            <StatusDot status={dot(entry)} label="{entry.hostName} {state(entry)}" />
-            <span class="min-w-0 flex-1 truncate text-sm font-medium">{entry.hostName}</span>
+            <StatusDot status={dot(entry)} label="{displayHostTitle(entry.hostName, $streamerMode)} {state(entry)}" />
+            <span class="min-w-0 flex-1 truncate text-sm font-medium">{displayHostTitle(entry.hostName, $streamerMode)}</span>
             <span class="shrink-0 text-[11px] uppercase tracking-wider text-faint">{state(entry)}</span>
           </div>
           {#if entry.pending}
-            <p class="px-3 py-2 text-xs text-faint">Running…</p>
+            <p class="px-3 py-2 text-xs text-faint">{$t('snippet_results.running')}</p>
           {:else if entry.output.trim()}
             <pre
               class="max-h-52 select-text overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-xs {entry.ok
                 ? 'text-muted'
                 : 'text-status-crit'}">{entry.output}</pre>
           {:else}
-            <p class="px-3 py-2 text-xs text-faint">(no output)</p>
+            <p class="px-3 py-2 text-xs text-faint">{$t('snippet_results.no_output')}</p>
           {/if}
         </div>
       {/each}
     </div>
 
     <footer class="flex justify-end border-t border-default px-5 py-3">
-      <Button variant="secondary" onclick={clearRun}>Close</Button>
+      <Button variant="secondary" onclick={clearRun}>{$t('snippet_results.close')}</Button>
     </footer>
   </Modal>
 {/if}
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/SnippetRunner.svelte b/crates/omnyssh-gui/ui/src/lib/screens/SnippetRunner.svelte
index 5e24f99..d03b76a 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/SnippetRunner.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/SnippetRunner.svelte
@@ -8,9 +8,10 @@
   import Modal from '$lib/components/Modal.svelte';
   import { hosts } from '$lib/stores/hosts';
   import { statuses } from '$lib/stores/statuses';
-  import { streamerMode, displayHostname } from '$lib/stores/streamer';
+  import { streamerMode, displayHostname, displayUser, displayHostTitle } from '$lib/stores/streamer';
   import { hostStatusDot } from '$lib/stores/palette';
   import { declaredParams } from './snippetForm';
+  import { t } from '$lib/i18n';
 
   let {
     snippet,
@@ -61,16 +62,16 @@
     'focus-visible:ring-2 focus-visible:ring-focus placeholder:text-faint';
 </script>
 
-<Modal label="Run snippet" onClose={onCancel}>
+<Modal label={$t('snippet_runner.title', { name: snippet.name })} onClose={onCancel}>
   <header class="border-b border-default px-5 py-3.5">
-    <h2 class="truncate text-sm font-semibold">Run “{snippet.name}”</h2>
+    <h2 class="truncate text-sm font-semibold">{$t('snippet_runner.title', { name: snippet.name })}</h2>
     <p class="mt-0.5 truncate font-mono text-xs text-faint">{snippet.command}</p>
   </header>
 
   <div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
     {#if params.length}
       <div class="space-y-3">
-        <h3 class="text-[11px] font-medium uppercase tracking-[0.18em] text-faint">Parameters</h3>
+        <h3 class="text-[11px] font-medium uppercase tracking-[0.18em] text-faint">{$t('snippet_runner.parameters')}</h3>
         <!-- Keyed by position: params come from snippets.toml unchanged and the core
              never dedups them, so a name key could throw each_key_duplicate. -->
         {#each params as name, i (i)}
@@ -84,10 +85,10 @@
 
     <div class="space-y-2">
       <h3 class="text-[11px] font-medium uppercase tracking-[0.18em] text-faint">
-        Run on {selected.size} of {$hosts.length}
+        {$t('snippet_runner.target_hosts', { selected: selected.size, total: $hosts.length })}
       </h3>
       {#if $hosts.length === 0}
-        <p class="text-sm text-muted">No hosts configured.</p>
+        <p class="text-sm text-muted">{$t('snippet_runner.no_hosts')}</p>
       {:else}
         <ul class="space-y-1">
           {#each $hosts as host (host.name)}
@@ -97,7 +98,7 @@
                 type="button"
                 role="checkbox"
                 aria-checked={checked}
-                aria-label={host.name}
+                aria-label={displayHostTitle(host.name, $streamerMode, host.hostname)}
                 class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus
                   {checked ? 'bg-accent text-accent-fg' : 'text-muted hover:bg-surface-inset hover:text-fg'}"
@@ -107,9 +108,9 @@
                   {#if checked}<Icon name="check" size={11} />{/if}
                 </span>
                 <StatusDot status={hostStatusDot($statuses.get(host.name))} />
-                <span class="min-w-0 flex-1 truncate font-medium">{host.name}</span>
+                <span class="min-w-0 flex-1 truncate font-medium">{displayHostTitle(host.name, $streamerMode, host.hostname)}</span>
                 <span class="shrink-0 truncate font-mono text-xs {checked ? '' : 'text-faint'}">
-                  {host.user}@{displayHostname(host.hostname, $streamerMode)}
+                  {displayUser(host.user, $streamerMode)}@{displayHostname(host.hostname, $streamerMode)}
                 </span>
               </button>
             </li>
@@ -120,9 +121,12 @@
   </div>
 
   <footer class="flex justify-end gap-2 border-t border-default px-5 py-3">
-    <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+    <Button variant="ghost" onclick={onCancel}>{$t('common.cancel')}</Button>
     <Button variant="primary" onclick={run} disabled={selected.size === 0}>
-      Run on {selected.size} {selected.size === 1 ? 'host' : 'hosts'}
+      {$t('snippet_runner.run', {
+        count: selected.size,
+        hosts: selected.size === 1 ? $t('snippet_runner.host_singular') : $t('snippet_runner.host_plural')
+      })}
     </Button>
   </footer>
 </Modal>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/Snippets.svelte b/crates/omnyssh-gui/ui/src/lib/screens/Snippets.svelte
index 258edf1..b8d9592 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/Snippets.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/Snippets.svelte
@@ -15,6 +15,7 @@
   import SnippetRunner from './SnippetRunner.svelte';
   import SnippetResults from './SnippetResults.svelte';
   import Modal from '$lib/components/Modal.svelte';
+  import { t } from '$lib/i18n';
 
   type Dialog =
     | { kind: 'add' }
@@ -97,27 +98,27 @@
 
 <section class="flex h-full flex-col px-6 pb-6 pt-3">
   <div class="mb-5 flex items-center gap-3">
-    <h1 class="text-lg font-semibold tracking-tight">Snippets</h1>
+    <h1 class="text-lg font-semibold tracking-tight">{$t('snippets.title')}</h1>
     <div class="ml-auto w-full max-w-xs">
-      <input bind:value={query} class={search} placeholder="Search snippets…" aria-label="Search snippets" />
+      <input bind:value={query} class={search} placeholder={$t('snippets.search_placeholder')} aria-label={$t('snippets.search_placeholder')} />
     </div>
     <button type="button" class={pill} onclick={() => (dialog = { kind: 'add' })}>
       <Icon name="plus" size={13} />
-      New snippet
+      {$t('snippets.add_snippet')}
     </button>
   </div>
 
   {#if filtered.length === 0}
     <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
       {#if $snippets.length === 0}
-        <p class="font-medium">No snippets yet</p>
-        <p class="text-sm text-muted">Save a command to run it on your hosts in one click.</p>
+        <p class="font-medium">{$t('snippets.no_snippets')}</p>
+        <p class="text-sm text-muted">{$t('snippets.no_snippets_desc')}</p>
         <button type="button" class="{pill} mt-2" onclick={() => (dialog = { kind: 'add' })}>
           <Icon name="plus" size={13} />
-          New snippet
+          {$t('snippets.add_snippet')}
         </button>
       {:else}
-        <p class="text-sm text-muted">No snippets match “{query}”.</p>
+        <p class="text-sm text-muted">{$t('snippets.no_match', { query })}</p>
       {/if}
     </div>
   {:else}
@@ -143,17 +144,17 @@
               <button
                 type="button"
                 class={pill}
-                title="Run {snippet.name}"
-                aria-label="Run {snippet.name}"
+                title="{$t('snippets.run')} ({snippet.name})"
+                aria-label="{$t('snippets.run')} ({snippet.name})"
                 onclick={() => (dialog = { kind: 'run', snippet })}
               >
                 <Icon name="play" size={12} />
-                Run
+                {$t('snippets.run')}
               </button>
-              <button type="button" class={iconBtn} title="Edit {snippet.name}" aria-label="Edit {snippet.name}" onclick={() => (dialog = { kind: 'edit', snippet })}>
+              <button type="button" class={iconBtn} title="{$t('snippets.edit')} ({snippet.name})" aria-label="{$t('snippets.edit')} ({snippet.name})" onclick={() => (dialog = { kind: 'edit', snippet })}>
                 <Icon name="edit" size={15} />
               </button>
-              <button type="button" class={iconBtn} title="Delete {snippet.name}" aria-label="Delete {snippet.name}" onclick={() => (dialog = { kind: 'delete', snippet })}>
+              <button type="button" class={iconBtn} title="{$t('snippets.delete')} ({snippet.name})" aria-label="{$t('snippets.delete')} ({snippet.name})" onclick={() => (dialog = { kind: 'delete', snippet })}>
                 <Icon name="trash" size={15} />
               </button>
             </div>
@@ -184,15 +185,15 @@
   />
 {:else if dialog?.kind === 'delete'}
   {@const snippet = dialog.snippet}
-  <Modal label="Delete snippet" onClose={() => (dialog = null)}>
+  <Modal label={$t('snippets.delete_title')} onClose={() => (dialog = null)}>
     <div class="space-y-3 px-5 py-4">
-      <h2 class="text-sm font-semibold">Delete snippet</h2>
+      <h2 class="text-sm font-semibold">{$t('snippets.delete_title')}</h2>
       <p class="text-sm text-muted">
-        Delete “{snippet.name}”? This removes it from <span class="font-mono">snippets.toml</span>.
+        {$t('snippets.delete_confirm', { name: snippet.name })}
       </p>
       <div class="flex justify-end gap-2 pt-1">
-        <Button variant="ghost" onclick={() => (dialog = null)}>Cancel</Button>
-        <Button variant="primary" onclick={() => confirmDelete(snippet.name)}>Delete</Button>
+        <Button variant="ghost" onclick={() => (dialog = null)}>{$t('snippets.cancel')}</Button>
+        <Button variant="primary" onclick={() => confirmDelete(snippet.name)}>{$t('snippets.delete')}</Button>
       </div>
     </div>
   </Modal>
diff --git a/crates/omnyssh-gui/ui/src/lib/screens/TerminalView.svelte b/crates/omnyssh-gui/ui/src/lib/screens/TerminalView.svelte
index 3e1e0ab..11d4382 100644
--- a/crates/omnyssh-gui/ui/src/lib/screens/TerminalView.svelte
+++ b/crates/omnyssh-gui/ui/src/lib/screens/TerminalView.svelte
@@ -124,6 +124,13 @@
         if (term) term.options.theme = xtermTheme(t);
       });
 
+      // Fit before opening so the remote PTY starts at the visible size.
+      safeFit();
+      if (typeof window !== 'undefined' && !('__TAURI_INTERNALS__' in window)) {
+        ready = true;
+        return;
+      }
+
       // Route raw output into xterm. The channel is typed `number[]`, but the raw path
       // actually delivers an `ArrayBuffer` (§3.3); `Uint8Array` wraps either.
       const channel = new Channel<TerminalBytes>();
@@ -136,8 +143,6 @@
         term.write(new Uint8Array(msg as unknown as ArrayBuffer), syncScrolled);
       };
 
-      // Fit before opening so the remote PTY starts at the visible size.
-      safeFit();
       const id = await terminalOpen(session.hostName, term.cols || 80, term.rows || 24, channel);
       if (destroyed) {
         void terminalClose(id).catch(() => {});
diff --git a/crates/omnyssh-gui/ui/src/lib/stores/sessions.ts b/crates/omnyssh-gui/ui/src/lib/stores/sessions.ts
index 0f8fdac..d6f09f7 100644
--- a/crates/omnyssh-gui/ui/src/lib/stores/sessions.ts
+++ b/crates/omnyssh-gui/ui/src/lib/stores/sessions.ts
@@ -59,6 +59,9 @@ function createSessions() {
     },
     close(id: number): void {
       update((list) => list.filter((s) => s.id !== id));
+    },
+    set(sessions: Session[]): void {
+      update(() => sessions);
     }
   };
 }
diff --git a/crates/omnyssh-gui/ui/src/lib/stores/streamer.test.ts b/crates/omnyssh-gui/ui/src/lib/stores/streamer.test.ts
index cfe4af3..a0d7e9b 100644
--- a/crates/omnyssh-gui/ui/src/lib/stores/streamer.test.ts
+++ b/crates/omnyssh-gui/ui/src/lib/stores/streamer.test.ts
@@ -1,46 +1,43 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { get } from 'svelte/store';
-import { maskHostname, displayHostname } from './streamer';
+import { maskHostname, displayHostname, maskUser, displayUser, displayHostTitle } from './streamer';
 
 // Streamer mode disguises host addresses on screen (tech-gui.md §4.3). The mask must be
 // deterministic (same host → same disguise all recording), never leak the real value,
 // and keep the address shape so cards still read like real servers.
 describe('address masking', () => {
   it('is deterministic for a given host', () => {
-    expect(maskHostname('203.0.113.7')).toBe(maskHostname('203.0.113.7'));
-    expect(maskHostname('db.example.com')).toBe(maskHostname('db.example.com'));
+    expect(maskHostname('203.0.113.7')).toBe('127.0.0.1');
+    expect(maskHostname('db.example.com')).toBe('127.0.0.1');
   });
 
-  it('maps an IPv4 to a different, valid public-looking IPv4', () => {
-    const masked = maskHostname('192.168.1.10');
-    expect(masked).not.toBe('192.168.1.10');
-    const octets = masked.split('.').map(Number);
-    expect(octets).toHaveLength(4);
-    expect(octets.every((o) => o >= 0 && o <= 255)).toBe(true);
-    expect(octets[3]).toBeGreaterThanOrEqual(1);
-    expect(octets[3]).toBeLessThanOrEqual(254);
+  it('maps an IPv4 to 127.0.0.1', () => {
+    expect(maskHostname('192.168.1.10')).toBe('127.0.0.1');
+    expect(maskHostname('47.100.20.30')).toBe('127.0.0.1');
   });
 
-  it('maps a domain to a fake domain that keeps the TLD', () => {
-    const masked = maskHostname('prod.internal.example.com');
-    expect(masked).not.toBe('prod.internal.example.com');
-    expect(masked.endsWith('.com')).toBe(true);
+  it('maps an IPv6 to ::1', () => {
+    expect(maskHostname('2001:db8::1')).toBe('::1');
   });
 
-  it('maps an IPv6 to a fake IPv6', () => {
-    const masked = maskHostname('2001:db8::1');
-    expect(masked).not.toBe('2001:db8::1');
-    expect(masked.includes(':')).toBe(true);
+  it('displayHostname passes through when streamer mode is off', () => {
+    expect(displayHostname('203.0.113.7', false)).toBe('203.0.113.7');
+    expect(displayHostname('203.0.113.7', true)).toBe('127.0.0.1');
   });
 
-  it('gives distinct hosts distinct disguises', () => {
-    expect(maskHostname('10.0.0.1')).not.toBe(maskHostname('10.0.0.2'));
+  it('masks username to admin in streamer mode', () => {
+    expect(maskUser('root')).toBe('admin');
+    expect(maskUser('ubuntu')).toBe('admin');
+    expect(displayUser('root', false)).toBe('root');
+    expect(displayUser('root', true)).toBe('admin');
   });
 
-  it('displayHostname passes through when streamer mode is off', () => {
-    expect(displayHostname('203.0.113.7', false)).toBe('203.0.113.7');
-    expect(displayHostname('203.0.113.7', true)).toBe(maskHostname('203.0.113.7'));
+  it('disguises host title when matching IP or hostname, preserves custom aliases', () => {
+    expect(displayHostTitle('47.100.20.30', false)).toBe('47.100.20.30');
+    expect(displayHostTitle('47.100.20.30', true)).toBe('127.0.0.1');
+    expect(displayHostTitle('my-host', true, 'my-host')).toBe('127.0.0.1');
+    expect(displayHostTitle('生产服务器', true, '47.100.20.30')).toBe('生产服务器');
   });
 });
 
diff --git a/crates/omnyssh-gui/ui/src/lib/stores/streamer.ts b/crates/omnyssh-gui/ui/src/lib/stores/streamer.ts
index bd51c3e..fe3c6de 100644
--- a/crates/omnyssh-gui/ui/src/lib/stores/streamer.ts
+++ b/crates/omnyssh-gui/ui/src/lib/stores/streamer.ts
@@ -123,17 +123,45 @@ function fakeDomain(host: string): string {
   return `${word}${n}.${tld}`;
 }
 
-/** A disguised address for `hostname`, shaped like the original (IPv4 → IPv4, IPv6 →
- *  IPv6, domain → domain with the same TLD) and stable for a given input. */
+/** A disguised address for `hostname`: masks IP and hostnames to 127.0.0.1 (or ::1 for IPv6). */
 export function maskHostname(hostname: string): string {
   const h = hostname.trim();
   if (!h) return hostname;
-  if (isIpv4(h)) return fakeIpv4(h);
-  if (h.includes(':')) return fakeIpv6(h);
-  return fakeDomain(h);
+  if (h.includes(':')) return '::1';
+  return '127.0.0.1';
 }
 
 /** The address to render for a host: disguised when streamer mode is on, else the real one. */
 export function displayHostname(hostname: string, streamerOn: boolean): string {
   return streamerOn ? maskHostname(hostname) : hostname;
 }
+
+function looksLikeHostOrIp(str: string): boolean {
+  if (isIpv4(str) || str.includes(':')) return true;
+  if (str.includes('.') && !str.includes(' ') && /^[a-zA-Z0-9.-]+$/.test(str)) return true;
+  return false;
+}
+
+/** Masks a username for streamer/privacy mode to 'admin'. */
+export function maskUser(user: string): string {
+  const u = user.trim();
+  if (!u) return user;
+  return 'admin';
+}
+
+/** The username to render: disguised when streamer mode is on, else the real one. */
+export function displayUser(user: string, streamerOn: boolean): string {
+  return streamerOn ? maskUser(user) : user;
+}
+
+/** The host title/name to render: disguised when streamer mode is on and the name is an IP/hostname/domain or matches the host address. */
+export function displayHostTitle(name: string, streamerOn: boolean, hostname?: string): string {
+  if (!streamerOn) return name;
+  const n = name.trim();
+  if (!n) return name;
+  if (looksLikeHostOrIp(n) || (hostname && n.toLowerCase() === hostname.trim().toLowerCase())) {
+    return maskHostname(n);
+  }
+  return name;
+}
+
diff --git a/crates/omnyssh-gui/ui/src/routes/+layout.svelte b/crates/omnyssh-gui/ui/src/routes/+layout.svelte
index d29b9e5..9f6d8c9 100644
--- a/crates/omnyssh-gui/ui/src/routes/+layout.svelte
+++ b/crates/omnyssh-gui/ui/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
   import { sidebarCollapsed } from '$lib/stores/ui';
   import { streamerMode } from '$lib/stores/streamer';
   import { refreshInterval, driveMetricsRefresh } from '$lib/stores/settings';
+  import { locale } from '$lib/i18n';
   import { lastError } from '$lib/stores/notifications';
 
   let { children } = $props();
@@ -20,20 +21,26 @@
     void sidebarCollapsed.hydrate();
     void streamerMode.hydrate();
     void refreshInterval.hydrate();
-    // Force a metric refresh on the user's interval; re-arms when the interval changes.
-    const stopRefresh = driveMetricsRefresh(() => {
-      void refreshMetrics().catch(() => {});
-    });
+    void locale.hydrate();
+    let stopRefresh = () => {};
     // No-op outside Tauri (e.g. a plain `vite preview`); the shell still mounts.
     // Dispose even if the layout unmounts before the subscription resolves. Start
     // the pollers only once listeners are attached, so no status event is missed.
-    startEventBridge()
-      .then((off) => {
-        if (disposed) return off();
-        stop = off;
-        reloadHosts().catch((err) => lastError.set(err instanceof Error ? err.message : String(err)));
-      })
-      .catch(() => {});
+    if (typeof window !== 'undefined' && !('__TAURI_INTERNALS__' in window)) {
+      import('$lib/demo/demoData').then(({ seedDemoData }) => seedDemoData());
+    } else {
+      // Force a metric refresh on the user's interval; re-arms when the interval changes.
+      stopRefresh = driveMetricsRefresh(() => {
+        void refreshMetrics().catch(() => {});
+      });
+      startEventBridge()
+        .then((off) => {
+          if (disposed) return off();
+          stop = off;
+          reloadHosts().catch((err) => lastError.set(err instanceof Error ? err.message : String(err)));
+        })
+        .catch(() => {});
+    }
     return () => {
       disposed = true;
       stop?.();
diff --git a/crates/omnyssh-gui/ui/src/routes/+page.svelte b/crates/omnyssh-gui/ui/src/routes/+page.svelte
index 8e49fd9..336e024 100644
--- a/crates/omnyssh-gui/ui/src/routes/+page.svelte
+++ b/crates/omnyssh-gui/ui/src/routes/+page.svelte
@@ -17,6 +17,7 @@
   import SftpView from '$lib/screens/SftpView.svelte';
 
   onMount(async () => {
+    if (typeof window !== 'undefined' && !('__TAURI_INTERNALS__' in window)) return;
     try {
       hosts.set(await listHosts());
     } catch (err) {