@ait-co/devtools 0.1.32 → 0.1.34

package/dist/panel/index.js

@@ -90,6 +90,10 @@ const en = {
 	"device.prompt.label.lng": "Lng",
 	"device.prompt.send": "Send",
 	"device.prompt.cancel": "Cancel",
+	"device.section.haptic": "Haptic",
+	"device.haptic.lastCall": "Last haptic",
+	"device.haptic.noneYet": "(none yet)",
+	"device.haptic.trigger": "Trigger haptic",
 	"viewport.section.device": "Device",
 	"viewport.row.preset": "Preset",
 	"viewport.row.orientation": "Orientation",
@@ -125,6 +129,9 @@ const en = {
 	"events.row.tossLoginIntegrated": "Toss Login Integrated",
 	"analytics.section.log": "Analytics Log ({count})",
 	"analytics.btn.clear": "Clear",
+	"analytics.calls.section": "SDK Calls ({count})",
+	"analytics.calls.btn.clear": "Clear",
+	"analytics.calls.empty": "(no SDK calls yet)",
 	"storage.section.title": "Storage ({count} items)",
 	"storage.btn.clearAll": "Clear All",
 	"storage.empty": "No items in storage",
@@ -149,6 +156,13 @@ const en = {
 	"ads.section.fullScreenAd": "FullScreenAd",
 	"ads.btn.load": "Load",
 	"ads.btn.show": "Show",
+	"ads.section.tossAdsBanner": "TossAds Banner",
+	"ads.row.rewardUnitType": "Reward unit type",
+	"ads.row.rewardAmount": "Reward amount",
+	"ads.btn.render": "Render",
+	"ads.btn.noFill": "No-fill",
+	"ads.btn.click": "Click",
+	"ads.btn.destroy": "Destroy",
 	"notifications.section.title": "requestNotificationAgreement",
 	"notifications.option.newAgreement": "newAgreement (first-time agree)",
 	"notifications.option.alreadyAgreed": "alreadyAgreed (already opted-in)",
@@ -247,6 +261,10 @@ const ko = {
 	"device.prompt.label.lng": "Lng",
 	"device.prompt.send": "Send",
 	"device.prompt.cancel": "Cancel",
+	"device.section.haptic": "Haptic",
+	"device.haptic.lastCall": "마지막 haptic",
+	"device.haptic.noneYet": "(아직 없음)",
+	"device.haptic.trigger": "Haptic 트리거",
 	"viewport.section.device": "Device",
 	"viewport.row.preset": "Preset",
 	"viewport.row.orientation": "Orientation",
@@ -282,6 +300,9 @@ const ko = {
 	"events.row.tossLoginIntegrated": "Toss Login Integrated",
 	"analytics.section.log": "Analytics Log ({count})",
 	"analytics.btn.clear": "Clear",
+	"analytics.calls.section": "SDK Calls ({count})",
+	"analytics.calls.btn.clear": "Clear",
+	"analytics.calls.empty": "(아직 SDK 호출 없음)",
 	"storage.section.title": "Storage ({count} items)",
 	"storage.btn.clearAll": "Clear All",
 	"storage.empty": "저장된 항목이 없습니다",
@@ -306,6 +327,13 @@ const ko = {
 	"ads.section.fullScreenAd": "FullScreenAd",
 	"ads.btn.load": "Load",
 	"ads.btn.show": "Show",
+	"ads.section.tossAdsBanner": "TossAds 배너",
+	"ads.row.rewardUnitType": "리워드 단위 타입",
+	"ads.row.rewardAmount": "리워드 수량",
+	"ads.btn.render": "Render",
+	"ads.btn.noFill": "No-fill",
+	"ads.btn.click": "Click",
+	"ads.btn.destroy": "Destroy",
 	"notifications.section.title": "requestNotificationAgreement",
 	"notifications.option.newAgreement": "newAgreement (최초 동의)",
 	"notifications.option.alreadyAgreed": "alreadyAgreed (이미 동의됨)",
@@ -392,6 +420,8 @@ function t(key, vars) {
 }
 //#endregion
 //#region src/mock/state.ts
+/** SDK 호출 로그 ring buffer 상한 */
+const SDK_CALL_LOG_MAX = 200;
 const DEFAULT_STATE = {
 	platform: "ios",
 	environment: "sandbox",
@@ -469,7 +499,9 @@ const DEFAULT_STATE = {
 		isLoaded: false,
 		nextEvent: "loaded",
 		forceNoFill: false,
-		lastEvent: null
+		lastEvent: null,
+		rewardUnitType: "coins",
+		rewardAmount: 10
 	},
 	game: {
 		profile: {
@@ -479,6 +511,7 @@ const DEFAULT_STATE = {
 		leaderboardScores: []
 	},
 	analyticsLog: [],
+	sdkCallLog: [],
 	deviceModes: {
 		camera: "mock",
 		photos: "mock",
@@ -591,6 +624,19 @@ var AitStateManager = class {
 		};
 		this._notify();
 	}
+	/**
+	* SDK 호출 로그 추가 (ring buffer, 상한 SDK_CALL_LOG_MAX).
+	* `observe()`가 호출하고, proxy의 KNOWN_UNIMPLEMENTED 경로도 직접 호출한다.
+	*/
+	logSdkCall(entry) {
+		const log = this._state.sdkCallLog;
+		const next = log.length >= SDK_CALL_LOG_MAX ? log.slice(1 - SDK_CALL_LOG_MAX) : log;
+		this._state = {
+			...this._state,
+			sdkCallLog: [...next, entry]
+		};
+		this._notify();
+	}
 	/** 이벤트 트리거 (backEvent, homeEvent 등) */
 	trigger(event) {
 		window.dispatchEvent(new CustomEvent(`__ait:${event}`));
@@ -1063,7 +1109,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.32";
+	return "0.1.34";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -2073,6 +2119,75 @@ const _fetchContacts = async (options) => {
 };
 withPermission(_fetchContacts, "contacts");
 //#endregion
+//#region src/mock/device/haptic.ts
+/**
+* Haptic Feedback & saveBase64Data mock
+*
+* generateHapticFeedback — 영역 3 (하드웨어 API 관측):
+*   - 10종 HapticFeedbackType을 navigator.vibrate 패턴으로 매핑(근사, best-effort).
+*   - `typeof navigator.vibrate === 'function'` 가드 — API 없는 환경에서 throw 없이 skip.
+*   - sdkCallLog에 🟡(partial)로 기록. params: { hapticType, vibrated: boolean }.
+*   - 시그니처 불변 — __typecheck.ts의 Assert<Mock, Original> 통과.
+*/
+/**
+* HapticFeedbackType 10종 → navigator.vibrate 패턴 매핑.
+* 숫자: 진동 ms. 배열: [진동, 정지, 진동, …] 교대 패턴.
+*/
+const HAPTIC_VIBRATE_PATTERN = {
+	tickWeak: 10,
+	tap: 20,
+	tickMedium: 30,
+	softMedium: 40,
+	basicWeak: 15,
+	basicMedium: 50,
+	success: [
+		10,
+		40,
+		10
+	],
+	error: [
+		40,
+		30,
+		40
+	],
+	wiggle: [
+		20,
+		20,
+		20,
+		20,
+		20
+	],
+	confetti: [
+		10,
+		20,
+		10,
+		20,
+		10,
+		20,
+		10
+	]
+};
+async function generateHapticFeedback(options) {
+	const timestamp = Date.now();
+	aitState.logAnalytics({
+		type: "haptic",
+		params: { hapticType: options.type }
+	});
+	const pattern = HAPTIC_VIBRATE_PATTERN[options.type] ?? 30;
+	const vibrated = typeof navigator.vibrate === "function" ? navigator.vibrate(pattern) : false;
+	aitState.logSdkCall({
+		method: "generateHapticFeedback",
+		args: [{ type: options.type }],
+		timestamp,
+		status: "resolved",
+		result: {
+			hapticType: options.type,
+			vibrated
+		},
+		fidelity: "partial"
+	});
+}
+//#endregion
 //#region src/mock/device/location.ts
 /**
 * Location mock (getCurrentLocation, startUpdateLocation)
@@ -2184,12 +2299,35 @@ withPermission(_startUpdateLocation, "geolocation");
 * mock이 미구현인 API는 실 SDK에서는 존재할 수 있고, 사용자가 이를 인지하지
 * 못한 채 개발을 이어가면 배포 시점에 놀라게 된다. 에러 메시지에 이슈 URL을
 * 포함해 사용자가 mock 누락을 제보할 수 있게 한다.
+*
+* ## KNOWN_UNIMPLEMENTED 정책
+* SDK에 존재하는 것으로 알려져 있으나 현재 mock이 없는 API 이름만 이 집합에 둔다.
+* 이 경우에만 throw 대신 🔴 inert no-op을 반환하고 sdkCallLog에 기록한다.
+* 완전히 미지의 이름은 여전히 throw — "잘 되는 척" 방지.
 */
 const ISSUES_URL = "https://github.com/apps-in-toss-community/devtools/issues";
+/**
+* SDK에 존재하나 mock이 아직 없는 것으로 확인된 이름 목록.
+* 새 API가 SDK에 추가되면 여기에 추가하고 별도 PR에서 mock 구현으로 이동한다.
+* 확인되지 않은 이름은 절대 여기에 추가하지 않는다 — throw가 더 안전하다.
+*/
+const KNOWN_UNIMPLEMENTED = /* @__PURE__ */ new Set([]);
 function createMockProxy(moduleName, implementations) {
 	return new Proxy(implementations, { get(target, prop) {
 		if (typeof prop === "symbol") return void 0;
 		if (prop in target) return target[prop];
+		const name = String(prop);
+		if (KNOWN_UNIMPLEMENTED.has(name)) return (...args) => {
+			console.warn(`[@ait-co/devtools] ${moduleName}.${name} is known-unimplemented (🔴 inert). Returning undefined. Please file or upvote an issue: ${ISSUES_URL}`);
+			aitState.logSdkCall({
+				method: `${moduleName}.${name}`,
+				args,
+				timestamp: Date.now(),
+				status: "resolved",
+				result: void 0,
+				fidelity: "inert"
+			});
+		};
 		throw new Error(`[@ait-co/devtools] ${moduleName}.${prop} is not mocked. This API may exist in @apps-in-toss/web-framework, but devtools' mock does not cover it yet. Please file an issue: ${ISSUES_URL}`);
 	} });
 }
@@ -2397,19 +2535,127 @@ function renderDeviceTab() {
 	});
 	if (disabled) clearImagesBtn.disabled = true;
 	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("device.section.mockImages", { count: images.length })), imageGrid, h("div", { className: "ait-btn-row" }, addBtn, defaultsBtn, clearImagesBtn)));
+	container.appendChild(renderHapticSection());
 	return container;
 }
+function renderHapticSection() {
+	const lastResult = [...aitState.state.sdkCallLog].reverse().find((e) => e.method === "generateHapticFeedback")?.result;
+	const lastCallValue = lastResult ? `${lastResult.hapticType} (vibrated: ${String(lastResult.vibrated)})` : t("device.haptic.noneYet");
+	const lastCallRow = h("div", { className: "ait-row" }, h("label", {}, t("device.haptic.lastCall")), h("span", { className: "ait-value" }, lastCallValue));
+	const hapticTypes = Object.keys(HAPTIC_VIBRATE_PATTERN);
+	const triggerSection = h("div", { className: "ait-section-subtitle" }, t("device.haptic.trigger"));
+	const btnRow = h("div", { className: "ait-btn-row" }, ...hapticTypes.map((type) => {
+		const btn = h("button", {
+			className: "ait-btn-secondary",
+			"data-testid": `haptic-${type}-btn`
+		}, type);
+		btn.addEventListener("click", () => {
+			generateHapticFeedback({ type }).then(() => {
+				refreshPanel$1();
+			});
+		});
+		return btn;
+	}));
+	return h("div", {
+		className: "ait-section",
+		"data-testid": "section-haptic"
+	}, h("div", { className: "ait-section-title" }, t("device.section.haptic")), lastCallRow, triggerSection, btnRow);
+}
+//#endregion
+//#region src/mock/observe.ts
+/**
+* fn을 observe로 감싼다.
+*
+* @param apiName  - 로그에 기록할 SDK 메서드 이름 (예: `'setScreenAwakeMode'`)
+* @param fidelity - 이 mock의 fidelity grade ('faithful' | 'partial' | 'inert')
+* @param fn       - 실제 mock 구현체. 시그니처를 그대로 통과시킨다.
+* @returns fn과 동일한 타입의 래퍼 함수
+*/
+function observe(apiName, fidelity, fn) {
+	return (...args) => {
+		const timestamp = Date.now();
+		const safeArgs = args.map((a) => safeSerialize(a));
+		const result = fn(...args);
+		if (result instanceof Promise) {
+			aitState.logSdkCall({
+				method: apiName,
+				args: safeArgs,
+				timestamp,
+				status: "pending",
+				fidelity
+			});
+			result.then((value) => {
+				aitState.logSdkCall({
+					method: apiName,
+					args: safeArgs,
+					timestamp,
+					status: "resolved",
+					result: safeSerialize(value),
+					fidelity
+				});
+			}, (err) => {
+				aitState.logSdkCall({
+					method: apiName,
+					args: safeArgs,
+					timestamp,
+					status: "rejected",
+					error: err instanceof Error ? err.message : String(err),
+					fidelity
+				});
+			});
+			return result;
+		}
+		aitState.logSdkCall({
+			method: apiName,
+			args: safeArgs,
+			timestamp,
+			status: "resolved",
+			result: safeSerialize(result),
+			fidelity
+		});
+		return result;
+	};
+}
+/**
+* 값을 JSON-safe한 형태로 변환한다.
+* - null / primitive — 그대로.
+* - 함수 — `'[Function: name]'` 문자열.
+* - 기타 객체 — JSON.stringify 실패 시 `'[unserializable]'`.
+*/
+function safeSerialize(value) {
+	if (value === null || value === void 0) return value;
+	if (typeof value === "function") return `[Function: ${value.name || "anonymous"}]`;
+	if (typeof value !== "object") return value;
+	try {
+		return JSON.parse(JSON.stringify(value));
+	} catch {
+		return "[unserializable]";
+	}
+}
 //#endregion
 //#region src/mock/ads/index.ts
 /**
 * 광고 mock (GoogleAdMob, TossAds, FullScreenAd)
+*
+* 변경 이력 (#196):
+* - slot 레지스트리로 TossAds destroy/destroyAll 누수 수정 (🟡→🟢)
+* - attachBanner BannerSlotCallbacks 발화 (onAdRendered/onAdImpression/onNoFill 등)
+* - initialize onInitialized/onInitializationFailed 발화
+* - AdMob reward 파라미터화 (state.ads.rewardUnitType/rewardAmount)
+* - 모든 호출 observe()로 sdkCallLog에 기록
 */
 function withIsSupported(fn) {
 	fn.isSupported = () => true;
 	return fn;
 }
+const _slotRegistry = /* @__PURE__ */ new Map();
+let _slotCounter = 0;
+function _nextSlotId(adGroupId) {
+	_slotCounter += 1;
+	return `mock-slot-${adGroupId}-${_slotCounter}`;
+}
 const GoogleAdMob = createMockProxy("GoogleAdMob", {
-	loadAppsInTossAdMob: withIsSupported((args) => {
+	loadAppsInTossAdMob: withIsSupported(observe("GoogleAdMob.loadAppsInTossAdMob", "faithful", (args) => {
 		setTimeout(() => {
 			if (aitState.state.ads.forceNoFill) {
 				args.onError(/* @__PURE__ */ new Error("No fill"));
@@ -2422,8 +2668,8 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 			});
 		}, 200);
 		return () => {};
-	}),
-	showAppsInTossAdMob: withIsSupported((args) => {
+	})),
+	showAppsInTossAdMob: withIsSupported(observe("GoogleAdMob.showAppsInTossAdMob", "faithful", (args) => {
 		if (!aitState.state.ads.isLoaded) {
 			args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
 			return () => {};
@@ -2432,11 +2678,12 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 		setTimeout(() => args.onEvent({ type: "show" }), 100);
 		setTimeout(() => args.onEvent({ type: "impression" }), 150);
 		setTimeout(() => {
+			const { rewardUnitType, rewardAmount } = aitState.state.ads;
 			args.onEvent({
 				type: "userEarnedReward",
 				data: {
-					unitType: "coins",
-					unitAmount: 10
+					unitType: rewardUnitType,
+					unitAmount: rewardAmount
 				}
 			});
 		}, 1e3);
@@ -2445,14 +2692,18 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 			aitState.patch("ads", { isLoaded: false });
 		}, 1500);
 		return () => {};
-	}),
-	isAppsInTossAdMobLoaded: withIsSupported(async (_options) => aitState.state.ads.isLoaded)
+	})),
+	isAppsInTossAdMobLoaded: withIsSupported(observe("GoogleAdMob.isAppsInTossAdMobLoaded", "faithful", async (_options) => aitState.state.ads.isLoaded))
 });
-createMockProxy("TossAds", {
-	initialize: withIsSupported((_options) => {
-		console.log("[@ait-co/devtools] TossAds.initialize (mock)");
-	}),
-	attach: withIsSupported((_adGroupId, target, _options) => {
+const TossAds = createMockProxy("TossAds", {
+	initialize: withIsSupported(observe("TossAds.initialize", "partial", (options) => {
+		if (aitState.state.ads.forceNoFill) {
+			options.callbacks?.onInitializationFailed?.(/* @__PURE__ */ new Error("No fill"));
+			return;
+		}
+		options.callbacks?.onInitialized?.();
+	})),
+	attach: withIsSupported(observe("TossAds.attach", "partial", (_adGroupId, target, _options) => {
 		const el = typeof target === "string" ? document.querySelector(target) : target;
 		if (el) {
 			const placeholder = document.createElement("div");
@@ -2460,21 +2711,76 @@ createMockProxy("TossAds", {
 			placeholder.textContent = "[@ait-co/devtools] TossAds Placeholder";
 			el.appendChild(placeholder);
 		}
-	}),
-	attachBanner: withIsSupported((_adGroupId, target, _options) => {
+	})),
+	attachBanner: withIsSupported(observe("TossAds.attachBanner", "faithful", (adGroupId, target, options) => {
 		const el = typeof target === "string" ? document.querySelector(target) : target;
+		const slotId = _nextSlotId(adGroupId);
+		const placeholder = document.createElement("div");
+		const theme = options?.theme ?? "auto";
+		const variant = options?.variant ?? "card";
+		const isDark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+		const bg = isDark ? "#1a1a1a" : "#f0f0f0";
+		const textColor = isDark ? "#aaa" : "#666";
+		const borderColor = isDark ? "#555" : "#999";
+		const height = variant === "expanded" ? "120px" : "60px";
+		placeholder.dataset.aitSlotId = slotId;
+		placeholder.style.cssText = `background:${bg};border:1px dashed ${borderColor};padding:8px 12px;text-align:center;color:${textColor};font-size:12px;min-height:${height};display:flex;align-items:center;justify-content:center;`;
+		placeholder.textContent = `[@ait-co/devtools] Banner Ad (${variant})`;
 		if (el) {
-			const placeholder = document.createElement("div");
-			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:12px;text-align:center;color:#666;font-size:12px;";
-			placeholder.textContent = "[@ait-co/devtools] Banner Ad Placeholder";
 			el.appendChild(placeholder);
+			_slotRegistry.set(slotId, placeholder);
+		}
+		const destroySlot = () => {
+			const registered = _slotRegistry.get(slotId);
+			if (registered) {
+				registered.remove();
+				_slotRegistry.delete(slotId);
+			}
+		};
+		setTimeout(() => {
+			if (aitState.state.ads.forceNoFill) {
+				options?.callbacks?.onNoFill?.({
+					slotId,
+					adGroupId,
+					adMetadata: {}
+				});
+				options?.callbacks?.onAdFailedToRender?.({
+					slotId,
+					adGroupId,
+					adMetadata: {},
+					error: {
+						code: 0,
+						message: "No fill"
+					}
+				});
+				return;
+			}
+			const eventPayload = {
+				slotId,
+				adGroupId,
+				adMetadata: {
+					creativeId: `mock-creative-${slotId}`,
+					requestId: `mock-req-${slotId}`
+				}
+			};
+			options?.callbacks?.onAdRendered?.(eventPayload);
+			options?.callbacks?.onAdImpression?.(eventPayload);
+		}, 100);
+		return { destroy: destroySlot };
+	})),
+	destroy: withIsSupported(observe("TossAds.destroy", "faithful", (slotId) => {
+		const el = _slotRegistry.get(slotId);
+		if (el) {
+			el.remove();
+			_slotRegistry.delete(slotId);
 		}
-		return { destroy: () => {} };
-	}),
-	destroy: withIsSupported((_slotId) => {}),
-	destroyAll: withIsSupported(() => {})
+	})),
+	destroyAll: withIsSupported(observe("TossAds.destroyAll", "faithful", () => {
+		for (const el of _slotRegistry.values()) el.remove();
+		_slotRegistry.clear();
+	}))
 });
-const loadFullScreenAd = withIsSupported((args) => {
+const loadFullScreenAd = withIsSupported(observe("loadFullScreenAd", "faithful", (args) => {
 	setTimeout(() => {
 		if (aitState.state.ads.forceNoFill) {
 			args.onError(/* @__PURE__ */ new Error("No fill"));
@@ -2487,8 +2793,8 @@ const loadFullScreenAd = withIsSupported((args) => {
 		});
 	}, 200);
 	return () => {};
-});
-const showFullScreenAd = withIsSupported((args) => {
+}));
+const showFullScreenAd = withIsSupported(observe("showFullScreenAd", "faithful", (args) => {
 	if (!aitState.state.ads.isLoaded) {
 		args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
 		return () => {};
@@ -2496,7 +2802,7 @@ const showFullScreenAd = withIsSupported((args) => {
 	setTimeout(() => args.onEvent({ type: "show" }), 100);
 	setTimeout(() => args.onEvent({ type: "dismissed" }), 1500);
 	return () => {};
-});
+}));
 //#endregion
 //#region src/panel/tabs/ads.ts
 function recordEvent(type) {
@@ -2531,6 +2837,57 @@ function adSection(title, onLoad, onShow, disabled) {
 	showBtn.addEventListener("click", onShow);
 	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title), h("div", { className: "ait-btn-row" }, loadBtn, showBtn));
 }
+/** TossAds 배너 인터랙티브 섹션 — Render/No-fill/Click/Destroy 버튼 */
+function tossAdsBannerSection(disabled) {
+	const mountTarget = h("div", { style: "min-height:60px;background:#111;border-radius:4px;margin-bottom:6px;overflow:hidden;" });
+	const renderBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.render"));
+	const noFillBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.noFill"));
+	const clickBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.click"));
+	const destroyBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.destroy"));
+	if (disabled) {
+		renderBtn.disabled = true;
+		noFillBtn.disabled = true;
+		clickBtn.disabled = true;
+		destroyBtn.disabled = true;
+	}
+	let currentHandle = null;
+	renderBtn.addEventListener("click", () => {
+		currentHandle?.destroy();
+		currentHandle = null;
+		mountTarget.innerHTML = "";
+		currentHandle = TossAds.attachBanner("mock-banner-group", mountTarget, {
+			theme: "auto",
+			variant: "card",
+			callbacks: {
+				onAdRendered: (p) => recordEvent(`onAdRendered(${p.slotId})`),
+				onAdImpression: (p) => recordEvent(`onAdImpression(${p.slotId})`),
+				onAdClicked: (p) => recordEvent(`onAdClicked(${p.slotId})`),
+				onAdFailedToRender: (p) => recordEvent(`error: onAdFailedToRender(${p.slotId})`),
+				onNoFill: (p) => recordEvent(`error: onNoFill(${p.slotId})`)
+			}
+		});
+	});
+	noFillBtn.addEventListener("click", () => {
+		currentHandle?.destroy();
+		currentHandle = null;
+		mountTarget.innerHTML = "";
+		const slotId = `mock-slot-no-fill-${Date.now()}`;
+		recordEvent(`error: onNoFill(${slotId})`);
+		recordEvent(`error: onAdFailedToRender(${slotId})`);
+	});
+	clickBtn.addEventListener("click", () => {
+		recordEvent("banner:clicked");
+	});
+	destroyBtn.addEventListener("click", () => {
+		if (currentHandle) {
+			currentHandle.destroy();
+			currentHandle = null;
+			mountTarget.innerHTML = "";
+			recordEvent("banner:destroyed");
+		} else recordError("No banner to destroy");
+	});
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.tossAdsBanner")), mountTarget, h("div", { className: "ait-btn-row" }, renderBtn, noFillBtn, clickBtn, destroyBtn));
+}
 function renderAdsTab() {
 	const s = aitState.state;
 	const disabled = !s.panelEditable;
@@ -2545,7 +2902,10 @@ function renderAdsTab() {
 	forceNoFillCb.addEventListener("change", () => {
 		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.state")), statusRow(t("ads.row.isLoaded"), String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, t("ads.row.forceNoFill")), forceNoFillCb), lastEventLine()), adSection(t("ads.section.googleAdMob"), () => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.state")), statusRow(t("ads.row.isLoaded"), String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, t("ads.row.forceNoFill")), forceNoFillCb), inputRow(t("ads.row.rewardUnitType"), s.ads.rewardUnitType, (v) => aitState.patch("ads", { rewardUnitType: v }), disabled), inputRow(t("ads.row.rewardAmount"), String(s.ads.rewardAmount), (v) => {
+		const n = Number(v);
+		if (!Number.isNaN(n)) aitState.patch("ads", { rewardAmount: n });
+	}, disabled), lastEventLine()), adSection(t("ads.section.googleAdMob"), () => {
 		GoogleAdMob.loadAppsInTossAdMob({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -2556,12 +2916,13 @@ function renderAdsTab() {
 			onError: (err) => recordError(err.message)
 		});
 	}, disabled), adSection(t("ads.section.tossAds"), () => {
-		if (aitState.state.ads.forceNoFill) {
-			recordError("No fill");
-			return;
-		}
-		aitState.patch("ads", { isLoaded: true });
-		recordEvent("loaded");
+		TossAds.initialize({ callbacks: {
+			onInitialized: () => {
+				aitState.patch("ads", { isLoaded: true });
+				recordEvent("loaded");
+			},
+			onInitializationFailed: (err) => recordError(err.message)
+		} });
 	}, () => {
 		if (!aitState.state.ads.isLoaded) {
 			recordError("Ad not loaded");
@@ -2572,7 +2933,7 @@ function renderAdsTab() {
 			recordEvent("dismissed");
 			aitState.patch("ads", { isLoaded: false });
 		}, 1500);
-	}, disabled), adSection(t("ads.section.fullScreenAd"), () => {
+	}, disabled), tossAdsBannerSection(disabled), adSection(t("ads.section.fullScreenAd"), () => {
 		loadFullScreenAd({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -2587,19 +2948,37 @@ function renderAdsTab() {
 }
 //#endregion
 //#region src/panel/tabs/analytics.ts
+const FIDELITY_BADGE = {
+	faithful: "🟢",
+	partial: "🟡",
+	inert: "🔴"
+};
 function renderAnalyticsTab() {
 	const disabled = !aitState.state.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
 	const logs = aitState.state.analyticsLog;
-	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.btn.clear"));
-	if (disabled) clearBtn.disabled = true;
-	clearBtn.addEventListener("click", () => {
+	const clearAnalyticsBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.btn.clear"));
+	if (disabled) clearAnalyticsBtn.disabled = true;
+	clearAnalyticsBtn.addEventListener("click", () => {
 		aitState.update({ analyticsLog: [] });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.section.log", { count: logs.length })), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.section.log", { count: logs.length })), clearAnalyticsBtn), ...logs.slice(-30).reverse().map((entry) => {
 		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString()), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
 	})));
+	const calls = aitState.state.sdkCallLog;
+	const clearCallsBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.calls.btn.clear"));
+	if (disabled) clearCallsBtn.disabled = true;
+	clearCallsBtn.addEventListener("click", () => {
+		aitState.update({ sdkCallLog: [] });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.calls.section", { count: calls.length })), clearCallsBtn), calls.length === 0 ? h("div", { className: "ait-log-entry ait-log-empty" }, t("analytics.calls.empty")) : h("div", {}, ...calls.slice(-50).reverse().map((call) => {
+		const badge = FIDELITY_BADGE[call.fidelity] ?? "⬜";
+		const time = new Date(call.timestamp).toLocaleTimeString();
+		const argsStr = call.args.length > 0 ? `(${call.args.map((a) => JSON.stringify(a)).join(", ")})` : "()";
+		const statusSuffix = call.status === "rejected" ? ` ✗ ${call.error ?? "error"}` : call.status === "pending" ? " …" : "";
+		return h("div", { className: `ait-log-entry ait-sdk-call ait-sdk-call-${call.fidelity}` }, h("span", { className: "ait-log-badge" }, badge), h("span", { className: "ait-log-method" }, call.method), h("span", { className: "ait-log-args" }, argsStr), h("span", { className: "ait-log-time" }, ` · ${time}`), statusSuffix ? h("span", { className: "ait-log-status" }, statusSuffix) : "");
+	}))));
 	return container;
 }
 //#endregion
@@ -3341,9 +3720,17 @@ async function closeView() {
 	console.log("[@ait-co/devtools] closeView called");
 	window.history.back();
 }
-async function requestReview() {
+observe("setScreenAwakeMode", "inert", async (options) => {
+	console.log("[@ait-co/devtools] setScreenAwakeMode:", options.enabled);
+	return { enabled: options.enabled };
+});
+observe("setSecureScreen", "inert", async (options) => {
+	console.log("[@ait-co/devtools] setSecureScreen:", options.enabled);
+	return { enabled: options.enabled };
+});
+const requestReview = observe("requestReview", "inert", async () => {
 	console.log("[@ait-co/devtools] requestReview called");
-}
+});
 requestReview.isSupported = () => true;
 async function getServerTime() {
 	return Date.now();
@@ -3473,6 +3860,20 @@ const NONE_PRESET = {
 	navBarHeight: 0,
 	safeAreaBottom: 0
 };
+const CUSTOM_PRESET = {
+	id: "custom",
+	label: "Custom",
+	width: 0,
+	height: 0,
+	dpr: 1,
+	notch: "none",
+	notchInset: 0,
+	navBarHeight: 0,
+	safeAreaBottom: 0
+};
+/** Shorthands used when building preset provenance entries. */
+const EXTRAPOLATED = { source: "extrapolated" };
+const PLACEHOLDER = { source: "placeholder" };
 /**
 * Device presets (2026). CSS viewport 크기는 실제 기기의 `window.innerWidth/innerHeight`.
 * iPhone 17 시리즈는 2025-09 출시. iPhone Air는 2026-04 출시.
@@ -3493,6 +3894,13 @@ const NONE_PRESET = {
 *
 * iPhone 17과 17 Pro는 CSS viewport / DPR / safe area가 동일 — 이는 의도이며 카피-페이스트
 * 실수가 아니다. Apple의 17 lineup은 base와 Pro의 web-relevant 스펙이 같다.
+*
+* safeAreaProvenance: 각 preset의 safe-area 값 신뢰도 출처.
+* - `measured` — relay 실기기 세션(measure_safe_area)으로 직접 확인한 값.
+*   현재 iPhone 15 Pro portrait iOS partner만 해당 (devtools#190).
+* - `extrapolated` — Apple 스펙/같은 시리즈 기기에서 유추한 값.
+* - `placeholder` — 연결 기기 없이 추정한 값. QA ground truth로 쓰지 말 것.
+*   `measure_safe_area` MCP 툴로 relay 세션에서 `measured`로 승급 필요.
 */
 const VIEWPORT_PRESETS = [
 	NONE_PRESET,
@@ -3505,7 +3913,8 @@ const VIEWPORT_PRESETS = [
 		notch: "none",
 		notchInset: 20,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-15-pro",
@@ -3516,7 +3925,12 @@ const VIEWPORT_PRESETS = [
 		notch: "dynamic-island",
 		notchInset: 59,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: {
+			source: "measured",
+			device: "iPhone 15 Pro",
+			date: "2026-05-25"
+		}
 	},
 	{
 		id: "iphone-16e",
@@ -3527,7 +3941,8 @@ const VIEWPORT_PRESETS = [
 		notch: "notch",
 		notchInset: 47,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17",
@@ -3538,7 +3953,8 @@ const VIEWPORT_PRESETS = [
 		notch: "dynamic-island",
 		notchInset: 59,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-air",
@@ -3549,7 +3965,8 @@ const VIEWPORT_PRESETS = [
 		notch: "dynamic-island",
 		notchInset: 59,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17-pro",
@@ -3560,7 +3977,8 @@ const VIEWPORT_PRESETS = [
 		notch: "dynamic-island",
 		notchInset: 59,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17-pro-max",
@@ -3571,7 +3989,8 @@ const VIEWPORT_PRESETS = [
 		notch: "dynamic-island",
 		notchInset: 62,
 		navBarHeight: 54,
-		safeAreaBottom: 34
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "galaxy-s26",
@@ -3582,7 +4001,8 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 32,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-s26-plus",
@@ -3593,7 +4013,8 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 32,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-s26-ultra",
@@ -3604,7 +4025,8 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 40,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-flip7",
@@ -3615,7 +4037,8 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 36,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-fold7-folded",
@@ -3626,7 +4049,8 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 32,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-fold7-unfolded",
@@ -3637,19 +4061,10 @@ const VIEWPORT_PRESETS = [
 		notch: "punch-hole-center",
 		notchInset: 32,
 		navBarHeight: 54,
-		safeAreaBottom: 0
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
-	{
-		id: "custom",
-		label: "Custom",
-		width: 0,
-		height: 0,
-		dpr: 1,
-		notch: "none",
-		notchInset: 0,
-		navBarHeight: 0,
-		safeAreaBottom: 0
-	}
+	CUSTOM_PRESET
 ];
 function getPreset(id) {
 	return VIEWPORT_PRESETS.find((p) => p.id === id) ?? NONE_PRESET;
@@ -4015,6 +4430,24 @@ function initViewport() {
 }
 //#endregion
 //#region src/panel/tabs/viewport.ts
+/**
+* Renders a small inline provenance badge for safe-area values.
+* - `measured`     — no badge (confirmed value)
+* - `extrapolated` — "(추정치)" in muted gray
+* - `placeholder`  — "(미측정)" in amber
+*/
+function provenanceBadge(provenance) {
+	if (!provenance || provenance.source === "measured") return null;
+	const text = provenance.source === "placeholder" ? "(미측정)" : "(추정치)";
+	const color = provenance.source === "placeholder" ? "#b45309" : "#888";
+	const badge = h("span", {
+		className: "ait-provenance-badge",
+		title: provenance.source === "placeholder" ? "safe-area 값이 미실측 추정치입니다. relay 세션에서 measure_safe_area로 실측 후 승급하세요." : "safe-area 값이 기기 스펙에서 유추한 추정치입니다. relay 세션에서 measure_safe_area로 확인하세요."
+	});
+	badge.textContent = text;
+	badge.style.cssText = `font-size:10px;color:${color};margin-left:4px`;
+	return badge;
+}
 function renderViewportTab() {
 	const s = aitState.state;
 	const vp = s.viewport;
@@ -4134,7 +4567,10 @@ function renderViewportTab() {
 		rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.cssPhysical")), h("span", { className: "ait-status-value" }, `${size.width}×${size.height}@${dpr}x | ${physW}×${physH} ${orientDisplay}`)));
 		if (preset) {
 			const insets = computeSafeAreaInsets(preset, landscape, vp.landscapeSide, vp.aitNavBar, vp.aitNavBarType);
-			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.safeArea")), h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`)));
+			const safeAreaValueEl = h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`);
+			const badge = provenanceBadge(preset.safeAreaProvenance);
+			if (badge) safeAreaValueEl.appendChild(badge);
+			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.safeArea")), safeAreaValueEl));
 		}
 		if (vp.aitNavBar && !landscape) {
 			const navBarTop = vp.aitNavBarType === "partner" ? preset?.navBarHeight ?? 0 : 0;
@@ -4437,7 +4873,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? t("panel.editMode.on") : t("panel.editMode.off");
 		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.32`), 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.34`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, t("panel.title")), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of getTabs()) {