@djangocfg/centrifugo 1.0.1 → 1.0.3

package/src/debug/ConnectionTab/ConnectionTab.tsx

@@ -0,0 +1,160 @@
+/**
+ * Connection Tab
+ *
+ * Shows WebSocket connection status, uptime, and controls.
+ */
+
+'use client';
+
+import { Wifi, WifiOff, Clock, RefreshCw } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Button,
+  Separator,
+} from '@djangocfg/ui';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Helper: Format uptime
+// ─────────────────────────────────────────────────────────────────────────
+
+function formatUptime(seconds: number): string {
+  if (seconds === 0) return '0s';
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${secs}s`;
+  } else if (minutes > 0) {
+    return `${minutes}m ${secs}s`;
+  } else {
+    return `${secs}s`;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function ConnectionTab() {
+  const {
+    isConnected,
+    isConnecting,
+    connectionState,
+    error,
+    uptime,
+    connect,
+    disconnect,
+    reconnect,
+  } = useCentrifugo();
+
+  const statusIcon = isConnected ? (
+    <Wifi className="h-5 w-5 text-green-600" />
+  ) : (
+    <WifiOff className="h-5 w-5 text-red-600" />
+  );
+
+  const statusBadge = isConnected ? (
+    <Badge variant="default" className="flex items-center gap-1">
+      <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+      Connected
+    </Badge>
+  ) : isConnecting ? (
+    <Badge variant="secondary" className="flex items-center gap-1">
+      <RefreshCw className="h-3 w-3 animate-spin" />
+      Connecting...
+    </Badge>
+  ) : (
+    <Badge variant="destructive">Disconnected</Badge>
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Status Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <span className="flex items-center gap-2">
+              {statusIcon}
+              Connection Status
+            </span>
+            {statusBadge}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* State */}
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">State:</span>
+            <span className="font-mono font-medium capitalize">{connectionState}</span>
+          </div>
+
+          {/* Uptime */}
+          {isConnected && (
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Uptime:</span>
+              <span className="font-mono font-medium flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {formatUptime(uptime)}
+              </span>
+            </div>
+          )}
+
+          {/* Error */}
+          {error && (
+            <>
+              <Separator />
+              <div className="space-y-2">
+                <span className="text-sm text-muted-foreground">Error:</span>
+                <div className="text-xs text-red-600 bg-red-50 dark:bg-red-950/20 p-2 rounded">
+                  {error.message}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Controls */}
+          <Separator />
+          <div className="flex gap-2">
+            {isConnected ? (
+              <>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={disconnect}
+                  className="flex-1"
+                >
+                  Disconnect
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={reconnect}
+                  className="flex-1"
+                >
+                  <RefreshCw className="h-3 w-3 mr-1" />
+                  Reconnect
+                </Button>
+              </>
+            ) : (
+              <Button
+                variant="default"
+                size="sm"
+                onClick={connect}
+                disabled={isConnecting}
+                className="flex-1"
+              >
+                {isConnecting ? 'Connecting...' : 'Connect'}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/debug/ConnectionTab/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Connection Tab
+ */
+
+export { ConnectionTab } from './ConnectionTab';

package/src/debug/DebugPanel/DebugPanel.tsx

@@ -0,0 +1,88 @@
+/**
+ * Debug Panel
+ *
+ * Main debug UI with FAB button + Sheet modal + Tabs.
+ * Visibility controlled by CentrifugoProvider (dev mode OR admin users).
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { Bug } from 'lucide-react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from '@djangocfg/ui';
+import { ConnectionTab } from '../ConnectionTab';
+import { LogsTab } from '../LogsTab';
+import { SubscriptionsTab } from '../SubscriptionsTab';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function DebugPanel() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('connection');
+
+  return (
+    <>
+      {/* FAB Button (fixed bottom-left) */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-all duration-200 flex items-center justify-center"
+        style={{
+          position: 'fixed',
+          bottom: '1rem',
+          left: '1rem',
+          width: '56px',
+          height: '56px',
+          zIndex: 9999,
+        }}
+        aria-label="Open Centrifugo Debug Panel"
+      >
+        <Bug className="h-6 w-6" />
+      </button>
+
+      {/* Sheet Modal */}
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle>Centrifugo Debug</SheetTitle>
+            <SheetDescription>
+              WebSocket connection status, logs, and subscriptions
+            </SheetDescription>
+          </SheetHeader>
+
+          {/* Tabs */}
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="connection">Connection</TabsTrigger>
+              <TabsTrigger value="logs">Logs</TabsTrigger>
+              <TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="connection" className="mt-4">
+              <ConnectionTab />
+            </TabsContent>
+
+            <TabsContent value="logs" className="mt-4">
+              <LogsTab />
+            </TabsContent>
+
+            <TabsContent value="subscriptions" className="mt-4">
+              <SubscriptionsTab />
+            </TabsContent>
+          </Tabs>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/src/debug/DebugPanel/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Debug Panel
+ */
+
+export { DebugPanel } from './DebugPanel';

package/src/debug/LogsTab/LogsTab.tsx

@@ -0,0 +1,236 @@
+/**
+ * Logs Tab
+ *
+ * Bash-like logs viewer with filters, search, and auto-scroll.
+ * Uses PrettyCode for syntax highlighting.
+ */
+
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+import { Trash2, Search, Filter } from 'lucide-react';
+import moment from 'moment';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  ScrollArea,
+  Badge,
+  PrettyCode,
+} from '@djangocfg/ui';
+import { useLogs } from '../../providers/LogsProvider';
+import type { LogLevel, LogEntry } from '../../core/types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────
+
+function formatTimestamp(date: Date): string {
+  return moment(date).format('HH:mm:ss.SSS');
+}
+
+function getLevelColor(level: LogLevel): string {
+  switch (level) {
+    case 'debug':
+      return 'text-blue-600 dark:text-blue-400';
+    case 'info':
+      return 'text-gray-600 dark:text-gray-400';
+    case 'success':
+      return 'text-green-600 dark:text-green-400';
+    case 'warning':
+      return 'text-yellow-600 dark:text-yellow-400';
+    case 'error':
+      return 'text-red-600 dark:text-red-400';
+  }
+}
+
+function getLevelBadgeVariant(level: LogLevel): 'default' | 'secondary' | 'destructive' | 'outline' {
+  switch (level) {
+    case 'error':
+      return 'destructive';
+    case 'warning':
+      return 'outline';
+    case 'success':
+      return 'default';
+    default:
+      return 'secondary';
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function LogsTab() {
+  const { filteredLogs, filter, setFilter, clearLogs, count } = useLogs();
+  const [search, setSearch] = useState('');
+  const [autoScroll, setAutoScroll] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new logs arrive
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  // Handle search with debounce
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setFilter({ search: search || undefined });
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [search, setFilter]);
+
+  return (
+    <div className="space-y-4">
+      {/* Controls */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <span className="flex items-center gap-2">
+              Logs
+              <Badge variant="secondary">{count}</Badge>
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setAutoScroll(!autoScroll)}
+              >
+                Auto-scroll: {autoScroll ? 'ON' : 'OFF'}
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={clearLogs}
+              >
+                <Trash2 className="h-3 w-3 mr-1" />
+                Clear
+              </Button>
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {/* Search */}
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search logs..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-8"
+              />
+            </div>
+          </div>
+
+          {/* Filters */}
+          <div className="flex gap-2">
+            <Select
+              value={filter.level || 'all'}
+              onValueChange={(value) =>
+                setFilter({ level: value === 'all' ? undefined : (value as LogLevel) })
+              }
+            >
+              <SelectTrigger className="w-[140px]">
+                <Filter className="h-3 w-3 mr-1" />
+                <SelectValue placeholder="Level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Levels</SelectItem>
+                <SelectItem value="debug">Debug</SelectItem>
+                <SelectItem value="info">Info</SelectItem>
+                <SelectItem value="success">Success</SelectItem>
+                <SelectItem value="warning">Warning</SelectItem>
+                <SelectItem value="error">Error</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={filter.source || 'all'}
+              onValueChange={(value) =>
+                setFilter({ source: value === 'all' ? undefined : (value as LogEntry['source']) })
+              }
+            >
+              <SelectTrigger className="w-[140px]">
+                <Filter className="h-3 w-3 mr-1" />
+                <SelectValue placeholder="Source" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Sources</SelectItem>
+                <SelectItem value="client">Client</SelectItem>
+                <SelectItem value="provider">Provider</SelectItem>
+                <SelectItem value="subscription">Subscription</SelectItem>
+                <SelectItem value="system">System</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Logs Viewer (Bash-like) */}
+      <Card>
+        <CardContent className="p-0">
+          <ScrollArea ref={scrollRef} className="h-[400px] w-full">
+            <div className="p-4 font-mono text-xs space-y-1 bg-slate-950 text-slate-50">
+              {filteredLogs.length === 0 ? (
+                <div className="text-slate-500 text-center py-8">
+                  No logs to display
+                </div>
+              ) : (
+                filteredLogs.map((log) => (
+                  <div key={log.id} className="flex gap-2 hover:bg-slate-900 px-1 py-0.5 rounded">
+                    {/* Timestamp */}
+                    <span className="text-slate-500 shrink-0">
+                      [{formatTimestamp(log.timestamp)}]
+                    </span>
+
+                    {/* Level */}
+                    <span className={`${getLevelColor(log.level)} font-bold uppercase shrink-0 w-16`}>
+                      {log.level}
+                    </span>
+
+                    {/* Source */}
+                    <span className="text-blue-400 shrink-0 w-24">
+                      [{log.source}]
+                    </span>
+
+                    {/* Message */}
+                    <span className="text-slate-200">{log.message}</span>
+
+                    {/* Data (if present) */}
+                    {log.data && (
+                      <details className="text-slate-400 cursor-pointer">
+                        <summary className="inline">
+                          <Badge variant="outline" className="text-xs ml-2">
+                            data
+                          </Badge>
+                        </summary>
+                        <div className="mt-2 ml-4">
+                          <PrettyCode
+                            data={typeof log.data === 'object' ? log.data : { value: log.data }}
+                            language="json"
+                          />
+                        </div>
+                      </details>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/debug/LogsTab/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Logs Tab
+ */
+
+export { LogsTab } from './LogsTab';

package/src/debug/SubscriptionsTab/SubscriptionsTab.tsx

@@ -0,0 +1,135 @@
+/**
+ * Subscriptions Tab
+ *
+ * Shows active channel subscriptions with controls.
+ */
+
+'use client';
+
+import { Fragment } from 'react';
+import { Radio, Trash2 } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Button,
+  ScrollArea,
+  Separator,
+} from '@djangocfg/ui';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Helper: Format subscription time
+// ─────────────────────────────────────────────────────────────────────────
+
+function formatSubscribedTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = Math.floor((now - timestamp) / 1000);
+
+  if (diff < 60) {
+    return `${diff}s ago`;
+  } else if (diff < 3600) {
+    return `${Math.floor(diff / 60)}m ago`;
+  } else if (diff < 86400) {
+    return `${Math.floor(diff / 3600)}h ago`;
+  } else {
+    return `${Math.floor(diff / 86400)}d ago`;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function SubscriptionsTab() {
+  const { activeSubscriptions, unsubscribe } = useCentrifugo();
+
+  const handleUnsubscribe = (channel: string) => {
+    unsubscribe(channel);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Header Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <span className="flex items-center gap-2">
+              <Radio className="h-5 w-5" />
+              Active Subscriptions
+            </span>
+            <Badge variant="secondary">{activeSubscriptions.length}</Badge>
+          </CardTitle>
+        </CardHeader>
+      </Card>
+
+      {/* Subscriptions List */}
+      <Card>
+        <CardContent className="p-0">
+          {activeSubscriptions.length === 0 ? (
+            <div className="p-8 text-center text-muted-foreground">
+              No active subscriptions
+            </div>
+          ) : (
+            <ScrollArea className="h-[450px]">
+              <div className="p-4 space-y-3">
+                {activeSubscriptions.map((sub, index) => (
+                  <Fragment key={sub.channel}>
+                    {index > 0 && <Separator />}
+                    <div className="flex items-start justify-between gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors">
+                      <div className="flex-1 space-y-2">
+                        {/* Channel Name */}
+                        <div className="flex items-center gap-2">
+                          <Radio className="h-4 w-4 text-green-600 animate-pulse" />
+                          <span className="font-mono text-sm font-medium">
+                            {sub.channel}
+                          </span>
+                        </div>
+
+                        {/* Metadata */}
+                        <div className="flex gap-3 text-xs text-muted-foreground">
+                          <span className="flex items-center gap-1">
+                            <Badge variant="outline" className="text-xs">
+                              {sub.type}
+                            </Badge>
+                          </span>
+                          <span>
+                            Subscribed: {formatSubscribedTime(sub.subscribedAt)}
+                          </span>
+                        </div>
+
+                        {/* Additional Info */}
+                        {sub.data && (
+                          <div className="text-xs text-muted-foreground">
+                            <details className="cursor-pointer">
+                              <summary className="inline">View data</summary>
+                              <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-auto">
+                                {JSON.stringify(sub.data, null, 2)}
+                              </pre>
+                            </details>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Unsubscribe Button */}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleUnsubscribe(sub.channel)}
+                        className="shrink-0"
+                      >
+                        <Trash2 className="h-3 w-3 text-red-600" />
+                      </Button>
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/debug/SubscriptionsTab/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Subscriptions Tab
+ */
+
+export { SubscriptionsTab } from './SubscriptionsTab';

package/src/debug/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Debug Components
+ *
+ * Development-only debug UI for monitoring Centrifugo connections,
+ * logs, and subscriptions.
+ */
+
+export { DebugPanel } from './DebugPanel';
+export { ConnectionTab } from './ConnectionTab';
+export { LogsTab } from './LogsTab';
+export { SubscriptionsTab } from './SubscriptionsTab';

package/src/hooks/index.ts

@@ -1,9 +1,6 @@
 /**
- * Centrifugo Hooks
+ * Hooks Module
  */
 
-export { useCentrifugoLogger, useRPCLogger } from './useLogger';
-export type { CentrifugoLogger, RPCLogger } from './useLogger';
-
 export { useSubscription } from './useSubscription';
-export type { useSubscriptionOptions } from './useSubscription';
+export type { UseSubscriptionOptions, UseSubscriptionResult } from './useSubscription';