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

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

@@ -181,6 +181,19 @@
         <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>

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(); }
+			}
+		},
+	};
+}

package/web/style.css

@@ -99,7 +99,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .text-btn[hidden] { display: none; }
 .text-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
 .messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
-.messages { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 0; }
+.messages { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 0; margin-right: 64px; }
 .memo { position: absolute; left: 16px; bottom: 8px; z-index: 5; width: 400px; height: 400px; min-width: 220px; min-height: 160px; max-width: calc(100% - 80px); max-height: calc(100% - 16px); display: flex; flex-direction: column; background: #2b2d31; border: 1px solid #4e5058; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
 .memo[hidden] { display: none; }
 .memo-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); }
@@ -146,6 +146,21 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .msg-text code { font-family: ui-monospace, monospace; font-size: 13px; color: var(--warn); background: #1e1f22; border-radius: 3px; padding: 1px 4px; }
 .msg-text pre { background: #1e1f22; border: 1px solid #1a1b1e; border-radius: 4px; padding: 8px 10px; overflow-x: auto; }
 .msg-text pre code { color: var(--text); background: none; padding: 0; white-space: pre; }
+.chat-diagram { margin: 8px 0; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
+@media (max-width: 640px) {
+	/* Keep this component's source and scroll controls clear of the existing chat navigation. */
+	.chat-diagram { margin-right: 48px; }
+}
+.diagram-title { padding: 8px 12px; font-weight: 600; overflow-wrap: anywhere; }
+.diagram-viewport { max-width: 100%; max-height: 24rem; overflow: auto; padding: 12px; }
+.diagram-viewport:focus-visible, .diagram-source summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
+.diagram-stage { position: relative; display: grid; grid-auto-columns: max-content; gap: 48px 24px; width: max-content; min-width: 100%; padding-right: 24px; isolation: isolate; }
+.diagram-node { width: max-content; justify-self: center; align-self: start; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-input); color: var(--text); white-space: pre; font: inherit; }
+.diagram-edges { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; overflow: visible; }
+.diagram-edges path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
+.diagram-source { border-top: 1px solid var(--border); min-width: 0; }
+.diagram-source summary { min-height: 44px; padding: 12px; color: var(--text); cursor: pointer; }
+.msg-text .diagram-source pre { margin: 0; max-height: 24rem; overflow: auto; border: 0; border-radius: 0 0 8px 8px; background: var(--bg-input); }
 .msg-text blockquote { border-left: 4px solid #4e5058; padding-left: 10px; color: #b5bac1; }
 .msg-text table { border-collapse: collapse; display: block; overflow-x: auto; }
 .msg-text th, .msg-text td { border: 1px solid #4e5058; padding: 4px 8px; text-align: left; }
@@ -581,3 +596,18 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .security-card .security-actions { display: flex; gap: 8px; }
 .security-card .security-actions .btn { white-space: nowrap; writing-mode: horizontal-tb; }
 .security-card.done { opacity: 0.75; }
+.security-inbox-item .security-value, .security-allowed-item .security-value { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
+.security-inbox-item .security-list { margin: 0; padding-left: 18px; }
+.security-inbox-item .security-question { font-size: 12px; color: var(--muted); }
+.security-actions { flex-wrap: wrap; gap: 8px; }
+.security-actions .text-btn { white-space: normal; }
+.security-status { font-size: 12px; color: var(--muted); }
+.security-status.confirmed { color: var(--ok); }
+.security-allowed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.security-allowed-item { padding: 8px; border: 1px solid var(--border); border-radius: 4px; min-width: 0; }
+.security-allowed-item .security-value { display: block; font-size: 12px; }
+#security-allowed-confirm[hidden] { display: none; }
+@media (max-width: 640px) {
+	.security-actions .text-btn, .security-inbox-item .text-btn, #security-check .text-btn { min-height: 44px; }
+}
+.security-card .security-value { white-space: pre-wrap; overflow-wrap: anywhere; }