insforge 1.2.10 → 1.4.8

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();

package/frontend/src/features/settings/pages/SettingsPage.tsx

@@ -0,0 +1,349 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Settings, Info, Plug } from 'lucide-react';
+import { CopyButton, TooltipProvider, Input, Button, ConfirmDialog } from '@/components';
+import { useApiKey } from '@/lib/hooks/useMetadata';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { cn, getBackendUrl, isInsForgeCloudProject, isIframe } from '@/lib/utils/utils';
+import {
+  McpConnectionSection,
+  ConnectionStringSection,
+  ApiCredentialsSection,
+} from '@/features/onboard';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+
+type TabType = 'info' | 'settings' | 'connect';
+
+interface TabButtonProps {
+  id: TabType;
+  label: string;
+  icon: React.ElementType;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+function TabButton({ label, icon: Icon, isActive, onClick }: TabButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'h-11 flex items-center gap-2.5 p-3 rounded-xl transition-colors cursor-pointer',
+        isActive
+          ? 'bg-gray-200 dark:bg-neutral-700 text-gray-900 dark:text-white'
+          : 'text-gray-500 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white'
+      )}
+    >
+      <Icon className="w-5 h-5" />
+      <span className="text-sm font-medium">{label}</span>
+    </button>
+  );
+}
+
+export default function SettingsPage() {
+  const [searchParams] = useSearchParams();
+
+  // Get initial tab from URL param, default to 'info'
+  const getInitialTab = (): TabType => {
+    const tabParam = searchParams.get('tab');
+    if (tabParam === 'connect' || tabParam === 'settings' || tabParam === 'info') {
+      return tabParam;
+    }
+    return 'info';
+  };
+
+  const [activeTab, setActiveTab] = useState<TabType>(() => getInitialTab());
+
+  const [version, setVersion] = useState<string>('');
+  const [isVersionLoading, setIsVersionLoading] = useState(true);
+  const [projectName, setProjectName] = useState('');
+  const [originalProjectName, setOriginalProjectName] = useState('');
+  const [hasNameChanged, setHasNameChanged] = useState(false);
+
+  const { apiKey, isLoading: isApiKeyLoading } = useApiKey();
+  const { confirm, confirmDialogProps } = useConfirm();
+  const isCloud = isInsForgeCloudProject();
+  const isInIframe = isIframe();
+  const projectUrl = window.location.origin;
+
+  // Masked API key display
+  const maskedApiKey = apiKey ? `ik_${'•'.repeat(32)}` : '';
+
+  // Fetch version on mount
+  useEffect(() => {
+    setIsVersionLoading(true);
+    const backendUrl = getBackendUrl();
+
+    fetch(`${backendUrl}/api/health`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.version) {
+          setVersion(`v${data.version}`);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to fetch version:', err);
+      })
+      .finally(() => {
+        setIsVersionLoading(false);
+      });
+  }, []);
+
+  // Listen for project info from cloud parent
+  useEffect(() => {
+    if (!isCloud || !isInIframe) {
+      return;
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'PROJECT_INFO' && event.data.name) {
+        setProjectName(event.data.name);
+        setOriginalProjectName(event.data.name);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // Request project info when Settings page mounts
+    postMessageToParent({ type: 'REQUEST_PROJECT_INFO' }, '*');
+
+    return () => window.removeEventListener('message', handleMessage);
+  }, [isCloud, isInIframe]);
+
+  const handleProjectNameChange = (value: string) => {
+    setProjectName(value);
+    setHasNameChanged(value.trim() !== originalProjectName);
+  };
+
+  const handleSaveProjectName = () => {
+    if (!hasNameChanged || !projectName.trim()) {
+      return;
+    }
+    postMessageToParent({ type: 'UPDATE_PROJECT_NAME', name: projectName.trim() }, '*');
+    // Update original name after sending update request
+    setOriginalProjectName(projectName.trim());
+    setHasNameChanged(false);
+  };
+
+  const handleDeleteProject = async () => {
+    const confirmed = await confirm({
+      title: 'Delete Project',
+      description: 'Are you certain you wish to remove this project? This action is irreversible.',
+      confirmText: 'Delete Project',
+      cancelText: 'Cancel',
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    postMessageToParent({ type: 'DELETE_PROJECT' }, '*');
+  };
+
+  return (
+    <>
+      <ConfirmDialog {...confirmDialogProps} />
+      <main className="h-full bg-bg-gray dark:bg-neutral-800 overflow-hidden py-8">
+        <div className="h-full flex flex-col gap-6 w-full max-w-[1080px] mx-auto">
+          {/* Header */}
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px] shrink-0">
+            Project Settings
+          </h1>
+
+          {/* Content */}
+          <div className="flex-1 flex gap-6 min-h-0 overflow-hidden">
+            {/* Sidebar Tabs - Fixed, no scroll */}
+            <div className="flex flex-col gap-2 w-50 shrink-0">
+              <TabButton
+                id="info"
+                label="Info"
+                icon={Info}
+                isActive={activeTab === 'info'}
+                onClick={() => setActiveTab('info')}
+              />
+
+              {/* Only show Settings tab in cloud environment & iframe */}
+              {isCloud && isInIframe && (
+                <TabButton
+                  id="settings"
+                  label="Settings"
+                  icon={Settings}
+                  isActive={activeTab === 'settings'}
+                  onClick={() => setActiveTab('settings')}
+                />
+              )}
+
+              <TabButton
+                id="connect"
+                label="Connect"
+                icon={Plug}
+                isActive={activeTab === 'connect'}
+                onClick={() => setActiveTab('connect')}
+              />
+            </div>
+
+            {/* Main Content Area - Independent scroll */}
+            <div className="flex-1 flex flex-col gap-6 overflow-y-auto pb-12">
+              {activeTab === 'info' && (
+                <div className="flex flex-col gap-6 bg-gray-200 dark:bg-[#333333] rounded-lg p-6">
+                  <p className="text-base text-gray-900 dark:text-white">Project Information</p>
+
+                  {/* Project URL */}
+                  <div className="flex items-start gap-10">
+                    <label className="text-sm leading-6 text-gray-900 dark:text-white w-25 shrink-0 pt-1.5">
+                      Project URL
+                    </label>
+                    <div className="flex-1 h-9 flex items-center justify-between gap-2 text-sm text-gray-900 dark:text-white bg-gray-100 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 pl-3 pr-2 rounded-lg">
+                      <span className="font-mono truncate">{projectUrl}</span>
+                      <CopyButton
+                        text={projectUrl}
+                        showText={false}
+                        className="h-6 w-6 p-1 min-w-0 shrink-0 text-black dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 border-none"
+                      />
+                    </div>
+                  </div>
+
+                  {/* API Key */}
+                  <div className="flex items-start gap-10">
+                    <label className="text-sm leading-6 text-gray-900 dark:text-white w-25 shrink-0 pt-1.5">
+                      API Key
+                    </label>
+                    <div className="flex-1 flex flex-col gap-1">
+                      <div
+                        className={cn(
+                          'h-9 flex items-center justify-between gap-2 text-sm bg-gray-100 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 pl-3 pr-2 rounded-lg',
+                          isApiKeyLoading && 'animate-pulse'
+                        )}
+                      >
+                        <span className="font-mono text-gray-900 dark:text-white">
+                          {isApiKeyLoading ? '•'.repeat(35) : maskedApiKey || 'Not available'}
+                        </span>
+                        {!isApiKeyLoading && apiKey && (
+                          <CopyButton
+                            text={apiKey}
+                            showText={false}
+                            className="h-6 w-6 p-1 min-w-0 shrink-0 text-black dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 border-none"
+                          />
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-500 dark:text-neutral-400">
+                        This key has full access control to your project and should be kept secure.
+                        Do not expose this key in your frontend code.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Version */}
+                  <div className="flex items-start gap-10">
+                    <label className="text-sm leading-6 text-gray-900 dark:text-white w-25 shrink-0 pt-1.5">
+                      Version
+                    </label>
+                    <div
+                      className={cn(
+                        'flex-1 h-9 flex items-center text-sm text-gray-900 dark:text-white bg-gray-100 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 pl-3 pr-2 rounded-lg',
+                        isVersionLoading && 'animate-pulse'
+                      )}
+                    >
+                      {isVersionLoading ? 'Loading...' : version || 'Unknown'}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'settings' && isCloud && isInIframe && (
+                <div className="flex flex-col gap-6 bg-gray-200 dark:bg-[#333333] rounded-lg p-6">
+                  {/* General Settings Section */}
+                  <div className="flex flex-col gap-6">
+                    <p className="text-base text-black dark:text-white">General Settings</p>
+
+                    <div className="flex items-start gap-10">
+                      <label className="text-sm leading-6 text-gray-900 dark:text-white w-25 shrink-0 pt-1.5">
+                        Project Name
+                      </label>
+                      <div className="flex items-center gap-3">
+                        <Input
+                          type="text"
+                          value={projectName}
+                          onChange={(e) => handleProjectNameChange(e.target.value)}
+                          placeholder="Project name"
+                          className="w-80 h-9 text-sm bg-gray-100 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-lg text-gray-900 dark:text-white"
+                        />
+                        <Button
+                          onClick={handleSaveProjectName}
+                          disabled={!hasNameChanged}
+                          className={cn(
+                            'h-9 text-white dark:text-black bg-black dark:bg-emerald-300 hover:opacity-90 px-3 py-2 rounded-lg',
+                            !hasNameChanged && 'opacity-40'
+                          )}
+                        >
+                          Save
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Divider */}
+                  <div className="bg-gray-200 dark:bg-neutral-700 h-px w-full" />
+
+                  {/* Delete Project Section */}
+                  <div className="flex flex-col gap-6">
+                    <p className="text-base text-gray-900 dark:text-white">Delete Project</p>
+                    <Button
+                      variant="destructive"
+                      onClick={() => void handleDeleteProject()}
+                      className="w-30 bg-red-600 hover:bg-red-700 text-white dark:bg-red-200 dark:hover:bg-red-300 dark:text-red-700"
+                    >
+                      Delete Project
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'connect' && (
+                <TooltipProvider>
+                  <div className="flex flex-col gap-12 mr-4">
+                    <div className="flex flex-col gap-6">
+                      <p className="text-black dark:text-white text-base">Recommended</p>
+                      {/* MCP Section */}
+                      <div className="bg-gray-200 dark:bg-[#333333] rounded-lg p-6 flex flex-col gap-6">
+                        <p className="text-base text-gray-900 dark:text-white">MCP</p>
+                        <McpConnectionSection
+                          apiKey={apiKey || ''}
+                          appUrl={projectUrl}
+                          isLoading={isApiKeyLoading}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-6">
+                      <p className="text-black dark:text-white text-base">Advanced</p>
+                      {/* Connection String Section - Only show in cloud environment */}
+                      {isCloud && (
+                        <div className="bg-gray-200 dark:bg-[#333333] rounded-lg p-6 flex flex-col gap-6">
+                          <p className="text-base text-gray-900 dark:text-white">
+                            Connection String
+                          </p>
+                          <ConnectionStringSection />
+                        </div>
+                      )}
+
+                      {/* API Credentials Section */}
+                      <div className="bg-gray-200 dark:bg-[#333333] rounded-lg p-6 flex flex-col gap-6">
+                        <p className="text-base text-gray-900 dark:text-white">API Credentials</p>
+                        <ApiCredentialsSection
+                          apiKey={apiKey || ''}
+                          appUrl={projectUrl}
+                          isLoading={isApiKeyLoading}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </TooltipProvider>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}