@ait-co/devtools 0.1.14 → 0.1.15

package/dist/panel/index.js

@@ -70,6 +70,7 @@ const DEFAULT_STATE = {
 		userKeyHash: "mock-user-hash-abc123",
 		anonymousKeyHash: "mock-anon-hash-xyz789"
 	},
+	notification: { nextResult: "newAgreement" },
 	ads: {
 		isLoaded: false,
 		nextEvent: "loaded",
@@ -219,6 +220,429 @@ if (!globalRef[SINGLETON_KEY]) globalRef[SINGLETON_KEY] = new AitStateManager();
 const aitState = globalRef[SINGLETON_KEY];
 if (typeof window !== "undefined") window.__ait = aitState;
 //#endregion
+//#region src/telemetry/consent-toast.ts
+/**
+* Consent toast UI — vanilla DOM, fixed bottom-right.
+*
+* Ko-only for now — devtools has no i18n layer.
+* TODO: revisit when/if an i18n layer is added to the panel.
+*
+* Shows once per "undecided + reprompt window cleared" session.
+* Calls onAccept / onDeny callbacks; caller is responsible for persisting state.
+*/
+const TOAST_ID = "__ait-telemetry-toast";
+const TOAST_STYLES = `
+  #${TOAST_ID} {
+    position: fixed;
+    z-index: 100001;
+    bottom: 80px;
+    right: 16px;
+    width: 280px;
+    background: #1a1a2e;
+    border: 1px solid #3a3a5a;
+    border-radius: 10px;
+    padding: 14px 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+    font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;
+    font-size: 13px;
+    color: #e0e0e0;
+    box-sizing: border-box;
+  }
+  #${TOAST_ID} .ait-toast-header {
+    font-size: 13px;
+    font-weight: 600;
+    color: #e0e0e0;
+    margin-bottom: 6px;
+  }
+  #${TOAST_ID} .ait-toast-body {
+    font-size: 12px;
+    color: #aaa;
+    margin-bottom: 12px;
+    line-height: 1.5;
+  }
+  #${TOAST_ID} .ait-toast-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  #${TOAST_ID} .ait-toast-btn-primary {
+    background: #3182F6;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  #${TOAST_ID} .ait-toast-btn-primary:hover { background: #1b6ef3; }
+  #${TOAST_ID} .ait-toast-btn-secondary {
+    background: #2a2a4a;
+    color: #e0e0e0;
+    border: 1px solid #3a3a5a;
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  #${TOAST_ID} .ait-toast-btn-secondary:hover { background: #3a3a5a; }
+  #${TOAST_ID} .ait-toast-link {
+    font-size: 11px;
+    color: #666;
+    text-decoration: none;
+    margin-right: auto;
+  }
+  #${TOAST_ID} .ait-toast-link:hover { color: #aaa; }
+`;
+function injectStyles() {
+	if (document.getElementById(`${TOAST_ID}-style`)) return;
+	const style = document.createElement("style");
+	style.id = `${TOAST_ID}-style`;
+	style.textContent = TOAST_STYLES;
+	document.head.appendChild(style);
+}
+function removeToast() {
+	document.getElementById(TOAST_ID)?.remove();
+	document.getElementById(`${TOAST_ID}-style`)?.remove();
+}
+/**
+* Renders and shows the consent toast.
+* If the toast is already visible, does nothing.
+*/
+function showConsentToast({ onAccept, onDeny }) {
+	if (document.getElementById(TOAST_ID)) return;
+	injectStyles();
+	const toast = document.createElement("div");
+	toast.id = TOAST_ID;
+	const header = document.createElement("div");
+	header.className = "ait-toast-header";
+	header.textContent = "익명 사용 통계를 보낼까요?";
+	const body = document.createElement("div");
+	body.className = "ait-toast-body";
+	body.textContent = "도구 개선을 위해 익명 이벤트만 수집해요. 언제든 환경 탭에서 끌 수 있어요.";
+	const learnMore = document.createElement("a");
+	learnMore.className = "ait-toast-link";
+	learnMore.href = "https://docs.aitc.dev/privacy";
+	learnMore.target = "_blank";
+	learnMore.rel = "noopener noreferrer";
+	learnMore.textContent = "더 알아보기";
+	const yesBtn = document.createElement("button");
+	yesBtn.className = "ait-toast-btn-primary";
+	yesBtn.textContent = "Yes, send";
+	yesBtn.addEventListener("click", () => {
+		removeToast();
+		onAccept();
+	});
+	const noBtn = document.createElement("button");
+	noBtn.className = "ait-toast-btn-secondary";
+	noBtn.textContent = "No, thanks";
+	noBtn.addEventListener("click", () => {
+		removeToast();
+		onDeny();
+	});
+	const actions = document.createElement("div");
+	actions.className = "ait-toast-actions";
+	actions.append(learnMore, noBtn, yesBtn);
+	toast.append(header, body, actions);
+	document.body.appendChild(toast);
+}
+//#endregion
+//#region src/telemetry/state.ts
+const KEY_CONSENT = "__ait_telemetry:consent";
+const KEY_REPROMPT_AFTER = "__ait_telemetry:reprompt_after";
+const KEY_POLICY_VERSION = "__ait_telemetry:policy_version";
+const KEY_ANON_ID = "__ait_telemetry:anon_id";
+/**
+* Current policy version. Bump this string whenever the privacy policy changes.
+* Users who previously granted on an older version will be re-prompted once.
+*/
+const CURRENT_POLICY_VERSION = "2026-05-12";
+/** 30 days in milliseconds */
+const THIRTY_DAYS_MS = 720 * 60 * 60 * 1e3;
+function readConsentState() {
+	const raw = localStorage.getItem(KEY_CONSENT);
+	if (raw === "granted" || raw === "denied") return raw;
+	return "undecided";
+}
+function readRepromptAfter() {
+	const raw = localStorage.getItem(KEY_REPROMPT_AFTER);
+	if (raw === null) return 0;
+	const n = Number(raw);
+	return Number.isFinite(n) ? n : 0;
+}
+function readPolicyVersion() {
+	return localStorage.getItem(KEY_POLICY_VERSION);
+}
+/**
+* Returns the stored anon_id, or generates + persists a new UUID v4 on first call.
+* Once generated it is never overwritten.
+*/
+function getOrCreateAnonId() {
+	const existing = localStorage.getItem(KEY_ANON_ID);
+	if (existing) return existing;
+	const id = crypto.randomUUID();
+	localStorage.setItem(KEY_ANON_ID, id);
+	return id;
+}
+/**
+* Resolve effective consent, handling the policy-version bump rule:
+*   - If stored = "granted" but stored version ≠ CURRENT → revert to undecided
+*   - If stored = "denied" and version changed → stay denied (no re-prompt)
+*
+* Call this at init time to normalise state before checking whether to show a toast.
+* Returns the effective ConsentState after applying the version-bump rule.
+*/
+function resolveEffectiveConsent() {
+	const raw = localStorage.getItem(KEY_CONSENT);
+	if (raw === "granted") {
+		if (readPolicyVersion() !== "2026-05-12") {
+			localStorage.removeItem(KEY_CONSENT);
+			localStorage.removeItem(KEY_POLICY_VERSION);
+			return "undecided";
+		}
+		return "granted";
+	}
+	if (raw === "denied") return "denied";
+	return "undecided";
+}
+/**
+* User clicked "Yes, send".
+* Sets consent = granted, records policy version.
+*/
+function acceptConsent() {
+	localStorage.setItem(KEY_CONSENT, "granted");
+	localStorage.setItem(KEY_POLICY_VERSION, CURRENT_POLICY_VERSION);
+	localStorage.removeItem(KEY_REPROMPT_AFTER);
+}
+/**
+* User clicked "No, thanks".
+* First denial: sets reprompt_after = now + 30 days.
+* Second denial (reprompt_after was already set to a past finite value that triggered
+*   re-prompt): sets reprompt_after = MAX_SAFE_INTEGER → permanent silence.
+*/
+function denyConsent() {
+	localStorage.setItem(KEY_CONSENT, "denied");
+	const existing = readRepromptAfter();
+	if (existing > 0 && existing < Number.MAX_SAFE_INTEGER) localStorage.setItem(KEY_REPROMPT_AFTER, String(Number.MAX_SAFE_INTEGER));
+	else localStorage.setItem(KEY_REPROMPT_AFTER, String(Date.now() + THIRTY_DAYS_MS));
+}
+/**
+* Environment-tab toggle: free transition between granted/denied.
+* Does NOT touch reprompt_after.
+*/
+function setConsentViaToggle(granted) {
+	if (granted) {
+		localStorage.setItem(KEY_CONSENT, "granted");
+		localStorage.setItem(KEY_POLICY_VERSION, CURRENT_POLICY_VERSION);
+	} else localStorage.setItem(KEY_CONSENT, "denied");
+}
+/**
+* Returns true if the toast should be shown now.
+* Conditions: undecided AND (reprompt_after is 0 OR reprompt_after < now).
+*/
+function shouldShowToast() {
+	if (resolveEffectiveConsent() !== "undecided") return false;
+	const repromptAfter = readRepromptAfter();
+	if (repromptAfter === 0) return true;
+	return Date.now() > repromptAfter;
+}
+/**
+* Sends the DELETE request to remove the user's data from the server.
+*/
+async function deleteMyData(endpoint) {
+	const anonId = localStorage.getItem(KEY_ANON_ID);
+	if (!anonId) return false;
+	try {
+		return (await fetch(`${endpoint}?anon_id=${encodeURIComponent(anonId)}`, { method: "DELETE" })).ok;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/telemetry/send.ts
+/**
+* Telemetry send + retry.
+*
+* Rules:
+*   1. If consent ≠ "granted" — drop silently.
+*   2. POST event as JSON with 5 s timeout.
+*   3. On network error or non-2xx: retry ONCE after 2 s. On second failure: drop.
+*   4. console.debug on retry, development only (NODE_ENV !== "production").
+*   5. For "session_duration": use sendBeacon if available, fall back to fetch keepalive.
+*
+* Max meta size: 256 bytes (JSON-serialized). Over-size meta is dropped to undefined.
+*/
+/** Meta cap per server contract (JSON bytes). */
+const META_BYTE_CAP = 256;
+function sanitizeMeta(meta) {
+	if (meta === void 0) return void 0;
+	const serialized = JSON.stringify(meta);
+	if (new TextEncoder().encode(serialized).length > META_BYTE_CAP) return;
+	return meta;
+}
+async function doFetch(payload) {
+	const controller = new AbortController();
+	const timeoutId = setTimeout(() => controller.abort(), 5e3);
+	try {
+		return (await fetch(`${TELEMETRY_ENDPOINT}/e`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(payload),
+			signal: controller.signal
+		})).ok;
+	} catch {
+		return false;
+	} finally {
+		clearTimeout(timeoutId);
+	}
+}
+function delay(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+* Send a telemetry event. Drops silently if consent is not "granted".
+*/
+async function send(event, version, meta) {
+	if (readConsentState() !== "granted") return;
+	const payload = {
+		source: "devtools",
+		event,
+		anon_id: getOrCreateAnonId(),
+		version,
+		ts: Date.now(),
+		meta: sanitizeMeta(meta)
+	};
+	if (await doFetch(payload)) return;
+	if (process.env.NODE_ENV !== "production") console.debug("[@ait-co/devtools] telemetry: retrying after failure", event);
+	await delay(2e3);
+	await doFetch(payload);
+}
+/**
+* Send the "session_duration" event via sendBeacon (unload-safe).
+* Falls back to fetch with keepalive if sendBeacon is unavailable.
+* No retry during page unload.
+*/
+function sendBeaconEvent(event, version, meta) {
+	if (readConsentState() !== "granted") return;
+	const payload = {
+		source: "devtools",
+		event,
+		anon_id: getOrCreateAnonId(),
+		version,
+		ts: Date.now(),
+		meta: sanitizeMeta(meta)
+	};
+	const body = JSON.stringify(payload);
+	if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+		navigator.sendBeacon(`${TELEMETRY_ENDPOINT}/e`, new Blob([body], { type: "application/json" }));
+		return;
+	}
+	fetch(`${TELEMETRY_ENDPOINT}/e`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body,
+		keepalive: true
+	}).catch(() => {});
+}
+//#endregion
+//#region src/telemetry/index.ts
+/**
+* Telemetry client — internal to @ait-co/devtools.
+*
+* NOT exported from src/mock/index.ts — this is panel-internal only.
+*
+* Usage: import { telemetry } from './telemetry/index.js' (from panel code).
+*/
+/**
+* Telemetry ingest endpoint.
+* Overridable at build time via define (e.g., for e2e / local dev).
+* Do NOT expose this as a public env-var surface.
+*/
+function readGlobalString(key) {
+	const val = globalThis[key];
+	return typeof val === "string" ? val : void 0;
+}
+const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
+function getVersion() {
+	return readGlobalString("__VERSION__") ?? "0.0.0";
+}
+let panelVisibleSince = null;
+let accumulatedMs = 0;
+let pagehideWired = false;
+function onPanelVisible() {
+	if (panelVisibleSince === null) panelVisibleSince = Date.now();
+}
+function onPanelHidden() {
+	if (panelVisibleSince !== null) {
+		accumulatedMs += Date.now() - panelVisibleSince;
+		panelVisibleSince = null;
+	}
+}
+function wirePagehide() {
+	if (pagehideWired) return;
+	pagehideWired = true;
+	window.addEventListener("pagehide", () => {
+		onPanelHidden();
+		if (accumulatedMs > 0) sendBeaconEvent("session_duration", getVersion(), { ms: accumulatedMs });
+	});
+}
+/**
+* Call once after panel mounts.
+* Handles: consent check, optional toast, panel_mount event, pagehide wiring.
+*/
+function init() {
+	if (typeof window === "undefined" || typeof document === "undefined") return;
+	wirePagehide();
+	if (resolveEffectiveConsent() === "granted") {
+		getOrCreateAnonId();
+		send("panel_mount", getVersion());
+		return;
+	}
+	if (shouldShowToast()) {
+		const showToast = () => {
+			showConsentToast({
+				onAccept: () => {
+					acceptConsent();
+					getOrCreateAnonId();
+					send("panel_mount", getVersion());
+				},
+				onDeny: () => {
+					denyConsent();
+				}
+			});
+		};
+		if (typeof requestIdleCallback === "function") requestIdleCallback(showToast, { timeout: 3e3 });
+		else setTimeout(showToast, 1500);
+	}
+}
+/**
+* Call when the panel is opened/toggled visible.
+*/
+function onPanelOpen() {
+	send("panel_open", getVersion());
+	onPanelVisible();
+}
+/**
+* Call when the panel is closed/hidden.
+*/
+function onPanelClose() {
+	onPanelHidden();
+}
+/**
+* Call when the user switches tabs.
+*/
+function onTabView(tabId) {
+	send("tab_view", getVersion(), { tab: tabId });
+}
+const telemetry = {
+	init,
+	onPanelOpen,
+	onPanelClose,
+	onTabView
+};
+//#endregion
 //#region src/panel/helpers.ts
 /**
 * 공통 DOM 헬퍼 함수
@@ -1621,9 +2045,54 @@ function renderEnvironmentTab() {
 		"OFFLINE",
 		"WWAN",
 		"UNKNOWN"
-	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Safe Area Insets"), inputRow("Top", String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)));
+	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Safe Area Insets"), inputRow("Top", String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)), buildTelemetrySection());
 	return container;
 }
+function buildTelemetrySection() {
+	const isGranted = readConsentState() === "granted";
+	const statusLabel = h("span", { style: `font-size:12px;font-weight:600;color:${isGranted ? "#4ade80" : "#888"}` }, isGranted ? "On" : "Off");
+	const toggleBtn = h("button", {
+		className: "ait-btn ait-btn-sm",
+		style: "font-size:11px"
+	}, isGranted ? "Turn off" : "Turn on");
+	toggleBtn.addEventListener("click", () => {
+		setConsentViaToggle(!isGranted);
+		window.dispatchEvent(new CustomEvent("__ait:panel-switch-tab", { detail: { tab: "env" } }));
+	});
+	const statusRow = h("div", { className: "ait-row" }, h("label", {}, "Telemetry"), h("span", { style: "display:flex;align-items:center;gap:8px" }, statusLabel, toggleBtn));
+	const anonId = localStorage.getItem("__ait_telemetry:anon_id") ?? "(not yet set)";
+	const anonIdEl = h("span", {
+		style: "font-family:'SF Mono','Menlo',monospace;font-size:11px;color:#95e6cb;cursor:pointer",
+		title: "Click to copy full anon_id"
+	}, `anon_id: ${anonId.length > 8 ? `${anonId.slice(0, 8)}…` : anonId}`);
+	anonIdEl.addEventListener("click", () => {
+		navigator.clipboard.writeText(anonId).catch(() => {});
+	});
+	const deleteBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "내 데이터 삭제");
+	const deleteStatus = h("span", { style: "font-size:11px;color:#aaa" });
+	deleteBtn.addEventListener("click", () => {
+		deleteBtn.disabled = true;
+		deleteStatus.textContent = "삭제 중…";
+		deleteMyData(TELEMETRY_ENDPOINT).then((ok) => {
+			deleteStatus.textContent = ok ? "삭제 완료" : "삭제 실패 (다시 시도해주세요)";
+			deleteBtn.disabled = false;
+		}).catch(() => {
+			deleteStatus.textContent = "삭제 실패";
+			deleteBtn.disabled = false;
+		});
+	});
+	const privacyLink = h("a", {
+		href: "https://docs.aitc.dev/privacy",
+		target: "_blank",
+		rel: "noopener noreferrer",
+		style: "font-size:11px;color:#666;text-decoration:none"
+	});
+	privacyLink.textContent = "개인정보 처리방침";
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Telemetry"), statusRow, h("div", { style: "margin-bottom:6px" }, anonIdEl), h("div", {
+		className: "ait-btn-row",
+		style: "align-items:center;gap:8px;margin-top:6px"
+	}, deleteBtn, deleteStatus), h("div", { style: "margin-top:8px" }, privacyLink));
+}
 //#endregion
 //#region src/panel/tabs/events.ts
 function renderEventsTab() {
@@ -1832,6 +2301,43 @@ function renderLocationTab() {
 	return container;
 }
 //#endregion
+//#region src/panel/tabs/notifications.ts
+const RESULTS = [
+	{
+		value: "newAgreement",
+		label: "newAgreement (first-time agree)"
+	},
+	{
+		value: "alreadyAgreed",
+		label: "alreadyAgreed (already opted-in)"
+	},
+	{
+		value: "agreementRejected",
+		label: "agreementRejected (user declined)"
+	}
+];
+function radioRow(name, current, option, disabled) {
+	const input = h("input", {
+		type: "radio",
+		name,
+		value: option.value
+	});
+	input.checked = current === option.value;
+	if (disabled) input.disabled = true;
+	input.addEventListener("change", () => {
+		if (input.checked) aitState.patch("notification", { nextResult: option.value });
+	});
+	return h("label", { className: "ait-row" }, input, h("span", {}, option.label));
+}
+function renderNotificationsTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "requestNotificationAgreement"), ...RESULTS.map((opt) => radioRow("ait-notification-result", s.notification.nextResult, opt, disabled))));
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/permissions.ts
 function renderPermissionsTab() {
 	const s = aitState.state;
@@ -2888,6 +3394,10 @@ const TABS = [
 		id: "permissions",
 		label: "Permissions"
 	},
+	{
+		id: "notifications",
+		label: "Notifications"
+	},
 	{
 		id: "location",
 		label: "Location"
@@ -2922,6 +3432,7 @@ function createTabRenderers(refreshPanel) {
 		env: renderEnvironmentTab,
 		presets: () => renderPresetsTab(refreshPanel),
 		permissions: renderPermissionsTab,
+		notifications: renderNotificationsTab,
 		location: renderLocationTab,
 		device: renderDeviceTab,
 		viewport: renderViewportTab,
@@ -3114,6 +3625,7 @@ function mount() {
 	closeBtn.addEventListener("click", () => {
 		isOpen = false;
 		panelEl.classList.remove("open");
+		telemetry.onPanelClose();
 	});
 	const mockBadge = h("span", {
 		className: `ait-mock-badge ${aitState.state.panelEditable ? "ait-mock-badge-on" : "ait-mock-badge-off"}`,
@@ -3125,7 +3637,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.14`), closeBtn);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.15`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of TABS) {
@@ -3135,6 +3647,7 @@ function mount() {
 		}, tab.label);
 		tabEl.addEventListener("click", () => {
 			currentTab = tab.id;
+			telemetry.onTabView(tab.id);
 			refreshPanel();
 		});
 		tabsEl.appendChild(tabEl);
@@ -3150,7 +3663,8 @@ function mount() {
 		if (isOpen) {
 			updatePanelPosition(toggle);
 			refreshPanel();
-		}
+			telemetry.onPanelOpen();
+		} else telemetry.onPanelClose();
 	});
 	let resizeRaf = 0;
 	resizeHandler = () => {
@@ -3180,6 +3694,7 @@ function mount() {
 	};
 	window.addEventListener("__ait:panel-switch-tab", panelSwitchTabHandler);
 	refreshPanel();
+	telemetry.init();
 }
 /**
 * Pairs with `mount()` (and the existing `disposeViewport()`).