| import { useEffect, useRef, type ReactNode } from "react"; |
| import { useQuery, useQueryClient, type QueryClient } from "@tanstack/react-query"; |
| import type { Agent, Issue, LiveEvent } from "@paperclipai/shared"; |
| import type { RunForIssue } from "../api/activity"; |
| import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats"; |
| import { authApi } from "../api/auth"; |
| import { useCompany } from "./CompanyContext"; |
| import type { ToastInput } from "./ToastContext"; |
| import { useToast } from "./ToastContext"; |
| import { queryKeys } from "../lib/queryKeys"; |
| import { toCompanyRelativePath } from "../lib/company-routes"; |
| import { useLocation } from "../lib/router"; |
|
|
| const TOAST_COOLDOWN_WINDOW_MS = 10_000; |
| const TOAST_COOLDOWN_MAX = 3; |
| const RECONNECT_SUPPRESS_MS = 2000; |
|
|
| function readString(value: unknown): string | null { |
| return typeof value === "string" && value.length > 0 ? value : null; |
| } |
|
|
| function readRecord(value: unknown): Record<string, unknown> | null { |
| if (typeof value !== "object" || value === null || Array.isArray(value)) return null; |
| return value as Record<string, unknown>; |
| } |
|
|
| function shortId(value: string) { |
| return value.slice(0, 8); |
| } |
|
|
| function resolveAgentName( |
| queryClient: QueryClient, |
| companyId: string, |
| agentId: string, |
| ): string | null { |
| const agents = queryClient.getQueryData<Agent[]>(queryKeys.agents.list(companyId)); |
| if (!agents) return null; |
| const agent = agents.find((a) => a.id === agentId); |
| return agent?.name ?? null; |
| } |
|
|
| function truncate(text: string, max: number): string { |
| if (text.length <= max) return text; |
| return text.slice(0, max - 1) + "\u2026"; |
| } |
|
|
| function resolveActorLabel( |
| queryClient: QueryClient, |
| companyId: string, |
| actorType: string | null, |
| actorId: string | null, |
| ): string { |
| if (actorType === "agent" && actorId) { |
| return resolveAgentName(queryClient, companyId, actorId) ?? `Agent ${shortId(actorId)}`; |
| } |
| if (actorType === "system") return "System"; |
| if (actorType === "user" && actorId) { |
| return "Board"; |
| } |
| return "Someone"; |
| } |
|
|
| interface IssueToastContext { |
| ref: string; |
| title: string | null; |
| label: string; |
| href: string; |
| } |
|
|
| interface VisibleRouteOptions { |
| isForegrounded?: boolean; |
| } |
|
|
| interface VisibleIssueRouteContext { |
| issueRefs: Set<string>; |
| assigneeAgentId: string | null; |
| runIds: Set<string>; |
| } |
|
|
| function resolveIssueQueryRefs( |
| queryClient: QueryClient, |
| companyId: string, |
| issueId: string, |
| details: Record<string, unknown> | null, |
| ): string[] { |
| const refs = new Set<string>([issueId]); |
| const detailIssue = queryClient.getQueryData<Issue>(queryKeys.issues.detail(issueId)); |
| const listIssues = queryClient.getQueryData<Issue[]>(queryKeys.issues.list(companyId)); |
| const detailsIdentifier = |
| readString(details?.identifier) ?? |
| readString(details?.issueIdentifier); |
|
|
| if (detailsIdentifier) refs.add(detailsIdentifier); |
|
|
| if (detailIssue?.id) refs.add(detailIssue.id); |
| if (detailIssue?.identifier) refs.add(detailIssue.identifier); |
|
|
| const listIssue = listIssues?.find((issue) => { |
| if (issue.id === issueId) return true; |
| if (issue.identifier && issue.identifier === issueId) return true; |
| if (detailsIdentifier && issue.identifier === detailsIdentifier) return true; |
| return false; |
| }); |
| if (listIssue?.id) refs.add(listIssue.id); |
| if (listIssue?.identifier) refs.add(listIssue.identifier); |
|
|
| return Array.from(refs); |
| } |
|
|
| function resolveIssueToastContext( |
| queryClient: QueryClient, |
| companyId: string, |
| issueId: string, |
| details: Record<string, unknown> | null, |
| ): IssueToastContext { |
| const issueRefs = resolveIssueQueryRefs(queryClient, companyId, issueId, details); |
| const detailIssue = issueRefs |
| .map((ref) => queryClient.getQueryData<Issue>(queryKeys.issues.detail(ref))) |
| .find((issue): issue is Issue => !!issue); |
| const listIssue = queryClient |
| .getQueryData<Issue[]>(queryKeys.issues.list(companyId)) |
| ?.find((issue) => issueRefs.some((ref) => issue.id === ref || issue.identifier === ref)); |
| const cachedIssue = detailIssue ?? listIssue ?? null; |
| const ref = |
| readString(details?.identifier) ?? |
| readString(details?.issueIdentifier) ?? |
| cachedIssue?.identifier ?? |
| `Issue ${shortId(issueId)}`; |
| const title = |
| readString(details?.title) ?? |
| readString(details?.issueTitle) ?? |
| cachedIssue?.title ?? |
| null; |
| return { |
| ref, |
| title, |
| label: title ? `${ref} - ${truncate(title, 72)}` : ref, |
| href: `/issues/${cachedIssue?.identifier ?? issueId}`, |
| }; |
| } |
|
|
| function isPageForegrounded(): boolean { |
| if (typeof document === "undefined") return false; |
| if (document.visibilityState !== "visible") return false; |
| if (typeof document.hasFocus === "function" && !document.hasFocus()) return false; |
| return true; |
| } |
|
|
| function resolveVisibleIssueRouteContext( |
| queryClient: QueryClient, |
| pathname: string, |
| options?: VisibleRouteOptions, |
| ): VisibleIssueRouteContext | null { |
| const isForegrounded = options?.isForegrounded ?? isPageForegrounded(); |
| if (!isForegrounded) return null; |
|
|
| const relativePath = toCompanyRelativePath(pathname); |
| const segments = relativePath.split("/").filter(Boolean); |
| if (segments[0] !== "issues" || !segments[1]) return null; |
|
|
| const issueRef = decodeURIComponent(segments[1]); |
| const issue = queryClient.getQueryData<Issue>(queryKeys.issues.detail(issueRef)) ?? null; |
| const issueRefs = new Set<string>([issueRef]); |
| if (issue?.id) issueRefs.add(issue.id); |
| if (issue?.identifier) issueRefs.add(issue.identifier); |
|
|
| const runIds = new Set<string>(); |
| const activeRun = queryClient.getQueryData<ActiveRunForIssue | null>(queryKeys.issues.activeRun(issueRef)); |
| const liveRuns = queryClient.getQueryData<LiveRunForIssue[]>(queryKeys.issues.liveRuns(issueRef)) ?? []; |
| const linkedRuns = queryClient.getQueryData<RunForIssue[]>(queryKeys.issues.runs(issueRef)) ?? []; |
|
|
| if (activeRun?.id) runIds.add(activeRun.id); |
| for (const run of liveRuns) { |
| if (run.id) runIds.add(run.id); |
| } |
| for (const run of linkedRuns) { |
| if (run.runId) runIds.add(run.runId); |
| } |
|
|
| return { |
| issueRefs, |
| assigneeAgentId: issue?.assigneeAgentId ?? null, |
| runIds, |
| }; |
| } |
|
|
| function buildIssueRefsForPayload(entityId: string, details: Record<string, unknown> | null): Set<string> { |
| const refs = new Set<string>([entityId]); |
| const identifier = readString(details?.identifier) ?? readString(details?.issueIdentifier); |
| if (identifier) refs.add(identifier); |
| return refs; |
| } |
|
|
| function overlaps(a: Set<string>, b: Set<string>): boolean { |
| for (const value of a) { |
| if (b.has(value)) return true; |
| } |
| return false; |
| } |
|
|
| function shouldSuppressActivityToastForVisibleIssue( |
| queryClient: QueryClient, |
| pathname: string, |
| payload: Record<string, unknown>, |
| options?: VisibleRouteOptions, |
| ): boolean { |
| const entityType = readString(payload.entityType); |
| const entityId = readString(payload.entityId); |
| if (entityType !== "issue" || !entityId) return false; |
|
|
| const context = resolveVisibleIssueRouteContext(queryClient, pathname, options); |
| if (!context) return false; |
|
|
| return overlaps(context.issueRefs, buildIssueRefsForPayload(entityId, readRecord(payload.details))); |
| } |
|
|
| function shouldSuppressRunStatusToastForVisibleIssue( |
| queryClient: QueryClient, |
| pathname: string, |
| payload: Record<string, unknown>, |
| options?: VisibleRouteOptions, |
| ): boolean { |
| const context = resolveVisibleIssueRouteContext(queryClient, pathname, options); |
| if (!context) return false; |
|
|
| const runId = readString(payload.runId); |
| if (runId && context.runIds.has(runId)) return true; |
|
|
| const agentId = readString(payload.agentId); |
| return !!agentId && !!context.assigneeAgentId && agentId === context.assigneeAgentId; |
| } |
|
|
| function shouldSuppressAgentStatusToastForVisibleIssue( |
| queryClient: QueryClient, |
| pathname: string, |
| payload: Record<string, unknown>, |
| options?: VisibleRouteOptions, |
| ): boolean { |
| const context = resolveVisibleIssueRouteContext(queryClient, pathname, options); |
| if (!context?.assigneeAgentId) return false; |
|
|
| const agentId = readString(payload.agentId); |
| return !!agentId && agentId === context.assigneeAgentId; |
| } |
|
|
| const ISSUE_TOAST_ACTIONS = new Set(["issue.created", "issue.updated", "issue.comment_added"]); |
| const AGENT_TOAST_STATUSES = new Set(["running", "error"]); |
| const TERMINAL_RUN_STATUSES = new Set(["succeeded", "failed", "timed_out", "cancelled"]); |
|
|
| function describeIssueUpdate(details: Record<string, unknown> | null): string | null { |
| if (!details) return null; |
| const changes: string[] = []; |
| if (typeof details.status === "string") changes.push(`status -> ${details.status.replace(/_/g, " ")}`); |
| if (typeof details.priority === "string") changes.push(`priority -> ${details.priority}`); |
| if (typeof details.assigneeAgentId === "string" || typeof details.assigneeUserId === "string") { |
| changes.push("reassigned"); |
| } else if (details.assigneeAgentId === null || details.assigneeUserId === null) { |
| changes.push("unassigned"); |
| } |
| if (details.reopened === true) { |
| const from = readString(details.reopenedFrom); |
| changes.push(from ? `reopened from ${from.replace(/_/g, " ")}` : "reopened"); |
| } |
| if (typeof details.title === "string") changes.push("title changed"); |
| if (typeof details.description === "string") changes.push("description changed"); |
| if (changes.length > 0) return changes.join(", "); |
| return null; |
| } |
|
|
| function buildActivityToast( |
| queryClient: QueryClient, |
| companyId: string, |
| payload: Record<string, unknown>, |
| currentActor: { userId: string | null; agentId: string | null }, |
| ): ToastInput | null { |
| const entityType = readString(payload.entityType); |
| const entityId = readString(payload.entityId); |
| const action = readString(payload.action); |
| const details = readRecord(payload.details); |
| const actorId = readString(payload.actorId); |
| const actorType = readString(payload.actorType); |
|
|
| if (entityType !== "issue" || !entityId || !action || !ISSUE_TOAST_ACTIONS.has(action)) { |
| return null; |
| } |
|
|
| const issue = resolveIssueToastContext(queryClient, companyId, entityId, details); |
| const actor = resolveActorLabel(queryClient, companyId, actorType, actorId); |
| const isSelfActivity = |
| (actorType === "user" && !!currentActor.userId && actorId === currentActor.userId) || |
| (actorType === "agent" && !!currentActor.agentId && actorId === currentActor.agentId); |
| if (isSelfActivity) return null; |
|
|
| if (action === "issue.created") { |
| return { |
| title: `${actor} created ${issue.ref}`, |
| body: issue.title ? truncate(issue.title, 96) : undefined, |
| tone: "success", |
| action: { label: `View ${issue.ref}`, href: issue.href }, |
| dedupeKey: `activity:${action}:${entityId}`, |
| }; |
| } |
|
|
| if (action === "issue.updated") { |
| if (readString(details?.source) === "comment") { |
| |
| return null; |
| } |
| const changeDesc = describeIssueUpdate(details); |
| const body = changeDesc |
| ? issue.title |
| ? `${truncate(issue.title, 64)} - ${changeDesc}` |
| : changeDesc |
| : issue.title |
| ? truncate(issue.title, 96) |
| : issue.label; |
| return { |
| title: `${actor} updated ${issue.ref}`, |
| body: truncate(body, 100), |
| tone: "info", |
| action: { label: `View ${issue.ref}`, href: issue.href }, |
| dedupeKey: `activity:${action}:${entityId}`, |
| }; |
| } |
|
|
| const commentId = readString(details?.commentId); |
| const bodySnippet = readString(details?.bodySnippet); |
| const reopened = details?.reopened === true; |
| const updated = details?.updated === true; |
| const reopenedFrom = readString(details?.reopenedFrom); |
| const reopenedLabel = reopened |
| ? reopenedFrom |
| ? `reopened from ${reopenedFrom.replace(/_/g, " ")}` |
| : "reopened" |
| : null; |
| const title = reopened |
| ? `${actor} reopened and commented on ${issue.ref}` |
| : updated |
| ? `${actor} commented and updated ${issue.ref}` |
| : `${actor} commented on ${issue.ref}`; |
| const body = bodySnippet |
| ? reopenedLabel |
| ? `${reopenedLabel} - ${bodySnippet.replace(/^#+\s*/m, "").replace(/\n/g, " ")}` |
| : bodySnippet.replace(/^#+\s*/m, "").replace(/\n/g, " ") |
| : reopenedLabel |
| ? issue.title |
| ? `${reopenedLabel} - ${issue.title}` |
| : reopenedLabel |
| : issue.title ?? undefined; |
| return { |
| title, |
| body: body ? truncate(body, 96) : undefined, |
| tone: "info", |
| action: { label: `View ${issue.ref}`, href: issue.href }, |
| dedupeKey: `activity:${action}:${entityId}:${commentId ?? "na"}`, |
| }; |
| } |
|
|
| function buildJoinRequestToast( |
| payload: Record<string, unknown>, |
| ): ToastInput | null { |
| const entityType = readString(payload.entityType); |
| const action = readString(payload.action); |
| const entityId = readString(payload.entityId); |
| const details = readRecord(payload.details); |
|
|
| if (entityType !== "join_request" || !action || !entityId) return null; |
| if (action !== "join.requested" && action !== "join.request_replayed") return null; |
|
|
| const requestType = readString(details?.requestType); |
| const label = requestType === "agent" ? "Agent" : "Someone"; |
|
|
| return { |
| title: `${label} wants to join`, |
| body: "A new join request is waiting for approval.", |
| tone: "info", |
| action: { label: "View inbox", href: "/inbox/mine" }, |
| dedupeKey: `join-request:${entityId}`, |
| }; |
| } |
|
|
| function buildAgentStatusToast( |
| payload: Record<string, unknown>, |
| nameOf: (id: string) => string | null, |
| queryClient: QueryClient, |
| companyId: string, |
| ): ToastInput | null { |
| const agentId = readString(payload.agentId); |
| const status = readString(payload.status); |
| if (!agentId || !status || !AGENT_TOAST_STATUSES.has(status)) return null; |
|
|
| const tone = status === "error" ? "error" : "info"; |
| const name = nameOf(agentId) ?? `Agent ${shortId(agentId)}`; |
| const title = |
| status === "running" |
| ? `${name} started` |
| : `${name} errored`; |
|
|
| const agents = queryClient.getQueryData<Agent[]>(queryKeys.agents.list(companyId)); |
| const agent = agents?.find((a) => a.id === agentId); |
| const body = agent?.title ?? undefined; |
|
|
| return { |
| title, |
| body, |
| tone, |
| action: { label: "View agent", href: `/agents/${agentId}` }, |
| dedupeKey: `agent-status:${agentId}:${status}`, |
| }; |
| } |
|
|
| function buildRunStatusToast( |
| payload: Record<string, unknown>, |
| nameOf: (id: string) => string | null, |
| ): ToastInput | null { |
| const runId = readString(payload.runId); |
| const agentId = readString(payload.agentId); |
| const status = readString(payload.status); |
| if (!runId || !agentId || !status || !TERMINAL_RUN_STATUSES.has(status)) return null; |
|
|
| const error = readString(payload.error); |
| const triggerDetail = readString(payload.triggerDetail); |
| const name = nameOf(agentId) ?? `Agent ${shortId(agentId)}`; |
| const tone = status === "succeeded" ? "success" : status === "cancelled" ? "warn" : "error"; |
| const statusLabel = |
| status === "succeeded" ? "succeeded" |
| : status === "failed" ? "failed" |
| : status === "timed_out" ? "timed out" |
| : "cancelled"; |
| const title = `${name} run ${statusLabel}`; |
|
|
| let body: string | undefined; |
| if (error) { |
| body = truncate(error, 100); |
| } else if (triggerDetail) { |
| body = `Trigger: ${triggerDetail}`; |
| } |
|
|
| return { |
| title, |
| body, |
| tone, |
| ttlMs: status === "succeeded" ? 5000 : 7000, |
| action: { label: "View run", href: `/agents/${agentId}/runs/${runId}` }, |
| dedupeKey: `run-status:${runId}:${status}`, |
| }; |
| } |
|
|
| function invalidateHeartbeatQueries( |
| queryClient: ReturnType<typeof useQueryClient>, |
| companyId: string, |
| payload: Record<string, unknown>, |
| ) { |
| queryClient.invalidateQueries({ queryKey: queryKeys.liveRuns(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.dashboard(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.costs(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(companyId) }); |
|
|
| const agentId = readString(payload.agentId); |
| if (agentId) { |
| queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(companyId, agentId) }); |
| } |
| } |
|
|
| function invalidateActivityQueries( |
| queryClient: ReturnType<typeof useQueryClient>, |
| companyId: string, |
| payload: Record<string, unknown>, |
| ) { |
| queryClient.invalidateQueries({ queryKey: queryKeys.activity(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.dashboard(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(companyId) }); |
|
|
| const entityType = readString(payload.entityType); |
| const entityId = readString(payload.entityId); |
|
|
| if (entityType === "issue") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.listMineByMe(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(companyId) }); |
| if (entityId) { |
| const details = readRecord(payload.details); |
| const issueRefs = resolveIssueQueryRefs(queryClient, companyId, entityId, details); |
| for (const ref of issueRefs) { |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.documents(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.approvals(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(ref) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(ref) }); |
| } |
| } |
| return; |
| } |
|
|
| if (entityType === "agent") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.org(companyId) }); |
| if (entityId) { |
| queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(entityId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(companyId, entityId) }); |
| } |
| return; |
| } |
|
|
| if (entityType === "project") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(companyId) }); |
| if (entityId) queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(entityId) }); |
| return; |
| } |
|
|
| if (entityType === "goal") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.goals.list(companyId) }); |
| if (entityId) queryClient.invalidateQueries({ queryKey: queryKeys.goals.detail(entityId) }); |
| return; |
| } |
|
|
| if (entityType === "approval") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(companyId) }); |
| return; |
| } |
|
|
| if (entityType === "join_request") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.access.joinRequests(companyId) }); |
| return; |
| } |
|
|
| if (entityType === "cost_event") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.costs(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.usageByProvider(companyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.usageWindowSpend(companyId) }); |
| |
| |
| return; |
| } |
|
|
| if (entityType === "routine" || entityType === "routine_trigger" || entityType === "routine_run") { |
| queryClient.invalidateQueries({ queryKey: ["routines"] }); |
| return; |
| } |
|
|
| if (entityType === "company") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.companies.all }); |
| } |
| } |
|
|
| interface ToastGate { |
| cooldownHits: Map<string, number[]>; |
| suppressUntil: number; |
| } |
|
|
| function shouldSuppressToast(gate: ToastGate, category: string): boolean { |
| const now = Date.now(); |
| if (now < gate.suppressUntil) return true; |
|
|
| const hits = gate.cooldownHits.get(category); |
| if (!hits) return false; |
|
|
| const recent = hits.filter((t) => now - t < TOAST_COOLDOWN_WINDOW_MS); |
| gate.cooldownHits.set(category, recent); |
| return recent.length >= TOAST_COOLDOWN_MAX; |
| } |
|
|
| function recordToastHit(gate: ToastGate, category: string) { |
| const now = Date.now(); |
| const hits = gate.cooldownHits.get(category) ?? []; |
| hits.push(now); |
| gate.cooldownHits.set(category, hits); |
| } |
|
|
| function gatedPushToast( |
| gate: ToastGate, |
| pushToast: (toast: ToastInput) => string | null, |
| category: string, |
| toast: ToastInput, |
| ) { |
| if (shouldSuppressToast(gate, category)) return; |
| const id = pushToast(toast); |
| if (id !== null) recordToastHit(gate, category); |
| } |
|
|
| function handleLiveEvent( |
| queryClient: QueryClient, |
| expectedCompanyId: string, |
| pathname: string, |
| event: LiveEvent, |
| pushToast: (toast: ToastInput) => string | null, |
| gate: ToastGate, |
| currentActor: { userId: string | null; agentId: string | null }, |
| ) { |
| if (event.companyId !== expectedCompanyId) return; |
|
|
| const nameOf = (id: string) => resolveAgentName(queryClient, expectedCompanyId, id); |
| const payload = event.payload ?? {}; |
| if (event.type === "heartbeat.run.log") { |
| return; |
| } |
|
|
| if (event.type === "heartbeat.run.queued" || event.type === "heartbeat.run.status") { |
| invalidateHeartbeatQueries(queryClient, expectedCompanyId, payload); |
| if (event.type === "heartbeat.run.status") { |
| const toast = buildRunStatusToast(payload, nameOf); |
| if ( |
| toast && |
| !shouldSuppressRunStatusToastForVisibleIssue(queryClient, pathname, payload) |
| ) { |
| gatedPushToast(gate, pushToast, "run-status", toast); |
| } |
| } |
| return; |
| } |
|
|
| if (event.type === "heartbeat.run.event") { |
| return; |
| } |
|
|
| if (event.type === "agent.status") { |
| queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(expectedCompanyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.dashboard(expectedCompanyId) }); |
| queryClient.invalidateQueries({ queryKey: queryKeys.org(expectedCompanyId) }); |
| const agentId = readString(payload.agentId); |
| if (agentId) queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) }); |
| const toast = buildAgentStatusToast(payload, nameOf, queryClient, expectedCompanyId); |
| if ( |
| toast && |
| !shouldSuppressAgentStatusToastForVisibleIssue(queryClient, pathname, payload) |
| ) { |
| gatedPushToast(gate, pushToast, "agent-status", toast); |
| } |
| return; |
| } |
|
|
| if (event.type === "activity.logged") { |
| invalidateActivityQueries(queryClient, expectedCompanyId, payload); |
| const action = readString(payload.action); |
| const toast = |
| buildActivityToast(queryClient, expectedCompanyId, payload, currentActor) ?? |
| buildJoinRequestToast(payload); |
| if ( |
| toast && |
| !shouldSuppressActivityToastForVisibleIssue(queryClient, pathname, payload) |
| ) { |
| gatedPushToast(gate, pushToast, `activity:${action ?? "unknown"}`, toast); |
| } |
| } |
| } |
|
|
| export const __liveUpdatesTestUtils = { |
| invalidateActivityQueries, |
| shouldSuppressActivityToastForVisibleIssue, |
| shouldSuppressRunStatusToastForVisibleIssue, |
| shouldSuppressAgentStatusToastForVisibleIssue, |
| }; |
|
|
| export function LiveUpdatesProvider({ children }: { children: ReactNode }) { |
| const { selectedCompanyId } = useCompany(); |
| const queryClient = useQueryClient(); |
| const { pushToast } = useToast(); |
| const location = useLocation(); |
| const gateRef = useRef<ToastGate>({ cooldownHits: new Map(), suppressUntil: 0 }); |
| const pathnameRef = useRef(location.pathname); |
| const { data: session } = useQuery({ |
| queryKey: queryKeys.auth.session, |
| queryFn: () => authApi.getSession(), |
| retry: false, |
| }); |
| const currentUserId = session?.user?.id ?? session?.session?.userId ?? null; |
|
|
| useEffect(() => { |
| pathnameRef.current = location.pathname; |
| }, [location.pathname]); |
|
|
| useEffect(() => { |
| if (!selectedCompanyId) return; |
|
|
| let closed = false; |
| let reconnectAttempt = 0; |
| let reconnectTimer: number | null = null; |
| let socket: WebSocket | null = null; |
|
|
| const clearReconnect = () => { |
| if (reconnectTimer !== null) { |
| window.clearTimeout(reconnectTimer); |
| reconnectTimer = null; |
| } |
| }; |
|
|
| const scheduleReconnect = () => { |
| if (closed) return; |
| reconnectAttempt += 1; |
| const delayMs = Math.min(15000, 1000 * 2 ** Math.min(reconnectAttempt - 1, 4)); |
| reconnectTimer = window.setTimeout(() => { |
| reconnectTimer = null; |
| connect(); |
| }, delayMs); |
| }; |
|
|
| const connect = () => { |
| if (closed) return; |
| const protocol = window.location.protocol === "https:" ? "wss" : "ws"; |
| const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(selectedCompanyId)}/events/ws`; |
| socket = new WebSocket(url); |
|
|
| socket.onopen = () => { |
| if (reconnectAttempt > 0) { |
| gateRef.current.suppressUntil = Date.now() + RECONNECT_SUPPRESS_MS; |
| } |
| reconnectAttempt = 0; |
| }; |
|
|
| socket.onmessage = (message) => { |
| const raw = typeof message.data === "string" ? message.data : ""; |
| if (!raw) return; |
|
|
| try { |
| const parsed = JSON.parse(raw) as LiveEvent; |
| handleLiveEvent(queryClient, selectedCompanyId, pathnameRef.current, parsed, pushToast, gateRef.current, { |
| userId: currentUserId, |
| agentId: null, |
| }); |
| } catch { |
| |
| } |
| }; |
|
|
| socket.onerror = () => { |
| socket?.close(); |
| }; |
|
|
| socket.onclose = () => { |
| if (closed) return; |
| scheduleReconnect(); |
| }; |
| }; |
|
|
| connect(); |
|
|
| return () => { |
| closed = true; |
| clearReconnect(); |
| if (socket) { |
| socket.onopen = null; |
| socket.onmessage = null; |
| socket.onerror = null; |
| socket.onclose = null; |
| socket.close(1000, "provider_unmount"); |
| } |
| }; |
| }, [queryClient, selectedCompanyId, pushToast, currentUserId]); |
|
|
| return <>{children}</>; |
| } |
|
|