@hienlh/ppm 0.6.7 → 0.7.0

package/src/web/components/layout/project-bar.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Plus, Settings, Pencil, Trash2, Palette, Bug, Share2, Loader2, Copy, Check, X } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/dialog";
 import { AddProjectForm } from "@/components/layout/add-project-form";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useNotificationStore, selectProjectUrgentType, notificationColor } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -34,15 +35,22 @@ function ProjectAvatar({ name, color, active, allNames }: {
   name: string; color: string; active: boolean; allNames: string[];
 }) {
   const initials = getProjectInitials(name, allNames);
+  const selector = useMemo(() => selectProjectUrgentType(name), [name]);
+  const urgentType = useNotificationStore(selector);
   return (
-    <div
-      className={cn(
-        "size-10 rounded-full flex items-center justify-center text-xs font-bold text-white select-none shrink-0",
-        active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+    <div className="relative">
+      <div
+        className={cn(
+          "size-10 rounded-full flex items-center justify-center text-xs font-bold text-white select-none shrink-0",
+          active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+        )}
+        style={{ background: color }}
+      >
+        {initials}
+      </div>
+      {urgentType && (
+        <div className={cn("absolute -top-0.5 -right-0.5 size-2.5 rounded-full border-2 border-background", notificationColor(urgentType))} />
       )}
-      style={{ background: color }}
-    >
-      {initials}
     </div>
   );
 }

package/src/web/components/layout/tab-bar.tsx

@@ -8,6 +8,8 @@ import {
   Settings,
   FileCode,
   Database,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -15,7 +17,10 @@ import { useProjectStore } from "@/stores/project-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { api, projectUrl } from "@/lib/api-client";
+import { useNotificationStore, notificationColor } from "@/stores/notification-store";
+import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
 import { DraggableTab } from "./draggable-tab";
+import { cn } from "@/lib/utils";
 import type { Tab } from "@/stores/tab-store";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
@@ -49,6 +54,13 @@ export function TabBar({ panelId }: TabBarProps) {
   const { dropIndex, handleDragStart, handleDragOver, handleDragOverBar, handleDrop, handleDragEnd } =
     useTabDrag(effectivePanelId);
 
+  const notifications = useNotificationStore((s) => s.notifications);
+  const { canScrollLeft, canScrollRight, scrollLeft: doScrollLeft, scrollRight: doScrollRight } =
+    useTabOverflow(scrollRef);
+
+  // Hidden unread direction — recomputed when notifications or scroll changes
+  const hiddenUnread = getHiddenUnreadDirection(scrollRef.current, tabRefs.current as Map<string, HTMLElement>, tabs, notifications);
+
   // Auto-scroll to new tab
   useEffect(() => {
     if (tabs.length > prevTabCount.current && activeTabId) {
@@ -86,26 +98,49 @@ export function TabBar({ panelId }: TabBarProps) {
 
   return (
     <div
-      className="hidden md:flex items-center h-10 border-b border-border bg-background"
+      className="hidden md:flex items-center h-10 border-b border-border bg-background relative"
       onDragOver={handleDragOverBar}
       onDrop={handleDrop}
       onDoubleClick={handleBarDoubleClick}
       onContextMenu={handleBarContextMenu}
     >
+      {/* Left scroll arrow */}
+      {canScrollLeft && (
+        <button
+          onClick={doScrollLeft}
+          className="absolute left-0 z-10 flex items-center justify-center size-8 bg-gradient-to-r from-background via-background to-transparent"
+        >
+          <span className="relative">
+            <ChevronLeft className="size-4 text-text-secondary" />
+            {hiddenUnread.left && (
+              <span className={cn("absolute -top-1 -right-0.5 size-2 rounded-full", notificationColor(hiddenUnread.left))} />
+            )}
+          </span>
+        </button>
+      )}
+
       {/* Scrollable tabs + sticky + button */}
       <div
         ref={scrollRef}
         className="flex-1 overflow-x-auto overflow-y-hidden min-w-0 scrollbar-none"
       >
         <div className="flex items-center h-10">
-          {tabs.map((tab, i) => (
+          {tabs.map((tab, i) => {
+            const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string) : undefined;
+            const entry = sessionId ? notifications.get(sessionId) : undefined;
+            const notiType = entry && entry.count > 0 ? entry.type : null;
+            return (
             <DraggableTab
               key={tab.id}
               tab={tab}
               isActive={tab.id === activeTabId}
               icon={TAB_ICONS[tab.type]}
               showDropBefore={dropIndex === i}
-              onSelect={() => usePanelStore.getState().setActiveTab(tab.id, effectivePanelId)}
+              notificationType={notiType}
+              onSelect={() => {
+                usePanelStore.getState().setActiveTab(tab.id, effectivePanelId);
+                if (sessionId) useNotificationStore.getState().clearForSession(sessionId);
+              }}
               onClose={() => usePanelStore.getState().closeTab(tab.id, effectivePanelId)}
               onDragStart={(e) => handleDragStart(e, tab.id)}
               onDragOver={(e) => handleDragOver(e, tab.id, i)}
@@ -116,7 +151,8 @@ export function TabBar({ panelId }: TabBarProps) {
               }}
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
             />
-          ))}
+            );
+          })}
           {/* Show drop indicator at the end */}
           {dropIndex !== null && dropIndex >= tabs.length && (
             <div className="w-0.5 h-6 bg-primary rounded-full" />
@@ -132,6 +168,21 @@ export function TabBar({ panelId }: TabBarProps) {
           </button>
         </div>
       </div>
+
+      {/* Right scroll arrow */}
+      {canScrollRight && (
+        <button
+          onClick={doScrollRight}
+          className="absolute right-10 z-10 flex items-center justify-center size-8 bg-gradient-to-l from-background via-background to-transparent"
+        >
+          <span className="relative">
+            <ChevronRight className="size-4 text-text-secondary" />
+            {hiddenUnread.right && (
+              <span className={cn("absolute -top-1 -left-0.5 size-2 rounded-full", notificationColor(hiddenUnread.right))} />
+            )}
+          </span>
+        </button>
+      )}
     </div>
   );
 }

package/src/web/components/settings/settings-tab.tsx

@@ -1,10 +1,11 @@
 import { Moon, Sun, Monitor, Bell, BellOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { useSettingsStore, type Theme } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
+import { TelegramSettingsSection } from "./telegram-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -23,107 +24,147 @@ export function SettingsTab() {
 
   return (
     <div className="h-full w-full overflow-auto">
-    <div className="p-3 space-y-4">
-      <h2 className="text-sm font-semibold">Settings</h2>
+      <div className="p-3 space-y-2">
+        <h2 className="text-sm font-semibold">Settings</h2>
 
-      <div className="space-y-2">
-        <h3 className="text-xs font-medium text-text-secondary">Theme</h3>
-        <div className="flex gap-1.5">
-          {THEME_OPTIONS.map((opt) => {
-            const Icon = opt.icon;
-            return (
-              <Button
-                key={opt.value}
-                variant={theme === opt.value ? "default" : "outline"}
-                size="sm"
-                onClick={() => setTheme(opt.value)}
-                className={cn(
-                  "flex-1 gap-1.5 text-xs h-8",
-                  theme === opt.value && "ring-2 ring-primary",
-                )}
-              >
-                <Icon className="size-3.5" />
-                {opt.label}
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      <Separator />
-
-      <AISettingsSection />
+        <Accordion type="multiple" defaultValue={["notifications"]}>
+          {/* Theme */}
+          <AccordionItem value="theme">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Theme
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="flex gap-1.5">
+                {THEME_OPTIONS.map((opt) => {
+                  const Icon = opt.icon;
+                  return (
+                    <Button
+                      key={opt.value}
+                      variant={theme === opt.value ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setTheme(opt.value)}
+                      className={cn(
+                        "flex-1 gap-1.5 text-xs h-8",
+                        theme === opt.value && "ring-2 ring-primary",
+                      )}
+                    >
+                      <Icon className="size-3.5" />
+                      {opt.label}
+                    </Button>
+                  );
+                })}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
 
-      <Separator />
+          {/* AI Settings */}
+          <AccordionItem value="ai">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              AI Settings
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <AISettingsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <div className="space-y-2">
-        <h3 className="text-xs font-medium text-text-secondary">Notifications</h3>
-        {!pushSupported ? (
-          <p className="text-xs text-text-subtle">
-            Push notifications not supported in this browser.
-          </p>
-        ) : (
-          <>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5">
-                {isSubscribed ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
-                <span className="text-xs">Push notifications</span>
+          {/* Notifications */}
+          <AccordionItem value="notifications">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Notifications
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="space-y-2">
+                {/* Push notifications */}
+                {!pushSupported ? (
+                  <p className="text-xs text-text-subtle">
+                    Push notifications not supported in this browser.
+                  </p>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1.5">
+                        {isSubscribed ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
+                        <span className="text-xs">Push notifications</span>
+                      </div>
+                      <Button
+                        variant={isSubscribed ? "default" : "outline"}
+                        size="sm"
+                        className="h-7 text-xs"
+                        disabled={loading || permission === "denied"}
+                        onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
+                      >
+                        {loading ? "..." : isSubscribed ? "On" : "Off"}
+                      </Button>
+                    </div>
+                    {isSubscribed && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 text-xs w-full"
+                        onClick={() => {
+                          new Notification("PPM Test", { body: "Push notifications are working!" });
+                        }}
+                      >
+                        Test notification
+                      </Button>
+                    )}
+                    {pushError && (
+                      <p className="text-[11px] text-destructive">{pushError}</p>
+                    )}
+                    {permission === "denied" && (
+                      <p className="text-[11px] text-destructive">
+                        Notifications blocked. Enable in browser settings.
+                      </p>
+                    )}
+                    {isIosNonPwa && (
+                      <p className="text-[11px] text-text-subtle">
+                        On iOS, install PPM to Home Screen for push notifications.
+                      </p>
+                    )}
+                  </>
+                )}
               </div>
-              <Button
-                variant={isSubscribed ? "default" : "outline"}
-                size="sm"
-                className="h-7 text-xs"
-                disabled={loading || permission === "denied"}
-                onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
-              >
-                {loading ? "..." : isSubscribed ? "On" : "Off"}
-              </Button>
-            </div>
-            {isSubscribed && (
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs w-full"
-                onClick={() => {
-                  new Notification("PPM Test", { body: "Push notifications are working!" });
-                }}
-              >
-                Test notification
-              </Button>
-            )}
-            {pushError && (
-              <p className="text-[11px] text-destructive">{pushError}</p>
-            )}
-            {permission === "denied" && (
-              <p className="text-[11px] text-destructive">
-                Notifications blocked. Enable in browser settings.
-              </p>
-            )}
-            {isIosNonPwa && (
-              <p className="text-[11px] text-text-subtle">
-                On iOS, install PPM to Home Screen for push notifications.
-              </p>
-            )}
-          </>
-        )}
-      </div>
-
-      <Separator />
+            </AccordionContent>
+          </AccordionItem>
 
-      <KeyboardShortcutsSection />
+          {/* Telegram */}
+          <AccordionItem value="telegram">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Telegram
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <TelegramSettingsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <Separator />
+          {/* Keyboard Shortcuts */}
+          <AccordionItem value="shortcuts">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Keyboard Shortcuts
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <KeyboardShortcutsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <div className="space-y-1.5">
-        <h3 className="text-xs font-medium text-text-secondary">About</h3>
-        <p className="text-xs text-text-secondary">
-          PPM — Personal Project Manager
-        </p>
-        <p className="text-[11px] text-text-subtle">
-          A mobile-first web IDE for managing your projects.
-        </p>
+          {/* About */}
+          <AccordionItem value="about">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              About
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="space-y-1.5">
+                <p className="text-xs text-text-secondary">
+                  PPM — Personal Project Manager
+                </p>
+                <p className="text-[11px] text-text-subtle">
+                  A mobile-first web IDE for managing your projects.
+                </p>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
     </div>
-    </div>
   );
 }

package/src/web/components/settings/telegram-settings-section.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+
+interface TelegramConfig {
+  bot_token: string;
+  chat_id: string;
+}
+
+export function TelegramSettingsSection() {
+  const [config, setConfig] = useState<TelegramConfig>({ bot_token: "", chat_id: "" });
+  const [tokenInput, setTokenInput] = useState("");
+  const [chatIdInput, setChatIdInput] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [status, setStatus] = useState<{ type: "ok" | "err"; msg: string } | null>(null);
+
+  useEffect(() => {
+    api.get<TelegramConfig>("/api/settings/telegram").then((data) => {
+      setConfig(data);
+      setChatIdInput(data.chat_id);
+    }).catch(() => {});
+  }, []);
+
+  const save = async () => {
+    setSaving(true);
+    setStatus(null);
+    try {
+      const body: Record<string, string> = { chat_id: chatIdInput };
+      if (tokenInput) body.bot_token = tokenInput;
+      const data = await api.put<TelegramConfig>("/api/settings/telegram", body);
+      setConfig(data);
+      setTokenInput("");
+      setStatus({ type: "ok", msg: "Saved" });
+    } catch (e) {
+      setStatus({ type: "err", msg: (e as Error).message });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const test = async () => {
+    setTesting(true);
+    setStatus(null);
+    try {
+      // Send current input values; backend falls back to saved config for empty fields
+      await api.post("/api/settings/telegram/test", {
+        ...(tokenInput ? { bot_token: tokenInput } : {}),
+        ...(chatIdInput ? { chat_id: chatIdInput } : {}),
+      });
+      setStatus({ type: "ok", msg: "Test message sent!" });
+    } catch (e) {
+      setStatus({ type: "err", msg: (e as Error).message });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const isConfigured = !!config.bot_token;
+
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1.5">
+        <label className="text-[11px] text-text-subtle">Bot Token</label>
+        <Input
+          type="password"
+          placeholder={isConfigured ? "••••••  (saved)" : "123456:ABC-DEF..."}
+          value={tokenInput}
+          onChange={(e) => setTokenInput(e.target.value)}
+          className="h-7 text-xs"
+        />
+      </div>
+      <div className="space-y-1.5">
+        <label className="text-[11px] text-text-subtle">Chat ID</label>
+        <Input
+          placeholder="-1001234567890"
+          value={chatIdInput}
+          onChange={(e) => setChatIdInput(e.target.value)}
+          className="h-7 text-xs"
+        />
+        <p className="text-[10px] text-text-subtle">Personal or group chat ID</p>
+      </div>
+      <div className="flex gap-1.5">
+        <Button
+          variant="default"
+          size="sm"
+          className="h-7 text-xs flex-1"
+          disabled={saving || (!tokenInput && !chatIdInput)}
+          onClick={save}
+        >
+          {saving ? "..." : "Save"}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 text-xs gap-1"
+          disabled={testing || !isConfigured}
+          onClick={test}
+        >
+          <Send className="size-3" />
+          {testing ? "..." : "Test"}
+        </Button>
+      </div>
+      {status && (
+        <p className={`text-[11px] ${status.type === "ok" ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
+          {status.msg}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/web/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/web/hooks/use-chat.ts

@@ -1,6 +1,9 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useWebSocket } from "./use-websocket";
 import { getAuthToken, projectUrl } from "@/lib/api-client";
+import { useNotificationStore } from "@/stores/notification-store";
+import { usePanelStore } from "@/stores/panel-store";
+import { playNotificationSound } from "@/lib/notification-sounds";
 import type { ChatMessage, ChatEvent } from "../../types/chat";
 import type { ChatWsServerMessage } from "../../types/api";
 
@@ -33,6 +36,16 @@ interface UseChatReturn {
   isConnected: boolean;
 }
 
+/** Check if the chat tab for this session is the active foreground tab */
+function isSessionTabActive(sid: string): boolean {
+  if (document.hidden) return false;
+  const { panels, focusedPanelId } = usePanelStore.getState();
+  const panel = panels[focusedPanelId];
+  if (!panel) return false;
+  const activeTab = panel.tabs.find((t) => t.id === panel.activeTabId);
+  return activeTab?.type === "chat" && activeTab.metadata?.sessionId === sid;
+}
+
 export function useChat(sessionId: string | null, providerId = "claude", projectName = ""): UseChatReturn {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [messagesLoading, setMessagesLoading] = useState(false);
@@ -52,6 +65,11 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const pendingMessageRef = useRef<string | null>(null);
   const sendRef = useRef<(data: string) => void>(() => {});
   const refetchRef = useRef<(() => void) | null>(null);
+  // Refs for notification dispatch inside handleMessage (which has [] deps)
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+  const projectNameRef = useRef(projectName);
+  projectNameRef.current = projectName;
 
   const handleMessage = useCallback((event: MessageEvent) => {
     let data: ChatWsServerMessage;
@@ -215,6 +233,12 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           tool: data.tool,
           input: data.input,
         });
+        // Local notification badge — only if this tab is NOT active
+        if (sessionIdRef.current && !isSessionTabActive(sessionIdRef.current)) {
+          const nType = data.tool === "AskUserQuestion" ? "question" : "approval_request";
+          useNotificationStore.getState().addNotification(sessionIdRef.current, nType, projectNameRef.current);
+          playNotificationSound(nType);
+        }
         break;
       }
 
@@ -253,6 +277,11 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         if (data.contextWindowPct != null) {
           setContextWindowPct(data.contextWindowPct);
         }
+        // Local notification badge — only if this tab is NOT active
+        if (sessionIdRef.current && !isSessionTabActive(sessionIdRef.current)) {
+          useNotificationStore.getState().addNotification(sessionIdRef.current, "done", projectNameRef.current);
+          playNotificationSound("done");
+        }
         // Finalize the streaming message — capture refs before clearing
         const finalContent = streamingContentRef.current;
         const finalEvents = [...streamingEventsRef.current];