mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-25 02:26:12 +02:00
## Thinking Path
> - Paperclip is the open source app people use to manage AI agents for
work.
> - The board UI loads each page as a lazy chunk. Vite adds a preload
step that also loads the CSS of the chunk.
> - Staging error monitoring reported `Unable to preload CSS for
…/assets/issue-detail-CIbQo9zW.css`. The same file name comes from the
current build, so the CSS did not change. One request for the file
failed for a short time.
> - Vite rejects only the first import that asks for a failed file.
Later imports skip that file. On a task page, the first import is the
task-page prefetch, which ignores errors. The page then shows without
its CSS. On other pages that share the CSS, such as Agents, the lazy
route rejects and the route error boundary shows the error.
> - Neither case recovers without a manual reload. This is a routine
retry that the app can do safely, so the app must do it.
> - This pull request reloads the page one time when a chunk or its CSS
fails to load. A loop guard limits this to one reload in five minutes.
> - The benefit is that a stale tab after a deploy, or one failed asset
request, recovers without an error page, without missing styles, and
without error-monitoring noise. An asset that stays broken still shows
the error and still sends a report.
## Linked Issues or Issue Description
**What happened?**
A board page showed "This page hit an error" with `Unable to preload CSS
for <origin>/assets/issue-detail-<hash>.css`. On a task page, the same
failure gave no error message, but the page showed without its
stylesheet.
**Steps to reproduce**
1. Build the UI and start the server.
2. Make the first request for `/assets/issue-detail-*.css` fail. The new
Playwright spec does this with `page.route(...).abort("failed")`.
3. Open `/<prefix>/agents`. The route error boundary shows "Unable to
preload CSS".
4. Open `/<prefix>/issues/<id>`. The task shows, but the browser does
not request the task CSS again. The page has no task-page CSS.
**Expected behavior**
The app recovers from a chunk or CSS load failure without user action.
If the failure continues, the app shows the error one time, with no
reload loop.
**Environment**
Hosted staging browser. The local build of current `master` reproduces
it.
I searched open and closed PRs for `preload`, `preloadError`, and `stale
chunk`. I found no related PR.
## What Changed
- `ui/src/lib/chunk-load-recovery.ts` (new): `isChunkLoadError` matches
the Vite CSS preload error and the dynamic import errors from Chromium,
Firefox, and WebKit. `reloadForChunkLoadError` reloads one time. A
`sessionStorage` marker blocks a second reload for five minutes. After
the first reload, later chunk errors in the same document are part of
that reload, so they return "reloading" and do not show an error.
Without `sessionStorage`, the function does not reload, because it
cannot guard against a loop. `startChunkLoadRecovery` listens for
`vite:preloadError`. It does not cancel the event, so the import still
rejects as before.
- `ui/src/main.tsx`: Starts the listener before the first render. The
listener covers every import, including the task-page prefetch that
ignores errors.
- `RouteErrorBoundary` and `AppErrorBoundary`: While a recovery reload
runs, they show a loading state. They do not show the error page and do
not report to Sentry. Other errors work as before.
- Tests: Vitest unit tests for the helper and both boundaries. A new
Playwright spec, `tests/e2e/chunk-load-recovery.spec.ts`, runs against
the real server and the built UI.
## Verification
- `pnpm --filter @paperclipai/ui exec vitest run
src/lib/chunk-load-recovery.test.ts
src/components/RouteErrorBoundary.test.tsx
src/components/AppErrorBoundary.test.tsx`: 21 tests pass.
- Full UI Vitest suite: 793 files, 9,075 tests pass.
- `pnpm --filter @paperclipai/ui typecheck` passes. `node
scripts/check-token-gates.mjs` is clean. `node scripts/check-maps.mjs`
passes.
- `npx playwright test --config tests/e2e/playwright.config.ts
chunk-load-recovery.spec.ts`: 3 tests pass.
- Task page with one failed CSS request: one reload, the CSS loads, and
the task shows.
- Agents page with one failed CSS request: one reload, the CSS loads,
and the page shows with no error page.
- CSS that always fails: one reload, then the error page shows. There is
no second reload.
- Red proof: I ran the same spec with the `ui/src` changes removed
(current `master` UI code). Both recovery tests fail. On Agents, the
route error boundary shows `Unable to preload CSS for
http://127.0.0.1:3199/assets/issue-detail-CIbQo9zW.css`. On the task
page, the CSS is never requested again.
- A failure I found and fixed during the work: my first version changed
only the error boundaries. The task-page e2e case failed with that
version, because the prefetch received the error and the boundary never
saw it. The `vite:preloadError` listener fixes that case. All results
above are from the final commit.
- The spec blocks service workers, because Playwright page routes cannot
see requests that a service worker sends. With a worker, a failed
network request for an asset that is not cached also gives
`Response.error()`. Thus the preload error is the same.
## Risks
- A page can reload while a user is on it. This occurs only after a
chunk or CSS load failure, and at most one time in five minutes per tab
session. Without this change, that page already shows an error or shows
without styles. Composer drafts use browser storage, so a reload keeps
them.
- A failure that recovers no longer sends a Sentry event. A failure that
continues after the reload still sends one, so a broken deploy stays
visible.
- The error patterns match browser and Vite message prefixes. If a
browser changes its message, that browser goes back to the current
behavior: the error page and a report.
- No API, schema, or server changes.
## Model Used
- Claude Opus 5.5 (`claude-opus-5-5`) by Anthropic, run as a Paperclip
agent through Claude Code with tool use (shell, file edits, Playwright,
and Vitest).
## 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
- [ ] All Paperclip CI gates are green
- [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: devinfoley <139239+devinfoley@users.noreply.github.com>
869 lines
50 KiB
TypeScript
869 lines
50 KiB
TypeScript
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 { ConferenceRoomChatGate } from "./components/ConferenceRoomChatGate";
|
|
import { CasesExperimentalGate } from "./components/CasesExperimentalGate";
|
|
import { StatusCardsExperimentalGate } from "./components/StatusCardsExperimentalGate";
|
|
import { CloudManagedPageGate } from "./components/CloudManagedPageGate";
|
|
import { HiddenSettingsPageGate } from "./components/HiddenSettingsPageGate";
|
|
import { IsolatedWorkspacesRouteGate } from "./components/IsolatedWorkspacesRouteGate";
|
|
import {
|
|
ExecutionWorkspaceCompanyGate,
|
|
UnprefixedExecutionWorkspaceRedirect,
|
|
} from "./components/UnprefixedExecutionWorkspaceRedirect";
|
|
import { useHiddenSettings } from "./hooks/useHiddenSettings";
|
|
import { OnboardingWizardVariant } from "./components/OnboardingWizardVariant";
|
|
import { CloudAccessGate } from "./components/CloudAccessGate";
|
|
import { ShellConfigurationGate } from "./components/ShellConfigurationGate";
|
|
import { PaperclipLoading } from "./components/AnimatedPaperclipIcon";
|
|
import { AGENT_FILTER_TABS } from "./lib/agent-filter-tabs";
|
|
import { useCombinedInboxTasksEnabled } from "./hooks/useCombinedInboxTasksEnabled";
|
|
import { ChatConnectorsExperimentalGate } from "./components/ChatConnectorsExperimentalGate";
|
|
import { useChatConnectorsEnabled } from "./hooks/useChatConnectorsEnabled";
|
|
import { canEnterAppsConnect } from "./pages/apps/app-connect-policy";
|
|
import { NotFoundPage } from "./pages/NotFound";
|
|
import { useCompany } from "./context/CompanyContext";
|
|
import { useDialogActions, useDialogState } from "./context/DialogContext";
|
|
import { loadLastInboxTab } from "./lib/inbox";
|
|
import { TASK_VIEW_PARAM, taskViewForInboxTab, type TaskViewKey } from "./lib/task-views";
|
|
import {
|
|
isOnboardingWizardActive,
|
|
onboardingStepForCompany,
|
|
shouldRedirectCompanylessRouteToOnboarding,
|
|
} from "./lib/onboarding-route";
|
|
import { filterHiddenInstanceSettingsPath, normalizeRememberedInstanceSettingsPath } from "./lib/instance-settings";
|
|
import { useCloudInstance } from "./hooks/useCloudInstance";
|
|
import { useStreamlinedUiEnabled } from "./hooks/useStreamlinedUiEnabled";
|
|
import { cloudStackCreateUrl } from "./lib/cloudLinks";
|
|
import { navigateTopLevel } from "@/lib/browserNavigation";
|
|
|
|
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 TaskChatLab = lazy(() => import("./pages/TaskChatLab").then((module) => ({ default: module.TaskChatLab })));
|
|
const Issues = lazy(() => import("./pages/Issues").then((module) => ({ default: module.Issues })));
|
|
let issueDetailLoad: Promise<{ default: typeof import("./pages/IssueDetail").IssueDetail }> | undefined;
|
|
const loadIssueDetail = () =>
|
|
(issueDetailLoad ??= 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/AgentDetailPage").then((module) => ({ default: module.AgentDetailPage })));
|
|
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>;
|
|
}
|
|
|
|
function boardRoutes(streamlinedUiEnabled: boolean, combinedInboxTasksEnabled: boolean) {
|
|
// Combined Inbox + Task List (PAP-670) only exists in the streamlined shell.
|
|
const mergedTasks = streamlinedUiEnabled && combinedInboxTasksEnabled;
|
|
return (
|
|
<>
|
|
<Route index element={<Navigate to="dashboard" replace />} />
|
|
<Route path="dashboard" element={<Dashboard />} />
|
|
<Route path="dashboard/live" element={<DashboardLive />} />
|
|
<Route
|
|
path="timeline"
|
|
element={streamlinedUiEnabled ? <AuditCompatibilityRedirect to="/activity/timeline" /> : <Timeline />}
|
|
/>
|
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
|
<Route path="companies" element={<Companies />} />
|
|
<Route path="company/settings" element={<CompanySettings />} />
|
|
<Route path="company/settings/connections" element={<CompanyConnections />} />
|
|
<Route path="company/settings/environments" element={<Navigate to="/company/settings/instance/environments" replace />} />
|
|
<Route path="company/settings/cloud-upstream" element={<Navigate to="/company/export" replace />} />
|
|
<Route element={<HiddenSettingsPageGate pageKey="company.members" />}>
|
|
<Route path="company/settings/members" element={<CompanyAccess />} />
|
|
<Route path="company/settings/access" element={<CompanyAccessLegacyRoute />} />
|
|
</Route>
|
|
{/* Invites moved into the Members page; the old URL redirects (and stays
|
|
gated so a hidden Invites surface never round-trips through it). */}
|
|
<Route element={<HiddenSettingsPageGate pageKey="company.invites" />}>
|
|
<Route
|
|
path="company/settings/invites"
|
|
element={<Navigate to="/company/settings/members?tab=invites" replace />}
|
|
/>
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="company.export" />}>
|
|
<Route
|
|
path="company/export/*"
|
|
element={(
|
|
<Suspense fallback={<PaperclipLoading />}>
|
|
<CompanyExport />
|
|
</Suspense>
|
|
)}
|
|
/>
|
|
</Route>
|
|
<Route element={<CloudManagedPageGate />}>
|
|
<Route element={<HiddenSettingsPageGate pageKey="company.import" />}>
|
|
<Route path="company/import" element={<CompanyImport />} />
|
|
</Route>
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="company.secrets" />}>
|
|
<Route path="company/settings/secrets" element={<Secrets />} />
|
|
</Route>
|
|
<Route path="company/settings/tools" element={<LegacyToolsSettingsRedirect />} />
|
|
<Route path="company/settings/tools/:tab" element={<LegacyToolsSettingsRedirect />} />
|
|
<Route path="tools" element={<LegacyToolsRedirect />} />
|
|
<Route path="tools/:tab" element={<LegacyToolsRedirect />} />
|
|
<Route path="apps" element={<Browse />} />
|
|
<Route path="apps/assistant-connection" element={<AssistantConnection />} />
|
|
<Route path="apps/browse" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/connections" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/byo" element={<AppsConnect byoOnly />} />
|
|
<Route
|
|
path="apps/vercel-connect"
|
|
element={<AppsConnectEntryRoute credentialSource="vercel_connect" />}
|
|
/>
|
|
<Route path="apps/connect" element={<AppsConnectEntryRoute />} />
|
|
<Route path="apps/chat/connect" element={
|
|
<ChatConnectorsExperimentalGate><ChatEndpointSetup /></ChatConnectorsExperimentalGate>
|
|
} />
|
|
<Route path="apps/chat/:endpointId" element={
|
|
<ChatConnectorsExperimentalGate><Navigate to="settings" replace /></ChatConnectorsExperimentalGate>
|
|
} />
|
|
<Route path="apps/chat/:endpointId/reviews/:reviewId" element={
|
|
<ChatConnectorsExperimentalGate><ChatEndpointDetail /></ChatConnectorsExperimentalGate>
|
|
} />
|
|
<Route path="apps/chat/:endpointId/:tab" element={
|
|
<ChatConnectorsExperimentalGate><ChatEndpointDetail /></ChatConnectorsExperimentalGate>
|
|
} />
|
|
<Route path="apps/connect/:appKey" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/connect/:appKey/:stage" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/review" element={<AppsReview />} />
|
|
{/* Connector health is inline on the Apps landing page; keep legacy links working. */}
|
|
<Route path="apps/attention" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/gateways" element={<GatewaysList />} />
|
|
<Route path="apps/gateways/:gatewayId" element={<Navigate to="overview" replace />} />
|
|
<Route path="apps/gateways/:gatewayId/:tab" element={<GatewayDetail />} />
|
|
<Route path="apps/advanced" element={<AdvancedToolsRoute />} />
|
|
<Route path="apps/advanced/gateways" element={<GatewaysList />} />
|
|
<Route path="apps/advanced/profiles/new" element={<ProfileWizardRoute mode="new" />} />
|
|
<Route path="apps/advanced/profiles/:profileId/edit" element={<ProfileWizardRoute mode="edit" />} />
|
|
<Route path="apps/advanced/profiles/:profileId" element={<ProfileDetailRoute />} />
|
|
<Route path="apps/advanced/audit" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/advanced/run-your-own" element={<Navigate to="/apps" replace />} />
|
|
<Route path="apps/advanced/:tab" element={<AdvancedToolsRoute />} />
|
|
<Route path="apps/app/:applicationId" element={<AppNotConnected />} />
|
|
<Route path="apps/app/:applicationId/:tab" element={<AppNotConnected />} />
|
|
<Route path="apps/:connectionId" element={<Navigate to="permissions" replace />} />
|
|
<Route path="apps/:connectionId/:tab" element={<AppDetail />} />
|
|
<Route path="company/settings/instance" element={<Navigate to="/company/settings" replace />} />
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.profile" />}>
|
|
<Route path="company/settings/instance/profile" element={<ProfileSettings />} />
|
|
</Route>
|
|
<Route path="company/settings/instance/general" element={<Navigate to="/company/settings" replace />} />
|
|
<Route path="company/settings/instance/heartbeats" element={<Navigate to="/company/settings" replace />} />
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.environments" />}>
|
|
<Route path="company/settings/instance/environments" element={<CompanyEnvironments />} />
|
|
<Route path="company/settings/instance/environments/new" element={<CompanyEnvironments mode="create" />} />
|
|
<Route path="company/settings/instance/environments/:environmentId/edit" element={<CompanyEnvironments mode="edit" />} />
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.access" />}>
|
|
<Route path="company/settings/instance/access" element={<InstanceAccess />} />
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.experimental" />}>
|
|
<Route path="company/settings/instance/experimental" element={<InstanceExperimentalSettings />} />
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.plugins" />}>
|
|
<Route path="company/settings/instance/plugins" element={<PluginManager />} />
|
|
<Route path="company/settings/instance/plugins/:pluginId" element={<PluginSettings />} />
|
|
</Route>
|
|
<Route element={<HiddenSettingsPageGate pageKey="instance.adapters" />}>
|
|
<Route path="company/settings/instance/adapters" element={<AdapterManager />} />
|
|
</Route>
|
|
<Route path="company/settings/:settingsRoutePath/*" element={<CompanySettingsPluginPage />} />
|
|
<Route path="skills/sources" element={<SkillSources />} />
|
|
<Route path="skills/sources/:sourceId" element={<SkillSources />} />
|
|
<Route path="skills/studio" element={streamlinedUiEnabled ? <CompanySkills collectionView="authored" /> : <SkillStudio />} />
|
|
<Route path="skills/studio/new" element={<SkillStudio />} />
|
|
<Route path="skills/studio/:skillId" element={<SkillStudio />} />
|
|
<Route path="skills/:skillId/studio" element={<LegacySkillStudioRedirect />} />
|
|
<Route
|
|
path="skills/*"
|
|
element={streamlinedUiEnabled ? <CompanySkills /> : <ProductionSurface><ProductionCompanySkills /></ProductionSurface>}
|
|
/>
|
|
<Route path="settings" element={<LegacySettingsRedirect />} />
|
|
<Route path="settings/*" element={<LegacySettingsRedirect />} />
|
|
<Route path="plugins/:pluginId" element={<PluginPage />} />
|
|
<Route
|
|
path="org"
|
|
element={streamlinedUiEnabled ? <Navigate to="/agents/all" replace /> : <ProductionSurface><ProductionOrgChart /></ProductionSurface>}
|
|
/>
|
|
<Route path="agents" element={<Navigate to="/agents/all" replace />} />
|
|
{AGENT_FILTER_TABS.map((tab) => (
|
|
<Route
|
|
key={tab}
|
|
path={`agents/${tab}`}
|
|
element={streamlinedUiEnabled ? <Agents /> : <ProductionSurface><ProductionAgents /></ProductionSurface>}
|
|
/>
|
|
))}
|
|
<Route path="agents/new" element={<NewAgent />} />
|
|
<Route path="agents/:agentId" element={<AgentDetail />} />
|
|
<Route path="agents/:agentId/:tab" element={<AgentDetail />} />
|
|
<Route path="agents/:agentId/runs/:runId" element={<AgentDetail />} />
|
|
<Route path="projects" element={<Projects />} />
|
|
<Route path="projects/:projectId" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/overview" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/issues" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/issues/:filter" element={<ProjectDetail />} />
|
|
<Route element={<IsolatedWorkspacesRouteGate />}>
|
|
<Route path="projects/:projectId/workspaces/:workspaceId" element={<ProjectWorkspaceDetail />} />
|
|
</Route>
|
|
<Route path="projects/:projectId/workspaces" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/configuration" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/budget" element={<ProjectDetail />} />
|
|
<Route element={<IsolatedWorkspacesRouteGate />}>
|
|
<Route path="workspaces" element={<Workspaces />} />
|
|
</Route>
|
|
<Route path="issues" element={<Issues />} />
|
|
<Route path="tasks" element={<Navigate to="/issues" replace />} />
|
|
<Route path="search" element={<Search />} />
|
|
{mergedTasks ? (
|
|
<>
|
|
{/* Combined Inbox + Task List: the status presets are real views, not aliases of /issues. */}
|
|
<Route path="issues/all" element={<TaskViewRedirect view="all" />} />
|
|
<Route path="issues/active" element={<TaskViewRedirect view="active" />} />
|
|
<Route path="issues/backlog" element={<TaskViewRedirect view="backlog" />} />
|
|
<Route path="issues/done" element={<TaskViewRedirect view="done" />} />
|
|
<Route path="issues/recent" element={<TaskViewRedirect view="recent" />} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Route path="issues/all" element={<Navigate to="/issues" replace />} />
|
|
<Route path="issues/active" element={<Navigate to="/issues" replace />} />
|
|
<Route path="issues/backlog" element={<Navigate to="/issues" replace />} />
|
|
<Route path="issues/done" element={<Navigate to="/issues" replace />} />
|
|
<Route path="issues/recent" element={<Navigate to="/issues" replace />} />
|
|
</>
|
|
)}
|
|
<Route path="chats" element={<AgentChats />} />
|
|
<Route path="chats/:agentRef" element={<AgentChat />} />
|
|
<Route path="issues/:issueId" element={<IssueDetail />} />
|
|
{import.meta.env.DEV ? (
|
|
<Route path="tests/perf/long-thread" element={<IssueChatLongThreadPerf />} />
|
|
) : null}
|
|
<Route path="routines" element={streamlinedUiEnabled ? <Routines /> : <ProductionSurface><ProductionRoutines /></ProductionSurface>} />
|
|
<Route
|
|
path="cases"
|
|
element={<CasesExperimentalGate><Cases /></CasesExperimentalGate>}
|
|
/>
|
|
<Route
|
|
path="cases/:caseIdentifier"
|
|
element={<CasesExperimentalGate><CaseDetail /></CasesExperimentalGate>}
|
|
/>
|
|
<Route
|
|
path="status"
|
|
element={<StatusCardsExperimentalGate><StatusCards /></StatusCardsExperimentalGate>}
|
|
/>
|
|
<Route
|
|
path="status/:cardId"
|
|
element={<StatusCardsExperimentalGate><StatusCards /></StatusCardsExperimentalGate>}
|
|
/>
|
|
{/* Back-compat: the board lived at /status-cards before PAP-15223. */}
|
|
<Route path="status-cards" element={<StatusCardsLegacyRedirect />} />
|
|
<Route path="status-cards/:cardId" element={<StatusCardsLegacyRedirect />} />
|
|
<Route path="routines/:routineId" element={streamlinedUiEnabled ? <RoutineDetail /> : <ProductionSurface><ProductionRoutineDetail /></ProductionSurface>} />
|
|
<Route path="routines/:routineId/:section" element={streamlinedUiEnabled ? <RoutineDetail /> : <ProductionSurface><ProductionRoutineDetail /></ProductionSurface>} />
|
|
<Route element={<IsolatedWorkspacesRouteGate />}>
|
|
<Route element={<ExecutionWorkspaceCompanyGate />}>
|
|
<Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId/services" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId/configuration" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId/runtime-logs" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId/issues" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId/routines" element={<ExecutionWorkspaceDetail />} />
|
|
</Route>
|
|
</Route>
|
|
<Route path="goals" element={<Goals />} />
|
|
<Route path="goals/:goalId" element={<GoalDetail />} />
|
|
<Route path="artifacts" element={<Artifacts />} />
|
|
<Route path="approvals" element={<Navigate to="/approvals/pending" replace />} />
|
|
<Route path="approvals/pending" element={<Approvals />} />
|
|
<Route path="approvals/all" element={<Approvals />} />
|
|
<Route path="approvals/:approvalId" element={<ApprovalDetail />} />
|
|
<Route path="activity" element={streamlinedUiEnabled ? <CompanyActivity /> : <ProductionSurface><ProductionCompanyActivity /></ProductionSurface>} />
|
|
<Route path="activity/commentary" element={<AuditHub section="commentary" />} />
|
|
<Route path="activity/runs" element={<AuditHub section="runs" />} />
|
|
<Route path="activity/costs" element={<AuditHub section="costs" />} />
|
|
<Route path="activity/budgets" element={<AuditHub section="budgets" />} />
|
|
<Route path="activity/timeline" element={<AuditHub section="timeline" />} />
|
|
{streamlinedUiEnabled ? (
|
|
<>
|
|
<Route path="audit" element={<AuditCompatibilityRedirect to="/activity" forceAgentMode />} />
|
|
<Route path="audit/activity" element={<AuditCompatibilityRedirect to="/activity" />} />
|
|
<Route path="audit/runs" element={<AuditCompatibilityRedirect to="/activity/runs" />} />
|
|
<Route path="audit/costs" element={<AuditCompatibilityRedirect to="/activity/costs" />} />
|
|
<Route path="audit/budgets" element={<AuditCompatibilityRedirect to="/activity/budgets" />} />
|
|
<Route path="audit/timeline" element={<AuditCompatibilityRedirect to="/activity/timeline" />} />
|
|
<Route path="runs" element={<AuditCompatibilityRedirect to="/activity/runs" />} />
|
|
<Route path="costs" element={<AuditCompatibilityRedirect to="/activity/costs" />} />
|
|
<Route path="budgets" element={<AuditCompatibilityRedirect to="/activity/budgets" />} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Route path="costs" element={<Costs />} />
|
|
<Route path="audit" element={<Navigate to="/activity?mode=agents" replace />} />
|
|
</>
|
|
)}
|
|
{/* Conference Room Chat surfaces (PAP-136/PAP-137): routes stay
|
|
registered but redirect to the company home while the experimental
|
|
flag is off. The board-level `artifacts` mount below is the new
|
|
conference-room one; the master-level mount above it still serves
|
|
`/artifacts` in both modes. */}
|
|
<Route element={<ConferenceRoomChatGate />}>
|
|
<Route path="board-chat" element={<BoardChat />} />
|
|
<Route path="artifacts" element={<Artifacts />} />
|
|
</Route>
|
|
{/* Task chat dev harness — dev builds only. */}
|
|
{import.meta.env.DEV ? (
|
|
<Route path="dev/task-chat-lab" element={<TaskChatLab />} />
|
|
) : null}
|
|
<Route path="decisions" element={<WhatNeedsMe />} />
|
|
<Route path="decisions/queues/:key" element={<DecisionQueuePage />} />
|
|
{/* Combined Inbox + Task List: Inbox is a view inside Tasks. Every /inbox/* URL still
|
|
resolves — it redirects into the matching view — and with the flag off
|
|
(or in the legacy shell) the standalone pages stay. /inbox/requests
|
|
stays its own page either way; Settings → Members links straight to it. */}
|
|
{mergedTasks ? (
|
|
<>
|
|
<Route path="inbox" element={<InboxRootRedirect />} />
|
|
<Route path="inbox/mine" element={<TaskViewRedirect view="mine" />} />
|
|
<Route path="inbox/recent" element={<TaskViewRedirect view="recent" />} />
|
|
<Route path="inbox/unread" element={<TaskViewRedirect view="unread" />} />
|
|
<Route path="inbox/blocked" element={<TaskViewRedirect view="blocked" />} />
|
|
<Route path="inbox/all" element={<TaskViewRedirect view="everything" />} />
|
|
<Route path="inbox/new" element={<TaskViewRedirect view="mine" />} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Route path="inbox" element={<InboxRootRedirect />} />
|
|
<Route path="inbox/mine" element={<Inbox />} />
|
|
<Route path="inbox/recent" element={<Inbox />} />
|
|
<Route path="inbox/unread" element={<Inbox />} />
|
|
<Route path="inbox/blocked" element={<Inbox />} />
|
|
<Route path="inbox/all" element={<Inbox />} />
|
|
<Route path="inbox/new" element={<Navigate to="/inbox/mine" replace />} />
|
|
</>
|
|
)}
|
|
<Route path="inbox/requests" element={<JoinRequestQueue />} />
|
|
<Route path="u/:userSlug" element={<UserProfile />} />
|
|
<Route path="design-guide" element={<DesignGuide />} />
|
|
<Route path="instance/settings/adapters" element={<AdapterManager />} />
|
|
<Route path=":pluginRoutePath/*" element={<PluginPage />} />
|
|
<Route path="*" element={<NotFoundPage scope="board" />} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AppsConnectEntryRoute({
|
|
credentialSource = "paperclip_vault",
|
|
}: {
|
|
credentialSource?: ToolConnectionCredentialSource;
|
|
} = {}) {
|
|
const location = useLocation();
|
|
const searchParams = new URLSearchParams(location.search);
|
|
const { enabled: chatConnectorsEnabled, githubEnabled: githubReviewBotsEnabled } = useChatConnectorsEnabled();
|
|
return canEnterAppsConnect(searchParams, { chatConnectorsEnabled, githubReviewBotsEnabled })
|
|
? <AppsConnect credentialSource={credentialSource} />
|
|
: <Navigate to="/apps" replace />;
|
|
}
|
|
|
|
function InboxRootRedirect() {
|
|
const { enabled: streamlinedUiEnabled } = useStreamlinedUiEnabled();
|
|
const { enabled: combinedInboxTasksEnabled } = useCombinedInboxTasksEnabled();
|
|
return streamlinedUiEnabled && combinedInboxTasksEnabled
|
|
? <TaskViewRedirect view={taskViewForInboxTab(loadLastInboxTab())} />
|
|
: <Navigate to={`/inbox/${loadLastInboxTab()}`} replace />;
|
|
}
|
|
|
|
/** Sends a retired Inbox/Tasks URL to its view on the merged Tasks surface. */
|
|
function TaskViewRedirect({ view }: { view: TaskViewKey }) {
|
|
const location = useLocation();
|
|
const params = new URLSearchParams(location.search);
|
|
params.set(TASK_VIEW_PARAM, view);
|
|
return <Navigate to={`/issues?${params.toString()}${location.hash}`} replace />;
|
|
}
|
|
|
|
function LegacySkillStudioRedirect() {
|
|
const location = useLocation();
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
const { companyPrefix, skillId } = useParams<{ companyPrefix?: string; skillId?: string }>();
|
|
|
|
if (loading) return null;
|
|
|
|
const targetCompany =
|
|
(companyPrefix
|
|
? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase())
|
|
: null) ??
|
|
selectedCompany ??
|
|
companies[0] ??
|
|
null;
|
|
|
|
if (!targetCompany || !skillId) {
|
|
return <Navigate to="/skills/studio" replace />;
|
|
}
|
|
|
|
return (
|
|
<Navigate
|
|
to={`/${targetCompany.issuePrefix}/skills/studio/${encodeURIComponent(skillId)}${location.search}${location.hash}`}
|
|
replace
|
|
/>
|
|
);
|
|
}
|
|
|
|
function LegacySettingsRedirect() {
|
|
const location = useLocation();
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
const { companyPrefix } = useParams<{ companyPrefix?: string }>();
|
|
const { hidden: hiddenSettings } = useHiddenSettings();
|
|
|
|
if (loading) {
|
|
return <PaperclipLoading />;
|
|
}
|
|
|
|
const targetCompany =
|
|
(companyPrefix
|
|
? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase())
|
|
: null) ??
|
|
selectedCompany ??
|
|
companies[0] ??
|
|
null;
|
|
|
|
if (!targetCompany) {
|
|
if (
|
|
shouldRedirectCompanylessRouteToOnboarding({
|
|
pathname: location.pathname,
|
|
hasCompanies: false,
|
|
})
|
|
) {
|
|
return <Navigate to="/onboarding" replace />;
|
|
}
|
|
return <NoCompaniesStartPage />;
|
|
}
|
|
|
|
const normalizedPath = filterHiddenInstanceSettingsPath(
|
|
normalizeRememberedInstanceSettingsPath(
|
|
`${location.pathname}${location.search}${location.hash}`,
|
|
),
|
|
hiddenSettings,
|
|
);
|
|
|
|
return (
|
|
<Navigate
|
|
to={`/${targetCompany.issuePrefix}${normalizedPath}`}
|
|
replace
|
|
/>
|
|
);
|
|
}
|
|
|
|
function LegacyToolsSettingsRedirect() {
|
|
const { tab } = useParams<{ tab?: string }>();
|
|
return <Navigate to={legacyToolsRedirectTarget(tab)} replace />;
|
|
}
|
|
|
|
// The developer "Tools" surface moved under the Apps "Advanced setup" door
|
|
// (PAP-10862). `/tools` and `/tools/:tab` redirect to their new home.
|
|
function LegacyToolsRedirect() {
|
|
const { tab } = useParams<{ tab?: string }>();
|
|
return <Navigate to={legacyToolsRedirectTarget(tab)} replace />;
|
|
}
|
|
|
|
function legacyToolsRedirectTarget(tab?: string) {
|
|
if (!tab) return "/apps/advanced/profiles";
|
|
if (tab === "applications" || tab === "connections" || tab === "overview" || tab === "examples") return "/apps";
|
|
if (tab === "runtime" || tab === "audit") return "/apps";
|
|
if (tab === "policies") return "/apps/advanced/profiles";
|
|
return `/apps/advanced/${tab}`;
|
|
}
|
|
|
|
export function OnboardingRoutePage() {
|
|
const { companies } = useCompany();
|
|
const { openOnboarding } = useDialogActions();
|
|
const { t } = useTranslation();
|
|
const cloudInstance = useCloudInstance();
|
|
const createStackUrl = cloudStackCreateUrl(cloudInstance?.cloudBaseUrl ?? null);
|
|
const { onboardingOpen, onboardingRouteDismissed } = useDialogState();
|
|
const { companyPrefix } = useParams<{ companyPrefix?: string }>();
|
|
const matchedCompany = companyPrefix
|
|
? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase()) ?? null
|
|
: null;
|
|
// The OnboardingWizard auto-opens on this route (and can also be opened
|
|
// explicitly). While it is showing it covers the whole screen, so the
|
|
// launcher card below must not stay interactive behind it — otherwise users
|
|
// can tab/click through to the form behind the modal (PAP-52). The launcher
|
|
// only needs to render as a re-entry point once the wizard is dismissed.
|
|
if (isOnboardingWizardActive({ onboardingOpen, routeDismissed: onboardingRouteDismissed })) {
|
|
return null;
|
|
}
|
|
|
|
const title = matchedCompany
|
|
? `Add another agent to ${matchedCompany.name}`
|
|
: companies.length > 0
|
|
? "Create another organization"
|
|
: "Create your first organization";
|
|
const description = matchedCompany
|
|
? "Run onboarding again to add an agent and a starter task for this organization."
|
|
: companies.length > 0
|
|
? "Run onboarding again to create another organization and seed its first agent."
|
|
: "Get started by creating an organization and your first agent.";
|
|
|
|
return (
|
|
<div className="mx-auto max-w-xl py-10">
|
|
<div className="rounded-lg border border-border bg-card p-6">
|
|
<h1 className="text-xl font-semibold">{title}</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">{description}</p>
|
|
<div className="mt-4">
|
|
{/* On a managed stack whose Cloud origin is unknown there is nowhere
|
|
to send this click: creation lives on Cloud, and in-app creation
|
|
is a 403 floor. A button that does nothing is worse than none, so
|
|
say why instead of rendering an inert control. */}
|
|
{!matchedCompany && cloudInstance && !createStackUrl ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("app.cloudCreateUnavailable", {
|
|
defaultValue:
|
|
"Organizations are created in Paperclip Cloud. This instance can't reach it right now — try again from your Cloud portfolio.",
|
|
})}
|
|
</p>
|
|
) : (
|
|
<Button
|
|
onClick={() =>
|
|
matchedCompany
|
|
? openOnboarding({
|
|
// "Add another agent" to a company that already has its
|
|
// mission must not stop to ask for the mission again. An
|
|
// unsettled or failed lookup reads as "no mission" and
|
|
// costs the step, which the customer can pass - and the
|
|
// mission step now updates the existing goal rather than
|
|
// adding a second one.
|
|
initialStep: onboardingStepForCompany(),
|
|
companyId: matchedCompany.id,
|
|
})
|
|
: cloudInstance && createStackUrl
|
|
? navigateTopLevel(createStackUrl)
|
|
: openOnboarding()
|
|
}
|
|
>
|
|
{matchedCompany ? "Add Agent" : "Start Onboarding"}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CompanyRootRedirect() {
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
const location = useLocation();
|
|
|
|
if (loading) {
|
|
return <PaperclipLoading />;
|
|
}
|
|
|
|
const targetCompany = selectedCompany ?? companies[0] ?? null;
|
|
if (!targetCompany) {
|
|
if (
|
|
shouldRedirectCompanylessRouteToOnboarding({
|
|
pathname: location.pathname,
|
|
hasCompanies: false,
|
|
})
|
|
) {
|
|
return <Navigate to="/onboarding" replace />;
|
|
}
|
|
return <NoCompaniesStartPage />;
|
|
}
|
|
|
|
return <Navigate to={`/${targetCompany.issuePrefix}/dashboard`} replace />;
|
|
}
|
|
|
|
function StatusCardsLegacyRedirect() {
|
|
const { cardId } = useParams<{ cardId?: string }>();
|
|
const prefix = useActiveCompanyPrefix();
|
|
const base = prefix ? `/${prefix}` : "";
|
|
return <Navigate to={`${base}/status${cardId ? `/${cardId}` : ""}`} replace />;
|
|
}
|
|
|
|
function AuditCompatibilityRedirect({
|
|
to,
|
|
forceAgentMode = false,
|
|
}: {
|
|
to: string;
|
|
forceAgentMode?: boolean;
|
|
}) {
|
|
const location = useLocation();
|
|
const searchParams = new URLSearchParams(location.search);
|
|
if (forceAgentMode) searchParams.set("mode", "agents");
|
|
const search = searchParams.toString();
|
|
return <Navigate to={`${to}${search ? `?${search}` : ""}${location.hash}`} replace />;
|
|
}
|
|
|
|
function UnprefixedBoardRedirect() {
|
|
const location = useLocation();
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
|
|
if (loading) {
|
|
return <PaperclipLoading />;
|
|
}
|
|
|
|
const targetCompany = selectedCompany ?? companies[0] ?? null;
|
|
if (!targetCompany) {
|
|
if (
|
|
shouldRedirectCompanylessRouteToOnboarding({
|
|
pathname: location.pathname,
|
|
hasCompanies: false,
|
|
})
|
|
) {
|
|
return <Navigate to="/onboarding" replace />;
|
|
}
|
|
return <NoCompaniesStartPage />;
|
|
}
|
|
|
|
return (
|
|
<Navigate
|
|
to={`/${targetCompany.issuePrefix}${location.pathname}${location.search}${location.hash}`}
|
|
replace
|
|
/>
|
|
);
|
|
}
|
|
|
|
function NoCompaniesStartPage() {
|
|
const { openOnboarding } = useDialogActions();
|
|
const { t } = useTranslation();
|
|
// A managed stack with no visible companies is a loading or error state, not
|
|
// an invitation to create one in-app — creation lives on Cloud (403 floor).
|
|
const cloudInstance = useCloudInstance();
|
|
const createStackUrl = cloudStackCreateUrl(cloudInstance?.cloudBaseUrl ?? null);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-xl py-10">
|
|
<div className="rounded-lg border border-border bg-card p-6">
|
|
<h1 className="text-xl font-semibold">
|
|
{t("app.noCompanies.title", { defaultValue: "Create your first organization" })}
|
|
</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{t("app.noCompanies.description", { defaultValue: "Get started by creating an organization." })}
|
|
</p>
|
|
<div className="mt-4">
|
|
{/* Same as the onboarding route: no Cloud origin means nowhere to
|
|
send the click, and in-app creation is a 403 floor here. */}
|
|
{cloudInstance && !createStackUrl ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("app.cloudCreateUnavailable", {
|
|
defaultValue:
|
|
"Organizations are created in Paperclip Cloud. This instance can't reach it right now — try again from your Cloud portfolio.",
|
|
})}
|
|
</p>
|
|
) : (
|
|
<Button
|
|
onClick={() =>
|
|
cloudInstance && createStackUrl
|
|
? navigateTopLevel(createStackUrl)
|
|
: openOnboarding()
|
|
}
|
|
>
|
|
{t("app.noCompanies.newCompany", { defaultValue: "New Organization" })}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<>
|
|
<Suspense fallback={<PaperclipLoading />}><Routes>
|
|
<Route path="oauth-handoff" element={<PaperclipCloudOAuthHandoffPage />} />
|
|
<Route path="auth" element={<AuthPage />} />
|
|
<Route path="board-claim/:token" element={<BoardClaimPage />} />
|
|
<Route path="mcp-connect/:id" element={<McpConnectPage />} />
|
|
<Route path="dot-connect/:id" element={<McpConnectPage agentPairingOnly />} />
|
|
<Route path="mcp-device" element={<McpDevicePage />} />
|
|
<Route path="assistant-connections" element={<AssistantConnectionsPage />} />
|
|
<Route path="cli-auth/:id" element={<CliAuthPage />} />
|
|
<Route path="invite/:token" element={<InviteLandingPage />} />
|
|
<Route element={<CloudAccessGate allowMembershipRequest />}>
|
|
<Route element={<ShellConfigurationGate loaded={streamlinedUiLoaded} />}>
|
|
{/* The identity APIs enforce the chat rollout flag. Nonmembers cannot
|
|
read experimental settings, but a private invitation may request membership. */}
|
|
<Route path="chat-identity/confirm" element={<ChatIdentityConfirm />} />
|
|
</Route>
|
|
</Route>
|
|
<Route path="tests/perf/long-thread" element={<IssueChatLongThreadPerf />} />
|
|
<Route path="ux-lab/bootstrap-setup" element={<BootstrapSetupUxLab />} />
|
|
<Route path="ux-lab/responsible-user-denial" element={<ResponsibleUserDenialUxLab />} />
|
|
<Route path="ux-lab/cross-issue-collaboration" element={<CrossIssueCollaborationUxLab />} />
|
|
|
|
<Route element={<CloudAccessGate />}>
|
|
<Route element={<ShellConfigurationGate loaded={streamlinedUiLoaded} />}>
|
|
<Route index element={<CompanyRootRedirect />} />
|
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
|
<Route path="instance" element={<LegacySettingsRedirect />} />
|
|
<Route path="instance/settings" element={<LegacySettingsRedirect />} />
|
|
<Route path="instance/settings/*" element={<LegacySettingsRedirect />} />
|
|
<Route path="companies" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="issues" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="tasks" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="routines" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="routines/:routineId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="cases" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="cases/:caseIdentifier" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="status" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="status/:cardId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="status-cards" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="status-cards/:cardId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="artifacts" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="audit" element={<UnprefixedBoardRedirect />} />
|
|
{streamlinedUiEnabled ? (
|
|
<>
|
|
<Route path="audit/*" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="activity" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="activity/*" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="runs" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="costs" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="budgets" element={<UnprefixedBoardRedirect />} />
|
|
</>
|
|
) : null}
|
|
<Route path="decisions" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="u/:userSlug" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="skills/studio" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="skills/studio/new" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="skills/studio/:skillId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="skills/:skillId/studio" element={<LegacySkillStudioRedirect />} />
|
|
<Route path="skills/*" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="settings" element={<LegacySettingsRedirect />} />
|
|
<Route path="settings/*" element={<LegacySettingsRedirect />} />
|
|
<Route path="agents" element={<UnprefixedBoardRedirect />} />
|
|
{AGENT_FILTER_TABS.map((tab) => (
|
|
<Route key={tab} path={`agents/${tab}`} element={<UnprefixedBoardRedirect />} />
|
|
))}
|
|
<Route path="agents/new" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="agents/:agentId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="agents/:agentId/:tab" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="agents/:agentId/runs/:runId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/overview" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/issues" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/issues/:filter" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/workspaces" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/workspaces/:workspaceId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/configuration" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="workspaces" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId/services" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId/configuration" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId/runtime-logs" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId/issues" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path="execution-workspaces/:workspaceId/routines" element={<UnprefixedExecutionWorkspaceRedirect />} />
|
|
<Route path=":companyPrefix" element={streamlinedUiEnabled ? <Layout /> : <ProductionLayout />}>
|
|
{boardRoutes(streamlinedUiEnabled, combinedInboxTasksEnabled)}
|
|
</Route>
|
|
<Route path="*" element={<NotFoundPage scope="global" />} />
|
|
</Route>
|
|
</Route>
|
|
</Routes></Suspense>
|
|
<OnboardingWizardVariant />
|
|
</>
|
|
);
|
|
}
|