zigmini 0.9.0-beta.3 → 1.0.0-beta.1

package/web/app.js

@@ -45,13 +45,92 @@ import { createEnrollment, NO_DEVICES_LINE, REVOKE_ARMED_LABEL, REVOKE_LABEL } f
 import { canUpdate, checkFailedLine, noticeLine, parseNotice, progressLine, questionGate, resultLine, UPDATE_CHECK_PATH, UPDATE_CONSENT_PATH, UPDATE_PATH, UPDATE_STATE_PATH, UPDATE_STATUS_PATH, updateStep, updateView } from "./update.js";
 import { createAppDownload } from "./app-download.js";
 import { setupNotificationSettings } from "./notifications.js";
-import { cleanRequest, cleanResultLine, GC_CLEAN_PATH, GC_PATH, gcView, selectAllState, selectAllTarget } from "./gc.js";
+import { cleanRequest, cleanResultLine, formatBytes, GC_CLEAN_PATH, GC_PATH, gcView, selectAllState, selectAllTarget } from "./gc.js";
+import {
+	applyAgentApplied, applyAgentUpdate, clearField, cloneRequest, DEFAULTS_PATH, DELETE_HINT, deleteEnabled, deleteRequest, editorRows, editorState,
+	EMPTY_FILES_LINE, EMPTY_AGENTS_LINE, EMPTY_TRASH_LINE, errorLine, fileRows, filesPath, headerView, mainConversations, shownConversation, AGENTS_PATH,
+	restoreRequest, saveRequest, setBody, setField, setUnknownRaw, sidebarItems, sourceUploadPath, STALE_TITLE, TRASH_PATH, trashRows, validateEditor, widgetValue,
+} from "./agents.js";
 import { manualFailureText, manualLinkLang, manualUrl, otherLang } from "./manual.js";
-import { canRestoreHeld, completeDetail, createAllowedValues, createSecurityInbox } from "./security-inbox.js";
+import { canRestoreHeld, completeDetail, createAllowedValues, createSecurityBaseline, createSecurityInbox, repoAllowed, repoScopeBlock } from "./security-inbox.js";
+import { getLanguage, isUiLanguage, onLanguageChange, registerStrings, setLanguage, t, UI_LANGUAGES } from "./i18n.js";
+import mainStrings from "./i18n/main.js";
 
 installTooltips(document, window);
+registerStrings(mainStrings);
 
 const $ = (id) => document.getElementById(id);
+
+// ---- The UI language (English or Korean), one gateway-wide setting: GET/PUT /api/settings/language, ui-language.updated ----
+const UI_LANGUAGE_PATH = "/api/settings/language";
+const languageSelect = $("ui-language");
+
+/** The BCP 47 locale of the UI language, for dates and times. */
+function uiLocale(lang = getLanguage()) {
+	return lang === "ko" ? "ko-KR" : "en-US";
+}
+
+/** The select lists every language under its own name and shows the current one. */
+function renderLanguageSelect() {
+	languageSelect.replaceChildren(...UI_LANGUAGES.map((lang) => new Option(t(`language.name.${lang}`), lang)));
+	languageSelect.value = getLanguage();
+}
+
+/** A GET or PUT answer or the ui-language.updated event: a known language other than the current one switches the page. */
+function applyUiLanguage(body) {
+	if (isUiLanguage(body?.language) && body.language !== getLanguage()) setLanguage(body.language);
+	renderLanguageSelect();
+}
+
+/** The page waits for this before its first render (first = true), so every label is drawn once in the right language. */
+async function readUiLanguage(first = false) {
+	let language = getLanguage();
+	try {
+		const res = await fetch(UI_LANGUAGE_PATH, { cache: "no-store", signal: AbortSignal.timeout(5000) });
+		const body = res.ok ? await res.json() : null;
+		if (isUiLanguage(body?.language)) language = body.language;
+	} catch (error) {
+		console.warn("language load:", error);
+	}
+	if (first || language !== getLanguage()) setLanguage(language);
+	renderLanguageSelect();
+}
+
+async function saveUiLanguage(language) {
+	languageSelect.disabled = true;
+	try {
+		const res = await fetch(UI_LANGUAGE_PATH, { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ language }) });
+		const body = await res.json().catch(() => ({}));
+		if (!res.ok) throw new Error(body.error ?? String(res.status));
+		applyUiLanguage(body);
+	} catch (err) {
+		renderLanguageSelect();
+		systemLine(t("settings.language.saveFailed", { error: err instanceof Error ? err.message : err }), true);
+	} finally {
+		languageSelect.disabled = false;
+	}
+}
+
+languageSelect.onchange = () => void saveUiLanguage(languageSelect.value);
+await readUiLanguage(true);
+
+/** A role=switch button: aria-checked carries the state, .on the look; a busy or unknown setting disables it. */
+function renderSwitch(button, on, busy = false) {
+	button.setAttribute("aria-checked", String(on));
+	button.classList.toggle("on", on);
+	button.disabled = busy;
+}
+
+/** The info icon of a settings row built by app.js (the per-tool formal rows); its tip is the full description. */
+function infoTipButton(text) {
+	const button = make("button", "info-tip", "i");
+	button.type = "button";
+	button.setAttribute("data-tip-keep", "");
+	button.setAttribute("data-tip", text);
+	button.setAttribute("aria-label", t("common.details"));
+	return button;
+}
+
 const state = {
 	conversations: [],
 	current: "main",
@@ -163,8 +242,8 @@ async function changeAgentIcon(method, body) {
 	const res = await fetch("/api/profile/icon", { method, body, headers: body ? { "content-type": body.type } : {} }).catch(() => null);
 	const data = await res?.json().catch(() => null);
 	if (!res?.ok) {
-		const reason = { icon_too_large: "이미지가 1MB보다 큽니다.", icon_type: "PNG, JPEG, WebP 이미지만 쓸 수 있습니다.", icon_empty: "빈 파일입니다." }[data?.error];
-		throw new Error(reason ?? "아이콘을 게이트웨이에 저장하지 못했습니다. 잠시 후 다시 해 주세요.");
+		const reason = { icon_too_large: "profile.icon.tooLarge", icon_type: "profile.icon.type", icon_empty: "profile.icon.empty" }[data?.error];
+		throw new Error(t(reason ?? "profile.icon.saveFailed"));
 	}
 	receiveProfile(data);
 }
@@ -184,7 +263,7 @@ document.querySelector("#owner-profile").addEventListener("dblclick", () => {
 	editNickname(document.querySelector("#owner-profile .me-name"), nickname, (value) => {
 		nickname = writeNickname(localStorage, value);
 		queueMicrotask(applyNickname);
-		void saveProfile({ nickname }, "닉네임을 게이트웨이에 저장하지 못했습니다. 이 브라우저에만 바뀐 이름이 보입니다.");
+		void saveProfile({ nickname }, t("profile.nickname.saveFailed"));
 		return nickname;
 	});
 });
@@ -201,12 +280,12 @@ document.querySelector("#agent-profile").addEventListener("dblclick", () => {
 	editNickname(document.querySelector("#agent-profile .agent-name"), agentName, (value) => {
 		agentName = writeAgentName(localStorage, value);
 		queueMicrotask(applyAgentName);
-		void saveProfile({ agentName }, "에이전트 이름을 게이트웨이에 저장하지 못했습니다. 이 브라우저에만 바뀐 이름이 보입니다.");
+		void saveProfile({ agentName }, t("profile.agentName.saveFailed"));
 		return agentName;
 	}, {
-		label: "에이전트 이름",
+		label: t("profile.agentName"),
 		fits: agentNameFits,
-		onReject: () => systemLine(`에이전트 이름이 너무 깁니다. 한글은 ${AGENT_NAME_WIDTH / 2}자, 영문은 ${AGENT_NAME_WIDTH}자까지 쓸 수 있습니다. 이름을 바꾸지 않았습니다.`, true),
+		onReject: () => systemLine(t("profile.agentName.tooLong", { hangul: AGENT_NAME_WIDTH / 2, ascii: AGENT_NAME_WIDTH }), true),
 	});
 });
 
@@ -231,7 +310,7 @@ async function dismissWorkSlot(id) {
 		if (applyWorkStatusEvent(workStatus, workStatus.generation, body)) renderWorkStatusAll();
 	} catch (error) {
 		console.warn("work slot dismiss:", error);
-		statusParts.caption.textContent = "칸을 비우지 못했습니다. 잠시 후 다시 눌러 주세요.";
+		statusParts.caption.textContent = t("status.dismissFailed");
 	} finally {
 		dismissing.delete(id);
 	}
@@ -287,15 +366,20 @@ function setStatusOpen(open, fromHistory = false) {
 	syncStatusFold();
 	renderWorkStatusAll();
 	$("toggle-status").setAttribute("aria-expanded", String(open));
-	const label = open ? "채팅으로 돌아가기" : "작업 상태 보기";
-	$("toggle-status").setAttribute("aria-label", label);
-	$("toggle-status").title = label;
+	renderStatusToggle();
 	if (fromHistory) return;
 	// Back returns to the chat on phones: the open state is one history entry.
 	if (open) history.pushState({ workStatus: true }, "");
 	else if (history.state?.workStatus) history.back();
 }
 
+/** The head Zig button's name follows the phone's status screen: it returns to the chat while that screen is open. */
+function renderStatusToggle() {
+	const label = t(els.app.classList.contains("status-open") ? "status.backToChat" : "status.open");
+	$("toggle-status").setAttribute("aria-label", label);
+	$("toggle-status").title = label;
+}
+
 $("toggle-status").addEventListener("click", () => {
 	if (phone.matches) {
 		setStatusOpen(!els.app.classList.contains("status-open"));
@@ -376,7 +460,12 @@ setupWorkIdCopy(statusParts.graph);
 
 function timeLabel(ts) {
 	const d = ts ? new Date(ts) : new Date();
-	return d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+	return d.toLocaleTimeString(uiLocale(), { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+}
+
+/** "Due 14:05" or "No deadline" for a card's meta line. */
+function deadlineLabel(deadlineAt) {
+	return deadlineAt ? t("approval.deadline", { time: timeLabel(deadlineAt) }) : t("approval.noDeadline");
 }
 
 const DEV_MAX_ROWS = 400;
@@ -447,7 +536,7 @@ function updateScrollNav() {
 	nav.prev.disabled = els.messages.scrollTop <= SCROLL_EDGE_PX;
 	nav.next.disabled = distanceFromBottom() <= SCROLL_EDGE_PX;
 	nav.next.classList.toggle("unread", scroll.unread);
-	nav.next.title = scroll.unread ? "새 메시지 있음 · 더블클릭하면 맨 아래로" : "다음 내 메시지로 · 더블클릭하면 맨 아래로";
+	nav.next.title = t(scroll.unread ? "chat.nav.unread" : "chat.nav.next");
 }
 
 function scrollToBottom(force = false) {
@@ -506,10 +595,12 @@ function messageRow({ who, bot, ts, tag }) {
 	time.textContent = timeLabel(ts);
 	head.append(name, time);
 	if (tag) {
-		const t = document.createElement("span");
-		t.className = "msg-tag";
-		t.textContent = tag;
-		head.append(t);
+		// tag is a string key: data-i18n lets applyI18n (web/i18n.js) redraw it on a language change (bug 260).
+		const tagEl = document.createElement("span");
+		tagEl.className = "msg-tag";
+		tagEl.dataset.i18n = tag;
+		tagEl.textContent = t(tag);
+		head.append(tagEl);
 	}
 	body.append(head);
 	row.append(avatar, body);
@@ -524,7 +615,11 @@ function markRead(body, seq) {
 	// A cleared transcript (conversation switch, reload) detaches the marker; start over for the new list.
 	if (readReceipt.el && !readReceipt.el.isConnected) readReceipt.seq = -1;
 	if (typeof seq !== "number" || seq <= readReceipt.seq) return;
-	readReceipt.el ??= Object.assign(document.createElement("span"), { className: "msg-read", textContent: "읽음" });
+	// data-i18n: a language change redraws the attached marker; textContent: a marker re-attached after a cleared list
+	// may have missed that change (bug 260).
+	readReceipt.el ??= Object.assign(document.createElement("span"), { className: "msg-read" });
+	readReceipt.el.dataset.i18n = "chat.read";
+	readReceipt.el.textContent = t("chat.read");
 	readReceipt.seq = seq;
 	body.querySelector(".msg-head")?.append(readReceipt.el);
 }
@@ -580,7 +675,8 @@ function thinkingBlock(item) {
 		box.className = "thinking";
 		box.open = true;
 		const label = document.createElement("summary");
-		label.textContent = "thinking";
+		label.dataset.i18n = "chat.thinking";
+		label.textContent = t("chat.thinking");
 		const pre = document.createElement("div");
 		pre.className = "thinking-text";
 		box.append(label, pre);
@@ -594,7 +690,7 @@ const progressEls = new Map();
 
 function renderProgress(e) {
 	const d = e.data;
-	const label = { bash: "명령", eval: "코드 실행", write: "파일 쓰기", edit: "파일 수정", read: "파일 읽기" }[d.kind] ?? d.kind;
+	const label = PROGRESS_KINDS.includes(d.kind) ? t(`progress.${d.kind}`) : d.kind;
 	if (sinkSkip?.has(d.itemId)) return;
 	let el = progressEls.get(d.itemId);
 	if (!el) {
@@ -607,14 +703,20 @@ function renderProgress(e) {
 	el.textContent = `${label} [${d.status}] ${d.summary ?? ""}${output}`;
 }
 
-const OPTION_LABELS = {
-	"Allow once": "승인",
-	"Allow always": "항상 승인",
-	Deny: "거절",
-	"Deny with feedback": "이유와 함께 거절",
+const PROGRESS_KINDS = ["bash", "eval", "write", "edit", "read"];
+const OPTION_KEYS = {
+	"Allow once": "approval.allowOnce",
+	"Allow always": "approval.allowAlways",
+	Deny: "approval.deny",
+	"Deny with feedback": "approval.denyFeedback",
 };
 const OPTION_STYLE = { "Allow once": "ok", "Allow always": "neutral", Deny: "danger", "Deny with feedback": "danger" };
 
+/** The permission options come from the engine in English; a known one reads in the UI language, any other as it is. */
+function optionLabel(value) {
+	return OPTION_KEYS[value] ? t(OPTION_KEYS[value]) : value;
+}
+
 /**
  * Legacy card bodies (rendered before their decision was known) share the canonical slot, revision and HTTP route;
  * only a genuinely unbound id-less card still answers over the socket.
@@ -625,13 +727,13 @@ function answer(req, data) {
 	const knownAlias = explicitId === null && inbox.state.decisionIdsByAction.has(req.actionId);
 	const card = cardFor(req.actionId);
 	if (!inbox.online) {
-		systemLine("연결이 끊겨 답변을 보낼 수 없습니다. 다시 연결되면 보내 주세요.", true);
+		systemLine(t("decision.offline.answer"), true);
 		return;
 	}
 	if (!decision && (explicitId || knownAlias)) {
 		if (card) setCardState(card, {
 			disabled: true,
-			note: explicitId ? "확인 중…" : "확인함에서 최신 질문 내용을 확인해 주세요.",
+			note: t(explicitId ? "common.checking" : "decision.checkInboxLatest"),
 		});
 		if (explicitId) void loadDecisionDetail(explicitId, card);
 		return;
@@ -656,9 +758,7 @@ function answer(req, data) {
 			if (!composed.ok) {
 				if (card) setCardState(card, {
 					disabled: false,
-					note: composed.reason === "incomplete"
-						? "필수 항목을 모두 고르거나 적어야 보낼 수 있습니다."
-						: "이 질문 형식은 웹에서 답할 수 없습니다.",
+					note: t(composed.reason === "incomplete" ? "decision.incomplete" : "decision.unsupported"),
 				});
 				return;
 			}
@@ -707,7 +807,7 @@ function setCardState(card, { disabled, note, retry }) {
 	}
 	state.replaceChildren(note);
 	if (retry) {
-		const button = make("button", "text-btn", "다시 시도");
+		const button = make("button", "text-btn", t("common.retry"));
 		button.type = "button";
 		button.onclick = retry;
 		state.append(" ", button);
@@ -717,7 +817,7 @@ function setCardState(card, { disabled, note, retry }) {
 /** The socket answer of a legacy card; a canonical card renders its shared in-flight state instead. */
 function setCardBusy(actionId, busy) {
 	const card = cardFor(actionId);
-	if (card && card.dataset.decisionRevision === undefined) setCardState(card, { disabled: busy, note: busy ? "보내는 중…" : null });
+	if (card && card.dataset.decisionRevision === undefined) setCardState(card, { disabled: busy, note: busy ? t("common.sending") : null });
 }
 
 /** Re-renders the mounted card of a decision from canonical state; an id-less card follows only its own unique alias. */
@@ -733,15 +833,15 @@ function syncCard(decision, except = null) {
 
 /** One line of state under a canonical card: in transit, locked for review, offline, finished, or why it still waits. */
 function cardStatus(decision, p, busy, review) {
-	if (busy) return "보내는 중…";
-	if (review) return "최신 내용을 확인한 뒤 다시 답해 주세요.";
+	if (busy) return t("common.sending");
+	if (review) return t("decision.reviewFirst");
 	if (!isUnresolved(decision)) {
-		if (decision.status === "delivered") return "답변이 전달됐습니다.";
-		if (decision.reason === "user_cancelled") return "확인함에서 삭제해 질문을 취소했습니다.";
-		if (decision.reason === "user_dismissed") return "확인함에서 삭제했습니다.";
-		return decision.supersededBy ? "새 질문으로 대체됐습니다." : "요청이 종료됐습니다.";
+		if (decision.status === "delivered") return t("decision.delivered");
+		if (decision.reason === "user_cancelled") return t("decision.userCancelled");
+		if (decision.reason === "user_dismissed") return t("decision.userDismissed");
+		return t(decision.supersededBy ? "decision.superseded" : "decision.closed");
 	}
-	if (!inbox.online) return "연결이 끊겨 답변을 보낼 수 없습니다. 다시 연결되면 보내 주세요.";
+	if (!inbox.online) return t("decision.offline.answer");
 	return p.kind === "live" ? null : waitReason(decision);
 }
 
@@ -761,10 +861,10 @@ function renderCardBody(card, decision) {
 	card.dataset.decisionRevision = String(decision.revision);
 	card.classList.toggle("resolved", p.terminal || !isUnresolved(decision));
 	card.setAttribute("aria-busy", String(busy));
-	const nodes = [make("div", "approval-title", payload.title || request?.title || (decision.permission ? "권한 요청" : "질문"))];
+	const nodes = [make("div", "approval-title", payload.title || request?.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"))];
 	if (payload.detail) nodes.push(make("div", "approval-detail", payload.detail));
 	// A question cancelled by deleting it from the inbox stores { cancelled: true }, which is not an answer the user gave.
-	if (decision.answer && decision.reason !== "user_cancelled") nodes.push(make("div", "inbox-note", `내 답변: ${describeAnswer(decision.answer)}`));
+	if (decision.answer && decision.reason !== "user_cancelled") nodes.push(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
 	if (p.form) nodes.push(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, card)));
 	else {
 		const saved = renderSavedChoices(decision);
@@ -772,9 +872,9 @@ function renderCardBody(card, decision) {
 	}
 	const lost = renderReference(decision);
 	if (lost) nodes.push(lost);
-	const kind = decision.permission ? "권한" : decision.method === "question" ? "질문" : decision.method;
+	const kind = decision.permission ? t("approval.permission") : decision.method === "question" ? t("approval.question") : decision.method;
 	const binding = p.kind === "live" ? "" : ` · ${bindingLabel(decision)}`;
-	nodes.push(make("div", "approval-meta", `${decision.deadlineAt ? `기한 ${timeLabel(decision.deadlineAt)}` : "기한 없음"} · ${kind}${binding}`));
+	nodes.push(make("div", "approval-meta", `${deadlineLabel(decision.deadlineAt)} · ${kind}${binding}`));
 	const status = cardStatus(decision, p, busy, review);
 	if (status) {
 		const state = make("div", "approval-meta approval-state", status);
@@ -800,7 +900,7 @@ function renderApproval(req, resolved, ts) {
 	const explicitId = typeof req.decisionId === "string" ? req.decisionId : null;
 	if (explicitId) card.dataset.decisionId = explicitId;
 	cardRequests.set(card, req);
-	const body = messageRow({ who: agentName, bot: true, ts: req.createdAt ? new Date(req.createdAt).toISOString() : ts, tag: req.permission ? "권한 요청" : "질문" });
+	const body = messageRow({ who: agentName, bot: true, ts: req.createdAt ? new Date(req.createdAt).toISOString() : ts, tag: req.permission ? "approval.permissionRequest" : "approval.question" });
 	body.appendChild(card);
 	const decision = decisionForCard(inbox.state, req);
 	if (decision) {
@@ -809,7 +909,7 @@ function renderApproval(req, resolved, ts) {
 	}
 	renderLegacyBody(card, req);
 	if (explicitId) {
-		setCardState(card, { disabled: true, note: "확인 중…" });
+		setCardState(card, { disabled: true, note: t("common.checking") });
 		void loadDecisionDetail(explicitId, card);
 	} else if (resolved) markResolved(card, resolved);
 }
@@ -818,7 +918,7 @@ function renderApproval(req, resolved, ts) {
 function renderLegacyBody(card, req) {
 	const title = document.createElement("div");
 	title.className = "approval-title";
-	title.textContent = req.title || "확인 요청";
+	title.textContent = req.title || t("approval.confirmRequest");
 	card.append(title);
 	if (req.detail) {
 		const detail = document.createElement("div");
@@ -828,7 +928,7 @@ function renderLegacyBody(card, req) {
 	}
 	const meta = document.createElement("div");
 	meta.className = "approval-meta";
-	meta.textContent = `${req.deadlineAt ? `기한 ${timeLabel(req.deadlineAt)}` : "기한 없음"} · ${req.permission ? "권한" : req.method === "question" ? "질문" : req.method}`;
+	meta.textContent = `${deadlineLabel(req.deadlineAt)} · ${req.permission ? t("approval.permission") : req.method === "question" ? t("approval.question") : req.method}`;
 	const actions = document.createElement("div");
 	actions.className = "approval-actions";
 	const button = (label, cls, onClick) => {
@@ -846,7 +946,7 @@ function renderLegacyBody(card, req) {
 			block.className = "approval-question";
 			const head = document.createElement("div");
 			head.className = "approval-qtitle";
-			head.textContent = `${q.header ? `[${q.header}] ` : ""}${q.question}${q.multiSelect ? " (여러 개 선택 가능)" : ""}`;
+			head.textContent = `${q.header ? `[${q.header}] ` : ""}${q.question}${q.multiSelect ? t("approval.multiSelect") : ""}`;
 			const opts = document.createElement("div");
 			opts.className = "approval-options";
 			const chosen = new Set();
@@ -870,7 +970,7 @@ function renderLegacyBody(card, req) {
 			}
 			const other = document.createElement("input");
 			other.className = "approval-input";
-			other.placeholder = "직접 입력 (선택)";
+			other.placeholder = t("approval.otherPlaceholder");
 			texts.set(q.id, other);
 			block.append(head, opts, other);
 			card.append(block);
@@ -878,10 +978,10 @@ function renderLegacyBody(card, req) {
 		const comment = document.createElement("textarea");
 		comment.className = "approval-input";
 		comment.rows = 2;
-		comment.placeholder = "덧붙일 말 (선택)";
+		comment.placeholder = t("approval.commentPlaceholder");
 		card.append(comment);
 		actions.append(
-			button("보내기", "ok", () => {
+			button(t("common.send"), "ok", () => {
 				const answers = {};
 				for (const q of req.questions) {
 					const selected = [...picked.get(q.id)];
@@ -891,22 +991,22 @@ function renderLegacyBody(card, req) {
 				if (!Object.keys(answers).length && !comment.value.trim()) return;
 				answer(req, { answers, comment: comment.value.trim() });
 			}),
-			button("취소", "neutral", () => answer(req, { cancel: true })),
+			button(t("common.cancel"), "neutral", () => answer(req, { cancel: true })),
 		);
 	} else if (req.method === "select") {
 		for (const opt of req.options) {
-			actions.append(button(OPTION_LABELS[opt] ?? opt, req.permission ? (OPTION_STYLE[opt] ?? "neutral") : "neutral", () => answer(req, { value: opt })));
+			actions.append(button(optionLabel(opt), req.permission ? (OPTION_STYLE[opt] ?? "neutral") : "neutral", () => answer(req, { value: opt })));
 		}
-		actions.append(button("취소", "neutral", () => answer(req, { cancel: true })));
+		actions.append(button(t("common.cancel"), "neutral", () => answer(req, { cancel: true })));
 	} else if (req.method === "confirm") {
-		actions.append(button("예", "ok", () => answer(req, { confirmed: true })), button("아니오", "danger", () => answer(req, { confirmed: false })));
+		actions.append(button(t("common.yes"), "ok", () => answer(req, { confirmed: true })), button(t("common.no"), "danger", () => answer(req, { confirmed: false })));
 	} else {
 		const box = document.createElement("textarea");
 		box.className = "approval-input";
 		box.rows = req.method === "editor" ? 6 : 2;
 		box.value = "";
 		card.append(box);
-		actions.append(button("보내기", "ok", () => answer(req, { value: box.value })), button("취소", "neutral", () => answer(req, { cancel: true })));
+		actions.append(button(t("common.send"), "ok", () => answer(req, { value: box.value })), button(t("common.cancel"), "neutral", () => answer(req, { cancel: true })));
 	}
 	card.append(meta, actions);
 }
@@ -916,15 +1016,15 @@ function markResolved(card, res) {
 	card.querySelector(".approval-state")?.remove();
 	for (const el of card.querySelectorAll("button, textarea, input")) el.disabled = true;
 	const a = res.answer ?? {};
-	let label = "취소됨";
-	if (a.kind === "value") label = `선택: ${OPTION_LABELS[a.value] ?? a.value}`;
+	let label = t("approval.cancelled");
+	if (a.kind === "value") label = t("approval.chosen", { value: optionLabel(a.value) });
 	else if (a.kind === "question" && res.by === "user") {
 		const parts = Object.values(a.answers ?? {}).map((x) => [...(x.selected ?? []), x.text].filter(Boolean).join(", "));
 		if (a.comment) parts.push(a.comment);
-		label = `답변: ${parts.join(" / ") || "(없음)"}`;
+		label = t("approval.answered", { value: parts.join(" / ") || t("common.none") });
 	}
-	else if (a.kind === "confirm") label = a.confirmed ? "예" : "아니오";
-	const by = { user: "", timeout: " (기한 만료)", cancelled: " (자동 취소)" }[res.by] ?? "";
+	else if (a.kind === "confirm") label = t(a.confirmed ? "common.yes" : "common.no");
+	const by = { timeout: t("approval.byTimeout"), cancelled: t("approval.byCancelled") }[res.by] ?? "";
 	const note = document.createElement("div");
 	note.className = "approval-meta";
 	note.textContent = `${label}${by}${a.reason ? ` · ${a.reason}` : ""}`;
@@ -936,7 +1036,7 @@ function renderEvent(e, fromHistory = false) {
 	switch (e.type) {
 		case "message.user": {
 			if (decisionCommand(e)) break;
-			const tag = e.data.trust === "owner-voice" ? "음성" : undefined;
+			const tag = e.data.trust === "owner-voice" ? "chat.tag.voice" : undefined;
 			const body = messageRow({ who: nickname, bot: false, ts: e.ts, tag });
 			const quoted = sentReferences(e.data);
 			if (quoted.length) body.appendChild(sentReferenceBlock(quoted, roleLabels()));
@@ -951,7 +1051,7 @@ function renderEvent(e, fromHistory = false) {
 		}
 		case "message.precomment": {
 			// Main's one-line notice before longer work: its own lighter, smaller message, never merged into the answer.
-			const body = messageRow({ who: agentName, bot: true, ts: e.ts, tag: "안내" });
+			const body = messageRow({ who: agentName, bot: true, ts: e.ts, tag: "chat.tag.notice" });
 			body.parentElement.classList.add("precomment");
 			textBlock(body, e.data.text ?? "");
 			break;
@@ -1009,7 +1109,7 @@ function renderEvent(e, fromHistory = false) {
 			break;
 		}
 		case "turn.started":
-			if (!fromHistory) systemLine("zigmini가 작업을 시작했습니다.");
+			if (!fromHistory) systemLine(t("chat.turnStarted"));
 			break;
 		case "turn.completed": {
 			if (!sink) {
@@ -1031,10 +1131,10 @@ function renderEvent(e, fromHistory = false) {
 			els.thread.textContent = `thread ${e.data.threadId}`;
 			break;
 		case "error":
-			systemLine(`오류: ${e.data.message}`, true);
+			systemLine(e.data?.kind === "agent-definition" ? t("agent.definitionError") : t("chat.error", { message: e.data.message }), true);
 			break;
 		case "notice":
-			systemLine(`알림: ${e.data.message}`, e.data.level === "error");
+			systemLine(t("chat.notice", { message: e.data.message }), e.data.level === "error");
 			break;
 	}
 	renderSeq = null;
@@ -1043,7 +1143,8 @@ function renderEvent(e, fromHistory = false) {
 
 function renderConversations() {
 	els.convList.innerHTML = "";
-	for (const c of state.conversations) {
+	renderAgentGroup();
+	for (const c of mainConversations(state.conversations)) {
 		const li = document.createElement("li");
 		li.className = `${c.id === state.current ? "active" : ""}${state.pendingByConv.get(c.id) ? " pending" : ""}`;
 		const hash = document.createElement("span");
@@ -1063,6 +1164,7 @@ const lastSent = { el: $("last-sent"), rec: null };
 function setLastSent(rec) {
 	lastSent.rec = rec;
 	const label = lastSentLabel(rec);
+	lastSent.el.dataset.label = t("chat.lastSent.prefix");
 	lastSent.el.hidden = !label;
 	lastSent.el.textContent = label;
 	lastSent.el.title = lastSentTooltip(rec);
@@ -1118,17 +1220,21 @@ function clearMessages(conv) {
 }
 
 /** `resume`: after a reconnect, keep what is on screen and fetch only the events missed meanwhile. */
-function selectConversation(id, resume = false) {
+function selectConversation(requested, resume = false) {
+	// Improvement 262: a hidden conversation (old "+" conversation, a decision or link that names one) opens main.
+	const id = shownConversation(state.conversations, requested);
 	const canResume = resume && id === state.current && hist.conv === id && hist.newest > 0;
 	if (id !== state.current) {
 		clearPendingReportSpeech(state.current);
 		clearReferences(refs.state);
 		renderReferences();
+		resetSlashCommands();
 	}
 	state.current = id;
 	const conv = state.conversations.find((c) => c.id === id);
 	els.title.textContent = conv ? conv.title : id;
 	els.thread.textContent = conv?.threadId ? `thread ${conv.threadId}` : "";
+	renderAgentHeader();
 	renderConversations();
 	renderInterrupt();
 	renderActivity();
@@ -1264,7 +1370,8 @@ function onServerEvent(e, generation, statusGeneration) {
 			renderWorkStatusAll();
 			setOmo(e.data.omo);
 			void syncInbox({ reset: true });
-			selectConversation(state.conversations.some((c) => c.id === state.current) ? state.current : "main", true);
+			void loadAgents();
+			selectConversation(state.current, true);
 			return;
 		case "decision.updated":
 			onDecisionUpdated(e.data);
@@ -1290,7 +1397,10 @@ function onServerEvent(e, generation, statusGeneration) {
 			setOmo(e.data.status);
 			return;
 		case "activity.updated":
-			if (applyActivityEvent(activity, generation, e.conv, e.data) && e.conv === state.current) renderActivity();
+			if (applyActivityEvent(activity, generation, e.conv, e.data)) {
+				if (e.conv === state.current) renderActivity();
+				renderAgentGroup();
+			}
 			return;
 		case "work.status":
 			if (applyWorkStatusEvent(workStatus, statusGeneration, e.data)) renderWorkStatusAll();
@@ -1301,9 +1411,19 @@ function onServerEvent(e, generation, statusGeneration) {
 			renderSessionTransition();
 			return;
 		case "conversation.created":
-			state.conversations.push(e.data);
-			selectConversation(e.data.id);
+			// An agent's POST answer may have listed its conversation already (receiveAgentUpdate); keep one row.
+			if (state.conversations.some((c) => c.id === e.data.id)) state.conversations = state.conversations.map((c) => (c.id === e.data.id ? e.data : c));
+			else state.conversations.push(e.data);
+			if (shownConversation(state.conversations, e.data.id) === e.data.id) selectConversation(e.data.id);
+			return;
+		case "agent.updated":
+			receiveAgentUpdate(e.data);
 			return;
+		case "agent.applied":
+			agentState.list = applyAgentApplied(agentState.list, e.conv, e.data);
+			renderAgentHeader();
+			renderAgentGroup();
+			break;
 		case "action.request":
 			state.pendingByConv.set(e.conv, (state.pendingByConv.get(e.conv) ?? 0) + 1);
 			renderConversations();
@@ -1332,6 +1452,12 @@ function onServerEvent(e, generation, statusGeneration) {
 		case "security-check.updated":
 			applySecurityBody(e.data);
 			return;
+		case "repo-security-check.updated":
+			repoSecurity.apply(e.data);
+			return;
+		case "formal-verification.updated":
+			applyFormal(e.data);
+			return;
 		case "notifications.updated":
 			notificationSettings.updated(e.data);
 			return;
@@ -1343,6 +1469,7 @@ function onServerEvent(e, generation, statusGeneration) {
 			return;
 		case "security-check.allowed-values.updated":
 			allowedValues.updated(e.data.revision);
+			securityBaseline.updated(e.data.revision);
 			return;
 		case "security-check.resolved":
 			void securityInbox.detail(e.data.id);
@@ -1354,12 +1481,15 @@ function onServerEvent(e, generation, statusGeneration) {
 		case "voice.install.progress":
 			voice.install = installStatusWith(voice.install, e.data);
 			renderVoiceInstall();
-			if (e.data?.state === "failed") systemLine(`음성 설치 실패: ${e.data.message}`, true);
-			else if (e.data?.state === "done") systemLine("음성 설치를 끝냈습니다. '음성 꺼짐'을 눌러 켜세요.");
+			if (e.data?.state === "failed") systemLine(t("voice.installFailed", { message: e.data.message }), true);
+			else if (e.data?.state === "done") systemLine(t("voice.installDone"));
 			return;
 		case "model.changed":
 			renderModels(e.data);
 			return;
+		case "ui-language.updated":
+			applyUiLanguage(e.data);
+			return;
 		case "device.list":
 			renderDeviceRequests(e.data);
 			enrollment.setDevices(e.data);
@@ -1384,10 +1514,12 @@ function onServerEvent(e, generation, statusGeneration) {
 		case "turn.started":
 			state.running.add(e.conv);
 			renderInterrupt();
+			renderAgentGroup();
 			break;
 		case "turn.completed": {
 			state.running.delete(e.conv);
 			renderInterrupt();
+			renderAgentGroup();
 			// A report-only turn names its published message (report_event_seq); user turns keep the last answer.
 			const speech = e.conv === state.current ? speechTextForTurn(e.data, tts.lastText.get(e.conv), (seq) => tts.finals.get(`${e.conv}/${seq}`)) : null;
 			if (tts.enabled && speech) speakSummary(speech);
@@ -1482,7 +1614,7 @@ function stopSpeech() {
 const ttsButton = $("toggle-tts");
 
 function renderTtsToggle() {
-	ttsButton.textContent = tts.enabled ? "음성 답변 켜짐" : "음성 답변 꺼짐";
+	ttsButton.textContent = t(tts.enabled ? "voice.ttsOn" : "voice.ttsOff");
 	ttsButton.setAttribute("aria-pressed", String(tts.enabled));
 	ttsButton.classList.toggle("on", tts.enabled);
 }
@@ -1507,7 +1639,7 @@ function playSpeech(url) {
 		tts.audio.onerror = resolve;
 		tts.audio.onpause = resolve;
 		tts.audio.play().catch((err) => {
-			systemLine(`음성 재생 실패: ${err}`, true);
+			systemLine(t("voice.playbackFailed", { error: err }), true);
 			resolve();
 		});
 	}).finally(() => {
@@ -1535,7 +1667,7 @@ function speak(text, { force = false, maxChunks = Infinity } = {}) {
 				URL.revokeObjectURL(url);
 			}
 		} catch (err) {
-			systemLine(`음성 답변 실패: ${err instanceof Error ? err.message : err}`, true);
+			systemLine(t("voice.ttsFailed", { error: err instanceof Error ? err.message : err }), true);
 		}
 		next?.then(URL.revokeObjectURL, () => {});
 	});
@@ -1548,7 +1680,7 @@ async function speakSummary(text) {
 		devLog("in", { type: "tts.summary", data: { summary } });
 		speak(summary);
 	} catch (err) {
-		systemLine(`음성 요약 실패(${err instanceof Error ? err.message : err}), 앞부분만 읽습니다.`, true);
+		systemLine(t("voice.summaryFailed", { error: err instanceof Error ? err.message : err }), true);
 		speak(text, { maxChunks: 2 });
 	}
 }
@@ -1556,7 +1688,7 @@ async function speakSummary(text) {
 function readLastInFull() {
 	const text = tts.lastText.get(state.current);
 	if (!text) {
-		systemLine("읽을 답변이 아직 없습니다.");
+		systemLine(t("voice.nothingToRead"));
 		return;
 	}
 	if (tts.audio) tts.audio.pause();
@@ -1587,7 +1719,7 @@ function renderOmo() {
 	if (omoStatus === null) return;
 	const ready = omoStatus === "ready";
 	const checking = ready && state.ws?.readyState === WebSocket.OPEN && isUnknown(activity, state.current);
-	els.omo.textContent = checking ? "작업 상태 확인 중" : ready ? "엔진 연결됨" : omoStatus === "connecting" ? "엔진 연결 중" : "엔진 끊김";
+	els.omo.textContent = t(checking ? "engine.checking" : ready ? "engine.ready" : omoStatus === "connecting" ? "engine.connecting" : "engine.down");
 	els.omo.classList.toggle("ok", ready);
 }
 
@@ -1612,14 +1744,14 @@ function renderModels(info) {
 		modelSelect.append(group);
 	}
 	if (info.current) modelSelect.value = `${info.current.provider}/${info.current.id}`;
-	modelSelect.title = info.current ? `엔진 모델: ${info.current.name}` : "엔진 모델";
+	modelSelect.title = info.current ? t("model.current", { name: info.current.name }) : t("model.title");
 	// A held switch stays on the current model until the next message compacts the context for the target.
 	const pending = info.pending ?? null;
 	modelPending.hidden = !pending;
 	if (pending) {
-		modelPending.textContent = `→ ${pending.name} 대기`;
-		modelPending.title = `${pending.name}(으)로 바꾸려면 컨텍스트를 줄여야 합니다. 다음 메시지를 보낼 때 압축한 뒤 적용됩니다. 그때까지 ${info.current?.name ?? "현재 모델"}을(를) 씁니다.`;
-		modelSelect.title += ` · ${pending.name}: 다음 메시지 때 압축 뒤 적용`;
+		modelPending.textContent = t("model.pending", { name: pending.name });
+		modelPending.title = t("model.pending.tip", { name: pending.name, current: info.current?.name ?? t("model.currentFallback") });
+		modelSelect.title += t("model.pendingSuffix", { name: pending.name });
 	}
 	modelSelect.disabled = info.options.length === 0;
 }
@@ -1632,7 +1764,7 @@ async function loadModels() {
 		renderModels(body);
 	} catch (error) {
 		modelSelect.disabled = true;
-		modelSelect.title = `모델 목록을 불러오지 못했습니다: ${error.message}`;
+		modelSelect.title = t("model.loadFailed", { error: error.message });
 	}
 }
 
@@ -1646,7 +1778,7 @@ modelSelect.onchange = async () => {
 		renderModels(body);
 	} catch (error) {
 		if (modelInfo) renderModels(modelInfo);
-		modelSelect.title = `모델을 바꾸지 못했습니다: ${error.message}`;
+		modelSelect.title = t("model.changeFailed", { error: error.message });
 	}
 };
 
@@ -1657,6 +1789,14 @@ document.addEventListener("visibilitychange", () => sendWebPresence());
 window.addEventListener("pagehide", () => sendWebPresence(false));
 window.addEventListener("pageshow", () => sendWebPresence());
 
+/** The profile block's connection line: connecting (the page's first state), connected, or waiting to reconnect. */
+let connState = "connecting";
+
+function renderConn() {
+	els.conn.textContent = t(`conn.${connState}`);
+}
+renderConn();
+
 /** Callbacks belong to the socket that registered them: once state.ws moves on, a late open/message/close changes nothing. */
 function connect() {
 	const ws = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/ws`);
@@ -1668,18 +1808,23 @@ function connect() {
 	ws.onopen = () => {
 		if (ws !== state.ws) return;
 		historyRequests.length = 0;
-		els.conn.textContent = "게이트웨이 연결됨";
+		connState = "connected";
+		renderConn();
 		$("head-avatar").classList.add("live");
 		renderActivity();
 		inbox.online = true;
 		void securityInbox.connect();
 		void allowedValues.connect();
+		void securityBaseline.connect();
 		renderInboxOnline();
 		send({ type: "hello", data: { client: "web-dev", version: "0.1.0" } });
 		sendWebPresence();
 		resendPendingReportSpeech();
+		void readUiLanguage();
 		void readVoiceSetting();
 		void readSecuritySetting();
+		void repoSecurity.read();
+		void readFormal();
 		void notificationSettings.connect();
 		void readVoiceInstall();
 		// Also after an update restarted the gateway: the new version and the update result show without a reload.
@@ -1693,7 +1838,8 @@ function connect() {
 		if (ws !== state.ws) return;
 		endGeneration(activity, generation);
 		if (endStatusGeneration(workStatus, statusGeneration)) renderWorkStatusAll();
-		els.conn.textContent = "재연결 대기";
+		connState = "waiting";
+		renderConn();
 		$("head-avatar").classList.remove("live");
 		renderActivity();
 		state.sessionTransitions.clear();
@@ -1702,6 +1848,7 @@ function connect() {
 		securityDetailsRequested.clear();
 		securityInbox.disconnect();
 		allowedValues.disconnect();
+		securityBaseline.disconnect();
 		notificationSettings.disconnect();
 		historyRequests.length = 0;
 		renderInboxOnline();
@@ -1787,7 +1934,7 @@ function imageStrip(names) {
 		a.rel = "noopener noreferrer";
 		const img = document.createElement("img");
 		img.src = a.href;
-		img.alt = "첨부 이미지";
+		img.alt = t("attach.imageAlt");
 		img.loading = "lazy";
 		img.addEventListener("load", () => scrollToBottom());
 		a.appendChild(img);
@@ -1804,11 +1951,11 @@ function renderTray() {
 		box.className = "attach-thumb";
 		const img = document.createElement("img");
 		img.src = item.url;
-		img.alt = item.file.name || "첨부 이미지";
+		img.alt = item.file.name || t("attach.imageAlt");
 		const remove = document.createElement("button");
 		remove.type = "button";
 		remove.textContent = "×";
-		remove.title = "빼기";
+		remove.title = t("attach.remove");
 		remove.disabled = attach.busy;
 		remove.onclick = () => {
 			URL.revokeObjectURL(item.url);
@@ -1821,21 +1968,21 @@ function renderTray() {
 	if (attach.busy) {
 		const note = document.createElement("span");
 		note.className = "attach-note";
-		note.textContent = "올리는 중…";
+		note.textContent = t("attach.uploading");
 		attach.tray.appendChild(note);
 	}
 }
 
 function addAttachments(files) {
 	if (attach.busy) {
-		systemLine("이미지를 올리는 동안에는 첨부를 추가할 수 없습니다.");
+		systemLine(t("attach.busy"));
 		return;
 	}
 	const images = [...files].filter((f) => /^image\/(png|jpeg|gif|webp)$/.test(f.type));
-	if (images.length < files.length) systemLine("PNG, JPG, GIF, WebP 이미지만 보낼 수 있습니다.", true);
+	if (images.length < files.length) systemLine(t("attach.types"), true);
 	for (const file of images) {
 		if (attach.items.length >= MAX_ATTACH) {
-			systemLine(`이미지는 한 번에 ${MAX_ATTACH}장까지 보낼 수 있습니다.`, true);
+			systemLine(t("attach.max", { max: MAX_ATTACH }), true);
 			break;
 		}
 		attach.items.push({ file, url: URL.createObjectURL(file) });
@@ -1863,12 +2010,12 @@ async function prepareImage(file) {
 
 async function uploadImage(file) {
 	const image = await prepareImage(file);
-	if (image.size > MAX_UPLOAD_BYTES) throw new Error("이미지는 한 장당 10 MiB까지 업로드할 수 있습니다. 더 작은 이미지를 선택하세요.");
+	if (image.size > MAX_UPLOAD_BYTES) throw new Error(t("attach.tooLarge"));
 	const form = new FormData();
 	form.append("image", image, file.name || "image");
 	const res = await fetch("/api/upload", { method: "POST", body: form });
 	const body = await res.json().catch(() => ({}));
-	if (res.status === 413) throw new Error("서버 또는 프록시가 요청 크기를 거부했습니다(HTTP 413). 더 작은 이미지를 선택하세요. 초안은 유지했습니다.");
+	if (res.status === 413) throw new Error(t("attach.rejected413"));
 	if (!res.ok || !body.name) throw new Error(body.error ?? String(res.status));
 	return body.name;
 }
@@ -1897,7 +2044,7 @@ async function sendWithImages(text) {
 		}
 		if (state.current === conv) scrollToBottom(true);
 	} catch (error) {
-		systemLine(`이미지를 올리지 못했습니다: ${error.message}`, true);
+		systemLine(t("attach.uploadFailed", { error: error.message }), true);
 	} finally {
 		attach.busy = false;
 		refs.state.locked = false;
@@ -1936,6 +2083,7 @@ async function deviceAction(id, path, method) {
 }
 
 const deviceBannerState = { devices: [], pairing: null };
+const DEVICE_STATUSES = ["pending", "approved", "denied"];
 
 function renderDeviceRequests(devices = deviceBannerState.devices) {
 	deviceBannerState.devices = devices;
@@ -1945,11 +2093,11 @@ function renderDeviceRequests(devices = deviceBannerState.devices) {
 		const row = document.createElement("div");
 		row.className = "device-request";
 		const text = document.createElement("span");
-		text.textContent = `기기 등록 요청이 ${pairing.failures}번 거절·만료되어 잠겼습니다. 새 기기를 등록하려면 잠금을 푸세요.`;
+		text.textContent = t("device.locked", { count: pairing.failures });
 		const unlock = document.createElement("button");
 		unlock.className = "btn ok";
-		unlock.textContent = "잠금 해제";
-		unlock.onclick = () => deviceAction("unlock", "", "POST").catch((err) => systemLine(`잠금 해제 실패: ${err.message}`, true));
+		unlock.textContent = t("device.unlock");
+		unlock.onclick = () => deviceAction("unlock", "", "POST").catch((err) => systemLine(t("device.unlockFailed", { error: err.message }), true));
 		row.append(text, unlock);
 		deviceBanner.append(row);
 	}
@@ -1957,36 +2105,37 @@ function renderDeviceRequests(devices = deviceBannerState.devices) {
 		const row = document.createElement("div");
 		row.className = "device-request";
 		const text = document.createElement("span");
-		text.textContent = `새 기기 접속 요청: ${d.name} · 확인 번호 `;
+		text.textContent = t("device.request", { name: d.name });
 		const code = document.createElement("b");
 		code.textContent = d.code;
-		text.append(code, " · 30초 안에 승인하지 않으면 자동 거절");
+		text.append(code, t("device.autoDeny"));
 		const button = (label, cls, path) => {
 			const b = document.createElement("button");
 			b.className = `btn ${cls}`;
 			b.textContent = label;
-			b.onclick = () => deviceAction(d.id, path, "POST").catch((err) => systemLine(`기기 ${label} 실패: ${err.message}`, true));
+			b.onclick = () => deviceAction(d.id, path, "POST").catch((err) => systemLine(t("device.actionFailed", { action: label, error: err.message }), true));
 			return b;
 		};
-		row.append(text, button("승인", "ok", "/approve"), button("거절", "danger", "/deny"));
+		row.append(text, button(t("common.approve"), "ok", "/approve"), button(t("common.deny"), "danger", "/deny"));
 		deviceBanner.append(row);
 	}
 }
 
 async function listDevicesCommand(deleteIndex) {
 	const res = await fetch("/api/devices");
-	if (!res.ok) throw new Error(res.status === 403 ? "기기 관리는 맥에서만 할 수 있습니다" : String(res.status));
+	if (!res.ok) throw new Error(res.status === 403 ? t("device.macOnly") : String(res.status));
 	const devices = await res.json();
 	if (deleteIndex !== undefined) {
 		const target = devices[deleteIndex - 1];
-		if (!target) throw new Error(`${deleteIndex}번 기기가 없습니다`);
+		if (!target) throw new Error(t("device.missing", { index: deleteIndex }));
 		await deviceAction(target.id, "", "DELETE");
-		systemLine(`기기 삭제: ${target.name} (이 기기는 다시 등록해야 접속할 수 있습니다)`);
+		systemLine(t("device.deleted", { name: target.name }));
 		return;
 	}
-	const status = { pending: "승인 대기", approved: "승인됨", denied: "거절됨" };
-	const when = (ts) => (ts ? new Date(ts).toLocaleString("ko-KR", { dateStyle: "medium", timeStyle: "medium", hourCycle: "h23" }) : "접속 기록 없음");
-	systemLine(devices.length ? `등록된 기기: ${devices.map((d, i) => `${i + 1}. ${d.name} · ${status[d.status] ?? d.status} · 마지막 접속 ${when(d.lastSeen)}`).join(" / ")}` : "등록된 기기가 없습니다.");
+	const status = (value) => (DEVICE_STATUSES.includes(value) ? t(`device.status.${value}`) : value);
+	const when = (ts) => (ts ? new Date(ts).toLocaleString(uiLocale(), { dateStyle: "medium", timeStyle: "medium", hourCycle: "h23" }) : t("device.neverSeen"));
+	const list = devices.map((d, i) => t("device.listItem", { index: i + 1, name: d.name, status: status(d.status), when: when(d.lastSeen) })).join(" / ");
+	systemLine(devices.length ? t("device.list", { list }) : t("device.none"));
 }
 
 async function applyOptionCommand(command) {
@@ -2000,7 +2149,7 @@ async function applyOptionCommand(command) {
 		return;
 	}
 	if (command.kind === "devices" || command.kind === "deviceDelete") {
-		await listDevicesCommand(command.index).catch((err) => systemLine(`기기 명령 실패: ${err.message}`, true));
+		await listDevicesCommand(command.index).catch((err) => systemLine(t("device.commandFailed", { error: err.message }), true));
 		scrollToBottom();
 		return;
 	}
@@ -2019,10 +2168,14 @@ els.composer.addEventListener("submit", (ev) => {
 const slash = { el: $("slash-menu"), omo: null, loading: null, failed: false, items: [], index: 0 };
 
 function loadSlashCommands() {
-	slash.loading ??= fetch(`/api/commands?conv=${encodeURIComponent(state.current)}`)
+	// The list is the open conversation's: an agent session's skills are its allowlist (the gateway filters them).
+	const conv = state.current;
+	slash.loading ??= fetch(`/api/commands?conv=${encodeURIComponent(conv)}`)
 		.then(async (res) => {
 			if (!res.ok) throw new Error(String(res.status));
-			slash.omo = await res.json();
+			const list = await res.json();
+			if (conv !== state.current) return;
+			slash.omo = list;
 			slash.failed = false;
 		})
 		.catch(() => {
@@ -2039,6 +2192,12 @@ function closeSlashMenu() {
 	slash.items = [];
 }
 
+function resetSlashCommands() {
+	slash.omo = null;
+	slash.failed = false;
+	closeSlashMenu();
+}
+
 function renderSlashMenu() {
 	const query = slashQuery(els.input.value);
 	if (query === null) return closeSlashMenu();
@@ -2066,7 +2225,7 @@ function renderSlashMenu() {
 		});
 		return row;
 	});
-	const note = slash.loading ? "엔진 명령과 스킬을 불러오는 중…" : slash.failed ? "엔진 명령과 스킬을 불러오지 못했습니다. 웹 지그 명령만 보입니다." : rows.length === 0 ? "맞는 명령이나 스킬이 없습니다." : "";
+	const note = slash.loading ? t("slash.loading") : slash.failed ? t("slash.failed") : rows.length === 0 ? t("slash.empty") : "";
 	if (note) {
 		const div = document.createElement("div");
 		div.className = "slash-note";
@@ -2133,7 +2292,7 @@ els.input.addEventListener("keydown", (ev) => {
 });
 els.input.addEventListener("input", (ev) => {
 	if (ev.isTrusted) {
-		cancelAutoSend("입력창을 고쳐서");
+		cancelAutoSend(t("voice.autoSendCancel.edited"));
 		resetRecall(recall.rec);
 	}
 	els.input.style.height = "auto";
@@ -2143,13 +2302,9 @@ els.input.addEventListener("input", (ev) => {
 });
 els.input.addEventListener("blur", closeSlashMenu);
 slash.el.addEventListener("pointerdown", (ev) => ev.preventDefault());
-$("new-conv").onclick = () => {
-	const title = prompt("새 대화 이름", "새 작업");
-	if (title) send({ type: "conversation.create", data: { title } });
-};
 $("interrupt").onclick = () => send({ type: "input.interrupt", conv: state.current, data: {} });
 $("rotate-session").onclick = () => {
-	if (!confirm("이 대화의 엔진 세션을 새로 시작할까요?\n화면의 기록은 그대로 남고, 최근 대화 일부를 새 세션에 넘겨 줍니다.")) return;
+	if (!confirm(t("head.newSession.confirm"))) return;
 	send({ type: "conversation.rotate", conv: state.current });
 };
 function toggleDevPanel() {
@@ -2164,6 +2319,17 @@ $("clear-dev").onclick = () => {
 
 let recorder = null;
 let chunks = [];
+let micState = "idle";
+
+/** The mic button reads its state: idle, recording (press to send) or recognizing the recording. */
+function setMicState(state) {
+	micState = state;
+	els.mic.classList.toggle("recording", state === "recording");
+	els.mic.classList.toggle("busy", state === "recognizing");
+	els.mic.textContent = t(state === "recording" ? "composer.mic.recording" : state === "recognizing" ? "composer.mic.recognizing" : "composer.mic");
+}
+setMicState("idle");
+
 els.mic.onclick = async () => {
 	if (recorder && recorder.state === "recording") {
 		recorder.stop();
@@ -2180,44 +2346,41 @@ els.mic.onclick = async () => {
 		recorder = new MediaRecorder(stream);
 		recorder.ondataavailable = (ev) => chunks.push(ev.data);
 		recorder.onstop = async () => {
-			for (const t of stream.getTracks()) t.stop();
-			els.mic.classList.remove("recording");
+			for (const track of stream.getTracks()) track.stop();
 			if (!voice.enabled) {
-				els.mic.textContent = "마이크";
+				setMicState("idle");
 				return;
 			}
-			els.mic.classList.add("busy");
-			els.mic.textContent = "인식 중";
+			setMicState("recognizing");
 			const blob = new Blob(chunks, { type: recorder.mimeType || "audio/webm" });
 			const form = new FormData();
 			form.append("audio", blob, "voice.webm");
 			try {
 				const res = await fetch(`/api/voice?conv=${encodeURIComponent(state.current)}`, { method: "POST", body: form });
 				const body = await res.json();
-				if (!res.ok) systemLine(`음성 인식 실패: ${body.error}`, true);
+				if (!res.ok) systemLine(t("voice.sttFailed", { error: body.error }), true);
 			} catch (err) {
-				systemLine(`음성 인식 실패: ${err}`, true);
+				systemLine(t("voice.sttFailed", { error: err }), true);
 			} finally {
-				els.mic.classList.remove("busy");
-				els.mic.textContent = "마이크";
+				setMicState("idle");
 			}
 		};
 		recorder.start();
-		els.mic.classList.add("recording");
-		els.mic.textContent = "녹음 중 (눌러서 전송)";
+		setMicState("recording");
 	} catch (err) {
-		systemLine(`마이크를 쓸 수 없습니다: ${err}`, true);
+		systemLine(t("voice.micUnavailable", { error: err }), true);
 	}
 };
 
 const WAKE_SAMPLE_RATE = 16000;
 const WAKE_ARMED_MS = 8000;
-const wake = { vad: null, armedUntil: 0, queue: Promise.resolve() };
+const wake = { vad: null, armedUntil: 0, queue: Promise.resolve(), status: "off" };
 const wakeButton = $("toggle-wake");
+const WAKE_LABELS = { off: "voice.wakeOff", loading: "voice.wakeLoading", listening: "voice.wakeListening", armed: "voice.wakeArmed" };
 
 function setWakeStatus(status) {
-	const labels = { off: "호출어 꺼짐", loading: "호출어 준비 중", listening: "헤이 지그 대기", armed: "말씀하세요" };
-	wakeButton.textContent = labels[status];
+	wake.status = status;
+	wakeButton.textContent = t(WAKE_LABELS[status]);
 	wakeButton.setAttribute("aria-pressed", String(status !== "off"));
 	wakeButton.classList.toggle("on", status === "listening" || status === "loading");
 	wakeButton.classList.toggle("armed", status === "armed");
@@ -2273,24 +2436,30 @@ function cancelAutoSend(reason) {
 	if (!autoSend.timer) return;
 	clearInterval(autoSend.timer);
 	autoSend.timer = null;
-	sendButton.textContent = "전송";
+	renderSendButton();
 	sendButton.classList.remove("counting");
-	if (reason) systemLine(`자동 전송 취소 (${reason})`);
+	if (reason) systemLine(t("voice.autoSendCancelled", { reason }));
+}
+
+/** "Send", or "Send 3" while a voice command counts down to its automatic send. */
+function renderSendButton() {
+	sendButton.textContent = autoSend.timer ? t("composer.sendIn", { n: autoSend.left }) : t("composer.send");
 }
+renderSendButton();
 
 function scheduleAutoSend() {
 	cancelAutoSend();
 	autoSend.left = AUTO_SEND_SECONDS;
-	sendButton.textContent = `전송 ${autoSend.left}`;
 	sendButton.classList.add("counting");
 	autoSend.timer = setInterval(() => {
 		autoSend.left -= 1;
 		if (autoSend.left > 0) {
-			sendButton.textContent = `전송 ${autoSend.left}`;
+			renderSendButton();
 			return;
 		}
 		sendText();
 	}, 1000);
+	renderSendButton();
 }
 
 function voiceCommand(text) {
@@ -2302,7 +2471,7 @@ function stopForTripleHey() {
 	stopSpeech();
 	cancelAutoSend();
 	send({ type: "input.interrupt", conv: state.current, data: {} });
-	systemLine("헤이 헤이 헤이: 하던 작업을 멈췄습니다. 말씀하세요.");
+	systemLine(t("voice.tripleHey"));
 	chime();
 	arm();
 }
@@ -2311,9 +2480,9 @@ async function onWakeSegment(samples, armed, duringSpeech) {
 	if (!voice.enabled) return;
 	let text;
 	try {
-		text = await transcribeSamples(samples, armed ? null : "헤이 지그. 헤이 헤이 헤이.");
+		text = await transcribeSamples(samples, armed ? null : t("voice.wakePrompt"));
 	} catch (err) {
-		systemLine(`호출어 인식 실패: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("voice.wakeSttFailed", { error: err instanceof Error ? err.message : err }), true);
 		return;
 	}
 	devLog("in", { type: "wake.heard", data: { text, armed, duringSpeech } });
@@ -2323,12 +2492,12 @@ async function onWakeSegment(samples, armed, duringSpeech) {
 	}
 	if (duringSpeech) return;
 	if (autoSend.timer && isCancelWord(text)) {
-		cancelAutoSend("음성");
+		cancelAutoSend(t("voice.autoSendCancel.voice"));
 		return;
 	}
 	const hit = matchWake(text);
-	if (!armed && !hit && text) els.input.placeholder = `들은 말: "${text.slice(0, 40)}" (호출어 아님)`;
-	else els.input.placeholder = "메시지 보내기";
+	if (!armed && !hit && text) els.input.placeholder = t("voice.heard", { text: text.slice(0, 40) });
+	else els.input.placeholder = t("composer.placeholder");
 	if (armed) {
 		disarm();
 		const command = hit ? hit.command : text;
@@ -2380,7 +2549,7 @@ wakeButton.onclick = async () => {
 	} catch (err) {
 		wake.vad = null;
 		setWakeStatus("off");
-		systemLine(`호출어 대기를 시작하지 못했습니다: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("voice.wakeStartFailed", { error: err instanceof Error ? err.message : err }), true);
 	}
 };
 setWakeStatus("off");
@@ -2389,7 +2558,7 @@ const clap = { ctx: null, stream: null };
 const clapButton = $("toggle-clap");
 
 function renderClapToggle() {
-	clapButton.textContent = !clap.ctx ? "박수 감지 꺼짐" : clap.ctx.state === "suspended" ? "박수 감지 (화면 클릭하면 시작)" : "박수 감지 켜짐";
+	clapButton.textContent = t(!clap.ctx ? "voice.clapOff" : clap.ctx.state === "suspended" ? "voice.clapSuspended" : "voice.clapOn");
 	clapButton.setAttribute("aria-pressed", String(Boolean(clap.ctx)));
 	clapButton.classList.toggle("on", Boolean(clap.ctx));
 }
@@ -2436,7 +2605,7 @@ clapButton.onclick = async () => {
 		if (clap.ctx) await stopClap();
 		else await startClap();
 	} catch (err) {
-		systemLine(`박수 감지를 시작하지 못했습니다: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("voice.clapStartFailed", { error: err instanceof Error ? err.message : err }), true);
 	}
 	// The stored choice is the user's own; a stop forced by the voice setting is not written.
 	if (voice.enabled) localStorage.setItem(CLAP_KEY, clap.ctx ? "1" : "0");
@@ -2456,7 +2625,7 @@ function autoStartClap() {
 			if (clap.ctx?.state !== "suspended") return;
 			document.addEventListener("pointerdown", () => clap.ctx?.resume().then(renderClapToggle), { once: true, capture: true });
 		})
-		.catch((err) => systemLine(`박수 감지를 켜지 못했습니다: ${err instanceof Error ? err.message : err}`, true));
+		.catch((err) => systemLine(t("voice.clapEnableFailed", { error: err instanceof Error ? err.message : err }), true));
 }
 autoStartClap();
 
@@ -2510,7 +2679,7 @@ async function setVoiceEnabled(enabled) {
 		voice.reads += 1;
 		await applyVoiceSetting(voiceEnabledFrom(body));
 	} catch (err) {
-		systemLine(`음성 설정을 바꾸지 못했습니다: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("voice.settingFailed", { error: err instanceof Error ? err.message : err }), true);
 	} finally {
 		voice.busy = false;
 	}
@@ -2526,9 +2695,7 @@ const security = { enabled: true, busy: false, read: 0 };
 const securityButton = $("toggle-security");
 
 function renderSecurityToggle() {
-	securityButton.textContent = security.enabled ? "보안검사 켜짐" : "보안검사 꺼짐";
-	securityButton.setAttribute("aria-pressed", String(security.enabled));
-	securityButton.classList.toggle("on", security.enabled);
+	renderSwitch(securityButton, security.enabled);
 }
 
 function applySecurityBody(body) {
@@ -2557,12 +2724,176 @@ async function setSecurityEnabled(enabled) {
 		if (!res.ok) throw new Error(body.error ?? String(res.status));
 		applySecurityBody(body);
 	} catch (err) {
-		systemLine(`보안검사 설정을 바꾸지 못했습니다: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("settings.security.message.saveFailed", { error: err instanceof Error ? err.message : err }), true);
 	} finally {
 		security.busy = false;
 	}
 }
 
+// ---- Improvement 250 and bug 259: the repository security check switch and the formal verification tool rows ----
+const repoSecurity = setupSwitch({ path: "/api/settings/repo-security-check", button: $("toggle-repo-security"), nameKey: "settings.security.repo.title" });
+
+/** A role=switch setting with GET/PUT {enabled} at `path`; `nameKey` names it in the failure line. */
+function setupSwitch({ path, button, nameKey }) {
+	const sw = { enabled: true, busy: false };
+	const render = () => renderSwitch(button, sw.enabled);
+	sw.render = render;
+	sw.apply = (body) => { if (typeof body?.enabled === "boolean") sw.enabled = body.enabled; render(); };
+	sw.read = async () => {
+		try { const res = await fetch(path, { cache: "no-store" }); if (res.ok) sw.apply(await res.json()); } catch { /* Offline: the reconnect reads it again. */ }
+	};
+	button.onclick = async () => {
+		if (sw.busy) return;
+		sw.busy = true;
+		try {
+			const res = await fetch(path, { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ enabled: !sw.enabled }) });
+			const body = await res.json().catch(() => ({}));
+			if (!res.ok) throw new Error(body.error ?? String(res.status));
+			sw.apply(body);
+		} catch (err) {
+			systemLine(t("settings.switchFailed", { name: t(nameKey), error: err instanceof Error ? err.message : err }), true);
+		} finally {
+			sw.busy = false;
+		}
+	};
+	render();
+	return sw;
+}
+
+const FORMAL_PATH = "/api/settings/formal-verification";
+const FORMAL_STATUSES = ["off", "not_installed", "installing", "installed", "failed"];
+const formal = { state: null, busy: false };
+
+/** A known install status reads in the UI language; an unknown one from a newer gateway shows as it is. */
+function formalStatusText(status) {
+	if (!FORMAL_STATUSES.includes(status)) return status;
+	return t(`settings.formal.status.${status}`);
+}
+
+/** The tool's full description for its info icon: the dictionary's when it knows the tool, else the gateway's text. */
+function formalToolDetail(tool) {
+	const key = `settings.formal.tool.${tool.id}.detail`;
+	const text = t(key);
+	return text === key ? tool.description : text;
+}
+
+/** The 1-2 line summary under a tool row: the dictionary's when it knows the tool, else the gateway's description. */
+function formalToolSummary(tool) {
+	const key = `settings.formal.toolSummary.${tool.id}`;
+	const text = t(key);
+	return text === key ? tool.description : text;
+}
+
+/**
+ * The install control of a tool row by its status (bug 259): "install" shows the Install button (not installed, or the
+ * last install failed), "installing" hides it while the install runs, null shows nothing (installed, off, or a status
+ * from a newer gateway).
+ */
+function formalInstallAction(status) {
+	if (status === "not_installed" || status === "failed") return "install";
+	if (status === "installing") return "installing";
+	return null;
+}
+
+/**
+ * One row per tool, shaped like the security check rows: "<label> · <status>", the info icon with the full description,
+ * the Install button when the status asks for it, and the switch ("use this tool in checks once it is installed"; it
+ * never installs). The summary and, after a failed install, its reason sit under the row. Every switch and Install
+ * button is disabled while an install runs (state.busy).
+ */
+function renderFormal() {
+	const s = formal.state;
+	const busy = s?.busy === true;
+	const list = $("formal-tools");
+	list.replaceChildren(...(s?.tools ?? []).map((tool) => {
+		const item = make("li", "formal-tool");
+		const row = make("div", "switch-row");
+		const label = make("span", "switch-label", `${tool.label} · ${formalStatusText(tool.status)}`);
+		label.id = `formal-tool-${tool.id}-label`;
+		const summary = make("p", "update-note switch-summary", formalToolSummary(tool));
+		summary.id = `formal-tool-${tool.id}-summary`;
+		row.append(label, infoTipButton(formalToolDetail(tool)));
+		const action = formalInstallAction(tool.status);
+		if (action === "install") {
+			const install = make("button", "text-btn formal-install", t("settings.formal.install"));
+			install.type = "button";
+			install.setAttribute("aria-describedby", label.id);
+			install.disabled = busy;
+			install.onclick = () => installFormal(tool.id);
+			row.append(install);
+		}
+		if (action === "installing") item.setAttribute("aria-busy", "true");
+		const button = make("button", "switch");
+		button.type = "button";
+		button.setAttribute("role", "switch");
+		button.setAttribute("aria-labelledby", label.id);
+		button.setAttribute("aria-describedby", summary.id);
+		renderSwitch(button, tool.enabled, busy);
+		button.onclick = () => changeFormal(`${FORMAL_PATH}/tools/${encodeURIComponent(tool.id)}`, !tool.enabled);
+		row.append(button);
+		item.append(row, summary);
+		if (tool.error) item.append(make("p", "update-note error", t("settings.formal.tool.error", { error: tool.error })));
+		return item;
+	}));
+}
+
+/**
+ * Whether a state from the gateway replaces the shown one (bug 259): the answer to an Install request can arrive after the
+ * events of an install that already ended, so a state with a lower revision than the shown one is dropped. A state without
+ * a revision (an older gateway) always replaces it.
+ */
+function formalStateNewer(current, body) {
+	if (!body || !Array.isArray(body.tools)) return false;
+	if (typeof body.revision !== "number" || typeof current?.revision !== "number") return true;
+	return body.revision >= current.revision;
+}
+
+function applyFormal(body) {
+	if (formalStateNewer(formal.state, body)) formal.state = body;
+	renderFormal();
+}
+
+async function readFormal() {
+	try { const res = await fetch(FORMAL_PATH, { cache: "no-store" }); if (res.ok) applyFormal(await res.json()); } catch { /* Offline: the reconnect reads it again. */ }
+}
+
+async function changeFormal(path, enabled) {
+	if (formal.busy) return;
+	formal.busy = true;
+	try {
+		const res = await fetch(path, { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ enabled }) });
+		const body = await res.json().catch(() => ({}));
+		if (!res.ok) { applyFormal(body.state); throw new Error(body.error ?? String(res.status)); }
+		applyFormal(body);
+	} catch (err) {
+		systemLine(t("settings.formal.saveFailed", { error: err instanceof Error ? err.message : err }), true);
+	} finally {
+		formal.busy = false;
+	}
+}
+
+/**
+ * The Install button of one tool: POST its install path (no body). The answer is the state with that tool "installing";
+ * the progress and the result arrive as formal-verification.updated. A refusal (409 busy, 404 unknown tool) applies the
+ * returned state and is reported in the chat.
+ */
+async function installFormal(id) {
+	if (formal.busy) return;
+	formal.busy = true;
+	try {
+		const res = await fetch(`${FORMAL_PATH}/tools/${encodeURIComponent(id)}/install`, { method: "POST" });
+		const body = await res.json().catch(() => ({}));
+		if (!res.ok) { applyFormal(body.state); throw new Error(body.error ?? String(res.status)); }
+		applyFormal(body);
+	} catch (err) {
+		systemLine(t("settings.formal.installFailed", { error: err instanceof Error ? err.message : err }), true);
+	} finally {
+		formal.busy = false;
+	}
+}
+
+renderFormal();
+
 /** A held text comes back into an empty composer of its conversation, so the user can fix it and send again. */
 function restoreDraft(conv, text) {
 	if (typeof text !== "string" || state.current !== conv || els.input.value !== "" || attach.items.length || refs.state.items.length) return;
@@ -2592,7 +2923,7 @@ function securityContents(id, surface) {
 	const entry = securityInbox.entries.get(id);
 	const view = securityInbox.view(id);
 	const held = entry.held;
-	const nodes = [make("div", "security-title", held.source === "answer" ? "답변 보안 확인" : "메시지 보안 확인")];
+	const nodes = [make("div", "security-title", t(held.source === "answer" ? "security.title.answer" : "security.title.message"))];
 	const list = make("ul", "security-list");
 	for (const occurrence of held.occurrences ?? []) {
 		const item = make("li");
@@ -2601,16 +2932,10 @@ function securityContents(id, surface) {
 	}
 	nodes.push(list);
 	if (held.status === "pending") nodes.push(make("p", "security-question",
-		"승인하면 원본을 전송하고 위의 정확한 값 전체를 이 설치에 기억합니다. 같은 값은 다음 검사부터 허용합니다. 취소는 이번 전송만 중단하고 기존 작업은 멈추지 않습니다. " +
-		(held.source === "answer" ? "이번 답은 제출하지 않으며 원래 질문과 답변 작성 내용은 그대로 둡니다."
-			: "메시지는 같은 대화의 빈 입력창에만 복구하며 새 초안·첨부·참조는 바꾸지 않습니다.")));
-	const labels = { pending: "선택 대기", processing: "처리 중", sent: "전송 확인", cancelled: "이번 전송 취소", failed: "전송 실패", unconfirmed: "전송 결과 미확인 · 자동 재전송하지 않습니다" };
-	const remembered = view.remembered === null ? "값 기억 결과 미확인" : view.remembered ? "정확한 값 기억됨" : "값 기억 안 됨";
-	const reasons = { allowlist_persist_failed: "허용 값을 저장하지 못했습니다", state_persist_failed: "처리 기록을 확인하지 못했습니다",
-		payload_lost: "보류 원문이 없어 보내지 못했습니다", dispatch_failed: "전송을 시작하지 못했습니다",
-		dispatch_unknown: "전달 여부를 확인하지 못했습니다", original_decision_conflict: "원래 질문이 변경되어 이번 답을 보내지 않았습니다" };
-	const reason = held.errorCode ? reasons[held.errorCode] ?? "상태를 다시 확인하세요" : "";
-	const status = make("p", `security-status${view.status === "sent" ? " confirmed" : ""}`, `${labels[view.status]} · ${remembered}${reason ? ` · ${reason}` : ""}`);
+		t("security.question") + t(held.source === "answer" ? "security.question.answer" : "security.question.message")));
+	const remembered = t(view.remembered === null ? "security.remembered.unknown" : view.remembered ? "security.remembered.yes" : "security.remembered.no");
+	const reason = held.errorCode ? t(SECURITY_REASONS.includes(held.errorCode) ? `security.reason.${held.errorCode}` : "security.reason.unknown") : "";
+	const status = make("p", `security-status${view.status === "sent" ? " confirmed" : ""}`, `${t(`security.status.${view.status}`)} · ${remembered}${reason ? ` · ${reason}` : ""}`);
 	status.setAttribute("role", "status");
 	nodes.push(status);
 	const actions = make("div", "security-actions inbox-actions");
@@ -2619,25 +2944,25 @@ function securityContents(id, surface) {
 		b.type = "button"; b.disabled = !enabled; b.onclick = action; actions.append(b);
 	};
 	if (held.status === "pending" || view.status === "processing") {
-		button("원본 전송하고 값 기억", "security-approve", view.approve, () => void securityInbox.decide(id, true));
-		button("이번 전송 취소", "security-cancel", view.cancel, () => void securityInbox.decide(id, false));
+		button(t("security.approve"), "security-approve", view.approve, () => void securityInbox.decide(id, true));
+		button(t("security.cancel"), "security-cancel", view.cancel, () => void securityInbox.decide(id, false));
 	}
 	if (view.check || (held.status === "pending" && !completeDetail(held))) {
-		button("상태 확인", "security-refresh", inbox.online && !entry.busy, () => void securityInbox.detail(id));
+		button(t("security.refresh"), "security-refresh", inbox.online && !entry.busy, () => void securityInbox.detail(id));
 	}
 	if (held.status === "pending" && !view.approve && !entry.busy && !entry.uncertain) {
-		nodes.push(make("p", "inbox-note", "게이트웨이의 기억 지원과 전체 값을 확인해야 승인할 수 있습니다."));
+		nodes.push(make("p", "inbox-note", t("security.needsDetail")));
 	}
 	if (surface === "inbox" && (view.hide || view.cancel)) {
-		button("삭제", "inbox-dismiss-open", true, () => {
+		button(t("common.delete"), "inbox-dismiss-open", true, () => {
 			if (view.hide) { securityInbox.hide(id); renderInboxList(); return; }
 			inbox.dismissing.add(id);
 			renderInboxItem(decisionById(inbox.state, id)).querySelector(".inbox-dismiss-keep")?.focus();
 		});
 		if (inbox.dismissing.has(id)) {
 			const box = make("div", "inbox-dismiss mode-cancel");
-			box.append(make("p", "inbox-dismiss-text", "이번 전송만 취소합니다. 원래 질문과 답변 작성 내용은 남습니다."));
-			const confirm = make("button", "text-btn danger security-dismiss-confirm", "전송 취소하고 삭제");
+			box.append(make("p", "inbox-dismiss-text", t("security.dismissText")));
+			const confirm = make("button", "text-btn danger security-dismiss-confirm", t("security.dismissConfirm"));
 			confirm.disabled = !view.cancel;
 			confirm.onclick = async () => {
 				await securityInbox.decide(id, false);
@@ -2645,7 +2970,7 @@ function securityContents(id, surface) {
 				inbox.dismissing.delete(id);
 				renderInboxList();
 			};
-			const keep = make("button", "text-btn inbox-dismiss-keep", "그대로 두기");
+			const keep = make("button", "text-btn inbox-dismiss-keep", t("common.keep"));
 			keep.onclick = () => { inbox.dismissing.delete(id); renderInboxItem(decisionById(inbox.state, id)); };
 			box.append(confirm, keep); nodes.push(box);
 		}
@@ -2654,6 +2979,8 @@ function securityContents(id, surface) {
 	return nodes;
 }
 
+const SECURITY_REASONS = ["allowlist_persist_failed", "state_persist_failed", "payload_lost", "dispatch_failed", "dispatch_unknown", "original_decision_conflict"];
+
 function renderSecuritySurfaces() {
 	for (const [id, entry] of securityInbox.entries) {
 		const held = entry.held;
@@ -2670,7 +2997,7 @@ function renderSecuritySurfaces() {
 				card = make("div", "msg system security-card");
 				card.dataset.heldId = id;
 				card.setAttribute("role", "group");
-				card.setAttribute("aria-label", "보안 확인");
+				card.setAttribute("aria-label", t("security.cardLabel"));
 				heldCards.set(id, card);
 			}
 			card.setAttribute("aria-busy", String(entry.busy));
@@ -2717,19 +3044,32 @@ function renderAllowedValues() {
 	const model = allowedValues.state;
 	const list = $("security-allowed-list");
 	list.replaceChildren();
-	$("security-allowed-status").textContent = !model.online ? "연결이 끊겼습니다." : model.busy ? "삭제 처리 중…" : model.loading ? "불러오는 중…" : model.error || (model.ready && model.values.length === 0 ? "기억한 값이 없습니다." : "");
+	$("security-allowed-status").textContent = !model.online ? t("common.disconnected") : model.busy ? t("common.processing") : model.loading ? t("common.loading")
+		: model.error || model.notice || (model.ready && model.values.length === 0 ? t("settings.security.allowed.empty") : "");
 	const locked = !model.online || model.loading || model.busy || !model.ready || Boolean(model.error);
 	$("security-allowed-refresh").disabled = !model.online || model.loading || model.busy;
 	$("security-allowed-clear").disabled = locked || model.values.length === 0;
+	// Improvement 232 (todo 21): each value's repository toggle judges against the baseline block's automatic items.
+	const auto = securityBaseline.state.auto;
 	for (const value of model.values) {
 		const row = make("li", "security-allowed-item");
 		row.dataset.allowedId = value.id;
-		const client = value.approvedBy.client === "android" ? "Android 앱" : "웹";
+		const client = t(value.approvedBy.client === "android" ? "security.client.android" : "security.client.web");
 		row.append(make("code", "security-value", value.value), make("div", "inbox-note", `${value.label} · ${dateTimeLabel(value.approvedAt)} · ${client}`));
-		const remove = make("button", "text-btn", "제거");
+		const repo = repoAllowed(value);
+		const blocked = repoScopeBlock(value.value, auto);
+		if (blocked) row.append(make("div", "inbox-note", blocked));
+		const scope = make("button", "text-btn security-scope", t(repo ? "settings.security.allowed.repoOn" : "settings.security.allowed.repoOff"));
+		scope.setAttribute("aria-pressed", String(repo));
+		scope.classList.toggle("on", repo);
+		scope.disabled = locked || blocked !== "";
+		scope.onclick = async () => { allowedRemoval = undefined; await allowedValues.setScope(value.id, !repo); renderAllowedValues(); };
+		const remove = make("button", "text-btn", t("common.remove"));
 		remove.disabled = locked;
 		remove.onclick = () => { allowedRemoval = value.id; renderAllowedValues(); $("security-allowed-keep").focus(); };
-		row.append(remove); list.append(row);
+		const actions = make("div", "update-buttons");
+		actions.append(scope, remove);
+		row.append(actions); list.append(row);
 	}
 	const confirm = $("security-allowed-confirm");
 	confirm.hidden = allowedRemoval === undefined;
@@ -2747,6 +3087,67 @@ $("security-allowed-remove").onclick = async () => {
 	renderAllowedValues();
 };
 
+// ---- Improvement 232 (todo 20): the repository baseline terms, read-only automatic items and the exported file's state ----
+const securityBaseline = createSecurityBaseline(fetch, onSecurityBaselineChanged);
+let baselineRemoval = undefined;
+
+function onSecurityBaselineChanged() {
+	renderSecurityBaseline();
+	// The remembered values' repository toggles judge against this block's automatic items (todo 21).
+	renderAllowedValues();
+}
+
+function renderSecurityBaseline() {
+	const model = securityBaseline.state;
+	const list = $("security-baseline-list");
+	list.replaceChildren();
+	$("security-baseline-status").textContent = !model.online ? t("common.disconnected") : model.busy ? t("common.processing") : model.loading ? t("common.loading")
+		: model.error || model.notice || (model.ready && model.terms.length === 0 ? t("settings.security.baseline.empty") : "");
+	const locked = !model.online || model.loading || model.busy || !model.ready || Boolean(model.error);
+	$("security-baseline-refresh").disabled = !model.online || model.loading || model.busy;
+	$("security-baseline-add").disabled = locked;
+	const exported = $("security-baseline-export");
+	exported.textContent = !model.ready ? "" : t("settings.security.baseline.file", { revision: model.revision, state: model.exportError ? t("settings.security.baseline.exportFailed", { error: model.exportError })
+		: model.exportedAt ? t("settings.security.baseline.exportedAt", { time: dateTimeLabel(model.exportedAt) }) : t("settings.security.baseline.notExported") });
+	exported.classList.toggle("error", model.ready && model.exportError !== null);
+	for (const [label, value] of model.ready && model.auto ? [[t("settings.security.baseline.home"), model.auto.home], [t("settings.security.baseline.user"), model.auto.user]] : []) {
+		const row = make("li", "security-allowed-item security-baseline-auto");
+		row.append(make("code", "security-value", value), make("div", "inbox-note", t("settings.security.baseline.autoNote", { label })));
+		list.append(row);
+	}
+	for (const term of model.terms) {
+		const row = make("li", "security-allowed-item");
+		row.dataset.termId = term.id;
+		row.append(make("code", "security-value", term.value), make("div", "inbox-note", t("settings.security.baseline.added", { time: dateTimeLabel(term.addedAt) })));
+		const remove = make("button", "text-btn", t("common.delete"));
+		remove.disabled = locked;
+		remove.onclick = () => { baselineRemoval = term.id; renderSecurityBaseline(); $("security-baseline-keep").focus(); };
+		row.append(remove); list.append(row);
+	}
+	$("security-baseline-confirm").hidden = baselineRemoval === undefined;
+	$("security-baseline-remove").disabled = locked;
+}
+
+/** The typed value leaves the input only when the server applied it; a rejection keeps it there for correction. */
+async function submitSecurityBaseline(event) {
+	event.preventDefault();
+	const input = $("security-baseline-input");
+	if (await securityBaseline.add(input.value)) input.value = "";
+}
+
+async function removeSecurityBaselineTerm() {
+	if (baselineRemoval === undefined) return;
+	const id = baselineRemoval;
+	baselineRemoval = undefined;
+	await securityBaseline.remove(id);
+	renderSecurityBaseline();
+}
+
+$("security-baseline-form").onsubmit = submitSecurityBaseline;
+$("security-baseline-refresh").onclick = () => { baselineRemoval = undefined; void securityBaseline.refresh(); };
+$("security-baseline-keep").onclick = () => { baselineRemoval = undefined; renderSecurityBaseline(); };
+$("security-baseline-remove").onclick = removeSecurityBaselineTerm;
+
 securityButton.onclick = () => setSecurityEnabled(!security.enabled);
 renderSecurityToggle();
 
@@ -2778,7 +3179,7 @@ async function startVoiceInstall() {
 		if (!res.ok) throw new Error(body.error ?? String(res.status));
 		voice.install = body;
 	} catch (err) {
-		systemLine(`음성 설치를 시작하지 못했습니다: ${err instanceof Error ? err.message : err}`, true);
+		systemLine(t("voice.installStartFailed", { error: err instanceof Error ? err.message : err }), true);
 	}
 	renderVoiceInstall();
 }
@@ -2816,7 +3217,6 @@ const inbox = {
 	title: $("inbox-title"),
 };
 let decisionGeneration = 0;
-const PRIMARY_LABELS = { live: "답변 보내기", resume: "답변하고 이어가기", permission: "새 승인 요청", recheck: "현재 상황 확인" };
 
 function make(tag, className, text) {
 	const node = document.createElement(tag);
@@ -2829,14 +3229,14 @@ function dateTimeLabel(value) {
 	const d = new Date(value);
 	if (Number.isNaN(d.getTime())) return "";
 	if (d.toDateString() === new Date().toDateString()) return timeLabel(d.toISOString());
-	return d.toLocaleString("ko-KR", { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+	return d.toLocaleString(uiLocale(), { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
 }
 
 function describeAnswer(a) {
 	if (!a || typeof a !== "object") return "";
-	if (a.cancelled === true) return "나중에";
-	if (typeof a.value === "string") return OPTION_LABELS[a.value] ?? a.value;
-	if (typeof a.confirmed === "boolean") return a.confirmed ? "예" : "아니오";
+	if (a.cancelled === true) return t("decision.later");
+	if (typeof a.value === "string") return optionLabel(a.value);
+	if (typeof a.confirmed === "boolean") return t(a.confirmed ? "common.yes" : "common.no");
 	if (a.answers && typeof a.answers === "object") {
 		const parts = Object.values(a.answers).map((x) => [...(x.selected ?? []), x.text].filter(Boolean).join(", "));
 		if (a.comment) parts.push(a.comment);
@@ -2869,12 +3269,12 @@ async function loadDecisionDetail(id, card, { refresh = false } = {}) {
 		const body = await res.json().catch(() => null);
 		if (!res.ok) {
 			if (!failDetailLoad(inbox.state, id, generation)) return;
-			for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: `결정 상태를 불러오지 못했습니다 (${res.status}).`, retry });
+			for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: t("decision.detailFailedStatus", { status: res.status }), retry });
 			return;
 		}
 		const result = finishDetailLoad(inbox.state, id, generation, body);
 		if (!result.accepted) {
-			if (result.reason === "mismatch") for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: "결정 식별자가 일치하지 않습니다.", retry });
+			if (result.reason === "mismatch") for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: t("decision.idMismatch"), retry });
 			return;
 		}
 		const decision = decisionById(inbox.state, id);
@@ -2883,7 +3283,7 @@ async function loadDecisionDetail(id, card, { refresh = false } = {}) {
 		if (!failDetailLoad(inbox.state, id, generation)) return;
 		for (const shown of detailCards(id, card)) setCardState(shown, {
 			disabled: true,
-			note: `결정 상태를 불러오지 못했습니다: ${err instanceof Error ? err.message : String(err)}`,
+			note: t("decision.detailFailed", { error: err instanceof Error ? err.message : String(err) }),
 			retry,
 		});
 	}
@@ -2926,7 +3326,7 @@ async function syncInbox({ reset = false, cursor = null } = {}) {
 						// could arrive (for example during a disconnect), so the card asks for the current copy.
 						if (isUnresolved(decision) && !inbox.state.items.has(explicitId)) void loadDecisionDetail(explicitId, card, { refresh: true });
 					} else {
-						if (!card.classList.contains("resolved")) setCardState(card, { disabled: true, note: "확인 중…" });
+						if (!card.classList.contains("resolved")) setCardState(card, { disabled: true, note: t("common.checking") });
 						void loadDecisionDetail(explicitId, card);
 					}
 					continue;
@@ -2938,7 +3338,7 @@ async function syncInbox({ reset = false, cursor = null } = {}) {
 				}
 				if (card.classList.contains("resolved") || card.dataset.decisionRevision !== undefined) continue;
 				const busy = inbox.state.inflight.has(submitKey(null, request.actionId, inbox.state));
-				setCardState(card, { disabled: busy, note: busy ? "보내는 중…" : null });
+				setCardState(card, { disabled: busy, note: busy ? t("common.sending") : null });
 			}
 		}
 	} catch (err) {
@@ -2959,8 +3359,8 @@ function renderInboxBadge() {
 	const n = badgeCount(c);
 	inbox.badge.hidden = n === 0;
 	inbox.badge.textContent = String(n);
-	inbox.toggle.setAttribute("aria-label", n ? `확인함, 확인 필요 ${n}건` : "확인함");
-	inbox.summary.textContent = c ? `확인 필요 ${c.pending + c.needsReview} · 전달 중 ${c.submitted}` : "";
+	inbox.toggle.setAttribute("aria-label", n ? t("inbox.toggle.label", { count: n }) : t("inbox.title"));
+	inbox.summary.textContent = c ? t("inbox.summary", { pending: c.pending + c.needsReview, submitted: c.submitted }) : "";
 	renderUpdateGate();
 }
 
@@ -2968,11 +3368,11 @@ function renderInboxStatus() {
 	const s = inbox.status;
 	s.classList.toggle("error", Boolean(inbox.error) && inbox.online);
 	s.replaceChildren();
-	if (!inbox.online) s.append("연결이 끊겼습니다. 답변을 보내려면 연결이 필요합니다.");
-	else if (inbox.loading) s.append("불러오는 중…");
+	if (!inbox.online) s.append(t("inbox.offline"));
+	else if (inbox.loading) s.append(t("common.loading"));
 	else if (inbox.error) {
-		s.append(`목록을 불러오지 못했습니다: ${inbox.error} `);
-		const retry = make("button", "text-btn", "다시 시도");
+		s.append(t("inbox.loadFailed", { error: inbox.error }));
+		const retry = make("button", "text-btn", t("common.retry"));
 		retry.type = "button";
 		retry.onclick = () => void syncInbox({ reset: !inbox.state.loaded });
 		s.append(retry);
@@ -3010,7 +3410,7 @@ function renderInboxList() {
 			empty = make("li", "inbox-empty");
 			inbox.list.append(empty);
 		}
-		empty.textContent = inbox.state.loaded ? "답을 기다리는 항목이 없습니다." : "";
+		empty.textContent = inbox.state.loaded ? t("inbox.empty") : "";
 	} else empty?.remove();
 	ordered.forEach((decision, index) => {
 		let node = inbox.nodes.get(decision.id);
@@ -3055,7 +3455,7 @@ function renderAnswerFields(decision, form, locked, onEdit) {
 	if (decision.method === "select") {
 		const opts = make("div", "approval-options");
 		for (const opt of Array.isArray(payload.options) ? payload.options : []) {
-			const b = button(OPTION_LABELS[opt] ?? opt, decision.permission ? (OPTION_STYLE[opt] ?? "neutral") : "neutral", () => {
+			const b = button(optionLabel(opt), decision.permission ? (OPTION_STYLE[opt] ?? "neutral") : "neutral", () => {
 				form.value = form.value === opt ? undefined : opt;
 				pickOptions(opts, new Set(form.value === undefined ? [] : [form.value]));
 				onEdit();
@@ -3068,7 +3468,7 @@ function renderAnswerFields(decision, form, locked, onEdit) {
 		nodes.push(opts);
 	} else if (decision.method === "confirm") {
 		const opts = make("div", "approval-options");
-		for (const [label, value, cls] of [["예", true, "ok"], ["아니오", false, "danger"]]) {
+		for (const [label, value, cls] of [[t("common.yes"), true, "ok"], [t("common.no"), false, "danger"]]) {
 			const b = button(label, cls, () => {
 				form.confirmed = form.confirmed === value ? undefined : value;
 				pickOptions(opts, new Set(form.confirmed === undefined ? [] : [String(form.confirmed)]));
@@ -3085,7 +3485,7 @@ function renderAnswerFields(decision, form, locked, onEdit) {
 		box.rows = decision.method === "editor" ? 6 : 2;
 		box.value = form.value ?? "";
 		box.disabled = locked;
-		box.setAttribute("aria-label", "답변 입력");
+		box.setAttribute("aria-label", t("approval.answerInput"));
 		box.oninput = () => {
 			form.value = box.value;
 			onEdit();
@@ -3116,10 +3516,10 @@ function renderAnswerFields(decision, form, locked, onEdit) {
 				opts.append(b);
 			}
 			const other = make("input", "approval-input");
-			other.placeholder = "직접 입력 (선택)";
+			other.placeholder = t("approval.otherPlaceholder");
 			other.value = given.text;
 			other.disabled = locked;
-			other.setAttribute("aria-label", `${q.question} 직접 입력`);
+			other.setAttribute("aria-label", t("approval.otherFor", { question: q.question }));
 			other.oninput = () => {
 				given.text = other.value;
 				onEdit();
@@ -3129,10 +3529,10 @@ function renderAnswerFields(decision, form, locked, onEdit) {
 		}
 		const comment = make("textarea", "approval-input");
 		comment.rows = 2;
-		comment.placeholder = "덧붙일 말 (선택)";
+		comment.placeholder = t("approval.commentPlaceholder");
 		comment.value = form.comment;
 		comment.disabled = locked;
-		comment.setAttribute("aria-label", "덧붙일 말");
+		comment.setAttribute("aria-label", t("approval.comment"));
 		comment.oninput = () => {
 			form.comment = comment.value;
 			onEdit();
@@ -3147,13 +3547,13 @@ function renderSavedChoices(decision) {
 	const saved = originalChoices(decision);
 	if (!saved.length) return null;
 	const box = make("div", "inbox-choices");
-	box.append(make("div", "inbox-choices-label", "원래 선택지"));
+	box.append(make("div", "inbox-choices-label", t("decision.originalChoices")));
 	for (const group of saved) {
 		const block = make("div", "approval-question");
 		if (group.title) block.append(make("div", "approval-qtitle", group.title));
 		const list = make("ul", "inbox-choice-list");
 		for (const o of group.options) {
-			const item = make("li", null, decision.method === "select" ? (OPTION_LABELS[o.label] ?? o.label) : o.label);
+			const item = make("li", null, decision.method === "select" ? optionLabel(o.label) : o.label);
 			if (o.description) item.append(make("small", null, o.description));
 			list.append(item);
 		}
@@ -3167,11 +3567,11 @@ function renderSavedChoices(decision) {
 function renderReference(decision) {
 	const lost = reference(inbox.state, decision);
 	if (lost) {
-		return make("div", "inbox-reference", `이전에 고른 답 (참고용, 최신 내용을 확인한 뒤 다시 골라야 보낼 수 있습니다): ${describeAnswer(lost.response) || "(없음)"}`);
+		return make("div", "inbox-reference", t("decision.lostAnswer", { answer: describeAnswer(lost.response) || t("common.none") }));
 	}
 	if (!isReviewRequired(inbox.state, decision.id)) return null;
 	const draft = inbox.state.drafts.get(decision.id);
-	return draft ? make("div", "inbox-reference", `보낸 답 (전달 확인 안 됨, 참고용): ${describeAnswer(draft.response) || "(없음)"}`) : null;
+	return draft ? make("div", "inbox-reference", t("decision.unconfirmedAnswer", { answer: describeAnswer(draft.response) || t("common.none") })) : null;
 }
 
 /**
@@ -3187,24 +3587,24 @@ function renderDecisionActions(decision, p, { locked, busy, review, surface }) {
 		b.onclick = onClick;
 		return b;
 	};
-	if (review) actions.append(button("최신 내용 확인", "ok", () => reviewLatest(decision), !busy));
+	if (review) actions.append(button(t("decision.reviewLatest"), "ok", () => reviewLatest(decision), !busy));
 	else {
 		if (p.mode) {
 			// The retry label appears once an earlier attempt is uncertain, never while that attempt is still in flight.
-			const label = !busy && inbox.state.drafts.has(decision.id) ? "다시 보내기" : PRIMARY_LABELS[p.kind];
+			const label = !busy && inbox.state.drafts.has(decision.id) ? t("decision.resend") : t(`decision.primary.${p.kind}`);
 			actions.append(button(label, "ok", () => void submitDecisionForm(decision, p.mode)));
 		}
-		if (p.kind === "live" && surface === "card") actions.append(button("취소", "neutral", () => void submitDecision(decision.id, "answer", { cancelled: true })));
-		if (p.recheck) actions.append(button(PRIMARY_LABELS.recheck, "neutral", () => void submitDecisionForm(decision, "recheck")));
+		if (p.kind === "live" && surface === "card") actions.append(button(t("common.cancel"), "neutral", () => void submitDecision(decision.id, "answer", { cancelled: true })));
+		if (p.recheck) actions.append(button(t("decision.primary.recheck"), "neutral", () => void submitDecisionForm(decision, "recheck")));
 	}
-	if (busy && surface === "inbox") actions.append(make("span", "inbox-note", "보내는 중…"));
+	if (busy && surface === "inbox") actions.append(make("span", "inbox-note", t("common.sending")));
 	if (surface === "inbox" && canDismiss(decision) && !inbox.dismissing.has(decision.id)) {
-		const remove = button("삭제", "neutral inbox-dismiss-open", () => openDismiss(decision.id), !busy && inbox.online && !inbox.dismissBusy.has(decision.id));
-		remove.setAttribute("aria-label", "확인함에서 삭제");
+		const remove = button(t("common.delete"), "neutral inbox-dismiss-open", () => openDismiss(decision.id), !busy && inbox.online && !inbox.dismissBusy.has(decision.id));
+		remove.setAttribute("aria-label", t("inbox.deleteLabel"));
 		actions.append(remove);
 	}
 	if (surface === "inbox") {
-		const original = make("button", "link-btn", "원문 보기");
+		const original = make("button", "link-btn", t("inbox.original"));
 		original.type = "button";
 		original.onclick = () => showOriginal(decision);
 		actions.append(original);
@@ -3231,10 +3631,10 @@ function renderSourceContext(payload) {
 	const refs = sourceContext(payload);
 	if (!refs.length) return null;
 	const box = make("details", "inbox-context");
-	box.append(make("summary", null, `대화 맥락 (${refs.length})`));
+	box.append(make("summary", null, t("inbox.context", { count: refs.length })));
 	for (const ref of refs) {
 		const quote = make("blockquote", `inbox-context-${ref.role}`);
-		quote.append(make("div", "inbox-context-role", ref.role === "user" ? "나" : "main"), make("div", "inbox-context-text", ref.text));
+		quote.append(make("div", "inbox-context-role", ref.role === "user" ? t("profile.me") : "main"), make("div", "inbox-context-text", ref.text));
 		box.append(quote);
 	}
 	return box;
@@ -3254,17 +3654,17 @@ function renderInboxItem(decision) {
 	li.setAttribute("aria-busy", String(busy));
 	const head = make("div", "inbox-item-head");
 	head.append(
-		make("span", "inbox-work", decision.work ? decision.work.title : decision.ownerConv === "main" ? "메인 대화" : decision.ownerConv),
+		make("span", "inbox-work", decision.work ? decision.work.title : decision.ownerConv === "main" ? t("inbox.mainConversation") : decision.ownerConv),
 		make("span", `inbox-chip chip-${decision.status}`, STATUS_LABELS[decision.status] ?? decision.status),
 	);
-	const question = make("div", "inbox-question", payload.title || (decision.permission ? "권한 요청" : "질문"));
+	const question = make("div", "inbox-question", payload.title || t(decision.permission ? "approval.permissionRequest" : "approval.question"));
 	question.id = `inbox-q-${decision.id}`;
 	li.setAttribute("aria-labelledby", question.id);
 	li.append(head, question);
 	if (payload.detail) li.append(make("div", "approval-detail", payload.detail));
 	const context = renderSourceContext(payload);
 	if (context) li.append(context);
-	if (decision.answer) li.append(make("div", "inbox-note", `내 답변: ${describeAnswer(decision.answer)}`));
+	if (decision.answer) li.append(make("div", "inbox-note", t("decision.myAnswer", { answer: describeAnswer(decision.answer) })));
 	if (p.form) li.append(...renderAnswerFields(decision, form, locked, () => syncDecisionSurfaces(decisionById(inbox.state, decision.id) ?? decision, li)));
 	else {
 		// No answer is taken now, but the question and its choices still read here, not only on the original card.
@@ -3278,10 +3678,10 @@ function renderInboxItem(decision) {
 		if (!value) return;
 		meta.append(make("dt", null, label), make("dd", null, value));
 	};
-	row("생성", dateTimeLabel(decision.createdAt));
-	row("기한", decision.deadlineAt === null ? (decision.bindingState === "live" ? "없음" : "") : `${dateTimeLabel(decision.deadlineAt)}${decision.bindingState === "expired" ? " (지남)" : ""}`);
-	row("상태", `${bindingLabel(decision)}${decision.required ? " · 필수" : ""}`);
-	row("대기 이유", waitReason(decision));
+	row(t("inbox.meta.created"), dateTimeLabel(decision.createdAt));
+	row(t("inbox.meta.deadline"), decision.deadlineAt === null ? (decision.bindingState === "live" ? t("inbox.meta.none") : "") : `${dateTimeLabel(decision.deadlineAt)}${decision.bindingState === "expired" ? t("inbox.meta.expired") : ""}`);
+	row(t("inbox.meta.state"), `${bindingLabel(decision)}${decision.required ? t("inbox.meta.required") : ""}`);
+	row(t("inbox.meta.waitReason"), waitReason(decision));
 	li.append(meta);
 	const note = inbox.notes.get(decision.id);
 	const noteEl = make("div", `inbox-note${note?.error ? " error" : ""}`, note?.text ?? "");
@@ -3318,14 +3718,14 @@ function renderDismissConfirm(decision) {
 	const busy = inbox.dismissBusy.has(decision.id);
 	const box = make("div", `inbox-dismiss mode-${mode}`);
 	box.setAttribute("role", "group");
-	box.setAttribute("aria-label", "삭제 확인");
+	box.setAttribute("aria-label", t("inbox.dismiss.label"));
 	box.append(make("p", "inbox-dismiss-text", text.prompt));
 	const row = make("div", "inbox-actions");
-	const confirm = make("button", "btn danger inbox-dismiss-confirm", busy ? "지우는 중…" : text.confirm);
+	const confirm = make("button", "btn danger inbox-dismiss-confirm", busy ? t("inbox.dismiss.busy") : text.confirm);
 	confirm.type = "button";
 	confirm.disabled = busy || !inbox.online;
 	confirm.onclick = () => void dismissDecision(decision.id);
-	const keep = make("button", "btn neutral inbox-dismiss-keep", "그대로 두기");
+	const keep = make("button", "btn neutral inbox-dismiss-keep", t("common.keep"));
 	keep.type = "button";
 	keep.disabled = busy;
 	keep.onclick = () => closeDismiss(decision.id);
@@ -3362,17 +3762,17 @@ async function dismissDecision(id) {
 			break;
 		case "conflict":
 			if (result.decision) applyDecision(inbox.state, result.decision);
-			noteFor(id, "다른 곳에서 먼저 처리됐거나 상태가 바뀌어 지우지 못했습니다. 최신 내용을 확인한 뒤 다시 지워 주세요.", true);
+			noteFor(id, t("inbox.dismiss.conflict"), true);
 			break;
 		case "gone":
 			forgetDecision(inbox.state, id);
 			break;
 		case "unavailable":
 		case "rejected":
-			noteFor(id, `서버가 삭제를 받지 않았습니다 (${result.status ?? 400}${result.error ? ` ${result.error}` : ""}).`, true);
+			noteFor(id, t("inbox.dismiss.rejected", { status: result.status ?? 400, error: result.error ? ` ${result.error}` : "" }), true);
 			break;
 		default:
-			noteFor(id, "서버에 연결할 수 없어 지우지 못했습니다. 연결된 뒤 다시 지워 주세요.", true);
+			noteFor(id, t("inbox.dismiss.offline"), true);
 	}
 	const current = decisionById(inbox.state, id);
 	if (current) {
@@ -3387,7 +3787,7 @@ async function dismissDecision(id) {
 async function submitDecisionForm(decision, mode) {
 	const id = decision.id;
 	if (!inbox.online) {
-		noteFor(id, "연결이 끊겨 보낼 수 없습니다. 연결된 뒤 다시 시도하세요.", true);
+		noteFor(id, t("decision.offline.send"), true);
 		syncDecisionSurfaces(decision);
 		return;
 	}
@@ -3395,7 +3795,7 @@ async function submitDecisionForm(decision, mode) {
 	if (mode === "answer" || mode === "resume") {
 		const composed = composeResponse(decision, formFor(decision));
 		if (!composed.ok) {
-			noteFor(id, composed.reason === "incomplete" ? "필수 항목을 모두 고르거나 적어야 보낼 수 있습니다." : "이 질문 형식은 웹에서 답할 수 없습니다. 현재 상황 확인을 이용하세요.", true);
+			noteFor(id, t(composed.reason === "incomplete" ? "decision.incomplete" : "decision.unsupportedRecheck"), true);
 			syncDecisionSurfaces(decision);
 			return;
 		}
@@ -3408,13 +3808,13 @@ async function submitDecision(id, mode, response) {
 	const decision = decisionById(inbox.state, id);
 	if (!decision) return;
 	if (!inbox.online) {
-		noteFor(id, "연결이 끊겨 보낼 수 없습니다. 연결된 뒤 다시 시도하세요.", true);
+		noteFor(id, t("decision.offline.send"), true);
 		syncDecisionSurfaces(decision);
 		return;
 	}
 	const body = buildRequest(inbox.state, decision, mode, response);
 	if (!body) {
-		noteFor(id, "최신 질문 내용을 확인한 뒤 다시 답해 주세요.", true);
+		noteFor(id, t("decision.staleRequest"), true);
 		syncDecisionSurfaces(decision);
 		return;
 	}
@@ -3450,32 +3850,32 @@ function settleSubmit(decision, result) {
 		case "conflict":
 			inbox.forms.delete(id);
 			noteConflict(inbox.state, decision, result.decision);
-			noteFor(id, "다른 곳에서 먼저 처리됐거나 질문이 바뀌었습니다. 최신 내용을 확인하고 다시 골라 주세요.", true);
+			noteFor(id, t("decision.conflict"), true);
 			break;
 		case "blocked":
 			// Improvement 165: the answer is held; the card decides. The typed answer stays in the form for a fix.
 			inbox.state.drafts.delete(id);
-			noteFor(id, `${result.message} 채팅의 보안검사 결과 카드에서 보내기 또는 보내지 않기를 고르세요.`, true);
+			noteFor(id, t("decision.blocked", { message: result.message }), true);
 			if (result.held) showHeldCard(result.held);
 			break;
 		case "rejected":
 			inbox.state.drafts.delete(id);
 			if (result.decision) applyDecision(inbox.state, result.decision);
-			noteFor(id, `서버가 답변을 받지 않았습니다 (${result.error ?? "invalid"}).`, true);
+			noteFor(id, t("decision.rejected", { error: result.error ?? "invalid" }), true);
 			break;
 		case "gone": {
 			forgetDecision(inbox.state, id);
 			for (const card of els.messages.querySelectorAll(`.approval[data-decision-id="${CSS.escape(id)}"]`)) {
 				card.removeAttribute("aria-busy");
-				setCardState(card, { disabled: true, note: "서버에 더 이상 없는 요청입니다." });
+				setCardState(card, { disabled: true, note: t("decision.gone") });
 			}
 			break;
 		}
 		case "unavailable":
-			noteFor(id, `서버 오류 (${result.status}${result.error ? ` ${result.error}` : ""}). 작성 내용은 남아 있으니 잠시 후 다시 보내 주세요.`, true);
+			noteFor(id, t("decision.unavailable", { status: result.status, error: result.error ? ` ${result.error}` : "" }), true);
 			break;
 		default:
-			noteFor(id, "서버에 연결할 수 없습니다. 작성 내용은 남아 있으니 연결된 뒤 다시 보내 주세요.", true);
+			noteFor(id, t("decision.offline.kept"), true);
 	}
 	const current = decisionById(inbox.state, id);
 	if (current) syncDecisionSurfaces(current);
@@ -3509,7 +3909,7 @@ function onActionError(data) {
 	setCardBusy(data.actionId, false);
 	if (data.decision && decision) {
 		noteConflict(inbox.state, decision, data.decision);
-		noteFor(decision.id, "다른 곳에서 먼저 처리됐거나 질문이 바뀌었습니다. 최신 내용을 확인하고 다시 골라 주세요.", true);
+		noteFor(decision.id, t("decision.conflict"), true);
 	} else if (data.decision) applyDecision(inbox.state, data.decision);
 	const currentId = decision?.id ?? data.decision?.id;
 	const current = currentId ? decisionById(inbox.state, currentId) : null;
@@ -3574,7 +3974,7 @@ function locateOriginal() {
 		return;
 	}
 	inbox.locate = null;
-	systemLine("원문 카드가 불러온 기록에 없습니다.", true);
+	systemLine(t("inbox.originalMissing"), true);
 }
 
 const FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -3636,7 +4036,7 @@ function deviceRow(row, armedId) {
 	revoke.className = `text-btn device-revoke${armedId === row.id ? " armed" : ""}`;
 	revoke.textContent = armedId === row.id ? REVOKE_ARMED_LABEL : REVOKE_LABEL;
 	revoke.setAttribute("aria-label", `${row.name} ${REVOKE_LABEL}`);
-	revoke.onclick = () => enrollment.revoke(row.id).catch((err) => systemLine(`기기 등록 취소 실패: ${err.message}`, true));
+	revoke.onclick = () => enrollment.revoke(row.id).catch((err) => systemLine(t("settings.devices.revokeFailed", { error: err.message }), true));
 	li.append(main, revoke);
 	return li;
 }
@@ -3666,7 +4066,11 @@ function renderVersionNotice(notice) {
 	$("update-notice").hidden = line === null;
 }
 
+// The last GET /api/update/status answer (null before the first), drawn again in a new language.
+let updateStatus = null;
+
 function renderUpdate(status) {
+	updateStatus = status;
 	const view = updateView(status);
 	$("update-current").textContent = view.current;
 	$("update-latest").textContent = view.latest;
@@ -3700,11 +4104,11 @@ function showUpdateError(line) {
 async function checkUpdateNow() {
 	const button = $("update-check");
 	button.disabled = true;
-	button.textContent = "확인 중…";
+	button.textContent = t("settings.update.checking");
 	const res = await fetch(UPDATE_CHECK_PATH, { method: "POST" }).catch(() => null);
 	const body = res?.ok ? await res.json().catch(() => null) : null;
 	button.disabled = false;
-	button.textContent = "지금 확인";
+	button.textContent = t("settings.update.checkNow");
 	if (body !== null) renderUpdate(body);
 	else showUpdateError(checkFailedLine(res?.status ?? 0));
 }
@@ -3760,21 +4164,21 @@ async function requestUpdate() {
 		updateFlow.confirmSchema = false;
 		showUpdateProgress(step.line);
 	} else if (step.kind === "consent") {
-		askUpdate(step.message, { text: step.notice.text, input: true, go: "동의하고 업데이트", onGo: async () => {
+		askUpdate(step.message, { text: step.notice.text, input: true, go: t("settings.update.consentGo"), onGo: async () => {
 			const answer = $("update-ask-input").value;
 			const sent = await fetch(UPDATE_CONSENT_PATH, { method: "POST", headers: { "content-type": "application/json" },
 				body: JSON.stringify({ version, noticeVersion: step.notice.version, answer }) }).catch(() => null);
 			const body = sent === null ? null : await sent.json().catch(() => null);
 			if (sent?.status === 200) return requestUpdate();
-			$("update-ask-message").textContent = body?.message ?? "동의를 기록하지 못했습니다.";
+			$("update-ask-message").textContent = body?.message ?? t("settings.update.consentFailed");
 		} });
 	} else if (step.kind === "schema") {
-		askUpdate(step.message, { text: step.lines.join("\n"), go: "계속", onGo: () => {
+		askUpdate(step.message, { text: step.lines.join("\n"), go: t("common.continue"), onGo: () => {
 			updateFlow.confirmSchema = true;
 			return requestUpdate();
 		} });
 	} else if (step.kind === "busy") {
-		askUpdate(step.message, { go: "그래도 업데이트", onGo: () => {
+		askUpdate(step.message, { go: t("settings.update.force"), onGo: () => {
 			updateFlow.force = true;
 			return requestUpdate();
 		} });
@@ -3805,29 +4209,37 @@ const enrollment = createEnrollment({
 
 // 외부 접속 (plan Todo 27): pick again while the gateway runs. The server resolves and checks the address; turning the
 // app port on stays with `zigmini setup --access`, so the form is disabled while the port is off.
-const accessEls = { current: $("access-current"), form: $("access-form"), choice: $("access-choice"), domain: $("access-domain"), save: $("access-save"), message: $("access-message") };
-const ACCESS_LABELS = { lan: "집 Wi-Fi만", tailscale: "Tailscale", domain: "자기 도메인" };
+const accessEls = { current: $("access-current"), form: $("access-form"), choice: $("access-choice"), domain: $("access-domain"), save: $("access-save"), message: $("access-message"), body: null };
+const ACCESS_CHOICES = ["lan", "tailscale", "domain"];
 
 function showAccessMessage(text, error) {
 	accessEls.message.textContent = text;
 	accessEls.message.classList.toggle("error", error);
 }
 
+/** The last GET /api/access answer, drawn again in a new language. */
+function renderAccess(body) {
+	accessEls.body = body;
+	const off = !(body.appPort > 0);
+	const choice = body.access && ACCESS_CHOICES.includes(body.access.choice) ? t(body.access.choice === "lan" ? "settings.access.homeWifi" : `settings.access.${body.access.choice}`) : body.access?.choice;
+	accessEls.current.textContent = off
+		? t("settings.access.portOff")
+		: body.access ? t("settings.access.current", { choice, url: body.access.url }) : body.invalid ? t("settings.access.invalid") : t("settings.access.unset");
+	for (const el of [accessEls.choice, accessEls.domain, accessEls.save]) el.disabled = off;
+	if (body.access) accessEls.choice.value = body.access.choice;
+	accessEls.domain.hidden = accessEls.choice.value !== "domain";
+}
+
 async function loadAccess() {
 	let body;
 	try {
 		body = await (await fetch("/api/access")).json();
 	} catch (err) {
-		accessEls.current.textContent = `외부 접속 상태를 읽지 못했습니다: ${err.message}`;
+		accessEls.body = null;
+		accessEls.current.textContent = t("settings.access.readFailed", { error: err.message });
 		return;
 	}
-	const off = !(body.appPort > 0);
-	accessEls.current.textContent = off
-		? "앱 포트가 꺼져 있습니다. 맥 터미널에서 `zigmini setup --access <선택>`을 먼저 실행하세요."
-		: body.access ? `지금: ${ACCESS_LABELS[body.access.choice]} · ${body.access.url}` : body.invalid ? "access.json을 읽지 못했습니다. 다시 고르세요." : "지금: 고르지 않음";
-	for (const el of [accessEls.choice, accessEls.domain, accessEls.save]) el.disabled = off;
-	if (body.access) accessEls.choice.value = body.access.choice;
-	accessEls.domain.hidden = accessEls.choice.value !== "domain";
+	renderAccess(body);
 }
 
 accessEls.choice.onchange = () => { accessEls.domain.hidden = accessEls.choice.value !== "domain"; };
@@ -3835,19 +4247,19 @@ accessEls.form.onsubmit = async (ev) => {
 	ev.preventDefault();
 	const payload = { choice: accessEls.choice.value, ...(accessEls.choice.value === "domain" ? { domain: accessEls.domain.value.trim() } : {}) };
 	accessEls.save.disabled = true;
-	showAccessMessage("확인하는 중…", false);
+	showAccessMessage(t("settings.access.checking"), false);
 	try {
 		const res = await fetch("/api/access", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) });
 		const body = await res.json();
 		if (!res.ok) {
-			showAccessMessage(body.message ?? `실패 (HTTP ${res.status})`, true);
+			showAccessMessage(body.message ?? t("settings.access.failedHttp", { status: res.status }), true);
 			return;
 		}
-		showAccessMessage("바꿨습니다. 새 주소로 등록 QR을 다시 만듭니다.", false);
+		showAccessMessage(t("settings.access.changed"), false);
 		await loadAccess();
 		void enrollment.renew();
 	} catch (err) {
-		showAccessMessage(`실패: ${err.message}`, true);
+		showAccessMessage(t("settings.access.failed", { error: err.message }), true);
 	} finally {
 		accessEls.save.disabled = false;
 	}
@@ -3929,6 +4341,16 @@ function gcRow(row) {
 	return li;
 }
 
+/** The last GET /api/gc answer (null when the gateway did not answer), drawn again in a new language. */
+function renderGc(body) {
+	gcEls.body = body;
+	const view = gcView(body);
+	gcEls.summary.textContent = view.summary;
+	gcEls.summary.classList.toggle("error", view.error);
+	gcEls.list.replaceChildren(...view.rows.map(gcRow));
+	gcSync();
+}
+
 async function loadGc() {
 	gcEls.clean.disabled = true;
 	let body = null;
@@ -3938,11 +4360,7 @@ async function loadGc() {
 	} catch {
 		body = null;
 	}
-	const view = gcView(body);
-	gcEls.summary.textContent = view.summary;
-	gcEls.summary.classList.toggle("error", view.error);
-	gcEls.list.replaceChildren(...view.rows.map(gcRow));
-	gcSync();
+	renderGc(body);
 }
 
 gcEls.clean.onclick = async () => {
@@ -3951,10 +4369,10 @@ gcEls.clean.onclick = async () => {
 	gcEls.clean.disabled = true;
 	try {
 		const res = await fetch(GC_CLEAN_PATH, cleanRequest(ids));
-		gcEls.message.textContent = res.ok ? cleanResultLine(await res.json()) : `정리 실패: HTTP ${res.status}`;
+		gcEls.message.textContent = res.ok ? cleanResultLine(await res.json()) : t("settings.gc.failedHttp", { status: res.status });
 		gcEls.message.classList.toggle("error", !res.ok);
 	} catch (err) {
-		gcEls.message.textContent = `정리 실패: ${err.message}`;
+		gcEls.message.textContent = t("settings.gc.failed", { error: err.message });
 		gcEls.message.classList.add("error");
 	}
 	await loadGc();
@@ -4014,10 +4432,10 @@ settings.toggle.onclick = () => (settings.open ? closeSettings() : openSettings(
 settings.close.onclick = closeSettings;
 enrollEls.renew.onclick = () => void enrollment.renew();
 
-// 설정 "매뉴얼": GET /api/manual (Korean first) rendered with the chat Markdown renderer; the first-line language links
-// and the header button switch to the other language in place.
+// 설정 "매뉴얼": GET /api/manual in the UI language, rendered with the chat Markdown renderer; the first-line language
+// links and the header button switch to the other language in place.
 const manualEls = { el: $("manual"), open: $("manual-open"), close: $("manual-close"), title: $("manual-title"), lang: $("manual-lang"), status: $("manual-status"), body: $("manual-body") };
-const manualView = { open: false, lang: "ko", load: 0 };
+const manualView = { open: false, lang: getLanguage(), load: 0 };
 
 function showManualStatus(text, error = false) {
 	manualEls.status.textContent = text;
@@ -4028,9 +4446,9 @@ function showManualStatus(text, error = false) {
 async function loadManual(lang) {
 	const load = ++manualView.load;
 	manualView.lang = lang;
-	manualEls.lang.textContent = otherLang(lang) === "en" ? "English" : "한국어";
+	manualEls.lang.textContent = t(`language.name.${otherLang(lang)}`);
 	manualEls.el.lang = lang;
-	showManualStatus("매뉴얼을 불러오는 중입니다.");
+	showManualStatus(t("manual.loading"));
 	let status = 0;
 	let text = "";
 	try {
@@ -4057,7 +4475,7 @@ function openManual() {
 	manualEls.el.hidden = false;
 	manualEls.open.setAttribute("aria-expanded", "true");
 	manualEls.title.focus();
-	void loadManual(manualView.lang);
+	void loadManual(getLanguage());
 }
 
 function closeManual() {
@@ -4103,4 +4521,715 @@ manualEls.el.addEventListener("keydown", (ev) => {
 	}
 });
 
+// 에이전트 (agent-sessions todo 10, design D5): web/agents.js decides; this block draws the sidebar group above 대화, the
+// header's name and stale badge, and the 에이전트 dialog (목록, editor, 공통 기본값, 보관함) over /api/agents.
+const agentState = { list: [], loaded: false };
+const agentEls = {
+	list: $("agent-list"), manage: $("agent-manage"),
+	head: $("agent-head"), headIcon: $("agent-head-icon"), headName: $("agent-head-name"), stale: $("agent-stale"),
+	toggle: $("toggle-agents"), el: $("agents"), close: $("agents-close"), title: $("agents-title"), status: $("agents-status"), body: $("agents-body"),
+	nav: { list: $("agents-nav-list"), defaults: $("agents-nav-defaults"), trash: $("agents-nav-trash") },
+};
+const agentView = { open: false, view: "list", editor: null, files: [], returnFocus: null, load: 0 };
+
+async function agentApi(request) {
+	const res = await fetch(request.path, { method: request.method, headers: request.headers, body: request.body });
+	const body = await res.json().catch(() => null);
+	if (!res.ok) throw new Error(errorLine(body, res.status));
+	return body;
+}
+
+async function loadAgents() {
+	try {
+		const list = await agentApi({ method: "GET", path: AGENTS_PATH });
+		if (!Array.isArray(list)) return;
+		agentState.list = list;
+		agentState.loaded = true;
+		renderAgentGroup();
+		renderAgentHeader();
+		if (agentView.open && agentView.view === "list") renderAgentList();
+	} catch (error) {
+		console.warn("agents load:", error);
+	}
+}
+
+function agentSidebarView() {
+	return { current: state.current, running: state.running, busy: (id) => isBusy(activity, id), pending: state.pendingByConv };
+}
+
+function currentConversation() {
+	return state.conversations.find((c) => c.id === state.current) ?? null;
+}
+
+function peSpan(className, text) {
+	const el = document.createElement("span");
+	el.className = className;
+	el.textContent = text;
+	return el;
+}
+
+function peButton(text, onClick, id, className = "text-btn", act) {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = className;
+	button.textContent = text;
+	if (id) button.id = id;
+	if (act) button.dataset.act = act;
+	button.onclick = onClick;
+	return button;
+}
+
+function peSection(title, note) {
+	const el = document.createElement("section");
+	el.className = "pe-section";
+	const label = document.createElement("div");
+	label.className = "section-label";
+	label.append(peSpan("", title));
+	el.append(label);
+	if (note) {
+		const p = document.createElement("p");
+		p.className = "pe-note";
+		p.textContent = note;
+		el.append(p);
+	}
+	return el;
+}
+
+function renderAgentGroup() {
+	const items = sidebarItems(state.conversations, agentState.list, agentSidebarView());
+	agentEls.list.replaceChildren();
+	if (items.length === 0) {
+		const empty = document.createElement("li");
+		empty.className = "agent-empty";
+		empty.textContent = EMPTY_AGENTS_LINE;
+		agentEls.list.append(empty);
+		return;
+	}
+	for (const item of items) {
+		const li = document.createElement("li");
+		li.className = `${item.active ? "active" : ""}${item.pending ? " pending" : ""}${item.running ? " running" : ""}${item.stale ? " stale" : ""}`;
+		li.title = item.description ? `${item.name} · ${item.description}` : item.name;
+		li.dataset.conv = item.convId;
+		const run = peSpan("agent-run", "");
+		run.title = t("agent.answering");
+		li.append(peSpan("agent-icon", item.icon), peSpan("agent-conv-name", item.name), peSpan("agent-stale-dot", t("agent.stale")), run, peSpan("dot", ""));
+		li.onclick = () => selectConversation(item.convId);
+		agentEls.list.appendChild(li);
+	}
+}
+
+function renderAgentHeader() {
+	const view = headerView(currentConversation(), agentState.list);
+	agentEls.head.hidden = !view.agent;
+	if (!view.agent) return;
+	agentEls.headIcon.textContent = view.icon;
+	agentEls.headName.textContent = view.name;
+	agentEls.headName.title = view.name;
+	agentEls.stale.hidden = !view.stale;
+	agentEls.stale.title = STALE_TITLE;
+}
+
+function receiveAgentUpdate(data) {
+	const result = applyAgentUpdate(agentState.list, state.conversations, data);
+	agentState.list = result.agents;
+	state.conversations = result.conversations;
+	if (result.removedConv && result.removedConv === state.current) selectConversation("main");
+	else if (result.restoredConv) selectConversation(result.restoredConv);
+	else {
+		renderConversations();
+		renderAgentHeader();
+	}
+	if (agentView.open && agentView.view === "list") renderAgentList();
+}
+
+function showAgentStatus(text, kind = "") {
+	agentEls.status.textContent = text;
+	agentEls.status.className = `agents-status${kind ? ` ${kind}` : ""}`;
+}
+
+function openAgents(view = "list", target = null) {
+	if (!agentView.open) {
+		agentView.open = true;
+		agentView.returnFocus = document.activeElement;
+		agentEls.el.hidden = false;
+		for (const button of [agentEls.toggle, agentEls.manage]) button.setAttribute("aria-expanded", "true");
+	}
+	showAgentStatus("");
+	void showAgentView(view, target);
+	agentEls.title.focus();
+}
+
+function closeAgents() {
+	if (!agentView.open) return;
+	agentView.open = false;
+	agentView.load += 1;
+	agentView.editor = null;
+	agentEls.el.hidden = true;
+	agentEls.body.replaceChildren();
+	for (const button of [agentEls.toggle, agentEls.manage]) button.setAttribute("aria-expanded", "false");
+	const back = agentView.returnFocus;
+	agentView.returnFocus = null;
+	(back instanceof HTMLElement && back !== document.body && document.contains(back) ? back : agentEls.toggle).focus();
+}
+
+async function showAgentView(view, target = null) {
+	agentView.view = view;
+	for (const [name, button] of Object.entries(agentEls.nav)) button.setAttribute("aria-current", String(name === view));
+	const load = ++agentView.load;
+	agentEls.body.replaceChildren();
+	if (view === "list") {
+		renderAgentList();
+		return;
+	}
+	if (view === "trash") {
+		await renderAgentTrash(load);
+		return;
+	}
+	try {
+		if (view === "defaults") {
+			const body = await agentApi({ method: "GET", path: DEFAULTS_PATH });
+			if (load !== agentView.load) return;
+			agentView.editor = editorState(body, "defaults");
+		} else if (target === null) {
+			// The field registry rides on the defaults answer; a new agent has no detail to take it from yet.
+			const defaults = await agentApi({ method: "GET", path: DEFAULTS_PATH });
+			if (load !== agentView.load) return;
+			agentView.editor = editorState({ registry: defaults.registry }, "new");
+			agentView.files = [];
+		} else {
+			const detail = await agentApi({ method: "GET", path: `${AGENTS_PATH}/${encodeURIComponent(target)}` });
+			const files = await agentApi({ method: "GET", path: filesPath(target) }).catch(() => []);
+			if (load !== agentView.load) return;
+			agentView.editor = editorState(detail, "agent");
+			agentView.files = fileRows(files);
+		}
+	} catch (error) {
+		if (load === agentView.load) showAgentStatus(error.message, "error");
+		return;
+	}
+	renderAgentEditor();
+}
+
+function renderAgentList() {
+	const items = sidebarItems(state.conversations, agentState.list, agentSidebarView());
+	const section = peSection(t("agents.list"), t("agents.list.note"));
+	const actions = document.createElement("div");
+	actions.className = "pe-actions";
+	actions.append(peButton(t("side.newAgent"), () => openAgents("editor", null), "pe-new", "text-btn primary"));
+	const list = document.createElement("ul");
+	list.className = "pe-list";
+	list.id = "pe-agent-list";
+	if (items.length === 0) {
+		const empty = document.createElement("li");
+		empty.className = "pe-empty";
+		empty.textContent = EMPTY_AGENTS_LINE;
+		list.append(empty);
+	}
+	for (const item of items) {
+		const li = document.createElement("li");
+		li.className = "pe-list-row";
+		li.dataset.agent = item.agentId;
+		const main = document.createElement("div");
+		main.className = "pe-list-main";
+		const name = document.createElement("div");
+		name.className = "pe-list-name";
+		name.append(peSpan("", item.name));
+		if (item.stale) name.append(peSpan("agent-stale", t("agent.stale")));
+		const sub = document.createElement("div");
+		sub.className = "pe-list-sub";
+		sub.textContent = item.description;
+		sub.title = item.description;
+		main.append(name, sub);
+		const rowActions = document.createElement("div");
+		rowActions.className = "pe-list-actions";
+		rowActions.append(
+			peButton(t("agents.openConversation"), () => {
+				selectConversation(item.convId);
+				closeAgents();
+			}, undefined, "text-btn", "open"),
+			peButton(t("common.edit"), () => openAgents("editor", item.agentId), undefined, "text-btn", "edit"),
+		);
+		li.append(peSpan("agent-icon", item.icon), main, rowActions);
+		list.append(li);
+	}
+	section.append(actions, list);
+	agentEls.body.replaceChildren(section);
+}
+
+function renderEditorRow(row) {
+	const wrap = document.createElement("div");
+	wrap.className = "pe-row";
+	wrap.dataset.field = row.name;
+	const id = `pe-field-${row.name.replaceAll(".", "-")}`;
+	const label = document.createElement("label");
+	label.className = "pe-label";
+	label.htmlFor = id;
+	label.textContent = row.label;
+	if (row.help) {
+		const help = document.createElement("small");
+		help.textContent = row.help;
+		label.append(help);
+	}
+	const control = document.createElement("div");
+	control.className = "pe-control";
+	const line = document.createElement("div");
+	line.className = "pe-control-line";
+	const error = document.createElement("p");
+	error.className = "pe-error";
+	let input;
+	// A change updates the state and this row's origin tag only: redrawing the form here would replace the field the
+	// user is moving to (its change fires while focus travels) and lose what they type next.
+	const apply = (raw) => {
+		const result = widgetValue(row, raw);
+		if (result.error) {
+			error.textContent = result.error;
+			input.setAttribute("aria-invalid", "true");
+			return;
+		}
+		error.textContent = "";
+		input.removeAttribute("aria-invalid");
+		agentView.editor = setField(agentView.editor, row.name, result.value);
+		refreshEditorRow(wrap, row.name);
+	};
+	if (row.widget === "toggle") {
+		const toggle = document.createElement("label");
+		toggle.className = "pe-toggle";
+		input = document.createElement("input");
+		input.type = "checkbox";
+		input.id = id;
+		input.checked = row.value === true;
+		toggle.append(input, peSpan("", t(row.value === true ? "common.onShort" : "common.offShort")));
+		input.addEventListener("change", () => apply(input.checked));
+		line.append(toggle);
+	} else if (row.widget === "select") {
+		input = document.createElement("select");
+		input.className = "pe-input pe-select";
+		input.id = id;
+		input.append(new Option(t(row.own ? "agents.clearOption" : "agents.inheritOption"), ""));
+		for (const option of row.options ?? []) input.append(new Option(option, option));
+		input.value = typeof row.value === "string" ? row.value : "";
+		input.addEventListener("change", () => apply(input.value));
+		line.append(input);
+	} else if (row.widget === "textarea" || row.widget === "skills") {
+		input = document.createElement("textarea");
+		input.className = "pe-textarea";
+		input.id = id;
+		input.rows = 2;
+		input.value = Array.isArray(row.value) ? row.value.join(", ") : typeof row.value === "string" ? row.value : "";
+		input.addEventListener("change", () => apply(input.value));
+		line.append(input);
+	} else {
+		input = document.createElement("input");
+		input.className = `pe-input${row.widget === "number" ? " pe-number" : ""}`;
+		input.id = id;
+		input.type = row.widget === "number" ? "number" : "text";
+		if (row.min !== undefined) input.min = String(row.min);
+		if (row.max !== undefined) input.max = String(row.max);
+		input.value = row.value === null || row.value === undefined ? "" : String(row.value);
+		input.addEventListener("change", () => apply(input.value));
+		line.append(input);
+	}
+	if (row.required) input.required = true;
+	const origin = peSpan(`pe-origin ${row.origin}`, row.originLabel);
+	origin.title = t("agents.origin.tip", { origin: row.originLabel });
+	line.append(origin);
+	if (row.clearable) line.append(peClearButton(wrap, row.name, id));
+	if (row.unparsed) {
+		const note = peSpan("pe-origin pe-unparsed", t("agents.unparsed"));
+		note.title = t("agents.unparsed.tip");
+		line.append(note);
+	}
+	control.append(line, error);
+	wrap.append(label, control);
+	return wrap;
+}
+
+function peClearButton(wrap, name, id) {
+	const clear = peButton(t("agents.clearOverride"), () => {
+		agentView.editor = clearField(agentView.editor, name);
+		const row = editorRows(agentView.editor).find((r) => r.kind === "field" && r.name === name);
+		if (row) wrap.replaceWith(renderEditorRow(row));
+	}, `${id}-clear`, "pe-clear");
+	clear.title = t("agents.clearOverride.tip");
+	return clear;
+}
+
+function refreshEditorRow(wrap, name) {
+	const row = editorRows(agentView.editor).find((r) => r.kind === "field" && r.name === name);
+	if (!row) return;
+	const origin = wrap.querySelector(".pe-origin:not(.pe-unparsed)");
+	if (origin) {
+		origin.className = `pe-origin ${row.origin}`;
+		origin.textContent = row.originLabel;
+		origin.title = t("agents.origin.tip", { origin: row.originLabel });
+	}
+	wrap.querySelector(".pe-unparsed")?.remove();
+	const clear = wrap.querySelector(".pe-clear");
+	if (row.clearable && !clear && origin) origin.after(peClearButton(wrap, name, `pe-field-${name.replaceAll(".", "-")}`));
+	else if (!row.clearable && clear) clear.remove();
+	const toggleText = wrap.querySelector(".pe-toggle span");
+	if (toggleText) toggleText.textContent = t(row.value === true ? "common.onShort" : "common.offShort");
+	const select = wrap.querySelector("select.pe-select");
+	if (select?.options[0]) select.options[0].textContent = t(row.own ? "agents.clearOption" : "agents.inheritOption");
+}
+
+function renderAgentFiles(id) {
+	const section = peSection(t("agents.files"), t("agents.files.note"));
+	const list = document.createElement("ul");
+	list.className = "pe-files";
+	list.id = "pe-files";
+	if (agentView.files.length === 0) {
+		const empty = document.createElement("li");
+		empty.className = "pe-empty";
+		empty.textContent = EMPTY_FILES_LINE;
+		list.append(empty);
+	}
+	for (const file of agentView.files) {
+		const li = document.createElement("li");
+		li.className = "pe-file";
+		const name = peSpan(`pe-file-name ${file.type}`, `${"\u00a0\u00a0".repeat(file.depth)}${file.type === "directory" ? `${file.name}/` : file.name}`);
+		name.title = file.path;
+		li.append(name, peSpan("pe-file-size", file.label));
+		list.append(li);
+	}
+	const upload = document.createElement("div");
+	upload.className = "pe-upload";
+	const input = document.createElement("input");
+	input.type = "file";
+	input.id = "pe-source-file";
+	input.setAttribute("aria-label", t("agents.sourceFile.label"));
+	upload.append(input, peButton(t("agents.sourceUpload"), () => void uploadAgentSource(id, input), "pe-source-upload"));
+	section.append(list, upload);
+	return section;
+}
+
+function renderAgentEditor() {
+	const editor = agentView.editor;
+	if (!editor) return;
+	const focused = document.activeElement?.id || null;
+	const form = document.createElement("form");
+	form.className = "pe-form";
+	form.id = "pe-form";
+	form.noValidate = true;
+	form.addEventListener("submit", (ev) => {
+		ev.preventDefault();
+		void saveAgentEditor();
+	});
+	const isDefaults = editor.kind === "defaults";
+	const fields = peSection(isDefaults ? t("agents.defaultsSection") : editor.kind === "new" ? t("agents.new") : t("agents.settingsFor", { name: editor.name ?? "" }),
+		t(isDefaults ? "agents.defaults.note" : "agents.editor.note"));
+	for (const row of editorRows(editor)) {
+		if (row.kind === "group") {
+			const group = document.createElement("div");
+			group.className = "section-label pe-group";
+			group.append(peSpan("", row.label));
+			if (row.help) group.append(peSpan("pe-group-help", row.help));
+			fields.append(group);
+			continue;
+		}
+		fields.append(renderEditorRow(row));
+	}
+	const instructionsKey = isDefaults ? "agents.sharedInstructions" : "agents.roleInstructions";
+	const bodySection = peSection(t(instructionsKey), t(`${instructionsKey}.note`));
+	const bodyArea = document.createElement("textarea");
+	bodyArea.className = "pe-textarea pe-body";
+	bodyArea.id = "pe-body";
+	bodyArea.value = editor.body;
+	bodyArea.setAttribute("aria-label", t(instructionsKey));
+	bodyArea.addEventListener("change", () => {
+		agentView.editor = setBody(agentView.editor, bodyArea.value);
+	});
+	bodySection.append(bodyArea);
+	const rawSection = peSection(t("agents.rawSection"), t("agents.raw.note"));
+	const rawArea = document.createElement("textarea");
+	rawArea.className = "pe-textarea pe-mono";
+	rawArea.id = "pe-unknown";
+	rawArea.value = editor.unknownRaw;
+	rawArea.spellcheck = false;
+	rawArea.setAttribute("aria-label", t("agents.raw.label"));
+	rawArea.addEventListener("change", () => {
+		agentView.editor = setUnknownRaw(agentView.editor, rawArea.value);
+	});
+	rawSection.append(rawArea);
+	form.append(fields, bodySection, rawSection);
+	const existing = editor.kind === "agent" && editor.id;
+	if (existing) form.append(renderAgentFiles(editor.id));
+	let deleteBox = null;
+	let deleteInput = null;
+	const error = document.createElement("p");
+	error.className = "pe-error";
+	error.id = "pe-form-error";
+	const actions = document.createElement("div");
+	actions.className = "pe-actions";
+	const save = document.createElement("button");
+	save.type = "submit";
+	save.className = "text-btn primary";
+	save.id = "pe-save";
+	save.textContent = t(editor.kind === "new" ? "common.create" : "common.save");
+	actions.append(save);
+	if (existing) {
+		actions.append(peButton(t("agents.clone"), () => void cloneAgent(editor.id), "pe-clone"));
+		actions.append(peSpan("pe-spacer", ""));
+		actions.append(peButton(t("common.delete"), () => {
+			deleteBox.hidden = !deleteBox.hidden;
+			if (!deleteBox.hidden) deleteInput.focus();
+		}, "pe-delete-open", "text-btn danger"));
+	}
+	form.append(error, actions);
+	if (existing) {
+		deleteBox = document.createElement("div");
+		deleteBox.className = "inbox-dismiss mode-cancel pe-delete";
+		deleteBox.id = "pe-delete";
+		deleteBox.hidden = true;
+		const text = document.createElement("p");
+		text.className = "inbox-dismiss-text";
+		text.textContent = DELETE_HINT;
+		deleteInput = document.createElement("input");
+		deleteInput.className = "pe-input";
+		deleteInput.id = "pe-delete-name";
+		deleteInput.type = "text";
+		deleteInput.autocomplete = "off";
+		deleteInput.placeholder = editor.name ?? "";
+		deleteInput.setAttribute("aria-label", t("agents.deleteName.label"));
+		const confirm = peButton(t("common.delete"), () => void deleteAgent(editor.id, deleteInput.value), "pe-delete-confirm", "text-btn danger");
+		confirm.disabled = true;
+		deleteInput.addEventListener("input", () => {
+			confirm.disabled = !deleteEnabled(deleteInput.value, editor.name);
+		});
+		const keep = peButton(t("common.keep"), () => {
+			deleteBox.hidden = true;
+			deleteInput.value = "";
+			confirm.disabled = true;
+		}, "pe-delete-keep");
+		const buttons = document.createElement("div");
+		buttons.className = "pe-actions";
+		buttons.append(confirm, keep);
+		deleteBox.append(text, deleteInput, buttons);
+		form.append(deleteBox);
+	}
+	agentEls.body.replaceChildren(form);
+	if (focused) document.getElementById(focused)?.focus();
+}
+
+async function saveAgentEditor() {
+	const editor = agentView.editor;
+	if (!editor) return;
+	const errors = validateEditor(editor);
+	const errorEl = document.getElementById("pe-form-error");
+	if (errors.length) {
+		if (errorEl) errorEl.textContent = errors.map((e) => e.message).join(" · ");
+		showAgentStatus(t("agents.notSaved"), "error");
+		return;
+	}
+	if (errorEl) errorEl.textContent = "";
+	const save = document.getElementById("pe-save");
+	if (save) save.disabled = true;
+	try {
+		const body = await agentApi(saveRequest(editor));
+		if (editor.kind === "defaults") {
+			agentView.editor = editorState(body, "defaults");
+			showAgentStatus(t("agents.defaultsSaved"), "ok");
+			renderAgentEditor();
+			return;
+		}
+		receiveAgentUpdate(body);
+		if (editor.kind === "new") {
+			closeAgents();
+			systemLine(t("agents.created.line", { name: body.name }));
+			return;
+		}
+		agentView.editor = editorState(body, "agent");
+		showAgentStatus(t("agents.saved"), "ok");
+		renderAgentEditor();
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	} finally {
+		const button = document.getElementById("pe-save");
+		if (button) button.disabled = false;
+	}
+}
+
+async function cloneAgent(id) {
+	try {
+		const body = await agentApi(cloneRequest(id));
+		receiveAgentUpdate(body);
+		showAgentStatus(t("agents.created", { name: body.name }), "ok");
+		await showAgentView("editor", body.id);
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+}
+
+async function deleteAgent(id, typed) {
+	const editor = agentView.editor;
+	if (!editor || !deleteEnabled(typed, editor.name)) return;
+	try {
+		await agentApi(deleteRequest(id, typed));
+		showAgentStatus(t("agents.archived", { name: editor.name }), "ok");
+		await showAgentView("list");
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+}
+
+async function uploadAgentSource(id, input) {
+	const file = input.files?.[0];
+	if (!file) {
+		showAgentStatus(t("agents.pickFile"), "error");
+		return;
+	}
+	const form = new FormData();
+	form.append("file", file, file.name);
+	try {
+		const result = await agentApi({ method: "POST", path: sourceUploadPath(id), body: form });
+		agentView.files = fileRows(await agentApi({ method: "GET", path: filesPath(id) }));
+		showAgentStatus(t("agents.uploaded", { name: result.name, size: formatBytes(result.size) }), "ok");
+		renderAgentEditor();
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+}
+
+async function renderAgentTrash(load) {
+	let rows;
+	try {
+		rows = trashRows(await agentApi({ method: "GET", path: TRASH_PATH }));
+	} catch (error) {
+		if (load === agentView.load) showAgentStatus(error.message, "error");
+		return;
+	}
+	if (load !== agentView.load) return;
+	const section = peSection(t("agents.trash"), t("agents.trash.note"));
+	const list = document.createElement("ul");
+	list.className = "pe-list";
+	list.id = "pe-trash-list";
+	if (rows.length === 0) {
+		const empty = document.createElement("li");
+		empty.className = "pe-empty";
+		empty.textContent = EMPTY_TRASH_LINE;
+		list.append(empty);
+	}
+	for (const row of rows) {
+		const li = document.createElement("li");
+		li.className = "pe-list-row";
+		li.dataset.entry = row.entry;
+		const main = document.createElement("div");
+		main.className = "pe-list-main";
+		const name = document.createElement("div");
+		name.className = "pe-list-name";
+		name.textContent = row.name;
+		const sub = document.createElement("div");
+		sub.className = "pe-list-sub";
+		sub.textContent = `${row.description}${row.deletedAt ? t("agents.deletedAt", { time: new Date(row.deletedAt).toLocaleString(uiLocale()) }) : ""}`;
+		main.append(name, sub);
+		const rowActions = document.createElement("div");
+		rowActions.className = "pe-list-actions";
+		rowActions.append(peButton(t("agents.restore"), () => void restoreAgent(row.entry), undefined, "text-btn primary", "restore"));
+		li.append(peSpan("agent-icon", row.icon), main, rowActions);
+		list.append(li);
+	}
+	section.append(list);
+	agentEls.body.replaceChildren(section);
+}
+
+async function restoreAgent(entry) {
+	try {
+		const body = await agentApi(restoreRequest(entry));
+		receiveAgentUpdate(body);
+		showAgentStatus(t("agents.restored", { name: body.name }), "ok");
+		await showAgentView("list");
+	} catch (error) {
+		showAgentStatus(error.message, "error");
+	}
+}
+
+agentEls.manage.onclick = () => (agentView.open ? closeAgents() : openAgents("list"));
+agentEls.toggle.onclick = () => (agentView.open ? closeAgents() : openAgents("list"));
+agentEls.stale.onclick = () => send({ type: "conversation.rotate", conv: state.current });
+agentEls.close.onclick = closeAgents;
+for (const [view, button] of Object.entries(agentEls.nav)) button.onclick = () => openAgents(view);
+agentEls.el.addEventListener("click", (ev) => {
+	if (ev.target === agentEls.el) closeAgents();
+});
+agentEls.el.addEventListener("keydown", (ev) => {
+	if (ev.isComposing) return;
+	if (ev.key === "Escape") {
+		ev.preventDefault();
+		closeAgents();
+		return;
+	}
+	if (ev.key !== "Tab") return;
+	const focusable = [...agentEls.el.querySelectorAll(FOCUSABLE)].filter((node) => node.offsetParent !== null);
+	if (focusable.length === 0) return;
+	const first = focusable[0];
+	const last = focusable.at(-1);
+	if (ev.shiftKey && (document.activeElement === first || document.activeElement === agentEls.title)) {
+		ev.preventDefault();
+		last.focus();
+	} else if (!ev.shiftKey && document.activeElement === last) {
+		ev.preventDefault();
+		first.focus();
+	}
+});
+void loadAgents();
+
+/** The open agent dialog redrawn from its state: the list, the archive (fetched again) or the editor (unsaved edits kept). */
+function rerenderAgentDialog() {
+	if (!agentView.open) return;
+	if (agentView.view === "list") renderAgentList();
+	else if (agentView.view === "trash") void showAgentView("trash");
+	else if (agentView.editor) renderAgentEditor();
+}
+
+/**
+ * A language change: applyI18n (web/i18n.js) has already translated the static page; everything app.js draws from state
+ * is drawn again here. Lines already in the transcript stay as they were written; their labels (read marker, tags,
+ * thinking) carry data-i18n, so applyI18n has redrawn them already (bug 260).
+ */
+function rerenderLanguage() {
+	renderLanguageSelect();
+	renderConn();
+	renderOmo();
+	if (modelInfo) renderModels(modelInfo);
+	renderTtsToggle();
+	renderClapToggle();
+	setWakeStatus(wake.status);
+	renderVoiceToggle();
+	renderVoiceInstall();
+	setMicState(micState);
+	renderSendButton();
+	els.input.placeholder = t("composer.placeholder");
+	lastSent.el.dataset.label = t("chat.lastSent.prefix");
+	updateScrollNav();
+	renderStatusToggle();
+	syncStatusFold();
+	renderWorkStatusAll();
+	renderTray();
+	renderReferences();
+	renderDeviceRequests();
+	if (!slash.el.hidden) renderSlashMenu();
+	renderInboxBadge();
+	renderInboxOnline();
+	renderInboxList();
+	renderSecuritySurfaces();
+	renderSecurityToggle();
+	repoSecurity.render();
+	renderFormal();
+	renderAllowedValues();
+	renderSecurityBaseline();
+	renderUpdate(updateStatus);
+	if (accessEls.body) renderAccess(accessEls.body);
+	if (settings.open) {
+		enrollment.paint();
+		appDownload.paint();
+		if ("body" in gcEls) renderGc(gcEls.body);
+	}
+	renderAgentGroup();
+	renderAgentHeader();
+	rerenderAgentDialog();
+	if (manualView.open) void loadManual(getLanguage());
+}
+
+onLanguageChange(rerenderLanguage);
+
 connect();