@ait-co/devtools 0.1.67 → 0.1.68

package/dist/{qr-http-server-BUfbLGm1.js → qr-http-server-DKEca8J3.js}

@@ -184,16 +184,27 @@ const en = {
 	"attach.title": "AIT Debug Session — QR Scan",
 	"attach.deployment": "deployment: {label}",
 	"attach.steps.section": "How to scan",
-	"attach.step1": "Open the Toss app.",
-	"attach.step2": "Scan the QR code with your phone camera app.",
-	"attach.step3": "Tap <strong>\"Open in Toss\"</strong> when the popup appears.",
-	"attach.step4": "The mini-app opens and the debug session attaches automatically.",
 	"attach.faq.section": "Troubleshooting checklist",
-	"attach.faq.appNotOpen": "<strong>Toss app does not open</strong> — check app version; scan with the system camera app (not the Toss in-app QR reader)",
-	"attach.faq.prepare": "<strong>Mini-app stuck in PREPARE state</strong> — verify the deep-link has a <code>_deploymentId</code> parameter",
-	"attach.faq.chii": "<strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import",
-	"attach.faq.totp": "<strong>TOTP gate Layer C is inactive</strong> — check that <code>AIT_DEBUG_TOTP_SECRET</code> is set on the relay server",
 	"attach.url.section": "URL (fallback)",
+	"attach.mode.sandbox": "Env 2 — AITC Sandbox PWA",
+	"attach.mode.intossDev": "Env 3 — intoss-private relay dev",
+	"attach.mode.intossLive": "Env 4 — intoss live relay debug",
+	"attach.sandbox.step1": "Launch the launcher PWA icon on your home screen (if the Safari address bar is visible, it is not standalone).",
+	"attach.sandbox.step2": "Scan this QR code with <strong>\"Scan QR with camera\"</strong> inside the launcher.",
+	"attach.sandbox.step3": "The mini-app opens fullscreen and the debug session attaches automatically.",
+	"attach.sandbox.faq.notInstalled": "<strong>Launcher is not installed</strong> — open <code>devtools.aitc.dev/launcher/</code> once and add it to your home screen",
+	"attach.sandbox.faq.cameraApp": "<strong>Scanning with the camera app opens a Safari tab (bottom tab bar visible)</strong> — relaunch from the launcher icon and use the in-app scanner",
+	"attach.sandbox.faq.totp": "<strong>QR expired (TOTP 30 s)</strong> — scan a fresh QR code",
+	"attach.sandbox.faq.chii": "<strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import",
+	"attach.intoss.step1": "Open the Toss app.",
+	"attach.intoss.step2": "Scan the QR code with your phone camera app.",
+	"attach.intoss.step3": "Tap <strong>\"Open in Toss\"</strong> when the popup appears.",
+	"attach.intoss.step4": "The mini-app opens and the debug session attaches automatically.",
+	"attach.intoss.faq.appNotOpen": "<strong>Toss app does not open</strong> — check app version; scan with the system camera app (not the Toss in-app QR reader)",
+	"attach.intoss.faq.prepare": "<strong>Mini-app stuck in PREPARE state</strong> — verify the deep-link has a <code>_deploymentId</code> parameter",
+	"attach.intoss.faq.chii": "<strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import",
+	"attach.intoss.faq.totp": "<strong>TOTP gate Layer C is inactive</strong> — check that <code>AIT_DEBUG_TOTP_SECRET</code> is set on the relay server",
+	"attach.intoss.faq.liveReadOnly": "<strong>LIVE session is read-only</strong> — <code>call_sdk</code>/<code>evaluate</code> require an explicit <code>confirm</code>",
 	"launcher.title": "AITC DevTools Launcher",
 	"launcher.description": "Scan the terminal QR code or paste the tunnel URL.",
 	"launcher.installCta": "Install launcher to your phone",
@@ -207,7 +218,12 @@ const en = {
 	"launcher.invalidUrl": "Enter a valid http(s):// URL.",
 	"launcher.debugAuthFailed": "Debug connection authentication failed",
 	"launcher.debugAuthFailedHint": "The QR code may have expired. Scan a fresh QR code.",
-	"launcher.debugAuthRescanCta": "Scan a new QR"
+	"launcher.debugAuthRescanCta": "Scan a new QR",
+	"launcher.diagFab": "Diag",
+	"launcher.diagTitle": "Viewport diagnostics",
+	"launcher.diagYes": "yes",
+	"launcher.diagNo": "no",
+	"launcher.letterboxDetected": "Display area is {pt}pt short — likely an iOS standalone letterbox. Removing and re-adding the launcher to the home screen may fix it."
 };
 //#endregion
 //#region src/i18n/index.ts
@@ -411,16 +427,27 @@ const tables = {
 		"attach.title": "AIT 디버그 세션 — QR 스캔",
 		"attach.deployment": "deployment: {label}",
 		"attach.steps.section": "스캔 절차",
-		"attach.step1": "토스 앱을 실행하세요.",
-		"attach.step2": "폰 카메라 앱으로 QR 코드를 스캔하세요.",
-		"attach.step3": "팝업이 뜨면 <strong>\"토스로 열기\"</strong>를 탭하세요.",
-		"attach.step4": "미니앱이 열리고 디버그 세션이 자동으로 attach됩니다.",
 		"attach.faq.section": "진단 체크리스트",
-		"attach.faq.appNotOpen": "<strong>토스 앱이 안 열리는 경우</strong> — 앱 버전 확인, 카메라 앱으로 스캔 (토스 앱 내 QR 리더 X)",
-		"attach.faq.prepare": "<strong>미니앱이 PREPARE 상태에서 멈추는 경우</strong> — deep-link에 <code>_deploymentId</code> 파라미터가 있는지 확인",
-		"attach.faq.chii": "<strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인",
-		"attach.faq.totp": "<strong>TOTP gate Layer C가 비활성인 경우</strong> — relay 서버에 <code>AIT_DEBUG_TOTP_SECRET</code>이 설정돼 있는지 확인",
 		"attach.url.section": "URL (fallback)",
+		"attach.mode.sandbox": "환경 2 — AITC Sandbox PWA",
+		"attach.mode.intossDev": "환경 3 — intoss-private relay dev",
+		"attach.mode.intossLive": "환경 4 — intoss live relay debug",
+		"attach.sandbox.step1": "홈 화면의 launcher PWA 아이콘으로 실행하세요 (Safari 주소창이 보이면 standalone이 아닙니다).",
+		"attach.sandbox.step2": "launcher 안의 <strong>\"QR 카메라로 스캔\"</strong>으로 이 QR 코드를 스캔하세요.",
+		"attach.sandbox.step3": "미니앱이 풀스크린으로 열리고 디버그 세션이 자동으로 attach됩니다.",
+		"attach.sandbox.faq.notInstalled": "<strong>launcher가 설치돼 있지 않은 경우</strong> — <code>devtools.aitc.dev/launcher/</code>를 한 번 열어 홈 화면에 추가하세요",
+		"attach.sandbox.faq.cameraApp": "<strong>카메라 앱으로 스캔하면 Safari 탭으로 열립니다 (하단 탭 바 노출)</strong> — launcher 아이콘으로 다시 실행해 인앱 스캔을 사용하세요",
+		"attach.sandbox.faq.totp": "<strong>QR이 만료된 경우 (TOTP 30초)</strong> — 새 QR을 다시 스캔하세요",
+		"attach.sandbox.faq.chii": "<strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인",
+		"attach.intoss.step1": "토스 앱을 실행하세요.",
+		"attach.intoss.step2": "폰 카메라 앱으로 QR 코드를 스캔하세요.",
+		"attach.intoss.step3": "팝업이 뜨면 <strong>\"토스로 열기\"</strong>를 탭하세요.",
+		"attach.intoss.step4": "미니앱이 열리고 디버그 세션이 자동으로 attach됩니다.",
+		"attach.intoss.faq.appNotOpen": "<strong>토스 앱이 안 열리는 경우</strong> — 앱 버전 확인, 카메라 앱으로 스캔 (토스 앱 내 QR 리더 X)",
+		"attach.intoss.faq.prepare": "<strong>미니앱이 PREPARE 상태에서 멈추는 경우</strong> — deep-link에 <code>_deploymentId</code> 파라미터가 있는지 확인",
+		"attach.intoss.faq.chii": "<strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인",
+		"attach.intoss.faq.totp": "<strong>TOTP gate Layer C가 비활성인 경우</strong> — relay 서버에 <code>AIT_DEBUG_TOTP_SECRET</code>이 설정돼 있는지 확인",
+		"attach.intoss.faq.liveReadOnly": "<strong>LIVE 세션은 read-only입니다</strong> — <code>call_sdk</code>/<code>evaluate</code> 실행에는 명시적 <code>confirm</code>이 필요합니다",
 		"launcher.title": "AITC DevTools Launcher",
 		"launcher.description": "터미널 QR을 스캔하거나 URL을 입력하세요.",
 		"launcher.installCta": "폰에 런처 설치하기",
@@ -434,7 +461,12 @@ const tables = {
 		"launcher.invalidUrl": "올바른 http(s):// URL을 입력하세요.",
 		"launcher.debugAuthFailed": "디버그 연결 인증 실패",
 		"launcher.debugAuthFailedHint": "QR 코드가 만료되었을 수 있어요. 새 QR을 다시 스캔하세요.",
-		"launcher.debugAuthRescanCta": "새 QR 스캔하기"
+		"launcher.debugAuthRescanCta": "새 QR 스캔하기",
+		"launcher.diagFab": "진단",
+		"launcher.diagTitle": "뷰포트 진단",
+		"launcher.diagYes": "예",
+		"launcher.diagNo": "아니요",
+		"launcher.letterboxDetected": "표시 영역이 {pt}pt 부족합니다 — iOS standalone letterbox로 보입니다. 런처를 홈 화면에서 제거 후 다시 설치하면 해소될 수 있어요."
 	},
 	en
 };
@@ -532,7 +564,7 @@ hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0; }
 .lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
 .lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
 </style></head><body><h1>AIT 디버그 Dashboard</h1>__LANG_SWITCHER__<p class="updated" id="updated">마지막 갱신: __NOW__</p><section><h2>터널 상태</h2><span class="status __TUNNEL_CLASS__" id="tunnel-status">__TUNNEL_STATUS__</span></section><hr/><section><h2>Attach QR</h2><div id="attach-section">__ATTACH_SECTION__</div></section>__PAGES_SECTION__</body></html>`;
-const attachChromeHtmlKo = `<!DOCTYPE html>
+const attachChromeHtmlKoSandbox = `<!DOCTYPE html>
 <html lang="ko"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="__QR_DATA_URL__"/><title>AIT 디버그 세션 — QR 스캔</title><style>
 *, *::before, *::after { box-sizing: border-box; }
 body {
@@ -543,6 +575,61 @@ body {
   gap: 1.5rem;
 }
 h1 { font-size: 1.25rem; font-weight: 600; color: #e6edf3; margin: 0; text-align: center; }
+.mode-label {
+  font-size: 0.78rem; font-weight: 600; color: #79c0ff;
+  background: #161b22; border: 1px solid #30363d; border-radius: 999px;
+  padding: 0.25rem 0.75rem; margin: 0;
+}
+.label { font-size: 0.8rem; opacity: 0.5; font-family: monospace; margin: 0; }
+img.qr {
+  width: min(90vw, 360px); height: auto;
+  image-rendering: pixelated;
+  background: #fff; padding: 1rem; border-radius: 12px;
+  display: block; margin: 0 auto;
+}
+section { width: 100%; max-width: 480px; }
+h2 { font-size: 1rem; font-weight: 600; color: #e6edf3; margin: 0 0 0.5rem; }
+ol, ul { margin: 0; padding-left: 1.25rem; }
+li { margin-bottom: 0.4rem; font-size: 0.9rem; line-height: 1.5; }
+.url-row {
+  display: flex; align-items: stretch; gap: 0;
+  border-radius: 6px; border: 1px solid #30363d; overflow: hidden;
+}
+.url-box {
+  font-family: monospace; font-size: 0.72rem;
+  word-break: break-all; opacity: 0.4;
+  background: #161b22; padding: 0.75rem 1rem;
+  flex: 1; cursor: pointer; border: none; border-radius: 0;
+}
+.url-box:hover { opacity: 0.6; }
+.copy-btn {
+  flex-shrink: 0; padding: 0.5rem 0.8rem;
+  background: #21262d; border: none; border-left: 1px solid #30363d;
+  color: #58a6ff; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.copy-btn:hover { background: #30363d; }
+hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0.5rem 0; }
+.lang-switcher { display: flex; gap: 0.5rem; font-size: 0.75rem; }
+.lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
+.lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
+</style></head><body><h1>AIT 디버그 세션 — QR 스캔</h1>__MODE_LABEL____LANG_SWITCHER__<div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>스캔 절차</h2><ol><li>홈 화면의 launcher PWA 아이콘으로 실행하세요 (Safari 주소창이 보이면 standalone이 아닙니다).</li><li>launcher 안의 <strong>"QR 카메라로 스캔"</strong>으로 이 QR 코드를 스캔하세요.</li><li>미니앱이 풀스크린으로 열리고 디버그 세션이 자동으로 attach됩니다.</li></ol></section><hr/><section><h2>진단 체크리스트</h2><ul><li><strong>launcher가 설치돼 있지 않은 경우</strong> — <code>devtools.aitc.dev/launcher/</code>를 한 번 열어 홈 화면에 추가하세요</li><li><strong>카메라 앱으로 스캔하면 Safari 탭으로 열립니다 (하단 탭 바 노출)</strong> — launcher 아이콘으로 다시 실행해 인앱 스캔을 사용하세요</li><li><strong>QR이 만료된 경우 (TOTP 30초)</strong> — 새 QR을 다시 스캔하세요</li><li><strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인</li></ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="복사">복사</button></div></section></body></html>`;
+const attachChromeHtmlKoIntoss = `<!DOCTYPE html>
+<html lang="ko"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="__QR_DATA_URL__"/><title>AIT 디버그 세션 — QR 스캔</title><style>
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0d1117; color: #c9d1d9;
+  display: flex; flex-direction: column; align-items: center;
+  min-height: 100vh; margin: 0; padding: 2rem 1rem;
+  gap: 1.5rem;
+}
+h1 { font-size: 1.25rem; font-weight: 600; color: #e6edf3; margin: 0; text-align: center; }
+.mode-label {
+  font-size: 0.78rem; font-weight: 600; color: #79c0ff;
+  background: #161b22; border: 1px solid #30363d; border-radius: 999px;
+  padding: 0.25rem 0.75rem; margin: 0;
+}
 .label { font-size: 0.8rem; opacity: 0.5; font-family: monospace; margin: 0; }
 img.qr {
   width: min(90vw, 360px); height: auto;
@@ -576,7 +663,7 @@ hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0.5rem 0;
 .lang-switcher { display: flex; gap: 0.5rem; font-size: 0.75rem; }
 .lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
 .lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
-</style></head><body><h1>AIT 디버그 세션 — QR 스캔</h1>__LANG_SWITCHER__<p class="label">deployment: __SAFE_LABEL__</p><div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>스캔 절차</h2><ol><li>토스 앱을 실행하세요.</li><li>폰 카메라 앱으로 QR 코드를 스캔하세요.</li><li>팝업이 뜨면 <strong>"토스로 열기"</strong>를 탭하세요.</li><li>미니앱이 열리고 디버그 세션이 자동으로 attach됩니다.</li></ol></section><hr/><section><h2>진단 체크리스트</h2><ul><li><strong>토스 앱이 안 열리는 경우</strong> — 앱 버전 확인, 카메라 앱으로 스캔 (토스 앱 내 QR 리더 X)</li><li><strong>미니앱이 PREPARE 상태에서 멈추는 경우</strong> — deep-link에 <code>_deploymentId</code> 파라미터가 있는지 확인</li><li><strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인</li><li><strong>TOTP gate Layer C가 비활성인 경우</strong> — relay 서버에 <code>AIT_DEBUG_TOTP_SECRET</code>이 설정돼 있는지 확인</li></ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="복사">복사</button></div></section></body></html>`;
+</style></head><body><h1>AIT 디버그 세션 — QR 스캔</h1>__MODE_LABEL____LANG_SWITCHER__<p class="label">deployment: __SAFE_LABEL__</p><div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>스캔 절차</h2><ol><li>토스 앱을 실행하세요.</li><li>폰 카메라 앱으로 QR 코드를 스캔하세요.</li><li>팝업이 뜨면 <strong>"토스로 열기"</strong>를 탭하세요.</li><li>미니앱이 열리고 디버그 세션이 자동으로 attach됩니다.</li></ol></section><hr/><section><h2>진단 체크리스트</h2><ul><li><strong>토스 앱이 안 열리는 경우</strong> — 앱 버전 확인, 카메라 앱으로 스캔 (토스 앱 내 QR 리더 X)</li><li><strong>미니앱이 PREPARE 상태에서 멈추는 경우</strong> — deep-link에 <code>_deploymentId</code> 파라미터가 있는지 확인</li><li><strong>Chii 주입 실패 / 콘솔이 비어 있는 경우</strong> — 미니앱 번들에 <code>in-app</code> debug import가 있는지 확인</li><li><strong>TOTP gate Layer C가 비활성인 경우</strong> — relay 서버에 <code>AIT_DEBUG_TOTP_SECRET</code>이 설정돼 있는지 확인</li>__LIVE_FAQ__</ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="복사">복사</button></div></section></body></html>`;
 const dashboardChromeHtmlEn = `<!DOCTYPE html>
 <html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>AIT Debug Dashboard</title><style>
 *, *::before, *::after { box-sizing: border-box; }
@@ -629,7 +716,7 @@ hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0; }
 .lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
 .lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
 </style></head><body><h1>AIT Debug Dashboard</h1>__LANG_SWITCHER__<p class="updated" id="updated">Last updated: __NOW__</p><section><h2>Tunnel status</h2><span class="status __TUNNEL_CLASS__" id="tunnel-status">__TUNNEL_STATUS__</span></section><hr/><section><h2>Attach QR</h2><div id="attach-section">__ATTACH_SECTION__</div></section>__PAGES_SECTION__</body></html>`;
-const attachChromeHtmlEn = `<!DOCTYPE html>
+const attachChromeHtmlEnSandbox = `<!DOCTYPE html>
 <html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="__QR_DATA_URL__"/><title>AIT Debug Session — QR Scan</title><style>
 *, *::before, *::after { box-sizing: border-box; }
 body {
@@ -640,6 +727,11 @@ body {
   gap: 1.5rem;
 }
 h1 { font-size: 1.25rem; font-weight: 600; color: #e6edf3; margin: 0; text-align: center; }
+.mode-label {
+  font-size: 0.78rem; font-weight: 600; color: #79c0ff;
+  background: #161b22; border: 1px solid #30363d; border-radius: 999px;
+  padding: 0.25rem 0.75rem; margin: 0;
+}
 .label { font-size: 0.8rem; opacity: 0.5; font-family: monospace; margin: 0; }
 img.qr {
   width: min(90vw, 360px); height: auto;
@@ -673,19 +765,101 @@ hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0.5rem 0;
 .lang-switcher { display: flex; gap: 0.5rem; font-size: 0.75rem; }
 .lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
 .lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
-</style></head><body><h1>AIT Debug Session — QR Scan</h1>__LANG_SWITCHER__<p class="label">deployment: __SAFE_LABEL__</p><div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>How to scan</h2><ol><li>Open the Toss app.</li><li>Scan the QR code with your phone camera app.</li><li>Tap <strong>"Open in Toss"</strong> when the popup appears.</li><li>The mini-app opens and the debug session attaches automatically.</li></ol></section><hr/><section><h2>Troubleshooting checklist</h2><ul><li><strong>Toss app does not open</strong> — check app version; scan with the system camera app (not the Toss in-app QR reader)</li><li><strong>Mini-app stuck in PREPARE state</strong> — verify the deep-link has a <code>_deploymentId</code> parameter</li><li><strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import</li><li><strong>TOTP gate Layer C is inactive</strong> — check that <code>AIT_DEBUG_TOTP_SECRET</code> is set on the relay server</li></ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="Copy">Copy</button></div></section></body></html>`;
+</style></head><body><h1>AIT Debug Session — QR Scan</h1>__MODE_LABEL____LANG_SWITCHER__<div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>How to scan</h2><ol><li>Launch the launcher PWA icon on your home screen (if the Safari address bar is visible, it is not standalone).</li><li>Scan this QR code with <strong>"Scan QR with camera"</strong> inside the launcher.</li><li>The mini-app opens fullscreen and the debug session attaches automatically.</li></ol></section><hr/><section><h2>Troubleshooting checklist</h2><ul><li><strong>Launcher is not installed</strong> — open <code>devtools.aitc.dev/launcher/</code> once and add it to your home screen</li><li><strong>Scanning with the camera app opens a Safari tab (bottom tab bar visible)</strong> — relaunch from the launcher icon and use the in-app scanner</li><li><strong>QR expired (TOTP 30 s)</strong> — scan a fresh QR code</li><li><strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import</li></ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="Copy">Copy</button></div></section></body></html>`;
+const attachChromeHtmlEnIntoss = `<!DOCTYPE html>
+<html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="__QR_DATA_URL__"/><title>AIT Debug Session — QR Scan</title><style>
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0d1117; color: #c9d1d9;
+  display: flex; flex-direction: column; align-items: center;
+  min-height: 100vh; margin: 0; padding: 2rem 1rem;
+  gap: 1.5rem;
+}
+h1 { font-size: 1.25rem; font-weight: 600; color: #e6edf3; margin: 0; text-align: center; }
+.mode-label {
+  font-size: 0.78rem; font-weight: 600; color: #79c0ff;
+  background: #161b22; border: 1px solid #30363d; border-radius: 999px;
+  padding: 0.25rem 0.75rem; margin: 0;
+}
+.label { font-size: 0.8rem; opacity: 0.5; font-family: monospace; margin: 0; }
+img.qr {
+  width: min(90vw, 360px); height: auto;
+  image-rendering: pixelated;
+  background: #fff; padding: 1rem; border-radius: 12px;
+  display: block; margin: 0 auto;
+}
+section { width: 100%; max-width: 480px; }
+h2 { font-size: 1rem; font-weight: 600; color: #e6edf3; margin: 0 0 0.5rem; }
+ol, ul { margin: 0; padding-left: 1.25rem; }
+li { margin-bottom: 0.4rem; font-size: 0.9rem; line-height: 1.5; }
+.url-row {
+  display: flex; align-items: stretch; gap: 0;
+  border-radius: 6px; border: 1px solid #30363d; overflow: hidden;
+}
+.url-box {
+  font-family: monospace; font-size: 0.72rem;
+  word-break: break-all; opacity: 0.4;
+  background: #161b22; padding: 0.75rem 1rem;
+  flex: 1; cursor: pointer; border: none; border-radius: 0;
+}
+.url-box:hover { opacity: 0.6; }
+.copy-btn {
+  flex-shrink: 0; padding: 0.5rem 0.8rem;
+  background: #21262d; border: none; border-left: 1px solid #30363d;
+  color: #58a6ff; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.copy-btn:hover { background: #30363d; }
+hr { border: none; border-top: 1px solid #21262d; width: 100%; margin: 0.5rem 0; }
+.lang-switcher { display: flex; gap: 0.5rem; font-size: 0.75rem; }
+.lang-switcher a { color: #58a6ff; text-decoration: none; opacity: 0.6; }
+.lang-switcher a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
+</style></head><body><h1>AIT Debug Session — QR Scan</h1>__MODE_LABEL____LANG_SWITCHER__<p class="label">deployment: __SAFE_LABEL__</p><div id="attach-section"><img class="qr" src="__QR_DATA_URL__" alt="attach QR"/></div><section><h2>How to scan</h2><ol><li>Open the Toss app.</li><li>Scan the QR code with your phone camera app.</li><li>Tap <strong>"Open in Toss"</strong> when the popup appears.</li><li>The mini-app opens and the debug session attaches automatically.</li></ol></section><hr/><section><h2>Troubleshooting checklist</h2><ul><li><strong>Toss app does not open</strong> — check app version; scan with the system camera app (not the Toss in-app QR reader)</li><li><strong>Mini-app stuck in PREPARE state</strong> — verify the deep-link has a <code>_deploymentId</code> parameter</li><li><strong>Chii injection failure / console is empty</strong> — verify the mini-app bundle has an <code>in-app</code> debug import</li><li><strong>TOTP gate Layer C is inactive</strong> — check that <code>AIT_DEBUG_TOTP_SECRET</code> is set on the relay server</li>__LIVE_FAQ__</ul></section><hr/><section id="url-section"><h2>URL (fallback)</h2><div class="url-row"><p class="url-box" id="url-box">__SAFE_ATTACH_URL__</p><button class="copy-btn" id="copy-btn" type="button" aria-label="Copy">Copy</button></div></section></body></html>`;
 /** Map from Locale to the precompiled dashboard chrome string. */
 const dashboardChromeByLocale = {
 	ko: dashboardChromeHtmlKo,
 	en: dashboardChromeHtmlEn
 };
-/** Map from Locale to the precompiled attach page chrome string. */
+/** Map from Locale × copy family to the precompiled attach page chrome string (#468). */
 const attachChromeByLocale = {
-	ko: attachChromeHtmlKo,
-	en: attachChromeHtmlEn
+	ko: {
+		sandbox: attachChromeHtmlKoSandbox,
+		intoss: attachChromeHtmlKoIntoss
+	},
+	en: {
+		sandbox: attachChromeHtmlEnSandbox,
+		intoss: attachChromeHtmlEnIntoss
+	}
 };
 //#endregion
 //#region src/mcp/qr-http-server.ts
+/** mode → 어느 precompiled attach chrome family를 쓰는가 (#468). */
+function attachFamilyForMode(mode) {
+	return mode === "relay-mobile" ? "sandbox" : "intoss";
+}
+/**
+* mode → 페이지 상단 환경 라벨 HTML (`__MODE_LABEL__` 토큰 채움, #468).
+* 사용자가 fidelity 사다리의 어느 겹에 있는지 즉시 알게 하는 환경 가시화 배지.
+* mode 미지정/'mock'은 빈 문자열 — 알 수 없는 환경을 거짓으로 라벨링하지 않는다.
+*/
+function buildModeLabel(mode, s) {
+	let label;
+	switch (mode) {
+		case "relay-mobile":
+			label = s("attach.mode.sandbox");
+			break;
+		case "relay-dev":
+			label = s("attach.mode.intossDev");
+			break;
+		case "relay-live":
+			label = s("attach.mode.intossLive");
+			break;
+		case "mock":
+		case void 0: return "";
+	}
+	return `<p class="mode-label">${escapeHtml(label)}</p>`;
+}
 /** HTML 특수문자를 이스케이프한다. */
 function escapeHtml(s) {
 	return s.replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`);
@@ -919,8 +1093,14 @@ function buildSseScript(strings) {
 *
 * 동적 파트:
 *   - __QR_DATA_URL__     : base64 data URL (QR 이미지)
-*   - __SAFE_LABEL__      : HTML-escaped deploymentId label
+*   - __SAFE_LABEL__      : HTML-escaped deploymentId label (intoss family에만 존재)
 *   - __SAFE_ATTACH_URL__ : HTML-escaped attach URL (TOTP at= 코드 포함 — 의도된 전달)
+*   - __MODE_LABEL__      : 환경 배지 (`<p class="mode-label">…</p>` 또는 빈 문자열, #468)
+*   - __LIVE_FAQ__        : 환경 4 LIVE read-only `<li>` 또는 빈 문자열 (intoss family에만 존재)
+*
+* mode-aware 분기 (#468): mode가 `relay-mobile`이면 sandbox family chrome(launcher
+* PWA 절차), 그 외는 intoss family chrome(토스 앱 절차)을 선택한다. `relay-live`는
+* intoss chrome에 LIVE read-only 라인을 추가한다.
 *
 * SSE 스크립트도 주입 — `#attach-section` hook이 있으면 `/events` push 때 QR이
 * `/qr.png?u=<fresh attachUrl>`로 자동 갱신된다. `#tunnel-status`·`#pages-list` 등
@@ -928,10 +1108,12 @@ function buildSseScript(strings) {
 *
 * SECRET-HANDLING: TOTP at= 코드는 attachUrl 캡슐 안에서만 노출 — 의도된 transport.
 */
-function buildAttachHtml(qrDataUrl, safeLabel, safeAttachUrl, locale, path = "/attach", params = new URLSearchParams()) {
+function buildAttachHtml(qrDataUrl, safeLabel, safeAttachUrl, locale, path = "/attach", params = new URLSearchParams(), mode) {
 	const s = resolveLocaleStrings(locale);
 	const langSwitcher = buildLangSwitcher(path, params, locale, s);
-	const filled = attachChromeByLocale[locale].replaceAll("__LANG_SWITCHER__", langSwitcher).replaceAll("__QR_DATA_URL__", qrDataUrl).replaceAll("__SAFE_LABEL__", safeLabel).replaceAll("__SAFE_ATTACH_URL__", safeAttachUrl);
+	const family = attachFamilyForMode(mode);
+	const liveFaq = mode === "relay-live" ? `<li>${s("attach.intoss.faq.liveReadOnly")}</li>` : "";
+	const filled = attachChromeByLocale[locale][family].replaceAll("__LANG_SWITCHER__", langSwitcher).replaceAll("__MODE_LABEL__", buildModeLabel(mode, s)).replaceAll("__LIVE_FAQ__", liveFaq).replaceAll("__QR_DATA_URL__", qrDataUrl).replaceAll("__SAFE_LABEL__", safeLabel).replaceAll("__SAFE_ATTACH_URL__", safeAttachUrl);
 	const sseScript = buildSseScript({
 		tunnelUp: JSON.stringify(s("dashboard.tunnel.up")),
 		tunnelDown: JSON.stringify(s("dashboard.tunnel.down")),
@@ -1028,11 +1210,12 @@ async function startQrHttpServer(getDashboardState) {
 				const dpMatch = attachUrl.match(/[?&]_deploymentId=([^&]+)/);
 				if (dpMatch?.[1]) deploymentIdLabel = decodeURIComponent(dpMatch[1]).slice(0, 36);
 			} catch {}
+			const mode = getDashboardState?.().mode;
 			QRCode.toDataURL(attachUrl, {
 				type: "image/png",
 				errorCorrectionLevel: "M"
 			}).then((dataUrl) => {
-				const html = buildAttachHtml(dataUrl, escapeHtml(deploymentIdLabel), escapeHtml(attachUrl), locale, path, params);
+				const html = buildAttachHtml(dataUrl, escapeHtml(deploymentIdLabel), escapeHtml(attachUrl), locale, path, params, mode);
 				res.writeHead(200, {
 					"Content-Type": "text/html; charset=utf-8",
 					"Cache-Control": "no-store"
@@ -1103,4 +1286,4 @@ async function startQrHttpServer(getDashboardState) {
 //#endregion
 export { startQrHttpServer };
 
-//# sourceMappingURL=qr-http-server-BUfbLGm1.js.map
+//# sourceMappingURL=qr-http-server-DKEca8J3.js.map