wrightkit · Teakowa · Sep 27, 2026
diff --git a/README.md b/README.md
@@ -29,8 +29,11 @@ that a capability ships. Describe direction (for example the intent-driven
 agent loop) as direction, not as current behavior. Keep internal terms such as
 WIR, HIR, frontend, and provider out of primary homepage messaging.
 
-All copy, navigation, and support claims live in `src/lib/site.ts`. The hero
-terminal shows real `wright` output; refresh it when the CLI output changes.
+English copy, navigation, and support claims live in `src/lib/site.ts`; the
+Simplified Chinese translation lives in `src/lib/site.zh-CN.ts`. `/` is the
+English homepage and `/zh-CN` is the Simplified Chinese homepage. Keep capability
+claims aligned across both locales, while commands and CLI output remain literal.
+The hero terminal shows real `wright` output; refresh it when the CLI output changes.
 
 ## Stack
 

diff --git a/scripts/verify-build.mjs b/scripts/verify-build.mjs
@@ -41,3 +41,37 @@ for (const installer of installers) {
 		process.exit(1);
 	}
 }
+
+
+const homepageChecks = [
+	{
+		name: 'English homepage',
+		paths: [resolve(ROOT_DIR, 'build/index.html')],
+		lang: 'en',
+		marker: 'Workshop tooling that shows its work.'
+	},
+	{
+		name: 'Simplified Chinese homepage',
+		paths: [resolve(ROOT_DIR, 'build/zh-CN.html'), resolve(ROOT_DIR, 'build/zh-CN/index.html')],
+		lang: 'zh-CN',
+		marker: '让判断过程清楚可见的 Workshop 工具。'
+	}
+];
+
+for (const page of homepageChecks) {
+	const path = page.paths.find((candidate) => existsSync(candidate));
+	if (!path) {
+		console.error(`[verify-build] Error: ${page.name} was not prerendered.`);
+		process.exit(1);
+	}
+
+	const content = readFileSync(path, 'utf8');
+	if (!content.includes(`<html lang="${page.lang}">`)) {
+		console.error(`[verify-build] Error: ${page.name} has the wrong html lang attribute.`);
+		process.exit(1);
+	}
+	if (!content.includes(page.marker)) {
+		console.error(`[verify-build] Error: ${page.name} is missing localized homepage copy.`);
+		process.exit(1);
+	}
+}
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-locale-placeholder>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -0,0 +1,14 @@
+import type { Handle } from '@sveltejs/kit';
+import { contentForPath } from '$lib/i18n';
+
+export const handle: Handle = ({ event, resolve }) => {
+	const lang = contentForPath(event.url.pathname).language.htmlLang;
+
+	return resolve(event, {
+		transformPageChunk: ({ html }) =>
+			html.replace(
+				'<html lang="en" data-locale-placeholder>',
+				`<html lang="${lang}">`
+			)
+	});
+};
diff --git a/src/lib/components/AgentsSection.svelte b/src/lib/components/AgentsSection.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Section from './Section.svelte';
-	import { agents } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let agents = $derived(contentForPath(page.url.pathname).agents);
 </script>
 
 <Section id="agents" eyebrow={agents.eyebrow} title={agents.title} lead={agents.lead}>

diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	let { text, label = 'Copy' }: { text: string; label?: string } = $props();
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let { text, label, copiedLabel }: { text: string; label?: string; copiedLabel?: string } = $props();
+	let ui = $derived(contentForPath(page.url.pathname).ui);
+	let resolvedLabel = $derived(label ?? ui.copy);
+	let resolvedCopiedLabel = $derived(copiedLabel ?? ui.copiedToClipboard);
 
 	let copied = $state(false);
 	let timeoutId: ReturnType<typeof setTimeout> | undefined;
@@ -40,8 +46,8 @@
 		? 'bg-accent-500/15 text-accent-400'
 		: 'bg-ink-800/80 text-ink-300 hover:bg-ink-700 hover:text-ink-50'}"
 	onclick={handleCopy}
-	aria-label={label}
-	title={label}
+	aria-label={resolvedLabel}
+	title={resolvedLabel}
 >
 	{#if copied}
 		<svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -53,5 +59,5 @@
 			<path d="M3.5 10.5V4.5a1 1 0 0 1 1-1h6" />
 		</svg>
 	{/if}
-	<span class="sr-only" aria-live="polite">{copied ? 'Copied to clipboard' : ''}</span>
+	<span class="sr-only" aria-live="polite">{copied ? resolvedCopiedLabel : ''}</span>
 </button>
diff --git a/src/lib/components/EcosystemSection.svelte b/src/lib/components/EcosystemSection.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Section from './Section.svelte';
-	import { ecosystem } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let ecosystem = $derived(contentForPath(page.url.pathname).ecosystem);
 </script>
 
 <Section id="ecosystem" eyebrow={ecosystem.eyebrow} title={ecosystem.title} lead={ecosystem.lead}>

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import Wordmark from './Wordmark.svelte';
-	import { site, footer } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let content = $derived(contentForPath(page.url.pathname));
+	let site = $derived(content.site);
+	let footer = $derived(content.footer);
 </script>
 
 <footer class="border-t border-ink-800/70 pb-[max(2.5rem,calc(1.5rem+env(safe-area-inset-bottom)))] pt-8 sm:pt-10">

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -5,7 +5,13 @@
 	import { MediaQuery } from 'svelte/reactivity';
 	import Wordmark from './Wordmark.svelte';
 	import ThemeSwitcher from './ThemeSwitcher.svelte';
-	import { nav } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let content = $derived(contentForPath(page.url.pathname));
+	let nav = $derived(content.nav);
+	let ui = $derived(content.ui);
+	let language = $derived(content.language);
 
 	let isOpen = $state(false);
 	let current = $state('');
@@ -67,7 +73,7 @@
 		<Wordmark />
 
 		<div class="hidden md:flex md:items-center md:gap-3">
-		<nav aria-label="Primary" class="flex items-center gap-0.5">
+		<nav aria-label={ui.primaryNavigation} class="flex items-center gap-0.5">
 			{#each nav as item (item.href)}
 				<a
 					href={item.href}
@@ -82,6 +88,15 @@
 				</a>
 			{/each}
 		</nav>
+		<a
+			href={language.switchHref}
+			hreflang={language.switchHreflang}
+			lang={language.switchHreflang}
+			aria-label={language.switchAriaLabel}
+			class="inline-flex min-h-9 items-center rounded-full px-3 text-sm font-medium text-ink-400 transition-colors duration-150 hover:text-ink-50"
+		>
+			{language.switchLabel}
+		</a>
 		<ThemeSwitcher />
 		</div>
 
@@ -90,7 +105,7 @@
 			class="relative -mr-2 flex h-11 w-11 touch-manipulation items-center justify-center rounded-full text-ink-200 transition-transform duration-100 active:scale-[0.92] md:hidden"
 			aria-expanded={isOpen}
 			aria-controls="mobile-nav"
-			aria-label={isOpen ? 'Close navigation menu' : 'Open navigation menu'}
+			aria-label={isOpen ? ui.closeNavigationMenu : ui.openNavigationMenu}
 			onclick={() => (isOpen = !isOpen)}
 		>
 			<span class="relative block h-3 w-[1.125rem]" aria-hidden="true">
@@ -115,7 +130,7 @@
 		<button
 			type="button"
 			class="fixed inset-x-0 bottom-0 top-[calc(3.5rem+env(safe-area-inset-top))] z-30 bg-scrim md:hidden"
-			aria-label="Close navigation menu"
+			aria-label={ui.closeNavigationMenu}
 			tabindex="-1"
 			onclick={closeMenu}
 			transition:fade={{ duration: 200 }}
@@ -125,11 +140,11 @@
 			class="fixed inset-x-0 top-[calc(3.5rem+env(safe-area-inset-top))] z-40 max-h-[calc(100dvh-3.5rem-env(safe-area-inset-top))] overflow-y-auto rounded-b-card bg-ink-900/95 shadow-2xl shadow-black/30 backdrop-blur-2xl md:hidden"
 			role="dialog"
 			aria-modal="true"
-			aria-label="Navigation"
+			aria-label={ui.navigation}
 			transition:fly={sheetMotion}
 		>
 			<div class="container-site pb-[max(1.5rem,calc(1rem+env(safe-area-inset-bottom)))] pt-1">
-				<nav class="flex flex-col" aria-label="Mobile primary">
+				<nav class="flex flex-col" aria-label={ui.mobilePrimaryNavigation}>
 					{#each nav as item (item.href)}
 						<a
 							href={item.href}
@@ -163,10 +178,23 @@
 				</nav>
 
 				<div class="mt-5 flex items-center justify-between gap-4">
-					<span class="text-sm font-medium text-ink-400">Appearance</span>
+					<span class="text-sm font-medium text-ink-400">{ui.language}</span>
+					<a
+						href={language.switchHref}
+						hreflang={language.switchHreflang}
+						lang={language.switchHreflang}
+						aria-label={language.switchAriaLabel}
+						class="text-link text-sm font-medium text-ink-200"
+						onclick={closeMenu}
+					>
+						{language.switchLabel}
+					</a>
+				</div>
+				<div class="mt-4 flex items-center justify-between gap-4">
+					<span class="text-sm font-medium text-ink-400">{ui.appearance}</span>
 					<div class="w-56"><ThemeSwitcher labelled /></div>
 				</div>
-				<a href="#install" class="btn btn-primary mt-5 w-full" onclick={closeMenu}>Install Wright</a>
+				<a href="#install" class="btn btn-primary mt-5 w-full" onclick={closeMenu}>{ui.installWright}</a>
 			</div>
 		</div>
 	{/if}

diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
 	import Terminal from './Terminal.svelte';
 	import CopyButton from './CopyButton.svelte';
-	import { hero } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let content = $derived(contentForPath(page.url.pathname));
+	let hero = $derived(content.hero);
+	let ui = $derived(content.ui);
 </script>
 
 <section class="relative overflow-hidden">
@@ -34,7 +39,7 @@
 				>
 					<span class="shrink-0 select-none font-mono text-xs text-ink-600" aria-hidden="true">$</span>
 					<code class="min-w-0 flex-1 truncate font-mono text-xs text-ink-200">{hero.quickInstall}</code>
-					<CopyButton text={hero.quickInstall} label="Copy install command" />
+					<CopyButton text={hero.quickInstall} label={ui.copyInstallCommand} copiedLabel={ui.copiedToClipboard} />
 				</div>
 			</div>
 

diff --git a/src/lib/components/InstallSection.svelte b/src/lib/components/InstallSection.svelte
@@ -2,9 +2,15 @@
 	import { onMount, tick } from 'svelte';
 	import Section from './Section.svelte';
 	import CopyButton from './CopyButton.svelte';
-	import { install } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+	import { install as installShape } from '$lib/site';
 
-	type TargetId = (typeof install.targets)[number]['id'];
+	let content = $derived(contentForPath(page.url.pathname));
+	let install = $derived(content.install);
+	let ui = $derived(content.ui);
+
+	type TargetId = (typeof installShape.targets)[number]['id'];
 
 	let activeId = $state<TargetId>('macos');
 	let active = $derived(install.targets.find((t) => t.id === activeId) ?? install.targets[0]);
@@ -66,7 +72,7 @@
 			<div
 				class="relative inline-flex gap-0.5 rounded-full bg-ink-900 p-1 ring-1 ring-inset ring-ink-50/[0.06]"
 				role="tablist"
-				aria-label="Platform"
+				aria-label={ui.platform}
 			>
 				<span
 					data-motion="move"
@@ -111,15 +117,15 @@
 
 			<div class="mt-3 flex items-start gap-2 rounded-control bg-ink-950/80 p-1.5 pl-3.5 ring-1 ring-inset ring-ink-800/80">
 				<pre class="min-w-0 flex-1 overflow-x-auto py-1.5 font-mono text-[0.8125rem] leading-relaxed text-ink-100"><code>{active.command}</code></pre>
-				<CopyButton text={active.command} label="Copy command" />
+				<CopyButton text={active.command} label={ui.copyCommand} copiedLabel={ui.copiedToClipboard} />
 			</div>
 			<p class="mt-3 text-sm leading-relaxed text-ink-500">{active.note}</p>
 
 			<div class="mt-6 border-t border-ink-800/80 pt-5">
 				<h4 class="text-sm font-medium text-ink-300">{active.altMethod}</h4>
 				<div class="mt-2.5 flex items-start gap-2 rounded-control bg-ink-950/60 p-1.5 pl-3.5">
 					<pre class="min-w-0 flex-1 overflow-x-auto py-1.5 font-mono text-xs leading-relaxed text-ink-300"><code>{active.altCommand}</code></pre>
-					<CopyButton text={active.altCommand} label="Copy command" />
+					<CopyButton text={active.altCommand} label={ui.copyCommand} copiedLabel={ui.copiedToClipboard} />
 				</div>
 			</div>
 		</div>

diff --git a/src/lib/components/LanguagesSection.svelte b/src/lib/components/LanguagesSection.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import Section from './Section.svelte';
-	import { languages, type SupportTone } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+	import { type SupportTone } from '$lib/site';
+
+	let content = $derived(contentForPath(page.url.pathname));
+	let languages = $derived(content.languages);
+	let ui = $derived(content.ui);
 
 	const badge: Record<SupportTone, string> = {
 		supported: 'bg-accent-500/15 text-accent-400',
@@ -35,7 +41,7 @@
 			<p class="mt-2 text-[0.9375rem] leading-relaxed text-pretty text-ink-400">
 				{languages.compatibility.lead}
 			</p>
-			<ul class="mt-5 flex flex-wrap gap-2" aria-label="Compared structure">
+			<ul class="mt-5 flex flex-wrap gap-2" aria-label={ui.comparedStructure}>
 				{#each languages.compatibility.criteria as criterion (criterion)}
 					<li class="rounded-full bg-ink-950/80 px-3 py-1 text-[0.8125rem] text-ink-200 ring-1 ring-inset ring-ink-800">
 						{criterion}

diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { terminal } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let content = $derived(contentForPath(page.url.pathname));
+	let terminal = $derived(content.terminal);
+	let ui = $derived(content.ui);
 
 	// The terminal stays dark in both appearances, so it uses fixed colors
 	// rather than the theme-aware ink tokens.
@@ -25,7 +30,7 @@
 	</figcaption>
 	<pre
 		class="whitespace-pre-wrap break-words px-4 pb-5 pt-1 font-mono text-[0.75rem] leading-[1.7] sm:px-5 sm:text-[0.8125rem]"
-		aria-label="Example wright session"><code
+		aria-label={ui.terminalExample}><code
 			>{#each terminal.lines as line, i (i)}<span class="block min-h-[1.7em] {tone[line.kind]}"
 					>{#if line.kind === 'prompt'}<span class="select-none text-[#66665f]">$ </span
 						>{/if}{line.text}</span

diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
 	import { theme, initTheme, setTheme, type ThemePreference } from '$lib/theme.svelte';
 
 	let { labelled = false }: { labelled?: boolean } = $props();
 
-	const options: { value: ThemePreference; label: string }[] = [
-		{ value: 'system', label: 'System' },
-		{ value: 'light', label: 'Light' },
-		{ value: 'dark', label: 'Dark' }
-	];
+	let ui = $derived(contentForPath(page.url.pathname).ui);
+	let options = $derived<{ value: ThemePreference; label: string }[]>([
+		{ value: 'system', label: ui.themeSystem },
+		{ value: 'light', label: ui.themeLight },
+		{ value: 'dark', label: ui.themeDark }
+	]);
 	let buttons: HTMLButtonElement[] = $state([]);
 
 	function onKeydown(e: KeyboardEvent, index: number) {
@@ -25,7 +28,7 @@
 
 <div
 	role="radiogroup"
-	aria-label="Appearance"
+	aria-label={ui.appearance}
 	class="inline-flex gap-0.5 rounded-full bg-ink-900 p-0.5 ring-1 ring-inset ring-ink-800/60 {labelled
 		? 'w-full'
 		: ''}"

diff --git a/src/lib/components/ToolingSection.svelte b/src/lib/components/ToolingSection.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Section from './Section.svelte';
-	import { tooling } from '$lib/site';
+	import { page } from '$app/state';
+	import { contentForPath } from '$lib/i18n';
+
+	let tooling = $derived(contentForPath(page.url.pathname).tooling);
 </script>
 
 <Section id="tooling" eyebrow={tooling.eyebrow} title={tooling.title} lead={tooling.lead}>