mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 02:20:38 +09:00
[codex] Improve workspace runtime and navigation ergonomics (#3680)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - That operator experience depends not just on issue chat, but also on how workspaces, inbox groups, and navigation state behave over long-running sessions > - The current branch included a separate cluster of workspace-runtime controls, inbox grouping, sidebar ordering, and worktree lifecycle fixes > - Those changes cross server, shared contracts, database state, and UI navigation, but they still form one coherent operator workflow area > - This pull request isolates the workspace/runtime and navigation ergonomics work into one standalone branch > - The benefit is better workspace recovery and navigation persistence without forcing reviewers through the unrelated issue-detail/chat work ## What Changed - Improved execution workspace and project workspace controls, request wiring, layout, and JSON editor ergonomics - Hardened linked worktree reuse/startup behavior and documented the `worktree repair` flow for recovering linked worktrees safely - Added inbox workspace grouping, mobile collapse, archive undo, keyboard navigation, shared group-header styling, and persisted collapsed-group behavior - Added persistent sidebar order preferences with the supporting DB migration, shared/server contracts, routes, services, hooks, and UI integration - Scoped issue-list preferences by context and added targeted UI/server tests for workspace controls, inbox behavior, sidebar preferences, and worktree validation ## Verification - `pnpm vitest run server/src/__tests__/sidebar-preferences-routes.test.ts ui/src/pages/Inbox.test.tsx ui/src/components/ProjectWorkspaceSummaryCard.test.tsx ui/src/components/WorkspaceRuntimeControls.test.tsx ui/src/api/workspace-runtime-control.test.ts` - `server/src/__tests__/workspace-runtime.test.ts` was attempted, but the embedded Postgres suite self-skipped/hung on this host after reporting an init-script issue, so it is not counted as a local pass here ## Risks - Medium: this branch includes migration-backed preference storage plus worktree/runtime behavior, so merge review should pay attention to state persistence and worktree recovery semantics - The sidebar preference migration is standalone, but it should still be watched for conflicts if another migration lands first ## Model Used - OpenAI Codex coding agent (GPT-5-class runtime in Codex CLI; exact deployed model ID is not exposed in this environment), reasoning enabled, tool use and local code execution enabled ## 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) - [ ] 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
6e6f538630
commit
e89076148a
64 changed files with 18576 additions and 1063 deletions
100
ui/src/hooks/useCompanyOrder.ts
Normal file
100
ui/src/hooks/useCompanyOrder.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { Company } from "@paperclipai/shared";
|
||||
import { sidebarPreferencesApi } from "../api/sidebarPreferences";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
|
||||
function areEqual(a: string[], b: string[]) {
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
if (a[i] !== b[i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function sortCompaniesByOrder(companies: Company[], orderedIds: string[]): Company[] {
|
||||
if (companies.length === 0) return [];
|
||||
if (orderedIds.length === 0) return companies;
|
||||
|
||||
const byId = new Map(companies.map((company) => [company.id, company]));
|
||||
const sorted: Company[] = [];
|
||||
|
||||
for (const id of orderedIds) {
|
||||
const company = byId.get(id);
|
||||
if (!company) continue;
|
||||
sorted.push(company);
|
||||
byId.delete(id);
|
||||
}
|
||||
for (const company of byId.values()) {
|
||||
sorted.push(company);
|
||||
}
|
||||
return sorted;
|
||||
}
|
||||
|
||||
function buildOrderIds(companies: Company[], orderedIds: string[]) {
|
||||
return sortCompaniesByOrder(companies, orderedIds).map((company) => company.id);
|
||||
}
|
||||
|
||||
type UseCompanyOrderParams = {
|
||||
companies: Company[];
|
||||
userId: string | null | undefined;
|
||||
};
|
||||
|
||||
export function useCompanyOrder({ companies, userId }: UseCompanyOrderParams) {
|
||||
const queryClient = useQueryClient();
|
||||
const queryKey = useMemo(
|
||||
() => queryKeys.sidebarPreferences.companyOrder(userId ?? "__anon__"),
|
||||
[userId],
|
||||
);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => sidebarPreferencesApi.getCompanyOrder(),
|
||||
enabled: Boolean(userId),
|
||||
});
|
||||
|
||||
const [orderedIds, setOrderedIds] = useState<string[]>(() => buildOrderIds(companies, []));
|
||||
|
||||
useEffect(() => {
|
||||
const nextIds = buildOrderIds(companies, data?.orderedIds ?? []);
|
||||
setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
|
||||
}, [companies, data?.orderedIds]);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (nextIds: string[]) => sidebarPreferencesApi.updateCompanyOrder({ orderedIds: nextIds }),
|
||||
onSuccess: (preference) => {
|
||||
queryClient.setQueryData(queryKey, preference);
|
||||
},
|
||||
});
|
||||
|
||||
const orderedCompanies = useMemo(
|
||||
() => sortCompaniesByOrder(companies, orderedIds),
|
||||
[companies, orderedIds],
|
||||
);
|
||||
|
||||
const persistOrder = useCallback(
|
||||
(ids: string[]) => {
|
||||
const idSet = new Set(companies.map((company) => company.id));
|
||||
const filtered = ids.filter((id) => idSet.has(id));
|
||||
for (const company of companies) {
|
||||
if (!filtered.includes(company.id)) filtered.push(company.id);
|
||||
}
|
||||
|
||||
setOrderedIds((current) => (areEqual(current, filtered) ? current : filtered));
|
||||
if (!userId) return;
|
||||
|
||||
queryClient.setQueryData(queryKey, (current: { orderedIds?: string[]; updatedAt?: Date | null } | undefined) => ({
|
||||
orderedIds: filtered,
|
||||
updatedAt: current?.updatedAt ?? null,
|
||||
}));
|
||||
mutation.mutate(filtered);
|
||||
},
|
||||
[companies, mutation, queryClient, queryKey, userId],
|
||||
);
|
||||
|
||||
return {
|
||||
orderedCompanies,
|
||||
orderedIds,
|
||||
persistOrder,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { Project } from "@paperclipai/shared";
|
||||
import {
|
||||
getProjectOrderStorageKey,
|
||||
PROJECT_ORDER_UPDATED_EVENT,
|
||||
readProjectOrder,
|
||||
sortProjectsByStoredOrder,
|
||||
writeProjectOrder,
|
||||
} from "../lib/project-order";
|
||||
import { sidebarPreferencesApi } from "../api/sidebarPreferences";
|
||||
import { sortProjectsByStoredOrder } from "../lib/project-order";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
|
||||
type UseProjectOrderParams = {
|
||||
projects: Project[];
|
||||
|
|
@ -14,11 +11,6 @@ type UseProjectOrderParams = {
|
|||
userId: string | null | undefined;
|
||||
};
|
||||
|
||||
type ProjectOrderUpdatedDetail = {
|
||||
storageKey: string;
|
||||
orderedIds: string[];
|
||||
};
|
||||
|
||||
function areEqual(a: string[], b: string[]) {
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
|
|
@ -32,48 +24,33 @@ function buildOrderIds(projects: Project[], orderedIds: string[]) {
|
|||
}
|
||||
|
||||
export function useProjectOrder({ projects, companyId, userId }: UseProjectOrderParams) {
|
||||
const storageKey = useMemo(() => {
|
||||
if (!companyId) return null;
|
||||
return getProjectOrderStorageKey(companyId, userId);
|
||||
}, [companyId, userId]);
|
||||
const queryClient = useQueryClient();
|
||||
const queryKey = useMemo(
|
||||
() => queryKeys.sidebarPreferences.projectOrder(companyId ?? "__none__", userId ?? "__anon__"),
|
||||
[companyId, userId],
|
||||
);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => sidebarPreferencesApi.getProjectOrder(companyId!),
|
||||
enabled: Boolean(companyId && userId),
|
||||
});
|
||||
|
||||
const [orderedIds, setOrderedIds] = useState<string[]>(() => {
|
||||
if (!storageKey) return projects.map((project) => project.id);
|
||||
return buildOrderIds(projects, readProjectOrder(storageKey));
|
||||
return buildOrderIds(projects, []);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const nextIds = storageKey
|
||||
? buildOrderIds(projects, readProjectOrder(storageKey))
|
||||
: projects.map((project) => project.id);
|
||||
const nextIds = buildOrderIds(projects, data?.orderedIds ?? []);
|
||||
setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
|
||||
}, [projects, storageKey]);
|
||||
}, [data?.orderedIds, projects]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!storageKey) return;
|
||||
|
||||
const syncFromIds = (ids: string[]) => {
|
||||
const nextIds = buildOrderIds(projects, ids);
|
||||
setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
|
||||
};
|
||||
|
||||
const onStorage = (event: StorageEvent) => {
|
||||
if (event.key !== storageKey) return;
|
||||
syncFromIds(readProjectOrder(storageKey));
|
||||
};
|
||||
const onCustomEvent = (event: Event) => {
|
||||
const detail = (event as CustomEvent<ProjectOrderUpdatedDetail>).detail;
|
||||
if (!detail || detail.storageKey !== storageKey) return;
|
||||
syncFromIds(detail.orderedIds);
|
||||
};
|
||||
|
||||
window.addEventListener("storage", onStorage);
|
||||
window.addEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
|
||||
return () => {
|
||||
window.removeEventListener("storage", onStorage);
|
||||
window.removeEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
|
||||
};
|
||||
}, [projects, storageKey]);
|
||||
const mutation = useMutation({
|
||||
mutationFn: (nextIds: string[]) => sidebarPreferencesApi.updateProjectOrder(companyId!, { orderedIds: nextIds }),
|
||||
onSuccess: (preference) => {
|
||||
queryClient.setQueryData(queryKey, preference);
|
||||
},
|
||||
});
|
||||
|
||||
const orderedProjects = useMemo(
|
||||
() => sortProjectsByStoredOrder(projects, orderedIds),
|
||||
|
|
@ -89,11 +66,15 @@ export function useProjectOrder({ projects, companyId, userId }: UseProjectOrder
|
|||
}
|
||||
|
||||
setOrderedIds((current) => (areEqual(current, filtered) ? current : filtered));
|
||||
if (storageKey) {
|
||||
writeProjectOrder(storageKey, filtered);
|
||||
}
|
||||
if (!companyId || !userId) return;
|
||||
|
||||
queryClient.setQueryData(queryKey, (current: { orderedIds?: string[]; updatedAt?: Date | null } | undefined) => ({
|
||||
orderedIds: filtered,
|
||||
updatedAt: current?.updatedAt ?? null,
|
||||
}));
|
||||
mutation.mutate(filtered);
|
||||
},
|
||||
[projects, storageKey],
|
||||
[companyId, mutation, projects, queryClient, queryKey, userId],
|
||||
);
|
||||
|
||||
return {
|
||||
|
|
@ -102,4 +83,3 @@ export function useProjectOrder({ projects, companyId, userId }: UseProjectOrder
|
|||
persistOrder,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue