diff --git a/maps/feature-map/tasks.md b/maps/feature-map/tasks.md index 28c794fd07c..28dfc336689 100644 --- a/maps/feature-map/tasks.md +++ b/maps/feature-map/tasks.md @@ -59,6 +59,19 @@ Filters → **Routine tasks** selects tasks created by routine runs. The ### `task-detail` +During a cold open, task data prepares behind the shell loading view until the +personal presentation preference resolves. The temporary shell stays hidden. +The matching chat loading frame then owns the same viewport and +composer geometry as the resolved conversation. The real title and monitor +banner stay concealed until the initial reading position is prepared. The +[rich loading journey](../../tests/perf/issue-detail/loading-layout.spec.ts) +checks direct and list-based entry, delayed fonts and preferences, and desktop/mobile geometry +with a long saved thread, cards, a monitor, and a pending confirmation. This +synthetic local coverage does not establish a deployed staging pass. The normal +[browser CI journey](../../tests/e2e/task-loading-frame.spec.ts) also covers the +loading contract, Classic preference loading and typography, stable mobile chrome, +and a bounded wait for stalled fonts. + Open `/issues/:issueId` from a row, mention, or direct link. Cold opens show the instruction, recent exchange and saved cards together. Completed runs with saved replies defer their transcripts until the reader opens history. Live runs, failures, yielded runs and runs without a saved reply still hydrate; an already shown transcript stays available after completion. No URL fragment expands history; older-comment anchors fetch only their target, and document anchors open the pane. **More messages** appears only when earlier comments or runs are omitted and loads that history. Fresh tasks with no omitted history have no disclosure. A single run with deferred output or a truncated legacy log offers **More run output** instead. **More task actions → Show task activity** loads full activity even for a single native run; incoming messages remain visible while the task stays open. ### `task-sharing` diff --git a/tests/e2e/disconnect-write-recovery.spec.ts b/tests/e2e/disconnect-write-recovery.spec.ts index 780f6f27a04..1d7cc5d2fe1 100644 --- a/tests/e2e/disconnect-write-recovery.spec.ts +++ b/tests/e2e/disconnect-write-recovery.spec.ts @@ -95,7 +95,7 @@ test("two cached tasks keep separate title saves while the browser is offline", } }); -test("a queued startup save survives the first session lookup during an API outage", async ({ page, request }) => { +test("a cold task waits for the first session and retains a title saved during an API outage", async ({ page, request }) => { const company = await json(await request.post("/api/companies", { data: { name: `Startup recovery ${Date.now()}` } })); const session = await json(await request.get("/api/auth/get-session")); let releaseSession!: () => void; @@ -117,8 +117,17 @@ test("a queued startup save survives the first session lookup during an API outa await sessionReady; await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(session) }); }); + const coreReady = page.waitForResponse(response => { + const url = new URL(response.url()); + return url.pathname === `/api/issues/${issue.identifier}` && url.searchParams.get("view") === "core" && response.ok(); + }); await page.goto(`/${company.issuePrefix}/issues/${issue.identifier}`); + await coreReady; const header = page.getByTestId("issue-detail-header"); + await expect(page.getByTestId("shell-configuration-loading")).toBeVisible(); + await expect(header).toHaveCount(0); + releaseSession(); + await expect(page.getByTestId("task-chat-history-content")).toBeVisible({ timeout: 30_000 }); await expect(header.getByRole("heading", { name: issue.title, exact: true })).toBeVisible(); apiUnavailable = true; await page.evaluate(() => window.dispatchEvent(new Event("offline"))); @@ -127,7 +136,6 @@ test("a queued startup save survives the first session lookup during an API outa await header.locator("textarea").fill(savedTitle); await header.locator("textarea").press("Enter"); expect((await json(await request.get(`/api/issues/${issue.id}`))).title).toBe(issue.title); - releaseSession(); await expect.poll(() => page.evaluate(({ owner, title }) => Object.keys(localStorage).some(key => key.startsWith(`paperclip:inline-draft:v2:${owner}:`) && JSON.parse(localStorage.getItem(key) ?? "null")?.draft === title), { owner: session.user.id, title: savedTitle })).toBe(true); diff --git a/tests/e2e/task-loading-frame.spec.ts b/tests/e2e/task-loading-frame.spec.ts new file mode 100644 index 00000000000..aeb03694b03 --- /dev/null +++ b/tests/e2e/task-loading-frame.spec.ts @@ -0,0 +1,223 @@ +import { expect, test, type APIRequestContext, type APIResponse } from "@playwright/test"; + +async function json(response: APIResponse) { + expect(response.ok(), `${response.status()} ${await response.text()}`).toBe(true); + return response.json(); +} + +async function createTask(request: APIRequestContext) { + const company = await json(await request.post("/api/companies", { data: { name: "Loading frame verification" } })); + const title = "Investigate a long-running workspace and preserve its saved findings, document cards, and pending review without moving the initial reading position"; + const issue = await json(await request.post(`/api/companies/${company.id}/issues`, { data: { + title, status: "backlog", description: "## Saved investigation\n\n" + "Preserve the original report and all saved evidence. ".repeat(20), + } })); + return { company, issue, title, route: `/${company.issuePrefix}/issues/${issue.identifier}` }; +} + +for (const mobile of [false, true]) test(`a rich task uses one stable loading frame (${mobile ? "mobile" : "desktop"})`, async ({ page, request }, info) => { + test.setTimeout(60_000); + await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1280, height: 720 }); + const fixture = await createTask(request); + try { + for (let index = 0; index < 20; index++) await json(await request.post(`/api/issues/${fixture.issue.id}/comments`, { data: { + body: `## Saved findings ${index}\n\n` + "Checked the recorded evidence and retained the result for review. ".repeat(12), + } })); + await json(await request.put(`/api/issues/${fixture.issue.id}/documents/plan`, { data: { + title: "Investigation plan", format: "markdown", body: "# Plan\n\nKeep the findings with the original task.", + } })); + await json(await request.post(`/api/issues/${fixture.issue.id}/work-products`, { data: { + type: "pull_request", provider: "github", title: "Saved investigation patch", status: "active", + url: "https://github.com/example/layout-fixture/pull/42", metadata: { repository: "example/layout-fixture", number: 42 }, + } })); + await json(await request.post(`/api/issues/${fixture.issue.id}/interactions`, { data: { + kind: "request_confirmation", title: "Review the saved patch", continuationPolicy: "none", + payload: { version: 1, prompt: "Approve the saved findings?", acceptLabel: "Approve patch", rejectLabel: "Request changes" }, + } })); + await page.route("**/api/workspace-preferences/me", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: true } }); + }); + await page.addInitScript(() => { + const frames: Array<{ ready: boolean; headerVisible: boolean; loading: number[] | null; loadingComposer: number[] | null; composer: number[] | null; latestY?: number; scrollHeight?: number; loadingFont?: string; titleFont?: string }> = []; + Object.assign(window, { taskLoadingFrames: frames }); + const sample = () => { + const box = (selector: string) => { + const element = document.querySelector(selector); + if (!element || getComputedStyle(element).visibility !== "visible") return null; + const rect = element.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) return null; + return [rect.x, rect.y, rect.width, rect.height]; + }; + const font = (selector: string) => { + const element = document.querySelector(selector); + return element ? getComputedStyle(element).font : undefined; + }; + const header = document.querySelector('[data-testid="issue-detail-header"]'); + const bounds = header?.getBoundingClientRect(); + frames.push({ + ready: !!document.querySelector('[data-testid="task-chat-thread"] > [aria-busy="false"]'), + headerVisible: !!header && getComputedStyle(header).visibility === "visible" && bounds!.bottom > 60 && bounds!.top < innerHeight, + loading: box('[data-testid="task-chat-loading-frame"]'), + loadingComposer: box('[data-testid="task-chat-loading-composer"] .paperclip-task-chat-composer'), + composer: box('[data-testid="task-chat-composer-stack"] .paperclip-task-chat-composer'), + latestY: [...document.querySelectorAll('[id^="comment-"]')].at(-1)?.getBoundingClientRect().y, + scrollHeight: document.querySelector('[data-testid="task-chat-scroller"]')?.scrollHeight, + loadingFont: font('[data-slot="task-loading-title"]'), + titleFont: font('[data-testid="task-chat-history-content"] [data-testid="issue-detail-header"] h2'), + }); + requestAnimationFrame(sample); + }; + requestAnimationFrame(sample); + }); + await page.goto(fixture.route); + await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="false"]')).toBeVisible(); + await expect(page.getByRole("button", { name: "Approve patch", exact: true })).toBeVisible(); + await page.waitForTimeout(500); + const frames = await page.evaluate(() => (window as unknown as { taskLoadingFrames: Array<{ ready: boolean; headerVisible: boolean; loading: number[] | null; loadingComposer: number[] | null; composer: number[] | null; latestY?: number; scrollHeight?: number; loadingFont?: string; titleFont?: string }> }).taskLoadingFrames); + await info.attach("loading-frames", { body: JSON.stringify(frames), contentType: "application/json" }); + expect(frames.filter(frame => !frame.ready && frame.headerVisible)).toEqual([]); + const loading = frames.filter(frame => frame.loading); + const ready = frames.filter(frame => frame.ready && frame.latestY !== undefined); + expect(loading.length).toBeGreaterThan(1); + expect(ready.length).toBeGreaterThan(5); + for (let dimension = 0; dimension < 4; dimension++) { + const values = loading.map(frame => frame.loading![dimension]); + expect(Math.max(...values) - Math.min(...values)).toBeLessThanOrEqual(2); + expect(Math.abs(loading.at(-1)!.loadingComposer![dimension] - ready[0].composer![dimension])).toBeLessThanOrEqual(2); + } + expect(loading.at(-1)!.loadingFont).toBe(ready[0].titleFont); + expect(Math.max(...ready.map(frame => frame.latestY!)) - Math.min(...ready.map(frame => frame.latestY!))).toBeLessThanOrEqual(2); + expect(new Set(ready.map(frame => frame.scrollHeight)).size).toBe(1); + } finally { + await request.patch(`/api/companies/${fixture.company.id}`, { data: { status: "archived" } }); + } +}); + +test("Classic startup does not guess a chat layout while personal preferences are pending", async ({ page, request }) => { + const fixture = await createTask(request); + let release!: () => void; + const preferenceReady = new Promise(resolve => { release = resolve; }); + try { + await page.route("**/api/instance/settings/experimental", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), enableClassicTaskInterface: true, enableStreamlinedUi: false } }); + }); + await page.route("**/api/workspace-preferences/me", async route => { + await preferenceReady; + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: false } }); + }); + await page.goto(fixture.route); + await expect(page.getByTestId("shell-configuration-loading")).toBeVisible(); + await expect(page.locator("[data-task-chat-shell]")).toHaveCount(0); + await expect(page.getByTestId("issue-detail-header")).toHaveCount(0); + release(); + await expect(page.getByTestId("issue-detail-header").getByRole("heading", { name: fixture.title, exact: true })).toBeVisible(); + await expect(page.locator("[data-task-chat-shell]")).toHaveCount(0); + } finally { + release(); + await request.patch(`/api/companies/${fixture.company.id}`, { data: { status: "archived" } }); + } +}); + +test("a stalled web font does not hide an otherwise prepared conversation indefinitely", async ({ page, request }) => { + const fixture = await createTask(request); + let release!: () => void; + const fontReady = new Promise(resolve => { release = resolve; }); + try { + await page.route("**/api/workspace-preferences/me", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: true } }); + }); + await page.route("**/*.woff2", async route => { await fontReady; await route.abort(); }); + await page.goto(fixture.route, { waitUntil: "domcontentloaded" }); + await expect(page.getByTestId("task-chat-loading-frame")).toBeVisible(); + await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="false"]')).toBeVisible({ timeout: 5000 }); + await expect(page.getByTestId("task-chat-composer-stack").locator('[contenteditable="true"]')).toBeEditable(); + } finally { + release(); + await page.unrouteAll({ behavior: "wait" }); + await request.patch(`/api/companies/${fixture.company.id}`, { data: { status: "archived" } }); + } +}); + +for (const coordinator of [false, true]) test(`mobile chrome stays fixed when personal preferences resolve (Coordinator=${coordinator})`, async ({ page, request }, info) => { + await page.setViewportSize({ width: 390, height: 844 }); + const fixture = await createTask(request); + let release!: () => void; + const preferenceReady = new Promise(resolve => { release = resolve; }); + await page.addInitScript(() => { + const frames: number[][] = []; + Object.assign(window, { mobileShellFrames: frames }); + const sample = () => { + const shell = document.querySelector(".paperclip-app-shell"); + if (shell && shell.getBoundingClientRect().width > 0) { + const rects = [".app-breadcrumb", ".mobile-bottom-nav", "#main-content"].map(selector => document.querySelector(selector)!.getBoundingClientRect()); + frames.push([innerWidth, innerHeight, scrollX, scrollY, ...rects.flatMap((rect, index) => index === 2 ? [rect.x, rect.y, rect.width] : [rect.x, rect.y, rect.width, rect.height])]); + } + requestAnimationFrame(sample); + }; + requestAnimationFrame(sample); + }); + try { + await page.route("**/api/instance/settings/experimental", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), enableClassicTaskInterface: true, enableStreamlinedUi: false } }); + }); + await page.route("**/api/workspace-preferences/me", async route => { + await preferenceReady; + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: coordinator } }); + }); + await page.goto(fixture.route); + await expect(page.getByTestId("shell-configuration-loading")).toBeVisible(); + await expect(page.locator(".paperclip-app-shell")).toBeHidden(); + expect(await page.evaluate(() => (window as unknown as { mobileShellFrames: number[][] }).mobileShellFrames)).toEqual([]); + release(); + if (coordinator) await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="false"]')).toBeVisible(); + else await expect(page.getByTestId("issue-detail-header").getByRole("heading", { name: fixture.title, exact: true })).toBeVisible(); + await page.waitForTimeout(300); + const frames = await page.evaluate(() => (window as unknown as { mobileShellFrames: number[][] }).mobileShellFrames); + await info.attach("mobile-preference-chrome", { body: JSON.stringify(frames), contentType: "application/json" }); + expect(frames.length).toBeGreaterThan(5); + for (let dimension = 0; dimension < frames[0].length; dimension++) { + const values = frames.map(frame => frame[dimension]); + expect(Math.max(...values) - Math.min(...values)).toBeLessThanOrEqual(2); + } + } finally { + release(); + await request.patch(`/api/companies/${fixture.company.id}`, { data: { status: "archived" } }); + } +}); + +test("a seeded Classic loading title uses the resolved title typography", async ({ page, request }) => { + const fixture = await createTask(request); + let release!: () => void; + const coreReady = new Promise(resolve => { release = resolve; }); + try { + await page.route("**/api/instance/settings/experimental", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), enableClassicTaskInterface: true, enableStreamlinedUi: false } }); + }); + await page.route("**/api/workspace-preferences/me", async route => { + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: false } }); + }); + await page.goto(`/${fixture.company.issuePrefix}/issues`); + await page.getByRole("link").filter({ hasText: fixture.title }).first().click(); + await expect(page.getByTestId("issue-detail-header").getByRole("heading", { name: fixture.title, exact: true })).toBeVisible(); + await page.route("**/api/issues/*", async route => { await coreReady; await route.continue(); }); + await page.reload({ waitUntil: "domcontentloaded" }); + const loadingTitle = page.getByRole("heading", { name: fixture.title, exact: true }); + await expect(loadingTitle).toBeVisible(); + await expect(page.getByTestId("issue-detail-header")).toHaveCount(0); + const font = await loadingTitle.evaluate(element => getComputedStyle(element).font); + release(); + const title = page.getByTestId("issue-detail-header").getByRole("heading", { name: fixture.title, exact: true }); + await expect(title).toBeVisible(); + expect(await title.evaluate(element => getComputedStyle(element).font)).toBe(font); + } finally { + release(); + await request.patch(`/api/companies/${fixture.company.id}`, { data: { status: "archived" } }); + } +}); diff --git a/tests/perf/issue-detail/README.md b/tests/perf/issue-detail/README.md index ce6a5a25199..f121475c2fd 100644 --- a/tests/perf/issue-detail/README.md +++ b/tests/perf/issue-detail/README.md @@ -52,6 +52,23 @@ include completed requests observed during the sample, even after content paint. ## Task layout stability +The normal browser CI suite also runs `tests/e2e/task-loading-frame.spec.ts`. +It seeds a smaller API-only task and checks desktop/mobile frame and composer +geometry, title typography, the initial reading position, Classic preference +loading and typography, mobile shell handoff, and a stalled font request. It does not require a separate database URL. +The rich 200-message fixture below remains an additional local stress journey. + +`loading-layout.spec.ts` uses a retained synthetic task with a wrapping title, +200 saved messages, document and PR cards, a monitor, and a pending confirmation. +It records every animation frame during direct and list-based entry on desktop +and mobile, including delayed web fonts and workspace preferences. It rejects real headers shown before +the initial conversation is ready, loading-frame movement, different header +typography, composer displacement, and movement of the initial reading position. +The fixture requires the disposable PostgreSQL URL described below. Its agent +has interval and on-demand wakes disabled, including when the retained fixture +is reused. The suite does not start provider work. +Videos, screenshots, and `frames.json` are retained with each result. + `compact-startup.spec.ts` keeps a synthetic local reproduction with 24 messages, a plan, three documents and three saved PR cards. It holds the enriched task response, records each visible frame's card count and geometry, and rejects diff --git a/tests/perf/issue-detail/compact-startup.spec.ts b/tests/perf/issue-detail/compact-startup.spec.ts index 55ab9737a03..19073fe4830 100644 --- a/tests/perf/issue-detail/compact-startup.spec.ts +++ b/tests/perf/issue-detail/compact-startup.spec.ts @@ -76,7 +76,8 @@ test("a delayed Coordinator preference cannot expand a cold task through Classic }); try { await page.goto(`/${fixture.prefix}/issues/${fixture.identifier}`); - await expect(page.getByTestId("issue-detail-header")).toContainText("Review the latest investigation"); + await expect(page.getByTestId("shell-configuration-loading")).toBeVisible(); + await expect(page.getByRole("heading", { name: "Review the latest investigation", exact: true })).not.toBeVisible(); expect(historyRequests).toEqual([]); release(); await ready(page); diff --git a/tests/perf/issue-detail/loading-layout.spec.ts b/tests/perf/issue-detail/loading-layout.spec.ts new file mode 100644 index 00000000000..e6a85b116b9 --- /dev/null +++ b/tests/perf/issue-detail/loading-layout.spec.ts @@ -0,0 +1,111 @@ +import fs from "node:fs/promises"; +import { expect, test } from "@playwright/test"; +import { richLoadingFixture, type RichLoadingFixture } from "./rich-loading-fixture"; + +type Box = { x: number; y: number; width: number; height: number }; +type Font = { family: string; size: string; lineHeight: string; weight: string }; +type Frame = { time: number; ready: boolean; visibleHeader: boolean; loading: Box | null; latest: Box | null; scrollHeight?: number; loadingComposer: Box | null; composer: Box | null; loadingFont: Font | null; titleFont: Font | null; identifier: Box | null; identifierFont: Font | null }; + +test.use({ video: "on", trace: "retain-on-failure", serviceWorkers: "block", colorScheme: "dark" }); +test.setTimeout(60_000); +test.skip(!process.env.PAPERCLIP_ISSUE_PERF_DATABASE_URL, "The rich loading fixture requires disposable PostgreSQL"); + +let fixture: RichLoadingFixture; +test.beforeAll(async ({ request }) => { fixture = await richLoadingFixture(request); }); + +for (const entry of ["direct", "list", "delayed fonts", "delayed preferences"] as const) for (const mobile of [false, true]) test(`a rich task reveals once without flashing its header or moving its reading position (${entry}, ${mobile ? "mobile" : "desktop"})`, async ({ page }, info) => { + await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1280, height: 720 }); + await page.route("**/api/workspace-preferences/me", async route => { + if (entry === "delayed preferences") await new Promise(resolve => setTimeout(resolve, 2500)); + const response = await route.fetch(); + await route.fulfill({ json: { ...await response.json(), coordinatorWorkspaceEnabled: true } }); + }); + if (entry === "delayed fonts") await page.route("**/*.woff2", async route => { + await new Promise(resolve => setTimeout(resolve, 2500)); + await route.continue(); + }); + await page.addInitScript(() => { + const frames: Frame[] = []; + Object.assign(window, { loadingLayoutFrames: frames }); + const sample = () => { + const loading = document.querySelector('[data-testid="task-chat-loading-frame"]'); + const ready = document.querySelector('[data-testid="task-chat-thread"] > [aria-busy="false"]'); + const scroller = document.querySelector('[data-testid="task-chat-scroller"]'); + const last = [...document.querySelectorAll('[id^="comment-"]')].at(-1); + const identifier = [...document.querySelectorAll('[data-slot="task-title-identifier"]')].find(el => { + const rect = el.getBoundingClientRect(); + return rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.bottom <= 76 && getComputedStyle(el).visibility === "visible"; + }); + const visibleHeader = [...document.querySelectorAll('[data-testid="issue-detail-header"]')].some(el => { + const rect = el.getBoundingClientRect(); + return getComputedStyle(el).visibility === "visible" && rect.bottom > 60 && rect.top < innerHeight; + }); + const box = (el: Element | null | undefined) => { + if (!el || getComputedStyle(el).visibility !== "visible") return null; + const rect = el.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) return null; + return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }; + }; + const font = (el: Element | null) => { + if (!el) return null; + const style = getComputedStyle(el); + return { family: style.fontFamily, size: style.fontSize, lineHeight: style.lineHeight, weight: style.fontWeight }; + }; + frames.push({ time: performance.now(), ready: !!ready, visibleHeader, loading: box(loading), latest: box(last), scrollHeight: scroller?.scrollHeight, + loadingComposer: box(document.querySelector('[data-testid="task-chat-loading-composer"] .paperclip-task-chat-composer')), + composer: box(document.querySelector('[data-testid="task-chat-composer-stack"] .paperclip-task-chat-composer')), + loadingFont: font(document.querySelector('[data-slot="task-loading-title"]')), + titleFont: font(document.querySelector('[data-testid="task-chat-history-content"] [data-testid="issue-detail-header"] h2')), + identifier: box(identifier), identifierFont: font(identifier ?? null), + }); + requestAnimationFrame(sample); + }; + requestAnimationFrame(sample); + }); + const cdp = await page.context().newCDPSession(page); + await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 }); + await cdp.send("Network.enable"); + await cdp.send("Network.emulateNetworkConditions", { offline: false, latency: 80, downloadThroughput: 1179648, uploadThroughput: 196608 }); + if (entry === "list") { + await page.goto(`/${fixture.prefix}/issues`); + await page.locator("[data-inbox-issue-link]").filter({ hasText: fixture.title }).first().click(); + } else { + await page.goto(`/${fixture.prefix}/issues/${fixture.identifier}`); + } + await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="false"]')).toBeVisible(); + await expect(page.getByTestId("task-chat-composer-stack").locator('[contenteditable="true"]')).toBeEditable(); + await expect(page.getByRole("button", { name: "Approve patch", exact: true })).toBeVisible(); + await expect(page.getByText("Latest investigation findings", { exact: true })).toBeAttached(); + await page.waitForTimeout(500); + const frames = await page.evaluate(() => (window as unknown as { loadingLayoutFrames: Frame[] }).loadingLayoutFrames); + await fs.writeFile(info.outputPath("frames.json"), JSON.stringify({ frames }, null, 2)); + expect(frames.filter(frame => !frame.ready && frame.visibleHeader)).toEqual([]); + const loadingFrames = frames.filter(frame => frame.loading); + expect(loadingFrames.length).toBeGreaterThan(2); + for (const dimension of ["x", "y", "width", "height"] as const) { + const values = loadingFrames.map(frame => frame.loading![dimension]); + expect(Math.max(...values) - Math.min(...values), `loading frame ${dimension}`).toBeLessThanOrEqual(2); + } + const visibleComposers = loadingFrames.filter(frame => frame.loadingComposer); + expect(visibleComposers.length).toBeGreaterThan(2); + for (const dimension of ["x", "y", "width", "height"] as const) { + const values = visibleComposers.map(frame => frame.loadingComposer![dimension]); + expect(Math.max(...values) - Math.min(...values), `loading composer ${dimension}`).toBeLessThanOrEqual(2); + } + const revealed = frames.filter(frame => frame.ready && frame.latest); + expect(revealed.length).toBeGreaterThan(5); + expect(Math.max(...revealed.map(frame => frame.latest!.y)) - Math.min(...revealed.map(frame => frame.latest!.y))).toBeLessThanOrEqual(2); + expect(new Set(revealed.map(frame => frame.scrollHeight)).size).toBe(1); + const lastLoading = loadingFrames.at(-1)!; + expect(lastLoading.loadingFont).toEqual(revealed[0].titleFont); + expect(Math.abs(lastLoading.loadingComposer!.y - revealed[0].composer!.y)).toBeLessThanOrEqual(2); + expect(Math.abs(lastLoading.loadingComposer!.height - revealed[0].composer!.height)).toBeLessThanOrEqual(2); + const identifiers = frames.filter(frame => frame.identifier); + expect(identifiers.length).toBeGreaterThan(2); + expect(new Set(identifiers.map(frame => JSON.stringify(frame.identifierFont))).size).toBe(1); + for (const dimension of ["x", "y", "width", "height"] as const) { + const values = identifiers.map(frame => frame.identifier![dimension]); + expect(Math.max(...values) - Math.min(...values), `breadcrumb identifier ${dimension}`).toBeLessThanOrEqual(2); + } + await page.screenshot({ path: info.outputPath("ready.png") }); +}); diff --git a/tests/perf/issue-detail/rich-loading-fixture.ts b/tests/perf/issue-detail/rich-loading-fixture.ts new file mode 100644 index 00000000000..7b32a59f6cb --- /dev/null +++ b/tests/perf/issue-detail/rich-loading-fixture.ts @@ -0,0 +1,107 @@ +import fs from "node:fs/promises"; +import path from "node:path"; +import { randomUUID } from "node:crypto"; +import { expect, type APIRequestContext } from "@playwright/test"; +import { eq } from "../../../server/node_modules/drizzle-orm/index.js"; + +export interface RichLoadingFixture { + companyId: string; + prefix: string; + id: string; + identifier: string; + title: string; + lastCommentId: string; + interactionId: string; +} + +const fixturePath = path.resolve("test-results/rich-loading-fixture.json"); + +export async function richLoadingFixture(request: APIRequestContext): Promise { + const databaseUrl = process.env.PAPERCLIP_ISSUE_PERF_DATABASE_URL; + if (!databaseUrl) throw new Error("The rich loading fixture requires a disposable PostgreSQL database"); + const target = new URL(databaseUrl); + if (!["localhost", "127.0.0.1", "[::1]"].includes(target.hostname) || !target.pathname.endsWith("_test")) { + throw new Error("Use a disposable loopback database ending in _test"); + } + const saved = await fs.readFile(fixturePath, "utf8").then(JSON.parse).catch(error => { + if (error.code !== "ENOENT") throw error; + return null; + }); + if (saved) { + const response = await request.get(`/api/issues/${saved.id}`); + if (response.ok()) { + const issue = await response.json(); + expect(issue.companyId).toBe(saved.companyId); + const agentResponse = await request.get(`/api/agents/${issue.assigneeAgentId}`); + expect(agentResponse.ok(), await agentResponse.text()).toBeTruthy(); + const agent = await agentResponse.json(); + const heartbeat = agent.runtimeConfig?.heartbeat ?? {}; + if (heartbeat.enabled !== false || heartbeat.wakeOnDemand !== false) { + const update = await request.patch(`/api/agents/${agent.id}`, { data: { + runtimeConfig: { ...agent.runtimeConfig, heartbeat: { ...heartbeat, enabled: false, wakeOnDemand: false } }, + } }); + expect(update.ok(), await update.text()).toBeTruthy(); + } + return saved; + } + expect(response.status(), await response.text()).toBe(404); + } + const create = async (url: string, data: unknown) => { + const response = await request.post(url, { data }); + expect(response.ok(), await response.text()).toBeTruthy(); + return response.json(); + }; + const company = await create("/api/companies", { name: "FrameLab" }); + const agent = await create(`/api/companies/${company.id}/agents`, { + name: "Investigation author", role: "engineer", status: "idle", adapterType: "claude_local", adapterConfig: {}, + runtimeConfig: { heartbeat: { enabled: false, wakeOnDemand: false } }, + }); + const project = await create(`/api/companies/${company.id}/projects`, { name: "Loading verification" }); + const title = "[Investigation] Failed query selecting a saved task record from a long-running workspace investigation after restoring the archived state (workspace-investigation.ts)"; + const issue = await create(`/api/companies/${company.id}/issues`, { + title, status: "backlog", projectId: project.id, + description: "## Investigate the saved workspace\n\n" + + "Keep the current task, its saved findings, and the requested review together. ".repeat(12) + + "\n\n- Inspect the original report.\n- Check the saved evidence.\n- Retain the complete conversation for the reviewer.\n\n" + + "The investigation contains a long thread, rich document cards, a scheduled monitor, and a pending decision.", + }); + for (const [key, label] of [["plan", "Investigation plan"], ["analysis", "Saved analysis"], ["verification", "Verification results"]]) { + const response = await request.put(`/api/issues/${issue.id}/documents/${key}`, { data: { + title: label, format: "markdown", body: `# ${label}\n\n${"Preserve the saved investigation and verify the expected behavior. ".repeat(20)}`, + } }); + expect(response.ok(), await response.text()).toBeTruthy(); + } + await create(`/api/issues/${issue.id}/work-products`, { + type: "pull_request", provider: "github", title: "Saved investigation patch", status: "active", + url: "https://github.com/example/layout-fixture/pull/42", metadata: { repository: "example/layout-fixture", number: 42 }, + }); + const interaction = await create(`/api/issues/${issue.id}/interactions`, { + kind: "request_confirmation", title: "Approve the investigation patch", continuationPolicy: "none", + payload: { version: 1, prompt: "Review the saved investigation and approve the proposed patch?", acceptLabel: "Approve patch", rejectLabel: "Request changes", detailsMarkdown: "The saved plan and verification results are available in this task." }, + }); + const { createDb, closeRegisteredClients, issues, issueComments } = await import("../../../packages/db/src/index"); + const db = createDb(databaseUrl); + const base = Date.now() - 30 * 24 * 3600_000; + const comments = Array.from({ length: 200 }, (_, index) => ({ + id: randomUUID(), companyId: company.id, issueId: issue.id, authorType: "agent", authorAgentId: agent.id, + body: `## ${index === 199 ? "Latest investigation findings" : `Investigation update ${index}`}\n\n` + + "Verified the saved workspace, inspected the reported behavior, and checked that the evidence still matches the current revision. ".repeat(index === 199 ? 12 : 5) + + (index === 199 ? "\n\n[Read the saved analysis](#document-analysis) and [verification results](#document-verification).\n\n| Check | Result |\n|---|---|\n| Saved evidence | Complete |\n| Review | Waiting for your decision |" : ""), + createdAt: new Date(base + index * 60_000), updatedAt: new Date(base + index * 60_000), + })); + const nextCheckAt = new Date(Date.now() + 2 * 24 * 3600_000); + try { + await db.insert(issueComments).values(comments); + await db.update(issues).set({ + assigneeAgentId: agent.id, status: "in_review", monitorNextCheckAt: nextCheckAt, + monitorAttemptCount: 12, monitorNotes: "Watching the investigation patch", monitorScheduledBy: "assignee", + executionPolicy: { mode: "normal", commentRequired: true, stages: [], monitor: { + nextCheckAt: nextCheckAt.toISOString(), serviceName: "Review", externalRef: "Investigation patch", scheduledBy: "assignee", + } }, + }).where(eq(issues.id, issue.id)); + } finally { await closeRegisteredClients(databaseUrl); } + const fixture = { companyId: company.id, prefix: company.issuePrefix, id: issue.id, identifier: issue.identifier, title, lastCommentId: comments.at(-1)!.id, interactionId: interaction.id }; + await fs.mkdir(path.dirname(fixturePath), { recursive: true }); + await fs.writeFile(fixturePath, JSON.stringify(fixture, null, 2)); + return fixture; +} diff --git a/ui/src/components/BreadcrumbBar.tsx b/ui/src/components/BreadcrumbBar.tsx index dbeaebc6216..1980250704f 100644 --- a/ui/src/components/BreadcrumbBar.tsx +++ b/ui/src/components/BreadcrumbBar.tsx @@ -119,7 +119,7 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?: {currentCrumb.leading ? ( {currentCrumb.leading} ) : null} - {currentCrumb.label} + {currentCrumb.label} {globalToolbarSlots} @@ -133,18 +133,19 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?: {breadcrumbs.map((crumb, i) => { const isLast = i === breadcrumbs.length - 1; + const pinnedIdentifier = taskDetailLayout && isLast && Boolean(crumb.identifier); return ( {i > 0 && } - + {isLast || !crumb.href ? ( crumb.leading || crumb.identifier ? ( - + {crumb.leading && ( {crumb.leading} )} {!taskDetailLayout ? : null} - {crumb.label} + {crumb.label} {taskDetailLayout && isLast ? : null} ) : ( diff --git a/ui/src/components/ShellConfigurationGate.test.tsx b/ui/src/components/ShellConfigurationGate.test.tsx index 7f811aaba4d..11988196420 100644 --- a/ui/src/components/ShellConfigurationGate.test.tsx +++ b/ui/src/components/ShellConfigurationGate.test.tsx @@ -26,7 +26,7 @@ it.each([ ["/PAP/issues", false], ["/PAP/chats/agent", false], ["/PAP/apps", false], -])("permits only a guarded task detail while the personal preference loads: %s", async (path, permitted) => { +])("prepares only guarded task data behind the loading view while preferences load: %s", async (path, permitted) => { const container = document.createElement("div"); const root = createRoot(container); try { @@ -35,7 +35,11 @@ it.each([ Guarded task content} /> )); - expect(container.textContent).toBe(permitted ? "Guarded task content" : "Loading shell"); + expect(container.textContent).toContain("Loading shell"); + expect(container.textContent?.includes("Guarded task content")).toBe(permitted); + const prepared = container.querySelector('[data-testid="shell-prepared-outlet"]'); + expect(prepared?.hidden ?? null).toBe(permitted ? true : null); + if (prepared) expect(prepared.hasAttribute("inert")).toBe(true); } finally { await act(async () => root.unmount()); } }); @@ -72,3 +76,27 @@ it.each([false, true])("runs access checks while shell settings are pending (mem client.clear(); } }); + +it("keeps prepared task content mounted without taking existing focus when the shell becomes visible", async () => { + const container = document.createElement("div"); + const root = createRoot(container); + const input = document.createElement("input"); + document.body.append(container, input); + const view = (loaded: boolean) => + }> + Task data} /> + + ; + try { + await act(async () => root.render(view(false))); + const task = container.querySelector('[data-testid="prepared-task"]'); + expect(task).not.toBeNull(); + input.focus(); + await act(async () => root.render(view(true))); + await act(async () => { await new Promise(resolve => requestAnimationFrame(resolve)); }); + expect(document.activeElement).toBe(input); + expect(container.querySelector('[data-testid="prepared-task"]')).toBe(task); + expect(container.querySelector('[data-testid="shell-prepared-outlet"]')?.hidden).toBe(false); + expect(container.querySelector('[data-testid="shell-configuration-loading"]')).toBeNull(); + } finally { await act(async () => root.unmount()); container.remove(); input.remove(); } +}); diff --git a/ui/src/components/ShellConfigurationGate.tsx b/ui/src/components/ShellConfigurationGate.tsx index 511310c4830..a2e5e77b50a 100644 --- a/ui/src/components/ShellConfigurationGate.tsx +++ b/ui/src/components/ShellConfigurationGate.tsx @@ -1,3 +1,5 @@ +import { useLayoutEffect } from "react"; +import { scheduleMainContentFocus } from "@/lib/main-content-focus"; import { Outlet, useLocation } from "@/lib/router"; import { PaperclipLoading } from "./AnimatedPaperclipIcon"; @@ -7,7 +9,15 @@ export function ShellConfigurationGate({ loaded, allowPendingTaskDetail = false const segments = pathname.split("/").filter(Boolean); const isTaskDetail = segments.length === 3 && segments[1] === "issues" && !["all", "active", "backlog", "done", "recent"].includes(segments[2]!); - // Task detail owns a second presentation gate. It can show its account-bound - // title editor while identity loads, without exposing variant-specific tools. - return loaded || (allowPendingTaskDetail && isTaskDetail) ? : ; + useLayoutEffect(() => { + if (!loaded) return; + const active = document.activeElement; + if (active && active !== document.body && active !== document.documentElement) return; + return scheduleMainContentFocus(document.getElementById("main-content")); + }, [loaded]); + const prepareOutlet = loaded || (allowPendingTaskDetail && isTaskDetail); + return <> + {!loaded ?
: null} + {prepareOutlet ? : null} + ; } diff --git a/ui/src/components/TaskChatThread.test.tsx b/ui/src/components/TaskChatThread.test.tsx index e298551b3cf..4cffcc90ec3 100644 --- a/ui/src/components/TaskChatThread.test.tsx +++ b/ui/src/components/TaskChatThread.test.tsx @@ -376,13 +376,15 @@ it.each([true, false])("defers hidden content until history is ready and keeps i it.each([true, false])("coordinates compact cards before first reveal and retains content during refresh (mobile=%s)", async (mobile) => { sidebarState.isMobile = mobile; - const props = { issueId: "cold-issue", compactHistory: true, comments: createLongThreadComments(), historyControl: , onAdd: async () => {} }; + const props = { issueId: "cold-issue", compactHistory: true, comments: createLongThreadComments(), threadHeader:

Saved task title

, historyControl: , onAdd: async () => {} }; render(); expect(container.querySelector('[data-testid="task-chat-history-loading"]')).not.toBeNull(); + expect(container.querySelector('[data-testid="task-chat-history-loading"]')?.textContent).not.toContain("Saved task title"); render(); await settleThreadLayout(); expect(container.querySelector('[data-testid="task-chat-history-loading"]')).toBeNull(); expect(container.textContent).toContain("Thread message 1"); + expect(container.textContent).toContain("Saved task title"); expect(container.textContent).toContain("More messages"); const editor = container.querySelector('[data-testid="mock-editor"]'); expect(editor).not.toBeNull(); @@ -391,6 +393,26 @@ it.each([true, false])("coordinates compact cards before first reveal and retain expect(container.querySelector('[data-testid="mock-editor"]')).toBe(editor); }); +it.each([false, true])("waits for fonts but bounds a stalled request (stalled=%s)", async (stalled) => { + const original = Object.getOwnPropertyDescriptor(document, "fonts"); + const fonts = { status: "loading" }; + Object.defineProperty(document, "fonts", { configurable: true, value: fonts }); + vi.useFakeTimers(); + try { + render( {}} />); + await act(async () => { await vi.advanceTimersByTimeAsync(200); }); + expect(container.querySelector('[data-testid="task-chat-history-loading"]')).not.toBeNull(); + if (!stalled) fonts.status = "loaded"; + await act(async () => { await vi.advanceTimersByTimeAsync(stalled ? 3100 : 100); }); + expect(container.querySelector('[data-testid="task-chat-history-loading"]')).toBeNull(); + expect(container.querySelector('[data-testid="task-chat-thread"] > [aria-busy="false"]')).not.toBeNull(); + } finally { + if (original) Object.defineProperty(document, "fonts", original); + else Reflect.deleteProperty(document, "fonts"); + vi.useRealTimers(); + } +}); + it("keeps revealed history scrollable while metadata for another page is pending", async () => { function Readiness() { return {String(useTaskChatScrollNavigation().ready)}; } const props = { issueId: "paged-chat", compactHistory: true, comments: createLongThreadComments(), onAdd: async () => {}, threadHeader: }; diff --git a/ui/src/components/TaskChatThread.tsx b/ui/src/components/TaskChatThread.tsx index 42738c1cd56..5a271aa9c01 100644 --- a/ui/src/components/TaskChatThread.tsx +++ b/ui/src/components/TaskChatThread.tsx @@ -1,6 +1,7 @@ import type { ScrollingHistory } from "@/components/task-chat/TaskMessageScroller"; import { TaskChatShimmerScope } from "@/components/task-chat/TaskChatShimmer"; import { useRunnerSubmission } from "@/hooks/useRunnerSubmission"; +import { TaskChatLoadingShell } from "@/components/task-chat/TaskChatLoadingShell"; import { ISSUE_DETAIL_CONTENT_PAINT_MARK, ISSUE_DETAIL_CONTENT_MEASURE, @@ -121,7 +122,6 @@ import { useSidebar } from "@/context/SidebarContext"; import { useStreamlinedUiEnabled } from "@/hooks/useStreamlinedUiEnabled"; import { useDismissedTaskQuestions } from "@/hooks/useDismissedTaskQuestions"; import { cn } from "@/lib/utils"; -import { Skeleton } from "@/components/ui/skeleton"; import { Button } from "@/components/ui/button"; import { useIssuePlanDocument } from "@/hooks/useIssuePlanDocument"; import { isRedundantAiRecoveryNotice, latestSameRunHandoffTimestamp } from "@/lib/issue-chat-messages"; @@ -260,6 +260,7 @@ function isRunnerResponseComment(params: { // well within this as soon as the settled turn/comment lands. const SETTLING_TAIL_MAX_MS = 15_000; const INITIAL_HISTORY_REVEAL_TIMEOUT_MS = 15_000; +const INITIAL_FONT_REVEAL_TIMEOUT_MS = 3000; const EMPTY_LIVE_ISSUE_IDS: ReadonlySet = new Set(); const LONG_THREAD_BLOCKER_REPEAT_COUNT = 4; @@ -3168,13 +3169,20 @@ export function TaskChatThread(props: TaskChatThreadProps) { // Readiness is latched per issue: refetches never hide existing conversation. useEffect(() => { if (historyRevealed || historyPending) return; - let previousWidth: number | undefined; + const fontWaitStarted = performance.now(); + let previousGeometry: string | undefined; let stableFrames = 0; let frame: number; const revealWhenSettled = () => { - const width = historyShellRef.current?.getBoundingClientRect().width; - stableFrames = width === previousWidth ? stableFrames + 1 : 0; - previousWidth = width; + const shell = historyShellRef.current; + const bounds = shell?.getBoundingClientRect(); + const scroller = shell?.querySelector('[data-testid="task-chat-scroller"]'); + const composer = shell?.querySelector('[data-testid="task-chat-composer-dock"]'); + const geometry = JSON.stringify([bounds?.x, bounds?.y, bounds?.width, bounds?.height, + scroller?.clientHeight, scroller?.scrollHeight, scroller?.scrollTop, composer?.getBoundingClientRect().height]); + const fontsPending = document.fonts?.status === "loading" && performance.now() - fontWaitStarted < INITIAL_FONT_REVEAL_TIMEOUT_MS; + stableFrames = geometry === previousGeometry && !fontsPending ? stableFrames + 1 : 0; + previousGeometry = geometry; if (stableFrames >= 2) setRevealedHistoryKey(historyKey); else frame = requestAnimationFrame(revealWhenSettled); }; @@ -3201,12 +3209,17 @@ export function TaskChatThread(props: TaskChatThreadProps) { >
+ {!historyRevealed ? ( +
+ +
+ ) : null}
) : null} - {!historyRevealed ? ( -
-
- {threadHeader} - - - -
-
- ) : null}
) : null}
{ // Capture mode shortcuts on the wrapper so they work while the rich // editor is focused and win over Lexical/browser bindings. Match the diff --git a/ui/src/components/task-chat/TaskChatComposerDock.test.tsx b/ui/src/components/task-chat/TaskChatComposerDock.test.tsx index 68ba2e5623c..dd868e3b2a6 100644 --- a/ui/src/components/task-chat/TaskChatComposerDock.test.tsx +++ b/ui/src/components/task-chat/TaskChatComposerDock.test.tsx @@ -43,6 +43,25 @@ describe("TaskChatComposerDock", () => { return { dock, scroller, scrollBy, onTranscriptWheel }; } + it("keeps a loading placeholder from replacing the measured composer height", () => { + vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) { + return { height: this.getAttribute("data-testid") === "task-chat-composer-dock" ? 140 : 72 } as DOMRect; + }); + flushSync(() => root.render( +
+
+