mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
[codex] Add private browser first-admin claim flow (#6755)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - Fresh self-hosted deployments need an operator path before any invite exists. > - Umbrel installs are private LAN deployments, so a one-time browser claim is appropriate only when the deployment is private and unclaimed. > - Public deployments and installs with active invites must keep the existing invite-only model so admin creation is not exposed broadly. > - GitHub PR #2927 established the useful direction, but it needed to be adapted onto current `master` rather than merged as-is. > - This pull request adds that adapted private-only claim flow across server, UI, docs, and regression coverage. > - The benefit is that a fresh private Umbrel-style install can be claimed from the browser without weakening public deployment access. ## What Changed - Added a first-admin claim service and access route support for one-time admin claim eligibility on private unclaimed deployments. - Updated the bootstrap/access UI so eligible private installs show a setup claim path, while public and invited deployments keep invite-first behavior. - Added a bootstrap-pending setup UX lab covering claim, invite, public, and signed-in access states. - Updated deployment and local development docs for authenticated private/public behavior and the Umbrel-style claim path. - Added server and UI regression tests for private claim, public no-claim, active invite fallback, existing board/no-access flows, and health exposure reporting. - Stabilized PR handoff verification by serializing the aggregate server Vitest workspace run, forcing `NODE_ENV=test`, and relaxing the heartbeat batching test around legitimate recovery follow-up runs. ## Verification - `pnpm -r typecheck` - `pnpm build` - `pnpm vitest --run server/src/__tests__/heartbeat-comment-wake-batching.test.ts` - `pnpm vitest --run server/src/__tests__/health-dev-server-token.test.ts` - `pnpm test:run` - QA validation: PAP-10115 passed browser validation with screenshots for private fresh install claim, active invite versus claim conflict, public invite-only/claim-absent behavior, existing invite fallback, and normal board/no-access flows. - GitHub closeout: issue #2579 and PR #2927 were updated with the accepted direction: adapt the implementation, do not direct-merge #2927 as-is. ## Risks - The claim endpoint must remain private-only and one-time; a regression here could expose admin creation on public deployments. - Existing invite behavior must remain intact for public deployments and installs that already have an active invite. - The stable Vitest harness now serializes the aggregate server workspace group; this is slower, but it avoids DB-backed suite collisions under root workspace mode. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected - check the roadmap first. See `CONTRIBUTING.md`. > > ROADMAP.md checked: this is a scoped deployment bootstrap/access fix and does not duplicate a listed roadmap project. ## Model Used - OpenAI GPT-5 Codex via Paperclip `codex_local` for product engineering, implementation, and verification, with tool-enabled local code execution. Paperclip QA browser validation was performed in PAP-10115 by the assigned QA agent; exact adapter model metadata for that QA run is not exposed in this PR context. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
de36743583
commit
8da50dbcf8
19 changed files with 1058 additions and 80 deletions
|
|
@ -1,6 +1,7 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act, type ReactNode } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
|
@ -16,6 +17,7 @@ const mockAuthApi = vi.hoisted(() => ({
|
|||
|
||||
const mockAccessApi = vi.hoisted(() => ({
|
||||
getCurrentBoardAccess: vi.fn(),
|
||||
claimBootstrapAdmin: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("./api/health", () => ({
|
||||
|
|
@ -31,6 +33,7 @@ vi.mock("./api/access", () => ({
|
|||
}));
|
||||
|
||||
vi.mock("@/lib/router", () => ({
|
||||
Link: ({ to, children }: { to: string; children?: ReactNode }) => <a href={to}>{children}</a>,
|
||||
Navigate: ({ to }: { to: string }) => <div>Navigate:{to}</div>,
|
||||
Outlet: () => <div>Outlet content</div>,
|
||||
Route: ({ children }: { children?: ReactNode }) => <>{children}</>,
|
||||
|
|
@ -39,13 +42,39 @@ vi.mock("@/lib/router", () => ({
|
|||
useParams: () => ({}),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
async function flushReact() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
async function waitForText(container: HTMLElement, text: string) {
|
||||
for (let attempt = 0; attempt < 20; attempt += 1) {
|
||||
if (container.textContent?.includes(text)) return;
|
||||
await flushReact();
|
||||
}
|
||||
expect(container.textContent).toContain(text);
|
||||
}
|
||||
|
||||
function renderGate(container: HTMLElement) {
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CloudAccessGate />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
function unmountRoot(root: ReturnType<typeof createRoot>) {
|
||||
flushSync(() => {
|
||||
root.unmount();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -58,6 +87,7 @@ describe("CloudAccessGate", () => {
|
|||
mockHealthApi.get.mockResolvedValue({
|
||||
status: "ok",
|
||||
deploymentMode: "authenticated",
|
||||
deploymentExposure: "private",
|
||||
bootstrapStatus: "ready",
|
||||
});
|
||||
});
|
||||
|
|
@ -82,28 +112,13 @@ describe("CloudAccessGate", () => {
|
|||
keyId: null,
|
||||
});
|
||||
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CloudAccessGate />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
const root = renderGate(container);
|
||||
await waitForText(container, "No company access");
|
||||
|
||||
expect(container.textContent).toContain("No company access");
|
||||
expect(container.textContent).not.toContain("Outlet content");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
unmountRoot(root);
|
||||
});
|
||||
|
||||
it("allows authenticated users with company access through to the board", async () => {
|
||||
|
|
@ -120,27 +135,95 @@ describe("CloudAccessGate", () => {
|
|||
keyId: null,
|
||||
});
|
||||
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CloudAccessGate />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
const root = renderGate(container);
|
||||
await waitForText(container, "Outlet content");
|
||||
|
||||
expect(container.textContent).toContain("Outlet content");
|
||||
expect(container.textContent).not.toContain("No company access");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
unmountRoot(root);
|
||||
});
|
||||
|
||||
it("shows browser sign-in setup for signed-out private bootstrap-pending instances", async () => {
|
||||
mockHealthApi.get.mockResolvedValue({
|
||||
status: "ok",
|
||||
deploymentMode: "authenticated",
|
||||
deploymentExposure: "private",
|
||||
bootstrapStatus: "bootstrap_pending",
|
||||
bootstrapInviteActive: false,
|
||||
});
|
||||
mockAuthApi.getSession.mockResolvedValue(null);
|
||||
|
||||
const root = renderGate(container);
|
||||
await waitForText(container, "Finish setting up this Paperclip");
|
||||
|
||||
expect(container.textContent).toContain("Finish setting up this Paperclip");
|
||||
expect(container.textContent).toContain("Sign in / Create account");
|
||||
expect(container.textContent).toContain("pnpm paperclipai auth bootstrap-ceo");
|
||||
expect(mockAccessApi.getCurrentBoardAccess).not.toHaveBeenCalled();
|
||||
|
||||
unmountRoot(root);
|
||||
});
|
||||
|
||||
it("shows the claim action for signed-in private bootstrap-pending instances", async () => {
|
||||
mockHealthApi.get.mockResolvedValue({
|
||||
status: "ok",
|
||||
deploymentMode: "authenticated",
|
||||
deploymentExposure: "private",
|
||||
bootstrapStatus: "bootstrap_pending",
|
||||
bootstrapInviteActive: false,
|
||||
});
|
||||
mockAuthApi.getSession.mockResolvedValue({
|
||||
session: { id: "session-1", userId: "user-1" },
|
||||
user: { id: "user-1", email: "user@example.com", name: "User", image: null },
|
||||
});
|
||||
mockAccessApi.claimBootstrapAdmin.mockResolvedValue({ claimed: true, userId: "user-1" });
|
||||
|
||||
const root = renderGate(container);
|
||||
await waitForText(container, "Claim this instance");
|
||||
|
||||
expect(container.textContent).toContain("Claim this instance");
|
||||
expect(container.textContent).toContain("Signed in as user@example.com");
|
||||
expect(mockAccessApi.getCurrentBoardAccess).not.toHaveBeenCalled();
|
||||
|
||||
const button = Array.from(container.querySelectorAll("button")).find((candidate) =>
|
||||
candidate.textContent?.includes("Claim this instance"),
|
||||
);
|
||||
expect(button).toBeTruthy();
|
||||
flushSync(() => {
|
||||
button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await waitForText(container, "You're the instance admin");
|
||||
|
||||
expect(mockAccessApi.claimBootstrapAdmin).toHaveBeenCalledTimes(1);
|
||||
expect(container.textContent).toContain("You're the instance admin");
|
||||
expect(container.textContent).toContain("Continue to dashboard");
|
||||
|
||||
unmountRoot(root);
|
||||
});
|
||||
|
||||
it("keeps public bootstrap-pending instances invite-only", async () => {
|
||||
mockHealthApi.get.mockResolvedValue({
|
||||
status: "ok",
|
||||
deploymentMode: "authenticated",
|
||||
deploymentExposure: "public",
|
||||
bootstrapStatus: "bootstrap_pending",
|
||||
bootstrapInviteActive: true,
|
||||
});
|
||||
mockAuthApi.getSession.mockResolvedValue({
|
||||
session: { id: "session-1", userId: "user-1" },
|
||||
user: { id: "user-1", email: "user@example.com", name: "User", image: null },
|
||||
});
|
||||
|
||||
const root = renderGate(container);
|
||||
await waitForText(container, "This Paperclip is waiting on its first admin");
|
||||
|
||||
expect(container.textContent).toContain("This Paperclip is waiting on its first admin");
|
||||
expect(container.textContent).toContain("invite-only mode");
|
||||
expect(container.textContent).not.toContain("Claim this instance");
|
||||
expect(container.textContent).not.toContain("Sign in / Create account");
|
||||
expect(mockAccessApi.claimBootstrapAdmin).not.toHaveBeenCalled();
|
||||
|
||||
unmountRoot(root);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import { CompanySettings } from "./pages/CompanySettings";
|
|||
import { CompanyEnvironments } from "./pages/CompanyEnvironments";
|
||||
import { CloudUpstream } from "./pages/CloudUpstream";
|
||||
import { CloudUpstreamUxLab } from "./pages/CloudUpstreamUxLab";
|
||||
import { BootstrapSetupUxLab } from "./pages/BootstrapSetupUxLab";
|
||||
import { CompanySettingsPluginPage } from "./pages/CompanySettingsPluginPage";
|
||||
import { CompanyAccess, CompanyAccessLegacyRoute } from "./pages/CompanyAccess";
|
||||
import { CompanyInvites } from "./pages/CompanyInvites";
|
||||
|
|
@ -284,6 +285,7 @@ export function App() {
|
|||
<Route path="invite/:token" element={<InviteLandingPage />} />
|
||||
<Route path="tests/perf/long-thread" element={<IssueChatLongThreadPerf />} />
|
||||
<Route path="ux-lab/cloud-upstream" element={<CloudUpstreamUxLab />} />
|
||||
<Route path="ux-lab/bootstrap-setup" element={<BootstrapSetupUxLab />} />
|
||||
|
||||
<Route element={<CloudAccessGate />}>
|
||||
<Route index element={<CompanyRootRedirect />} />
|
||||
|
|
|
|||
|
|
@ -384,6 +384,9 @@ export const accessApi = {
|
|||
claimBoard: (token: string, code: string) =>
|
||||
api.post<{ claimed: true; userId: string }>(`/board-claim/${token}/claim`, { code }),
|
||||
|
||||
claimBootstrapAdmin: () =>
|
||||
api.post<{ claimed: true; userId: string }>("/bootstrap/claim", {}),
|
||||
|
||||
getCliAuthChallenge: (id: string, token: string) =>
|
||||
api.get<CliAuthChallengeStatus>(`/cli-auth/challenges/${id}?token=${encodeURIComponent(token)}`),
|
||||
|
||||
|
|
|
|||
1
ui/src/bootstrapSetup.ts
Normal file
1
ui/src/bootstrapSetup.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const BOOTSTRAP_FALLBACK_COMMAND = "pnpm paperclipai auth bootstrap-ceo";
|
||||
176
ui/src/components/BootstrapPendingPage.tsx
Normal file
176
ui/src/components/BootstrapPendingPage.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
import type { ReactNode } from "react";
|
||||
import { Loader2, ShieldCheck, Terminal, TriangleAlert } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BOOTSTRAP_FALLBACK_COMMAND } from "@/bootstrapSetup";
|
||||
import type { AuthSession } from "@paperclipai/shared";
|
||||
|
||||
type BootstrapPendingPageProps = {
|
||||
claimAvailable: boolean;
|
||||
hasActiveInvite?: boolean;
|
||||
session: AuthSession | null | undefined;
|
||||
claimState: "idle" | "claiming" | "success";
|
||||
claimError?: { status?: number; message?: string } | null;
|
||||
onClaim: () => void;
|
||||
};
|
||||
|
||||
function CliFallback({ hasActiveInvite = false }: { hasActiveInvite?: boolean }) {
|
||||
return (
|
||||
<div className="mt-6 border-t border-border pt-5">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<Terminal className="size-4 text-muted-foreground" aria-hidden />
|
||||
<span>Prefer to finish setup from the host?</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{hasActiveInvite
|
||||
? "A bootstrap invite is already active. Check your Paperclip startup logs for the first-admin URL, or run this command on the host to rotate it:"
|
||||
: "Run this command on the host that runs Paperclip to print a one-time first-admin invite URL:"}
|
||||
</p>
|
||||
<pre className="mt-3 overflow-x-auto rounded-md border border-border bg-muted/30 p-3 font-mono text-xs">
|
||||
{BOOTSTRAP_FALLBACK_COMMAND}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StateChrome({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto max-w-xl py-10">
|
||||
<div className="rounded-lg border border-border bg-card p-6">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function displayIdentity(session: AuthSession) {
|
||||
return session.user.email || session.user.name || session.user.id;
|
||||
}
|
||||
|
||||
function claimErrorCopy(error: BootstrapPendingPageProps["claimError"]) {
|
||||
if (error?.status === 409) {
|
||||
return {
|
||||
title: "Someone else has already claimed this instance.",
|
||||
body: "Refresh to sign in, or ask the existing admin to invite you from Instance settings -> Access.",
|
||||
};
|
||||
}
|
||||
if (error?.status === 401) {
|
||||
return {
|
||||
title: "Your session expired. Sign in again to claim this instance.",
|
||||
body: "",
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: "We couldn't reach the server. Try again in a moment.",
|
||||
body: "",
|
||||
};
|
||||
}
|
||||
|
||||
export function BootstrapPendingPage({
|
||||
claimAvailable,
|
||||
hasActiveInvite = false,
|
||||
session,
|
||||
claimState,
|
||||
claimError,
|
||||
onClaim,
|
||||
}: BootstrapPendingPageProps) {
|
||||
if (!claimAvailable) {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">This Paperclip is waiting on its first admin</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
This instance runs in invite-only mode. The operator must generate a one-time first-admin invite URL
|
||||
from the host. Once you have the link, open it from this browser to finish setup.
|
||||
</p>
|
||||
<CliFallback hasActiveInvite={hasActiveInvite} />
|
||||
<p className="mt-4 text-xs text-muted-foreground">
|
||||
Browser-based claim is intentionally disabled in public mode so anyone on the network can't promote
|
||||
themselves.
|
||||
</p>
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
if (claimState === "success") {
|
||||
return (
|
||||
<StateChrome>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex size-9 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">
|
||||
<ShieldCheck className="size-5" aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">You're the instance admin</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Setup is complete. Taking you to onboarding to create your first company...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex items-center gap-3">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" aria-hidden />
|
||||
<span className="text-sm text-muted-foreground">Redirecting...</span>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Button asChild variant="outline">
|
||||
<a href="/">Continue to dashboard</a>
|
||||
</Button>
|
||||
</div>
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Sign in or create your Paperclip account to become the first
|
||||
admin from this browser.
|
||||
</p>
|
||||
<div className="mt-5">
|
||||
<Button asChild>
|
||||
<Link to="/auth?next=/">Sign in / Create account</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<CliFallback hasActiveInvite={hasActiveInvite} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
const errorCopy = claimErrorCopy(claimError);
|
||||
const isClaiming = claimState === "claiming";
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Claim it now to become the first admin and start onboarding.
|
||||
</p>
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<Button onClick={onClaim} disabled={isClaiming}>
|
||||
{isClaiming && <Loader2 className="mr-2 size-4 animate-spin" aria-hidden />}
|
||||
{isClaiming ? "Claiming..." : "Claim this instance"}
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Signed in as <span className="font-medium text-foreground">{displayIdentity(session)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
Wrong account?{" "}
|
||||
<Link to="/auth?next=/" className="underline underline-offset-2">
|
||||
Switch account
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
{claimError && (
|
||||
<div
|
||||
role="alert"
|
||||
className="mt-4 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
<TriangleAlert className="mt-0.5 size-4 flex-shrink-0" aria-hidden />
|
||||
<div>
|
||||
<p className="font-medium">{errorCopy.title}</p>
|
||||
{errorCopy.body && <p className="mt-1 text-destructive/90">{errorCopy.body}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<CliFallback hasActiveInvite={hasActiveInvite} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,27 +1,11 @@
|
|||
import { Navigate, Outlet, useLocation } from "@/lib/router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { accessApi } from "@/api/access";
|
||||
import { ApiError } from "@/api/client";
|
||||
import { authApi } from "@/api/auth";
|
||||
import { healthApi } from "@/api/health";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
|
||||
function BootstrapPendingPage({ hasActiveInvite = false }: { hasActiveInvite?: boolean }) {
|
||||
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 Paperclip 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 Paperclip 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>
|
||||
);
|
||||
}
|
||||
import { BootstrapPendingPage } from "@/components/BootstrapPendingPage";
|
||||
|
||||
function NoBoardAccessPage() {
|
||||
return (
|
||||
|
|
@ -42,6 +26,7 @@ function NoBoardAccessPage() {
|
|||
|
||||
export function CloudAccessGate() {
|
||||
const location = useLocation();
|
||||
const queryClient = useQueryClient();
|
||||
const healthQuery = useQuery({
|
||||
queryKey: queryKeys.health,
|
||||
queryFn: () => healthApi.get(),
|
||||
|
|
@ -58,6 +43,7 @@ export function CloudAccessGate() {
|
|||
});
|
||||
|
||||
const isAuthenticatedMode = healthQuery.data?.deploymentMode === "authenticated";
|
||||
const isBootstrapPending = isAuthenticatedMode && healthQuery.data?.bootstrapStatus === "bootstrap_pending";
|
||||
const sessionQuery = useQuery({
|
||||
queryKey: queryKeys.auth.session,
|
||||
queryFn: () => authApi.getSession(),
|
||||
|
|
@ -68,14 +54,24 @@ export function CloudAccessGate() {
|
|||
const boardAccessQuery = useQuery({
|
||||
queryKey: queryKeys.access.currentBoardAccess,
|
||||
queryFn: () => accessApi.getCurrentBoardAccess(),
|
||||
enabled: isAuthenticatedMode && !!sessionQuery.data,
|
||||
enabled: isAuthenticatedMode && !isBootstrapPending && !!sessionQuery.data,
|
||||
retry: false,
|
||||
});
|
||||
const claimMutation = useMutation({
|
||||
mutationFn: () => accessApi.claimBootstrapAdmin(),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.auth.session });
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.health });
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.companies.stats });
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.access.currentBoardAccess });
|
||||
},
|
||||
});
|
||||
|
||||
if (
|
||||
healthQuery.isLoading ||
|
||||
(isAuthenticatedMode && sessionQuery.isLoading) ||
|
||||
(isAuthenticatedMode && !!sessionQuery.data && boardAccessQuery.isLoading)
|
||||
(isAuthenticatedMode && !isBootstrapPending && !!sessionQuery.data && boardAccessQuery.isLoading)
|
||||
) {
|
||||
return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
|
||||
}
|
||||
|
|
@ -92,8 +88,26 @@ export function CloudAccessGate() {
|
|||
);
|
||||
}
|
||||
|
||||
if (isAuthenticatedMode && healthQuery.data?.bootstrapStatus === "bootstrap_pending") {
|
||||
return <BootstrapPendingPage hasActiveInvite={healthQuery.data.bootstrapInviteActive} />;
|
||||
if (isBootstrapPending) {
|
||||
const health = healthQuery.data;
|
||||
if (!health) {
|
||||
return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
|
||||
}
|
||||
const claimError = claimMutation.error instanceof ApiError
|
||||
? { status: claimMutation.error.status, message: claimMutation.error.message }
|
||||
: claimMutation.error instanceof Error
|
||||
? { message: claimMutation.error.message }
|
||||
: null;
|
||||
return (
|
||||
<BootstrapPendingPage
|
||||
claimAvailable={health.deploymentExposure === "private"}
|
||||
hasActiveInvite={health.bootstrapInviteActive}
|
||||
session={sessionQuery.data}
|
||||
claimState={claimMutation.isSuccess ? "success" : claimMutation.isPending ? "claiming" : "idle"}
|
||||
claimError={claimError}
|
||||
onClaim={() => claimMutation.mutate()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (isAuthenticatedMode && !sessionQuery.data) {
|
||||
|
|
|
|||
247
ui/src/pages/BootstrapSetupUxLab.tsx
Normal file
247
ui/src/pages/BootstrapSetupUxLab.tsx
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
import type { ReactElement, ReactNode } from "react";
|
||||
import { Loader2, ShieldCheck, Terminal, TriangleAlert } from "lucide-react";
|
||||
import { BOOTSTRAP_FALLBACK_COMMAND } from "@/bootstrapSetup";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type LabFixtureKey =
|
||||
| "signed-out-private"
|
||||
| "signed-in-private"
|
||||
| "claiming"
|
||||
| "claim-error"
|
||||
| "claim-success"
|
||||
| "public-invite-only";
|
||||
|
||||
const FIXTURE_LABELS: Record<LabFixtureKey, string> = {
|
||||
"signed-out-private": "1 · authenticated/private — signed out (browser claim available)",
|
||||
"signed-in-private": "2 · authenticated/private — signed in (claim CTA primary)",
|
||||
claiming: "3 · authenticated/private — claim in flight",
|
||||
"claim-error": "4 · authenticated/private — claim error (e.g. 409 already claimed)",
|
||||
"claim-success": "5 · authenticated/private — claim succeeded, redirect pending",
|
||||
"public-invite-only": "6 · authenticated/public — invite-only (no browser claim)",
|
||||
};
|
||||
|
||||
const FIXTURE_ORDER: LabFixtureKey[] = [
|
||||
"signed-out-private",
|
||||
"signed-in-private",
|
||||
"claiming",
|
||||
"claim-error",
|
||||
"claim-success",
|
||||
"public-invite-only",
|
||||
];
|
||||
|
||||
function CliFallback({ hasActiveInvite }: { hasActiveInvite: boolean }) {
|
||||
return (
|
||||
<div className="mt-6 border-t border-border pt-5">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<Terminal className="size-4 text-muted-foreground" aria-hidden />
|
||||
<span>Prefer to finish setup from the host?</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{hasActiveInvite
|
||||
? "A bootstrap invite is already active. Check your Paperclip startup logs for the first‑admin URL, or run this command on the host to rotate it:"
|
||||
: "Run this command on the host that runs Paperclip to print a one‑time first‑admin invite URL:"}
|
||||
</p>
|
||||
<pre className="mt-3 overflow-x-auto rounded-md border border-border bg-muted/30 p-3 font-mono text-xs">
|
||||
{BOOTSTRAP_FALLBACK_COMMAND}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StateChrome({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto max-w-xl py-10">
|
||||
<div className="rounded-lg border border-border bg-card p-6">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SignedOutPrivate() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Sign in or create your Paperclip account to become the first
|
||||
admin from this browser.
|
||||
</p>
|
||||
<div className="mt-5">
|
||||
<Button asChild>
|
||||
<a href="/auth?next=/">Sign in / Create account</a>
|
||||
</Button>
|
||||
</div>
|
||||
<CliFallback hasActiveInvite={false} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
function SignedInPrivate() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Claim it now to become the first admin and start onboarding.
|
||||
</p>
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<Button>Claim this instance</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Signed in as <span className="font-medium text-foreground">jane@appliance.local</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
Wrong account?{" "}
|
||||
<a href="/auth?next=/" className="underline underline-offset-2">
|
||||
Switch account
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<CliFallback hasActiveInvite={false} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
function ClaimingPrivate() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Claim it now to become the first admin and start onboarding.
|
||||
</p>
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<Button disabled>
|
||||
<Loader2 className="mr-2 size-4 animate-spin" aria-hidden />
|
||||
Claiming…
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Signed in as <span className="font-medium text-foreground">jane@appliance.local</span>
|
||||
</span>
|
||||
</div>
|
||||
<CliFallback hasActiveInvite={false} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
function ClaimErrorPrivate() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">Finish setting up this Paperclip</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No admin has claimed this instance yet. Claim it now to become the first admin and start onboarding.
|
||||
</p>
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<Button>Claim this instance</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Signed in as <span className="font-medium text-foreground">jane@appliance.local</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
role="alert"
|
||||
className="mt-4 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
<TriangleAlert className="mt-0.5 size-4 flex-shrink-0" aria-hidden />
|
||||
<div>
|
||||
<p className="font-medium">Someone else has already claimed this instance.</p>
|
||||
<p className="mt-1 text-destructive/90">
|
||||
Refresh to sign in, or ask the existing admin to invite you from{" "}
|
||||
<span className="font-mono">Instance settings → Access</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<CliFallback hasActiveInvite={false} />
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
function ClaimSuccess() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex size-9 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">
|
||||
<ShieldCheck className="size-5" aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">You’re the instance admin</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Setup is complete. Taking you to onboarding to create your first company…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex items-center gap-3">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" aria-hidden />
|
||||
<span className="text-sm text-muted-foreground">Redirecting…</span>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Button asChild variant="outline">
|
||||
<a href="/">Continue to dashboard</a>
|
||||
</Button>
|
||||
</div>
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
function PublicInviteOnly() {
|
||||
return (
|
||||
<StateChrome>
|
||||
<h1 className="text-xl font-semibold">This Paperclip is waiting on its first admin</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
This instance runs in invite‑only mode. The operator must generate a one‑time first‑admin invite URL
|
||||
from the host. Once you have the link, open it from this browser to finish setup.
|
||||
</p>
|
||||
<CliFallback hasActiveInvite />
|
||||
<p className="mt-4 text-xs text-muted-foreground">
|
||||
Browser‑based claim is intentionally disabled in public mode so anyone on the network can’t
|
||||
promote themselves.
|
||||
</p>
|
||||
</StateChrome>
|
||||
);
|
||||
}
|
||||
|
||||
const FIXTURE_BODIES: Record<LabFixtureKey, ReactElement> = {
|
||||
"signed-out-private": <SignedOutPrivate />,
|
||||
"signed-in-private": <SignedInPrivate />,
|
||||
claiming: <ClaimingPrivate />,
|
||||
"claim-error": <ClaimErrorPrivate />,
|
||||
"claim-success": <ClaimSuccess />,
|
||||
"public-invite-only": <PublicInviteOnly />,
|
||||
};
|
||||
|
||||
export function BootstrapSetupUxLab() {
|
||||
return (
|
||||
<div className="bg-background min-h-screen pb-16">
|
||||
<header className="border-b border-border bg-muted/20">
|
||||
<div className="mx-auto max-w-3xl px-6 py-6">
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">UX Lab</p>
|
||||
<h1 className="mt-1 text-2xl font-semibold">Bootstrap-pending setup states</h1>
|
||||
<p className="mt-2 max-w-2xl text-sm text-muted-foreground">
|
||||
Fixtures for the bootstrap-pending screen in <span className="font-mono">CloudAccessGate</span>. Used
|
||||
as the UX spec for{" "}
|
||||
<a className="underline underline-offset-2" href="/PAP/issues/PAP-10113">
|
||||
PAP-10113
|
||||
</a>{" "}
|
||||
and the implementation reference for{" "}
|
||||
<a className="underline underline-offset-2" href="/PAP/issues/PAP-10114">
|
||||
PAP-10114
|
||||
</a>
|
||||
. The browser claim CTA only appears when{" "}
|
||||
<span className="font-mono">deploymentMode === "authenticated"</span> and{" "}
|
||||
<span className="font-mono">deploymentExposure === "private"</span>.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<main className="mx-auto max-w-3xl space-y-12 px-6 pt-10">
|
||||
{FIXTURE_ORDER.map((key) => (
|
||||
<section key={key} aria-labelledby={`lab-${key}`}>
|
||||
<h2
|
||||
id={`lab-${key}`}
|
||||
className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{FIXTURE_LABELS[key]}
|
||||
</h2>
|
||||
<div className="rounded-lg border border-dashed border-border/70 bg-muted/10 p-2">
|
||||
{FIXTURE_BODIES[key]}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue