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 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", + 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; + + 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) + ); + + 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 ( +
+ {/* Header row */} +
+
+ + {activeNonDefaultWorkspace && workspace + ? workspaceModeLabel(workspace.mode) + : configuredWorkspaceLabel(currentSelection, selectedReusableExecutionWorkspace)} + {workspace ? statusBadge(workspace.status) : statusBadge("idle")} +
+
+ {editing ? ( + <> + + + + ) : ( + + )} +
+
+ + {/* Read-only info */} + {!editing && ( +
+ {workspace?.branchName && ( +
+ + +
+ )} + {workspace?.cwd && ( +
+ + +
+ )} + {workspace?.repoUrl && ( +
+ Repo: + +
+ )} + {!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 → + +
+ )} +
+ )} + + {/* Editing controls */} + {editing && ( +
+ + + {draftSelection === "reuse_existing" && ( + + )} + + {/* Current workspace summary when editing */} + {workspace && ( +
+
+ Current:{" "} + + + + {" · "} + {workspace.status} +
+
+ )} +
+ )} +
+ ); +} diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx index 1eb95e22..a601aec7 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,44 @@ 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); + const onValueCommittedRef = useRef(onValueCommitted); + + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + useEffect(() => { + onValueCommittedRef.current = onValueCommitted; + }, [onValueCommitted]); + + useEffect(() => { + const timeoutId = window.setTimeout(() => { + onValueCommittedRef.current(value); + }, ISSUE_SEARCH_COMMIT_DELAY_MS); + return () => window.clearTimeout(timeoutId); + }, [value]); + + 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 +249,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 +266,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 +288,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 +372,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/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); 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)} + /> + 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({