mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-24 18:19:05 +02:00
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Operators need to *see* how work actually flowed across their agents over time — who was invoked, what they worked on, and how work was delegated between them > - The dashboard shows point-in-time state but nothing reconstructs the temporal, cross-actor picture of heartbeat runs and delegations > - A read-only company work-timeline endpoint was landed first (server aggregation over runs/issues/activity); it had no frontend > - This pull request adds the Gantt-style **Work Timeline** page that renders that endpoint, plus the small additive server contract change it needs (shared DTOs + a task title on each span) > - The benefit is a single dense view — actor rows, concurrency lanes, delegation connectors, zoom and a mini-map — that makes agent activity legible without an N+1 fetch storm from the client ## Linked Issues or Issue Description No public GitHub issue. Problem, in-PR: - **Gap:** the company work-timeline aggregation endpoint has no UI. There is no way to visually inspect how heartbeat runs unfolded over time or how work was delegated between agents. - **Solution:** a dashboard-adjacent Gantt-style page at `/:companyPrefix/timeline`, linked from the sidebar's "Work" section, rendering runs as bars on per-actor rows with delegation connectors, kickoff chips, zoom, a lens filter, and a mini-map. - Built with React + custom inline SVG (no chart dependency; consistent with the existing Tailwind/Radix stack). ## What Changed - **Frontend Gantt page** (`ui/src/pages/Timeline.tsx`, `ui/src/components/timeline/WorkTimelineChart.tsx`): actor rows (agents/system only — humans never get a row), overlapping runs packed into concurrency sub-lanes, bars = heartbeat runs with a left colour tab for issue identity, truncated task title + timing/status on hover, click-through to the task. - **Human activity markers & human rows** for kickoff/delegation involving people, without giving humans their own run lane. - **Kickoff avatar chips** at each bar's leading edge; straight agent→agent delegation connectors (dashed for retries/changes-requested); in-progress runs extend to a dashed "now" line and fade out. - **Zoom** (hour/day/week, auto-fit), full-window **mini-map** with a draggable brush, **lens filter** (Everyone / per-user, server-side), and colour **by task / by status**. - **Pure layout/transform module** (`ui/src/lib/timeline/layout.ts`) — packing, kickoff derivation, connector resolution, scales — unit-tested in isolation. - **Server contract (additive):** moved the `WorkTimeline*` DTOs into `@paperclipai/shared` so the aggregation service and the UI consume one contract; added `issueTitle` to each span so the tooltip shows the task title with no N+1 client fetch. - Sidebar link, query keys, API client (`ui/src/api/workTimeline.ts`), and a Storybook story with fixtures. ## Verification - `pnpm --filter @paperclipai/shared build` ✅ - `pnpm --filter @paperclipai/server typecheck` ✅ · `pnpm --filter @paperclipai/ui typecheck` ✅ - `pnpm --filter @paperclipai/ui exec vitest run src/lib/timeline/layout.test.ts src/components/timeline/WorkTimelineChart.test.tsx` ✅ (15/15) - `pnpm --filter @paperclipai/server exec vitest run src/__tests__/work-timeline-service.test.ts` ✅ (5/5) — the DTO move + `issueTitle` are additive; existing service tests use `objectContaining` and still pass. - Rendered `WorkTimelineChart` headless against a real slice of company activity via a Storybook story; manual browser QA of the live page passed on the feature branch. ## Risks - **Low risk.** The change is UI-only plus an additive server DTO refactor (types relocated to `@paperclipai/shared`, one new optional field). No schema/migration changes, no change to endpoint behaviour beyond the extra `issueTitle` field. The page is behind its own route and does not alter existing views. ## Model Used - Claude, Opus 4.8 (`claude-opus-4-8`), via Claude Code with extended thinking and tool use. ## 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 (only the merged endpoint PR #8875 is related; no duplicates) - [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 not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change and contains no internal ticket id - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
304 lines
17 KiB
TypeScript
304 lines
17 KiB
TypeScript
export const queryKeys = {
|
|
companies: {
|
|
all: ["companies"] as const,
|
|
detail: (id: string) => ["companies", id] as const,
|
|
stats: ["companies", "stats"] as const,
|
|
},
|
|
companySkills: {
|
|
list: (companyId: string) => ["company-skills", companyId] as const,
|
|
detail: (companyId: string, skillId: string) => ["company-skills", companyId, skillId] as const,
|
|
versions: (companyId: string, skillId: string) => ["company-skills", companyId, skillId, "versions"] as const,
|
|
comments: (companyId: string, skillId: string) => ["company-skills", companyId, skillId, "comments"] as const,
|
|
updateStatus: (companyId: string, skillId: string) =>
|
|
["company-skills", companyId, skillId, "update-status"] as const,
|
|
file: (companyId: string, skillId: string, relativePath: string) =>
|
|
["company-skills", companyId, skillId, "file", relativePath] as const,
|
|
catalog: (filters: { kind?: string; category?: string; q?: string } = {}) =>
|
|
["company-skills", "catalog", filters.kind ?? "__all-kinds__", filters.category ?? "__all-categories__", filters.q ?? ""] as const,
|
|
catalogDetail: (catalogRef: string) => ["company-skills", "catalog", "detail", catalogRef] as const,
|
|
catalogFile: (catalogRef: string, relativePath: string) =>
|
|
["company-skills", "catalog", "file", catalogRef, relativePath] as const,
|
|
},
|
|
teamCatalog: {
|
|
catalog: (filters: { kind?: string; category?: string; q?: string } = {}) =>
|
|
["team-catalog", "catalog", filters.kind ?? "__all-kinds__", filters.category ?? "__all-categories__", filters.q ?? ""] as const,
|
|
catalogDetail: (catalogRef: string) => ["team-catalog", "catalog", "detail", catalogRef] as const,
|
|
catalogFile: (catalogRef: string, relativePath: string) =>
|
|
["team-catalog", "catalog", "file", catalogRef, relativePath] as const,
|
|
installed: (companyId: string) => ["team-catalog", "installed", companyId] as const,
|
|
},
|
|
agents: {
|
|
list: (companyId: string) => ["agents", companyId] as const,
|
|
detail: (id: string) => ["agents", "detail", id] as const,
|
|
runtimeState: (id: string) => ["agents", "runtime-state", id] as const,
|
|
taskSessions: (id: string) => ["agents", "task-sessions", id] as const,
|
|
skills: (id: string) => ["agents", "skills", id] as const,
|
|
instructionsBundle: (id: string) => ["agents", "instructions-bundle", id] as const,
|
|
instructionsFile: (id: string, relativePath: string) =>
|
|
["agents", "instructions-bundle", id, "file", relativePath] as const,
|
|
keys: (agentId: string) => ["agents", "keys", agentId] as const,
|
|
configRevisions: (agentId: string) => ["agents", "config-revisions", agentId] as const,
|
|
adapterModels: (companyId: string, adapterType: string, environmentId?: string | null) =>
|
|
["agents", companyId, "adapter-models", adapterType, environmentId ?? null] as const,
|
|
adapterModelProfiles: (companyId: string, adapterType: string) =>
|
|
["agents", companyId, "adapter-model-profiles", adapterType] as const,
|
|
detectModel: (companyId: string, adapterType: string) =>
|
|
["agents", companyId, "detect-model", adapterType] as const,
|
|
},
|
|
issues: {
|
|
list: (companyId: string) => ["issues", companyId] as const,
|
|
mentionPool: (companyId: string) => ["issues", companyId, "mention-pool"] as const,
|
|
search: (companyId: string, q: string, projectId?: string, limit?: number) =>
|
|
["issues", companyId, "search", q, projectId ?? "__all-projects__", limit ?? "__no-limit__"] as const,
|
|
listAssignedToMe: (companyId: string) => ["issues", companyId, "assigned-to-me"] as const,
|
|
listMineByMe: (companyId: string) => ["issues", companyId, "mine-by-me"] as const,
|
|
listTouchedByMe: (companyId: string) => ["issues", companyId, "touched-by-me"] as const,
|
|
listUnreadTouchedByMe: (companyId: string) => ["issues", companyId, "unread-touched-by-me"] as const,
|
|
listBlockedAttention: (companyId: string) => ["issues", companyId, "blocked-attention"] as const,
|
|
countBlockedAttention: (companyId: string) => ["issues", companyId, "blocked-attention", "count"] as const,
|
|
labels: (companyId: string) => ["issues", companyId, "labels"] as const,
|
|
listByProject: (companyId: string, projectId: string) =>
|
|
["issues", companyId, "project", projectId] as const,
|
|
listPluginOperationsByProject: (companyId: string, projectId: string, originKindPrefix: string) =>
|
|
["issues", companyId, "project", projectId, "plugin-operations", originKindPrefix] as const,
|
|
listByParent: (companyId: string, parentId: string) =>
|
|
["issues", companyId, "parent", parentId] as const,
|
|
listByDescendantRoot: (companyId: string, rootIssueId: string) =>
|
|
["issues", companyId, "descendants", rootIssueId] as const,
|
|
listByExecutionWorkspace: (companyId: string, executionWorkspaceId: string) =>
|
|
["issues", companyId, "execution-workspace", executionWorkspaceId] as const,
|
|
detail: (id: string) => ["issues", "detail", id] as const,
|
|
comments: (issueId: string) => ["issues", "comments", issueId] as const,
|
|
commentsList: (issueId: string) => ["issues", "comments", issueId, "list"] as const,
|
|
interactions: (issueId: string) => ["issues", "interactions", issueId] as const,
|
|
acceptedPlanDecompositions: (issueId: string) =>
|
|
["issues", "accepted-plan-decompositions", issueId] as const,
|
|
feedbackVotes: (issueId: string) => ["issues", "feedback-votes", issueId] as const,
|
|
costSummary: (issueId: string, options: { excludeRoot?: boolean } = {}) =>
|
|
options.excludeRoot
|
|
? (["issues", "cost-summary", issueId, "exclude-root"] as const)
|
|
: (["issues", "cost-summary", issueId] as const),
|
|
attachments: (issueId: string) => ["issues", "attachments", issueId] as const,
|
|
attachmentPreview: (attachmentId: string) => ["issues", "attachment-preview", attachmentId] as const,
|
|
documents: (issueId: string) => ["issues", "documents", issueId] as const,
|
|
document: (issueId: string, key: string) => ["issues", "document", issueId, key] as const,
|
|
documentRevisions: (issueId: string, key: string) => ["issues", "document-revisions", issueId, key] as const,
|
|
documentAnnotations: (issueId: string, key: string, status: "open" | "resolved" | "all" = "all") =>
|
|
["issues", "document-annotations", issueId, key, status] as const,
|
|
activity: (issueId: string) => ["issues", "activity", issueId] as const,
|
|
runs: (issueId: string) => ["issues", "runs", issueId] as const,
|
|
approvals: (issueId: string) => ["issues", "approvals", issueId] as const,
|
|
liveRuns: (issueId: string) => ["issues", "live-runs", issueId] as const,
|
|
activeRun: (issueId: string) => ["issues", "active-run", issueId] as const,
|
|
workProducts: (issueId: string) => ["issues", "work-products", issueId] as const,
|
|
fileResources: (
|
|
issueId: string,
|
|
options: {
|
|
workspace?: string;
|
|
projectId?: string | null;
|
|
workspaceId?: string | null;
|
|
path?: string | null;
|
|
mode?: string;
|
|
q?: string | null;
|
|
limit?: number;
|
|
offset?: number;
|
|
} = {},
|
|
) =>
|
|
["issues", "file-resources", issueId, "list", options] as const,
|
|
fileResource: (
|
|
issueId: string,
|
|
query: { path: string; workspace?: string; projectId?: string | null; workspaceId?: string | null },
|
|
) =>
|
|
["issues", "file-resources", issueId, "resolve", query] as const,
|
|
fileResourceContent: (
|
|
issueId: string,
|
|
query: { path: string; workspace?: string; projectId?: string | null; workspaceId?: string | null },
|
|
) =>
|
|
["issues", "file-resources", issueId, "content", query] as const,
|
|
},
|
|
routines: {
|
|
list: (companyId: string, filters?: { projectId?: string | null }) =>
|
|
["routines", companyId, filters?.projectId ?? "__all-projects__"] as const,
|
|
detail: (id: string) => ["routines", "detail", id] as const,
|
|
runs: (id: string) => ["routines", "runs", id] as const,
|
|
revisions: (id: string) => ["routines", "revisions", id] as const,
|
|
activity: (companyId: string, id: string) => ["routines", "activity", companyId, id] as const,
|
|
documentAnnotations: (routineId: string, key: "description", status: "open" | "resolved" | "all" = "all") =>
|
|
["routines", "document-annotations", routineId, key, status] as const,
|
|
},
|
|
pipelines: {
|
|
list: (companyId: string) => ["pipelines", companyId] as const,
|
|
detail: (pipelineId: string) => ["pipelines", "detail", pipelineId] as const,
|
|
cases: (pipelineId: string) => ["pipelines", "cases", pipelineId] as const,
|
|
caseDetail: (caseId: string) => ["pipelines", "item", caseId] as const,
|
|
caseChildren: (caseId: string) => ["pipelines", "item", caseId, "children"] as const,
|
|
caseEvents: (caseId: string) => ["pipelines", "item", caseId, "events"] as const,
|
|
caseIssueLinks: (caseId: string) => ["pipelines", "item", caseId, "issue-links"] as const,
|
|
caseOutputs: (caseId: string) => ["pipelines", "item", caseId, "outputs"] as const,
|
|
caseDocument: (caseId: string, key: string) => ["pipelines", "item", caseId, "document", key] as const,
|
|
caseDocumentRevisions: (caseId: string, key: string) =>
|
|
["pipelines", "item", caseId, "document-revisions", key] as const,
|
|
intakeForm: (pipelineId: string) => ["pipelines", "intake-form", pipelineId] as const,
|
|
health: (pipelineId: string) => ["pipelines", "health", pipelineId] as const,
|
|
document: (pipelineId: string, key: string) => ["pipelines", "document", pipelineId, key] as const,
|
|
documentRevisions: (pipelineId: string, key: string) =>
|
|
["pipelines", "document-revisions", pipelineId, key] as const,
|
|
attention: (companyId: string) => ["pipelines", "attention", companyId] as const,
|
|
reviewCases: (companyId: string) => ["pipelines", "review-cases", companyId] as const,
|
|
learnings: (companyId: string, offset: number) => ["pipelines", "learnings", companyId, offset] as const,
|
|
},
|
|
executionWorkspaces: {
|
|
list: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
|
|
["execution-workspaces", companyId, filters ?? {}] as const,
|
|
summaryList: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
|
|
["execution-workspaces", companyId, "summary", filters ?? {}] as const,
|
|
overview: (companyId: string, filters?: Record<string, string | number | boolean | undefined>) =>
|
|
["execution-workspaces", companyId, "overview", filters ?? {}] as const,
|
|
detail: (id: string) => ["execution-workspaces", "detail", id] as const,
|
|
closeReadiness: (id: string) => ["execution-workspaces", "close-readiness", id] as const,
|
|
workspaceOperations: (id: string) => ["execution-workspaces", "workspace-operations", id] as const,
|
|
},
|
|
environments: {
|
|
list: (companyId: string) => ["environments", companyId] as const,
|
|
capabilities: (companyId: string) => ["environment-capabilities", companyId] as const,
|
|
customImageTemplate: (environmentId: string) =>
|
|
["environments", environmentId, "custom-image-template"] as const,
|
|
customImageSetupSession: (sessionId: string) =>
|
|
["environment-custom-image-setup-sessions", sessionId] as const,
|
|
},
|
|
projects: {
|
|
list: (companyId: string) => ["projects", companyId] as const,
|
|
detail: (id: string) => ["projects", "detail", id] as const,
|
|
},
|
|
externalObjects: {
|
|
byIssue: (issueId: string) => ["external-objects", "by-issue", issueId] as const,
|
|
issueSummary: (issueId: string) => ["external-objects", "issue-summary", issueId] as const,
|
|
issueSummaries: (companyId: string, issueIds: readonly string[]) =>
|
|
["external-objects", "issue-summaries", companyId, issueIds] as const,
|
|
projectSummary: (projectId: string) => ["external-objects", "project-summary", projectId] as const,
|
|
},
|
|
goals: {
|
|
list: (companyId: string) => ["goals", companyId] as const,
|
|
detail: (id: string) => ["goals", "detail", id] as const,
|
|
},
|
|
artifacts: {
|
|
list: (
|
|
companyId: string,
|
|
kind?: string,
|
|
q?: string,
|
|
groupBy?: string,
|
|
groupIssueId?: string,
|
|
) =>
|
|
[
|
|
"artifacts",
|
|
companyId,
|
|
kind ?? "all",
|
|
q ?? "",
|
|
groupBy ?? "none",
|
|
groupIssueId ?? "",
|
|
] as const,
|
|
},
|
|
budgets: {
|
|
overview: (companyId: string) => ["budgets", "overview", companyId] as const,
|
|
},
|
|
approvals: {
|
|
list: (companyId: string, status?: string) =>
|
|
["approvals", companyId, status] as const,
|
|
detail: (approvalId: string) => ["approvals", "detail", approvalId] as const,
|
|
comments: (approvalId: string) => ["approvals", "comments", approvalId] as const,
|
|
issues: (approvalId: string) => ["approvals", "issues", approvalId] as const,
|
|
},
|
|
access: {
|
|
invites: (companyId: string, state: string = "all", limit: number = 20) =>
|
|
["access", "invites", "paginated-v1", companyId, state, limit] as const,
|
|
joinRequests: (companyId: string, status: string = "pending_approval") =>
|
|
["access", "join-requests", companyId, status] as const,
|
|
companyMembers: (companyId: string) => ["access", "company-members", companyId] as const,
|
|
companyUserDirectory: (companyId: string) => ["access", "company-user-directory", companyId] as const,
|
|
adminUsers: (query: string) => ["access", "admin-users", query] as const,
|
|
userCompanyAccess: (userId: string) => ["access", "user-company-access", userId] as const,
|
|
invite: (token: string) => ["access", "invite", token] as const,
|
|
currentBoardAccess: ["access", "current-board-access"] as const,
|
|
},
|
|
auth: {
|
|
session: ["auth", "session"] as const,
|
|
},
|
|
sidebarPreferences: {
|
|
companyOrder: (userId: string) => ["sidebar-preferences", "company-order", userId] as const,
|
|
projectOrder: (companyId: string, userId: string) =>
|
|
["sidebar-preferences", "project-order", companyId, userId] as const,
|
|
},
|
|
resourceMemberships: {
|
|
mine: (companyId: string) => ["resource-memberships", companyId, "me"] as const,
|
|
},
|
|
instance: {
|
|
settings: ["instance", "settings"] as const,
|
|
generalSettings: ["instance", "general-settings"] as const,
|
|
schedulerHeartbeats: ["instance", "scheduler-heartbeats"] as const,
|
|
experimentalSettings: ["instance", "experimental-settings"] as const,
|
|
},
|
|
cloudUpstreams: (companyId: string) => ["cloud-upstreams", companyId] as const,
|
|
health: ["health"] as const,
|
|
secrets: {
|
|
list: (companyId: string) => ["secrets", companyId] as const,
|
|
providers: (companyId: string) => ["secret-providers", companyId] as const,
|
|
providerConfigs: (companyId: string) => ["secret-provider-configs", companyId] as const,
|
|
usage: (secretId: string) => ["secrets", "usage", secretId] as const,
|
|
accessEvents: (secretId: string) => ["secrets", "access-events", secretId] as const,
|
|
},
|
|
companySearch: {
|
|
search: (companyId: string, q: string, scope: string, limit: number, offset: number) =>
|
|
["company-search", companyId, q, scope, limit, offset] as const,
|
|
},
|
|
dashboard: (companyId: string) => ["dashboard", companyId] as const,
|
|
workTimeline: (companyId: string, lens?: string) => ["work-timeline", companyId, lens ?? "all"] as const,
|
|
userProfile: (companyId: string, userSlug: string) =>
|
|
["user-profile", companyId, userSlug] as const,
|
|
sidebarBadges: (companyId: string) => ["sidebar-badges", companyId] as const,
|
|
inboxDismissals: (companyId: string) => ["inbox-dismissals", companyId] as const,
|
|
activity: (companyId: string) => ["activity", companyId] as const,
|
|
costs: (companyId: string, from?: string, to?: string) =>
|
|
["costs", companyId, from, to] as const,
|
|
usageByProvider: (companyId: string, from?: string, to?: string) =>
|
|
["usage-by-provider", companyId, from, to] as const,
|
|
usageByBiller: (companyId: string, from?: string, to?: string) =>
|
|
["usage-by-biller", companyId, from, to] as const,
|
|
financeSummary: (companyId: string, from?: string, to?: string) =>
|
|
["finance-summary", companyId, from, to] as const,
|
|
financeByBiller: (companyId: string, from?: string, to?: string) =>
|
|
["finance-by-biller", companyId, from, to] as const,
|
|
financeByKind: (companyId: string, from?: string, to?: string) =>
|
|
["finance-by-kind", companyId, from, to] as const,
|
|
financeEvents: (companyId: string, from?: string, to?: string, limit: number = 100) =>
|
|
["finance-events", companyId, from, to, limit] as const,
|
|
usageWindowSpend: (companyId: string) =>
|
|
["usage-window-spend", companyId] as const,
|
|
usageQuotaWindows: (companyId: string) =>
|
|
["usage-quota-windows", companyId] as const,
|
|
heartbeats: (companyId: string, agentId?: string) =>
|
|
["heartbeats", companyId, agentId] as const,
|
|
runDetail: (runId: string) => ["heartbeat-run", runId] as const,
|
|
runWorkspaceOperations: (runId: string) => ["heartbeat-run", runId, "workspace-operations"] as const,
|
|
liveRuns: (companyId: string) => ["live-runs", companyId] as const,
|
|
runIssues: (runId: string) => ["run-issues", runId] as const,
|
|
org: (companyId: string) => ["org", companyId] as const,
|
|
skills: {
|
|
available: ["skills", "available"] as const,
|
|
},
|
|
plugins: {
|
|
all: ["plugins"] as const,
|
|
examples: ["plugins", "examples"] as const,
|
|
detail: (pluginId: string) => ["plugins", pluginId] as const,
|
|
health: (pluginId: string) => ["plugins", pluginId, "health"] as const,
|
|
uiContributions: ["plugins", "ui-contributions"] as const,
|
|
config: (pluginId: string) => ["plugins", pluginId, "config"] as const,
|
|
localFolders: (pluginId: string, companyId: string) =>
|
|
["plugins", pluginId, "companies", companyId, "local-folders"] as const,
|
|
dashboard: (pluginId: string) => ["plugins", pluginId, "dashboard"] as const,
|
|
logs: (pluginId: string) => ["plugins", pluginId, "logs"] as const,
|
|
},
|
|
adapters: {
|
|
all: ["adapters"] as const,
|
|
},
|
|
};
|