insforge 0.3.3 → 1.3.0

package/frontend/src/features/realtime/pages/RealtimeChannelsPage.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  ConfirmDialog,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useRealtime } from '../hooks/useRealtime';
+import { ChannelRow } from '../components/ChannelRow';
+import { EditChannelModal } from '../components/EditChannelModal';
+import RealtimeEmptyState from '../components/RealtimeEmptyState';
+import type { RealtimeChannel } from '../services/realtime.service';
+
+export default function RealtimeChannelsPage() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedChannel, setSelectedChannel] = useState<RealtimeChannel | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const {
+    channels,
+    isLoadingChannels,
+    refetchChannels,
+    updateChannel,
+    isUpdating,
+    deleteChannel,
+    isDeleting,
+  } = useRealtime();
+
+  const { confirm, confirmDialogProps } = useConfirm();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetchChannels();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleRowClick = (channel: RealtimeChannel) => {
+    setSelectedChannel(channel);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleEnabled = (channel: RealtimeChannel, enabled: boolean) => {
+    updateChannel({ id: channel.id, data: { enabled } });
+  };
+
+  const handleDelete = async (channel: RealtimeChannel) => {
+    const shouldDelete = await confirm({
+      title: 'Delete Channel',
+      description: `Are you sure you want to delete the channel "${channel.pattern}"? This action cannot be undone.`,
+      confirmText: 'Delete',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      deleteChannel(channel.id);
+    }
+  };
+
+  const handleModalSave = (id: string, data: Parameters<typeof updateChannel>[0]['data']) => {
+    updateChannel(
+      { id, data },
+      {
+        onSuccess: () => {
+          setIsModalOpen(false);
+          setSelectedChannel(null);
+        },
+      }
+    );
+  };
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className="flex flex-col gap-6 p-4">
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Channels</h1>
+
+          {/* Separator */}
+          <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+          {/* Refresh button */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="p-1 h-9 w-9"
+                  onClick={() => void handleRefresh()}
+                  disabled={isRefreshing}
+                >
+                  <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" align="center">
+                <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Table Header */}
+        <div className="flex items-center pl-3 pr-[44px] text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="w-[76px] shrink-0 py-1 px-3">Enabled</div>
+          <div className="flex-1 py-1 px-3">Pattern</div>
+          <div className="w-[640px] py-1 px-3">Description</div>
+          <div className="flex-1 py-1 px-3">Created</div>
+        </div>
+      </div>
+
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
+          {isLoadingChannels ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px]" />
+              ))}
+            </>
+          ) : channels.length >= 1 ? (
+            <>
+              {channels.map((channel) => (
+                <ChannelRow
+                  key={channel.id}
+                  channel={channel}
+                  onClick={() => handleRowClick(channel)}
+                  onToggleEnabled={(enabled) => handleToggleEnabled(channel, enabled)}
+                  onDelete={() => void handleDelete(channel)}
+                  isUpdating={isUpdating}
+                  isDeleting={isDeleting}
+                />
+              ))}
+            </>
+          ) : (
+            <RealtimeEmptyState type="channels" />
+          )}
+        </div>
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <EditChannelModal
+        channel={selectedChannel}
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open);
+          if (!open) {
+            setSelectedChannel(null);
+          }
+        }}
+        onSave={handleModalSave}
+        isUpdating={isUpdating}
+      />
+
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}

package/frontend/src/features/realtime/pages/RealtimeMessagesPage.tsx

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  PaginationControls,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useRealtime } from '../hooks/useRealtime';
+import { MessageRow } from '../components/MessageRow';
+import RealtimeEmptyState from '../components/RealtimeEmptyState';
+import type { RealtimeMessage } from '../services/realtime.service';
+
+export default function RealtimeMessagesPage() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedMessage, setSelectedMessage] = useState<RealtimeMessage | null>(null);
+
+  const {
+    messages,
+    isLoadingMessages,
+    refetchMessages,
+    messagesPageSize,
+    messagesCurrentPage,
+    messagesTotalCount,
+    messagesTotalPages,
+    setMessagesPage,
+  } = useRealtime();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetchMessages();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  // Message detail view
+  if (selectedMessage) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        <div className="flex items-center gap-2.5 p-4 border-b border-border-gray dark:border-neutral-600">
+          <button
+            onClick={() => setSelectedMessage(null)}
+            className="text-xl text-zinc-500 dark:text-neutral-400 hover:text-zinc-950 dark:hover:text-white transition-colors"
+          >
+            Messages
+          </button>
+          <ChevronRight className="w-5 h-5 text-muted-foreground dark:text-neutral-400" />
+          <p className="text-xl text-zinc-950 dark:text-white">{selectedMessage.eventName}</p>
+        </div>
+
+        <div className="flex-1 min-h-0 p-4 overflow-auto">
+          <div className="space-y-4">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Channel</p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.channelName}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  Sender Type
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.senderType}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Created</p>
+                <p className="text-sm text-zinc-950 dark:text-white">{selectedMessage.createdAt}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WS Audience
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.wsAudienceCount}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WH Audience
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.whAudienceCount}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WH Delivered
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.whDeliveredCount}
+                </p>
+              </div>
+            </div>
+
+            <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+              <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-2">Payload</p>
+              <pre className="text-sm text-zinc-950 dark:text-white font-mono whitespace-pre-wrap overflow-auto">
+                {JSON.stringify(selectedMessage.payload, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Default list view
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Fixed Page Header */}
+      <div className="shrink-0 flex items-center gap-3 p-4 pb-0">
+        <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Messages</h1>
+
+        {/* Separator */}
+        <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+        {/* Refresh button */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="p-1 h-9 w-9"
+                onClick={() => void handleRefresh()}
+                disabled={isRefreshing}
+              >
+                <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="center">
+              <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Fixed Table Header */}
+      <div className="shrink-0 grid grid-cols-12 px-7 pt-6 pb-2 text-sm text-muted-foreground dark:text-neutral-400">
+        <div className="col-span-2 py-1 px-3">Event</div>
+        <div className="col-span-2 py-1 px-3">Channel</div>
+        <div className="col-span-1 py-1 px-3">Sender</div>
+        <div className="col-span-3 py-1 px-3">Payload</div>
+        <div className="col-span-1 py-1 px-3">WebSockets</div>
+        <div className="col-span-1 py-1 px-3">Webhooks</div>
+        <div className="col-span-2 py-1 px-3">Sent At</div>
+      </div>
+
+      {/* Scrollable Content Area */}
+      <div className="flex-1 min-h-0 overflow-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
+          {isLoadingMessages ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px]" />
+              ))}
+            </>
+          ) : messages.length >= 1 ? (
+            <>
+              {messages.map((message) => (
+                <MessageRow
+                  key={message.id}
+                  message={message}
+                  onClick={() => setSelectedMessage(message)}
+                />
+              ))}
+            </>
+          ) : (
+            <RealtimeEmptyState type="messages" />
+          )}
+        </div>
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {messages.length > 0 && (
+        <div className="shrink-0">
+          <PaginationControls
+            currentPage={messagesCurrentPage}
+            totalPages={messagesTotalPages}
+            onPageChange={setMessagesPage}
+            totalRecords={messagesTotalCount}
+            pageSize={messagesPageSize}
+            recordLabel="messages"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/frontend/src/features/realtime/pages/RealtimePermissionsPage.tsx

@@ -0,0 +1,191 @@
+import { useMemo, useState } from 'react';
+import {
+  DataGrid,
+  type ConvertedValue,
+  type DataGridColumn,
+  type DataGridRowType,
+  EmptyState,
+} from '@/components';
+import { SQLModal, SQLCellButton } from '@/features/database';
+import { useRealtime } from '../hooks/useRealtime';
+import type { RlsPolicy } from '../services/realtime.service';
+import { cn } from '@/lib/utils/utils';
+
+type TabType = 'subscribe' | 'publish';
+
+interface PolicyRow extends DataGridRowType {
+  id: string;
+  policyName: string;
+  command: string;
+  roles: string;
+  using: string | null;
+  withCheck: string | null;
+  [key: string]: ConvertedValue | { [key: string]: string }[];
+}
+
+function mapPoliciesToRows(policies: RlsPolicy[]): PolicyRow[] {
+  return policies.map((policy, index) => ({
+    id: `${policy.tableName}_${policy.policyName}_${index}`,
+    policyName: policy.policyName,
+    command: policy.command === '*' ? 'ALL' : policy.command,
+    roles: Array.isArray(policy.roles) ? policy.roles.join(', ') : String(policy.roles),
+    using: policy.using,
+    withCheck: policy.withCheck,
+  }));
+}
+
+export default function RealtimePermissionsPage() {
+  const [activeTab, setActiveTab] = useState<TabType>('subscribe');
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
+
+  const { permissions, isLoadingPermissions: isLoading, permissionsError: error } = useRealtime();
+
+  const subscribePolicies = useMemo(
+    () => (permissions ? mapPoliciesToRows(permissions.subscribe.policies) : []),
+    [permissions]
+  );
+
+  const publishPolicies = useMemo(
+    () => (permissions ? mapPoliciesToRows(permissions.publish.policies) : []),
+    [permissions]
+  );
+
+  const activePolicies = activeTab === 'subscribe' ? subscribePolicies : publishPolicies;
+
+  const columns: DataGridColumn<PolicyRow>[] = useMemo(
+    () => [
+      {
+        key: 'policyName',
+        name: 'Policy Name',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'command',
+        name: 'Command',
+        width: 'minmax(100px, 1fr)',
+        resizable: true,
+        sortable: true,
+        renderCell: ({ row }) => {
+          return (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-slate-600 text-white">
+              {row.command}
+            </span>
+          );
+        },
+      },
+      {
+        key: 'roles',
+        name: 'Roles',
+        width: 'minmax(150px, 1.5fr)',
+        resizable: true,
+      },
+      {
+        key: 'using',
+        name: 'Using',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.using}
+            onClick={() =>
+              row.using && setSqlModal({ open: true, title: 'Using', value: row.using })
+            }
+          />
+        ),
+      },
+      {
+        key: 'withCheck',
+        name: 'With Check',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.withCheck}
+            onClick={() =>
+              row.withCheck &&
+              setSqlModal({ open: true, title: 'With Check', value: row.withCheck })
+            }
+          />
+        ),
+      },
+    ],
+    [setSqlModal]
+  );
+
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <EmptyState
+          title="Failed to load permissions"
+          description={error instanceof Error ? error.message : 'An error occurred'}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Fixed Header */}
+      <div className="shrink-0 bg-bg-gray dark:bg-neutral-800 p-4 flex flex-col gap-6">
+        {/* Title */}
+        <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Permissions</h1>
+
+        {/* Tabs */}
+        <div className="flex gap-6 items-start">
+          <button
+            onClick={() => setActiveTab('subscribe')}
+            className={cn(
+              'h-8 text-sm font-medium transition-colors',
+              activeTab === 'subscribe'
+                ? 'text-zinc-950 dark:text-white border-b-2 border-zinc-950 dark:border-white'
+                : 'text-zinc-500 dark:text-neutral-400 hover:text-zinc-700 dark:hover:text-neutral-300'
+            )}
+          >
+            Subscribe Policies
+          </button>
+          <button
+            onClick={() => setActiveTab('publish')}
+            className={cn(
+              'h-8 text-sm font-medium transition-colors',
+              activeTab === 'publish'
+                ? 'text-zinc-950 dark:text-white border-b-2 border-zinc-950 dark:border-white'
+                : 'text-zinc-500 dark:text-neutral-400 hover:text-zinc-700 dark:hover:text-neutral-300'
+            )}
+          >
+            Publish Policies
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 overflow-hidden px-3 pb-2">
+        {isLoading ? (
+          <div className="flex items-center justify-center h-full">
+            <EmptyState title="Loading policies..." description="Please wait" />
+          </div>
+        ) : (
+          <DataGrid
+            data={activePolicies}
+            columns={columns}
+            showSelection={false}
+            showPagination={false}
+            noPadding={true}
+            emptyState={
+              <div className="text-sm text-zinc-500 dark:text-zinc-400">No policies defined</div>
+            }
+          />
+        )}
+      </div>
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
+    </div>
+  );
+}

package/frontend/src/features/realtime/services/realtime.service.ts

@@ -0,0 +1,107 @@
+import { apiClient } from '@/lib/api/client';
+import type {
+  RealtimeChannel,
+  RealtimeMessage,
+  CreateChannelRequest,
+  UpdateChannelRequest,
+  ListMessagesRequest,
+  MessageStatsResponse,
+  RlsPolicy,
+  RealtimePermissionsResponse,
+} from '@insforge/shared-schemas';
+
+export type { RealtimeChannel, RealtimeMessage, RlsPolicy, RealtimePermissionsResponse };
+
+export class RealtimeService {
+  // ============================================================================
+  // Channels
+  // ============================================================================
+
+  async listChannels(): Promise<RealtimeChannel[]> {
+    return apiClient.request('/realtime/channels', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getChannel(id: string): Promise<RealtimeChannel> {
+    return apiClient.request(`/realtime/channels/${id}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async createChannel(data: CreateChannelRequest): Promise<RealtimeChannel> {
+    return apiClient.request('/realtime/channels', {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateChannel(id: string, data: UpdateChannelRequest): Promise<RealtimeChannel> {
+    return apiClient.request(`/realtime/channels/${id}`, {
+      method: 'PUT',
+      headers: apiClient.withAccessToken(),
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteChannel(id: string): Promise<void> {
+    return apiClient.request(`/realtime/channels/${id}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  // ============================================================================
+  // Messages
+  // ============================================================================
+
+  async listMessages(params?: ListMessagesRequest): Promise<RealtimeMessage[]> {
+    const searchParams = new URLSearchParams();
+    if (params?.channelId) {
+      searchParams.set('channelId', params.channelId);
+    }
+    if (params?.eventName) {
+      searchParams.set('eventName', params.eventName);
+    }
+    if (params?.limit) {
+      searchParams.set('limit', String(params.limit));
+    }
+    if (params?.offset) {
+      searchParams.set('offset', String(params.offset));
+    }
+
+    const query = searchParams.toString();
+    const endpoint = `/realtime/messages${query ? `?${query}` : ''}`;
+
+    return apiClient.request(endpoint, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getMessageStats(channelId?: string): Promise<MessageStatsResponse> {
+    const searchParams = new URLSearchParams();
+    if (channelId) {
+      searchParams.set('channelId', channelId);
+    }
+
+    const query = searchParams.toString();
+    const endpoint = `/realtime/messages/stats${query ? `?${query}` : ''}`;
+
+    return apiClient.request(endpoint, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  // ============================================================================
+  // Permissions
+  // ============================================================================
+
+  async getPermissions(): Promise<RealtimePermissionsResponse> {
+    return apiClient.request('/realtime/permissions', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const realtimeService = new RealtimeService();