mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-18 11:40:39 +09:00
feat: implement multi-user access and invite flows (#3784)
## Thinking Path > - Paperclip is the control plane for autonomous AI companies. > - V1 needs to stay local-first while also supporting shared, authenticated deployments. > - Human operators need real identities, company membership, invite flows, profile surfaces, and company-scoped access controls. > - Agents and operators also need the existing issue, inbox, workspace, approval, and plugin flows to keep working under those authenticated boundaries. > - This branch accumulated the multi-user implementation, follow-up QA fixes, workspace/runtime refinements, invite UX improvements, release-branch conflict resolution, and review hardening. > - This pull request consolidates that branch onto the current `master` branch as a single reviewable PR. > - The benefit is a complete multi-user implementation path with tests and docs carried forward without dropping existing branch work. ## What Changed - Added authenticated human-user access surfaces: auth/session routes, company user directory, profile settings, company access/member management, join requests, and invite management. - Added invite creation, invite landing, onboarding, logo/branding, invite grants, deduped join requests, and authenticated multi-user E2E coverage. - Tightened company-scoped and instance-admin authorization across board, plugin, adapter, access, issue, and workspace routes. - Added profile-image URL validation hardening, avatar preservation on name-only profile updates, and join-request uniqueness migration cleanup for pending human requests. - Added an atomic member role/status/grants update path so Company Access saves no longer leave partially updated permissions. - Improved issue chat, inbox, assignee identity rendering, sidebar/account/company navigation, workspace routing, and execution workspace reuse behavior for multi-user operation. - Added and updated server/UI tests covering auth, invites, membership, issue workspace inheritance, plugin authz, inbox/chat behavior, and multi-user flows. - Merged current `public-gh/master` into this branch, resolved all conflicts, and verified no `pnpm-lock.yaml` change is included in this PR diff. ## Verification - `pnpm exec vitest run server/src/__tests__/issues-service.test.ts ui/src/components/IssueChatThread.test.tsx ui/src/pages/Inbox.test.tsx` - `pnpm run preflight:workspace-links && pnpm exec vitest run server/src/__tests__/plugin-routes-authz.test.ts` - `pnpm exec vitest run server/src/__tests__/plugin-routes-authz.test.ts server/src/__tests__/workspace-runtime-service-authz.test.ts server/src/__tests__/access-validators.test.ts` - `pnpm exec vitest run server/src/__tests__/authz-company-access.test.ts server/src/__tests__/routines-routes.test.ts server/src/__tests__/sidebar-preferences-routes.test.ts server/src/__tests__/approval-routes-idempotency.test.ts server/src/__tests__/openclaw-invite-prompt-route.test.ts server/src/__tests__/agent-cross-tenant-authz-routes.test.ts server/src/__tests__/routines-e2e.test.ts` - `pnpm exec vitest run server/src/__tests__/auth-routes.test.ts ui/src/pages/CompanyAccess.test.tsx` - `pnpm --filter @paperclipai/shared typecheck && pnpm --filter @paperclipai/db typecheck && pnpm --filter @paperclipai/server typecheck` - `pnpm --filter @paperclipai/shared typecheck && pnpm --filter @paperclipai/server typecheck` - `pnpm --filter @paperclipai/ui typecheck` - `pnpm db:generate` - `npx playwright test --config tests/e2e/playwright.config.ts --list` - Confirmed branch has no uncommitted changes and is `0` commits behind `public-gh/master` before PR creation. - Confirmed no `pnpm-lock.yaml` change is staged or present in the PR diff. ## Risks - High review surface area: this PR contains the accumulated multi-user branch plus follow-up fixes, so reviewers should focus especially on company-boundary enforcement and authenticated-vs-local deployment behavior. - UI behavior changed across invites, inbox, issue chat, access settings, and sidebar navigation; no browser screenshots are included in this branch-consolidation PR. - Plugin install, upgrade, and lifecycle/config mutations now require instance-admin access, which is intentional but may change expectations for non-admin board users. - A join-request dedupe migration rejects duplicate pending human requests before creating unique indexes; deployments with unusual historical duplicates should review the migration behavior. - Company member role/status/grant saves now use a new combined endpoint; older separate endpoints remain for compatibility. - Full production build was not run locally in this heartbeat; CI should cover the full matrix. ## Model Used - OpenAI Codex coding agent, GPT-5-based model, CLI/tool-use environment. Exact deployed model identifier and context window were not exposed by the runtime. ## 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 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 Note on screenshots: this is a branch-consolidation PR for an already-developed multi-user branch, and no browser screenshots were captured during this heartbeat. --------- Co-authored-by: dotta <dotta@example.com> Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
GitHub
parent
e93e418cbf
commit
b9a80dcf22
150 changed files with 26872 additions and 1289 deletions
245
ui/src/pages/InstanceAccess.tsx
Normal file
245
ui/src/pages/InstanceAccess.tsx
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Shield, ShieldCheck } from "lucide-react";
|
||||
import { accessApi } from "@/api/access";
|
||||
import { ApiError } from "@/api/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { useBreadcrumbs } from "@/context/BreadcrumbContext";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useToast } from "@/context/ToastContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
|
||||
export function InstanceAccess() {
|
||||
const { companies } = useCompany();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const { pushToast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
|
||||
const [selectedCompanyIds, setSelectedCompanyIds] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbs([
|
||||
{ label: "Instance Settings", href: "/instance/settings/general" },
|
||||
{ label: "Access" },
|
||||
]);
|
||||
}, [setBreadcrumbs]);
|
||||
|
||||
const usersQuery = useQuery({
|
||||
queryKey: queryKeys.access.adminUsers(search),
|
||||
queryFn: () => accessApi.searchAdminUsers(search),
|
||||
});
|
||||
|
||||
const selectedUser = useMemo(
|
||||
() => usersQuery.data?.find((user) => user.id === selectedUserId) ?? null,
|
||||
[selectedUserId, usersQuery.data],
|
||||
);
|
||||
|
||||
const userAccessQuery = useQuery({
|
||||
queryKey: queryKeys.access.userCompanyAccess(selectedUserId ?? ""),
|
||||
queryFn: () => accessApi.getUserCompanyAccess(selectedUserId!),
|
||||
enabled: !!selectedUserId,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedUserId && usersQuery.data?.[0]) {
|
||||
setSelectedUserId(usersQuery.data[0].id);
|
||||
}
|
||||
}, [selectedUserId, usersQuery.data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!userAccessQuery.data) return;
|
||||
setSelectedCompanyIds(
|
||||
new Set(userAccessQuery.data.companyAccess.map((membership) => membership.companyId)),
|
||||
);
|
||||
}, [userAccessQuery.data]);
|
||||
|
||||
const updateCompanyAccessMutation = useMutation({
|
||||
mutationFn: () => accessApi.setUserCompanyAccess(selectedUserId!, [...selectedCompanyIds]),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.access.userCompanyAccess(selectedUserId!) });
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.access.adminUsers(search) });
|
||||
pushToast({ title: "Company access updated", tone: "success" });
|
||||
},
|
||||
});
|
||||
|
||||
const setAdminMutation = useMutation({
|
||||
mutationFn: async (makeAdmin: boolean) => {
|
||||
if (!selectedUserId) throw new Error("No user selected");
|
||||
if (makeAdmin) return accessApi.promoteInstanceAdmin(selectedUserId);
|
||||
return accessApi.demoteInstanceAdmin(selectedUserId);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.access.adminUsers(search) });
|
||||
if (selectedUserId) {
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.access.userCompanyAccess(selectedUserId) });
|
||||
}
|
||||
pushToast({ title: "Instance role updated", tone: "success" });
|
||||
},
|
||||
});
|
||||
|
||||
if (usersQuery.isLoading) {
|
||||
return <div className="text-sm text-muted-foreground">Loading instance users…</div>;
|
||||
}
|
||||
|
||||
if (usersQuery.error) {
|
||||
const message =
|
||||
usersQuery.error instanceof ApiError && usersQuery.error.status === 403
|
||||
? "Instance admin access is required to manage users."
|
||||
: usersQuery.error instanceof Error
|
||||
? usersQuery.error.message
|
||||
: "Failed to load users.";
|
||||
return <div className="text-sm text-destructive">{message}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl space-y-6">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-lg font-semibold">Instance Access</h1>
|
||||
</div>
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">
|
||||
Search users, manage instance-admin status, and control which companies they can access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
|
||||
<section className="space-y-4 rounded-xl border border-border bg-card p-4">
|
||||
<label className="block space-y-2 text-sm">
|
||||
<span className="font-medium">Search users</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2"
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder="Search by name or email"
|
||||
/>
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{(usersQuery.data ?? []).map((user) => (
|
||||
<button
|
||||
key={user.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedUserId(user.id)}
|
||||
className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${
|
||||
user.id === selectedUserId
|
||||
? "border-foreground bg-accent"
|
||||
: "border-border hover:bg-accent/40"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium">{user.name || user.email || user.id}</div>
|
||||
<div className="truncate text-sm text-muted-foreground">{user.email || user.id}</div>
|
||||
</div>
|
||||
{user.isInstanceAdmin ? (
|
||||
<ShieldCheck className="h-4 w-4 text-emerald-600" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
{user.activeCompanyMembershipCount} active company memberships
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4 rounded-xl border border-border bg-card p-5">
|
||||
{!selectedUserId ? (
|
||||
<div className="text-sm text-muted-foreground">Select a user to inspect instance access.</div>
|
||||
) : userAccessQuery.isLoading ? (
|
||||
<div className="text-sm text-muted-foreground">Loading user access…</div>
|
||||
) : userAccessQuery.error ? (
|
||||
<div className="text-sm text-destructive">
|
||||
{userAccessQuery.error instanceof Error ? userAccessQuery.error.message : "Failed to load user access."}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-lg font-semibold">
|
||||
{selectedUser?.name || selectedUser?.email || selectedUserId}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{selectedUser?.email || selectedUserId}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant={selectedUser?.isInstanceAdmin ? "outline" : "default"}
|
||||
onClick={() => setAdminMutation.mutate(!(selectedUser?.isInstanceAdmin ?? false))}
|
||||
disabled={setAdminMutation.isPending}
|
||||
>
|
||||
{selectedUser?.isInstanceAdmin ? "Remove instance admin" : "Promote to instance admin"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold">Company access</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Toggle company membership for this user. New access defaults to an active operator membership.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{companies.map((company) => (
|
||||
<label
|
||||
key={company.id}
|
||||
className="flex items-start gap-3 rounded-lg border border-border px-3 py-3"
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedCompanyIds.has(company.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setSelectedCompanyIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (checked) next.add(company.id);
|
||||
else next.delete(company.id);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span className="space-y-1">
|
||||
<span className="block text-sm font-medium">{company.name}</span>
|
||||
<span className="block text-xs text-muted-foreground">{company.issuePrefix}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={() => updateCompanyAccessMutation.mutate()}
|
||||
disabled={updateCompanyAccessMutation.isPending}
|
||||
>
|
||||
{updateCompanyAccessMutation.isPending ? "Saving…" : "Save company access"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-semibold">Current memberships</h2>
|
||||
<div className="space-y-2">
|
||||
{(userAccessQuery.data?.companyAccess ?? []).map((membership) => (
|
||||
<div
|
||||
key={membership.id}
|
||||
className="flex items-center justify-between rounded-lg border border-border px-3 py-2 text-sm"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">{membership.companyName || membership.companyId}</div>
|
||||
<div className="text-muted-foreground">
|
||||
{membership.membershipRole || "unset"} • {membership.status}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(membership.updatedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue