mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-17 03:10:38 +09:00
Add shared sidebar section controls (#5585)
## Thinking Path > - Paperclip is the control plane for AI-agent companies. > - The board UI sidebar is one of the main ways operators scan active agents and projects. > - Agents and projects had duplicated section header behavior, which made collapse controls, add actions, and future section menus harder to keep consistent. > - Operators also need lightweight ways to switch between their curated sidebar order and common scan orders like alphabetical or recent activity. > - This pull request introduces a shared sidebar section header and uses it for the Agents and Projects sidebar sections. > - The benefit is a more consistent sidebar surface with reusable header controls and persisted sort modes without losing the existing drag-ordered Top view. ## What Changed - Added a reusable `SidebarSection` component that supports collapsible content, header actions, and section dropdown menus. - Updated the Agents sidebar section to use the shared header and add persisted `Top`, `Alphabetical`, and `Recent` sort modes. - Updated the Projects sidebar section to use the shared header and add persisted `Top`, `Alphabetical`, and `Recent` sort modes. - Added local-storage helpers and cross-tab update events for agent/project sidebar sort preferences. - Added focused component coverage for the shared section behavior and the updated Agents/Projects sidebar ordering paths. ## Verification - `pnpm run preflight:workspace-links && pnpm exec vitest run ui/src/components/SidebarSection.test.tsx ui/src/components/SidebarProjects.test.tsx ui/src/components/SidebarAgents.test.tsx` - 3 test files passed - 18 tests passed ## Risks - Low-to-moderate UI risk: this changes sidebar section header interactions and adds persisted client-side sort preferences. - Drag ordering is intentionally limited to `Top` mode; non-top modes render sorted lists and do not persist drag order changes. - No database migrations or API contract changes. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent, GPT-5-based model, tool-use enabled; exact hosted model build/context-window identifier was not exposed in this session. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] 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] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
433dfed33d
commit
e3af7aa489
8 changed files with 1345 additions and 189 deletions
|
|
@ -145,6 +145,34 @@ async function openAgentMenu(label = "Open actions for Alpha") {
|
|||
await flushReact();
|
||||
}
|
||||
|
||||
async function openAgentsSectionMenu() {
|
||||
const trigger = document.body.querySelector('button[aria-label="Agents section actions"]');
|
||||
expect(trigger).not.toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
|
||||
trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flushReact();
|
||||
}
|
||||
|
||||
async function chooseSortMode(label: string) {
|
||||
const item = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-radio-item"]'))
|
||||
.find((element) => element.textContent?.includes(label));
|
||||
expect(item).toBeTruthy();
|
||||
|
||||
await act(async () => {
|
||||
item?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flushReact();
|
||||
}
|
||||
|
||||
function agentLinkLabels(container: HTMLElement) {
|
||||
return Array.from(container.querySelectorAll('a[href^="/agents/"]'))
|
||||
.map((anchor) => anchor.textContent?.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
describe("SidebarAgents", () => {
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot> | null;
|
||||
|
|
@ -165,6 +193,7 @@ describe("SidebarAgents", () => {
|
|||
user: { id: "user-1" },
|
||||
});
|
||||
mockHeartbeatsApi.liveRunsForCompany.mockResolvedValue([]);
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
|
|
@ -177,10 +206,11 @@ describe("SidebarAgents", () => {
|
|||
queryClient.clear();
|
||||
container.remove();
|
||||
document.body.innerHTML = "";
|
||||
localStorage.clear();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("shows edit and pause actions for an active sidebar agent", async () => {
|
||||
async function renderSidebarAgents() {
|
||||
const currentRoot = createRoot(container);
|
||||
root = currentRoot;
|
||||
|
||||
|
|
@ -192,6 +222,97 @@ describe("SidebarAgents", () => {
|
|||
);
|
||||
});
|
||||
await flushReact();
|
||||
}
|
||||
|
||||
it("keeps top mode in stored org-aware order", async () => {
|
||||
localStorage.setItem("paperclip.agentOrder:company-1:user-1", JSON.stringify(["agent-b", "agent-a", "agent-c"]));
|
||||
mockAgentsApi.list.mockResolvedValue([
|
||||
makeAgent({ id: "agent-a", name: "Alpha", urlKey: "alpha" }),
|
||||
makeAgent({ id: "agent-b", name: "Bravo", urlKey: "bravo" }),
|
||||
makeAgent({ id: "agent-c", name: "Charlie", urlKey: "charlie" }),
|
||||
]);
|
||||
|
||||
await renderSidebarAgents();
|
||||
|
||||
expect(agentLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]);
|
||||
});
|
||||
|
||||
it("uses the heading for section menu and the plus button for agent creation", async () => {
|
||||
await renderSidebarAgents();
|
||||
|
||||
const sectionMenuTrigger = container.querySelector('button[aria-label="Agents section actions"]');
|
||||
expect(sectionMenuTrigger?.textContent).toContain("Agents");
|
||||
expect(sectionMenuTrigger?.querySelector("svg")).toBeNull();
|
||||
|
||||
const newAgentButton = container.querySelector('button[aria-label="New agent"]');
|
||||
expect(newAgentButton).toBeTruthy();
|
||||
await act(async () => {
|
||||
newAgentButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(mockOpenNewAgent).toHaveBeenCalledTimes(1);
|
||||
|
||||
await openAgentsSectionMenu();
|
||||
|
||||
const newAgentItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
|
||||
.find((element) => element.textContent?.includes("New agent"));
|
||||
expect(newAgentItem).toBeFalsy();
|
||||
const browseLink = Array.from(document.body.querySelectorAll("a"))
|
||||
.find((element) => element.textContent?.includes("Browse agents"));
|
||||
expect(browseLink?.getAttribute("href")).toBe("/agents/all");
|
||||
});
|
||||
|
||||
it("sorts alphabetically and persists the selected mode per company and user", async () => {
|
||||
mockAgentsApi.list.mockResolvedValue([
|
||||
makeAgent({ id: "agent-c", name: "Charlie", urlKey: "charlie" }),
|
||||
makeAgent({ id: "agent-a", name: "Alpha", urlKey: "alpha" }),
|
||||
makeAgent({ id: "agent-b", name: "Bravo", urlKey: "bravo" }),
|
||||
]);
|
||||
|
||||
await renderSidebarAgents();
|
||||
await openAgentsSectionMenu();
|
||||
await chooseSortMode("Alphabetical");
|
||||
|
||||
expect(agentLinkLabels(container)).toEqual(["Alpha", "Bravo", "Charlie"]);
|
||||
expect(localStorage.getItem("paperclip.agentSortMode:company-1:user-1")).toBe("alphabetical");
|
||||
});
|
||||
|
||||
it("sorts recent agents by heartbeat, updated time, and created time descending", async () => {
|
||||
mockAgentsApi.list.mockResolvedValue([
|
||||
makeAgent({
|
||||
id: "agent-a",
|
||||
name: "Alpha",
|
||||
urlKey: "alpha",
|
||||
lastHeartbeatAt: null,
|
||||
updatedAt: new Date("2026-01-20T00:00:00Z"),
|
||||
createdAt: new Date("2026-01-01T00:00:00Z"),
|
||||
}),
|
||||
makeAgent({
|
||||
id: "agent-b",
|
||||
name: "Bravo",
|
||||
urlKey: "bravo",
|
||||
lastHeartbeatAt: new Date("2026-01-10T00:00:00Z"),
|
||||
updatedAt: new Date("2026-01-02T00:00:00Z"),
|
||||
createdAt: new Date("2026-01-02T00:00:00Z"),
|
||||
}),
|
||||
makeAgent({
|
||||
id: "agent-c",
|
||||
name: "Charlie",
|
||||
urlKey: "charlie",
|
||||
lastHeartbeatAt: null,
|
||||
updatedAt: new Date("2026-01-20T00:00:00Z"),
|
||||
createdAt: new Date("2026-01-03T00:00:00Z"),
|
||||
}),
|
||||
]);
|
||||
|
||||
await renderSidebarAgents();
|
||||
await openAgentsSectionMenu();
|
||||
await chooseSortMode("Recent");
|
||||
|
||||
expect(agentLinkLabels(container)).toEqual(["Bravo", "Charlie", "Alpha"]);
|
||||
});
|
||||
|
||||
it("shows edit and pause actions for an active sidebar agent", async () => {
|
||||
await renderSidebarAgents();
|
||||
await openAgentMenu();
|
||||
|
||||
const editLink = Array.from(document.body.querySelectorAll("a"))
|
||||
|
|
@ -216,17 +337,8 @@ describe("SidebarAgents", () => {
|
|||
mockAgentsApi.list.mockResolvedValue([
|
||||
makeAgent({ status: "paused", pauseReason: "manual", pausedAt: new Date("2026-01-02T00:00:00Z") }),
|
||||
]);
|
||||
const currentRoot = createRoot(container);
|
||||
root = currentRoot;
|
||||
|
||||
await act(async () => {
|
||||
currentRoot.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<SidebarAgents />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await renderSidebarAgents();
|
||||
await openAgentMenu();
|
||||
|
||||
const resumeItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
|
||||
|
|
@ -248,17 +360,8 @@ describe("SidebarAgents", () => {
|
|||
makeAgent({ id: "agent-2", name: "Beta", urlKey: "beta" }),
|
||||
]);
|
||||
mockAgentsApi.pause.mockImplementation(() => new Promise(() => {}));
|
||||
const currentRoot = createRoot(container);
|
||||
root = currentRoot;
|
||||
|
||||
await act(async () => {
|
||||
currentRoot.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<SidebarAgents />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await renderSidebarAgents();
|
||||
await openAgentMenu();
|
||||
|
||||
const pauseItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
|
||||
|
|
@ -287,17 +390,8 @@ describe("SidebarAgents", () => {
|
|||
pausedAt: new Date("2026-01-02T00:00:00Z"),
|
||||
}),
|
||||
]);
|
||||
const currentRoot = createRoot(container);
|
||||
root = currentRoot;
|
||||
|
||||
await act(async () => {
|
||||
currentRoot.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<SidebarAgents />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await renderSidebarAgents();
|
||||
await openAgentMenu();
|
||||
|
||||
const budgetPausedItem = Array.from(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue