eaef47f4c7
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The board UI is the control surface for issues, projects, agents, goals, workspaces, and operator settings. > - The existing navigation and list surfaces make several high-frequency workflows feel harder to scan than they should, especially around projects and agents. > - The product direction is to improve those surfaces without breaking the existing route model or forcing a new IA on every operator at once. > - This pull request now keeps the dependent IA, project identity, and agent-list visual refresh work together while the Issue-to-Task copy migration is split into #7651. > - The benefit is a clearer left nav, better project identity, denser agent/project list rows, and brand-aligned status treatment while preserving the classic default experience behind a flag. ## Linked Issues or Issue Description Refs #7645 Refs #7651 Internal planning/work references: PAP-53, PAP-56, PAP-58, PAP-59, PAP-60, PAP-61, PAP-68, PAP-69, PAP-70, PAP-71, PAP-72, PAP-75, PAP-76, PAP-80, PAP-85, PAP-86, PAP-87, PAP-88, PAP-89. ## What Changed - Adds `enableStreamlinedLeftNavigation`, defaulting off, and gates sidebar presentation so classic navigation remains the default. - Adds project icon persistence, validation, portability, picker UI, and `ProjectTile` rendering while defaulting new projects to neutral gray. - Adds projects-list task-count and budget summary data with focused server/shared/UI coverage. - Refreshes agent list rows, row actions, active/recent sidebar behavior, and status capsule/chip styling for the approved brand state system. - Removes the placeholder Conference room and Artifacts nav/routes from the finalized experimental nav direction. - Removes `pnpm-lock.yaml` and the Issue-to-Task copy migration from this PR diff; the copy migration now lives in #7651. ## Verification - Existing branch verification from the authored commits: UI typecheck, targeted unit tests, and light/dark visual checks for `/agents`, agent detail, and design-guide status states. - Maintainer cleanup verification on `75e34e5`: `git diff --check origin/master...HEAD` passed, the `design/` diff is empty, and the PR diff is 61 files, below Greptile's 100-file review limit. - `pnpm --filter @paperclipai/ui build` passed. - `NODE_ENV=test pnpm exec vitest run ui/src/components/Sidebar.test.tsx` passed: 1 file, 8 tests. - CI and Greptile should rerun on the latest push. ## Risks - Broad UI surface area: the experimental flag keeps the classic nav default, but changed shared components such as `EntityRow`, `ProjectTile`, and agent status badges could affect multiple pages. - Database migration: `projects.icon` is additive and nullable, but migration ordering and portability import/export must stay aligned. - The Issue-to-Task copy migration is now separated into #7651, so reviewers should evaluate this PR as IA/project/agent presentation work only. - Visual regressions are possible across smaller widths because the PR intentionally changes dense list-row layouts. ## Model Used Claude Opus 4.8 assisted the original feature commits. Paperclip-Paperclip agents assisted some planning/design commits. Codex / GPT-5-class coding agent with shell, GitHub CLI, and repository access performed this PR-readiness cleanup and split. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Dotta <bippadotta@protonmail.com>
219 lines
6.5 KiB
TypeScript
219 lines
6.5 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import {
|
|
armIssueDetailInboxQuickArchive,
|
|
createIssueDetailLocationState,
|
|
createIssueDetailPath,
|
|
hasLegacyIssueDetailQuery,
|
|
readIssueDetailHeaderSeed,
|
|
readIssueDetailLocationState,
|
|
readIssueDetailBreadcrumb,
|
|
rememberIssueDetailLocationState,
|
|
shouldArmIssueDetailInboxQuickArchive,
|
|
withIssueDetailHeaderSeed,
|
|
} from "./issueDetailBreadcrumb";
|
|
import type { Issue } from "@paperclipai/shared";
|
|
|
|
const sessionStorageMock = (() => {
|
|
const store = new Map<string, string>();
|
|
return {
|
|
getItem: (key: string) => store.get(key) ?? null,
|
|
setItem: (key: string, value: string) => {
|
|
store.set(key, value);
|
|
},
|
|
clear: () => {
|
|
store.clear();
|
|
},
|
|
};
|
|
})();
|
|
|
|
Object.defineProperty(globalThis, "window", {
|
|
configurable: true,
|
|
value: { sessionStorage: sessionStorageMock },
|
|
});
|
|
|
|
describe("issueDetailBreadcrumb", () => {
|
|
function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|
return {
|
|
id: "11111111-1111-4111-8111-111111111111",
|
|
companyId: "company-1",
|
|
projectId: "project-1",
|
|
projectWorkspaceId: null,
|
|
goalId: null,
|
|
parentId: null,
|
|
title: "Prefilled issue title",
|
|
description: null,
|
|
status: "todo",
|
|
priority: "medium",
|
|
assigneeAgentId: null,
|
|
assigneeUserId: null,
|
|
checkoutRunId: null,
|
|
executionRunId: null,
|
|
executionAgentNameKey: null,
|
|
executionLockedAt: null,
|
|
createdByAgentId: null,
|
|
createdByUserId: null,
|
|
issueNumber: 42,
|
|
identifier: "PAP-42",
|
|
originKind: "manual",
|
|
originId: null,
|
|
originRunId: null,
|
|
requestDepth: 0,
|
|
billingCode: null,
|
|
assigneeAdapterOverrides: null,
|
|
executionPolicy: null,
|
|
executionState: null,
|
|
executionWorkspaceId: null,
|
|
executionWorkspacePreference: null,
|
|
executionWorkspaceSettings: null,
|
|
startedAt: null,
|
|
completedAt: null,
|
|
cancelledAt: null,
|
|
hiddenAt: null,
|
|
project: {
|
|
id: "project-1",
|
|
companyId: "company-1",
|
|
urlKey: "paperclip-app",
|
|
goalId: null,
|
|
goalIds: [],
|
|
goals: [],
|
|
name: "Paperclip App",
|
|
description: null,
|
|
status: "in_progress",
|
|
leadAgentId: null,
|
|
targetDate: null,
|
|
color: null,
|
|
icon: null,
|
|
env: null,
|
|
pauseReason: null,
|
|
pausedAt: null,
|
|
executionWorkspacePolicy: null,
|
|
codebase: {
|
|
workspaceId: null,
|
|
repoUrl: null,
|
|
repoRef: null,
|
|
defaultRef: null,
|
|
repoName: null,
|
|
localFolder: null,
|
|
managedFolder: "/tmp/paperclip-app",
|
|
effectiveLocalFolder: "/tmp/paperclip-app",
|
|
origin: "local_folder",
|
|
},
|
|
workspaces: [],
|
|
primaryWorkspace: null,
|
|
archivedAt: null,
|
|
createdAt: new Date(),
|
|
updatedAt: new Date(),
|
|
},
|
|
goal: null,
|
|
currentExecutionWorkspace: null,
|
|
workProducts: [],
|
|
mentionedProjects: [],
|
|
myLastTouchAt: null,
|
|
lastExternalCommentAt: null,
|
|
lastActivityAt: null,
|
|
isUnreadForMe: false,
|
|
createdAt: new Date(),
|
|
updatedAt: new Date(),
|
|
...overrides,
|
|
workMode: overrides.workMode ?? "standard",
|
|
};
|
|
}
|
|
|
|
it("returns clean issue detail paths", () => {
|
|
expect(createIssueDetailPath("PAP-465")).toBe("/issues/PAP-465");
|
|
});
|
|
|
|
it("prefers the full breadcrumb from route state", () => {
|
|
const state = createIssueDetailLocationState("Inbox", "/inbox/mine", "inbox");
|
|
|
|
expect(readIssueDetailBreadcrumb("PAP-465", state, "?from=issues")).toEqual({
|
|
label: "Inbox",
|
|
href: "/inbox/mine",
|
|
});
|
|
});
|
|
|
|
it("falls back to the source query param when route state is unavailable", () => {
|
|
expect(readIssueDetailBreadcrumb("PAP-465", null, "?from=inbox")).toEqual({
|
|
label: "Inbox",
|
|
href: "/inbox",
|
|
});
|
|
});
|
|
|
|
it("can detect legacy query-based breadcrumb links", () => {
|
|
expect(hasLegacyIssueDetailQuery("?from=inbox&fromHref=%2Finbox%2Fmine")).toBe(true);
|
|
expect(hasLegacyIssueDetailQuery("?q=test")).toBe(false);
|
|
});
|
|
|
|
it("restores the exact breadcrumb href from the query fallback", () => {
|
|
expect(
|
|
readIssueDetailBreadcrumb("PAP-465", null, "?from=inbox&fromHref=%2FPAP%2Finbox%2Funread"),
|
|
).toEqual({
|
|
label: "Inbox",
|
|
href: "/PAP/inbox/unread",
|
|
});
|
|
});
|
|
|
|
it("reads hidden breadcrumb context from session storage when route state is unavailable", () => {
|
|
const state = createIssueDetailLocationState("Inbox", "/inbox/mine", "inbox");
|
|
sessionStorageMock.clear();
|
|
rememberIssueDetailLocationState("PAP-465", state);
|
|
|
|
expect(
|
|
readIssueDetailLocationState("PAP-465", null),
|
|
).toEqual({
|
|
issueDetailBreadcrumb: { label: "Inbox", href: "/inbox/mine" },
|
|
issueDetailSource: "inbox",
|
|
issueDetailInboxQuickArchiveArmed: false,
|
|
});
|
|
});
|
|
|
|
it("attaches and reads issue header seed data from route state", () => {
|
|
const seededState = withIssueDetailHeaderSeed(
|
|
createIssueDetailLocationState("Issues", "/issues", "issues"),
|
|
createIssue(),
|
|
);
|
|
|
|
expect(readIssueDetailHeaderSeed(seededState)).toEqual({
|
|
id: "11111111-1111-4111-8111-111111111111",
|
|
identifier: "PAP-42",
|
|
title: "Prefilled issue title",
|
|
status: "todo",
|
|
priority: "medium",
|
|
projectId: "project-1",
|
|
projectName: "Paperclip App",
|
|
originKind: "manual",
|
|
originId: null,
|
|
});
|
|
});
|
|
|
|
it("persists issue header seed data when breadcrumb state is remembered", () => {
|
|
const seededState = withIssueDetailHeaderSeed(
|
|
createIssueDetailLocationState("Inbox", "/inbox/mine", "inbox"),
|
|
createIssue(),
|
|
);
|
|
|
|
sessionStorageMock.clear();
|
|
rememberIssueDetailLocationState("PAP-42", seededState);
|
|
|
|
const restoredState = readIssueDetailLocationState("PAP-42", null);
|
|
expect(readIssueDetailHeaderSeed(restoredState)).toEqual({
|
|
id: "11111111-1111-4111-8111-111111111111",
|
|
identifier: "PAP-42",
|
|
title: "Prefilled issue title",
|
|
status: "todo",
|
|
priority: "medium",
|
|
projectId: "project-1",
|
|
projectName: "Paperclip App",
|
|
originKind: "manual",
|
|
originId: null,
|
|
});
|
|
});
|
|
|
|
it("can arm quick archive only for explicit inbox keyboard entry state", () => {
|
|
const state = createIssueDetailLocationState("Inbox", "/inbox/mine", "inbox");
|
|
|
|
expect(shouldArmIssueDetailInboxQuickArchive(state)).toBe(false);
|
|
expect(shouldArmIssueDetailInboxQuickArchive(armIssueDetailInboxQuickArchive(state))).toBe(true);
|
|
});
|
|
});
|