forked from farhoodlabs/paperclip
e3af7aa489
## 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>
148 lines
4.5 KiB
TypeScript
148 lines
4.5 KiB
TypeScript
import type { Agent } from "@paperclipai/shared";
|
|
|
|
export const AGENT_ORDER_UPDATED_EVENT = "paperclip:agent-order-updated";
|
|
export const AGENT_SORT_MODE_UPDATED_EVENT = "paperclip:agent-sort-mode-updated";
|
|
const AGENT_ORDER_STORAGE_PREFIX = "paperclip.agentOrder";
|
|
const AGENT_SORT_MODE_STORAGE_PREFIX = "paperclip.agentSortMode";
|
|
const ANONYMOUS_USER_ID = "anonymous";
|
|
|
|
export type AgentSidebarSortMode = "top" | "alphabetical" | "recent";
|
|
|
|
type AgentOrderUpdatedDetail = {
|
|
storageKey: string;
|
|
orderedIds: string[];
|
|
};
|
|
|
|
export type AgentSortModeUpdatedDetail = {
|
|
storageKey: string;
|
|
sortMode: AgentSidebarSortMode;
|
|
};
|
|
|
|
function normalizeIdList(value: unknown): string[] {
|
|
if (!Array.isArray(value)) return [];
|
|
return value.filter((item): item is string => typeof item === "string" && item.length > 0);
|
|
}
|
|
|
|
function normalizeSortMode(value: unknown): AgentSidebarSortMode {
|
|
return value === "alphabetical" || value === "recent" || value === "top" ? value : "top";
|
|
}
|
|
|
|
function resolveUserId(userId: string | null | undefined): string {
|
|
if (!userId) return ANONYMOUS_USER_ID;
|
|
const trimmed = userId.trim();
|
|
return trimmed.length > 0 ? trimmed : ANONYMOUS_USER_ID;
|
|
}
|
|
|
|
export function getAgentOrderStorageKey(companyId: string, userId: string | null | undefined): string {
|
|
return `${AGENT_ORDER_STORAGE_PREFIX}:${companyId}:${resolveUserId(userId)}`;
|
|
}
|
|
|
|
export function getAgentSortModeStorageKey(companyId: string, userId: string | null | undefined): string {
|
|
return `${AGENT_SORT_MODE_STORAGE_PREFIX}:${companyId}:${resolveUserId(userId)}`;
|
|
}
|
|
|
|
export function readAgentOrder(storageKey: string): string[] {
|
|
try {
|
|
const raw = localStorage.getItem(storageKey);
|
|
if (!raw) return [];
|
|
return normalizeIdList(JSON.parse(raw));
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
export function readAgentSortMode(storageKey: string): AgentSidebarSortMode {
|
|
try {
|
|
return normalizeSortMode(localStorage.getItem(storageKey));
|
|
} catch {
|
|
return "top";
|
|
}
|
|
}
|
|
|
|
export function writeAgentOrder(storageKey: string, orderedIds: string[]) {
|
|
const normalized = normalizeIdList(orderedIds);
|
|
try {
|
|
localStorage.setItem(storageKey, JSON.stringify(normalized));
|
|
} catch {
|
|
// Ignore storage write failures in restricted browser contexts.
|
|
}
|
|
if (typeof window !== "undefined") {
|
|
window.dispatchEvent(
|
|
new CustomEvent<AgentOrderUpdatedDetail>(AGENT_ORDER_UPDATED_EVENT, {
|
|
detail: { storageKey, orderedIds: normalized },
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
|
|
export function writeAgentSortMode(storageKey: string, sortMode: AgentSidebarSortMode) {
|
|
const normalized = normalizeSortMode(sortMode);
|
|
try {
|
|
localStorage.setItem(storageKey, normalized);
|
|
} catch {
|
|
// Ignore storage write failures in restricted browser contexts.
|
|
}
|
|
if (typeof window !== "undefined") {
|
|
window.dispatchEvent(
|
|
new CustomEvent<AgentSortModeUpdatedDetail>(AGENT_SORT_MODE_UPDATED_EVENT, {
|
|
detail: { storageKey, sortMode: normalized },
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
|
|
export function sortAgentsByDefaultSidebarOrder(agents: Agent[]): Agent[] {
|
|
if (agents.length === 0) return [];
|
|
|
|
const byId = new Map(agents.map((agent) => [agent.id, agent]));
|
|
const childrenOf = new Map<string | null, Agent[]>();
|
|
for (const agent of agents) {
|
|
const parentId = agent.reportsTo && byId.has(agent.reportsTo) ? agent.reportsTo : null;
|
|
const siblings = childrenOf.get(parentId) ?? [];
|
|
siblings.push(agent);
|
|
childrenOf.set(parentId, siblings);
|
|
}
|
|
|
|
for (const siblings of childrenOf.values()) {
|
|
siblings.sort((left, right) => left.name.localeCompare(right.name));
|
|
}
|
|
|
|
const sorted: Agent[] = [];
|
|
const queue = [...(childrenOf.get(null) ?? [])];
|
|
while (queue.length > 0) {
|
|
const agent = queue.shift();
|
|
if (!agent) continue;
|
|
sorted.push(agent);
|
|
const children = childrenOf.get(agent.id);
|
|
if (children) queue.push(...children);
|
|
}
|
|
|
|
return sorted;
|
|
}
|
|
|
|
export function sortAgentsByStoredOrder(agents: Agent[], orderedIds: string[]): Agent[] {
|
|
if (agents.length === 0) return [];
|
|
|
|
const defaultSorted = sortAgentsByDefaultSidebarOrder(agents);
|
|
if (orderedIds.length === 0) return defaultSorted;
|
|
|
|
const byId = new Map(defaultSorted.map((agent) => [agent.id, agent]));
|
|
const sorted: Agent[] = [];
|
|
|
|
for (const id of orderedIds) {
|
|
const agent = byId.get(id);
|
|
if (!agent) continue;
|
|
sorted.push(agent);
|
|
byId.delete(id);
|
|
}
|
|
|
|
for (const agent of defaultSorted) {
|
|
if (byId.has(agent.id)) {
|
|
sorted.push(agent);
|
|
byId.delete(agent.id);
|
|
}
|
|
}
|
|
|
|
return sorted;
|
|
}
|