대시보드 폴드아웃/드릴다운 정리 + 페르소나 역린·misconduct 반응 + 게이트웨이 격리·RAG 비차단 수정

SSOT 대시보드:
- 한신대 기술분석 PDF(19쪽) 정합성 분석 + 이번 세션 발견 섹션 추가
- 섹션 폴드아웃(접기)·상단 목차(드릴다운)·모두 펼치기/접기 — 내용 보존, 레이아웃만 정리

페르소나 반응 강화('저항·반응 조절' 핵심 차별):
- PersonaCard.triggers(역린) 필드 + CCD 핵심상처 파생 역린 블록
- L0에 무례·모욕·조롱 시 현실적 동맹 균열 반응 지침

버그·성능 수정(라이브/E2E로 포착):
- 게이트웨이 페르소나 격리: --append-system-prompt를 --system-prompt(교체)로 + --exclude-dynamic-system-prompt-sections (내담자 캐릭터 붕괴·개발맥락 누출 차단)
- RAG: 임베더 동기 로드(약 7-13초)를 _warm_rag_caches 백그라운드 warm으로(세션 생성 블로킹 회귀 수정)
- voice TTS RMS 데드힌트 제거, init_state OpennessParams 파라미터객체화
- 한국어 PII(날짜·금액·주소) 마스킹 보강
- 레이아웃 시각 게이트: 폼 컨트롤 값 스크롤 오탐 제외(7/7)

검증: 백엔드 84/84, E2E 42(데스크톱 27·모바일 11·아바타 4), 시각 게이트 7/7

apps/web/e2e/session-layout.spec.ts

@@ -55,16 +55,15 @@ async function expectMobileContextIfNarrow(page: Page) {
   const isPhoneLayout = await page.evaluate(() =>
     window.matchMedia("(max-width: 880px)").matches,
   );
+  await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
   if (isPhoneLayout) {
     await expect(page.locator(".sx-page--active .sx-col-left")).toBeHidden();
-    await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
   } else {
-    const feedbackSurface = page.locator(".sx-page--active .sx-col-right");
-    await expect(feedbackSurface).toBeVisible();
-    await expect(feedbackSurface).toBeInViewport();
+    await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
   }
   const mobileContext = page.getByLabel("현재 회기 요약");
   await expect(mobileContext).toBeVisible();
+  await expect(page.locator(".sx-page--active .sx-mobile-context__brief")).toBeVisible();
   await expect(mobileContext).toContainText("조용히 표시");
   await expect(mobileContext).toContainText("내담자");
   await expect(mobileContext).toContainText("마이크");
@@ -122,6 +121,225 @@ async function expectSessionControlsInsideViewport(page: Page) {
   ).toEqual([]);
 }
 
+async function expectNoVisibleSessionPanelOverlap(page: Page) {
+  const result = await page.evaluate(() => {
+    const selectors = [
+      ".sx-page--active .sx-mobile-context",
+      ".sx-page--active .sx-col-left",
+      ".sx-page--active .sx-stage",
+      ".sx-page--active .sx-transcript",
+      ".sx-page--active .sx-col-right",
+      ".sx-page--active .sx-controlbar",
+    ];
+
+    const panels = selectors
+      .map((selector) => {
+        const el = document.querySelector<HTMLElement>(selector);
+        if (!el) return null;
+        const rect = el.getBoundingClientRect();
+        const style = window.getComputedStyle(el);
+        const visible =
+          style.display !== "none" &&
+          style.visibility !== "hidden" &&
+          Number(style.opacity) !== 0 &&
+          rect.width > 0 &&
+          rect.height > 0;
+        if (!visible) return null;
+        return {
+          selector,
+          rect: {
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+          },
+        };
+      })
+      .filter((item): item is NonNullable<typeof item> => Boolean(item));
+
+    const overlaps: Array<{ a: string; b: string; area: number }> = [];
+    for (let i = 0; i < panels.length; i += 1) {
+      for (let j = i + 1; j < panels.length; j += 1) {
+        const a = panels[i];
+        const b = panels[j];
+        const width = Math.min(a.rect.right, b.rect.right) - Math.max(a.rect.left, b.rect.left);
+        const height = Math.min(a.rect.bottom, b.rect.bottom) - Math.max(a.rect.top, b.rect.top);
+        const area = Math.max(0, width) * Math.max(0, height);
+        if (area > 1) {
+          overlaps.push({ a: a.selector, b: b.selector, area: Math.round(area) });
+        }
+      }
+    }
+
+    return {
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      panels: panels.map((panel) => ({
+        selector: panel.selector,
+        rect: {
+          top: Math.round(panel.rect.top),
+          right: Math.round(panel.rect.right),
+          bottom: Math.round(panel.rect.bottom),
+          left: Math.round(panel.rect.left),
+          width: Math.round(panel.rect.width),
+          height: Math.round(panel.rect.height),
+        },
+      })),
+      overlaps,
+    };
+  });
+
+  expect(
+    result.overlaps,
+    `Visible session panels overlap at ${result.viewport.width}x${result.viewport.height}: ${JSON.stringify(result)}`,
+  ).toEqual([]);
+}
+
+async function expectMainControlsUnclipped(page: Page) {
+  const result = await page.evaluate(() => {
+    const controls = [
+      { selector: ".sx-compose textarea", parent: ".sx-compose" },
+      { selector: ".sx-compose .vg-btn", parent: ".sx-compose" },
+      { selector: ".sx-controlbar .sx-mic", parent: ".sx-controlbar" },
+      { selector: ".sx-controlbar .sx-segmented", parent: ".sx-controlbar" },
+      { selector: ".sx-controlbar .sx-pause", parent: ".sx-controlbar" },
+      { selector: ".sx-controlbar .sx-slide-end", parent: ".sx-controlbar" },
+    ];
+
+    return controls.map(({ selector, parent }) => {
+      const el = document.querySelector<HTMLElement>(selector);
+      const parentEl = document.querySelector<HTMLElement>(parent);
+      if (!el || !parentEl) return { selector, ok: false, reason: "missing" };
+
+      const rect = el.getBoundingClientRect();
+      const parentRect = parentEl.getBoundingClientRect();
+      const style = window.getComputedStyle(el);
+      const visible =
+        style.display !== "none" &&
+        style.visibility !== "hidden" &&
+        Number(style.opacity) !== 0 &&
+        rect.width > 0 &&
+        rect.height > 0;
+      const textCanClip = Number.parseFloat(style.fontSize) > 0;
+      const textClipped =
+        textCanClip &&
+        (Math.ceil(el.scrollWidth - el.clientWidth) > 1 ||
+          Math.ceil(el.scrollHeight - el.clientHeight) > 1);
+      const insideParent =
+        rect.top >= parentRect.top - 1 &&
+        rect.left >= parentRect.left - 1 &&
+        rect.right <= parentRect.right + 1 &&
+        rect.bottom <= parentRect.bottom + 1;
+
+      return {
+        selector,
+        ok: visible && insideParent && !textClipped,
+        reason: !visible ? "not-visible" : !insideParent ? "outside-parent" : textClipped ? "text-clipped" : "",
+        rect: {
+          top: Math.round(rect.top),
+          right: Math.round(rect.right),
+          bottom: Math.round(rect.bottom),
+          left: Math.round(rect.left),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        },
+        parentRect: {
+          top: Math.round(parentRect.top),
+          right: Math.round(parentRect.right),
+          bottom: Math.round(parentRect.bottom),
+          left: Math.round(parentRect.left),
+          width: Math.round(parentRect.width),
+          height: Math.round(parentRect.height),
+        },
+        scrollWidth: el.scrollWidth,
+        clientWidth: el.clientWidth,
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+      };
+    });
+  });
+
+  const failures = result.filter((check) => !check.ok);
+  expect(failures, `Main session controls are clipped: ${JSON.stringify(failures)}`).toEqual([]);
+}
+
+async function expectRightPanelDoesNotIntersectSessionCore(page: Page) {
+  const result = await page.evaluate(() => {
+    const right = document.querySelector<HTMLElement>(".sx-page--active .sx-col-right");
+    const coreSelectors = [
+      ".sx-page--active .sx-col-center",
+      ".sx-page--active .sx-stage",
+      ".sx-page--active .sx-transcript",
+      ".sx-page--active .sx-controlbar",
+    ];
+
+    const toSnapshot = (rect: DOMRect) => ({
+      top: Math.round(rect.top),
+      right: Math.round(rect.right),
+      bottom: Math.round(rect.bottom),
+      left: Math.round(rect.left),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+    });
+
+    if (!right) {
+      return { ok: false, reason: "missing-right-panel" };
+    }
+
+    const rightRect = right.getBoundingClientRect();
+    const rightStyle = window.getComputedStyle(right);
+    const rightVisible =
+      rightStyle.display !== "none" &&
+      rightStyle.visibility !== "hidden" &&
+      Number(rightStyle.opacity) !== 0 &&
+      rightRect.width > 0 &&
+      rightRect.height > 0;
+    const missing: string[] = [];
+    const intersections: Array<{ selector: string; rect: ReturnType<typeof toSnapshot> }> = [];
+
+    for (const selector of coreSelectors) {
+      const el = document.querySelector<HTMLElement>(selector);
+      if (!el) {
+        missing.push(selector);
+        continue;
+      }
+
+      const rect = el.getBoundingClientRect();
+      const intersects =
+        rightVisible &&
+        rightRect.left < rect.right - 1 &&
+        rightRect.right > rect.left + 1 &&
+        rightRect.top < rect.bottom - 1 &&
+        rightRect.bottom > rect.top + 1;
+      if (intersects) {
+        intersections.push({ selector, rect: toSnapshot(rect) });
+      }
+    }
+
+    return {
+      ok: missing.length === 0 && intersections.length === 0,
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      narrow: window.matchMedia("(max-width: 1180px)").matches,
+      rightVisible,
+      rightRect: toSnapshot(rightRect),
+      missing,
+      intersections,
+    };
+  });
+
+  expect(
+    result.ok,
+    `Right feedback panel intersects session core: ${JSON.stringify(result)}`,
+  ).toBeTruthy();
+  if ("narrow" in result && result.narrow) {
+    expect(
+      result.rightVisible,
+      `Right feedback panel should be hidden at <=1180px: ${JSON.stringify(result)}`,
+    ).toBe(false);
+  }
+}
+
 async function expectActiveSessionUsableLayout(page: Page) {
   const result = await page.evaluate(() => {
     const grid = document.querySelector<HTMLElement>(".sx-page--active .sx-grid");
@@ -144,12 +362,18 @@ async function expectActiveSessionUsableLayout(page: Page) {
     const stageOverflow = stage.scrollHeight - stage.clientHeight;
     const transcriptOverflow = transcript.scrollHeight - transcript.clientHeight;
     const phone = window.matchMedia("(max-width: 880px)").matches;
+    const centerHeight = centerRect.height;
+    const stageHeight = stageRect.height;
+    const transcriptHeight = transcriptRect.height;
 
     return {
       ok: true,
       phone,
       gridWidth: Math.round(gridRect.width),
       centerWidth: Math.round(centerRect.width),
+      centerHeight: Math.round(centerHeight),
+      stageHeight: Math.round(stageHeight),
+      transcriptHeight: Math.round(transcriptHeight),
       scrollHeight: Math.round(scroll.getBoundingClientRect().height),
       stageOverflow,
       transcriptOverflow,
@@ -170,6 +394,14 @@ async function expectActiveSessionUsableLayout(page: Page) {
     ).toBeLessThanOrEqual(2);
   }
   expect(result.scrollHeight, `Transcript viewport too small: ${JSON.stringify(result)}`).toBeGreaterThanOrEqual(110);
+  expect(
+    result.transcriptHeight,
+    `Transcript should be the dominant practice area: ${JSON.stringify(result)}`,
+  ).toBeGreaterThanOrEqual(result.stageHeight);
+  expect(
+    result.transcriptHeight / result.centerHeight,
+    `Transcript is using too little of the center column: ${JSON.stringify(result)}`,
+  ).toBeGreaterThanOrEqual(0.52);
   expect(result.stageOverflow, `Stage content clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
   expect(result.transcriptOverflow, `Transcript chrome clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
   expect(result.stageBottom, `Stage overlaps transcript: ${JSON.stringify(result)}`).toBeLessThanOrEqual(result.transcriptTop);
@@ -202,6 +434,9 @@ test.describe("learner session full-screen layout", () => {
     await expectSessionPageHeightToMatchViewport(page);
     await expectMobileContextIfNarrow(page);
     await expectSessionControlsInsideViewport(page);
+    await expectNoVisibleSessionPanelOverlap(page);
+    await expectMainControlsUnclipped(page);
+    await expectRightPanelDoesNotIntersectSessionCore(page);
   });
 
   test("keeps critical session controls visible across dense viewport sizes", async ({ page }) => {
@@ -211,8 +446,12 @@ test.describe("learner session full-screen layout", () => {
     const viewports = [
       { width: 1366, height: 768 },
       { width: 1366, height: 720 },
+      { width: 1180, height: 768 },
+      { width: 1100, height: 768 },
       { width: 1024, height: 768 },
       { width: 1024, height: 640 },
+      { width: 900, height: 768 },
+      { width: 881, height: 768 },
       { width: 820, height: 1180 },
       { width: 390, height: 844 },
       { width: 375, height: 667 },
@@ -233,19 +472,23 @@ test.describe("learner session full-screen layout", () => {
       await expectNoHorizontalOverflow(page);
       await expectNoLocalStageDemoControl(page);
       await expectSessionControlsInsideViewport(page);
+      await expectNoVisibleSessionPanelOverlap(page);
+      await expectMainControlsUnclipped(page);
       await expectSessionPageHeightToMatchViewport(page);
       await expectActiveSessionUsableLayout(page);
+      await expectRightPanelDoesNotIntersectSessionCore(page);
 
       if (viewport.width <= 1180) {
         await expect(page.locator(".sx-page--active .sx-mobile-context")).toBeVisible();
-      }
-      if (viewport.width > 880 && viewport.width <= 1180) {
+        await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
+      } else {
         await expect(page.locator(".sx-page--active .sx-col-right")).toBeVisible();
         await expect(page.locator(".sx-page--active .sx-col-right")).toBeInViewport();
-        await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
       }
-      if (viewport.width <= 880) {
-        await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
+      if (viewport.width > 880 && viewport.width <= 1180) {
+        await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
+      } else if (viewport.width <= 880) {
+        await expect(page.locator(".sx-page--active .sx-col-left")).toBeHidden();
       }
     }
   });