mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 19:00:38 +09:00
Add SSH environment support (#4358)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - The environments subsystem already models execution environments, but before this branch there was no end-to-end SSH-backed runtime path for agents to actually run work against a remote box > - That meant agents could be configured around environment concepts without a reliable way to execute adapter sessions remotely, sync workspace state, and preserve run context across supported adapters > - We also need environment selection to participate in normal Paperclip control-plane behavior: agent defaults, project/issue selection, route validation, and environment probing > - Because this capability is still experimental, the UI surface should be easy to hide and easy to remove later without undoing the underlying implementation > - This pull request adds SSH environment execution support across the runtime, adapters, routes, schema, and tests, then puts the visible environment-management UI behind an experimental flag > - The benefit is that we can validate real SSH-backed agent execution now while keeping the user-facing controls safely gated until the feature is ready to come out of experimentation ## What Changed - Added SSH-backed execution target support in the shared adapter runtime, including remote workspace preparation, skill/runtime asset sync, remote session handling, and workspace restore behavior after runs. - Added SSH execution coverage for supported local adapters, plus remote execution tests across Claude, Codex, Cursor, Gemini, OpenCode, and Pi. - Added environment selection and environment-management backend support needed for SSH execution, including route/service work, validation, probing, and agent default environment persistence. - Added CLI support for SSH environment lab verification and updated related docs/tests. - Added the `enableEnvironments` experimental flag and gated the environment UI behind it on company settings, agent configuration, and project configuration surfaces. ## Verification - `pnpm exec vitest run packages/adapters/claude-local/src/server/execute.remote.test.ts packages/adapters/cursor-local/src/server/execute.remote.test.ts packages/adapters/gemini-local/src/server/execute.remote.test.ts packages/adapters/opencode-local/src/server/execute.remote.test.ts packages/adapters/pi-local/src/server/execute.remote.test.ts` - `pnpm exec vitest run server/src/__tests__/environment-routes.test.ts` - `pnpm exec vitest run server/src/__tests__/instance-settings-routes.test.ts` - `pnpm exec vitest run ui/src/lib/new-agent-hire-payload.test.ts ui/src/lib/new-agent-runtime-config.test.ts` - `pnpm -r typecheck` - `pnpm build` - Manual verification on a branch-local dev server: - enabled the experimental flag - created an SSH environment - created a Linux Claude agent using that environment - confirmed a run executed on the Linux box and synced workspace changes back ## Risks - Medium: this touches runtime execution flow across multiple adapters, so regressions would likely show up in remote session setup, workspace sync, or environment selection precedence. - The UI flag reduces exposure, but the underlying runtime and route changes are still substantial and rely on migration correctness. - The change set is broad across adapters, control-plane services, migrations, and UI gating, so review should pay close attention to environment-selection precedence and remote workspace lifecycle behavior. ## Model Used - OpenAI Codex via Paperclip's local Codex adapter, GPT-5-class coding model with tool use and code execution in the local repo workspace. The local adapter does not surface a more specific public model version string in this branch workflow. ## 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
f98c348e2b
commit
e4995bbb1c
95 changed files with 10162 additions and 315 deletions
|
|
@ -35,6 +35,7 @@ const permissionLabels: Record<PermissionKey, string> = {
|
|||
"tasks:assign_scope": "Assign scoped tasks",
|
||||
"tasks:manage_active_checkouts": "Manage active task checkouts",
|
||||
"joins:approve": "Approve join requests",
|
||||
"environments:manage": "Manage environments",
|
||||
};
|
||||
|
||||
function formatGrantSummary(member: CompanyMember) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,22 @@
|
|||
import { ChangeEvent, useEffect, useState } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { DEFAULT_FEEDBACK_DATA_SHARING_TERMS_VERSION } from "@paperclipai/shared";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
AGENT_ADAPTER_TYPES,
|
||||
DEFAULT_FEEDBACK_DATA_SHARING_TERMS_VERSION,
|
||||
getAdapterEnvironmentSupport,
|
||||
type Environment,
|
||||
type EnvironmentProbeResult,
|
||||
} from "@paperclipai/shared";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
||||
import { useToastActions } 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";
|
||||
|
|
@ -15,7 +24,8 @@ import { CompanyPatternIcon } from "../components/CompanyPatternIcon";
|
|||
import {
|
||||
Field,
|
||||
ToggleField,
|
||||
HintIcon
|
||||
HintIcon,
|
||||
adapterLabels,
|
||||
} from "../components/agent-config-primitives";
|
||||
|
||||
type AgentSnippetInput = {
|
||||
|
|
@ -24,6 +34,104 @@ type AgentSnippetInput = {
|
|||
testResolutionUrl?: string | null;
|
||||
};
|
||||
|
||||
type EnvironmentFormState = {
|
||||
name: string;
|
||||
description: string;
|
||||
driver: "local" | "ssh";
|
||||
sshHost: string;
|
||||
sshPort: string;
|
||||
sshUsername: string;
|
||||
sshRemoteWorkspacePath: string;
|
||||
sshPrivateKey: string;
|
||||
sshPrivateKeySecretId: string;
|
||||
sshKnownHosts: string;
|
||||
sshStrictHostKeyChecking: boolean;
|
||||
};
|
||||
|
||||
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,
|
||||
}
|
||||
: {},
|
||||
} as const;
|
||||
}
|
||||
|
||||
function createEmptyEnvironmentForm(): EnvironmentFormState {
|
||||
return {
|
||||
name: "",
|
||||
description: "",
|
||||
driver: "ssh",
|
||||
sshHost: "",
|
||||
sshPort: "22",
|
||||
sshUsername: "",
|
||||
sshRemoteWorkspacePath: "",
|
||||
sshPrivateKey: "",
|
||||
sshPrivateKeySecretId: "",
|
||||
sshKnownHosts: "",
|
||||
sshStrictHostKeyChecking: true,
|
||||
};
|
||||
}
|
||||
|
||||
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 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>
|
||||
);
|
||||
}
|
||||
|
||||
const FEEDBACK_TERMS_URL = import.meta.env.VITE_FEEDBACK_TERMS_URL?.trim() || "https://paperclip.ing/tos";
|
||||
|
||||
export function CompanySettings() {
|
||||
|
|
@ -42,6 +150,9 @@ 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(() => {
|
||||
|
|
@ -57,6 +168,30 @@ 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) && environmentsEnabled,
|
||||
});
|
||||
|
||||
const generalDirty =
|
||||
!!selectedCompany &&
|
||||
(companyName !== selectedCompany.name ||
|
||||
|
|
@ -182,6 +317,90 @@ 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 = "";
|
||||
|
|
@ -199,6 +418,9 @@ export function CompanySettings() {
|
|||
setInviteSnippet(null);
|
||||
setSnippetCopied(false);
|
||||
setSnippetCopyDelightId(0);
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
setProbeResults({});
|
||||
}, [selectedCompanyId]);
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
|
|
@ -245,6 +467,49 @@ 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;
|
||||
}
|
||||
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
description: environment.description ?? "",
|
||||
driver: "local",
|
||||
});
|
||||
}
|
||||
|
||||
function handleCancelEnvironmentEdit() {
|
||||
setEditingEnvironmentId(null);
|
||||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
}
|
||||
|
||||
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
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -401,6 +666,290 @@ 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 environments
|
||||
are available for remote-managed adapters.
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
) : (
|
||||
<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..."
|
||||
: "Test connection"}
|
||||
</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.">
|
||||
<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,
|
||||
driver: e.target.value === "local" ? "local" : "ssh",
|
||||
}))}
|
||||
>
|
||||
<option value="ssh">SSH</option>
|
||||
<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}
|
||||
|
||||
<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,6 +1,7 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { FlaskConical } from "lucide-react";
|
||||
import type { PatchInstanceExperimentalSettings } from "@paperclipai/shared";
|
||||
import { instanceSettingsApi } from "@/api/instanceSettings";
|
||||
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
|
|
@ -24,7 +25,7 @@ export function InstanceExperimentalSettings() {
|
|||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: async (patch: { enableIsolatedWorkspaces?: boolean; autoRestartDevServerWhenIdle?: boolean }) =>
|
||||
mutationFn: async (patch: PatchInstanceExperimentalSettings) =>
|
||||
instanceSettingsApi.updateExperimental(patch),
|
||||
onSuccess: async () => {
|
||||
setActionError(null);
|
||||
|
|
@ -52,6 +53,7 @@ export function InstanceExperimentalSettings() {
|
|||
);
|
||||
}
|
||||
|
||||
const enableEnvironments = experimentalQuery.data?.enableEnvironments === true;
|
||||
const enableIsolatedWorkspaces = experimentalQuery.data?.enableIsolatedWorkspaces === true;
|
||||
const autoRestartDevServerWhenIdle = experimentalQuery.data?.autoRestartDevServerWhenIdle === true;
|
||||
|
||||
|
|
@ -73,6 +75,24 @@ export function InstanceExperimentalSettings() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<section className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<h2 className="text-sm font-semibold">Enable Environments</h2>
|
||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||
Show environment management in company settings and allow project and agent environment assignment
|
||||
controls.
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
checked={enableEnvironments}
|
||||
onCheckedChange={() => toggleMutation.mutate({ enableEnvironments: !enableEnvironments })}
|
||||
disabled={toggleMutation.isPending}
|
||||
aria-label="Toggle environments experimental setting"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { getUIAdapter, listUIAdapters } from "../adapters";
|
|||
import { useDisabledAdaptersSync } from "../adapters/use-disabled-adapters";
|
||||
import { isValidAdapterType } from "../adapters/metadata";
|
||||
import { ReportsToPicker } from "../components/ReportsToPicker";
|
||||
import { buildNewAgentRuntimeConfig } from "../lib/new-agent-runtime-config";
|
||||
import { buildNewAgentHirePayload } from "../lib/new-agent-hire-payload";
|
||||
import {
|
||||
DEFAULT_CODEX_LOCAL_BYPASS_APPROVALS_AND_SANDBOX,
|
||||
DEFAULT_CODEX_LOCAL_MODEL,
|
||||
|
|
@ -168,20 +168,17 @@ export function NewAgent() {
|
|||
return;
|
||||
}
|
||||
}
|
||||
createAgent.mutate({
|
||||
name: name.trim(),
|
||||
role: effectiveRole,
|
||||
...(title.trim() ? { title: title.trim() } : {}),
|
||||
...(reportsTo ? { reportsTo } : {}),
|
||||
...(selectedSkillKeys.length > 0 ? { desiredSkills: selectedSkillKeys } : {}),
|
||||
adapterType: configValues.adapterType,
|
||||
adapterConfig: buildAdapterConfig(),
|
||||
runtimeConfig: buildNewAgentRuntimeConfig({
|
||||
heartbeatEnabled: configValues.heartbeatEnabled,
|
||||
intervalSec: configValues.intervalSec,
|
||||
createAgent.mutate(
|
||||
buildNewAgentHirePayload({
|
||||
name,
|
||||
effectiveRole,
|
||||
title,
|
||||
reportsTo,
|
||||
selectedSkillKeys,
|
||||
configValues,
|
||||
adapterConfig: buildAdapterConfig(),
|
||||
}),
|
||||
budgetMonthlyCents: 0,
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
const availableSkills = (companySkills ?? []).filter((skill) => !skill.key.startsWith("paperclipai/paperclip/"));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue