zigmini 0.8.0-beta.7 → 0.9.0-beta.2

package/web/app.js

@@ -1,4 +1,5 @@
 import { ClapDetector } from "./clap.js";
+import { renderDiagramMarkdown } from "./diagram.js";
 import { setupMemo } from "./memo.js";
 import { setupAutoCopy } from "./autocopy.js";
 import { setupWorkIdCopy } from "./workid.js";
@@ -46,6 +47,7 @@ import { createAppDownload } from "./app-download.js";
 import { setupNotificationSettings } from "./notifications.js";
 import { cleanRequest, cleanResultLine, GC_CLEAN_PATH, GC_PATH, gcView, selectAllState, selectAllTarget } from "./gc.js";
 import { manualFailureText, manualLinkLang, manualUrl, otherLang } from "./manual.js";
+import { canRestoreHeld, completeDetail, createAllowedValues, createSecurityInbox } from "./security-inbox.js";
 
 installTooltips(document, window);
 
@@ -536,7 +538,7 @@ function systemLine(text, error = false) {
 
 function renderMarkdown(el, text) {
 	el.dataset.raw = text;
-	el.innerHTML = DOMPurify.sanitize(marked.parse(text, { gfm: true, breaks: true }));
+	renderDiagramMarkdown(el, text, marked, DOMPurify);
 	for (const a of el.querySelectorAll("a")) {
 		a.target = "_blank";
 		a.rel = "noopener noreferrer";
@@ -1112,6 +1114,7 @@ function clearMessages(conv) {
 	progressEls.clear();
 	resolvedSeen.clear();
 	hist = { conv, oldest: null, newest: 0, hasMore: false, loading: false, seen: new Set() };
+	renderSecuritySurfaces();
 }
 
 /** `resume`: after a reconnect, keep what is on screen and fetch only the events missed meanwhile. */
@@ -1249,7 +1252,7 @@ function recountPending(approvals) {
 }
 
 function onServerEvent(e, generation, statusGeneration) {
-	devLog("in", e);
+	if (e.type !== "security-check.held") devLog("in", e);
 	if (e.seq && e.conv === state.current && hist.conv === e.conv && hist.seen.has(e.seq)) return;
 	switch (e.type) {
 		case "state.snapshot":
@@ -1335,8 +1338,14 @@ function onServerEvent(e, generation, statusGeneration) {
 		case "security-check.held":
 			showHeldCard(e.data);
 			return;
+		case "security-check.state":
+			securityInbox.merge(e.data);
+			return;
+		case "security-check.allowed-values.updated":
+			allowedValues.updated(e.data.revision);
+			return;
 		case "security-check.resolved":
-			markHeld(e.data.id, e.data.outcome);
+			void securityInbox.detail(e.data.id);
 			return;
 		case "voice.updated":
 			voice.reads += 1;
@@ -1663,6 +1672,8 @@ function connect() {
 		$("head-avatar").classList.add("live");
 		renderActivity();
 		inbox.online = true;
+		void securityInbox.connect();
+		void allowedValues.connect();
 		renderInboxOnline();
 		send({ type: "hello", data: { client: "web-dev", version: "0.1.0" } });
 		sendWebPresence();
@@ -1670,7 +1681,6 @@ function connect() {
 		void readVoiceSetting();
 		void readSecuritySetting();
 		void notificationSettings.connect();
-		void readHeld();
 		void readVoiceInstall();
 		// Also after an update restarted the gateway: the new version and the update result show without a reload.
 		loadUpdateStatus();
@@ -1689,6 +1699,9 @@ function connect() {
 		state.sessionTransitions.clear();
 		renderSessionTransition();
 		inbox.online = false;
+		securityDetailsRequested.clear();
+		securityInbox.disconnect();
+		allowedValues.disconnect();
 		notificationSettings.disconnect();
 		historyRequests.length = 0;
 		renderInboxOnline();
@@ -2509,7 +2522,7 @@ renderVoiceToggle();
 // ---- Improvement 165: the security check of every user message (settings toggle, blocked draft back in the composer) ----
 const SECURITY_CHECK_PATH = "/api/settings/security-check";
 const notificationSettings = setupNotificationSettings({ choice: $("notification-mode"), status: $("notification-status") });
-const security = { enabled: true, busy: false };
+const security = { enabled: true, busy: false, read: 0 };
 const securityButton = $("toggle-security");
 
 function renderSecurityToggle() {
@@ -2524,9 +2537,12 @@ function applySecurityBody(body) {
 }
 
 async function readSecuritySetting() {
+	const request = ++security.read;
+	const socket = state.ws;
 	try {
 		const res = await fetch(SECURITY_CHECK_PATH, { cache: "no-store" });
-		if (res.ok) applySecurityBody(await res.json());
+		const body = await res.json();
+		if (res.ok && request === security.read && socket === state.ws && inbox.online) applySecurityBody(body);
 	} catch {
 		// Offline: the reconnect reads it again.
 	}
@@ -2549,88 +2565,188 @@ async function setSecurityEnabled(enabled) {
 
 /** A held text comes back into an empty composer of its conversation, so the user can fix it and send again. */
 function restoreDraft(conv, text) {
-	if (typeof text !== "string" || state.current !== conv || els.input.value !== "") return;
+	if (typeof text !== "string" || state.current !== conv || els.input.value !== "" || attach.items.length || refs.state.items.length) return;
 	els.input.value = text;
 	els.input.focus();
 }
 
-// The card is built here from the gateway's held entry and never passes through the engine; values are shown as text.
+// Chat and inbox use the same opaque identity and dedicated sensitive detail.
 const heldCards = new Map();
+const securityDetailsRequested = new Set();
+const securityInbox = createSecurityInbox(fetch, () => renderSecuritySurfaces());
+const allowedValues = createAllowedValues(fetch, onAllowedValuesChanged);
+let allowedRemoval = undefined;
+
+function onAllowedValuesChanged() {
+	// A successful read of the new endpoint establishes support; full canonical detail still gates each approval.
+	securityInbox.supported(allowedValues.state.online && allowedValues.state.ready);
+	renderAllowedValues();
+}
 
 function showHeldCard(held) {
-	if (!held || typeof held.id !== "string" || heldCards.has(held.id)) return;
-	const card = document.createElement("div");
-	card.className = "msg system security-card";
-	card.dataset.heldId = held.id;
-	card.setAttribute("role", "group");
-	const title = make("div", "security-title", held.source === "answer" ? "보안검사 결과 (확인함 답)" : "보안검사 결과");
-	const list = document.createElement("ul");
-	list.className = "security-list";
-	for (const o of held.occurrences ?? []) {
-		const item = document.createElement("li");
-		item.append(make("span", "security-kind", o.label), " ", make("code", "security-value", o.value), " ", make("span", "security-place", `${o.line}줄 ${o.column}칸`));
+	if (!securityInbox.merge(held)) return;
+	if (!decisionById(inbox.state, held.id)) void syncInbox({ reset: true });
+}
+
+function securityContents(id, surface) {
+	const entry = securityInbox.entries.get(id);
+	const view = securityInbox.view(id);
+	const held = entry.held;
+	const nodes = [make("div", "security-title", held.source === "answer" ? "답변 보안 확인" : "메시지 보안 확인")];
+	const list = make("ul", "security-list");
+	for (const occurrence of held.occurrences ?? []) {
+		const item = make("li");
+		item.append(make("span", "security-kind", occurrence.label), " ", make("code", "security-value", occurrence.canonicalValue ?? ""));
 		list.append(item);
 	}
-	const question = make("p", "security-question", "이 값들을 노출해도 되겠습니까? 보내기를 누르면 원래 메시지를 그대로 엔진에 보냅니다.");
-	const actions = make("div", "security-actions");
-	const sendButton = make("button", "btn", "보내기");
-	const dropButton = make("button", "btn neutral", "보내지 않기");
-	sendButton.type = dropButton.type = "button";
-	sendButton.onclick = () => void decideHeld(held, true);
-	dropButton.onclick = () => void decideHeld(held, false);
-	actions.append(sendButton, dropButton);
-	const status = make("p", "security-status");
+	nodes.push(list);
+	if (held.status === "pending") nodes.push(make("p", "security-question",
+		"승인하면 원본을 전송하고 위의 정확한 값 전체를 이 설치에 기억합니다. 같은 값은 다음 검사부터 허용합니다. 취소는 이번 전송만 중단하고 기존 작업은 멈추지 않습니다. " +
+		(held.source === "answer" ? "이번 답은 제출하지 않으며 원래 질문과 답변 작성 내용은 그대로 둡니다."
+			: "메시지는 같은 대화의 빈 입력창에만 복구하며 새 초안·첨부·참조는 바꾸지 않습니다.")));
+	const labels = { pending: "선택 대기", processing: "처리 중", sent: "전송 확인", cancelled: "이번 전송 취소", failed: "전송 실패", unconfirmed: "전송 결과 미확인 · 자동 재전송하지 않습니다" };
+	const remembered = view.remembered === null ? "값 기억 결과 미확인" : view.remembered ? "정확한 값 기억됨" : "값 기억 안 됨";
+	const reasons = { allowlist_persist_failed: "허용 값을 저장하지 못했습니다", state_persist_failed: "처리 기록을 확인하지 못했습니다",
+		payload_lost: "보류 원문이 없어 보내지 못했습니다", dispatch_failed: "전송을 시작하지 못했습니다",
+		dispatch_unknown: "전달 여부를 확인하지 못했습니다", original_decision_conflict: "원래 질문이 변경되어 이번 답을 보내지 않았습니다" };
+	const reason = held.errorCode ? reasons[held.errorCode] ?? "상태를 다시 확인하세요" : "";
+	const status = make("p", `security-status${view.status === "sent" ? " confirmed" : ""}`, `${labels[view.status]} · ${remembered}${reason ? ` · ${reason}` : ""}`);
 	status.setAttribute("role", "status");
-	card.append(title, list, question, actions, status);
-	heldCards.set(held.id, { card, held });
-	if (held.conv === state.current || held.source === "answer") {
-		els.messages.append(card);
-		scrollToBottom(true);
+	nodes.push(status);
+	const actions = make("div", "security-actions inbox-actions");
+	const button = (label, cls, enabled, action) => {
+		const b = make("button", `text-btn ${cls}`, label);
+		b.type = "button"; b.disabled = !enabled; b.onclick = action; actions.append(b);
+	};
+	if (held.status === "pending" || view.status === "processing") {
+		button("원본 전송하고 값 기억", "security-approve", view.approve, () => void securityInbox.decide(id, true));
+		button("이번 전송 취소", "security-cancel", view.cancel, () => void securityInbox.decide(id, false));
 	}
+	if (view.check || (held.status === "pending" && !completeDetail(held))) {
+		button("상태 확인", "security-refresh", inbox.online && !entry.busy, () => void securityInbox.detail(id));
+	}
+	if (held.status === "pending" && !view.approve && !entry.busy && !entry.uncertain) {
+		nodes.push(make("p", "inbox-note", "게이트웨이의 기억 지원과 전체 값을 확인해야 승인할 수 있습니다."));
+	}
+	if (surface === "inbox" && (view.hide || view.cancel)) {
+		button("삭제", "inbox-dismiss-open", true, () => {
+			if (view.hide) { securityInbox.hide(id); renderInboxList(); return; }
+			inbox.dismissing.add(id);
+			renderInboxItem(decisionById(inbox.state, id)).querySelector(".inbox-dismiss-keep")?.focus();
+		});
+		if (inbox.dismissing.has(id)) {
+			const box = make("div", "inbox-dismiss mode-cancel");
+			box.append(make("p", "inbox-dismiss-text", "이번 전송만 취소합니다. 원래 질문과 답변 작성 내용은 남습니다."));
+			const confirm = make("button", "text-btn danger security-dismiss-confirm", "전송 취소하고 삭제");
+			confirm.disabled = !view.cancel;
+			confirm.onclick = async () => {
+				await securityInbox.decide(id, false);
+				if (securityInbox.view(id).status === "cancelled") securityInbox.hide(id);
+				inbox.dismissing.delete(id);
+				renderInboxList();
+			};
+			const keep = make("button", "text-btn inbox-dismiss-keep", "그대로 두기");
+			keep.onclick = () => { inbox.dismissing.delete(id); renderInboxItem(decisionById(inbox.state, id)); };
+			box.append(confirm, keep); nodes.push(box);
+		}
+	}
+	nodes.push(actions);
+	return nodes;
 }
 
-function markHeld(id, outcome, message) {
-	const entry = heldCards.get(id);
-	if (!entry) return;
-	for (const button of entry.card.querySelectorAll("button")) button.disabled = true;
-	const status = entry.card.querySelector(".security-status");
-	status.textContent = message ?? (outcome === "sent" ? "보냈습니다." : outcome === "lost" ? "게이트웨이가 다시 시작해 보류 메시지가 사라졌습니다. 엔진에는 보내지 않았습니다." : "보내지 않았습니다. 메시지를 버렸습니다.");
-	entry.card.classList.add("done");
-	if (outcome !== "sent" && entry.held.source === "message") restoreDraft(entry.held.conv, entry.held.draft);
-}
-
-async function decideHeld(held, send) {
-	const entry = heldCards.get(held.id);
-	if (!entry || entry.card.classList.contains("done")) return;
-	for (const button of entry.card.querySelectorAll("button")) button.disabled = true;
-	try {
-		const res = await fetch(`/api/security-check/held/${encodeURIComponent(held.id)}`, {
-			method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ send }),
-		});
-		const body = await res.json().catch(() => ({}));
-		if (res.status === 404) markHeld(held.id, "lost");
-		else if (!res.ok) markHeld(held.id, "failed", `보내지 못했습니다: ${body.message ?? body.error ?? res.status}`);
-		else markHeld(held.id, body.outcome);
-	} catch (err) {
-		for (const button of entry.card.querySelectorAll("button")) button.disabled = false;
-		entry.card.querySelector(".security-status").textContent = `연결 오류: ${err instanceof Error ? err.message : err}`;
+function renderSecuritySurfaces() {
+	for (const [id, entry] of securityInbox.entries) {
+		const held = entry.held;
+		if (held.source === "answer" && held.originalDecisionId) inbox.heldAnswers?.add(held.originalDecisionId);
+		let card = heldCards.get(id);
+		if (securityInbox.hidden.has(id)) {
+			card?.remove();
+			const row = inbox.nodes.get(id);
+			if (row) row.hidden = true;
+			continue;
+		}
+		if (held.conv === state.current || held.source === "answer") {
+			if (!card) {
+				card = make("div", "msg system security-card");
+				card.dataset.heldId = id;
+				card.setAttribute("role", "group");
+				card.setAttribute("aria-label", "보안 확인");
+				heldCards.set(id, card);
+			}
+			card.setAttribute("aria-busy", String(entry.busy));
+			card.replaceChildren(...securityContents(id, "chat"));
+			if (!card.isConnected) els.messages.append(card);
+		} else card?.remove();
+		const decision = decisionById(inbox.state, id);
+		if (decision && inbox.state.items.has(id)) renderInboxItem(decision);
+		if (!entry.restored && (held.status === "cancelled" || held.status === "failed")) {
+			if (canRestoreHeld(held, {
+				conv: state.current, text: els.input.value, images: attach.items.length, references: refs.state.items.length,
+			})) restoreDraft(held.conv, entry.draft);
+			entry.restored = true;
+		}
 	}
 }
 
-/** On every connect: cards still held come back; a card whose entry is gone (gateway restart) is marked lost. */
-async function readHeld() {
-	try {
-		const res = await fetch("/api/security-check/held", { cache: "no-store" });
-		if (!res.ok) return;
-		const { held } = await res.json();
-		const ids = new Set(held.map((h) => h.id));
-		for (const [id, entry] of heldCards) if (!ids.has(id) && !entry.card.classList.contains("done")) markHeld(id, "lost");
-		for (const h of held) showHeldCard(h);
-	} catch {
-		// Offline: the next connect reads again.
+function renderSecurityInboxItem(decision) {
+	const id = decision.id;
+	let entry = securityInbox.entries.get(id);
+	if (!entry) {
+		// The generic row carries state only; complete canonical values come from the dedicated endpoint.
+		entry = { held: decision.security, busy: false, uncertain: false, restored: false };
+		securityInbox.entries.set(id, entry);
+	} else if (decision.security.revision > entry.held.revision) {
+		entry.held = { ...entry.held, ...decision.security };
+	}
+	const li = make("li", "inbox-item security-inbox-item");
+	li.dataset.id = id; li.dataset.heldId = id; li.dataset.revision = String(entry.held.revision);
+	li.hidden = securityInbox.hidden.has(id);
+	li.setAttribute("aria-busy", String(entry.busy));
+	li.append(...securityContents(id, "inbox"));
+	const previous = inbox.nodes.get(id);
+	if (previous?.isConnected) previous.replaceWith(li);
+	inbox.nodes.set(id, li);
+	if (entry.held.status === "pending" && !completeDetail(entry.held) && !securityDetailsRequested.has(id)) {
+		securityDetailsRequested.add(id);
+		void securityInbox.detail(id);
 	}
+	return li;
 }
 
+function renderAllowedValues() {
+	const model = allowedValues.state;
+	const list = $("security-allowed-list");
+	list.replaceChildren();
+	$("security-allowed-status").textContent = !model.online ? "연결이 끊겼습니다." : model.busy ? "삭제 처리 중…" : model.loading ? "불러오는 중…" : model.error || (model.ready && model.values.length === 0 ? "기억한 값이 없습니다." : "");
+	const locked = !model.online || model.loading || model.busy || !model.ready || Boolean(model.error);
+	$("security-allowed-refresh").disabled = !model.online || model.loading || model.busy;
+	$("security-allowed-clear").disabled = locked || model.values.length === 0;
+	for (const value of model.values) {
+		const row = make("li", "security-allowed-item");
+		row.dataset.allowedId = value.id;
+		const client = value.approvedBy.client === "android" ? "Android 앱" : "웹";
+		row.append(make("code", "security-value", value.value), make("div", "inbox-note", `${value.label} · ${dateTimeLabel(value.approvedAt)} · ${client}`));
+		const remove = make("button", "text-btn", "제거");
+		remove.disabled = locked;
+		remove.onclick = () => { allowedRemoval = value.id; renderAllowedValues(); $("security-allowed-keep").focus(); };
+		row.append(remove); list.append(row);
+	}
+	const confirm = $("security-allowed-confirm");
+	confirm.hidden = allowedRemoval === undefined;
+	$("security-allowed-remove").disabled = locked;
+}
+
+$("security-allowed-refresh").onclick = () => { allowedRemoval = undefined; void allowedValues.refresh(); };
+$("security-allowed-clear").onclick = () => { allowedRemoval = null; renderAllowedValues(); $("security-allowed-keep").focus(); };
+$("security-allowed-keep").onclick = () => { allowedRemoval = undefined; renderAllowedValues(); };
+$("security-allowed-remove").onclick = async () => {
+	if (allowedRemoval === undefined) return;
+	const id = allowedRemoval;
+	allowedRemoval = undefined;
+	await allowedValues.remove(id);
+	renderAllowedValues();
+};
+
 securityButton.onclick = () => setSecurityEnabled(!security.enabled);
 renderSecurityToggle();
 
@@ -2674,6 +2790,7 @@ const memoController = setupMemo({ uploadImage, reportError: (message) => system
 // ---- 확인함: the server's durable decisions (GET /api/decisions), independent of the loaded chat page ----
 const inbox = {
 	state: createInbox(),
+	heldAnswers: new Set(),
 	open: false,
 	loading: false,
 	resync: false,
@@ -2779,15 +2896,21 @@ async function syncInbox({ reset = false, cursor = null } = {}) {
 		return;
 	}
 	const counterEpoch = reset ? beginPageReset(inbox.state) : inbox.state.counterEpoch;
+	const generation = decisionGeneration;
 	inbox.loading = true;
 	inbox.error = null;
 	renderInboxStatus();
 	try {
 		const page = await fetchDecisions(cursor);
+		if (generation !== decisionGeneration) return;
 		if (reset) {
 			dropSocketSubmissions(inbox.state);
 		}
 		applyPage(inbox.state, page, { reset, counterEpoch });
+		for (const decision of page.decisions) if (decision.security) {
+			securityInbox.merge(decision.security);
+			if (decision.security.status === "pending") void securityInbox.detail(decision.id);
+		}
 		renderInboxList();
 		for (const decision of inbox.state.items.values()) syncCard(decision);
 		if (reset) {
@@ -2877,6 +3000,7 @@ function renderInboxList() {
 		// The draft and note are shared with the chat card; a mounted card still answering the decision keeps them.
 		const shown = decisionById(inbox.state, id);
 		if (shown && isUnresolved(shown) && cardForDecision(id)) continue;
+		if (inbox.heldAnswers?.has(id)) continue;
 		inbox.forms.delete(id);
 		inbox.notes.delete(id);
 	}
@@ -3117,6 +3241,7 @@ function renderSourceContext(payload) {
 }
 
 function renderInboxItem(decision) {
+	if (decision.security) return renderSecurityInboxItem(decision);
 	const p = presentation(decision);
 	const payload = decision.payload && typeof decision.payload === "object" ? decision.payload : {};
 	const form = formFor(decision);
@@ -3362,6 +3487,10 @@ function onDecisionUpdated(data) {
 	const decision = data.decision;
 	if (!decision) return;
 	const result = applyUpdate(inbox.state, data);
+	if (decision.security) {
+		securityInbox.merge(decision.security);
+		if (decision.security.status === "pending") void securityInbox.detail(decision.id);
+	}
 	renderInboxBadge();
 	if (!result.changed) return;
 	if (endSocketSubmit(inbox.state, decision)) setCardBusy(originalActionId(decision), false);

package/web/decisions.d.ts

@@ -86,7 +86,7 @@ export function finishDetailLoad(
 ): DetailResult;
 export function failDetailLoad(inbox: Inbox, id: string, generation: number): boolean;
 export function presentation(decision: DecisionInfo): {
-	readonly kind: "terminal" | "submitted" | "live" | "resume" | "permission" | "recheck";
+	readonly kind: "terminal" | "submitted" | "live" | "resume" | "permission" | "recheck" | "security";
 	readonly mode: AnswerMode | null;
 	readonly form: boolean;
 	readonly recheck: boolean;

package/web/decisions.js

@@ -338,6 +338,7 @@ export function sourceContext(payload) {
 }
 
 export function presentation(decision) {
+	if (decision.security) return { kind: "security", mode: null, form: false, recheck: false, terminal: false };
 	const actions = decision.allowedActions ?? [];
 	const terminal = TERMINAL_WORK.has(decision.work?.status ?? "");
 	let kind = "terminal";
@@ -361,6 +362,7 @@ export function dismissMode(decision) {
 }
 
 export function canDismiss(decision) {
+	if (decision.security) return false;
 	return isUnresolved(decision) && decision.status !== "submitted";
 }
 
@@ -445,6 +447,7 @@ export function composeResponse(decision, form = {}) {
 
 /** An unchanged response replays its pending request verbatim, even after the current presentation mode changes. */
 export function buildRequest(inbox, decision, mode, response, newId = () => crypto.randomUUID()) {
+	if (decision.security) return null;
 	if (inbox.reviewRequired.has(decision.id)) return null;
 	const draft = inbox.drafts.get(decision.id);
 	const payload = response === undefined ? null : response;

package/web/diagram.d.ts

@@ -0,0 +1,28 @@
+export interface DiagramNode {
+	readonly id: string;
+	readonly label: string;
+}
+export interface Diagram {
+	readonly version: 1;
+	readonly title?: string;
+	readonly nodes: readonly DiagramNode[];
+	readonly edges: readonly { readonly from: string; readonly to: string }[];
+}
+export interface MarkdownToken {
+	readonly type: string;
+	readonly raw: string;
+	readonly lang?: string;
+}
+export type MarkdownTokens = MarkdownToken[];
+export interface DiagramMarkdown {
+	lexer(text: string, options: { readonly gfm: boolean; readonly breaks: boolean }): MarkdownTokens;
+	parser(tokens: MarkdownTokens, options: { readonly gfm: boolean; readonly breaks: boolean }): string;
+}
+export type DiagramPart = { readonly html: string } | { readonly diagram: Diagram; readonly source: string };
+export function parseDiagram(body: string): Diagram | null;
+export function diagramLevels(diagram: Diagram): readonly (readonly DiagramNode[])[] | null;
+export function diagramParts(text: string, markdown: DiagramMarkdown): readonly DiagramPart[];
+export function createDiagram(doc: Document, diagram: Diagram, source: string): { readonly element: HTMLElement; dispose(): void };
+export function renderDiagramMarkdown(
+	el: HTMLElement, text: string, markdown: DiagramMarkdown, purify: { sanitize(html: string): string },
+): void;