feat(webapp): mark a chat unread when work finished behind a closed panel

A watch wake was the only thing that raised the dot and the highlight. An answer or a settled card that landed while the panel was closed now does the same — without a toast, which stays a wake's alone.

Author: kathiekiwi

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

@@ -44,13 +44,16 @@ export function DashboardAgent({
   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();
@@ -61,6 +64,9 @@ export function DashboardAgent({
   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);
   const toastedWakes = useRef(new Set<string>());
   // The toast source is recent deliveries, not unread, so the dedupe must survive a reload.
   useEffect(() => {
@@ -222,6 +228,8 @@ export function DashboardAgent({
     async (chatId: string) => {
       visibleChat.current = chatId;
       setUnreadWakes(0);
+      // Opening a chat is what makes its work read, so the dot goes with it.
+      setUnreadWork((count) => Math.max(0, count - 1));
       const body = new FormData();
       body.set("intent", "read");
       body.set("chatId", chatId);
@@ -258,8 +266,8 @@ export function DashboardAgent({
   useDashboardAgentOpenRequests({ enabled: hasAccess, openWith, setOpen: setPanelOpen });
 
   const context = useMemo(
-    () => ({ open, setOpen: setPanelOpen, openWith, openWithWatch, unreadWakes }),
-    [open, setPanelOpen, openWith, openWithWatch, unreadWakes]
+    () => ({ open, setOpen: setPanelOpen, openWith, openWithWatch, unreadWakes, unreadWork }),
+    [open, setPanelOpen, openWith, openWithWatch, unreadWakes, unreadWork]
   );
 
   if (!hasAccess) {
@@ -293,6 +301,7 @@ export function DashboardAgent({
                   newChatSeq={newChatSeq}
                   promotedPrompt={promotedPrompt}
                   onChatRead={markChatRead}
+                  onUnreadWorkChange={setUnreadWork}
                   isFullscreen={fullscreen}
                   onToggleFullscreen={toggleFullscreen}
                 />

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

@@ -16,6 +16,8 @@ export type DashboardAgentChat = {
   lastMessageAt: string | null;
   watches?: WatchChip[];
   hasUnreadWake?: boolean;
+  /** The chat answered, settled a card or woke while it was closed. */
+  hasUnreadWork?: boolean;
   hasActiveWatch?: boolean;
   hasOpenInvestigation?: boolean;
 };
@@ -49,11 +51,14 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
   );
 }
 
+/** A wake is unread work too, so one predicate answers for both. */
+export function chatIsUnread(chat: DashboardAgentChat): boolean {
+  return (chat.hasUnreadWake ?? false) || (chat.hasUnreadWork ?? false);
+}
+
 // Must stay a stable sort on one key: everything else keeps the server's order.
 function unreadFirst(chats: DashboardAgentChat[]): DashboardAgentChat[] {
-  return [...chats].sort(
-    (a, b) => Number(b.hasUnreadWake ?? false) - Number(a.hasUnreadWake ?? false)
-  );
+  return [...chats].sort((a, b) => Number(chatIsUnread(b)) - Number(chatIsUnread(a)));
 }
 
 // Weeks are the coarsest unit: months render as "1.8mo" for eight weeks.
@@ -104,7 +109,7 @@ export function DashboardAgentHistoryMenu({
                 <AgentListRow
                   key={chat.id}
                   label={chat.title}
-                  unread={chat.hasUnreadWake ?? false}
+                  unread={chatIsUnread(chat)}
                   status={process ? <ProcessIcon process={process} /> : null}
                   meta={age}
                   variant={chat.id === currentChatId ? "selected" : "default"}

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

@@ -71,6 +71,7 @@ export function DashboardAgentPanel({
   promotedPrompt,
   watchRequest,
   onChatRead,
+  onUnreadWorkChange,
   isFullscreen = false,
   onToggleFullscreen,
 }: {
@@ -84,6 +85,8 @@ export function DashboardAgentPanel({
   promotedPrompt?: SuggestedPrompt;
   watchRequest?: { spec: WatchSpec; seq: number };
   onChatRead?: (chatId: string) => void;
+  /** How many chats still hold work their owner hasn't seen. */
+  onUnreadWorkChange?: (count: number) => void;
 }) {
   const organization = useOrganization();
   const project = useProject();
@@ -153,9 +156,12 @@ export function DashboardAgentPanel({
         const pending = chats.some((chat) => chat.hasActiveWatch || chat.hasUnreadWake);
         if (pending) rememberWatchActivity(organization.id);
         else forgetWatchActivity(organization.id);
-        setChats(
-          chats.map((chat) => (read.has(chat.id) ? { ...chat, hasUnreadWake: false } : chat))
+        const settled = chats.map((chat) =>
+          read.has(chat.id) ? { ...chat, hasUnreadWake: false, hasUnreadWork: false } : chat
         );
+        setChats(settled);
+        // The launcher's dot is server-counted on page load; this keeps it honest between loads.
+        onUnreadWorkChange?.(settled.filter((chat) => chat.hasUnreadWork).length);
       } catch (error) {
         console.error("Dashboard agent: failed to load chat history", error);
         toast.error("We couldn't load your previous chats. Try again in a moment.");

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

@@ -31,6 +31,8 @@ type DashboardAgentContextValue = {
   openWithWatch: (spec: WatchSpec) => void;
   /** Polled only while the panel is closed; 0 while it is open. */
   unreadWakes: number;
+  /** Chats that answered, settled or woke while the panel was closed. */
+  unreadWork: number;
 };
 
 const DashboardAgentContext = createContext<DashboardAgentContextValue | null>(null);
@@ -48,12 +50,12 @@ export function DashboardAgentLauncher() {
     return null;
   }
 
-  const { open, setOpen, unreadWakes } = agent;
+  const { open, setOpen, unreadWakes, unreadWork } = agent;
   if (open) {
     return null;
   }
 
-  const hasUnread = unreadWakes > 0;
+  const hasUnread = unreadWakes > 0 || unreadWork > 0;
 
   return (
     <SimpleTooltip

apps/webapp/app/components/dashboard-agent/unread-work.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { chatIsUnread } from "./DashboardAgentHistory";
+
+/**
+ * A chat is unread when its transcript moved on after its owner last looked — whether that
+ * was a watch waking it or an answer that landed while the panel was closed. Both raise the
+ * dot and the highlight; only a wake also raises a toast.
+ */
+describe("chatIsUnread", () => {
+  const chat = (over: Record<string, unknown> = {}) =>
+    ({ id: "chat_1", title: "t", lastMessageAt: null, ...over }) as never;
+
+  it("counts work that finished behind a closed panel", () => {
+    expect(chatIsUnread(chat({ hasUnreadWork: true }))).toBe(true);
+  });
+
+  it("still counts a watch wake", () => {
+    expect(chatIsUnread(chat({ hasUnreadWake: true }))).toBe(true);
+  });
+
+  it("leaves a chat its owner has seen", () => {
+    expect(chatIsUnread(chat())).toBe(false);
+    expect(chatIsUnread(chat({ hasUnreadWake: false, hasUnreadWork: false }))).toBe(false);
+  });
+});

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam/route.tsx

@@ -1,4 +1,5 @@
 import {
+  countChatsWithUnreadWork,
   readDashboardAgentWakeActivity,
   type DashboardAgentWakeActivity,
 } from "@internal/dashboard-agent-db";
@@ -107,12 +108,19 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     unreadWakes: 0,
     hasActiveWatches: false,
   };
+  let dashboardAgentUnreadWork = 0;
   if (hasDashboardAgentAccess) {
     try {
-      dashboardAgentActivity = await readDashboardAgentWakeActivity(dashboardAgentDb, {
-        organizationId: project.organization.id,
-        userId: user.id,
-      });
+      [dashboardAgentActivity, dashboardAgentUnreadWork] = await Promise.all([
+        readDashboardAgentWakeActivity(dashboardAgentDb, {
+          organizationId: project.organization.id,
+          userId: user.id,
+        }),
+        countChatsWithUnreadWork(dashboardAgentDb, {
+          organizationId: project.organization.id,
+          userId: user.id,
+        }),
+      ]);
     } catch (error) {
       // The dashboard must load even when the agent's store doesn't answer.
       logger.error("Failed to read dashboard agent wake activity", { error });
@@ -124,17 +132,23 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     hasDashboardAgentAccess,
     promotedDashboardAgentPrompt,
     dashboardAgentActivity,
+    dashboardAgentUnreadWork,
   };
 };
 
 export default function Page() {
-  const { hasDashboardAgentAccess, promotedDashboardAgentPrompt, dashboardAgentActivity } =
-    useLoaderData<typeof loader>();
+  const {
+    hasDashboardAgentAccess,
+    promotedDashboardAgentPrompt,
+    dashboardAgentActivity,
+    dashboardAgentUnreadWork,
+  } = useLoaderData<typeof loader>();
   return (
     <DashboardAgent
       hasAccess={hasDashboardAgentAccess}
       promotedPrompt={promotedDashboardAgentPrompt ?? undefined}
       initialUnreadWakes={dashboardAgentActivity.unreadWakes}
+      initialUnreadWork={dashboardAgentUnreadWork}
       hasActiveWatches={dashboardAgentActivity.hasActiveWatches}
     >
       <Outlet />

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

@@ -197,6 +197,11 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         ...chat,
         watches,
         hasUnreadWake: unreadChatIds.has(chat.id),
+        // Work that finished while the chat was closed: the transcript moved on after the
+        // last time its owner looked. A wake is one way that happens, an answer is another.
+        hasUnreadWork:
+          chat.lastMessageAt !== null &&
+          (chat.lastReadAt === null || chat.lastMessageAt > chat.lastReadAt),
         // `watches` also carries fired and expired rows, so check for active here.
         hasActiveWatch: watches.some((watch) => watch.status === "active"),
         hasOpenInvestigation: investigatingChatIds.has(chat.id),

apps/webapp/test/dashboardAgentTranscriptStore.test.ts

@@ -1,5 +1,6 @@
 import {
   appendChatMessageOnceByChatId,
+  countChatsWithUnreadWork,
   countUserMessages,
   createChat,
   createDashboardAgentDb,
@@ -659,6 +660,40 @@ describe("a write can no longer lose a message another process appended", () =>
   );
 });
 
+describe("countChatsWithUnreadWork", () => {
+  postgresTest(
+    "counts a chat whose transcript moved on after its owner last looked",
+    async ({ prisma, postgresContainer }) => {
+      const chatId = "chat_unread_work";
+      await boot(prisma, postgresContainer.getConnectionUri(), chatId);
+      const scope = { organizationId: ORG_ID, userId: USER_ID };
+
+      // A chat nobody has written in is not unread.
+      expect(await countChatsWithUnreadWork(agentDb, scope)).toBe(0);
+
+      await persistMessages(agentDb, { chatId, messages: [textMessage("a1")] });
+      expect(await countChatsWithUnreadWork(agentDb, scope)).toBe(1);
+
+      // Opening it clears the state...
+      await prisma.$executeRawUnsafe(
+        `update trigger_dashboard_agent.chats set last_read_at = now() where id = $1`,
+        chatId
+      );
+      expect(await countChatsWithUnreadWork(agentDb, scope)).toBe(0);
+
+      // ...until the next answer lands behind a closed panel.
+      await persistMessages(agentDb, { chatId, messages: [textMessage("a2")] });
+      expect(await countChatsWithUnreadWork(agentDb, scope)).toBe(1);
+
+      // Another user's chat is never counted here.
+      expect(
+        await countChatsWithUnreadWork(agentDb, { ...scope, userId: "user_someone_else" })
+      ).toBe(0);
+    },
+    30_000
+  );
+});
+
 describe("countUserMessages", () => {
   postgresTest(
     "counts a user's own messages, and only those",

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

@@ -34,6 +34,8 @@ export interface ChatListItem {
   title: string;
   pinnedAt: Date | null;
   lastMessageAt: Date | null;
+  /** When the owner last had this chat open. Older than `lastMessageAt` means unread. */
+  lastReadAt: Date | null;
   createdAt: Date;
   updatedAt: Date;
   metadata: Record<string, unknown>;
@@ -50,6 +52,7 @@ export async function listChats(
       title: chats.title,
       pinnedAt: chats.pinnedAt,
       lastMessageAt: chats.lastMessageAt,
+      lastReadAt: chats.lastReadAt,
       createdAt: chats.createdAt,
       updatedAt: chats.updatedAt,
       metadata: chats.metadata,
@@ -117,6 +120,30 @@ export async function countUserMessages(
   return rows[0]?.count ?? 0;
 }
 
+/**
+ * Chats whose transcript moved on after their owner last looked. A watch wake is one way
+ * that happens; an answer that landed while the panel was closed is another, and the panel
+ * shows them the same way — a dot on the launcher, the chat lifted and highlighted.
+ */
+export async function countChatsWithUnreadWork(
+  db: DashboardAgentDb,
+  params: { organizationId: string; userId: string }
+): Promise<number> {
+  const rows = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(chats)
+    .where(
+      and(
+        eq(chats.organizationId, params.organizationId),
+        eq(chats.userId, params.userId),
+        isNull(chats.deletedAt),
+        sql`${chats.lastMessageAt} is not null`,
+        sql`(${chats.lastReadAt} is null or ${chats.lastMessageAt} > ${chats.lastReadAt})`
+      )
+    );
+  return rows[0]?.count ?? 0;
+}
+
 /** Joins `chats` to scope by owner, because `chat_sessions` has no `userId`. */
 export async function getSession(
   db: DashboardAgentDb,