@djangocfg/centrifugo 1.0.2 → 1.0.4

package/src/components/SubscriptionsList/SubscriptionsList.tsx

@@ -0,0 +1,179 @@
+/**
+ * Subscriptions List Component
+ *
+ * Displays active Centrifugo subscriptions with status and controls
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Button,
+  ScrollArea,
+} from '@djangocfg/ui';
+import { Radio, RefreshCw, Trash2 } from 'lucide-react';
+import { Subscription, SubscriptionState } from 'centrifuge';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+import { createLogger } from '../../core/logger/createLogger';
+
+const logger = createLogger('SubscriptionsList');
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+interface SubscriptionItem {
+  channel: string;
+  state: SubscriptionState;
+}
+
+export interface SubscriptionsListProps {
+  showControls?: boolean;
+  onSubscriptionClick?: (channel: string) => void;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function SubscriptionsList({
+  showControls = true,
+  onSubscriptionClick,
+  className = '',
+}: SubscriptionsListProps) {
+  const { isConnected, client } = useCentrifugo();
+  const [subscriptions, setSubscriptions] = useState<SubscriptionItem[]>([]);
+
+  // Update subscriptions list
+  const updateSubscriptions = () => {
+    if (!client || !isConnected) {
+      setSubscriptions([]);
+      return;
+    }
+
+    try {
+      const centrifuge = client.getCentrifuge();
+      const subs = centrifuge.subscriptions();
+      const subscriptionsList: SubscriptionItem[] = [];
+      
+      for (const [channel, sub] of Object.entries(subs)) {
+        subscriptionsList.push({
+          channel,
+          state: sub.state,
+        });
+      }
+      
+      setSubscriptions(subscriptionsList);
+    } catch (error) {
+      logger.error('Failed to get subscriptions', error);
+      setSubscriptions([]);
+    }
+  };
+
+  // Auto-update subscriptions
+  useEffect(() => {
+    updateSubscriptions();
+
+    if (!client) return;
+
+    const centrifuge = client.getCentrifuge();
+
+    const handleSubscribed = () => updateSubscriptions();
+    const handleUnsubscribed = () => updateSubscriptions();
+
+    centrifuge.on('subscribed', handleSubscribed);
+    centrifuge.on('unsubscribed', handleUnsubscribed);
+
+    const interval = setInterval(updateSubscriptions, 3000);
+
+    return () => {
+      centrifuge.off('subscribed', handleSubscribed);
+      centrifuge.off('unsubscribed', handleUnsubscribed);
+      clearInterval(interval);
+    };
+  }, [client, isConnected]);
+
+  // Unsubscribe from channel
+  const handleUnsubscribe = async (channel: string) => {
+    if (!client) return;
+
+    try {
+      await client.unsubscribe(channel);
+      updateSubscriptions();
+    } catch (error) {
+      logger.error('Failed to unsubscribe', error);
+    }
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Radio className="h-5 w-5" />
+            Active Subscriptions
+            <Badge variant="outline">{subscriptions.length}</Badge>
+          </CardTitle>
+
+          {showControls && (
+            <Button size="sm" variant="outline" onClick={updateSubscriptions}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        {!isConnected ? (
+          <div className="text-center py-8 text-sm text-muted-foreground">
+            Not connected to Centrifugo
+          </div>
+        ) : subscriptions.length === 0 ? (
+          <div className="text-center py-8 text-sm text-muted-foreground">
+            No active subscriptions
+          </div>
+        ) : (
+          <ScrollArea className="h-[300px]">
+            <div className="space-y-2">
+              {subscriptions.map((sub) => (
+                <div
+                  key={sub.channel}
+                  className="flex items-center justify-between p-3 rounded border hover:bg-muted/50 transition-colors"
+                >
+                  <div
+                    className="flex-1 min-w-0 cursor-pointer"
+                    onClick={() => onSubscriptionClick?.(sub.channel)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="text-xs">
+                        {sub.state}
+                      </Badge>
+                      <span className="text-sm font-mono truncate">{sub.channel}</span>
+                    </div>
+                  </div>
+
+                  {showControls && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleUnsubscribe(sub.channel)}
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/SubscriptionsList/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Subscriptions List Components
+ */
+
+export { SubscriptionsList } from './SubscriptionsList';
+export type { SubscriptionsListProps } from './SubscriptionsList';
+

package/src/components/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Centrifugo Components
+ *
+ * Universal, composable components for Centrifugo monitoring and debugging
+ */
+
+// Connection Status
+export * from './ConnectionStatus';
+
+// Messages Feed
+export * from './MessagesFeed';
+
+// Subscriptions List
+export * from './SubscriptionsList';
+
+// Main Monitor (all-in-one)
+export * from './CentrifugoMonitor';
+

package/src/core/client/CentrifugoRPCClient.ts

@@ -14,6 +14,7 @@ export class CentrifugoRPCClient {
   private subscription: any;
   private channelSubscriptions: Map<string, any> = new Map();
   private pendingRequests: Map<string, { resolve: Function; reject: Function }> = new Map();
+  private readonly userId: string;
   private readonly replyChannel: string;
   private readonly timeout: number;
   private readonly logger: Logger;
@@ -25,6 +26,7 @@ export class CentrifugoRPCClient {
     timeout: number = 30000,
     logger?: Logger
   ) {
+    this.userId = userId;
     this.replyChannel = `user#${userId}`;
     this.timeout = timeout;
     this.logger = logger || createLogger({ source: 'client' });
@@ -160,7 +162,145 @@ export class CentrifugoRPCClient {
   }
 
   private generateCorrelationId(): string {
-    return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+    return `rpc-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+  }
+
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // RPC Pattern API (Request-Response via Correlation ID)
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  /**
+   * Send RPC request and wait for response.
+   * 
+   * Uses correlation ID pattern to match request with response:
+   * 1. Generate unique correlation_id
+   * 2. Subscribe to personal reply channel (user#{userId})
+   * 3. Publish request with correlation_id
+   * 4. Wait for response with matching correlation_id
+   * 5. Return response or timeout
+   * 
+   * @param method - RPC method name (e.g., 'tasks.get_stats')
+   * @param params - Request parameters
+   * @param options - RPC options
+   * @returns Promise that resolves with response data
+   * 
+   * @example
+   * const result = await client.rpc('tasks.get_stats', { bot_id: '123' });
+   * console.log('Stats:', result);
+   * 
+   * @example
+   * // With custom timeout and reply channel
+   * const result = await client.rpc('bot.command', 
+   *   { command: 'start' },
+   *   { timeout: 30000, replyChannel: 'bot#123#replies' }
+   * );
+   */
+  async rpc<TRequest = any, TResponse = any>(
+    method: string,
+    params: TRequest,
+    options: {
+      timeout?: number;
+      replyChannel?: string;
+    } = {}
+  ): Promise<TResponse> {
+    const {
+      timeout = 10000,
+      replyChannel = `user#${this.userId}`,
+    } = options;
+
+    const correlationId = this.generateCorrelationId();
+    
+    this.logger.info(`RPC request: ${method}`, { correlationId, params });
+
+    return new Promise<TResponse>((resolve, reject) => {
+      let timeoutId: NodeJS.Timeout | null = null;
+      let unsubscribe: (() => void) | null = null;
+
+      // Cleanup function
+      const cleanup = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (unsubscribe) {
+          unsubscribe();
+          unsubscribe = null;
+        }
+      };
+
+      // Set timeout
+      timeoutId = setTimeout(() => {
+        cleanup();
+        const error = new Error(`RPC timeout: ${method} (${timeout}ms)`);
+        this.logger.error(`RPC timeout: ${method}`, { correlationId, timeout });
+        reject(error);
+      }, timeout);
+
+      // Subscribe to reply channel
+      try {
+        unsubscribe = this.subscribe(replyChannel, (data: any) => {
+          try {
+            // Check if this is our response
+            if (data.correlation_id === correlationId) {
+              cleanup();
+              
+              // Check for error in response
+              if (data.error) {
+                this.logger.error(`RPC error: ${method}`, { 
+                  correlationId, 
+                  error: data.error 
+                });
+                reject(new Error(data.error.message || 'RPC error'));
+                return;
+              }
+              
+              this.logger.success(`RPC response: ${method}`, { 
+                correlationId,
+                hasResult: !!data.result 
+              });
+              resolve(data.result as TResponse);
+            }
+          } catch (error) {
+            cleanup();
+            this.logger.error(`Error processing RPC response: ${method}`, error);
+            reject(error);
+          }
+        });
+
+        // Publish request to RPC channel
+        // Note: This uses Centrifuge's publish, not our HTTP publish
+        // The backend should be subscribed to this channel
+        const rpcChannel = `rpc#${method}`;
+        const sub = this.centrifuge.getSubscription(rpcChannel);
+        
+        if (sub) {
+          // If we have a subscription, use it to publish
+          sub.publish({
+            correlation_id: correlationId,
+            method,
+            params,
+            reply_to: replyChannel,
+            timestamp: Date.now(),
+          }).catch((error: any) => {
+            cleanup();
+            this.logger.error(`Failed to publish RPC request: ${method}`, error);
+            reject(error);
+          });
+        } else {
+          // Otherwise, we need to publish via HTTP API
+          // This requires the backend to expose a publish endpoint
+          cleanup();
+          reject(new Error(
+            `Cannot publish RPC request: no subscription to ${rpcChannel}. ` +
+            `Backend should provide a publish endpoint or use server-side subscriptions.`
+          ));
+        }
+      } catch (error) {
+        cleanup();
+        this.logger.error(`Failed to setup RPC: ${method}`, error);
+        reject(error);
+      }
+    });
   }
 
   // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -183,26 +323,52 @@ export class CentrifugoRPCClient {
    * unsubscribe();
    */
   subscribe(channel: string, callback: (data: any) => void): () => void {
-    // Check if already subscribed
-    if (this.channelSubscriptions.has(channel)) {
-      return () => {}; // Return no-op unsubscribe
+    // Check if already subscribed - reuse existing subscription
+    const existingSub = this.channelSubscriptions.get(channel);
+    if (existingSub) {
+      this.logger.warning(`Already subscribed to ${channel}, reusing existing subscription`);
+      
+      // Add new callback handler to existing subscription
+      const handler = (ctx: any) => {
+        try {
+          callback(ctx.data);
+        } catch (error) {
+          this.logger.error(`Error in subscription callback for ${channel}`, error);
+        }
+      };
+      
+      existingSub.on('publication', handler);
+      
+      // Return unsubscribe that only removes this specific handler
+      return () => {
+        existingSub.off('publication', handler);
+      };
     }
 
-    // Create new subscription
-    const sub = this.centrifuge.newSubscription(channel);
+    // Create new subscription using Centrifuge's getSubscription or newSubscription
+    let sub = this.centrifuge.getSubscription(channel);
+    if (!sub) {
+      sub = this.centrifuge.newSubscription(channel);
+    }
 
-    // Handle publications
-    sub.on('publication', (ctx: any) => {
-      callback(ctx.data);
-    });
+    // Handle publications with error handling
+    const publicationHandler = (ctx: any) => {
+      try {
+        callback(ctx.data);
+      } catch (error) {
+        this.logger.error(`Error in subscription callback for ${channel}`, error);
+      }
+    };
+    
+    sub.on('publication', publicationHandler);
 
     // Handle subscription lifecycle
     sub.on('subscribed', () => {
-      // Subscription successful
+      this.logger.success(`Subscribed to ${channel}`);
     });
 
     sub.on('error', (ctx: any) => {
-      this.logger.error(`Subscription error for ${channel}:`, ctx.error);
+      this.logger.error(`Subscription error for ${channel}`, ctx.error);
     });
 
     // Start subscription
@@ -217,6 +383,7 @@ export class CentrifugoRPCClient {
 
   /**
    * Unsubscribe from a channel.
+   * Properly removes subscription from both internal map and Centrifuge client.
    *
    * @param channel - Channel name
    */
@@ -226,12 +393,27 @@ export class CentrifugoRPCClient {
       return;
     }
 
-    sub.unsubscribe();
-    this.channelSubscriptions.delete(channel);
+    try {
+      // Unsubscribe from channel
+      sub.unsubscribe();
+      
+      // Remove subscription from Centrifuge client registry
+      this.centrifuge.removeSubscription(sub);
+      
+      // Remove from our internal map
+      this.channelSubscriptions.delete(channel);
+      
+      this.logger.info(`Unsubscribed from ${channel}`);
+    } catch (error) {
+      this.logger.error(`Error unsubscribing from ${channel}`, error);
+      // Still remove from our map even if there was an error
+      this.channelSubscriptions.delete(channel);
+    }
   }
 
   /**
    * Unsubscribe from all channels.
+   * Properly removes all subscriptions from both internal map and Centrifuge client.
    */
   unsubscribeAll(): void {
     if (this.channelSubscriptions.size === 0) {
@@ -239,9 +421,16 @@ export class CentrifugoRPCClient {
     }
 
     this.channelSubscriptions.forEach((sub, channel) => {
-      sub.unsubscribe();
+      try {
+        sub.unsubscribe();
+        this.centrifuge.removeSubscription(sub);
+      } catch (error) {
+        this.logger.error(`Error unsubscribing from ${channel}`, error);
+      }
     });
+    
     this.channelSubscriptions.clear();
+    this.logger.info('Unsubscribed from all channels');
   }
 
   /**
@@ -278,4 +467,12 @@ export class CentrifugoRPCClient {
     // Combine and deduplicate
     return Array.from(new Set([...clientSubs, ...serverSubs]));
   }
+
+  /**
+   * Get native Centrifuge client for direct access to low-level APIs.
+   * Use with caution - prefer using the high-level methods when possible.
+   */
+  getCentrifuge(): Centrifuge {
+    return this.centrifuge;
+  }
 }

package/src/core/logger/createLogger.ts

@@ -23,12 +23,35 @@ export interface LoggerConfig {
   tag?: string;
 }
 
-export function createLogger(config: LoggerConfig): Logger {
+/**
+ * Create a logger instance
+ * 
+ * @param configOrPrefix - Either a full LoggerConfig object or a simple string prefix
+ * @returns Logger instance
+ * 
+ * @example
+ * // Simple usage with prefix
+ * const logger = createLogger('MyComponent');
+ * 
+ * @example
+ * // Advanced usage with full config
+ * const logger = createLogger({
+ *   source: 'client',
+ *   tag: 'MyComponent',
+ *   isDevelopment: true
+ * });
+ */
+export function createLogger(configOrPrefix: LoggerConfig | string): Logger {
+  // Normalize input to LoggerConfig
+  const config: LoggerConfig = typeof configOrPrefix === 'string'
+    ? { source: 'client', tag: configOrPrefix }
+    : configOrPrefix;
+
   const { source, isDevelopment = process.env.NODE_ENV === 'development', tag = 'Centrifugo' } = config;
 
   const logsStore = getGlobalLogsStore();
 
-  // Console logger (consola)
+  // Console logger (consola) with prefix tag
   const consola = createConsola({
     level: isDevelopment ? 4 : 3,
     formatOptions: {
@@ -36,7 +59,7 @@ export function createLogger(config: LoggerConfig): Logger {
       date: false,
       compact: !isDevelopment,
     },
-  }).withTag(tag);
+  }).withTag(`[${tag}]`);
 
   const log = (level: LogLevel, message: string, data?: unknown) => {
     // Add to LogsStore (always)

package/src/debug/DebugPanel/DebugPanel.tsx

@@ -2,7 +2,7 @@
  * Debug Panel
  *
  * Main debug UI with FAB button + Sheet modal + Tabs.
- * Only visible in development mode.
+ * Visibility controlled by CentrifugoProvider (dev mode OR admin users).
  */
 
 'use client';
@@ -24,15 +24,6 @@ import { ConnectionTab } from '../ConnectionTab';
 import { LogsTab } from '../LogsTab';
 import { SubscriptionsTab } from '../SubscriptionsTab';
 
-// ─────────────────────────────────────────────────────────────────────────
-// Config
-// ─────────────────────────────────────────────────────────────────────────
-
-const isDevelopment = process.env.NODE_ENV === 'development';
-const isStaticBuild = process.env.NEXT_PHASE === 'phase-production-build';
-
-const showDebugPanel = isDevelopment && !isStaticBuild;
-
 // ─────────────────────────────────────────────────────────────────────────
 // Component
 // ─────────────────────────────────────────────────────────────────────────
@@ -41,11 +32,6 @@ export function DebugPanel() {
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('connection');
 
-  // Don't render in production
-  if (!showDebugPanel) {
-    return null;
-  }
-
   return (
     <>
       {/* FAB Button (fixed bottom-left) */}

package/src/hooks/index.ts

@@ -4,3 +4,6 @@
 
 export { useSubscription } from './useSubscription';
 export type { UseSubscriptionOptions, UseSubscriptionResult } from './useSubscription';
+
+export { useRPC } from './useRPC';
+export type { UseRPCOptions, UseRPCResult } from './useRPC';