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

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); }
@@ -126,6 +126,8 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .msg-name { font-weight: 600; }
 .msg-name.bot { color: #a3acff; }
 .msg-time { font-size: 12px; color: var(--muted); }
+.turn-stats { margin-top: 4px; margin-right: 48px; font-size: 12px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; user-select: none; }
+.turn-stats::before { content: attr(data-label); }
 .msg-tag { font-size: 11px; color: var(--muted); border: 1px solid #4e5058; border-radius: 4px; padding: 0 4px; }
 .msg-read { font-size: 11px; color: var(--muted); }
 .msg.precomment .msg-body { opacity: 0.72; font-size: 0.9em; }
@@ -144,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; }
@@ -569,3 +586,28 @@ button { font: inherit; color: inherit; cursor: pointer; }
 /* 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; }
+
+/* Improvement 165: the security check card (values the user decides to send or drop). */
+.security-card { display: block; margin: 8px 0; border: 1px solid #4e5058; border-left: 4px solid var(--warn); background: var(--bg-card); border-radius: 6px; padding: 12px; max-width: 640px; }
+.security-card .security-title { font-weight: 600; margin-bottom: 6px; }
+.security-card .security-list { margin: 0 0 8px; padding-left: 18px; }
+.security-card .security-value { word-break: break-all; }
+.security-card .security-place { opacity: 0.7; font-size: 0.9em; }
+.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; }

package/web/turn-stats.d.ts

@@ -0,0 +1,26 @@
+export interface TurnStatsEvent {
+	readonly conv?: string;
+	readonly type: string;
+	readonly seq?: number;
+	readonly data?: {
+		readonly itemId?: unknown;
+		readonly messageSeq?: unknown;
+		readonly turnId?: unknown;
+		readonly stats?: unknown;
+	};
+}
+export interface StatsBody {
+	readonly ownerDocument: { createElement(tag: string): StatsLine };
+	querySelector(selector: string): unknown;
+	appendChild(line: StatsLine): unknown;
+}
+export interface StatsLine {
+	className: string;
+	readonly dataset: Record<string, string | undefined>;
+	setAttribute(name: string, value: string): void;
+}
+export function turnStatsLabel(stats: unknown): string;
+export function createTurnStats(): {
+	reset(conv: string): void;
+	accept(event: TurnStatsEvent, body?: StatsBody): void;
+};

package/web/turn-stats.js

@@ -0,0 +1,58 @@
+/** Unknown fields are omitted, not rendered as zero. Model time excludes tools and wall time. */
+export function turnStatsLabel(stats) {
+	if (!stats || typeof stats !== "object") return "";
+	const parts = [];
+	if (Number.isFinite(stats.tokensPerSecond) && stats.tokensPerSecond > 0) parts.push(`TPS ${stats.tokensPerSecond.toFixed(1)} tok/s`);
+	if (Number.isFinite(stats.modelDurationMs) && stats.modelDurationMs > 0) parts.push(`모델 처리 ${(stats.modelDurationMs / 1000).toFixed(1)}초`);
+	if (Number.isFinite(stats.cacheHitPercent) && stats.cacheHitPercent >= 0 && stats.cacheHitPercent <= 100) parts.push(`캐시 적중 ${stats.cacheHitPercent.toFixed(1)}%`);
+	return parts.join(" · ");
+}
+
+/**
+ * One transcript in one gateway origin. Nothing is shared in storage or across app instances.
+ * Keep unmatched stats until their final's older page arrives; never fall back to the latest row.
+ */
+export function createTurnStats() {
+	let conv = null;
+	const rows = new Map();
+	const labels = new Map();
+	function draw(key) {
+		const body = rows.get(key);
+		const label = labels.get(key);
+		if (!body || !label || body.querySelector(".turn-stats")) return;
+		const line = body.ownerDocument.createElement("div");
+		line.className = "turn-stats";
+		// Generated content stays out of selection text and ordinary transcript text exports.
+		// The accessible name still exposes the same metadata to assistive technology.
+		line.dataset.label = label;
+		line.setAttribute("role", "note");
+		line.setAttribute("aria-label", label);
+		body.appendChild(line);
+	}
+	return {
+		reset(nextConv) {
+			conv = nextConv;
+			rows.clear();
+			labels.clear();
+		},
+		accept(event, body) {
+			if (!event || event.conv !== conv || !event.data) return;
+			const data = event.data;
+			if (typeof data.itemId !== "string" || !data.itemId) return;
+			const seq = event.type === "message.final" ? event.seq : data.messageSeq;
+			if (!Number.isInteger(seq) || seq <= 0) return;
+			const key = JSON.stringify([data.itemId, seq]);
+			if (event.type === "message.final") {
+				if (!body) return;
+				rows.set(key, body);
+				draw(key);
+			} else if (event.type === "message.stats") {
+				if (typeof data.turnId !== "string" || !data.turnId) return;
+				const label = turnStatsLabel(data.stats);
+				if (!label) return;
+				if (!labels.has(key)) labels.set(key, label);
+				draw(key);
+			}
+		},
+	};
+}