@ait-co/devtools 0.1.17 → 0.1.19

package/dist/panel/index.js

@@ -1,3 +1,372 @@
+//#region src/i18n/en.ts
+const en = {
+	"panel.title": "AIT DevTools",
+	"panel.toggle.title": "AIT DevTools",
+	"panel.close": "Close",
+	"panel.editMode.on": "EDIT",
+	"panel.editMode.off": "READ-ONLY",
+	"panel.editMode.toggleTitle": "Toggle panel edit mode",
+	"panel.tabError": "Error rendering \"{tab}\" tab.",
+	"panel.tab.env": "Environment",
+	"panel.tab.presets": "Presets",
+	"panel.tab.viewport": "Viewport",
+	"panel.tab.permissions": "Permissions",
+	"panel.tab.notifications": "Notifications",
+	"panel.tab.location": "Location",
+	"panel.tab.device": "Device",
+	"panel.tab.iap": "IAP",
+	"panel.tab.ads": "Ads",
+	"panel.tab.events": "Events",
+	"panel.tab.analytics": "Analytics",
+	"panel.tab.storage": "Storage",
+	"common.readOnly": "Read-only — mock responses are controlled at build time.",
+	"toast.consent.title": "Send anonymous usage stats?",
+	"toast.consent.body": "We collect anonymous events only, to improve the tool. You can turn this off anytime in the Environment tab.",
+	"toast.consent.learnMore": "Learn more",
+	"toast.consent.accept": "Yes, send",
+	"toast.consent.deny": "No, thanks",
+	"env.section.platform": "Platform",
+	"env.row.os": "OS",
+	"env.row.appVersion": "App Version",
+	"env.row.environment": "Environment",
+	"env.row.locale": "Locale",
+	"env.section.network": "Network",
+	"env.row.networkStatus": "Status",
+	"env.section.safeArea": "Safe Area Insets",
+	"env.row.safeArea.top": "Top",
+	"env.row.safeArea.bottom": "Bottom",
+	"env.telemetry.section": "Telemetry",
+	"env.telemetry.row": "Telemetry",
+	"env.telemetry.on": "On",
+	"env.telemetry.off": "Off",
+	"env.telemetry.turnOn": "Turn on",
+	"env.telemetry.turnOff": "Turn off",
+	"env.telemetry.anonIdLabel": "anon_id: {value}",
+	"env.telemetry.anonIdNotSet": "(not yet set)",
+	"env.telemetry.anonIdCopyTitle": "Click to copy full anon_id",
+	"env.telemetry.deleteBtn": "Delete my data",
+	"env.telemetry.deleting": "Deleting…",
+	"env.telemetry.deleted": "Deleted",
+	"env.telemetry.deleteFailedRetry": "Delete failed (please retry)",
+	"env.telemetry.deleteFailed": "Delete failed",
+	"env.telemetry.privacyLink": "Privacy policy",
+	"env.section.language": "Language",
+	"env.language.row": "Language",
+	"env.language.ko": "한국어",
+	"env.language.en": "English",
+	"permissions.section.device": "Device Permissions",
+	"location.section.current": "Current Location",
+	"location.row.latitude": "Latitude",
+	"location.row.longitude": "Longitude",
+	"location.row.accuracy": "Accuracy",
+	"device.section.modes": "Device API Modes",
+	"device.row.camera": "Camera",
+	"device.row.photos": "Photos",
+	"device.row.location": "Location",
+	"device.row.network": "Network",
+	"device.row.clipboard": "Clipboard",
+	"device.section.mockImages": "Mock Images ({count})",
+	"device.btn.add": "+ Add",
+	"device.btn.useDefaults": "Use defaults",
+	"device.btn.clear": "Clear",
+	"device.prompt.camera.title": "Camera Prompt — Select an image",
+	"device.prompt.photos.title": "Photos Prompt — Select images",
+	"device.prompt.location.title": "Location Prompt — Enter coordinates",
+	"device.prompt.locationUpdate.title": "Location Update — Send coordinates",
+	"device.prompt.fallbackTitle": "Prompt: {type}",
+	"device.prompt.label.lat": "Lat",
+	"device.prompt.label.lng": "Lng",
+	"device.prompt.send": "Send",
+	"device.prompt.cancel": "Cancel",
+	"viewport.section.device": "Device",
+	"viewport.row.preset": "Preset",
+	"viewport.row.orientation": "Orientation",
+	"viewport.row.notchSide": "Notch side",
+	"viewport.section.custom": "Custom size",
+	"viewport.row.width": "Width (px)",
+	"viewport.row.height": "Height (px)",
+	"viewport.section.appearance": "Appearance",
+	"viewport.row.showFrame": "Show frame",
+	"viewport.row.showAitNavBar": "Show Apps in Toss nav bar",
+	"viewport.row.navBarType": "Nav bar type",
+	"viewport.status.noConstraint": "No viewport constraint — body fills the window.",
+	"viewport.status.cssPhysical": "CSS / physical",
+	"viewport.status.safeArea": "Safe area",
+	"viewport.status.aitNavBar": "AIT nav bar",
+	"viewport.status.aitNavBarValue": "{height}px (excl. SafeArea) · {type}",
+	"viewport.orientation.autoSuffix": "{orient} (auto)",
+	"iap.section.simulator": "IAP Simulator",
+	"iap.row.nextResult": "Next Purchase Result",
+	"iap.section.tossPay": "TossPay",
+	"iap.row.tossPayResult": "Next Payment Result",
+	"iap.section.pending": "Pending Orders ({count})",
+	"iap.empty.pending": "(no pending orders)",
+	"iap.section.completed": "Completed Orders ({count})",
+	"iap.empty.completed": "(no completed orders)",
+	"iap.btn.complete": "Complete",
+	"iap.label.pending": "PENDING",
+	"events.section.navigation": "Navigation Events",
+	"events.btn.triggerBack": "Trigger Back Event",
+	"events.btn.triggerHome": "Trigger Home Event",
+	"events.section.login": "Login",
+	"events.row.loggedIn": "Logged In",
+	"events.row.tossLoginIntegrated": "Toss Login Integrated",
+	"analytics.section.log": "Analytics Log ({count})",
+	"analytics.btn.clear": "Clear",
+	"storage.section.title": "Storage ({count} items)",
+	"storage.btn.clearAll": "Clear All",
+	"storage.empty": "No items in storage",
+	"presets.section.builtIn": "Built-in scenarios",
+	"presets.section.saved": "Saved presets ({count})",
+	"presets.section.save": "Save",
+	"presets.save.description": "Capture network / permissions / auth / IAP / ads / payment slices.",
+	"presets.btn.saveCurrent": "Save current as preset",
+	"presets.btn.apply": "Apply",
+	"presets.btn.reApply": "Re-apply",
+	"presets.btn.delete": "Delete",
+	"presets.empty.saved": "No saved presets yet.",
+	"presets.empty.builtIn": "No built-in presets.",
+	"presets.prompt.label": "Preset label?",
+	"presets.confirm.delete": "Delete preset \"{label}\"?",
+	"ads.section.state": "Ads State",
+	"ads.row.isLoaded": "isLoaded",
+	"ads.row.forceNoFill": "Force \"no fill\"",
+	"ads.empty.events": "No events yet",
+	"ads.section.googleAdMob": "GoogleAdMob",
+	"ads.section.tossAds": "TossAds",
+	"ads.section.fullScreenAd": "FullScreenAd",
+	"ads.btn.load": "Load",
+	"ads.btn.show": "Show",
+	"notifications.section.title": "requestNotificationAgreement",
+	"notifications.option.newAgreement": "newAgreement (first-time agree)",
+	"notifications.option.alreadyAgreed": "alreadyAgreed (already opted-in)",
+	"notifications.option.agreementRejected": "agreementRejected (user declined)"
+};
+//#endregion
+//#region src/i18n/ko.ts
+const ko = {
+	"panel.title": "AIT DevTools",
+	"panel.toggle.title": "AIT DevTools",
+	"panel.close": "Close",
+	"panel.editMode.on": "EDIT",
+	"panel.editMode.off": "READ-ONLY",
+	"panel.editMode.toggleTitle": "패널 편집 모드 전환",
+	"panel.tabError": "\"{tab}\" 탭 렌더링 중 오류가 발생했습니다.",
+	"panel.tab.env": "Environment",
+	"panel.tab.presets": "Presets",
+	"panel.tab.viewport": "Viewport",
+	"panel.tab.permissions": "Permissions",
+	"panel.tab.notifications": "Notifications",
+	"panel.tab.location": "Location",
+	"panel.tab.device": "Device",
+	"panel.tab.iap": "IAP",
+	"panel.tab.ads": "Ads",
+	"panel.tab.events": "Events",
+	"panel.tab.analytics": "Analytics",
+	"panel.tab.storage": "Storage",
+	"common.readOnly": "읽기 전용 — mock 응답은 빌드 타임에 고정됩니다.",
+	"toast.consent.title": "익명 사용 통계를 보낼까요?",
+	"toast.consent.body": "도구 개선을 위해 익명 이벤트만 수집해요. 언제든 환경 탭에서 끌 수 있어요.",
+	"toast.consent.learnMore": "더 알아보기",
+	"toast.consent.accept": "네, 보낼게요",
+	"toast.consent.deny": "아니요",
+	"env.section.platform": "Platform",
+	"env.row.os": "OS",
+	"env.row.appVersion": "App Version",
+	"env.row.environment": "Environment",
+	"env.row.locale": "Locale",
+	"env.section.network": "Network",
+	"env.row.networkStatus": "Status",
+	"env.section.safeArea": "Safe Area Insets",
+	"env.row.safeArea.top": "Top",
+	"env.row.safeArea.bottom": "Bottom",
+	"env.telemetry.section": "Telemetry",
+	"env.telemetry.row": "Telemetry",
+	"env.telemetry.on": "On",
+	"env.telemetry.off": "Off",
+	"env.telemetry.turnOn": "Turn on",
+	"env.telemetry.turnOff": "Turn off",
+	"env.telemetry.anonIdLabel": "anon_id: {value}",
+	"env.telemetry.anonIdNotSet": "(not yet set)",
+	"env.telemetry.anonIdCopyTitle": "전체 anon_id 복사",
+	"env.telemetry.deleteBtn": "내 데이터 삭제",
+	"env.telemetry.deleting": "삭제 중…",
+	"env.telemetry.deleted": "삭제 완료",
+	"env.telemetry.deleteFailedRetry": "삭제 실패 (다시 시도해주세요)",
+	"env.telemetry.deleteFailed": "삭제 실패",
+	"env.telemetry.privacyLink": "개인정보 처리방침",
+	"env.section.language": "Language",
+	"env.language.row": "Language",
+	"env.language.ko": "한국어",
+	"env.language.en": "English",
+	"permissions.section.device": "Device Permissions",
+	"location.section.current": "Current Location",
+	"location.row.latitude": "Latitude",
+	"location.row.longitude": "Longitude",
+	"location.row.accuracy": "Accuracy",
+	"device.section.modes": "Device API Modes",
+	"device.row.camera": "Camera",
+	"device.row.photos": "Photos",
+	"device.row.location": "Location",
+	"device.row.network": "Network",
+	"device.row.clipboard": "Clipboard",
+	"device.section.mockImages": "Mock Images ({count})",
+	"device.btn.add": "+ Add",
+	"device.btn.useDefaults": "Use defaults",
+	"device.btn.clear": "Clear",
+	"device.prompt.camera.title": "Camera Prompt — 이미지를 선택하세요",
+	"device.prompt.photos.title": "Photos Prompt — 이미지를 선택하세요",
+	"device.prompt.location.title": "Location Prompt — 좌표 입력",
+	"device.prompt.locationUpdate.title": "Location Update — 좌표 전송",
+	"device.prompt.fallbackTitle": "Prompt: {type}",
+	"device.prompt.label.lat": "Lat",
+	"device.prompt.label.lng": "Lng",
+	"device.prompt.send": "Send",
+	"device.prompt.cancel": "Cancel",
+	"viewport.section.device": "Device",
+	"viewport.row.preset": "Preset",
+	"viewport.row.orientation": "Orientation",
+	"viewport.row.notchSide": "Notch side",
+	"viewport.section.custom": "Custom size",
+	"viewport.row.width": "Width (px)",
+	"viewport.row.height": "Height (px)",
+	"viewport.section.appearance": "Appearance",
+	"viewport.row.showFrame": "Show frame",
+	"viewport.row.showAitNavBar": "Apps in Toss 내비게이션 바 표시",
+	"viewport.row.navBarType": "Nav bar type",
+	"viewport.status.noConstraint": "뷰포트 제약 없음 — body가 창을 가득 채웁니다.",
+	"viewport.status.cssPhysical": "CSS / physical",
+	"viewport.status.safeArea": "Safe area",
+	"viewport.status.aitNavBar": "AIT nav bar",
+	"viewport.status.aitNavBarValue": "{height}px (excl. SafeArea) · {type}",
+	"viewport.orientation.autoSuffix": "{orient} (auto)",
+	"iap.section.simulator": "IAP Simulator",
+	"iap.row.nextResult": "Next Purchase Result",
+	"iap.section.tossPay": "TossPay",
+	"iap.row.tossPayResult": "Next Payment Result",
+	"iap.section.pending": "Pending Orders ({count})",
+	"iap.empty.pending": "(대기 중인 주문 없음)",
+	"iap.section.completed": "Completed Orders ({count})",
+	"iap.empty.completed": "(완료된 주문 없음)",
+	"iap.btn.complete": "Complete",
+	"iap.label.pending": "PENDING",
+	"events.section.navigation": "Navigation Events",
+	"events.btn.triggerBack": "Back 이벤트 발생",
+	"events.btn.triggerHome": "Home 이벤트 발생",
+	"events.section.login": "Login",
+	"events.row.loggedIn": "Logged In",
+	"events.row.tossLoginIntegrated": "Toss Login Integrated",
+	"analytics.section.log": "Analytics Log ({count})",
+	"analytics.btn.clear": "Clear",
+	"storage.section.title": "Storage ({count} items)",
+	"storage.btn.clearAll": "Clear All",
+	"storage.empty": "저장된 항목이 없습니다",
+	"presets.section.builtIn": "Built-in scenarios",
+	"presets.section.saved": "Saved presets ({count})",
+	"presets.section.save": "Save",
+	"presets.save.description": "network / permissions / auth / IAP / ads / payment 슬라이스를 캡처합니다.",
+	"presets.btn.saveCurrent": "현재 상태를 프리셋으로 저장",
+	"presets.btn.apply": "Apply",
+	"presets.btn.reApply": "Re-apply",
+	"presets.btn.delete": "Delete",
+	"presets.empty.saved": "저장된 프리셋이 아직 없습니다.",
+	"presets.empty.builtIn": "내장 프리셋이 없습니다.",
+	"presets.prompt.label": "프리셋 라벨을 입력하세요",
+	"presets.confirm.delete": "\"{label}\" 프리셋을 삭제할까요?",
+	"ads.section.state": "Ads State",
+	"ads.row.isLoaded": "isLoaded",
+	"ads.row.forceNoFill": "강제 \"no fill\"",
+	"ads.empty.events": "아직 이벤트가 없습니다",
+	"ads.section.googleAdMob": "GoogleAdMob",
+	"ads.section.tossAds": "TossAds",
+	"ads.section.fullScreenAd": "FullScreenAd",
+	"ads.btn.load": "Load",
+	"ads.btn.show": "Show",
+	"notifications.section.title": "requestNotificationAgreement",
+	"notifications.option.newAgreement": "newAgreement (최초 동의)",
+	"notifications.option.alreadyAgreed": "alreadyAgreed (이미 동의됨)",
+	"notifications.option.agreementRejected": "agreementRejected (사용자 거절)"
+};
+//#endregion
+//#region src/i18n/index.ts
+/**
+* Vanilla TS i18n for the floating DevTools panel.
+*
+* Public surface:
+*   - `t(key, vars?)` — look up a UI string, with `{name}` placeholder
+*     interpolation. Falls back to the key itself if a translation is missing.
+*   - `getLocale()` / `setLocale(locale)` — read/persist the active locale.
+*     `setLocale` dispatches `__ait:localechange` so the panel can remount.
+*   - `detectLocale()` — first-run heuristic from `navigator.language`.
+*
+* `ko` is the source of truth (keys are typed from it). `en` is also a full
+* `Record<StringKey, string>` (devtools is developer-facing, en is a real
+* audience). The `Partial` lookup table preserves the runtime `?? key` safety
+* net even though we ship complete catalogs today.
+*/
+const LOCALE_STORAGE_KEY = "__ait_locale";
+const LOCALE_CHANGE_EVENT = "__ait:localechange";
+const tables = {
+	ko,
+	en
+};
+let currentLocale = null;
+function safeReadStorage() {
+	if (typeof localStorage === "undefined") return null;
+	try {
+		const raw = localStorage.getItem(LOCALE_STORAGE_KEY);
+		if (raw === "ko" || raw === "en") return raw;
+	} catch {}
+	return null;
+}
+function safeWriteStorage(locale) {
+	if (typeof localStorage === "undefined") return;
+	try {
+		localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+	} catch {}
+}
+/**
+* Read `navigator.language` and decide a locale. `ko` (and `ko-*`) → `'ko'`,
+* everything else → `'en'`. Pure function; does not touch storage.
+*/
+function detectLocale() {
+	if (typeof navigator === "undefined") return "en";
+	const lang = navigator.language ?? "";
+	return /^ko\b/i.test(lang) ? "ko" : "en";
+}
+/**
+* Resolve the active locale, in order:
+*   1. previously set in-memory value (set by `setLocale`)
+*   2. localStorage `__ait_locale`
+*   3. `detectLocale()` from navigator
+*/
+function getLocale() {
+	if (currentLocale) return currentLocale;
+	currentLocale = safeReadStorage() ?? detectLocale();
+	return currentLocale;
+}
+/**
+* Persist a locale choice and notify listeners. The panel listens for
+* `__ait:localechange` and re-mounts so every string re-evaluates.
+*/
+function setLocale(locale) {
+	currentLocale = locale;
+	safeWriteStorage(locale);
+	if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(LOCALE_CHANGE_EVENT));
+}
+/**
+* Look up a UI string for the current locale. Falls back to the key if missing,
+* so a forgotten key surfaces visibly rather than rendering empty.
+*/
+function t(key, vars) {
+	const raw = tables[getLocale()][key] ?? key;
+	if (!vars) return raw;
+	return raw.replace(/\{(\w+)\}/g, (match, name) => {
+		const value = vars[name];
+		return value === void 0 ? match : String(value);
+	});
+}
+//#endregion
 //#region src/mock/state.ts
 const DEFAULT_STATE = {
 	platform: "ios",
@@ -224,9 +593,6 @@ if (typeof window !== "undefined") window.__ait = aitState;
 /**
 * Consent toast UI — vanilla DOM, fixed bottom-right.
 *
-* Ko-only for now — devtools has no i18n layer.
-* TODO: revisit when/if an i18n layer is added to the panel.
-*
 * Shows once per "undecided + reprompt window cleared" session.
 * Calls onAccept / onDeny callbacks; caller is responsible for persisting state.
 */
@@ -318,26 +684,26 @@ function showConsentToast({ onAccept, onDeny }) {
 	toast.id = TOAST_ID;
 	const header = document.createElement("div");
 	header.className = "ait-toast-header";
-	header.textContent = "익명 사용 통계를 보낼까요?";
+	header.textContent = t("toast.consent.title");
 	const body = document.createElement("div");
 	body.className = "ait-toast-body";
-	body.textContent = "도구 개선을 위해 익명 이벤트만 수집해요. 언제든 환경 탭에서 끌 수 있어요.";
+	body.textContent = t("toast.consent.body");
 	const learnMore = document.createElement("a");
 	learnMore.className = "ait-toast-link";
 	learnMore.href = "https://docs.aitc.dev/privacy";
 	learnMore.target = "_blank";
 	learnMore.rel = "noopener noreferrer";
-	learnMore.textContent = "더 알아보기";
+	learnMore.textContent = t("toast.consent.learnMore");
 	const yesBtn = document.createElement("button");
 	yesBtn.className = "ait-toast-btn-primary";
-	yesBtn.textContent = "Yes, send";
+	yesBtn.textContent = t("toast.consent.accept");
 	yesBtn.addEventListener("click", () => {
 		removeToast();
 		onAccept();
 	});
 	const noBtn = document.createElement("button");
 	noBtn.className = "ait-toast-btn-secondary";
-	noBtn.textContent = "No, thanks";
+	noBtn.textContent = t("toast.consent.deny");
 	noBtn.addEventListener("click", () => {
 		removeToast();
 		onDeny();
@@ -582,7 +948,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.17";
+	return "0.1.19";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -691,7 +1057,7 @@ function inputRow(label, value, onChange, disabled = false) {
 	return h("div", { className: "ait-row" }, h("label", {}, label), input);
 }
 function monitoringNotice() {
-	return h("div", { className: "ait-monitoring-notice" }, "Read-only — mock responses are controlled at build time.");
+	return h("div", { className: "ait-monitoring-notice" }, t("common.readOnly"));
 }
 const PANEL_STYLES = `
   .ait-panel-toggle {
@@ -1671,7 +2037,7 @@ function renderPromptBanner() {
 	if (!pendingPrompt) return null;
 	const banner = h("div", { className: "ait-prompt-banner" });
 	if (pendingPrompt.type === "camera") {
-		banner.append(h("div", { className: "ait-prompt-title" }, "Camera Prompt — Select an image"));
+		banner.append(h("div", { className: "ait-prompt-title" }, t("device.prompt.camera.title")));
 		const input = h("input", {
 			type: "file",
 			accept: "image/*",
@@ -1686,7 +2052,7 @@ function renderPromptBanner() {
 		});
 		banner.appendChild(input);
 	} else if (pendingPrompt.type === "photos") {
-		banner.append(h("div", { className: "ait-prompt-title" }, "Photos Prompt — Select images"));
+		banner.append(h("div", { className: "ait-prompt-title" }, t("device.prompt.photos.title")));
 		const input = h("input", {
 			type: "file",
 			accept: "image/*",
@@ -1704,7 +2070,7 @@ function renderPromptBanner() {
 		});
 		banner.appendChild(input);
 	} else if (pendingPrompt.type === "location" || pendingPrompt.type === "location-update") {
-		banner.append(h("div", { className: "ait-prompt-title" }, pendingPrompt.type === "location" ? "Location Prompt — Enter coordinates" : "Location Update — Send coordinates"));
+		banner.append(h("div", { className: "ait-prompt-title" }, pendingPrompt.type === "location" ? t("device.prompt.location.title") : t("device.prompt.locationUpdate.title")));
 		const latInput = h("input", {
 			className: "ait-input",
 			value: String(aitState.state.location.coords.latitude),
@@ -1715,7 +2081,7 @@ function renderPromptBanner() {
 			value: String(aitState.state.location.coords.longitude),
 			style: "width:80px"
 		});
-		const sendBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Send");
+		const sendBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("device.prompt.send"));
 		sendBtn.addEventListener("click", () => {
 			const loc = {
 				coords: {
@@ -1731,12 +2097,12 @@ function renderPromptBanner() {
 			};
 			resolvePrompt(pendingPrompt.type, loc);
 		});
-		banner.append(h("div", { className: "ait-prompt-input-row" }, h("label", {}, "Lat"), latInput, h("label", {}, "Lng"), lngInput, sendBtn));
-	} else banner.append(h("div", { className: "ait-prompt-title" }, `Prompt: ${pendingPrompt.type}`));
+		banner.append(h("div", { className: "ait-prompt-input-row" }, h("label", {}, t("device.prompt.label.lat")), latInput, h("label", {}, t("device.prompt.label.lng")), lngInput, sendBtn));
+	} else banner.append(h("div", { className: "ait-prompt-title" }, t("device.prompt.fallbackTitle", { type: pendingPrompt.type })));
 	const cancelBtn = h("button", {
 		className: "ait-btn ait-btn-sm ait-btn-danger",
 		style: "margin-top:8px"
-	}, "Cancel");
+	}, t("device.prompt.cancel"));
 	cancelBtn.addEventListener("click", () => {
 		pendingPrompt = null;
 		window.dispatchEvent(new CustomEvent("__ait:prompt-cancel"));
@@ -1754,9 +2120,9 @@ function renderDeviceTab() {
 		const promptBanner = renderPromptBanner();
 		if (promptBanner) container.appendChild(promptBanner);
 	}
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device API Modes"), ...[
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("device.section.modes")), ...[
 		{
-			label: "Camera",
+			labelKey: "device.row.camera",
 			key: "camera",
 			options: [
 				"mock",
@@ -1765,7 +2131,7 @@ function renderDeviceTab() {
 			]
 		},
 		{
-			label: "Photos",
+			labelKey: "device.row.photos",
 			key: "photos",
 			options: [
 				"mock",
@@ -1774,7 +2140,7 @@ function renderDeviceTab() {
 			]
 		},
 		{
-			label: "Location",
+			labelKey: "device.row.location",
 			key: "location",
 			options: [
 				"mock",
@@ -1783,16 +2149,16 @@ function renderDeviceTab() {
 			]
 		},
 		{
-			label: "Network",
+			labelKey: "device.row.network",
 			key: "network",
 			options: ["mock", "web"]
 		},
 		{
-			label: "Clipboard",
+			labelKey: "device.row.clipboard",
 			key: "clipboard",
 			options: ["mock", "web"]
 		}
-	].map((entry) => selectRow(entry.label, entry.options, s.deviceModes[entry.key], (v) => {
+	].map((entry) => selectRow(t(entry.labelKey), entry.options, s.deviceModes[entry.key], (v) => {
 		aitState.patch("deviceModes", { [entry.key]: v });
 	}, disabled))));
 	const images = s.mockData.images;
@@ -1810,7 +2176,7 @@ function renderDeviceTab() {
 		thumb.append(img, removeBtn);
 		imageGrid.appendChild(thumb);
 	});
-	const addBtn = h("button", { className: "ait-btn-secondary" }, "+ Add");
+	const addBtn = h("button", { className: "ait-btn-secondary" }, t("device.btn.add"));
 	addBtn.addEventListener("click", () => {
 		const input = document.createElement("input");
 		input.type = "file";
@@ -1829,17 +2195,17 @@ function renderDeviceTab() {
 		input.click();
 	});
 	if (disabled) addBtn.disabled = true;
-	const defaultsBtn = h("button", { className: "ait-btn-secondary" }, "Use defaults");
+	const defaultsBtn = h("button", { className: "ait-btn-secondary" }, t("device.btn.useDefaults"));
 	defaultsBtn.addEventListener("click", () => {
 		aitState.patch("mockData", { images: [...getDefaultPlaceholderImages()] });
 	});
 	if (disabled) defaultsBtn.disabled = true;
-	const clearImagesBtn = h("button", { className: "ait-btn-secondary" }, "Clear");
+	const clearImagesBtn = h("button", { className: "ait-btn-secondary" }, t("device.btn.clear"));
 	clearImagesBtn.addEventListener("click", () => {
 		aitState.patch("mockData", { images: [] });
 	});
 	if (disabled) clearImagesBtn.disabled = true;
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Mock Images (${images.length})`), imageGrid, h("div", { className: "ait-btn-row" }, addBtn, defaultsBtn, clearImagesBtn)));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("device.section.mockImages", { count: images.length })), imageGrid, h("div", { className: "ait-btn-row" }, addBtn, defaultsBtn, clearImagesBtn)));
 	return container;
 }
 //#endregion
@@ -1956,7 +2322,7 @@ function statusRow(label, value) {
 }
 function lastEventLine() {
 	const last = aitState.state.ads.lastEvent;
-	if (!last) return h("div", { className: "ait-log-entry" }, h("span", { style: "color:#555" }, "No events yet"));
+	if (!last) return h("div", { className: "ait-log-entry" }, h("span", { style: "color:#555" }, t("ads.empty.events")));
 	const time = new Date(last.timestamp).toLocaleTimeString();
 	return h("div", { className: "ait-log-entry" }, h("span", {
 		className: "ait-log-type",
@@ -1964,8 +2330,8 @@ function lastEventLine() {
 	}, last.type), h("span", { className: "ait-log-time" }, time));
 }
 function adSection(title, onLoad, onShow, disabled) {
-	const loadBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Load");
-	const showBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Show");
+	const loadBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.load"));
+	const showBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.show"));
 	if (disabled) {
 		loadBtn.disabled = true;
 		showBtn.disabled = true;
@@ -1988,7 +2354,7 @@ function renderAdsTab() {
 	forceNoFillCb.addEventListener("change", () => {
 		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Ads State"), statusRow("isLoaded", String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, "Force \"no fill\""), forceNoFillCb), lastEventLine()), adSection("GoogleAdMob", () => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.state")), statusRow(t("ads.row.isLoaded"), String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, t("ads.row.forceNoFill")), forceNoFillCb), lastEventLine()), adSection(t("ads.section.googleAdMob"), () => {
 		GoogleAdMob.loadAppsInTossAdMob({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -1998,7 +2364,7 @@ function renderAdsTab() {
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
 		});
-	}, disabled), adSection("TossAds", () => {
+	}, disabled), adSection(t("ads.section.tossAds"), () => {
 		if (aitState.state.ads.forceNoFill) {
 			recordError("No fill");
 			return;
@@ -2015,7 +2381,7 @@ function renderAdsTab() {
 			recordEvent("dismissed");
 			aitState.patch("ads", { isLoaded: false });
 		}, 1500);
-	}, disabled), adSection("FullScreenAd", () => {
+	}, disabled), adSection(t("ads.section.fullScreenAd"), () => {
 		loadFullScreenAd({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -2035,13 +2401,13 @@ function renderAnalyticsTab() {
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
 	const logs = aitState.state.analyticsLog;
-	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear");
+	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.btn.clear"));
 	if (disabled) clearBtn.disabled = true;
 	clearBtn.addEventListener("click", () => {
 		aitState.update({ analyticsLog: [] });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Analytics Log (${logs.length})`), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
-		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString("ko-KR", { hour12: false })), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.section.log", { count: logs.length })), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
+		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString()), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
 	})));
 	return container;
 }
@@ -2052,7 +2418,7 @@ function renderEnvironmentTab() {
 	const disabled = !s.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Platform"), selectRow("OS", ["ios", "android"], s.platform, (v) => aitState.update({ platform: v }), disabled), inputRow("App Version", s.appVersion, (v) => aitState.update({ appVersion: v }), disabled), selectRow("Environment", ["toss", "sandbox"], s.environment, (v) => aitState.update({ environment: v }), disabled), inputRow("Locale", s.locale, (v) => aitState.update({ locale: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Network"), selectRow("Status", [
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.platform")), selectRow(t("env.row.os"), ["ios", "android"], s.platform, (v) => aitState.update({ platform: v }), disabled), inputRow(t("env.row.appVersion"), s.appVersion, (v) => aitState.update({ appVersion: v }), disabled), selectRow(t("env.row.environment"), ["toss", "sandbox"], s.environment, (v) => aitState.update({ environment: v }), disabled), inputRow(t("env.row.locale"), s.locale, (v) => aitState.update({ locale: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.network")), selectRow(t("env.row.networkStatus"), [
 		"WIFI",
 		"4G",
 		"5G",
@@ -2061,39 +2427,61 @@ function renderEnvironmentTab() {
 		"OFFLINE",
 		"WWAN",
 		"UNKNOWN"
-	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Safe Area Insets"), inputRow("Top", String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)), buildTelemetrySection());
+	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.safeArea")), inputRow(t("env.row.safeArea.top"), String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow(t("env.row.safeArea.bottom"), String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)), buildLanguageSection(), buildTelemetrySection());
 	return container;
 }
+function buildLanguageSection() {
+	const current = getLocale();
+	const select = h("select", { className: "ait-select" });
+	for (const opt of [{
+		value: "ko",
+		labelKey: "env.language.ko"
+	}, {
+		value: "en",
+		labelKey: "env.language.en"
+	}]) {
+		const option = h("option", { value: opt.value }, t(opt.labelKey));
+		if (opt.value === current) option.selected = true;
+		select.appendChild(option);
+	}
+	select.addEventListener("change", () => {
+		setLocale(select.value);
+	});
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.language")), h("div", { className: "ait-row" }, h("label", {}, t("env.language.row")), select));
+}
 function buildTelemetrySection() {
 	const isGranted = readConsentState() === "granted";
-	const statusLabel = h("span", { style: `font-size:12px;font-weight:600;color:${isGranted ? "#4ade80" : "#888"}` }, isGranted ? "On" : "Off");
+	const statusLabel = h("span", { style: `font-size:12px;font-weight:600;color:${isGranted ? "#4ade80" : "#888"}` }, isGranted ? t("env.telemetry.on") : t("env.telemetry.off"));
 	const toggleBtn = h("button", {
 		className: "ait-btn ait-btn-sm",
 		style: "font-size:11px"
-	}, isGranted ? "Turn off" : "Turn on");
+	}, isGranted ? t("env.telemetry.turnOff") : t("env.telemetry.turnOn"));
 	toggleBtn.addEventListener("click", () => {
 		setConsentViaToggle(!isGranted);
 		window.dispatchEvent(new CustomEvent("__ait:panel-switch-tab", { detail: { tab: "env" } }));
 	});
-	const statusRow = h("div", { className: "ait-row" }, h("label", {}, "Telemetry"), h("span", { style: "display:flex;align-items:center;gap:8px" }, statusLabel, toggleBtn));
-	const anonId = localStorage.getItem("__ait_telemetry:anon_id") ?? "(not yet set)";
+	const statusRow = h("div", { className: "ait-row" }, h("label", {}, t("env.telemetry.row")), h("span", { style: "display:flex;align-items:center;gap:8px" }, statusLabel, toggleBtn));
+	const rawAnonId = localStorage.getItem("__ait_telemetry:anon_id");
+	const displayAnonId = rawAnonId ?? t("env.telemetry.anonIdNotSet");
+	const truncatedId = displayAnonId.length > 8 ? `${displayAnonId.slice(0, 8)}…` : displayAnonId;
 	const anonIdEl = h("span", {
 		style: "font-family:'SF Mono','Menlo',monospace;font-size:11px;color:#95e6cb;cursor:pointer",
-		title: "Click to copy full anon_id"
-	}, `anon_id: ${anonId.length > 8 ? `${anonId.slice(0, 8)}…` : anonId}`);
+		title: t("env.telemetry.anonIdCopyTitle")
+	}, t("env.telemetry.anonIdLabel", { value: truncatedId }));
 	anonIdEl.addEventListener("click", () => {
-		navigator.clipboard.writeText(anonId).catch(() => {});
+		if (!rawAnonId) return;
+		navigator.clipboard.writeText(rawAnonId).catch(() => {});
 	});
-	const deleteBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "내 데이터 삭제");
+	const deleteBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("env.telemetry.deleteBtn"));
 	const deleteStatus = h("span", { style: "font-size:11px;color:#aaa" });
 	deleteBtn.addEventListener("click", () => {
 		deleteBtn.disabled = true;
-		deleteStatus.textContent = "삭제 중…";
+		deleteStatus.textContent = t("env.telemetry.deleting");
 		deleteMyData(TELEMETRY_ENDPOINT).then((ok) => {
-			deleteStatus.textContent = ok ? "삭제 완료" : "삭제 실패 (다시 시도해주세요)";
+			deleteStatus.textContent = ok ? t("env.telemetry.deleted") : t("env.telemetry.deleteFailedRetry");
 			deleteBtn.disabled = false;
 		}).catch(() => {
-			deleteStatus.textContent = "삭제 실패";
+			deleteStatus.textContent = t("env.telemetry.deleteFailed");
 			deleteBtn.disabled = false;
 		});
 	});
@@ -2103,8 +2491,8 @@ function buildTelemetrySection() {
 		rel: "noopener noreferrer",
 		style: "font-size:11px;color:#666;text-decoration:none"
 	});
-	privacyLink.textContent = "개인정보 처리방침";
-	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Telemetry"), statusRow, h("div", { style: "margin-bottom:6px" }, anonIdEl), h("div", {
+	privacyLink.textContent = t("env.telemetry.privacyLink");
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.telemetry.section")), statusRow, h("div", { style: "margin-bottom:6px" }, anonIdEl), h("div", {
 		className: "ait-btn-row",
 		style: "align-items:center;gap:8px;margin-top:6px"
 	}, deleteBtn, deleteStatus), h("div", { style: "margin-top:8px" }, privacyLink));
@@ -2115,15 +2503,15 @@ function renderEventsTab() {
 	const disabled = !aitState.state.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
-	const backBtn = h("button", { className: "ait-btn" }, "Trigger Back Event");
+	const backBtn = h("button", { className: "ait-btn" }, t("events.btn.triggerBack"));
 	backBtn.addEventListener("click", () => aitState.trigger("backEvent"));
 	if (disabled) backBtn.disabled = true;
-	const homeBtn = h("button", { className: "ait-btn" }, "Trigger Home Event");
+	const homeBtn = h("button", { className: "ait-btn" }, t("events.btn.triggerHome"));
 	homeBtn.addEventListener("click", () => aitState.trigger("homeEvent"));
 	if (disabled) homeBtn.disabled = true;
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Navigation Events"), h("div", { className: "ait-row" }, backBtn, homeBtn)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Login"), selectRow("Logged In", ["true", "false"], String(aitState.state.auth.isLoggedIn), (v) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("events.section.navigation")), h("div", { className: "ait-row" }, backBtn, homeBtn)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("events.section.login")), selectRow(t("events.row.loggedIn"), ["true", "false"], String(aitState.state.auth.isLoggedIn), (v) => {
 		aitState.patch("auth", { isLoggedIn: v === "true" });
-	}, disabled), selectRow("Toss Login Integrated", ["true", "false"], String(aitState.state.auth.isTossLoginIntegrated), (v) => {
+	}, disabled), selectRow(t("events.row.tossLoginIntegrated"), ["true", "false"], String(aitState.state.auth.isTossLoginIntegrated), (v) => {
 		aitState.patch("auth", { isTossLoginIntegrated: v === "true" });
 	}, disabled)));
 	return container;
@@ -2267,23 +2655,23 @@ function renderIapTab() {
 	];
 	if (disabled) container.appendChild(monitoringNotice());
 	const pendingOrders = s.iap.pendingOrders;
-	const pendingSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Pending Orders (${pendingOrders.length})`));
-	if (pendingOrders.length === 0) pendingSection.appendChild(h("div", { className: "ait-log-entry" }, "(no pending orders)"));
+	const pendingSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("iap.section.pending", { count: pendingOrders.length })));
+	if (pendingOrders.length === 0) pendingSection.appendChild(h("div", { className: "ait-log-entry" }, t("iap.empty.pending")));
 	else for (const o of pendingOrders) {
-		const completeBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Complete");
+		const completeBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("iap.btn.complete"));
 		if (disabled) completeBtn.disabled = true;
 		completeBtn.addEventListener("click", () => {
 			IAP.completeProductGrant({ params: { orderId: o.orderId } }).catch((err) => console.error("[@ait-co/devtools] completeProductGrant error:", err));
 		});
-		pendingSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, "PENDING"), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.paymentCompletedDate)} `, completeBtn));
+		pendingSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, t("iap.label.pending")), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.paymentCompletedDate)} `, completeBtn));
 	}
 	const completedOrders = s.iap.completedOrders;
-	const completedSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Completed Orders (${completedOrders.length})`));
-	if (completedOrders.length === 0) completedSection.appendChild(h("div", { className: "ait-log-entry" }, "(no completed orders)"));
+	const completedSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("iap.section.completed", { count: completedOrders.length })));
+	if (completedOrders.length === 0) completedSection.appendChild(h("div", { className: "ait-log-entry" }, t("iap.empty.completed")));
 	else for (const o of completedOrders) completedSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, o.status), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.date)}`));
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "IAP Simulator"), selectRow("Next Purchase Result", results, s.iap.nextResult, (v) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("iap.section.simulator")), selectRow(t("iap.row.nextResult"), results, s.iap.nextResult, (v) => {
 		aitState.patch("iap", { nextResult: v });
-	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "TossPay"), selectRow("Next Payment Result", ["success", "fail"], s.payment.nextResult, (v) => {
+	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("iap.section.tossPay")), selectRow(t("iap.row.tossPayResult"), ["success", "fail"], s.payment.nextResult, (v) => {
 		aitState.patch("payment", { nextResult: v });
 	}, disabled)), pendingSection, completedSection);
 	return container;
@@ -2295,19 +2683,19 @@ function renderLocationTab() {
 	const disabled = !s.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Current Location"), inputRow("Latitude", String(s.location.coords.latitude), (v) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("location.section.current")), inputRow(t("location.row.latitude"), String(s.location.coords.latitude), (v) => {
 		const coords = {
 			...s.location.coords,
 			latitude: Number(v)
 		};
 		aitState.patch("location", { coords });
-	}, disabled), inputRow("Longitude", String(s.location.coords.longitude), (v) => {
+	}, disabled), inputRow(t("location.row.longitude"), String(s.location.coords.longitude), (v) => {
 		const coords = {
 			...s.location.coords,
 			longitude: Number(v)
 		};
 		aitState.patch("location", { coords });
-	}, disabled), inputRow("Accuracy", String(s.location.coords.accuracy), (v) => {
+	}, disabled), inputRow(t("location.row.accuracy"), String(s.location.coords.accuracy), (v) => {
 		const coords = {
 			...s.location.coords,
 			accuracy: Number(v)
@@ -2321,15 +2709,15 @@ function renderLocationTab() {
 const RESULTS = [
 	{
 		value: "newAgreement",
-		label: "newAgreement (first-time agree)"
+		labelKey: "notifications.option.newAgreement"
 	},
 	{
 		value: "alreadyAgreed",
-		label: "alreadyAgreed (already opted-in)"
+		labelKey: "notifications.option.alreadyAgreed"
 	},
 	{
 		value: "agreementRejected",
-		label: "agreementRejected (user declined)"
+		labelKey: "notifications.option.agreementRejected"
 	}
 ];
 function radioRow(name, current, option, disabled) {
@@ -2343,14 +2731,14 @@ function radioRow(name, current, option, disabled) {
 	input.addEventListener("change", () => {
 		if (input.checked) aitState.patch("notification", { nextResult: option.value });
 	});
-	return h("label", { className: "ait-row" }, input, h("span", {}, option.label));
+	return h("label", { className: "ait-row" }, input, h("span", {}, t(option.labelKey)));
 }
 function renderNotificationsTab() {
 	const s = aitState.state;
 	const disabled = !s.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "requestNotificationAgreement"), ...RESULTS.map((opt) => radioRow("ait-notification-result", s.notification.nextResult, opt, disabled))));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("notifications.section.title")), ...RESULTS.map((opt) => radioRow("ait-notification-result", s.notification.nextResult, opt, disabled))));
 	return container;
 }
 //#endregion
@@ -2373,7 +2761,7 @@ function renderPermissionsTab() {
 		"notDetermined"
 	];
 	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device Permissions"), ...names.map((name) => selectRow(name, statuses, s.permissions[name], (v) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("permissions.section.device")), ...names.map((name) => selectRow(name, statuses, s.permissions[name], (v) => {
 		aitState.patch("permissions", { [name]: v });
 	}, disabled))));
 	return container;
@@ -2661,12 +3049,12 @@ function renderPresetsTab(refreshPanel) {
 	if (disabled) container.appendChild(monitoringNotice());
 	const userPresets = listUserPresets();
 	const snapshot = aitState.state;
-	container.append(renderSection("Built-in scenarios", builtInPresets, disabled, snapshot, refreshPanel, false));
-	container.append(renderSection(`Saved presets (${userPresets.length})`, userPresets, disabled, snapshot, refreshPanel, true));
-	const saveBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Save current as preset");
+	container.append(renderSection(t("presets.section.builtIn"), builtInPresets, disabled, snapshot, refreshPanel, false));
+	container.append(renderSection(t("presets.section.saved", { count: userPresets.length }), userPresets, disabled, snapshot, refreshPanel, true));
+	const saveBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("presets.btn.saveCurrent"));
 	if (disabled) saveBtn.disabled = true;
 	saveBtn.addEventListener("click", () => {
-		const label = window.prompt("Preset label?");
+		const label = window.prompt(t("presets.prompt.label"));
 		if (label === null) return;
 		try {
 			saveUserPreset(label, captureCurrentState(aitState.state));
@@ -2676,19 +3064,19 @@ function renderPresetsTab(refreshPanel) {
 		}
 		refreshPanel();
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Save"), h("div", { style: "color:#888;font-size:11px;margin-bottom:6px" }, "Capture network / permissions / auth / IAP / ads / payment slices."), saveBtn));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("presets.section.save")), h("div", { style: "color:#888;font-size:11px;margin-bottom:6px" }, t("presets.save.description")), saveBtn));
 	return container;
 }
 function renderSection(title, presets, disabled, snapshot, refreshPanel, deletable) {
 	const section = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title));
 	if (presets.length === 0) {
-		section.append(h("div", { style: "color:#555;font-size:12px" }, deletable ? "No saved presets yet." : "No built-in presets."));
+		section.append(h("div", { style: "color:#555;font-size:12px" }, deletable ? t("presets.empty.saved") : t("presets.empty.builtIn")));
 		return section;
 	}
 	for (const preset of presets) {
 		const isActive = matchesPreset(snapshot, preset.state);
 		const labelEl = h("span", { className: "ait-preset-label" }, isActive ? `✓ ${preset.label}` : preset.label);
-		const applyBtn = h("button", { className: "ait-btn ait-btn-sm" }, isActive ? "Re-apply" : "Apply");
+		const applyBtn = h("button", { className: "ait-btn ait-btn-sm" }, isActive ? t("presets.btn.reApply") : t("presets.btn.apply"));
 		if (disabled) applyBtn.disabled = true;
 		applyBtn.addEventListener("click", () => {
 			applyPreset(preset.state);
@@ -2696,10 +3084,10 @@ function renderSection(title, presets, disabled, snapshot, refreshPanel, deletab
 		});
 		const buttons = [applyBtn];
 		if (deletable) {
-			const delBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Delete");
+			const delBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("presets.btn.delete"));
 			if (disabled) delBtn.disabled = true;
 			delBtn.addEventListener("click", () => {
-				if (!window.confirm(`Delete preset "${preset.label}"?`)) return;
+				if (!window.confirm(t("presets.confirm.delete", { label: preset.label }))) return;
 				deleteUserPreset(preset.id);
 				refreshPanel();
 			});
@@ -2724,13 +3112,13 @@ function renderStorageTab(refreshPanel) {
 		const key = localStorage.key(i);
 		if (key?.startsWith(prefix)) entries.push([key.slice(14), localStorage.getItem(key) ?? ""]);
 	}
-	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear All");
+	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("storage.btn.clearAll"));
 	if (disabled) clearBtn.disabled = true;
 	clearBtn.addEventListener("click", () => {
 		for (const [key] of entries) localStorage.removeItem(prefix + key);
 		refreshPanel();
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Storage (${entries.length} items)`), clearBtn), entries.length === 0 ? h("div", { style: "color:#555;font-size:12px" }, "No items in storage") : h("div", {}, ...entries.map(([key, value]) => h("div", { className: "ait-storage-row" }, h("span", { className: "ait-storage-key" }, key), h("span", { className: "ait-storage-value" }, value.length > 100 ? `${value.slice(0, 100)}...` : value))))));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("storage.section.title", { count: entries.length })), clearBtn), entries.length === 0 ? h("div", { style: "color:#555;font-size:12px" }, t("storage.empty")) : h("div", {}, ...entries.map(([key, value]) => h("div", { className: "ait-storage-row" }, h("span", { className: "ait-storage-key" }, key), h("span", { className: "ait-storage-value" }, value.length > 100 ? `${value.slice(0, 100)}...` : value))))));
 	return container;
 }
 //#endregion
@@ -2771,8 +3159,9 @@ const NONE_PRESET = {
 };
 /**
 * Device presets (2026). CSS viewport 크기는 실제 기기의 `window.innerWidth/innerHeight`.
-* iPhone 17 시리즈는 2025-09 출시. iPhone Air와 Galaxy S26 시리즈는 2026-04 기준 미출시라
-* 추정 값(`(est)` 라벨 표기). 실제 출시 후 값을 갱신한다.
+* iPhone 17 시리즈는 2025-09 출시. iPhone Air는 2026-04 기준 미출시 추정(`(est)` 라벨).
+* Galaxy S26 시리즈는 2026-03-11 출시 — viewport 값은 phone-simulator.com에서 보고된
+* 측정치를 사용. safe area는 토스 호스트 환경 실측 필요 — S25 값으로 잠정.
 *
 * iPhone 17과 17 Pro는 CSS viewport / DPR / safe area가 동일 — 이는 의도이며 카피-페이스트
 * 실수가 아니다. Apple의 17 lineup은 base와 Pro의 web-relevant 스펙이 같다.
@@ -2841,9 +3230,9 @@ const VIEWPORT_PRESETS = [
 	},
 	{
 		id: "galaxy-s26",
-		label: "Galaxy S26 (S25 fallback)",
-		width: 384,
-		height: 832,
+		label: "Galaxy S26",
+		width: 360,
+		height: 773,
 		dpr: 3,
 		notch: "punch-hole-center",
 		safeAreaTop: 32,
@@ -2851,9 +3240,9 @@ const VIEWPORT_PRESETS = [
 	},
 	{
 		id: "galaxy-s26-plus",
-		label: "Galaxy S26+ (S25 fallback)",
-		width: 412,
-		height: 915,
+		label: "Galaxy S26+",
+		width: 480,
+		height: 1040,
 		dpr: 3,
 		notch: "punch-hole-center",
 		safeAreaTop: 32,
@@ -2861,10 +3250,10 @@ const VIEWPORT_PRESETS = [
 	},
 	{
 		id: "galaxy-s26-ultra",
-		label: "Galaxy S26 Ultra (S25 fallback)",
-		width: 412,
-		height: 915,
-		dpr: 3.5,
+		label: "Galaxy S26 Ultra",
+		width: 480,
+		height: 1040,
+		dpr: 3,
 		notch: "punch-hole-center",
 		safeAreaTop: 40,
 		safeAreaBottom: 0
@@ -3339,7 +3728,7 @@ function renderViewportTab() {
 				heightInput.value = String(clamped);
 			}
 		});
-		customRow.append(h("div", { className: "ait-section-title" }, "Custom size"), h("div", { className: "ait-row" }, h("label", {}, "Width (px)"), widthInput), h("div", { className: "ait-row" }, h("label", {}, "Height (px)"), heightInput));
+		customRow.append(h("div", { className: "ait-section-title" }, t("viewport.section.custom")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.width")), widthInput), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.height")), heightInput));
 	}
 	const frameCheckbox = h("input", { type: "checkbox" });
 	frameCheckbox.checked = vp.frame;
@@ -3365,7 +3754,7 @@ function renderViewportTab() {
 	});
 	const size = resolveViewportSize(vp);
 	const statusEl = h("div", { className: "ait-section" });
-	if (vp.preset === "none" || size.width === 0) statusEl.appendChild(h("div", { style: "color:#888;font-size:11px" }, "No viewport constraint — body fills the window."));
+	if (vp.preset === "none" || size.width === 0) statusEl.appendChild(h("div", { style: "color:#888;font-size:11px" }, t("viewport.status.noConstraint")));
 	else {
 		const preset = vp.preset === "custom" ? null : getPreset(vp.preset);
 		const effOrient = effectiveOrientation(vp);
@@ -3374,75 +3763,84 @@ function renderViewportTab() {
 		const dpr = preset?.dpr ?? 1;
 		const physW = Math.round(size.width * dpr);
 		const physH = Math.round(size.height * dpr);
-		const orientDisplay = vp.orientation === "auto" ? `${effOrient} (auto)` : effOrient;
-		rows.push(h("div", { className: "ait-status-row" }, h("span", {}, "CSS / physical"), h("span", { className: "ait-status-value" }, `${size.width}×${size.height}@${dpr}x | ${physW}×${physH} ${orientDisplay}`)));
+		const orientDisplay = vp.orientation === "auto" ? t("viewport.orientation.autoSuffix", { orient: effOrient }) : effOrient;
+		rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.cssPhysical")), h("span", { className: "ait-status-value" }, `${size.width}×${size.height}@${dpr}x | ${physW}×${physH} ${orientDisplay}`)));
 		if (preset) {
 			const insets = computeSafeAreaInsets(preset, landscape, vp.landscapeSide);
-			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, "Safe area"), h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`)));
+			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.safeArea")), h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`)));
 		}
-		if (vp.aitNavBar && !landscape) rows.push(h("div", { className: "ait-status-row" }, h("span", {}, "AIT nav bar"), h("span", { className: "ait-status-value" }, `48px (excl. SafeArea) · ${vp.aitNavBarType}`)));
+		if (vp.aitNavBar && !landscape) rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.aitNavBar")), h("span", { className: "ait-status-value" }, t("viewport.status.aitNavBarValue", {
+			height: 48,
+			type: vp.aitNavBarType
+		}))));
 		for (const row of rows) statusEl.appendChild(row);
 	}
-	const deviceSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device"), h("div", { className: "ait-row" }, h("label", {}, "Preset"), presetSelect), h("div", { className: "ait-row" }, h("label", {}, "Orientation"), orientationSelect));
+	const deviceSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("viewport.section.device")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.preset")), presetSelect), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.orientation")), orientationSelect));
 	if (effectiveOrientation(vp) === "landscape" && vp.preset !== "none" && vp.preset !== "custom") {
 		const notch = getPreset(vp.preset).notch;
-		if (notch === "notch" || notch === "dynamic-island") deviceSection.appendChild(h("div", { className: "ait-row" }, h("label", {}, "Notch side"), landscapeSideSelect));
+		if (notch === "notch" || notch === "dynamic-island") deviceSection.appendChild(h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.notchSide")), landscapeSideSelect));
 	}
-	container.append(deviceSection, customRow, h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Appearance"), h("div", { className: "ait-row" }, h("label", {}, "Show frame"), frameCheckbox), h("div", { className: "ait-row" }, h("label", {}, "Show Apps in Toss nav bar"), navBarCheckbox), h("div", { className: "ait-row" }, h("label", {}, "Nav bar type"), navBarTypeSelect)), statusEl);
+	container.append(deviceSection, customRow, h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("viewport.section.appearance")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showFrame")), frameCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showAitNavBar")), navBarCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.navBarType")), navBarTypeSelect)), statusEl);
 	return container;
 }
 //#endregion
 //#region src/panel/tabs/index.ts
-const TABS = [
+const TAB_DEFS = [
 	{
 		id: "env",
-		label: "Environment"
+		labelKey: "panel.tab.env"
 	},
 	{
 		id: "presets",
-		label: "Presets"
+		labelKey: "panel.tab.presets"
 	},
 	{
 		id: "viewport",
-		label: "Viewport"
+		labelKey: "panel.tab.viewport"
 	},
 	{
 		id: "permissions",
-		label: "Permissions"
+		labelKey: "panel.tab.permissions"
 	},
 	{
 		id: "notifications",
-		label: "Notifications"
+		labelKey: "panel.tab.notifications"
 	},
 	{
 		id: "location",
-		label: "Location"
+		labelKey: "panel.tab.location"
 	},
 	{
 		id: "device",
-		label: "Device"
+		labelKey: "panel.tab.device"
 	},
 	{
 		id: "iap",
-		label: "IAP"
+		labelKey: "panel.tab.iap"
 	},
 	{
 		id: "ads",
-		label: "Ads"
+		labelKey: "panel.tab.ads"
 	},
 	{
 		id: "events",
-		label: "Events"
+		labelKey: "panel.tab.events"
 	},
 	{
 		id: "analytics",
-		label: "Analytics"
+		labelKey: "panel.tab.analytics"
 	},
 	{
 		id: "storage",
-		label: "Storage"
+		labelKey: "panel.tab.storage"
 	}
 ];
+function getTabs() {
+	return TAB_DEFS.map((def) => ({
+		id: def.id,
+		label: t(def.labelKey)
+	}));
+}
 function createTabRenderers(refreshPanel) {
 	return {
 		env: renderEnvironmentTab,
@@ -3604,6 +4002,7 @@ let injectedStyle = null;
 let panelSwitchTabHandler = null;
 let resizeHandler = null;
 let aitStateUnsubscribe = null;
+let localeChangeHandler = null;
 let tabRenderers = null;
 function refreshPanel() {
 	if (!bodyEl || !tabsEl) return;
@@ -3613,7 +4012,7 @@ function refreshPanel() {
 		bodyEl.appendChild(tabRenderers[currentTab]());
 	} catch (err) {
 		console.error(`[@ait-co/devtools] Error rendering tab "${currentTab}":`, err);
-		bodyEl.appendChild(h("div", { className: "ait-panel-tab-error" }, `Error rendering "${currentTab}" tab.`));
+		bodyEl.appendChild(h("div", { className: "ait-panel-tab-error" }, t("panel.tabError", { tab: currentTab })));
 	}
 	tabsEl.querySelectorAll(".ait-panel-tab").forEach((el) => {
 		el.classList.toggle("active", el.getAttribute("data-tab") === currentTab);
@@ -3629,14 +4028,14 @@ function mount() {
 	document.head.appendChild(injectedStyle);
 	const toggle = h("button", {
 		className: "ait-panel-toggle",
-		title: "AIT DevTools"
+		title: t("panel.toggle.title")
 	}, "AIT");
 	toggleEl = toggle;
 	restoreButtonPosition(toggle);
 	panelEl = h("div", { className: "ait-panel" });
 	const closeBtn = h("button", {
 		className: "ait-panel-close",
-		title: "Close"
+		title: t("panel.close")
 	}, "×");
 	closeBtn.addEventListener("click", () => {
 		isOpen = false;
@@ -3645,18 +4044,18 @@ function mount() {
 	});
 	const mockBadge = h("span", {
 		className: `ait-mock-badge ${aitState.state.panelEditable ? "ait-mock-badge-on" : "ait-mock-badge-off"}`,
-		title: "Toggle panel edit mode"
-	}, aitState.state.panelEditable ? "EDIT" : "READ-ONLY");
+		title: t("panel.editMode.toggleTitle")
+	}, aitState.state.panelEditable ? t("panel.editMode.on") : t("panel.editMode.off"));
 	mockBadge.addEventListener("click", () => {
 		aitState.update({ panelEditable: !aitState.state.panelEditable });
 		mockBadge.className = `ait-mock-badge ${aitState.state.panelEditable ? "ait-mock-badge-on" : "ait-mock-badge-off"}`;
-		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
+		mockBadge.textContent = aitState.state.panelEditable ? t("panel.editMode.on") : t("panel.editMode.off");
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.17`), closeBtn);
-	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.19`), closeBtn);
+	const header = h("div", { className: "ait-panel-header" }, h("span", {}, t("panel.title")), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
-	for (const tab of TABS) {
+	for (const tab of getTabs()) {
 		const tabEl = h("button", {
 			className: "ait-panel-tab",
 			"data-tab": tab.id
@@ -3709,6 +4108,23 @@ function mount() {
 		refreshPanel();
 	};
 	window.addEventListener("__ait:panel-switch-tab", panelSwitchTabHandler);
+	localeChangeHandler = () => {
+		const savedTab = currentTab;
+		const savedOpen = isOpen;
+		disposePanel();
+		try {
+			mount();
+			currentTab = savedTab;
+			if (savedOpen && panelEl) {
+				isOpen = true;
+				panelEl.classList.add("open");
+			}
+			refreshPanel();
+		} catch (err) {
+			console.error("[@ait-co/devtools] Failed to re-mount after locale change:", err);
+		}
+	};
+	window.addEventListener(LOCALE_CHANGE_EVENT, localeChangeHandler);
 	refreshPanel();
 	telemetry.init();
 }
@@ -3724,6 +4140,7 @@ function disposePanel() {
 	if (typeof document === "undefined") return;
 	if (panelSwitchTabHandler && typeof window !== "undefined") window.removeEventListener("__ait:panel-switch-tab", panelSwitchTabHandler);
 	if (resizeHandler && typeof window !== "undefined") window.removeEventListener("resize", resizeHandler);
+	if (localeChangeHandler && typeof window !== "undefined") window.removeEventListener(LOCALE_CHANGE_EVENT, localeChangeHandler);
 	if (aitStateUnsubscribe) aitStateUnsubscribe();
 	toggleEl?.remove();
 	panelEl?.remove();
@@ -3732,6 +4149,7 @@ function disposePanel() {
 	setDeviceRefreshPanel(() => {});
 	panelSwitchTabHandler = null;
 	resizeHandler = null;
+	localeChangeHandler = null;
 	aitStateUnsubscribe = null;
 	toggleEl = null;
 	panelEl = null;