conductor-oss 0.19.2 → 0.20.0

package/web/.next/standalone/packages/web/src/components/sessions/SessionTerminal.tsx

@@ -100,7 +100,7 @@ function SessionTerminalView(props: SessionTerminalProps) {
     setPromptSending(false);
     setPromptError(null);
     setQueuedInsertError(null);
-  }, [sessionId]);
+  }, [expectsLiveTerminal, sessionId]);
 
   useEffect(() => {
     if (!expectsLiveTerminal) {

package/web/.next/standalone/packages/web/src/features/dashboard/DashboardClient.tsx

@@ -56,6 +56,7 @@ import {
 import { useSession } from "@/hooks/useSession";
 import { useSessions } from "@/hooks/useSessions";
 import { useConfig, type ConfigProject } from "@/hooks/useConfig";
+import { useNotificationAlerts } from "@/hooks/useNotificationAlerts";
 import { useAgents } from "@/hooks/useAgents";
 import { useResponsiveSidebarStateWithOptions } from "@/hooks/useResponsiveSidebarState";
 import { AppShell } from "@/components/layout/AppShell";
@@ -242,9 +243,10 @@ function formatRepoUpdatedLabel(value: string | null | undefined): string | null
   if (!value) return null;
   const timestamp = Date.parse(value);
   if (Number.isNaN(timestamp)) return null;
-  return `Updated ${new Intl.DateTimeFormat(undefined, {
+  return `Updated ${new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
+    timeZone: "UTC",
   }).format(new Date(timestamp))}`;
 }
 
@@ -495,16 +497,6 @@ function resolveIdeOption(editorId: string): { id: string; label: string } {
   return IDE_OPTIONS.find((option) => option.id === editorId) ?? { id: editorId, label: editorId };
 }
 
-const NOTIFICATION_SOUND_OPTIONS = [
-  { id: "abstract-sound-1", label: "Abstract Sound 1" },
-  { id: "abstract-sound-2", label: "Abstract Sound 2" },
-  { id: "abstract-sound-3", label: "Abstract Sound 3" },
-  { id: "abstract-sound-4", label: "Abstract Sound 4" },
-  { id: "cow-mooing", label: "Cow Mooing" },
-  { id: "phone-vibration", label: "Phone Vibration" },
-  { id: "rooster", label: "Rooster" },
-];
-
 function toObject(value: unknown): Record<string, unknown> {
   if (!value || typeof value !== "object" || Array.isArray(value)) return {};
   return { ...(value as Record<string, unknown>) };
@@ -1791,6 +1783,13 @@ export default function DashboardClient() {
   const onboardingRequired = !preferencesLoading && !!preferences && !preferences.onboardingAcknowledged;
   const resolvedPreferences = preferences ?? normalizePreferences(null, selectedAgent || DEFAULT_AGENT);
   const resolvedCodingAgent = selectedAgent || resolvedPreferences.codingAgent || DEFAULT_AGENT;
+  const notificationProjectId = selectedProjectId ?? selectedSessionRecord?.projectId ?? null;
+
+  useNotificationAlerts({
+    enabled: !preferencesLoading,
+    projectId: notificationProjectId,
+    preferences: resolvedPreferences.notifications,
+  });
 
   const handleSelectProject = useCallback((projectId: string | null) => {
     navigateDashboard(

package/web/.next/standalone/packages/web/src/features/dashboard/components/DashboardDialogs.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { GitBranchIcon, LockIcon, MarkGithubIcon, RepoIcon } from "@primer/octicons-react";
 import {
   getAvailableAgentModels,
@@ -25,7 +24,6 @@ import {
   Building2,
   Check,
   ChevronDown,
-  ChevronsRight,
   Copy,
   FolderGit2,
   FolderKanban,
@@ -46,6 +44,7 @@ import {
 import { normalizeAgentName } from "@/lib/agentUtils";
 import { getKnownAgent, KNOWN_AGENT_ORDER } from "@/lib/knownAgents";
 import { AgentTileIcon } from "@/components/AgentTileIcon";
+import { playNotificationSound } from "@/lib/notificationSounds";
 import { normalizeModelAccessPreferences } from "@/lib/modelAccess";
 import {
   getRuntimeCatalogDefaultModelForAccess,
@@ -161,9 +160,10 @@ function formatRepoUpdatedLabel(value: string | null | undefined): string | null
   if (!value) return null;
   const timestamp = Date.parse(value);
   if (Number.isNaN(timestamp)) return null;
-  return `Updated ${new Intl.DateTimeFormat(undefined, {
+  return `Updated ${new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
+    timeZone: "UTC",
   }).format(new Date(timestamp))}`;
 }
 
@@ -387,18 +387,6 @@ const ONBOARDING_TABS: SettingsTab[] = [
   { id: "repositories", label: "Repository", icon: FolderGit2, implemented: true },
 ];
 
-const IDE_OPTIONS = [
-  { id: "vscode", label: "VS Code" },
-  { id: "vscode-insiders", label: "VS Code Insiders" },
-  { id: "cursor", label: "Cursor" },
-  { id: "windsurf", label: "Windsurf" },
-  { id: "intellij-idea", label: "IntelliJ IDEA" },
-  { id: "zed", label: "Zed" },
-  { id: "xcode", label: "Xcode" },
-  { id: "antigravity", label: "Antigravity" },
-  { id: "custom", label: "Custom" },
-];
-
 const MARKDOWN_EDITOR_OPTIONS = [
   { id: "obsidian", label: "Obsidian" },
   { id: "vscode", label: "VS Code" },
@@ -408,12 +396,6 @@ const MARKDOWN_EDITOR_OPTIONS = [
   { id: "custom", label: "Custom" },
 ];
 
-const IDE_SUBMENU_OPTIONS = IDE_OPTIONS.filter((option) => option.id !== "custom");
-
-function resolveIdeOption(editorId: string): { id: string; label: string } {
-  return IDE_OPTIONS.find((option) => option.id === editorId) ?? { id: editorId, label: editorId };
-}
-
 const NOTIFICATION_SOUND_OPTIONS = [
   { id: "abstract-sound-1", label: "Abstract Sound 1" },
   { id: "abstract-sound-2", label: "Abstract Sound 2" },
@@ -822,35 +804,6 @@ function getAgentModelAccessLabel(agent: string, modelAccess: ModelAccessPrefere
 }
 
 const MARKDOWN_EDITOR_ICON_CLASS = "block h-4 w-4 shrink-0";
-const CODE_EDITOR_ICON_CLASS = "block h-4 w-4 shrink-0 object-contain";
-
-type CodeEditorIconSpec =
-  | { kind: "icon"; icon: IconType; className: string }
-  | { kind: "image"; imageSrc: string; className: string };
-
-const CODE_EDITOR_ICON_MAP: Record<string, CodeEditorIconSpec> = {
-  vscode: { kind: "image", imageSrc: "/icons/ide/vscode-dark.svg", className: CODE_EDITOR_ICON_CLASS },
-  "vscode-insiders": { kind: "image", imageSrc: "/icons/ide/vscode-insiders.svg", className: CODE_EDITOR_ICON_CLASS },
-  cursor: { kind: "image", imageSrc: "/icons/ide/cursor-dark.svg", className: CODE_EDITOR_ICON_CLASS },
-  windsurf: { kind: "image", imageSrc: "/icons/ide/windsurf-dark.svg", className: CODE_EDITOR_ICON_CLASS },
-  "intellij-idea": { kind: "image", imageSrc: "/icons/ide/intellij.svg", className: CODE_EDITOR_ICON_CLASS },
-  zed: { kind: "image", imageSrc: "/icons/ide/zed-dark.svg", className: CODE_EDITOR_ICON_CLASS },
-  xcode: { kind: "image", imageSrc: "/icons/ide/xcode.svg", className: CODE_EDITOR_ICON_CLASS },
-  antigravity: { kind: "image", imageSrc: "/icons/ide/antigravity-dark.svg", className: CODE_EDITOR_ICON_CLASS },
-  custom: { kind: "icon", icon: Settings2, className: `${CODE_EDITOR_ICON_CLASS} text-[var(--vk-text-muted)]` },
-};
-
-function CodeEditorIcon({ editorId, label }: { editorId: string; label: string }) {
-  const iconSpec = CODE_EDITOR_ICON_MAP[editorId];
-  if (!iconSpec) {
-    return <Settings2 className={`${CODE_EDITOR_ICON_CLASS} text-[var(--vk-text-muted)]`} />;
-  }
-  if (iconSpec.kind === "image") {
-    return <img src={iconSpec.imageSrc} alt={`${label} logo`} className={iconSpec.className} />;
-  }
-  const Icon = iconSpec.icon;
-  return <Icon className={iconSpec.className} />;
-}
 
 function shellQuote(value: string): string {
   return JSON.stringify(value);
@@ -2577,7 +2530,6 @@ function hydrateRepositoryDraft(value: RepositorySettingsPayload): RepositorySet
   const managedRemoteProvider = remoteAccessSettings.provider ?? remoteAccessSettings.recommendedProvider;
   const usingPrivateNetworkFlow = managedRemoteProvider === "tailscale";
   const showManagedTunnelControls = managedRemoteProvider !== null || remoteAccessSettings.managed;
-  const selectedIdeOption = resolveIdeOption(ide);
   const settingsMenuClass = "z-50 min-w-[240px] rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] p-2 shadow-[0_18px_50px_rgba(0,0,0,0.35)]";
   const settingsSubMenuClass = `${settingsMenuClass} min-w-[280px]`;
   const settingsMenuItemClass = "flex min-h-[40px] cursor-default items-center gap-2 rounded-[4px] px-3 py-2 text-[14px] leading-[21px] text-[var(--vk-text-normal)] outline-none hover:bg-[var(--vk-bg-hover)] focus:bg-[var(--vk-bg-hover)]";
@@ -2955,97 +2907,6 @@ function hydrateRepositoryDraft(value: RepositorySettingsPayload): RepositorySet
 
                   {(isPreferencesTab || isGeneralTab) && (
                     <>
-                      <section className="space-y-3">
-                        <div className="space-y-1">
-                          <h4 className="text-[15px] font-medium text-[var(--vk-text-strong)]">Choose Your Code Editor</h4>
-                          <p className="text-[12px] text-[var(--vk-text-muted)]">
-                            This editor will be used when opening attempts and files.
-                          </p>
-                        </div>
-                        <div className="flex flex-wrap items-center gap-2">
-                          <DropdownMenu.Root>
-                            <DropdownMenu.Trigger asChild>
-                              <button
-                                type="button"
-                                className="inline-flex h-11 items-center gap-2 rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-3 text-[14px] text-[var(--vk-text-normal)] outline-none transition hover:bg-[var(--vk-bg-hover)] data-[state=open]:bg-[var(--vk-bg-hover)]"
-                                aria-label="Choose code editor"
-                              >
-                                <span className="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] text-[var(--vk-text-muted)]">
-                                  <FolderOpen className="h-3.5 w-3.5" />
-                                </span>
-                                <span className="font-medium text-[var(--vk-text-strong)]">Open</span>
-                                <ChevronDown className="h-3.5 w-3.5 text-[var(--vk-text-muted)]" />
-                              </button>
-                            </DropdownMenu.Trigger>
-                            <DropdownMenu.Portal>
-                              <DropdownMenu.Content align="start" sideOffset={6} className={settingsMenuClass}>
-                                <p className="px-3 pb-1 text-[12px] font-medium uppercase tracking-[0.08em] text-[var(--vk-text-muted)]">
-                                  Open With
-                                </p>
-                                <DropdownMenu.Sub>
-                                  <DropdownMenu.SubTrigger className={`${settingsMenuItemClass} min-w-[220px] justify-between`}>
-                                    <div className="flex min-w-0 items-center gap-2">
-                                      <CodeEditorIcon editorId={selectedIdeOption.id} label={selectedIdeOption.label} />
-                                      <span>IDE</span>
-                                    </div>
-                                    <div className="ml-4 flex min-w-0 items-center gap-2">
-                                      <span className="truncate text-[12px] text-[var(--vk-text-muted)]">
-                                        {selectedIdeOption.label}
-                                      </span>
-                                      <ChevronsRight className="h-3.5 w-3.5 shrink-0 text-[var(--vk-text-muted)]" />
-                                    </div>
-                                  </DropdownMenu.SubTrigger>
-                                  <DropdownMenu.Portal>
-                                    <DropdownMenu.SubContent
-                                      sideOffset={8}
-                                      alignOffset={-4}
-                                      className={settingsSubMenuClass}
-                                    >
-                                      <p className="px-3 pb-1 text-[12px] font-medium uppercase tracking-[0.08em] text-[var(--vk-text-muted)]">
-                                        Editors
-                                      </p>
-                                      {IDE_SUBMENU_OPTIONS.map((option) => (
-                                        <DropdownMenu.Item
-                                          key={option.id}
-                                          onSelect={() => setIde(option.id)}
-                                          className={settingsMenuItemClass}
-                                        >
-                                          <CodeEditorIcon editorId={option.id} label={option.label} />
-                                          <span className="flex-1">{option.label}</span>
-                                          <span className="ml-auto inline-flex h-4 w-4 items-center justify-center text-[var(--vk-text-strong)]">
-                                            {ide === option.id ? <Check className="h-4 w-4 text-[var(--vk-orange)]" /> : null}
-                                          </span>
-                                        </DropdownMenu.Item>
-                                      ))}
-                                    </DropdownMenu.SubContent>
-                                  </DropdownMenu.Portal>
-                                </DropdownMenu.Sub>
-                                <DropdownMenu.Separator className="my-1 h-px bg-[var(--vk-border)]" />
-                                <DropdownMenu.Item onSelect={() => setIde("custom")} className={settingsMenuItemClass}>
-                                  <CodeEditorIcon editorId="custom" label="Custom" />
-                                  <span className="flex-1">Custom</span>
-                                  <span className="ml-auto inline-flex h-4 w-4 items-center justify-center text-[var(--vk-text-strong)]">
-                                    {ide === "custom" ? <Check className="h-4 w-4 text-[var(--vk-orange)]" /> : null}
-                                  </span>
-                                </DropdownMenu.Item>
-                              </DropdownMenu.Content>
-                            </DropdownMenu.Portal>
-                          </DropdownMenu.Root>
-
-                          <div className="inline-flex min-h-11 max-w-full items-center gap-2 rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-3 py-2">
-                            <span className="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)]">
-                              <CodeEditorIcon editorId={selectedIdeOption.id} label={selectedIdeOption.label} />
-                            </span>
-                            <div className="min-w-0">
-                              <div className="truncate text-[14px] font-medium text-[var(--vk-text-strong)]">
-                                {selectedIdeOption.label}
-                              </div>
-                              <div className="truncate text-[11px] text-[var(--vk-text-muted)]">Current editor</div>
-                            </div>
-                          </div>
-                        </div>
-                      </section>
-
                       <section className="space-y-2">
                         <h4 className="text-[15px] font-medium text-[var(--vk-text-strong)]">Markdown Editor</h4>
                         <p className="text-[12px] text-[var(--vk-text-muted)]">
@@ -3127,6 +2988,7 @@ function hydrateRepositoryDraft(value: RepositorySettingsPayload): RepositorySet
                                 onClick={() => {
                                   setSoundEnabled(true);
                                   setSoundFile(option.id);
+                                  void playNotificationSound(option.id);
                                 }}
                                 className={`flex items-center gap-2 rounded-[4px] border px-3 py-2 text-left ${
                                   selected

package/web/.next/standalone/packages/web/src/features/dashboard/components/WorkspaceOverview.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   ArrowRight,
   FolderGit2,
@@ -22,8 +22,11 @@ interface WorkspaceOverviewProps {
   onSelectSession: (sessionId: string) => void;
 }
 
-function formatRelativeTime(isoDate: string): string {
-  const diffMs = Date.now() - new Date(isoDate).getTime();
+const RELATIVE_TIME_TICK_MS = 60_000;
+
+function formatRelativeTime(isoDate: string, now: number | null): string {
+  if (now === null) return "Updated recently";
+  const diffMs = now - new Date(isoDate).getTime();
   if (!Number.isFinite(diffMs) || diffMs < 60_000) return "Updated now";
   const minutes = Math.floor(diffMs / 60_000);
   if (minutes < 60) return `Updated ${minutes}m ago`;
@@ -92,6 +95,17 @@ export function WorkspaceOverview({
   onCreateWorkspace,
   onSelectSession,
 }: WorkspaceOverviewProps) {
+  const [relativeNow, setRelativeNow] = useState<number | null>(null);
+
+  useEffect(() => {
+    setRelativeNow(Date.now());
+    const interval = window.setInterval(() => {
+      setRelativeNow(Date.now());
+    }, RELATIVE_TIME_TICK_MS);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
   const visibleSessions = useMemo(
     () => sessions.filter((session) => session.status !== "archived"),
     [sessions],
@@ -252,7 +266,9 @@ export function WorkspaceOverview({
                     </p>
                   </div>
                   <div className="shrink-0 text-right">
-                    <p className="text-[11px] text-[var(--vk-text-muted)]">{formatRelativeTime(session.lastActivityAt)}</p>
+                    <p className="text-[11px] text-[var(--vk-text-muted)]">
+                      {formatRelativeTime(session.lastActivityAt, relativeNow)}
+                    </p>
                     <ArrowRight className="ml-auto mt-2 h-4 w-4 text-[var(--vk-text-muted)]" />
                   </div>
                 </button>

package/web/.next/standalone/packages/web/src/features/sessions/SessionPageClient.tsx

@@ -9,6 +9,8 @@ import { WorkspaceSidebarPanel } from "@/components/layout/WorkspaceSidebarPanel
 import { SessionDetail } from "@/components/sessions/SessionDetail";
 import { shouldUseCompactTerminalChrome } from "@/components/sessions/sessionTerminalUtils";
 import { useConfig } from "@/hooks/useConfig";
+import { useNotificationAlerts } from "@/hooks/useNotificationAlerts";
+import { usePreferences } from "@/hooks/usePreferences";
 import { useSession } from "@/hooks/useSession";
 import { useSessions } from "@/hooks/useSessions";
 import type { DashboardSession } from "@/lib/types";
@@ -19,6 +21,7 @@ export default function SessionPageClient() {
   const searchParams = useSearchParams();
   const { projects } = useConfig();
   const { session: currentSession } = useSession(params.id);
+  const { preferences, loading: preferencesLoading } = usePreferences();
   const {
     mobileSidebarOpen,
     desktopSidebarOpen,
@@ -35,6 +38,13 @@ export default function SessionPageClient() {
     return tab !== "overview" && tab !== "preview" && tab !== "diff";
   }, [searchParams]);
   const immersiveTerminalMode = terminalTabActive && compactTerminalChrome;
+  const notificationProjectId = currentSession?.projectId ?? null;
+
+  useNotificationAlerts({
+    enabled: !preferencesLoading && notificationProjectId !== null,
+    projectId: notificationProjectId,
+    preferences: preferences?.notifications ?? null,
+  });
 
   const topBarTitle = useMemo(() => {
     if (currentSession) {

package/web/.next/standalone/packages/web/src/hooks/useAgents.ts

@@ -126,7 +126,7 @@ async function refreshAgents(force = false): Promise<void> {
 }
 
 export function useAgents(): UseAgentsReturn {
-  const [snapshot, setSnapshot] = useState<AgentsStoreSnapshot>(() => currentSnapshot());
+  const [snapshot, setSnapshot] = useState<AgentsStoreSnapshot>({ agents: [], loading: true });
 
   useEffect(() => {
     const applySnapshot = () => setSnapshot(currentSnapshot());

package/web/.next/standalone/packages/web/src/hooks/useNotificationAlerts.ts

@@ -0,0 +1,291 @@
+"use client";
+
+import { type MutableRefObject, useEffect, useRef } from "react";
+import {
+  primeNotificationAudio,
+  playNotificationSound,
+  resolveNotificationSoundId,
+  type NotificationSoundId,
+} from "@/lib/notificationSounds";
+
+type NotificationPriority = "high" | "medium" | "low";
+
+type NotificationRecord = {
+  id: string;
+  priority: NotificationPriority;
+  message: string;
+  timestamp: string;
+  sessionId: string;
+  projectId: string;
+  type: string;
+};
+
+type NotificationResponse = {
+  notifications?: unknown;
+};
+
+interface NotificationPreferences {
+  soundEnabled: boolean;
+  soundFile: string | null;
+}
+
+interface UseNotificationAlertsOptions {
+  enabled: boolean;
+  projectId: string | null;
+  preferences: NotificationPreferences | null;
+}
+
+const POLL_INTERVAL_MS = 10_000;
+
+function isVisiblePage(): boolean {
+  return typeof document === "undefined" || document.visibilityState === "visible";
+}
+
+function isNotificationPriority(value: unknown): value is NotificationPriority {
+  return value === "high" || value === "medium" || value === "low";
+}
+
+function toObject(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return { ...(value as Record<string, unknown>) };
+}
+
+function normalizeNotification(value: unknown): NotificationRecord | null {
+  const payload = toObject(value);
+  const id = typeof payload.id === "string" ? payload.id.trim() : "";
+  const message = typeof payload.message === "string" ? payload.message.trim() : "";
+  const timestamp = typeof payload.timestamp === "string" ? payload.timestamp.trim() : "";
+  const sessionId = typeof payload.sessionId === "string" ? payload.sessionId.trim() : "";
+  const projectId = typeof payload.projectId === "string" ? payload.projectId.trim() : "";
+  const type = typeof payload.type === "string" ? payload.type.trim() : "";
+  const priority = isNotificationPriority(payload.priority) ? payload.priority : "low";
+
+  if (!id || !message || !timestamp || !sessionId || !projectId || !type) {
+    return null;
+  }
+
+  return {
+    id,
+    priority,
+    message,
+    timestamp,
+    sessionId,
+    projectId,
+    type,
+  };
+}
+
+function normalizeNotificationResponse(value: unknown): NotificationRecord[] {
+  const payload = toObject(value);
+  const notifications = Array.isArray(payload.notifications)
+    ? payload.notifications
+    : [];
+  return notifications
+    .map((notification) => normalizeNotification(notification))
+    .filter((notification): notification is NotificationRecord => notification !== null)
+    .sort((left, right) => {
+      const timestampOrder = Date.parse(right.timestamp) - Date.parse(left.timestamp);
+      if (timestampOrder !== 0) return timestampOrder;
+      return right.id.localeCompare(left.id);
+    });
+}
+
+function latestTimestamp(notifications: NotificationRecord[]): string | null {
+  return notifications[0]?.timestamp ?? null;
+}
+
+function shouldAlert(notification: NotificationRecord): boolean {
+  return notification.priority !== "low";
+}
+
+function pickAlertNotification(notifications: NotificationRecord[]): NotificationRecord | null {
+  return notifications.find((notification) => notification.priority === "high")
+    ?? notifications.find((notification) => notification.priority === "medium")
+    ?? notifications[0]
+    ?? null;
+}
+
+function notificationKey(notification: NotificationRecord): string {
+  return `${notification.id}::${notification.timestamp}`;
+}
+
+function clearTimer(timerRef: MutableRefObject<number | null>) {
+  if (timerRef.current !== null) {
+    window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+}
+
+export function useNotificationAlerts({
+  enabled,
+  projectId,
+  preferences,
+}: UseNotificationAlertsOptions): void {
+  const soundEnabledRef = useRef(preferences?.soundEnabled !== false);
+  const soundFileRef = useRef<NotificationSoundId>(resolveNotificationSoundId(preferences?.soundFile));
+  const seenNotificationKeysRef = useRef(new Set<string>());
+  const latestTimestampRef = useRef<string | null>(null);
+  const initializedRef = useRef(false);
+  const activeProjectIdRef = useRef<string | null>(null);
+  const inFlightRef = useRef<Promise<void> | null>(null);
+  const pollTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    soundEnabledRef.current = preferences?.soundEnabled !== false;
+    soundFileRef.current = resolveNotificationSoundId(preferences?.soundFile);
+  }, [preferences?.soundEnabled, preferences?.soundFile]);
+
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") {
+      return;
+    }
+
+    const normalizedProjectId = projectId?.trim() || null;
+    if (activeProjectIdRef.current !== normalizedProjectId) {
+      activeProjectIdRef.current = normalizedProjectId;
+      seenNotificationKeysRef.current = new Set();
+      latestTimestampRef.current = null;
+      initializedRef.current = false;
+    }
+
+    let cancelled = false;
+
+    const loadNotifications = async (initial: boolean): Promise<void> => {
+      if (cancelled || !isVisiblePage()) {
+        return;
+      }
+
+      if (inFlightRef.current) {
+        await inFlightRef.current;
+        return;
+      }
+
+      const load = (async () => {
+        const params = new URLSearchParams({
+          limit: "20",
+        });
+        if (normalizedProjectId) {
+          params.set("project", normalizedProjectId);
+        }
+        if (!initial && latestTimestampRef.current) {
+          params.set("since", latestTimestampRef.current);
+        }
+
+        try {
+          const response = await fetch(`/api/notifications?${params.toString()}`, {
+            cache: "no-store",
+          });
+          if (!response.ok) {
+            return;
+          }
+
+          const payload = (await response.json().catch(() => null)) as NotificationResponse | null;
+          const notifications = normalizeNotificationResponse(payload);
+          if (notifications.length === 0) {
+            initializedRef.current = true;
+            return;
+          }
+
+          latestTimestampRef.current = latestTimestamp(notifications);
+
+          if (initial || !initializedRef.current) {
+            for (const notification of notifications) {
+              seenNotificationKeysRef.current.add(notificationKey(notification));
+            }
+            initializedRef.current = true;
+            return;
+          }
+
+          const unseenNotifications = notifications.filter(
+            (notification) => !seenNotificationKeysRef.current.has(notificationKey(notification)),
+          );
+
+          for (const notification of notifications) {
+            seenNotificationKeysRef.current.add(notificationKey(notification));
+          }
+
+          if (unseenNotifications.length === 0) {
+            return;
+          }
+
+          const alertNotification = pickAlertNotification(unseenNotifications);
+          if (!alertNotification || !shouldAlert(alertNotification) || !soundEnabledRef.current) {
+            return;
+          }
+
+          await playNotificationSound(soundFileRef.current);
+        } catch {
+          // Ignore transient notification polling failures.
+        }
+      })();
+
+      inFlightRef.current = load;
+      try {
+        await load;
+      } finally {
+        if (inFlightRef.current === load) {
+          inFlightRef.current = null;
+        }
+        initializedRef.current = true;
+      }
+    };
+
+    const scheduleNextPoll = () => {
+      clearTimer(pollTimerRef);
+      if (cancelled || !isVisiblePage()) {
+        return;
+      }
+
+      pollTimerRef.current = window.setTimeout(() => {
+        void loadNotifications(false).finally(() => {
+          scheduleNextPoll();
+        });
+      }, POLL_INTERVAL_MS);
+    };
+
+    const startPolling = () => {
+      if (cancelled || !isVisiblePage()) {
+        return;
+      }
+
+      void loadNotifications(!initializedRef.current).finally(() => {
+        scheduleNextPoll();
+      });
+    };
+
+    const handleVisibilityChange = () => {
+      if (!isVisiblePage()) {
+        clearTimer(pollTimerRef);
+        return;
+      }
+      startPolling();
+    };
+
+    const handleFocus = () => {
+      if (isVisiblePage()) {
+        startPolling();
+      }
+    };
+
+    const handleAudioPrime = () => {
+      void primeNotificationAudio();
+    };
+
+    startPolling();
+    window.addEventListener("focus", handleFocus);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("pointerdown", handleAudioPrime, true);
+    window.addEventListener("touchstart", handleAudioPrime, true);
+    window.addEventListener("keydown", handleAudioPrime, true);
+
+    return () => {
+      cancelled = true;
+      clearTimer(pollTimerRef);
+      window.removeEventListener("focus", handleFocus);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("pointerdown", handleAudioPrime, true);
+      window.removeEventListener("touchstart", handleAudioPrime, true);
+      window.removeEventListener("keydown", handleAudioPrime, true);
+    };
+  }, [enabled, projectId]);
+}