Yaowei Zheng
838 lines
41 KiB
JavaScript
838 lines
41 KiB
JavaScript
/**
|
|
* Layout regressions:
|
|
* - the English draft page must not overflow horizontally on desktop (1280) or mobile (390)
|
|
* (the input card's toolbar row help text / button text must wrap to fit the **card width**;
|
|
* it used to blow out the card under English copy);
|
|
* - the draft state doesn't show the context-usage ring (no session yet); it shows normally
|
|
* once inside a session;
|
|
* - the models page at 390x844 must not overflow horizontally, and text must not overlap
|
|
* (the group header's provider name used to get pushed out of the button box and overlap
|
|
* the group-level actions), and its model dialog opts every field out of browser autofill
|
|
* (the API-key box used to receive the account's saved password, the box above it the
|
|
* username);
|
|
* - every chat-page dropdown menu, opened at phone widths (375/390), must keep its panel
|
|
* inside the viewport and must not shove the page sideways (the model menu used to run
|
|
* ~34px off-screen left, the skills menu ~92px off-screen right — with its autofocused
|
|
* search box then horizontally scrolling the whole draft page — and the workspace menu
|
|
* ~143px off-screen right when the ownership pills share one row);
|
|
* - no page grows the **document**: the app shell is height-constrained and each page scrolls
|
|
* inside its own container, so a second scrollbar means either an absolutely positioned
|
|
* descendant escaped its scroller (the Traces tree and the Agent settings page both had one,
|
|
* visible only with a second Agent below a long list) or something that cannot shrink no
|
|
* longer fits — checked at 420/320/240px tall in both sidebar states, since the sidebar's
|
|
* chrome used to stop fitting below ~412px;
|
|
* - the sidebar's "New chat" button has no background fill (same gray-scale style as nav items);
|
|
* - the collapsed rail shows, in product-specified order, last conversation / new chat /
|
|
* Agents / Skills / Models / Costs / Traces / Benchmark with localized (en + zh) hover
|
|
* tooltips; "last conversation" targets the newest non-archived session and is disabled
|
|
* while none exists; expanding from the rail restores the pinned sidebar;
|
|
* - login page: a single brand penguin logo above the form (part of the form area; the
|
|
* background still only has the trace animation), the trace animation grows in after a
|
|
* delayed blank first paint, no two trace segments cross or touch (except where a fork shares
|
|
* an endpoint with its parent line), the language / theme controls work, and English sits
|
|
* left of 中文.
|
|
*/
|
|
import { test, expect } from "@playwright/test";
|
|
import { provisionAndLogin } from "./auth.mjs";
|
|
|
|
const BASE = process.env.BASE_URL;
|
|
const MOCK = process.env.MOCK_URL;
|
|
const U = "layoutuser";
|
|
const P = "password123";
|
|
|
|
const docWidths = (page) =>
|
|
page.evaluate(() => ({
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
clientWidth: document.documentElement.clientWidth,
|
|
}));
|
|
|
|
/** Count of pairwise rectangle intersections among visible leaf text elements (2px tolerance; ancestor-descendant pairs excluded). */
|
|
const textOverlapCount = (page) =>
|
|
page.evaluate(() => {
|
|
const isVisible = (el) => {
|
|
const s = getComputedStyle(el);
|
|
return s.visibility !== "hidden" && s.display !== "none" && Number(s.opacity) > 0.05;
|
|
};
|
|
const leaves = [];
|
|
for (const el of document.querySelectorAll("body *")) {
|
|
if (!isVisible(el)) continue;
|
|
const hasText = [...el.childNodes].some(
|
|
(n) => n.nodeType === 3 && n.textContent && n.textContent.trim(),
|
|
);
|
|
if (!hasText) continue;
|
|
const r = el.getBoundingClientRect();
|
|
if (r.width < 2 || r.height < 2) continue;
|
|
leaves.push({ el, r });
|
|
}
|
|
const TOL = 2;
|
|
let count = 0;
|
|
for (let i = 0; i < leaves.length; i += 1) {
|
|
for (let j = i + 1; j < leaves.length; j += 1) {
|
|
const a = leaves[i];
|
|
const b = leaves[j];
|
|
if (a.el.contains(b.el) || b.el.contains(a.el)) continue;
|
|
const w = Math.min(a.r.right, b.r.right) - Math.max(a.r.left, b.r.left);
|
|
const h = Math.min(a.r.bottom, b.r.bottom) - Math.max(a.r.top, b.r.top);
|
|
if (w > TOL && h > TOL) count += 1;
|
|
}
|
|
}
|
|
return count;
|
|
});
|
|
|
|
test("layout: en draft + context gauge + mobile models", async ({ page }) => {
|
|
// English copy is longer, making it the worst case for layout wrapping.
|
|
await page.addInitScript(() => localStorage.setItem("penguin.lang", "en"));
|
|
await provisionAndLogin(page.request, U, P);
|
|
const projects = await (await page.request.get(`${BASE}/api/projects`)).json();
|
|
const projectId = projects.projects[0].projectId;
|
|
const put = await page.request.put(`${BASE}/api/projects/${projectId}/models`, {
|
|
data: {
|
|
defaultModel: { provider: "custom", modelId: "claude-4-8" },
|
|
models: [
|
|
{
|
|
provider: "custom",
|
|
modelId: "claude-4-8",
|
|
apiKey: "sk-mock",
|
|
contextWindow: 200000,
|
|
pricing: { cacheRead: 1, cacheWrite: 5, output: 10 },
|
|
},
|
|
{ provider: "openai", modelId: "gpt-5.5", apiKey: "sk-mock2" },
|
|
{ provider: "google", modelId: "gemini-3-pro" },
|
|
],
|
|
},
|
|
});
|
|
expect(put.ok(), "put models").toBeTruthy();
|
|
|
|
// --- Draft page: must not overflow horizontally on desktop or mobile; no context ring in draft state ---
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
await page.goto(`${BASE}/chat/new`);
|
|
await page.getByPlaceholder(/Type a message/).waitFor();
|
|
let d = await docWidths(page);
|
|
expect(d.scrollWidth, "draft @1280 no horizontal overflow").toBeLessThanOrEqual(d.clientWidth);
|
|
await expect(page.locator('[title*="Context usage"]')).toHaveCount(0);
|
|
|
|
// Goal mode keeps its chip compact: the committed budget is a value button, while editing
|
|
// happens in a fixed upward popover (never inline and never covering the objective textarea).
|
|
await page.getByRole("button", { name: "More input options" }).click();
|
|
await page.getByRole("button", { name: /Goal mode/ }).click();
|
|
const budgetTrigger = page.getByRole("button", { name: "Budget unlimited" });
|
|
await expect(budgetTrigger).toBeVisible();
|
|
await expect(page.getByRole("textbox", { name: "Token budget" })).toHaveCount(0);
|
|
|
|
await budgetTrigger.click();
|
|
const budget = page.getByRole("textbox", { name: "Token budget" });
|
|
await expect(budget).toBeVisible();
|
|
const popoverPosition = await budget.evaluate((el) => {
|
|
const panel = el.closest(".absolute");
|
|
const trigger = panel.parentElement.querySelector('button[aria-expanded="true"]');
|
|
const p = panel.getBoundingClientRect();
|
|
const t = trigger.getBoundingClientRect();
|
|
return { panelBottom: p.bottom, triggerTop: t.top };
|
|
});
|
|
expect(
|
|
popoverPosition.panelBottom,
|
|
"goal budget popover stays above its trigger",
|
|
).toBeLessThanOrEqual(popoverPosition.triggerTop);
|
|
|
|
await budget.fill("500k");
|
|
await budget.press("Enter");
|
|
await expect(page.getByRole("button", { name: "Budget 500k" })).toBeVisible();
|
|
await expect(budget).toHaveCount(0);
|
|
|
|
// Invalid edits stay local to the popover: save is disabled and Escape restores the
|
|
// previously committed value rather than poisoning the send state.
|
|
const committedBudget = page.getByRole("button", { name: "Budget 500k" });
|
|
await committedBudget.click();
|
|
await budget.fill("not-a-budget");
|
|
await expect(page.getByRole("button", { name: "Save budget" })).toBeDisabled();
|
|
await budget.press("Escape");
|
|
await expect(committedBudget).toBeVisible();
|
|
|
|
// Any other close (outside click, toggling the trigger) commits a valid draft instead of
|
|
// silently dropping it — typing a budget and clicking straight onto Send must keep it.
|
|
await committedBudget.click();
|
|
await budget.fill("750k");
|
|
await page.getByPlaceholder(/Type a message/).click();
|
|
const recommittedBudget = page.getByRole("button", { name: "Budget 750k" });
|
|
await expect(recommittedBudget).toBeVisible();
|
|
|
|
// An invalid draft refuses to close (outside clicks included) and disables Send — no click
|
|
// sequence can fire a goal with the stale committed budget while the editor shows garbage.
|
|
await page.getByPlaceholder(/Type a message/).fill("goal objective");
|
|
await recommittedBudget.click();
|
|
await budget.fill("not-a-budget");
|
|
await expect(page.getByRole("button", { name: "Send", exact: true })).toBeDisabled();
|
|
await page.getByPlaceholder(/Type a message/).click();
|
|
await expect(budget).toBeVisible();
|
|
// Escape is focus-independent: after the refused outside click, focus sits in the
|
|
// objective textarea — Escape must still cancel the editor from there.
|
|
await page.keyboard.press("Escape");
|
|
await expect(recommittedBudget).toBeVisible();
|
|
|
|
// Escape cancels from any editor control, not just the input: a valid uncommitted draft
|
|
// Tab-bed onto the save button still reverts instead of committing.
|
|
await recommittedBudget.click();
|
|
await budget.fill("123k");
|
|
await budget.press("Tab");
|
|
await page.keyboard.press("Escape");
|
|
await expect(recommittedBudget).toBeVisible();
|
|
await page.getByPlaceholder(/Type a message/).fill("");
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.waitForTimeout(200);
|
|
await recommittedBudget.click();
|
|
d = await docWidths(page);
|
|
expect(d.scrollWidth, "goal-mode draft @390 no horizontal overflow").toBeLessThanOrEqual(
|
|
d.clientWidth,
|
|
);
|
|
const budgetPopoverBounds = await budget.evaluate((el) => {
|
|
const rect = el.closest(".absolute").getBoundingClientRect();
|
|
return { left: rect.left, right: rect.right, viewport: window.innerWidth };
|
|
});
|
|
expect(
|
|
budgetPopoverBounds.left,
|
|
"goal budget popover left edge on-screen",
|
|
).toBeGreaterThanOrEqual(0);
|
|
expect(budgetPopoverBounds.right, "goal budget popover right edge on-screen").toBeLessThanOrEqual(
|
|
budgetPopoverBounds.viewport,
|
|
);
|
|
|
|
// Leave the composer in its normal mode for the remaining layout assertions.
|
|
await budget.press("Escape");
|
|
await page.getByRole("button", { name: "Exit goal mode" }).click();
|
|
|
|
// --- Session state shows the ring as usual (creating a session via the API and entering it directly, no need to actually run a Task) ---
|
|
const sess = await (
|
|
await page.request.post(`${BASE}/api/projects/${projectId}/agents/default_agent/sessions`, {
|
|
data: { provider: "custom", modelId: "claude-4-8" },
|
|
})
|
|
).json();
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
await page.goto(`${BASE}/chat/${sess.session.sessionId}`);
|
|
await page.getByPlaceholder(/Type a message/).waitFor();
|
|
await expect(page.locator('[title*="Context usage"]')).toHaveCount(1);
|
|
|
|
// --- Models page @390: must not overflow, text must not overlap ---
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto(`${BASE}/models`);
|
|
await page.getByText("claude-4-8").first().waitFor();
|
|
d = await docWidths(page);
|
|
expect(d.scrollWidth, "models @390 no horizontal overflow").toBeLessThanOrEqual(d.clientWidth);
|
|
expect(await textOverlapCount(page), "models @390 no overlapping text").toBe(0);
|
|
|
|
// --- Model dialog: no field may invite the browser's saved login. The dialog's fields are
|
|
// unowned (no <form>), so the browser groups them with the rest of the page and picks a
|
|
// "username" box on its own — it used to fill the account credentials into the API key and
|
|
// the field above it. A password box additionally has to say "new-password": Chrome and
|
|
// Safari ignore autocomplete="off" there. ---
|
|
await page.getByText("claude-4-8").first().click();
|
|
const dialogFields = await page.evaluate(() =>
|
|
[...document.querySelectorAll("input")]
|
|
.filter((i) => i.type !== "checkbox" && i.type !== "file")
|
|
.map((i) => ({
|
|
type: i.type,
|
|
autocomplete: i.getAttribute("autocomplete"),
|
|
ignored: i.hasAttribute("data-1p-ignore") && i.getAttribute("data-lpignore") === "true",
|
|
})),
|
|
);
|
|
expect(dialogFields.length, "model dialog fields found").toBeGreaterThan(3);
|
|
expect(
|
|
dialogFields.filter((f) => f.type === "password"),
|
|
"the API-key box opts out as new-password",
|
|
).toEqual([{ type: "password", autocomplete: "new-password", ignored: true }]);
|
|
expect(
|
|
dialogFields.filter((f) => f.autocomplete !== "off" && f.type !== "password"),
|
|
"no other field declares an autofill role",
|
|
).toEqual([]);
|
|
expect(
|
|
dialogFields.filter((f) => !f.ignored),
|
|
"every field carries the password-manager opt-out",
|
|
).toEqual([]);
|
|
await page.keyboard.press("Escape");
|
|
|
|
// --- Sidebar "New chat" button: no background fill (its resting state outside the draft page should have a transparent background) ---
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
const newChat = page.locator("nav").getByRole("button", { name: "New chat" });
|
|
await expect(newChat).toBeVisible();
|
|
expect(
|
|
await newChat.evaluate((el) => getComputedStyle(el).backgroundColor),
|
|
"new-chat button has no background fill",
|
|
).toBe("rgba(0, 0, 0, 0)");
|
|
});
|
|
|
|
test("layout: collapsed rail — order, bilingual tooltips, last conversation", async ({ page }) => {
|
|
await page.addInitScript(() => localStorage.setItem("penguin.lang", "en"));
|
|
await provisionAndLogin(page.request, "railuser", P);
|
|
const projects = await (await page.request.get(`${BASE}/api/projects`)).json();
|
|
const projectId = projects.projects[0].projectId;
|
|
const put = await page.request.put(`${BASE}/api/projects/${projectId}/models`, {
|
|
data: {
|
|
defaultModel: { provider: "custom", modelId: "claude-4-8" },
|
|
models: [{ provider: "custom", modelId: "claude-4-8", apiKey: "sk-mock" }],
|
|
},
|
|
});
|
|
expect(put.ok(), "put models").toBeTruthy();
|
|
|
|
// --- No sessions yet: the rail renders all 8 entries, "last conversation" disabled ---
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
await page.goto(`${BASE}/chat`);
|
|
await page.getByRole("button", { name: "Collapse sidebar" }).click();
|
|
const rail = page.locator("aside nav");
|
|
const entries = rail.locator("a, button");
|
|
await expect(entries).toHaveCount(8);
|
|
await expect(rail.getByRole("button", { name: "Last conversation" })).toBeDisabled();
|
|
|
|
// --- Order and tooltips (en): aria-label defines the order, title carries the same copy ---
|
|
const EN = [
|
|
"Last conversation",
|
|
"New chat",
|
|
"Agents",
|
|
"Skills",
|
|
"Models",
|
|
"Costs",
|
|
"Trajectory",
|
|
"Evaluation Center",
|
|
];
|
|
const attrs = (name) =>
|
|
entries.evaluateAll((els, n) => els.map((el) => el.getAttribute(n)), name);
|
|
expect(await attrs("aria-label"), "rail order (en)").toEqual(EN);
|
|
expect(await attrs("title"), "rail tooltips (en)").toEqual(EN);
|
|
|
|
// --- Three sessions via the API (distinct createdAt), newest archived: the rail must target the newest *non-archived* one ---
|
|
const mkSession = async () => {
|
|
const res = await page.request.post(
|
|
`${BASE}/api/projects/${projectId}/agents/default_agent/sessions`,
|
|
{ data: { provider: "custom", modelId: "claude-4-8" } },
|
|
);
|
|
expect(res.ok(), "create session").toBeTruthy();
|
|
return (await res.json()).session.sessionId;
|
|
};
|
|
await mkSession();
|
|
await page.waitForTimeout(25);
|
|
const target = await mkSession();
|
|
await page.waitForTimeout(25);
|
|
const archived = await mkSession();
|
|
const patched = await page.request.patch(`${BASE}/api/sessions/${archived}`, {
|
|
data: { archived: true },
|
|
});
|
|
expect(patched.ok(), "archive newest session").toBeTruthy();
|
|
await page.reload(); // the session store loads on mount; the collapsed state persists via localStorage
|
|
|
|
// A click during the fetch window is a graceful no-op (the entry stays enabled while the
|
|
// list loads), so retry click+assert until the store has settled.
|
|
await expect(async () => {
|
|
await rail.getByRole("button", { name: "Last conversation" }).click();
|
|
await expect(page, "last conversation → newest non-archived session").toHaveURL(
|
|
`${BASE}/chat/${target}`,
|
|
{ timeout: 1000 },
|
|
);
|
|
}).toPass({ timeout: 15_000 });
|
|
// Active fill = the *unprefixed* bg-gray-200/70 token (the resting state carries hover:bg-gray-200/70, which a bare substring match would also hit).
|
|
const ACTIVE_FILL = /(^|\s)bg-gray-200\/70(\s|$)/;
|
|
// On a conversation, the entry lights as "you are here" (any non-draft /chat/:id).
|
|
await expect(rail.getByRole("button", { name: "Last conversation" })).toHaveClass(ACTIVE_FILL);
|
|
|
|
// --- New chat enters the draft page and shows the rail's gray active fill there ---
|
|
await rail.getByRole("button", { name: "New chat" }).click();
|
|
await expect(page).toHaveURL(`${BASE}/chat/new`);
|
|
await expect(rail.getByRole("button", { name: "New chat" })).toHaveClass(ACTIVE_FILL);
|
|
// The draft belongs to the new-chat entry: the last-conversation one must not stay lit here.
|
|
await expect(rail.getByRole("button", { name: "Last conversation" })).not.toHaveClass(
|
|
ACTIVE_FILL,
|
|
);
|
|
|
|
// --- Page entries navigate and highlight like the pinned nav ---
|
|
await rail.getByRole("link", { name: "Skills" }).click();
|
|
await expect(page).toHaveURL(`${BASE}/skills`);
|
|
await expect(rail.getByRole("link", { name: "Skills" })).toHaveClass(ACTIVE_FILL);
|
|
|
|
// --- zh: tooltips follow the product-specified wording ---
|
|
await page.addInitScript(() => localStorage.setItem("penguin.lang", "zh"));
|
|
await page.reload();
|
|
await expect(entries).toHaveCount(8);
|
|
const ZH = [
|
|
"最近一次对话",
|
|
"新建对话",
|
|
"智能体",
|
|
"技能库",
|
|
"模型仓库",
|
|
"成本中心",
|
|
"轨迹观测",
|
|
"评估中心",
|
|
];
|
|
expect(await attrs("aria-label"), "rail order (zh)").toEqual(ZH);
|
|
expect(await attrs("title"), "rail tooltips (zh)").toEqual(ZH);
|
|
|
|
// --- Expand: the rail's top button (localized) restores the pinned sidebar ---
|
|
await page.getByRole("button", { name: "展开侧栏" }).click();
|
|
await expect(page.locator("aside")).toHaveClass(/w-64/);
|
|
await expect(page.getByRole("button", { name: "收起侧栏" })).toBeVisible();
|
|
});
|
|
|
|
test("layout: mobile chat dropdowns stay inside the viewport", async ({ page }) => {
|
|
await page.addInitScript(() => localStorage.setItem("penguin.lang", "en"));
|
|
await provisionAndLogin(page.request, "layoutdropdowns", P);
|
|
const projects = await (await page.request.get(`${BASE}/api/projects`)).json();
|
|
const projectId = projects.projects[0].projectId;
|
|
// Keyed models unblock the draft page (no "missing key" modal); the long-id model pushes the
|
|
// model menu's w-max width to its clamp, and the key-less one adds the show-all expander row.
|
|
const put = await page.request.put(`${BASE}/api/projects/${projectId}/models`, {
|
|
data: {
|
|
defaultModel: { provider: "custom", modelId: "claude-4-8" },
|
|
models: [
|
|
{
|
|
provider: "custom",
|
|
modelId: "claude-4-8",
|
|
apiKey: "sk-mock",
|
|
baseUrl: MOCK,
|
|
contextWindow: 200000,
|
|
},
|
|
{ provider: "openai", modelId: "gpt-5.5", apiKey: "sk-mock2" },
|
|
{
|
|
provider: "custom",
|
|
modelId: "anthropic/claude-sonnet-4-5-thinking-preview",
|
|
apiKey: "sk-mock3",
|
|
},
|
|
{ provider: "google", modelId: "gemini-3-pro" },
|
|
],
|
|
},
|
|
});
|
|
expect(put.ok(), "put models").toBeTruthy();
|
|
|
|
const panel = page.locator("div.anim-pop.z-40");
|
|
/** Assert the one open menu panel and the page itself stay inside the viewport. */
|
|
const checkPanel = async (name) => {
|
|
await expect(panel, `${name}: menu open`).toHaveCount(1);
|
|
await page.waitForTimeout(200); // let the pop-in scale animation settle before measuring
|
|
const m = await panel.evaluate((el) => {
|
|
const r = el.getBoundingClientRect();
|
|
// A horizontally scrolled ancestor is the old failure mode: the menu's autofocused
|
|
// search box dragged the overflowing panel into view, shoving the page sideways.
|
|
let scrolled = 0;
|
|
for (let p = el.parentElement; p; p = p.parentElement) {
|
|
scrolled = Math.max(scrolled, Math.abs(p.scrollLeft));
|
|
}
|
|
return { left: r.left, right: r.right, vw: window.innerWidth, scrolled };
|
|
});
|
|
expect(m.left, `${name}: panel left edge on-screen`).toBeGreaterThanOrEqual(0);
|
|
expect(m.right, `${name}: panel right edge on-screen`).toBeLessThanOrEqual(m.vw);
|
|
expect(m.scrolled, `${name}: page not scrolled sideways`).toBe(0);
|
|
const d = await docWidths(page);
|
|
expect(d.scrollWidth, `${name}: no horizontal overflow`).toBeLessThanOrEqual(d.clientWidth);
|
|
// On-screen coordinates alone don't prove the panel is *painted*: an ancestor with a
|
|
// non-visible overflow (the composer toolbar scrolls horizontally on phones) clips it
|
|
// while leaving its rect intact. Hit-test a point inside the panel's **visible** area —
|
|
// the rect's intersection with the viewport, since a long menu may legitimately extend
|
|
// past the fold on a page that scrolls.
|
|
await expect(panel, `${name}: panel visible`).toBeInViewport();
|
|
const hit = await panel.evaluate((el) => {
|
|
const r = el.getBoundingClientRect();
|
|
const top = Math.max(r.top, 0);
|
|
const bottom = Math.min(r.bottom, window.innerHeight);
|
|
if (bottom - top < 2) return "no visible area";
|
|
const x = Math.round(Math.max(r.left, 0) + Math.min(r.width / 2, 40));
|
|
const y = Math.round(top + Math.min((bottom - top) / 2, 20));
|
|
const hitEl = document.elementFromPoint(x, y);
|
|
if (!hitEl) return "nothing at the sampled point";
|
|
return el.contains(hitEl) || el === hitEl ? true : `covered by ${hitEl.tagName}`;
|
|
});
|
|
expect(hit, `${name}: panel not clipped by an ancestor`).toBe(true);
|
|
};
|
|
const open = async (label, name) => {
|
|
await page.locator(`button[aria-label="${label}"]`).click();
|
|
await checkPanel(name);
|
|
};
|
|
const close = async () => {
|
|
await page.keyboard.press("Escape");
|
|
await expect(panel).toHaveCount(0);
|
|
};
|
|
|
|
// Draft page, both common phone widths. The two widths exercise different geometry for the
|
|
// ownership pills below the card: at 375 they wrap onto two rows (workspace pill at the row
|
|
// start), at 390 they share one row (workspace pill anchored mid-screen).
|
|
for (const vp of [
|
|
{ width: 375, height: 667 },
|
|
{ width: 390, height: 844 },
|
|
]) {
|
|
await page.setViewportSize(vp);
|
|
await page.goto(`${BASE}/chat/new`);
|
|
await page.getByPlaceholder(/Type a message/).waitFor();
|
|
// Model / thinking-level buttons stay disabled until models and the agent config load.
|
|
await expect(page.locator('button[aria-label="Choose model"]')).toBeEnabled();
|
|
await expect(page.locator('button[aria-label="Thinking level"]')).toBeEnabled();
|
|
await open("Approval mode", `approval @${vp.width}`);
|
|
await close();
|
|
await open("Skills", `skills @${vp.width}`);
|
|
await close();
|
|
await open("Thinking level", `thinking @${vp.width}`);
|
|
await close();
|
|
await open("Choose model", `model @${vp.width}`);
|
|
// Reveal the key-less remainder — the widest state of the w-max panel — and re-check.
|
|
await page.getByRole("button", { name: /without a key/ }).click();
|
|
await checkPanel(`model show-all @${vp.width}`);
|
|
await close();
|
|
await open("Choose agent", `agent @${vp.width}`);
|
|
await close();
|
|
await open("Workspace", `workspace @${vp.width}`);
|
|
await close();
|
|
}
|
|
|
|
// Session state (bottom-docked composer, menus open upward). The composer toolbar scrolls
|
|
// horizontally at phone widths, so every picker in it must escape that clipping ancestor —
|
|
// checked idle **and** while a Task runs (an always-ask session parks on a pending
|
|
// approval), at the narrowest widths we support.
|
|
const sess = await (
|
|
await page.request.post(`${BASE}/api/projects/${projectId}/agents/default_agent/sessions`, {
|
|
data: { provider: "custom", modelId: "claude-4-8", approvalMode: "always-ask" },
|
|
})
|
|
).json();
|
|
const sessionPickers = ["Approval mode", "Skills", "More input options", "Thinking level"];
|
|
for (const vp of [
|
|
{ width: 320, height: 640 },
|
|
{ width: 375, height: 667 },
|
|
]) {
|
|
await page.setViewportSize(vp);
|
|
await page.goto(`${BASE}/chat/${sess.session.sessionId}`);
|
|
await page.getByPlaceholder(/Type a message/).waitFor();
|
|
for (const label of sessionPickers) {
|
|
await open(label, `${label} @session ${vp.width}`);
|
|
await close();
|
|
}
|
|
}
|
|
|
|
// Running state: send a message, wait for the pending approval (the run stays running), then
|
|
// re-open every picker. The composer stays enabled for steering, so the row is at its
|
|
// busiest here — this is the state the toolbar overflowed in.
|
|
await page.getByPlaceholder(/Type a message/).fill("Help me set up @theme");
|
|
await page.locator('button[aria-label="Send"]').click();
|
|
await page.getByRole("button", { name: /^Allow$/ }).waitFor();
|
|
// Skills are deliberately locked mid-run; the rest must still open.
|
|
await expect(page.locator('button[aria-label="Skills"]')).toBeDisabled();
|
|
for (const label of ["Approval mode", "More input options", "Thinking level"]) {
|
|
await open(label, `${label} @running 375`);
|
|
await close();
|
|
}
|
|
// …and the toolbar itself still fits, with the merged Stop/Send button reachable.
|
|
const running = await docWidths(page);
|
|
expect(running.scrollWidth, "running toolbar: no horizontal overflow").toBeLessThanOrEqual(
|
|
running.clientWidth,
|
|
);
|
|
await expect(page.locator('button[aria-label="Stop"]')).toBeVisible();
|
|
|
|
// Running + pending approval at 390x844: every running-state row must stay one line below
|
|
// sm — the page must not scroll sideways, the work-group header must not wrap to a second
|
|
// line, and the Allow/Deny action buttons read as text at every breakpoint (per review:
|
|
// buttons the user presses must be words, iconic shorthand is for passive indicators only).
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.waitForTimeout(200);
|
|
const d390 = await docWidths(page);
|
|
expect(d390.scrollWidth, "running @390 no horizontal overflow").toBeLessThanOrEqual(
|
|
d390.clientWidth,
|
|
);
|
|
// Single line = ~33px (py-2 + one text line); a wrapped header would measure ~48px+.
|
|
const workHeader = page.locator("button[aria-expanded]").filter({ hasText: "Running" }).first();
|
|
expect(
|
|
await workHeader.evaluate((el) => el.clientHeight),
|
|
"work-group header stays single-line @390",
|
|
).toBeLessThanOrEqual(40);
|
|
await expect(page.getByRole("button", { name: /^Allow$/ })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: /^Deny$/ })).toBeVisible();
|
|
// The words themselves are rendered — not a glyph with an aria-label.
|
|
await expect(page.getByRole("button", { name: /^Allow$/ })).toHaveText("Allow", {
|
|
useInnerText: true,
|
|
});
|
|
await expect(page.getByRole("button", { name: /^Deny$/ })).toHaveText("Deny", {
|
|
useInnerText: true,
|
|
});
|
|
expect(await textOverlapCount(page), "running @390 no overlapping text").toBe(0);
|
|
|
|
// While PENDING the one-line rule yields on purpose: the user must read the whole command
|
|
// before deciding, so below sm the preview wraps in full (pre-wrap, no truncation, the block
|
|
// may grow) instead of clipping.
|
|
const pendingPreview = page.getByText("$ ls -la").first();
|
|
await expect(pendingPreview, "full command shown while pending @390").toBeVisible();
|
|
const pv = await pendingPreview.evaluate((el) => ({
|
|
whiteSpace: getComputedStyle(el).whiteSpace,
|
|
clipped: el.scrollWidth > el.clientWidth + 1,
|
|
}));
|
|
expect(pv.whiteSpace, "pending preview wraps below sm").toBe("pre-wrap");
|
|
expect(pv.clipped, "pending preview not clipped @390").toBe(false);
|
|
|
|
// Approve and let the turn finish: the per-reply stats footer must keep to its one fixed
|
|
// line at 390 (it used to wrap its chips onto a clipped second row that painted over the
|
|
// content below). On phones the row is slimmed to FIT: TPS is dropped and cost/elapsed use
|
|
// compact decimals, the hidden-scrollbar sideways scroll remaining only as a fallback; the
|
|
// copy button sits outside the scroll area so it can't scroll out of reach.
|
|
await page.getByRole("button", { name: /^Allow$/ }).click();
|
|
await expect(page.getByText("Command finished; the result looks as expected.")).toBeVisible();
|
|
const footer = page.getByRole("button", { name: "Copy reply" }).first().locator("xpath=..");
|
|
// Below sm the footer is ALWAYS visible at rest (no hover on touch screens — hover-gated
|
|
// opacity meant phones could never see the stats at all); ≥sm keeps the hover reveal, which
|
|
// chat.spec asserts at desktop width.
|
|
await page.mouse.move(0, 0);
|
|
await expect(footer, "stats footer visible at rest @390").toHaveCSS("opacity", "1");
|
|
// The USER message's footer (time + copy, bubble bottom-right) gets the same treatment:
|
|
// always visible below sm, since touch has no hover to reveal it with.
|
|
const userCopy = page.getByRole("button", { name: "Copy message" }).first();
|
|
await expect(userCopy, "user copy button visible at rest @390").toBeVisible();
|
|
await expect(userCopy.locator("xpath=.."), "user footer visible at rest @390").toHaveCSS(
|
|
"opacity",
|
|
"1",
|
|
);
|
|
// Chips at 390: input/output/elapsed shown (no pricing configured -> no cost chip); TPS is
|
|
// deliberately dropped below sm to keep the row inside the width.
|
|
for (const chip of ["Input tokens", "Output tokens", "Elapsed"]) {
|
|
await expect(footer.locator(`[title="${chip}"]`), `${chip} chip present @390`).toBeVisible();
|
|
}
|
|
await expect(footer.locator('[title="Output TPS"]'), "TPS chip in DOM").toHaveCount(1);
|
|
await expect(footer.locator('[title="Output TPS"]'), "TPS chip hidden @390").toBeHidden();
|
|
// With TPS dropped and compact decimals the common case FITS at 390 — no sideways scroll
|
|
// needed (the scroll container remains only as a fallback for extreme values).
|
|
const statsSpan = footer.locator("span").first();
|
|
const fit = await statsSpan.evaluate((el) => ({ sw: el.scrollWidth, cw: el.clientWidth }));
|
|
expect(fit.sw, "stats row fits @390 without scrolling").toBeLessThanOrEqual(fit.cw + 1);
|
|
const footerH = await footer.evaluate((el) => ({
|
|
client: el.clientHeight,
|
|
scroll: el.scrollHeight,
|
|
}));
|
|
expect(footerH.scroll, "stats footer stays single-line @390").toBeLessThanOrEqual(
|
|
footerH.client + 1,
|
|
);
|
|
const copyBox = await page.getByRole("button", { name: "Copy reply" }).first().boundingBox();
|
|
expect(copyBox.x, "copy button not pushed off-screen left @390").toBeGreaterThanOrEqual(0);
|
|
expect(copyBox.x + copyBox.width, "copy button pinned on-screen @390").toBeLessThanOrEqual(390);
|
|
// Inner scroll containers are fine; the page itself must not gain a sideways scroll.
|
|
const dDone = await docWidths(page);
|
|
expect(dDone.scrollWidth, "finished @390 no horizontal overflow").toBeLessThanOrEqual(
|
|
dDone.clientWidth,
|
|
);
|
|
|
|
// The decision lives ONLY in the tool card's left status icon: "Approved · manual" on the
|
|
// icon's title/aria-label, zero visible decision text on the row (the right-side indicator
|
|
// was removed per review), and the header stays one line.
|
|
await page.locator("button[aria-expanded]").filter({ hasText: "Done" }).last().click();
|
|
const decided = page.locator('[aria-label="Approved · manual"]').first();
|
|
await expect(decided, "status icon carries the decision @390").toBeVisible();
|
|
const toolHeader = page.locator("button[aria-expanded]", { has: decided }).first();
|
|
await expect(
|
|
toolHeader.getByText(/Approved|Denied/).filter({ visible: true }),
|
|
"no visible decision text on the card",
|
|
).toHaveCount(0);
|
|
expect(
|
|
await toolHeader.evaluate((el) => el.clientHeight),
|
|
"tool-card header stays single-line @390",
|
|
).toBeLessThanOrEqual(40);
|
|
expect(await textOverlapCount(page), "finished @390 no overlapping text").toBe(0);
|
|
|
|
// A DENIED call must state its outcome once, not twice: the deny path itself reports
|
|
// stop_reason "aborted", so the left status icon alone carries "Denied · manual"
|
|
// (title/aria-label) and the redundant "aborted" badge is dropped. Fresh session: the mock
|
|
// answers with plain text once any tool_result exists in the history.
|
|
const sess2 = await (
|
|
await page.request.post(`${BASE}/api/projects/${projectId}/agents/default_agent/sessions`, {
|
|
data: { provider: "custom", modelId: "claude-4-8", approvalMode: "always-ask" },
|
|
})
|
|
).json();
|
|
await page.goto(`${BASE}/chat/${sess2.session.sessionId}`);
|
|
await page.getByPlaceholder(/Type a message/).fill("Help me check the directory");
|
|
await page.locator('button[aria-label="Send"]').click();
|
|
await page.getByRole("button", { name: /^Deny$/ }).click();
|
|
await expect(page.getByText("Command finished; the result looks as expected.")).toBeVisible();
|
|
await page.locator("button[aria-expanded]").filter({ hasText: "Done" }).last().click();
|
|
const denied = page.locator('[aria-label="Denied · manual"]').first();
|
|
await expect(denied, "status icon carries the denial @390").toBeVisible();
|
|
const deniedHeader = page.locator("button[aria-expanded]", { has: denied }).first();
|
|
await expect(
|
|
deniedHeader.getByText("aborted"),
|
|
"no duplicate aborted badge on a denied call",
|
|
).toHaveCount(0);
|
|
expect(
|
|
await deniedHeader.evaluate((el) => el.clientHeight),
|
|
"denied card header stays single-line @390",
|
|
).toBeLessThanOrEqual(40);
|
|
});
|
|
|
|
/**
|
|
* The app shell is height-constrained: every page scrolls inside its own container and the
|
|
* document itself must never scroll. What breaks that is an absolutely positioned descendant
|
|
* whose containing block is the initial containing block — nothing between it and the root
|
|
* clips it, so its static position past the fold grows the **document**, producing a second
|
|
* scrollbar that drags the whole shell up. The Traces tree and the Agent settings page both
|
|
* had one (the `sr-only` file inputs of their import controls), visible only once a second
|
|
* Agent sat below a long list. This sweep is the general guard: with the data that exposes it,
|
|
* no page may grow the document.
|
|
*/
|
|
test("layout: no page grows the document (absolute descendants stay in their scroller)", async ({
|
|
page,
|
|
}) => {
|
|
await provisionAndLogin(page.request, "layoutheight", P);
|
|
const projects = await (await page.request.get(`${BASE}/api/projects`)).json();
|
|
const projectId = projects.projects[0].projectId;
|
|
const put = await page.request.put(`${BASE}/api/projects/${projectId}/models`, {
|
|
data: {
|
|
defaultModel: { provider: "custom", modelId: "claude-4-8" },
|
|
models: [
|
|
{
|
|
provider: "custom",
|
|
modelId: "claude-4-8",
|
|
apiKey: "sk-mock",
|
|
baseUrl: MOCK,
|
|
contextWindow: 200000,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
expect(put.ok(), "put models").toBeTruthy();
|
|
// A second Agent is what moves an import control below the fold; the Traces tree only lists
|
|
// Sessions that have a Trace file, so each one has to actually run a Task.
|
|
const second = await page.request.post(`${BASE}/api/projects/${projectId}/agents`, {
|
|
data: { agentId: "agent_two", name: "Agent Two" },
|
|
});
|
|
// 409 = the Agent survives from an earlier run of this spec against the same data root
|
|
// (provisioning is idempotent by convention here, so a spec can be rerun on its own).
|
|
expect([201, 409], "create second agent").toContain(second.status());
|
|
for (const agentId of ["default_agent", "agent_two"]) {
|
|
for (let i = 0; i < (agentId === "default_agent" ? 14 : 2); i += 1) {
|
|
const created = await (
|
|
await page.request.post(`${BASE}/api/projects/${projectId}/agents/${agentId}/sessions`, {
|
|
data: { provider: "custom", modelId: "claude-4-8" },
|
|
})
|
|
).json();
|
|
await page.request.post(`${BASE}/api/sessions/${created.session.sessionId}/tasks`, {
|
|
data: { input: [{ type: "text", text: "hi" }] },
|
|
});
|
|
}
|
|
}
|
|
|
|
// A short viewport puts the second Agent's node below the fold with a handful of Sessions
|
|
// instead of dozens — the same geometry a full-height window reaches with a longer list.
|
|
await page.setViewportSize({ width: 1440, height: 420 });
|
|
const paths = ["/traces", "/chat", "/agents", "/agents/default_agent", "/skills", "/models"];
|
|
const grewBy = (p) =>
|
|
p.evaluate(() => {
|
|
const de = document.documentElement;
|
|
return de.scrollHeight - de.clientHeight;
|
|
});
|
|
const overflowing = [];
|
|
for (const path of paths) {
|
|
await page.goto(`${BASE}${path}`);
|
|
await page.waitForTimeout(1200);
|
|
const grew = await grewBy(page);
|
|
if (grew > 0) overflowing.push(`${path} (+${grew}px)`);
|
|
}
|
|
expect(overflowing, "pages whose document scrolls").toEqual([]);
|
|
|
|
// The other way to grow the document: content that cannot shrink. The sidebar's own chrome
|
|
// (Project switcher, New chat, eight nav entries, user row) used to be fixed height and
|
|
// stopped fitting below ~412px — a window that short is reachable by browser zoom or docked
|
|
// devtools. The nav now scrolls with the session list, and the collapsed rail scrolls its
|
|
// icons the same way, so both states shrink to nothing instead of pushing the page out.
|
|
const railToggle = page.getByRole("button", { name: "收起侧栏" });
|
|
for (const height of [420, 320, 240]) {
|
|
await page.setViewportSize({ width: 1440, height });
|
|
await page.goto(`${BASE}/chat`);
|
|
await page.waitForTimeout(900);
|
|
expect(await grewBy(page), `pinned sidebar @${height}`).toBe(0);
|
|
}
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await page.goto(`${BASE}/chat`);
|
|
await railToggle.click();
|
|
for (const height of [420, 320, 240]) {
|
|
await page.setViewportSize({ width: 1440, height });
|
|
await page.waitForTimeout(700);
|
|
expect(await grewBy(page), `collapsed rail @${height}`).toBe(0);
|
|
}
|
|
});
|
|
|
|
test("layout: login — blank start, non-crossing traces, lang/theme controls", async ({ page }) => {
|
|
await page.goto(`${BASE}/login`);
|
|
await page.getByRole("heading", { name: "PenguinHarness" }).waitFor();
|
|
|
|
// The only graphic asset is the brand penguin logo above the form; the
|
|
// background still has only the trace animation, and the page must have no other img elements.
|
|
await expect(page.locator("img")).toHaveCount(1);
|
|
await expect(page.locator('img[src*="penguin-logo"]')).toBeVisible();
|
|
|
|
// Asserting the mechanism behind the blank first paint: every trace's delay is non-negative
|
|
// (no line is mid-animation on the first frame), and the base state (style before the
|
|
// animation starts) is fully hidden — temporarily disable the animation to read the base
|
|
// state, then restore it.
|
|
const delays = await page.evaluate(() =>
|
|
[...document.querySelectorAll(".login-trace")].map((el) =>
|
|
parseFloat(getComputedStyle(el).animationDelay),
|
|
),
|
|
);
|
|
expect(delays.length, "traces rendered").toBeGreaterThanOrEqual(6);
|
|
for (const d0 of delays) expect(d0, "non-negative delay").toBeGreaterThanOrEqual(0);
|
|
const base = await page.evaluate(() => {
|
|
const el = document.querySelector(".login-trace");
|
|
el.style.animation = "none";
|
|
const s = getComputedStyle(el);
|
|
const r = { opacity: parseFloat(s.opacity), dashoffset: parseFloat(s.strokeDashoffset) };
|
|
el.style.animation = "";
|
|
return r;
|
|
});
|
|
expect(base.opacity, "pre-animation base state hidden").toBe(0);
|
|
expect(base.dashoffset, "pre-animation base state undrawn").toBe(1);
|
|
|
|
// No two trace segments cross or touch (judged by zero gap between bounding boxes; excludes a fork sharing an endpoint with its parent line).
|
|
const touching = await page.evaluate(() => {
|
|
const segs = [];
|
|
document.querySelectorAll(".login-trace").forEach((p) => {
|
|
const n = (p.getAttribute("d")?.match(/-?\d+(?:\.\d+)?/g) ?? []).map(Number);
|
|
for (let i = 0; i + 3 < n.length; i += 2) {
|
|
segs.push({ x1: n[i], y1: n[i + 1], x2: n[i + 2], y2: n[i + 3] });
|
|
}
|
|
});
|
|
const ends = (s) => [
|
|
[s.x1, s.y1],
|
|
[s.x2, s.y2],
|
|
];
|
|
let bad = 0;
|
|
for (let i = 0; i < segs.length; i += 1) {
|
|
for (let j = i + 1; j < segs.length; j += 1) {
|
|
const a = segs[i];
|
|
const b = segs[j];
|
|
if (ends(a).some(([x, y]) => ends(b).some(([u, v]) => x === u && y === v))) continue;
|
|
if (
|
|
Math.min(a.x1, a.x2) <= Math.max(b.x1, b.x2) &&
|
|
Math.max(a.x1, a.x2) >= Math.min(b.x1, b.x2) &&
|
|
Math.min(a.y1, a.y2) <= Math.max(b.y1, b.y2) &&
|
|
Math.max(a.y1, a.y2) >= Math.min(b.y1, b.y2)
|
|
) {
|
|
bad += 1;
|
|
}
|
|
}
|
|
}
|
|
return bad;
|
|
});
|
|
expect(touching, "no crossing or touching trace segments").toBe(0);
|
|
|
|
// Traces grow in after load: after a short wait, some trace should have entered its visible segment.
|
|
await page.waitForTimeout(2600);
|
|
const maxOpacity = await page.evaluate(() =>
|
|
Math.max(
|
|
...[...document.querySelectorAll(".login-trace")].map((el) =>
|
|
parseFloat(getComputedStyle(el).opacity),
|
|
),
|
|
),
|
|
);
|
|
expect(maxOpacity, "traces grow in after load").toBeGreaterThan(0.5);
|
|
|
|
// The English language option sits left of 中文 (asserted by geometric position); switching takes effect immediately (headless defaults to the en environment).
|
|
const enBtn = page.getByRole("button", { name: "English", exact: true });
|
|
const zhBtn = page.getByRole("button", { name: "中文", exact: true });
|
|
const [enBox, zhBox] = [await enBtn.boundingBox(), await zhBtn.boundingBox()];
|
|
expect(enBox.x, "English left of 中文").toBeLessThan(zhBox.x);
|
|
await zhBtn.click();
|
|
await expect(page.getByRole("button", { name: "登录" })).toBeVisible();
|
|
await page.getByRole("button", { name: "English", exact: true }).click();
|
|
await expect(page.getByRole("button", { name: "Sign in" })).toBeVisible();
|
|
|
|
// Theme toggle: Dark adds html.dark, Light removes it.
|
|
await page.getByRole("button", { name: "Dark", exact: true }).click();
|
|
await expect(page.locator("html")).toHaveClass(/dark/);
|
|
await page.getByRole("button", { name: "Light", exact: true }).click();
|
|
await expect(page.locator("html")).not.toHaveClass(/dark/);
|
|
});
|