(null);
+
+ useEffect(() => {
+ setBreadcrumbs([
+ { label: selectedCompany?.name ?? "Company", href: "/dashboard" },
+ { label: "Settings", href: "/company/settings" },
+ { label: "Cloud upstream" },
+ ]);
+ }, [selectedCompany?.name, setBreadcrumbs]);
+
+ const experimentalQuery = useQuery({
+ queryKey: queryKeys.instance.experimentalSettings,
+ queryFn: () => instanceSettingsApi.getExperimental(),
+ });
+ const cloudSyncEnabled = experimentalQuery.data?.enableCloudSync === true;
+
+ const upstreamQuery = useQuery({
+ queryKey: selectedCompanyId ? queryKeys.cloudUpstreams(selectedCompanyId) : ["cloud-upstreams", "__disabled__"],
+ queryFn: () => cloudUpstreamsApi.list(selectedCompanyId!),
+ enabled: !!selectedCompanyId && cloudSyncEnabled,
+ });
+
+ const connection = upstreamQuery.data?.connections[0] ?? null;
+ const latestRun = activeRun ?? upstreamQuery.data?.runs[0] ?? null;
+
+ const callbackParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+ const code = callbackParams.get("code");
+ const state = callbackParams.get("state");
+ const callbackError = callbackParams.get("error");
+
+ const settingsPath = useMemo(() => {
+ const pathPrefix = extractCompanyPrefixFromPath(location.pathname);
+ return applyCompanyPrefix("/company/settings/cloud-upstream", pathPrefix ?? selectedCompany?.issuePrefix ?? null);
+ }, [location.pathname, selectedCompany?.issuePrefix]);
+
+ const finishMutation = useMutation({
+ mutationFn: (input: { pendingConnectionId: string; code: string; state: string }) =>
+ cloudUpstreamsApi.finishConnect(input),
+ onSuccess: async () => {
+ localStorage.removeItem(PENDING_CONNECTION_KEY);
+ setNotice("Cloud upstream connection approved.");
+ setActionError(null);
+ await invalidateUpstreams();
+ window.history.replaceState(null, "", settingsPath);
+ },
+ onError: (error) => setActionError(error instanceof Error ? error.message : "Failed to finish connection."),
+ });
+ const {
+ mutate: finishConnect,
+ isError: finishConnectFailed,
+ isPending: finishConnectPending,
+ isSuccess: finishConnectSucceeded,
+ } = finishMutation;
+
+ useEffect(() => {
+ if (!cloudSyncEnabled || !code || !state || finishConnectPending || finishConnectSucceeded || finishConnectFailed) return;
+ const pendingConnectionId = localStorage.getItem(PENDING_CONNECTION_KEY);
+ if (!pendingConnectionId) {
+ setActionError("No pending cloud upstream connection was found. Start the connection again.");
+ return;
+ }
+ finishConnect({ pendingConnectionId, code, state });
+ }, [cloudSyncEnabled, code, finishConnect, finishConnectFailed, finishConnectPending, finishConnectSucceeded, state]);
+
+ useEffect(() => {
+ if (callbackError) {
+ setActionError(`Cloud upstream connection was not approved: ${callbackError}`);
+ }
+ }, [callbackError]);
+
+ const startMutation = useMutation({
+ mutationFn: () =>
+ cloudUpstreamsApi.startConnect({
+ companyId: selectedCompanyId!,
+ remoteUrl,
+ redirectUri: `${window.location.origin}${settingsPath}`,
+ }),
+ onSuccess: (result) => {
+ localStorage.setItem(PENDING_CONNECTION_KEY, result.pendingConnectionId);
+ setActionError(null);
+ window.location.assign(result.authorizationUrl);
+ },
+ onError: (error) => setActionError(error instanceof Error ? error.message : "Failed to start connection."),
+ });
+
+ const previewMutation = useMutation({
+ mutationFn: (input: { connectionId: string; companyId: string }) =>
+ cloudUpstreamsApi.preview(input.connectionId, { companyId: input.companyId }),
+ onSuccess: (nextPreview) => {
+ setPreview(nextPreview);
+ setActionError(null);
+ },
+ onError: (error) => setActionError(previewErrorMessage(error)),
+ });
+
+ const runMutation = useMutation({
+ mutationFn: (input: { connectionId: string; companyId: string; retryOfRunId?: string | null }) =>
+ cloudUpstreamsApi.createRun(input.connectionId, {
+ companyId: input.companyId,
+ retryOfRunId: input.retryOfRunId ?? null,
+ }),
+ onSuccess: async (run) => {
+ setActiveRun(run);
+ setNotice(run.status === "succeeded"
+ ? "Push run completed. Review activation before unpausing automations."
+ : "Push run failed. Review the run events and retry after correcting the issue.");
+ setActionError(null);
+ await invalidateUpstreams();
+ },
+ onError: (error) => setActionError(error instanceof Error ? error.message : "Failed to run push."),
+ });
+ const activationMutation = useMutation({
+ mutationFn: (input: { run: CloudUpstreamRun; entityType: CloudUpstreamActivationEntityType }) =>
+ cloudUpstreamsApi.activateEntities(input.run.connectionId, input.run.id, {
+ companyId: input.run.companyId,
+ entityType: input.entityType,
+ }),
+ onSuccess: async (run) => {
+ setActiveRun(run);
+ setNotice("Activation checklist updated.");
+ setActionError(null);
+ await invalidateUpstreams();
+ },
+ onError: (error) => setActionError(error instanceof Error ? error.message : "Failed to activate imported entities."),
+ });
+
+ async function invalidateUpstreams() {
+ if (!selectedCompanyId) return;
+ await queryClient.invalidateQueries({ queryKey: queryKeys.cloudUpstreams(selectedCompanyId) });
+ }
+
+ if (!selectedCompanyId || !selectedCompany) {
+ return Select a company to configure cloud upstream.
;
+ }
+
+ if (experimentalQuery.isLoading) {
+ return Loading experimental settings...
;
+ }
+
+ if (!cloudSyncEnabled) {
+ return (
+
+
+
+
Cloud upstream
+
+
+ Cloud sync is disabled. Enable it in{" "}
+
+ Instance Settings
+ {" "}
+ to show upstream connection and push tools.
+
+
+
+
+
+
+
Cloud upstream
+
+
+ Push {selectedCompany.name} into a Paperclip Cloud stack. Automations stay paused until activation.
+
+
+ {connection?.target.origin ? (
+
+ ) : null}
+
+
+ {notice ? (
+
+ {notice}
+
+ ) : null}
+ {actionError ? (
+
+ {actionError}
+
+ ) : null}
+
+
+
+
+ Connection
+
+ {connection ? (
+
+
+
+ {connection.target.stackDisplayName ?? connection.target.stackSlug ?? connection.target.stackId}
+
+
+ {connection.target.product} · {connection.target.origin} · token {connection.tokenStatus}
+
+
+ Schema {connection.target.schemaMajor}. Max chunk {formatBytes(connection.target.maxChunkBytes)}.
+
+
+
+
+ {previewMutation.isPending ?
: null}
+
+
+ ) : (
+
+ setRemoteUrl(event.target.value)}
+ placeholder="https://paperclip.paperclip.app/PC521D/dashboard"
+ aria-label="Paperclip Cloud stack URL"
+ />
+
+
+ )}
+
+
+ {preview ? (
+
+
+
Preview
+
+
+ ) : null}
+
+ {latestRun ? (
+
+
+
Progress and finish
+
+
+ {latestRun.status === "failed" || latestRun.status === "cancelled" ? (
+
+ ) : latestRun.status === "succeeded" ? (
+
+ ) : null}
+
+
+
+
+
{latestRun.status}
+
+ Run {latestRun.id.slice(0, 8)} · {latestRun.completedAt ? `completed ${formatDate(latestRun.completedAt)}` : "in progress"}
+
+
+
{latestRun.progressPercent}%
+
+
+
+ {latestRun.events.map((event) => (
+
+ {formatDate(event.at)}
+ {event.phase}
+ {event.message}
+
+ ))}
+
+
+ ) : null}
+
+ {upstreamQuery.data?.runs.length ? (
+
+
+
+ History
+
+
+ {upstreamQuery.data.runs.map((run) => (
+
+ ))}
+
+
+ ) : null}
+
{message}
;
+}
+
+function Stepper({ activeStep }: { activeStep: CloudUpstreamStep }) {
+ const activeIndex = STEPS.findIndex((step) => step.key === activeStep);
+ return (
+
+ {STEPS.map((step, index) => {
+ const complete = index < activeIndex;
+ const active = index === activeIndex;
+ return (
+
+ {complete ? (
+
+ ) : (
+
+ )}
+ {step.label}
+
+ );
+ })}
+
+ {summary.map((item) => (
+
+
{item.count}
+
{item.label}
+
+ ))}
+
+
+
+ Warnings
+
+
+ {warnings.map((warning) => (
+
+
+
{warning.title}
+
{warning.detail}
+
+ ))}
+
+
+
Conflicts
+ {conflicts.length === 0 ? (
+
No target conflicts detected for this preview.
+ ) : (
+
+ {conflicts.map((conflict) => (
+
+ {conflict.entityType}
+ {conflict.sourceLabel}
+ {conflict.targetLabel}
+ {conflict.plannedAction}
+
+ ))}
+
+ )}
+
+
Activation checklist
+
+ {rows.map((row) => {
+ const pending = isPending && pendingEntityType === row.key;
+ const activated = row.status === "activated";
+ return (
+
+
+
{row.label}
+
{row.statusLabel}
+
+
+ {row.count === 0 ? `0 imported ${row.pluralLabel} in this run.` : row.detail}
+
+
+
+
+
+
+ );
+ })}
+
+
+ {showChrome ? : null}
+
+
+ );
+}
+
+function FixtureNav({ active }: { active: FixtureStateKey }) {
+ return (
+
+
UX lab · cloud upstream
+
+
+
+
+
+
+
Cloud upstream
+
+
+ Push {selectedCompanyName} into a Paperclip Cloud stack. Automations stay paused until activation.
+
+
+ {connection?.target.origin ? (
+
+ ) : null}
+
+
+ {notice ? (
+
+ {notice}
+
+ ) : null}
+ {actionError ? (
+
+ {actionError}
+
+ ) : null}
+
+
+
+
+ Connection
+
+ {connection ? (
+
+
+
+ {connection.target.stackDisplayName ?? connection.target.stackSlug ?? connection.target.stackId}
+
+
+ {connection.target.product} · {connection.target.origin} · token {connection.tokenStatus}
+
+
+ Schema {connection.target.schemaMajor}. Max chunk {formatBytes(connection.target.maxChunkBytes)}.
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ {preview ? (
+
+
+
Preview
+
+
+ ) : null}
+
+ {latestRun ? (
+
+
+
Progress and finish
+
+
+ {latestRun.status === "failed" || latestRun.status === "cancelled" ? (
+
+ ) : latestRun.status === "succeeded" ? (
+
+ ) : null}
+
+
+
+
+
{latestRun.status}
+
+ Run {latestRun.id.slice(0, 8)} · {latestRun.completedAt
+ ? `completed ${formatDate(latestRun.completedAt)}`
+ : latestRun.status === "running"
+ ? "in progress"
+ : "in progress"}
+
+
+
{latestRun.progressPercent}%
+
+
+
+ {latestRun.events.map((event) => (
+
+ {formatDate(event.at)}
+ {event.phase}
+ {event.message}
+
+ ))}
+
+
+ ) : null}
+
+ {history.length ? (
+
+
+
+ History
+
+
+ {history.map((run) => (
+
+ Run {run.id.slice(0, 8)} · {run.status}
+ {formatDate(run.createdAt)}
+
+ ))}
+
+ ) : null}
+
+ {STEPS.map((step, index) => {
+ const complete = index < activeIndex;
+ const active = index === activeIndex;
+ return (
+
+ {complete ? (
+
+ ) : (
+
+ )}
+ {step.label}
+
+ );
+ })}
+
+ {summary.map((item) => (
+
+
{item.count}
+
{item.label}
+
+ ))}
+
+
+
+ Warnings
+
+
+ {warnings.map((warning) => (
+
+
+
{warning.title}
+
{warning.detail}
+
+ ))}
+
+
+
Conflicts
+ {conflicts.length === 0 ? (
+
No target conflicts detected for this preview.
+ ) : (
+
+ {conflicts.map((conflict) => (
+
+ {conflict.entityType}
+ {conflict.sourceLabel}
+ {conflict.targetLabel}
+ {conflict.plannedAction}
+
+ ))}
+
+ )}
+
+
Activation checklist
+
+ {rows.map((row) => {
+ const activated = row.status === "activated";
+ return (
+
+
+
{row.label}
+
{row.statusLabel}
+
+
+ {row.count === 0 ? `0 imported ${row.pluralLabel} in this run.` : row.detail}
+
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
Cloud Sync
+
+ Show local Paperclip Cloud upstream connection, preview, push, retry, and activation review surfaces.
+ Saved connections and run history are preserved when this is disabled.
+
+
+
toggleMutation.mutate({ enableCloudSync: !enableCloudSync })}
+ disabled={toggleMutation.isPending}
+ aria-label="Toggle cloud sync experimental setting"
+ />
+
+