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

Implement execution workspaces and work products

Browse Source
This commit is contained in:
Dotta
2026-03-13 17:12:25 -05:00
parent 9da5358bb3
commit 920bc4c70f
45 changed files with 9157 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/App.tsx
View File

@@ -14,6 +14,7 @@ import { Projects } from "./pages/Projects";
import { ProjectDetail } from "./pages/ProjectDetail";
import { Issues } from "./pages/Issues";
import { IssueDetail } from "./pages/IssueDetail";
import { ExecutionWorkspaceDetail } from "./pages/ExecutionWorkspaceDetail";
import { Goals } from "./pages/Goals";
import { GoalDetail } from "./pages/GoalDetail";
import { Approvals } from "./pages/Approvals";
@@ -136,6 +137,7 @@ function boardRoutes() {
<Route path="issues/done" element={<Navigate to="/issues" replace />} />
<Route path="issues/recent" element={<Navigate to="/issues" replace />} />
<Route path="issues/:issueId" element={<IssueDetail />} />
<Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
<Route path="goals" element={<Goals />} />
<Route path="goals/:goalId" element={<GoalDetail />} />
<Route path="approvals" element={<Navigate to="/approvals/pending" replace />} />

26
ui/src/api/execution-workspaces.ts Normal file
View File

@@ -0,0 +1,26 @@
import type { ExecutionWorkspace } from "@paperclipai/shared";
import { api } from "./client";
export const executionWorkspacesApi = {
list: (
companyId: string,
filters?: {
projectId?: string;
projectWorkspaceId?: string;
issueId?: string;
status?: string;
reuseEligible?: boolean;
},
) => {
const params = new URLSearchParams();
if (filters?.projectId) params.set("projectId", filters.projectId);
if (filters?.projectWorkspaceId) params.set("projectWorkspaceId", filters.projectWorkspaceId);
if (filters?.issueId) params.set("issueId", filters.issueId);
if (filters?.status) params.set("status", filters.status);
if (filters?.reuseEligible) params.set("reuseEligible", "true");
const qs = params.toString();
return api.get<ExecutionWorkspace[]>(`/companies/${companyId}/execution-workspaces${qs ? `?${qs}` : ""}`);
},
get: (id: string) => api.get<ExecutionWorkspace>(`/execution-workspaces/${id}`),
update: (id: string, data: Record<string, unknown>) => api.patch<ExecutionWorkspace>(`/execution-workspaces/${id}`, data),
};

8
ui/src/api/issues.ts
View File

@@ -1,4 +1,4 @@
import type { Approval, Issue, IssueAttachment, IssueComment, IssueLabel } from "@paperclipai/shared";
import type { Approval, Issue, IssueAttachment, IssueComment, IssueLabel, IssueWorkProduct } from "@paperclipai/shared";
import { api } from "./client";
export const issuesApi = {
@@ -73,4 +73,10 @@ export const issuesApi = {
api.post<Approval[]>(`/issues/${id}/approvals`, { approvalId }),
unlinkApproval: (id: string, approvalId: string) =>
api.delete<{ ok: true }>(`/issues/${id}/approvals/${approvalId}`),
listWorkProducts: (id: string) => api.get<IssueWorkProduct[]>(`/issues/${id}/work-products`),
createWorkProduct: (id: string, data: Record<string, unknown>) =>
api.post<IssueWorkProduct>(`/issues/${id}/work-products`, data),
updateWorkProduct: (id: string, data: Record<string, unknown>) =>
api.patch<IssueWorkProduct>(`/work-products/${id}`, data),
deleteWorkProduct: (id: string) => api.delete<IssueWorkProduct>(`/work-products/${id}`),
};

191
ui/src/components/IssueProperties.tsx
View File

@@ -4,6 +4,7 @@ import type { Issue } from "@paperclipai/shared";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { agentsApi } from "../api/agents";
import { authApi } from "../api/auth";
import { executionWorkspacesApi } from "../api/execution-workspaces";
import { issuesApi } from "../api/issues";
import { projectsApi } from "../api/projects";
import { useCompany } from "../context/CompanyContext";
@@ -15,13 +16,43 @@ import { PriorityIcon } from "./PriorityIcon";
import { Identity } from "./Identity";
import { formatDate, cn, projectUrl } from "../lib/utils";
import { timeAgo } from "../lib/timeAgo";
import { useExperimentalWorkspacesEnabled } from "../lib/experimentalSettings";
import { Separator } from "@/components/ui/separator";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { User, Hexagon, ArrowUpRight, Tag, Plus, Trash2 } from "lucide-react";
import { AgentIcon } from "./AgentIconPicker";
// TODO(issue-worktree-support): re-enable this UI once the workflow is ready to ship.
const SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI = false;
const EXECUTION_WORKSPACE_OPTIONS = [
{ value: "shared_workspace", label: "Project default" },
{ value: "isolated_workspace", label: "New isolated workspace" },
{ value: "reuse_existing", label: "Reuse existing workspace" },
{ value: "operator_branch", label: "Operator branch" },
{ value: "agent_default", label: "Agent default" },
] as const;
function defaultProjectWorkspaceIdForProject(project: {
workspaces?: Array<{ id: string; isPrimary: boolean }>;
executionWorkspacePolicy?: { defaultProjectWorkspaceId?: string | null } | null;
} | null | undefined) {
if (!project) return null;
return project.executionWorkspacePolicy?.defaultProjectWorkspaceId
?? project.workspaces?.find((workspace) => workspace.isPrimary)?.id
?? project.workspaces?.[0]?.id
?? null;
}
function defaultExecutionWorkspaceModeForProject(project: { executionWorkspacePolicy?: { enabled?: boolean; defaultMode?: string | null } | null } | null | undefined) {
const defaultMode = project?.executionWorkspacePolicy?.enabled ? project.executionWorkspacePolicy.defaultMode : null;
if (defaultMode === "isolated_workspace" || defaultMode === "operator_branch") return defaultMode;
if (defaultMode === "adapter_default") return "agent_default";
return "shared_workspace";
}
function issueModeForExistingWorkspace(mode: string | null | undefined) {
if (mode === "isolated_workspace" || mode === "operator_branch" || mode === "shared_workspace") return mode;
if (mode === "adapter_managed" || mode === "cloud_sandbox") return "agent_default";
return "shared_workspace";
}
interface IssuePropertiesProps {
issue: Issue;
@@ -102,6 +133,7 @@ function PropertyPicker({
export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProps) {
const { selectedCompanyId } = useCompany();
const { enabled: showExperimentalWorkspaceUi } = useExperimentalWorkspacesEnabled();
const queryClient = useQueryClient();
const companyId = issue.companyId ?? selectedCompanyId;
const [assigneeOpen, setAssigneeOpen] = useState(false);
@@ -182,15 +214,32 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
const currentProject = issue.projectId
? orderedProjects.find((project) => project.id === issue.projectId) ?? null
: null;
const currentProjectExecutionWorkspacePolicy = SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI
const currentProjectExecutionWorkspacePolicy = showExperimentalWorkspaceUi
? currentProject?.executionWorkspacePolicy ?? null
: null;
const currentProjectSupportsExecutionWorkspace = Boolean(currentProjectExecutionWorkspacePolicy?.enabled);
const usesIsolatedExecutionWorkspace = issue.executionWorkspaceSettings?.mode === "isolated"
? true
: issue.executionWorkspaceSettings?.mode === "project_primary"
? false
: currentProjectExecutionWorkspacePolicy?.defaultMode === "isolated";
const currentProjectWorkspaces = currentProject?.workspaces ?? [];
const currentExecutionWorkspaceSelection =
issue.executionWorkspacePreference
?? issue.executionWorkspaceSettings?.mode
?? defaultExecutionWorkspaceModeForProject(currentProject);
const { data: reusableExecutionWorkspaces } = useQuery({
queryKey: queryKeys.executionWorkspaces.list(companyId!, {
projectId: issue.projectId ?? undefined,
projectWorkspaceId: issue.projectWorkspaceId ?? undefined,
reuseEligible: true,
}),
queryFn: () =>
executionWorkspacesApi.list(companyId!, {
projectId: issue.projectId ?? undefined,
projectWorkspaceId: issue.projectWorkspaceId ?? undefined,
reuseEligible: true,
}),
enabled: Boolean(companyId) && showExperimentalWorkspaceUi && Boolean(issue.projectId),
});
const selectedReusableExecutionWorkspace = (reusableExecutionWorkspaces ?? []).find(
(workspace) => workspace.id === issue.executionWorkspaceId,
);
const projectLink = (id: string | null) => {
if (!id) return null;
const project = projects?.find((p) => p.id === id) ?? null;
@@ -418,7 +467,13 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
!issue.projectId && "bg-accent"
)}
onClick={() => {
onUpdate({ projectId: null, executionWorkspaceSettings: null });
onUpdate({
projectId: null,
projectWorkspaceId: null,
executionWorkspaceId: null,
executionWorkspacePreference: null,
executionWorkspaceSettings: null,
});
setProjectOpen(false);
}}
>
@@ -438,10 +493,14 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
p.id === issue.projectId && "bg-accent"
)}
onClick={() => {
const defaultMode = defaultExecutionWorkspaceModeForProject(p);
onUpdate({
projectId: p.id,
executionWorkspaceSettings: SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI && p.executionWorkspacePolicy?.enabled
? { mode: p.executionWorkspacePolicy.defaultMode === "isolated" ? "isolated" : "project_primary" }
projectWorkspaceId: showExperimentalWorkspaceUi ? defaultProjectWorkspaceIdForProject(p) : null,
executionWorkspaceId: null,
executionWorkspacePreference: showExperimentalWorkspaceUi ? defaultMode : null,
executionWorkspaceSettings: showExperimentalWorkspaceUi && p.executionWorkspacePolicy?.enabled
? { mode: defaultMode }
: null,
});
setProjectOpen(false);
@@ -530,38 +589,94 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
{projectContent}
</PropertyPicker>
{currentProjectSupportsExecutionWorkspace && (
{showExperimentalWorkspaceUi && currentProjectWorkspaces.length > 0 && (
<PropertyRow label="Codebase">
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={issue.projectWorkspaceId ?? ""}
onChange={(e) =>
onUpdate({
projectWorkspaceId: e.target.value || null,
executionWorkspaceId: null,
})}
>
{currentProjectWorkspaces.map((workspace) => (
<option key={workspace.id} value={workspace.id}>
{workspace.name}
{workspace.isPrimary ? " (default)" : ""}
</option>
))}
</select>
</PropertyRow>
)}
{showExperimentalWorkspaceUi && currentProjectSupportsExecutionWorkspace && (
<PropertyRow label="Workspace">
<div className="flex items-center justify-between gap-3 rounded-md border border-border px-2 py-1.5 w-full">
<div className="min-w-0">
<div className="text-sm">
{usesIsolatedExecutionWorkspace ? "Isolated issue checkout" : "Project primary checkout"}
</div>
<div className="text-[11px] text-muted-foreground">
Toggle whether this issue runs in its own execution workspace.
</div>
</div>
<button
className={cn(
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
usesIsolatedExecutionWorkspace ? "bg-green-600" : "bg-muted",
)}
type="button"
onClick={() =>
<div className="w-full space-y-2">
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={currentExecutionWorkspaceSelection}
onChange={(e) => {
const nextMode = e.target.value;
onUpdate({
executionWorkspacePreference: nextMode,
executionWorkspaceId: nextMode === "reuse_existing" ? issue.executionWorkspaceId : null,
executionWorkspaceSettings: {
mode: usesIsolatedExecutionWorkspace ? "project_primary" : "isolated",
mode:
nextMode === "reuse_existing"
? issueModeForExistingWorkspace(selectedReusableExecutionWorkspace?.mode)
: nextMode,
},
})
}
});
}}
>
<span
className={cn(
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
usesIsolatedExecutionWorkspace ? "translate-x-4.5" : "translate-x-0.5",
)}
/>
</button>
{EXECUTION_WORKSPACE_OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
{currentExecutionWorkspaceSelection === "reuse_existing" && (
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={issue.executionWorkspaceId ?? ""}
onChange={(e) => {
const nextExecutionWorkspaceId = e.target.value || null;
const nextExecutionWorkspace = (reusableExecutionWorkspaces ?? []).find(
(workspace) => workspace.id === nextExecutionWorkspaceId,
);
onUpdate({
executionWorkspacePreference: "reuse_existing",
executionWorkspaceId: nextExecutionWorkspaceId,
executionWorkspaceSettings: {
mode: issueModeForExistingWorkspace(nextExecutionWorkspace?.mode),
},
});
}}
>
<option value="">Choose an existing workspace</option>
{(reusableExecutionWorkspaces ?? []).map((workspace) => (
<option key={workspace.id} value={workspace.id}>
{workspace.name} · {workspace.status} · {workspace.branchName ?? workspace.cwd ?? workspace.id.slice(0, 8)}
</option>
))}
</select>
)}
{issue.currentExecutionWorkspace && (
<div className="text-[11px] text-muted-foreground">
Current:{" "}
<Link
to={`/execution-workspaces/${issue.currentExecutionWorkspace.id}`}
className="hover:text-foreground hover:underline"
>
{issue.currentExecutionWorkspace.name}
</Link>
{" · "}
{issue.currentExecutionWorkspace.status}
</div>
)}
</div>
</PropertyRow>
)}

238
ui/src/components/NewIssueDialog.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback, useMemo, type ChangeEvent } f
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useDialog } from "../context/DialogContext";
import { useCompany } from "../context/CompanyContext";
import { executionWorkspacesApi } from "../api/execution-workspaces";
import { issuesApi } from "../api/issues";
import { projectsApi } from "../api/projects";
import { agentsApi } from "../api/agents";
@@ -42,11 +43,10 @@ import { issueStatusText, issueStatusTextDefault, priorityColor, priorityColorDe
import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
import { AgentIcon } from "./AgentIconPicker";
import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
import { useExperimentalWorkspacesEnabled } from "../lib/experimentalSettings";
const DRAFT_KEY = "paperclip:issue-draft";
const DEBOUNCE_MS = 800;
// TODO(issue-worktree-support): re-enable this UI once the workflow is ready to ship.
const SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI = false;
/** Return black or white hex based on background luminance (WCAG perceptual weights). */
function getContrastTextColor(hexColor: string): string {
@@ -65,10 +65,13 @@ interface IssueDraft {
priority: string;
assigneeId: string;
projectId: string;
projectWorkspaceId?: string;
assigneeModelOverride: string;
assigneeThinkingEffort: string;
assigneeChrome: boolean;
useIsolatedExecutionWorkspace: boolean;
executionWorkspaceMode?: string;
selectedExecutionWorkspaceId?: string;
useIsolatedExecutionWorkspace?: boolean;
}
const ISSUE_OVERRIDE_ADAPTER_TYPES = new Set(["claude_local", "codex_local", "opencode_local"]);
@@ -165,9 +168,48 @@ const priorities = [
{ value: "low", label: "Low", icon: ArrowDown, color: priorityColor.low ?? priorityColorDefault },
];
const EXECUTION_WORKSPACE_MODES = [
{ value: "shared_workspace", label: "Project default" },
{ value: "isolated_workspace", label: "New isolated workspace" },
{ value: "reuse_existing", label: "Reuse existing workspace" },
{ value: "operator_branch", label: "Operator branch" },
{ value: "agent_default", label: "Agent default" },
] as const;
function defaultProjectWorkspaceIdForProject(project: { workspaces?: Array<{ id: string; isPrimary: boolean }>; executionWorkspacePolicy?: { defaultProjectWorkspaceId?: string | null } | null } | null | undefined) {
if (!project) return "";
return project.executionWorkspacePolicy?.defaultProjectWorkspaceId
?? project.workspaces?.find((workspace) => workspace.isPrimary)?.id
?? project.workspaces?.[0]?.id
?? "";
}
function defaultExecutionWorkspaceModeForProject(project: { executionWorkspacePolicy?: { enabled?: boolean; defaultMode?: string | null } | null } | null | undefined) {
const defaultMode = project?.executionWorkspacePolicy?.enabled ? project.executionWorkspacePolicy.defaultMode : null;
if (
defaultMode === "isolated_workspace" ||
defaultMode === "operator_branch" ||
defaultMode === "adapter_default"
) {
return defaultMode === "adapter_default" ? "agent_default" : defaultMode;
}
return "shared_workspace";
}
function issueExecutionWorkspaceModeForExistingWorkspace(mode: string | null | undefined) {
if (mode === "isolated_workspace" || mode === "operator_branch" || mode === "shared_workspace") {
return mode;
}
if (mode === "adapter_managed" || mode === "cloud_sandbox") {
return "agent_default";
}
return "shared_workspace";
}
export function NewIssueDialog() {
const { newIssueOpen, newIssueDefaults, closeNewIssue } = useDialog();
const { companies, selectedCompanyId, selectedCompany } = useCompany();
const { enabled: showExperimentalWorkspaceUi } = useExperimentalWorkspacesEnabled();
const queryClient = useQueryClient();
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
@@ -175,11 +217,13 @@ export function NewIssueDialog() {
const [priority, setPriority] = useState("");
const [assigneeId, setAssigneeId] = useState("");
const [projectId, setProjectId] = useState("");
const [projectWorkspaceId, setProjectWorkspaceId] = useState("");
const [assigneeOptionsOpen, setAssigneeOptionsOpen] = useState(false);
const [assigneeModelOverride, setAssigneeModelOverride] = useState("");
const [assigneeThinkingEffort, setAssigneeThinkingEffort] = useState("");
const [assigneeChrome, setAssigneeChrome] = useState(false);
const [useIsolatedExecutionWorkspace, setUseIsolatedExecutionWorkspace] = useState(false);
const [executionWorkspaceMode, setExecutionWorkspaceMode] = useState<string>("shared_workspace");
const [selectedExecutionWorkspaceId, setSelectedExecutionWorkspaceId] = useState("");
const [expanded, setExpanded] = useState(false);
const [dialogCompanyId, setDialogCompanyId] = useState<string | null>(null);
const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -209,6 +253,20 @@ export function NewIssueDialog() {
queryFn: () => projectsApi.list(effectiveCompanyId!),
enabled: !!effectiveCompanyId && newIssueOpen,
});
const { data: reusableExecutionWorkspaces } = useQuery({
queryKey: queryKeys.executionWorkspaces.list(effectiveCompanyId!, {
projectId,
projectWorkspaceId: projectWorkspaceId || undefined,
reuseEligible: true,
}),
queryFn: () =>
executionWorkspacesApi.list(effectiveCompanyId!, {
projectId,
projectWorkspaceId: projectWorkspaceId || undefined,
reuseEligible: true,
}),
enabled: Boolean(effectiveCompanyId) && newIssueOpen && showExperimentalWorkspaceUi && Boolean(projectId),
});
const { data: session } = useQuery({
queryKey: queryKeys.auth.session,
queryFn: () => authApi.getSession(),
@@ -297,10 +355,12 @@ export function NewIssueDialog() {
priority,
assigneeId,
projectId,
projectWorkspaceId,
assigneeModelOverride,
assigneeThinkingEffort,
assigneeChrome,
useIsolatedExecutionWorkspace,
executionWorkspaceMode,
selectedExecutionWorkspaceId,
});
}, [
title,
@@ -309,10 +369,12 @@ export function NewIssueDialog() {
priority,
assigneeId,
projectId,
projectWorkspaceId,
assigneeModelOverride,
assigneeThinkingEffort,
assigneeChrome,
useIsolatedExecutionWorkspace,
executionWorkspaceMode,
selectedExecutionWorkspaceId,
newIssueOpen,
scheduleSave,
]);
@@ -329,34 +391,52 @@ export function NewIssueDialog() {
setDescription(newIssueDefaults.description ?? "");
setStatus(newIssueDefaults.status ?? "todo");
setPriority(newIssueDefaults.priority ?? "");
setProjectId(newIssueDefaults.projectId ?? "");
const defaultProjectId = newIssueDefaults.projectId ?? "";
const defaultProject = orderedProjects.find((project) => project.id === defaultProjectId);
setProjectId(defaultProjectId);
setProjectWorkspaceId(defaultProjectWorkspaceIdForProject(defaultProject));
setAssigneeId(newIssueDefaults.assigneeAgentId ?? "");
setAssigneeModelOverride("");
setAssigneeThinkingEffort("");
setAssigneeChrome(false);
setUseIsolatedExecutionWorkspace(false);
setExecutionWorkspaceMode(defaultExecutionWorkspaceModeForProject(defaultProject));
setSelectedExecutionWorkspaceId("");
executionWorkspaceDefaultProjectId.current = defaultProjectId || null;
} else if (draft && draft.title.trim()) {
const restoredProjectId = newIssueDefaults.projectId ?? draft.projectId;
const restoredProject = orderedProjects.find((project) => project.id === restoredProjectId);
setTitle(draft.title);
setDescription(draft.description);
setStatus(draft.status || "todo");
setPriority(draft.priority);
setAssigneeId(newIssueDefaults.assigneeAgentId ?? draft.assigneeId);
setProjectId(newIssueDefaults.projectId ?? draft.projectId);
setProjectId(restoredProjectId);
setProjectWorkspaceId(draft.projectWorkspaceId ?? defaultProjectWorkspaceIdForProject(restoredProject));
setAssigneeModelOverride(draft.assigneeModelOverride ?? "");
setAssigneeThinkingEffort(draft.assigneeThinkingEffort ?? "");
setAssigneeChrome(draft.assigneeChrome ?? false);
setUseIsolatedExecutionWorkspace(draft.useIsolatedExecutionWorkspace ?? false);
setExecutionWorkspaceMode(
draft.executionWorkspaceMode
?? (draft.useIsolatedExecutionWorkspace ? "isolated_workspace" : defaultExecutionWorkspaceModeForProject(restoredProject)),
);
setSelectedExecutionWorkspaceId(draft.selectedExecutionWorkspaceId ?? "");
executionWorkspaceDefaultProjectId.current = restoredProjectId || null;
} else {
const defaultProjectId = newIssueDefaults.projectId ?? "";
const defaultProject = orderedProjects.find((project) => project.id === defaultProjectId);
setStatus(newIssueDefaults.status ?? "todo");
setPriority(newIssueDefaults.priority ?? "");
setProjectId(newIssueDefaults.projectId ?? "");
setProjectId(defaultProjectId);
setProjectWorkspaceId(defaultProjectWorkspaceIdForProject(defaultProject));
setAssigneeId(newIssueDefaults.assigneeAgentId ?? "");
setAssigneeModelOverride("");
setAssigneeThinkingEffort("");
setAssigneeChrome(false);
setUseIsolatedExecutionWorkspace(false);
setExecutionWorkspaceMode(defaultExecutionWorkspaceModeForProject(defaultProject));
setSelectedExecutionWorkspaceId("");
executionWorkspaceDefaultProjectId.current = defaultProjectId || null;
}
}, [newIssueOpen, newIssueDefaults]);
}, [newIssueOpen, newIssueDefaults, orderedProjects]);
useEffect(() => {
if (!supportsAssigneeOverrides) {
@@ -392,11 +472,13 @@ export function NewIssueDialog() {
setPriority("");
setAssigneeId("");
setProjectId("");
setProjectWorkspaceId("");
setAssigneeOptionsOpen(false);
setAssigneeModelOverride("");
setAssigneeThinkingEffort("");
setAssigneeChrome(false);
setUseIsolatedExecutionWorkspace(false);
setExecutionWorkspaceMode("shared_workspace");
setSelectedExecutionWorkspaceId("");
setExpanded(false);
setDialogCompanyId(null);
setCompanyOpen(false);
@@ -408,10 +490,12 @@ export function NewIssueDialog() {
setDialogCompanyId(companyId);
setAssigneeId("");
setProjectId("");
setProjectWorkspaceId("");
setAssigneeModelOverride("");
setAssigneeThinkingEffort("");
setAssigneeChrome(false);
setUseIsolatedExecutionWorkspace(false);
setExecutionWorkspaceMode("shared_workspace");
setSelectedExecutionWorkspaceId("");
}
function discardDraft() {
@@ -429,13 +513,18 @@ export function NewIssueDialog() {
chrome: assigneeChrome,
});
const selectedProject = orderedProjects.find((project) => project.id === projectId);
const executionWorkspacePolicy = SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI
const executionWorkspacePolicy = showExperimentalWorkspaceUi
? selectedProject?.executionWorkspacePolicy
: null;
const selectedReusableExecutionWorkspace = (reusableExecutionWorkspaces ?? []).find(
(workspace) => workspace.id === selectedExecutionWorkspaceId,
);
const requestedExecutionWorkspaceMode =
executionWorkspaceMode === "reuse_existing"
? issueExecutionWorkspaceModeForExistingWorkspace(selectedReusableExecutionWorkspace?.mode)
: executionWorkspaceMode;
const executionWorkspaceSettings = executionWorkspacePolicy?.enabled
? {
mode: useIsolatedExecutionWorkspace ? "isolated" : "project_primary",
}
? { mode: requestedExecutionWorkspaceMode }
: null;
createIssue.mutate({
companyId: effectiveCompanyId,
@@ -445,7 +534,12 @@ export function NewIssueDialog() {
priority: priority || "medium",
...(assigneeId ? { assigneeAgentId: assigneeId } : {}),
...(projectId ? { projectId } : {}),
...(projectWorkspaceId ? { projectWorkspaceId } : {}),
...(assigneeAdapterOverrides ? { assigneeAdapterOverrides } : {}),
...(executionWorkspacePolicy?.enabled ? { executionWorkspacePreference: executionWorkspaceMode } : {}),
...(executionWorkspaceMode === "reuse_existing" && selectedExecutionWorkspaceId
? { executionWorkspaceId: selectedExecutionWorkspaceId }
: {}),
...(executionWorkspaceSettings ? { executionWorkspaceSettings } : {}),
});
}
@@ -477,10 +571,14 @@ export function NewIssueDialog() {
const currentPriority = priorities.find((p) => p.value === priority);
const currentAssignee = (agents ?? []).find((a) => a.id === assigneeId);
const currentProject = orderedProjects.find((project) => project.id === projectId);
const currentProjectExecutionWorkspacePolicy = SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI
const currentProjectWorkspaces = currentProject?.workspaces ?? [];
const currentProjectExecutionWorkspacePolicy = showExperimentalWorkspaceUi
? currentProject?.executionWorkspacePolicy ?? null
: null;
const currentProjectSupportsExecutionWorkspace = Boolean(currentProjectExecutionWorkspacePolicy?.enabled);
const selectedReusableExecutionWorkspace = (reusableExecutionWorkspaces ?? []).find(
(workspace) => workspace.id === selectedExecutionWorkspaceId,
);
const assigneeOptionsTitle =
assigneeAdapterType === "claude_local"
? "Claude options"
@@ -526,9 +624,10 @@ export function NewIssueDialog() {
const handleProjectChange = useCallback((nextProjectId: string) => {
setProjectId(nextProjectId);
const nextProject = orderedProjects.find((project) => project.id === nextProjectId);
const policy = SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI ? nextProject?.executionWorkspacePolicy : null;
executionWorkspaceDefaultProjectId.current = nextProjectId || null;
setUseIsolatedExecutionWorkspace(Boolean(policy?.enabled && policy.defaultMode === "isolated"));
setProjectWorkspaceId(defaultProjectWorkspaceIdForProject(nextProject));
setExecutionWorkspaceMode(defaultExecutionWorkspaceModeForProject(nextProject));
setSelectedExecutionWorkspaceId("");
}, [orderedProjects]);
useEffect(() => {
@@ -538,14 +637,10 @@ export function NewIssueDialog() {
const project = orderedProjects.find((entry) => entry.id === projectId);
if (!project) return;
executionWorkspaceDefaultProjectId.current = projectId;
setUseIsolatedExecutionWorkspace(
Boolean(
SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI &&
project.executionWorkspacePolicy?.enabled &&
project.executionWorkspacePolicy.defaultMode === "isolated",
),
);
}, [newIssueOpen, orderedProjects, projectId]);
setProjectWorkspaceId(defaultProjectWorkspaceIdForProject(project));
setExecutionWorkspaceMode(defaultExecutionWorkspaceModeForProject(project));
setSelectedExecutionWorkspaceId("");
}, [newIssueOpen, orderedProjects, projectId, showExperimentalWorkspaceUi]);
const modelOverrideOptions = useMemo<InlineEntityOption[]>(
() => {
return [...(assigneeAdapterModels ?? [])]
@@ -800,31 +895,72 @@ export function NewIssueDialog() {
</div>
</div>
{currentProjectSupportsExecutionWorkspace && (
<div className="px-4 pb-2 shrink-0">
<div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
<div className="space-y-0.5">
<div className="text-xs font-medium">Use isolated issue checkout</div>
{showExperimentalWorkspaceUi && currentProject && (
<div className="px-4 pb-2 shrink-0 space-y-2">
{currentProjectWorkspaces.length > 0 && (
<div className="rounded-md border border-border px-3 py-2 space-y-1.5">
<div className="text-xs font-medium">Codebase</div>
<div className="text-[11px] text-muted-foreground">
Create an issue-specific execution workspace instead of using the project's primary checkout.
Choose which project workspace this issue should use.
</div>
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={projectWorkspaceId}
onChange={(e) => setProjectWorkspaceId(e.target.value)}
>
{currentProjectWorkspaces.map((workspace) => (
<option key={workspace.id} value={workspace.id}>
{workspace.name}
{workspace.isPrimary ? " (default)" : ""}
</option>
))}
</select>
</div>
<button
className={cn(
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
useIsolatedExecutionWorkspace ? "bg-green-600" : "bg-muted",
)}
{currentProjectSupportsExecutionWorkspace && (
<div className="rounded-md border border-border px-3 py-2 space-y-1.5">
<div className="text-xs font-medium">Execution workspace</div>
<div className="text-[11px] text-muted-foreground">
Control whether this issue runs in the shared workspace, a new isolated workspace, or an existing one.
</div>
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={executionWorkspaceMode}
onChange={(e) => {
setExecutionWorkspaceMode(e.target.value);
if (e.target.value !== "reuse_existing") {
setSelectedExecutionWorkspaceId("");
}
}}
>
{EXECUTION_WORKSPACE_MODES.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
{executionWorkspaceMode === "reuse_existing" && (
<select
className="w-full rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={selectedExecutionWorkspaceId}
onChange={(e) => setSelectedExecutionWorkspaceId(e.target.value)}
>
<option value="">Choose an existing workspace</option>
{(reusableExecutionWorkspaces ?? []).map((workspace) => (
<option key={workspace.id} value={workspace.id}>
{workspace.name} · {workspace.status} · {workspace.branchName ?? workspace.cwd ?? workspace.id.slice(0, 8)}
</option>
))}
</select>
)}
onClick={() => setUseIsolatedExecutionWorkspace((value) => !value)}
type="button"
>
<span
className={cn(
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
useIsolatedExecutionWorkspace ? "translate-x-4.5" : "translate-x-0.5",
)}
/>
</button>
</div>
{executionWorkspaceMode === "reuse_existing" && selectedReusableExecutionWorkspace && (
<div className="text-[11px] text-muted-foreground">
Reusing {selectedReusableExecutionWorkspace.name} from {selectedReusableExecutionWorkspace.branchName ?? selectedReusableExecutionWorkspace.cwd ?? "existing execution workspace"}.
</div>
)}
</div>
)}
</div>
)}

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

@@ -17,6 +17,7 @@ import { AlertCircle, Check, ExternalLink, Github, Loader2, Plus, Trash2, X } fr
import { ChoosePathButton } from "./PathInstructionsModal";
import { DraftInput } from "./agent-config-primitives";
import { InlineEditor } from "./InlineEditor";
import { useExperimentalWorkspacesEnabled } from "../lib/experimentalSettings";
const PROJECT_STATUSES = [
{ value: "backlog", label: "Backlog" },
@@ -26,9 +27,6 @@ const PROJECT_STATUSES = [
{ value: "cancelled", label: "Cancelled" },
];
// TODO(issue-worktree-support): re-enable this UI once the workflow is ready to ship.
const SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI = false;
interface ProjectPropertiesProps {
project: Project;
onUpdate?: (data: Record<string, unknown>) => void;
@@ -154,6 +152,7 @@ function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (
export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSaveState }: ProjectPropertiesProps) {
const { selectedCompanyId } = useCompany();
const { enabled: showExperimentalWorkspaceUi } = useExperimentalWorkspacesEnabled();
const queryClient = useQueryClient();
const [goalOpen, setGoalOpen] = useState(false);
const [executionWorkspaceAdvancedOpen, setExecutionWorkspaceAdvancedOpen] = useState(false);
@@ -195,7 +194,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
const executionWorkspacePolicy = project.executionWorkspacePolicy ?? null;
const executionWorkspacesEnabled = executionWorkspacePolicy?.enabled === true;
const executionWorkspaceDefaultMode =
executionWorkspacePolicy?.defaultMode === "isolated" ? "isolated" : "project_primary";
executionWorkspacePolicy?.defaultMode === "isolated_workspace" ? "isolated_workspace" : "shared_workspace";
const executionWorkspaceStrategy = executionWorkspacePolicy?.workspaceStrategy ?? {
type: "git_worktree",
baseRef: "",
@@ -710,7 +709,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
)}
</div>
{SHOW_EXPERIMENTAL_ISSUE_WORKTREE_UI && (
{showExperimentalWorkspaceUi && (
<>
<Separator className="my-4" />
@@ -785,21 +784,21 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
<button
className={cn(
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
executionWorkspaceDefaultMode === "isolated" ? "bg-green-600" : "bg-muted",
executionWorkspaceDefaultMode === "isolated_workspace" ? "bg-green-600" : "bg-muted",
)}
type="button"
onClick={() =>
commitField(
"execution_workspace_default_mode",
updateExecutionWorkspacePolicy({
defaultMode: executionWorkspaceDefaultMode === "isolated" ? "project_primary" : "isolated",
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" ? "translate-x-4.5" : "translate-x-0.5",
executionWorkspaceDefaultMode === "isolated_workspace" ? "translate-x-4.5" : "translate-x-0.5",
)}
/>
</button>

39
ui/src/lib/experimentalSettings.ts Normal file
View File

@@ -0,0 +1,39 @@
import { useEffect, useState } from "react";
const WORKSPACES_KEY = "paperclip:experimental:workspaces";
export function loadExperimentalWorkspacesEnabled(): boolean {
if (typeof window === "undefined") return false;
return window.localStorage.getItem(WORKSPACES_KEY) === "true";
}
export function saveExperimentalWorkspacesEnabled(enabled: boolean) {
if (typeof window === "undefined") return;
window.localStorage.setItem(WORKSPACES_KEY, enabled ? "true" : "false");
window.dispatchEvent(new CustomEvent("paperclip:experimental:workspaces", { detail: enabled }));
}
export function useExperimentalWorkspacesEnabled() {
const [enabled, setEnabled] = useState(loadExperimentalWorkspacesEnabled);
useEffect(() => {
const handleStorage = (event: StorageEvent) => {
if (event.key && event.key !== WORKSPACES_KEY) return;
setEnabled(loadExperimentalWorkspacesEnabled());
};
const handleCustom = () => setEnabled(loadExperimentalWorkspacesEnabled());
window.addEventListener("storage", handleStorage);
window.addEventListener("paperclip:experimental:workspaces", handleCustom as EventListener);
return () => {
window.removeEventListener("storage", handleStorage);
window.removeEventListener("paperclip:experimental:workspaces", handleCustom as EventListener);
};
}, []);
const update = (next: boolean) => {
saveExperimentalWorkspacesEnabled(next);
setEnabled(next);
};
return { enabled, setEnabled: update };
}

3
ui/src/lib/inbox.test.ts
View File

@@ -110,6 +110,7 @@ function makeIssue(id: string, isUnreadForMe: boolean): Issue {
id,
companyId: "company-1",
projectId: null,
projectWorkspaceId: null,
goalId: null,
parentId: null,
title: `Issue ${id}`,
@@ -125,6 +126,8 @@ function makeIssue(id: string, isUnreadForMe: boolean): Issue {
requestDepth: 0,
billingCode: null,
assigneeAdapterOverrides: null,
executionWorkspaceId: null,
executionWorkspacePreference: null,
executionWorkspaceSettings: null,
checkoutRunId: null,
executionRunId: null,

6
ui/src/lib/queryKeys.ts
View File

@@ -32,6 +32,12 @@ export const queryKeys = {
approvals: (issueId: string) => ["issues", "approvals", issueId] as const,
liveRuns: (issueId: string) => ["issues", "live-runs", issueId] as const,
activeRun: (issueId: string) => ["issues", "active-run", issueId] as const,
workProducts: (issueId: string) => ["issues", "work-products", issueId] as const,
},
executionWorkspaces: {
list: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
["execution-workspaces", companyId, filters ?? {}] as const,
detail: (id: string) => ["execution-workspaces", "detail", id] as const,
},
projects: {
list: (companyId: string) => ["projects", companyId] as const,

70
ui/src/pages/ExecutionWorkspaceDetail.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { Link, useParams } from "@/lib/router";
import { useQuery } from "@tanstack/react-query";
import { ExternalLink } from "lucide-react";
import { executionWorkspacesApi } from "../api/execution-workspaces";
import { queryKeys } from "../lib/queryKeys";
function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
return (
<div className="flex items-start gap-3 py-1.5">
<div className="w-28 shrink-0 text-xs text-muted-foreground">{label}</div>
<div className="min-w-0 flex-1 text-sm">{children}</div>
</div>
);
}
export function ExecutionWorkspaceDetail() {
const { workspaceId } = useParams<{ workspaceId: string }>();
const { data: workspace, isLoading, error } = useQuery({
queryKey: queryKeys.executionWorkspaces.detail(workspaceId!),
queryFn: () => executionWorkspacesApi.get(workspaceId!),
enabled: Boolean(workspaceId),
});
if (isLoading) return <p className="text-sm text-muted-foreground">Loading...</p>;
if (error) return <p className="text-sm text-destructive">{error instanceof Error ? error.message : "Failed to load workspace"}</p>;
if (!workspace) return null;
return (
<div className="max-w-2xl space-y-4">
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Execution workspace</div>
<h1 className="text-2xl font-semibold">{workspace.name}</h1>
<div className="text-sm text-muted-foreground">
{workspace.status} · {workspace.mode} · {workspace.providerType}
</div>
</div>
<div className="rounded-lg border border-border p-4">
<DetailRow label="Project">
{workspace.projectId ? <Link to={`/projects/${workspace.projectId}`} className="hover:underline">{workspace.projectId}</Link> : "None"}
</DetailRow>
<DetailRow label="Source issue">
{workspace.sourceIssueId ? <Link to={`/issues/${workspace.sourceIssueId}`} className="hover:underline">{workspace.sourceIssueId}</Link> : "None"}
</DetailRow>
<DetailRow label="Branch">{workspace.branchName ?? "None"}</DetailRow>
<DetailRow label="Base ref">{workspace.baseRef ?? "None"}</DetailRow>
<DetailRow label="Working dir">
<span className="break-all font-mono text-xs">{workspace.cwd ?? "None"}</span>
</DetailRow>
<DetailRow label="Provider ref">
<span className="break-all font-mono text-xs">{workspace.providerRef ?? "None"}</span>
</DetailRow>
<DetailRow label="Repo URL">
{workspace.repoUrl ? (
<a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
{workspace.repoUrl}
<ExternalLink className="h-3 w-3" />
</a>
) : "None"}
</DetailRow>
<DetailRow label="Opened">{new Date(workspace.openedAt).toLocaleString()}</DetailRow>
<DetailRow label="Last used">{new Date(workspace.lastUsedAt).toLocaleString()}</DetailRow>
<DetailRow label="Cleanup">
{workspace.cleanupEligibleAt ? `${new Date(workspace.cleanupEligibleAt).toLocaleString()}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}` : "Not scheduled"}
</DetailRow>
</div>
</div>
);
}

30
ui/src/pages/InstanceSettings.tsx
View File

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { queryKeys } from "../lib/queryKeys";
import { formatDateTime, relativeTime } from "../lib/utils";
import { useExperimentalWorkspacesEnabled } from "../lib/experimentalSettings";
function asRecord(value: unknown): Record<string, unknown> | null {
if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
@@ -30,6 +31,7 @@ export function InstanceSettings() {
const { setBreadcrumbs } = useBreadcrumbs();
const queryClient = useQueryClient();
const [actionError, setActionError] = useState<string | null>(null);
const { enabled: workspacesEnabled, setEnabled: setWorkspacesEnabled } = useExperimentalWorkspacesEnabled();
useEffect(() => {
setBreadcrumbs([
@@ -110,6 +112,34 @@ export function InstanceSettings() {
return (
<div className="max-w-5xl space-y-6">
<div className="space-y-3 rounded-lg border border-border bg-card p-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<h2 className="text-sm font-semibold">Experimental</h2>
</div>
<p className="text-sm text-muted-foreground">
UI-only feature flags for in-progress product surfaces.
</p>
</div>
<div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
<div className="space-y-0.5">
<div className="text-sm font-medium">Workspaces</div>
<div className="text-xs text-muted-foreground">
Show workspace, execution workspace, and work product controls in project and issue UI.
</div>
</div>
<Button
type="button"
variant={workspacesEnabled ? "default" : "outline"}
size="sm"
onClick={() => setWorkspacesEnabled(!workspacesEnabled)}
>
{workspacesEnabled ? "Enabled" : "Disabled"}
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Settings className="h-5 w-5 text-muted-foreground" />

276
ui/src/pages/IssueDetail.tsx
View File

@@ -11,6 +11,7 @@ import { useCompany } from "../context/CompanyContext";
import { usePanel } from "../context/PanelContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { useExperimentalWorkspacesEnabled } from "../lib/experimentalSettings";
import { readIssueDetailBreadcrumb } from "../lib/issueDetailBreadcrumb";
import { useProjectOrder } from "../hooks/useProjectOrder";
import { relativeTime, cn, formatTokens } from "../lib/utils";
@@ -36,15 +37,21 @@ import {
ChevronDown,
ChevronRight,
EyeOff,
ExternalLink,
FileText,
GitBranch,
GitPullRequest,
Hexagon,
ListTree,
MessageSquare,
MoreHorizontal,
Package,
Paperclip,
Rocket,
SlidersHorizontal,
Trash2,
} from "lucide-react";
import type { ActivityEvent } from "@paperclipai/shared";
import type { ActivityEvent, IssueWorkProduct } from "@paperclipai/shared";
import type { Agent, IssueAttachment } from "@paperclipai/shared";
type CommentReassignment = {
@@ -133,6 +140,24 @@ function formatAction(action: string, details?: Record<string, unknown> | null):
return ACTION_LABELS[action] ?? action.replace(/[._]/g, " ");
}
function workProductIcon(product: IssueWorkProduct) {
switch (product.type) {
case "pull_request":
return <GitPullRequest className="h-3.5 w-3.5" />;
case "branch":
case "commit":
return <GitBranch className="h-3.5 w-3.5" />;
case "artifact":
return <Package className="h-3.5 w-3.5" />;
case "document":
return <FileText className="h-3.5 w-3.5" />;
case "runtime_service":
return <Rocket className="h-3.5 w-3.5" />;
default:
return <ExternalLink className="h-3.5 w-3.5" />;
}
}
function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<string, Agent> }) {
const id = evt.actorId;
if (evt.actorType === "agent") {
@@ -147,6 +172,7 @@ function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<st
export function IssueDetail() {
const { issueId } = useParams<{ issueId: string }>();
const { selectedCompanyId } = useCompany();
const { enabled: experimentalWorkspacesEnabled } = useExperimentalWorkspacesEnabled();
const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
const { setBreadcrumbs } = useBreadcrumbs();
const queryClient = useQueryClient();
@@ -160,6 +186,13 @@ export function IssueDetail() {
cost: false,
});
const [attachmentError, setAttachmentError] = useState<string | null>(null);
const [newWorkProductType, setNewWorkProductType] = useState<IssueWorkProduct["type"]>("preview_url");
const [newWorkProductProvider, setNewWorkProductProvider] = useState("paperclip");
const [newWorkProductTitle, setNewWorkProductTitle] = useState("");
const [newWorkProductUrl, setNewWorkProductUrl] = useState("");
const [newWorkProductStatus, setNewWorkProductStatus] = useState<IssueWorkProduct["status"]>("active");
const [newWorkProductReviewState, setNewWorkProductReviewState] = useState<IssueWorkProduct["reviewState"]>("none");
const [newWorkProductSummary, setNewWorkProductSummary] = useState("");
const fileInputRef = useRef<HTMLInputElement | null>(null);
const lastMarkedReadIssueIdRef = useRef<string | null>(null);
@@ -387,6 +420,7 @@ export function IssueDetail() {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.workProducts(issueId!) });
if (selectedCompanyId) {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
@@ -471,6 +505,42 @@ export function IssueDetail() {
},
});
const createWorkProduct = useMutation({
mutationFn: () =>
issuesApi.createWorkProduct(issueId!, {
type: newWorkProductType,
provider: newWorkProductProvider,
title: newWorkProductTitle.trim(),
url: newWorkProductUrl.trim() || null,
status: newWorkProductStatus,
reviewState: newWorkProductReviewState,
summary: newWorkProductSummary.trim() || null,
projectId: issue?.projectId ?? null,
executionWorkspaceId: issue?.currentExecutionWorkspace?.id ?? issue?.executionWorkspaceId ?? null,
}),
onSuccess: () => {
setNewWorkProductTitle("");
setNewWorkProductUrl("");
setNewWorkProductSummary("");
setNewWorkProductType("preview_url");
setNewWorkProductProvider("paperclip");
setNewWorkProductStatus("active");
setNewWorkProductReviewState("none");
invalidateIssue();
},
});
const updateWorkProduct = useMutation({
mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
issuesApi.updateWorkProduct(id, data),
onSuccess: () => invalidateIssue(),
});
const deleteWorkProduct = useMutation({
mutationFn: (id: string) => issuesApi.deleteWorkProduct(id),
onSuccess: () => invalidateIssue(),
});
useEffect(() => {
const titleLabel = issue?.title ?? issueId ?? "Issue";
setBreadcrumbs([
@@ -508,6 +578,11 @@ export function IssueDetail() {
// Ancestors are returned oldest-first from the server (root at end, immediate parent at start)
const ancestors = issue.ancestors ?? [];
const workProducts = issue.workProducts ?? [];
const showOutputsTab =
experimentalWorkspacesEnabled ||
Boolean(issue.currentExecutionWorkspace) ||
workProducts.length > 0;
const handleFilePicked = async (evt: ChangeEvent<HTMLInputElement>) => {
const file = evt.target.files?.[0];
@@ -759,6 +834,12 @@ export function IssueDetail() {
<MessageSquare className="h-3.5 w-3.5" />
Comments
</TabsTrigger>
{showOutputsTab && (
<TabsTrigger value="outputs" className="gap-1.5">
<Rocket className="h-3.5 w-3.5" />
Outputs
</TabsTrigger>
)}
<TabsTrigger value="subissues" className="gap-1.5">
<ListTree className="h-3.5 w-3.5" />
Sub-issues
@@ -798,6 +879,199 @@ export function IssueDetail() {
/>
</TabsContent>
{showOutputsTab && (
<TabsContent value="outputs" className="space-y-4">
{issue.currentExecutionWorkspace && (
<div className="rounded-lg border border-border p-3 space-y-1.5">
<div className="flex items-center justify-between gap-2">
<div>
<div className="text-sm font-medium">Execution workspace</div>
<div className="text-xs text-muted-foreground">
{issue.currentExecutionWorkspace.status} · {issue.currentExecutionWorkspace.mode}
</div>
</div>
<Link
to={`/execution-workspaces/${issue.currentExecutionWorkspace.id}`}
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
>
Open
<ExternalLink className="h-3 w-3" />
</Link>
</div>
<div className="text-xs text-muted-foreground">
{issue.currentExecutionWorkspace.branchName ?? issue.currentExecutionWorkspace.cwd ?? "No workspace path recorded."}
</div>
</div>
)}
<div className="rounded-lg border border-border p-3 space-y-3">
<div className="text-sm font-medium">Work product</div>
<div className="grid gap-2 sm:grid-cols-2">
<select
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={newWorkProductType}
onChange={(e) => setNewWorkProductType(e.target.value as IssueWorkProduct["type"])}
>
<option value="preview_url">Preview URL</option>
<option value="runtime_service">Runtime service</option>
<option value="pull_request">Pull request</option>
<option value="branch">Branch</option>
<option value="commit">Commit</option>
<option value="artifact">Artifact</option>
<option value="document">Document</option>
</select>
<input
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={newWorkProductProvider}
onChange={(e) => setNewWorkProductProvider(e.target.value)}
placeholder="Provider"
/>
<input
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none sm:col-span-2"
value={newWorkProductTitle}
onChange={(e) => setNewWorkProductTitle(e.target.value)}
placeholder="Title"
/>
<input
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none sm:col-span-2"
value={newWorkProductUrl}
onChange={(e) => setNewWorkProductUrl(e.target.value)}
placeholder="URL"
/>
<select
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={newWorkProductStatus}
onChange={(e) => setNewWorkProductStatus(e.target.value as IssueWorkProduct["status"])}
>
<option value="draft">Draft</option>
<option value="active">Active</option>
<option value="ready_for_review">Ready for review</option>
<option value="approved">Approved</option>
<option value="changes_requested">Changes requested</option>
<option value="merged">Merged</option>
<option value="closed">Closed</option>
<option value="failed">Failed</option>
<option value="archived">Archived</option>
</select>
<select
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={newWorkProductReviewState}
onChange={(e) => setNewWorkProductReviewState(e.target.value as IssueWorkProduct["reviewState"])}
>
<option value="none">No review state</option>
<option value="needs_board_review">Needs board review</option>
<option value="approved">Approved</option>
<option value="changes_requested">Changes requested</option>
</select>
<textarea
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none sm:col-span-2 min-h-20"
value={newWorkProductSummary}
onChange={(e) => setNewWorkProductSummary(e.target.value)}
placeholder="Summary"
/>
</div>
<div className="flex justify-end">
<Button
size="sm"
disabled={!newWorkProductTitle.trim() || createWorkProduct.isPending}
onClick={() => createWorkProduct.mutate()}
>
{createWorkProduct.isPending ? "Adding..." : "Add output"}
</Button>
</div>
</div>
{workProducts.length === 0 ? (
<p className="text-xs text-muted-foreground">No work product yet.</p>
) : (
<div className="space-y-2">
{workProducts.map((product) => (
<div key={product.id} className="rounded-lg border border-border p-3 space-y-2">
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
<div className="flex items-center gap-2 text-sm font-medium">
{workProductIcon(product)}
<span className="truncate">{product.title}</span>
{product.isPrimary && (
<span className="rounded-full border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground">
Primary
</span>
)}
</div>
<div className="text-xs text-muted-foreground">
{product.type.replace(/_/g, " ")} · {product.provider}
</div>
</div>
<button
type="button"
className="text-muted-foreground hover:text-destructive"
onClick={() => {
if (!window.confirm(`Delete "${product.title}"?`)) return;
deleteWorkProduct.mutate(product.id);
}}
disabled={deleteWorkProduct.isPending}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
{product.url && (
<a
href={product.url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline"
>
{product.url}
<ExternalLink className="h-3 w-3" />
</a>
)}
{product.summary && (
<div className="text-xs text-muted-foreground">{product.summary}</div>
)}
<div className="grid gap-2 sm:grid-cols-3">
<select
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={product.status}
onChange={(e) =>
updateWorkProduct.mutate({ id: product.id, data: { status: e.target.value } })}
>
<option value="draft">Draft</option>
<option value="active">Active</option>
<option value="ready_for_review">Ready for review</option>
<option value="approved">Approved</option>
<option value="changes_requested">Changes requested</option>
<option value="merged">Merged</option>
<option value="closed">Closed</option>
<option value="failed">Failed</option>
<option value="archived">Archived</option>
</select>
<select
className="rounded border border-border bg-transparent px-2 py-1.5 text-xs outline-none"
value={product.reviewState}
onChange={(e) =>
updateWorkProduct.mutate({ id: product.id, data: { reviewState: e.target.value } })}
>
<option value="none">No review state</option>
<option value="needs_board_review">Needs board review</option>
<option value="approved">Approved</option>
<option value="changes_requested">Changes requested</option>
</select>
<Button
variant={product.isPrimary ? "secondary" : "outline"}
size="sm"
onClick={() => updateWorkProduct.mutate({ id: product.id, data: { isPrimary: true } })}
disabled={product.isPrimary || updateWorkProduct.isPending}
>
{product.isPrimary ? "Primary" : "Make primary"}
</Button>
</div>
</div>
))}
</div>
)}
</TabsContent>
)}
<TabsContent value="subissues">
{childIssues.length === 0 ? (
<p className="text-xs text-muted-foreground">No sub-issues.</p>