zigmini 0.8.0-beta.6 → 0.9.0-beta.1

package/web/diagram.js

@@ -0,0 +1,228 @@
+// Diagram input is data only. Markdown recognition stays at the actual lexer boundary.
+const BODY_LIMIT = 16_384;
+const ID = /^[A-Za-z][A-Za-z0-9_-]{0,31}$/;
+const CONTROL = /[\u0000-\u001f\u007f]/;
+
+function keys(value, required, optional = []) {
+	return value !== null && typeof value === "object" && !Array.isArray(value)
+		&& required.every((key) => Object.hasOwn(value, key))
+		&& Object.keys(value).every((key) => required.includes(key) || optional.includes(key));
+}
+
+function plain(value, limit) {
+	return typeof value === "string" && value.trim().length > 0
+		&& [...value].length <= limit && !CONTROL.test(value);
+}
+
+export function parseDiagram(body) {
+	if (body.length > BODY_LIMIT) return null;
+	let value;
+	try {
+		value = JSON.parse(body);
+	} catch (error) {
+		if (error instanceof SyntaxError) return null;
+		throw error;
+	}
+	if (!keys(value, ["version", "nodes", "edges"], ["title"]) || value.version !== 1) return null;
+	if (Object.hasOwn(value, "title") && !plain(value.title, 80)) return null;
+	if (!Array.isArray(value.nodes) || value.nodes.length < 1 || value.nodes.length > 16) return null;
+	if (!Array.isArray(value.edges) || value.edges.length > 24) return null;
+	const ids = new Set();
+	for (const node of value.nodes) {
+		if (!keys(node, ["id", "label"]) || typeof node.id !== "string" || !ID.test(node.id)
+			|| ids.has(node.id) || !plain(node.label, 48)) return null;
+		ids.add(node.id);
+	}
+	const seen = new Set();
+	for (const edge of value.edges) {
+		if (!keys(edge, ["from", "to"]) || !ids.has(edge.from) || !ids.has(edge.to)
+			|| edge.from === edge.to) return null;
+		const pair = `${edge.from}:${edge.to}`;
+		if (seen.has(pair)) return null;
+		seen.add(pair);
+	}
+	if (diagramLevels(value) === null) return null;
+	return value;
+}
+
+// Kahn traversal uses maximum parent depth, then restores input order within levels.
+export function diagramLevels(diagram) {
+	const depths = new Map(diagram.nodes.map((node) => [node.id, 0]));
+	const incoming = new Map(diagram.nodes.map((node) => [node.id, 0]));
+	const children = new Map(diagram.nodes.map((node) => [node.id, []]));
+	for (const edge of diagram.edges) {
+		incoming.set(edge.to, incoming.get(edge.to) + 1);
+		children.get(edge.from).push(edge.to);
+	}
+	const queue = diagram.nodes.filter((node) => incoming.get(node.id) === 0).map((node) => node.id);
+	let visited = 0;
+	for (let cursor = 0; cursor < queue.length; cursor++) {
+		const id = queue[cursor];
+		visited++;
+		for (const child of children.get(id)) {
+			depths.set(child, Math.max(depths.get(child), depths.get(id) + 1));
+			incoming.set(child, incoming.get(child) - 1);
+			if (incoming.get(child) === 0) queue.push(child);
+		}
+	}
+	if (visited !== diagram.nodes.length) return null;
+	const levels = [];
+	for (const node of diagram.nodes) {
+		const depth = depths.get(node.id);
+		(levels[depth] ??= []).push(node);
+	}
+	return levels;
+}
+
+export function diagramParts(text, markdown) {
+	const options = { gfm: true, breaks: true };
+	const tokens = markdown.lexer(text, options);
+	const parts = [];
+	let ordinary = [];
+	// The lexer normalizes CRLF. Recover original spans for the body-size limit
+	// and source view instead of validating a shorter normalized body.
+	const normalized = text.replace(/\r\n?/g, "\n");
+	let tokenCursor = 0;
+	let originalCursor = 0;
+	let normalizedCursor = 0;
+	const originalOffset = (target) => {
+		while (normalizedCursor < target) {
+			if (text[originalCursor] === "\r" && text[originalCursor + 1] === "\n") originalCursor++;
+			originalCursor++;
+			normalizedCursor++;
+		}
+		return originalCursor;
+	};
+	const flush = () => {
+		if (ordinary.length === 0) return;
+		// The full-message lexer has already resolved inline reference links.
+		parts.push({ html: markdown.parser(ordinary, options) });
+		ordinary = [];
+	};
+	for (const token of tokens) {
+		const start = normalized.indexOf(token.raw, tokenCursor);
+		tokenCursor = start + token.raw.length;
+		const from = originalOffset(start);
+		const source = text.slice(from, originalOffset(tokenCursor));
+		// Do not search rendered <code> elements: raw HTML is not a supported fence.
+		const fence = token.type === "code" && token.lang === "zigmini-diagram"
+			? /^```zigmini-diagram\r?\n([\s\S]*?)\r?\n```[ \t]*(?:\r?\n|$)$/.exec(source) : null;
+		const diagram = fence ? parseDiagram(fence[1]) : null;
+		if (!diagram) {
+			ordinary.push(token);
+			continue;
+		}
+		flush();
+		parts.push({ diagram, source });
+	}
+	flush();
+	return parts;
+}
+
+function element(doc, tag, className, text) {
+	const el = doc.createElement(tag);
+	if (className) el.className = className;
+	if (text !== undefined) el.textContent = text;
+	return el;
+}
+
+export function createDiagram(doc, diagram, source) {
+	const figure = element(doc, "figure", "chat-diagram");
+	const title = diagram.title ?? "다이어그램";
+	figure.append(element(doc, "figcaption", "diagram-title", title));
+	const viewport = element(doc, "div", "diagram-viewport");
+	viewport.tabIndex = 0;
+	viewport.setAttribute("role", "region");
+	viewport.setAttribute("aria-label", `${title}. 다이어그램 영역, 방향키로 스크롤할 수 있습니다.`);
+	const stage = element(doc, "div", "diagram-stage");
+	const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("class", "diagram-edges");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("focusable", "false");
+	stage.append(svg);
+	const nodes = new Map();
+	const depths = new Map();
+	const levels = diagramLevels(diagram);
+	for (const [row, level] of levels.entries()) {
+		for (const [column, node] of level.entries()) {
+			const label = element(doc, "div", "diagram-node", node.label);
+			label.style.gridRow = String(row + 1);
+			label.style.gridColumn = String(column + 1);
+			stage.append(label);
+			nodes.set(node.id, label);
+			depths.set(node.id, row);
+		}
+	}
+	viewport.append(stage);
+	const relationships = element(doc, "ul", "sr-only");
+	const labels = new Map(diagram.nodes.map((node) => [node.id, node.label]));
+	for (const edge of diagram.edges) {
+		relationships.append(element(doc, "li", "", `${labels.get(edge.from)} → ${labels.get(edge.to)}`));
+	}
+	const details = element(doc, "details", "diagram-source");
+	details.append(element(doc, "summary", "", "다이어그램 원문"));
+	const pre = element(doc, "pre");
+	pre.append(element(doc, "code", "", source));
+	details.append(pre);
+	figure.append(viewport, relationships, details);
+
+	// Measure native text boxes, not estimated glyph widths. Text zoom/font changes
+	// resize the stage; scrolling does not change the stage-relative coordinates.
+	const observer = new ResizeObserver(() => {
+		if (!stage.isConnected) {
+			observer.disconnect();
+			return;
+		}
+		const bounds = stage.getBoundingClientRect();
+		svg.setAttribute("width", String(bounds.width));
+		svg.setAttribute("height", String(bounds.height));
+		svg.replaceChildren();
+		const boxes = new Map([...nodes].map(([id, node]) => [id, node.getBoundingClientRect()]));
+		const rowBottoms = new Map();
+		let right = 0;
+		for (const [id, box] of boxes) {
+			const row = depths.get(id);
+			rowBottoms.set(row, Math.max(rowBottoms.get(row) ?? 0, box.bottom - bounds.top));
+			right = Math.max(right, box.right - bounds.left);
+		}
+		const gutter = right + 12;
+		for (const edge of diagram.edges) {
+			const from = boxes.get(edge.from);
+			const to = boxes.get(edge.to);
+			const x1 = from.left + from.width / 2 - bounds.left;
+			const y1 = from.bottom - bounds.top;
+			const x2 = to.left + to.width / 2 - bounds.left;
+			const y2 = to.top - bounds.top;
+			const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+			// Long edges travel outside all node boxes, entering/leaving in row gaps.
+			const mid = rowBottoms.get(depths.get(edge.from)) + 24;
+			const skips = depths.get(edge.to) > depths.get(edge.from) + 1;
+			const route = skips ? `V${mid} H${gutter} V${y2 - 24} H${x2}` : `V${mid} H${x2}`;
+			path.setAttribute("d", `M${x1},${y1} ${route} V${y2} m-4,-6 l4,6 l4,-6`);
+			svg.append(path);
+		}
+	});
+	observer.observe(stage);
+	return { element: figure, dispose: () => observer.disconnect() };
+}
+
+const mounted = new WeakMap();
+
+export function renderDiagramMarkdown(el, text, markdown, purify) {
+	const previous = mounted.get(el) ?? [];
+	const open = previous.map(({ element: figure }) => figure.querySelector("details").open);
+	for (const view of previous) view.dispose();
+	el.replaceChildren();
+	const views = [];
+	for (const part of diagramParts(text, markdown)) {
+		if ("html" in part) {
+			el.insertAdjacentHTML("beforeend", purify.sanitize(part.html));
+		} else {
+			const view = createDiagram(el.ownerDocument, part.diagram, part.source);
+			view.element.querySelector("details").open = open[views.length] ?? false;
+			el.append(view.element);
+			views.push(view);
+		}
+	}
+	mounted.set(el, views);
+}

package/web/index.html

@@ -177,6 +177,35 @@
         <p class="enroll-message" id="apk-message" role="status" aria-live="polite"></p>
         <div class="enroll-actions"><button type="button" class="text-btn" id="apk-renew" hidden>새로 만들기</button></div>
       </section>
+      <section class="settings-section security-check" id="security-check" aria-labelledby="security-check-title">
+        <div class="section-label"><span id="security-check-title">보안검사</span></div>
+        <p class="update-line">보낸 메시지에 비밀키, 토큰, 비밀번호, 홈 폴더 경로, 내부 IP 같은 값이 있으면 엔진에 보내지 않고 보류한 뒤, 값을 보여 주고 보낼지 묻습니다.</p>
+        <div class="update-buttons"><button type="button" class="text-btn" id="toggle-security" aria-pressed="true">보안검사 켜짐</button></div>
+        <div class="section-label">기억한 정확한 값</div>
+        <p class="update-note">이 설치에서 승인한 값만 다음 검사부터 허용합니다. 제거·전체 삭제는 실행 시점의 값을 지웁니다. 다음 검사에서 다시 보류되며 이미 시작한 전송은 취소하지 않습니다. 저장소·릴리스 보안검사는 바뀌지 않습니다.</p>
+        <div class="update-buttons">
+          <button type="button" class="text-btn" id="security-allowed-refresh">목록 확인 / 다시 시도</button>
+          <button type="button" class="text-btn" id="security-allowed-clear" disabled>전체 삭제</button>
+        </div>
+        <p class="enroll-message" id="security-allowed-status" role="status" aria-live="polite"></p>
+        <ul class="security-allowed-list" id="security-allowed-list" aria-label="기억한 정확한 값"></ul>
+        <div class="inbox-dismiss mode-cancel" id="security-allowed-confirm" hidden>
+          <p class="inbox-dismiss-text">선택한 값 또는 실행 시점의 전체 값을 제거합니다. 다음 검사부터 다시 보류되며 이미 시작한 전송은 취소되지 않습니다.</p>
+          <button type="button" class="text-btn danger" id="security-allowed-remove">제거 확인</button>
+          <button type="button" class="text-btn" id="security-allowed-keep">그대로 두기</button>
+        </div>
+      </section>
+      <section class="settings-section" id="notification-settings" aria-labelledby="notification-title">
+        <div class="section-label"><label id="notification-title" for="notification-mode">알림</label></div>
+        <div class="access-form">
+          <select class="access-input" id="notification-mode" aria-describedby="notification-description notification-status" disabled>
+            <option value="inbox-only" selected>확인함 알림만</option>
+            <option value="all-replies">모든 답장 알림</option>
+          </select>
+        </div>
+        <p class="update-note" id="notification-description">모든 답장 알림은 확인함 알림과 메인·작업의 완료된 답장 알림을 포함합니다. 이 게이트웨이에 연결된 모든 기기에 적용됩니다.</p>
+        <p class="enroll-message" id="notification-status" role="status" aria-live="polite"></p>
+      </section>
       <section class="settings-section gc" id="gc" aria-labelledby="gc-title">
         <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>

package/web/notifications.d.ts

@@ -0,0 +1,25 @@
+export type NotificationMode = "inbox-only" | "all-replies";
+export const NOTIFICATION_SETTINGS_PATH: string;
+export interface NotificationSettingsView {
+	readonly mode: NotificationMode;
+	readonly ready: boolean;
+	readonly online: boolean;
+	readonly busy: boolean;
+	readonly error: string;
+}
+export interface NotificationSettingsController {
+	readonly view: () => NotificationSettingsView;
+	readonly read: () => Promise<void>;
+	readonly set: (mode: NotificationMode) => Promise<void>;
+	readonly connect: () => Promise<void>;
+	readonly disconnect: () => void;
+	readonly updated: (body: unknown) => void;
+}
+export type SettingsFetch = (path: string, init: RequestInit) => Promise<Pick<Response, "ok" | "json">>;
+export function notificationMode(body: unknown): NotificationMode | null;
+export function createNotificationSettings(fetcher: SettingsFetch, render: (view: NotificationSettingsView) => void): NotificationSettingsController;
+export interface NotificationSettingsElements {
+	readonly choice: { value: string; disabled: boolean; onchange: (() => Promise<void>) | null };
+	readonly status: { textContent: string | null; classList: Pick<DOMTokenList, "toggle"> };
+}
+export function setupNotificationSettings(elements: NotificationSettingsElements, fetcher?: SettingsFetch): NotificationSettingsController;

package/web/notifications.js

@@ -0,0 +1,118 @@
+export const NOTIFICATION_SETTINGS_PATH = "/api/settings/notifications";
+
+/** Parse gateway data without treating a failed or malformed response as a default. */
+export function notificationMode(body) {
+	if (body === null || typeof body !== "object" || Array.isArray(body)) return null;
+	if (body.mode === "inbox-only" || body.mode === "all-replies") return body.mode;
+	return null;
+}
+
+/** Confirmed gateway state only. Requests belong to one connection epoch; writes run in order. */
+export function createNotificationSettings(fetcher, render) {
+	let mode = "inbox-only";
+	let ready = false;
+	let online = false;
+	let error = "";
+	let epoch = 0;
+	let generation = 0;
+	let pending = 0;
+	let tail = Promise.resolve();
+	const view = () => ({ mode, ready, online, busy: pending > 0, error });
+	const paint = () => render(view());
+	const confirm = (value) => {
+		mode = value;
+		ready = true;
+		error = "";
+		paint();
+	};
+
+	async function read() {
+		if (!online) return;
+		const connection = epoch;
+		const request = ++generation;
+		try {
+			const response = await fetcher(NOTIFICATION_SETTINGS_PATH, { cache: "no-store" });
+			if (!response.ok) throw new Error("notification_read_failed");
+			const value = notificationMode(await response.json());
+			if (value === null) throw new Error("notification_response_invalid");
+			if (connection === epoch && request === generation) confirm(value);
+		} catch {
+			if (connection === epoch && request === generation) {
+				error = "알림 설정을 불러오지 못했습니다. 다시 연결하면 재시도합니다.";
+				paint();
+			}
+		}
+	}
+
+	function set(value) {
+		if (!online || !ready || notificationMode({ mode: value }) === null) return Promise.resolve();
+		const connection = epoch;
+		generation += 1;
+		pending += 1;
+		paint();
+		tail = tail.then(async () => {
+			try {
+				if (connection !== epoch) return;
+				const request = ++generation;
+				const response = await fetcher(NOTIFICATION_SETTINGS_PATH, {
+					method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ mode: value }),
+				});
+				if (!response.ok) throw new Error("notification_save_failed");
+				const saved = notificationMode(await response.json());
+				if (saved === null) throw new Error("notification_response_invalid");
+				if (connection !== epoch) return;
+				if (request === generation) confirm(saved);
+				else await read(); // A newer event/read may describe another client's write.
+			} catch {
+				if (connection === epoch) {
+					error = "알림 설정을 저장하지 못했습니다. 확인된 설정을 유지합니다.";
+					paint();
+				}
+			} finally {
+				pending -= 1;
+				paint();
+			}
+		});
+		return tail;
+	}
+
+	paint();
+	return {
+		view,
+		read,
+		set,
+		connect() {
+			epoch += 1;
+			generation += 1;
+			online = true;
+			ready = false;
+			error = "";
+			paint();
+			return read();
+		},
+		disconnect() {
+			epoch += 1;
+			generation += 1;
+			online = false;
+			paint();
+		},
+		updated(body) {
+			const value = notificationMode(body);
+			if (!online || value === null) return;
+			generation += 1;
+			confirm(value);
+		},
+	};
+}
+
+/** Reuse the settings dialog's native select and live status region. */
+export function setupNotificationSettings({ choice, status }, fetcher = fetch) {
+	const controller = createNotificationSettings(fetcher, (view) => {
+		choice.value = view.mode;
+		choice.disabled = !view.online || !view.ready || view.busy;
+		status.textContent = view.error || (view.busy ? "저장 중…" : !view.online ? "게이트웨이 연결을 기다립니다." : !view.ready ? "알림 설정 확인 중…" : "");
+		status.classList.toggle("error", Boolean(view.error));
+	});
+	choice.onchange = () => controller.set(choice.value);
+	return controller;
+}

package/web/security-inbox.d.ts

@@ -0,0 +1,35 @@
+import type { HeldState, AllowedValue } from "../src/security-allow.ts";
+import type { HeldMessage } from "../src/security-check.ts";
+
+export const HELD_PATH: "/api/security-check/held";
+export const ALLOWED_PATH: "/api/settings/security-check/allowed-values";
+export type HeldDetail = HeldState & Partial<Pick<HeldMessage, "occurrences" | "draft">>;
+export interface Entry {
+	held: HeldDetail;
+	busy: boolean;
+	uncertain: boolean;
+	draft: string | undefined;
+	restored: boolean;
+	request?: {
+		readonly send: boolean; readonly remember?: true;
+		readonly expectedRevision: number; readonly submissionId: string;
+	};
+}
+export type Fetcher = (path: string, init: RequestInit) => Promise<Pick<Response, "ok" | "status" | "json">>;
+export function completeDetail(held: HeldDetail): boolean;
+export function canRestoreHeld(held: HeldState, composer: { conv: string; text: string; images: number; references: number }): boolean;
+export function heldView(entry: Entry, online: boolean, supported: boolean): {
+	status: HeldState["status"]; remembered: boolean | null; approve: boolean; cancel: boolean; check: boolean; hide: boolean;
+};
+export function createSecurityInbox(fetcher: Fetcher, changed?: () => void): {
+	entries: Map<string, Entry>; hidden: Set<string>;
+	merge(held: HeldDetail, confirmed?: boolean): boolean;
+	refresh(): Promise<void>; detail(id: string): Promise<void>; decide(id: string, send: boolean): Promise<void>;
+	view(id: string): ReturnType<typeof heldView>;
+	supported(value: boolean): void; connect(): Promise<void>; disconnect(): void; hide(id: string): boolean;
+};
+export function createAllowedValues(fetcher: Fetcher, changed?: () => void): {
+	state: { revision: number; values: AllowedValue[]; online: boolean; busy: boolean; loading: boolean; error: string; ready: boolean };
+	refresh(): Promise<void>; connect(): Promise<void>; disconnect(): void; updated(revision: number): void;
+	remove(id?: string | null): Promise<void>;
+};

package/web/security-inbox.js

@@ -0,0 +1,237 @@
+// Installation-local, memory-only client state. Never persist held details or drafts.
+export const HELD_PATH = "/api/security-check/held";
+export const ALLOWED_PATH = "/api/settings/security-check/allowed-values";
+const TERMINAL = new Set(["sent", "cancelled", "failed", "unconfirmed"]);
+const STATUSES = new Set(["pending", "processing", ...TERMINAL]);
+
+export function completeDetail(held) {
+	return Array.isArray(held?.occurrences) && held.occurrences.length > 0 &&
+		held.occurrences.every((o) => typeof o.canonicalValue === "string" && o.canonicalValue.length > 0);
+}
+
+export function canRestoreHeld(held, composer) {
+	return held.source === "message" && (held.status === "cancelled" || held.status === "failed") &&
+		held.conv === composer.conv && composer.text === "" && composer.images === 0 && composer.references === 0;
+}
+
+export function heldView(entry, online, supported) {
+	const held = entry.held;
+	const status = entry.uncertain ? "unconfirmed" : entry.busy && !TERMINAL.has(held.status) ? "processing" : held.status;
+	return {
+		status, remembered: entry.uncertain ? null : held.remembered,
+		approve: online && supported && !entry.busy && !entry.uncertain && held.status === "pending" && completeDetail(held) && (!entry.request || entry.request.send),
+		cancel: online && !entry.busy && !entry.uncertain && held.status === "pending" && (!entry.request || !entry.request.send),
+		check: online && !entry.busy && (entry.uncertain || held.status === "processing" || held.status === "unconfirmed"),
+		hide: !entry.busy && !entry.uncertain && TERMINAL.has(held.status),
+	};
+}
+
+/** One controller for both surfaces; changed is synchronous, including the pre-await lock. */
+export function createSecurityInbox(fetcher, changed = () => {}) {
+	const entries = new Map();
+	const hidden = new Set();
+	const loads = new Map();
+	let generation = 0;
+	let online = false;
+	let supported = false;
+
+	function merge(held, confirmed = false) {
+		if (!held || typeof held.id !== "string" || !Number.isSafeInteger(held.revision) || held.revision < 1 ||
+			!STATUSES.has(held.status) || typeof held.remembered !== "boolean") return false;
+		const previous = entries.get(held.id);
+		if (previous && held.revision < previous.held.revision) return false;
+		if (previous && held.revision === previous.held.revision) {
+			if (!completeDetail(previous.held) && completeDetail(held) && !TERMINAL.has(previous.held.status)) {
+				previous.held = { ...previous.held, occurrences: held.occurrences, draft: held.draft };
+			}
+			if (previous.draft === undefined && typeof held.draft === "string" && !TERMINAL.has(previous.held.status)) previous.draft = held.draft;
+			if (confirmed) previous.uncertain = false;
+		} else {
+			const detail = previous && !TERMINAL.has(held.status) ? previous.held : {};
+			const next = {
+				held: { ...detail, ...held }, busy: previous?.busy ?? false, uncertain: false,
+				draft: held.draft ?? previous?.draft, restored: previous?.restored ?? false,
+			};
+			// Keep the entry identity held by an in-flight request's finally block.
+			if (previous) Object.assign(previous, next);
+			else entries.set(held.id, next);
+		}
+		changed();
+		return true;
+	}
+
+	async function detail(id) {
+		if (!online || loads.has(id)) return;
+		const epoch = generation;
+		loads.set(id, epoch);
+		try {
+			const response = await fetcher(`${HELD_PATH}/${encodeURIComponent(id)}`, { cache: "no-store", signal: AbortSignal.timeout(30_000) });
+			const body = await response.json();
+			if (epoch !== generation) return;
+			if (!response.ok || body?.id !== id || !merge(body, true)) {
+				const entry = entries.get(id);
+				if (entry && !TERMINAL.has(entry.held.status)) entry.uncertain = true;
+			}
+		} catch {
+			if (epoch !== generation) return;
+			const entry = entries.get(id);
+			if (entry && !TERMINAL.has(entry.held.status)) entry.uncertain = true;
+		} finally {
+			if (epoch === generation) {
+				loads.delete(id);
+				changed();
+			}
+		}
+	}
+
+	async function refresh() {
+		const epoch = generation;
+		try {
+			const response = await fetcher(HELD_PATH, { cache: "no-store", signal: AbortSignal.timeout(30_000) });
+			const body = await response.json();
+			if (epoch !== generation || !response.ok) return;
+			const snapshots = body.held ?? [];
+			const ids = new Set(snapshots.map((h) => h.id));
+			const missing = [];
+			for (const entry of entries.values()) {
+				if (!ids.has(entry.held.id) && !TERMINAL.has(entry.held.status)) {
+					entry.uncertain = true;
+					missing.push(entry.held.id);
+				}
+			}
+			for (const held of snapshots) merge(held);
+			if (missing.length > 0) changed();
+			// Store-backed gateways return terminal receipts through the dedicated detail endpoint.
+			await Promise.all(missing.map((id) => detail(id)));
+		} catch {
+			// A missing response never proves non-delivery.
+		} finally {
+			if (epoch === generation) changed();
+		}
+	}
+
+	async function decide(id, send) {
+		const entry = entries.get(id);
+		if (!entry) return;
+		const view = heldView(entry, online, supported);
+		if (!(send ? view.approve : view.cancel)) return;
+		entry.request ??= {
+			...(send ? { send: true, remember: true } : { send: false }),
+			expectedRevision: entry.held.revision, submissionId: crypto.randomUUID(),
+		};
+		entry.busy = true;
+		const epoch = generation;
+		changed();
+		try {
+			const response = await fetcher(`${HELD_PATH}/${encodeURIComponent(id)}`, {
+				method: "POST", headers: { "content-type": "application/json" },
+				body: JSON.stringify(entry.request),
+				signal: AbortSignal.timeout(30_000),
+			});
+			const body = await response.json();
+			if (epoch !== generation) return;
+			const snapshot = body?.held ?? body;
+			const accepted = snapshot?.id === id && Number.isSafeInteger(snapshot.revision) && merge(snapshot);
+			if ((!accepted || response.status >= 500) && !TERMINAL.has(entry.held.status)) entry.uncertain = true;
+		} catch {
+			if (epoch === generation && !TERMINAL.has(entry.held.status)) entry.uncertain = true;
+		} finally {
+			if (epoch === generation) {
+				entry.busy = false;
+				changed();
+			}
+		}
+	}
+
+	return {
+		entries, hidden, merge, refresh, detail, decide,
+		view: (id) => heldView(entries.get(id), online, supported),
+		supported: (value) => { supported = value === true; changed(); },
+		connect: () => { generation++; online = true; loads.clear(); return refresh(); },
+		disconnect: () => {
+			generation++;
+			online = false;
+			supported = false;
+			loads.clear();
+			for (const entry of entries.values()) {
+				if (!TERMINAL.has(entry.held.status) && (entry.busy || entry.held.status === "processing")) entry.uncertain = true;
+				entry.busy = false;
+			}
+			changed();
+		},
+		hide: (id) => {
+			const entry = entries.get(id);
+			if (!entry || !heldView(entry, online, supported).hide) return false;
+			hidden.add(id);
+			changed();
+			return true;
+		},
+	};
+}
+
+export function createAllowedValues(fetcher, changed = () => {}) {
+	const state = { revision: -1, values: [], online: false, busy: false, loading: false, error: "", ready: false };
+	let generation = 0;
+	let read = 0;
+	let wanted = -1;
+	async function refresh() {
+		if (!state.online) return;
+		const epoch = generation;
+		const request = ++read;
+		state.loading = true;
+		state.error = "";
+		changed();
+		try {
+			const response = await fetcher(ALLOWED_PATH, { cache: "no-store", signal: AbortSignal.timeout(30_000) });
+			const body = await response.json();
+			if (epoch !== generation || request !== read) return;
+			if (!response.ok || !Number.isSafeInteger(body.revision) || !Array.isArray(body.values)) throw new Error("list_unavailable");
+			if (body.revision >= state.revision && body.revision >= wanted) {
+				state.revision = body.revision;
+				state.values = body.values;
+				state.ready = true;
+			} else state.error = "목록이 변경됐습니다. 다시 확인하세요.";
+		} catch {
+			if (epoch === generation && request === read) state.error = "허용 값을 확인하지 못했습니다. 다시 시도하세요.";
+		} finally {
+			if (epoch === generation && request === read) {
+				state.loading = false;
+				changed();
+			}
+		}
+	}
+	return {
+		state, refresh,
+		connect: () => { generation++; state.online = true; return refresh(); },
+		disconnect: () => {
+			generation++; state.online = false; state.busy = false; state.loading = false; state.ready = false; changed();
+		},
+		updated: (revision) => {
+			if (revision <= Math.max(wanted, state.revision)) return;
+			wanted = revision;
+			void refresh();
+		},
+		remove: async (id = null) => {
+			if (!state.online || state.busy || state.loading || !state.ready || state.error) return;
+			state.busy = true;
+			state.error = "";
+			const epoch = generation;
+			changed();
+			try {
+				const response = await fetcher(id === null ? ALLOWED_PATH : `${ALLOWED_PATH}/${encodeURIComponent(id)}`, {
+					method: "DELETE", headers: { "content-type": "application/json" },
+					body: JSON.stringify({ expectedRevision: state.revision }), signal: AbortSignal.timeout(30_000),
+				});
+				const body = await response.json();
+				if (epoch !== generation) return;
+				if (!response.ok) throw new Error("delete_unconfirmed");
+				wanted = Math.max(wanted, body.revision);
+				await refresh();
+			} catch {
+				if (epoch === generation) state.error = "삭제 결과를 확인하지 못했습니다. 목록을 다시 확인하세요. 삭제를 자동 반복하지 않습니다.";
+			} finally {
+				if (epoch === generation) { state.busy = false; changed(); }
+			}
+		},
+	};
+}