corporateai 0.0.1

package/ui/src/components/ProjectProperties.tsx

@@ -0,0 +1,1127 @@
+import { useState } from "react";
+import { Link } from "@/lib/router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { Project } from "@corporateai/shared";
+import { StatusBadge } from "./StatusBadge";
+import { cn, formatDate } from "../lib/utils";
+import { goalsApi } from "../api/goals";
+import { instanceSettingsApi } from "../api/instanceSettings";
+import { projectsApi } from "../api/projects";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
+import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { AlertCircle, Archive, ArchiveRestore, Check, ExternalLink, Github, Loader2, Plus, Trash2, X } from "lucide-react";
+import { ChoosePathButton } from "./PathInstructionsModal";
+import { DraftInput } from "./agent-config-primitives";
+import { InlineEditor } from "./InlineEditor";
+
+const PROJECT_STATUSES = [
+  { value: "backlog", label: "Backlog" },
+  { value: "planned", label: "Planned" },
+  { value: "in_progress", label: "In Progress" },
+  { value: "completed", label: "Completed" },
+  { value: "cancelled", label: "Cancelled" },
+];
+
+interface ProjectPropertiesProps {
+  project: Project;
+  onUpdate?: (data: Record<string, unknown>) => void;
+  onFieldUpdate?: (field: ProjectConfigFieldKey, data: Record<string, unknown>) => void;
+  getFieldSaveState?: (field: ProjectConfigFieldKey) => ProjectFieldSaveState;
+  onArchive?: (archived: boolean) => void;
+  archivePending?: boolean;
+}
+
+export type ProjectFieldSaveState = "idle" | "saving" | "saved" | "error";
+export type ProjectConfigFieldKey =
+  | "name"
+  | "description"
+  | "status"
+  | "goals"
+  | "execution_workspace_enabled"
+  | "execution_workspace_default_mode"
+  | "execution_workspace_base_ref"
+  | "execution_workspace_branch_template"
+  | "execution_workspace_worktree_parent_dir"
+  | "execution_workspace_provision_command"
+  | "execution_workspace_teardown_command";
+
+function SaveIndicator({ state }: { state: ProjectFieldSaveState }) {
+  if (state === "saving") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        Saving
+      </span>
+    );
+  }
+  if (state === "saved") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[11px] text-green-600 dark:text-green-400">
+        <Check className="h-3 w-3" />
+        Saved
+      </span>
+    );
+  }
+  if (state === "error") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[11px] text-destructive">
+        <AlertCircle className="h-3 w-3" />
+        Failed
+      </span>
+    );
+  }
+  return null;
+}
+
+function FieldLabel({
+  label,
+  state,
+}: {
+  label: string;
+  state: ProjectFieldSaveState;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <SaveIndicator state={state} />
+    </div>
+  );
+}
+
+function PropertyRow({
+  label,
+  children,
+  alignStart = false,
+  valueClassName = "",
+}: {
+  label: React.ReactNode;
+  children: React.ReactNode;
+  alignStart?: boolean;
+  valueClassName?: string;
+}) {
+  return (
+    <div className={cn("flex gap-3 py-1.5", alignStart ? "items-start" : "items-center")}>
+      <div className="shrink-0 w-20">{label}</div>
+      <div className={cn("min-w-0 flex-1", alignStart ? "pt-0.5" : "flex items-center gap-1.5", valueClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (status: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const colorClass = statusBadge[status] ?? statusBadgeDefault;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap shrink-0 cursor-pointer hover:opacity-80 transition-opacity",
+            colorClass,
+          )}
+        >
+          {status.replace("_", " ")}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-40 p-1" align="start">
+        {PROJECT_STATUSES.map((s) => (
+          <Button
+            key={s.value}
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start gap-2 text-xs", s.value === status && "bg-accent")}
+            onClick={() => {
+              onChange(s.value);
+              setOpen(false);
+            }}
+          >
+            {s.label}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ArchiveDangerZone({
+  project,
+  onArchive,
+  archivePending,
+}: {
+  project: Project;
+  onArchive: (archived: boolean) => void;
+  archivePending?: boolean;
+}) {
+  const [confirming, setConfirming] = useState(false);
+  const isArchive = !project.archivedAt;
+  const action = isArchive ? "Archive" : "Unarchive";
+
+  return (
+    <div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-4">
+      <p className="text-sm text-muted-foreground">
+        {isArchive
+          ? "Archive this project to hide it from the sidebar and project selectors."
+          : "Unarchive this project to restore it in the sidebar and project selectors."}
+      </p>
+      {archivePending ? (
+        <Button size="sm" variant="destructive" disabled>
+          <Loader2 className="h-3 w-3 animate-spin mr-1" />
+          {isArchive ? "Archiving..." : "Unarchiving..."}
+        </Button>
+      ) : confirming ? (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-destructive font-medium">
+            {action} &ldquo;{project.name}&rdquo;?
+          </span>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => {
+              setConfirming(false);
+              onArchive(isArchive);
+            }}
+          >
+            Confirm
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setConfirming(false)}
+          >
+            Cancel
+          </Button>
+        </div>
+      ) : (
+        <Button
+          size="sm"
+          variant="destructive"
+          onClick={() => setConfirming(true)}
+        >
+          {isArchive ? (
+            <><Archive className="h-3 w-3 mr-1" />{action} project</>
+          ) : (
+            <><ArchiveRestore className="h-3 w-3 mr-1" />{action} project</>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSaveState, onArchive, archivePending }: ProjectPropertiesProps) {
+  const { selectedCompanyId } = useCompany();
+  const queryClient = useQueryClient();
+  const [goalOpen, setGoalOpen] = useState(false);
+  const [executionWorkspaceAdvancedOpen, setExecutionWorkspaceAdvancedOpen] = useState(false);
+  const [workspaceMode, setWorkspaceMode] = useState<"local" | "repo" | null>(null);
+  const [workspaceCwd, setWorkspaceCwd] = useState("");
+  const [workspaceRepoUrl, setWorkspaceRepoUrl] = useState("");
+  const [workspaceError, setWorkspaceError] = useState<string | null>(null);
+
+  const commitField = (field: ProjectConfigFieldKey, data: Record<string, unknown>) => {
+    if (onFieldUpdate) {
+      onFieldUpdate(field, data);
+      return;
+    }
+    onUpdate?.(data);
+  };
+  const fieldState = (field: ProjectConfigFieldKey): ProjectFieldSaveState => getFieldSaveState?.(field) ?? "idle";
+
+  const { data: allGoals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+  const { data: experimentalSettings } = useQuery({
+    queryKey: queryKeys.instance.experimentalSettings,
+    queryFn: () => instanceSettingsApi.getExperimental(),
+  });
+
+  const linkedGoalIds = project.goalIds.length > 0
+    ? project.goalIds
+    : project.goalId
+      ? [project.goalId]
+      : [];
+
+  const linkedGoals = project.goals.length > 0
+    ? project.goals
+    : linkedGoalIds.map((id) => ({
+        id,
+        title: allGoals?.find((g) => g.id === id)?.title ?? id.slice(0, 8),
+      }));
+
+  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 isolatedWorkspacesEnabled = experimentalSettings?.enableIsolatedWorkspaces === true;
+  const executionWorkspaceDefaultMode =
+    executionWorkspacePolicy?.defaultMode === "isolated_workspace" ? "isolated_workspace" : "shared_workspace";
+  const executionWorkspaceStrategy = executionWorkspacePolicy?.workspaceStrategy ?? {
+    type: "git_worktree",
+    baseRef: "",
+    branchTemplate: "",
+    worktreeParentDir: "",
+  };
+
+  const invalidateProject = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.id) });
+    if (project.urlKey !== project.id) {
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.urlKey) });
+    }
+    if (selectedCompanyId) {
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(selectedCompanyId) });
+    }
+  };
+
+  const createWorkspace = useMutation({
+    mutationFn: (data: Record<string, unknown>) => projectsApi.createWorkspace(project.id, data),
+    onSuccess: () => {
+      setWorkspaceCwd("");
+      setWorkspaceRepoUrl("");
+      setWorkspaceMode(null);
+      setWorkspaceError(null);
+      invalidateProject();
+    },
+  });
+
+  const removeWorkspace = useMutation({
+    mutationFn: (workspaceId: string) => projectsApi.removeWorkspace(project.id, workspaceId),
+    onSuccess: () => {
+      setWorkspaceCwd("");
+      setWorkspaceRepoUrl("");
+      setWorkspaceMode(null);
+      setWorkspaceError(null);
+      invalidateProject();
+    },
+  });
+  const updateWorkspace = useMutation({
+    mutationFn: ({ workspaceId, data }: { workspaceId: string; data: Record<string, unknown> }) =>
+      projectsApi.updateWorkspace(project.id, workspaceId, data),
+    onSuccess: () => {
+      setWorkspaceCwd("");
+      setWorkspaceRepoUrl("");
+      setWorkspaceMode(null);
+      setWorkspaceError(null);
+      invalidateProject();
+    },
+  });
+
+  const removeGoal = (goalId: string) => {
+    if (!onUpdate && !onFieldUpdate) return;
+    commitField("goals", { goalIds: linkedGoalIds.filter((id) => id !== goalId) });
+  };
+
+  const addGoal = (goalId: string) => {
+    if ((!onUpdate && !onFieldUpdate) || linkedGoalIds.includes(goalId)) return;
+    commitField("goals", { goalIds: [...linkedGoalIds, goalId] });
+    setGoalOpen(false);
+  };
+
+  const updateExecutionWorkspacePolicy = (patch: Record<string, unknown>) => {
+    if (!onUpdate && !onFieldUpdate) return;
+    return {
+      executionWorkspacePolicy: {
+        enabled: executionWorkspacesEnabled,
+        defaultMode: executionWorkspaceDefaultMode,
+        allowIssueOverride: executionWorkspacePolicy?.allowIssueOverride ?? true,
+        ...executionWorkspacePolicy,
+        ...patch,
+      },
+    };
+  };
+
+  const isAbsolutePath = (value: string) => value.startsWith("/") || /^[A-Za-z]:[\\/]/.test(value);
+
+  const isGitHubRepoUrl = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const host = parsed.hostname.toLowerCase();
+      if (host !== "github.com" && host !== "www.github.com") return false;
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      return segments.length >= 2;
+    } catch {
+      return false;
+    }
+  };
+
+  const isSafeExternalUrl = (value: string | null | undefined) => {
+    if (!value) return false;
+    try {
+      const parsed = new URL(value);
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
+
+  const formatRepoUrl = (value: string) => {
+    try {
+      const parsed = new URL(value);
+      const segments = parsed.pathname.split("/").filter(Boolean);
+      if (segments.length < 2) return parsed.host;
+      const owner = segments[0];
+      const repo = segments[1]?.replace(/\.git$/i, "");
+      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 (!cwd) {
+      setWorkspaceError(null);
+      persistCodebase({ cwd: null });
+      return;
+    }
+    if (!isAbsolutePath(cwd)) {
+      setWorkspaceError("Local folder must be a full absolute path.");
+      return;
+    }
+    setWorkspaceError(null);
+    persistCodebase({ cwd });
+  };
+
+  const submitRepoWorkspace = () => {
+    const repoUrl = workspaceRepoUrl.trim();
+    if (!repoUrl) {
+      setWorkspaceError(null);
+      persistCodebase({ repoUrl: null });
+      return;
+    }
+    if (!isGitHubRepoUrl(repoUrl)) {
+      setWorkspaceError("Repo must use a valid GitHub repo URL.");
+      return;
+    }
+    setWorkspaceError(null);
+    persistCodebase({ repoUrl });
+  };
+
+  const clearLocalWorkspace = () => {
+    const confirmed = window.confirm(
+      codebase.repoUrl
+        ? "Clear local folder from this workspace?"
+        : "Delete this workspace local folder?",
+    );
+    if (!confirmed) return;
+    persistCodebase({ cwd: null });
+  };
+
+  const clearRepoWorkspace = () => {
+    const hasLocalFolder = Boolean(codebase.localFolder);
+    const confirmed = window.confirm(
+      hasLocalFolder
+        ? "Clear repo from this workspace?"
+        : "Delete this workspace repo?",
+    );
+    if (!confirmed) return;
+    if (primaryCodebaseWorkspace && hasLocalFolder) {
+      updateWorkspace.mutate({
+        workspaceId: primaryCodebaseWorkspace.id,
+        data: { repoUrl: null, repoRef: null, defaultRef: null, sourceType: deriveSourceType(codebase.localFolder, null) },
+      });
+      return;
+    }
+    persistCodebase({ repoUrl: null });
+  };
+
+  return (
+    <div>
+      <div className="space-y-1 pb-4">
+        <PropertyRow label={<FieldLabel label="Name" state={fieldState("name")} />}>
+          {onUpdate || onFieldUpdate ? (
+            <DraftInput
+              value={project.name}
+              onCommit={(name) => commitField("name", { name })}
+              immediate
+              className="w-full rounded border border-border bg-transparent px-2 py-1 text-sm outline-none"
+              placeholder="Project name"
+            />
+          ) : (
+            <span className="text-sm">{project.name}</span>
+          )}
+        </PropertyRow>
+        <PropertyRow
+          label={<FieldLabel label="Description" state={fieldState("description")} />}
+          alignStart
+          valueClassName="space-y-0.5"
+        >
+          {onUpdate || onFieldUpdate ? (
+            <InlineEditor
+              value={project.description ?? ""}
+              onSave={(description) => commitField("description", { description })}
+              as="p"
+              className="text-sm text-muted-foreground"
+              placeholder="Add a description..."
+              multiline
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {project.description?.trim() || "No description"}
+            </p>
+          )}
+        </PropertyRow>
+        <PropertyRow label={<FieldLabel label="Status" state={fieldState("status")} />}>
+          {onUpdate || onFieldUpdate ? (
+            <ProjectStatusPicker
+              status={project.status}
+              onChange={(status) => commitField("status", { status })}
+            />
+          ) : (
+            <StatusBadge status={project.status} />
+          )}
+        </PropertyRow>
+        {project.leadAgentId && (
+          <PropertyRow label="Lead">
+            <span className="text-sm font-mono">{project.leadAgentId.slice(0, 8)}</span>
+          </PropertyRow>
+        )}
+        <PropertyRow
+          label={<FieldLabel label="Goals" state={fieldState("goals")} />}
+          alignStart
+          valueClassName="space-y-2"
+        >
+          {linkedGoals.length > 0 && (
+            <div className="flex flex-wrap gap-1.5">
+              {linkedGoals.map((goal) => (
+                <span
+                  key={goal.id}
+                  className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs"
+                >
+                  <Link to={`/goals/${goal.id}`} className="hover:underline max-w-[220px] truncate">
+                    {goal.title}
+                  </Link>
+                  {(onUpdate || onFieldUpdate) && (
+                    <button
+                      className="text-muted-foreground hover:text-foreground"
+                      type="button"
+                      onClick={() => removeGoal(goal.id)}
+                      aria-label={`Remove goal ${goal.title}`}
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  )}
+                </span>
+              ))}
+            </div>
+          )}
+          {(onUpdate || onFieldUpdate) && (
+            <Popover open={goalOpen} onOpenChange={setGoalOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="xs"
+                  className={cn("h-6 w-fit px-2", linkedGoals.length > 0 && "ml-1")}
+                  disabled={availableGoals.length === 0}
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  Goal
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-56 p-1" align="start">
+                {availableGoals.length === 0 ? (
+                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                    All goals linked.
+                  </div>
+                ) : (
+                  availableGoals.map((goal) => (
+                    <button
+                      key={goal.id}
+                      className="flex items-center w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50"
+                      onClick={() => addGoal(goal.id)}
+                    >
+                      {goal.title}
+                    </button>
+                  ))
+                )}
+              </PopoverContent>
+            </Popover>
+          )}
+        </PropertyRow>
+        <PropertyRow label={<FieldLabel label="Created" state="idle" />}>
+          <span className="text-sm">{formatDate(project.createdAt)}</span>
+        </PropertyRow>
+        <PropertyRow label={<FieldLabel label="Updated" state="idle" />}>
+          <span className="text-sm">{formatDate(project.updatedAt)}</span>
+        </PropertyRow>
+        {project.targetDate && (
+          <PropertyRow label={<FieldLabel label="Target Date" state="idle" />}>
+            <span className="text-sm">{formatDate(project.targetDate)}</span>
+          </PropertyRow>
+        )}
+      </div>
+
+      <Separator className="my-4" />
+
+      <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>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="Codebase help"
+                >
+                  ?
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                Repo identifies the source of truth. Local folder is the default place agents write code.
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="space-y-2 rounded-md border border-border/70 p-3">
+            <div className="space-y-1">
+              <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Repo</div>
+              {codebase.repoUrl ? (
+                <div className="flex items-center justify-between gap-2">
+                  {isSafeExternalUrl(codebase.repoUrl) ? (
+                    <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>
+                  ) : (
+                    <div className="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+                      <Github className="h-3 w-3 shrink-0" />
+                      <span className="truncate">{codebase.repoUrl}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="outline"
+                      size="xs"
+                      className="h-6 px-2"
+                      onClick={() => {
+                        setWorkspaceMode("repo");
+                        setWorkspaceRepoUrl(codebase.repoUrl ?? "");
+                        setWorkspaceError(null);
+                      }}
+                    >
+                      Change repo
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      onClick={clearRepoWorkspace}
+                      aria-label="Clear repo"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between gap-2">
+                  <div className="text-xs text-muted-foreground">Not set.</div>
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    className="h-6 px-2"
+                    onClick={() => {
+                      setWorkspaceMode("repo");
+                      setWorkspaceRepoUrl(codebase.repoUrl ?? "");
+                      setWorkspaceError(null);
+                    }}
+                  >
+                    Set repo
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-1">
+              <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Local folder</div>
+              <div className="flex items-center justify-between gap-2">
+                <div className="min-w-0 space-y-1">
+                  <div className="min-w-0 truncate font-mono text-xs text-muted-foreground">
+                    {codebase.effectiveLocalFolder}
+                  </div>
+                  {codebase.origin === "managed_checkout" && (
+                    <div className="text-[11px] text-muted-foreground">Corporate-managed folder.</div>
+                  )}
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    className="h-6 px-2"
+                    onClick={() => {
+                      setWorkspaceMode("local");
+                      setWorkspaceCwd(codebase.localFolder ?? "");
+                      setWorkspaceError(null);
+                    }}
+                  >
+                    {codebase.localFolder ? "Change local folder" : "Set local folder"}
+                  </Button>
+                  {codebase.localFolder ? (
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      onClick={clearLocalWorkspace}
+                      aria-label="Clear local folder"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+
+            {hasAdditionalLegacyWorkspaces && (
+              <div className="text-[11px] text-muted-foreground">
+                Additional legacy workspace records exist on this project. Corporate 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>
+          {workspaceMode === "local" && (
+            <div className="space-y-1.5 rounded-md border border-border p-2">
+              <div className="flex items-center gap-2">
+                <input
+                  className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                  value={workspaceCwd}
+                  onChange={(e) => setWorkspaceCwd(e.target.value)}
+                  placeholder="/absolute/path/to/workspace"
+                />
+                <ChoosePathButton />
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="xs"
+                  className="h-6 px-2"
+                  disabled={(!workspaceCwd.trim() && !primaryCodebaseWorkspace) || createWorkspace.isPending || updateWorkspace.isPending}
+                  onClick={submitLocalWorkspace}
+                >
+                  Save
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="h-6 px-2"
+                  onClick={() => {
+                    setWorkspaceMode(null);
+                    setWorkspaceCwd("");
+                    setWorkspaceError(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+          {workspaceMode === "repo" && (
+            <div className="space-y-1.5 rounded-md border border-border p-2">
+              <input
+                className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs outline-none"
+                value={workspaceRepoUrl}
+                onChange={(e) => setWorkspaceRepoUrl(e.target.value)}
+                placeholder="https://github.com/org/repo"
+              />
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="xs"
+                  className="h-6 px-2"
+                  disabled={(!workspaceRepoUrl.trim() && !primaryCodebaseWorkspace) || createWorkspace.isPending || updateWorkspace.isPending}
+                  onClick={submitRepoWorkspace}
+                >
+                  Save
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="h-6 px-2"
+                  onClick={() => {
+                    setWorkspaceMode(null);
+                    setWorkspaceRepoUrl("");
+                    setWorkspaceError(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+          {workspaceError && (
+            <p className="text-xs text-destructive">{workspaceError}</p>
+          )}
+          {createWorkspace.isError && (
+            <p className="text-xs text-destructive">Failed to save workspace.</p>
+          )}
+          {removeWorkspace.isError && (
+            <p className="text-xs text-destructive">Failed to delete workspace.</p>
+          )}
+          {updateWorkspace.isError && (
+            <p className="text-xs text-destructive">Failed to update workspace.</p>
+          )}
+        </div>
+
+        {isolatedWorkspacesEnabled ? (
+          <>
+            <Separator className="my-4" />
+
+            <div className="py-1.5 space-y-2">
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>Execution Workspaces</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="Execution workspaces help"
+                    >
+                      ?
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    Project-owned defaults for isolated issue checkouts and execution workspace behavior.
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="space-y-0.5">
+                    <div className="flex items-center gap-2 text-sm font-medium">
+                      <span>Enable isolated issue checkouts</span>
+                      <SaveIndicator state={fieldState("execution_workspace_enabled")} />
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      Let issues choose between the project's primary checkout and an isolated execution workspace.
+                    </div>
+                  </div>
+                  {onUpdate || onFieldUpdate ? (
+                    <button
+                      data-slot="toggle"
+                      className={cn(
+                        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+                        executionWorkspacesEnabled ? "bg-green-600" : "bg-muted",
+                      )}
+                      type="button"
+                      onClick={() =>
+                        commitField(
+                          "execution_workspace_enabled",
+                          updateExecutionWorkspacePolicy({ enabled: !executionWorkspacesEnabled })!,
+                        )}
+                    >
+                      <span
+                        className={cn(
+                          "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                          executionWorkspacesEnabled ? "translate-x-4.5" : "translate-x-0.5",
+                        )}
+                      />
+                    </button>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">
+                      {executionWorkspacesEnabled ? "Enabled" : "Disabled"}
+                    </span>
+                  )}
+                </div>
+
+                {executionWorkspacesEnabled ? (
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="space-y-0.5">
+                        <div className="flex items-center gap-2 text-sm">
+                          <span>New issues default to isolated checkout</span>
+                          <SaveIndicator state={fieldState("execution_workspace_default_mode")} />
+                        </div>
+                        <div className="text-[11px] text-muted-foreground">
+                          If disabled, new issues stay on the project's primary checkout unless someone opts in.
+                        </div>
+                      </div>
+                      <button
+                        data-slot="toggle"
+                        className={cn(
+                          "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+                          executionWorkspaceDefaultMode === "isolated_workspace" ? "bg-green-600" : "bg-muted",
+                        )}
+                        type="button"
+                        onClick={() =>
+                          commitField(
+                            "execution_workspace_default_mode",
+                            updateExecutionWorkspacePolicy({
+                              defaultMode:
+                                executionWorkspaceDefaultMode === "isolated_workspace"
+                                  ? "shared_workspace"
+                                  : "isolated_workspace",
+                            })!,
+                          )}
+                      >
+                        <span
+                          className={cn(
+                            "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                            executionWorkspaceDefaultMode === "isolated_workspace"
+                              ? "translate-x-4.5"
+                              : "translate-x-0.5",
+                          )}
+                        />
+                      </button>
+                    </div>
+
+                    <div className="border-t border-border/60 pt-2">
+                      <button
+                        type="button"
+                        className="flex w-full items-center gap-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+                        onClick={() => setExecutionWorkspaceAdvancedOpen((open) => !open)}
+                      >
+                        {executionWorkspaceAdvancedOpen
+                          ? "Hide advanced checkout settings"
+                          : "Show advanced checkout settings"}
+                      </button>
+                    </div>
+
+                    {executionWorkspaceAdvancedOpen ? (
+                      <div className="space-y-3">
+                        <div className="text-xs text-muted-foreground">
+                          Host-managed implementation: <span className="text-foreground">Git worktree</span>
+                        </div>
+                        <div>
+                          <div className="mb-1 flex items-center gap-1.5">
+                            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>Base ref</span>
+                              <SaveIndicator state={fieldState("execution_workspace_base_ref")} />
+                            </label>
+                          </div>
+                          <DraftInput
+                            value={executionWorkspaceStrategy.baseRef ?? ""}
+                            onCommit={(value) =>
+                              commitField("execution_workspace_base_ref", {
+                                ...updateExecutionWorkspacePolicy({
+                                  workspaceStrategy: {
+                                    ...executionWorkspaceStrategy,
+                                    type: "git_worktree",
+                                    baseRef: value || null,
+                                  },
+                                })!,
+                              })}
+                            immediate
+                            className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                            placeholder="origin/main"
+                          />
+                        </div>
+                        <div>
+                          <div className="mb-1 flex items-center gap-1.5">
+                            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>Branch template</span>
+                              <SaveIndicator state={fieldState("execution_workspace_branch_template")} />
+                            </label>
+                          </div>
+                          <DraftInput
+                            value={executionWorkspaceStrategy.branchTemplate ?? ""}
+                            onCommit={(value) =>
+                              commitField("execution_workspace_branch_template", {
+                                ...updateExecutionWorkspacePolicy({
+                                  workspaceStrategy: {
+                                    ...executionWorkspaceStrategy,
+                                    type: "git_worktree",
+                                    branchTemplate: value || null,
+                                  },
+                                })!,
+                              })}
+                            immediate
+                            className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                            placeholder="{{issue.identifier}}-{{slug}}"
+                          />
+                        </div>
+                        <div>
+                          <div className="mb-1 flex items-center gap-1.5">
+                            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>Worktree parent dir</span>
+                              <SaveIndicator state={fieldState("execution_workspace_worktree_parent_dir")} />
+                            </label>
+                          </div>
+                          <DraftInput
+                            value={executionWorkspaceStrategy.worktreeParentDir ?? ""}
+                            onCommit={(value) =>
+                              commitField("execution_workspace_worktree_parent_dir", {
+                                ...updateExecutionWorkspacePolicy({
+                                  workspaceStrategy: {
+                                    ...executionWorkspaceStrategy,
+                                    type: "git_worktree",
+                                    worktreeParentDir: value || null,
+                                  },
+                                })!,
+                              })}
+                            immediate
+                            className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                            placeholder=".paperclip/worktrees"
+                          />
+                        </div>
+                        <div>
+                          <div className="mb-1 flex items-center gap-1.5">
+                            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>Provision command</span>
+                              <SaveIndicator state={fieldState("execution_workspace_provision_command")} />
+                            </label>
+                          </div>
+                          <DraftInput
+                            value={executionWorkspaceStrategy.provisionCommand ?? ""}
+                            onCommit={(value) =>
+                              commitField("execution_workspace_provision_command", {
+                                ...updateExecutionWorkspacePolicy({
+                                  workspaceStrategy: {
+                                    ...executionWorkspaceStrategy,
+                                    type: "git_worktree",
+                                    provisionCommand: value || null,
+                                  },
+                                })!,
+                              })}
+                            immediate
+                            className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                            placeholder="bash ./scripts/provision-worktree.sh"
+                          />
+                        </div>
+                        <div>
+                          <div className="mb-1 flex items-center gap-1.5">
+                            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span>Teardown command</span>
+                              <SaveIndicator state={fieldState("execution_workspace_teardown_command")} />
+                            </label>
+                          </div>
+                          <DraftInput
+                            value={executionWorkspaceStrategy.teardownCommand ?? ""}
+                            onCommit={(value) =>
+                              commitField("execution_workspace_teardown_command", {
+                                ...updateExecutionWorkspacePolicy({
+                                  workspaceStrategy: {
+                                    ...executionWorkspaceStrategy,
+                                    type: "git_worktree",
+                                    teardownCommand: value || null,
+                                  },
+                                })!,
+                              })}
+                            immediate
+                            className="w-full rounded border border-border bg-transparent px-2 py-1 text-xs font-mono outline-none"
+                            placeholder="bash ./scripts/teardown-worktree.sh"
+                          />
+                        </div>
+                        <p className="text-[11px] text-muted-foreground">
+                          Provision runs inside the derived worktree before agent execution. Teardown is stored here for
+                          future cleanup flows.
+                        </p>
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </>
+        ) : null}
+
+      </div>
+
+      {onArchive && (
+        <>
+          <Separator className="my-4" />
+          <div className="space-y-4 py-4">
+            <div className="text-xs font-medium text-destructive uppercase tracking-wide">
+              Danger Zone
+            </div>
+            <ArchiveDangerZone
+              project={project}
+              onArchive={onArchive}
+              archivePending={archivePending}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+