From 0fd75aa579a56babc8d5d310201058d0518e30bd Mon Sep 17 00:00:00 2001 From: dotta Date: Thu, 26 Mar 2026 07:22:24 -0500 Subject: [PATCH 1/5] fix: render mention autocomplete via portal to prevent overflow clipping The mention suggestion dropdown was getting clipped when typing at the end of a long description inside modals/dialogs because parent containers had overflow-y-auto. Render it via createPortal to document.body with fixed positioning and z-index 9999 so it always appears above all UI. Co-Authored-By: Paperclip --- ui/src/components/MarkdownEditor.tsx | 88 +++++++++++++++------------- 1 file changed, 48 insertions(+), 40 deletions(-) diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx index 342a74de..68469761 100644 --- a/ui/src/components/MarkdownEditor.tsx +++ b/ui/src/components/MarkdownEditor.tsx @@ -8,6 +8,7 @@ import { useState, type DragEvent, } from "react"; +import { createPortal } from "react-dom"; import { CodeMirrorEditor, MDXEditor, @@ -82,6 +83,9 @@ interface MentionState { query: string; top: number; left: number; + /** Viewport-relative coords for portal positioning */ + viewportTop: number; + viewportLeft: number; textNode: Text; atPos: number; endPos: number; @@ -155,6 +159,8 @@ function detectMention(container: HTMLElement): MentionState | null { query, top: rect.bottom - containerRect.top, left: rect.left - containerRect.left, + viewportTop: rect.bottom, + viewportLeft: rect.left, textNode: textNode as Text, atPos, endPos: offset, @@ -554,46 +560,48 @@ export const MarkdownEditor = forwardRef plugins={plugins} /> - {/* Mention dropdown */} - {mentionActive && filteredMentions.length > 0 && ( -
- {filteredMentions.map((option, i) => ( - - ))} -
- )} + {/* Mention dropdown — rendered via portal so it isn't clipped by overflow containers */} + {mentionActive && filteredMentions.length > 0 && + createPortal( +
+ {filteredMentions.map((option, i) => ( + + ))} +
, + document.body, + )} {isDragOver && canDropImage && (
Date: Thu, 26 Mar 2026 07:41:58 -0500 Subject: [PATCH 2/5] fix: enable @-mention autocomplete in new project description editor The MarkdownEditor in NewProjectDialog was not receiving mention options, so typing @ in the description field did nothing. Added agents query and mentionOptions prop to match how NewIssueDialog handles mentions. Co-Authored-By: Paperclip --- ui/src/components/NewProjectDialog.tsx | 29 ++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/ui/src/components/NewProjectDialog.tsx b/ui/src/components/NewProjectDialog.tsx index 4561ac93..afdb057a 100644 --- a/ui/src/components/NewProjectDialog.tsx +++ b/ui/src/components/NewProjectDialog.tsx @@ -1,8 +1,9 @@ -import { useRef, useState } from "react"; +import { useMemo, useRef, useState } from "react"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { useDialog } from "../context/DialogContext"; import { useCompany } from "../context/CompanyContext"; import { projectsApi } from "../api/projects"; +import { agentsApi } from "../api/agents"; import { goalsApi } from "../api/goals"; import { assetsApi } from "../api/assets"; import { queryKeys } from "../lib/queryKeys"; @@ -32,7 +33,7 @@ import { } from "@/components/ui/tooltip"; import { PROJECT_COLORS } from "@paperclipai/shared"; import { cn } from "../lib/utils"; -import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor"; +import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor"; import { StatusBadge } from "./StatusBadge"; import { ChoosePathButton } from "./PathInstructionsModal"; @@ -68,6 +69,29 @@ export function NewProjectDialog() { enabled: !!selectedCompanyId && newProjectOpen, }); + const { data: agents } = useQuery({ + queryKey: queryKeys.agents.list(selectedCompanyId!), + queryFn: () => agentsApi.list(selectedCompanyId!), + enabled: !!selectedCompanyId && newProjectOpen, + }); + + const mentionOptions = useMemo(() => { + const options: MentionOption[] = []; + const activeAgents = [...(agents ?? [])] + .filter((agent) => agent.status !== "terminated") + .sort((a, b) => a.name.localeCompare(b.name)); + for (const agent of activeAgents) { + options.push({ + id: `agent:${agent.id}`, + name: agent.name, + kind: "agent", + agentId: agent.id, + agentIcon: agent.icon, + }); + } + return options; + }, [agents]); + const createProject = useMutation({ mutationFn: (data: Record) => projectsApi.create(selectedCompanyId!, data), @@ -250,6 +274,7 @@ export function NewProjectDialog() { onChange={setDescription} placeholder="Add description..." bordered={false} + mentions={mentionOptions} contentClassName={cn("text-sm text-muted-foreground", expanded ? "min-h-[220px]" : "min-h-[120px]")} imageUploadHandler={async (file) => { const asset = await uploadDescriptionImage.mutateAsync(file); From 5ee4cd98e80a57a291f1844e4b7f8c236f791951 Mon Sep 17 00:00:00 2001 From: dotta Date: Thu, 26 Mar 2026 07:56:36 -0500 Subject: [PATCH 3/5] feat: move workspace info from properties panel to issue main pane Display workspace branch, path, and status in a card on the issue main pane instead of in the properties sidebar. Only shown for non-default (isolated) workspaces. Edit controls are hidden behind an Edit toggle button. Co-Authored-By: Paperclip --- ui/src/components/IssueProperties.tsx | 205 +-------------- ui/src/components/IssueWorkspaceCard.tsx | 312 +++++++++++++++++++++++ ui/src/pages/IssueDetail.tsx | 7 + 3 files changed, 321 insertions(+), 203 deletions(-) create mode 100644 ui/src/components/IssueWorkspaceCard.tsx diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx index 3d12e9e3..ced81b23 100644 --- a/ui/src/components/IssueProperties.tsx +++ b/ui/src/components/IssueProperties.tsx @@ -1,12 +1,10 @@ -import { useCallback, useMemo, useRef, useState } from "react"; +import { useMemo, useState } from "react"; import { pickTextColorForPillBg } from "@/lib/color-contrast"; import { Link } from "@/lib/router"; 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 { instanceSettingsApi } from "../api/instanceSettings"; import { issuesApi } from "../api/issues"; import { projectsApi } from "../api/projects"; import { useCompany } from "../context/CompanyContext"; @@ -21,15 +19,9 @@ import { formatDate, cn, projectUrl } from "../lib/utils"; import { timeAgo } from "../lib/timeAgo"; import { Separator } from "@/components/ui/separator"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; -import { User, Hexagon, ArrowUpRight, Tag, Plus, Trash2, Copy, Check } from "lucide-react"; +import { User, Hexagon, ArrowUpRight, Tag, Plus, Trash2 } from "lucide-react"; import { AgentIcon } from "./AgentIconPicker"; -const EXECUTION_WORKSPACE_OPTIONS = [ - { value: "shared_workspace", label: "Project default" }, - { value: "isolated_workspace", label: "New isolated workspace" }, - { value: "reuse_existing", label: "Reuse existing workspace" }, -] as const; - function defaultProjectWorkspaceIdForProject(project: { workspaces?: Array<{ id: string; isPrimary: boolean }>; executionWorkspacePolicy?: { defaultProjectWorkspaceId?: string | null } | null; @@ -48,23 +40,6 @@ function defaultExecutionWorkspaceModeForProject(project: { executionWorkspacePo 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"; -} - -function shouldPresentExistingWorkspaceSelection(issue: Issue) { - const persistedMode = - issue.currentExecutionWorkspace?.mode - ?? issue.executionWorkspaceSettings?.mode - ?? issue.executionWorkspacePreference; - return Boolean( - issue.executionWorkspaceId && - (persistedMode === "isolated_workspace" || persistedMode === "operator_branch"), - ); -} - interface IssuePropertiesProps { issue: Issue; onUpdate: (data: Record) => void; @@ -142,49 +117,6 @@ function PropertyPicker({ ); } -/** Splits a string at `/` and `-` boundaries, inserting for natural line breaks. */ -function BreakablePath({ text }: { text: string }) { - const parts: React.ReactNode[] = []; - // Split on path separators and hyphens, keeping them in the output - const segments = text.split(/(?<=[\/-])/); - for (let i = 0; i < segments.length; i++) { - if (i > 0) parts.push(); - parts.push(segments[i]); - } - return <>{parts}; -} - -/** Displays a value with a copy-to-clipboard icon and "Copied!" feedback. */ -function CopyableValue({ value, label, mono, className }: { value: string; label?: string; mono?: boolean; className?: string }) { - const [copied, setCopied] = useState(false); - const timerRef = useRef>(undefined); - const handleCopy = useCallback(async () => { - try { - await navigator.clipboard.writeText(value); - setCopied(true); - clearTimeout(timerRef.current); - timerRef.current = setTimeout(() => setCopied(false), 1500); - } catch { /* noop */ } - }, [value]); - - return ( -
- - {label && {label} } - - - -
- ); -} - export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProps) { const { selectedCompanyId } = useCompany(); const queryClient = useQueryClient(); @@ -202,10 +134,6 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp queryKey: queryKeys.auth.session, queryFn: () => authApi.getSession(), }); - const { data: experimentalSettings } = useQuery({ - queryKey: queryKeys.instance.experimentalSettings, - queryFn: () => instanceSettingsApi.getExperimental(), - }); const currentUserId = session?.user?.id ?? session?.session?.userId; const { data: agents } = useQuery({ @@ -275,48 +203,6 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp const currentProject = issue.projectId ? orderedProjects.find((project) => project.id === issue.projectId) ?? null : null; - const currentProjectExecutionWorkspacePolicy = - experimentalSettings?.enableIsolatedWorkspaces === true - ? currentProject?.executionWorkspacePolicy ?? null - : null; - const currentProjectSupportsExecutionWorkspace = Boolean(currentProjectExecutionWorkspacePolicy?.enabled); - 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) && Boolean(issue.projectId), - }); - const deduplicatedReusableWorkspaces = useMemo(() => { - const workspaces = reusableExecutionWorkspaces ?? []; - const seen = new Map(); - for (const ws of workspaces) { - const key = ws.cwd ?? ws.id; - const existing = seen.get(key); - if (!existing || new Date(ws.lastUsedAt) > new Date(existing.lastUsedAt)) { - seen.set(key, ws); - } - } - return Array.from(seen.values()); - }, [reusableExecutionWorkspaces]); - const selectedReusableExecutionWorkspace = - deduplicatedReusableWorkspaces.find((workspace) => workspace.id === issue.executionWorkspaceId) - ?? issue.currentExecutionWorkspace - ?? null; - const currentExecutionWorkspaceSelection = shouldPresentExistingWorkspaceSelection(issue) - ? "reuse_existing" - : ( - issue.executionWorkspacePreference - ?? issue.executionWorkspaceSettings?.mode - ?? defaultExecutionWorkspaceModeForProject(currentProject) - ); const projectLink = (id: string | null) => { if (!id) return null; const project = projects?.find((p) => p.id === id) ?? null; @@ -674,93 +560,6 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp {projectContent} - {currentProjectSupportsExecutionWorkspace && ( - -
- - - {currentExecutionWorkspaceSelection === "reuse_existing" && ( - - )} - - {issue.currentExecutionWorkspace && ( -
-
- Current:{" "} - - - - {" · "} - {issue.currentExecutionWorkspace.status} -
- {issue.currentExecutionWorkspace.cwd && ( - - )} - {issue.currentExecutionWorkspace.branchName && ( - - )} - {issue.currentExecutionWorkspace.repoUrl && ( - - )} -
- )} - {!issue.currentExecutionWorkspace && currentProject?.primaryWorkspace?.cwd && ( - - )} -
- - )} - {issue.parentId && ( 0) parts.push(); + parts.push(segments[i]); + } + return <>{parts}; +} + +function CopyableInline({ value, label, mono }: { value: string; label?: string; mono?: boolean }) { + const [copied, setCopied] = useState(false); + const timerRef = useRef>(undefined); + const handleCopy = useCallback(async () => { + try { + await navigator.clipboard.writeText(value); + setCopied(true); + clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => setCopied(false), 1500); + } catch { /* noop */ } + }, [value]); + + return ( + + {label && {label}} + + + + + + ); +} + +function workspaceModeLabel(mode: string | null | undefined) { + switch (mode) { + case "isolated_workspace": return "Isolated workspace"; + case "operator_branch": return "Operator branch"; + case "cloud_sandbox": return "Cloud sandbox"; + case "adapter_managed": return "Adapter managed"; + default: return "Workspace"; + } +} + +function statusBadge(status: string) { + const colors: Record = { + active: "bg-green-500/15 text-green-700 dark:text-green-400", + idle: "bg-muted text-muted-foreground", + in_review: "bg-blue-500/15 text-blue-700 dark:text-blue-400", + archived: "bg-muted text-muted-foreground", + }; + return ( + + {status.replace(/_/g, " ")} + + ); +} + +/* -------------------------------------------------------------------------- */ +/* Main component */ +/* -------------------------------------------------------------------------- */ + +interface IssueWorkspaceCardProps { + issue: Issue; + project: { id: string; executionWorkspacePolicy?: { enabled?: boolean; defaultMode?: string | null; defaultProjectWorkspaceId?: string | null } | null; workspaces?: Array<{ id: string; isPrimary: boolean }> } | null; + onUpdate: (data: Record) => void; +} + +export function IssueWorkspaceCard({ issue, project, onUpdate }: IssueWorkspaceCardProps) { + const { selectedCompanyId } = useCompany(); + const companyId = issue.companyId ?? selectedCompanyId; + const [editing, setEditing] = useState(false); + + const { data: experimentalSettings } = useQuery({ + queryKey: queryKeys.instance.experimentalSettings, + queryFn: () => instanceSettingsApi.getExperimental(), + }); + + const policyEnabled = experimentalSettings?.enableIsolatedWorkspaces === true + && Boolean(project?.executionWorkspacePolicy?.enabled); + + const workspace = issue.currentExecutionWorkspace as ExecutionWorkspace | null | undefined; + + // Only show this card for non-default workspaces + const isNonDefault = workspace && workspace.mode !== "shared_workspace"; + + 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) && Boolean(issue.projectId) && editing, + }); + + const deduplicatedReusableWorkspaces = useMemo(() => { + const workspaces = reusableExecutionWorkspaces ?? []; + const seen = new Map(); + for (const ws of workspaces) { + const key = ws.cwd ?? ws.id; + const existing = seen.get(key); + if (!existing || new Date(ws.lastUsedAt) > new Date(existing.lastUsedAt)) { + seen.set(key, ws); + } + } + return Array.from(seen.values()); + }, [reusableExecutionWorkspaces]); + + const selectedReusableExecutionWorkspace = + deduplicatedReusableWorkspaces.find((w) => w.id === issue.executionWorkspaceId) + ?? workspace + ?? null; + + const currentSelection = shouldPresentExistingWorkspaceSelection(issue) + ? "reuse_existing" + : ( + issue.executionWorkspacePreference + ?? issue.executionWorkspaceSettings?.mode + ?? defaultExecutionWorkspaceModeForProject(project) + ); + + // Don't render if feature is off or workspace is default/absent + if (!policyEnabled || !isNonDefault) return null; + + return ( +
+ {/* Header row */} +
+
+ + {workspaceModeLabel(workspace.mode)} + {statusBadge(workspace.status)} +
+ +
+ + {/* Read-only info */} + {!editing && ( +
+ {workspace.branchName && ( +
+ + +
+ )} + {workspace.cwd && ( +
+ + +
+ )} + {workspace.repoUrl && ( +
+ Repo: + +
+ )} +
+ + View workspace details → + +
+
+ )} + + {/* Editing controls */} + {editing && ( +
+ + + {currentSelection === "reuse_existing" && ( + + )} + + {/* Current workspace summary when editing */} + {workspace && ( +
+
+ Current:{" "} + + + + {" · "} + {workspace.status} +
+
+ )} +
+ )} +
+ ); +} diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx index ed23b055..12785d24 100644 --- a/ui/src/pages/IssueDetail.tsx +++ b/ui/src/pages/IssueDetail.tsx @@ -21,6 +21,7 @@ import { InlineEditor } from "../components/InlineEditor"; import { CommentThread } from "../components/CommentThread"; import { IssueDocumentsSection } from "../components/IssueDocumentsSection"; import { IssueProperties } from "../components/IssueProperties"; +import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard"; import { LiveRunWidget } from "../components/LiveRunWidget"; import type { MentionOption } from "../components/MarkdownEditor"; import { ScrollToBottom } from "../components/ScrollToBottom"; @@ -991,6 +992,12 @@ export function IssueDetail() {
) : null} + p.id === issue.projectId) ?? null} + onUpdate={(data) => updateIssue.mutate(data)} + /> + From dd8c1ca3b2e615298ccc8afa018119990f7a641a Mon Sep 17 00:00:00 2001 From: dotta Date: Thu, 26 Mar 2026 11:01:09 -0500 Subject: [PATCH 4/5] Speed up issues page search responsiveness Co-Authored-By: Paperclip --- ui/src/components/IssuesList.tsx | 71 +++++++++++++++++++++----------- ui/src/pages/Issues.tsx | 32 ++++++-------- 2 files changed, 60 insertions(+), 43 deletions(-) diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx index 1eb95e22..1876492c 100644 --- a/ui/src/components/IssuesList.tsx +++ b/ui/src/components/IssuesList.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState, useCallback, useRef } from "react"; +import { startTransition, useEffect, useMemo, useState, useCallback, useRef } from "react"; import { useQuery } from "@tanstack/react-query"; import { pickTextColorForPillBg } from "@/lib/color-contrast"; import { useDialog } from "../context/DialogContext"; @@ -68,6 +68,7 @@ const quickFilterPresets = [ { label: "Backlog", statuses: ["backlog"] }, { label: "Done", statuses: ["done", "cancelled"] }, ]; +const ISSUE_SEARCH_COMMIT_DELAY_MS = 150; function getViewState(key: string): IssueViewState { try { @@ -174,6 +175,39 @@ interface IssuesListProps { onUpdateIssue: (id: string, data: Record) => void; } +interface IssuesSearchInputProps { + initialValue: string; + onValueCommitted: (value: string) => void; +} + +function IssuesSearchInput({ initialValue, onValueCommitted }: IssuesSearchInputProps) { + const [value, setValue] = useState(initialValue); + + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + useEffect(() => { + const timeoutId = window.setTimeout(() => { + onValueCommitted(value); + }, ISSUE_SEARCH_COMMIT_DELAY_MS); + return () => window.clearTimeout(timeoutId); + }, [value, onValueCommitted]); + + return ( +
+ + setValue(e.target.value)} + placeholder="Search issues..." + className="pl-7 text-xs sm:text-sm" + aria-label="Search issues" + /> +
+ ); +} + export function IssuesList({ issues, isLoading, @@ -210,20 +244,12 @@ export function IssuesList({ const [assigneePickerIssueId, setAssigneePickerIssueId] = useState(null); const [assigneeSearch, setAssigneeSearch] = useState(""); const [issueSearch, setIssueSearch] = useState(initialSearch ?? ""); - const [debouncedIssueSearch, setDebouncedIssueSearch] = useState(issueSearch); - const normalizedIssueSearch = debouncedIssueSearch.trim(); + const normalizedIssueSearch = issueSearch.trim(); useEffect(() => { setIssueSearch(initialSearch ?? ""); }, [initialSearch]); - useEffect(() => { - const timeoutId = window.setTimeout(() => { - setDebouncedIssueSearch(issueSearch); - }, 300); - return () => window.clearTimeout(timeoutId); - }, [issueSearch]); - // Reload view state from localStorage when company changes (scopedKey changes). const prevScopedKey = useRef(scopedKey); useEffect(() => { @@ -235,6 +261,13 @@ export function IssuesList({ } }, [scopedKey, initialAssignees]); + const handleIssueSearchCommit = useCallback((nextSearch: string) => { + startTransition(() => { + setIssueSearch(nextSearch); + }); + onSearchChange?.(nextSearch); + }, [onSearchChange]); + const updateView = useCallback((patch: Partial) => { setViewState((prev) => { const next = { ...prev, ...patch }; @@ -250,6 +283,7 @@ export function IssuesList({ ], queryFn: () => issuesApi.list(selectedCompanyId!, { q: normalizedIssueSearch, projectId, ...searchFilters }), enabled: !!selectedCompanyId && normalizedIssueSearch.length > 0, + placeholderData: (previousData) => previousData, }); const agentName = useCallback((id: string | null) => { @@ -333,19 +367,10 @@ export function IssuesList({ New Issue -
- - { - setIssueSearch(e.target.value); - onSearchChange?.(e.target.value); - }} - placeholder="Search issues..." - className="pl-7 text-xs sm:text-sm" - aria-label="Search issues" - /> -
+
diff --git a/ui/src/pages/Issues.tsx b/ui/src/pages/Issues.tsx index ee3d64b0..2b6e48b0 100644 --- a/ui/src/pages/Issues.tsx +++ b/ui/src/pages/Issues.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useCallback, useRef } from "react"; +import { useEffect, useMemo, useCallback } from "react"; import { useLocation, useSearchParams } from "@/lib/router"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { issuesApi } from "../api/issues"; @@ -22,28 +22,20 @@ export function Issues() { const initialSearch = searchParams.get("q") ?? ""; const participantAgentId = searchParams.get("participantAgentId") ?? undefined; - const debounceRef = useRef>(undefined); const handleSearchChange = useCallback((search: string) => { - clearTimeout(debounceRef.current); - debounceRef.current = setTimeout(() => { - const trimmedSearch = search.trim(); - const currentSearch = new URLSearchParams(window.location.search).get("q") ?? ""; - if (currentSearch === trimmedSearch) return; + const trimmedSearch = search.trim(); + const currentSearch = new URLSearchParams(window.location.search).get("q") ?? ""; + if (currentSearch === trimmedSearch) return; - const url = new URL(window.location.href); - if (trimmedSearch) { - url.searchParams.set("q", trimmedSearch); - } else { - url.searchParams.delete("q"); - } + const url = new URL(window.location.href); + if (trimmedSearch) { + url.searchParams.set("q", trimmedSearch); + } else { + url.searchParams.delete("q"); + } - const nextUrl = `${url.pathname}${url.search}${url.hash}`; - window.history.replaceState(window.history.state, "", nextUrl); - }, 300); - }, []); - - useEffect(() => { - return () => clearTimeout(debounceRef.current); + const nextUrl = `${url.pathname}${url.search}${url.hash}`; + window.history.replaceState(window.history.state, "", nextUrl); }, []); const { data: agents } = useQuery({ From ab0d04ff7aa85ec9ef8b9c2c56ade9ecc2943e81 Mon Sep 17 00:00:00 2001 From: dotta Date: Thu, 26 Mar 2026 11:53:25 -0500 Subject: [PATCH 5/5] fix(ui): address workspace card review feedback - restore pre-run workspace configuration visibility - require explicit save/cancel for workspace edits - stabilize debounced issue search callback Co-Authored-By: Paperclip --- ui/src/components/IssueWorkspaceCard.tsx | 191 +++++++++++++++++------ ui/src/components/IssuesList.tsx | 9 +- 2 files changed, 148 insertions(+), 52 deletions(-) diff --git a/ui/src/components/IssueWorkspaceCard.tsx b/ui/src/components/IssueWorkspaceCard.tsx index bccf42ee..56484cab 100644 --- a/ui/src/components/IssueWorkspaceCard.tsx +++ b/ui/src/components/IssueWorkspaceCard.tsx @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Link } from "@/lib/router"; import type { Issue, ExecutionWorkspace } from "@paperclipai/shared"; import { useQuery } from "@tanstack/react-query"; @@ -98,6 +98,22 @@ function workspaceModeLabel(mode: string | null | undefined) { } } +function configuredWorkspaceLabel( + selection: string | null | undefined, + reusableWorkspace: ExecutionWorkspace | null, +) { + switch (selection) { + case "isolated_workspace": + return "New isolated workspace"; + case "reuse_existing": + return reusableWorkspace?.mode === "isolated_workspace" + ? "Existing isolated workspace" + : "Reuse existing workspace"; + default: + return "Project default"; + } +} + function statusBadge(status: string) { const colors: Record = { active: "bg-green-500/15 text-green-700 dark:text-green-400", @@ -137,9 +153,6 @@ export function IssueWorkspaceCard({ issue, project, onUpdate }: IssueWorkspaceC const workspace = issue.currentExecutionWorkspace as ExecutionWorkspace | null | undefined; - // Only show this card for non-default workspaces - const isNonDefault = workspace && workspace.mode !== "shared_workspace"; - const { data: reusableExecutionWorkspaces } = useQuery({ queryKey: queryKeys.executionWorkspaces.list(companyId!, { projectId: issue.projectId ?? undefined, @@ -181,8 +194,51 @@ export function IssueWorkspaceCard({ issue, project, onUpdate }: IssueWorkspaceC ?? defaultExecutionWorkspaceModeForProject(project) ); - // Don't render if feature is off or workspace is default/absent - if (!policyEnabled || !isNonDefault) return null; + const [draftSelection, setDraftSelection] = useState(currentSelection); + const [draftExecutionWorkspaceId, setDraftExecutionWorkspaceId] = useState(issue.executionWorkspaceId ?? ""); + + useEffect(() => { + if (editing) return; + setDraftSelection(currentSelection); + setDraftExecutionWorkspaceId(issue.executionWorkspaceId ?? ""); + }, [currentSelection, editing, issue.executionWorkspaceId]); + + const activeNonDefaultWorkspace = Boolean(workspace && workspace.mode !== "shared_workspace"); + + const configuredReusableWorkspace = + deduplicatedReusableWorkspaces.find((w) => w.id === draftExecutionWorkspaceId) + ?? (draftExecutionWorkspaceId === issue.executionWorkspaceId ? selectedReusableExecutionWorkspace : null); + + const canSaveWorkspaceConfig = draftSelection !== "reuse_existing" || draftExecutionWorkspaceId.length > 0; + + const handleSave = useCallback(() => { + if (!canSaveWorkspaceConfig) return; + onUpdate({ + executionWorkspacePreference: draftSelection, + executionWorkspaceId: draftSelection === "reuse_existing" ? draftExecutionWorkspaceId || null : null, + executionWorkspaceSettings: { + mode: + draftSelection === "reuse_existing" + ? issueModeForExistingWorkspace(configuredReusableWorkspace?.mode) + : draftSelection, + }, + }); + setEditing(false); + }, [ + canSaveWorkspaceConfig, + configuredReusableWorkspace?.mode, + draftExecutionWorkspaceId, + draftSelection, + onUpdate, + ]); + + const handleCancel = useCallback(() => { + setDraftSelection(currentSelection); + setDraftExecutionWorkspaceId(issue.executionWorkspaceId ?? ""); + setEditing(false); + }, [currentSelection, issue.executionWorkspaceId]); + + if (!policyEnabled || !project) return null; return (
@@ -190,48 +246,95 @@ export function IssueWorkspaceCard({ issue, project, onUpdate }: IssueWorkspaceC
- {workspaceModeLabel(workspace.mode)} - {statusBadge(workspace.status)} + {activeNonDefaultWorkspace && workspace + ? workspaceModeLabel(workspace.mode) + : configuredWorkspaceLabel(currentSelection, selectedReusableExecutionWorkspace)} + {workspace ? statusBadge(workspace.status) : statusBadge("idle")} +
+
+ {editing ? ( + <> + + + + ) : ( + + )}
-
{/* Read-only info */} {!editing && (
- {workspace.branchName && ( + {workspace?.branchName && (
)} - {workspace.cwd && ( + {workspace?.cwd && (
)} - {workspace.repoUrl && ( + {workspace?.repoUrl && (
Repo:
)} -
- - View workspace details → - -
+ {!workspace && ( +
+ {currentSelection === "isolated_workspace" + ? "A fresh isolated workspace will be created when this issue runs." + : currentSelection === "reuse_existing" + ? "This issue will reuse an existing workspace when it runs." + : "This issue will use the project default workspace configuration when it runs."} +
+ )} + {currentSelection === "reuse_existing" && selectedReusableExecutionWorkspace && ( +
+ Reusing:{" "} + + + +
+ )} + {workspace && ( +
+ + View workspace details → + +
+ )}
)} @@ -240,44 +343,32 @@ export function IssueWorkspaceCard({ issue, project, onUpdate }: IssueWorkspaceC
- {currentSelection === "reuse_existing" && ( + {draftSelection === "reuse_existing" && (