Refine project and agent configuration UI

ui/src/adapters/local-workspace-runtime-fields.tsx

@@ -1,144 +1,5 @@
-import { useState } from "react";
 import type { AdapterConfigFieldsProps } from "./types";
-import { CollapsibleSection, DraftInput, Field, help } from "../components/agent-config-primitives";
-import { RuntimeServicesJsonField } from "./runtime-json-fields";
 
-const inputClass =
+export function LocalWorkspaceRuntimeFields(_props: AdapterConfigFieldsProps) {
-  "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
+  return null;
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function asString(value: unknown): string {
-  return typeof value === "string" ? value : "";
-}
-
-function readWorkspaceStrategy(config: Record<string, unknown>) {
-  const strategy = asRecord(config.workspaceStrategy);
-  const type = asString(strategy.type) || "project_primary";
-  return {
-    type,
-    baseRef: asString(strategy.baseRef),
-    branchTemplate: asString(strategy.branchTemplate),
-    worktreeParentDir: asString(strategy.worktreeParentDir),
-  };
-}
-
-function buildWorkspaceStrategyPatch(input: {
-  type: string;
-  baseRef?: string;
-  branchTemplate?: string;
-  worktreeParentDir?: string;
-}) {
-  if (input.type !== "git_worktree") return undefined;
-  return {
-    type: "git_worktree",
-    ...(input.baseRef ? { baseRef: input.baseRef } : {}),
-    ...(input.branchTemplate ? { branchTemplate: input.branchTemplate } : {}),
-    ...(input.worktreeParentDir ? { worktreeParentDir: input.worktreeParentDir } : {}),
-  };
-}
-
-export function LocalWorkspaceRuntimeFields({
-  isCreate,
-  values,
-  set,
-  config,
-  mark,
-}: AdapterConfigFieldsProps) {
-  const [open, setOpen] = useState(false);
-  const existing = readWorkspaceStrategy(config);
-  const strategyType = isCreate ? values!.workspaceStrategyType ?? "project_primary" : existing.type;
-  const updateEditWorkspaceStrategy = (patch: Partial<typeof existing>) => {
-    const next = {
-      ...existing,
-      ...patch,
-    };
-    mark(
-      "adapterConfig",
-      "workspaceStrategy",
-      buildWorkspaceStrategyPatch(next),
-    );
-  };
-  return (
-    <CollapsibleSection
-      title="Advanced Workspace Overrides"
-      open={open}
-      onToggle={() => setOpen((value) => !value)}
-    >
-      <div className="space-y-3 pt-1">
-        <Field label="Workspace strategy" hint={help.workspaceStrategy}>
-          <select
-            className={inputClass}
-            value={strategyType}
-            onChange={(e) => {
-              const nextType = e.target.value;
-              if (isCreate) {
-                set!({ workspaceStrategyType: nextType });
-              } else {
-                updateEditWorkspaceStrategy({ type: nextType });
-              }
-            }}
-          >
-            <option value="project_primary">Project primary workspace</option>
-            <option value="git_worktree">Git worktree</option>
-          </select>
-        </Field>
-
-        {strategyType === "git_worktree" && (
-          <>
-            <Field label="Base ref" hint={help.workspaceBaseRef}>
-              <DraftInput
-                value={isCreate ? values!.workspaceBaseRef ?? "" : existing.baseRef}
-                onCommit={(v) =>
-                  isCreate
-                    ? set!({ workspaceBaseRef: v })
-                    : updateEditWorkspaceStrategy({ baseRef: v || "" })
-                }
-                immediate
-                className={inputClass}
-                placeholder="origin/main"
-              />
-            </Field>
-            <Field label="Branch template" hint={help.workspaceBranchTemplate}>
-              <DraftInput
-                value={isCreate ? values!.workspaceBranchTemplate ?? "" : existing.branchTemplate}
-                onCommit={(v) =>
-                  isCreate
-                    ? set!({ workspaceBranchTemplate: v })
-                    : updateEditWorkspaceStrategy({ branchTemplate: v || "" })
-                }
-                immediate
-                className={inputClass}
-                placeholder="{{issue.identifier}}-{{slug}}"
-              />
-            </Field>
-            <Field label="Worktree parent dir" hint={help.worktreeParentDir}>
-              <DraftInput
-                value={isCreate ? values!.worktreeParentDir ?? "" : existing.worktreeParentDir}
-                onCommit={(v) =>
-                  isCreate
-                    ? set!({ worktreeParentDir: v })
-                    : updateEditWorkspaceStrategy({ worktreeParentDir: v || "" })
-                }
-                immediate
-                className={inputClass}
-                placeholder=".paperclip/worktrees"
-              />
-            </Field>
-          </>
-        )}
-        <RuntimeServicesJsonField
-          isCreate={isCreate}
-          values={values}
-          set={set}
-          config={config}
-          mark={mark}
-        />
-      </div>
-    </CollapsibleSection>
-  );
 }

ui/src/components/PageTabBar.tsx

@@ -11,9 +11,10 @@ interface PageTabBarProps {
   items: PageTabItem[];
   value?: string;
   onValueChange?: (value: string) => void;
+  align?: "center" | "start";
 }
 
-export function PageTabBar({ items, value, onValueChange }: PageTabBarProps) {
+export function PageTabBar({ items, value, onValueChange, align = "center" }: PageTabBarProps) {
   const { isMobile } = useSidebar();
 
   if (isMobile && value !== undefined && onValueChange) {
@@ -33,7 +34,7 @@ export function PageTabBar({ items, value, onValueChange }: PageTabBarProps) {
   }
 
   return (
-    <TabsList variant="line">
+    <TabsList variant="line" className={align === "start" ? "justify-start" : undefined}>
       {items.map((item) => (
         <TabsTrigger key={item.value} value={item.value}>
           {item.label}

ui/src/components/ProjectProperties.tsx

@@ -13,9 +13,10 @@ 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 { ExternalLink, Github, Plus, Trash2, X } from "lucide-react";
+import { AlertCircle, Check, ExternalLink, Github, Loader2, Plus, Trash2, X } from "lucide-react";
 import { ChoosePathButton } from "./PathInstructionsModal";
-import { CollapsibleSection, DraftInput } from "./agent-config-primitives";
+import { DraftInput } from "./agent-config-primitives";
+import { InlineEditor } from "./InlineEditor";
 
 const PROJECT_STATUSES = [
   { value: "backlog", label: "Backlog" },
@@ -28,15 +29,84 @@ const PROJECT_STATUSES = [
 interface ProjectPropertiesProps {
   project: Project;
   onUpdate?: (data: Record<string, unknown>) => void;
+  onFieldUpdate?: (field: ProjectConfigFieldKey, data: Record<string, unknown>) => void;
+  getFieldSaveState?: (field: ProjectConfigFieldKey) => ProjectFieldSaveState;
 }
 
+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";
+
 const REPO_ONLY_CWD_SENTINEL = "/__paperclip_repo_only__";
 
-function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
+function SaveIndicator({ state }: { state: ProjectFieldSaveState }) {
+  if (state === "saving") {
     return (
-    <div className="flex items-center gap-3 py-1.5">
+      <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
-      <span className="text-xs text-muted-foreground shrink-0 w-20">{label}</span>
+        <Loader2 className="h-3 w-3 animate-spin" />
-      <div className="flex items-center gap-1.5 min-w-0">{children}</div>
+        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>
   );
 }
@@ -77,7 +147,7 @@ function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (
   );
 }
 
-export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps) {
+export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSaveState }: ProjectPropertiesProps) {
   const { selectedCompanyId } = useCompany();
   const queryClient = useQueryClient();
   const [goalOpen, setGoalOpen] = useState(false);
@@ -87,6 +157,15 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
   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!),
@@ -148,19 +227,19 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
   });
 
   const removeGoal = (goalId: string) => {
-    if (!onUpdate) return;
+    if (!onUpdate && !onFieldUpdate) return;
-    onUpdate({ goalIds: linkedGoalIds.filter((id) => id !== goalId) });
+    commitField("goals", { goalIds: linkedGoalIds.filter((id) => id !== goalId) });
   };
 
   const addGoal = (goalId: string) => {
-    if (!onUpdate || linkedGoalIds.includes(goalId)) return;
+    if ((!onUpdate && !onFieldUpdate) || linkedGoalIds.includes(goalId)) return;
-    onUpdate({ goalIds: [...linkedGoalIds, goalId] });
+    commitField("goals", { goalIds: [...linkedGoalIds, goalId] });
     setGoalOpen(false);
   };
 
   const updateExecutionWorkspacePolicy = (patch: Record<string, unknown>) => {
-    if (!onUpdate) return;
+    if (!onUpdate && !onFieldUpdate) return;
-    onUpdate({
+    return {
       executionWorkspacePolicy: {
         enabled: executionWorkspacesEnabled,
         defaultMode: executionWorkspaceDefaultMode,
@@ -168,7 +247,7 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
         ...executionWorkspacePolicy,
         ...patch,
       },
-    });
+    };
   };
 
   const isAbsolutePath = (value: string) => value.startsWith("/") || /^[A-Za-z]:[\\/]/.test(value);
@@ -279,13 +358,46 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
   };
 
   return (
-    <div className="space-y-4">
+    <div>
-      <div className="space-y-1">
+      <div className="space-y-1 pb-4">
-        <PropertyRow label="Status">
+        <PropertyRow label={<FieldLabel label="Name" state={fieldState("name")} />}>
-          {onUpdate ? (
+          {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) => onUpdate({ status })}
+              onChange={(status) => commitField("status", { status })}
             />
           ) : (
             <StatusBadge status={project.status} />
@@ -296,23 +408,24 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
             <span className="text-sm font-mono">{project.leadAgentId.slice(0, 8)}</span>
           </PropertyRow>
         )}
-        <div className="py-1.5">
+        <PropertyRow
-          <div className="flex items-start justify-between gap-2">
+          label={<FieldLabel label="Goals" state={fieldState("goals")} />}
-            <span className="text-xs text-muted-foreground">Goals</span>
+          alignStart
-            <div className="flex flex-col items-end gap-1.5">
+          valueClassName="space-y-2"
+        >
           {linkedGoals.length === 0 ? (
             <span className="text-sm text-muted-foreground">None</span>
           ) : (
-                <div className="flex flex-wrap justify-end gap-1.5 max-w-[220px]">
+            <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-[140px] truncate">
+                  <Link to={`/goals/${goal.id}`} className="hover:underline max-w-[220px] truncate">
                     {goal.title}
                   </Link>
-                      {onUpdate && (
+                  {(onUpdate || onFieldUpdate) && (
                     <button
                       className="text-muted-foreground hover:text-foreground"
                       type="button"
@@ -326,20 +439,20 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
               ))}
             </div>
           )}
-              {onUpdate && (
+          {(onUpdate || onFieldUpdate) && (
             <Popover open={goalOpen} onOpenChange={setGoalOpen}>
               <PopoverTrigger asChild>
                 <Button
                   variant="outline"
                   size="xs"
-                      className="h-6 px-2"
+                  className="h-6 w-fit px-2"
                   disabled={availableGoals.length === 0}
                 >
                   <Plus className="h-3 w-3 mr-1" />
                   Goal
                 </Button>
               </PopoverTrigger>
-                  <PopoverContent className="w-56 p-1" align="end">
+              <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.
@@ -358,176 +471,24 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
               </PopoverContent>
             </Popover>
           )}
-            </div>
+        </PropertyRow>
-          </div>
+        <PropertyRow label={<FieldLabel label="Created" state="idle" />}>
-        </div>
+          <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="Target Date">
+          <PropertyRow label={<FieldLabel label="Target Date" state="idle" />}>
             <span className="text-sm">{formatDate(project.targetDate)}</span>
           </PropertyRow>
         )}
       </div>
 
-      <Separator />
+      <Separator className="my-4" />
 
-      <div className="space-y-1">
+      <div className="space-y-1 py-4">
-        <div className="py-1.5 space-y-2">
+        <div className="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="rounded-md border border-border p-3 space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <div className="space-y-0.5">
-                <div className="text-sm font-medium">Enable isolated issue checkouts</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 ? (
-                <button
-                  className={cn(
-                    "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
-                    executionWorkspacesEnabled ? "bg-green-600" : "bg-muted",
-                  )}
-                  type="button"
-                  onClick={() => 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="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2">
-                  <div className="space-y-0.5">
-                    <div className="text-sm">New issues default to isolated checkout</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
-                    className={cn(
-                      "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
-                      executionWorkspaceDefaultMode === "isolated" ? "bg-green-600" : "bg-muted",
-                    )}
-                    type="button"
-                    onClick={() =>
-                      updateExecutionWorkspacePolicy({
-                        defaultMode: executionWorkspaceDefaultMode === "isolated" ? "project_primary" : "isolated",
-                      })}
-                  >
-                    <span
-                      className={cn(
-                        "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
-                        executionWorkspaceDefaultMode === "isolated" ? "translate-x-4.5" : "translate-x-0.5",
-                      )}
-                    />
-                  </button>
-                </div>
-
-                <CollapsibleSection
-                  title="Advanced Checkout Settings"
-                  open={executionWorkspaceAdvancedOpen}
-                  onToggle={() => setExecutionWorkspaceAdvancedOpen((open) => !open)}
-                >
-                  <div className="space-y-3 pt-1">
-                    <div className="rounded-md border border-border/70 px-3 py-2 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="text-xs text-muted-foreground">Base ref</label>
-                      </div>
-                      <DraftInput
-                        value={executionWorkspaceStrategy.baseRef ?? ""}
-                        onCommit={(value) =>
-                          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="text-xs text-muted-foreground">Branch template</label>
-                      </div>
-                      <DraftInput
-                        value={executionWorkspaceStrategy.branchTemplate ?? ""}
-                        onCommit={(value) =>
-                          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="text-xs text-muted-foreground">Worktree parent dir</label>
-                      </div>
-                      <DraftInput
-                        value={executionWorkspaceStrategy.worktreeParentDir ?? ""}
-                        onCommit={(value) =>
-                          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>
-                    <p className="text-[11px] text-muted-foreground">
-                      Runtime services stay under Paperclip control and are not configured here yet.
-                    </p>
-                  </div>
-                </CollapsibleSection>
-              </>
-            )}
-          </div>
-        </div>
-
-        <Separator />
-
-        <div className="py-1.5 space-y-2">
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <span>Workspaces</span>
             <Tooltip>
@@ -744,14 +705,196 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
           )}
         </div>
 
-        <Separator />
+        <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
+                  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="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
+                    className={cn(
+                      "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+                      executionWorkspaceDefaultMode === "isolated" ? "bg-green-600" : "bg-muted",
+                    )}
+                    type="button"
+                    onClick={() =>
+                      commitField(
+                        "execution_workspace_default_mode",
+                        updateExecutionWorkspacePolicy({
+                          defaultMode: executionWorkspaceDefaultMode === "isolated" ? "project_primary" : "isolated",
+                        })!,
+                      )}
+                  >
+                    <span
+                      className={cn(
+                        "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                        executionWorkspaceDefaultMode === "isolated" ? "translate-x-4.5" : "translate-x-0.5",
+                      )}
+                    />
+                  </button>
+                </div>
+
+                <div className="border-t border-border/60 pt-2">
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 w-full py-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+                    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>
+                    <p className="text-[11px] text-muted-foreground">
+                      Runtime services stay under Paperclip control and are not configured here yet.
+                    </p>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
 
-        <PropertyRow label="Created">
-          <span className="text-sm">{formatDate(project.createdAt)}</span>
-        </PropertyRow>
-        <PropertyRow label="Updated">
-          <span className="text-sm">{formatDate(project.updatedAt)}</span>
-        </PropertyRow>
       </div>
     </div>
   );

ui/src/pages/AgentDetail.tsx

@@ -642,8 +642,6 @@ export function AgentDetail() {
           runs={heartbeats ?? []}
           assignedIssues={assignedIssues}
           runtimeState={runtimeState}
-          reportsToAgent={reportsToAgent ?? null}
-          directReports={directReports}
           agentId={agent.id}
           agentRouteId={canonicalAgentRef}
         />
@@ -763,8 +761,6 @@ function AgentOverview({
   runs,
   assignedIssues,
   runtimeState,
-  reportsToAgent,
-  directReports,
   agentId,
   agentRouteId,
 }: {
@@ -772,8 +768,6 @@ function AgentOverview({
   runs: HeartbeatRun[];
   assignedIssues: { id: string; title: string; status: string; priority: string; identifier?: string | null; createdAt: Date }[];
   runtimeState?: AgentRuntimeState;
-  reportsToAgent: Agent | null;
-  directReports: Agent[];
   agentId: string;
   agentRouteId: string;
 }) {
@@ -833,119 +827,6 @@ function AgentOverview({
         <h3 className="text-sm font-medium">Costs</h3>
         <CostsSection runtimeState={runtimeState} runs={runs} />
       </div>
-
-      {/* Configuration Summary */}
-      <ConfigSummary
-        agent={agent}
-        reportsToAgent={reportsToAgent}
-        directReports={directReports}
-      />
-    </div>
-  );
-}
-
-/* Chart components imported from ../components/ActivityCharts */
-
-/* ---- Configuration Summary ---- */
-
-function ConfigSummary({
-  agent,
-  reportsToAgent,
-  directReports,
-}: {
-  agent: Agent;
-  reportsToAgent: Agent | null;
-  directReports: Agent[];
-}) {
-  const config = agent.adapterConfig as Record<string, unknown>;
-  const promptText = typeof config?.promptTemplate === "string" ? config.promptTemplate : "";
-
-  return (
-    <div className="space-y-3">
-      <h3 className="text-sm font-medium">Configuration</h3>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="border border-border rounded-lg p-4 space-y-3">
-          <h4 className="text-xs text-muted-foreground font-medium">Agent Details</h4>
-          <div className="space-y-2 text-sm">
-            <SummaryRow label="Adapter">
-              <span className="font-mono">{adapterLabels[agent.adapterType] ?? agent.adapterType}</span>
-              {String(config?.model ?? "") !== "" && (
-                <span className="text-muted-foreground ml-1">
-                  ({String(config.model)})
-                </span>
-              )}
-            </SummaryRow>
-            <SummaryRow label="Heartbeat">
-              {(agent.runtimeConfig as Record<string, unknown>)?.heartbeat
-                ? (() => {
-                    const hb = (agent.runtimeConfig as Record<string, unknown>).heartbeat as Record<string, unknown>;
-                    if (!hb.enabled) return <span className="text-muted-foreground">Disabled</span>;
-                    const sec = Number(hb.intervalSec) || 300;
-                    const maxConcurrentRuns = Math.max(1, Math.floor(Number(hb.maxConcurrentRuns) || 1));
-                    const intervalLabel = sec >= 60 ? `${Math.round(sec / 60)} min` : `${sec}s`;
-                    return (
-                      <span>
-                        Every {intervalLabel}
-                        {maxConcurrentRuns > 1 ? ` (max ${maxConcurrentRuns} concurrent)` : ""}
-                      </span>
-                    );
-                  })()
-                : <span className="text-muted-foreground">Not configured</span>
-              }
-            </SummaryRow>
-            <SummaryRow label="Last heartbeat">
-              {agent.lastHeartbeatAt
-                ? <span>{relativeTime(agent.lastHeartbeatAt)}</span>
-                : <span className="text-muted-foreground">Never</span>
-              }
-            </SummaryRow>
-            <SummaryRow label="Reports to">
-              {reportsToAgent ? (
-                <Link
-                  to={`/agents/${agentRouteRef(reportsToAgent)}`}
-                  className="text-blue-600 hover:underline dark:text-blue-400"
-                >
-                  <Identity name={reportsToAgent.name} size="sm" />
-                </Link>
-              ) : (
-                <span className="text-muted-foreground">Nobody (top-level)</span>
-              )}
-            </SummaryRow>
-          </div>
-          {directReports.length > 0 && (
-            <div className="pt-1">
-              <span className="text-xs text-muted-foreground">Direct reports</span>
-              <div className="mt-1 space-y-1">
-                {directReports.map((r) => (
-                  <Link
-                    key={r.id}
-                    to={`/agents/${agentRouteRef(r)}`}
-                    className="flex items-center gap-2 text-sm text-blue-600 hover:underline dark:text-blue-400"
-                  >
-                    <span className="relative flex h-2 w-2">
-                      <span className={`absolute inline-flex h-full w-full rounded-full ${agentStatusDot[r.status] ?? agentStatusDotDefault}`} />
-                    </span>
-                    {r.name}
-                    <span className="text-muted-foreground text-xs">({roleLabels[r.role] ?? r.role})</span>
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
-          {agent.capabilities && (
-            <div className="pt-1">
-              <span className="text-xs text-muted-foreground">Capabilities</span>
-              <p className="text-sm mt-0.5">{agent.capabilities}</p>
-            </div>
-          )}
-        </div>
-        {promptText && (
-          <div className="border border-border rounded-lg p-4 space-y-2">
-            <h4 className="text-xs text-muted-foreground font-medium">Prompt Template</h4>
-            <pre className="text-xs text-muted-foreground line-clamp-[12] font-mono whitespace-pre-wrap">{promptText}</pre>
-          </div>
-        )}
-      </div>
     </div>
   );
 }

ui/src/pages/ProjectDetail.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useParams, useNavigate, useLocation, Navigate } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { PROJECT_COLORS, isUuidLike } from "@paperclipai/shared";
@@ -11,7 +11,7 @@ import { usePanel } from "../context/PanelContext";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
-import { ProjectProperties } from "../components/ProjectProperties";
+import { ProjectProperties, type ProjectConfigFieldKey, type ProjectFieldSaveState } from "../components/ProjectProperties";
 import { InlineEditor } from "../components/InlineEditor";
 import { StatusBadge } from "../components/StatusBadge";
 import { IssuesList } from "../components/IssuesList";
@@ -202,6 +202,9 @@ export function ProjectDetail() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const location = useLocation();
+  const [fieldSaveStates, setFieldSaveStates] = useState<Partial<Record<ProjectConfigFieldKey, ProjectFieldSaveState>>>({});
+  const fieldSaveRequestIds = useRef<Partial<Record<ProjectConfigFieldKey, number>>>({});
+  const fieldSaveTimers = useRef<Partial<Record<ProjectConfigFieldKey, ReturnType<typeof setTimeout>>>>({});
   const routeProjectRef = projectId ?? "";
   const routeCompanyId = useMemo(() => {
     if (!companyPrefix) return null;
@@ -282,6 +285,49 @@ export function ProjectDetail() {
     return () => closePanel();
   }, [closePanel]);
 
+  useEffect(() => {
+    return () => {
+      Object.values(fieldSaveTimers.current).forEach((timer) => {
+        if (timer) clearTimeout(timer);
+      });
+    };
+  }, []);
+
+  const setFieldState = useCallback((field: ProjectConfigFieldKey, state: ProjectFieldSaveState) => {
+    setFieldSaveStates((current) => ({ ...current, [field]: state }));
+  }, []);
+
+  const scheduleFieldReset = useCallback((field: ProjectConfigFieldKey, delayMs: number) => {
+    const existing = fieldSaveTimers.current[field];
+    if (existing) clearTimeout(existing);
+    fieldSaveTimers.current[field] = setTimeout(() => {
+      setFieldSaveStates((current) => {
+        const next = { ...current };
+        delete next[field];
+        return next;
+      });
+      delete fieldSaveTimers.current[field];
+    }, delayMs);
+  }, []);
+
+  const updateProjectField = useCallback(async (field: ProjectConfigFieldKey, data: Record<string, unknown>) => {
+    const requestId = (fieldSaveRequestIds.current[field] ?? 0) + 1;
+    fieldSaveRequestIds.current[field] = requestId;
+    setFieldState(field, "saving");
+    try {
+      await projectsApi.update(projectLookupRef, data, resolvedCompanyId ?? lookupCompanyId);
+      invalidateProject();
+      if (fieldSaveRequestIds.current[field] !== requestId) return;
+      setFieldState(field, "saved");
+      scheduleFieldReset(field, 1800);
+    } catch (error) {
+      if (fieldSaveRequestIds.current[field] !== requestId) return;
+      setFieldState(field, "error");
+      scheduleFieldReset(field, 3000);
+      throw error;
+    }
+  }, [invalidateProject, lookupCompanyId, projectLookupRef, resolvedCompanyId, scheduleFieldReset, setFieldState]);
+
   // Redirect bare /projects/:id to /projects/:id/issues
   if (routeProjectRef && activeTab === null) {
     return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
@@ -325,6 +371,7 @@ export function ProjectDetail() {
             { value: "list", label: "List" },
             { value: "configuration", label: "Configuration" },
           ]}
+          align="start"
           value={activeTab ?? "list"}
           onValueChange={(value) => handleTabChange(value as ProjectTab)}
         />
@@ -346,7 +393,14 @@ export function ProjectDetail() {
       )}
 
       {activeTab === "configuration" && (
-        <ProjectProperties project={project} onUpdate={(data) => updateProject.mutate(data)} />
+        <div className="max-w-4xl">
+          <ProjectProperties
+            project={project}
+            onUpdate={(data) => updateProject.mutate(data)}
+            onFieldUpdate={updateProjectField}
+            getFieldSaveState={(field) => fieldSaveStates[field] ?? "idle"}
+          />
+        </div>
       )}
     </div>
   );