Mikkel Georgsen
cb5d14d6f8
- TERM-10: Companies.tsx breadcrumb uses VOCAB.companies, loading/delete text uses VOCAB - TERM-11: InstanceSettings.tsx adds VOCAB import, uses VOCAB.company/companies - TERM-12: Costs.tsx adds VOCAB import and SCOPE_LABELS map, replaces hardcoded company strings - TERM-13: CompanyImport.tsx uses VOCAB.appName, VOCAB.company, VOCAB.board throughout - TERM-17: IssuesList.tsx (component) title='Board view' -> 'Kanban view' - Dashboard.tsx: 'awaiting board review' -> 'awaiting owner review' - CompanySettings.tsx: 'No company selected' uses VOCAB.company - ReportsToPicker.tsx: adds VOCAB import, default label uses VOCAB.ceo not hardcoded 'CEO'
662 lines
24 KiB
TypeScript
662 lines
24 KiB
TypeScript
import { ChangeEvent, useEffect, useState } from "react";
|
|
import { VOCAB } from "@paperclipai/branding";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { useToast } from "../context/ToastContext";
|
|
import { companiesApi } from "../api/companies";
|
|
import { accessApi } from "../api/access";
|
|
import { assetsApi } from "../api/assets";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Settings, Check, Download, Upload } from "lucide-react";
|
|
import { CompanyPatternIcon } from "../components/CompanyPatternIcon";
|
|
import {
|
|
Field,
|
|
ToggleField,
|
|
HintIcon
|
|
} from "../components/agent-config-primitives";
|
|
|
|
type AgentSnippetInput = {
|
|
onboardingTextUrl: string;
|
|
connectionCandidates?: string[] | null;
|
|
testResolutionUrl?: string | null;
|
|
};
|
|
|
|
export function CompanySettings() {
|
|
const {
|
|
companies,
|
|
selectedCompany,
|
|
selectedCompanyId,
|
|
setSelectedCompanyId
|
|
} = useCompany();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
const { pushToast } = useToast();
|
|
const queryClient = useQueryClient();
|
|
// General settings local state
|
|
const [companyName, setCompanyName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [brandColor, setBrandColor] = useState("");
|
|
const [logoUrl, setLogoUrl] = useState("");
|
|
const [logoUploadError, setLogoUploadError] = useState<string | null>(null);
|
|
|
|
// Sync local state from selected company
|
|
useEffect(() => {
|
|
if (!selectedCompany) return;
|
|
setCompanyName(selectedCompany.name);
|
|
setDescription(selectedCompany.description ?? "");
|
|
setBrandColor(selectedCompany.brandColor ?? "");
|
|
setLogoUrl(selectedCompany.logoUrl ?? "");
|
|
}, [selectedCompany]);
|
|
|
|
const [inviteError, setInviteError] = useState<string | null>(null);
|
|
const [inviteSnippet, setInviteSnippet] = useState<string | null>(null);
|
|
const [snippetCopied, setSnippetCopied] = useState(false);
|
|
const [snippetCopyDelightId, setSnippetCopyDelightId] = useState(0);
|
|
|
|
const generalDirty =
|
|
!!selectedCompany &&
|
|
(companyName !== selectedCompany.name ||
|
|
description !== (selectedCompany.description ?? "") ||
|
|
brandColor !== (selectedCompany.brandColor ?? ""));
|
|
|
|
const generalMutation = useMutation({
|
|
mutationFn: (data: {
|
|
name: string;
|
|
description: string | null;
|
|
brandColor: string | null;
|
|
}) => companiesApi.update(selectedCompanyId!, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
|
}
|
|
});
|
|
|
|
const settingsMutation = useMutation({
|
|
mutationFn: (requireApproval: boolean) =>
|
|
companiesApi.update(selectedCompanyId!, {
|
|
requireBoardApprovalForNewAgents: requireApproval
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
|
}
|
|
});
|
|
|
|
const inviteMutation = useMutation({
|
|
mutationFn: () =>
|
|
accessApi.createOpenClawInvitePrompt(selectedCompanyId!),
|
|
onSuccess: async (invite) => {
|
|
setInviteError(null);
|
|
const base = window.location.origin.replace(/\/+$/, "");
|
|
const onboardingTextLink =
|
|
invite.onboardingTextUrl ??
|
|
invite.onboardingTextPath ??
|
|
`/api/invites/${invite.token}/onboarding.txt`;
|
|
const absoluteUrl = onboardingTextLink.startsWith("http")
|
|
? onboardingTextLink
|
|
: `${base}${onboardingTextLink}`;
|
|
setSnippetCopied(false);
|
|
setSnippetCopyDelightId(0);
|
|
let snippet: string;
|
|
try {
|
|
const manifest = await accessApi.getInviteOnboarding(invite.token);
|
|
snippet = buildAgentSnippet({
|
|
onboardingTextUrl: absoluteUrl,
|
|
connectionCandidates:
|
|
manifest.onboarding.connectivity?.connectionCandidates ?? null,
|
|
testResolutionUrl:
|
|
manifest.onboarding.connectivity?.testResolutionEndpoint?.url ??
|
|
null
|
|
});
|
|
} catch {
|
|
snippet = buildAgentSnippet({
|
|
onboardingTextUrl: absoluteUrl,
|
|
connectionCandidates: null,
|
|
testResolutionUrl: null
|
|
});
|
|
}
|
|
setInviteSnippet(snippet);
|
|
try {
|
|
await navigator.clipboard.writeText(snippet);
|
|
setSnippetCopied(true);
|
|
setSnippetCopyDelightId((prev) => prev + 1);
|
|
setTimeout(() => setSnippetCopied(false), 2000);
|
|
} catch {
|
|
/* clipboard may not be available */
|
|
}
|
|
queryClient.invalidateQueries({
|
|
queryKey: queryKeys.sidebarBadges(selectedCompanyId!)
|
|
});
|
|
},
|
|
onError: (err) => {
|
|
setInviteError(
|
|
err instanceof Error ? err.message : "Failed to create invite"
|
|
);
|
|
}
|
|
});
|
|
|
|
const syncLogoState = (nextLogoUrl: string | null) => {
|
|
setLogoUrl(nextLogoUrl ?? "");
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
|
};
|
|
|
|
const logoUploadMutation = useMutation({
|
|
mutationFn: (file: File) =>
|
|
assetsApi
|
|
.uploadCompanyLogo(selectedCompanyId!, file)
|
|
.then((asset) => companiesApi.update(selectedCompanyId!, { logoAssetId: asset.assetId })),
|
|
onSuccess: (company) => {
|
|
syncLogoState(company.logoUrl);
|
|
setLogoUploadError(null);
|
|
}
|
|
});
|
|
|
|
const clearLogoMutation = useMutation({
|
|
mutationFn: () => companiesApi.update(selectedCompanyId!, { logoAssetId: null }),
|
|
onSuccess: (company) => {
|
|
setLogoUploadError(null);
|
|
syncLogoState(company.logoUrl);
|
|
}
|
|
});
|
|
|
|
function handleLogoFileChange(event: ChangeEvent<HTMLInputElement>) {
|
|
const file = event.target.files?.[0] ?? null;
|
|
event.currentTarget.value = "";
|
|
if (!file) return;
|
|
setLogoUploadError(null);
|
|
logoUploadMutation.mutate(file);
|
|
}
|
|
|
|
function handleClearLogo() {
|
|
clearLogoMutation.mutate();
|
|
}
|
|
|
|
useEffect(() => {
|
|
setInviteError(null);
|
|
setInviteSnippet(null);
|
|
setSnippetCopied(false);
|
|
setSnippetCopyDelightId(0);
|
|
}, [selectedCompanyId]);
|
|
|
|
const archiveMutation = useMutation({
|
|
mutationFn: ({
|
|
companyId,
|
|
nextCompanyId
|
|
}: {
|
|
companyId: string;
|
|
nextCompanyId: string | null;
|
|
}) => companiesApi.archive(companyId).then(() => ({ nextCompanyId })),
|
|
onSuccess: async ({ nextCompanyId }) => {
|
|
if (nextCompanyId) {
|
|
setSelectedCompanyId(nextCompanyId);
|
|
}
|
|
await queryClient.invalidateQueries({
|
|
queryKey: queryKeys.companies.all
|
|
});
|
|
await queryClient.invalidateQueries({
|
|
queryKey: queryKeys.companies.stats
|
|
});
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([
|
|
{ label: selectedCompany?.name ?? VOCAB.company, href: "/dashboard" },
|
|
{ label: "Settings" }
|
|
]);
|
|
}, [setBreadcrumbs, selectedCompany?.name]);
|
|
|
|
if (!selectedCompany) {
|
|
return (
|
|
<div className="text-sm text-muted-foreground">
|
|
{`No ${VOCAB.company.toLowerCase()} selected. Select a ${VOCAB.company.toLowerCase()} from the switcher above.`}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function handleSaveGeneral() {
|
|
generalMutation.mutate({
|
|
name: companyName.trim(),
|
|
description: description.trim() || null,
|
|
brandColor: brandColor || null
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-2xl space-y-6">
|
|
<div className="flex items-center gap-2">
|
|
<Settings className="h-5 w-5 text-muted-foreground" />
|
|
<h1 className="text-lg font-semibold">{VOCAB.company} Settings</h1>
|
|
</div>
|
|
|
|
{/* General */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
General
|
|
</div>
|
|
<div className="space-y-3 rounded-md border border-border px-4 py-4">
|
|
<Field label={`${VOCAB.company} name`} hint={`The display name for your ${VOCAB.company.toLowerCase()}.`}>
|
|
<input
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
|
type="text"
|
|
value={companyName}
|
|
onChange={(e) => setCompanyName(e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field
|
|
label="Description"
|
|
hint="Optional description shown in the company profile."
|
|
>
|
|
<input
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
|
type="text"
|
|
value={description}
|
|
placeholder="Optional company description"
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Appearance */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Appearance
|
|
</div>
|
|
<div className="space-y-3 rounded-md border border-border px-4 py-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="shrink-0">
|
|
<CompanyPatternIcon
|
|
companyName={companyName || selectedCompany.name}
|
|
logoUrl={logoUrl || null}
|
|
brandColor={brandColor || null}
|
|
className="rounded-[14px]"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 space-y-3">
|
|
<Field
|
|
label="Logo"
|
|
hint="Upload a PNG, JPEG, WEBP, GIF, or SVG logo image."
|
|
>
|
|
<div className="space-y-2">
|
|
<input
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml"
|
|
onChange={handleLogoFileChange}
|
|
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none file:mr-4 file:rounded-md file:border-0 file:bg-muted file:px-2.5 file:py-1 file:text-xs"
|
|
/>
|
|
{logoUrl && (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={handleClearLogo}
|
|
disabled={clearLogoMutation.isPending}
|
|
>
|
|
{clearLogoMutation.isPending ? "Removing..." : "Remove logo"}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{(logoUploadMutation.isError || logoUploadError) && (
|
|
<span className="text-xs text-destructive">
|
|
{logoUploadError ??
|
|
(logoUploadMutation.error instanceof Error
|
|
? logoUploadMutation.error.message
|
|
: "Logo upload failed")}
|
|
</span>
|
|
)}
|
|
{clearLogoMutation.isError && (
|
|
<span className="text-xs text-destructive">
|
|
{clearLogoMutation.error.message}
|
|
</span>
|
|
)}
|
|
{logoUploadMutation.isPending && (
|
|
<span className="text-xs text-muted-foreground">Uploading logo...</span>
|
|
)}
|
|
</div>
|
|
</Field>
|
|
<Field
|
|
label="Brand color"
|
|
hint="Sets the hue for the company icon. Leave empty for auto-generated color."
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={brandColor || "#6366f1"}
|
|
onChange={(e) => setBrandColor(e.target.value)}
|
|
className="h-8 w-8 cursor-pointer rounded border border-border bg-transparent p-0"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={brandColor}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
if (v === "" || /^#[0-9a-fA-F]{0,6}$/.test(v)) {
|
|
setBrandColor(v);
|
|
}
|
|
}}
|
|
placeholder="Auto"
|
|
className="w-28 rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm font-mono outline-none"
|
|
/>
|
|
{brandColor && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setBrandColor("")}
|
|
className="text-xs text-muted-foreground"
|
|
>
|
|
Clear
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save button for General + Appearance */}
|
|
{generalDirty && (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={handleSaveGeneral}
|
|
disabled={generalMutation.isPending || !companyName.trim()}
|
|
>
|
|
{generalMutation.isPending ? "Saving..." : "Save changes"}
|
|
</Button>
|
|
{generalMutation.isSuccess && (
|
|
<span className="text-xs text-muted-foreground">Saved</span>
|
|
)}
|
|
{generalMutation.isError && (
|
|
<span className="text-xs text-destructive">
|
|
{generalMutation.error instanceof Error
|
|
? generalMutation.error.message
|
|
: "Failed to save"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Staffing */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Staffing
|
|
</div>
|
|
<div className="rounded-md border border-border px-4 py-3">
|
|
<ToggleField
|
|
label={`Require ${VOCAB.board.toLowerCase()} approval for new ${VOCAB.hire.toLowerCase()}s`}
|
|
hint={`New agent additions stay pending until approved by ${VOCAB.board.toLowerCase()}.`}
|
|
checked={!!selectedCompany.requireBoardApprovalForNewAgents}
|
|
onChange={(v) => settingsMutation.mutate(v)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invites */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Invites
|
|
</div>
|
|
<div className="space-y-3 rounded-md border border-border px-4 py-4">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs text-muted-foreground">
|
|
Generate an OpenClaw agent invite snippet.
|
|
</span>
|
|
<HintIcon text="Creates a short-lived OpenClaw agent invite and renders a copy-ready prompt." />
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => inviteMutation.mutate()}
|
|
disabled={inviteMutation.isPending}
|
|
>
|
|
{inviteMutation.isPending
|
|
? "Generating..."
|
|
: "Generate OpenClaw Invite Prompt"}
|
|
</Button>
|
|
</div>
|
|
{inviteError && (
|
|
<p className="text-sm text-destructive">{inviteError}</p>
|
|
)}
|
|
{inviteSnippet && (
|
|
<div className="rounded-md border border-border bg-muted/30 p-2">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="text-xs text-muted-foreground">
|
|
OpenClaw Invite Prompt
|
|
</div>
|
|
{snippetCopied && (
|
|
<span
|
|
key={snippetCopyDelightId}
|
|
className="flex items-center gap-1 text-xs text-green-600 animate-pulse"
|
|
>
|
|
<Check className="h-3 w-3" />
|
|
Copied
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-1 space-y-1.5">
|
|
<textarea
|
|
className="h-[28rem] w-full rounded-md border border-border bg-background px-2 py-1.5 font-mono text-xs outline-none"
|
|
value={inviteSnippet}
|
|
readOnly
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(inviteSnippet);
|
|
setSnippetCopied(true);
|
|
setSnippetCopyDelightId((prev) => prev + 1);
|
|
setTimeout(() => setSnippetCopied(false), 2000);
|
|
} catch {
|
|
/* clipboard may not be available */
|
|
}
|
|
}}
|
|
>
|
|
{snippetCopied ? "Copied snippet" : "Copy snippet"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Import / Export */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Company Packages
|
|
</div>
|
|
<div className="rounded-md border border-border px-4 py-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Import and export have moved to dedicated pages accessible from the{" "}
|
|
<a href="/org" className="underline hover:text-foreground">Org Chart</a> header.
|
|
</p>
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<Button size="sm" variant="outline" asChild>
|
|
<a href="/company/export">
|
|
<Download className="mr-1.5 h-3.5 w-3.5" />
|
|
Export
|
|
</a>
|
|
</Button>
|
|
<Button size="sm" variant="outline" asChild>
|
|
<a href="/company/import">
|
|
<Upload className="mr-1.5 h-3.5 w-3.5" />
|
|
Import
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Danger Zone */}
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-destructive uppercase tracking-wide">
|
|
Danger Zone
|
|
</div>
|
|
<div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Archive this company to hide it from the sidebar. This persists in
|
|
the database.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
disabled={
|
|
archiveMutation.isPending ||
|
|
selectedCompany.status === "archived"
|
|
}
|
|
onClick={() => {
|
|
if (!selectedCompanyId) return;
|
|
const confirmed = window.confirm(
|
|
`Archive company "${selectedCompany.name}"? It will be hidden from the sidebar.`
|
|
);
|
|
if (!confirmed) return;
|
|
const nextCompanyId =
|
|
companies.find(
|
|
(company) =>
|
|
company.id !== selectedCompanyId &&
|
|
company.status !== "archived"
|
|
)?.id ?? null;
|
|
archiveMutation.mutate({
|
|
companyId: selectedCompanyId,
|
|
nextCompanyId
|
|
});
|
|
}}
|
|
>
|
|
{archiveMutation.isPending
|
|
? "Archiving..."
|
|
: selectedCompany.status === "archived"
|
|
? "Already archived"
|
|
: "Archive company"}
|
|
</Button>
|
|
{archiveMutation.isError && (
|
|
<span className="text-xs text-destructive">
|
|
{archiveMutation.error instanceof Error
|
|
? archiveMutation.error.message
|
|
: "Failed to archive company"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function buildAgentSnippet(input: AgentSnippetInput) {
|
|
const candidateUrls = buildCandidateOnboardingUrls(input);
|
|
const resolutionTestUrl = buildResolutionTestUrl(input);
|
|
|
|
const candidateList =
|
|
candidateUrls.length > 0
|
|
? candidateUrls.map((u) => `- ${u}`).join("\n")
|
|
: "- (No candidate URLs available yet.)";
|
|
|
|
const connectivityBlock =
|
|
candidateUrls.length === 0
|
|
? `No candidate URLs are available. Ask your user to configure a reachable hostname in ${VOCAB.appName}, then retry.
|
|
Suggested steps:
|
|
- choose a hostname that resolves to the ${VOCAB.appName} host from your runtime
|
|
- run: pnpm paperclipai allowed-hostname <host>
|
|
- restart ${VOCAB.appName}
|
|
- verify with: curl -fsS http://<host>:3100/api/health
|
|
- regenerate this invite snippet`
|
|
: `If none are reachable, ask your user to add a reachable hostname in ${VOCAB.appName}, restart, and retry.
|
|
Suggested command:
|
|
- pnpm paperclipai allowed-hostname <host>
|
|
Then verify with: curl -fsS <base-url>/api/health`;
|
|
|
|
const resolutionLine = resolutionTestUrl
|
|
? `\nYou MUST test ${VOCAB.appName}-to-gateway reachability, call: ${resolutionTestUrl}?url=<urlencoded-gateway-url> (using the hostname that worked above). Do not assume your 172.x is necessarily reachable from ${VOCAB.appName}. Test it. `
|
|
: "";
|
|
|
|
return `You're invited to join a ${VOCAB.appName} workspace.
|
|
|
|
The URLs you should try are:
|
|
${candidateList}
|
|
|
|
Connectivity guidance:
|
|
If you are running on a different machine than ${VOCAB.appName}, ${VOCAB.appName} must be reachable at one of the hostnames used above.
|
|
Verify the hostname works from your runtime with: GET <base-url>/api/health
|
|
|
|
${connectivityBlock}
|
|
|
|
For your "agentName", just use your own agent name (OpenClaw or whatever your name is) and send it directly.
|
|
You also need to send a gateway URL that ${VOCAB.appName} can access. Check your config and include that URL.${resolutionLine}
|
|
|
|
---
|
|
|
|
This onboarding flow is for OpenClaw Gateway.
|
|
When you submit the join request, use:
|
|
- \`adapterType: "openclaw_gateway"\`
|
|
- \`agentDefaultsPayload.url\` as your \`ws://\` or \`wss://\` gateway URL
|
|
- \`agentDefaultsPayload.headers["x-openclaw-token"]\` with your gateway token
|
|
- (legacy accepted) \`agentDefaultsPayload.headers["x-openclaw-auth"]\`
|
|
- Keep device auth enabled (recommended). If \`devicePrivateKeyPem\` is omitted, ${VOCAB.appName} will generate and persist one during join so pairing approvals remain stable.
|
|
- Only use \`disableDeviceAuth=true\` for special environments where pairing cannot be completed.
|
|
|
|
Do NOT use \`/v1/responses\` or \`/hooks/*\` in this join flow.
|
|
|
|
Before you do anything, please respond to your user that you understand the instructions and you're going to work on them. Then do the step above in another session called "${VOCAB.appName.toLowerCase()}-onboarding" and then tell your user when you're done. Update your user in intermediate steps along the way so they know what's going on.
|
|
|
|
Then after you've connected to ${VOCAB.appName} (exchanged keys etc.) you MUST review and follow the onboarding instructions in onboarding.txt they give you.
|
|
|
|
`;
|
|
}
|
|
|
|
function buildCandidateOnboardingUrls(input: AgentSnippetInput): string[] {
|
|
const candidates = (input.connectionCandidates ?? [])
|
|
.map((candidate) => candidate.trim())
|
|
.filter(Boolean);
|
|
const urls = new Set<string>();
|
|
let onboardingUrl: URL | null = null;
|
|
|
|
try {
|
|
onboardingUrl = new URL(input.onboardingTextUrl);
|
|
urls.add(onboardingUrl.toString());
|
|
} catch {
|
|
const trimmed = input.onboardingTextUrl.trim();
|
|
if (trimmed) {
|
|
urls.add(trimmed);
|
|
}
|
|
}
|
|
|
|
if (!onboardingUrl) {
|
|
for (const candidate of candidates) {
|
|
urls.add(candidate);
|
|
}
|
|
return Array.from(urls);
|
|
}
|
|
|
|
const onboardingPath = `${onboardingUrl.pathname}${onboardingUrl.search}`;
|
|
for (const candidate of candidates) {
|
|
try {
|
|
const base = new URL(candidate);
|
|
urls.add(`${base.origin}${onboardingPath}`);
|
|
} catch {
|
|
urls.add(candidate);
|
|
}
|
|
}
|
|
|
|
return Array.from(urls);
|
|
}
|
|
|
|
function buildResolutionTestUrl(input: AgentSnippetInput): string | null {
|
|
const explicit = input.testResolutionUrl?.trim();
|
|
if (explicit) return explicit;
|
|
|
|
try {
|
|
const onboardingUrl = new URL(input.onboardingTextUrl);
|
|
const testPath = onboardingUrl.pathname.replace(
|
|
/\/onboarding\.txt$/,
|
|
"/test-resolution"
|
|
);
|
|
return `${onboardingUrl.origin}${testPath}`;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|