mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 19:00:38 +09:00
Generalize sandbox provider core for plugin-only providers (#4449)
## Thinking Path > - Paperclip is a control plane, so optional execution providers should sit at the plugin edge instead of hardcoding provider-specific behavior into core shared/server/ui layers. > - Sandbox environments are already first-class, and the fake provider proves the built-in path; the remaining gap was that real providers still leaked provider-specific config and runtime assumptions into core. > - That coupling showed up in config normalization, secret persistence, capabilities reporting, lease reconstruction, and the board UI form fields. > - As long as core knew about those provider-shaped details, shipping a provider as a pure third-party plugin meant every new provider would still require host changes. > - This pull request generalizes the sandbox provider seam around schema-driven plugin metadata and generic secret-ref handling. > - The runtime and UI now consume provider metadata generically, so core only special-cases the built-in fake provider while third-party providers can live entirely in plugins. ## What Changed - Added generic sandbox-provider capability metadata so plugin-backed providers can expose `configSchema` through shared environment support and the environments capabilities API. - Reworked sandbox config normalization/persistence/runtime resolution to handle schema-declared secret-ref fields generically, storing them as Paperclip secrets and resolving them for probe/execute/release flows. - Generalized plugin sandbox runtime handling so provider validation, reusable-lease matching, lease reconstruction, and plugin worker calls all operate on provider-agnostic config instead of provider-shaped branches. - Replaced hardcoded sandbox provider form fields in Company Settings with schema-driven rendering and blocked agent environment selection from the built-in fake provider. - Added regression coverage for the generic seam across shared support helpers plus environment config, probe, routes, runtime, and sandbox-provider runtime tests. ## Verification - `pnpm vitest --run packages/shared/src/environment-support.test.ts server/src/__tests__/environment-config.test.ts server/src/__tests__/environment-probe.test.ts server/src/__tests__/environment-routes.test.ts server/src/__tests__/environment-runtime.test.ts server/src/__tests__/sandbox-provider-runtime.test.ts` - `pnpm -r typecheck` ## Risks - Plugin sandbox providers now depend more heavily on accurate `configSchema` declarations; incorrect schemas can misclassify secret-bearing fields or omit required config. - Reusable lease matching is now metadata-driven for plugin-backed providers, so providers that fail to persist stable metadata may reprovision instead of resuming an existing lease. - The UI form is now fully schema-driven for plugin-backed sandbox providers; provider manifests without good defaults or descriptions may produce a rougher operator experience. ## Model Used - OpenAI Codex via `codex_local` - Model ID: `gpt-5.4` - Reasoning effort: `high` - Context window observed in runtime session metadata: `258400` tokens - Capabilities used: terminal tool execution, git, and local code/test inspection ## 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 - [ ] 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
deba60ebb2
commit
5bd0f578fd
18 changed files with 1235 additions and 236 deletions
|
|
@ -297,7 +297,12 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
[adapterType],
|
||||
);
|
||||
const runnableEnvironments = useMemo(
|
||||
() => environments.filter((environment) => supportedEnvironmentDrivers.has(environment.driver)),
|
||||
() => environments.filter((environment) => {
|
||||
if (!supportedEnvironmentDrivers.has(environment.driver)) return false;
|
||||
if (environment.driver !== "sandbox") return true;
|
||||
const provider = typeof environment.config?.provider === "string" ? environment.config.provider : null;
|
||||
return provider !== null && provider !== "fake";
|
||||
}),
|
||||
[environments, supportedEnvironmentDrivers],
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -164,4 +164,87 @@ describe("CompanySettings", () => {
|
|||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("preserves sandbox config when re-selecting the same provider while editing", async () => {
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
mockEnvironmentsApi.list.mockResolvedValue([
|
||||
{
|
||||
id: "env-1",
|
||||
companyId: "company-1",
|
||||
name: "Secure Sandbox",
|
||||
description: null,
|
||||
driver: "sandbox",
|
||||
status: "active",
|
||||
config: {
|
||||
provider: "secure-plugin",
|
||||
template: "saved-template",
|
||||
},
|
||||
metadata: null,
|
||||
createdAt: new Date("2026-04-25T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-25T00:00:00.000Z"),
|
||||
},
|
||||
]);
|
||||
mockEnvironmentsApi.capabilities.mockResolvedValue(
|
||||
getEnvironmentCapabilities(AGENT_ADAPTER_TYPES, {
|
||||
sandboxProviders: {
|
||||
"secure-plugin": {
|
||||
status: "supported",
|
||||
supportsSavedProbe: true,
|
||||
supportsUnsavedProbe: true,
|
||||
supportsRunExecution: true,
|
||||
supportsReusableLeases: true,
|
||||
displayName: "Secure Sandbox",
|
||||
configSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
template: { type: "string", title: "Template" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<CompanySettings />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
const editButton = Array.from(container.querySelectorAll("button"))
|
||||
.find((button) => button.textContent?.trim() === "Edit");
|
||||
expect(editButton).toBeTruthy();
|
||||
|
||||
await act(async () => {
|
||||
editButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
const providerSelect = Array.from(container.querySelectorAll("select"))
|
||||
.find((select) => Array.from(select.options).some((option) => option.value === "secure-plugin")) as HTMLSelectElement | undefined;
|
||||
expect(providerSelect).toBeTruthy();
|
||||
|
||||
await act(async () => {
|
||||
providerSelect!.value = "secure-plugin";
|
||||
providerSelect!.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
const templateInput = Array.from(container.querySelectorAll("input"))
|
||||
.find((input) => (input as HTMLInputElement).value === "saved-template") as HTMLInputElement | undefined;
|
||||
expect(templateInput?.value).toBe("saved-template");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
getAdapterEnvironmentSupport,
|
||||
type Environment,
|
||||
type EnvironmentProbeResult,
|
||||
type JsonSchema,
|
||||
} from "@paperclipai/shared";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
||||
|
|
@ -19,6 +20,7 @@ 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,
|
||||
|
|
@ -45,12 +47,7 @@ type EnvironmentFormState = {
|
|||
sshKnownHosts: string;
|
||||
sshStrictHostKeyChecking: boolean;
|
||||
sandboxProvider: string;
|
||||
sandboxImage: string;
|
||||
sandboxTemplate: string;
|
||||
sandboxApiKey: string;
|
||||
sandboxApiKeySecretId: string;
|
||||
sandboxTimeoutMs: string;
|
||||
sandboxReuseLease: boolean;
|
||||
sandboxConfig: Record<string, unknown>;
|
||||
};
|
||||
|
||||
const ENVIRONMENT_SUPPORT_ROWS = AGENT_ADAPTER_TYPES.map((adapterType) => ({
|
||||
|
|
@ -81,9 +78,7 @@ function buildEnvironmentPayload(form: EnvironmentFormState) {
|
|||
: form.driver === "sandbox"
|
||||
? {
|
||||
provider: form.sandboxProvider.trim(),
|
||||
image: form.sandboxImage.trim() || "ubuntu:24.04",
|
||||
timeoutMs: Number.parseInt(form.sandboxTimeoutMs || "300000", 10) || 300000,
|
||||
reuseLease: form.sandboxReuseLease,
|
||||
...form.sandboxConfig,
|
||||
}
|
||||
: {},
|
||||
} as const;
|
||||
|
|
@ -103,12 +98,7 @@ function createEmptyEnvironmentForm(): EnvironmentFormState {
|
|||
sshKnownHosts: "",
|
||||
sshStrictHostKeyChecking: true,
|
||||
sandboxProvider: "",
|
||||
sandboxImage: "ubuntu:24.04",
|
||||
sandboxTemplate: "base",
|
||||
sandboxApiKey: "",
|
||||
sandboxApiKeySecretId: "",
|
||||
sandboxTimeoutMs: "300000",
|
||||
sandboxReuseLease: false,
|
||||
sandboxConfig: {},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -143,36 +133,31 @@ function readSshConfig(environment: Environment) {
|
|||
|
||||
function readSandboxConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
const { provider: rawProvider, ...providerConfig } = config;
|
||||
return {
|
||||
provider:
|
||||
typeof config.provider === "string" && config.provider.trim().length > 0
|
||||
? config.provider
|
||||
provider: typeof rawProvider === "string" && rawProvider.trim().length > 0
|
||||
? rawProvider
|
||||
: "fake",
|
||||
image: typeof config.image === "string" && config.image.trim().length > 0
|
||||
? config.image
|
||||
: "ubuntu:24.04",
|
||||
template:
|
||||
typeof config.template === "string" && config.template.trim().length > 0
|
||||
? config.template
|
||||
: "base",
|
||||
apiKey: "",
|
||||
apiKeySecretId:
|
||||
config.apiKeySecretRef &&
|
||||
typeof config.apiKeySecretRef === "object" &&
|
||||
!Array.isArray(config.apiKeySecretRef) &&
|
||||
typeof (config.apiKeySecretRef as { secretId?: unknown }).secretId === "string"
|
||||
? String((config.apiKeySecretRef as { secretId: string }).secretId)
|
||||
: "",
|
||||
timeoutMs:
|
||||
typeof config.timeoutMs === "number"
|
||||
? String(config.timeoutMs)
|
||||
: typeof config.timeoutMs === "string" && config.timeoutMs.trim().length > 0
|
||||
? config.timeoutMs
|
||||
: "300000",
|
||||
reuseLease: typeof config.reuseLease === "boolean" ? config.reuseLease : false,
|
||||
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">
|
||||
|
|
@ -525,12 +510,7 @@ export function CompanySettings() {
|
|||
description: environment.description ?? "",
|
||||
driver: "sandbox",
|
||||
sandboxProvider: sandbox.provider,
|
||||
sandboxImage: sandbox.image,
|
||||
sandboxTemplate: sandbox.template,
|
||||
sandboxApiKey: sandbox.apiKey,
|
||||
sandboxApiKeySecretId: sandbox.apiKeySecretId,
|
||||
sandboxTimeoutMs: sandbox.timeoutMs,
|
||||
sandboxReuseLease: sandbox.reuseLease,
|
||||
sandboxConfig: sandbox.config,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
|
@ -553,6 +533,8 @@ export function CompanySettings() {
|
|||
.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;
|
||||
|
|
@ -563,21 +545,32 @@ export function CompanySettings() {
|
|||
!discoveredPluginSandboxProviders.some((provider) => provider.provider === environmentForm.sandboxProvider)
|
||||
? [
|
||||
...discoveredPluginSandboxProviders,
|
||||
{ provider: environmentForm.sandboxProvider, displayName: environmentForm.sandboxProvider },
|
||||
{ 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]);
|
||||
|
|
@ -593,10 +586,7 @@ export function CompanySettings() {
|
|||
(environmentForm.driver !== "sandbox" ||
|
||||
environmentForm.sandboxProvider.trim().length > 0 &&
|
||||
environmentForm.sandboxProvider !== "fake" &&
|
||||
environmentForm.sandboxImage.trim().length > 0 &&
|
||||
environmentForm.sandboxTimeoutMs.trim().length > 0 &&
|
||||
Number.isFinite(Number(environmentForm.sandboxTimeoutMs)) &&
|
||||
Number(environmentForm.sandboxTimeoutMs) > 0);
|
||||
Object.keys(sandboxConfigErrors).length === 0);
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
|
|
@ -835,10 +825,14 @@ export function CompanySettings() {
|
|||
</div>
|
||||
) : environment.driver === "sandbox" ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{String(environment.config.provider ?? "fake")} sandbox provider ·{" "}
|
||||
{typeof environment.config.image === "string"
|
||||
? environment.config.image
|
||||
: "ubuntu:24.04"}
|
||||
{(() => {
|
||||
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>
|
||||
|
|
@ -920,6 +914,16 @@ export function CompanySettings() {
|
|||
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"
|
||||
|
|
@ -1024,11 +1028,20 @@ export function CompanySettings() {
|
|||
<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) =>
|
||||
onChange={(e) => {
|
||||
const nextProviderKey = e.target.value;
|
||||
const nextProvider = pluginSandboxProviders.find((provider) => provider.provider === nextProviderKey) ?? null;
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider: e.target.value,
|
||||
}))}
|
||||
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}>
|
||||
|
|
@ -1037,33 +1050,25 @@ export function CompanySettings() {
|
|||
))}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Image" hint="Operator-facing sandbox image label passed through to the selected provider plugin.">
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
|
||||
type="text"
|
||||
placeholder="ubuntu:24.04"
|
||||
value={environmentForm.sandboxImage}
|
||||
onChange={(e) => setEnvironmentForm((current) => ({ ...current, sandboxImage: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Timeout (ms)" hint="Command timeout passed to the sandbox provider plugin.">
|
||||
<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}
|
||||
value={environmentForm.sandboxTimeoutMs}
|
||||
onChange={(e) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sandboxTimeoutMs: e.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<div className="md:col-span-2">
|
||||
<ToggleField
|
||||
label="Reuse lease"
|
||||
hint="When enabled, Paperclip will try to reconnect to a previously leased sandbox before provisioning a new one."
|
||||
checked={environmentForm.sandboxReuseLease}
|
||||
onChange={(checked) =>
|
||||
setEnvironmentForm((current) => ({ ...current, sandboxReuseLease: checked }))}
|
||||
/>
|
||||
<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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue