대시보드 폴드아웃/드릴다운 정리 + 페르소나 역린·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
This commit is contained in:
Yun Chan
parent
cb2aebd76c
commit
085460b5e0
327 changed files with 31226 additions and 1829 deletions
|
|
@ -112,6 +112,226 @@ function hasEngineConfigRequestBody(engineMode: string, model: string) {
|
|||
};
|
||||
}
|
||||
|
||||
async function expectNoEngineSegmentClipping(page: Page) {
|
||||
await expect
|
||||
.poll(async () =>
|
||||
page.evaluate(() => {
|
||||
const issues: Array<{
|
||||
target: string;
|
||||
text: string;
|
||||
inlineOverflow: number;
|
||||
blockOverflow: number;
|
||||
leftOverflow: number;
|
||||
rightOverflow: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}> = [];
|
||||
|
||||
const segment = document.querySelector<HTMLElement>("#set-engine .vg-set__seg");
|
||||
if (!segment) {
|
||||
return [
|
||||
{
|
||||
target: "segment",
|
||||
text: "missing",
|
||||
inlineOverflow: 0,
|
||||
blockOverflow: 0,
|
||||
leftOverflow: 0,
|
||||
rightOverflow: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const segmentRect = segment.getBoundingClientRect();
|
||||
const segmentInlineOverflow = Math.ceil(segment.scrollWidth - segment.clientWidth);
|
||||
const segmentBlockOverflow = Math.ceil(segment.scrollHeight - segment.clientHeight);
|
||||
if (segmentInlineOverflow > 1 || segmentBlockOverflow > 1) {
|
||||
issues.push({
|
||||
target: "segment",
|
||||
text: "",
|
||||
inlineOverflow: segmentInlineOverflow,
|
||||
blockOverflow: segmentBlockOverflow,
|
||||
leftOverflow: 0,
|
||||
rightOverflow: 0,
|
||||
width: Math.ceil(segmentRect.width),
|
||||
height: Math.ceil(segmentRect.height),
|
||||
});
|
||||
}
|
||||
|
||||
for (const button of Array.from(
|
||||
segment.querySelectorAll<HTMLElement>(".vg-set__seg-btn"),
|
||||
)) {
|
||||
const rect = button.getBoundingClientRect();
|
||||
const inlineOverflow = Math.ceil(button.scrollWidth - button.clientWidth);
|
||||
const blockOverflow = Math.ceil(button.scrollHeight - button.clientHeight);
|
||||
const leftOverflow = Math.ceil(segmentRect.left - rect.left);
|
||||
const rightOverflow = Math.ceil(rect.right - segmentRect.right);
|
||||
|
||||
if (
|
||||
inlineOverflow > 1 ||
|
||||
blockOverflow > 1 ||
|
||||
leftOverflow > 1 ||
|
||||
rightOverflow > 1
|
||||
) {
|
||||
issues.push({
|
||||
target: "button",
|
||||
text: (button.textContent ?? "").replace(/\s+/g, " ").trim(),
|
||||
inlineOverflow,
|
||||
blockOverflow,
|
||||
leftOverflow,
|
||||
rightOverflow,
|
||||
width: Math.ceil(rect.width),
|
||||
height: Math.ceil(rect.height),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return issues;
|
||||
}),
|
||||
)
|
||||
.toEqual([]);
|
||||
}
|
||||
|
||||
async function expectNoSettingsControlClipping(page: Page) {
|
||||
await expect
|
||||
.poll(async () =>
|
||||
page.evaluate(() => {
|
||||
const selector = [
|
||||
".vg-set",
|
||||
".vg-set__rail",
|
||||
".vg-set__rail-card",
|
||||
".vg-set__nav",
|
||||
".vg-set__nav-item",
|
||||
".vg-set__forms",
|
||||
".vg-set__group",
|
||||
".vg-set__profile",
|
||||
".vg-set__field",
|
||||
".vg-set__control-block",
|
||||
".vg-set__opt",
|
||||
".vg-set__voice",
|
||||
".vg-set__range-row",
|
||||
".vg-set__seg",
|
||||
".vg-set__seg-btn",
|
||||
".vg-btn",
|
||||
".vg-toggle",
|
||||
].join(",");
|
||||
const issues: Array<{
|
||||
target: string;
|
||||
text: string;
|
||||
inlineOverflow: number;
|
||||
blockOverflow: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}> = [];
|
||||
|
||||
for (const element of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const style = window.getComputedStyle(element);
|
||||
const visible =
|
||||
style.display !== "none" &&
|
||||
style.visibility !== "hidden" &&
|
||||
Number(style.opacity) !== 0 &&
|
||||
rect.width > 0 &&
|
||||
rect.height > 0;
|
||||
|
||||
if (!visible) continue;
|
||||
|
||||
const inlineOverflow = Math.ceil(element.scrollWidth - element.clientWidth);
|
||||
const blockOverflow = Math.ceil(element.scrollHeight - element.clientHeight);
|
||||
const allowsInlineScroll = element.classList.contains("vg-set__nav");
|
||||
|
||||
if ((!allowsInlineScroll && inlineOverflow > 1) || blockOverflow > 1) {
|
||||
issues.push({
|
||||
target: `.${Array.from(element.classList).join(".") || element.tagName.toLowerCase()}`,
|
||||
text: (element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 80),
|
||||
inlineOverflow,
|
||||
blockOverflow,
|
||||
width: Math.ceil(rect.width),
|
||||
height: Math.ceil(rect.height),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return issues.slice(0, 8);
|
||||
}),
|
||||
)
|
||||
.toEqual([]);
|
||||
}
|
||||
|
||||
async function expectPracticalSettingsLayout(page: Page, mode: "desktop" | "mobile") {
|
||||
await expect
|
||||
.poll(async () =>
|
||||
page.evaluate((layoutMode) => {
|
||||
const countColumns = (template: string) =>
|
||||
template === "none" ? 0 : template.split(" ").filter(Boolean).length;
|
||||
const root = document.querySelector<HTMLElement>(".vg-set");
|
||||
const forms = document.querySelector<HTMLElement>(".vg-set__forms");
|
||||
const railCard = document.querySelector<HTMLElement>(".vg-set__rail-card");
|
||||
const nav = document.querySelector<HTMLElement>(".vg-set__nav");
|
||||
const account = document.querySelector<HTMLElement>("#set-account");
|
||||
const appearance = document.querySelector<HTMLElement>("#set-appearance");
|
||||
const notify = document.querySelector<HTMLElement>("#set-notify");
|
||||
const voice = document.querySelector<HTMLElement>("#set-voice");
|
||||
|
||||
if (!root || !forms || !railCard || !nav || !account || !appearance || !notify || !voice) {
|
||||
return { ready: false };
|
||||
}
|
||||
|
||||
const rootColumns = countColumns(getComputedStyle(root).gridTemplateColumns);
|
||||
const formColumns = countColumns(getComputedStyle(forms).gridTemplateColumns);
|
||||
const railCardRect = railCard.getBoundingClientRect();
|
||||
const navRect = nav.getBoundingClientRect();
|
||||
const accountStyle = getComputedStyle(account);
|
||||
const appearanceRect = appearance.getBoundingClientRect();
|
||||
const notifyRect = notify.getBoundingClientRect();
|
||||
const voiceRect = voice.getBoundingClientRect();
|
||||
|
||||
if (layoutMode === "desktop") {
|
||||
return {
|
||||
ready: true,
|
||||
rootColumns,
|
||||
formColumns,
|
||||
railCardVisible: railCardRect.height > 24,
|
||||
shortPanelsShareRow:
|
||||
Math.abs(appearanceRect.top - notifyRect.top) <= 4 &&
|
||||
appearanceRect.left < notifyRect.left,
|
||||
voiceBelowShortPanels:
|
||||
voiceRect.top > appearanceRect.top && voiceRect.top > notifyRect.top,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ready: true,
|
||||
rootColumns,
|
||||
formColumns,
|
||||
railCardHidden: railCardRect.height === 0,
|
||||
navSingleLine: navRect.height <= 54,
|
||||
compactPanelPadding: Number.parseFloat(accountStyle.paddingTop) <= 14,
|
||||
};
|
||||
}, mode),
|
||||
)
|
||||
.toEqual(
|
||||
mode === "desktop"
|
||||
? {
|
||||
ready: true,
|
||||
rootColumns: 2,
|
||||
formColumns: 2,
|
||||
railCardVisible: true,
|
||||
shortPanelsShareRow: true,
|
||||
voiceBelowShortPanels: true,
|
||||
}
|
||||
: {
|
||||
ready: true,
|
||||
rootColumns: 1,
|
||||
formColumns: 1,
|
||||
railCardHidden: true,
|
||||
navSingleLine: true,
|
||||
compactPanelPadding: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function slugFor(testInfo: TestInfo) {
|
||||
let hash = 0;
|
||||
for (const char of testInfo.title) {
|
||||
|
|
@ -396,6 +616,20 @@ test.describe("settings page", () => {
|
|||
});
|
||||
});
|
||||
|
||||
test("admin settings use a compact clipping-safe control layout", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
const isMobile = testInfo.project.name.includes("mobile");
|
||||
const displayName = `Settings Layout Admin ${testInfo.project.name}`;
|
||||
await signInAs(page, "admin", testInfo, displayName);
|
||||
|
||||
await openSettings(page, { admin: true });
|
||||
|
||||
await expectPracticalSettingsLayout(page, isMobile ? "mobile" : "desktop");
|
||||
await expectNoSettingsControlClipping(page);
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
|
||||
test("admin engine settings panel stays readable at a mobile viewport", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
|
|
@ -409,11 +643,13 @@ test.describe("settings page", () => {
|
|||
const engine = page.locator("#set-engine");
|
||||
await expect(engine).toBeVisible();
|
||||
await expect(engine.locator("[data-engine-mode]")).toHaveCount(4);
|
||||
await expectNoEngineSegmentClipping(page);
|
||||
await expect(engine.locator("input").nth(0)).toBeVisible();
|
||||
await expect(engine.locator("input").nth(0)).toHaveValue(engineConfig!.engine_url);
|
||||
await expect(engine.locator("input").nth(1)).toBeVisible();
|
||||
await expect(engine.locator("input").nth(1)).toHaveValue(engineConfig!.model);
|
||||
|
||||
await expectNoSettingsControlClipping(page);
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
|
||||
|
|
@ -423,6 +659,7 @@ test.describe("settings page", () => {
|
|||
|
||||
await openSettings(page, { admin: true });
|
||||
|
||||
await expectNoSettingsControlClipping(page);
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue