fix(webapp): wake toasts fire on delivery, not unread state; agent toast surface matches Ask Trigger on dark themes

A wake read on screen before the next poll never toasted. The toast list is
now recent deliveries (15 min, id-deduped client-side); the dot still counts
unread only.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -167,10 +167,12 @@ export function DashboardAgent({
         if (!res.ok) return;
         const data = (await res.json()) as { unreadWakes?: number; wakes?: WatchWake[] };
         if (cancelled) return;
-        const wakesInView = (data.wakes ?? []).filter(
-          (wake) => wake.chatId === visibleChat.current
+        // The wakes list now carries READ ones too (they still toast, once) —
+        // only unread ones in the visible chat are subtracted from the dot.
+        const unreadInView = (data.wakes ?? []).filter(
+          (wake) => wake.unread && wake.chatId === visibleChat.current
         ).length;
-        setUnreadWakes(Math.max(0, (data.unreadWakes ?? 0) - wakesInView));
+        setUnreadWakes(Math.max(0, (data.unreadWakes ?? 0) - unreadInView));
 
         const fresh = (data.wakes ?? []).filter((wake) => !toastedWakes.current.has(wake.watchId));
         for (const wake of fresh) toastedWakes.current.add(wake.watchId);

apps/webapp/app/components/dashboard-agent/WatchWakeToast.tsx

@@ -42,6 +42,8 @@ export type WatchWake = {
   identity?: string;
   resolution?: WatchResolution | null;
   observedOutcome?: WatchObservedOutcome | null;
+  /** Landed after the chat's read marker. The dot counts these; the toast fires either way. */
+  unread?: boolean;
 };
 
 /**

apps/webapp/app/components/primitives/Toast.tsx

@@ -103,8 +103,9 @@ export function ToastUI({
         "self-end rounded-md border border-grid-bright bg-background-dimmed",
         variant === "success" && "border-success",
         variant === "error" && "border-error",
-        // The agent's toast wears the Ask Trigger button's border.
-        variant === "agent" && "border-[#41FF54]/25 light:border-success/60"
+        // The agent's toast wears the Ask Trigger button's border, and on the
+        // dark themes its surface too.
+        variant === "agent" && "border-[#41FF54]/25 light:border-success/60 dark:bg-secondary"
       )}
       style={{
         width: toastWidth,

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboard-agent.ts

@@ -12,7 +12,7 @@ import {
   listChatIdsWithOpenInvestigations,
   listChatIdsWithUnreadWakes,
   listChats,
-  listUnreadWatchWakes,
+  listRecentWatchWakes,
   markChatRead,
   renameChat,
   setChatPinned,
@@ -120,15 +120,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const searchParams = new URL(request.url).searchParams;
 
   if (searchParams.get("unread") === "1") {
-    // The count drives the dot, the capped list drives one toast per wake.
+    // The count drives the dot; the list drives one toast per wake. The list is
+    // RECENT deliveries rather than unread ones — a wake the user happened to be
+    // reading when it landed still deserves its toast (client dedupes by id).
     const [unreadWakes, wakes] = await Promise.all([
       countUnreadWatchWakes(dashboardAgentDb, {
         organizationId: project.organizationId,
         userId,
       }),
-      listUnreadWatchWakes(dashboardAgentDb, {
+      listRecentWatchWakes(dashboardAgentDb, {
         organizationId: project.organizationId,
         userId,
+        deliveredAfter: new Date(Date.now() - 15 * 60 * 1000),
       }),
     ]);
     return json({ unreadWakes, wakes });

internal-packages/dashboard-agent-db/src/queries.ts

@@ -1050,6 +1050,8 @@ export interface UnreadWatchWake {
   /** Null on a row written before the resolution model — the surface falls back. */
   resolution: WatchResolution | null;
   observedOutcome: WatchObservedOutcome | null;
+  /** Landed after the chat's read marker. The dot counts these; the toast fires either way. */
+  unread: boolean;
 }
 
 // The toast fires one per wake, so a long-unopened panel doesn't need the whole
@@ -1062,11 +1064,14 @@ const UNREAD_WAKE_LIST_LIMIT = 10;
  * this one returns rows instead of a total, capped at
  * {@link UNREAD_WAKE_LIST_LIMIT}.
  */
-export async function listUnreadWatchWakes(
+export async function listRecentWatchWakes(
   db: DashboardAgentDb,
-  params: { organizationId: string; userId: string }
+  params: { organizationId: string; userId: string; deliveredAfter: Date }
 ): Promise<UnreadWatchWake[]> {
   const resolvedAt = sql<Date>`coalesce(${watches.firedAt}, ${watches.lastCheckedAt})`;
+  // Whether the wake landed after the chat was last read. The TOAST doesn't
+  // care (a wake read on screen still deserves its toast, once); the DOT does.
+  const unread = sql<boolean>`(${chats.lastReadAt} is null or coalesce(${watches.firedAt}, ${watches.lastCheckedAt}) > ${chats.lastReadAt})`;
 
   const rows = await db
     .select({
@@ -1078,6 +1083,7 @@ export async function listUnreadWatchWakes(
       resolution: watches.resolution,
       observedOutcome: watches.observedOutcome,
       resolvedAt,
+      unread,
     })
     .from(watches)
     .innerJoin(chats, eq(chats.id, watches.chatId))
@@ -1091,7 +1097,7 @@ export async function listUnreadWatchWakes(
         eq(chats.organizationId, params.organizationId),
         eq(chats.userId, params.userId),
         isNull(chats.deletedAt),
-        sql`(${chats.lastReadAt} is null or coalesce(${watches.firedAt}, ${watches.lastCheckedAt}) > ${chats.lastReadAt})`
+        sql`coalesce(${watches.firedAt}, ${watches.lastCheckedAt}) > ${params.deliveredAfter.toISOString()}::timestamptz`
       )
     )
     .orderBy(desc(resolvedAt))
@@ -1108,6 +1114,7 @@ export async function listUnreadWatchWakes(
     identity: row.identity,
     resolution: row.resolution,
     observedOutcome: row.observedOutcome,
+    unread: row.unread,
   }));
 }