mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-21 08:22:20 +02:00
perf(ui): speed task loading without shifting the conversation (#16849)
## Thinking Path > - Paperclip's board should open a task quickly while keeping its conversation and composer stable. > - The browser currently downloads unrelated screens and unopened dialog implementations before task content appears. > - Splitting routes alone creates many shared requests and did not improve measured cold loading. > - This change groups the startup and task dependency trees, preloads the task chunk, and defers optional routes and dialogs. > - Existing coordinated history reveal stays intact so late data does not insert content above the reader. > - Hidden routes must not overwrite saved scroll positions with zero-height geometry. > - Repeated browser measurements and delayed-response tests establish the result independently of bundle-file size. ## Linked Issues or Issue Description Refs #14758. Related prior work: #10463 and #14727. **What existing behavior does this improve?** Cold task-page opening downloads and evaluates code for other screens and globally mounted, unopened dialogs. A direct task link should reach its saved conversation sooner without moving already-visible messages or the composer. **Subsystem affected** Board UI startup, route boundaries, dialog loading, task scroll restoration, and the issue-detail performance harness. **Proposed behavior** Load optional screens and dialogs when needed, keep startup requests bounded, and preload the task route. Preserve the current history reveal policy. Keep the shell mounted during route loading and preserve the reader's position when a route is temporarily hidden. **Additional context** The older bundle-splitting attempt in #10463 is still open from August. This implementation targets current master and deliberately preserves today's editor, composer, and transcript reveal behavior. It does not implement the alternative transcript-row design discussed in #14758. ROADMAP.md does not describe overlapping startup-bundle work. ## What Changed - Lazy-load board routes, standalone screens, the legacy layout, onboarding, and unopened create dialogs. - Keep activated dialogs mounted across close/reopen to retain their existing draft lifecycle. - Group startup and issue dependencies and preload the emitted issue chunk from the production HTML. - Contain route loading within the shell and retain existing chunk-error recovery. - Contain dialog import failures locally, support cancellation, and keep setup dismissed after a late download. Warm the task module from task lists and keep the small chat redirect eager. - Wait for task-creation dialog fields in the browser fixture before filling an explicit title. - Ignore zero-height scroll geometry while a route is hidden. - Reuse the same persisted performance fixture between builds, record actual network spans, and distinguish concealed loading content from the ready thread in browser assertions. ## Verification - Production UI build and UI TypeScript check passed. - Recovery follow-up: 74 focused UI tests passed; the cancellation change passed 23 focused tests plus all 131 onboarding tests (the latter with a 15-second per-test timeout on the contended local host). - Setup cancellation was reproduced against the prior production build and verified fixed after releasing the held real wizard download. - 91 focused UI tests passed; the final route registrations were checked again after making standalone screens lazy (33 routing tests passed). - All eight real-browser layout scenarios passed: delayed comments, late media, properties changes, growing drafts, older history, Back navigation, deep links, desktop/mobile same-task links, request failure/retry, and stalled native/log reads. - Browser walkthrough: read a populated task, submit one reply, refresh, navigate to Projects, and return. The reply persisted once and the normal composer remained usable. - Token design gates passed. The separate repository-wide publish-token scan fails on pre-existing references to the local maintainer username in unchanged files; this change adds none. - Production-build measurements use the same persisted task, local API/database, fresh browser contexts for cold opens, and five samples per scenario/profile. These measurements do not establish deployed staging latency. - Final head `076466816a`, consecutive before/after production builds: five samples per scenario/profile, same saved task and server. Cold Fast 4G/4x CPU content paint: **5,775 → 4,248 ms (26%)**; issue API server timing was 23 ms in both sets. Warm Fast 4G: 989 → 971 ms. JavaScript transferred before content: **2,596 → 1,722 KiB (34%)**. - Unthrottled cold content paint: 1,306 → 676 ms; warm: 269 → 224 ms. These local timings vary with host load. Earlier measurements showed about 20% cold improvement, and a contended intermediate run had substantially higher API latency; those runs are retained in the local evidence. The final matched pair meets the proposed 25% target, but it does not establish a guaranteed 25% improvement across environments. - All four browser scenarios that failed on the first CI run passed locally after the readiness fixes; the subsequent CI run passed all eight browser shards. - Fault-injection browser checks: delayed route loading preserves shell geometry; a failed route recovers through Back; cancelled or failed dialog loading preserves an unsent reply; Back dismisses pending setup and contains its late failure. - Final head `076466816a`: all CI gates green (55 successful checks, no pending or failed checks); Greptile 5/5 with no actionable findings and all review threads resolved. ## Risks - Dynamic chunks add a loading state on first entry to optional screens and dialogs. Route failures use the existing error boundary. Optional dialog failures are dismissible without unmounting the board; retrying a rejected import requires a reload. - The task preload prioritizes the primary board journey, including when another screen is opened first. - Chunk grouping should be revisited when the dependency graph changes; bundle size alone does not establish a speedup. - No API, authorization, migration, editor semantics, or transcript-reveal policy changes. ## Model Used OpenAI Codex, GPT-6, with reasoning, repository tools, code execution, and browser verification. The runtime does not expose a more precise model identifier or context-window size. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
DottaandPaperclip authored and GitHub committed
1 parent
06c5bc471d
commit
fa50cab568
22 files changed
+478
-181
No files matched your search
@@ -26,6 +26,20 @@ PAPERCLIP_ISSUE_PERF_RUNS=7 PAPERCLIP_ISSUE_PERF_PORT=3210 pnpm exec playwright
|
||||
|
||||
Outputs include `baseline.md`, `baseline.json`, and a Chrome trace for the first run of each scenario/profile. Open `*.trace.json` in Chrome DevTools Performance to inspect the `issue-detail:*` user-timing marks.
|
||||
|
||||
For bundle comparisons, build the UI and serve the production assets from an
|
||||
isolated local instance with `PAPERCLIP_UI_DEV_MIDDLEWARE=false`. The default
|
||||
managed server above uses development middleware, which does not reproduce
|
||||
production chunk loading. Keep the server, database, browser profile and sample
|
||||
count the same for both builds, and avoid concurrent builds or test suites while
|
||||
measuring latency.
|
||||
|
||||
Copy the first run's output outside `test-results/issue-detail-perf`, then reuse
|
||||
its persisted task with `PAPERCLIP_ISSUE_PERF_SEED_FILE=/path/to/before/baseline.json`
|
||||
and `PAPERCLIP_ISSUE_PERF_BASE_URL` pointing to that disposable instance. The
|
||||
harness validates the task identity before measuring. Network spans in the trace
|
||||
use recorded request start/end timestamps relative to task navigation; they
|
||||
include completed requests observed during the sample, even after content paint.
|
||||
|
||||
## Task layout stability
|
||||
|
||||
`layout-stability.spec.ts` exercises the real task route, including Inbox
|
||||
|
||||
@@ -27,6 +27,7 @@ type NetworkRecord = {
|
||||
status?: number;
|
||||
responseHeaders?: Record<string, string>;
|
||||
ttfbMs?: number;
|
||||
startedAtEpochMs: number;
|
||||
completedAtEpochMs?: number;
|
||||
};
|
||||
|
||||
@@ -155,6 +156,7 @@ async function startNetworkCapture(session: Awaited<ReturnType<typeof configureP
|
||||
method: event.request.method,
|
||||
type: event.type ?? "Other",
|
||||
encodedDataLength: 0,
|
||||
startedAtEpochMs: event.wallTime * 1000,
|
||||
});
|
||||
});
|
||||
session.on("Network.responseReceived", (event) => {
|
||||
@@ -178,20 +180,20 @@ async function startNetworkCapture(session: Awaited<ReturnType<typeof configureP
|
||||
return records;
|
||||
}
|
||||
|
||||
async function writeTrace(tracePath: string, metrics: RunMetrics, records: Map<string, NetworkRecord>) {
|
||||
async function writeTrace(tracePath: string, metrics: RunMetrics, records: Map<string, NetworkRecord>, navigationEpochMs: number) {
|
||||
await fs.mkdir(path.dirname(tracePath), { recursive: true });
|
||||
const traceEvents = [
|
||||
{ name: "issue-detail:navigate", cat: "blink.user_timing", ph: "i", ts: 0, pid: 1, tid: 1, s: "t" },
|
||||
{ name: HEADER_MEASURE, cat: "blink.user_timing", ph: "X", ts: 0, dur: metrics.headerPaintMs * 1000, pid: 1, tid: 1 },
|
||||
{ name: CONTENT_MEASURE, cat: "blink.user_timing", ph: "X", ts: 0, dur: metrics.contentPaintMs * 1000, pid: 1, tid: 1 },
|
||||
...[...records.values()].map((record, index) => ({
|
||||
...[...records.values()].filter((record) => record.completedAtEpochMs !== undefined).map((record) => ({
|
||||
name: record.url,
|
||||
cat: "loading",
|
||||
ph: "i",
|
||||
ts: index + 1,
|
||||
ph: "X",
|
||||
ts: (record.startedAtEpochMs - navigationEpochMs) * 1000,
|
||||
dur: (record.completedAtEpochMs! - record.startedAtEpochMs) * 1000,
|
||||
pid: 1,
|
||||
tid: 2,
|
||||
s: "t",
|
||||
args: { method: record.method, type: record.type, bytes: record.encodedDataLength, status: record.status },
|
||||
})),
|
||||
];
|
||||
@@ -258,7 +260,7 @@ async function runScenario(browser: Browser, baseURL: string, seedData: Seed, pr
|
||||
await page.goto(`/${seedData.prefix}/issues/${seedData.identifier}`);
|
||||
}
|
||||
|
||||
await expect(page.getByTestId("issue-detail-header")).toBeVisible({ timeout: PAGE_READY_TIMEOUT_MS });
|
||||
await expect(page.getByTestId("issue-detail-header").filter({ visible: true }).first()).toBeVisible({ timeout: PAGE_READY_TIMEOUT_MS });
|
||||
const paint = await readPaintMetrics(page);
|
||||
const summary = summarizeNetwork(network, seedData, paint.contentPaintEpochMs);
|
||||
const { contentPaintEpochMs: _contentPaintEpochMs, ...reportedPaint } = paint;
|
||||
@@ -266,7 +268,7 @@ async function runScenario(browser: Browser, baseURL: string, seedData: Seed, pr
|
||||
? { ...reportedPaint, ttfbMs: null, fcpMs: null, lcpMs: null }
|
||||
: reportedPaint;
|
||||
const metrics = { scenario, profile: profile.name, run, ...scenarioPaint, ...summary };
|
||||
if (run === 1) await writeTrace(tracePath, metrics, network);
|
||||
if (run === 1) await writeTrace(tracePath, metrics, network, paint.contentPaintEpochMs - paint.contentPaintMs);
|
||||
if (scenario.startsWith("S2") && profile.name === "unthrottled" && run === 1) {
|
||||
await page.screenshot({ path: path.join(OUTPUT_DIR, "issue-detail-loaded.png"), fullPage: true });
|
||||
}
|
||||
@@ -322,7 +324,19 @@ function buildMarkdown(results: RunMetrics[]): string {
|
||||
test("issue-detail baseline", async ({ request, baseURL }) => {
|
||||
expect(baseURL).toBeTruthy();
|
||||
await fs.mkdir(OUTPUT_DIR, { recursive: true });
|
||||
const seedData = await seed(request);
|
||||
const seedFile = process.env.PAPERCLIP_ISSUE_PERF_SEED_FILE;
|
||||
const seedData: Seed = seedFile
|
||||
? JSON.parse(await fs.readFile(seedFile, "utf8")).seed
|
||||
: await seed(request);
|
||||
if (seedFile) {
|
||||
const response = await request.get(`/api/issues/${seedData.issueId}`);
|
||||
expect(response.ok(), await response.text()).toBe(true);
|
||||
expect(await response.json()).toMatchObject({
|
||||
companyId: seedData.companyId,
|
||||
identifier: seedData.identifier,
|
||||
title: seedData.title,
|
||||
});
|
||||
}
|
||||
const results: RunMetrics[] = [];
|
||||
|
||||
for (const profile of PROFILES) {
|
||||
|
||||
@@ -36,7 +36,7 @@ test.beforeAll(async ({ request }) => {
|
||||
});
|
||||
|
||||
async function ready(page: Page) {
|
||||
await expect(page.getByTestId("task-chat-thread").locator('[aria-busy="false"]')).toBeVisible({ timeout: 90_000 });
|
||||
await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="false"]')).toBeVisible({ timeout: 90_000 });
|
||||
}
|
||||
|
||||
async function installMeasurements(page: Page) {
|
||||
@@ -48,7 +48,7 @@ async function installMeasurements(page: Page) {
|
||||
}).observe({ type: "layout-shift", buffered: true });
|
||||
const sample = () => {
|
||||
const scroller = document.querySelector('[data-testid="task-chat-scroller"]');
|
||||
const busy = document.querySelector('[data-testid="task-chat-thread"] [aria-busy]');
|
||||
const busy = document.querySelector('[data-testid="task-chat-thread"] > [aria-busy]');
|
||||
if (scroller) {
|
||||
const viewport = scroller.getBoundingClientRect();
|
||||
const row = [...scroller.querySelectorAll<HTMLElement>("[data-thread-anchor]")].find((el) => el.getBoundingClientRect().bottom > viewport.top);
|
||||
@@ -78,7 +78,7 @@ test("Inbox click reveals once after reordered initial responses; refresh retain
|
||||
const held = new Promise<void>((resolve) => { release = resolve; });
|
||||
await page.route("**/api/issues/*/comments?*", async (route) => { await held; await route.continue(); });
|
||||
await link.click();
|
||||
await expect(page.getByTestId("task-chat-thread").locator('[aria-busy="true"]')).toBeVisible();
|
||||
await expect(page.getByTestId("task-chat-thread").locator(':scope > [aria-busy="true"]')).toBeVisible();
|
||||
await expect(page.getByText("Historical message 159", { exact: true })).not.toBeVisible();
|
||||
release();
|
||||
await ready(page);
|
||||
|
||||
@@ -61,9 +61,12 @@ export async function createTaskThroughUi(input: {
|
||||
}
|
||||
await newTask.click();
|
||||
const dialog = input.page.getByRole("dialog", { name: "New task", exact: true });
|
||||
await expect(dialog).toBeVisible();
|
||||
const titleInput = dialog.getByRole("textbox", { name: "Task title", exact: true });
|
||||
if (await titleInput.isVisible()) await titleInput.fill(input.title);
|
||||
else if (input.requireExplicitTitle) throw new Error("This title-preservation case requires a visible explicit title input");
|
||||
if (input.requireExplicitTitle) {
|
||||
await expect(titleInput).toBeVisible();
|
||||
await titleInput.fill(input.title);
|
||||
} else if (await titleInput.isVisible()) await titleInput.fill(input.title);
|
||||
await fillTaskPrompt(dialog.getByRole("textbox", { name: "editable markdown", exact: true }), input.prompt);
|
||||
if (input.workMode !== "standard") {
|
||||
await dialog.getByRole("button", { name: "Add to composer", exact: true }).click();
|
||||
|
||||
+103
-104
@@ -1,12 +1,11 @@
|
||||
import { lazy, Suspense, type ReactNode } from "react";
|
||||
import { AgentChats } from "./pages/AgentChats";
|
||||
import { lazy, Suspense, useEffect, type ReactNode } from "react";
|
||||
import type { ToolConnectionCredentialSource } from "@paperclipai/shared";
|
||||
import { Navigate, Outlet, Route, Routes, useActiveCompanyPrefix, useLocation, useParams } from "@/lib/router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTranslation } from "@/i18n";
|
||||
import { Layout } from "./components/Layout";
|
||||
import { Layout as ProductionLayout } from "./components/Layout.production";
|
||||
import { ConferenceRoomChatGate } from "./components/ConferenceRoomChatGate";
|
||||
import { TaskChatLab } from "./pages/TaskChatLab";
|
||||
import { CasesExperimentalGate } from "./components/CasesExperimentalGate";
|
||||
import { StatusCardsExperimentalGate } from "./components/StatusCardsExperimentalGate";
|
||||
import { CloudManagedPageGate } from "./components/CloudManagedPageGate";
|
||||
@@ -17,91 +16,14 @@ import {
|
||||
UnprefixedExecutionWorkspaceRedirect,
|
||||
} from "./components/UnprefixedExecutionWorkspaceRedirect";
|
||||
import { useHiddenSettings } from "./hooks/useHiddenSettings";
|
||||
import { Cases } from "./pages/Cases";
|
||||
import { CaseDetail } from "./pages/CaseDetail";
|
||||
import { OnboardingWizardVariant } from "./components/OnboardingWizardVariant";
|
||||
import { CloudAccessGate } from "./components/CloudAccessGate";
|
||||
import { PaperclipLoading } from "./components/AnimatedPaperclipIcon";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { DashboardLive } from "./pages/DashboardLive";
|
||||
import { Timeline } from "./pages/Timeline";
|
||||
import { Companies } from "./pages/Companies";
|
||||
import { AGENT_FILTER_TABS, Agents } from "./pages/Agents";
|
||||
import { AgentDetail } from "./pages/AgentDetail";
|
||||
import { Projects } from "./pages/Projects";
|
||||
import { ProjectDetail } from "./pages/ProjectDetail";
|
||||
import { ProjectWorkspaceDetail } from "./pages/ProjectWorkspaceDetail";
|
||||
import { Workspaces } from "./pages/Workspaces";
|
||||
import { Issues } from "./pages/Issues";
|
||||
import { Search } from "./pages/Search";
|
||||
import { IssueDetail } from "./pages/IssueDetail";
|
||||
import { AgentChats } from "./pages/AgentChats";
|
||||
import { AgentChat } from "./pages/AgentChat";
|
||||
import { IssueChatLongThreadPerf } from "./pages/IssueChatLongThreadPerf";
|
||||
import { Routines } from "./pages/Routines";
|
||||
import { StatusCards } from "./pages/StatusCards";
|
||||
import { RoutineDetail } from "./pages/RoutineDetail";
|
||||
import { UserProfile } from "./pages/UserProfile";
|
||||
import { ExecutionWorkspaceDetail } from "./pages/ExecutionWorkspaceDetail";
|
||||
import { Goals } from "./pages/Goals";
|
||||
import { Artifacts } from "./pages/Artifacts";
|
||||
import { GoalDetail } from "./pages/GoalDetail";
|
||||
import { Approvals } from "./pages/Approvals";
|
||||
import { ApprovalDetail } from "./pages/ApprovalDetail";
|
||||
import { CompanyActivity } from "./pages/audit/CompanyActivity";
|
||||
import { AuditHub } from "./pages/audit/AuditHub";
|
||||
import { Costs } from "./pages/Costs";
|
||||
import { Inbox } from "./pages/Inbox";
|
||||
import { AGENT_FILTER_TABS } from "./lib/agent-filter-tabs";
|
||||
import { useCombinedInboxTasksEnabled } from "./hooks/useCombinedInboxTasksEnabled";
|
||||
import { WhatNeedsMe } from "./pages/WhatNeedsMe";
|
||||
import { DecisionQueuePage } from "./pages/DecisionQueuePage";
|
||||
import { BoardChat } from "./pages/BoardChat";
|
||||
import { CompanySettings } from "./pages/CompanySettings";
|
||||
import { CompanyConnections } from "./pages/CompanyConnections";
|
||||
import { CompanyEnvironments } from "./pages/CompanyEnvironments";
|
||||
import { BootstrapSetupUxLab } from "./pages/BootstrapSetupUxLab";
|
||||
import { ResponsibleUserDenialUxLab } from "./pages/ResponsibleUserDenialUxLab";
|
||||
import { CrossIssueCollaborationUxLab } from "./pages/CrossIssueCollaborationUxLab";
|
||||
import { CompanySettingsPluginPage } from "./pages/CompanySettingsPluginPage";
|
||||
import { CompanyAccess, CompanyAccessLegacyRoute } from "./pages/CompanyAccess";
|
||||
import { AdvancedToolsRoute } from "./pages/tools/AdvancedToolsRoute";
|
||||
import { ProfileWizardRoute } from "./pages/tools/profiles/ProfileWizardRoute";
|
||||
import { ProfileDetailRoute } from "./pages/tools/profiles/ProfileDetailRoute";
|
||||
import { Browse } from "./pages/apps/Browse";
|
||||
import { AppsConnect } from "./pages/apps/AppsConnect";
|
||||
import { ChatEndpointSetup } from "./pages/apps/chat/ChatEndpointSetup";
|
||||
import { ChatEndpointDetail } from "./pages/apps/chat/ChatEndpointDetail";
|
||||
import { ChatIdentityConfirm } from "./pages/apps/chat/ChatIdentityConfirm";
|
||||
import { ChatConnectorsExperimentalGate } from "./components/ChatConnectorsExperimentalGate";
|
||||
import { useChatConnectorsEnabled } from "./hooks/useChatConnectorsEnabled";
|
||||
import { canEnterAppsConnect } from "./pages/apps/app-connect-policy";
|
||||
import { AppsReview } from "./pages/apps/AppsReview";
|
||||
import { AppDetail } from "./pages/apps/AppDetail";
|
||||
import { AppNotConnected } from "./pages/apps/AppNotConnected";
|
||||
import { PaperclipCloudOAuthHandoffPage } from "./pages/apps/PaperclipCloudOAuthHandoff";
|
||||
import { GatewaysList } from "./pages/apps/gateways/GatewaysList";
|
||||
import { GatewayDetail } from "./pages/apps/gateways/GatewayDetail";
|
||||
import { CompanySkills } from "./pages/CompanySkills";
|
||||
import { SkillSources } from "./pages/SkillSources";
|
||||
import { SkillStudio } from "./pages/SkillStudio";
|
||||
import { Secrets } from "./pages/Secrets";
|
||||
import { CompanyImport } from "./pages/CompanyImport";
|
||||
import { DesignGuide } from "./pages/DesignGuide";
|
||||
import { InstanceExperimentalSettings } from "./pages/InstanceExperimentalSettings";
|
||||
import { InstanceAccess } from "./pages/InstanceAccess";
|
||||
import { ProfileSettings } from "./pages/ProfileSettings";
|
||||
import { PluginManager } from "./pages/PluginManager";
|
||||
import { PluginSettings } from "./pages/PluginSettings";
|
||||
import { AdapterManager } from "./pages/AdapterManager";
|
||||
import { PluginPage } from "./pages/PluginPage";
|
||||
import { NewAgent } from "./pages/NewAgent";
|
||||
import { AuthPage } from "./pages/Auth";
|
||||
import { BoardClaimPage } from "./pages/BoardClaim";
|
||||
import { AssistantConnection } from "./pages/apps/AssistantConnection";
|
||||
import { McpConnectPage, McpDevicePage, AssistantConnectionsPage } from "./pages/McpConnect";
|
||||
import { CliAuthPage } from "./pages/CliAuth";
|
||||
import { InviteLandingPage } from "./pages/InviteLanding";
|
||||
import { JoinRequestQueue } from "./pages/JoinRequestQueue";
|
||||
import { NotFoundPage } from "./pages/NotFound";
|
||||
import { useCompany } from "./context/CompanyContext";
|
||||
import { useDialogActions, useDialogState } from "./context/DialogContext";
|
||||
@@ -118,28 +40,99 @@ import { useStreamlinedUiEnabled } from "./hooks/useStreamlinedUiEnabled";
|
||||
import { cloudStackCreateUrl } from "./lib/cloudLinks";
|
||||
import { navigateTopLevel } from "@/lib/browserNavigation";
|
||||
|
||||
const CompanyExport = lazy(() =>
|
||||
import("./pages/CompanyExport").then((module) => ({ default: module.CompanyExport })),
|
||||
);
|
||||
const AuthPage = lazy(() => import("./pages/Auth").then((module) => ({ default: module.AuthPage })));
|
||||
const BoardClaimPage = lazy(() => import("./pages/BoardClaim").then((module) => ({ default: module.BoardClaimPage })));
|
||||
const CliAuthPage = lazy(() => import("./pages/CliAuth").then((module) => ({ default: module.CliAuthPage })));
|
||||
const InviteLandingPage = lazy(() => import("./pages/InviteLanding").then((module) => ({ default: module.InviteLandingPage })));
|
||||
const ChatIdentityConfirm = lazy(() => import("./pages/apps/chat/ChatIdentityConfirm").then((module) => ({ default: module.ChatIdentityConfirm })));
|
||||
const PaperclipCloudOAuthHandoffPage = lazy(() => import("./pages/apps/PaperclipCloudOAuthHandoff").then((module) => ({ default: module.PaperclipCloudOAuthHandoffPage })));
|
||||
const McpConnectPage = lazy(() => import("./pages/McpConnect").then((module) => ({ default: module.McpConnectPage })));
|
||||
const McpDevicePage = lazy(() => import("./pages/McpConnect").then((module) => ({ default: module.McpDevicePage })));
|
||||
const AssistantConnectionsPage = lazy(() => import("./pages/McpConnect").then((module) => ({ default: module.AssistantConnectionsPage })));
|
||||
const ProductionLayout = lazy(() => import("./components/Layout.production").then((module) => ({ default: module.Layout })));
|
||||
|
||||
const ProductionAgents = lazy(() =>
|
||||
import("./pages/Agents.production").then((module) => ({ default: module.Agents })),
|
||||
);
|
||||
const ProductionRoutines = lazy(() =>
|
||||
import("./pages/Routines.production").then((module) => ({ default: module.Routines })),
|
||||
);
|
||||
const ProductionRoutineDetail = lazy(() =>
|
||||
import("./pages/RoutineDetail.production").then((module) => ({ default: module.RoutineDetail })),
|
||||
);
|
||||
const ProductionCompanySkills = lazy(() =>
|
||||
import("./pages/CompanySkills.production").then((module) => ({ default: module.CompanySkills })),
|
||||
);
|
||||
const ProductionCompanyActivity = lazy(() =>
|
||||
import("./pages/audit/CompanyActivity.production").then((module) => ({ default: module.CompanyActivity })),
|
||||
);
|
||||
const ProductionOrgChart = lazy(() =>
|
||||
import("./pages/OrgChart.production").then((module) => ({ default: module.OrgChart })),
|
||||
);
|
||||
const TaskChatLab = lazy(() => import("./pages/TaskChatLab").then((module) => ({ default: module.TaskChatLab })));
|
||||
const Issues = lazy(() => import("./pages/Issues").then((module) => ({ default: module.Issues })));
|
||||
const loadIssueDetail = () => import("./pages/IssueDetail").then((module) => ({ default: module.IssueDetail }));
|
||||
const IssueDetail = lazy(loadIssueDetail);
|
||||
const AgentChat = lazy(() => import("./pages/AgentChat").then((module) => ({ default: module.AgentChat })));
|
||||
const IssueChatLongThreadPerf = lazy(() => import("./pages/IssueChatLongThreadPerf").then((module) => ({ default: module.IssueChatLongThreadPerf })));
|
||||
const Inbox = lazy(() => import("./pages/Inbox").then((module) => ({ default: module.Inbox })));
|
||||
const BootstrapSetupUxLab = lazy(() => import("./pages/BootstrapSetupUxLab").then((module) => ({ default: module.BootstrapSetupUxLab })));
|
||||
const ResponsibleUserDenialUxLab = lazy(() => import("./pages/ResponsibleUserDenialUxLab").then((module) => ({ default: module.ResponsibleUserDenialUxLab })));
|
||||
const CrossIssueCollaborationUxLab = lazy(() => import("./pages/CrossIssueCollaborationUxLab").then((module) => ({ default: module.CrossIssueCollaborationUxLab })));
|
||||
const Agents = lazy(() => import("./pages/Agents").then((module) => ({ default: module.Agents })));
|
||||
const Cases = lazy(() => import("./pages/Cases").then((module) => ({ default: module.Cases })));
|
||||
const CaseDetail = lazy(() => import("./pages/CaseDetail").then((module) => ({ default: module.CaseDetail })));
|
||||
const Dashboard = lazy(() => import("./pages/Dashboard").then((module) => ({ default: module.Dashboard })));
|
||||
const DashboardLive = lazy(() => import("./pages/DashboardLive").then((module) => ({ default: module.DashboardLive })));
|
||||
const Timeline = lazy(() => import("./pages/Timeline").then((module) => ({ default: module.Timeline })));
|
||||
const Companies = lazy(() => import("./pages/Companies").then((module) => ({ default: module.Companies })));
|
||||
const AgentDetail = lazy(() => import("./pages/AgentDetail").then((module) => ({ default: module.AgentDetail })));
|
||||
const Projects = lazy(() => import("./pages/Projects").then((module) => ({ default: module.Projects })));
|
||||
const ProjectDetail = lazy(() => import("./pages/ProjectDetail").then((module) => ({ default: module.ProjectDetail })));
|
||||
const ProjectWorkspaceDetail = lazy(() => import("./pages/ProjectWorkspaceDetail").then((module) => ({ default: module.ProjectWorkspaceDetail })));
|
||||
const Workspaces = lazy(() => import("./pages/Workspaces").then((module) => ({ default: module.Workspaces })));
|
||||
const Search = lazy(() => import("./pages/Search").then((module) => ({ default: module.Search })));
|
||||
const Routines = lazy(() => import("./pages/Routines").then((module) => ({ default: module.Routines })));
|
||||
const StatusCards = lazy(() => import("./pages/StatusCards").then((module) => ({ default: module.StatusCards })));
|
||||
const RoutineDetail = lazy(() => import("./pages/RoutineDetail").then((module) => ({ default: module.RoutineDetail })));
|
||||
const UserProfile = lazy(() => import("./pages/UserProfile").then((module) => ({ default: module.UserProfile })));
|
||||
const ExecutionWorkspaceDetail = lazy(() => import("./pages/ExecutionWorkspaceDetail").then((module) => ({ default: module.ExecutionWorkspaceDetail })));
|
||||
const Goals = lazy(() => import("./pages/Goals").then((module) => ({ default: module.Goals })));
|
||||
const Artifacts = lazy(() => import("./pages/Artifacts").then((module) => ({ default: module.Artifacts })));
|
||||
const GoalDetail = lazy(() => import("./pages/GoalDetail").then((module) => ({ default: module.GoalDetail })));
|
||||
const Approvals = lazy(() => import("./pages/Approvals").then((module) => ({ default: module.Approvals })));
|
||||
const ApprovalDetail = lazy(() => import("./pages/ApprovalDetail").then((module) => ({ default: module.ApprovalDetail })));
|
||||
const CompanyActivity = lazy(() => import("./pages/audit/CompanyActivity").then((module) => ({ default: module.CompanyActivity })));
|
||||
const AuditHub = lazy(() => import("./pages/audit/AuditHub").then((module) => ({ default: module.AuditHub })));
|
||||
const Costs = lazy(() => import("./pages/Costs").then((module) => ({ default: module.Costs })));
|
||||
const WhatNeedsMe = lazy(() => import("./pages/WhatNeedsMe").then((module) => ({ default: module.WhatNeedsMe })));
|
||||
const DecisionQueuePage = lazy(() => import("./pages/DecisionQueuePage").then((module) => ({ default: module.DecisionQueuePage })));
|
||||
const BoardChat = lazy(() => import("./pages/BoardChat").then((module) => ({ default: module.BoardChat })));
|
||||
const CompanySettings = lazy(() => import("./pages/CompanySettings").then((module) => ({ default: module.CompanySettings })));
|
||||
const CompanyConnections = lazy(() => import("./pages/CompanyConnections").then((module) => ({ default: module.CompanyConnections })));
|
||||
const CompanyEnvironments = lazy(() => import("./pages/CompanyEnvironments").then((module) => ({ default: module.CompanyEnvironments })));
|
||||
const CompanySettingsPluginPage = lazy(() => import("./pages/CompanySettingsPluginPage").then((module) => ({ default: module.CompanySettingsPluginPage })));
|
||||
const CompanyAccess = lazy(() => import("./pages/CompanyAccess").then((module) => ({ default: module.CompanyAccess })));
|
||||
const CompanyAccessLegacyRoute = lazy(() => import("./pages/CompanyAccess").then((module) => ({ default: module.CompanyAccessLegacyRoute })));
|
||||
const AdvancedToolsRoute = lazy(() => import("./pages/tools/AdvancedToolsRoute").then((module) => ({ default: module.AdvancedToolsRoute })));
|
||||
const ProfileWizardRoute = lazy(() => import("./pages/tools/profiles/ProfileWizardRoute").then((module) => ({ default: module.ProfileWizardRoute })));
|
||||
const ProfileDetailRoute = lazy(() => import("./pages/tools/profiles/ProfileDetailRoute").then((module) => ({ default: module.ProfileDetailRoute })));
|
||||
const Browse = lazy(() => import("./pages/apps/Browse").then((module) => ({ default: module.Browse })));
|
||||
const AppsConnect = lazy(() => import("./pages/apps/AppsConnect").then((module) => ({ default: module.AppsConnect })));
|
||||
const ChatEndpointSetup = lazy(() => import("./pages/apps/chat/ChatEndpointSetup").then((module) => ({ default: module.ChatEndpointSetup })));
|
||||
const ChatEndpointDetail = lazy(() => import("./pages/apps/chat/ChatEndpointDetail").then((module) => ({ default: module.ChatEndpointDetail })));
|
||||
const AppsReview = lazy(() => import("./pages/apps/AppsReview").then((module) => ({ default: module.AppsReview })));
|
||||
const AppDetail = lazy(() => import("./pages/apps/AppDetail").then((module) => ({ default: module.AppDetail })));
|
||||
const AppNotConnected = lazy(() => import("./pages/apps/AppNotConnected").then((module) => ({ default: module.AppNotConnected })));
|
||||
const GatewaysList = lazy(() => import("./pages/apps/gateways/GatewaysList").then((module) => ({ default: module.GatewaysList })));
|
||||
const GatewayDetail = lazy(() => import("./pages/apps/gateways/GatewayDetail").then((module) => ({ default: module.GatewayDetail })));
|
||||
const CompanySkills = lazy(() => import("./pages/CompanySkills").then((module) => ({ default: module.CompanySkills })));
|
||||
const SkillSources = lazy(() => import("./pages/SkillSources").then((module) => ({ default: module.SkillSources })));
|
||||
const SkillStudio = lazy(() => import("./pages/SkillStudio").then((module) => ({ default: module.SkillStudio })));
|
||||
const Secrets = lazy(() => import("./pages/Secrets").then((module) => ({ default: module.Secrets })));
|
||||
const CompanyImport = lazy(() => import("./pages/CompanyImport").then((module) => ({ default: module.CompanyImport })));
|
||||
const DesignGuide = lazy(() => import("./pages/DesignGuide").then((module) => ({ default: module.DesignGuide })));
|
||||
const InstanceExperimentalSettings = lazy(() => import("./pages/InstanceExperimentalSettings").then((module) => ({ default: module.InstanceExperimentalSettings })));
|
||||
const InstanceAccess = lazy(() => import("./pages/InstanceAccess").then((module) => ({ default: module.InstanceAccess })));
|
||||
const ProfileSettings = lazy(() => import("./pages/ProfileSettings").then((module) => ({ default: module.ProfileSettings })));
|
||||
const PluginManager = lazy(() => import("./pages/PluginManager").then((module) => ({ default: module.PluginManager })));
|
||||
const PluginSettings = lazy(() => import("./pages/PluginSettings").then((module) => ({ default: module.PluginSettings })));
|
||||
const AdapterManager = lazy(() => import("./pages/AdapterManager").then((module) => ({ default: module.AdapterManager })));
|
||||
const PluginPage = lazy(() => import("./pages/PluginPage").then((module) => ({ default: module.PluginPage })));
|
||||
const NewAgent = lazy(() => import("./pages/NewAgent").then((module) => ({ default: module.NewAgent })));
|
||||
const AssistantConnection = lazy(() => import("./pages/apps/AssistantConnection").then((module) => ({ default: module.AssistantConnection })));
|
||||
const JoinRequestQueue = lazy(() => import("./pages/JoinRequestQueue").then((module) => ({ default: module.JoinRequestQueue })));
|
||||
|
||||
const CompanyExport = lazy(() => import("./pages/CompanyExport").then((module) => ({ default: module.CompanyExport })));
|
||||
|
||||
const ProductionAgents = lazy(() => import("./pages/Agents.production").then((module) => ({ default: module.Agents })));
|
||||
const ProductionRoutines = lazy(() => import("./pages/Routines.production").then((module) => ({ default: module.Routines })));
|
||||
const ProductionRoutineDetail = lazy(() => import("./pages/RoutineDetail.production").then((module) => ({ default: module.RoutineDetail })));
|
||||
const ProductionCompanySkills = lazy(() => import("./pages/CompanySkills.production").then((module) => ({ default: module.CompanySkills })));
|
||||
const ProductionCompanyActivity = lazy(() => import("./pages/audit/CompanyActivity.production").then((module) => ({ default: module.CompanyActivity })));
|
||||
const ProductionOrgChart = lazy(() => import("./pages/OrgChart.production").then((module) => ({ default: module.OrgChart })));
|
||||
|
||||
function ProductionSurface({ children }: { children: ReactNode }) {
|
||||
return <Suspense fallback={<PaperclipLoading />}>{children}</Suspense>;
|
||||
@@ -762,12 +755,18 @@ function NoCompaniesStartPage() {
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const { pathname } = useLocation();
|
||||
const { enabled: streamlinedUiEnabled, loaded: streamlinedUiLoaded } = useStreamlinedUiEnabled();
|
||||
const { enabled: combinedInboxTasksEnabled } = useCombinedInboxTasksEnabled();
|
||||
useEffect(() => {
|
||||
if (/^\/[^/]+\/(issues|tasks|inbox)(?:\/|$)/.test(pathname)) {
|
||||
void loadIssueDetail().catch(() => undefined);
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Routes>
|
||||
<Suspense fallback={<PaperclipLoading />}><Routes>
|
||||
<Route path="oauth-handoff" element={<PaperclipCloudOAuthHandoffPage />} />
|
||||
<Route path="auth" element={<AuthPage />} />
|
||||
<Route path="board-claim/:token" element={<BoardClaimPage />} />
|
||||
@@ -854,7 +853,7 @@ export function App() {
|
||||
</Route>
|
||||
<Route path="*" element={<NotFoundPage scope="global" />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Routes></Suspense>
|
||||
<OnboardingWizardVariant />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
// @vitest-environment jsdom
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, expect, it, vi } from "vitest";
|
||||
import { BoardDialogs } from "./BoardDialogs";
|
||||
|
||||
const state = vi.hoisted(() => ({ newIssueOpen: false, newProjectOpen: false, newGoalOpen: false, newAgentOpen: false }));
|
||||
vi.mock("../context/DialogContext", () => ({ useDialogState: () => state, useDialogActions: () => ({ closeNewIssue: vi.fn(), closeNewProject: vi.fn(), closeNewGoal: vi.fn(), closeNewAgent: vi.fn() }) }));
|
||||
vi.mock("./NewIssueDialog", () => ({ NewIssueDialog: () => <input aria-label="Task draft" /> }));
|
||||
vi.mock("./NewProjectDialog", () => ({ NewProjectDialog: () => <div>Project dialog</div> }));
|
||||
vi.mock("./NewGoalDialog", () => ({ NewGoalDialog: () => <div>Goal dialog</div> }));
|
||||
vi.mock("./NewAgentDialog", () => ({ NewAgentDialog: () => <div>Agent dialog</div> }));
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
beforeEach(() => {
|
||||
Object.assign(state, { newIssueOpen: false, newProjectOpen: false, newGoalOpen: false, newAgentOpen: false });
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
afterEach(async () => {
|
||||
await act(async () => root.unmount());
|
||||
container.remove();
|
||||
});
|
||||
async function render() { await act(async () => { root.render(<BoardDialogs />); }); }
|
||||
it("leaves unopened dialog trees unmounted", async () => {
|
||||
await render();
|
||||
expect(container.innerHTML).toBe("");
|
||||
});
|
||||
it("loads a requested dialog and retains its draft across close and reopen", async () => {
|
||||
await render();
|
||||
state.newIssueOpen = true;
|
||||
await render();
|
||||
const draft = container.querySelector("input")!;
|
||||
expect(draft).not.toBeNull();
|
||||
draft.value = "Keep my draft";
|
||||
expect(container.textContent).not.toContain("Project dialog");
|
||||
state.newIssueOpen = false;
|
||||
await render();
|
||||
state.newIssueOpen = true;
|
||||
await render();
|
||||
expect(container.querySelector("input")).toBe(draft);
|
||||
expect(container.querySelector("input")?.value).toBe("Keep my draft");
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { lazy } from "react";
|
||||
import { useDialogActions, useDialogState } from "../context/DialogContext";
|
||||
import { DeferredOverlay } from "./DeferredOverlay";
|
||||
|
||||
const NewIssueDialog = lazy(() => import("./NewIssueDialog").then((module) => ({ default: module.NewIssueDialog })));
|
||||
const NewProjectDialog = lazy(() => import("./NewProjectDialog").then((module) => ({ default: module.NewProjectDialog })));
|
||||
const NewGoalDialog = lazy(() => import("./NewGoalDialog").then((module) => ({ default: module.NewGoalDialog })));
|
||||
const NewAgentDialog = lazy(() => import("./NewAgentDialog").then((module) => ({ default: module.NewAgentDialog })));
|
||||
|
||||
export function BoardDialogs() {
|
||||
const { newIssueOpen, newProjectOpen, newGoalOpen, newAgentOpen } = useDialogState();
|
||||
const { closeNewIssue, closeNewProject, closeNewGoal, closeNewAgent } = useDialogActions();
|
||||
return <>
|
||||
<DeferredOverlay requested={newIssueOpen} title="New task" onClose={closeNewIssue}><NewIssueDialog /></DeferredOverlay>
|
||||
<DeferredOverlay requested={newProjectOpen} title="New project" onClose={closeNewProject}><NewProjectDialog /></DeferredOverlay>
|
||||
<DeferredOverlay requested={newGoalOpen} title="New goal" onClose={closeNewGoal}><NewGoalDialog /></DeferredOverlay>
|
||||
<DeferredOverlay requested={newAgentOpen} title="New agent" onClose={closeNewAgent}><NewAgentDialog /></DeferredOverlay>
|
||||
</>;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
// @vitest-environment jsdom
|
||||
import { act, lazy, useState } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, expect, it, vi } from "vitest";
|
||||
import { DeferredOverlay } from "./DeferredOverlay";
|
||||
|
||||
const capture = vi.hoisted(() => vi.fn());
|
||||
vi.mock("../lib/sentry", () => ({ captureBrowserException: capture }));
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
});
|
||||
afterEach(async () => {
|
||||
await act(async () => root.unmount());
|
||||
container.remove();
|
||||
vi.restoreAllMocks();
|
||||
capture.mockClear();
|
||||
});
|
||||
it("dismisses a failed chunk without replacing the board or its draft", async () => {
|
||||
const Failed = lazy(async () => { throw new Error("Chunk download failed"); });
|
||||
function Board() {
|
||||
const [requested, setRequested] = useState(true);
|
||||
return <><textarea defaultValue="Keep my unsent reply" /><DeferredOverlay requested={requested} title="New task" onClose={() => setRequested(false)}><Failed /></DeferredOverlay></>;
|
||||
}
|
||||
await act(async () => root.render(<Board />));
|
||||
const draft = container.querySelector("textarea")!;
|
||||
expect(document.body.textContent).toContain("Couldn't open new task");
|
||||
const close = [...document.querySelectorAll("button")].find((button) => button.textContent === "Close")!;
|
||||
await act(async () => close.click());
|
||||
expect(document.querySelector('[role="dialog"]')).toBeNull();
|
||||
expect(container.querySelector("textarea")).toBe(draft);
|
||||
expect(draft.value).toBe("Keep my unsent reply");
|
||||
expect(capture).toHaveBeenCalledWith(expect.any(Error));
|
||||
});
|
||||
it("removes a pending overlay on navigation and contains a later rejection", async () => {
|
||||
let reject!: (error: Error) => void;
|
||||
const Pending = lazy(() => new Promise<never>((_, rejectImport) => { reject = rejectImport; }));
|
||||
function render(requested: boolean) {
|
||||
return <><textarea defaultValue="Saved draft" /><DeferredOverlay requested={requested} title="Setup" onClose={() => {}}><Pending /></DeferredOverlay></>;
|
||||
}
|
||||
await act(async () => root.render(render(true)));
|
||||
expect(document.body.textContent).toContain("Loading setup");
|
||||
const draft = container.querySelector("textarea");
|
||||
await act(async () => root.render(render(false)));
|
||||
expect(document.querySelector('[role="dialog"]')).toBeNull();
|
||||
await act(async () => reject(new Error("Late chunk failure")));
|
||||
expect(document.querySelector('[role="dialog"]')).toBeNull();
|
||||
expect(container.querySelector("textarea")).toBe(draft);
|
||||
});
|
||||
it("allows cancelling an in-flight download", async () => {
|
||||
const Pending = lazy(() => new Promise<never>(() => {}));
|
||||
function Board() {
|
||||
const [requested, setRequested] = useState(true);
|
||||
return <DeferredOverlay requested={requested} title="New project" onClose={() => setRequested(false)}><Pending /></DeferredOverlay>;
|
||||
}
|
||||
await act(async () => root.render(<Board />));
|
||||
const cancel = [...document.querySelectorAll("button")].find((button) => button.textContent === "Cancel")!;
|
||||
await act(async () => cancel.click());
|
||||
expect(document.querySelector('[role="dialog"]')).toBeNull();
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Component, Suspense, useState, type ReactNode } from "react";
|
||||
import { captureBrowserException } from "../lib/sentry";
|
||||
import { PaperclipLoading } from "./AnimatedPaperclipIcon";
|
||||
import { Button } from "./ui/button";
|
||||
import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
|
||||
|
||||
interface DeferredOverlayProps {
|
||||
requested: boolean;
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function OverlayNotice({ title, onClose, failed = false }: Pick<DeferredOverlayProps, "title" | "onClose"> & { failed?: boolean }) {
|
||||
return <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
|
||||
<DialogContent showCloseButton={false} aria-describedby={undefined}>
|
||||
<DialogTitle>{failed ? `Couldn't open ${title.toLowerCase()}` : `Loading ${title.toLowerCase()}…`}</DialogTitle>
|
||||
{failed
|
||||
? <p className="text-sm text-muted-foreground">Close this window to keep working. Reload the page before trying again.</p>
|
||||
: <PaperclipLoading className="min-h-0" />}
|
||||
<div className="flex justify-end"><Button variant="outline" onClick={onClose}>{failed ? "Close" : "Cancel"}</Button></div>
|
||||
</DialogContent>
|
||||
</Dialog>;
|
||||
}
|
||||
|
||||
class OverlayErrorBoundary extends Component<DeferredOverlayProps, { failed: boolean }> {
|
||||
state = { failed: false };
|
||||
static getDerivedStateFromError() { return { failed: true }; }
|
||||
componentDidCatch(error: Error) { captureBrowserException(error); }
|
||||
render() {
|
||||
if (!this.state.failed) return this.props.children;
|
||||
return this.props.requested ? <OverlayNotice title={this.props.title} onClose={this.props.onClose} failed /> : null;
|
||||
}
|
||||
}
|
||||
|
||||
export function DeferredOverlay({ requested, title, onClose, children }: DeferredOverlayProps) {
|
||||
const [activated, setActivated] = useState(requested);
|
||||
if (requested && !activated) setActivated(true);
|
||||
if (!requested && !activated) return null;
|
||||
return <OverlayErrorBoundary requested={requested} title={title} onClose={onClose}>
|
||||
<Suspense fallback={requested ? <OverlayNotice title={title} onClose={onClose} /> : null}>{children}</Suspense>
|
||||
</OverlayErrorBoundary>;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BoardDialogs } from "./BoardDialogs";
|
||||
import { ChatSetupSidebarProvider } from "@/context/ChatSetupSidebarContext";
|
||||
import { PluginAppShellOverlays } from "./PluginAppShellOverlays";
|
||||
import {
|
||||
@@ -25,10 +26,6 @@ import { AppDetailSidebar } from "./AppConnectionSidebar.production";
|
||||
import { BreadcrumbBar } from "./BreadcrumbBar.production";
|
||||
import { PropertiesPanel } from "./PropertiesPanel";
|
||||
import { CommandPalette } from "./CommandPalette";
|
||||
import { NewIssueDialog } from "./NewIssueDialog";
|
||||
import { NewProjectDialog } from "./NewProjectDialog";
|
||||
import { NewGoalDialog } from "./NewGoalDialog";
|
||||
import { NewAgentDialog } from "./NewAgentDialog";
|
||||
import { KeyboardShortcutsCheatsheet } from "./KeyboardShortcutsCheatsheet";
|
||||
import { ToastViewport } from "./ToastViewport";
|
||||
import { MobileBottomNav } from "./MobileBottomNav";
|
||||
@@ -734,10 +731,7 @@ export function Layout() {
|
||||
</div>
|
||||
{isMobile && <MobileBottomNav visible={mobileNavVisible} />}
|
||||
<CommandPalette />
|
||||
<NewIssueDialog />
|
||||
<NewProjectDialog />
|
||||
<NewGoalDialog />
|
||||
<NewAgentDialog />
|
||||
<BoardDialogs />
|
||||
<KeyboardShortcutsCheatsheet
|
||||
open={shortcutsOpen}
|
||||
onOpenChange={setShortcutsOpen}
|
||||
|
||||
@@ -206,6 +206,7 @@ vi.mock("../plugins/slots", async () => {
|
||||
});
|
||||
|
||||
vi.mock("../context/DialogContext", () => ({
|
||||
useDialogState: () => ({ newIssueOpen: false, newProjectOpen: false, newGoalOpen: false, newAgentOpen: false }),
|
||||
useDialog: () => ({
|
||||
openNewIssue: vi.fn(),
|
||||
openOnboarding: vi.fn(),
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BoardDialogs } from "./BoardDialogs";
|
||||
import { SetupWizardSidebarOutlet } from "./SetupWizard";
|
||||
import { ChatSetupSidebarProvider } from "@/context/ChatSetupSidebarContext";
|
||||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
|
||||
@@ -14,10 +15,6 @@ import { SkillsContextualSidebar } from "./SkillsContextualSidebar";
|
||||
import { BreadcrumbBar } from "./BreadcrumbBar";
|
||||
import { PropertiesPanel } from "./PropertiesPanel";
|
||||
import { CommandPalette } from "./CommandPalette";
|
||||
import { NewIssueDialog } from "./NewIssueDialog";
|
||||
import { NewProjectDialog } from "./NewProjectDialog";
|
||||
import { NewGoalDialog } from "./NewGoalDialog";
|
||||
import { NewAgentDialog } from "./NewAgentDialog";
|
||||
import { KeyboardShortcutsCheatsheet } from "./KeyboardShortcutsCheatsheet";
|
||||
import { ToastViewport } from "./ToastViewport";
|
||||
import { AnnouncementWell } from "./AnnouncementWell";
|
||||
@@ -745,10 +742,7 @@ export function Layout({ sidebarSections }: { sidebarSections?: ReactNode }) {
|
||||
</div>
|
||||
{isMobile && <MobileBottomNav visible={mobileNavVisible} />}
|
||||
<CommandPalette />
|
||||
<NewIssueDialog />
|
||||
<NewProjectDialog />
|
||||
<NewGoalDialog />
|
||||
<NewAgentDialog />
|
||||
<BoardDialogs />
|
||||
<KeyboardShortcutsCheatsheet open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
|
||||
<ToastViewport />
|
||||
<AnnouncementWell health={health} />
|
||||
|
||||
@@ -783,11 +783,6 @@ function OnboardingWizardInner({
|
||||
initialStepRef.current = effectiveOnboardingOptions.initialStep;
|
||||
const openingRequestRef = useRef<{ open: boolean; companyId: string | null; hasOpened: boolean } | null>(null);
|
||||
|
||||
// Reset the route-dismissed flag when navigating to a different path.
|
||||
useEffect(() => {
|
||||
setRouteDismissed(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
/**
|
||||
* Forget everything that describes one particular company.
|
||||
*
|
||||
|
||||
@@ -1,52 +1,68 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { flushSync } from "react-dom";
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { OnboardingWizardVariant } from "./OnboardingWizardVariant";
|
||||
|
||||
const mockInstanceSettingsApi = vi.hoisted(() => ({
|
||||
getExperimental: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/api/instanceSettings", () => ({
|
||||
instanceSettingsApi: mockInstanceSettingsApi,
|
||||
}));
|
||||
|
||||
const state = vi.hoisted(() => ({ onboardingOpen: false, onboardingRouteDismissed: false, pathname: "/PAP/issues/PAP-1" }));
|
||||
const mount = vi.hoisted(() => vi.fn());
|
||||
const setDismissed = vi.hoisted(() => vi.fn());
|
||||
vi.mock("../context/DialogContext", () => ({ useDialogState: () => state, useDialogActions: () => ({ closeOnboarding: vi.fn(), setOnboardingRouteDismissed: setDismissed }) }));
|
||||
vi.mock("../lib/router", () => ({ useLocation: () => state }));
|
||||
vi.mock("./OnboardingWizard", () => ({
|
||||
OnboardingWizard: () => <div data-testid="wizard-capsule" />,
|
||||
OnboardingWizard: () => { mount(); return <div data-testid="wizard-capsule" />; },
|
||||
}));
|
||||
|
||||
describe("OnboardingWizardVariant (PAP-138)", () => {
|
||||
describe("OnboardingWizardVariant", () => {
|
||||
let container: HTMLDivElement;
|
||||
let root: Root | null = null;
|
||||
|
||||
function renderVariant() {
|
||||
root = createRoot(container);
|
||||
flushSync(() => {
|
||||
root!.render(<OnboardingWizardVariant />);
|
||||
});
|
||||
let root: Root;
|
||||
async function renderVariant() {
|
||||
await act(async () => { root.render(<OnboardingWizardVariant />); });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
state.onboardingOpen = false;
|
||||
state.onboardingRouteDismissed = false;
|
||||
state.pathname = "/PAP/issues/PAP-1";
|
||||
mount.mockClear();
|
||||
setDismissed.mockClear();
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
flushSync(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
root = null;
|
||||
afterEach(async () => {
|
||||
await act(async () => root.unmount());
|
||||
container.remove();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("renders the capsule wizard without reading the chat flag", () => {
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({});
|
||||
renderVariant();
|
||||
|
||||
it("does not mount the onboarding dependency tree when opening a task", async () => {
|
||||
await renderVariant();
|
||||
expect(container.innerHTML).toBe("");
|
||||
expect(mount).not.toHaveBeenCalled();
|
||||
});
|
||||
it.each(["/onboarding", "/PAP/onboarding"])("loads the wizard for %s", async (pathname) => {
|
||||
state.pathname = pathname;
|
||||
await renderVariant();
|
||||
expect(container.querySelector('[data-testid="wizard-capsule"]')).not.toBeNull();
|
||||
expect(mockInstanceSettingsApi.getExperimental).not.toHaveBeenCalled();
|
||||
});
|
||||
it("loads on dialog request and preserves the mounted wizard after closing", async () => {
|
||||
await renderVariant();
|
||||
state.onboardingOpen = true;
|
||||
await renderVariant();
|
||||
const wizard = container.querySelector('[data-testid="wizard-capsule"]');
|
||||
expect(wizard).not.toBeNull();
|
||||
state.onboardingOpen = false;
|
||||
await renderVariant();
|
||||
expect(container.querySelector('[data-testid="wizard-capsule"]')).toBe(wizard);
|
||||
});
|
||||
it("resets route dismissal on navigation without undoing cancellation on the same path", async () => {
|
||||
state.pathname = "/onboarding";
|
||||
await renderVariant();
|
||||
expect(setDismissed).toHaveBeenCalledExactlyOnceWith(false);
|
||||
state.onboardingRouteDismissed = true;
|
||||
await renderVariant();
|
||||
expect(setDismissed).toHaveBeenCalledTimes(1);
|
||||
state.pathname = "/PAP/issues/PAP-1";
|
||||
await renderVariant();
|
||||
expect(setDismissed).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,10 @@
|
||||
import { OnboardingWizard } from "./OnboardingWizard";
|
||||
import { lazy, useEffect } from "react";
|
||||
import { useDialogActions, useDialogState } from "../context/DialogContext";
|
||||
import { useLocation } from "../lib/router";
|
||||
import { isOnboardingPath } from "../lib/onboarding-route";
|
||||
import { DeferredOverlay } from "./DeferredOverlay";
|
||||
|
||||
const OnboardingWizard = lazy(() => import("./OnboardingWizard").then((module) => ({ default: module.OnboardingWizard })));
|
||||
|
||||
/**
|
||||
* Default onboarding wizard. Conference-room chat is now the only surface left
|
||||
@@ -6,5 +12,15 @@ import { OnboardingWizard } from "./OnboardingWizard";
|
||||
* experimental flag.
|
||||
*/
|
||||
export function OnboardingWizardVariant() {
|
||||
return <OnboardingWizard />;
|
||||
const { onboardingOpen, onboardingRouteDismissed } = useDialogState();
|
||||
const { closeOnboarding, setOnboardingRouteDismissed } = useDialogActions();
|
||||
const { pathname } = useLocation();
|
||||
useEffect(() => {
|
||||
setOnboardingRouteDismissed(false);
|
||||
}, [pathname, setOnboardingRouteDismissed]);
|
||||
const requested = onboardingOpen || (isOnboardingPath(pathname) && !onboardingRouteDismissed);
|
||||
return <DeferredOverlay requested={requested} title="Setup" onClose={() => {
|
||||
closeOnboarding();
|
||||
if (isOnboardingPath(pathname)) setOnboardingRouteDismissed(true);
|
||||
}}><OnboardingWizard /></DeferredOverlay>;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { act, lazy } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { RouteErrorBoundary } from "./RouteErrorBoundary";
|
||||
@@ -41,6 +41,40 @@ describe("RouteErrorBoundary", () => {
|
||||
captureBrowserExceptionMock.mockClear();
|
||||
});
|
||||
|
||||
it("keeps the surrounding shell mounted while a route loads", async () => {
|
||||
let resolve!: (module: { default: () => React.JSX.Element }) => void;
|
||||
const PendingPage = lazy(() => new Promise<{ default: () => React.JSX.Element }>((done) => { resolve = done; }));
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<>
|
||||
<nav>Task navigation</nav>
|
||||
<RouteErrorBoundary><PendingPage /></RouteErrorBoundary>
|
||||
</>,
|
||||
);
|
||||
});
|
||||
const shell = container.querySelector("nav");
|
||||
expect(container.querySelector('[role="status"]')?.textContent).toContain("Loading");
|
||||
expect(shell?.textContent).toBe("Task navigation");
|
||||
await act(async () => { resolve({ default: () => <div>Loaded page</div> }); });
|
||||
expect(container.querySelector("nav")).toBe(shell);
|
||||
expect(container.textContent).toContain("Loaded page");
|
||||
expect(container.querySelector('[role="status"]')).toBeNull();
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("contains a failed chunk load and recovers when navigating back to a task", async () => {
|
||||
const FailedPage = lazy(async () => { throw new Error("Failed to fetch dynamically imported module"); });
|
||||
const root = createRoot(container);
|
||||
await act(async () => { root.render(<RouteErrorBoundary><FailedPage /></RouteErrorBoundary>); });
|
||||
expect(container.textContent).toContain("This page hit an error");
|
||||
routerLocation.current = { pathname: "/co/issues/CO-1", search: "" };
|
||||
await act(async () => { root.render(<RouteErrorBoundary><div>Saved conversation</div></RouteErrorBoundary>); });
|
||||
expect(container.textContent).toContain("Saved conversation");
|
||||
expect(container.textContent).not.toContain("This page hit an error");
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("navigates back when the user clicks Go back", () => {
|
||||
const root = createRoot(container);
|
||||
act(() => {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||||
import { Component, Suspense, type ErrorInfo, type ReactNode } from "react";
|
||||
import { useLocation, useNavigate } from "@/lib/router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { captureBrowserException } from "@/lib/sentry";
|
||||
import { PaperclipLoading } from "./AnimatedPaperclipIcon";
|
||||
|
||||
type RouteErrorBoundaryInnerProps = {
|
||||
resetKey: string;
|
||||
@@ -69,7 +70,7 @@ export function RouteErrorBoundary({ children }: { children: ReactNode }) {
|
||||
|
||||
return (
|
||||
<RouteErrorBoundaryInner resetKey={resetKey} onReset={() => navigate(-1)}>
|
||||
{children}
|
||||
<Suspense fallback={<PaperclipLoading className="min-h-full" />}>{children}</Suspense>
|
||||
</RouteErrorBoundaryInner>
|
||||
);
|
||||
}
|
||||
@@ -158,6 +158,26 @@ describe("TaskMessageScroller", () => {
|
||||
expect(viewport.scrollTop).toBe(500);
|
||||
});
|
||||
|
||||
it("does not replace a saved reading position with a hidden route's geometry", async () => {
|
||||
function mount(restore: boolean) {
|
||||
flushSync(() => root.render(
|
||||
<TaskChatScrollNavigation.Provider value={{ key: "hidden-route-entry", hash: "", restore }}>
|
||||
<TaskMessageScroller contentKey="saved-thread">
|
||||
<div ref={(node) => { if (node) fakeGeometry(node.parentElement!); }}>Saved messages</div>
|
||||
</TaskMessageScroller>
|
||||
</TaskChatScrollNavigation.Provider>,
|
||||
));
|
||||
}
|
||||
mount(false);
|
||||
const viewport = scroller();
|
||||
await scrollTo(viewport, 150);
|
||||
Object.defineProperty(viewport, "clientHeight", { value: 0, configurable: true });
|
||||
await scrollTo(viewport, 0);
|
||||
flushSync(() => root.render(null));
|
||||
mount(true);
|
||||
expect(scroller().scrollTop).toBe(150);
|
||||
});
|
||||
|
||||
it("renders children inside the scroll container, pill hidden, scrolled to bottom on mount", () => {
|
||||
render();
|
||||
const el = scroller();
|
||||
|
||||
@@ -118,7 +118,7 @@ export function TaskMessageScroller({ children, contentKey, className }: TaskMes
|
||||
|
||||
const rememberAnchor = useCallback(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (!el || el.clientHeight === 0) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
anchorRef.current = readThreadScrollAnchor(el, rect.top, rect.bottom);
|
||||
if (initialPositionApplied.current) navigation.remember(el.scrollTop, anchorRef.current);
|
||||
@@ -126,7 +126,7 @@ export function TaskMessageScroller({ children, contentKey, className }: TaskMes
|
||||
|
||||
const reconcileContent = useCallback(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (!el || el.clientHeight === 0) return;
|
||||
// Clicking latest is an explicit follow intent. If content or the composer
|
||||
// changes during its glide, finish at the new bottom instead of restoring
|
||||
// the old reading anchor and cancelling the browser's smooth scroll.
|
||||
@@ -144,6 +144,7 @@ export function TaskMessageScroller({ children, contentKey, className }: TaskMes
|
||||
}, [rememberAnchor, scrollToBottom, hidePill]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (!ref.current?.clientHeight) return;
|
||||
rememberAnchor();
|
||||
showScrollbarWhileScrolling();
|
||||
// A growing composer shrinks this viewport. Some browsers dispatch the
|
||||
@@ -246,7 +247,7 @@ export function TaskMessageScroller({ children, contentKey, className }: TaskMes
|
||||
appliedNavigation.current = { key: navigation.key, hash: navigation.hash };
|
||||
initialPositionApplied.current = false;
|
||||
}
|
||||
if (el && navigation.ready && !initialPositionApplied.current) {
|
||||
if (el && el.clientHeight > 0 && navigation.ready && !initialPositionApplied.current) {
|
||||
const top = navigation.initialPosition(el, el.getBoundingClientRect().top, el.scrollTop);
|
||||
if (top !== null) {
|
||||
el.scrollTop = top;
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export const AGENT_FILTER_TABS = ["all", "active", "paused", "error", "builtin"] as const;
|
||||
@@ -46,7 +46,8 @@ const ConfigureBuiltInAgentModal = lazy(() =>
|
||||
})),
|
||||
);
|
||||
|
||||
export const AGENT_FILTER_TABS = ["all", "active", "paused", "error", "builtin"] as const;
|
||||
import { AGENT_FILTER_TABS } from "../lib/agent-filter-tabs";
|
||||
export { AGENT_FILTER_TABS } from "../lib/agent-filter-tabs";
|
||||
type FilterTab = (typeof AGENT_FILTER_TABS)[number];
|
||||
|
||||
const AGENT_FILTER_TAB_ITEMS: { value: FilterTab; label: string }[] = [
|
||||
|
||||
+25
-2
@@ -1,5 +1,5 @@
|
||||
import path from "path";
|
||||
import { defineConfig } from "vite";
|
||||
import { defineConfig, type Plugin } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { createUiDevWatchOptions } from "./src/lib/vite-watch";
|
||||
@@ -9,15 +9,38 @@ import { readBrowserBuildCommit } from "./src/lib/vite-build-commit";
|
||||
|
||||
const apiProxy = createApiProxy();
|
||||
|
||||
function preloadIssueDetail(): Plugin {
|
||||
return {
|
||||
name: "paperclip-preload-issue-detail",
|
||||
apply: "build",
|
||||
transformIndexHtml(_html, { bundle }) {
|
||||
const issueDetail = Object.values(bundle ?? {}).find((chunk) =>
|
||||
chunk.type === "chunk" && chunk.moduleIds.some((id) => id.endsWith("/src/pages/IssueDetail.tsx")),
|
||||
);
|
||||
return issueDetail ? [{ tag: "link", attrs: { rel: "modulepreload", href: `/${issueDetail.fileName}`, crossorigin: "" }, injectTo: "head" }] : [];
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default defineConfig(({ mode }) => ({
|
||||
define: {
|
||||
__PAPERCLIP_BUILD_COMMIT__: JSON.stringify(
|
||||
readBrowserBuildCommit(__dirname),
|
||||
),
|
||||
},
|
||||
plugins: [react(), tailwindcss(), serviceWorkerBuildIdPlugin()],
|
||||
plugins: [react(), tailwindcss(), serviceWorkerBuildIdPlugin(), preloadIssueDetail()],
|
||||
build: {
|
||||
minify: "esbuild",
|
||||
rolldownOptions: {
|
||||
output: {
|
||||
codeSplitting: {
|
||||
groups: [
|
||||
{ name: "board-startup", tags: ["$initial"], priority: 10 },
|
||||
{ name: "issue-detail", test: /\/src\/pages\/IssueDetail\.tsx$/, priority: 5 },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
esbuild:
|
||||
mode === "production"
|
||||
|
||||
Reference in new issue
Block a user