mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 18:30:39 +09:00
Add dedicated environment settings page and test-in-environment (#4798)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Agents run inside environments (local, SSH, E2B sandbox) > - Operators need to configure and manage these environments > - But environment settings were buried inside the general company settings page, making them hard to find > - Additionally, when testing an agent from the configuration form, the test always ran locally regardless of which environment was selected > - This PR moves environments into a dedicated top-level company settings section and wires the "Test Environment" button to run inside the selected environment > - The benefit is operators can find and manage environments more easily, and the test button now validates the actual environment the agent will use ## What Changed - Added a dedicated `CompanyEnvironments` settings page with its own route and sidebar entry - Updated `CompanySettingsSidebar` and `CompanySettingsNav` to include the new environments section - Modified the agent test route (`POST /agents/:id/test`) to accept an optional `environmentId` parameter - Updated all adapter `test.ts` handlers to resolve and use the specified execution target environment - Added `resolveTestExecutionTarget` to `execution-target.ts` for remote environment test resolution with cwd fallback - Moved the "Test Environment" button and its feedback display into the `NewAgent` page footer for better UX flow ## Verification - `pnpm test` — all existing and new tests pass - `pnpm typecheck` — clean - Manual: navigate to Company Settings, confirm "Environments" appears as a top-level section - Manual: configure an agent with a non-local environment, click "Test Environment", confirm the test runs inside that environment ## Risks - Low risk. UI-only routing change for the settings page. The test-in-environment change adds an optional parameter with a local fallback, so existing behavior is preserved when no environment is specified. ## Model Used Codex GPT 5.4 high via Paperclip. ## 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
This commit is contained in:
Devin Foley
GitHub
parent
3494e84a29
commit
9b99d30330
23 changed files with 1509 additions and 846 deletions
|
|
@ -27,6 +27,7 @@ import { Costs } from "./pages/Costs";
|
|||
import { Activity } from "./pages/Activity";
|
||||
import { Inbox } from "./pages/Inbox";
|
||||
import { CompanySettings } from "./pages/CompanySettings";
|
||||
import { CompanyEnvironments } from "./pages/CompanyEnvironments";
|
||||
import { CompanyAccess } from "./pages/CompanyAccess";
|
||||
import { CompanyInvites } from "./pages/CompanyInvites";
|
||||
import { CompanySkills } from "./pages/CompanySkills";
|
||||
|
|
@ -64,6 +65,7 @@ function boardRoutes() {
|
|||
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
||||
<Route path="companies" element={<Companies />} />
|
||||
<Route path="company/settings" element={<CompanySettings />} />
|
||||
<Route path="company/settings/environments" element={<CompanyEnvironments />} />
|
||||
<Route path="company/settings/access" element={<CompanyAccess />} />
|
||||
<Route path="company/settings/invites" element={<CompanyInvites />} />
|
||||
<Route path="company/export/*" element={<CompanyExport />} />
|
||||
|
|
|
|||
|
|
@ -175,7 +175,10 @@ export const agentsApi = {
|
|||
testEnvironment: (
|
||||
companyId: string,
|
||||
type: string,
|
||||
data: { adapterConfig: Record<string, unknown> },
|
||||
data: {
|
||||
adapterConfig: Record<string, unknown>;
|
||||
environmentId?: string | null;
|
||||
},
|
||||
) =>
|
||||
api.post<AdapterEnvironmentTestResult>(
|
||||
`/companies/${companyId}/adapters/${type}/test-environment`,
|
||||
|
|
|
|||
|
|
@ -70,6 +70,12 @@ type AgentConfigFormProps = {
|
|||
onDirtyChange?: (dirty: boolean) => void;
|
||||
onSaveActionChange?: (save: (() => void) | null) => void;
|
||||
onCancelActionChange?: (cancel: (() => void) | null) => void;
|
||||
onTestActionChange?: (test: (() => void) | null) => void;
|
||||
onTestActionStateChange?: (state: { disabled: boolean; pending: boolean }) => void;
|
||||
onTestFeedbackChange?: (feedback: {
|
||||
errorMessage: string | null;
|
||||
result: AdapterEnvironmentTestResult | null;
|
||||
}) => void;
|
||||
hideInlineSave?: boolean;
|
||||
showAdapterTypeField?: boolean;
|
||||
showAdapterTestEnvironmentButton?: boolean;
|
||||
|
|
@ -176,6 +182,9 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
const cards = props.sectionLayout === "cards";
|
||||
const showAdapterTypeField = props.showAdapterTypeField ?? true;
|
||||
const showAdapterTestEnvironmentButton = props.showAdapterTestEnvironmentButton ?? true;
|
||||
const showInlineAdapterTestEnvironmentButton =
|
||||
showAdapterTestEnvironmentButton && !props.onTestActionChange;
|
||||
const showInlineAdapterTestEnvironmentFeedback = !props.onTestFeedbackChange;
|
||||
const showCreateRunPolicySection = props.showCreateRunPolicySection ?? true;
|
||||
const hideInstructionsFile = props.hideInstructionsFile ?? false;
|
||||
const { selectedCompanyId } = useCompany();
|
||||
|
|
@ -398,11 +407,62 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
if (!selectedCompanyId) {
|
||||
throw new Error("Select a company to test adapter environment");
|
||||
}
|
||||
const selectedEnvironmentId = isCreate
|
||||
? val!.defaultEnvironmentId ?? null
|
||||
: eff("identity", "defaultEnvironmentId", props.agent.defaultEnvironmentId ?? null);
|
||||
return agentsApi.testEnvironment(selectedCompanyId, adapterType, {
|
||||
adapterConfig: buildAdapterConfigForTest(),
|
||||
environmentId:
|
||||
typeof selectedEnvironmentId === "string" && selectedEnvironmentId.length > 0
|
||||
? selectedEnvironmentId
|
||||
: null,
|
||||
});
|
||||
},
|
||||
});
|
||||
const testEnvironmentDisabled = testEnvironment.isPending || !selectedCompanyId;
|
||||
const triggerTestEnvironment = useCallback(() => {
|
||||
if (testEnvironmentDisabled) return;
|
||||
testEnvironment.mutate();
|
||||
}, [testEnvironment.mutate, testEnvironmentDisabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showAdapterTestEnvironmentButton || !props.onTestActionChange) return;
|
||||
props.onTestActionChange(triggerTestEnvironment);
|
||||
return () => {
|
||||
props.onTestActionChange?.(null);
|
||||
};
|
||||
}, [showAdapterTestEnvironmentButton, props.onTestActionChange, triggerTestEnvironment]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showAdapterTestEnvironmentButton || !props.onTestActionStateChange) return;
|
||||
props.onTestActionStateChange({
|
||||
disabled: testEnvironmentDisabled,
|
||||
pending: testEnvironment.isPending,
|
||||
});
|
||||
return () => {
|
||||
props.onTestActionStateChange?.({ disabled: true, pending: false });
|
||||
};
|
||||
}, [
|
||||
showAdapterTestEnvironmentButton,
|
||||
props.onTestActionStateChange,
|
||||
testEnvironmentDisabled,
|
||||
testEnvironment.isPending,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!props.onTestFeedbackChange) return;
|
||||
props.onTestFeedbackChange({
|
||||
errorMessage: testEnvironment.error instanceof Error
|
||||
? testEnvironment.error.message
|
||||
: testEnvironment.error
|
||||
? "Environment test failed"
|
||||
: null,
|
||||
result: testEnvironment.data ?? null,
|
||||
});
|
||||
return () => {
|
||||
props.onTestFeedbackChange?.({ errorMessage: null, result: null });
|
||||
};
|
||||
}, [props.onTestFeedbackChange, testEnvironment.data, testEnvironment.error]);
|
||||
|
||||
// Current model for display
|
||||
const currentModelId = isCreate
|
||||
|
|
@ -618,16 +678,16 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
? <h3 className="text-sm font-medium">Adapter</h3>
|
||||
: <span className="text-xs font-medium text-muted-foreground">Adapter</span>
|
||||
}
|
||||
{showAdapterTestEnvironmentButton && (
|
||||
{showInlineAdapterTestEnvironmentButton && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 px-2.5 text-xs"
|
||||
onClick={() => testEnvironment.mutate()}
|
||||
disabled={testEnvironment.isPending || !selectedCompanyId}
|
||||
onClick={triggerTestEnvironment}
|
||||
disabled={testEnvironmentDisabled}
|
||||
>
|
||||
{testEnvironment.isPending ? "Testing..." : "Test environment"}
|
||||
{testEnvironment.isPending ? "Testing..." : "Test"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -687,7 +747,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
</Field>
|
||||
)}
|
||||
|
||||
{testEnvironment.error && (
|
||||
{showInlineAdapterTestEnvironmentFeedback && testEnvironment.error && (
|
||||
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{testEnvironment.error instanceof Error
|
||||
? testEnvironment.error.message
|
||||
|
|
@ -695,7 +755,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{testEnvironment.data && (
|
||||
{showInlineAdapterTestEnvironmentFeedback && testEnvironment.data && (
|
||||
<AdapterEnvironmentResult result={testEnvironment.data} />
|
||||
)}
|
||||
|
||||
|
|
@ -1047,7 +1107,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
);
|
||||
}
|
||||
|
||||
function AdapterEnvironmentResult({ result }: { result: AdapterEnvironmentTestResult }) {
|
||||
export function AdapterEnvironmentResult({ result }: { result: AdapterEnvironmentTestResult }) {
|
||||
const statusLabel =
|
||||
result.status === "pass" ? "Passed" : result.status === "warn" ? "Warnings" : "Failed";
|
||||
const statusClass =
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ describe("CompanySettingsSidebar", () => {
|
|||
expect(container.textContent).toContain("Paperclip");
|
||||
expect(container.textContent).toContain("Company Settings");
|
||||
expect(container.textContent).toContain("General");
|
||||
expect(container.textContent).toContain("Environments");
|
||||
expect(container.textContent).toContain("Access");
|
||||
expect(container.textContent).toContain("Invites");
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
|
|
@ -114,6 +115,13 @@ describe("CompanySettingsSidebar", () => {
|
|||
end: true,
|
||||
}),
|
||||
);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
to: "/company/settings/environments",
|
||||
label: "Environments",
|
||||
end: true,
|
||||
}),
|
||||
);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
to: "/company/settings/access",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronLeft, MailPlus, Settings, Shield, SlidersHorizontal } from "lucide-react";
|
||||
import { ChevronLeft, MailPlus, MonitorCog, Settings, Shield, SlidersHorizontal } from "lucide-react";
|
||||
import { sidebarBadgesApi } from "@/api/sidebarBadges";
|
||||
import { ApiError } from "@/api/client";
|
||||
import { Link } from "@/lib/router";
|
||||
|
|
@ -54,6 +54,12 @@ export function CompanySettingsSidebar() {
|
|||
<nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide px-3 py-2">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<SidebarNavItem to="/company/settings" label="General" icon={SlidersHorizontal} end />
|
||||
<SidebarNavItem
|
||||
to="/company/settings/environments"
|
||||
label="Environments"
|
||||
icon={MonitorCog}
|
||||
end
|
||||
/>
|
||||
<SidebarNavItem
|
||||
to="/company/settings/access"
|
||||
label="Access"
|
||||
|
|
|
|||
|
|
@ -58,6 +58,8 @@ describe("CompanySettingsNav", () => {
|
|||
it("maps company settings routes to the expected shared tab value", () => {
|
||||
expect(getCompanySettingsTab("/company/settings")).toBe("general");
|
||||
expect(getCompanySettingsTab("/PAP/company/settings")).toBe("general");
|
||||
expect(getCompanySettingsTab("/company/settings/environments")).toBe("environments");
|
||||
expect(getCompanySettingsTab("/PAP/company/settings/environments")).toBe("environments");
|
||||
expect(getCompanySettingsTab("/company/settings/access")).toBe("access");
|
||||
expect(getCompanySettingsTab("/PAP/company/settings/access")).toBe("access");
|
||||
expect(getCompanySettingsTab("/company/settings/invites")).toBe("invites");
|
||||
|
|
@ -77,6 +79,7 @@ describe("CompanySettingsNav", () => {
|
|||
value: "access",
|
||||
items: [
|
||||
{ value: "general", label: "General" },
|
||||
{ value: "environments", label: "Environments" },
|
||||
{ value: "access", label: "Access" },
|
||||
{ value: "invites", label: "Invites" },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useLocation, useNavigate } from "@/lib/router";
|
|||
|
||||
const items = [
|
||||
{ value: "general", label: "General", href: "/company/settings" },
|
||||
{ value: "environments", label: "Environments", href: "/company/settings/environments" },
|
||||
{ value: "access", label: "Access", href: "/company/settings/access" },
|
||||
{ value: "invites", label: "Invites", href: "/company/settings/invites" },
|
||||
] as const;
|
||||
|
|
@ -11,6 +12,10 @@ const items = [
|
|||
type CompanySettingsTab = (typeof items)[number]["value"];
|
||||
|
||||
export function getCompanySettingsTab(pathname: string): CompanySettingsTab {
|
||||
if (pathname.includes("/company/settings/environments")) {
|
||||
return "environments";
|
||||
}
|
||||
|
||||
if (pathname.includes("/company/settings/access")) {
|
||||
return "access";
|
||||
}
|
||||
|
|
|
|||
805
ui/src/pages/CompanyEnvironments.tsx
Normal file
805
ui/src/pages/CompanyEnvironments.tsx
Normal file
|
|
@ -0,0 +1,805 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
AGENT_ADAPTER_TYPES,
|
||||
getAdapterEnvironmentSupport,
|
||||
type Environment,
|
||||
type EnvironmentProbeResult,
|
||||
type JsonSchema,
|
||||
} from "@paperclipai/shared";
|
||||
import { Check, Settings } from "lucide-react";
|
||||
import { environmentsApi } from "@/api/environments";
|
||||
import { instanceSettingsApi } from "@/api/instanceSettings";
|
||||
import { secretsApi } from "@/api/secrets";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { JsonSchemaForm, getDefaultValues, validateJsonSchemaForm } from "@/components/JsonSchemaForm";
|
||||
import { useBreadcrumbs } from "@/context/BreadcrumbContext";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useToast } from "@/context/ToastContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import {
|
||||
Field,
|
||||
ToggleField,
|
||||
adapterLabels,
|
||||
} from "../components/agent-config-primitives";
|
||||
|
||||
type EnvironmentFormState = {
|
||||
name: string;
|
||||
description: string;
|
||||
driver: "local" | "ssh" | "sandbox";
|
||||
sshHost: string;
|
||||
sshPort: string;
|
||||
sshUsername: string;
|
||||
sshRemoteWorkspacePath: string;
|
||||
sshPrivateKey: string;
|
||||
sshPrivateKeySecretId: string;
|
||||
sshKnownHosts: string;
|
||||
sshStrictHostKeyChecking: boolean;
|
||||
sandboxProvider: string;
|
||||
sandboxConfig: Record<string, unknown>;
|
||||
};
|
||||
|
||||
const ENVIRONMENT_SUPPORT_ROWS = AGENT_ADAPTER_TYPES.map((adapterType) => ({
|
||||
adapterType,
|
||||
support: getAdapterEnvironmentSupport(adapterType),
|
||||
}));
|
||||
|
||||
function buildEnvironmentPayload(form: EnvironmentFormState) {
|
||||
return {
|
||||
name: form.name.trim(),
|
||||
description: form.description.trim() || null,
|
||||
driver: form.driver,
|
||||
config:
|
||||
form.driver === "ssh"
|
||||
? {
|
||||
host: form.sshHost.trim(),
|
||||
port: Number.parseInt(form.sshPort || "22", 10) || 22,
|
||||
username: form.sshUsername.trim(),
|
||||
remoteWorkspacePath: form.sshRemoteWorkspacePath.trim(),
|
||||
privateKey: form.sshPrivateKey.trim() || null,
|
||||
privateKeySecretRef:
|
||||
form.sshPrivateKey.trim().length > 0 || !form.sshPrivateKeySecretId
|
||||
? null
|
||||
: { type: "secret_ref" as const, secretId: form.sshPrivateKeySecretId, version: "latest" as const },
|
||||
knownHosts: form.sshKnownHosts.trim() || null,
|
||||
strictHostKeyChecking: form.sshStrictHostKeyChecking,
|
||||
}
|
||||
: form.driver === "sandbox"
|
||||
? {
|
||||
provider: form.sandboxProvider.trim(),
|
||||
...form.sandboxConfig,
|
||||
}
|
||||
: {},
|
||||
} as const;
|
||||
}
|
||||
|
||||
function createEmptyEnvironmentForm(): EnvironmentFormState {
|
||||
return {
|
||||
name: "",
|
||||
description: "",
|
||||
driver: "ssh",
|
||||
sshHost: "",
|
||||
sshPort: "22",
|
||||
sshUsername: "",
|
||||
sshRemoteWorkspacePath: "",
|
||||
sshPrivateKey: "",
|
||||
sshPrivateKeySecretId: "",
|
||||
sshKnownHosts: "",
|
||||
sshStrictHostKeyChecking: true,
|
||||
sandboxProvider: "",
|
||||
sandboxConfig: {},
|
||||
};
|
||||
}
|
||||
|
||||
function readSshConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
return {
|
||||
host: typeof config.host === "string" ? config.host : "",
|
||||
port:
|
||||
typeof config.port === "number"
|
||||
? String(config.port)
|
||||
: typeof config.port === "string"
|
||||
? config.port
|
||||
: "22",
|
||||
username: typeof config.username === "string" ? config.username : "",
|
||||
remoteWorkspacePath:
|
||||
typeof config.remoteWorkspacePath === "string" ? config.remoteWorkspacePath : "",
|
||||
privateKey: "",
|
||||
privateKeySecretId:
|
||||
config.privateKeySecretRef &&
|
||||
typeof config.privateKeySecretRef === "object" &&
|
||||
!Array.isArray(config.privateKeySecretRef) &&
|
||||
typeof (config.privateKeySecretRef as { secretId?: unknown }).secretId === "string"
|
||||
? String((config.privateKeySecretRef as { secretId: string }).secretId)
|
||||
: "",
|
||||
knownHosts: typeof config.knownHosts === "string" ? config.knownHosts : "",
|
||||
strictHostKeyChecking:
|
||||
typeof config.strictHostKeyChecking === "boolean"
|
||||
? config.strictHostKeyChecking
|
||||
: true,
|
||||
};
|
||||
}
|
||||
|
||||
function readSandboxConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
const { provider: rawProvider, ...providerConfig } = config;
|
||||
return {
|
||||
provider: typeof rawProvider === "string" && rawProvider.trim().length > 0
|
||||
? rawProvider
|
||||
: "fake",
|
||||
config: providerConfig,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeJsonSchema(schema: unknown): JsonSchema | null {
|
||||
return schema && typeof schema === "object" && !Array.isArray(schema)
|
||||
? schema as JsonSchema
|
||||
: null;
|
||||
}
|
||||
|
||||
function summarizeSandboxConfig(config: Record<string, unknown>): string | null {
|
||||
for (const key of ["template", "image", "region", "workspacePath"]) {
|
||||
const value = config[key];
|
||||
if (typeof value === "string" && value.trim().length > 0) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function SupportMark({ supported }: { supported: boolean }) {
|
||||
return supported ? (
|
||||
<span className="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
|
||||
<Check className="h-3 w-3" />
|
||||
Yes
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">No</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompanyEnvironments() {
|
||||
const { selectedCompany, selectedCompanyId } = useCompany();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const { pushToast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [editingEnvironmentId, setEditingEnvironmentId] = useState<string | null>(null);
|
||||
const [environmentForm, setEnvironmentForm] = useState<EnvironmentFormState>(createEmptyEnvironmentForm);
|
||||
const [probeResults, setProbeResults] = useState<Record<string, EnvironmentProbeResult | null>>({});
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbs([
|
||||
{ label: selectedCompany?.name ?? "Company", href: "/dashboard" },
|
||||
{ label: "Settings", href: "/company/settings" },
|
||||
{ label: "Environments" },
|
||||
]);
|
||||
}, [selectedCompany?.name, setBreadcrumbs]);
|
||||
|
||||
const { data: experimentalSettings } = useQuery({
|
||||
queryKey: queryKeys.instance.experimentalSettings,
|
||||
queryFn: () => instanceSettingsApi.getExperimental(),
|
||||
retry: false,
|
||||
});
|
||||
const environmentsEnabled = experimentalSettings?.enableEnvironments === true;
|
||||
|
||||
const { data: environments } = useQuery({
|
||||
queryKey: selectedCompanyId ? queryKeys.environments.list(selectedCompanyId) : ["environments", "none"],
|
||||
queryFn: () => environmentsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId) && environmentsEnabled,
|
||||
});
|
||||
const { data: environmentCapabilities } = useQuery({
|
||||
queryKey: selectedCompanyId ? ["environment-capabilities", selectedCompanyId] : ["environment-capabilities", "none"],
|
||||
queryFn: () => environmentsApi.capabilities(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId) && environmentsEnabled,
|
||||
});
|
||||
|
||||
const { data: secrets } = useQuery({
|
||||
queryKey: selectedCompanyId ? ["company-secrets", selectedCompanyId] : ["company-secrets", "none"],
|
||||
queryFn: () => secretsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId),
|
||||
});
|
||||
|
||||
const environmentMutation = useMutation({
|
||||
mutationFn: async (form: EnvironmentFormState) => {
|
||||
const body = buildEnvironmentPayload(form);
|
||||
|
||||
if (editingEnvironmentId) {
|
||||
return await environmentsApi.update(editingEnvironmentId, body);
|
||||
}
|
||||
|
||||
return await environmentsApi.create(selectedCompanyId!, body);
|
||||
},
|
||||
onSuccess: async (environment) => {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.environments.list(selectedCompanyId!),
|
||||
});
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
pushToast({
|
||||
title: editingEnvironmentId ? "Environment updated" : "Environment created",
|
||||
body: `${environment.name} is ready.`,
|
||||
tone: "success",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
pushToast({
|
||||
title: "Failed to save environment",
|
||||
body: error instanceof Error ? error.message : "Environment save failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const environmentProbeMutation = useMutation({
|
||||
mutationFn: async (environmentId: string) => await environmentsApi.probe(environmentId),
|
||||
onSuccess: (probe, environmentId) => {
|
||||
setProbeResults((current) => ({
|
||||
...current,
|
||||
[environmentId]: probe,
|
||||
}));
|
||||
pushToast({
|
||||
title: probe.ok ? "Environment probe passed" : "Environment probe failed",
|
||||
body: probe.summary,
|
||||
tone: probe.ok ? "success" : "error",
|
||||
});
|
||||
},
|
||||
onError: (error, environmentId) => {
|
||||
const failedEnvironment = (environments ?? []).find((environment) => environment.id === environmentId);
|
||||
setProbeResults((current) => ({
|
||||
...current,
|
||||
[environmentId]: {
|
||||
ok: false,
|
||||
driver: failedEnvironment?.driver ?? "local",
|
||||
summary: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
details: null,
|
||||
},
|
||||
}));
|
||||
pushToast({
|
||||
title: "Environment probe failed",
|
||||
body: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const draftEnvironmentProbeMutation = useMutation({
|
||||
mutationFn: async (form: EnvironmentFormState) => {
|
||||
const body = buildEnvironmentPayload(form);
|
||||
return await environmentsApi.probeConfig(selectedCompanyId!, body);
|
||||
},
|
||||
onSuccess: (probe) => {
|
||||
pushToast({
|
||||
title: probe.ok ? "Draft probe passed" : "Draft probe failed",
|
||||
body: probe.summary,
|
||||
tone: probe.ok ? "success" : "error",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
pushToast({
|
||||
title: "Draft probe failed",
|
||||
body: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
setProbeResults({});
|
||||
}, [selectedCompanyId]);
|
||||
|
||||
function handleEditEnvironment(environment: Environment) {
|
||||
setEditingEnvironmentId(environment.id);
|
||||
if (environment.driver === "ssh") {
|
||||
const ssh = readSshConfig(environment);
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "ssh",
|
||||
sshHost: ssh.host,
|
||||
sshPort: ssh.port,
|
||||
sshUsername: ssh.username,
|
||||
sshRemoteWorkspacePath: ssh.remoteWorkspacePath,
|
||||
sshPrivateKey: ssh.privateKey,
|
||||
sshPrivateKeySecretId: ssh.privateKeySecretId,
|
||||
sshKnownHosts: ssh.knownHosts,
|
||||
sshStrictHostKeyChecking: ssh.strictHostKeyChecking,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (environment.driver === "sandbox") {
|
||||
const sandbox = readSandboxConfig(environment);
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "sandbox",
|
||||
sandboxProvider: sandbox.provider,
|
||||
sandboxConfig: sandbox.config,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "local",
|
||||
});
|
||||
}
|
||||
|
||||
function handleCancelEnvironmentEdit() {
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
}
|
||||
|
||||
const discoveredPluginSandboxProviders = Object.entries(environmentCapabilities?.sandboxProviders ?? {})
|
||||
.filter(([provider, capability]) => provider !== "fake" && capability.supportsRunExecution)
|
||||
.map(([provider, capability]) => ({
|
||||
provider,
|
||||
displayName: capability.displayName || provider,
|
||||
description: capability.description,
|
||||
configSchema: normalizeJsonSchema(capability.configSchema),
|
||||
}))
|
||||
.sort((left, right) => left.displayName.localeCompare(right.displayName));
|
||||
const sandboxCreationEnabled = discoveredPluginSandboxProviders.length > 0;
|
||||
const sandboxSupportVisible = sandboxCreationEnabled;
|
||||
const pluginSandboxProviders =
|
||||
environmentForm.sandboxProvider.trim().length > 0 &&
|
||||
environmentForm.sandboxProvider !== "fake" &&
|
||||
!discoveredPluginSandboxProviders.some((provider) => provider.provider === environmentForm.sandboxProvider)
|
||||
? [
|
||||
...discoveredPluginSandboxProviders,
|
||||
{ provider: environmentForm.sandboxProvider, displayName: environmentForm.sandboxProvider, description: undefined, configSchema: null },
|
||||
]
|
||||
: discoveredPluginSandboxProviders;
|
||||
|
||||
const selectedSandboxProvider = pluginSandboxProviders.find(
|
||||
(provider) => provider.provider === environmentForm.sandboxProvider,
|
||||
) ?? null;
|
||||
const selectedSandboxSchema = selectedSandboxProvider?.configSchema ?? null;
|
||||
const sandboxConfigErrors =
|
||||
environmentForm.driver === "sandbox" && selectedSandboxSchema
|
||||
? validateJsonSchemaForm(selectedSandboxSchema as any, environmentForm.sandboxConfig)
|
||||
: {};
|
||||
|
||||
useEffect(() => {
|
||||
if (environmentForm.driver !== "sandbox") return;
|
||||
if (environmentForm.sandboxProvider.trim().length > 0 && environmentForm.sandboxProvider !== "fake") return;
|
||||
const firstProvider = discoveredPluginSandboxProviders[0]?.provider;
|
||||
if (!firstProvider) return;
|
||||
const firstSchema = discoveredPluginSandboxProviders[0]?.configSchema;
|
||||
setEnvironmentForm((current) => (
|
||||
current.driver !== "sandbox" || (current.sandboxProvider.trim().length > 0 && current.sandboxProvider !== "fake")
|
||||
? current
|
||||
: {
|
||||
...current,
|
||||
sandboxProvider: firstProvider,
|
||||
sandboxConfig: firstSchema ? getDefaultValues(firstSchema as any) : {},
|
||||
}
|
||||
));
|
||||
}, [discoveredPluginSandboxProviders, environmentForm.driver, environmentForm.sandboxProvider]);
|
||||
|
||||
const environmentFormValid =
|
||||
environmentForm.name.trim().length > 0 &&
|
||||
(environmentForm.driver !== "ssh" ||
|
||||
(
|
||||
environmentForm.sshHost.trim().length > 0 &&
|
||||
environmentForm.sshUsername.trim().length > 0 &&
|
||||
environmentForm.sshRemoteWorkspacePath.trim().length > 0
|
||||
)) &&
|
||||
(environmentForm.driver !== "sandbox" ||
|
||||
environmentForm.sandboxProvider.trim().length > 0 &&
|
||||
environmentForm.sandboxProvider !== "fake" &&
|
||||
Object.keys(sandboxConfigErrors).length === 0);
|
||||
|
||||
if (!selectedCompanyId) {
|
||||
return <div className="text-sm text-muted-foreground">Select a company to manage environments.</div>;
|
||||
}
|
||||
|
||||
if (!environmentsEnabled) {
|
||||
return (
|
||||
<div className="max-w-3xl space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-lg font-semibold">Company Environments</h1>
|
||||
</div>
|
||||
<div className="rounded-md border border-border px-4 py-4 text-sm text-muted-foreground">
|
||||
Enable Environments in instance experimental settings to manage company execution targets.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl space-y-6" data-testid="company-settings-environments-section">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-lg font-semibold">Company Environments</h1>
|
||||
</div>
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">
|
||||
Define reusable execution targets for projects, issue workspaces, and remote-capable adapters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 rounded-md border border-border px-4 py-4">
|
||||
<div className="rounded-md border border-border/60 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
Environment choices use the same adapter support matrix as agent defaults. SSH is always available for
|
||||
remote-managed adapters, and sandbox environments appear only when a run-capable sandbox provider plugin is
|
||||
installed.
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[34rem] text-left text-xs">
|
||||
<caption className="sr-only">Environment support by adapter</caption>
|
||||
<thead className="border-b border-border text-muted-foreground">
|
||||
<tr>
|
||||
<th className="py-2 pr-3 font-medium">Adapter</th>
|
||||
<th className="px-3 py-2 font-medium">Local</th>
|
||||
<th className="px-3 py-2 font-medium">SSH</th>
|
||||
{sandboxSupportVisible ? (
|
||||
<th className="px-3 py-2 font-medium">Sandbox</th>
|
||||
) : null}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/60">
|
||||
{(environmentCapabilities?.adapters.map((support) => ({
|
||||
adapterType: support.adapterType,
|
||||
support,
|
||||
})) ?? ENVIRONMENT_SUPPORT_ROWS).map(({ adapterType, support }) => (
|
||||
<tr key={adapterType}>
|
||||
<td className="py-2 pr-3 font-medium">
|
||||
{adapterLabels[adapterType] ?? adapterType}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark supported={support.drivers.local === "supported"} />
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark supported={support.drivers.ssh === "supported"} />
|
||||
</td>
|
||||
{sandboxSupportVisible ? (
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark
|
||||
supported={discoveredPluginSandboxProviders.some((provider) =>
|
||||
support.sandboxProviders[provider.provider] === "supported")}
|
||||
/>
|
||||
</td>
|
||||
) : null}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{(environments ?? []).length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">No environments saved for this company yet.</div>
|
||||
) : (
|
||||
(environments ?? []).map((environment) => {
|
||||
const probe = probeResults[environment.id] ?? null;
|
||||
const isEditing = editingEnvironmentId === environment.id;
|
||||
return (
|
||||
<div
|
||||
key={environment.id}
|
||||
className="rounded-md border border-border/70 px-3 py-3"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium">
|
||||
{environment.name} <span className="text-muted-foreground">· {environment.driver}</span>
|
||||
</div>
|
||||
{environment.description ? (
|
||||
<div className="text-xs text-muted-foreground">{environment.description}</div>
|
||||
) : null}
|
||||
{environment.driver === "ssh" ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{typeof environment.config.host === "string" ? environment.config.host : "SSH host"} ·{" "}
|
||||
{typeof environment.config.username === "string" ? environment.config.username : "user"}
|
||||
</div>
|
||||
) : environment.driver === "sandbox" ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{(() => {
|
||||
const provider =
|
||||
typeof environment.config.provider === "string" ? environment.config.provider : "sandbox";
|
||||
const displayName =
|
||||
environmentCapabilities?.sandboxProviders?.[provider]?.displayName ?? provider;
|
||||
const summary = summarizeSandboxConfig(environment.config as Record<string, unknown>);
|
||||
return `${displayName} sandbox provider${summary ? ` · ${summary}` : ""}`;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground">Runs on this Paperclip host.</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{environment.driver !== "local" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => environmentProbeMutation.mutate(environment.id)}
|
||||
disabled={environmentProbeMutation.isPending}
|
||||
>
|
||||
{environmentProbeMutation.isPending
|
||||
? "Testing..."
|
||||
: environment.driver === "ssh"
|
||||
? "Test connection"
|
||||
: "Test provider"}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditEnvironment(environment)}
|
||||
>
|
||||
{isEditing ? "Editing" : "Edit"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{probe ? (
|
||||
<div
|
||||
className={
|
||||
probe.ok
|
||||
? "mt-3 rounded border border-green-500/30 bg-green-500/5 px-2.5 py-2 text-xs text-green-700"
|
||||
: "mt-3 rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive"
|
||||
}
|
||||
>
|
||||
<div className="font-medium">{probe.summary}</div>
|
||||
{probe.details?.error && typeof probe.details.error === "string" ? (
|
||||
<div className="mt-1 font-mono text-[11px]">{probe.details.error}</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border/60 pt-4">
|
||||
<div className="mb-3 text-sm font-medium">
|
||||
{editingEnvironmentId ? "Edit environment" : "Add environment"}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Field label="Name" hint="Operator-facing name for this execution target.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.name}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, name: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Description" hint="Optional note about what this machine is for.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.description}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, description: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Driver" hint="Local runs on this host. SSH stores a remote machine target. Sandbox stores plugin-backed provider config on the shared environment seam.">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.driver}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider:
|
||||
e.target.value === "sandbox"
|
||||
? current.sandboxProvider.trim() || discoveredPluginSandboxProviders[0]?.provider || ""
|
||||
: current.sandboxProvider,
|
||||
sandboxConfig:
|
||||
e.target.value === "sandbox"
|
||||
? (
|
||||
current.sandboxProvider.trim().length > 0 && current.driver === "sandbox"
|
||||
? current.sandboxConfig
|
||||
: discoveredPluginSandboxProviders[0]?.configSchema
|
||||
? getDefaultValues(discoveredPluginSandboxProviders[0].configSchema as any)
|
||||
: {}
|
||||
)
|
||||
: current.sandboxConfig,
|
||||
driver:
|
||||
e.target.value === "local"
|
||||
? "local"
|
||||
: e.target.value === "sandbox"
|
||||
? "sandbox"
|
||||
: "ssh",
|
||||
}))}
|
||||
>
|
||||
<option value="ssh">SSH</option>
|
||||
{sandboxCreationEnabled || environmentForm.driver === "sandbox" ? (
|
||||
<option value="sandbox">Sandbox</option>
|
||||
) : null}
|
||||
<option value="local">Local</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{environmentForm.driver === "ssh" ? (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Field label="Host" hint="DNS name or IP address for the remote machine.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.sshHost}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshHost: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Port" hint="Defaults to 22.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="number"
|
||||
min={1}
|
||||
max={65535}
|
||||
value={environmentForm.sshPort}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshPort: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Username" hint="SSH login user.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.sshUsername}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshUsername: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Remote workspace path" hint="Absolute path that Paperclip will verify during SSH connection tests.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
placeholder="/Users/paperclip/workspace"
|
||||
value={environmentForm.sshRemoteWorkspacePath}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sshRemoteWorkspacePath: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Private key" hint="Optional PEM private key. Leave blank to rely on the server's SSH agent or default keychain.">
|
||||
<div className="space-y-2">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.sshPrivateKeySecretId}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sshPrivateKeySecretId: e.target.value,
|
||||
sshPrivateKey: e.target.value ? "" : current.sshPrivateKey,
|
||||
}))}
|
||||
>
|
||||
<option value="">No saved secret</option>
|
||||
{(secrets ?? []).map((secret) => (
|
||||
<option key={secret.id} value={secret.id}>{secret.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<textarea
|
||||
className="h-32 w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-xs font-mono outline-none"
|
||||
value={environmentForm.sshPrivateKey}
|
||||
disabled={!!environmentForm.sshPrivateKeySecretId}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshPrivateKey: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Known hosts" hint="Optional known_hosts block used when strict host key checking is enabled.">
|
||||
<textarea
|
||||
className="h-32 w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-xs font-mono outline-none"
|
||||
value={environmentForm.sshKnownHosts}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshKnownHosts: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<div className="md:col-span-2">
|
||||
<ToggleField
|
||||
label="Strict host key checking"
|
||||
hint="Keep this on unless you deliberately want probe-time host key acceptance disabled."
|
||||
checked={environmentForm.sshStrictHostKeyChecking}
|
||||
onChange={(checked) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sshStrictHostKeyChecking: checked }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{environmentForm.driver === "sandbox" ? (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Field label="Provider" hint="Installed run-capable sandbox provider plugins appear here.">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.sandboxProvider}
|
||||
onChange={(e) => {
|
||||
const nextProviderKey = e.target.value;
|
||||
const nextProvider = pluginSandboxProviders.find((provider) => provider.provider === nextProviderKey) ?? null;
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider: nextProviderKey,
|
||||
sandboxConfig:
|
||||
current.sandboxProvider === nextProviderKey
|
||||
? current.sandboxConfig
|
||||
: nextProvider?.configSchema
|
||||
? getDefaultValues(nextProvider.configSchema as any)
|
||||
: {},
|
||||
}));
|
||||
}}
|
||||
>
|
||||
{pluginSandboxProviders.map((provider) => (
|
||||
<option key={provider.provider} value={provider.provider}>
|
||||
{provider.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
<div className="md:col-span-2 space-y-3">
|
||||
{selectedSandboxProvider?.description ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{selectedSandboxProvider.description}
|
||||
</div>
|
||||
) : null}
|
||||
{selectedSandboxSchema ? (
|
||||
<JsonSchemaForm
|
||||
schema={selectedSandboxSchema as any}
|
||||
values={environmentForm.sandboxConfig}
|
||||
onChange={(values) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sandboxConfig: values }))}
|
||||
errors={sandboxConfigErrors}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-md border border-border/60 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
This provider does not declare additional configuration fields.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => environmentMutation.mutate(environmentForm)}
|
||||
disabled={environmentMutation.isPending || !environmentFormValid}
|
||||
>
|
||||
{environmentMutation.isPending
|
||||
? editingEnvironmentId
|
||||
? "Saving..."
|
||||
: "Creating..."
|
||||
: editingEnvironmentId
|
||||
? "Save environment"
|
||||
: "Create environment"}
|
||||
</Button>
|
||||
{editingEnvironmentId ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleCancelEnvironmentEdit}
|
||||
disabled={environmentMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
) : null}
|
||||
{environmentForm.driver !== "local" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => draftEnvironmentProbeMutation.mutate(environmentForm)}
|
||||
disabled={draftEnvironmentProbeMutation.isPending || !environmentFormValid}
|
||||
>
|
||||
{draftEnvironmentProbeMutation.isPending ? "Testing..." : "Test draft"}
|
||||
</Button>
|
||||
) : null}
|
||||
{environmentMutation.isError ? (
|
||||
<span className="text-xs text-destructive">
|
||||
{environmentMutation.error instanceof Error
|
||||
? environmentMutation.error.message
|
||||
: "Failed to save environment"}
|
||||
</span>
|
||||
) : null}
|
||||
{draftEnvironmentProbeMutation.data ? (
|
||||
<span className={draftEnvironmentProbeMutation.data.ok ? "text-xs text-green-600" : "text-xs text-destructive"}>
|
||||
{draftEnvironmentProbeMutation.data.summary}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { createRoot } from "react-dom/client";
|
|||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { AGENT_ADAPTER_TYPES, getEnvironmentCapabilities } from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { CompanySettings } from "./CompanySettings";
|
||||
import { CompanyEnvironments } from "./CompanyEnvironments";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
||||
const mockCompaniesApi = vi.hoisted(() => ({
|
||||
|
|
@ -105,7 +105,7 @@ async function flushReact() {
|
|||
});
|
||||
}
|
||||
|
||||
describe("CompanySettings", () => {
|
||||
describe("CompanyEnvironments", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
@ -146,7 +146,7 @@ describe("CompanySettings", () => {
|
|||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<CompanySettings />
|
||||
<CompanyEnvironments />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
|
|
@ -212,7 +212,7 @@ describe("CompanySettings", () => {
|
|||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<CompanySettings />
|
||||
<CompanyEnvironments />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,18 @@
|
|||
import { ChangeEvent, useEffect, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
AGENT_ADAPTER_TYPES,
|
||||
getAdapterEnvironmentSupport,
|
||||
type Environment,
|
||||
type EnvironmentProbeResult,
|
||||
type JsonSchema,
|
||||
} from "@paperclipai/shared";
|
||||
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 { environmentsApi } from "../api/environments";
|
||||
import { instanceSettingsApi } from "../api/instanceSettings";
|
||||
import { secretsApi } from "../api/secrets";
|
||||
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 { JsonSchemaForm, getDefaultValues, validateJsonSchemaForm } from "@/components/JsonSchemaForm";
|
||||
import {
|
||||
Field,
|
||||
ToggleField,
|
||||
HintIcon,
|
||||
adapterLabels,
|
||||
} from "../components/agent-config-primitives";
|
||||
|
||||
type AgentSnippetInput = {
|
||||
|
|
@ -34,141 +21,6 @@ type AgentSnippetInput = {
|
|||
testResolutionUrl?: string | null;
|
||||
};
|
||||
|
||||
type EnvironmentFormState = {
|
||||
name: string;
|
||||
description: string;
|
||||
driver: "local" | "ssh" | "sandbox";
|
||||
sshHost: string;
|
||||
sshPort: string;
|
||||
sshUsername: string;
|
||||
sshRemoteWorkspacePath: string;
|
||||
sshPrivateKey: string;
|
||||
sshPrivateKeySecretId: string;
|
||||
sshKnownHosts: string;
|
||||
sshStrictHostKeyChecking: boolean;
|
||||
sandboxProvider: string;
|
||||
sandboxConfig: Record<string, unknown>;
|
||||
};
|
||||
|
||||
const ENVIRONMENT_SUPPORT_ROWS = AGENT_ADAPTER_TYPES.map((adapterType) => ({
|
||||
adapterType,
|
||||
support: getAdapterEnvironmentSupport(adapterType),
|
||||
}));
|
||||
|
||||
function buildEnvironmentPayload(form: EnvironmentFormState) {
|
||||
return {
|
||||
name: form.name.trim(),
|
||||
description: form.description.trim() || null,
|
||||
driver: form.driver,
|
||||
config:
|
||||
form.driver === "ssh"
|
||||
? {
|
||||
host: form.sshHost.trim(),
|
||||
port: Number.parseInt(form.sshPort || "22", 10) || 22,
|
||||
username: form.sshUsername.trim(),
|
||||
remoteWorkspacePath: form.sshRemoteWorkspacePath.trim(),
|
||||
privateKey: form.sshPrivateKey.trim() || null,
|
||||
privateKeySecretRef:
|
||||
form.sshPrivateKey.trim().length > 0 || !form.sshPrivateKeySecretId
|
||||
? null
|
||||
: { type: "secret_ref" as const, secretId: form.sshPrivateKeySecretId, version: "latest" as const },
|
||||
knownHosts: form.sshKnownHosts.trim() || null,
|
||||
strictHostKeyChecking: form.sshStrictHostKeyChecking,
|
||||
}
|
||||
: form.driver === "sandbox"
|
||||
? {
|
||||
provider: form.sandboxProvider.trim(),
|
||||
...form.sandboxConfig,
|
||||
}
|
||||
: {},
|
||||
} as const;
|
||||
}
|
||||
|
||||
function createEmptyEnvironmentForm(): EnvironmentFormState {
|
||||
return {
|
||||
name: "",
|
||||
description: "",
|
||||
driver: "ssh",
|
||||
sshHost: "",
|
||||
sshPort: "22",
|
||||
sshUsername: "",
|
||||
sshRemoteWorkspacePath: "",
|
||||
sshPrivateKey: "",
|
||||
sshPrivateKeySecretId: "",
|
||||
sshKnownHosts: "",
|
||||
sshStrictHostKeyChecking: true,
|
||||
sandboxProvider: "",
|
||||
sandboxConfig: {},
|
||||
};
|
||||
}
|
||||
|
||||
function readSshConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
return {
|
||||
host: typeof config.host === "string" ? config.host : "",
|
||||
port:
|
||||
typeof config.port === "number"
|
||||
? String(config.port)
|
||||
: typeof config.port === "string"
|
||||
? config.port
|
||||
: "22",
|
||||
username: typeof config.username === "string" ? config.username : "",
|
||||
remoteWorkspacePath:
|
||||
typeof config.remoteWorkspacePath === "string" ? config.remoteWorkspacePath : "",
|
||||
privateKey: "",
|
||||
privateKeySecretId:
|
||||
config.privateKeySecretRef &&
|
||||
typeof config.privateKeySecretRef === "object" &&
|
||||
!Array.isArray(config.privateKeySecretRef) &&
|
||||
typeof (config.privateKeySecretRef as { secretId?: unknown }).secretId === "string"
|
||||
? String((config.privateKeySecretRef as { secretId: string }).secretId)
|
||||
: "",
|
||||
knownHosts: typeof config.knownHosts === "string" ? config.knownHosts : "",
|
||||
strictHostKeyChecking:
|
||||
typeof config.strictHostKeyChecking === "boolean"
|
||||
? config.strictHostKeyChecking
|
||||
: true,
|
||||
};
|
||||
}
|
||||
|
||||
function readSandboxConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
const { provider: rawProvider, ...providerConfig } = config;
|
||||
return {
|
||||
provider: typeof rawProvider === "string" && rawProvider.trim().length > 0
|
||||
? rawProvider
|
||||
: "fake",
|
||||
config: providerConfig,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeJsonSchema(schema: unknown): JsonSchema | null {
|
||||
return schema && typeof schema === "object" && !Array.isArray(schema)
|
||||
? schema as JsonSchema
|
||||
: null;
|
||||
}
|
||||
|
||||
function summarizeSandboxConfig(config: Record<string, unknown>): string | null {
|
||||
for (const key of ["template", "image", "region", "workspacePath"]) {
|
||||
const value = config[key];
|
||||
if (typeof value === "string" && value.trim().length > 0) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function SupportMark({ supported }: { supported: boolean }) {
|
||||
return supported ? (
|
||||
<span className="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
|
||||
<Check className="h-3 w-3" />
|
||||
Yes
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">No</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompanySettings() {
|
||||
const {
|
||||
companies,
|
||||
|
|
@ -177,7 +29,6 @@ export function CompanySettings() {
|
|||
setSelectedCompanyId
|
||||
} = useCompany();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const { pushToast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
// General settings local state
|
||||
const [companyName, setCompanyName] = useState("");
|
||||
|
|
@ -185,9 +36,6 @@ export function CompanySettings() {
|
|||
const [brandColor, setBrandColor] = useState("");
|
||||
const [logoUrl, setLogoUrl] = useState("");
|
||||
const [logoUploadError, setLogoUploadError] = useState<string | null>(null);
|
||||
const [editingEnvironmentId, setEditingEnvironmentId] = useState<string | null>(null);
|
||||
const [environmentForm, setEnvironmentForm] = useState<EnvironmentFormState>(createEmptyEnvironmentForm);
|
||||
const [probeResults, setProbeResults] = useState<Record<string, EnvironmentProbeResult | null>>({});
|
||||
|
||||
// Sync local state from selected company
|
||||
useEffect(() => {
|
||||
|
|
@ -203,30 +51,6 @@ export function CompanySettings() {
|
|||
const [snippetCopied, setSnippetCopied] = useState(false);
|
||||
const [snippetCopyDelightId, setSnippetCopyDelightId] = useState(0);
|
||||
|
||||
const { data: experimentalSettings } = useQuery({
|
||||
queryKey: queryKeys.instance.experimentalSettings,
|
||||
queryFn: () => instanceSettingsApi.getExperimental(),
|
||||
retry: false,
|
||||
});
|
||||
const environmentsEnabled = experimentalSettings?.enableEnvironments === true;
|
||||
|
||||
const { data: environments } = useQuery({
|
||||
queryKey: selectedCompanyId ? queryKeys.environments.list(selectedCompanyId) : ["environments", "none"],
|
||||
queryFn: () => environmentsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId) && environmentsEnabled,
|
||||
});
|
||||
const { data: environmentCapabilities } = useQuery({
|
||||
queryKey: selectedCompanyId ? ["environment-capabilities", selectedCompanyId] : ["environment-capabilities", "none"],
|
||||
queryFn: () => environmentsApi.capabilities(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId) && environmentsEnabled,
|
||||
});
|
||||
|
||||
const { data: secrets } = useQuery({
|
||||
queryKey: selectedCompanyId ? ["company-secrets", selectedCompanyId] : ["company-secrets", "none"],
|
||||
queryFn: () => secretsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId),
|
||||
});
|
||||
|
||||
const generalDirty =
|
||||
!!selectedCompany &&
|
||||
(companyName !== selectedCompany.name ||
|
||||
|
|
@ -331,90 +155,6 @@ export function CompanySettings() {
|
|||
}
|
||||
});
|
||||
|
||||
const environmentMutation = useMutation({
|
||||
mutationFn: async (form: EnvironmentFormState) => {
|
||||
const body = buildEnvironmentPayload(form);
|
||||
|
||||
if (editingEnvironmentId) {
|
||||
return await environmentsApi.update(editingEnvironmentId, body);
|
||||
}
|
||||
|
||||
return await environmentsApi.create(selectedCompanyId!, body);
|
||||
},
|
||||
onSuccess: async (environment) => {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.environments.list(selectedCompanyId!),
|
||||
});
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
pushToast({
|
||||
title: editingEnvironmentId ? "Environment updated" : "Environment created",
|
||||
body: `${environment.name} is ready.`,
|
||||
tone: "success",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
pushToast({
|
||||
title: "Failed to save environment",
|
||||
body: error instanceof Error ? error.message : "Environment save failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const environmentProbeMutation = useMutation({
|
||||
mutationFn: async (environmentId: string) => await environmentsApi.probe(environmentId),
|
||||
onSuccess: (probe, environmentId) => {
|
||||
setProbeResults((current) => ({
|
||||
...current,
|
||||
[environmentId]: probe,
|
||||
}));
|
||||
pushToast({
|
||||
title: probe.ok ? "Environment probe passed" : "Environment probe failed",
|
||||
body: probe.summary,
|
||||
tone: probe.ok ? "success" : "error",
|
||||
});
|
||||
},
|
||||
onError: (error, environmentId) => {
|
||||
const failedEnvironment = (environments ?? []).find((environment) => environment.id === environmentId);
|
||||
setProbeResults((current) => ({
|
||||
...current,
|
||||
[environmentId]: {
|
||||
ok: false,
|
||||
driver: failedEnvironment?.driver ?? "local",
|
||||
summary: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
details: null,
|
||||
},
|
||||
}));
|
||||
pushToast({
|
||||
title: "Environment probe failed",
|
||||
body: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const draftEnvironmentProbeMutation = useMutation({
|
||||
mutationFn: async (form: EnvironmentFormState) => {
|
||||
const body = buildEnvironmentPayload(form);
|
||||
return await environmentsApi.probeConfig(selectedCompanyId!, body);
|
||||
},
|
||||
onSuccess: (probe) => {
|
||||
pushToast({
|
||||
title: probe.ok ? "Draft probe passed" : "Draft probe failed",
|
||||
body: probe.summary,
|
||||
tone: probe.ok ? "success" : "error",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
pushToast({
|
||||
title: "Draft probe failed",
|
||||
body: error instanceof Error ? error.message : "Environment probe failed.",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function handleLogoFileChange(event: ChangeEvent<HTMLInputElement>) {
|
||||
const file = event.target.files?.[0] ?? null;
|
||||
event.currentTarget.value = "";
|
||||
|
|
@ -432,9 +172,6 @@ export function CompanySettings() {
|
|||
setInviteSnippet(null);
|
||||
setSnippetCopied(false);
|
||||
setSnippetCopyDelightId(0);
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
setProbeResults({});
|
||||
}, [selectedCompanyId]);
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
|
|
@ -481,113 +218,6 @@ export function CompanySettings() {
|
|||
});
|
||||
}
|
||||
|
||||
function handleEditEnvironment(environment: Environment) {
|
||||
setEditingEnvironmentId(environment.id);
|
||||
if (environment.driver === "ssh") {
|
||||
const ssh = readSshConfig(environment);
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "ssh",
|
||||
sshHost: ssh.host,
|
||||
sshPort: ssh.port,
|
||||
sshUsername: ssh.username,
|
||||
sshRemoteWorkspacePath: ssh.remoteWorkspacePath,
|
||||
sshPrivateKey: ssh.privateKey,
|
||||
sshPrivateKeySecretId: ssh.privateKeySecretId,
|
||||
sshKnownHosts: ssh.knownHosts,
|
||||
sshStrictHostKeyChecking: ssh.strictHostKeyChecking,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (environment.driver === "sandbox") {
|
||||
const sandbox = readSandboxConfig(environment);
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "sandbox",
|
||||
sandboxProvider: sandbox.provider,
|
||||
sandboxConfig: sandbox.config,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "local",
|
||||
});
|
||||
}
|
||||
|
||||
function handleCancelEnvironmentEdit() {
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
}
|
||||
|
||||
const discoveredPluginSandboxProviders = Object.entries(environmentCapabilities?.sandboxProviders ?? {})
|
||||
.filter(([provider, capability]) => provider !== "fake" && capability.supportsRunExecution)
|
||||
.map(([provider, capability]) => ({
|
||||
provider,
|
||||
displayName: capability.displayName || provider,
|
||||
description: capability.description,
|
||||
configSchema: normalizeJsonSchema(capability.configSchema),
|
||||
}))
|
||||
.sort((left, right) => left.displayName.localeCompare(right.displayName));
|
||||
const sandboxCreationEnabled = discoveredPluginSandboxProviders.length > 0;
|
||||
const sandboxSupportVisible = sandboxCreationEnabled;
|
||||
const pluginSandboxProviders =
|
||||
environmentForm.sandboxProvider.trim().length > 0 &&
|
||||
environmentForm.sandboxProvider !== "fake" &&
|
||||
!discoveredPluginSandboxProviders.some((provider) => provider.provider === environmentForm.sandboxProvider)
|
||||
? [
|
||||
...discoveredPluginSandboxProviders,
|
||||
{ provider: environmentForm.sandboxProvider, displayName: environmentForm.sandboxProvider, description: undefined, configSchema: null },
|
||||
]
|
||||
: discoveredPluginSandboxProviders;
|
||||
|
||||
const selectedSandboxProvider = pluginSandboxProviders.find(
|
||||
(provider) => provider.provider === environmentForm.sandboxProvider,
|
||||
) ?? null;
|
||||
const selectedSandboxSchema = selectedSandboxProvider?.configSchema ?? null;
|
||||
const sandboxConfigErrors =
|
||||
environmentForm.driver === "sandbox" && selectedSandboxSchema
|
||||
? validateJsonSchemaForm(selectedSandboxSchema as any, environmentForm.sandboxConfig)
|
||||
: {};
|
||||
|
||||
useEffect(() => {
|
||||
if (environmentForm.driver !== "sandbox") return;
|
||||
if (environmentForm.sandboxProvider.trim().length > 0 && environmentForm.sandboxProvider !== "fake") return;
|
||||
const firstProvider = discoveredPluginSandboxProviders[0]?.provider;
|
||||
if (!firstProvider) return;
|
||||
const firstSchema = discoveredPluginSandboxProviders[0]?.configSchema;
|
||||
setEnvironmentForm((current) => (
|
||||
current.driver !== "sandbox" || (current.sandboxProvider.trim().length > 0 && current.sandboxProvider !== "fake")
|
||||
? current
|
||||
: {
|
||||
...current,
|
||||
sandboxProvider: firstProvider,
|
||||
sandboxConfig: firstSchema ? getDefaultValues(firstSchema as any) : {},
|
||||
}
|
||||
));
|
||||
}, [discoveredPluginSandboxProviders, environmentForm.driver, environmentForm.sandboxProvider]);
|
||||
|
||||
const environmentFormValid =
|
||||
environmentForm.name.trim().length > 0 &&
|
||||
(environmentForm.driver !== "ssh" ||
|
||||
(
|
||||
environmentForm.sshHost.trim().length > 0 &&
|
||||
environmentForm.sshUsername.trim().length > 0 &&
|
||||
environmentForm.sshRemoteWorkspacePath.trim().length > 0
|
||||
)) &&
|
||||
(environmentForm.driver !== "sandbox" ||
|
||||
environmentForm.sandboxProvider.trim().length > 0 &&
|
||||
environmentForm.sandboxProvider !== "fake" &&
|
||||
Object.keys(sandboxConfigErrors).length === 0);
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -744,388 +374,6 @@ export function CompanySettings() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{environmentsEnabled ? (
|
||||
<div className="space-y-4" data-testid="company-settings-environments-section">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Environments
|
||||
</div>
|
||||
<div className="space-y-4 rounded-md border border-border px-4 py-4">
|
||||
<div className="rounded-md border border-border/60 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
Environment choices use the same adapter support matrix as agent defaults. SSH is always available for
|
||||
remote-managed adapters, and sandbox environments appear only when a run-capable sandbox provider plugin is
|
||||
installed.
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[34rem] text-left text-xs">
|
||||
<caption className="sr-only">Environment support by adapter</caption>
|
||||
<thead className="border-b border-border text-muted-foreground">
|
||||
<tr>
|
||||
<th className="py-2 pr-3 font-medium">Adapter</th>
|
||||
<th className="px-3 py-2 font-medium">Local</th>
|
||||
<th className="px-3 py-2 font-medium">SSH</th>
|
||||
{sandboxSupportVisible ? (
|
||||
<th className="px-3 py-2 font-medium">Sandbox</th>
|
||||
) : null}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/60">
|
||||
{(environmentCapabilities?.adapters.map((support) => ({
|
||||
adapterType: support.adapterType,
|
||||
support,
|
||||
})) ?? ENVIRONMENT_SUPPORT_ROWS).map(({ adapterType, support }) => (
|
||||
<tr key={adapterType}>
|
||||
<td className="py-2 pr-3 font-medium">
|
||||
{adapterLabels[adapterType] ?? adapterType}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark supported={support.drivers.local === "supported"} />
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark supported={support.drivers.ssh === "supported"} />
|
||||
</td>
|
||||
{sandboxSupportVisible ? (
|
||||
<td className="px-3 py-2">
|
||||
<SupportMark
|
||||
supported={discoveredPluginSandboxProviders.some((provider) =>
|
||||
support.sandboxProviders[provider.provider] === "supported")}
|
||||
/>
|
||||
</td>
|
||||
) : null}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{(environments ?? []).length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">No environments saved for this company yet.</div>
|
||||
) : (
|
||||
(environments ?? []).map((environment) => {
|
||||
const probe = probeResults[environment.id] ?? null;
|
||||
const isEditing = editingEnvironmentId === environment.id;
|
||||
return (
|
||||
<div
|
||||
key={environment.id}
|
||||
className="rounded-md border border-border/70 px-3 py-3"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium">
|
||||
{environment.name} <span className="text-muted-foreground">· {environment.driver}</span>
|
||||
</div>
|
||||
{environment.description ? (
|
||||
<div className="text-xs text-muted-foreground">{environment.description}</div>
|
||||
) : null}
|
||||
{environment.driver === "ssh" ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{typeof environment.config.host === "string" ? environment.config.host : "SSH host"} ·{" "}
|
||||
{typeof environment.config.username === "string" ? environment.config.username : "user"}
|
||||
</div>
|
||||
) : environment.driver === "sandbox" ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{(() => {
|
||||
const provider =
|
||||
typeof environment.config.provider === "string" ? environment.config.provider : "sandbox";
|
||||
const displayName =
|
||||
environmentCapabilities?.sandboxProviders?.[provider]?.displayName ?? provider;
|
||||
const summary = summarizeSandboxConfig(environment.config as Record<string, unknown>);
|
||||
return `${displayName} sandbox provider${summary ? ` · ${summary}` : ""}`;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground">Runs on this Paperclip host.</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{environment.driver !== "local" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => environmentProbeMutation.mutate(environment.id)}
|
||||
disabled={environmentProbeMutation.isPending}
|
||||
>
|
||||
{environmentProbeMutation.isPending
|
||||
? "Testing..."
|
||||
: environment.driver === "ssh"
|
||||
? "Test connection"
|
||||
: "Test provider"}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditEnvironment(environment)}
|
||||
>
|
||||
{isEditing ? "Editing" : "Edit"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{probe ? (
|
||||
<div
|
||||
className={
|
||||
probe.ok
|
||||
? "mt-3 rounded border border-green-500/30 bg-green-500/5 px-2.5 py-2 text-xs text-green-700"
|
||||
: "mt-3 rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive"
|
||||
}
|
||||
>
|
||||
<div className="font-medium">{probe.summary}</div>
|
||||
{probe.details?.error && typeof probe.details.error === "string" ? (
|
||||
<div className="mt-1 font-mono text-[11px]">{probe.details.error}</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border/60 pt-4">
|
||||
<div className="mb-3 text-sm font-medium">
|
||||
{editingEnvironmentId ? "Edit environment" : "Add environment"}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Field label="Name" hint="Operator-facing name for this execution target.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.name}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, name: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Description" hint="Optional note about what this machine is for.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.description}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, description: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Driver" hint="Local runs on this host. SSH stores a remote machine target. Sandbox stores plugin-backed provider config on the shared environment seam.">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.driver}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider:
|
||||
e.target.value === "sandbox"
|
||||
? current.sandboxProvider.trim() || discoveredPluginSandboxProviders[0]?.provider || ""
|
||||
: current.sandboxProvider,
|
||||
sandboxConfig:
|
||||
e.target.value === "sandbox"
|
||||
? (
|
||||
current.sandboxProvider.trim().length > 0 && current.driver === "sandbox"
|
||||
? current.sandboxConfig
|
||||
: discoveredPluginSandboxProviders[0]?.configSchema
|
||||
? getDefaultValues(discoveredPluginSandboxProviders[0].configSchema as any)
|
||||
: {}
|
||||
)
|
||||
: current.sandboxConfig,
|
||||
driver:
|
||||
e.target.value === "local"
|
||||
? "local"
|
||||
: e.target.value === "sandbox"
|
||||
? "sandbox"
|
||||
: "ssh",
|
||||
}))}
|
||||
>
|
||||
<option value="ssh">SSH</option>
|
||||
{sandboxCreationEnabled || environmentForm.driver === "sandbox" ? (
|
||||
<option value="sandbox">Sandbox</option>
|
||||
) : null}
|
||||
<option value="local">Local</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{environmentForm.driver === "ssh" ? (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Field label="Host" hint="DNS name or IP address for the remote machine.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.sshHost}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshHost: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Port" hint="Defaults to 22.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="number"
|
||||
min={1}
|
||||
max={65535}
|
||||
value={environmentForm.sshPort}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshPort: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Username" hint="SSH login user.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
value={environmentForm.sshUsername}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshUsername: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Remote workspace path" hint="Absolute path that Paperclip will verify during SSH connection tests.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
placeholder="/Users/paperclip/workspace"
|
||||
value={environmentForm.sshRemoteWorkspacePath}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sshRemoteWorkspacePath: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Private key" hint="Optional PEM private key. Leave blank to rely on the server's SSH agent or default keychain.">
|
||||
<div className="space-y-2">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.sshPrivateKeySecretId}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sshPrivateKeySecretId: e.target.value,
|
||||
sshPrivateKey: e.target.value ? "" : current.sshPrivateKey,
|
||||
}))}
|
||||
>
|
||||
<option value="">No saved secret</option>
|
||||
{(secrets ?? []).map((secret) => (
|
||||
<option key={secret.id} value={secret.id}>{secret.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<textarea
|
||||
className="h-32 w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-xs font-mono outline-none"
|
||||
value={environmentForm.sshPrivateKey}
|
||||
disabled={!!environmentForm.sshPrivateKeySecretId}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshPrivateKey: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Known hosts" hint="Optional known_hosts block used when strict host key checking is enabled.">
|
||||
<textarea
|
||||
className="h-32 w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-xs font-mono outline-none"
|
||||
value={environmentForm.sshKnownHosts}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sshKnownHosts: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<div className="md:col-span-2">
|
||||
<ToggleField
|
||||
label="Strict host key checking"
|
||||
hint="Keep this on unless you deliberately want probe-time host key acceptance disabled."
|
||||
checked={environmentForm.sshStrictHostKeyChecking}
|
||||
onChange={(checked) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sshStrictHostKeyChecking: checked }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{environmentForm.driver === "sandbox" ? (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Field label="Provider" hint="Installed run-capable sandbox provider plugins appear here.">
|
||||
<select
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
value={environmentForm.sandboxProvider}
|
||||
onChange={(e) => {
|
||||
const nextProviderKey = e.target.value;
|
||||
const nextProvider = pluginSandboxProviders.find((provider) => provider.provider === nextProviderKey) ?? null;
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider: nextProviderKey,
|
||||
sandboxConfig:
|
||||
current.sandboxProvider === nextProviderKey
|
||||
? current.sandboxConfig
|
||||
: nextProvider?.configSchema
|
||||
? getDefaultValues(nextProvider.configSchema as any)
|
||||
: {},
|
||||
}));
|
||||
}}
|
||||
>
|
||||
{pluginSandboxProviders.map((provider) => (
|
||||
<option key={provider.provider} value={provider.provider}>
|
||||
{provider.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
<div className="md:col-span-2 space-y-3">
|
||||
{selectedSandboxProvider?.description ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{selectedSandboxProvider.description}
|
||||
</div>
|
||||
) : null}
|
||||
{selectedSandboxSchema ? (
|
||||
<JsonSchemaForm
|
||||
schema={selectedSandboxSchema as any}
|
||||
values={environmentForm.sandboxConfig}
|
||||
onChange={(values) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sandboxConfig: values }))}
|
||||
errors={sandboxConfigErrors}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-md border border-border/60 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
This provider does not declare additional configuration fields.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => environmentMutation.mutate(environmentForm)}
|
||||
disabled={environmentMutation.isPending || !environmentFormValid}
|
||||
>
|
||||
{environmentMutation.isPending
|
||||
? editingEnvironmentId
|
||||
? "Saving..."
|
||||
: "Creating..."
|
||||
: editingEnvironmentId
|
||||
? "Save environment"
|
||||
: "Create environment"}
|
||||
</Button>
|
||||
{editingEnvironmentId ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleCancelEnvironmentEdit}
|
||||
disabled={environmentMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
) : null}
|
||||
{environmentForm.driver !== "local" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => draftEnvironmentProbeMutation.mutate(environmentForm)}
|
||||
disabled={draftEnvironmentProbeMutation.isPending || !environmentFormValid}
|
||||
>
|
||||
{draftEnvironmentProbeMutation.isPending ? "Testing..." : "Test draft"}
|
||||
</Button>
|
||||
) : null}
|
||||
{environmentMutation.isError ? (
|
||||
<span className="text-xs text-destructive">
|
||||
{environmentMutation.error instanceof Error
|
||||
? environmentMutation.error.message
|
||||
: "Failed to save environment"}
|
||||
</span>
|
||||
) : null}
|
||||
{draftEnvironmentProbeMutation.data ? (
|
||||
<span className={draftEnvironmentProbeMutation.data.ok ? "text-xs text-green-600" : "text-xs text-destructive"}>
|
||||
{draftEnvironmentProbeMutation.data.summary}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Hiring */}
|
||||
<div className="space-y-4" data-testid="company-settings-team-section">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useNavigate, useSearchParams } from "@/lib/router";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
|
|
@ -6,7 +6,7 @@ import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|||
import { agentsApi } from "../api/agents";
|
||||
import { companySkillsApi } from "../api/companySkills";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { AGENT_ROLES } from "@paperclipai/shared";
|
||||
import { AGENT_ROLES, type AdapterEnvironmentTestResult } from "@paperclipai/shared";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
|
|
@ -17,7 +17,11 @@ import {
|
|||
import { Shield } from "lucide-react";
|
||||
import { cn, agentUrl } from "../lib/utils";
|
||||
import { roleLabels } from "../components/agent-config-primitives";
|
||||
import { AgentConfigForm, type CreateConfigValues } from "../components/AgentConfigForm";
|
||||
import {
|
||||
AgentConfigForm,
|
||||
AdapterEnvironmentResult,
|
||||
type CreateConfigValues,
|
||||
} from "../components/AgentConfigForm";
|
||||
import { defaultCreateValues } from "../components/agent-config-defaults";
|
||||
import { getUIAdapter, listUIAdapters } from "../adapters";
|
||||
import { useDisabledAdaptersSync } from "../adapters/use-disabled-adapters";
|
||||
|
|
@ -66,6 +70,15 @@ export function NewAgent() {
|
|||
const [selectedSkillKeys, setSelectedSkillKeys] = useState<string[]>([]);
|
||||
const [roleOpen, setRoleOpen] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [testAgentAction, setTestAgentAction] = useState<(() => void) | null>(null);
|
||||
const [testAgentState, setTestAgentState] = useState({ disabled: true, pending: false });
|
||||
const [testAgentFeedback, setTestAgentFeedback] = useState<{
|
||||
errorMessage: string | null;
|
||||
result: AdapterEnvironmentTestResult | null;
|
||||
}>({
|
||||
errorMessage: null,
|
||||
result: null,
|
||||
});
|
||||
|
||||
const { data: agents } = useQuery({
|
||||
queryKey: queryKeys.agents.list(selectedCompanyId!),
|
||||
|
|
@ -192,6 +205,21 @@ export function NewAgent() {
|
|||
});
|
||||
}
|
||||
|
||||
const handleTestAgentActionChange = useCallback((fn: (() => void) | null) => {
|
||||
setTestAgentAction(() => fn);
|
||||
}, []);
|
||||
|
||||
const handleTestAgentStateChange = useCallback((state: { disabled: boolean; pending: boolean }) => {
|
||||
setTestAgentState(state);
|
||||
}, []);
|
||||
|
||||
const handleTestAgentFeedbackChange = useCallback((feedback: {
|
||||
errorMessage: string | null;
|
||||
result: AdapterEnvironmentTestResult | null;
|
||||
}) => {
|
||||
setTestAgentFeedback(feedback);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
<div>
|
||||
|
|
@ -268,6 +296,9 @@ export function NewAgent() {
|
|||
values={configValues}
|
||||
onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
|
||||
adapterModels={adapterModels}
|
||||
onTestActionChange={handleTestAgentActionChange}
|
||||
onTestActionStateChange={handleTestAgentStateChange}
|
||||
onTestFeedbackChange={handleTestAgentFeedbackChange}
|
||||
/>
|
||||
|
||||
<div className="border-t border-border px-4 py-4">
|
||||
|
|
@ -316,17 +347,38 @@ export function NewAgent() {
|
|||
{formError && (
|
||||
<p className="text-xs text-destructive mb-2">{formError}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => navigate("/agents")}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!name.trim() || createAgent.isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{createAgent.isPending ? "Creating…" : "Create agent"}
|
||||
</Button>
|
||||
<div className="space-y-3">
|
||||
{testAgentFeedback.errorMessage && (
|
||||
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{testAgentFeedback.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
{testAgentFeedback.result && (
|
||||
<AdapterEnvironmentResult result={testAgentFeedback.result} />
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => navigate("/agents")}>
|
||||
Cancel
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={testAgentState.disabled}
|
||||
onClick={() => testAgentAction?.()}
|
||||
>
|
||||
{testAgentState.pending ? "Testing..." : "Test Agent"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!name.trim() || createAgent.isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{createAgent.isPending ? "Creating…" : "Create agent"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue