zigmini 0.8.0-beta.4 → 0.8.0-beta.6

package/web/app.js

@@ -26,7 +26,9 @@ import {
 import { agentIconUrl, editAgentIcon, readAgentIcon, writeAgentIcon } from "./agent-icon.js";
 import { hasTextSelection, panelShortcut } from "./shortcuts.js";
 import { decisionCommand, lastSentLabel, lastSentTooltip, nextLastSent } from "./lastsent.js";
+import { installTooltips } from "./tooltip.js";
 import { placeRow, unseenEvents } from "./chatorder.js";
+import { cardsOfDecision } from "./cardbind.js";
 import { createRecall, recallKey, resetRecall } from "./recall.js";
 import {
 	addReference, clearReferences, createReferences, inputData, markReferenceable, planSend, referenceSeqs, referenceSource, removeReference,
@@ -40,9 +42,11 @@ import {
 import { createEnrollment, NO_DEVICES_LINE, REVOKE_ARMED_LABEL, REVOKE_LABEL } from "./enroll.js";
 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 { cleanRequest, cleanResultLine, GC_CLEAN_PATH, GC_PATH, gcView } from "./gc.js";
+import { cleanRequest, cleanResultLine, GC_CLEAN_PATH, GC_PATH, gcView, selectAllState, selectAllTarget } from "./gc.js";
 import { manualFailureText, manualLinkLang, manualUrl, otherLang } from "./manual.js";
 
+installTooltips(document, window);
+
 const $ = (id) => document.getElementById(id);
 const state = {
 	conversations: [],
@@ -676,12 +680,9 @@ function cardForDecision(id) {
 	return els.messages.querySelector(`.approval[data-decision-id="${CSS.escape(id)}"]`);
 }
 
-/** The mounted card of a decision: its explicit identity first, then the original action alias of an id-less card. */
-function cardOf(decision) {
-	const explicit = cardForDecision(decision.id);
-	if (explicit) return explicit;
-	const card = cardFor(originalActionId(decision));
-	return card && (card.dataset.decisionId === undefined || card.dataset.decisionId === decision.id) ? card : null;
+/** Every mounted card of a decision; a rebound question keeps its decision id on a new card (bug 154). */
+function cardsOf(decision) {
+	return cardsOfDecision(els.messages.querySelectorAll(".approval"), decision.id, originalActionId(decision));
 }
 
 /** Legacy or still-loading card bodies: controls on or off plus one status line, optionally with a retry control. */
@@ -715,13 +716,14 @@ function setCardBusy(actionId, busy) {
 }
 
 /** Re-renders the mounted card of a decision from canonical state; an id-less card follows only its own unique alias. */
-function syncCard(decision) {
-	const card = cardOf(decision);
-	if (!card) return;
-	const request = cardRequests.get(card);
-	if (!request) return;
-	if (typeof request.decisionId !== "string" && decisionForAction(inbox.state, request.actionId)?.id !== decision.id) return;
-	renderCardBody(card, decision);
+function syncCard(decision, except = null) {
+	for (const card of cardsOf(decision)) {
+		if (card === except) continue;
+		const request = cardRequests.get(card);
+		if (!request) continue;
+		if (typeof request.decisionId !== "string" && decisionForAction(inbox.state, request.actionId)?.id !== decision.id) continue;
+		renderCardBody(card, decision);
+	}
 }
 
 /** One line of state under a canonical card: in transit, locked for review, offline, finished, or why it still waits. */
@@ -1556,7 +1558,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 ? "omo 연결됨" : omoStatus === "connecting" ? "omo 연결 중" : "omo 끊김";
+	els.omo.textContent = checking ? "작업 상태 확인 중" : ready ? "엔진 연결됨" : omoStatus === "connecting" ? "엔진 연결 중" : "엔진 끊김";
 	els.omo.classList.toggle("ok", ready);
 }
 
@@ -1581,7 +1583,7 @@ function renderModels(info) {
 		modelSelect.append(group);
 	}
 	if (info.current) modelSelect.value = `${info.current.provider}/${info.current.id}`;
-	modelSelect.title = info.current ? `omo 모델: ${info.current.name}` : "omo 모델";
+	modelSelect.title = info.current ? `엔진 모델: ${info.current.name}` : "엔진 모델";
 	// 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;
@@ -2027,7 +2029,7 @@ function renderSlashMenu() {
 		});
 		return row;
 	});
-	const note = slash.loading ? "omo 명령과 스킬을 불러오는 중…" : slash.failed ? "omo 명령과 스킬을 불러오지 못했습니다. 웹 지그 명령만 보입니다." : rows.length === 0 ? "맞는 명령이나 스킬이 없습니다." : "";
+	const note = slash.loading ? "엔진 명령과 스킬을 불러오는 중…" : slash.failed ? "엔진 명령과 스킬을 불러오지 못했습니다. 웹 지그 명령만 보입니다." : rows.length === 0 ? "맞는 명령이나 스킬이 없습니다." : "";
 	if (note) {
 		const div = document.createElement("div");
 		div.className = "slash-note";
@@ -2110,7 +2112,7 @@ $("new-conv").onclick = () => {
 };
 $("interrupt").onclick = () => send({ type: "input.interrupt", conv: state.current, data: {} });
 $("rotate-session").onclick = () => {
-	if (!confirm("이 대화의 omo 세션을 새로 시작할까요?\n화면의 기록은 그대로 남고, 최근 대화 일부를 새 세션에 넘겨 줍니다.")) return;
+	if (!confirm("이 대화의 엔진 세션을 새로 시작할까요?\n화면의 기록은 그대로 남고, 최근 대화 일부를 새 세션에 넘겨 줍니다.")) return;
 	send({ type: "conversation.rotate", conv: state.current });
 };
 function toggleDevPanel() {
@@ -2583,6 +2585,12 @@ async function fetchDecisions(cursor) {
 }
 
 /** `refresh`: load the current copy even though one is cached (a mounted card the reset page no longer lists). */
+/** The mounted cards a detail load reports to: every card of the decision id, so a second card never waits on the first. */
+function detailCards(id, card) {
+	const cards = [...els.messages.querySelectorAll(`.approval[data-decision-id="${CSS.escape(id)}"]`)];
+	return card?.isConnected && !cards.includes(card) ? [...cards, card] : cards;
+}
+
 async function loadDecisionDetail(id, card, { refresh = false } = {}) {
 	const generation = decisionGeneration;
 	if ((!refresh && decisionById(inbox.state, id)) || !inbox.online || !beginDetailLoad(inbox.state, id, generation)) return;
@@ -2592,19 +2600,19 @@ async function loadDecisionDetail(id, card, { refresh = false } = {}) {
 		const body = await res.json().catch(() => null);
 		if (!res.ok) {
 			if (!failDetailLoad(inbox.state, id, generation)) return;
-			if (card?.isConnected) setCardState(card, { disabled: true, note: `결정 상태를 불러오지 못했습니다 (${res.status}).`, retry });
+			for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: `결정 상태를 불러오지 못했습니다 (${res.status}).`, retry });
 			return;
 		}
 		const result = finishDetailLoad(inbox.state, id, generation, body);
 		if (!result.accepted) {
-			if (card?.isConnected && result.reason === "mismatch") setCardState(card, { disabled: true, note: "결정 식별자가 일치하지 않습니다.", retry });
+			if (result.reason === "mismatch") for (const shown of detailCards(id, card)) setCardState(shown, { disabled: true, note: "결정 식별자가 일치하지 않습니다.", retry });
 			return;
 		}
 		const decision = decisionById(inbox.state, id);
 		if (decision) syncCard(decision);
 	} catch (err) {
 		if (!failDetailLoad(inbox.state, id, generation)) return;
-		if (card?.isConnected) setCardState(card, {
+		for (const shown of detailCards(id, card)) setCardState(shown, {
 			disabled: true,
 			note: `결정 상태를 불러오지 못했습니다: ${err instanceof Error ? err.message : String(err)}`,
 			retry,
@@ -2938,8 +2946,7 @@ function reviewLatest(decision) {
 
 /** Both surfaces render the same canonical decision; the surface being edited keeps its focus. */
 function syncDecisionSurfaces(decision, except = null) {
-	const card = cardOf(decision);
-	if (card && card !== except) syncCard(decision);
+	syncCard(decision, except);
 	if (inbox.state.items.has(decision.id) && inbox.nodes.get(decision.id) !== except) renderInboxItem(decision);
 }
 
@@ -3175,8 +3182,7 @@ function settleSubmit(decision, result) {
 			break;
 		case "gone": {
 			forgetDecision(inbox.state, id);
-			const card = cardForDecision(id);
-			if (card) {
+			for (const card of els.messages.querySelectorAll(`.approval[data-decision-id="${CSS.escape(id)}"]`)) {
 				card.removeAttribute("aria-busy");
 				setCardState(card, { disabled: true, note: "서버에 더 이상 없는 요청입니다." });
 			}
@@ -3416,14 +3422,23 @@ async function checkUpdateNow() {
 	else showUpdateError(checkFailedLine(res?.status ?? 0));
 }
 
+// The version this page first loaded on: a stored ok result that ended there is stale after a reload (live update.result is not filtered).
+let pageVersion = null;
+
 function loadUpdateStatus() {
 	fetch(UPDATE_STATUS_PATH)
 		.then((res) => (res.ok ? res.json() : null))
-		.then(renderUpdate)
-		.catch((error) => console.warn("update status load:", error));
-	fetch(UPDATE_STATE_PATH)
+		.catch((error) => {
+			console.warn("update status load:", error);
+			return null;
+		})
+		.then((status) => {
+			renderUpdate(status);
+			if (pageVersion === null && typeof status?.current === "string") pageVersion = status.current;
+			return fetch(UPDATE_STATE_PATH);
+		})
 		.then((res) => (res.ok ? res.json() : null))
-		.then((state) => showUpdateProgress(progressLine(state)))
+		.then((state) => showUpdateProgress(progressLine(state, pageVersion)))
 		.catch((error) => console.warn("update state load:", error));
 }
 
@@ -3577,7 +3592,28 @@ const appDownload = createAppDownload({
 apkEls.renew.onclick = () => void appDownload.renew();
 
 // 정리 (improvement 66): nothing is cleaned until the user ticks rows and presses the button.
-const gcEls = { summary: $("gc-summary"), list: $("gc-list"), message: $("gc-message"), clean: $("gc-clean") };
+const gcEls = { summary: $("gc-summary"), list: $("gc-list"), message: $("gc-message"), clean: $("gc-clean"), all: $("gc-all"), allLabel: $("gc-all-label") };
+
+function gcBoxes() {
+	return [...gcEls.list.querySelectorAll("input[type=checkbox]")];
+}
+
+// Improvement 142: the 전체 선택 box and the clean button follow the ticked rows.
+function gcSync() {
+	const ticked = gcTicked().length;
+	const state = selectAllState(ticked, gcBoxes().length);
+	gcEls.allLabel.hidden = state.hidden;
+	gcEls.all.checked = state.checked;
+	gcEls.all.indeterminate = state.indeterminate;
+	gcEls.clean.disabled = ticked === 0;
+}
+
+gcEls.all.onchange = () => {
+	const boxes = gcBoxes();
+	const tick = selectAllTarget(gcTicked().length, boxes.length);
+	for (const box of boxes) box.checked = tick;
+	gcSync();
+};
 
 function gcTicked() {
 	return [...gcEls.list.querySelectorAll("input[type=checkbox]:checked")].map((box) => box.value);
@@ -3592,7 +3628,7 @@ function gcRow(row) {
 	const box = document.createElement("input");
 	box.type = "checkbox";
 	box.value = row.id;
-	box.onchange = () => { gcEls.clean.disabled = gcTicked().length === 0; };
+	box.onchange = gcSync;
 	const name = document.createElement("span");
 	name.className = "gc-name";
 	name.textContent = row.label;
@@ -3619,6 +3655,7 @@ async function loadGc() {
 	gcEls.summary.textContent = view.summary;
 	gcEls.summary.classList.toggle("error", view.error);
 	gcEls.list.replaceChildren(...view.rows.map(gcRow));
+	gcSync();
 }
 
 gcEls.clean.onclick = async () => {

package/web/cardbind.d.ts

@@ -0,0 +1,3 @@
+export function cardsOfDecision<T extends { readonly dataset: { decisionId?: string; actionId?: string } }>(
+	cards: Iterable<T>, decisionId: string, aliasActionId: string,
+): T[];

package/web/cardbind.js

@@ -0,0 +1,15 @@
+// Which chat cards show one decision (bug 154). A question that is rebound (for example after a session change) gets a
+// new card that keeps the same decision id, so one decision can own several cards. Every one of them must follow the
+// canonical decision; updating only the first left the others open or stuck at "확인 중…" after the answer was delivered.
+
+/**
+ * Every mounted card of a decision: the cards that carry its explicit id, else the id-less cards of its original action
+ * alias. A card bound to another decision never matches.
+ */
+export function cardsOfDecision(cards, decisionId, aliasActionId) {
+	const list = [...cards];
+	const explicit = list.filter((card) => card.dataset.decisionId === decisionId);
+	if (explicit.length > 0) return explicit;
+	return list.filter((card) => card.dataset.actionId === aliasActionId &&
+		(card.dataset.decisionId === undefined || card.dataset.decisionId === decisionId));
+}

package/web/devlog.js

@@ -71,9 +71,9 @@ function summary(type, d = {}) {
 		case "notice":
 			return clip(d.message);
 		case "omo.status":
-			return clip(`omo ${d.status}${d.detail ? ` · ${d.detail}` : ""}`);
+			return clip(`엔진 ${d.status}${d.detail ? ` · ${d.detail}` : ""}`);
 		case "state.snapshot":
-			return `대화 ${d.conversations?.length ?? 0} · 승인 대기 ${d.approvals?.length ?? 0} · omo ${d.omo}`;
+			return `대화 ${d.conversations?.length ?? 0} · 승인 대기 ${d.approvals?.length ?? 0} · 엔진 ${d.omo}`;
 		case "history":
 			return `${d.conv} 기록 ${d.events?.length ?? 0}건`;
 		case "conversation.created":

package/web/gc.d.ts

@@ -9,5 +9,7 @@ export const GC_FAILED_LINE: string;
 export function formatBytes(bytes: unknown): string;
 export function formatAge(ms: number): string;
 export function gcView(report: unknown): { summary: string; rows: GcRow[]; error: boolean };
+export function selectAllState(ticked: number, total: number): { hidden: boolean; checked: boolean; indeterminate: boolean };
+export function selectAllTarget(ticked: number, total: number): boolean;
 export function cleanRequest(ids: Iterable<string>): { method: "POST"; headers: { "content-type": "application/json" }; body: string };
 export function cleanResultLine(result: unknown): string;

package/web/gc.js

@@ -5,7 +5,7 @@ export const GC_PATH = "/api/gc";
 export const GC_CLEAN_PATH = "/api/gc/clean";
 export const KIND_LABELS = Object.freeze({
 	"db-backup": "DB 백업",
-	"omo-version": "OMO 버전 폴더",
+	"omo-version": "엔진 버전 폴더",
 	"update-file": "업데이트 남은 파일",
 	"temp-dir": "임시 폴더",
 	"rpc-daemon": "이전 RPC 데몬",
@@ -39,6 +39,17 @@ export function gcView(report) {
 	return { summary, rows, error: false };
 }
 
+// Improvement 142: the 전체 선택 box beside the summary. It is hidden with no rows, checked when every row is ticked and
+// indeterminate when only some are.
+export function selectAllState(ticked, total) {
+	return { hidden: total === 0, checked: total > 0 && ticked === total, indeterminate: ticked > 0 && ticked < total };
+}
+
+// A click on 전체 선택 ticks every row unless every row was already ticked; then it clears them all.
+export function selectAllTarget(ticked, total) {
+	return ticked < total;
+}
+
 export function cleanRequest(ids) {
 	return { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ids: [...ids] }) };
 }

package/web/index.html

@@ -11,7 +11,7 @@
   <aside class="sidebar">
     <header class="sidebar-head">
       <span class="sidebar-title">zigmini</span>
-      <span class="badge" id="omo-status" title="omo app-server 연결 상태">omo</span>
+      <span class="badge" id="omo-status" title="엔진 연결 상태">엔진</span>
     </header>
     <div class="sidebar-section">
       <div class="section-label">
@@ -60,16 +60,16 @@
       <span class="login-notice" id="schema-notice" role="alert" hidden></span>
       <button type="button" class="update-notice" id="update-notice" title="설정의 업데이트 열기" hidden></button>
       <div class="chat-actions">
-        <select class="model-select" id="model-select" title="omo가 쓸 모델" disabled><option>모델 불러오는 중</option></select>
+        <select class="model-select" id="model-select" title="엔진이 쓸 모델" disabled><option>모델 불러오는 중</option></select>
         <span class="model-pending" id="model-pending" hidden></span>
-        <button class="text-btn" id="rotate-session" title="이 대화의 omo 세션을 새로 시작합니다. 화면의 기록은 그대로 남습니다.">새 세션</button>
-        <button class="text-btn" id="toggle-voice" title="이 게이트웨이의 음성 서버(음성 인식·음성 합성)를 켜고 끄기. 끄면 마이크·호출어·박수 감지·음성 답변을 쓸 수 없습니다." aria-pressed="true">음성 켜짐</button>
-        <button class="text-btn" id="voice-install" title="음성 서버(uv, Python 환경, 음성 모델)를 이 맥의 zigmini 폴더에 내려받아 설치합니다" hidden>음성 설치</button>
-        <button class="text-btn" id="toggle-clap" title="박수를 두 번 치면 호출어 대기를 켜고 끄기" aria-pressed="false">박수 감지 꺼짐</button>
-        <button class="text-btn" id="toggle-wake" title="&quot;헤이 지그&quot;라고 부르면 받아 적어 입력창에 채우기" aria-pressed="false">호출어 꺼짐</button>
-        <button class="text-btn" id="toggle-tts" title="답변을 음성으로 읽기" aria-pressed="false">음성 답변 꺼짐</button>
-        <button type="button" class="text-btn inbox-toggle" id="toggle-inbox" title="답을 기다리는 질문과 승인 요청 (Ctrl+C)" aria-haspopup="dialog" aria-expanded="false" aria-controls="inbox" aria-keyshortcuts="Control+C">확인함<span class="inbox-badge" id="inbox-badge" hidden>0</span></button>
-        <button type="button" class="text-btn" id="toggle-dev" title="이벤트 패널 (Ctrl+E)" aria-expanded="false" aria-controls="dev" aria-keyshortcuts="Control+E">이벤트</button>
+        <button class="text-btn" id="rotate-session" data-tip-keep title="이 대화의 엔진 세션을 새로 시작합니다. 화면의 기록은 그대로 남습니다.">새 세션</button>
+        <button class="text-btn" id="toggle-voice" data-tip-keep title="이 게이트웨이의 음성 서버(음성 인식·음성 합성)를 켜고 끄기. 끄면 마이크·호출어·박수 감지·음성 답변을 쓸 수 없습니다." aria-pressed="true">음성 켜짐</button>
+        <button class="text-btn" id="voice-install" data-tip-keep title="음성 서버(uv, Python 환경, 음성 모델)를 이 맥의 zigmini 폴더에 내려받아 설치합니다" hidden>음성 설치</button>
+        <button class="text-btn" id="toggle-clap" data-tip-keep title="박수를 두 번 치면 호출어 대기를 켜고 끄기" aria-pressed="false">박수 감지 꺼짐</button>
+        <button class="text-btn" id="toggle-wake" data-tip-keep title="&quot;헤이 지그&quot;라고 부르면 받아 적어 입력창에 채우기" aria-pressed="false">호출어 꺼짐</button>
+        <button class="text-btn" id="toggle-tts" data-tip-keep title="답변을 음성으로 읽기" aria-pressed="false">음성 답변 꺼짐</button>
+        <button type="button" class="text-btn inbox-toggle" id="toggle-inbox" data-tip-keep title="답을 기다리는 질문과 승인 요청 (Ctrl+C)" aria-haspopup="dialog" aria-expanded="false" aria-controls="inbox" aria-keyshortcuts="Control+C">확인함<span class="inbox-badge" id="inbox-badge" hidden>0</span></button>
+        <button type="button" class="text-btn" id="toggle-dev" data-tip-keep title="이벤트 패널 (Ctrl+E)" aria-expanded="false" aria-controls="dev" aria-keyshortcuts="Control+E">이벤트</button>
         <button type="button" class="text-btn" id="toggle-settings" title="설정: 폰 기기 등록 QR과 등록된 기기" aria-haspopup="dialog" aria-expanded="false" aria-controls="settings">설정</button>
       </div>
     </header>
@@ -100,7 +100,7 @@
       <button type="button" class="mic" id="toggle-memo" title="쪽지 열기/닫기" aria-pressed="false">쪽지</button>
       <button type="button" class="mic" id="attach" title="이미지 첨부 (최대 4장 · 붙여넣기나 끌어놓기도 됩니다)">이미지</button>
       <input type="file" id="attach-input" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
-      <button type="button" class="mic" id="mic" title="누르고 말하기 (다시 누르면 전송)">마이크</button>
+      <button type="button" class="mic" id="mic" data-tip-keep title="누르고 말하기 (다시 누르면 전송)">마이크</button>
       <textarea id="input" rows="1" placeholder="메시지 보내기" title="Enter 전송, Shift+Enter 줄바꿈"></textarea>
       <button type="submit" class="send" id="send">전송</button>
       <button type="button" class="stop" id="interrupt" title="진행 중인 작업 중단" hidden>중단</button>
@@ -178,7 +178,7 @@
         <div class="enroll-actions"><button type="button" class="text-btn" id="apk-renew" hidden>새로 만들기</button></div>
       </section>
       <section class="settings-section gc" id="gc" aria-labelledby="gc-title">
-        <div class="section-label"><span id="gc-title">정리</span><span class="gc-summary" id="gc-summary" role="status" aria-live="polite"></span></div>
+        <div class="section-label"><span id="gc-title">정리</span><span class="gc-head"><span class="gc-summary" id="gc-summary" role="status" aria-live="polite"></span><label class="gc-all" id="gc-all-label" hidden><input type="checkbox" id="gc-all">전체 선택</label></span></div>
         <ul class="gc-list" id="gc-list" aria-label="정리 후보"></ul>
         <p class="gc-message" id="gc-message" role="status" aria-live="polite"></p>
         <div class="gc-actions"><button type="button" class="text-btn" id="gc-clean" disabled>선택한 항목 정리</button></div>

package/web/style.css

@@ -412,6 +412,10 @@ button { font: inherit; color: inherit; cursor: pointer; }
 /* 정리 (improvement 66): inside .settings-body after 앱 내려받기; contain keeps its nowrap rows from widening the card on phones. */
 .settings-section.gc { contain: inline-size; }
 .gc-summary { text-transform: none; color: var(--text); }
+.gc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.gc-all { display: inline-flex; align-items: center; gap: 6px; text-transform: none; color: var(--text); font-weight: 400; cursor: pointer; white-space: nowrap; }
+.gc-all[hidden] { display: none; }
+.gc-all input { width: 16px; height: 16px; margin: 0; }
 .gc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
 .gc-list:empty { display: none; }
 .gc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border: 1px solid #4e5058; border-radius: 6px; font-size: 13px; }
@@ -561,3 +565,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 	.app.status-open .ws-title { font-size: 14px; color: var(--text); }
 	.app.status-open .ws-caption { font-size: 13px; padding: 4px 10px; }
 }
+
+/* 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; }

package/web/tooltip.d.ts

@@ -0,0 +1,16 @@
+export type Box = { left: number; top: number; right: number; bottom: number };
+export type TipElement = {
+	getAttribute(name: string): string | null;
+	setAttribute(name: string, value: string): void;
+	removeAttribute(name: string): void;
+	hasAttribute(name: string): boolean;
+};
+export const TIP_GAP: number;
+export const TIP_MARGIN: number;
+export const TIP_ID: string;
+export function placeTip(anchor: Box, tip: { width: number; height: number }, view: { width: number; height: number }): { left: number; top: number; side: "above" | "below" };
+export function adoptTitle(el: Pick<TipElement, "getAttribute" | "setAttribute" | "removeAttribute" | "hasAttribute">): void;
+export function tipText(el: TipElement): string;
+export function addId(list: string | null, id: string): string;
+export function removeId(list: string | null, id: string): string;
+export function installTooltips(doc: Document, win: Window & typeof globalThis): void;

package/web/tooltip.js

@@ -0,0 +1,114 @@
+// 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.
+
+export const TIP_GAP = 6;
+export const TIP_MARGIN = 8;
+export const TIP_ID = "zgw-tip";
+const HOVER_DELAY_MS = 250;
+const SELECTOR = "[data-tip]";
+
+export function placeTip(anchor, tip, view) {
+	const left = Math.max(TIP_MARGIN, Math.min((anchor.left + anchor.right) / 2 - tip.width / 2, view.width - tip.width - TIP_MARGIN));
+	const below = anchor.bottom + TIP_GAP;
+	const above = anchor.top - TIP_GAP - tip.height;
+	const fitsBelow = below + tip.height <= view.height - TIP_MARGIN;
+	if (!fitsBelow && above >= TIP_MARGIN) return { left, top: above, side: "above" };
+	const top = Math.max(TIP_MARGIN, Math.min(below, view.height - tip.height - TIP_MARGIN));
+	return { left, top, side: "below" };
+}
+
+export function adoptTitle(el) {
+	if (!el.hasAttribute("title")) return;
+	const text = el.getAttribute("title");
+	el.removeAttribute("title");
+	const attr = el.hasAttribute("data-tip-keep") ? "data-tip" : "aria-description";
+	if (text) el.setAttribute(attr, text);
+	else el.removeAttribute(attr);
+}
+
+export function tipText(el) {
+	return el.hasAttribute("data-tip-keep") ? el.getAttribute("data-tip") || "" : "";
+}
+
+export function addId(list, id) {
+	const ids = (list ?? "").split(/\s+/).filter(Boolean);
+	return ids.includes(id) ? ids.join(" ") : [...ids, id].join(" ");
+}
+
+export function removeId(list, id) {
+	return (list ?? "").split(/\s+/).filter((part) => part && part !== id).join(" ");
+}
+
+export function installTooltips(doc, win) {
+	const tip = doc.createElement("div");
+	tip.id = TIP_ID;
+	tip.className = "zgw-tip";
+	tip.setAttribute("role", "tooltip");
+	tip.hidden = true;
+	doc.body.append(tip);
+	let owner = null;
+	let timer = 0;
+
+	const adoptAll = (root) => {
+		if (root.nodeType !== 1) return;
+		adoptTitle(root);
+		for (const el of root.querySelectorAll("[title]")) adoptTitle(el);
+	};
+	adoptAll(doc.body);
+	new win.MutationObserver((records) => {
+		for (const record of records) {
+			if (record.type === "attributes") adoptTitle(record.target);
+			else for (const node of record.addedNodes) adoptAll(node);
+		}
+	}).observe(doc.body, { subtree: true, childList: true, attributes: true, attributeFilter: ["title"] });
+
+	const hide = () => {
+		win.clearTimeout(timer);
+		if (owner) {
+			const rest = removeId(owner.getAttribute("aria-describedby"), TIP_ID);
+			if (rest) owner.setAttribute("aria-describedby", rest);
+			else owner.removeAttribute("aria-describedby");
+		}
+		owner = null;
+		tip.hidden = true;
+	};
+	const show = (el) => {
+		const text = tipText(el);
+		if (!text || !el.isConnected) return hide();
+		if (owner !== el) hide();
+		owner = el;
+		tip.textContent = text;
+		tip.style.left = "0px";
+		tip.style.top = "0px";
+		tip.hidden = false;
+		el.setAttribute("aria-describedby", addId(el.getAttribute("aria-describedby"), TIP_ID));
+		const place = placeTip(el.getBoundingClientRect(), tip.getBoundingClientRect(), { width: win.innerWidth, height: win.innerHeight });
+		tip.style.left = `${Math.round(place.left)}px`;
+		tip.style.top = `${Math.round(place.top)}px`;
+		tip.dataset.side = place.side;
+	};
+	const target = (event) => event.target instanceof win.Element ? event.target.closest(SELECTOR) : null;
+
+	doc.addEventListener("pointerover", (event) => {
+		if (event.pointerType === "touch") return;
+		const el = target(event);
+		if (el === owner) return;
+		hide();
+		if (el) timer = win.setTimeout(() => show(el), HOVER_DELAY_MS);
+	});
+	doc.addEventListener("pointerout", (event) => {
+		const el = target(event);
+		if (el && !(event.relatedTarget instanceof win.Node && el.contains(event.relatedTarget))) hide();
+	});
+	doc.addEventListener("focusin", (event) => {
+		const el = target(event);
+		if (el && event.target.matches(":focus-visible")) show(el);
+	});
+	doc.addEventListener("focusout", hide);
+	doc.addEventListener("pointerdown", hide, true);
+	doc.addEventListener("keydown", (event) => { if (event.key === "Escape" && owner) hide(); });
+	win.addEventListener("scroll", hide, true);
+	win.addEventListener("resize", hide);
+}

package/web/update.d.ts

@@ -42,4 +42,4 @@ export function questionGate(counters: { readonly pending: number; readonly need
 export function canUpdate(status: unknown): boolean;
 export function updateStep(status: number, body: unknown): UpdateStep;
 export function resultLine(result: unknown): string | null;
-export function progressLine(data: unknown): string | null;
+export function progressLine(data: unknown, loadedVersion?: string | null): string | null;

package/web/update.js

@@ -89,10 +89,17 @@ export function resultLine(result) {
 	return `${typeof result.message === "string" ? result.message : "업데이트에 실패했습니다."}${typeof result.logPath === "string" && result.logPath !== "" ? ` (로그: ${result.logPath})` : ""}`;
 }
 
-/** The line for an `update.progress` payload or a GET /api/update/state body; null shows nothing. */
-export function progressLine(data) {
+/**
+ * The line for an `update.progress` payload or a GET /api/update/state body; null shows nothing. The gateway keeps the last
+ * result in state.json for good, so `loadedVersion` (the version the page first loaded on) hides an ok result that ended
+ * at that version: the page was reloaded after the update and the "reload the page" line is stale.
+ */
+export function progressLine(data, loadedVersion = null) {
 	if (data === null || typeof data !== "object") return null;
-	if (data.result !== undefined && data.result !== null) return resultLine(data.result);
+	if (data.result !== undefined && data.result !== null) {
+		if (data.result.ok === true && loadedVersion !== null && data.result.to === loadedVersion) return null;
+		return resultLine(data.result);
+	}
 	if (typeof data.label !== "string" || data.phase === "done") return null;
 	return `업데이트 중 (${data.from} → ${data.to}): ${data.label}`;
 }