mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
Add sandbox environment support (#4415)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - The environment/runtime layer decides where agent work executes and how the control plane reaches those runtimes. > - Today Paperclip can run locally and over SSH, but sandboxed execution needs a first-class environment model instead of one-off adapter behavior. > - We also want sandbox providers to be pluggable so the core does not hardcode every provider implementation. > - This branch adds the Sandbox environment path, the provider contract, and a deterministic fake provider plugin. > - That required synchronized changes across shared contracts, plugin SDK surfaces, server runtime orchestration, and the UI environment/workspace flows. > - The result is that sandbox execution becomes a core control-plane capability while keeping provider implementations extensible and testable. ## What Changed - Added sandbox runtime support to the environment execution path, including runtime URL discovery, sandbox execution targeting, orchestration, and heartbeat integration. - Added plugin-provider support for sandbox environments so providers can be supplied via plugins instead of hardcoded server logic. - Added the fake sandbox provider plugin with deterministic behavior suitable for local and automated testing. - Updated shared types, validators, plugin protocol definitions, and SDK helpers to carry sandbox provider and workspace-runtime contracts across package boundaries. - Updated server routes and services so companies can create sandbox environments, select them for work, and execute work through the sandbox runtime path. - Updated the UI environment and workspace surfaces to expose sandbox environment configuration and selection. - Added test coverage for sandbox runtime behavior, provider seams, environment route guards, orchestration, and the fake provider plugin. ## Verification - Ran locally before the final fixture-only scrub: - `pnpm -r typecheck` - `pnpm test:run` - `pnpm build` - Ran locally after the final scrub amend: - `pnpm vitest run server/src/__tests__/runtime-api.test.ts` - Reviewer spot checks: - create a sandbox environment backed by the fake provider plugin - run work through that environment - confirm sandbox provider execution does not inherit host secrets implicitly ## Risks - This touches shared contracts, plugin SDK plumbing, server runtime orchestration, and UI environment/workspace flows, so regressions would likely show up as cross-layer mismatches rather than isolated type errors. - Runtime URL discovery and sandbox callback selection are sensitive to host/bind configuration; if that logic is wrong, sandbox-backed callbacks may fail even when execution succeeds. - The fake provider plugin is intentionally deterministic and test-oriented; future providers may expose capability gaps that this branch does not yet cover. ## Model Used - OpenAI Codex coding agent on a GPT-5-class backend in the Paperclip/Codex harness. Exact backend model ID is not exposed in-session. Tool-assisted workflow with shell execution, file editing, git history inspection, and local test execution. ## 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
641eb44949
commit
70679a3321
91 changed files with 10469 additions and 1498 deletions
|
|
@ -25,6 +25,25 @@ export interface RunForIssue {
|
|||
continuationAttempt?: number;
|
||||
lastUsefulActionAt?: string | null;
|
||||
nextAction?: string | null;
|
||||
contextSnapshot?: Record<string, unknown> | null;
|
||||
environment?: {
|
||||
id: string;
|
||||
name: string;
|
||||
driver: string;
|
||||
} | null;
|
||||
environmentLease?: {
|
||||
id: string;
|
||||
status: string;
|
||||
leasePolicy: string;
|
||||
provider: string | null;
|
||||
providerLeaseId: string | null;
|
||||
executionWorkspaceId: string | null;
|
||||
workspacePath: string | null;
|
||||
failureReason: string | null;
|
||||
cleanupStatus: string | null;
|
||||
acquiredAt: string | Date;
|
||||
releasedAt: string | Date | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface IssueForRun {
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ export const environmentsApi = {
|
|||
create: (companyId: string, body: {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
driver: "local" | "ssh";
|
||||
driver: "local" | "ssh" | "sandbox" | "plugin";
|
||||
config?: Record<string, unknown>;
|
||||
metadata?: Record<string, unknown> | null;
|
||||
}) => api.post<Environment>(`/companies/${companyId}/environments`, body),
|
||||
update: (environmentId: string, body: {
|
||||
name?: string;
|
||||
description?: string | null;
|
||||
driver?: "local" | "ssh";
|
||||
driver?: "local" | "ssh" | "sandbox" | "plugin";
|
||||
status?: "active" | "archived";
|
||||
config?: Record<string, unknown>;
|
||||
metadata?: Record<string, unknown> | null;
|
||||
|
|
@ -24,8 +24,8 @@ export const environmentsApi = {
|
|||
probe: (environmentId: string) => api.post<EnvironmentProbeResult>(`/environments/${environmentId}/probe`, {}),
|
||||
probeConfig: (companyId: string, body: {
|
||||
name?: string;
|
||||
driver: "local" | "ssh" | "sandbox" | "plugin";
|
||||
description?: string | null;
|
||||
driver: "local" | "ssh";
|
||||
config?: Record<string, unknown>;
|
||||
metadata?: Record<string, unknown> | null;
|
||||
}) => api.post<EnvironmentProbeResult>(`/companies/${companyId}/environments/probe-config`, body),
|
||||
|
|
|
|||
|
|
@ -40,6 +40,22 @@ interface LinkedRunItem {
|
|||
agentId: string;
|
||||
createdAt: Date | string;
|
||||
startedAt: Date | string | null;
|
||||
environment?: {
|
||||
id: string;
|
||||
name: string;
|
||||
driver: string;
|
||||
} | null;
|
||||
environmentLease?: {
|
||||
id: string;
|
||||
status: string;
|
||||
leasePolicy: string;
|
||||
provider: string | null;
|
||||
providerLeaseId: string | null;
|
||||
executionWorkspaceId: string | null;
|
||||
workspacePath: string | null;
|
||||
failureReason: string | null;
|
||||
cleanupStatus: string | null;
|
||||
} | null;
|
||||
finishedAt?: Date | string | null;
|
||||
}
|
||||
|
||||
|
|
@ -119,6 +135,16 @@ function clearDraft(draftKey: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function BreakablePath({ text }: { text: string }) {
|
||||
const parts: React.ReactNode[] = [];
|
||||
const segments = text.split(/(?<=[\/-])/);
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
if (i > 0) parts.push(<wbr key={i} />);
|
||||
parts.push(segments[i]);
|
||||
}
|
||||
return <>{parts}</>;
|
||||
}
|
||||
|
||||
function parseReassignment(target: string): CommentReassignment | null {
|
||||
if (!target || target === "__none__") {
|
||||
return { assigneeAgentId: null, assigneeUserId: null };
|
||||
|
|
@ -611,6 +637,40 @@ const TimelineList = memo(function TimelineList({
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{run.environment || run.environmentLease ? (
|
||||
<div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
|
||||
{run.environment ? (
|
||||
<span>
|
||||
Environment <span className="text-foreground">{run.environment.name}</span>
|
||||
<span> · {run.environment.driver}</span>
|
||||
</span>
|
||||
) : null}
|
||||
{run.environmentLease?.provider ? (
|
||||
<span>
|
||||
Provider <span className="text-foreground">{run.environmentLease.provider}</span>
|
||||
</span>
|
||||
) : null}
|
||||
{run.environmentLease ? (
|
||||
<span>
|
||||
Lease{" "}
|
||||
<span className="font-mono text-foreground">
|
||||
{run.environmentLease.id.slice(0, 8)}
|
||||
</span>
|
||||
<span> · {run.environmentLease.status}</span>
|
||||
</span>
|
||||
) : null}
|
||||
{run.environmentLease?.workspacePath ? (
|
||||
<span className="min-w-0 font-mono" style={{ overflowWrap: "anywhere" }}>
|
||||
<BreakablePath text={run.environmentLease.workspacePath} />
|
||||
</span>
|
||||
) : null}
|
||||
{run.environmentLease?.failureReason ? (
|
||||
<span className="text-destructive">
|
||||
Failure: {run.environmentLease.failureReason}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,166 +3,246 @@
|
|||
import { act } from "react";
|
||||
import type { ComponentProps } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { Issue, Project } from "@paperclipai/shared";
|
||||
import type { ExecutionWorkspace, Issue } from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { IssueWorkspaceCard } from "./IssueWorkspaceCard";
|
||||
|
||||
const mockInstanceSettingsApi = vi.hoisted(() => ({
|
||||
getExperimental: vi.fn(),
|
||||
}));
|
||||
const useQueryMock = vi.fn();
|
||||
|
||||
const mockExecutionWorkspacesApi = vi.hoisted(() => ({
|
||||
list: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../api/instanceSettings", () => ({
|
||||
instanceSettingsApi: mockInstanceSettingsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/execution-workspaces", () => ({
|
||||
executionWorkspacesApi: mockExecutionWorkspacesApi,
|
||||
}));
|
||||
vi.mock("@tanstack/react-query", async () => {
|
||||
const actual = await vi.importActual<typeof import("@tanstack/react-query")>("@tanstack/react-query");
|
||||
return {
|
||||
...actual,
|
||||
useQuery: (options: unknown) => useQueryMock(options),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("../context/CompanyContext", () => ({
|
||||
useCompany: () => ({
|
||||
selectedCompanyId: "company-1",
|
||||
}),
|
||||
useCompany: () => ({ selectedCompanyId: "company-1" }),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/router", () => ({
|
||||
Link: ({ children, to, ...props }: ComponentProps<"a"> & { to: string }) => <a href={to} {...props}>{children}</a>,
|
||||
Link: ({ children, className, ...props }: ComponentProps<"a">) => (
|
||||
<a className={className} {...props}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
function createIssue(overrides: Partial<Issue> = {}): Issue {
|
||||
function createExecutionWorkspace(overrides: Partial<ExecutionWorkspace> = {}): ExecutionWorkspace {
|
||||
return {
|
||||
id: "issue-1",
|
||||
id: "workspace-1",
|
||||
companyId: "company-1",
|
||||
projectId: "project-1",
|
||||
projectWorkspaceId: null,
|
||||
goalId: null,
|
||||
parentId: null,
|
||||
title: "Issue workspace",
|
||||
description: null,
|
||||
status: "todo",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
checkoutRunId: null,
|
||||
executionRunId: null,
|
||||
executionAgentNameKey: null,
|
||||
executionLockedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
issueNumber: 1,
|
||||
identifier: "PAP-1",
|
||||
requestDepth: 0,
|
||||
billingCode: null,
|
||||
assigneeAdapterOverrides: null,
|
||||
executionWorkspaceId: null,
|
||||
executionWorkspacePreference: "shared_workspace",
|
||||
executionWorkspaceSettings: { mode: "shared_workspace" },
|
||||
startedAt: null,
|
||||
completedAt: null,
|
||||
cancelledAt: null,
|
||||
hiddenAt: null,
|
||||
createdAt: new Date("2026-04-08T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-08T00:00:00.000Z"),
|
||||
projectWorkspaceId: "project-workspace-1",
|
||||
sourceIssueId: null,
|
||||
mode: "isolated_workspace",
|
||||
strategyType: "git_worktree",
|
||||
name: "Issue sandbox",
|
||||
status: "active",
|
||||
cwd: "/tmp/issue-sandbox",
|
||||
repoUrl: null,
|
||||
baseRef: null,
|
||||
branchName: "paperclip/papa-81",
|
||||
providerType: "git_worktree",
|
||||
providerRef: null,
|
||||
derivedFromExecutionWorkspaceId: null,
|
||||
lastUsedAt: new Date("2026-04-16T05:00:00.000Z"),
|
||||
openedAt: new Date("2026-04-16T04:59:00.000Z"),
|
||||
closedAt: null,
|
||||
cleanupEligibleAt: null,
|
||||
cleanupReason: null,
|
||||
config: {
|
||||
environmentId: "env-workspace",
|
||||
provisionCommand: null,
|
||||
teardownCommand: null,
|
||||
cleanupCommand: null,
|
||||
workspaceRuntime: null,
|
||||
desiredState: null,
|
||||
},
|
||||
metadata: null,
|
||||
runtimeServices: [],
|
||||
createdAt: new Date("2026-04-16T04:59:00.000Z"),
|
||||
updatedAt: new Date("2026-04-16T05:00:00.000Z"),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function createProject(): Project {
|
||||
function createIssue(overrides: Partial<Issue> = {}): Issue {
|
||||
return {
|
||||
id: "project-1",
|
||||
id: "issue-1",
|
||||
identifier: "PAPA-81",
|
||||
companyId: "company-1",
|
||||
urlKey: "project-1",
|
||||
projectId: "project-1",
|
||||
projectWorkspaceId: "project-workspace-1",
|
||||
goalId: null,
|
||||
goalIds: [],
|
||||
goals: [],
|
||||
name: "Project 1",
|
||||
parentId: null,
|
||||
title: "Sandboxing",
|
||||
description: null,
|
||||
status: "in_progress",
|
||||
leadAgentId: null,
|
||||
targetDate: null,
|
||||
color: "#22c55e",
|
||||
env: null,
|
||||
pauseReason: null,
|
||||
pausedAt: null,
|
||||
archivedAt: null,
|
||||
executionWorkspacePolicy: {
|
||||
enabled: true,
|
||||
defaultMode: "shared_workspace",
|
||||
allowIssueOverride: true,
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-1",
|
||||
assigneeUserId: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
issueNumber: 81,
|
||||
requestDepth: 0,
|
||||
billingCode: null,
|
||||
assigneeAdapterOverrides: null,
|
||||
executionWorkspaceId: "workspace-1",
|
||||
executionWorkspacePreference: "isolated_workspace",
|
||||
executionWorkspaceSettings: {
|
||||
mode: "isolated_workspace",
|
||||
environmentId: "env-issue",
|
||||
},
|
||||
codebase: {
|
||||
workspaceId: null,
|
||||
repoUrl: null,
|
||||
repoRef: null,
|
||||
defaultRef: null,
|
||||
repoName: null,
|
||||
localFolder: null,
|
||||
managedFolder: "/tmp/project-1",
|
||||
effectiveLocalFolder: "/tmp/project-1",
|
||||
origin: "managed_checkout",
|
||||
},
|
||||
workspaces: [],
|
||||
primaryWorkspace: null,
|
||||
createdAt: new Date("2026-04-08T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-08T00:00:00.000Z"),
|
||||
checkoutRunId: null,
|
||||
executionRunId: null,
|
||||
executionAgentNameKey: null,
|
||||
executionLockedAt: null,
|
||||
startedAt: null,
|
||||
completedAt: null,
|
||||
cancelledAt: null,
|
||||
hiddenAt: null,
|
||||
createdAt: new Date("2026-04-16T04:30:00.000Z"),
|
||||
updatedAt: new Date("2026-04-16T05:30:00.000Z"),
|
||||
labels: [],
|
||||
labelIds: [],
|
||||
currentExecutionWorkspace: null,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function renderCard(container: HTMLDivElement) {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
},
|
||||
});
|
||||
const root = createRoot(container);
|
||||
act(() => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueWorkspaceCard issue={createIssue()} project={createProject()} onUpdate={() => {}} />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
return root;
|
||||
}
|
||||
|
||||
async function flush() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
}
|
||||
|
||||
describe("IssueWorkspaceCard", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
mockExecutionWorkspacesApi.list.mockReset();
|
||||
mockExecutionWorkspacesApi.list.mockResolvedValue([]);
|
||||
useQueryMock.mockReset();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
container.remove();
|
||||
});
|
||||
|
||||
it("renders a stable skeleton while workspace settings are still loading", async () => {
|
||||
mockInstanceSettingsApi.getExperimental.mockImplementation(() => new Promise(() => {}));
|
||||
it("locks the environment selector and clears the issue override when reusing a workspace", () => {
|
||||
const root = createRoot(container);
|
||||
const onUpdate = vi.fn();
|
||||
const reusableWorkspace = createExecutionWorkspace();
|
||||
|
||||
const root = renderCard(container);
|
||||
await flush();
|
||||
useQueryMock.mockImplementation((options: { queryKey: unknown[] }) => {
|
||||
if (options.queryKey[0] === "instance") {
|
||||
return { data: { enableEnvironments: true, enableIsolatedWorkspaces: true } };
|
||||
}
|
||||
if (options.queryKey[0] === "environments") {
|
||||
return {
|
||||
data: [{ id: "env-workspace", name: "Local", driver: "local" }],
|
||||
};
|
||||
}
|
||||
if (options.queryKey[0] === "execution-workspaces") {
|
||||
return { data: [reusableWorkspace] };
|
||||
}
|
||||
return { data: undefined };
|
||||
});
|
||||
|
||||
expect(container.querySelector('[data-testid="issue-workspace-card-skeleton"]')).not.toBeNull();
|
||||
act(() => {
|
||||
root.render(
|
||||
<IssueWorkspaceCard
|
||||
issue={createIssue()}
|
||||
project={{
|
||||
id: "project-1",
|
||||
executionWorkspacePolicy: {
|
||||
enabled: true,
|
||||
defaultMode: "isolated_workspace",
|
||||
environmentId: "env-project",
|
||||
},
|
||||
}}
|
||||
onUpdate={onUpdate}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const editButton = Array.from(container.querySelectorAll("button")).find((button) => button.textContent?.includes("Edit"));
|
||||
expect(editButton).not.toBeUndefined();
|
||||
|
||||
act(() => {
|
||||
editButton!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
|
||||
});
|
||||
|
||||
const selects = container.querySelectorAll("select");
|
||||
expect(selects).toHaveLength(3);
|
||||
|
||||
const environmentSelect = selects[2] as HTMLSelectElement;
|
||||
expect(environmentSelect.disabled).toBe(true);
|
||||
expect(environmentSelect.value).toBe("env-workspace");
|
||||
expect(container.textContent).toContain("Environment selection is locked while reusing an existing workspace.");
|
||||
|
||||
const saveButton = Array.from(container.querySelectorAll("button")).find((button) => button.textContent?.includes("Save"));
|
||||
expect(saveButton).not.toBeUndefined();
|
||||
|
||||
act(() => {
|
||||
saveButton!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
|
||||
});
|
||||
|
||||
expect(onUpdate).toHaveBeenCalledWith({
|
||||
executionWorkspacePreference: "reuse_existing",
|
||||
executionWorkspaceId: "workspace-1",
|
||||
executionWorkspaceSettings: {
|
||||
mode: "isolated_workspace",
|
||||
environmentId: null,
|
||||
},
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("hides environment UI when environments are disabled", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
useQueryMock.mockImplementation((options: { queryKey: unknown[] }) => {
|
||||
if (options.queryKey[0] === "instance") {
|
||||
return { data: { enableEnvironments: false, enableIsolatedWorkspaces: true } };
|
||||
}
|
||||
if (options.queryKey[0] === "execution-workspaces") {
|
||||
return { data: [createExecutionWorkspace()] };
|
||||
}
|
||||
return { data: undefined };
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<IssueWorkspaceCard
|
||||
issue={createIssue()}
|
||||
project={{
|
||||
id: "project-1",
|
||||
executionWorkspacePolicy: {
|
||||
enabled: true,
|
||||
defaultMode: "isolated_workspace",
|
||||
environmentId: "env-project",
|
||||
},
|
||||
}}
|
||||
onUpdate={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).not.toContain("Environment:");
|
||||
|
||||
const editButton = Array.from(container.querySelectorAll("button")).find((button) => button.textContent?.includes("Edit"));
|
||||
expect(editButton).not.toBeUndefined();
|
||||
|
||||
act(() => {
|
||||
editButton!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
|
||||
});
|
||||
|
||||
const selects = container.querySelectorAll("select");
|
||||
expect(selects).toHaveLength(2);
|
||||
expect(container.textContent).not.toContain("Project default environment");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { Link } from "@/lib/router";
|
|||
import type { Issue, ExecutionWorkspace } from "@paperclipai/shared";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { executionWorkspacesApi } from "../api/execution-workspaces";
|
||||
import { environmentsApi } from "../api/environments";
|
||||
import { instanceSettingsApi } from "../api/instanceSettings";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { cn, projectWorkspaceUrl } from "../lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Check, Copy, GitBranch, FolderOpen, Pencil, X } from "lucide-react";
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
|
@ -27,12 +27,12 @@ function issueModeForExistingWorkspace(mode: string | null | undefined) {
|
|||
return "shared_workspace";
|
||||
}
|
||||
|
||||
function shouldPresentExistingWorkspaceSelection(issue: {
|
||||
executionWorkspaceId: string | null;
|
||||
executionWorkspacePreference: string | null;
|
||||
executionWorkspaceSettings: Issue["executionWorkspaceSettings"];
|
||||
currentExecutionWorkspace?: ExecutionWorkspace | null;
|
||||
}) {
|
||||
function shouldPresentExistingWorkspaceSelection(
|
||||
issue: Pick<
|
||||
Issue,
|
||||
"executionWorkspaceId" | "executionWorkspacePreference" | "executionWorkspaceSettings" | "currentExecutionWorkspace"
|
||||
>,
|
||||
) {
|
||||
const persistedMode =
|
||||
issue.currentExecutionWorkspace?.mode
|
||||
?? issue.executionWorkspaceSettings?.mode
|
||||
|
|
@ -157,25 +157,6 @@ function statusBadge(status: string) {
|
|||
);
|
||||
}
|
||||
|
||||
function IssueWorkspaceCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-lg border border-border p-3 space-y-3" data-testid="issue-workspace-card-skeleton">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-4 w-4 rounded-full" />
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-6 w-14" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-3 w-40" />
|
||||
<Skeleton className="h-3 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Main component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
|
@ -196,7 +177,16 @@ interface IssueWorkspaceCardProps {
|
|||
companyId: string | null;
|
||||
currentExecutionWorkspace?: ExecutionWorkspace | null;
|
||||
};
|
||||
project: { id: string; executionWorkspacePolicy?: { enabled?: boolean; defaultMode?: string | null; defaultProjectWorkspaceId?: string | null } | null; workspaces?: Array<{ id: string; isPrimary: boolean }> } | null;
|
||||
project: {
|
||||
id: string;
|
||||
executionWorkspacePolicy?: {
|
||||
enabled?: boolean;
|
||||
defaultMode?: string | null;
|
||||
defaultProjectWorkspaceId?: string | null;
|
||||
environmentId?: string | null;
|
||||
} | null;
|
||||
workspaces?: Array<{ id: string; isPrimary: boolean }>;
|
||||
} | null;
|
||||
onUpdate: (data: Record<string, unknown>) => void;
|
||||
initialEditing?: boolean;
|
||||
livePreview?: boolean;
|
||||
|
|
@ -215,17 +205,21 @@ export function IssueWorkspaceCard({
|
|||
const companyId = issue.companyId ?? selectedCompanyId;
|
||||
const [editing, setEditing] = useState(initialEditing);
|
||||
|
||||
const { data: experimentalSettings, isLoading: experimentalSettingsLoading } = useQuery({
|
||||
const { data: experimentalSettings } = useQuery({
|
||||
queryKey: queryKeys.instance.experimentalSettings,
|
||||
queryFn: () => instanceSettingsApi.getExperimental(),
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const projectWorkspacePolicyEnabled = Boolean(project?.executionWorkspacePolicy?.enabled);
|
||||
const environmentsEnabled = experimentalSettings?.enableEnvironments === true;
|
||||
const policyEnabled = experimentalSettings?.enableIsolatedWorkspaces === true
|
||||
&& projectWorkspacePolicyEnabled;
|
||||
&& Boolean(project?.executionWorkspacePolicy?.enabled);
|
||||
|
||||
const workspace = issue.currentExecutionWorkspace as ExecutionWorkspace | null | undefined;
|
||||
const { data: environments } = useQuery({
|
||||
queryKey: queryKeys.environments.list(companyId!),
|
||||
queryFn: () => environmentsApi.list(companyId!),
|
||||
enabled: Boolean(companyId) && environmentsEnabled,
|
||||
});
|
||||
|
||||
const { data: reusableExecutionWorkspaces } = useQuery({
|
||||
queryKey: queryKeys.executionWorkspaces.list(companyId!, {
|
||||
|
|
@ -260,25 +254,39 @@ export function IssueWorkspaceCard({
|
|||
?? workspace
|
||||
?? null;
|
||||
|
||||
const configuredSelection = shouldPresentExistingWorkspaceSelection(issue)
|
||||
const currentSelection = shouldPresentExistingWorkspaceSelection(issue)
|
||||
? "reuse_existing"
|
||||
: (
|
||||
issue.executionWorkspacePreference
|
||||
?? issue.executionWorkspaceSettings?.mode
|
||||
?? defaultExecutionWorkspaceModeForProject(project)
|
||||
);
|
||||
const currentSelection = configuredSelection === "operator_branch" || configuredSelection === "agent_default"
|
||||
? "shared_workspace"
|
||||
: configuredSelection;
|
||||
|
||||
const [draftSelection, setDraftSelection] = useState(currentSelection);
|
||||
const [draftExecutionWorkspaceId, setDraftExecutionWorkspaceId] = useState(issue.executionWorkspaceId ?? "");
|
||||
const [draftEnvironmentId, setDraftEnvironmentId] = useState(issue.executionWorkspaceSettings?.environmentId ?? "");
|
||||
const projectEnvironmentId = environmentsEnabled
|
||||
? project?.executionWorkspacePolicy?.environmentId ?? null
|
||||
: null;
|
||||
const currentReusableEnvironmentId = selectedReusableExecutionWorkspace?.config?.environmentId ?? null;
|
||||
const currentEnvironmentId = environmentsEnabled
|
||||
? (
|
||||
(currentSelection === "reuse_existing" && currentReusableEnvironmentId)
|
||||
?? workspace?.config?.environmentId
|
||||
?? issue.executionWorkspaceSettings?.environmentId
|
||||
?? projectEnvironmentId
|
||||
)
|
||||
: null;
|
||||
const currentEnvironment =
|
||||
environments?.find((environment) => environment.id === currentEnvironmentId)
|
||||
?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) return;
|
||||
setDraftSelection(currentSelection);
|
||||
setDraftExecutionWorkspaceId(issue.executionWorkspaceId ?? "");
|
||||
}, [currentSelection, editing, issue.executionWorkspaceId]);
|
||||
setDraftEnvironmentId(issue.executionWorkspaceSettings?.environmentId ?? "");
|
||||
}, [currentSelection, editing, issue.executionWorkspaceId, issue.executionWorkspaceSettings?.environmentId]);
|
||||
|
||||
const activeNonDefaultWorkspace = Boolean(workspace && workspace.mode !== "shared_workspace");
|
||||
|
||||
|
|
@ -298,6 +306,17 @@ export function IssueWorkspaceCard({
|
|||
});
|
||||
|
||||
const canSaveWorkspaceConfig = draftSelection !== "reuse_existing" || draftExecutionWorkspaceId.length > 0;
|
||||
const reuseExistingSelection = draftSelection === "reuse_existing";
|
||||
const selectedReusableEnvironmentId = configuredReusableWorkspace?.config?.environmentId ?? "";
|
||||
const runSelectableEnvironments = useMemo(
|
||||
() => environmentsEnabled ? (environments ?? []).filter((environment) => {
|
||||
if (environment.driver === "local" || environment.driver === "ssh") return true;
|
||||
if (environment.driver !== "sandbox") return false;
|
||||
const provider = typeof environment.config?.provider === "string" ? environment.config.provider : null;
|
||||
return provider !== null && provider !== "fake";
|
||||
}) : [],
|
||||
[environments, environmentsEnabled],
|
||||
);
|
||||
const draftWorkspaceBranchName =
|
||||
draftSelection === "reuse_existing" && configuredReusableWorkspace?.mode !== "shared_workspace"
|
||||
? configuredReusableWorkspace?.branchName ?? null
|
||||
|
|
@ -311,9 +330,11 @@ export function IssueWorkspaceCard({
|
|||
draftSelection === "reuse_existing"
|
||||
? issueModeForExistingWorkspace(configuredReusableWorkspace?.mode)
|
||||
: draftSelection,
|
||||
environmentId: draftSelection === "reuse_existing" ? null : draftEnvironmentId || null,
|
||||
},
|
||||
}), [
|
||||
configuredReusableWorkspace?.mode,
|
||||
draftEnvironmentId,
|
||||
draftExecutionWorkspaceId,
|
||||
draftSelection,
|
||||
]);
|
||||
|
|
@ -339,12 +360,9 @@ export function IssueWorkspaceCard({
|
|||
const handleCancel = useCallback(() => {
|
||||
setDraftSelection(currentSelection);
|
||||
setDraftExecutionWorkspaceId(issue.executionWorkspaceId ?? "");
|
||||
setDraftEnvironmentId(issue.executionWorkspaceSettings?.environmentId ?? "");
|
||||
setEditing(false);
|
||||
}, [currentSelection, issue.executionWorkspaceId]);
|
||||
|
||||
if (project && projectWorkspacePolicyEnabled && experimentalSettingsLoading) {
|
||||
return <IssueWorkspaceCardSkeleton />;
|
||||
}
|
||||
}, [currentSelection, issue.executionWorkspaceId, issue.executionWorkspaceSettings?.environmentId]);
|
||||
|
||||
if (!policyEnabled || !project) return null;
|
||||
|
||||
|
|
@ -362,7 +380,7 @@ export function IssueWorkspaceCard({
|
|||
{workspace ? statusBadge(workspace.status) : statusBadge("idle")}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{!livePreview && editing ? (
|
||||
{showEditingControls ? (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -381,7 +399,7 @@ export function IssueWorkspaceCard({
|
|||
Save
|
||||
</Button>
|
||||
</>
|
||||
) : !livePreview ? (
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
|
@ -390,7 +408,7 @@ export function IssueWorkspaceCard({
|
|||
>
|
||||
<Pencil className="h-3 w-3 mr-1" />Edit
|
||||
</Button>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -415,6 +433,16 @@ export function IssueWorkspaceCard({
|
|||
<CopyableInline value={workspace.repoUrl} mono />
|
||||
</div>
|
||||
)}
|
||||
{environmentsEnabled && currentEnvironmentId && (
|
||||
<div className="text-muted-foreground" style={{ overflowWrap: "anywhere" }}>
|
||||
Environment: <span className="text-foreground">{currentEnvironment?.name ?? currentEnvironmentId}</span>
|
||||
{currentSelection === "reuse_existing" && currentReusableEnvironmentId === currentEnvironmentId
|
||||
? " · reused workspace"
|
||||
: !issue.executionWorkspaceSettings?.environmentId && projectEnvironmentId === currentEnvironmentId
|
||||
? " · project default"
|
||||
: null}
|
||||
</div>
|
||||
)}
|
||||
{!workspace && (
|
||||
<div className="text-muted-foreground">
|
||||
{currentSelection === "isolated_workspace"
|
||||
|
|
@ -453,7 +481,7 @@ export function IssueWorkspaceCard({
|
|||
)}
|
||||
|
||||
{/* Editing controls */}
|
||||
{showEditingControls && (
|
||||
{editing && (
|
||||
<div className="space-y-2 pt-1">
|
||||
<select
|
||||
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
|
||||
|
|
@ -494,6 +522,42 @@ export function IssueWorkspaceCard({
|
|||
</select>
|
||||
)}
|
||||
|
||||
{environmentsEnabled ? (
|
||||
<>
|
||||
<select
|
||||
className={cn(
|
||||
"w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none",
|
||||
reuseExistingSelection && "cursor-not-allowed opacity-70",
|
||||
)}
|
||||
value={reuseExistingSelection ? selectedReusableEnvironmentId : draftEnvironmentId}
|
||||
onChange={(e) => setDraftEnvironmentId(e.target.value)}
|
||||
disabled={reuseExistingSelection}
|
||||
>
|
||||
<option value="">
|
||||
{reuseExistingSelection
|
||||
? configuredReusableWorkspace
|
||||
? "No environment on reused workspace"
|
||||
: "Select an existing workspace to inspect its environment"
|
||||
: projectEnvironmentId
|
||||
? "Project default environment"
|
||||
: "No environment"}
|
||||
</option>
|
||||
{runSelectableEnvironments.map((environment) => (
|
||||
<option key={environment.id} value={environment.id}>
|
||||
{environment.name} · {environment.driver}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{reuseExistingSelection && (
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{configuredReusableWorkspace
|
||||
? "Environment selection is locked while reusing an existing workspace. The next run will use that workspace's persisted environment config."
|
||||
: "Choose an existing workspace first. Its persisted environment config will determine the next run."}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* Current workspace summary when editing */}
|
||||
{workspace && (
|
||||
<div className="text-[11px] text-muted-foreground space-y-0.5 pt-1 border-t border-border/50">
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
|
||||
async function flush() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -302,9 +302,12 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
|
|||
branchTemplate: "",
|
||||
worktreeParentDir: "",
|
||||
};
|
||||
const runSelectableEnvironments = (environments ?? []).filter((environment) =>
|
||||
environment.driver === "local" || environment.driver === "ssh"
|
||||
);
|
||||
const runSelectableEnvironments = (environments ?? []).filter((environment) => {
|
||||
if (environment.driver === "local" || environment.driver === "ssh") return true;
|
||||
if (environment.driver !== "sandbox") return false;
|
||||
const provider = typeof environment.config?.provider === "string" ? environment.config.provider : null;
|
||||
return provider !== null && provider !== "fake";
|
||||
});
|
||||
|
||||
const invalidateProject = () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.id) });
|
||||
|
|
|
|||
167
ui/src/pages/CompanySettings.test.tsx
Normal file
167
ui/src/pages/CompanySettings.test.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
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 { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
||||
const mockCompaniesApi = vi.hoisted(() => ({
|
||||
update: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockAccessApi = vi.hoisted(() => ({
|
||||
createOpenClawInvitePrompt: vi.fn(),
|
||||
getInviteOnboarding: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockAssetsApi = vi.hoisted(() => ({
|
||||
uploadCompanyLogo: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockEnvironmentsApi = vi.hoisted(() => ({
|
||||
list: vi.fn(),
|
||||
capabilities: vi.fn(),
|
||||
create: vi.fn(),
|
||||
update: vi.fn(),
|
||||
probe: vi.fn(),
|
||||
probeConfig: vi.fn(),
|
||||
archive: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockInstanceSettingsApi = vi.hoisted(() => ({
|
||||
getExperimental: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockSecretsApi = vi.hoisted(() => ({
|
||||
list: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockPushToast = vi.hoisted(() => vi.fn());
|
||||
const mockSetBreadcrumbs = vi.hoisted(() => vi.fn());
|
||||
const mockSetSelectedCompanyId = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("../api/companies", () => ({
|
||||
companiesApi: mockCompaniesApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/access", () => ({
|
||||
accessApi: mockAccessApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/assets", () => ({
|
||||
assetsApi: mockAssetsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/environments", () => ({
|
||||
environmentsApi: mockEnvironmentsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/instanceSettings", () => ({
|
||||
instanceSettingsApi: mockInstanceSettingsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../api/secrets", () => ({
|
||||
secretsApi: mockSecretsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../context/BreadcrumbContext", () => ({
|
||||
useBreadcrumbs: () => ({
|
||||
setBreadcrumbs: mockSetBreadcrumbs,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../context/ToastContext", () => ({
|
||||
useToast: () => ({
|
||||
pushToast: mockPushToast,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../context/CompanyContext", () => ({
|
||||
useCompany: () => ({
|
||||
companies: [{ id: "company-1", name: "Paperclip", issuePrefix: "PAP" }],
|
||||
selectedCompany: {
|
||||
id: "company-1",
|
||||
name: "Paperclip",
|
||||
description: null,
|
||||
brandColor: null,
|
||||
logoUrl: null,
|
||||
issuePrefix: "PAP",
|
||||
},
|
||||
selectedCompanyId: "company-1",
|
||||
setSelectedCompanyId: mockSetSelectedCompanyId,
|
||||
}),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
async function flushReact() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
describe("CompanySettings", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({
|
||||
enableEnvironments: true,
|
||||
});
|
||||
mockEnvironmentsApi.list.mockResolvedValue([]);
|
||||
mockEnvironmentsApi.capabilities.mockResolvedValue(
|
||||
getEnvironmentCapabilities(AGENT_ADAPTER_TYPES),
|
||||
);
|
||||
mockSecretsApi.list.mockResolvedValue([]);
|
||||
mockCompaniesApi.update.mockResolvedValue({
|
||||
id: "company-1",
|
||||
name: "Paperclip",
|
||||
description: null,
|
||||
brandColor: null,
|
||||
logoUrl: null,
|
||||
issuePrefix: "PAP",
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
container.remove();
|
||||
document.body.innerHTML = "";
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("hides sandbox creation when no run-capable sandbox provider plugins are installed", async () => {
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<CompanySettings />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
const optionLabels = Array.from(container.querySelectorAll("option")).map((option) => option.textContent?.trim());
|
||||
|
||||
expect(optionLabels).not.toContain("Sandbox");
|
||||
expect(container.textContent).not.toContain("Fake sandbox");
|
||||
expect(container.textContent).not.toContain("Fake is the deterministic test provider");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
import { ChangeEvent, useEffect, useState } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
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 { useToast } from "../context/ToastContext";
|
||||
import { companiesApi } from "../api/companies";
|
||||
import { accessApi } from "../api/access";
|
||||
import { assetsApi } from "../api/assets";
|
||||
|
|
@ -37,7 +35,7 @@ type AgentSnippetInput = {
|
|||
type EnvironmentFormState = {
|
||||
name: string;
|
||||
description: string;
|
||||
driver: "local" | "ssh";
|
||||
driver: "local" | "ssh" | "sandbox";
|
||||
sshHost: string;
|
||||
sshPort: string;
|
||||
sshUsername: string;
|
||||
|
|
@ -46,6 +44,13 @@ type EnvironmentFormState = {
|
|||
sshPrivateKeySecretId: string;
|
||||
sshKnownHosts: string;
|
||||
sshStrictHostKeyChecking: boolean;
|
||||
sandboxProvider: string;
|
||||
sandboxImage: string;
|
||||
sandboxTemplate: string;
|
||||
sandboxApiKey: string;
|
||||
sandboxApiKeySecretId: string;
|
||||
sandboxTimeoutMs: string;
|
||||
sandboxReuseLease: boolean;
|
||||
};
|
||||
|
||||
const ENVIRONMENT_SUPPORT_ROWS = AGENT_ADAPTER_TYPES.map((adapterType) => ({
|
||||
|
|
@ -73,7 +78,14 @@ function buildEnvironmentPayload(form: EnvironmentFormState) {
|
|||
knownHosts: form.sshKnownHosts.trim() || null,
|
||||
strictHostKeyChecking: form.sshStrictHostKeyChecking,
|
||||
}
|
||||
: {},
|
||||
: 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,
|
||||
}
|
||||
: {},
|
||||
} as const;
|
||||
}
|
||||
|
||||
|
|
@ -90,6 +102,13 @@ function createEmptyEnvironmentForm(): EnvironmentFormState {
|
|||
sshPrivateKeySecretId: "",
|
||||
sshKnownHosts: "",
|
||||
sshStrictHostKeyChecking: true,
|
||||
sandboxProvider: "",
|
||||
sandboxImage: "ubuntu:24.04",
|
||||
sandboxTemplate: "base",
|
||||
sandboxApiKey: "",
|
||||
sandboxApiKeySecretId: "",
|
||||
sandboxTimeoutMs: "300000",
|
||||
sandboxReuseLease: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +123,8 @@ function readSshConfig(environment: Environment) {
|
|||
? config.port
|
||||
: "22",
|
||||
username: typeof config.username === "string" ? config.username : "",
|
||||
remoteWorkspacePath: typeof config.remoteWorkspacePath === "string" ? config.remoteWorkspacePath : "",
|
||||
remoteWorkspacePath:
|
||||
typeof config.remoteWorkspacePath === "string" ? config.remoteWorkspacePath : "",
|
||||
privateKey: "",
|
||||
privateKeySecretId:
|
||||
config.privateKeySecretRef &&
|
||||
|
|
@ -121,6 +141,38 @@ function readSshConfig(environment: Environment) {
|
|||
};
|
||||
}
|
||||
|
||||
function readSandboxConfig(environment: Environment) {
|
||||
const config = environment.config ?? {};
|
||||
return {
|
||||
provider:
|
||||
typeof config.provider === "string" && config.provider.trim().length > 0
|
||||
? config.provider
|
||||
: "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,
|
||||
};
|
||||
}
|
||||
|
||||
function SupportMark({ supported }: { supported: boolean }) {
|
||||
return supported ? (
|
||||
<span className="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
|
||||
|
|
@ -132,8 +184,6 @@ function SupportMark({ supported }: { supported: boolean }) {
|
|||
);
|
||||
}
|
||||
|
||||
const FEEDBACK_TERMS_URL = import.meta.env.VITE_FEEDBACK_TERMS_URL?.trim() || "https://paperclip.ing/tos";
|
||||
|
||||
export function CompanySettings() {
|
||||
const {
|
||||
companies,
|
||||
|
|
@ -142,7 +192,7 @@ export function CompanySettings() {
|
|||
setSelectedCompanyId
|
||||
} = useCompany();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const { pushToast } = useToastActions();
|
||||
const { pushToast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
// General settings local state
|
||||
const [companyName, setCompanyName] = useState("");
|
||||
|
|
@ -189,7 +239,7 @@ export function CompanySettings() {
|
|||
const { data: secrets } = useQuery({
|
||||
queryKey: selectedCompanyId ? ["company-secrets", selectedCompanyId] : ["company-secrets", "none"],
|
||||
queryFn: () => secretsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId) && environmentsEnabled,
|
||||
enabled: Boolean(selectedCompanyId),
|
||||
});
|
||||
|
||||
const generalDirty =
|
||||
|
|
@ -219,27 +269,6 @@ export function CompanySettings() {
|
|||
}
|
||||
});
|
||||
|
||||
const feedbackSharingMutation = useMutation({
|
||||
mutationFn: (enabled: boolean) =>
|
||||
companiesApi.update(selectedCompanyId!, {
|
||||
feedbackDataSharingEnabled: enabled,
|
||||
}),
|
||||
onSuccess: (_company, enabled) => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
||||
pushToast({
|
||||
title: enabled ? "Feedback sharing enabled" : "Feedback sharing disabled",
|
||||
tone: "success",
|
||||
});
|
||||
},
|
||||
onError: (err) => {
|
||||
pushToast({
|
||||
title: "Failed to update feedback sharing",
|
||||
body: err instanceof Error ? err.message : "Unknown error",
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const inviteMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
accessApi.createOpenClawInvitePrompt(selectedCompanyId!),
|
||||
|
|
@ -488,6 +517,24 @@ export function CompanySettings() {
|
|||
return;
|
||||
}
|
||||
|
||||
if (environment.driver === "sandbox") {
|
||||
const sandbox = readSandboxConfig(environment);
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
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,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setEnvironmentForm({
|
||||
...createEmptyEnvironmentForm(),
|
||||
name: environment.name,
|
||||
|
|
@ -501,6 +548,40 @@ export function CompanySettings() {
|
|||
setEnvironmentForm(createEmptyEnvironmentForm());
|
||||
}
|
||||
|
||||
const discoveredPluginSandboxProviders = Object.entries(environmentCapabilities?.sandboxProviders ?? {})
|
||||
.filter(([provider, capability]) => provider !== "fake" && capability.supportsRunExecution)
|
||||
.map(([provider, capability]) => ({
|
||||
provider,
|
||||
displayName: capability.displayName || provider,
|
||||
}))
|
||||
.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 },
|
||||
]
|
||||
: discoveredPluginSandboxProviders;
|
||||
|
||||
useEffect(() => {
|
||||
if (environmentForm.driver !== "sandbox") return;
|
||||
if (environmentForm.sandboxProvider.trim().length > 0 && environmentForm.sandboxProvider !== "fake") return;
|
||||
const firstProvider = discoveredPluginSandboxProviders[0]?.provider;
|
||||
if (!firstProvider) return;
|
||||
setEnvironmentForm((current) => (
|
||||
current.driver !== "sandbox" || (current.sandboxProvider.trim().length > 0 && current.sandboxProvider !== "fake")
|
||||
? current
|
||||
: {
|
||||
...current,
|
||||
sandboxProvider: firstProvider,
|
||||
}
|
||||
));
|
||||
}, [discoveredPluginSandboxProviders, environmentForm.driver, environmentForm.sandboxProvider]);
|
||||
|
||||
const environmentFormValid =
|
||||
environmentForm.name.trim().length > 0 &&
|
||||
(environmentForm.driver !== "ssh" ||
|
||||
|
|
@ -508,7 +589,14 @@ export function CompanySettings() {
|
|||
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" &&
|
||||
environmentForm.sandboxImage.trim().length > 0 &&
|
||||
environmentForm.sandboxTimeoutMs.trim().length > 0 &&
|
||||
Number.isFinite(Number(environmentForm.sandboxTimeoutMs)) &&
|
||||
Number(environmentForm.sandboxTimeoutMs) > 0);
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
|
|
@ -667,287 +755,370 @@ export function CompanySettings() {
|
|||
)}
|
||||
|
||||
{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 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="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>
|
||||
<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>
|
||||
</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>
|
||||
))}
|
||||
</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 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>
|
||||
<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}
|
||||
{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">
|
||||
{String(environment.config.provider ?? "fake")} sandbox provider ·{" "}
|
||||
{typeof environment.config.image === "string"
|
||||
? environment.config.image
|
||||
: "ubuntu:24.04"}
|
||||
</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="ghost"
|
||||
onClick={() => handleEditEnvironment(environment)}
|
||||
variant="outline"
|
||||
onClick={() => environmentProbeMutation.mutate(environment.id)}
|
||||
disabled={environmentProbeMutation.isPending}
|
||||
>
|
||||
{isEditing ? "Editing" : "Edit"}
|
||||
{environmentProbeMutation.isPending
|
||||
? "Testing..."
|
||||
: environment.driver === "ssh"
|
||||
? "Test connection"
|
||||
: "Test provider"}
|
||||
</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"
|
||||
}
|
||||
) : null}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditEnvironment(environment)}
|
||||
>
|
||||
<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}
|
||||
{isEditing ? "Editing" : "Edit"}
|
||||
</Button>
|
||||
</div>
|
||||
</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 }))}
|
||||
/>
|
||||
{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>
|
||||
</Field>
|
||||
<Field label="Known hosts" hint="Optional known_hosts block used when strict host key checking is enabled.">
|
||||
) : 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,
|
||||
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.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 }))}
|
||||
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>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{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) =>
|
||||
setEnvironmentForm((current) => ({
|
||||
...current,
|
||||
sandboxProvider: e.target.value,
|
||||
}))}
|
||||
>
|
||||
{pluginSandboxProviders.map((provider) => (
|
||||
<option key={provider.provider} value={provider.provider}>
|
||||
{provider.displayName}
|
||||
</option>
|
||||
))}
|
||||
</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>
|
||||
</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"
|
||||
onClick={() => environmentMutation.mutate(environmentForm)}
|
||||
disabled={environmentMutation.isPending || !environmentFormValid}
|
||||
variant="ghost"
|
||||
onClick={handleCancelEnvironmentEdit}
|
||||
disabled={environmentMutation.isPending}
|
||||
>
|
||||
{environmentMutation.isPending
|
||||
? editingEnvironmentId
|
||||
? "Saving..."
|
||||
: "Creating..."
|
||||
: editingEnvironmentId
|
||||
? "Save environment"
|
||||
: "Create environment"}
|
||||
Cancel
|
||||
</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>
|
||||
) : 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 */}
|
||||
|
|
@ -966,48 +1137,6 @@ export function CompanySettings() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Feedback Sharing
|
||||
</div>
|
||||
<div className="space-y-3 rounded-md border border-border px-4 py-4">
|
||||
<ToggleField
|
||||
label="Allow sharing voted AI outputs with Paperclip Labs"
|
||||
hint="Only AI-generated outputs you explicitly vote on are eligible for feedback sharing."
|
||||
checked={!!selectedCompany.feedbackDataSharingEnabled}
|
||||
onChange={(enabled) => feedbackSharingMutation.mutate(enabled)}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Votes are always saved locally. This setting controls whether voted AI outputs may also be marked for sharing with Paperclip Labs.
|
||||
</p>
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
<div>
|
||||
Terms version: {selectedCompany.feedbackDataSharingTermsVersion ?? DEFAULT_FEEDBACK_DATA_SHARING_TERMS_VERSION}
|
||||
</div>
|
||||
{selectedCompany.feedbackDataSharingConsentAt ? (
|
||||
<div>
|
||||
Enabled {new Date(selectedCompany.feedbackDataSharingConsentAt).toLocaleString()}
|
||||
{selectedCompany.feedbackDataSharingConsentByUserId
|
||||
? ` by ${selectedCompany.feedbackDataSharingConsentByUserId}`
|
||||
: ""}
|
||||
</div>
|
||||
) : (
|
||||
<div>Sharing is currently disabled.</div>
|
||||
)}
|
||||
{FEEDBACK_TERMS_URL ? (
|
||||
<a
|
||||
href={FEEDBACK_TERMS_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex text-foreground underline underline-offset-4"
|
||||
>
|
||||
Read our terms of service
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invites */}
|
||||
<div className="space-y-4" data-testid="company-settings-invites-section">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
|
|
@ -1098,16 +1227,16 @@ export function CompanySettings() {
|
|||
</p>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<Button size="sm" variant="outline" asChild>
|
||||
<Link to="/company/export">
|
||||
<a href="/company/export">
|
||||
<Download className="mr-1.5 h-3.5 w-3.5" />
|
||||
Export
|
||||
</Link>
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" asChild>
|
||||
<Link to="/company/import">
|
||||
<a href="/company/import">
|
||||
<Upload className="mr-1.5 h-3.5 w-3.5" />
|
||||
Import
|
||||
</Link>
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,5 +10,6 @@ export default defineConfig({
|
|||
},
|
||||
test: {
|
||||
environment: "node",
|
||||
setupFiles: ["./vitest.setup.ts"],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
32
ui/vitest.setup.ts
Normal file
32
ui/vitest.setup.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
const storageEntries = new Map<string, string>();
|
||||
|
||||
function installStorageMock(target: Record<string, unknown>) {
|
||||
Object.defineProperty(target, "localStorage", {
|
||||
configurable: true,
|
||||
value: {
|
||||
getItem: (key: string) => storageEntries.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => {
|
||||
storageEntries.set(key, String(value));
|
||||
},
|
||||
removeItem: (key: string) => {
|
||||
storageEntries.delete(key);
|
||||
},
|
||||
clear: () => {
|
||||
storageEntries.clear();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
typeof globalThis.localStorage?.getItem !== "function"
|
||||
|| typeof globalThis.localStorage?.setItem !== "function"
|
||||
|| typeof globalThis.localStorage?.removeItem !== "function"
|
||||
|| typeof globalThis.localStorage?.clear !== "function"
|
||||
) {
|
||||
installStorageMock(globalThis);
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined" && window.localStorage !== globalThis.localStorage) {
|
||||
installStorageMock(window as unknown as Record<string, unknown>);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue