Files
multica/packages/core/issues/queries.ts
Naiyuan Qing fedd0f1694 feat(issues): live agent activity chip + per-issue indicator + filter (#3058)
* feat(server): broadcast task:running event

The dispatched → running transition was silent: only task:queued,
task:dispatch, task:cancelled, task:completed and task:failed
broadcast over WS. Any UI that distinguishes "queued" from "running"
(e.g. the new issue-card agent activity indicator) would lag by up to
the 30s agentTaskSnapshot staleTime on the most user-visible
transition. StartTask now broadcasts task:running so the workspace
snapshot invalidates immediately, keeping the agent activity UI live.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(issues): live agent activity chip + per-issue indicator + filter

Surfaces "which agents are working on what, right now" in the Issues
and My Issues views, with a one-click filter to narrow the list to
issues that have a running agent task.

Two visual surfaces:

- **Workspace chip** in the header (left of Filter). Shows the
  brand-tinted avatar stack of agents currently running on visible
  issues. Click toggles a page-scoped filter; idle state renders a
  static "0 working" button with a hover-card placeholder. When the
  filter is active the chip pins to brand fill across hover and popover
  states (the Button outline variant otherwise repaints back to
  neutral). A muted "Viewing only working agents" hint sits to the
  left of the chip whenever the filter is on, so users notice the
  active state without having to hover.

- **Per-issue indicator** on every board card and list row (top-right
  of the identifier line). Renders the avatar stack of agents in
  running or queued state on that issue, full-opacity ring at brand/70
  when ≥1 is running, half-opacity stack when only queued. Returns
  null when nothing is in flight.

Both surfaces open the same hover-card body that lists each active
task with the agent avatar, status dot (composed via the existing
availability + workload tokens), and a live-ticking duration.

Adds a new "All" scope to /my-issues that unions assignee, creator,
and involves_user_id via three parallel fetches deduped on the
client — no backend changes for this part. The chip's count and the
quick-filter both use the page's currently visible issue ids so they
stay in sync with the active scope.

State is per-user (Zustand + localStorage) and the agentRunningFilter
is intentionally omitted from partialize — running state changes
second-to-second and a stored toggle would land users in an
unexplained empty list. WS task:running, already added in the
preceding commit, drives real-time updates without polling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(issues): swap indicator ring pulse for shimmer text label

Earlier iterations layered a brand ring with various opacity-pulse
cadences around the per-issue avatar stack. Every tuning attempt was
either invisible (transparent ring + faded pulse) or oppressive (a
visible ring that flashed on a dense board). Moves the "alive" signal
onto a small text label and reuses chat's existing
`animate-chat-text-shimmer` utility — a soft light sweep across the
glyphs that already powers the ChatGPT-style "thinking" cue in
task-status-pill.

Indicator now reads as a 12 px avatar stack + 10 px label:

- Running → full-opacity avatars + shimmering localized "Working"
- Queued  → half-opacity avatars + muted static "Queued"
- Idle    → render nothing (unchanged)

Avatars and the surrounding card stay completely still; only the few
glyphs animate. The label is i18n-driven via the existing
`status_running` / `status_queued` keys, so no locale changes are
required.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 14:20:42 +08:00

412 lines
14 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { queryOptions } from "@tanstack/react-query";
import { api } from "../api";
import type {
GroupedIssuesResponse,
Issue,
IssueStatus,
ListGroupedIssuesParams,
ListIssuesParams,
ListIssuesCache,
} from "../types";
import { BOARD_STATUSES } from "./config";
export const issueKeys = {
all: (wsId: string) => ["issues", wsId] as const,
list: (wsId: string) => [...issueKeys.all(wsId), "list"] as const,
assigneeGroupsAll: (wsId: string) =>
[...issueKeys.all(wsId), "assignee-groups"] as const,
assigneeGroups: (wsId: string, filter: AssigneeGroupedIssuesFilter) =>
[...issueKeys.assigneeGroupsAll(wsId), filter] as const,
/** All "my issues" queries — use for bulk invalidation. */
myAll: (wsId: string) => [...issueKeys.all(wsId), "my"] as const,
/** Per-scope "my issues" list with filter identity baked into the key. */
myList: (wsId: string, scope: string, filter: MyIssuesFilter) =>
[...issueKeys.myAll(wsId), scope, filter] as const,
myAssigneeGroupsAll: (wsId: string) =>
[...issueKeys.myAll(wsId), "assignee-groups"] as const,
myAssigneeGroups: (
wsId: string,
scope: string,
filter: AssigneeGroupedIssuesFilter,
) => [...issueKeys.myAssigneeGroupsAll(wsId), scope, filter] as const,
/** All Project Gantt queries — prefix-match key for cross-project invalidation. */
projectGanttAll: (wsId: string) =>
[...issueKeys.all(wsId), "project-gantt"] as const,
/**
* Per-project Gantt issue list (scheduled-only). Uses its own cache key
* rather than reusing the bucketed `myList` cache so WS handlers and
* cache helpers don't have to special-case a non-bucketed shape under
* the `my` prefix.
*/
projectGantt: (wsId: string, projectId: string) =>
[...issueKeys.projectGanttAll(wsId), projectId] as const,
detail: (wsId: string, id: string) =>
[...issueKeys.all(wsId), "detail", id] as const,
children: (wsId: string, id: string) =>
[...issueKeys.all(wsId), "children", id] as const,
childProgress: (wsId: string) =>
[...issueKeys.all(wsId), "child-progress"] as const,
/** Full-issue timeline (single TanStack Query, no cursor). */
timeline: (issueId: string) =>
["issues", "timeline", issueId] as const,
reactions: (issueId: string) => ["issues", "reactions", issueId] as const,
subscribers: (issueId: string) =>
["issues", "subscribers", issueId] as const,
usage: (issueId: string) => ["issues", "usage", issueId] as const,
/** Issue-level attachments — used by the description editor so its
* inline file-card / image NodeViews can re-sign download URLs at
* click time. */
attachments: (issueId: string) => ["issues", "attachments", issueId] as const,
/** Per-issue task list (issue-detail Execution log section). */
tasks: (issueId: string) => ["issues", "tasks", issueId] as const,
/** Prefix-match key for invalidating tasks across all issues — used by
* the global WS task: prefix path so any task lifecycle event refreshes
* every per-issue list, regardless of which issue is currently mounted. */
tasksAll: () => ["issues", "tasks"] as const,
};
export type MyIssuesFilter = Pick<
ListIssuesParams,
"assignee_id" | "assignee_ids" | "creator_id" | "project_id" | "involves_user_id"
>;
export type AssigneeGroupedIssuesFilter = Omit<
ListGroupedIssuesParams,
"group_by" | "limit" | "offset" | "group_assignee_type" | "group_assignee_id"
>;
/** Page size per status column. */
export const ISSUE_PAGE_SIZE = 50;
/** Statuses the issues/my-issues pages paginate. Cancelled is intentionally excluded — it has never been surfaced in the list/board views. */
export const PAGINATED_STATUSES: readonly IssueStatus[] = BOARD_STATUSES;
/** Flatten a bucketed response to a single Issue[] for consumers that want the whole list. */
export function flattenIssueBuckets(data: ListIssuesCache) {
const out = [];
for (const status of PAGINATED_STATUSES) {
const bucket = data.byStatus[status];
if (bucket) out.push(...bucket.issues);
}
return out;
}
async function fetchFirstPages(filter: MyIssuesFilter = {}): Promise<ListIssuesCache> {
const responses = await Promise.all(
PAGINATED_STATUSES.map((status) =>
api.listIssues({ status, limit: ISSUE_PAGE_SIZE, offset: 0, ...filter }),
),
);
const byStatus: ListIssuesCache["byStatus"] = {};
PAGINATED_STATUSES.forEach((status, i) => {
const res = responses[i]!;
byStatus[status] = { issues: res.issues, total: res.total };
});
return { byStatus };
}
/**
* "All my issues" — union of three server filters:
* assignee_id=me OR creator_id=me OR involves_user_id=me
*
* The backend has no OR-across-user-filters today, so we run the three
* existing single-filter fetches in parallel and dedupe on the client by
* issue id within each status bucket. Order within each bucket preserves
* the first-seen position (each sub-fetch is already server-sorted).
*
* Personal lists are bounded (tens to a few hundred issues across all
* three relations), so 3× the request count is acceptable — a single
* fetchFirstPages already runs 7 status fetches in parallel, so the total
* here is 21 small parallel requests. Easy enough; no need to add a new
* backend query just for this scope.
*
* `total` per bucket is set to the merged length, not the true server
* total — pagination on the "All" scope is out of scope; the first
* 50-per-status × 3 widening (deduped) is what the page renders.
*/
async function fetchAllMyFirstPages(userId: string): Promise<ListIssuesCache> {
const [byAssignee, byCreator, byInvolves] = await Promise.all([
fetchFirstPages({ assignee_id: userId }),
fetchFirstPages({ creator_id: userId }),
fetchFirstPages({ involves_user_id: userId }),
]);
const byStatus: ListIssuesCache["byStatus"] = {};
for (const status of PAGINATED_STATUSES) {
const seen = new Set<string>();
const merged: Issue[] = [];
for (const cache of [byAssignee, byCreator, byInvolves]) {
const bucket = cache.byStatus[status];
if (!bucket) continue;
for (const issue of bucket.issues) {
if (seen.has(issue.id)) continue;
seen.add(issue.id);
merged.push(issue);
}
}
byStatus[status] = { issues: merged, total: merged.length };
}
return { byStatus };
}
/**
* Sibling of {@link fetchAllMyFirstPages} for the assignee-grouped board
* view. Runs the three single-filter grouped queries in parallel and
* merges groups by (assignee_type, assignee_id), deduping issues within
* each group. Extra filters from the page (statuses, priorities, etc.)
* pass through unchanged.
*/
async function fetchAllMyAssigneeGroups(
userId: string,
filter: AssigneeGroupedIssuesFilter,
): Promise<GroupedIssuesResponse> {
const variants: AssigneeGroupedIssuesFilter[] = [
{ ...filter, assignee_id: userId },
{ ...filter, creator_id: userId },
{ ...filter, involves_user_id: userId },
];
const responses = await Promise.all(
variants.map((f) =>
api.listGroupedIssues({
group_by: "assignee",
limit: ISSUE_PAGE_SIZE,
offset: 0,
...f,
}),
),
);
const groupKey = (g: GroupedIssuesResponse["groups"][number]) =>
`${g.assignee_type ?? "_"}::${g.assignee_id ?? "_"}`;
const merged = new Map<string, GroupedIssuesResponse["groups"][number]>();
for (const res of responses) {
for (const group of res.groups) {
const key = groupKey(group);
const existing = merged.get(key);
if (!existing) {
merged.set(key, {
...group,
issues: [...group.issues],
total: group.issues.length,
});
continue;
}
const seen = new Set(existing.issues.map((i) => i.id));
for (const issue of group.issues) {
if (seen.has(issue.id)) continue;
seen.add(issue.id);
existing.issues.push(issue);
}
existing.total = existing.issues.length;
}
}
return { groups: [...merged.values()] };
}
/**
* CACHE SHAPE NOTE: The raw cache stores {@link ListIssuesCache} (buckets keyed
* by status, each with `{ issues, total }`), and `select` flattens it to
* `Issue[]` for consumers. Mutations and ws-updaters must use
* `setQueryData<ListIssuesCache>(...)` and preserve the byStatus shape.
*
* Fetches the first page of each paginated status in parallel. Use
* {@link useLoadMoreByStatus} to paginate a specific status into the cache.
*/
export function issueListOptions(wsId: string) {
return queryOptions({
queryKey: issueKeys.list(wsId),
queryFn: () => fetchFirstPages(),
select: flattenIssueBuckets,
});
}
export function issueAssigneeGroupsOptions(
wsId: string,
filter: AssigneeGroupedIssuesFilter,
) {
return queryOptions<GroupedIssuesResponse>({
queryKey: issueKeys.assigneeGroups(wsId, filter),
queryFn: () =>
api.listGroupedIssues({
group_by: "assignee",
limit: ISSUE_PAGE_SIZE,
offset: 0,
...filter,
}),
});
}
/**
* Server-filtered issue list for the My Issues page.
* Each scope gets its own cache entry so switching tabs is instant after first load.
*/
export function myIssueListOptions(
wsId: string,
scope: string,
filter: MyIssuesFilter,
// Required when scope === "all" — the user id whose three relations
// (assignee, creator, agents+squads) we union over. For every other
// scope the filter object already carries the relevant id and userId
// is ignored.
userId?: string,
) {
return queryOptions({
queryKey: issueKeys.myList(wsId, scope, filter),
queryFn: () =>
scope === "all" && userId
? fetchAllMyFirstPages(userId)
: fetchFirstPages(filter),
select: flattenIssueBuckets,
});
}
/**
* Page size for the scheduled-issue fetch. The Gantt view always pulls every
* scheduled issue (no client pagination), so this is just the chunk size we
* use to walk the server's `(limit, offset)` window until we hit `total`.
*/
export const PROJECT_GANTT_PAGE_LIMIT = 500;
/**
* Paranoia cap on the loop in {@link fetchProjectGanttIssues}. Real projects
* shouldn't come close to this — a single project carrying 50k scheduled
* issues is already a product problem, not a Gantt-rendering one — but the
* guard prevents a buggy server `total` from spinning the loop forever.
*/
export const PROJECT_GANTT_MAX_ISSUES = 10_000;
async function fetchProjectGanttIssues(projectId: string) {
const issues = [];
let offset = 0;
while (offset < PROJECT_GANTT_MAX_ISSUES) {
const res = await api.listIssues({
project_id: projectId,
scheduled: true,
limit: PROJECT_GANTT_PAGE_LIMIT,
offset,
});
issues.push(...res.issues);
if (res.issues.length < PROJECT_GANTT_PAGE_LIMIT) break;
if (issues.length >= res.total) break;
offset += PROJECT_GANTT_PAGE_LIMIT;
}
return issues;
}
/**
* One-shot fetch of every scheduled issue (`start_date` or `due_date` set)
* for a project. The Project Gantt view consumes this directly — no status
* bucketing, no client-side pagination, no Load-all affordance — because
* the scheduled subset is bounded enough to come back in a small handful of
* requests.
*
* Backed by `GET /api/issues?scheduled=true&project_id=…`; the SQL filter
* mirrors the same `(start_date IS NOT NULL OR due_date IS NOT NULL)`
* predicate the Gantt view applies on the client. Pages are walked until
* `total` is reached so an oversized project can't silently lose bars past
* the first page.
*/
export function projectGanttIssuesOptions(wsId: string, projectId: string) {
return queryOptions({
queryKey: issueKeys.projectGantt(wsId, projectId),
queryFn: () => fetchProjectGanttIssues(projectId),
});
}
export function myIssueAssigneeGroupsOptions(
wsId: string,
scope: string,
filter: AssigneeGroupedIssuesFilter,
// See myIssueListOptions for the userId contract — only consulted when
// scope === "all", and powers the 3-fetch grouped union.
userId?: string,
) {
return queryOptions<GroupedIssuesResponse>({
queryKey: issueKeys.myAssigneeGroups(wsId, scope, filter),
queryFn: () =>
scope === "all" && userId
? fetchAllMyAssigneeGroups(userId, filter)
: api.listGroupedIssues({
group_by: "assignee",
limit: ISSUE_PAGE_SIZE,
offset: 0,
...filter,
}),
});
}
export function issueDetailOptions(wsId: string, id: string) {
return queryOptions({
queryKey: issueKeys.detail(wsId, id),
queryFn: () => api.getIssue(id),
});
}
export function childIssueProgressOptions(wsId: string) {
return queryOptions({
queryKey: issueKeys.childProgress(wsId),
queryFn: () => api.getChildIssueProgress(),
select: (data) => {
const map = new Map<string, { done: number; total: number }>();
for (const entry of data.progress) {
map.set(entry.parent_issue_id, { done: entry.done, total: entry.total });
}
return map;
},
});
}
export function childIssuesOptions(wsId: string, id: string) {
return queryOptions({
queryKey: issueKeys.children(wsId, id),
queryFn: () => api.listChildIssues(id).then((r) => r.issues),
});
}
/**
* Single-fetch timeline options. The endpoint returns the full ordered set of
* comments + activities for an issue (server caps at 2000 as a safety net).
* Cursor pagination was removed in #1929 — at observed data sizes (p99 ~30
* entries per issue) it added complexity without a UX win and broke reply
* threads at page boundaries.
*/
export function issueTimelineOptions(issueId: string) {
return queryOptions({
queryKey: issueKeys.timeline(issueId),
queryFn: () => api.listTimeline(issueId),
});
}
export function issueReactionsOptions(issueId: string) {
return queryOptions({
queryKey: issueKeys.reactions(issueId),
queryFn: async () => {
const issue = await api.getIssue(issueId);
return issue.reactions ?? [];
},
});
}
export function issueSubscribersOptions(issueId: string) {
return queryOptions({
queryKey: issueKeys.subscribers(issueId),
queryFn: () => api.listIssueSubscribers(issueId),
});
}
export function issueUsageOptions(issueId: string) {
return queryOptions({
queryKey: issueKeys.usage(issueId),
queryFn: () => api.getIssueUsage(issueId),
});
}
// Backs the description editor's fresh-sign download flow: NodeViews resolve
// an attachment id by matching the markdown URL against this list. The list
// is workspace-private metadata and lives on the same cache lifetime as the
// rest of the issue detail surface.
export function issueAttachmentsOptions(issueId: string) {
return queryOptions({
queryKey: issueKeys.attachments(issueId),
queryFn: () => api.listAttachments(issueId),
});
}