feat: join request claim secrets, onboarding API, and company branding
Add secure claim secret flow for agent join requests with timing-safe comparison, expiry, and one-time use. Expose machine-readable onboarding manifests and skill index API endpoints. Add company brand color with hex validation, pattern icon generation, and settings page integration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
@@ -1,4 +1,4 @@
|
||||
import type { JoinRequest } from "@paperclip/shared";
|
||||
import type { AgentAdapterType, JoinRequest } from "@paperclip/shared";
|
||||
import { api } from "./client";
|
||||
|
||||
type InviteSummary = {
|
||||
@@ -7,6 +7,10 @@ type InviteSummary = {
|
||||
inviteType: "company_join" | "bootstrap_ceo";
|
||||
allowedJoinTypes: "human" | "agent" | "both";
|
||||
expiresAt: string;
|
||||
onboardingPath?: string;
|
||||
onboardingUrl?: string;
|
||||
skillIndexPath?: string;
|
||||
skillIndexUrl?: string;
|
||||
};
|
||||
|
||||
type AcceptInviteInput =
|
||||
@@ -14,11 +18,22 @@ type AcceptInviteInput =
|
||||
| {
|
||||
requestType: "agent";
|
||||
agentName: string;
|
||||
adapterType?: string;
|
||||
adapterType?: AgentAdapterType;
|
||||
capabilities?: string | null;
|
||||
agentDefaultsPayload?: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
type AgentJoinRequestAccepted = JoinRequest & {
|
||||
claimSecret: string;
|
||||
claimApiKeyPath: string;
|
||||
onboarding?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type InviteOnboardingManifest = {
|
||||
invite: InviteSummary;
|
||||
onboarding: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type BoardClaimStatus = {
|
||||
status: "available" | "claimed" | "expired";
|
||||
requiresSignIn: boolean;
|
||||
@@ -44,9 +59,14 @@ export const accessApi = {
|
||||
}>(`/companies/${companyId}/invites`, input),
|
||||
|
||||
getInvite: (token: string) => api.get<InviteSummary>(`/invites/${token}`),
|
||||
getInviteOnboarding: (token: string) =>
|
||||
api.get<InviteOnboardingManifest>(`/invites/${token}/onboarding`),
|
||||
|
||||
acceptInvite: (token: string, input: AcceptInviteInput) =>
|
||||
api.post<JoinRequest | { bootstrapAccepted: true; userId: string }>(`/invites/${token}/accept`, input),
|
||||
api.post<AgentJoinRequestAccepted | JoinRequest | { bootstrapAccepted: true; userId: string }>(
|
||||
`/invites/${token}/accept`,
|
||||
input,
|
||||
),
|
||||
|
||||
listJoinRequests: (companyId: string, status: "pending_approval" | "approved" | "rejected" = "pending_approval") =>
|
||||
api.get<JoinRequest[]>(`/companies/${companyId}/join-requests?status=${status}`),
|
||||
@@ -57,6 +77,12 @@ export const accessApi = {
|
||||
rejectJoinRequest: (companyId: string, requestId: string) =>
|
||||
api.post<JoinRequest>(`/companies/${companyId}/join-requests/${requestId}/reject`, {}),
|
||||
|
||||
claimJoinRequestApiKey: (requestId: string, claimSecret: string) =>
|
||||
api.post<{ keyId: string; token: string; agentId: string; createdAt: string }>(
|
||||
`/join-requests/${requestId}/claim-api-key`,
|
||||
{ claimSecret },
|
||||
),
|
||||
|
||||
getBoardClaimStatus: (token: string, code: string) =>
|
||||
api.get<BoardClaimStatus>(`/board-claim/${token}?code=${encodeURIComponent(code)}`),
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const companiesApi = {
|
||||
data: Partial<
|
||||
Pick<
|
||||
Company,
|
||||
"name" | "description" | "status" | "budgetMonthlyCents" | "requireBoardApprovalForNewAgents"
|
||||
"name" | "description" | "status" | "budgetMonthlyCents" | "requireBoardApprovalForNewAgents" | "brandColor"
|
||||
>
|
||||
>,
|
||||
) => api.patch<Company>(`/companies/${companyId}`, data),
|
||||
|
||||
192
ui/src/components/CompanyPatternIcon.tsx
Normal file
192
ui/src/components/CompanyPatternIcon.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { useMemo } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
const BAYER_4X4 = [
|
||||
[0, 8, 2, 10],
|
||||
[12, 4, 14, 6],
|
||||
[3, 11, 1, 9],
|
||||
[15, 7, 13, 5],
|
||||
] as const;
|
||||
|
||||
interface CompanyPatternIconProps {
|
||||
companyName: string;
|
||||
brandColor?: string | null;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function hashString(value: string): number {
|
||||
let hash = 2166136261;
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
hash ^= value.charCodeAt(i);
|
||||
hash = Math.imul(hash, 16777619);
|
||||
}
|
||||
return hash >>> 0;
|
||||
}
|
||||
|
||||
function mulberry32(seed: number): () => number {
|
||||
let state = seed >>> 0;
|
||||
return () => {
|
||||
state = (state + 0x6d2b79f5) >>> 0;
|
||||
let t = Math.imul(state ^ (state >>> 15), 1 | state);
|
||||
t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
|
||||
function hslToRgb(h: number, s: number, l: number): [number, number, number] {
|
||||
const hue = ((h % 360) + 360) % 360;
|
||||
const sat = Math.max(0, Math.min(100, s)) / 100;
|
||||
const light = Math.max(0, Math.min(100, l)) / 100;
|
||||
|
||||
const c = (1 - Math.abs(2 * light - 1)) * sat;
|
||||
const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
|
||||
const m = light - c / 2;
|
||||
|
||||
let r = 0;
|
||||
let g = 0;
|
||||
let b = 0;
|
||||
|
||||
if (hue < 60) {
|
||||
r = c;
|
||||
g = x;
|
||||
} else if (hue < 120) {
|
||||
r = x;
|
||||
g = c;
|
||||
} else if (hue < 180) {
|
||||
g = c;
|
||||
b = x;
|
||||
} else if (hue < 240) {
|
||||
g = x;
|
||||
b = c;
|
||||
} else if (hue < 300) {
|
||||
r = x;
|
||||
b = c;
|
||||
} else {
|
||||
r = c;
|
||||
b = x;
|
||||
}
|
||||
|
||||
return [
|
||||
Math.round((r + m) * 255),
|
||||
Math.round((g + m) * 255),
|
||||
Math.round((b + m) * 255),
|
||||
];
|
||||
}
|
||||
|
||||
function hexToHue(hex: string): number {
|
||||
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
||||
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
||||
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const d = max - min;
|
||||
if (d === 0) return 0;
|
||||
let h = 0;
|
||||
if (max === r) h = ((g - b) / d) % 6;
|
||||
else if (max === g) h = (b - r) / d + 2;
|
||||
else h = (r - g) / d + 4;
|
||||
return ((h * 60) + 360) % 360;
|
||||
}
|
||||
|
||||
function makeCompanyPatternDataUrl(seed: string, brandColor?: string | null, logicalSize = 22, cellSize = 2): string {
|
||||
if (typeof document === "undefined") return "";
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = logicalSize * cellSize;
|
||||
canvas.height = logicalSize * cellSize;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return "";
|
||||
|
||||
const rand = mulberry32(hashString(seed));
|
||||
|
||||
const hue = brandColor ? hexToHue(brandColor) : Math.floor(rand() * 360);
|
||||
const [offR, offG, offB] = hslToRgb(
|
||||
hue,
|
||||
54 + Math.floor(rand() * 14),
|
||||
36 + Math.floor(rand() * 12),
|
||||
);
|
||||
const [onR, onG, onB] = hslToRgb(
|
||||
hue + (rand() > 0.5 ? 10 : -10),
|
||||
86 + Math.floor(rand() * 10),
|
||||
82 + Math.floor(rand() * 10),
|
||||
);
|
||||
|
||||
const center = (logicalSize - 1) / 2;
|
||||
const half = Math.max(center, 1);
|
||||
const gradientAngle = rand() * Math.PI * 2;
|
||||
const gradientDirX = Math.cos(gradientAngle);
|
||||
const gradientDirY = Math.sin(gradientAngle);
|
||||
const maxProjection = Math.abs(gradientDirX * half) + Math.abs(gradientDirY * half);
|
||||
const diagonalFrequency = 0.34 + rand() * 0.12;
|
||||
const antiDiagonalFrequency = 0.33 + rand() * 0.12;
|
||||
const diagonalPhase = rand() * Math.PI * 2;
|
||||
const antiDiagonalPhase = rand() * Math.PI * 2;
|
||||
|
||||
ctx.fillStyle = `rgb(${offR} ${offG} ${offB})`;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = `rgb(${onR} ${onG} ${onB})`;
|
||||
const dotRadius = cellSize * 0.46;
|
||||
|
||||
for (let y = 0; y < logicalSize; y++) {
|
||||
const dy = y - center;
|
||||
|
||||
for (let x = 0; x < logicalSize; x++) {
|
||||
const dx = x - center;
|
||||
|
||||
// Side-to-side signal where visible gradient is produced by dither density.
|
||||
const projection = dx * gradientDirX + dy * gradientDirY;
|
||||
const gradient = (projection / maxProjection + 1) * 0.5;
|
||||
const diagonal = Math.sin((dx + dy) * diagonalFrequency + diagonalPhase) * 0.5 + 0.5;
|
||||
const antiDiagonal = Math.sin((dx - dy) * antiDiagonalFrequency + antiDiagonalPhase) * 0.5 + 0.5;
|
||||
const hatch = diagonal * 0.5 + antiDiagonal * 0.5;
|
||||
const signal = Math.max(0, Math.min(1, gradient + (hatch - 0.5) * 0.22));
|
||||
|
||||
// Canonical 16-level ordered dither: level 0..15 compared to Bayer 4x4 threshold index.
|
||||
const level = Math.max(0, Math.min(15, Math.floor(signal * 16)));
|
||||
const thresholdIndex = BAYER_4X4[y & 3]![x & 3]!;
|
||||
if (level <= thresholdIndex) continue;
|
||||
|
||||
const cx = x * cellSize + cellSize / 2;
|
||||
const cy = y * cellSize + cellSize / 2;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
export function CompanyPatternIcon({ companyName, brandColor, className }: CompanyPatternIconProps) {
|
||||
const initial = companyName.trim().charAt(0).toUpperCase() || "?";
|
||||
const patternDataUrl = useMemo(
|
||||
() => makeCompanyPatternDataUrl(companyName.trim().toLowerCase(), brandColor),
|
||||
[companyName, brandColor],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center justify-center w-11 h-11 text-base font-semibold text-white overflow-hidden",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{patternDataUrl ? (
|
||||
<img
|
||||
src={patternDataUrl}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-muted" />
|
||||
)}
|
||||
<span className="relative z-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.65)]">
|
||||
{initial}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,21 +6,43 @@ import { authApi } from "../api/auth";
|
||||
import { healthApi } from "../api/health";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { JoinRequest } from "@paperclip/shared";
|
||||
import { AGENT_ADAPTER_TYPES } from "@paperclip/shared";
|
||||
import type { AgentAdapterType, JoinRequest } from "@paperclip/shared";
|
||||
|
||||
type JoinType = "human" | "agent";
|
||||
const joinAdapterOptions: AgentAdapterType[] = [
|
||||
"openclaw",
|
||||
...AGENT_ADAPTER_TYPES.filter((type): type is Exclude<AgentAdapterType, "openclaw"> => type !== "openclaw"),
|
||||
];
|
||||
|
||||
const adapterLabels: Record<AgentAdapterType, string> = {
|
||||
claude_local: "Claude (local)",
|
||||
codex_local: "Codex (local)",
|
||||
openclaw: "OpenClaw",
|
||||
process: "Process",
|
||||
http: "HTTP",
|
||||
};
|
||||
|
||||
function dateTime(value: string) {
|
||||
return new Date(value).toLocaleString();
|
||||
}
|
||||
|
||||
function readNestedString(value: unknown, path: string[]): string | null {
|
||||
let current: unknown = value;
|
||||
for (const segment of path) {
|
||||
if (!current || typeof current !== "object") return null;
|
||||
current = (current as Record<string, unknown>)[segment];
|
||||
}
|
||||
return typeof current === "string" && current.trim().length > 0 ? current : null;
|
||||
}
|
||||
|
||||
export function InviteLandingPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const params = useParams();
|
||||
const token = (params.token ?? "").trim();
|
||||
const [joinType, setJoinType] = useState<JoinType>("human");
|
||||
const [agentName, setAgentName] = useState("");
|
||||
const [adapterType, setAdapterType] = useState("");
|
||||
const [adapterType, setAdapterType] = useState<AgentAdapterType>("openclaw");
|
||||
const [capabilities, setCapabilities] = useState("");
|
||||
const [result, setResult] = useState<{ kind: "bootstrap" | "join"; payload: unknown } | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -73,7 +95,7 @@ export function InviteLandingPage() {
|
||||
return accessApi.acceptInvite(token, {
|
||||
requestType: "agent",
|
||||
agentName: agentName.trim(),
|
||||
adapterType: adapterType.trim() || undefined,
|
||||
adapterType,
|
||||
capabilities: capabilities.trim() || null,
|
||||
});
|
||||
},
|
||||
@@ -128,7 +150,16 @@ export function InviteLandingPage() {
|
||||
}
|
||||
|
||||
if (result?.kind === "join") {
|
||||
const payload = result.payload as JoinRequest;
|
||||
const payload = result.payload as JoinRequest & {
|
||||
claimSecret?: string;
|
||||
claimApiKeyPath?: string;
|
||||
onboarding?: Record<string, unknown>;
|
||||
};
|
||||
const claimSecret = typeof payload.claimSecret === "string" ? payload.claimSecret : null;
|
||||
const claimApiKeyPath = typeof payload.claimApiKeyPath === "string" ? payload.claimApiKeyPath : null;
|
||||
const onboardingSkillUrl = readNestedString(payload.onboarding, ["skill", "url"]);
|
||||
const onboardingSkillPath = readNestedString(payload.onboarding, ["skill", "path"]);
|
||||
const onboardingInstallPath = readNestedString(payload.onboarding, ["skill", "installPath"]);
|
||||
return (
|
||||
<div className="mx-auto max-w-xl py-10">
|
||||
<div className="rounded-lg border border-border bg-card p-6">
|
||||
@@ -139,6 +170,21 @@ export function InviteLandingPage() {
|
||||
<div className="mt-4 rounded-md border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
Request ID: <span className="font-mono">{payload.id}</span>
|
||||
</div>
|
||||
{claimSecret && claimApiKeyPath && (
|
||||
<div className="mt-3 space-y-1 rounded-md border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
<p className="font-medium text-foreground">One-time claim secret (save now)</p>
|
||||
<p className="font-mono break-all">{claimSecret}</p>
|
||||
<p className="font-mono break-all">POST {claimApiKeyPath}</p>
|
||||
</div>
|
||||
)}
|
||||
{(onboardingSkillUrl || onboardingSkillPath || onboardingInstallPath) && (
|
||||
<div className="mt-3 space-y-1 rounded-md border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
<p className="font-medium text-foreground">Paperclip skill bootstrap</p>
|
||||
{onboardingSkillUrl && <p className="font-mono break-all">GET {onboardingSkillUrl}</p>}
|
||||
{!onboardingSkillUrl && onboardingSkillPath && <p className="font-mono break-all">GET {onboardingSkillPath}</p>}
|
||||
{onboardingInstallPath && <p className="font-mono break-all">Install to {onboardingInstallPath}</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -182,13 +228,18 @@ export function InviteLandingPage() {
|
||||
/>
|
||||
</label>
|
||||
<label className="block text-sm">
|
||||
<span className="mb-1 block text-muted-foreground">Adapter type (optional)</span>
|
||||
<input
|
||||
<span className="mb-1 block text-muted-foreground">Adapter type</span>
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
|
||||
value={adapterType}
|
||||
onChange={(event) => setAdapterType(event.target.value)}
|
||||
placeholder="process"
|
||||
/>
|
||||
onChange={(event) => setAdapterType(event.target.value as AgentAdapterType)}
|
||||
>
|
||||
{joinAdapterOptions.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{adapterLabels[type]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block text-sm">
|
||||
<span className="mb-1 block text-muted-foreground">Capabilities (optional)</span>
|
||||
|
||||
Reference in New Issue
Block a user