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

package/web/style.css

@@ -36,6 +36,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .conv-list li.active { background: #404249; color: #fff; }
 .conv-list li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-left: auto; display: none; }
 .conv-list li.pending .dot { display: block; }
+.main-list { margin-bottom: 12px; }
 .sidebar-foot { background: #232428; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
 .agent-avatar { cursor: pointer; }
 .custom-icon { border-radius: 50%; object-fit: cover; }
@@ -220,7 +221,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .voice-off #mic, .voice-off #toggle-wake, .voice-off #toggle-clap, .voice-off #toggle-tts { display: none; }
 .device-requests:empty { display: none; }
 .last-sent { flex: none; padding: 4px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
-.last-sent::before { content: "마지막 보냄 · "; }
+.last-sent::before { content: attr(data-label); }
 .last-sent.open { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; }
 .device-request { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #3a2f12; border-bottom: 1px solid var(--warn); font-size: 14px; }
 .device-request span { flex: 1; }
@@ -583,6 +584,101 @@ button { font: inherit; color: inherit; cursor: pointer; }
 	.app.status-open .ws-caption { font-size: 13px; padding: 4px 10px; }
 }
 
+/* 에이전트 (agent-sessions todo 10, design D5): the sidebar group above 대화, the chat header's name, stale badge and
+   편집, and the 에이전트 dialog (list, editor, 공통 기본값, 보관함) on the 설정 card. Tokens, 12px labels, 13px text,
+   4px/6px/8px radii and the #4e5058 tag outline are the existing ones. */
+.agent-group { margin-bottom: 12px; }
+.agent-manage { font-size: 16px; }
+.agent-list li { gap: 8px; }
+.agent-list li .agent-icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-input); font-size: 13px; line-height: 1; }
+.agent-list li.active .agent-icon { background: #4e5058; }
+.agent-list li .agent-conv-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-list li .agent-run { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); display: none; }
+.agent-list li.running .agent-run { display: block; }
+.agent-list li .agent-stale-dot { flex: none; font-size: 11px; color: var(--warn); display: none; }
+.agent-list li.stale .agent-stale-dot { display: inline; }
+.agent-list li .dot { margin-left: 0; }
+.agent-list li.agent-empty, .agent-list li.agent-empty:hover { padding: 4px 8px 6px; font-size: 12px; color: var(--muted); background: none; cursor: default; }
+.agent-stale:focus-visible, .pe-clear:focus-visible, .pe-list-row:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+.agent-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
+.agent-head[hidden] { display: none; }
+.agent-head-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-input); font-size: 14px; line-height: 1; }
+.agent-head-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
+.agent-stale { flex: none; border: 1px solid var(--warn); border-radius: 10px; background: rgba(240, 178, 50, 0.16); color: var(--warn); font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; white-space: nowrap; }
+.agent-stale:hover { background: var(--warn); color: #111; }
+.agent-stale[hidden] { display: none; }
+.agents-card { width: min(100%, 640px); height: min(100%, 860px); }
+.agents-head { gap: 8px; }
+.agents-nav { display: flex; flex-wrap: wrap; gap: 6px; }
+.agents-nav .text-btn[aria-current="true"] { background: var(--accent); color: #fff; }
+.agents-status { margin: 0; padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
+.agents-status:empty { display: none; }
+.agents-status.error { color: #f38b8d; }
+.agents-status.ok { color: var(--ok); }
+.agents-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
+.pe-section { display: flex; flex-direction: column; gap: 8px; }
+.pe-section + .pe-section { border-top: 1px solid var(--border); padding-top: 12px; }
+.pe-section .section-label { padding: 0 0 2px; }
+.pe-group { margin-top: 6px; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; }
+.pe-group > span:first-child { flex: none; }
+.pe-group-help { font-weight: 400; text-transform: none; }
+.pe-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.pe-row { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 4px 12px; align-items: start; }
+.pe-label { font-size: 13px; padding-top: 6px; }
+.pe-label small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
+.pe-control { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.pe-control-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
+.pe-input { flex: 1 1 160px; min-width: 0; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
+.pe-input:focus-visible { outline: 2px solid #a3acff; outline-offset: 1px; }
+.pe-input[aria-invalid="true"] { border-color: var(--danger); }
+.pe-input.pe-number { flex: 0 1 140px; font-variant-numeric: tabular-nums; }
+.pe-input.pe-select { flex: 0 1 180px; }
+.pe-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; cursor: pointer; }
+.pe-toggle input { width: 16px; height: 16px; margin: 0; }
+.pe-textarea { width: 100%; min-height: 72px; resize: vertical; padding: 8px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
+.pe-textarea.pe-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; min-height: 96px; }
+.pe-textarea.pe-body { min-height: 180px; }
+.pe-origin { flex: none; font-size: 11px; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
+.pe-origin.agent, .pe-origin.defaults { color: #a3acff; border-color: #5865f2; }
+.pe-clear { background: none; border: 0; padding: 2px 4px; border-radius: 4px; color: #00a8fc; font-size: 12px; }
+.pe-clear:hover { text-decoration: underline; }
+.pe-error { margin: 0; font-size: 12px; color: #f38b8d; }
+.pe-error:empty { display: none; }
+.pe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.pe-actions .pe-spacer { flex: 1; }
+.pe-actions .text-btn.primary { background: var(--accent); color: #fff; }
+.pe-actions .text-btn.primary:disabled, .pe-actions .text-btn.danger:disabled, .pe-actions .text-btn:disabled { opacity: 0.5; cursor: default; }
+.text-btn.danger { background: var(--danger); color: #fff; }
+.pe-delete { display: flex; flex-direction: column; gap: 8px; }
+.pe-delete[hidden] { display: none; }
+.pe-delete .pe-input { flex: none; width: 100%; max-width: 320px; }
+.pe-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.pe-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-card); border: 1px solid #4e5058; border-radius: 6px; }
+.pe-list-row .agent-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-input); font-size: 15px; line-height: 1; }
+.pe-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.pe-list-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
+.pe-list-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pe-list-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
+.pe-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 16px 8px; }
+.pe-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
+.pe-file { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 13px; border-radius: 4px; }
+.pe-file:nth-child(odd) { background: var(--bg-card); }
+.pe-file-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.pe-file-name.directory { color: var(--muted); }
+.pe-file-size { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.pe-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+@media (max-width: 640px) {
+	.agent-head-name { max-width: 120px; }
+	.pe-row { grid-template-columns: 1fr; }
+	/* An agent conversation's header: the avatar and the agent block share the first row, the action buttons wrap below. */
+	.chat-head:has(.agent-head:not([hidden])) { flex-wrap: wrap; }
+	.agent-head { flex: 1 1 calc(100% - 44px); flex-wrap: wrap; }
+	.pe-label { padding-top: 0; }
+	.agents-body .text-btn, .agent-stale, .pe-clear { min-height: 44px; }
+	.pe-list-row { flex-wrap: wrap; }
+	.pe-list-actions { width: 100%; justify-content: flex-start; }
+}
+
 /* Bug 90: the page-drawn tooltip (web/tooltip.js). */
 .zgw-tip { position: fixed; z-index: 10000; max-width: min(360px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 6px; background: #111214; color: var(--text); border: 1px solid #3f4147; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); font-size: 12px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; }
 .zgw-tip[hidden] { display: none; }
@@ -606,8 +702,41 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .security-allowed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
 .security-allowed-item { padding: 8px; border: 1px solid var(--border); border-radius: 4px; min-width: 0; }
 .security-allowed-item .security-value { display: block; font-size: 12px; }
-#security-allowed-confirm[hidden] { display: none; }
+#security-allowed-confirm[hidden], #security-baseline-confirm[hidden] { display: none; }
+.security-baseline-auto { border-style: dashed; }
+/* Improvement 232 (todo 21): a disabled control in the section (locked list, blocked repository toggle) reads as disabled, like .pe-actions. */
+#security-check .text-btn:disabled { opacity: 0.5; cursor: default; }
+.formal-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.formal-tool { display: flex; flex-direction: column; gap: 4px; }
+#formal-verification .text-btn:disabled { opacity: 0.5; cursor: default; }
+/* Bug 259: a tool row's Install button (a compact .text-btn as tall as the switch) sits between the info icon and the
+   switch and never shrinks; the label beside it wraps, so the row fits a 360px wide screen. */
+.formal-install { flex: none; padding: 2px 8px; }
+/* Settings switches (improvement af188563): a role=switch button drawn as a track with a thumb, its label beside it, the
+   1-2 line summary under the row, and the info icon whose tooltip (web/tooltip.js) carries the full description. The
+   colours are the existing ones: the #4e5058 outline for off, --ok for on, the #a3acff focus ring. */
+.switch-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.switch-label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
+.switch-status { flex: none; font-size: 12px; color: var(--muted); }
+.switch-status[hidden] { display: none; }
+.switch-summary { margin: 0; }
+.switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: #4e5058; cursor: pointer; transition: background 150ms ease; }
+.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
+.switch[aria-checked="true"] { background: var(--ok); }
+.switch[aria-checked="true"]::before { transform: translateX(16px); }
+.switch:disabled { opacity: 0.5; cursor: default; }
+.info-tip { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid #4e5058; border-radius: 50%; background: none; color: var(--muted); font: 700 11px/1 ui-monospace, monospace; cursor: help; }
+.info-tip:hover { color: var(--text); border-color: var(--text); }
+.switch:focus-visible, .info-tip:focus-visible { outline: 2px solid #a3acff; outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+	.switch, .switch::before { transition: none; }
+}
 @media (max-width: 640px) {
-	.security-actions .text-btn, .security-inbox-item .text-btn, #security-check .text-btn { min-height: 44px; }
+	.security-actions .text-btn, .security-inbox-item .text-btn, #security-check .text-btn, #formal-verification .text-btn { min-height: 44px; }
+	/* The 44px hit areas of the switch and the info icon, without growing their drawings. */
+	.switch-row { min-height: 44px; }
+	.switch::after, .info-tip::after { content: ""; position: absolute; inset: -12px -4px; }
+	.info-tip { position: relative; }
+	.info-tip::after { inset: -13px; }
 }
 .security-card .security-value { white-space: pre-wrap; overflow-wrap: anywhere; }

package/web/tooltip.js

@@ -1,7 +1,10 @@
 // Bug 90: the page draws its own tooltip. Some browsers (the user's, likely Aside) never show the native `title`
 // tooltip, so a `title` moves to `data-tip` and one shared element shows it on hover and keyboard focus, linked with
-// aria-describedby. Bug 161: only elements marked `data-tip-keep` (새 세션, the voice buttons, 확인함, 이벤트) keep a
-// visible tip; every other `title` moves to `aria-description`, so neither the page nor the browser shows a tip for it.
+// aria-describedby. Bug 161: only elements marked `data-tip-keep` keep a visible tip; every other `title` moves to
+// `aria-description`, so neither the page nor the browser shows a tip for it. The allowed set: 새 세션, the voice buttons,
+// 확인함, 이벤트, and (improvement af188563) the `.info-tip` icons of the settings switches (message check, output check,
+// formal verification and its per-tool rows), whose tip is the item's full description (`data-i18n-tip` in index.html,
+// `data-tip` set by app.js for the tool rows).
 
 export const TIP_GAP = 6;
 export const TIP_MARGIN = 8;

package/web/turn-stats.js

@@ -1,10 +1,14 @@
+import strings from "./i18n/turn-stats.js";
+import { registerStrings, t } from "./i18n.js";
+
+registerStrings(strings);
 /** Unknown fields are omitted, not rendered as zero. Model time excludes tools and wall time. */
 export function turnStatsLabel(stats) {
 	if (!stats || typeof stats !== "object") return "";
 	const parts = [];
 	if (Number.isFinite(stats.tokensPerSecond) && stats.tokensPerSecond > 0) parts.push(`TPS ${stats.tokensPerSecond.toFixed(1)} tok/s`);
-	if (Number.isFinite(stats.modelDurationMs) && stats.modelDurationMs > 0) parts.push(`모델 처리 ${(stats.modelDurationMs / 1000).toFixed(1)}초`);
-	if (Number.isFinite(stats.cacheHitPercent) && stats.cacheHitPercent >= 0 && stats.cacheHitPercent <= 100) parts.push(`캐시 적중 ${stats.cacheHitPercent.toFixed(1)}%`);
+	if (Number.isFinite(stats.modelDurationMs) && stats.modelDurationMs > 0) parts.push(t("turnStats.model", { seconds: (stats.modelDurationMs / 1000).toFixed(1) }));
+	if (Number.isFinite(stats.cacheHitPercent) && stats.cacheHitPercent >= 0 && stats.cacheHitPercent <= 100) parts.push(t("turnStats.cache", { percent: stats.cacheHitPercent.toFixed(1) }));
 	return parts.join(" · ");
 }
 

package/web/update.js

@@ -1,17 +1,25 @@
-// Plan Todo 22: the new version notice of the web UI (the header line and the 설정 "업데이트" area). Only decisions live
+// Plan Todo 22: the new version notice of the web UI (the header line and the settings update area). Only decisions live
 // here, with no DOM, so test/unit/update-web.test.ts and the mutation run drive them directly; app.js paints the result.
-// A failed registry lookup is shown with a hint to press "지금 확인" (POST /api/update/check) again.
+import { onLanguageChange, registerStrings, t } from "./i18n.js";
+import strings from "./i18n/update.js";
+
+registerStrings(strings);
 
 export const UPDATE_STATUS_PATH = "/api/update/status";
 export const UPDATE_CHECK_PATH = "/api/update/check";
 export const UPDATE_PATH = "/api/update";
 export const UPDATE_CONSENT_PATH = "/api/update/consent";
 export const UPDATE_STATE_PATH = "/api/update/state";
-export const NOT_CHECKED_LINE = "아직 새 버전을 확인하지 않았습니다.";
-export const UP_TO_DATE_LINE = "최신 버전을 쓰고 있습니다.";
-export const CHECKOUT_LINE = "이 설치는 저장소에서 배포합니다. 앱 안 업데이트는 npm 설치에서만 씁니다.";
-export const RESTART_NOTICE = "업데이트하면 게이트웨이와 브리지가 다시 시작됩니다. 그동안 연결과 진행 중인 대화·작업이 잠시 끊길 수 있습니다.";
-const RETRY_HINT = "지금 확인을 눌러 다시 시도하세요.";
+export let NOT_CHECKED_LINE = t("update.notChecked");
+export let UP_TO_DATE_LINE = t("update.upToDate");
+export let CHECKOUT_LINE = t("update.checkout");
+export let RESTART_NOTICE = t("update.restartNotice");
+onLanguageChange(() => {
+	NOT_CHECKED_LINE = t("update.notChecked");
+	UP_TO_DATE_LINE = t("update.upToDate");
+	CHECKOUT_LINE = t("update.checkout");
+	RESTART_NOTICE = t("update.restartNotice");
+});
 
 /** A `version.available` payload or a GET /api/update/status body with a newer version; null for anything else. */
 export function parseNotice(data) {
@@ -24,32 +32,32 @@ export function parseNotice(data) {
 
 export function noticeLine(notice) {
 	if (notice === null) return null;
-	return `새 버전 ${notice.latest}이 나왔습니다 (지금 ${notice.current}).`;
+	return t("update.noticeLine", { latest: notice.latest, current: notice.current });
 }
 
-/** The 설정 "업데이트" area for a GET /api/update/status body (null when the gateway did not answer). */
+/** The settings update area for a GET /api/update/status body (null when the gateway did not answer). */
 export function updateView(status) {
 	if (status === null || typeof status !== "object" || typeof status.current !== "string") {
-		return { current: "지금 버전: 알 수 없음", latest: NOT_CHECKED_LINE, note: null, changelogUrl: null, error: null, warning: null };
+		return { current: t("update.currentUnknown"), latest: t("update.notChecked"), note: null, changelogUrl: null, error: null, warning: null };
 	}
 	const notice = parseNotice(status);
-	const current = `지금 버전: ${status.current}`;
-	const note = status.updatable === true ? null : CHECKOUT_LINE;
+	const current = t("update.current", { version: status.current });
+	const note = status.updatable === true ? null : t("update.checkout");
 	const failure = typeof status.error === "string" && status.error !== "" ? status.error : null;
-	const error = failure === null ? null : `마지막 확인에 실패했습니다 (${failure}). ${RETRY_HINT}`;
+	const error = failure === null ? null : t("update.lastCheckFailed", { error: failure });
 	if (notice !== null) {
-		return { current, latest: `새 버전: ${notice.latest}`, note, changelogUrl: notice.changelogUrl, error, warning: notice.updatable ? RESTART_NOTICE : null };
+		return { current, latest: t("update.latest", { version: notice.latest }), note, changelogUrl: notice.changelogUrl, error, warning: notice.updatable ? t("update.restartNotice") : null };
 	}
 	const checked = typeof status.checkedAt === "string" && typeof status.latest === "string";
 	if (!checked && failure !== null) {
-		return { current, latest: `새 버전을 확인하지 못했습니다 (${failure}). ${RETRY_HINT}`, note, changelogUrl: null, error: null, warning: null };
+		return { current, latest: t("update.checkFailed", { error: failure }), note, changelogUrl: null, error: null, warning: null };
 	}
-	return { current, latest: checked ? UP_TO_DATE_LINE : NOT_CHECKED_LINE, note, changelogUrl: null, error, warning: null };
+	return { current, latest: checked ? t("update.upToDate") : t("update.notChecked"), note, changelogUrl: null, error, warning: null };
 }
 
 /** The line when POST /api/update/check itself failed (status 0: the gateway did not answer). */
 export function checkFailedLine(status) {
-	return `새 버전을 확인하지 못했습니다 (${status === 0 ? "게이트웨이 응답 없음" : `HTTP ${status}`}). ${RETRY_HINT}`;
+	return t("update.checkFailed", { error: status === 0 ? t("update.gatewayNoResponse") : `HTTP ${status}` });
 }
 
 // Plan Todo 23: the update button, its questions (new permission notice, shared schema, running turn) and its progress.
@@ -60,7 +68,7 @@ export function checkFailedLine(status) {
  */
 export function questionGate(counters) {
 	const n = counters ? counters.pending + counters.needsReview : 0;
-	return n > 0 ? `답을 기다리는 질문이 ${n}개 있습니다. 확인함에서 먼저 답해 주세요. 답한 뒤 업데이트할 수 있습니다.` : null;
+	return n > 0 ? t("update.questionsPending", { count: n }) : null;
 }
 
 export function canUpdate(status) {
@@ -70,8 +78,8 @@ export function canUpdate(status) {
 /** What the page does next with a POST /api/update answer. */
 export function updateStep(status, body) {
 	const b = body !== null && typeof body === "object" ? body : {};
-	const message = typeof b.message === "string" ? b.message : `업데이트 요청 실패 (HTTP ${status})`;
-	if (status === 202 && typeof b.id === "string") return { kind: "started", id: b.id, line: `업데이트를 시작했습니다: ${b.from} → ${b.to}` };
+	const message = typeof b.message === "string" ? b.message : t("update.requestFailed", { status });
+	if (status === 202 && typeof b.id === "string") return { kind: "started", id: b.id, line: t("update.started", { from: b.from, to: b.to }) };
 	const notice = b.notice;
 	if (b.code === "consent_required" && notice !== null && typeof notice === "object" && Number.isInteger(notice.version) && typeof notice.text === "string") {
 		return { kind: "consent", message, notice: { version: notice.version, text: notice.text } };
@@ -85,8 +93,8 @@ export function updateStep(status, body) {
 /** The line for an `update.result` payload. */
 export function resultLine(result) {
 	if (result === null || typeof result !== "object" || typeof result.ok !== "boolean") return null;
-	if (result.ok) return `업데이트를 마쳤습니다: ${result.from} → ${result.to}. 페이지를 새로 고치세요.`;
-	return `${typeof result.message === "string" ? result.message : "업데이트에 실패했습니다."}${typeof result.logPath === "string" && result.logPath !== "" ? ` (로그: ${result.logPath})` : ""}`;
+	if (result.ok) return t("update.completed", { from: result.from, to: result.to });
+	return `${typeof result.message === "string" ? result.message : t("update.failed")}${typeof result.logPath === "string" && result.logPath !== "" ? ` ${t("update.logPath", { path: result.logPath })}` : ""}`;
 }
 
 /**
@@ -101,5 +109,5 @@ export function progressLine(data, loadedVersion = null) {
 		return resultLine(data.result);
 	}
 	if (typeof data.label !== "string" || data.phase === "done") return null;
-	return `업데이트 중 (${data.from} → ${data.to}): ${data.label}`;
+	return t("update.progress", { from: data.from, to: data.to, label: data.label });
 }

package/web/voice.js

@@ -2,6 +2,11 @@
 // servers). Only decisions live here, with no DOM, so test/unit/voice-web.test.ts and the mutation run can exercise
 // them directly. Contract: .omo/evidence/improvement-71/design.md, "Clients".
 
+import dict from "./i18n/voice.js";
+import { onLanguageChange, registerStrings, t } from "./i18n.js";
+
+registerStrings(dict);
+
 export const VOICE_SETTING_PATH = "/api/settings/voice";
 /** Todo 26: an npm install's voice install (GET status, POST start; the POST works on the web port only). */
 export const VOICE_INSTALL_PATH = "/api/settings/voice/install";
@@ -10,8 +15,13 @@ export const VOICE_OFF_CLASS = "voice-off";
 export const VOICE_CONTROL_IDS = Object.freeze(["mic", "toggle-wake", "toggle-clap", "toggle-tts"]);
 /** The web slash commands that need the voice servers: out of the menu and refused while voice is off. */
 export const VOICE_COMMANDS = Object.freeze(["tts on", "tts off", "wake on", "wake off", "clap on", "clap off", "read"]);
-export const VOICE_DISABLED_LINE = "음성 기능이 꺼져 있습니다";
-export const VOICE_OFF_STATUS_LINE = "옵션: 음성 꺼짐 (음성 답변·호출어·박수 감지를 쓸 수 없습니다)";
+/** Live bindings: they follow the UI language, so importers always read the current text. */
+export let VOICE_DISABLED_LINE = t("voice.disabledLine");
+export let VOICE_OFF_STATUS_LINE = t("voice.offStatusLine");
+onLanguageChange(() => {
+	VOICE_DISABLED_LINE = t("voice.disabledLine");
+	VOICE_OFF_STATUS_LINE = t("voice.offStatusLine");
+});
 export const TTS_KEY = "zgw.tts.enabled";
 export const CLAP_KEY = "zgw.clap.enabled";
 
@@ -50,7 +60,7 @@ export function restorePlan(storage, micAvailable) {
 
 /** The header toggle's text and pressed state. */
 export function voiceToggleView(enabled) {
-	return { text: enabled ? "음성 켜짐" : "음성 꺼짐", pressed: enabled };
+	return { text: enabled ? t("voice.toggle.on") : t("voice.toggle.off"), pressed: enabled };
 }
 
 /** The PUT that changes the setting (web port only; the gateway answers {"enabled":...} and publishes voice.updated). */
@@ -64,9 +74,9 @@ export function voiceInstallView(status) {
 		return { hidden: true, text: "", disabled: true };
 	}
 	const progress = status.progress ?? {};
-	if (progress.state === "running") return { hidden: false, text: `음성 설치 중 ${progress.index}/${progress.total}: ${progress.message}`, disabled: true };
-	const size = `약 ${Math.round(status.estimateBytes / 1024 ** 3)}GB`;
-	return { hidden: false, text: progress.state === "failed" ? `음성 설치 다시 시도 (${size})` : `음성 설치 (${size})`, disabled: false };
+	if (progress.state === "running") return { hidden: false, text: t("voice.install.running", { index: progress.index, total: progress.total, message: progress.message }), disabled: true };
+	const size = t("voice.install.size", { gb: Math.round(status.estimateBytes / 1024 ** 3) });
+	return { hidden: false, text: t(progress.state === "failed" ? "voice.install.retry" : "voice.install.start", { size }), disabled: false };
 }
 
 /** A voice.install.progress payload applied to the last known status; "done" marks voice as installed. */
@@ -78,6 +88,6 @@ export function installStatusWith(status, progress) {
 /** The /옵션 line. With voice off the three features are reported as unavailable instead of their stored states. */
 export function optionStatusLine(voiceEnabled, { tts, wake, clap }) {
 	if (!voiceEnabled) return VOICE_OFF_STATUS_LINE;
-	const onOff = (on) => (on ? "켜짐" : "꺼짐");
-	return `옵션: 음성 켜짐 · 음성 답변 ${onOff(tts)} · 호출어 ${onOff(wake)} · 박수 감지 ${onOff(clap)}`;
+	const onOff = (on) => t(on ? "voice.state.on" : "voice.state.off");
+	return t("voice.status.line", { tts: onOff(tts), wake: onOff(wake), clap: onOff(clap) });
 }

package/web/wake.d.ts

@@ -0,0 +1,4 @@
+export function matchWake(text: string): { command: string } | null;
+export function isTripleHey(text: string): boolean;
+export function isCancelWord(text: string): boolean;
+export function encodeWav(samples: ArrayLike<number>, sampleRate: number): Blob;

package/web/wake.js

@@ -1,4 +1,8 @@
-const WAKE_RE = /(?:^|[\s,.!?])(?:헤이|해이|헤의|해의|에이|hey|hi)[\s,.!?~-]*(?:지그|지급|지구|지기|찌그|치그|지크|직|zig|jig)[\s,.!?~-]*/i;
+import dict from "./i18n/wake.js";
+
+const words = (key) => [...new Set([dict.en[key], dict.ko[key]].flatMap((value) => value.split(",")))].join("|");
+
+const WAKE_RE = new RegExp(`(?:^|[\\s,.!?])(?:${words("wake.hey")})[\\s,.!?~-]*(?:${words("wake.name")})[\\s,.!?~-]*`, "i");
 const WAKE_MAX_OFFSET = 6;
 
 export function matchWake(text) {
@@ -7,8 +11,8 @@ export function matchWake(text) {
 	return { command: text.slice(m.index + m[0].length).trim() };
 }
 
-const TRIPLE_HEY_RE = /^[\s,.!?~-]*(?:(?:헤이|해이|헤의|해의|에이|hey)[\s,.!?~-]*){3,}$/i;
-const CANCEL_RE = /^[\s,.!?~-]*(?:취소|그만|아니야|아니|멈춰)[\s,.!?~-]*$/;
+const TRIPLE_HEY_RE = new RegExp(`^[\\s,.!?~-]*(?:(?:${words("wake.hey.triple")})[\\s,.!?~-]*){3,}$`, "i");
+const CANCEL_RE = new RegExp(`^[\\s,.!?~-]*(?:${words("wake.cancel")})[\\s,.!?~-]*$`);
 
 export function isTripleHey(text) {
 	return TRIPLE_HEY_RE.test(text);

package/web/workid.js

@@ -1,8 +1,18 @@
+import dict from "./i18n/workid.js";
+import { onLanguageChange, registerStrings, t } from "./i18n.js";
+
 // Improvement 76: a right-click (or the ContextMenu key / Shift+F10) on a work card in the work status drawing copies the
 // card's full gateway work id. Only work cards react; every other element keeps the browser's own menu.
 
-export const ID_COPIED = "ID 복사함";
-export const ID_COPY_FAILED = "복사 실패";
+registerStrings(dict);
+
+/** Live bindings: they follow the UI language, so importers always read the current text. */
+export let ID_COPIED = t("workid.copied");
+export let ID_COPY_FAILED = t("workid.copyFailed");
+onLanguageChange(() => {
+	ID_COPIED = t("workid.copied");
+	ID_COPY_FAILED = t("workid.copyFailed");
+});
 const WORK_PREFIX = "work:";
 
 /** The full work id of the work card that holds [target] (`g.ws-node` with `data-key="work:<id>"`), or null. */

package/web/workstatus.js

@@ -1,5 +1,9 @@
 // What the gateway is working on (state.snapshot `workStatus` + `work.status` frames): DTO validation, socket generation
 // and revision gating, the view and the hub diagram drawn inside the sidebar region above the profile block.
+import strings from "./i18n/workstatus.js";
+import { onLanguageChange, registerStrings, t } from "./i18n.js";
+
+registerStrings(strings);
 
 /** Work cards beside the fixed main card (gateway WORK_SLOTS). */
 export const SLOT_COUNT = 6;
@@ -17,30 +21,30 @@ export function writeFolded(storage, folded) {
 
 /** The fold button's accessible name: what activating it does. */
 export function foldLabel(folded) {
-	return folded ? "작업 상태 펼치기" : "작업 상태 숨기기";
-}
-
-export const STATE_LABELS = {
-	running: "진행 중",
-	waiting_input: "입력 대기",
-	waiting: "대기 중",
-	unresponsive: "응답 없음",
-	broken: "고장",
-	unknown: "확인 중",
-	idle: "쉬는 중",
-	completed: "완료",
-	failed: "실패",
-	cancelled: "취소됨",
-};
+	return t(folded ? "workstatus.fold.expand" : "workstatus.fold.hide");
+}
+
+const STATES = ["running", "waiting_input", "waiting", "unresponsive", "broken", "unknown", "idle", "completed", "failed", "cancelled"];
+export let STATE_LABELS = stateLabels();
 /** A work waiting between turns on its sub-tasks (gateway `waitingFor: "children"`). */
-export const CHILD_WAIT_LABEL = "하위 작업 대기";
+export let CHILD_WAIT_LABEL = t("workstatus.state.children");
+
+function stateLabels() {
+	return Object.fromEntries(STATES.map((state) => [state, t(`workstatus.state.${state}`)]));
+}
+
+// The exported labels follow the UI language.
+onLanguageChange(() => {
+	STATE_LABELS = stateLabels();
+	CHILD_WAIT_LABEL = t("workstatus.state.children");
+});
 const SESSION_STATES = new Set(["running", "idle", "unknown"]);
 const WORK_STATES = new Set(["running", "waiting", "waiting_input", "unresponsive", "broken", "completed", "failed", "cancelled", "unknown"]);
 /** Finished works and works the gateway's watcher judged broken are the only ones the user can clear from their slot. */
 const FINISHED = new Set(["completed", "failed", "cancelled", "broken"]);
 /** The watcher's reason line is short by contract; anything longer is cut here. */
 const NOTE_MAX = 160;
-const KIND_LABELS = { session: "세션", work: "작업" };
+const KIND_LABELS = { session: "workstatus.kind.session", work: "workstatus.kind.work" };
 
 function record(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -119,10 +123,10 @@ export function relativeTime(iso, now) {
 	const at = Date.parse(iso);
 	if (Number.isNaN(at)) return "";
 	const seconds = Math.max(0, Math.floor((now - at) / 1000));
-	if (seconds < 60) return "방금";
-	if (seconds < 3600) return `${Math.floor(seconds / 60)}분 전`;
-	if (seconds < 86400) return `${Math.floor(seconds / 3600)}시간 전`;
-	return `${Math.floor(seconds / 86400)}일 전`;
+	if (seconds < 60) return t("workstatus.time.now");
+	if (seconds < 3600) return t("workstatus.time.minutes", { count: Math.floor(seconds / 60) });
+	if (seconds < 86400) return t("workstatus.time.hours", { count: Math.floor(seconds / 3600) });
+	return t("workstatus.time.days", { count: Math.floor(seconds / 86400) });
 }
 
 /**
@@ -140,7 +144,7 @@ export function workStatusView(status, conversationTitles, now) {
 		key: `${item.kind}:${item.id}`,
 		id: item.id,
 		kind: item.kind,
-		kindLabel: KIND_LABELS[item.kind],
+		kindLabel: t(KIND_LABELS[item.kind]),
 		title: item.title,
 		state: item.state,
 		stateLabel: item.waitingFor === "children" ? CHILD_WAIT_LABEL : STATE_LABELS[item.state],
@@ -191,8 +195,8 @@ export function incomingReports(previous, view) {
 
 /** The text under the diagram: the state of the region, or the latest change. */
 export function captionText(view) {
-	if (view.mode === "unavailable") return "작업 상태를 확인하는 중입니다.";
-	if (view.mode === "empty" || (view.slots.every((slot) => slot === null) && view.running === 0)) return "지금 하고 있는 작업이 없습니다.";
+	if (view.mode === "unavailable") return t("workstatus.caption.unavailable");
+	if (view.mode === "empty" || (view.slots.every((slot) => slot === null) && view.running === 0)) return t("workstatus.caption.empty");
 	return `${view.caption.title} · ${view.caption.stateLabel} · ${view.caption.when}`;
 }
 
@@ -480,8 +484,8 @@ export function renderWorkStatus(parts, view, previous, motion) {
 	for (let i = 0; i < 9; i++) {
 		pubG.append(svg("circle", { cx: pub.x + 9 + (i % 3) * 5, cy: pub.y + 11 + Math.floor(i / 3) * 6, r: 1.3, class: i % 4 === 0 ? "ws-grid-on" : "ws-grid" }));
 	}
-	pubG.append(svg("text", { x: pub.x + 30, y: pub.y + 16, class: "ws-pub-name" }, fitLabel(parts.userName ?? "나", 7.6)));
-	pubG.append(svg("text", { x: pub.x + 30, y: pub.y + 28, class: "ws-pub-state" }, "사용자"));
+	pubG.append(svg("text", { x: pub.x + 30, y: pub.y + 16, class: "ws-pub-name" }, fitLabel(parts.userName ?? t("workstatus.user.me"), 7.6)));
+	pubG.append(svg("text", { x: pub.x + 30, y: pub.y + 28, class: "ws-pub-state" }, t("workstatus.user")));
 	nodes.append(pubG);
 
 	const { hub } = layout;
@@ -500,7 +504,7 @@ export function renderWorkStatus(parts, view, previous, motion) {
 		if (slot.empty) {
 			const g = svg("g", { class: "ws-slot-empty", "data-slot": slot.index, "aria-hidden": "true" });
 			g.append(svg("rect", { x: slot.x + 0.5, y: slot.y + 0.5, width: slot.w - 1, height: slot.h - 1, rx: 4, class: "ws-empty-box" }));
-			g.append(svg("text", { x: slot.x + slot.w / 2, y: slot.y + slot.h / 2 + 4, class: "ws-empty-label" }, "빈 칸"));
+			g.append(svg("text", { x: slot.x + slot.w / 2, y: slot.y + slot.h / 2 + 4, class: "ws-empty-label" }, t("workstatus.slot.empty")));
 			nodes.append(g);
 			continue;
 		}
@@ -508,7 +512,7 @@ export function renderWorkStatus(parts, view, previous, motion) {
 		links.append(svg("path", { d: node.link, class: `ws-link ws-${node.state}`, style: `--hue:${node.hue}` }));
 		hubG.append(svg("circle", { cx: node.anchor.x.toFixed(1), cy: node.anchor.y.toFixed(1), r: 2.4, class: "ws-port", style: `--hue:${node.hue}` }));
 		const described = `${node.title}, ${node.stateLabel}${node.note ? ` (${node.note})` : ""}, ${node.when}`;
-		const label = node.finished ? `${described}. 누르면 이 칸을 비웁니다.` : described;
+		const label = node.finished ? `${described}. ${t("workstatus.slot.clear")}` : described;
 		const g = svg("g", {
 			class: `ws-node ws-${node.state}${node.finished ? " ws-dismissable" : ""}`, style: `--hue:${node.hue}`, "data-key": node.key, "data-slot": node.index,
 			tabindex: "0", role: node.finished ? "button" : "img", "aria-label": label,
@@ -518,7 +522,7 @@ export function renderWorkStatus(parts, view, previous, motion) {
 		node.lines.forEach((line, i) => g.append(svg("text", { x: node.x + 9, y: node.y + 21 + i * 16, class: "ws-node-label" }, line)));
 		g.append(svg("circle", { cx: node.x + 12, cy: node.y + 57, r: 3, class: "ws-node-dot" }));
 		g.append(svg("text", { x: node.x + 20, y: node.y + 61, class: "ws-node-state" }, node.stateLabel));
-		g.append(svg("text", { x: node.x + 9, y: node.y + 80, class: "ws-node-when" }, node.finished ? `${node.when} · 눌러 비우기` : node.when));
+		g.append(svg("text", { x: node.x + 9, y: node.y + 80, class: "ws-node-when" }, node.finished ? `${node.when} · ${t("workstatus.slot.clear.short")}` : node.when));
 		g.addEventListener("pointerenter", () => showTip(tip, region, g, node.title, node.note));
 		g.addEventListener("pointerleave", () => hideTip(tip));
 		g.addEventListener("focus", () => showTip(tip, region, g, node.title, node.note));
@@ -572,10 +576,10 @@ export function renderWorkStatus(parts, view, previous, motion) {
 	caption.textContent = text;
 	caption.title = text;
 	more.hidden = view.queued === 0;
-	more.textContent = view.queued > 0 ? `+${view.queued} 대기` : "";
-	more.title = view.queued > 0 ? `빈 칸을 기다리는 작업 ${view.queued}개` : "";
+	more.textContent = view.queued > 0 ? t("workstatus.queued.badge", { count: view.queued }) : "";
+	more.title = view.queued > 0 ? t("workstatus.queued.title", { count: view.queued }) : "";
 	const rows = [view.publisher, ...view.slots.filter(Boolean)].filter(Boolean);
 	list.replaceChildren(...rows.map((row) => el("li", "", `${row.kindLabel} ${row.title}: ${row.stateLabel}${row.note ? ` (${row.note})` : ""}, ${row.when}${row.owner ? ` (${row.owner})` : ""}`)));
-	if (view.queued > 0) list.append(el("li", "", `빈 칸을 기다리는 작업 ${view.queued}개`));
+	if (view.queued > 0) list.append(el("li", "", t("workstatus.queued.item", { count: view.queued })));
 	return signatures;
 }