Add shared sidebar section controls #5585

PR
PR description

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 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

  • I have included a thinking path that traces from project context to this change
  • I have specified the model used (with version and capability details)
  • I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work
  • I have run tests locally and they pass
  • I have added or updated tests where applicable
  • If this change affects the UI, I have included before/after screenshots
  • I have updated relevant documentation to reflect my changes
  • I have considered and documented any risks above
  • I will address all Greptile and reviewer comments before requesting merge
CUT
cutter bot commented just now

Cutter Summary

The sidebar's Projects and Agents section headers gain a section-actions menu trigger that, when opened, exposes a Browse link and a Top/Alphabetical/Recent sort selector.