@@ -778,19 +783,21 @@ export function InviteLandingPage() {
- {shouldAutoAcceptHumanInvite
- ? "Submitting join request"
+ {isCurrentMember
+ ? "Already in this company"
+ : shouldAutoAcceptHumanInvite
+ ? "Completing company access"
: invite.inviteType === "bootstrap_ceo"
? "Accept bootstrap invite"
: "Accept company invite"}
{shouldAutoAcceptHumanInvite
- ? `Submitting your join request for ${companyDisplayName}.`
+ ? `Granting your access to ${companyDisplayName}.`
: isCurrentMember
? `This account already belongs to ${companyDisplayName}.`
: `This will ${
- invite.inviteType === "bootstrap_ceo" ? "finish setting up Paperclip" : `submit or complete your join request for ${companyDisplayName}`
+ invite.inviteType === "bootstrap_ceo" ? "finish setting up Paperclip" : `grant or complete your access to ${companyDisplayName}`
}.`}
@@ -802,8 +809,16 @@ export function InviteLandingPage() {
) : (
diff --git a/ui/src/pages/InviteUxLab.tsx b/ui/src/pages/InviteUxLab.tsx
index 9a356d0a..38bcd24c 100644
--- a/ui/src/pages/InviteUxLab.tsx
+++ b/ui/src/pages/InviteUxLab.tsx
@@ -371,10 +371,10 @@ function AcceptInvitePreview({
Accept company invite
{autoAccept
- ? "Submitting your join request for Acme Robotics."
+ ? "Granting your access to Acme Robotics."
: isCurrentMember
? "This account already belongs to Acme Robotics."
- : "This will submit or complete your join request for Acme Robotics."}
+ : "This will grant or complete your access to Acme Robotics."}
{error ?
{error}
: null}
@@ -572,7 +572,7 @@ function CompanyInvitesPreview() {
- Each invite link is single-use. The first successful use consumes the link and creates or reuses the matching join request before approval.
+ Each invite link is single-use. Human invitees get the selected role immediately after sign-in; agent invites still create a join request for approval.
diff --git a/ui/src/pages/Projects.test.tsx b/ui/src/pages/Projects.test.tsx
new file mode 100644
index 00000000..185db766
--- /dev/null
+++ b/ui/src/pages/Projects.test.tsx
@@ -0,0 +1,164 @@
+// @vitest-environment jsdom
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { Project } from "@paperclipai/shared";
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Projects } from "./Projects";
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const mockProjectsApi = vi.hoisted(() => ({
+ list: vi.fn(),
+}));
+const mockOpenNewProject = vi.hoisted(() => vi.fn());
+const mockSetBreadcrumbs = vi.hoisted(() => vi.fn());
+
+vi.mock("../api/projects", () => ({ projectsApi: mockProjectsApi }));
+vi.mock("@/lib/router", () => ({
+ Link: ({ children, to }: { children?: ReactNode; to: string }) =>
{children},
+}));
+vi.mock("../context/CompanyContext", () => ({
+ useCompany: () => ({ selectedCompanyId: "company-1" }),
+}));
+vi.mock("../context/DialogContext", () => ({
+ useDialogActions: () => ({ openNewProject: mockOpenNewProject }),
+}));
+vi.mock("../context/BreadcrumbContext", () => ({
+ useBreadcrumbs: () => ({ setBreadcrumbs: mockSetBreadcrumbs }),
+}));
+
+function project(overrides: Partial
): Project {
+ const now = new Date("2026-05-01T00:00:00Z");
+ return {
+ id: "project-1",
+ companyId: "company-1",
+ urlKey: "project-1",
+ goalId: null,
+ goalIds: [],
+ goals: [],
+ name: "Project",
+ description: null,
+ status: "in_progress",
+ leadAgentId: null,
+ targetDate: null,
+ color: "#14b8a6",
+ env: null,
+ pauseReason: null,
+ pausedAt: null,
+ executionWorkspacePolicy: null,
+ codebase: {
+ workspaceId: null,
+ repoUrl: null,
+ repoRef: null,
+ defaultRef: null,
+ repoName: null,
+ localFolder: null,
+ managedFolder: "/tmp/project-1",
+ effectiveLocalFolder: "/tmp/project-1",
+ origin: "managed_checkout",
+ },
+ workspaces: [],
+ primaryWorkspace: null,
+ archivedAt: null,
+ createdAt: now,
+ updatedAt: now,
+ ...overrides,
+ };
+}
+
+async function renderProjects(container: HTMLElement) {
+ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+ let root: Root | null = null;
+
+ await act(async () => {
+ root = createRoot(container);
+ root.render(
+
+
+ ,
+ );
+ });
+ await act(async () => {
+ await new Promise((resolve) => setTimeout(resolve, 0));
+ await new Promise((resolve) => setTimeout(resolve, 0));
+ });
+
+ return root;
+}
+
+function projectLinkNames(container: HTMLElement): string[] {
+ return Array.from(container.querySelectorAll("a[href^='/projects/']")).map((link) => {
+ const title = link.querySelector("span.truncate");
+ return title?.textContent ?? "";
+ });
+}
+
+describe("Projects", () => {
+ let root: Root | null = null;
+ let container: HTMLDivElement;
+
+ beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ mockProjectsApi.list.mockResolvedValue([
+ project({
+ id: "project-bravo",
+ urlKey: "bravo",
+ name: "Bravo",
+ description: null,
+ updatedAt: new Date("2026-05-02T00:00:00Z"),
+ }),
+ project({
+ id: "project-alpha",
+ urlKey: "alpha",
+ name: "Alpha",
+ description: "First project",
+ updatedAt: new Date("2026-05-01T00:00:00Z"),
+ }),
+ project({
+ id: "project-charlie",
+ urlKey: "charlie",
+ name: "Charlie",
+ description: null,
+ updatedAt: new Date("2026-05-03T00:00:00Z"),
+ }),
+ ]);
+ });
+
+ afterEach(() => {
+ act(() => root?.unmount());
+ root = null;
+ container.remove();
+ vi.clearAllMocks();
+ });
+
+ it("sorts projects by name by default and can switch sort mode", async () => {
+ root = await renderProjects(container);
+
+ expect(projectLinkNames(container)).toEqual(["Alpha", "Bravo", "Charlie"]);
+
+ const select = container.querySelector("select");
+ expect(select).not.toBeNull();
+
+ await act(async () => {
+ select!.value = "updated";
+ select!.dispatchEvent(new Event("change", { bubbles: true }));
+ });
+
+ expect(projectLinkNames(container)).toEqual(["Charlie", "Bravo", "Alpha"]);
+ });
+
+ it("reserves description line height for projects without descriptions", async () => {
+ root = await renderProjects(container);
+
+ const bravoLink = Array.from(container.querySelectorAll("a")).find((link) =>
+ link.textContent?.includes("Bravo"),
+ );
+ const hiddenDescriptionLine = bravoLink?.querySelector("p[aria-hidden='true']");
+
+ expect(hiddenDescriptionLine).not.toBeNull();
+ expect(hiddenDescriptionLine?.className).toContain("min-h-4");
+ });
+});
diff --git a/ui/src/pages/Projects.tsx b/ui/src/pages/Projects.tsx
index 08d246a8..a26c17dd 100644
--- a/ui/src/pages/Projects.tsx
+++ b/ui/src/pages/Projects.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
+import type { Project } from "@paperclipai/shared";
import { projectsApi } from "../api/projects";
import { useCompany } from "../context/CompanyContext";
import { useDialogActions } from "../context/DialogContext";
@@ -11,12 +12,67 @@ import { EmptyState } from "../components/EmptyState";
import { PageSkeleton } from "../components/PageSkeleton";
import { formatDate, projectUrl } from "../lib/utils";
import { Button } from "@/components/ui/button";
-import { Hexagon, Plus } from "lucide-react";
+import { ArrowUpDown, Hexagon, Plus } from "lucide-react";
+
+type ProjectSortMode = "name" | "updated" | "targetDate" | "status";
+
+const PROJECT_SORT_LABELS: Record = {
+ name: "Name",
+ updated: "Recently updated",
+ targetDate: "Target date",
+ status: "Status",
+};
+
+const PROJECT_STATUS_RANK: Record = {
+ in_progress: 0,
+ planned: 1,
+ backlog: 2,
+ completed: 3,
+ cancelled: 4,
+};
+
+function projectTime(project: Project, field: "createdAt" | "updatedAt"): number {
+ const value = project[field];
+ const time = value instanceof Date ? value.getTime() : new Date(value).getTime();
+ return Number.isFinite(time) ? time : 0;
+}
+
+function compareProjectNames(left: Project, right: Project): number {
+ const nameDiff = left.name.localeCompare(right.name, undefined, { sensitivity: "base" });
+ return nameDiff !== 0 ? nameDiff : left.id.localeCompare(right.id);
+}
+
+function compareTargetDates(left: Project, right: Project): number {
+ if (!left.targetDate && !right.targetDate) return compareProjectNames(left, right);
+ if (!left.targetDate) return 1;
+ if (!right.targetDate) return -1;
+
+ const dateDiff = left.targetDate.localeCompare(right.targetDate);
+ return dateDiff !== 0 ? dateDiff : compareProjectNames(left, right);
+}
+
+function sortProjects(projects: Project[], sortMode: ProjectSortMode): Project[] {
+ return [...projects].sort((left, right) => {
+ if (sortMode === "updated") {
+ const updatedDiff = projectTime(right, "updatedAt") - projectTime(left, "updatedAt");
+ return updatedDiff !== 0 ? updatedDiff : compareProjectNames(left, right);
+ }
+ if (sortMode === "targetDate") {
+ return compareTargetDates(left, right);
+ }
+ if (sortMode === "status") {
+ const statusDiff = PROJECT_STATUS_RANK[left.status] - PROJECT_STATUS_RANK[right.status];
+ return statusDiff !== 0 ? statusDiff : compareProjectNames(left, right);
+ }
+ return compareProjectNames(left, right);
+ });
+}
export function Projects() {
const { selectedCompanyId } = useCompany();
const { openNewProject } = useDialogActions();
const { setBreadcrumbs } = useBreadcrumbs();
+ const [sortMode, setSortMode] = useState("name");
useEffect(() => {
setBreadcrumbs([{ label: "Projects" }]);
@@ -31,6 +87,10 @@ export function Projects() {
() => (allProjects ?? []).filter((p) => !p.archivedAt),
[allProjects],
);
+ const sortedProjects = useMemo(
+ () => sortProjects(projects, sortMode),
+ [projects, sortMode],
+ );
if (!selectedCompanyId) {
return ;
@@ -42,7 +102,22 @@ export function Projects() {
return (
-
+
+