feat(webapp): dashboard agent — Watch

.changeset/quiet-hounds-shave.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+The current-worker API now reports each task's queue, so you can see which tasks write to a given queue.

.server-changes/dashboard-agent.md

@@ -7,6 +7,8 @@ Meet the dashboard agent: a chat in every environment that answers questions abo
 
 **Investigate** on a failed run, an error, a backed-up queue or a run that hasn't started gets you a worked-through answer — what happened, why, and how to fix it, with every claim linked to the runs, errors and deploys behind it.
 
+**Watch…** on a run, queue, error or the health report tells you when things change: a run finishes, a queue clears or grows past a number you pick, an error comes back, an environment recovers. The answer arrives in the chat and, if you want, by email, Slack or webhook — and the agent can look into bad news on its own. A watch reaches you on any browser you sign in from, without opening the chat first.
+
 The agent works on preview and dev branches, with that branch's own data.
 
 The health report reads the same everywhere — dashboard, terminal, editor. A very long chat keeps working: the agent summarises the earlier part and carries on. The agent's replies no longer show images.

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

@@ -4,16 +4,20 @@ import type {
 } from "@internal/dashboard-agent-contracts";
 import { Button } from "~/components/primitives/Buttons";
 import { ChatActionsRow } from "./chat-layout";
-import { renderableActions } from "./view-actions";
+import { renderableActions, withoutWatchActions } from "./view-actions";
 
 export function ActionsBlock({
   block,
   onIntent,
+  dropWatch = false,
 }: {
   block: ActionsBlockPayload;
   onIntent?: (intent: AgentIntent) => void;
+  /** Set when an investigation card in the same answer already offers the watch. */
+  dropWatch?: boolean;
 }) {
-  const renderable = renderableActions(block.actions);
+  const actions = dropWatch ? withoutWatchActions(block.actions) : block.actions;
+  const renderable = renderableActions(actions);
   if (!onIntent || renderable.length === 0) return null;
   return (
     <ChatActionsRow>

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

@@ -1,11 +1,14 @@
-import type { SuggestedPrompt } from "@internal/dashboard-agent-contracts";
+import type { SuggestedPrompt, WatchSpec } from "@internal/dashboard-agent-contracts";
 import { useLocation } from "@remix-run/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { agentDeepLinkParams, ASK_AI_SHORTCUT, askAiChannelTarget } from "./ask-ai-channels";
@@ -18,18 +21,93 @@ import {
   readAgentFullscreen,
   writeAgentFullscreen,
 } from "./panel-layout";
+import { nextPendingTurnChatId } from "./pending-turn";
+import { nextVisibleChat } from "./unread-counts";
+import { startWakePolling, wakesToToast } from "./wake-poll";
+import { shouldPollWakeFeed, subscribeWatchActivity } from "./watch-activity";
+import {
+  showWatchWakesSummaryToast,
+  showWatchWakeToast,
+  WAKE_TOAST_MAX_INDIVIDUAL,
+  type WatchWake,
+} from "./WatchWakeToast";
+
+const TOASTED_WAKES_STORAGE_KEY = "tdev:dashboard-agent:toasted-wakes";
+
+// Shorter than the poll interval, so a stuck request is dropped before the next tick.
+const UNREAD_REQUEST_TIMEOUT_MS = 30_000;
 
 /** `hasAccess` is a UI gate only; the resource routes enforce the same check server-side. */
 export function DashboardAgent({
   children,
   hasAccess = false,
   promotedPrompt,
+  /** From the page load: unread wakes waiting for this user, whatever this browser remembers. */
+  initialUnreadWakes = 0,
+  initialUnreadWork = 0,
+  /** Also from the page load: a watch is running, so a wake can still arrive in this tab. */
+  hasActiveWatches = false,
 }: {
   children: React.ReactNode;
   hasAccess?: boolean;
   promotedPrompt?: SuggestedPrompt;
+  initialUnreadWakes?: number;
+  /** Chats whose transcript moved on since their owner last looked. */
+  initialUnreadWork?: number;
+  hasActiveWatches?: boolean;
 }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const actionPath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboard-agent`;
+
   const [open, setOpen] = useState(false);
+  // Seeded from the page load, so the launcher dot is right before the first poll answers.
+  const [unreadWakes, setUnreadWakes] = useState(initialUnreadWakes);
+  // Work that finished behind a closed panel. Counted server-side on page load and refreshed
+  // with the chat list; the wake poll doesn't carry it.
+  const [unreadWork, setUnreadWork] = useState(initialUnreadWork);
+  // A turn this tab started may finish after the panel closes; that is exactly the case the
+  // dot exists for, so the poll has to be running when it lands.
+  const [pendingTurnChatId, setPendingTurnChatId] = useState<string | null>(null);
+  const handleTurnActivityChange = useCallback((chatId: string, active: boolean) => {
+    setPendingTurnChatId((current) => nextPendingTurnChatId(current, { chatId, active }));
+  }, []);
+  const toastedWakes = useRef(new Set<string>());
+  // The toast source is recent deliveries, not unread, so the dedupe must survive a reload.
+  useEffect(() => {
+    try {
+      const raw = window.localStorage.getItem(TOASTED_WAKES_STORAGE_KEY);
+      if (raw) for (const id of JSON.parse(raw) as string[]) toastedWakes.current.add(id);
+    } catch {
+      // Storage unavailable; the in-memory dedupe still applies.
+    }
+  }, []);
+  const rememberToasted = useCallback((watchId: string) => {
+    toastedWakes.current.add(watchId);
+    try {
+      // Newest ids only, so the key can't grow unbounded.
+      window.localStorage.setItem(
+        TOASTED_WAKES_STORAGE_KEY,
+        JSON.stringify([...toastedWakes.current].slice(-50))
+      );
+    } catch {
+      // Same as the read.
+    }
+  }, []);
+  // A wake in the on-screen chat toasts but must not light the dot. Read by the poll callback,
+  // which outlives the render that started it, so it has to be a ref.
+  const visibleChat = useRef<string | null>(null);
+
+  // Switching environment re-runs the layout loader but does not remount it, so the seeds
+  // above would keep the old environment's counts.
+  const seededEnvironment = useRef(environment.id);
+  useEffect(() => {
+    if (seededEnvironment.current === environment.id) return;
+    seededEnvironment.current = environment.id;
+    setUnreadWakes(initialUnreadWakes);
+    setUnreadWork(initialUnreadWork);
+  }, [environment.id, initialUnreadWakes, initialUnreadWork]);
   // Read lazily so SSR always renders the side panel.
   const [fullscreen, setFullscreen] = useState(readAgentFullscreen);
 
@@ -55,24 +133,142 @@ export function DashboardAgent({
   const [requestedMessage, setRequestedMessage] = useState<
     { text: string; seq: number } | undefined
   >(undefined);
+  // `seq` so the same chat can be asked for twice.
+  const [openChatRequest, setOpenChatRequest] = useState<
+    { chatId: string; seq: number } | undefined
+  >(undefined);
+  const [watchRequest, setWatchRequest] = useState<{ spec: WatchSpec; seq: number } | undefined>(
+    undefined
+  );
 
   const setPanelOpen = useCallback((next: boolean) => {
     setOpen(next);
     // Pending requests must be dropped or a stale one re-applies on the next open.
     if (!next) {
+      visibleChat.current = null;
       setFullscreen(false);
       writeAgentFullscreen(false);
       setRequestedMessage(undefined);
+      setOpenChatRequest(undefined);
+      setWatchRequest(undefined);
     }
   }, []);
 
+  const openChat = useCallback((chatId: string) => {
+    setOpen(true);
+    setOpenChatRequest((current) => ({ chatId, seq: (current?.seq ?? 0) + 1 }));
+  }, []);
+
   const openWith = useCallback((text: string) => {
     const trimmed = text.trim();
     if (!trimmed) return;
     setOpen(true);
     setRequestedMessage((current) => ({ text: trimmed, seq: (current?.seq ?? 0) + 1 }));
   }, []);
 
+  const openWithWatch = useCallback((spec: WatchSpec) => {
+    setOpen(true);
+    setWatchRequest((current) => ({ spec, seq: (current?.seq ?? 0) + 1 }));
+  }, []);
+
+  // Nothing to be woken about means nothing to poll for. The page load's unread count and
+  // active-watch flag are the ungated signals; the browser's own memory of a watch starts the
+  // poll without a reload. Once any says yes this tab keeps polling, so a wake reaches a tab
+  // that was open before the watch existed.
+  const [watching, setWatching] = useState(false);
+  useEffect(() => {
+    const sync = () => {
+      if (
+        shouldPollWakeFeed({
+          serverUnreadWakes: initialUnreadWakes,
+          serverHasActiveWatches: hasActiveWatches,
+          serverUnreadWork: initialUnreadWork,
+          turnInFlight: pendingTurnChatId !== null,
+          organizationId: organization.id,
+        })
+      )
+        setWatching(true);
+    };
+    sync();
+    return subscribeWatchActivity(sync);
+  }, [organization.id, initialUnreadWakes, hasActiveWatches, initialUnreadWork, pendingTurnChatId]);
+
+  useEffect(() => {
+    if (!hasAccess || !watching) return;
+
+    let cancelled = false;
+    const load = async () => {
+      try {
+        // The chat on screen is being read, so the server leaves it out of the work count
+        // rather than the client subtracting it back off afterwards.
+        const onScreen = visibleChat.current;
+        // Bounded, so one stuck request can't hold the poll's in-flight guard.
+        const res = await fetch(
+          `${actionPath}?unread=1${onScreen ? `&chatId=${encodeURIComponent(onScreen)}` : ""}`,
+          { signal: AbortSignal.timeout(UNREAD_REQUEST_TIMEOUT_MS) }
+        );
+        if (!res.ok) return;
+        const data = (await res.json()) as {
+          unreadWakes?: number;
+          unreadWork?: number;
+          wakes?: WatchWake[];
+        };
+        if (cancelled) return;
+        // The wakes list carries read ones too, so only unread ones are subtracted.
+        const unreadInView = (data.wakes ?? []).filter(
+          (wake) => wake.unread && wake.chatId === visibleChat.current
+        ).length;
+        setUnreadWakes(Math.max(0, (data.unreadWakes ?? 0) - unreadInView));
+        setUnreadWork(Math.max(0, data.unreadWork ?? 0));
+
+        const fresh = wakesToToast(data.wakes, toastedWakes.current);
+        for (const wake of fresh) rememberToasted(wake.watchId);
+
+        if (fresh.length > WAKE_TOAST_MAX_INDIVIDUAL) {
+          showWatchWakesSummaryToast(fresh.length, () => setPanelOpen(true));
+        } else {
+          for (const wake of [...fresh].reverse()) {
+            showWatchWakeToast(wake, openChat);
+          }
+        }
+      } catch {
+        // Try again next tick.
+      }
+    };
+
+    const stop = startWakePolling({
+      load,
+      isHidden: () => document.hidden,
+      onVisibilityChange: (listener) => {
+        document.addEventListener("visibilitychange", listener);
+        return () => document.removeEventListener("visibilitychange", listener);
+      },
+    });
+
+    return () => {
+      cancelled = true;
+      stop();
+    };
+  }, [hasAccess, watching, actionPath, setPanelOpen, openChat]);
+
+  // Zeroes the wake dot right away; the poll restores the truth if another chat has one. The
+  // work count is not touched here: the panel derives it from the chat list.
+  const markChatRead = useCallback(
+    async (chatId: string, options: { leaving: boolean }) => {
+      visibleChat.current = nextVisibleChat(chatId, options);
+      setUnreadWakes(0);
+      const body = new FormData();
+      body.set("intent", "read");
+      body.set("chatId", chatId);
+      try {
+        await fetch(actionPath, { method: "POST", body });
+      } catch {
+        // Catches up on the next open.
+      }
+    },
+    [actionPath]
+  );
+
   // ⌘J is contextual: closed opens the panel, open starts a new chat. It never closes.
   useShortcutKeys({
     shortcut: TOGGLE_PANEL_SHORTCUT,
@@ -107,8 +303,8 @@ export function DashboardAgent({
   });
 
   const context = useMemo(
-    () => ({ open, setOpen: setPanelOpen, openWith }),
-    [open, setPanelOpen, openWith]
+    () => ({ open, setOpen: setPanelOpen, openWith, openWithWatch, unreadWakes, unreadWork }),
+    [open, setPanelOpen, openWith, openWithWatch, unreadWakes, unreadWork]
   );
 
   if (!hasAccess) {
@@ -137,8 +333,14 @@ export function DashboardAgent({
                 <DashboardAgentPanel
                   onClose={() => setPanelOpen(false)}
                   requestedMessage={requestedMessage}
+                  openChatRequest={openChatRequest}
+                  watchRequest={watchRequest}
                   newChatSeq={newChatSeq}
                   promotedPrompt={promotedPrompt}
+                  onChatRead={markChatRead}
+                  // The panel's own count, off the chat list it has already marked read.
+                  onUnreadWorkChange={setUnreadWork}
+                  onTurnActivityChange={handleTurnActivityChange}
                   isFullscreen={fullscreen}
                   onToggleFullscreen={toggleFullscreen}
                 />