Claude-Code-Monitor/client/src/hooks/useNotifications.ts

/**
 * @file useNotifications.ts
 * @description Defines a custom React hook for managing browser notifications in the agent dashboard application. The hook subscribes to the event bus to listen for specific events such as new sessions, session errors, session completions, and subagent spawns. Based on user preferences stored in localStorage, it triggers browser notifications to keep users informed of important updates without needing to actively monitor the dashboard. The hook should be called once at the root level of the application to ensure notifications are handled globally.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
/* =============================================================================
 * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
 * =============================================================================
 * **Purpose:** React hook: isolates side effects and subscription wiring so presentational components stay declarative.
 *
 * ## Design constraints
 * - Local-first: no telemetry leaves the machine unless the user configures webhooks.
 * - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
 *   philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
 * - Destructive flows stay behind explicit confirmation modals and server-side gates.
 * - Internationalization: user-visible strings belong in i18n JSON, not literals here.
 *
 * ## Remote data & SSH
 * Remote Data Sources let operators aggregate multiple machines. SSH entries describe
 * how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
 * scoped GET via `?sources=`. Health checks and import history surface in Settings.
 *
 * ## Observability
 * Prometheus scrapes `GET /api/metrics` (see `monitoring/`). Grafana ships four
 * provisioned boards (overview, sessions, tools, alerts). Native npm scripts and
 * Docker Compose profiles are documented in `monitoring/README.md`.
 *
 * ## Internal dependencies
 * - `../i18n`
 * - `../lib/eventBus`
 * - `../lib/push`
 * - `../lib/types`
 *
 * ## Public surface
 * - `useNotifications` — exported API; see TSDoc on the symbol for behavior.
 *
 * ## Testing pointers
 * - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
 * - Server contract changes require `npm run test:server` and OpenAPI sync.
 * - MCP edits: `npm run mcp:typecheck` and `npm run mcp:build`.
 *
 * ## Related docs
 * - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
 * - `docs/API.md` — REST reference.
 * - `.claude/skills/file-headers/` — mandatory `@author` header policy.
 * ============================================================================= */
/* -----------------------------------------------------------------------------
 * EXPORT CATALOG — quick index of symbols defined below (documentation only).
 * -----------------------------------------------------------------------------
 * **useNotifications**
 *   Part of this module's public contract. Downstream imports should treat
 *   the signature and return type as stable unless release notes say otherwise.
 *   When behavior changes, update the `@file` overview and relevant tests.
 *
 * ----------------------------------------------------------------------------- */

import { useEffect } from "react";
import i18n from "../i18n";
import { eventBus } from "../lib/eventBus";
import { subscribeToPush } from "../lib/push";
import type { WSMessage, Session, Agent, DashboardEvent } from "../lib/types";

const NOTIF_KEY = "agent-monitor-notifications";

/** User's browser-notification preferences, persisted to `localStorage` under
 *  {@link NOTIF_KEY} (written by the Settings page's notifications panel). */
interface NotifPrefs {
  /** Master switch; when false, no notification types fire regardless of the
   *  per-event flags below. */
  enabled: boolean;
  onNewSession: boolean;
  onSessionError: boolean;
  onSessionComplete: boolean;
  onSubagentSpawn: boolean;
}

/** Reads {@link NotifPrefs} from `localStorage`, merging over safe defaults so
 *  a partial/older saved object (or none at all) still yields a valid result.
 *  `enabled` defaults to false (opt-in) even in the "no saved value" branch,
 *  while individual event toggles default to a sensible starting mix. */
function loadPrefs(): NotifPrefs {
  try {
    const raw = localStorage.getItem(NOTIF_KEY);
    if (!raw)
      return {
        enabled: false,
        onNewSession: true,
        onSessionError: true,
        onSessionComplete: false,
        onSubagentSpawn: false,
      };
    return {
      enabled: false,
      onNewSession: true,
      onSessionError: true,
      onSessionComplete: false,
      onSubagentSpawn: false,
      ...JSON.parse(raw),
    };
  } catch {
    return {
      enabled: false,
      onNewSession: true,
      onSessionError: true,
      onSessionComplete: false,
      onSubagentSpawn: false,
    };
  }
}

/**
 * Shows a browser notification, preferring a server-relayed push (so it can
 * arrive even if this tab isn't the active one, or the browser is backgrounded)
 * and falling back to a local service-worker/`Notification` call if the
 * server is unreachable. No-ops when the user hasn't granted permission.
 * @param title Notification title.
 * @param body Notification body text.
 */
async function notify(title: string, body: string) {
  if (!("Notification" in window) || Notification.permission !== "granted") return;
  try {
    await fetch("/api/push/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title, body }),
    });
  } catch {
    // Server unreachable - fall back to local notification
    try {
      if ("serviceWorker" in navigator) {
        const registration = await navigator.serviceWorker.ready;
        await registration.showNotification(title, { body, icon: "/favicon.ico", silent: false });
      } else {
        new Notification(title, { body, icon: "/favicon.ico" });
      }
    } catch {
      // Silently ignore
    }
  }
}

/**
 * Wires the dashboard's {@link eventBus} up to browser notifications, per the
 * user's saved {@link NotifPrefs}. Mount once at the app root (it has no
 * return value and no props) - it re-reads preferences from `localStorage` on
 * every incoming message, so toggling a Settings checkbox takes effect
 * immediately without remounting. Also opportunistically (re-)subscribes to
 * Web Push on mount when notifications are enabled and permission has
 * already been granted, so push delivery survives a page reload.
 */
export function useNotifications() {
  useEffect(() => {
    const prefs = loadPrefs();
    if (prefs.enabled && "Notification" in window && Notification.permission === "granted") {
      subscribeToPush().catch(() => {});
    }

    return eventBus.subscribe((msg: WSMessage) => {
      const prefs = loadPrefs();
      if (!prefs.enabled) return;

      switch (msg.type) {
        case "session_created": {
          if (!prefs.onNewSession) return;
          const s = msg.data as Session;
          notify(
            i18n.t("errors:notifications.newSession"),
            s.name || `${i18n.t("errors:notifications.sessionDefault")}${s.id.slice(0, 8)}`
          );
          break;
        }
        case "session_updated": {
          const s = msg.data as Session;
          if (s.status === "error" && prefs.onSessionError) {
            notify(
              i18n.t("errors:notifications.sessionError"),
              s.name || `${i18n.t("errors:notifications.sessionDefault")}${s.id.slice(0, 8)}`
            );
          }
          break;
        }
        case "agent_created": {
          if (!prefs.onSubagentSpawn) return;
          const a = msg.data as Agent;
          if (a.type === "subagent") {
            notify(i18n.t("errors:notifications.subagentSpawned"), a.name);
          }
          break;
        }
        case "new_event": {
          const ev = msg.data as DashboardEvent;
          if (ev.event_type === "Stop" && prefs.onSessionComplete) {
            notify(
              i18n.t("errors:notifications.finishedResponding"),
              ev.summary || i18n.t("errors:notifications.readyForInput")
            );
          } else if (ev.event_type === "SessionEnd" && prefs.onSessionComplete) {
            notify(
              i18n.t("errors:notifications.sessionCompleted"),
              ev.summary || i18n.t("errors:notifications.sessionClosed")
            );
          } else if (ev.event_type === "Notification") {
            notify(
              i18n.t("errors:notifications.defaultTitle"),
              ev.summary || i18n.t("errors:notifications.defaultBody")
            );
          }
          break;
        }
      }
    });
  }, []);
}