4d667caa1b
Phase 11 and Phase 15 demoted dashboard, goals, costs, activity, org, inbox, convert, approvals, and routines to per-project tabs, settings pages, or folded them into the Studio / Assistant surfaces. Phase 16b deletes the top-level route definitions and the now-orphaned page components. /issues and /agents top-level lists become Navigate redirects to /projects for one release cycle (issue and agent detail pages remain). /convert redirects to the Studio Convert workshop. boardRoutes now lands on /assistant (not /dashboard). BOARD_ROUTE_ ROOTS is pruned to only the roots that still render pages. CommandPalette and CompanyRail quick-links are updated to match. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
384 lines
19 KiB
TypeScript
384 lines
19 KiB
TypeScript
import { Navigate, Outlet, Route, Routes, useLocation, useParams } from "@/lib/router";
|
|
import { VOCAB } from "@paperclipai/branding";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { lazy, Suspense, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Layout } from "./components/Layout";
|
|
import { OnboardingWizard } from "./components/OnboardingWizard";
|
|
import { authApi } from "./api/auth";
|
|
import { healthApi } from "./api/health";
|
|
import { queryKeys } from "./lib/queryKeys";
|
|
import { useCompany } from "./context/CompanyContext";
|
|
import { useDialog } from "./context/DialogContext";
|
|
import { useNexusMode } from "./hooks/useNexusMode";
|
|
import { shouldRedirectCompanylessRouteToOnboarding } from "./lib/onboarding-route";
|
|
|
|
const AgentDetail = lazy(() => import("./pages/AgentDetail").then(m => ({ default: m.AgentDetail })));
|
|
const Projects = lazy(() => import("./pages/Projects").then(m => ({ default: m.Projects })));
|
|
const ProjectDetail = lazy(() => import("./pages/ProjectDetail").then(m => ({ default: m.ProjectDetail })));
|
|
const IssueDetail = lazy(() => import("./pages/IssueDetail").then(m => ({ default: m.IssueDetail })));
|
|
const ExecutionWorkspaceDetail = lazy(() => import("./pages/ExecutionWorkspaceDetail").then(m => ({ default: m.ExecutionWorkspaceDetail })));
|
|
const CompanySettings = lazy(() => import("./pages/CompanySettings").then(m => ({ default: m.CompanySettings })));
|
|
const CompanySkills = lazy(() => import("./pages/CompanySkills").then(m => ({ default: m.CompanySkills })));
|
|
const CompanyExport = lazy(() => import("./pages/CompanyExport").then(m => ({ default: m.CompanyExport })));
|
|
const CompanyImport = lazy(() => import("./pages/CompanyImport").then(m => ({ default: m.CompanyImport })));
|
|
const DesignGuide = lazy(() => import("./pages/DesignGuide").then(m => ({ default: m.DesignGuide })));
|
|
const InstanceGeneralSettings = lazy(() => import("./pages/InstanceGeneralSettings").then(m => ({ default: m.InstanceGeneralSettings })));
|
|
const PluginManager = lazy(() => import("./pages/PluginManager").then(m => ({ default: m.PluginManager })));
|
|
const PluginSettings = lazy(() => import("./pages/PluginSettings").then(m => ({ default: m.PluginSettings })));
|
|
const PluginPage = lazy(() => import("./pages/PluginPage").then(m => ({ default: m.PluginPage })));
|
|
const RunTranscriptUxLab = lazy(() => import("./pages/RunTranscriptUxLab").then(m => ({ default: m.RunTranscriptUxLab })));
|
|
const NewAgent = lazy(() => import("./pages/NewAgent").then(m => ({ default: m.NewAgent })));
|
|
const AuthPage = lazy(() => import("./pages/Auth").then(m => ({ default: m.AuthPage })));
|
|
const BoardClaimPage = lazy(() => import("./pages/BoardClaim").then(m => ({ default: m.BoardClaimPage })));
|
|
const CliAuthPage = lazy(() => import("./pages/CliAuth").then(m => ({ default: m.CliAuthPage })));
|
|
const InviteLandingPage = lazy(() => import("./pages/InviteLanding").then(m => ({ default: m.InviteLandingPage })));
|
|
const NotFoundPage = lazy(() => import("./pages/NotFound").then(m => ({ default: m.NotFoundPage })));
|
|
const PersonalAssistant = lazy(() => import("./pages/PersonalAssistant").then(m => ({ default: m.PersonalAssistant })));
|
|
const ContentStudio = lazy(() => import("./pages/ContentStudio").then(m => ({ default: m.ContentStudio })));
|
|
|
|
function BootstrapPendingPage({
|
|
hasActiveInvite = false,
|
|
invitePath,
|
|
}: {
|
|
hasActiveInvite?: boolean;
|
|
invitePath?: string;
|
|
}) {
|
|
// [nexus] Zero-terminal first boot: the server auto-generates a
|
|
// bootstrap_ceo invite on startup when no admin exists and exposes its
|
|
// relative path via /api/health. Redirect straight to /invite/{token}
|
|
// so the first user never sees a CLI command.
|
|
useEffect(() => {
|
|
if (invitePath) {
|
|
window.location.replace(invitePath);
|
|
}
|
|
}, [invitePath]);
|
|
|
|
if (invitePath) {
|
|
return (
|
|
<div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">
|
|
Setting up instance — redirecting to admin account creation…
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Fallback for headless/SSH-only deployments where the server couldn't
|
|
// auto-generate an invite (e.g. startup error). The CLI command still
|
|
// works in that case.
|
|
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">Instance setup required</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{hasActiveInvite
|
|
? `No instance admin exists yet. A bootstrap invite is already active. Check your ${VOCAB.appName} startup logs for the first admin invite URL, or run this command to rotate it:`
|
|
: `No instance admin exists yet. Run this command in your ${VOCAB.appName} environment to generate the first admin invite URL:`}
|
|
</p>
|
|
<pre className="mt-4 overflow-x-auto rounded-md border border-border bg-muted/30 p-3 text-xs">
|
|
{`pnpm paperclipai auth bootstrap-ceo`}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CloudAccessGate() {
|
|
const location = useLocation();
|
|
const healthQuery = useQuery({
|
|
queryKey: queryKeys.health,
|
|
queryFn: () => healthApi.get(),
|
|
retry: false,
|
|
refetchInterval: (query) => {
|
|
const data = query.state.data as
|
|
| { deploymentMode?: "local_trusted" | "authenticated"; bootstrapStatus?: "ready" | "bootstrap_pending" }
|
|
| undefined;
|
|
return data?.deploymentMode === "authenticated" && data.bootstrapStatus === "bootstrap_pending"
|
|
? 2000
|
|
: false;
|
|
},
|
|
refetchIntervalInBackground: true,
|
|
});
|
|
|
|
const isAuthenticatedMode = healthQuery.data?.deploymentMode === "authenticated";
|
|
const sessionQuery = useQuery({
|
|
queryKey: queryKeys.auth.session,
|
|
queryFn: () => authApi.getSession(),
|
|
enabled: isAuthenticatedMode,
|
|
retry: false,
|
|
});
|
|
|
|
if (healthQuery.isLoading || (isAuthenticatedMode && sessionQuery.isLoading)) {
|
|
return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
|
|
}
|
|
|
|
if (healthQuery.error) {
|
|
return (
|
|
<div className="mx-auto max-w-xl py-10 text-sm text-destructive">
|
|
{healthQuery.error instanceof Error ? healthQuery.error.message : "Failed to load app state"}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isAuthenticatedMode && healthQuery.data?.bootstrapStatus === "bootstrap_pending") {
|
|
return (
|
|
<BootstrapPendingPage
|
|
hasActiveInvite={healthQuery.data.bootstrapInviteActive}
|
|
invitePath={healthQuery.data.bootstrapInvitePath}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (isAuthenticatedMode && !sessionQuery.data) {
|
|
const next = encodeURIComponent(`${location.pathname}${location.search}`);
|
|
return <Navigate to={`/auth?next=${next}`} replace />;
|
|
}
|
|
|
|
return <Outlet />;
|
|
}
|
|
|
|
function boardRoutes() {
|
|
return (
|
|
<>
|
|
<Route index element={<Navigate to="assistant" replace />} />
|
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
|
<Route path="company/settings" element={<CompanySettings />} />
|
|
<Route path="company/export/*" element={<CompanyExport />} />
|
|
<Route path="company/import" element={<CompanyImport />} />
|
|
<Route path="skills/*" element={<CompanySkills />} />
|
|
<Route path="settings" element={<LegacySettingsRedirect />} />
|
|
<Route path="settings/*" element={<LegacySettingsRedirect />} />
|
|
<Route path="plugins/:pluginId" element={<PluginPage />} />
|
|
{/* Phase 16b: /agents top-level redirects to /projects. Agent detail pages remain. */}
|
|
<Route path="agents" element={<Navigate to="/projects" replace />} />
|
|
<Route path="agents/all" element={<Navigate to="/projects" replace />} />
|
|
<Route path="agents/active" element={<Navigate to="/projects" replace />} />
|
|
<Route path="agents/paused" element={<Navigate to="/projects" replace />} />
|
|
<Route path="agents/error" element={<Navigate to="/projects" replace />} />
|
|
<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 path="projects/:projectId/agents" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/gates" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/costs" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/activity" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/org" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/configuration" element={<ProjectDetail />} />
|
|
<Route path="projects/:projectId/budget" element={<ProjectDetail />} />
|
|
{/* Phase 16b: /issues top-level redirects to /projects. Issue detail pages remain. */}
|
|
<Route path="issues" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/all" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/active" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/backlog" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/done" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/recent" element={<Navigate to="/projects" replace />} />
|
|
<Route path="issues/:issueId" element={<IssueDetail />} />
|
|
<Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
|
|
<Route path="assistant" element={<PersonalAssistant />} />
|
|
<Route path="assistant/:conversationId" element={<PersonalAssistant />} />
|
|
<Route path="content-studio" element={<ContentStudio />} />
|
|
<Route path="content-studio/:workshopSlug" element={<ContentStudio />} />
|
|
{/* Phase 16b: /convert folded into Studio Convert workshop. */}
|
|
<Route path="convert" element={<Navigate to="content-studio/convert" replace />} />
|
|
<Route path="convert/:sourceFormat" element={<Navigate to="content-studio/convert" replace />} />
|
|
<Route path="convert/:sourceFormat/:targetFormat" element={<Navigate to="content-studio/convert" replace />} />
|
|
<Route path="design-guide" element={<DesignGuide />} />
|
|
<Route path="tests/ux/runs" element={<RunTranscriptUxLab />} />
|
|
<Route path=":pluginRoutePath" element={<PluginPage />} />
|
|
<Route path="*" element={<NotFoundPage scope="board" />} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LegacySettingsRedirect() {
|
|
const location = useLocation();
|
|
return <Navigate to={`/instance/settings/general${location.search}${location.hash}`} replace />;
|
|
}
|
|
|
|
function OnboardingRoutePage() {
|
|
const { companies, loading: companiesLoading } = useCompany();
|
|
const { openOnboarding, onboardingOpen } = useDialog();
|
|
const { companyPrefix } = useParams<{ companyPrefix?: string }>();
|
|
const matchedCompany = companyPrefix
|
|
? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase()) ?? null
|
|
: null;
|
|
|
|
// [nexus] Auto-open the first-run wizard when a user lands on /onboarding
|
|
// with zero companies. CompanyRootRedirect navigates here on fresh DB, and
|
|
// without this effect the user would see the fallback "Start Onboarding"
|
|
// button and have to click it. The wizard itself already renders via its
|
|
// URL-based trigger (routeOnboardingOptions), but we also flip the dialog
|
|
// state so that post-wizard-creation navigation (which closes via
|
|
// closeOnboarding) works consistently. The button below is retained as a
|
|
// harmless fallback for the "add another" flows.
|
|
useEffect(() => {
|
|
if (companiesLoading) return;
|
|
if (onboardingOpen) return;
|
|
if (companies.length === 0 && !companyPrefix) {
|
|
openOnboarding();
|
|
}
|
|
}, [companies.length, companiesLoading, companyPrefix, onboardingOpen, openOnboarding]);
|
|
|
|
const title = matchedCompany
|
|
? `Add another agent to ${matchedCompany.name}`
|
|
: companies.length > 0
|
|
? "Create another workspace"
|
|
: "Create your first workspace";
|
|
const description = matchedCompany
|
|
? "Run onboarding again to add an agent and a starter task for this workspace."
|
|
: companies.length > 0
|
|
? "Run onboarding again to create another workspace and seed its first agent."
|
|
: "Get started by creating a workspace 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">
|
|
<Button
|
|
onClick={() =>
|
|
matchedCompany
|
|
? openOnboarding({ initialStep: 2, companyId: matchedCompany.id })
|
|
: openOnboarding()
|
|
}
|
|
>
|
|
{matchedCompany ? "Add Agent" : "Start Onboarding"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CompanyRootRedirect() {
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
const { mode, isLoading: nexusModeLoading } = useNexusMode();
|
|
const location = useLocation();
|
|
|
|
if (loading || nexusModeLoading) {
|
|
return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
|
|
}
|
|
|
|
const targetCompany = selectedCompany ?? companies[0] ?? null;
|
|
if (!targetCompany) {
|
|
if (
|
|
shouldRedirectCompanylessRouteToOnboarding({
|
|
pathname: location.pathname,
|
|
hasCompanies: false,
|
|
})
|
|
) {
|
|
return <Navigate to="/onboarding" replace />;
|
|
}
|
|
return <NoCompaniesStartPage />;
|
|
}
|
|
|
|
// [nexus] Nexus-first landing: in personal_ai / both (default) modes, land
|
|
// on the Personal Assistant. project_builder mode lands on projects. The
|
|
// legacy dashboard route is deleted in Phase 16b.
|
|
const landingPath = mode === "project_builder" ? "projects" : "assistant";
|
|
return <Navigate to={`/${targetCompany.issuePrefix}/${landingPath}`} replace />;
|
|
}
|
|
|
|
function UnprefixedBoardRedirect() {
|
|
const location = useLocation();
|
|
const { companies, selectedCompany, loading } = useCompany();
|
|
|
|
if (loading) {
|
|
return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
|
|
}
|
|
|
|
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() {
|
|
// [nexus] Single-workspace mode: there is no user-facing "create company"
|
|
// action. The onboarding wizard is the only path to initial workspace
|
|
// creation and is triggered separately. Show a minimal loading shim while
|
|
// that flow runs.
|
|
return (
|
|
<div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">
|
|
Setting up your workspace…
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function App() {
|
|
return (
|
|
<>
|
|
<Suspense fallback={<div className="flex items-center justify-center h-full"><Skeleton className="h-8 w-48" /></div>}>
|
|
<Routes>
|
|
<Route path="auth" element={<AuthPage />} />
|
|
<Route path="board-claim/:token" element={<BoardClaimPage />} />
|
|
<Route path="cli-auth/:id" element={<CliAuthPage />} />
|
|
<Route path="invite/:token" element={<InviteLandingPage />} />
|
|
|
|
<Route element={<CloudAccessGate />}>
|
|
<Route index element={<CompanyRootRedirect />} />
|
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
|
<Route path="instance" element={<Navigate to="/instance/settings/general" replace />} />
|
|
<Route path="instance/settings" element={<Layout />}>
|
|
<Route index element={<Navigate to="general" replace />} />
|
|
<Route path="general" element={<InstanceGeneralSettings />} />
|
|
{/* Phase 13: nested settings sub-routes collapse into /general. */}
|
|
<Route path="heartbeats" element={<Navigate to="/instance/settings/general" replace />} />
|
|
<Route path="experimental" element={<Navigate to="/instance/settings/general" replace />} />
|
|
{/* Plugins remain top-level pages owned by the plugin system, not settings sub-pages. */}
|
|
<Route path="plugins" element={<PluginManager />} />
|
|
<Route path="plugins/:pluginId" element={<PluginSettings />} />
|
|
</Route>
|
|
<Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="skills/*" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="settings" element={<LegacySettingsRedirect />} />
|
|
<Route path="settings/*" element={<LegacySettingsRedirect />} />
|
|
<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/agents" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/gates" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/costs" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/activity" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/org" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="projects/:projectId/configuration" element={<UnprefixedBoardRedirect />} />
|
|
<Route path="tests/ux/runs" element={<UnprefixedBoardRedirect />} />
|
|
<Route path=":companyPrefix" element={<Layout />}>
|
|
{boardRoutes()}
|
|
</Route>
|
|
<Route path="*" element={<NotFoundPage scope="global" />} />
|
|
</Route>
|
|
</Routes>
|
|
</Suspense>
|
|
<OnboardingWizard />
|
|
</>
|
|
);
|
|
}
|