@ait-co/devtools 0.1.66 → 0.1.68

package/dist/mcp/cli.js

@@ -721,11 +721,26 @@ var ChiiCdpConnection = class {
 * entries.
 *
 * TOTP auth (relay-side, authoritative gate):
-*   When `verifyAuth` is provided, this module registers an HTTP upgrade
-*   listener on the server BEFORE calling `chii.start({server})`. Node's
-*   `http.Server` allows multiple 'upgrade' listeners; the first to call
-*   `socket.destroy()` wins. Invalid auth → 401 + destroy (chii never sees
-*   the connection). Valid auth → return without side-effect (chii handles it).
+*   When `verifyAuth` is provided, this module registers HTTP 'upgrade' and
+*   'request' listeners on the server BEFORE calling `chii.start({server})`.
+*   Node's `http.Server` calls listeners in registration order; the first to
+*   call `socket.destroy()` (upgrade) or `res.end()` (request) wins. Invalid
+*   auth → 401 + destroy (chii never sees the connection). Valid auth →
+*   return without side-effect (chii handles it).
+*
+* TOTP code transports (issue #466) — two equivalent ways to carry the code:
+*   1. Query param `at=<code>` — used by the daemon-side `/client` connection
+*      (`chii-connection.ts` appends it; it holds the secret).
+*   2. Path prefix `/at/<code>/…` — used by the phone-side target. Chii's
+*      stock `target.js` derives its WS endpoint from the script `src`
+*      (`scriptEl.src.replace('target.js','')`), so the only way for the
+*      phone to carry a code is to embed it in the script URL path. The
+*      in-app attach injects `https://<host>/at/<code>/target.js`; both the
+*      script fetch and the derived `wss://<host>/at/<code>/target/<id>` WS
+*      dial then carry the prefix. The listeners below rewrite the prefix
+*      into the query form (`rewriteAtPathPrefix`) and MUTATE `req.url`
+*      before chii's own handlers (registered later) parse it — chii only
+*      ever sees the stripped URL.
 *
 * Threat model: "URL leak" — someone obtains the tunnel URL (Slack paste, QR
 *   screenshot, shoulder-surfing) but does not have the shared TOTP secret.
@@ -744,6 +759,33 @@ function loadChiiServer() {
 	throw new Error("chii server module did not expose start()");
 }
 /**
+* Rewrites a `/at/<code>/…` path-prefixed request URL into the equivalent
+* query-based form, e.g.:
+*
+*   `/at/123456/target.js`        → `/target.js?at=123456`
+*   `/at/123456/target/x?url=u`   → `/target/x?url=u&at=123456`
+*   `/at/123456/`                 → `/?at=123456`
+*
+* Returns `null` when the URL does not carry the prefix (including an empty
+* code segment) — callers fall back to the unmodified URL and the existing
+* query-based auth path.
+*
+* Pure string surgery — this function knows nothing about secrets or code
+* validity; verification stays inside the caller-provided `verifyAuth`
+* predicate (which parses the query). The raw path segment is appended
+* verbatim to the query: both path segments and query values are
+* percent-decoded exactly once by their consumers, so no re-encoding is
+* needed (TOTP codes are 6 digits and never percent-encoded in practice).
+*/
+function rewriteAtPathPrefix(rawUrl) {
+	const match = /^\/at\/([^/?]+)(\/[^?]*)?(\?.*)?$/.exec(rawUrl);
+	if (match === null) return null;
+	const code = match[1];
+	const path = match[2] === void 0 || match[2] === "" ? "/" : match[2];
+	const query = match[3] ?? "";
+	return `${path}${query}${query === "" ? "?" : "&"}at=${code}`;
+}
+/**
 * Starts the Chii relay and resolves once listening.
 *
 * Default port is 0 (OS-assigned). With port 0 the OS picks a free ephemeral
@@ -762,15 +804,36 @@ function loadChiiServer() {
 async function startChiiRelay(options = {}) {
 	const requestedPort = options.port ?? 0;
 	const host = options.host ?? "127.0.0.1";
-	const { verifyAuth } = options;
+	const { verifyAuth, onAuthReject } = options;
 	const httpServer = createServer();
-	if (verifyAuth) httpServer.on("upgrade", (req, socket) => {
-		if (!verifyAuth(req)) {
-			socket.write("HTTP/1.1 401 Unauthorized\r\nContent-Length: 0\r\n\r\n");
-			socket.destroy();
-			return;
-		}
-	});
+	const notifyAuthReject = (kind) => {
+		if (onAuthReject === void 0) return;
+		try {
+			onAuthReject({ kind });
+		} catch {}
+	};
+	if (verifyAuth) {
+		httpServer.on("upgrade", (req, socket) => {
+			const rewritten = rewriteAtPathPrefix(req.url ?? "");
+			if (rewritten !== null) req.url = rewritten;
+			if (!verifyAuth(req)) {
+				socket.write("HTTP/1.1 401 Unauthorized\r\nContent-Length: 0\r\n\r\n");
+				socket.destroy();
+				notifyAuthReject("ws-upgrade");
+				return;
+			}
+		});
+		httpServer.on("request", (req, res) => {
+			const rewritten = rewriteAtPathPrefix(req.url ?? "");
+			if (rewritten === null) return;
+			req.url = rewritten;
+			if (!verifyAuth(req)) {
+				res.statusCode = 401;
+				res.end();
+				notifyAuthReject("http-request");
+			}
+		});
+	}
 	await loadChiiServer().start({
 		server: httpServer,
 		domain: `${host}:${requestedPort}`,
@@ -1832,19 +1895,32 @@ const en = {
 	"dashboard.attach.hint": "Call the build_attach_url MCP tool to show the QR here.",
 	"dashboard.pages.section": "Connected Pages",
 	"dashboard.pages.empty": "No attached pages",
+	"dashboard.url.copy": "Copy",
+	"dashboard.url.copied": "Copied",
 	"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",
@@ -1858,7 +1934,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
@@ -2057,19 +2138,32 @@ const tables = {
 		"dashboard.attach.hint": "build_attach_url MCP tool을 호출하면 QR이 여기에 표시됩니다.",
 		"dashboard.pages.section": "연결된 Pages",
 		"dashboard.pages.empty": "attach된 페이지 없음",
+		"dashboard.url.copy": "복사",
+		"dashboard.url.copied": "복사됨",
 		"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": "폰에 런처 설치하기",
@@ -2083,7 +2177,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
 };
@@ -2152,12 +2251,24 @@ img.qr {
   background: #fff; padding: 0.75rem; border-radius: 10px;
   display: block; margin: 0.5rem auto;
 }
+.url-row {
+  display: flex; align-items: stretch; gap: 0; margin: 0.5rem 0 0;
+  border-radius: 6px; border: 1px solid #30363d; overflow: hidden;
+}
 .url-box {
   font-family: monospace; font-size: 0.7rem;
   word-break: break-all; opacity: 0.45;
   background: #161b22; padding: 0.6rem 0.85rem;
-  border-radius: 6px; border: 1px solid #30363d; margin: 0.5rem 0 0;
+  flex: 1; cursor: pointer; border: none; border-radius: 0;
 }
+.url-box:hover { opacity: 0.65; }
+.copy-btn {
+  flex-shrink: 0; padding: 0.4rem 0.7rem;
+  background: #21262d; border: none; border-left: 1px solid #30363d;
+  color: #58a6ff; font-size: 0.7rem; cursor: pointer; white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.copy-btn:hover { background: #30363d; }
 .hint { font-size: 0.85rem; opacity: 0.5; margin: 0.25rem 0 0; }
 ul { margin: 0; padding-left: 1.25rem; }
 li { margin-bottom: 0.35rem; font-size: 0.85rem; line-height: 1.5; }
@@ -2169,7 +2280,57 @@ 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 {
+  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 디버그 세션 — 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 {
@@ -2180,6 +2341,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;
@@ -2191,17 +2357,29 @@ 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;
-  border-radius: 6px; border: 1px solid #30363d;
+  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>__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><h2>URL (fallback)</h2><p class="url-box">__SAFE_ATTACH_URL__</p></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; }
@@ -2225,12 +2403,24 @@ img.qr {
   background: #fff; padding: 0.75rem; border-radius: 10px;
   display: block; margin: 0.5rem auto;
 }
+.url-row {
+  display: flex; align-items: stretch; gap: 0; margin: 0.5rem 0 0;
+  border-radius: 6px; border: 1px solid #30363d; overflow: hidden;
+}
 .url-box {
   font-family: monospace; font-size: 0.7rem;
   word-break: break-all; opacity: 0.45;
   background: #161b22; padding: 0.6rem 0.85rem;
-  border-radius: 6px; border: 1px solid #30363d; margin: 0.5rem 0 0;
+  flex: 1; cursor: pointer; border: none; border-radius: 0;
 }
+.url-box:hover { opacity: 0.65; }
+.copy-btn {
+  flex-shrink: 0; padding: 0.4rem 0.7rem;
+  background: #21262d; border: none; border-left: 1px solid #30363d;
+  color: #58a6ff; font-size: 0.7rem; cursor: pointer; white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.copy-btn:hover { background: #30363d; }
 .hint { font-size: 0.85rem; opacity: 0.5; margin: 0.25rem 0 0; }
 ul { margin: 0; padding-left: 1.25rem; }
 li { margin-bottom: 0.35rem; font-size: 0.85rem; line-height: 1.5; }
@@ -2242,7 +2432,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 {
@@ -2253,6 +2443,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;
@@ -2264,29 +2459,123 @@ 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;
-  border-radius: 6px; border: 1px solid #30363d;
+  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>__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><h2>URL (fallback)</h2><p class="url-box">__SAFE_ATTACH_URL__</p></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)};`);
@@ -2335,8 +2624,11 @@ function buildDashboardHtml(state, qrDataUrl, locale, path = "/", params = new U
 	const tunnelStatus = state.tunnel.up ? s("dashboard.tunnel.up") : s("dashboard.tunnel.down");
 	const tunnelClass = state.tunnel.up ? "status-up" : "status-down";
 	let attachSection;
-	if (qrDataUrl && state.attachUrl) attachSection = `<img class="qr" src="${qrDataUrl}" alt="attach QR" /><p class="url-box">${escapeHtml(state.attachUrl)}</p>`;
-	else attachSection = `<p class="hint">${escapeHtml(s("dashboard.attach.hint"))}</p>`;
+	if (qrDataUrl && state.attachUrl) {
+		const safeAttachUrl = escapeHtml(state.attachUrl);
+		const copyLabel = escapeHtml(s("dashboard.url.copy"));
+		attachSection = `<img class="qr" src="${qrDataUrl}" alt="attach QR" /><div class="url-row"><p class="url-box" id="url-box">${safeAttachUrl}</p><button class="copy-btn" id="copy-btn" type="button" aria-label="${copyLabel}">${copyLabel}</button></div>`;
+	} else attachSection = `<p class="hint">${escapeHtml(s("dashboard.attach.hint"))}</p>`;
 	const pagesSection = state.pages === null ? "" : `<hr /><section id="pages-section"><h2>${escapeHtml(s("dashboard.pages.section"))}</h2><ul id="pages-list">${state.pages.length > 0 ? state.pages.map((p) => {
 		return `<li><span class="page-id">${escapeHtml(p.id)}</span> <span class="page-url">${escapeHtml(p.url.slice(0, 120))}</span></li>`;
 	}).join("\n") : `<li class="empty">${escapeHtml(s("dashboard.pages.empty"))}</li>`}</ul></section>`;
@@ -2344,7 +2636,10 @@ function buildDashboardHtml(state, qrDataUrl, locale, path = "/", params = new U
 		tunnelUp: JSON.stringify(s("dashboard.tunnel.up")),
 		tunnelDown: JSON.stringify(s("dashboard.tunnel.down")),
 		pagesEmpty: JSON.stringify(s("dashboard.pages.empty")),
-		attachHint: JSON.stringify(s("dashboard.attach.hint"))
+		attachHint: JSON.stringify(s("dashboard.attach.hint")),
+		copyLabel: JSON.stringify(s("dashboard.url.copy")),
+		copiedLabel: JSON.stringify(s("dashboard.url.copied")),
+		dashboardSurface: true
 	};
 	const langSwitcher = buildLangSwitcher(path, params, locale, s);
 	const filled = dashboardChromeByLocale[locale].replaceAll("__LANG_SWITCHER__", langSwitcher).replaceAll("__NOW__", escapeHtml(now)).replaceAll("__TUNNEL_CLASS__", tunnelClass).replaceAll("__TUNNEL_STATUS__", escapeHtml(tunnelStatus)).replaceAll("__ATTACH_SECTION__", attachSection).replaceAll("__PAGES_SECTION__", pagesSection);
@@ -2358,9 +2653,24 @@ function buildDashboardHtml(state, qrDataUrl, locale, path = "/", params = new U
 * client side: attachUrl은 DOM에 렌더링, wssUrl은 절대 렌더링하지 않는다.
 * pages === null 이면 섹션을 건드리지 않는다 (#411).
 *
+* 두 표면(dashboard / attach) 분기:
+*   - dashboard (dashboardSurface=true): #attach-section innerHTML 전체 교체 방식 유지.
+*     url-box도 innerHTML 재렌더 안에 포함되어 갱신됨.
+*   - /attach (dashboardSurface=false): #attach-section의 img src만 교체하고,
+*     url-box는 #url-box textContent만 갱신한다. (#attach-section에 url-box가 없으므로
+*     innerHTML 교체 시 url-box가 새로 생겨 이중 표시되는 결함을 방지 — #458 결함 수정.)
+*
+* 복사 기능: 이벤트 위임으로 document에 단일 핸들러. innerHTML 재렌더 후에도 생존.
+*   - .url-box 클릭 또는 .copy-btn 클릭 → 현재 #url-box textContent 복사.
+*   - clipboard: navigator.clipboard.writeText → 실패/부재 시 textarea execCommand fallback.
+*   - 피드백: 버튼 라벨이 COPIED_LABEL로 ~1.5초 전환 후 COPY_LABEL로 복귀.
+*
 * 문자열 인자는 빌드타임에 ko/en 테이블에서 가져와 JSON.stringify로 이미 escape됨.
+*
+* SECRET-HANDLING: URL 값을 console.log 등으로 출력하지 않는다.
 */
 function buildSseScript(strings) {
+	const isDashboard = strings.dashboardSurface;
 	return `<script>
     // SSE — /events 구독해 상태 자동 갱신. 빌드 파이프라인 없는 인라인 스크립트.
     (function () {
@@ -2368,6 +2678,64 @@ function buildSseScript(strings) {
       var TUNNEL_DOWN = ${strings.tunnelDown};
       var PAGES_EMPTY = ${strings.pagesEmpty};
       var ATTACH_HINT = ${strings.attachHint};
+      var COPY_LABEL = ${strings.copyLabel};
+      var COPIED_LABEL = ${strings.copiedLabel};
+
+      // ── 클립보드 복사 헬퍼 ────────────────────────────────────────────────
+      function copyText(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          return navigator.clipboard.writeText(text);
+        }
+        // fallback: textarea + execCommand
+        return new Promise(function (resolve, reject) {
+          var ta = document.createElement('textarea');
+          ta.value = text;
+          ta.style.position = 'fixed';
+          ta.style.opacity = '0';
+          document.body.appendChild(ta);
+          ta.focus();
+          ta.select();
+          try {
+            document.execCommand('copy') ? resolve() : reject(new Error('execCommand failed'));
+          } catch (err) {
+            reject(err);
+          } finally {
+            document.body.removeChild(ta);
+          }
+        });
+      }
+
+      // ── 복사 피드백 ───────────────────────────────────────────────────────
+      var copyTimer = null;
+      function triggerCopy() {
+        var urlBox = document.getElementById('url-box');
+        if (!urlBox) return;
+        var text = urlBox.textContent || '';
+        if (!text) return;
+        copyText(text).then(function () {
+          var btn = document.getElementById('copy-btn');
+          if (btn) {
+            btn.textContent = COPIED_LABEL;
+            if (copyTimer) clearTimeout(copyTimer);
+            copyTimer = setTimeout(function () {
+              btn.textContent = COPY_LABEL;
+              copyTimer = null;
+            }, 1500);
+          }
+        }).catch(function () { /* 복사 실패 시 조용히 무시 */ });
+      }
+
+      // ── 이벤트 위임 — document 레벨에서 단일 핸들러 (innerHTML 재렌더 후에도 생존) ──
+      document.addEventListener('click', function (e) {
+        var target = e.target;
+        if (!target) return;
+        // .copy-btn 또는 .url-box 클릭 시 복사
+        if (target.closest && (target.closest('.copy-btn') || target.closest('.url-box'))) {
+          triggerCopy();
+        }
+      });
+
+      // ── SSE 구독 ──────────────────────────────────────────────────────────
       var src = new EventSource('/events');
       src.onmessage = function (e) {
         try {
@@ -2395,23 +2763,37 @@ function buildSseScript(strings) {
               }
             }
           }
-          // attachUrl QR 갱신 — attachUrl이 없으면 hint 표시.
+          // attachUrl QR + url-box 갱신
+          // SECRET-HANDLING: URL 값을 로그로 출력하지 않는다.
           var sec = document.getElementById('attach-section');
           if (sec) {
             if (s.attachUrl) {
-              // QR은 서버에서 새로 렌더한 /qr.png?u= 로 img src 교체.
-              // TOTP at= 코드는 attachUrl 안에 캡슐화 — 별도 노출 없음.
-              // wssUrl은 절대 DOM에 렌더하지 않는다 (SECRET-HANDLING).
               var encoded = encodeURIComponent(s.attachUrl);
               var safeUrl = String(s.attachUrl).slice(0, 2000).replace(/[<>&"']/g, function (c) { return '&#' + c.charCodeAt(0) + ';'; });
+              ${isDashboard ? `// dashboard: #attach-section innerHTML 전체 교체 (img + url-row).
+              // url-box id="url-box" 를 포함해 복사 핸들러가 계속 동작함.
               sec.innerHTML =
                 '<img class="qr" src="/qr.png?u=' + encoded + '" alt="attach QR" />' +
-                '<p class="url-box">' + safeUrl + '</p>';
+                '<div class=\\"url-row\\">' +
+                  '<p class=\\"url-box\\" id=\\"url-box\\">' + safeUrl + '</p>' +
+                  '<button class=\\"copy-btn\\" id=\\"copy-btn\\" type=\\"button\\" aria-label=\\"' + COPY_LABEL + '\\">' + COPY_LABEL + '</button>' +
+                '</div>';` : `// /attach: img src만 교체 — url-box는 별도 #url-section에서 관리해 이중 표시 방지(#458).
+              // QR img src 교체: img가 있으면 src만 갱신, 없으면 img 요소 생성.
+              var img = sec.querySelector('img.qr');
+              if (img) {
+                img.src = '/qr.png?u=' + encoded;
+              } else {
+                sec.innerHTML = '<img class=\\"qr\\" src=\\"/qr.png?u=' + encoded + '\\" alt=\\"attach QR\\" />';
+              }
+              // url-box textContent만 갱신 (innerHTML 교체하지 않아 복사 버튼/핸들러 생존).
+              var ub = document.getElementById('url-box');
+              if (ub) ub.textContent = s.attachUrl;`}
             } else {
-              sec.innerHTML = '<p class="hint">' + ATTACH_HINT + '</p>';
+              ${isDashboard ? `sec.innerHTML = '<p class=\\"hint\\">' + ATTACH_HINT + '</p>';` : `// /attach에서 hint가 필요한 경우는 없으나 방어 처리.
+              sec.innerHTML = '<p class=\\"hint\\">' + ATTACH_HINT + '</p>';`}
             }
           }
-          // 갱신 시각
+          // 갱신 시각 (dashboard만 #updated 요소 있음)
           var upd = document.getElementById('updated');
           if (upd) upd.textContent = upd.textContent.replace(/[^ ]+$/, new Date().toISOString());
         } catch (_) { /* 파싱 오류 무시 */ }
@@ -2427,8 +2809,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` 등
@@ -2436,15 +2824,20 @@ 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")),
 		pagesEmpty: JSON.stringify(s("dashboard.pages.empty")),
-		attachHint: JSON.stringify(s("dashboard.attach.hint"))
+		attachHint: JSON.stringify(s("dashboard.attach.hint")),
+		copyLabel: JSON.stringify(s("dashboard.url.copy")),
+		copiedLabel: JSON.stringify(s("dashboard.url.copied")),
+		dashboardSurface: false
 	});
 	return filled.replace("</body>", `${sseScript}\n</body>`);
 }
@@ -2533,11 +2926,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"
@@ -3155,7 +3549,7 @@ const DEBUG_TOOL_DEFINITIONS = [
 	},
 	{
 		name: "get_debug_status",
-		description: "Reports the current debug session state — which environment/mode is active, whether a page is attached, and a full diagnostic snapshot — in one call. Use this any time to answer \"what mode am I in right now?\" or \"why is this not working?\" without chaining tools. Fields: mcpVersion (MCP SDK version), devtoolsVersion (@ait-co/devtools package version), tunnel (up/wssUrl/pid/startedAt), pages (list_pages result + lastSeenAt stats), lastAttachAt, lastDetachAt, recentErrors (last N server-side errors, PII/secret redacted), environment (kind: mock|relay-dev|relay-live|relay-mobile, env: mock|relay backward-compat, reason, liveGuardActive: true when relay-live LIVE guard is active), serverLockHolder (pid + startedAt from the lock file, or null), nextRecommendedAction ({tool, reason} or null — the single next tool to call; in local-target mode tunnel.up=false is normal so \"restart\" is never recommended). All fields are nullable — missing data is null, not an error. debug-mode only — dev-mode (--mode=dev) does not support relay diagnostics. Tier C (both mock and relay).",
+		description: "Reports the current debug session state — which environment/mode is active, whether a page is attached, and a full diagnostic snapshot — in one call. Use this any time to answer \"what mode am I in right now?\" or \"why is this not working?\" without chaining tools. Fields: mcpVersion (MCP SDK version), devtoolsVersion (@ait-co/devtools package version), tunnel (up/wssUrl/pid/startedAt), pages (list_pages result + lastSeenAt stats), lastAttachAt, lastDetachAt, recentErrors (last N server-side errors, PII/secret redacted), authRejects ({count, lastAt} — relay TOTP 401 rejections, secret-free; count > 0 with empty pages means the phone reached the relay but its code was rejected), environment (kind: mock|relay-dev|relay-live|relay-mobile, env: mock|relay backward-compat, reason, liveGuardActive: true when relay-live LIVE guard is active), serverLockHolder (pid + startedAt from the lock file, or null), nextRecommendedAction ({tool, reason} or null — the single next tool to call; in local-target mode tunnel.up=false is normal so \"restart\" is never recommended). All fields are nullable — missing data is null, not an error. debug-mode only — dev-mode (--mode=dev) does not support relay diagnostics. Tier C (both mock and relay).",
 		inputSchema: {
 			type: "object",
 			properties: { recent_errors_limit: {
@@ -3920,6 +4314,8 @@ var InMemoryDiagnosticsCollector = class {
 	maxSize;
 	lastAttachAt = null;
 	lastDetachAt = null;
+	authRejectCount = 0;
+	lastAuthRejectAt = null;
 	constructor(maxSize = DEFAULT_ERROR_BUFFER_SIZE) {
 		this.maxSize = maxSize;
 	}
@@ -3948,6 +4344,16 @@ var InMemoryDiagnosticsCollector = class {
 	getLastDetachAt() {
 		return this.lastDetachAt;
 	}
+	recordAuthReject() {
+		this.authRejectCount += 1;
+		this.lastAuthRejectAt = (/* @__PURE__ */ new Date()).toISOString();
+	}
+	getAuthRejects() {
+		return {
+			count: this.authRejectCount,
+			lastAt: this.lastAuthRejectAt
+		};
+	}
 };
 /**
 * Returns the `@modelcontextprotocol/sdk` version baked in at build time via
@@ -3975,7 +4381,7 @@ async function readMcpSdkVersion() {
 * some test environments that skip the build step).
 */
 function readDevtoolsVersion() {
-	return "0.1.66";
+	return "0.1.68";
 }
 /**
 * Derives the next recommended action from a completed diagnostics snapshot.
@@ -3984,13 +4390,18 @@ function readDevtoolsVersion() {
 *   0. tunnel.droppedAt non-null                  → restart (permanent tunnel drop — highest priority)
 *   1. tunnel.up === false AND env is relay       → restart (relay needs a live tunnel)
 *   1b. tunnel.up === false AND env is mock       → wait_for_page (local target: tunnel-less is normal)
+*   2a. authRejects.count > 0 AND pages empty     → build_attach_url (relay TOTP 거부 관측 — QR 재스캔
+*       또는 target-side `at` 전달 확인. 일반 rule 2보다 구체적이므로 먼저 평가 — issue #467)
 *   2. tunnel.up, pages empty, env === relay      → build_attach_url (start attach)
 *   3. pages has entry + crashDetectedAt non-null → build_attach_url (re-attach after crash)
 *   4. otherwise                                  → null (session looks healthy)
 *
 * Pure — does not throw; receives the final assembled snapshot fields.
+*
+* SECRET-HANDLING: the auth-reject reason string carries only the count and
+* timestamp from {@link AuthRejectsSnapshot} — never a URL, code, or secret.
 */
-function computeNextRecommendedAction(tunnel, pages, env) {
+function computeNextRecommendedAction(tunnel, pages, env, authRejects = null) {
 	if (tunnel.droppedAt != null) return {
 		tool: "restart",
 		reason: `tunnel permanently dropped at ${tunnel.droppedAt} after ${tunnel.reissueAttempts} reissue attempt(s) — restart the MCP server (npx @ait-co/devtools devtools-mcp)`
@@ -4004,6 +4415,10 @@ function computeNextRecommendedAction(tunnel, pages, env) {
 		tool: "restart",
 		reason: "tunnel not up — run `npx @ait-co/devtools devtools-mcp` to restart"
 	};
+	if (authRejects !== null && authRejects.count > 0 && pages !== null && pages.pages.length === 0) return {
+		tool: "build_attach_url",
+		reason: `relay 인증(TOTP) 거부 ${authRejects.count}건 발생 (last ${authRejects.lastAt ?? "unknown"}) — QR을 다시 스캔해 새 코드로 attach하세요(코드는 30초 주기로 만료). 반복되면 폰 페이지 URL에 at 파라미터가 전달되는지(target-side TOTP 전달 경로)를 확인하세요`
+	};
 	if (isRelayEnv(env) && pages !== null && pages.pages.length === 0 && !pages.crashDetectedAt) return {
 		tool: "build_attach_url",
 		reason: "tunnel ready, no pages attached — call build_attach_url to generate the attach QR"
@@ -4047,7 +4462,13 @@ async function getDiagnostics(input) {
 	} catch {}
 	const limit = Math.min(Math.max(1, recentErrorsLimit), 50);
 	const recentErrors = collector.getRecentErrors(limit);
-	const nextRecommendedAction = computeNextRecommendedAction(tunnelInfo, pages, env);
+	const authRejects = collector.getAuthRejects();
+	if (authRejects.count > 0) recentErrors.push({
+		timestamp: authRejects.lastAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+		message: `WS upgrade auth-rejected (${authRejects.count} times, last ${authRejects.lastAt ?? "unknown"})`,
+		category: "auth"
+	});
+	const nextRecommendedAction = computeNextRecommendedAction(tunnelInfo, pages, env, authRejects);
 	return {
 		mcpVersion,
 		devtoolsVersion,
@@ -4056,6 +4477,7 @@ async function getDiagnostics(input) {
 		lastAttachAt: collector.getLastAttachAt(),
 		lastDetachAt: collector.getLastDetachAt(),
 		recentErrors,
+		authRejects,
 		environment: {
 			kind: env,
 			env: toLegacyEnv(env),
@@ -4463,7 +4885,7 @@ function createDebugServer(deps) {
 	const collector = collectorDep ?? new InMemoryDiagnosticsCollector();
 	const server = new Server({
 		name: "ait-debug",
-		version: "0.1.66"
+		version: "0.1.68"
 	}, { capabilities: { tools: { listChanged: true } } });
 	server.setRequestHandler(ListToolsRequestSchema, () => {
 		const conn = router.active;
@@ -5172,7 +5594,8 @@ async function bootRelayFamily(options = {}) {
 	const totpEnabled = options.verifyAuth !== void 0;
 	const relay = await startChiiRelay({
 		port: relayPort,
-		verifyAuth: options.verifyAuth
+		verifyAuth: options.verifyAuth,
+		onAuthReject: options.onAuthReject
 	});
 	logInfo("server.start", {
 		port: relay.port,
@@ -5484,7 +5907,8 @@ async function runDebugServer(options = {}) {
 			onWssUrl: (wssUrl) => {
 				lockHandle.updateWssUrl(wssUrl);
 				qrServer?.notifyStateChange();
-			}
+			},
+			onAuthReject: () => diagnosticsCollector.recordAuthReject()
 		}),
 		diagnosticsCollector,
 		devtoolsOpener,
@@ -5503,7 +5927,8 @@ async function runDebugServer(options = {}) {
 			id: t.id,
 			url: t.url
 		})),
-		attachUrl: lastAttachParts ? rebuildAttachUrl(lastAttachParts) : null
+		attachUrl: lastAttachParts ? rebuildAttachUrl(lastAttachParts) : null,
+		mode: deriveEnvironment(router.active.kind, getLiveIntent(), router.activeRelayOrigin)
 	});
 	let qrServer;
 	try {
@@ -5648,7 +6073,8 @@ async function runLocalDebugServer(options = {}) {
 			onWssUrl: (wssUrl) => {
 				lockHandle.updateWssUrl(wssUrl);
 				qrServer?.notifyStateChange();
-			}
+			},
+			onAuthReject: () => diagnosticsCollector.recordAuthReject()
 		}),
 		diagnosticsCollector,
 		devtoolsOpener,
@@ -5796,7 +6222,8 @@ async function runMobileDebugServer(options = {}) {
 			onWssUrl: (wssUrl) => {
 				lockHandle.updateWssUrl(wssUrl);
 				qrServer?.notifyStateChange();
-			}
+			},
+			onAuthReject: () => diagnosticsCollector.recordAuthReject()
 		}),
 		diagnosticsCollector,
 		devtoolsOpener,
@@ -6334,7 +6761,7 @@ function createDevServer(deps = {}) {
 	const aitSource = deps.aitSource ?? new HttpAitSource({ stateEndpoint });
 	const server = new Server({
 		name: "ait-devtools",
-		version: "0.1.66"
+		version: "0.1.68"
 	}, { capabilities: { tools: {} } });
 	server.setRequestHandler(ListToolsRequestSchema, () => ({ tools: DEV_TOOL_DEFINITIONS.map((tool) => ({ ...tool })) }));
 	server.setRequestHandler(CallToolRequestSchema, async (request) => {