diff --git a/tests/perf/issue-detail/README.md b/tests/perf/issue-detail/README.md
index 6e29177b36d..687fdc3ab35 100644
--- a/tests/perf/issue-detail/README.md
+++ b/tests/perf/issue-detail/README.md
@@ -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
diff --git a/tests/perf/issue-detail/issue-detail.perf.spec.ts b/tests/perf/issue-detail/issue-detail.perf.spec.ts
index 66cc8df968c..f8ffb4b2d9f 100644
--- a/tests/perf/issue-detail/issue-detail.perf.spec.ts
+++ b/tests/perf/issue-detail/issue-detail.perf.spec.ts
@@ -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) {
diff --git a/tests/perf/issue-detail/layout-stability.spec.ts b/tests/perf/issue-detail/layout-stability.spec.ts
index 5c06655b53e..f54083fcf19 100644
--- a/tests/perf/issue-detail/layout-stability.spec.ts
+++ b/tests/perf/issue-detail/layout-stability.spec.ts
@@ -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);
diff --git a/tests/runner-e2e/user-actions.ts b/tests/runner-e2e/user-actions.ts
index 42965012c3f..bba252f098d 100644
--- a/tests/runner-e2e/user-actions.ts
+++ b/tests/runner-e2e/user-actions.ts
@@ -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();
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index d7a3faacefd..b9286cf717d 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -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 />
     </>
   );
diff --git a/ui/src/components/BoardDialogs.test.tsx b/ui/src/components/BoardDialogs.test.tsx
new file mode 100644
index 00000000000..08575ea269b
--- /dev/null
+++ b/ui/src/components/BoardDialogs.test.tsx
@@ -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");
+});
diff --git a/ui/src/components/BoardDialogs.tsx b/ui/src/components/BoardDialogs.tsx
new file mode 100644
index 00000000000..c4c17d798f7
--- /dev/null
+++ b/ui/src/components/BoardDialogs.tsx
@@ -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>
+  </>;
+}
diff --git a/ui/src/components/DeferredOverlay.test.tsx b/ui/src/components/DeferredOverlay.test.tsx
new file mode 100644
index 00000000000..eee19620a81
--- /dev/null
+++ b/ui/src/components/DeferredOverlay.test.tsx
@@ -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();
+});
diff --git a/ui/src/components/DeferredOverlay.tsx b/ui/src/components/DeferredOverlay.tsx
new file mode 100644
index 00000000000..26e478e0c5e
--- /dev/null
+++ b/ui/src/components/DeferredOverlay.tsx
@@ -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>;
+}
diff --git a/ui/src/components/Layout.production.tsx b/ui/src/components/Layout.production.tsx
index adb179f4a6a..9ef6dddd4b7 100644
--- a/ui/src/components/Layout.production.tsx
+++ b/ui/src/components/Layout.production.tsx
@@ -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}
diff --git a/ui/src/components/Layout.test.tsx b/ui/src/components/Layout.test.tsx
index f84ef659ab8..733d537a3fc 100644
--- a/ui/src/components/Layout.test.tsx
+++ b/ui/src/components/Layout.test.tsx
@@ -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(),
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 385941d6ca1..eb4a3be13ad 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -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} />
diff --git a/ui/src/components/OnboardingWizard.tsx b/ui/src/components/OnboardingWizard.tsx
index 833012c8d12..fd7dcb4ba0d 100644
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -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.
    *
diff --git a/ui/src/components/OnboardingWizardVariant.test.tsx b/ui/src/components/OnboardingWizardVariant.test.tsx
index 0381e60698e..fdc849433ce 100644
--- a/ui/src/components/OnboardingWizardVariant.test.tsx
+++ b/ui/src/components/OnboardingWizardVariant.test.tsx
@@ -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);
   });
 });
diff --git a/ui/src/components/OnboardingWizardVariant.tsx b/ui/src/components/OnboardingWizardVariant.tsx
index a6a6ee3cc0a..a83ff7dad29 100644
--- a/ui/src/components/OnboardingWizardVariant.tsx
+++ b/ui/src/components/OnboardingWizardVariant.tsx
@@ -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>;
 }
diff --git a/ui/src/components/RouteErrorBoundary.test.tsx b/ui/src/components/RouteErrorBoundary.test.tsx
index 4d159f2b2f0..1a501949661 100644
--- a/ui/src/components/RouteErrorBoundary.test.tsx
+++ b/ui/src/components/RouteErrorBoundary.test.tsx
@@ -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(() => {
diff --git a/ui/src/components/RouteErrorBoundary.tsx b/ui/src/components/RouteErrorBoundary.tsx
index 5787df15561..aba128c130f 100644
--- a/ui/src/components/RouteErrorBoundary.tsx
+++ b/ui/src/components/RouteErrorBoundary.tsx
@@ -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>
   );
 }
diff --git a/ui/src/components/task-chat/TaskMessageScroller.test.tsx b/ui/src/components/task-chat/TaskMessageScroller.test.tsx
index 88d297f7648..dabc297f03e 100644
--- a/ui/src/components/task-chat/TaskMessageScroller.test.tsx
+++ b/ui/src/components/task-chat/TaskMessageScroller.test.tsx
@@ -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();
diff --git a/ui/src/components/task-chat/TaskMessageScroller.tsx b/ui/src/components/task-chat/TaskMessageScroller.tsx
index ed75caa2953..6c245df8ffc 100644
--- a/ui/src/components/task-chat/TaskMessageScroller.tsx
+++ b/ui/src/components/task-chat/TaskMessageScroller.tsx
@@ -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;
diff --git a/ui/src/lib/agent-filter-tabs.ts b/ui/src/lib/agent-filter-tabs.ts
new file mode 100644
index 00000000000..70754739345
--- /dev/null
+++ b/ui/src/lib/agent-filter-tabs.ts
@@ -0,0 +1 @@
+export const AGENT_FILTER_TABS = ["all", "active", "paused", "error", "builtin"] as const;
diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index d128d9cf16a..f1fa0e53754 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -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 }[] = [
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 6ac1be642c9..2e71bdc76d9 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -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"