aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign project codebase configuration

Browse Source
This commit is contained in:
Dotta
2026-03-16 15:56:37 -05:00
parent dd828e96ad
commit 9b7b90521f
9 changed files with 389 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/components/NewProjectDialog.tsx
View File

@@ -42,7 +42,6 @@ const projectStatuses = [
];
type WorkspaceSetup = "none" | "local" | "repo" | "both";
const REPO_ONLY_CWD_SENTINEL = "/__paperclip_repo_only__";
export function NewProjectDialog() {
const { newProjectOpen, closeNewProject } = useDialog();
@@ -142,7 +141,7 @@ export function NewProjectDialog() {
return;
}
if (repoRequired && !isGitHubRepoUrl(repoUrl)) {
setWorkspaceError("Repo workspace must use a valid GitHub repo URL.");
setWorkspaceError("Repo must use a valid GitHub repo URL.");
return;
}
@@ -173,7 +172,6 @@ export function NewProjectDialog() {
} else if (repoRequired) {
workspacePayloads.push({
name: deriveWorkspaceNameFromRepo(repoUrl),
cwd: REPO_ONLY_CWD_SENTINEL,
repoUrl,
});
}
@@ -284,7 +282,7 @@ export function NewProjectDialog() {
<div className="px-4 pb-3 space-y-3 border-t border-border">
<div className="pt-3">
<p className="text-sm font-medium">Where will work be done on this project?</p>
<p className="text-xs text-muted-foreground">Add local folder and/or GitHub repo workspace hints.</p>
<p className="text-xs text-muted-foreground">Add a repo and/or local folder for this project.</p>
</div>
<div className="grid gap-2 sm:grid-cols-3">
<button
@@ -311,7 +309,7 @@ export function NewProjectDialog() {
>
<div className="flex items-center gap-2 text-sm font-medium">
<Github className="h-4 w-4" />
A github repo
A repo
</div>
<p className="mt-1 text-xs text-muted-foreground">Paste a GitHub URL.</p>
</button>
@@ -327,7 +325,7 @@ export function NewProjectDialog() {
<GitBranch className="h-4 w-4" />
Both
</div>
<p className="mt-1 text-xs text-muted-foreground">Configure local + repo hints.</p>
<p className="mt-1 text-xs text-muted-foreground">Configure both repo and local folder.</p>
</button>
</div>
@@ -347,7 +345,7 @@ export function NewProjectDialog() {
)}
{(workspaceSetup === "repo" || workspaceSetup === "both") && (
<div className="rounded-md border border-border p-2">
<label className="mb-1 block text-xs text-muted-foreground">GitHub repo URL</label>
<label className="mb-1 block text-xs text-muted-foreground">Repo URL</label>
<input
className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
value={workspaceRepoUrl}

310
ui/src/components/ProjectProperties.tsx
View File

@@ -48,8 +48,6 @@ export type ProjectConfigFieldKey =
| "execution_workspace_provision_command"
| "execution_workspace_teardown_command";
const REPO_ONLY_CWD_SENTINEL = "/__paperclip_repo_only__";
function SaveIndicator({ state }: { state: ProjectFieldSaveState }) {
if (state === "saving") {
return (
@@ -191,6 +189,9 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
const availableGoals = (allGoals ?? []).filter((g) => !linkedGoalIds.includes(g.id));
const workspaces = project.workspaces ?? [];
const codebase = project.codebase;
const primaryCodebaseWorkspace = project.primaryWorkspace ?? null;
const hasAdditionalLegacyWorkspaces = workspaces.some((workspace) => workspace.id !== primaryCodebaseWorkspace?.id);
const executionWorkspacePolicy = project.executionWorkspacePolicy ?? null;
const executionWorkspacesEnabled = executionWorkspacePolicy?.enabled === true;
const executionWorkspaceDefaultMode =
@@ -268,37 +269,51 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
}
};
const deriveWorkspaceNameFromPath = (value: string) => {
const normalized = value.trim().replace(/[\\/]+$/, "");
const segments = normalized.split(/[\\/]/).filter(Boolean);
return segments[segments.length - 1] ?? "Local folder";
};
const deriveWorkspaceNameFromRepo = (value: string) => {
const formatRepoUrl = (value: string) => {
try {
const parsed = new URL(value);
const segments = parsed.pathname.split("/").filter(Boolean);
const repo = segments[segments.length - 1]?.replace(/\.git$/i, "") ?? "";
return repo || "GitHub repo";
} catch {
return "GitHub repo";
}
};
const formatGitHubRepo = (value: string) => {
try {
const parsed = new URL(value);
const segments = parsed.pathname.split("/").filter(Boolean);
if (segments.length < 2) return value;
if (segments.length < 2) return parsed.host;
const owner = segments[0];
const repo = segments[1]?.replace(/\.git$/i, "");
if (!owner || !repo) return value;
return `${owner}/${repo}`;
if (!owner || !repo) return parsed.host;
return `${parsed.host}/${owner}/${repo}`;
} catch {
return value;
}
};
const deriveSourceType = (cwd: string | null, repoUrl: string | null) => {
if (repoUrl) return "git_repo";
if (cwd) return "local_path";
return undefined;
};
const persistCodebase = (patch: { cwd?: string | null; repoUrl?: string | null }) => {
const nextCwd = patch.cwd !== undefined ? patch.cwd : codebase.localFolder;
const nextRepoUrl = patch.repoUrl !== undefined ? patch.repoUrl : codebase.repoUrl;
if (!nextCwd && !nextRepoUrl) {
if (primaryCodebaseWorkspace) {
removeWorkspace.mutate(primaryCodebaseWorkspace.id);
}
return;
}
const data: Record<string, unknown> = {
...(patch.cwd !== undefined ? { cwd: patch.cwd } : {}),
...(patch.repoUrl !== undefined ? { repoUrl: patch.repoUrl } : {}),
...(deriveSourceType(nextCwd, nextRepoUrl) ? { sourceType: deriveSourceType(nextCwd, nextRepoUrl) } : {}),
isPrimary: true,
};
if (primaryCodebaseWorkspace) {
updateWorkspace.mutate({ workspaceId: primaryCodebaseWorkspace.id, data });
return;
}
createWorkspace.mutate(data);
};
const submitLocalWorkspace = () => {
const cwd = workspaceCwd.trim();
if (!isAbsolutePath(cwd)) {
@@ -306,59 +321,45 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
return;
}
setWorkspaceError(null);
createWorkspace.mutate({
name: deriveWorkspaceNameFromPath(cwd),
cwd,
});
persistCodebase({ cwd });
};
const submitRepoWorkspace = () => {
const repoUrl = workspaceRepoUrl.trim();
if (!isGitHubRepoUrl(repoUrl)) {
setWorkspaceError("Repo workspace must use a valid GitHub repo URL.");
setWorkspaceError("Repo must use a valid GitHub repo URL.");
return;
}
setWorkspaceError(null);
createWorkspace.mutate({
name: deriveWorkspaceNameFromRepo(repoUrl),
cwd: REPO_ONLY_CWD_SENTINEL,
repoUrl,
});
persistCodebase({ repoUrl });
};
const clearLocalWorkspace = (workspace: Project["workspaces"][number]) => {
const clearLocalWorkspace = () => {
const confirmed = window.confirm(
workspace.repoUrl
codebase.repoUrl
? "Clear local folder from this workspace?"
: "Delete this workspace local folder?",
);
if (!confirmed) return;
if (workspace.repoUrl) {
updateWorkspace.mutate({
workspaceId: workspace.id,
data: { cwd: null },
});
return;
}
removeWorkspace.mutate(workspace.id);
persistCodebase({ cwd: null });
};
const clearRepoWorkspace = (workspace: Project["workspaces"][number]) => {
const hasLocalFolder = Boolean(workspace.cwd && workspace.cwd !== REPO_ONLY_CWD_SENTINEL);
const clearRepoWorkspace = () => {
const hasLocalFolder = Boolean(codebase.localFolder);
const confirmed = window.confirm(
hasLocalFolder
? "Clear GitHub repo from this workspace?"
? "Clear repo from this workspace?"
: "Delete this workspace repo?",
);
if (!confirmed) return;
if (hasLocalFolder) {
if (primaryCodebaseWorkspace) {
updateWorkspace.mutate({
workspaceId: workspace.id,
data: { repoUrl: null, repoRef: null },
workspaceId: primaryCodebaseWorkspace.id,
data: { repoUrl: null, repoRef: null, defaultRef: null, sourceType: deriveSourceType(codebase.localFolder, null) },
});
return;
}
removeWorkspace.mutate(workspace.id);
persistCodebase({ repoUrl: null });
};
return (
@@ -494,114 +495,133 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
<div className="space-y-1 py-4">
<div className="space-y-2">
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<span>Workspaces</span>
<span>Codebase</span>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className="inline-flex h-4 w-4 items-center justify-center rounded-full border border-border text-[10px] text-muted-foreground hover:text-foreground"
aria-label="Workspaces help"
aria-label="Codebase help"
>
?
</button>
</TooltipTrigger>
<TooltipContent side="top">
Workspaces give your agents hints about where the work is
Repo identifies the source of truth. Local folder is the default place agents write code.
</TooltipContent>
</Tooltip>
</div>
{workspaces.length === 0 ? (
<p className="rounded-md border border-dashed border-border px-3 py-2 text-sm text-muted-foreground">
No workspace configured.
</p>
) : (
<div className="space-y-2 rounded-md border border-border/70 p-3">
<div className="space-y-1">
{workspaces.map((workspace) => (
<div key={workspace.id} className="space-y-1">
{workspace.cwd && workspace.cwd !== REPO_ONLY_CWD_SENTINEL ? (
<div className="flex items-center justify-between gap-2 py-1">
<span className="min-w-0 truncate font-mono text-xs text-muted-foreground">{workspace.cwd}</span>
<Button
variant="ghost"
size="icon-xs"
onClick={() => clearLocalWorkspace(workspace)}
aria-label="Delete local folder"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
) : null}
{workspace.repoUrl ? (
<div className="flex items-center justify-between gap-2 py-1">
<a
href={workspace.repoUrl}
target="_blank"
rel="noreferrer"
className="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground hover:underline"
>
<Github className="h-3 w-3 shrink-0" />
<span className="truncate">{formatGitHubRepo(workspace.repoUrl)}</span>
<ExternalLink className="h-3 w-3 shrink-0" />
</a>
<Button
variant="ghost"
size="icon-xs"
onClick={() => clearRepoWorkspace(workspace)}
aria-label="Delete workspace repo"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
) : null}
{workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
<div className="space-y-1 pl-2">
{workspace.runtimeServices.map((service) => (
<div
key={service.id}
className="flex items-center justify-between gap-2 rounded-md border border-border/60 px-2 py-1"
>
<div className="min-w-0 space-y-0.5">
<div className="flex items-center gap-2">
<span className="text-[11px] font-medium">{service.serviceName}</span>
<span
className={cn(
"rounded-full px-1.5 py-0.5 text-[10px] uppercase tracking-wide",
service.status === "running"
? "bg-green-500/15 text-green-700 dark:text-green-300"
: service.status === "failed"
? "bg-red-500/15 text-red-700 dark:text-red-300"
: "bg-muted text-muted-foreground",
)}
>
{service.status}
</span>
</div>
<div className="text-[11px] text-muted-foreground">
{service.url ? (
<a
href={service.url}
target="_blank"
rel="noreferrer"
className="hover:text-foreground hover:underline"
>
{service.url}
</a>
) : (
service.command ?? "No URL"
)}
</div>
</div>
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
{service.lifecycle}
</div>
</div>
))}
</div>
) : null}
<div className="text-[11px] uppercase tracking-wide text-muted-foreground">Repo</div>
{codebase.repoUrl ? (
<div className="flex items-center justify-between gap-2">
<a
href={codebase.repoUrl}
target="_blank"
rel="noreferrer"
className="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground hover:underline"
>
<Github className="h-3 w-3 shrink-0" />
<span className="truncate">{formatRepoUrl(codebase.repoUrl)}</span>
<ExternalLink className="h-3 w-3 shrink-0" />
</a>
<Button
variant="ghost"
size="icon-xs"
onClick={clearRepoWorkspace}
aria-label="Clear repo"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
))}
) : (
<div className="text-xs text-muted-foreground">Not set.</div>
)}
</div>
)}
<div className="space-y-1">
<div className="text-[11px] uppercase tracking-wide text-muted-foreground">Local folder</div>
{codebase.localFolder ? (
<div className="flex items-center justify-between gap-2">
<span className="min-w-0 truncate font-mono text-xs text-muted-foreground">{codebase.localFolder}</span>
<Button
variant="ghost"
size="icon-xs"
onClick={clearLocalWorkspace}
aria-label="Clear local folder"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
) : (
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Not set.</div>
<div className="text-[11px] text-muted-foreground">Paperclip will use a managed checkout instead.</div>
</div>
)}
</div>
<div className="rounded-md border border-border/60 bg-muted/20 px-2.5 py-2">
<div className="text-[11px] uppercase tracking-wide text-muted-foreground">Effective working folder</div>
<div className="mt-1 break-all font-mono text-xs text-foreground">{codebase.effectiveLocalFolder}</div>
<div className="mt-1 text-[11px] text-muted-foreground">
{codebase.origin === "local_folder" ? "Using your local folder." : "Paperclip-managed folder."}
</div>
</div>
{hasAdditionalLegacyWorkspaces && (
<div className="text-[11px] text-muted-foreground">
Additional legacy workspace records exist on this project. Paperclip is using the primary workspace as the codebase view.
</div>
)}
{primaryCodebaseWorkspace?.runtimeServices && primaryCodebaseWorkspace.runtimeServices.length > 0 ? (
<div className="space-y-1">
{primaryCodebaseWorkspace.runtimeServices.map((service) => (
<div
key={service.id}
className="flex items-center justify-between gap-2 rounded-md border border-border/60 px-2 py-1"
>
<div className="min-w-0 space-y-0.5">
<div className="flex items-center gap-2">
<span className="text-[11px] font-medium">{service.serviceName}</span>
<span
className={cn(
"rounded-full px-1.5 py-0.5 text-[10px] uppercase tracking-wide",
service.status === "running"
? "bg-green-500/15 text-green-700 dark:text-green-300"
: service.status === "failed"
? "bg-red-500/15 text-red-700 dark:text-red-300"
: "bg-muted text-muted-foreground",
)}
>
{service.status}
</span>
</div>
<div className="text-[11px] text-muted-foreground">
{service.url ? (
<a
href={service.url}
target="_blank"
rel="noreferrer"
className="hover:text-foreground hover:underline"
>
{service.url}
</a>
) : (
service.command ?? "No URL"
)}
</div>
</div>
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
{service.lifecycle}
</div>
</div>
))}
</div>
) : null}
</div>
<div className="flex flex-col items-start gap-2">
<Button
variant="outline"
@@ -609,10 +629,11 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
className="h-7 px-2.5"
onClick={() => {
setWorkspaceMode("local");
setWorkspaceCwd(codebase.localFolder ?? "");
setWorkspaceError(null);
}}
>
Add workspace local folder
{codebase.localFolder ? "Change local folder" : "Set local folder"}
</Button>
<Button
variant="outline"
@@ -620,10 +641,11 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
className="h-7 px-2.5"
onClick={() => {
setWorkspaceMode("repo");
setWorkspaceRepoUrl(codebase.repoUrl ?? "");
setWorkspaceError(null);
}}
>
Add workspace repo
{codebase.repoUrl ? "Change repo" : "Set repo"}
</Button>
</div>
{workspaceMode === "local" && (