Add native notification when chat stream completes (#2413)

src/components/ChatCompletionNotificationSwitch.tsx

+import { useSettings } from "@/hooks/useSettings";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export function ChatCompletionNotificationSwitch() {
+  const { settings, updateSettings } = useSettings();
+  const isEnabled = settings?.enableChatCompletionNotifications === true;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="chat-completion-notifications"
+        checked={isEnabled}
+        onCheckedChange={async (checked) => {
+          if (checked) {
+            if (Notification.permission === "denied") {
+              return;
+            }
+            if (Notification.permission === "default") {
+              const permission = await Notification.requestPermission();
+              if (permission !== "granted") {
+                return;
+              }
+            }
+          }
+          updateSettings({
+            enableChatCompletionNotifications: checked,
+          });
+        }}
+      />
+      <Label htmlFor="chat-completion-notifications">
+        Show notification when chat completes
+      </Label>
+    </div>
+  );
+}

src/hooks/useStreamChat.ts

@@ -14,7 +14,8 @@ import {
 } from "@/atoms/chatAtoms";
 import { ipc } from "@/ipc/types";
 import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
-import type { ChatResponseEnd } from "@/ipc/types";
+import type { ChatResponseEnd, App } from "@/ipc/types";
+import type { ChatSummary } from "@/lib/schemas";
 import { useChats } from "./useChats";
 import { useLoadApp } from "./useLoadApp";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
@@ -175,6 +176,34 @@ export function useStreamChat({
               // Remove from pending set now that stream is complete
               pendingStreamChatIds.delete(chatId);
 
+              // Show native notification if enabled and window is not focused
+              // Fire-and-forget to avoid blocking UI updates
+              const notificationsEnabled =
+                settings?.enableChatCompletionNotifications === true;
+              if (
+                notificationsEnabled &&
+                Notification.permission === "granted" &&
+                !document.hasFocus()
+              ) {
+                const app = queryClient.getQueryData<App | null>(
+                  queryKeys.apps.detail({ appId: selectedAppId }),
+                );
+                const chats = queryClient.getQueryData<ChatSummary[]>(
+                  queryKeys.chats.list({ appId: selectedAppId }),
+                );
+                const chat = chats?.find((c) => c.id === chatId);
+                const appName = app?.name ?? "Dyad";
+                const rawTitle = response.chatSummary ?? chat?.title;
+                const body = rawTitle
+                  ? rawTitle.length > 80
+                    ? rawTitle.slice(0, 80) + "…"
+                    : rawTitle
+                  : "Chat response completed";
+                new Notification(appName, {
+                  body,
+                });
+              }
+
               if (response.updatedFiles) {
                 if (settings?.autoExpandPreviewPanel) {
                   setIsPreviewOpen(true);

src/ipc/handlers/chat_stream_handlers.ts

@@ -1532,11 +1532,13 @@ ${problemReport.problems
             updatedFiles: status.updatedFiles ?? false,
             extraFiles: status.extraFiles,
             extraFilesError: status.extraFilesError,
+            chatSummary,
           } satisfies ChatResponseEnd);
         } else {
           safeSend(event.sender, "chat:response:end", {
             chatId: req.chatId,
             updatedFiles: false,
+            chatSummary,
           } satisfies ChatResponseEnd);
         }
       }

src/ipc/types/chat.ts

@@ -108,6 +108,7 @@ export const ChatResponseEndSchema = z.object({
   extraFilesError: z.string().optional(),
   totalTokens: z.number().optional(),
   contextWindow: z.number().optional(),
+  chatSummary: z.string().optional(),
 });
 
 export type ChatResponseEnd = z.infer<typeof ChatResponseEndSchema>;

src/lib/schemas.ts

@@ -303,6 +303,7 @@ export const UserSettingsSchema = z
 
     enableAutoFixProblems: z.boolean().optional(),
     autoExpandPreviewPanel: z.boolean().optional(),
+    enableChatCompletionNotifications: z.boolean().optional(),
     enableNativeGit: z.boolean().optional(),
     enableAutoUpdate: z.boolean(),
     releaseChannel: ReleaseChannelSchema,

src/pages/settings.tsx

@@ -21,6 +21,7 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { AutoFixProblemsSwitch } from "@/components/AutoFixProblemsSwitch";
 import { AutoExpandPreviewSwitch } from "@/components/AutoExpandPreviewSwitch";
+import { ChatCompletionNotificationSwitch } from "@/components/ChatCompletionNotificationSwitch";
 import { AutoUpdateSwitch } from "@/components/AutoUpdateSwitch";
 import { ReleaseChannelSelector } from "@/components/ReleaseChannelSelector";
 import { NeonIntegration } from "@/components/NeonIntegration";
@@ -337,6 +338,14 @@ export function WorkflowSettings() {
           Automatically expand the preview panel when code changes are made.
         </div>
       </div>
+
+      <div className="space-y-1 mt-4">
+        <ChatCompletionNotificationSwitch />
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Show a native notification when a chat response completes while the
+          app is not focused.
+        </div>
+      </div>
     </div>
   );
 }

src/pro/main/ipc/handlers/local_agent/local_agent_handler.ts

@@ -473,6 +473,7 @@ export async function handleLocalAgentStream(
     safeSend(event.sender, "chat:response:end", {
       chatId: req.chatId,
       updatedFiles: !readOnly,
+      chatSummary: ctx.chatSummary,
     } satisfies ChatResponseEnd);
 
     return true; // Success