1e85565765
Integrates the Phase 11 Builder tab strip into ProjectDetail without disturbing any existing Paperclip sub-route behavior. The approach: 1. When location.pathname resolves to a Builder tab (overview / issues / agents / gates / costs / activity / org), render the BuilderTabStrip + the matching new tab component (OverviewTab / ProjectIssuesList / AgentsTab / etc.) and hide the legacy PageTabBar + legacy overview/list handlers. 2. When the pathname resolves to a legacy tab (configuration / budget / workspaces / plugin:*), the existing Tabs/PageTabBar and dispatch render exactly as before — backwards compat preserved. This is Option 1 from the Phase 11 plan: union the old and new tab logic, silent pass-through for configuration/budget, no surface in the new strip. OverviewTab currently receives null for every data slice (progress/milestones/originChat/activity24h) because the shared Project type + projectsApi don't carry those fields yet; the tab renders explicit em-dash / "No milestones defined" placeholders. See the Phase 11 report for the backend gap list. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1006 lines
39 KiB
TypeScript
1006 lines
39 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState, useRef } from "react";
|
|
import { Link, useParams, useNavigate, useLocation, Navigate } from "@/lib/router";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { PROJECT_COLORS, isUuidLike, type BudgetPolicySummary, type ExecutionWorkspace } from "@paperclipai/shared";
|
|
import { budgetsApi } from "../api/budgets";
|
|
import { executionWorkspacesApi } from "../api/execution-workspaces";
|
|
import { instanceSettingsApi } from "../api/instanceSettings";
|
|
import { projectsApi } from "../api/projects";
|
|
import { issuesApi } from "../api/issues";
|
|
import { agentsApi } from "../api/agents";
|
|
import { heartbeatsApi } from "../api/heartbeats";
|
|
import { assetsApi } from "../api/assets";
|
|
import { usePanel } from "../context/PanelContext";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useToast } from "../context/ToastContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { ProjectProperties, type ProjectConfigFieldKey, type ProjectFieldSaveState } from "../components/ProjectProperties";
|
|
import { CopyText } from "../components/CopyText";
|
|
import { InlineEditor } from "../components/InlineEditor";
|
|
import { StatusBadge } from "../components/StatusBadge";
|
|
import { BudgetPolicyCard } from "../components/BudgetPolicyCard";
|
|
import { ExecutionWorkspaceCloseDialog } from "../components/ExecutionWorkspaceCloseDialog";
|
|
import { IssuesList } from "../components/IssuesList";
|
|
import { PageSkeleton } from "../components/PageSkeleton";
|
|
import { PageTabBar } from "../components/PageTabBar";
|
|
import { BuilderTabStrip, resolveBuilderTab } from "../components/projects/BuilderTabStrip";
|
|
import { OverviewTab } from "../components/projects/tabs/OverviewTab";
|
|
import { AgentsTab } from "../components/projects/tabs/AgentsTab";
|
|
import { GatesTab } from "../components/projects/tabs/GatesTab";
|
|
import { CostsTab } from "../components/projects/tabs/CostsTab";
|
|
import { ActivityTab } from "../components/projects/tabs/ActivityTab";
|
|
import { OrgTab } from "../components/projects/tabs/OrgTab";
|
|
import { buildProjectWorkspaceSummaries } from "../lib/project-workspaces-tab";
|
|
import { projectRouteRef, projectWorkspaceUrl } from "../lib/utils";
|
|
import { timeAgo } from "../lib/timeAgo";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs } from "@/components/ui/tabs";
|
|
import { PluginLauncherOutlet } from "@/plugins/launchers";
|
|
import { PluginSlotMount, PluginSlotOutlet, usePluginSlots } from "@/plugins/slots";
|
|
import { Copy, FolderOpen, GitBranch, Loader2, Play, Square } from "lucide-react";
|
|
import { IssuesQuicklook } from "../components/IssuesQuicklook";
|
|
|
|
/* ── Top-level tab types ── */
|
|
|
|
type ProjectBaseTab = "overview" | "list" | "workspaces" | "configuration" | "budget";
|
|
type ProjectPluginTab = `plugin:${string}`;
|
|
type ProjectTab = ProjectBaseTab | ProjectPluginTab;
|
|
|
|
function isProjectPluginTab(value: string | null): value is ProjectPluginTab {
|
|
return typeof value === "string" && value.startsWith("plugin:");
|
|
}
|
|
|
|
function resolveProjectTab(pathname: string, projectId: string): ProjectTab | null {
|
|
const segments = pathname.split("/").filter(Boolean);
|
|
const projectsIdx = segments.indexOf("projects");
|
|
if (projectsIdx === -1 || segments[projectsIdx + 1] !== projectId) return null;
|
|
const tab = segments[projectsIdx + 2];
|
|
if (tab === "overview") return "overview";
|
|
if (tab === "configuration") return "configuration";
|
|
if (tab === "budget") return "budget";
|
|
if (tab === "issues") return "list";
|
|
if (tab === "workspaces") return "workspaces";
|
|
return null;
|
|
}
|
|
|
|
/* ── Overview tab content ── */
|
|
|
|
function OverviewContent({
|
|
project,
|
|
onUpdate,
|
|
imageUploadHandler,
|
|
}: {
|
|
project: { description: string | null; status: string; targetDate: string | null };
|
|
onUpdate: (data: Record<string, unknown>) => void;
|
|
imageUploadHandler?: (file: File) => Promise<string>;
|
|
}) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<InlineEditor
|
|
value={project.description ?? ""}
|
|
onSave={(description) => onUpdate({ description })}
|
|
as="p"
|
|
className="text-sm text-muted-foreground"
|
|
placeholder="Add a description..."
|
|
multiline
|
|
imageUploadHandler={imageUploadHandler}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">Status</span>
|
|
<div className="mt-1">
|
|
<StatusBadge status={project.status} />
|
|
</div>
|
|
</div>
|
|
{project.targetDate && (
|
|
<div>
|
|
<span className="text-muted-foreground">Target Date</span>
|
|
<p>{project.targetDate}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ── Color picker popover ── */
|
|
|
|
function ColorPicker({
|
|
currentColor,
|
|
onSelect,
|
|
}: {
|
|
currentColor: string;
|
|
onSelect: (color: string) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
function handleClick(e: MouseEvent) {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClick);
|
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
}, [open]);
|
|
|
|
return (
|
|
<div className="relative" ref={ref}>
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="shrink-0 h-5 w-5 rounded-md cursor-pointer hover:ring-2 hover:ring-foreground/20 transition-[box-shadow]"
|
|
style={{ backgroundColor: currentColor }}
|
|
aria-label="Change project color"
|
|
/>
|
|
{open && (
|
|
<div className="absolute top-full left-0 mt-2 p-2 bg-popover border border-border rounded-lg shadow-lg z-50 w-max">
|
|
<div className="grid grid-cols-5 gap-1.5">
|
|
{PROJECT_COLORS.map((color) => (
|
|
<button
|
|
key={color}
|
|
onClick={() => {
|
|
onSelect(color);
|
|
setOpen(false);
|
|
}}
|
|
className={`h-6 w-6 rounded-md cursor-pointer transition-[transform,box-shadow] duration-150 hover:scale-110 ${
|
|
color === currentColor
|
|
? "ring-2 ring-foreground ring-offset-1 ring-offset-background"
|
|
: "hover:ring-2 hover:ring-foreground/30"
|
|
}`}
|
|
style={{ backgroundColor: color }}
|
|
aria-label={`Select color ${color}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ── List (issues) tab content ── */
|
|
|
|
function ProjectIssuesList({ projectId, companyId }: { projectId: string; companyId: string }) {
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: agents } = useQuery({
|
|
queryKey: queryKeys.agents.list(companyId),
|
|
queryFn: () => agentsApi.list(companyId),
|
|
enabled: !!companyId,
|
|
});
|
|
|
|
const { data: liveRuns } = useQuery({
|
|
queryKey: queryKeys.liveRuns(companyId),
|
|
queryFn: () => heartbeatsApi.liveRunsForCompany(companyId),
|
|
enabled: !!companyId,
|
|
refetchInterval: 5000,
|
|
});
|
|
|
|
const liveIssueIds = useMemo(() => {
|
|
const ids = new Set<string>();
|
|
for (const run of liveRuns ?? []) {
|
|
if (run.issueId) ids.add(run.issueId);
|
|
}
|
|
return ids;
|
|
}, [liveRuns]);
|
|
|
|
const { data: issues, isLoading, error } = useQuery({
|
|
queryKey: queryKeys.issues.listByProject(companyId, projectId),
|
|
queryFn: () => issuesApi.list(companyId, { projectId }),
|
|
enabled: !!companyId,
|
|
});
|
|
|
|
const updateIssue = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
|
|
issuesApi.update(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByProject(companyId, projectId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) });
|
|
},
|
|
});
|
|
|
|
return (
|
|
<IssuesList
|
|
issues={issues ?? []}
|
|
isLoading={isLoading}
|
|
error={error as Error | null}
|
|
agents={agents}
|
|
liveIssueIds={liveIssueIds}
|
|
projectId={projectId}
|
|
viewStateKey={`paperclip:project-view:${projectId}`}
|
|
onUpdateIssue={(id, data) => updateIssue.mutate({ id, data })}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function ProjectWorkspacesContent({
|
|
companyId,
|
|
projectId,
|
|
projectRef,
|
|
summaries,
|
|
}: {
|
|
companyId: string;
|
|
projectId: string;
|
|
projectRef: string;
|
|
summaries: ReturnType<typeof buildProjectWorkspaceSummaries>;
|
|
}) {
|
|
const queryClient = useQueryClient();
|
|
const [runtimeActionKey, setRuntimeActionKey] = useState<string | null>(null);
|
|
const [closingWorkspace, setClosingWorkspace] = useState<{
|
|
id: string;
|
|
name: string;
|
|
status: ExecutionWorkspace["status"];
|
|
} | null>(null);
|
|
const controlWorkspaceRuntime = useMutation({
|
|
mutationFn: async (input: {
|
|
key: string;
|
|
kind: "project_workspace" | "execution_workspace";
|
|
workspaceId: string;
|
|
action: "start" | "stop" | "restart";
|
|
}) => {
|
|
setRuntimeActionKey(`${input.key}:${input.action}`);
|
|
if (input.kind === "project_workspace") {
|
|
return await projectsApi.controlWorkspaceRuntimeServices(projectId, input.workspaceId, input.action, companyId);
|
|
}
|
|
return await executionWorkspacesApi.controlRuntimeServices(input.workspaceId, input.action);
|
|
},
|
|
onSettled: () => {
|
|
setRuntimeActionKey(null);
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.list(companyId, { projectId }) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(projectId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByProject(companyId, projectId) });
|
|
},
|
|
});
|
|
|
|
if (summaries.length === 0) {
|
|
return <p className="text-sm text-muted-foreground">No non-default workspace activity yet.</p>;
|
|
}
|
|
|
|
const activeSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus !== "cleanup_failed");
|
|
const cleanupFailedSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus === "cleanup_failed");
|
|
|
|
const renderSummaryRow = (summary: ReturnType<typeof buildProjectWorkspaceSummaries>[number]) => {
|
|
const visibleIssues = summary.issues.slice(0, 5);
|
|
const hiddenIssueCount = Math.max(summary.issues.length - visibleIssues.length, 0);
|
|
const workspaceHref =
|
|
summary.kind === "project_workspace"
|
|
? projectWorkspaceUrl({ id: projectRef, urlKey: projectRef }, summary.workspaceId)
|
|
: `/execution-workspaces/${summary.workspaceId}`;
|
|
const hasRunningServices = summary.runningServiceCount > 0;
|
|
|
|
const truncatePath = (path: string) => {
|
|
const parts = path.split("/").filter(Boolean);
|
|
if (parts.length <= 3) return path;
|
|
return `…/${parts.slice(-2).join("/")}`;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={summary.key}
|
|
className="border-b border-border px-4 py-3 last:border-b-0"
|
|
>
|
|
{/* Header row: name + actions */}
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
to={workspaceHref}
|
|
className="min-w-0 shrink truncate text-sm font-medium hover:underline"
|
|
>
|
|
{summary.workspaceName}
|
|
</Link>
|
|
|
|
<div className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
|
|
{summary.serviceCount > 0 ? (
|
|
<span className={`inline-flex items-center gap-1 ${hasRunningServices ? "text-success" : ""}`}>
|
|
<span className={`inline-block h-1.5 w-1.5 rounded-full ${hasRunningServices ? "bg-success" : "bg-muted-foreground/40"}`} />
|
|
{summary.runningServiceCount}/{summary.serviceCount}
|
|
</span>
|
|
) : null}
|
|
{summary.executionWorkspaceStatus && summary.executionWorkspaceStatus !== "active" ? (
|
|
<span className="text-[11px] text-muted-foreground">{summary.executionWorkspaceStatus}</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="ml-auto flex shrink-0 items-center gap-2">
|
|
<span className="text-xs text-muted-foreground">{timeAgo(summary.lastUpdatedAt)}</span>
|
|
{summary.hasRuntimeConfig ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 gap-1.5 px-2 text-xs"
|
|
disabled={controlWorkspaceRuntime.isPending}
|
|
onClick={() =>
|
|
controlWorkspaceRuntime.mutate({
|
|
key: summary.key,
|
|
kind: summary.kind,
|
|
workspaceId: summary.workspaceId,
|
|
action: hasRunningServices ? "stop" : "start",
|
|
})
|
|
}
|
|
>
|
|
{runtimeActionKey === `${summary.key}:start` || runtimeActionKey === `${summary.key}:stop` ? (
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
|
) : hasRunningServices ? (
|
|
<Square className="h-3 w-3" />
|
|
) : (
|
|
<Play className="h-3 w-3" />
|
|
)}
|
|
{hasRunningServices ? "Stop" : "Start"}
|
|
</Button>
|
|
) : null}
|
|
{summary.kind === "execution_workspace" && summary.executionWorkspaceId && summary.executionWorkspaceStatus ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs text-muted-foreground"
|
|
onClick={() => setClosingWorkspace({
|
|
id: summary.executionWorkspaceId!,
|
|
name: summary.workspaceName,
|
|
status: summary.executionWorkspaceStatus!,
|
|
})}
|
|
>
|
|
{summary.executionWorkspaceStatus === "cleanup_failed" ? "Retry close" : "Close"}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata lines: branch, folder */}
|
|
<div className="mt-1.5 space-y-0.5 text-xs text-muted-foreground">
|
|
{summary.branchName ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<GitBranch className="h-3 w-3 shrink-0" />
|
|
<span className="font-mono">{summary.branchName}</span>
|
|
</div>
|
|
) : null}
|
|
{summary.cwd ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<FolderOpen className="h-3 w-3 shrink-0" />
|
|
<span className="truncate font-mono" title={summary.cwd}>
|
|
{truncatePath(summary.cwd)}
|
|
</span>
|
|
<CopyText text={summary.cwd} className="shrink-0" copiedLabel="Path copied">
|
|
<Copy className="h-3 w-3" />
|
|
</CopyText>
|
|
</div>
|
|
) : null}
|
|
{summary.primaryServiceUrl ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<a
|
|
href={summary.primaryServiceUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="font-mono hover:text-foreground hover:underline"
|
|
>
|
|
{summary.primaryServiceUrl}
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Issues */}
|
|
{summary.issues.length > 0 ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
<span className="font-medium text-muted-foreground/70">Issues</span>
|
|
{visibleIssues.map((issue) => (
|
|
<IssuesQuicklook key={issue.id} issue={issue}>
|
|
<Link
|
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
|
className="font-mono hover:text-foreground hover:underline"
|
|
>
|
|
{issue.identifier ?? issue.id.slice(0, 8)}
|
|
</Link>
|
|
</IssuesQuicklook>
|
|
))}
|
|
{hiddenIssueCount > 0 ? (
|
|
<Link to={workspaceHref} className="hover:text-foreground hover:underline">
|
|
+{hiddenIssueCount} more
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-4">
|
|
<div className="overflow-hidden rounded-xl border border-border bg-card">
|
|
{activeSummaries.map(renderSummaryRow)}
|
|
</div>
|
|
{cleanupFailedSummaries.length > 0 ? (
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
Cleanup attention needed
|
|
</div>
|
|
<div className="overflow-hidden rounded-xl border border-warning/20 bg-warning/5">
|
|
{cleanupFailedSummaries.map(renderSummaryRow)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{closingWorkspace ? (
|
|
<ExecutionWorkspaceCloseDialog
|
|
workspaceId={closingWorkspace.id}
|
|
workspaceName={closingWorkspace.name}
|
|
currentStatus={closingWorkspace.status}
|
|
open
|
|
onOpenChange={(open) => {
|
|
if (!open) setClosingWorkspace(null);
|
|
}}
|
|
onClosed={() => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.list(companyId, { projectId }) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(projectId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByProject(companyId, projectId) });
|
|
setClosingWorkspace(null);
|
|
}}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/* ── Main project page ── */
|
|
|
|
export function ProjectDetail() {
|
|
const { companyPrefix, projectId, filter } = useParams<{
|
|
companyPrefix?: string;
|
|
projectId: string;
|
|
filter?: string;
|
|
}>();
|
|
const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
|
|
const { closePanel } = usePanel();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
const { pushToast } = useToast();
|
|
const queryClient = useQueryClient();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [fieldSaveStates, setFieldSaveStates] = useState<Partial<Record<ProjectConfigFieldKey, ProjectFieldSaveState>>>({});
|
|
const fieldSaveRequestIds = useRef<Partial<Record<ProjectConfigFieldKey, number>>>({});
|
|
const fieldSaveTimers = useRef<Partial<Record<ProjectConfigFieldKey, ReturnType<typeof setTimeout>>>>({});
|
|
const routeProjectRef = projectId ?? "";
|
|
const routeCompanyId = useMemo(() => {
|
|
if (!companyPrefix) return null;
|
|
const requestedPrefix = companyPrefix.toUpperCase();
|
|
return companies.find((company) => company.issuePrefix.toUpperCase() === requestedPrefix)?.id ?? null;
|
|
}, [companies, companyPrefix]);
|
|
const lookupCompanyId = routeCompanyId ?? selectedCompanyId ?? undefined;
|
|
const canFetchProject = routeProjectRef.length > 0 && (isUuidLike(routeProjectRef) || Boolean(lookupCompanyId));
|
|
const activeRouteTab = routeProjectRef ? resolveProjectTab(location.pathname, routeProjectRef) : null;
|
|
const pluginTabFromSearch = useMemo(() => {
|
|
const tab = new URLSearchParams(location.search).get("tab");
|
|
return isProjectPluginTab(tab) ? tab : null;
|
|
}, [location.search]);
|
|
const activeTab = activeRouteTab ?? pluginTabFromSearch;
|
|
|
|
const { data: project, isLoading, error } = useQuery({
|
|
queryKey: [...queryKeys.projects.detail(routeProjectRef), lookupCompanyId ?? null],
|
|
queryFn: () => projectsApi.get(routeProjectRef, lookupCompanyId),
|
|
enabled: canFetchProject,
|
|
});
|
|
const canonicalProjectRef = project ? projectRouteRef(project) : routeProjectRef;
|
|
const projectLookupRef = project?.id ?? routeProjectRef;
|
|
const resolvedCompanyId = project?.companyId ?? selectedCompanyId;
|
|
const experimentalSettingsQuery = useQuery({
|
|
queryKey: queryKeys.instance.experimentalSettings,
|
|
queryFn: () => instanceSettingsApi.getExperimental(),
|
|
retry: false,
|
|
});
|
|
const {
|
|
slots: pluginDetailSlots,
|
|
isLoading: pluginDetailSlotsLoading,
|
|
} = usePluginSlots({
|
|
slotTypes: ["detailTab"],
|
|
entityType: "project",
|
|
companyId: resolvedCompanyId,
|
|
enabled: !!resolvedCompanyId,
|
|
});
|
|
const pluginTabItems = useMemo(
|
|
() => pluginDetailSlots.map((slot) => ({
|
|
value: `plugin:${slot.pluginKey}:${slot.id}` as ProjectPluginTab,
|
|
label: slot.displayName,
|
|
slot,
|
|
})),
|
|
[pluginDetailSlots],
|
|
);
|
|
const activePluginTab = pluginTabItems.find((item) => item.value === activeTab) ?? null;
|
|
const isolatedWorkspacesEnabled = experimentalSettingsQuery.data?.enableIsolatedWorkspaces === true;
|
|
const workspaceTabProjectId = project?.id ?? null;
|
|
const { data: workspaceTabIssues = [], isLoading: isWorkspaceTabIssuesLoading, error: workspaceTabIssuesError } = useQuery({
|
|
queryKey: workspaceTabProjectId && resolvedCompanyId
|
|
? queryKeys.issues.listByProject(resolvedCompanyId, workspaceTabProjectId)
|
|
: ["issues", "__workspace-tab__", "disabled"],
|
|
queryFn: () => issuesApi.list(resolvedCompanyId!, { projectId: workspaceTabProjectId! }),
|
|
enabled: Boolean(resolvedCompanyId && workspaceTabProjectId && isolatedWorkspacesEnabled),
|
|
});
|
|
const {
|
|
data: workspaceTabExecutionWorkspaces = [],
|
|
isLoading: isWorkspaceTabExecutionWorkspacesLoading,
|
|
error: workspaceTabExecutionWorkspacesError,
|
|
} = useQuery({
|
|
queryKey: workspaceTabProjectId && resolvedCompanyId
|
|
? queryKeys.executionWorkspaces.list(resolvedCompanyId, { projectId: workspaceTabProjectId })
|
|
: ["execution-workspaces", "__workspace-tab__", "disabled"],
|
|
queryFn: () => executionWorkspacesApi.list(resolvedCompanyId!, { projectId: workspaceTabProjectId! }),
|
|
enabled: Boolean(resolvedCompanyId && workspaceTabProjectId && isolatedWorkspacesEnabled),
|
|
});
|
|
const workspaceSummaries = useMemo(() => {
|
|
if (!project || !isolatedWorkspacesEnabled) return [];
|
|
return buildProjectWorkspaceSummaries({
|
|
project,
|
|
issues: workspaceTabIssues,
|
|
executionWorkspaces: workspaceTabExecutionWorkspaces,
|
|
});
|
|
}, [project, isolatedWorkspacesEnabled, workspaceTabIssues, workspaceTabExecutionWorkspaces]);
|
|
const showWorkspacesTab = isolatedWorkspacesEnabled && workspaceSummaries.length > 0;
|
|
const workspaceTabDecisionLoaded =
|
|
experimentalSettingsQuery.isFetched &&
|
|
(!isolatedWorkspacesEnabled || (!isWorkspaceTabIssuesLoading && !isWorkspaceTabExecutionWorkspacesLoading));
|
|
const workspaceTabError = (workspaceTabIssuesError ?? workspaceTabExecutionWorkspacesError) as Error | null;
|
|
|
|
useEffect(() => {
|
|
if (!project?.companyId || project.companyId === selectedCompanyId) return;
|
|
setSelectedCompanyId(project.companyId, { source: "route_sync" });
|
|
}, [project?.companyId, selectedCompanyId, setSelectedCompanyId]);
|
|
|
|
const invalidateProject = () => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(routeProjectRef) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(projectLookupRef) });
|
|
if (resolvedCompanyId) {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(resolvedCompanyId) });
|
|
}
|
|
};
|
|
|
|
const updateProject = useMutation({
|
|
mutationFn: (data: Record<string, unknown>) =>
|
|
projectsApi.update(projectLookupRef, data, resolvedCompanyId ?? lookupCompanyId),
|
|
onSuccess: invalidateProject,
|
|
});
|
|
|
|
const archiveProject = useMutation({
|
|
mutationFn: (archived: boolean) =>
|
|
projectsApi.update(
|
|
projectLookupRef,
|
|
{ archivedAt: archived ? new Date().toISOString() : null },
|
|
resolvedCompanyId ?? lookupCompanyId,
|
|
),
|
|
onSuccess: (updatedProject, archived) => {
|
|
invalidateProject();
|
|
const name = updatedProject?.name ?? project?.name ?? "Project";
|
|
if (archived) {
|
|
pushToast({ title: `"${name}" has been archived`, tone: "success" });
|
|
navigate("/dashboard");
|
|
} else {
|
|
pushToast({ title: `"${name}" has been unarchived`, tone: "success" });
|
|
}
|
|
},
|
|
onError: (_, archived) => {
|
|
pushToast({
|
|
title: archived ? "Failed to archive project" : "Failed to unarchive project",
|
|
tone: "error",
|
|
});
|
|
},
|
|
});
|
|
|
|
const uploadImage = useMutation({
|
|
mutationFn: async (file: File) => {
|
|
if (!resolvedCompanyId) throw new Error("No company selected");
|
|
return assetsApi.uploadImage(resolvedCompanyId, file, `projects/${projectLookupRef || "draft"}`);
|
|
},
|
|
});
|
|
|
|
const { data: budgetOverview } = useQuery({
|
|
queryKey: queryKeys.budgets.overview(resolvedCompanyId ?? "__none__"),
|
|
queryFn: () => budgetsApi.overview(resolvedCompanyId!),
|
|
enabled: !!resolvedCompanyId,
|
|
refetchInterval: 30_000,
|
|
staleTime: 5_000,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([
|
|
{ label: "Projects", href: "/projects" },
|
|
{ label: project?.name ?? routeProjectRef ?? "Project" },
|
|
]);
|
|
}, [setBreadcrumbs, project, routeProjectRef]);
|
|
|
|
useEffect(() => {
|
|
if (!project) return;
|
|
if (routeProjectRef === canonicalProjectRef) return;
|
|
if (isProjectPluginTab(activeTab)) {
|
|
navigate(`/projects/${canonicalProjectRef}?tab=${encodeURIComponent(activeTab)}`, { replace: true });
|
|
return;
|
|
}
|
|
if (activeTab === "overview") {
|
|
navigate(`/projects/${canonicalProjectRef}/overview`, { replace: true });
|
|
return;
|
|
}
|
|
if (activeTab === "configuration") {
|
|
navigate(`/projects/${canonicalProjectRef}/configuration`, { replace: true });
|
|
return;
|
|
}
|
|
if (activeTab === "budget") {
|
|
navigate(`/projects/${canonicalProjectRef}/budget`, { replace: true });
|
|
return;
|
|
}
|
|
if (activeTab === "workspaces") {
|
|
navigate(`/projects/${canonicalProjectRef}/workspaces`, { replace: true });
|
|
return;
|
|
}
|
|
if (activeTab === "list") {
|
|
if (filter) {
|
|
navigate(`/projects/${canonicalProjectRef}/issues/${filter}`, { replace: true });
|
|
return;
|
|
}
|
|
navigate(`/projects/${canonicalProjectRef}/issues`, { replace: true });
|
|
return;
|
|
}
|
|
navigate(`/projects/${canonicalProjectRef}`, { replace: true });
|
|
}, [project, routeProjectRef, canonicalProjectRef, activeTab, filter, navigate]);
|
|
|
|
useEffect(() => {
|
|
closePanel();
|
|
return () => closePanel();
|
|
}, [closePanel]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
Object.values(fieldSaveTimers.current).forEach((timer) => {
|
|
if (timer) clearTimeout(timer);
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
const setFieldState = useCallback((field: ProjectConfigFieldKey, state: ProjectFieldSaveState) => {
|
|
setFieldSaveStates((current) => ({ ...current, [field]: state }));
|
|
}, []);
|
|
|
|
const scheduleFieldReset = useCallback((field: ProjectConfigFieldKey, delayMs: number) => {
|
|
const existing = fieldSaveTimers.current[field];
|
|
if (existing) clearTimeout(existing);
|
|
fieldSaveTimers.current[field] = setTimeout(() => {
|
|
setFieldSaveStates((current) => {
|
|
const next = { ...current };
|
|
delete next[field];
|
|
return next;
|
|
});
|
|
delete fieldSaveTimers.current[field];
|
|
}, delayMs);
|
|
}, []);
|
|
|
|
const updateProjectField = useCallback(async (field: ProjectConfigFieldKey, data: Record<string, unknown>) => {
|
|
const requestId = (fieldSaveRequestIds.current[field] ?? 0) + 1;
|
|
fieldSaveRequestIds.current[field] = requestId;
|
|
setFieldState(field, "saving");
|
|
try {
|
|
await projectsApi.update(projectLookupRef, data, resolvedCompanyId ?? lookupCompanyId);
|
|
invalidateProject();
|
|
if (fieldSaveRequestIds.current[field] !== requestId) return;
|
|
setFieldState(field, "saved");
|
|
scheduleFieldReset(field, 1800);
|
|
} catch (error) {
|
|
if (fieldSaveRequestIds.current[field] !== requestId) return;
|
|
setFieldState(field, "error");
|
|
scheduleFieldReset(field, 3000);
|
|
throw error;
|
|
}
|
|
}, [invalidateProject, lookupCompanyId, projectLookupRef, resolvedCompanyId, scheduleFieldReset, setFieldState]);
|
|
|
|
const projectBudgetSummary = useMemo(() => {
|
|
const matched = budgetOverview?.policies.find(
|
|
(policy) => policy.scopeType === "project" && policy.scopeId === (project?.id ?? routeProjectRef),
|
|
);
|
|
if (matched) return matched;
|
|
return {
|
|
policyId: "",
|
|
companyId: resolvedCompanyId ?? "",
|
|
scopeType: "project",
|
|
scopeId: project?.id ?? routeProjectRef,
|
|
scopeName: project?.name ?? "Project",
|
|
metric: "billed_cents",
|
|
windowKind: "lifetime",
|
|
amount: 0,
|
|
observedAmount: 0,
|
|
remainingAmount: 0,
|
|
utilizationPercent: 0,
|
|
warnPercent: 80,
|
|
hardStopEnabled: true,
|
|
notifyEnabled: true,
|
|
isActive: false,
|
|
status: "ok",
|
|
paused: Boolean(project?.pausedAt),
|
|
pauseReason: project?.pauseReason ?? null,
|
|
windowStart: new Date(),
|
|
windowEnd: new Date(),
|
|
} satisfies BudgetPolicySummary;
|
|
}, [budgetOverview?.policies, project, resolvedCompanyId, routeProjectRef]);
|
|
|
|
const budgetMutation = useMutation({
|
|
mutationFn: (amount: number) =>
|
|
budgetsApi.upsertPolicy(resolvedCompanyId!, {
|
|
scopeType: "project",
|
|
scopeId: project?.id ?? routeProjectRef,
|
|
amount,
|
|
windowKind: "lifetime",
|
|
}),
|
|
onSuccess: () => {
|
|
if (!resolvedCompanyId) return;
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.budgets.overview(resolvedCompanyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(routeProjectRef) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(projectLookupRef) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(resolvedCompanyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.dashboard(resolvedCompanyId) });
|
|
},
|
|
});
|
|
|
|
if (pluginTabFromSearch && !pluginDetailSlotsLoading && !activePluginTab) {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
|
|
}
|
|
|
|
if (activeTab === "workspaces" && workspaceTabDecisionLoaded && !showWorkspacesTab) {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
|
|
}
|
|
|
|
// Redirect bare /projects/:id to cached tab or default /issues
|
|
if (routeProjectRef && activeTab === null) {
|
|
let cachedTab: string | null = null;
|
|
if (project?.id) {
|
|
try { cachedTab = localStorage.getItem(`paperclip:project-tab:${project.id}`); } catch {}
|
|
}
|
|
if (cachedTab === "overview") {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/overview`} replace />;
|
|
}
|
|
if (cachedTab === "configuration") {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/configuration`} replace />;
|
|
}
|
|
if (cachedTab === "budget") {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/budget`} replace />;
|
|
}
|
|
if (cachedTab === "workspaces" && workspaceTabDecisionLoaded && showWorkspacesTab) {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/workspaces`} replace />;
|
|
}
|
|
if (cachedTab === "workspaces" && !workspaceTabDecisionLoaded) {
|
|
return <PageSkeleton variant="detail" />;
|
|
}
|
|
if (isProjectPluginTab(cachedTab)) {
|
|
return <Navigate to={`/projects/${canonicalProjectRef}?tab=${encodeURIComponent(cachedTab)}`} replace />;
|
|
}
|
|
return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
|
|
}
|
|
|
|
if (isLoading) return <PageSkeleton variant="detail" />;
|
|
if (error) return <p className="text-sm text-destructive">{error.message}</p>;
|
|
if (!project) return null;
|
|
|
|
const handleTabChange = (tab: ProjectTab) => {
|
|
// Cache the active tab per project
|
|
if (project?.id) {
|
|
try { localStorage.setItem(`paperclip:project-tab:${project.id}`, tab); } catch {}
|
|
}
|
|
if (isProjectPluginTab(tab)) {
|
|
navigate(`/projects/${canonicalProjectRef}?tab=${encodeURIComponent(tab)}`);
|
|
return;
|
|
}
|
|
if (tab === "overview") {
|
|
navigate(`/projects/${canonicalProjectRef}/overview`);
|
|
} else if (tab === "workspaces") {
|
|
navigate(`/projects/${canonicalProjectRef}/workspaces`);
|
|
} else if (tab === "budget") {
|
|
navigate(`/projects/${canonicalProjectRef}/budget`);
|
|
} else if (tab === "configuration") {
|
|
navigate(`/projects/${canonicalProjectRef}/configuration`);
|
|
} else {
|
|
navigate(`/projects/${canonicalProjectRef}/issues`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="h-7 flex items-center">
|
|
<ColorPicker
|
|
currentColor={project.color ?? "var(--primary)"}
|
|
onSelect={(color) => updateProject.mutate({ color })}
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 space-y-2">
|
|
<InlineEditor
|
|
value={project.name}
|
|
onSave={(name) => updateProject.mutate({ name })}
|
|
as="h2"
|
|
className="text-xl font-bold"
|
|
/>
|
|
{project.pauseReason === "budget" ? (
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-destructive/30 bg-destructive/10 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-destructive">
|
|
<span className="h-2 w-2 rounded-full bg-destructive" />
|
|
Paused by budget hard stop
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<PluginSlotOutlet
|
|
slotTypes={["toolbarButton", "contextMenuItem"]}
|
|
entityType="project"
|
|
context={{
|
|
companyId: resolvedCompanyId ?? null,
|
|
companyPrefix: companyPrefix ?? null,
|
|
projectId: project.id,
|
|
projectRef: canonicalProjectRef,
|
|
entityId: project.id,
|
|
entityType: "project",
|
|
}}
|
|
className="flex flex-wrap gap-2"
|
|
itemClassName="inline-flex"
|
|
missingBehavior="placeholder"
|
|
/>
|
|
|
|
<PluginLauncherOutlet
|
|
placementZones={["toolbarButton"]}
|
|
entityType="project"
|
|
context={{
|
|
companyId: resolvedCompanyId ?? null,
|
|
companyPrefix: companyPrefix ?? null,
|
|
projectId: project.id,
|
|
projectRef: canonicalProjectRef,
|
|
entityId: project.id,
|
|
entityType: "project",
|
|
}}
|
|
className="flex flex-wrap gap-2"
|
|
itemClassName="inline-flex"
|
|
/>
|
|
|
|
{/*
|
|
Phase 11 Builder tab strip. Renders iff the current URL resolves
|
|
to one of the new Builder tabs (overview/issues/agents/gates/
|
|
costs/activity/org). Legacy sub-routes (configuration/budget/
|
|
workspaces/plugin) fall through to the existing PageTabBar
|
|
below for backwards compat — see plan §Preserving existing
|
|
behavior.
|
|
*/}
|
|
{(() => {
|
|
const builderTab = resolveBuilderTab(location.pathname, canonicalProjectRef);
|
|
if (!builderTab) return null;
|
|
// Phase 11: no reliable per-project agent count source yet. Show
|
|
// the full (7-tab) strip by default; BuilderTabStrip hides ORG
|
|
// when hasMultipleAgents=false. Leaving this true preserves
|
|
// access to the Org placeholder tab until the data is wired.
|
|
const hasMultipleAgents = true;
|
|
return (
|
|
<div data-testid="project-detail-builder-chrome" className="space-y-6">
|
|
<BuilderTabStrip
|
|
projectRef={canonicalProjectRef}
|
|
activeTab={builderTab}
|
|
hasMultipleAgents={hasMultipleAgents}
|
|
/>
|
|
{builderTab === "overview" && (
|
|
<OverviewTab
|
|
project={{ name: project.name, status: project.status }}
|
|
progress={null}
|
|
activeAgentsCount={0}
|
|
milestones={null}
|
|
originChat={null}
|
|
activity24h={{
|
|
commits: null,
|
|
issuesClosed: null,
|
|
gatesAwaiting: null,
|
|
costBurnedCents: null,
|
|
}}
|
|
/>
|
|
)}
|
|
{builderTab === "issues" && project?.id && resolvedCompanyId && (
|
|
<ProjectIssuesList projectId={project.id} companyId={resolvedCompanyId} />
|
|
)}
|
|
{builderTab === "agents" && <AgentsTab projectId={project.id} />}
|
|
{builderTab === "gates" && <GatesTab projectId={project.id} />}
|
|
{builderTab === "costs" && <CostsTab projectId={project.id} />}
|
|
{builderTab === "activity" && <ActivityTab projectId={project.id} />}
|
|
{builderTab === "org" && <OrgTab projectId={project.id} />}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/*
|
|
Legacy Paperclip chrome — rendered only when the current tab is
|
|
NOT a Builder tab (configuration / budget / workspaces / plugin).
|
|
This preserves existing behavior for every pre-Phase-11
|
|
sub-route while the Builder strip owns the new tabs.
|
|
*/}
|
|
{resolveBuilderTab(location.pathname, canonicalProjectRef) === null && (
|
|
<Tabs value={activeTab ?? "list"} onValueChange={(value) => handleTabChange(value as ProjectTab)}>
|
|
<PageTabBar
|
|
items={[
|
|
{ value: "list", label: "Issues" },
|
|
{ value: "overview", label: "Overview" },
|
|
...(showWorkspacesTab ? [{ value: "workspaces", label: "Workspaces" }] : []),
|
|
{ value: "configuration", label: "Configuration" },
|
|
{ value: "budget", label: "Budget" },
|
|
...pluginTabItems.map((item) => ({
|
|
value: item.value,
|
|
label: item.label,
|
|
})),
|
|
]}
|
|
align="start"
|
|
value={activeTab ?? "list"}
|
|
onValueChange={(value) => handleTabChange(value as ProjectTab)}
|
|
/>
|
|
</Tabs>
|
|
)}
|
|
|
|
{activeTab === "overview" && resolveBuilderTab(location.pathname, canonicalProjectRef) === null && (
|
|
<OverviewContent
|
|
project={project}
|
|
onUpdate={(data) => updateProject.mutate(data)}
|
|
imageUploadHandler={async (file) => {
|
|
const asset = await uploadImage.mutateAsync(file);
|
|
return asset.contentPath;
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === "list" && project?.id && resolvedCompanyId && resolveBuilderTab(location.pathname, canonicalProjectRef) === null && (
|
|
<ProjectIssuesList projectId={project.id} companyId={resolvedCompanyId} />
|
|
)}
|
|
|
|
{activeTab === "workspaces" ? (
|
|
workspaceTabDecisionLoaded ? (
|
|
workspaceTabError ? (
|
|
<p className="text-sm text-destructive">{workspaceTabError.message}</p>
|
|
) : (
|
|
<ProjectWorkspacesContent
|
|
companyId={resolvedCompanyId!}
|
|
projectId={project.id}
|
|
projectRef={canonicalProjectRef}
|
|
summaries={workspaceSummaries}
|
|
/>
|
|
)
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">Loading workspaces...</p>
|
|
)
|
|
) : null}
|
|
|
|
{activeTab === "configuration" && (
|
|
<div className="max-w-4xl">
|
|
<ProjectProperties
|
|
project={project}
|
|
onUpdate={(data) => updateProject.mutate(data)}
|
|
onFieldUpdate={updateProjectField}
|
|
getFieldSaveState={(field) => fieldSaveStates[field] ?? "idle"}
|
|
onArchive={(archived) => archiveProject.mutate(archived)}
|
|
archivePending={archiveProject.isPending}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "budget" && resolvedCompanyId ? (
|
|
<div className="max-w-3xl">
|
|
<BudgetPolicyCard
|
|
summary={projectBudgetSummary}
|
|
variant="plain"
|
|
isSaving={budgetMutation.isPending}
|
|
onSave={(amount) => budgetMutation.mutate(amount)}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
{activePluginTab && (
|
|
<PluginSlotMount
|
|
slot={activePluginTab.slot}
|
|
context={{
|
|
companyId: resolvedCompanyId,
|
|
companyPrefix: companyPrefix ?? null,
|
|
projectId: project.id,
|
|
projectRef: canonicalProjectRef,
|
|
entityId: project.id,
|
|
entityType: "project",
|
|
}}
|
|
missingBehavior="placeholder"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|