feat(frontend): Implement SignalR client integration for real-time notifications

Add comprehensive SignalR client implementation with connection management,
React hooks, and UI components for real-time notifications and project updates.

Changes:
- Install @microsoft/signalr package (v9.0.6)
- Create SignalR connection manager with auto-reconnect
- Implement useNotificationHub hook for notification hub
- Implement useProjectHub hook for project hub with room-based subscriptions
- Add NotificationPopover UI component with badge and dropdown
- Create Badge UI component
- Add SignalRProvider for global connection initialization
- Update Header to display real-time notifications
- Update app layout to include SignalRProvider
- Add comprehensive documentation in SIGNALR_INTEGRATION.md

Features:
- JWT authentication with automatic token management
- Auto-reconnect with exponential backoff (0s, 2s, 5s, 10s, 30s)
- Connection state management and indicators
- Real-time notification push
- Project event subscriptions (create, update, delete, status change)
- Room-based project subscriptions
- Typing indicators support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

lib/signalr/ConnectionManager.ts

@@ -0,0 +1,167 @@
+import * as signalR from '@microsoft/signalr';
+import { tokenManager } from '@/lib/api/client';
+import { SIGNALR_CONFIG } from './config';
+
+export type ConnectionState =
+  | 'disconnected'
+  | 'connecting'
+  | 'connected'
+  | 'reconnecting';
+
+export class SignalRConnectionManager {
+  private connection: signalR.HubConnection | null = null;
+  private hubUrl: string;
+  private reconnectAttempt = 0;
+  private stateListeners: Array<(state: ConnectionState) => void> = [];
+
+  constructor(hubUrl: string) {
+    this.hubUrl = hubUrl;
+  }
+
+  async start(): Promise<void> {
+    if (
+      this.connection &&
+      this.connection.state === signalR.HubConnectionState.Connected
+    ) {
+      console.log('[SignalR] Already connected');
+      return;
+    }
+
+    const token = tokenManager.getAccessToken();
+    if (!token) {
+      console.warn('[SignalR] No access token found, cannot connect');
+      return;
+    }
+
+    this.connection = new signalR.HubConnectionBuilder()
+      .withUrl(this.hubUrl, {
+        accessTokenFactory: () => token,
+        // 备用方案：使用 query string（WebSocket 升级需要）
+        // transport: signalR.HttpTransportType.WebSockets,
+      })
+      .configureLogging(
+        signalR.LogLevel[
+          SIGNALR_CONFIG.LOG_LEVEL as keyof typeof signalR.LogLevel
+        ]
+      )
+      .withAutomaticReconnect(SIGNALR_CONFIG.RECONNECT_DELAYS)
+      .build();
+
+    this.setupConnectionHandlers();
+
+    try {
+      this.notifyStateChange('connecting');
+      await this.connection.start();
+      console.log(`[SignalR] Connected to ${this.hubUrl}`);
+      this.notifyStateChange('connected');
+      this.reconnectAttempt = 0;
+    } catch (error) {
+      console.error('[SignalR] Connection error:', error);
+      this.notifyStateChange('disconnected');
+      this.scheduleReconnect();
+    }
+  }
+
+  async stop(): Promise<void> {
+    if (this.connection) {
+      await this.connection.stop();
+      this.connection = null;
+      this.notifyStateChange('disconnected');
+      console.log('[SignalR] Disconnected');
+    }
+  }
+
+  on(methodName: string, callback: (...args: any[]) => void): void {
+    if (this.connection) {
+      this.connection.on(methodName, callback);
+    }
+  }
+
+  off(methodName: string, callback?: (...args: any[]) => void): void {
+    if (this.connection) {
+      this.connection.off(methodName, callback);
+    }
+  }
+
+  async invoke(methodName: string, ...args: any[]): Promise<any> {
+    if (
+      !this.connection ||
+      this.connection.state !== signalR.HubConnectionState.Connected
+    ) {
+      throw new Error('SignalR connection is not established');
+    }
+
+    return await this.connection.invoke(methodName, ...args);
+  }
+
+  onStateChange(listener: (state: ConnectionState) => void): () => void {
+    this.stateListeners.push(listener);
+
+    // 返回 unsubscribe 函数
+    return () => {
+      this.stateListeners = this.stateListeners.filter((l) => l !== listener);
+    };
+  }
+
+  private setupConnectionHandlers(): void {
+    if (!this.connection) return;
+
+    this.connection.onclose((error) => {
+      console.log('[SignalR] Connection closed', error);
+      this.notifyStateChange('disconnected');
+      this.scheduleReconnect();
+    });
+
+    this.connection.onreconnecting((error) => {
+      console.log('[SignalR] Reconnecting...', error);
+      this.notifyStateChange('reconnecting');
+    });
+
+    this.connection.onreconnected((connectionId) => {
+      console.log('[SignalR] Reconnected', connectionId);
+      this.notifyStateChange('connected');
+      this.reconnectAttempt = 0;
+    });
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectAttempt >= SIGNALR_CONFIG.RECONNECT_DELAYS.length) {
+      console.error('[SignalR] Max reconnect attempts reached');
+      return;
+    }
+
+    const delay = SIGNALR_CONFIG.RECONNECT_DELAYS[this.reconnectAttempt];
+    this.reconnectAttempt++;
+
+    console.log(
+      `[SignalR] Scheduling reconnect in ${delay}ms (attempt ${this.reconnectAttempt})`
+    );
+
+    setTimeout(() => {
+      this.start();
+    }, delay);
+  }
+
+  private notifyStateChange(state: ConnectionState): void {
+    this.stateListeners.forEach((listener) => listener(state));
+  }
+
+  get connectionId(): string | null {
+    return this.connection?.connectionId ?? null;
+  }
+
+  get state(): ConnectionState {
+    if (!this.connection) return 'disconnected';
+
+    switch (this.connection.state) {
+      case signalR.HubConnectionState.Connected:
+        return 'connected';
+      case signalR.HubConnectionState.Connecting:
+        return 'connecting';
+      case signalR.HubConnectionState.Reconnecting:
+        return 'reconnecting';
+      default:
+        return 'disconnected';
+    }
+  }
+}