feat: add toast notification system with success toasts
Adds ToastProvider/ToastViewport for in-app notifications with dedupe, auto-dismiss, and action links. Wires success toasts to issue create, issue update, and comment mutations. Adds live event toasts for activity, agent status, and run status changes via LiveUpdatesProvider. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
@@ -2,12 +2,121 @@ import { useEffect, type ReactNode } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { LiveEvent } from "@paperclip/shared";
|
||||
import { useCompany } from "./CompanyContext";
|
||||
import type { ToastInput } from "./ToastContext";
|
||||
import { useToast } from "./ToastContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
const ISSUE_TOAST_ACTIONS = new Set(["issue.created", "issue.updated", "issue.comment_added"]);
|
||||
const AGENT_TOAST_STATUSES = new Set(["running", "idle", "error"]);
|
||||
const TERMINAL_RUN_STATUSES = new Set(["succeeded", "failed", "timed_out", "cancelled"]);
|
||||
|
||||
function buildActivityToast(payload: Record<string, unknown>): ToastInput | null {
|
||||
const entityType = readString(payload.entityType);
|
||||
const entityId = readString(payload.entityId);
|
||||
const action = readString(payload.action);
|
||||
const details = readRecord(payload.details);
|
||||
|
||||
if (entityType !== "issue" || !entityId || !action || !ISSUE_TOAST_ACTIONS.has(action)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const issueHref = `/issues/${entityId}`;
|
||||
const issueLabel = details?.title && typeof details.title === "string"
|
||||
? details.title
|
||||
: `Issue ${shortId(entityId)}`;
|
||||
|
||||
if (action === "issue.created") {
|
||||
return {
|
||||
title: "Issue created",
|
||||
body: issueLabel,
|
||||
tone: "success",
|
||||
action: { label: "Open issue", href: issueHref },
|
||||
dedupeKey: `activity:${action}:${entityId}`,
|
||||
};
|
||||
}
|
||||
|
||||
if (action === "issue.updated") {
|
||||
return {
|
||||
title: "Issue updated",
|
||||
body: issueLabel,
|
||||
tone: "info",
|
||||
action: { label: "Open issue", href: issueHref },
|
||||
dedupeKey: `activity:${action}:${entityId}`,
|
||||
};
|
||||
}
|
||||
|
||||
const commentId = readString(details?.commentId);
|
||||
return {
|
||||
title: "Issue comment added",
|
||||
body: issueLabel,
|
||||
tone: "info",
|
||||
action: { label: "Open issue", href: issueHref },
|
||||
dedupeKey: `activity:${action}:${entityId}:${commentId ?? "na"}`,
|
||||
};
|
||||
}
|
||||
|
||||
function buildAgentStatusToast(payload: Record<string, unknown>): 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" : status === "idle" ? "success" : "info";
|
||||
const title =
|
||||
status === "running"
|
||||
? "Agent started"
|
||||
: status === "idle"
|
||||
? "Agent is idle"
|
||||
: "Agent error";
|
||||
|
||||
return {
|
||||
title,
|
||||
body: `Agent ${shortId(agentId)}`,
|
||||
tone,
|
||||
action: { label: "View agent", href: `/agents/${agentId}` },
|
||||
dedupeKey: `agent-status:${agentId}:${status}`,
|
||||
};
|
||||
}
|
||||
|
||||
function buildRunStatusToast(payload: Record<string, unknown>): 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 tone = status === "succeeded" ? "success" : status === "cancelled" ? "warn" : "error";
|
||||
const title =
|
||||
status === "succeeded"
|
||||
? "Run succeeded"
|
||||
: status === "failed"
|
||||
? "Run failed"
|
||||
: status === "timed_out"
|
||||
? "Run timed out"
|
||||
: "Run cancelled";
|
||||
|
||||
return {
|
||||
title,
|
||||
body: error ?? `Agent ${shortId(agentId)} · Run ${shortId(runId)}`,
|
||||
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,
|
||||
@@ -93,6 +202,7 @@ function handleLiveEvent(
|
||||
queryClient: ReturnType<typeof useQueryClient>,
|
||||
expectedCompanyId: string,
|
||||
event: LiveEvent,
|
||||
pushToast: (toast: ToastInput) => string | null,
|
||||
) {
|
||||
if (event.companyId !== expectedCompanyId) return;
|
||||
|
||||
@@ -103,6 +213,10 @@ function handleLiveEvent(
|
||||
|
||||
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);
|
||||
if (toast) pushToast(toast);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -116,17 +230,22 @@ function handleLiveEvent(
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.org(expectedCompanyId) });
|
||||
const agentId = readString(payload.agentId);
|
||||
if (agentId) queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) });
|
||||
const toast = buildAgentStatusToast(payload);
|
||||
if (toast) pushToast(toast);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "activity.logged") {
|
||||
invalidateActivityQueries(queryClient, expectedCompanyId, payload);
|
||||
const toast = buildActivityToast(payload);
|
||||
if (toast) pushToast(toast);
|
||||
}
|
||||
}
|
||||
|
||||
export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const queryClient = useQueryClient();
|
||||
const { pushToast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCompanyId) return;
|
||||
@@ -169,7 +288,7 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(raw) as LiveEvent;
|
||||
handleLiveEvent(queryClient, selectedCompanyId, parsed);
|
||||
handleLiveEvent(queryClient, selectedCompanyId, parsed, pushToast);
|
||||
} catch {
|
||||
// Ignore non-JSON payloads.
|
||||
}
|
||||
@@ -198,7 +317,7 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
|
||||
socket.close(1000, "provider_unmount");
|
||||
}
|
||||
};
|
||||
}, [queryClient, selectedCompanyId]);
|
||||
}, [queryClient, selectedCompanyId, pushToast]);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
167
ui/src/context/ToastContext.tsx
Normal file
167
ui/src/context/ToastContext.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
|
||||
export type ToastTone = "info" | "success" | "warn" | "error";
|
||||
|
||||
export interface ToastAction {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface ToastInput {
|
||||
id?: string;
|
||||
dedupeKey?: string;
|
||||
title: string;
|
||||
body?: string;
|
||||
tone?: ToastTone;
|
||||
ttlMs?: number;
|
||||
action?: ToastAction;
|
||||
}
|
||||
|
||||
export interface ToastItem {
|
||||
id: string;
|
||||
title: string;
|
||||
body?: string;
|
||||
tone: ToastTone;
|
||||
ttlMs: number;
|
||||
action?: ToastAction;
|
||||
createdAt: number;
|
||||
}
|
||||
|
||||
interface ToastContextValue {
|
||||
toasts: ToastItem[];
|
||||
pushToast: (input: ToastInput) => string | null;
|
||||
dismissToast: (id: string) => void;
|
||||
clearToasts: () => void;
|
||||
}
|
||||
|
||||
const DEFAULT_TTL_MS = 5000;
|
||||
const MIN_TTL_MS = 1500;
|
||||
const MAX_TTL_MS = 15000;
|
||||
const MAX_TOASTS = 5;
|
||||
const DEDUPE_WINDOW_MS = 3500;
|
||||
const DEDUPE_MAX_AGE_MS = 20000;
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||
|
||||
function normalizeTtl(value: number | undefined) {
|
||||
const fallback = DEFAULT_TTL_MS;
|
||||
if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
|
||||
return Math.max(MIN_TTL_MS, Math.min(MAX_TTL_MS, Math.floor(value)));
|
||||
}
|
||||
|
||||
function generateToastId() {
|
||||
return `toast_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||
const timersRef = useRef(new Map<string, number>());
|
||||
const dedupeRef = useRef(new Map<string, number>());
|
||||
|
||||
const clearTimer = useCallback((id: string) => {
|
||||
const handle = timersRef.current.get(id);
|
||||
if (handle !== undefined) {
|
||||
window.clearTimeout(handle);
|
||||
timersRef.current.delete(id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const dismissToast = useCallback(
|
||||
(id: string) => {
|
||||
clearTimer(id);
|
||||
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
||||
},
|
||||
[clearTimer],
|
||||
);
|
||||
|
||||
const clearToasts = useCallback(() => {
|
||||
for (const handle of timersRef.current.values()) {
|
||||
window.clearTimeout(handle);
|
||||
}
|
||||
timersRef.current.clear();
|
||||
setToasts([]);
|
||||
}, []);
|
||||
|
||||
const pushToast = useCallback(
|
||||
(input: ToastInput) => {
|
||||
const now = Date.now();
|
||||
const tone = input.tone ?? "info";
|
||||
const ttlMs = normalizeTtl(input.ttlMs);
|
||||
const dedupeKey =
|
||||
input.dedupeKey ?? input.id ?? `${tone}|${input.title}|${input.body ?? ""}|${input.action?.href ?? ""}`;
|
||||
|
||||
for (const [key, ts] of dedupeRef.current.entries()) {
|
||||
if (now - ts > DEDUPE_MAX_AGE_MS) {
|
||||
dedupeRef.current.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
const lastSeen = dedupeRef.current.get(dedupeKey);
|
||||
if (lastSeen && now - lastSeen < DEDUPE_WINDOW_MS) {
|
||||
return null;
|
||||
}
|
||||
dedupeRef.current.set(dedupeKey, now);
|
||||
|
||||
const id = input.id ?? generateToastId();
|
||||
clearTimer(id);
|
||||
|
||||
setToasts((prev) => {
|
||||
const nextToast: ToastItem = {
|
||||
id,
|
||||
title: input.title,
|
||||
body: input.body,
|
||||
tone,
|
||||
ttlMs,
|
||||
action: input.action,
|
||||
createdAt: now,
|
||||
};
|
||||
|
||||
const withoutCurrent = prev.filter((toast) => toast.id !== id);
|
||||
return [nextToast, ...withoutCurrent].slice(0, MAX_TOASTS);
|
||||
});
|
||||
|
||||
const timeout = window.setTimeout(() => {
|
||||
dismissToast(id);
|
||||
}, ttlMs);
|
||||
timersRef.current.set(id, timeout);
|
||||
return id;
|
||||
},
|
||||
[clearTimer, dismissToast],
|
||||
);
|
||||
|
||||
useEffect(() => () => {
|
||||
for (const handle of timersRef.current.values()) {
|
||||
window.clearTimeout(handle);
|
||||
}
|
||||
timersRef.current.clear();
|
||||
}, []);
|
||||
|
||||
const value = useMemo<ToastContextValue>(
|
||||
() => ({
|
||||
toasts,
|
||||
pushToast,
|
||||
dismissToast,
|
||||
clearToasts,
|
||||
}),
|
||||
[toasts, pushToast, dismissToast, clearToasts],
|
||||
);
|
||||
|
||||
return <ToastContext.Provider value={value}>{children}</ToastContext.Provider>;
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error("useToast must be used within a ToastProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
Reference in New Issue
Block a user