zigmini 0.8.0-beta.3 → 0.8.0-beta.5

package/src/version.ts

@@ -3,7 +3,7 @@ import { CORE_NAME, ENGINE_PACKAGE, PLUGIN, OMO_REGISTRY_URL, readEnginePin, for
 export { OMO_REGISTRY_URL } from "./engine/index.ts";
 
 /** `/version`: the gateway answers it with a notice and never forwards it to omo. */
-export const VERSION_COMMAND = { name: "version", description: "게이트웨이·OMO 버전 보기 (게이트웨이가 바로 답함)", source: "extension" };
+export const VERSION_COMMAND = { name: "version", description: "게이트웨이·엔진 버전 보기 (게이트웨이가 바로 답함)", source: "extension" };
 
 export function isVersionCommand(text: string): boolean {
 	return /^\/version$/i.test(text.trim());
@@ -104,22 +104,22 @@ export function formatVersionReport(facts: VersionFacts): string {
 	const build = facts.gateway.build ? `빌드 커밋 ${facts.gateway.build}` : "빌드 커밋 알 수 없음";
 	lines.push(`· 게이트웨이: ${facts.gateway.version ?? "알 수 없음"} (${build})`);
 	const pin = facts.pin?.omo
-		? ` · 저장소 고정 omo ${formatEnginePin(facts.pin)}`
+		? ` · 저장소 고정 엔진 ${formatEnginePin(facts.pin)}`
 		: " · 저장소 고정 버전 읽기 실패";
 	let running: string | null = null;
-	if (!facts.omo) lines.push(`· 게이트웨이 OMO: 확인 실패 (OMO 연결 상태 ${facts.omoStatus})${pin}`);
+	if (!facts.omo) lines.push(`· 엔진: 확인 실패 (엔진 연결 상태 ${facts.omoStatus})${pin}`);
 	else {
 		running = facts.omo.install;
 		const engine = facts.omo.engine ? ` (${CORE_NAME} ${facts.omo.engine})` : "";
-		lines.push(`· 게이트웨이 OMO: ${facts.omo.install ?? "설치 경로 확인 실패"}${engine}${pin}`);
+		lines.push(`· 엔진: ${facts.omo.install ?? "설치 경로 확인 실패"}${engine}${pin}`);
 	}
 	if ("version" in facts.latest) {
-		lines.push(`· 최신 OMO: ${facts.latest.version} (npm ${ENGINE_PACKAGE})`);
+		lines.push(`· 최신 엔진: ${facts.latest.version} (npm ${ENGINE_PACKAGE})`);
 		const current = running ?? facts.pin?.omo ?? null;
 		if (current && isNewer(facts.latest.version, current)) {
 			lines.push(`업데이트 가능: ${current} → ${facts.latest.version} (자동으로 업데이트하지 않습니다)`);
 		}
-	} else lines.push(`· 최신 OMO: 확인 실패 (${facts.latest.error})`);
+	} else lines.push(`· 최신 엔진: 확인 실패 (${facts.latest.error})`);
 	return lines.join("\n");
 }
 

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,
@@ -41,6 +43,9 @@ 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 { cleanRequest, cleanResultLine, GC_CLEAN_PATH, GC_PATH, gcView } from "./gc.js";
+import { manualFailureText, manualLinkLang, manualUrl, otherLang } from "./manual.js";
+
+installTooltips(document, window);
 
 const $ = (id) => document.getElementById(id);
 const state = {
@@ -675,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. */
@@ -714,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. */
@@ -1555,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);
 }
 
@@ -1580,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;
@@ -2026,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";
@@ -2109,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() {
@@ -2582,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;
@@ -2591,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,
@@ -2937,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);
 }
 
@@ -3174,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: "서버에 더 이상 없는 요청입니다." });
 			}
@@ -3595,10 +3602,12 @@ function gcRow(row) {
 	const name = document.createElement("span");
 	name.className = "gc-name";
 	name.textContent = row.label;
-	name.title = row.title;
+	name.dataset.tip = row.title;
+	name.dataset.tipOverflow = "";
 	const sub = document.createElement("span");
 	sub.className = "gc-sub";
 	sub.textContent = row.sub;
+	sub.dataset.tipOverflow = "";
 	main.append(name, sub);
 	label.append(box, main);
 	li.append(label);
@@ -3689,4 +3698,93 @@ 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.
+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 };
+
+function showManualStatus(text, error = false) {
+	manualEls.status.textContent = text;
+	manualEls.status.classList.toggle("error", error);
+	manualEls.status.hidden = text === "";
+}
+
+async function loadManual(lang) {
+	const load = ++manualView.load;
+	manualView.lang = lang;
+	manualEls.lang.textContent = otherLang(lang) === "en" ? "English" : "한국어";
+	manualEls.el.lang = lang;
+	showManualStatus("매뉴얼을 불러오는 중입니다.");
+	let status = 0;
+	let text = "";
+	try {
+		const res = await fetch(manualUrl(lang));
+		status = res.status;
+		if (res.ok) text = await res.text();
+	} catch (error) {
+		console.warn("manual:", error);
+	}
+	if (load !== manualView.load) return;
+	if (text === "") {
+		manualEls.body.innerHTML = "";
+		showManualStatus(manualFailureText(status), true);
+		return;
+	}
+	showManualStatus("");
+	renderMarkdown(manualEls.body, text);
+	manualEls.body.scrollTop = 0;
+}
+
+function openManual() {
+	if (manualView.open) return;
+	manualView.open = true;
+	manualEls.el.hidden = false;
+	manualEls.open.setAttribute("aria-expanded", "true");
+	manualEls.title.focus();
+	void loadManual(manualView.lang);
+}
+
+function closeManual() {
+	if (!manualView.open) return;
+	manualView.open = false;
+	manualView.load++;
+	manualEls.el.hidden = true;
+	manualEls.open.setAttribute("aria-expanded", "false");
+	manualEls.open.focus();
+}
+
+manualEls.open.onclick = openManual;
+manualEls.close.onclick = closeManual;
+manualEls.lang.onclick = () => void loadManual(otherLang(manualView.lang));
+manualEls.body.addEventListener("click", (ev) => {
+	const link = ev.target instanceof Element ? ev.target.closest("a") : null;
+	const lang = manualLinkLang(link?.getAttribute("href"));
+	if (lang === null) return;
+	ev.preventDefault();
+	void loadManual(lang);
+});
+manualEls.el.addEventListener("click", (ev) => {
+	if (ev.target === manualEls.el) closeManual();
+});
+manualEls.el.addEventListener("keydown", (ev) => {
+	if (ev.isComposing) return;
+	if (ev.key === "Escape") {
+		ev.preventDefault();
+		closeManual();
+		return;
+	}
+	if (ev.key !== "Tab") return;
+	const focusable = [...manualEls.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 === manualEls.title)) {
+		ev.preventDefault();
+		last.focus();
+	} else if (!ev.shiftKey && document.activeElement === last) {
+		ev.preventDefault();
+		first.focus();
+	}
+});
+
 connect();

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.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 데몬",

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,9 +60,9 @@
       <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="rotate-session" title="이 대화의 엔진 세션을 새로 시작합니다. 화면의 기록은 그대로 남습니다.">새 세션</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>
@@ -122,6 +122,7 @@
     <div class="settings-card">
       <header class="settings-head">
         <h2 class="settings-title" id="settings-title" tabindex="-1">설정</h2>
+        <button type="button" class="text-btn" id="manual-open" title="사용자 매뉴얼: 화면, 단축키, 기능" aria-haspopup="dialog" aria-expanded="false" aria-controls="manual">매뉴얼</button>
         <button type="button" class="icon-btn settings-close" id="settings-close" aria-label="설정 닫기" title="닫기 (Esc)">×</button>
       </header>
       <div class="settings-body">
@@ -185,6 +186,17 @@
       </div>
     </div>
   </aside>
+  <aside class="settings manual" id="manual" role="dialog" aria-labelledby="manual-title" hidden>
+    <div class="settings-card manual-card">
+      <header class="settings-head">
+        <h2 class="settings-title" id="manual-title" tabindex="-1">매뉴얼</h2>
+        <button type="button" class="text-btn" id="manual-lang">English</button>
+        <button type="button" class="icon-btn settings-close" id="manual-close" aria-label="매뉴얼 닫기" title="닫기 (Esc)">×</button>
+      </header>
+      <p class="manual-status" id="manual-status" role="status" aria-live="polite" hidden></p>
+      <div class="manual-body msg-text" id="manual-body"></div>
+    </div>
+  </aside>
   <aside class="dev" id="dev">
     <header class="dev-head">
       <span>이벤트</span>

package/web/manual.d.ts

@@ -0,0 +1,7 @@
+export type ManualLang = "ko" | "en";
+export declare const MANUAL_PATH: string;
+export declare const MANUAL_MISSING_TEXT: string;
+export declare function manualUrl(lang: string): string;
+export declare function otherLang(lang: string): ManualLang;
+export declare function manualLinkLang(href: string | null | undefined): ManualLang | null;
+export declare function manualFailureText(status: number): string;

package/web/manual.js

@@ -0,0 +1,29 @@
+// The user manual view of 설정 "매뉴얼": decisions only, with no DOM, so test/unit/manual.test.ts and the mutation run
+// drive them directly; app.js fetches GET /api/manual and renders the Markdown with the chat renderer.
+
+export const MANUAL_PATH = "/api/manual";
+export const MANUAL_MISSING_TEXT = "이 게이트웨이 버전에는 매뉴얼이 없습니다. 게이트웨이를 업데이트하면 볼 수 있습니다.";
+
+export function manualUrl(lang) {
+	return `${MANUAL_PATH}?lang=${lang === "en" ? "en" : "ko"}`;
+}
+
+export function otherLang(lang) {
+	return lang === "en" ? "ko" : "en";
+}
+
+/** The language a rendered link switches to: the manuals' first line links manual.md (English) and manual.ko.md (Korean). */
+export function manualLinkLang(href) {
+	if (typeof href !== "string") return null;
+	const file = href.split(/[?#]/)[0].split("/").pop();
+	if (file === "manual.md") return "en";
+	if (file === "manual.ko.md") return "ko";
+	return null;
+}
+
+/** The line for a failed load: [status] is the HTTP status, or 0 when the request itself failed. */
+export function manualFailureText(status) {
+	if (status === 404) return MANUAL_MISSING_TEXT;
+	if (status === 0) return "매뉴얼을 불러오지 못했습니다. 게이트웨이 연결을 확인하세요.";
+	return `매뉴얼을 불러오지 못했습니다 (HTTP ${status}).`;
+}

package/web/style.css

@@ -423,6 +423,11 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .gc-message:empty { display: none; }
 .gc-message.error { color: #f38b8d; }
 .gc-actions { display: flex; justify-content: flex-end; }
+.settings.manual { z-index: 31; }
+.manual-card { width: min(100%, 760px); height: 100%; }
+.manual-status { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--muted); }
+.manual-status.error { color: #f38b8d; }
+.manual-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
 @media (max-width: 640px) {
 	.settings { padding: 0; }
 	.settings-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
@@ -556,3 +561,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,22 @@
+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;
+	textContent: string | null;
+	scrollWidth: number;
+	clientWidth: number;
+	scrollHeight: number;
+	clientHeight: number;
+};
+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 isTruncated(el: { scrollWidth: number; clientWidth: number; scrollHeight: number; clientHeight: number }): boolean;
+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,117 @@
+// Bug 90: the page draws its own tooltip. Some browsers (the user's, likely Aside) never show the native `title`
+// tooltip, so every `title` in the page moves to `data-tip` and one shared element shows it on hover and keyboard focus,
+// linked with aria-describedby. Improvement 143: `data-tip-overflow` shows the tip only while the text is cut off.
+
+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], [data-tip-overflow]";
+
+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 isTruncated(el) {
+	return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+}
+
+export function adoptTitle(el) {
+	if (!el.hasAttribute("title")) return;
+	const text = el.getAttribute("title");
+	el.removeAttribute("title");
+	if (text) el.setAttribute("data-tip", text);
+	else el.removeAttribute("data-tip");
+}
+
+export function tipText(el) {
+	if (el.hasAttribute("data-tip-overflow") && !isTruncated(el)) return "";
+	return el.getAttribute("data-tip") || (el.hasAttribute("data-tip-overflow") ? el.textContent : "") || "";
+}
+
+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);
+}