Files
PaperClipAI/ui/src/App.tsx
T
7b9334cd10 Draft: Build agent-ready design proposal system (#16875)
## Thinking Path

> - Paperclip helps people manage AI agents and their work.
> - People need consistent UI patterns to review and control that work.
> - The current board uses related layouts and controls with different
spacing, type, and behavior.
> - That drift makes it hard for a designer or an agent to build a new
page from a reliable reference.
> - Storybook can show the shared patterns and the states they need to
support.
> - This pull request adds design proposals, a local sandbox, and
reusable UI controls so people can compare the patterns in context.
> - The benefit is a clearer design system that agents can use to build
consistent UI.

## Linked Issues or Issue Description

**Subsystem affected**

`ui/` — React board UI and Storybook.

**Problem or motivation**

Board pages repeat visual and interaction decisions. Storybook did not
provide a complete reference for task views, conversation states,
typography, toolbars, tabs, and light/dark colors. People could not
compare a proposed pattern with the running board in one place.

**Proposed solution**

Add a staged Design Proposals catalog with foundations, components,
layouts, and page specimens. Add an opt-in sandbox. Reuse production
components where possible. Include synthetic conversation states and
shared controls so reviewers can compare and refine them.

**Alternatives considered**

Separate static mockups would not show keyboard behavior, responsive
layout, or real component states. Rebuilding each page only in Storybook
would allow the reference to drift from the board.

**Roadmap alignment**

This improves existing board UI and Skills Manager surfaces. It does not
add a new control-plane capability.

## What Changed

- Added dark and light color references, typography and conversation
specimens, and component stories for buttons, tabs, toolbars, sidebar,
popovers, activity, and task lists.
- Added a local design sandbox with synthetic task conversation playback
and representative states.
- Shared collection toolbars and navigation patterns across task, agent,
project, routine, skill, connector, and artifact pages.
- Added the streamlined Skills tabs and a My Skills collection that uses
the shared skill cards.
- Restored saved-thread access during synthetic playback, kept connector
searchbox semantics, and updated reproduction checks after moving trial
stories.
- Documented the proposed patterns and added focused UI, catalog, and
browser checks.

## Verification

- `pnpm check:token-gates`, `node scripts/check-maps.mjs`, and `node
scripts/storybook-catalog.mjs --check` passed.
- Full workspace `pnpm -r typecheck` and `pnpm build` passed after
merging master. After the review fixes, focused UI typecheck, `pnpm
build-storybook`, 23 Skills Sources tests, and all 15 Storybook
typography browser tests passed.
- Focused task-thread and system-notice suites passed: 251 tests.
Connector Browse passed 84 tests; the connector, attachment, recovery,
and Storybook flyout browser journeys passed locally.
- A local full Vitest run hit one intermittent chat-channels integration
failure; that test passed in isolation. GitHub CI
[39347996059](https://github.com/paperclipai/paperclip/actions/runs/39347996059)
passed on the exact latest commit: 55 successful checks and two skipped
draft-only Storybook jobs.
- Greptile reviewed the exact latest commit at 5/5 with no new comments
or open review threads. GitHub reports the branch as cleanly mergeable.

## Risks

- This PR changes 206 files and exceeds the repository's 100-file review
target. Review by commit and consider a scoped split before merge.
- Design Proposals are staged references. Fixture interactions do not
prove API behavior, permissions, or provider execution.
- UI changes to shared controls may affect pages outside the proposal
sandbox. Focused browser checks and the full CI matrix passed.

## Model Used

- OpenAI Codex, GPT-6 family. The exact runtime model ID and context
window are not exposed in this session. The model used reasoning, code
execution, browser inspection, and local tests. Earlier branch commits
were also AI-assisted in this Codex conversation.

## 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 available in this session)
- [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 where applicable
- [x] I have either linked existing issues or described the issue in-PR
following the relevant issue template
- [x] I have not referenced internal or instance-local Paperclip issues
or links
- [x] My branch name describes the change and contains no internal
ticket id
- [x] I have run focused 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 risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Scott Tong <scott@scotts-mbp-m5-max.local>
Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-10-19 17:45:26 -07:00

867 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 })));
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>;
}
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 />
</>
);
}