import { useShowAgentCreatedTasks } from "../hooks/useShowAgentCreatedTasks"; import { useCoordinatorWorkspaceEnabled } from "../hooks/useCoordinatorWorkspaceEnabled"; import { CoordinatorTasks } from "./CoordinatorTasks"; import { useDesignSandbox } from "../context/DesignSandboxContext"; import { DesignSandboxTasks } from "./DesignSandboxTasks"; import { useEffect, useMemo, useCallback, useRef, useState } from "react"; import type { ReactNode } from "react"; import { Navigate, useLocation, useNavigate, useSearchParams } from "@/lib/router"; import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; import { issuesApi } from "../api/issues"; import { agentsApi } from "../api/agents"; import { projectsApi } from "../api/projects"; import { heartbeatsApi } from "../api/heartbeats"; import { useCompany } from "../context/CompanyContext"; import { useBreadcrumbs } from "../context/BreadcrumbContext"; import { collectLiveIssueIds } from "../lib/liveIssueIds"; import { usePublishSharedQueryData, useSharedPollingQuery } from "@/hooks/useSharedPolling"; import { queryKeys } from "../lib/queryKeys"; import { createIssueDetailLocationState } from "../lib/issueDetailBreadcrumb"; import { EmptyState } from "../components/EmptyState"; import { IssuesList } from "../components/IssuesList"; import { TaskViewsMenu } from "../components/TaskViewsMenu"; import { Button } from "@/components/ui/button"; import { CircleDot, Plus } from "lucide-react"; import type { Issue } from "@paperclipai/shared"; import { useStreamlinedUiEnabled } from "../hooks/useStreamlinedUiEnabled"; import { useCombinedInboxTasksEnabled } from "../hooks/useCombinedInboxTasksEnabled"; import { useDialogActions } from "../context/DialogContext"; import { useInboxBadge } from "../hooks/useInboxBadge"; import { Inbox } from "./Inbox"; import { ORGANIZATION_SCOPED_PARAMS, TASK_VIEW_PARAM, loadLastTaskView, normalizeTaskViewKey, resolveInitialTaskView, saveLastTaskView, taskView, type TaskViewKey, } from "../lib/task-views"; import { useUpdateIssueMutation } from "../hooks/useUpdateIssueMutation"; const WORKSPACE_FILTER_ISSUE_LIMIT = 1000; const ISSUES_PAGE_SIZE = 100; export const ISSUES_ROW_PRESENTATION = "task" as const; export const ISSUES_TOOLBAR_PRESENTATION = "collection" as const; export function resolveIssuesPresentation(streamlinedUiEnabled: boolean) { return streamlinedUiEnabled ? { rowPresentation: ISSUES_ROW_PRESENTATION, toolbarPresentation: ISSUES_TOOLBAR_PRESENTATION } : { rowPresentation: "legacy" as const, toolbarPresentation: "legacy" as const }; } export function getNextIssuesPageOffset( loadedPageSize: number, currentOffset: number, pageSize: number = ISSUES_PAGE_SIZE, ): number | undefined { return loadedPageSize >= pageSize ? currentOffset + pageSize : undefined; } export function mergeIssuePagesStable(pages: T[][]): T[] { const seenIssueIds = new Set(); const merged: T[] = []; for (const page of pages) { for (const issue of page) { if (seenIssueIds.has(issue.id)) continue; seenIssueIds.add(issue.id); merged.push(issue); } } return merged; } export function buildIssuesSearchUrl(currentHref: string, search: string): string | null { const url = new URL(currentHref); const currentSearch = url.searchParams.get("q") ?? ""; if (currentSearch === search) return null; if (search.length > 0) { url.searchParams.set("q", search); } else { url.searchParams.delete("q"); } return `${url.pathname}${url.search}${url.hash}`; } /** * Tasks — the single task surface after PAP-670 merged Inbox into it. * * This component only resolves `?view=` to a view and hands off: My-work views * render the inbox list, organization views render the task collection. Both * get the same Views control in their toolbar, so the switch reads as one page. */ export function Issues() { const designSandbox = useDesignSandbox(); const { enabled: streamlinedUiEnabled } = useStreamlinedUiEnabled(); const { enabled: combinedInboxTasksEnabled } = useCombinedInboxTasksEnabled(); const { enabled: coordinatorEnabled } = useCoordinatorWorkspaceEnabled(); const [params] = useSearchParams(); const location = useLocation(); const requestedView = normalizeTaskViewKey(params.get(TASK_VIEW_PARAM)); const organizationScoped = [...ORGANIZATION_SCOPED_PARAMS, "workspaceId"].some(param => params.getAll(param).some(Boolean)); // Saved merged-Inbox URLs retain their original surface inside Coordinator. // Its effective Combined Inbox setting is off, so these routes do not loop. if (!designSandbox && coordinatorEnabled && !organizationScoped && requestedView && taskView(requestedView).surface === "inbox") { const next = new URLSearchParams(params); next.delete(TASK_VIEW_PARAM); const search = next.toString(); return ; } // The merged surface is Combined Inbox + Task List only. With the flag off, and always in // the legacy shell, Tasks is the plain task list and Inbox keeps its pages. return designSandbox ? : coordinatorEnabled ? : streamlinedUiEnabled && combinedInboxTasksEnabled ? : ; } function StreamlinedTasks() { const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const { selectedCompanyId } = useCompany(); const { openNewIssue } = useDialogActions(); const inboxBadge = useInboxBadge(selectedCompanyId); const requestedView = searchParams.get(TASK_VIEW_PARAM); const hasOrganizationScopedParam = ORGANIZATION_SCOPED_PARAMS.some( (param) => (searchParams.get(param) ?? "").length > 0, ); // Read the stored view once per mount so a later write can't yank the view // out from under the user mid-session. const [lastUsedView] = useState(() => loadLastTaskView()); const view = resolveInitialTaskView(requestedView, hasOrganizationScopedParam, lastUsedView); const definition = taskView(view); // Make the resolved view addressable without dropping the params that // brought the user here — and correct a requested view that was overridden // (an inbox view carrying an organization filter opens All tasks). useEffect(() => { if (normalizeTaskViewKey(requestedView) === view) return; setSearchParams((current) => { const next = new URLSearchParams(current); next.set(TASK_VIEW_PARAM, view); return next; }, { replace: true }); }, [requestedView, view, setSearchParams]); const selectView = useCallback((next: TaskViewKey) => { saveLastTaskView(next); // A view switch starts clean: the previous view's search and filters are // its own, not the new view's. navigate(`/issues?${TASK_VIEW_PARAM}=${next}`); }, [navigate]); const viewsMenu = ( ); if (definition.surface === "inbox") { return ( {viewsMenu} )} /> ); } return ; } function OrganizationIssues({ toolbarContext, initialStatuses, }: { toolbarContext?: ReactNode; initialStatuses?: string[] } = {}) { const { enabled: streamlinedUiEnabled } = useStreamlinedUiEnabled(); const issuesPresentation = resolveIssuesPresentation(streamlinedUiEnabled); const { selectedCompanyId } = useCompany(); const { setBreadcrumbs } = useBreadcrumbs(); const location = useLocation(); const [searchParams] = useSearchParams(); const fetchNextPageInFlightRef = useRef(false); const urlSearch = searchParams.get("q") ?? ""; const [searchOverride, setSearchOverride] = useState<{ search: string; locationSearch: string } | null>(null); const syncedSearch = useMemo(() => { if (typeof window !== "undefined" && searchOverride?.locationSearch === window.location.search) { return searchOverride.search; } return urlSearch; }, [searchOverride, urlSearch, location.search]); const showAgentCreatedTasks = useShowAgentCreatedTasks(selectedCompanyId, "paperclip:issues-view"); const participantAgentId = searchParams.get("participantAgentId") ?? undefined; const initialWorkspaces = searchParams.getAll("workspace").filter((workspaceId) => workspaceId.length > 0); const workspaceIdFilter = initialWorkspaces.length === 1 ? initialWorkspaces[0] : undefined; const handleSearchChange = useCallback((search: string) => { const nextUrl = buildIssuesSearchUrl(window.location.href, search); if (!nextUrl) { setSearchOverride(null); return; } window.history.replaceState(window.history.state, "", nextUrl); setSearchOverride({ search, locationSearch: window.location.search }); }, []); const { data: agents } = useQuery({ queryKey: queryKeys.agents.list(selectedCompanyId!), queryFn: () => agentsApi.list(selectedCompanyId!), enabled: !!selectedCompanyId, }); const { data: projects } = useQuery({ queryKey: queryKeys.projects.list(selectedCompanyId!, { includeArchived: true }), queryFn: () => projectsApi.list(selectedCompanyId!, { includeArchived: true }), enabled: !!selectedCompanyId, }); const liveRunsQueryKey = queryKeys.liveRuns(selectedCompanyId!); const sharedLiveRuns = useSharedPollingQuery({ companyId: selectedCompanyId, resourceKey: "live-runs", queryKey: liveRunsQueryKey, enabled: !!selectedCompanyId, // Event-sourced via LiveUpdatesProvider (GitHub issue 9627); no interval poll needed. refetchInterval: false, leaderOnly: true, }); const { data: liveRuns, dataUpdatedAt: liveRunsUpdatedAt } = useQuery({ queryKey: liveRunsQueryKey, queryFn: () => heartbeatsApi.liveRunsForCompany(selectedCompanyId!), enabled: sharedLiveRuns.enabled, refetchInterval: sharedLiveRuns.refetchInterval, }); usePublishSharedQueryData(sharedLiveRuns, liveRuns, liveRunsUpdatedAt); const issueLinkState = useMemo( () => createIssueDetailLocationState( "Tasks", `${location.pathname}${location.search}${location.hash}`, "issues", ), [location.pathname, location.search, location.hash], ); useEffect(() => { setBreadcrumbs([{ label: "Tasks" }]); }, [setBreadcrumbs]); const issuePageSize = workspaceIdFilter ? WORKSPACE_FILTER_ISSUE_LIMIT : ISSUES_PAGE_SIZE; const { data: issuePages, isLoading, isFetchingNextPage, error, hasNextPage, fetchNextPage, } = useInfiniteQuery({ queryKey: [ ...queryKeys.issues.list(selectedCompanyId!), "participant-agent", participantAgentId ?? "__all__", "workspace", workspaceIdFilter ?? "__all__", streamlinedUiEnabled ? "index" : "compact", "with-routine-executions", showAgentCreatedTasks, "infinite", issuePageSize, ], queryFn: ({ pageParam, signal }) => issuesApi.listCompact(selectedCompanyId!, { projection: streamlinedUiEnabled ? "index" : undefined, participantAgentId, workspaceId: workspaceIdFilter, includeRoutineExecutions: true, includeAgentCreatedTasks: showAgentCreatedTasks, limit: issuePageSize, offset: pageParam, sortField: "updated", sortDir: "desc", }, { signal }), initialPageParam: 0, getNextPageParam: (lastPage, _allPages, lastPageParam) => getNextIssuesPageOffset(lastPage.length, lastPageParam, issuePageSize), enabled: !!selectedCompanyId, placeholderData: (previousData) => previousData, }); const issues = useMemo(() => mergeIssuePagesStable(issuePages?.pages ?? []) as Issue[], [issuePages]); const liveIssueIds = useMemo(() => collectLiveIssueIds(liveRuns, issues), [issues, liveRuns]); const hasMoreServerIssues = syncedSearch.trim().length === 0 && hasNextPage === true; const loadMoreServerIssues = useCallback(() => { if (!hasNextPage || isFetchingNextPage || fetchNextPageInFlightRef.current) return; fetchNextPageInFlightRef.current = true; void fetchNextPage({ cancelRefetch: false }).finally(() => { fetchNextPageInFlightRef.current = false; }); }, [fetchNextPage, hasNextPage, isFetchingNextPage]); // Optimistic, rolls back with a readable toast, and resends after an outage. const updateIssue = useUpdateIssueMutation({ companyId: selectedCompanyId }); if (!selectedCompanyId) { return ( ); } return ( 0 ? initialWorkspaces : undefined} initialStatuses={initialStatuses} toolbarContext={toolbarContext} initialSearch={syncedSearch} onSearchChange={handleSearchChange} enableAgentCreatedVisibilityFilter hasMoreIssues={hasMoreServerIssues} onLoadMoreIssues={loadMoreServerIssues} onUpdateIssue={(id, data) => updateIssue.mutate({ id, data })} searchFilters={participantAgentId || workspaceIdFilter ? { participantAgentId, workspaceId: workspaceIdFilter } : undefined} /> ); }