@hienlh/ppm 0.6.6 → 0.7.0

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/components/ui/browse-button.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { FolderOpen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { FileBrowserPicker, type FileBrowserPickerProps } from "./file-browser-picker";
+import { cn } from "@/lib/utils";
+
+interface BrowseButtonProps {
+  mode: FileBrowserPickerProps["mode"];
+  accept?: string[];
+  root?: string;
+  title?: string;
+  onSelect: (path: string) => void;
+  className?: string;
+}
+
+export function BrowseButton({ mode, accept, root, title, onSelect, className }: BrowseButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn("size-8 shrink-0", className)}
+        onClick={() => setOpen(true)}
+        title={title ?? "Browse..."}
+      >
+        <FolderOpen className="size-4" />
+      </Button>
+      <FileBrowserPicker
+        open={open}
+        mode={mode}
+        accept={accept}
+        root={root}
+        title={title}
+        onSelect={(path) => { onSelect(path); setOpen(false); }}
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+}

package/src/web/components/ui/file-browser-picker.tsx

@@ -0,0 +1,374 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+import {
+  Folder, File, Database, Home, Monitor, FileText,
+  Download, ChevronRight, ArrowLeft, Search, Loader2, Clock, Eye, EyeOff,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ── Types ──────────────────────────────────────────────────────────
+
+interface BrowseEntry {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  size?: number;
+  modified: string;
+}
+
+interface BrowseResult {
+  entries: BrowseEntry[];
+  current: string;
+  parent: string | null;
+  breadcrumbs: { name: string; path: string }[];
+}
+
+export interface FileBrowserPickerProps {
+  open: boolean;
+  mode: "file" | "folder" | "both";
+  accept?: string[];
+  root?: string;
+  title?: string;
+  onSelect: (path: string) => void;
+  onCancel: () => void;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────
+
+const RECENT_KEY = "ppm-recent-paths";
+const MAX_RECENT = 5;
+
+const QUICK_ACCESS = [
+  { name: "Home", path: "~", icon: Home },
+  { name: "Desktop", path: "~/Desktop", icon: Monitor },
+  { name: "Documents", path: "~/Documents", icon: FileText },
+  { name: "Downloads", path: "~/Downloads", icon: Download },
+];
+
+function getRecent(): string[] {
+  try { return JSON.parse(localStorage.getItem(RECENT_KEY) ?? "[]"); } catch { return []; }
+}
+
+function saveRecent(dirPath: string): void {
+  const updated = [dirPath, ...getRecent().filter((p) => p !== dirPath)].slice(0, MAX_RECENT);
+  localStorage.setItem(RECENT_KEY, JSON.stringify(updated));
+}
+
+function formatSize(bytes?: number): string {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatRelativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+function fileIcon(entry: BrowseEntry): React.ReactNode {
+  if (entry.type === "directory") return <Folder className="size-4 text-blue-500" />;
+  const ext = entry.name.split(".").pop()?.toLowerCase();
+  if (ext && ["db", "sqlite", "sqlite3"].includes(ext)) return <Database className="size-4 text-amber-500" />;
+  return <File className="size-4 text-text-subtle" />;
+}
+
+function matchesAccept(name: string, accept?: string[]): boolean {
+  if (!accept?.length) return true;
+  const ext = "." + name.split(".").pop()?.toLowerCase();
+  return accept.includes(ext);
+}
+
+// ── Main Component ─────────────────────────────────────────────────
+
+export function FileBrowserPicker({
+  open, mode, accept, root, title, onSelect, onCancel,
+}: FileBrowserPickerProps) {
+  const [entries, setEntries] = useState<BrowseEntry[]>([]);
+  const [current, setCurrent] = useState("");
+  const [parent, setParent] = useState<string | null>(null);
+  const [breadcrumbs, setBreadcrumbs] = useState<{ name: string; path: string }[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [pathInput, setPathInput] = useState("");
+  const [showHidden, setShowHidden] = useState(false);
+  const [recentPaths, setRecentPaths] = useState<string[]>([]);
+  const listRef = useRef<HTMLDivElement>(null);
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+
+  const defaultTitle = mode === "folder" ? "Select Folder" : mode === "file" ? "Select File" : "Select File or Folder";
+
+  const fetchDir = useCallback(async (dirPath?: string, hidden?: boolean) => {
+    setLoading(true);
+    setError(null);
+    setSelected(null);
+    setSearch("");
+    try {
+      const params = new URLSearchParams();
+      if (dirPath) params.set("path", dirPath);
+      if (hidden) params.set("showHidden", "true");
+      const result = await api.get<BrowseResult>(`/api/fs/browse?${params}`);
+      setEntries(result.entries);
+      setCurrent(result.current);
+      setParent(result.parent);
+      setBreadcrumbs(result.breadcrumbs);
+      setPathInput(result.current);
+    } catch (e) {
+      setError((e as Error).message || "Failed to browse directory");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Fetch on open
+  useEffect(() => {
+    if (open) {
+      fetchDir(root ?? "~", showHidden);
+      setRecentPaths(getRecent());
+    }
+  }, [open, root, fetchDir, showHidden]);
+
+  const handleNavigate = (path: string) => fetchDir(path, showHidden);
+
+  const toggleHidden = () => {
+    const next = !showHidden;
+    setShowHidden(next);
+    fetchDir(current || (root ?? "~"), next);
+  };
+
+  const handlePathInputSubmit = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && pathInput.trim()) {
+      fetchDir(pathInput.trim());
+    }
+  };
+
+  const handleEntryClick = (entry: BrowseEntry) => {
+    if (entry.type === "directory") {
+      if (mode === "file") {
+        // In file mode, clicking a dir navigates into it
+        handleNavigate(entry.path);
+      } else {
+        // In folder/both mode, clicking selects it
+        setSelected(entry.path);
+      }
+    } else {
+      // File: select if mode allows
+      if (mode !== "folder") {
+        setSelected(entry.path);
+      }
+    }
+  };
+
+  const handleEntryDoubleClick = (entry: BrowseEntry) => {
+    if (entry.type === "directory") {
+      handleNavigate(entry.path);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (!selected) return;
+    saveRecent(current);
+    onSelect(selected);
+  };
+
+  // Filter entries by search + accept
+  const visible = entries.filter((e) => {
+    if (search && !e.name.toLowerCase().includes(search.toLowerCase())) return false;
+    if (e.type === "file" && accept?.length && !matchesAccept(e.name, accept)) return false;
+    return true;
+  });
+
+  const isSelectable = (entry: BrowseEntry): boolean => {
+    if (entry.type === "directory") return mode !== "file";
+    return mode !== "folder";
+  };
+
+  const content = (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* Path input bar */}
+      <div className="flex items-center gap-1.5 px-3 py-2 border-b border-border">
+        {parent && (
+          <Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={() => handleNavigate(parent)}>
+            <ArrowLeft className="size-4" />
+          </Button>
+        )}
+        <Input
+          value={pathInput}
+          onChange={(e) => setPathInput(e.target.value)}
+          onKeyDown={handlePathInputSubmit}
+          placeholder="Type path and press Enter"
+          className="h-7 text-xs font-mono flex-1"
+        />
+      </div>
+
+      {/* Breadcrumbs */}
+      <div className="flex items-center gap-0.5 px-3 py-1.5 border-b border-border overflow-x-auto text-xs">
+        {breadcrumbs.map((crumb, i) => (
+          <span key={crumb.path} className="flex items-center shrink-0">
+            {i > 0 && <ChevronRight className="size-3 text-text-subtle mx-0.5" />}
+            <button
+              type="button"
+              onClick={() => handleNavigate(crumb.path)}
+              className="hover:text-primary hover:underline text-text-secondary"
+            >
+              {crumb.name}
+            </button>
+          </span>
+        ))}
+      </div>
+
+      {/* Main area */}
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Quick access sidebar (desktop only) */}
+        {!isMobile && (
+          <div className="w-36 border-r border-border py-2 px-1 shrink-0 overflow-y-auto">
+            {QUICK_ACCESS.map((qa) => (
+              <button
+                key={qa.path}
+                type="button"
+                onClick={() => handleNavigate(qa.path)}
+                className={cn(
+                  "flex items-center gap-2 w-full px-2 py-1 text-xs rounded-md hover:bg-surface-hover text-left",
+                  current.endsWith(qa.name) && "bg-primary/10 text-primary",
+                )}
+              >
+                <qa.icon className="size-3.5" />
+                {qa.name}
+              </button>
+            ))}
+            {recentPaths.length > 0 && (
+              <>
+                <div className="text-[10px] text-text-subtle px-2 mt-3 mb-1 font-medium">Recent</div>
+                {recentPaths.map((rp) => (
+                  <button
+                    key={rp}
+                    type="button"
+                    onClick={() => handleNavigate(rp)}
+                    className="flex items-center gap-2 w-full px-2 py-1 text-xs rounded-md hover:bg-surface-hover text-left truncate"
+                  >
+                    <Clock className="size-3 shrink-0" />
+                    <span className="truncate">{rp.split("/").pop()}</span>
+                  </button>
+                ))}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Entry list */}
+        <ScrollArea className="flex-1 min-h-0">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="size-5 animate-spin text-text-subtle" />
+            </div>
+          ) : error ? (
+            <div className="text-center py-8 text-xs text-red-500">{error}</div>
+          ) : visible.length === 0 ? (
+            <div className="text-center py-8 text-xs text-text-subtle">
+              {search ? "No matching entries" : "Empty directory"}
+            </div>
+          ) : (
+            <div ref={listRef} className="py-1">
+              {visible.map((entry) => {
+                const selectable = isSelectable(entry);
+                return (
+                  <button
+                    key={entry.path}
+                    type="button"
+                    onClick={() => handleEntryClick(entry)}
+                    onDoubleClick={() => handleEntryDoubleClick(entry)}
+                    className={cn(
+                      "flex items-center gap-2 w-full px-3 py-1.5 text-left text-xs transition-colors",
+                      selected === entry.path
+                        ? "bg-primary/10 text-primary"
+                        : selectable
+                          ? "hover:bg-surface-hover text-text-primary"
+                          : "opacity-40 cursor-default",
+                    )}
+                    disabled={!selectable && entry.type === "file"}
+                  >
+                    {fileIcon(entry)}
+                    <span className={cn("flex-1 truncate", entry.type === "directory" && "font-medium")}>
+                      {entry.name}
+                    </span>
+                    <span className="text-text-subtle text-[10px] shrink-0 w-14 text-right">
+                      {formatSize(entry.size)}
+                    </span>
+                    <span className="text-text-subtle text-[10px] shrink-0 w-14 text-right">
+                      {formatRelativeTime(entry.modified)}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center gap-2 px-3 py-2 border-t border-border shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("size-7 shrink-0", showHidden && "text-primary")}
+          onClick={toggleHidden}
+          title={showHidden ? "Hide hidden files" : "Show hidden files"}
+        >
+          {showHidden ? <Eye className="size-3.5" /> : <EyeOff className="size-3.5" />}
+        </Button>
+        {accept?.length ? (
+          <span className="text-[10px] text-text-subtle bg-surface-hover px-1.5 py-0.5 rounded">
+            {accept.join(", ")}
+          </span>
+        ) : null}
+        <div className="flex-1 max-w-48">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-text-subtle" />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Filter..."
+              className="h-6 text-[11px] pl-6"
+            />
+          </div>
+        </div>
+        <div className="flex-1" />
+        <Button variant="outline" size="sm" onClick={onCancel} className="h-7 text-xs">
+          Cancel
+        </Button>
+        <Button size="sm" onClick={handleConfirm} disabled={!selected} className="h-7 text-xs">
+          Select
+        </Button>
+      </div>
+    </div>
+  );
+
+  // Responsive: Dialog for desktop, simplified dialog with taller content for mobile
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onCancel(); }}>
+      <DialogContent className={cn(
+        "p-0 gap-0 overflow-hidden flex flex-col",
+        isMobile ? "max-w-[95vw] h-[85vh]" : "max-w-2xl h-[70vh]",
+      )}>
+        <DialogHeader className="px-3 py-2 border-b border-border">
+          <DialogTitle className="text-sm">{title ?? defaultTitle}</DialogTitle>
+        </DialogHeader>
+        {content}
+      </DialogContent>
+    </Dialog>
+  );
+}

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];

package/src/web/hooks/use-notification-badge.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useNotificationStore, selectTotalUnread } from "@/stores/notification-store";
+import { setFavicon } from "@/lib/favicon";
+
+const DEFAULT_TITLE = "PPM — Personal Project Manager";
+
+/** Syncs document.title and favicon with unread notification count */
+export function useNotificationBadge(): void {
+  const totalUnread = useNotificationStore(selectTotalUnread);
+
+  useEffect(() => {
+    if (totalUnread > 0) {
+      document.title = `(${totalUnread}) PPM`;
+      setFavicon(true);
+    } else {
+      document.title = DEFAULT_TITLE;
+      setFavicon(false);
+    }
+  }, [totalUnread]);
+}