insforge 0.3.2 → 1.2.10

package/frontend/src/features/functions/page/FunctionsPage.tsx

@@ -1,27 +1,170 @@
-import { useState, useEffect } from 'react';
-import { FunctionsSidebar } from '@/features/functions/components/FunctionsSidebar';
-import { FunctionsContent } from '@/features/functions/components/FunctionsContent';
-import { SecretsContent } from '@/features/functions/components/SecretsContent';
+import { ChevronRight } from 'lucide-react';
+import { FunctionRow } from '../components/FunctionRow';
+import FunctionEmptyState from '../components/FunctionEmptyState';
+import { useFunctions } from '../hooks/useFunctions';
+import { useToast } from '@/lib/hooks/useToast';
+import { useEffect, useRef, useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  CodeEditor,
+  Button,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import {
+  DataUpdatePayload,
+  DataUpdateResourceType,
+  ServerEvents,
+  SocketMessage,
+  useSocket,
+} from '@/lib/contexts/SocketContext';
 
 export default function FunctionsPage() {
-  // Load selected section from localStorage on mount
-  const [selectedSection, setSelectedSection] = useState<'functions' | 'secrets'>(() => {
-    return (
-      (localStorage.getItem('selectedFunctionSection') as 'functions' | 'secrets') || 'functions'
-    );
-  });
+  const toastShownRef = useRef(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { showToast } = useToast();
+  const {
+    functions,
+    isRuntimeAvailable,
+    selectedFunction,
+    isLoading: loading,
+    selectFunction,
+    clearSelection,
+    refetch,
+  } = useFunctions();
+
+  const { socket, isConnected } = useSocket();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
 
-  // Save selected section to localStorage when it changes
   useEffect(() => {
-    localStorage.setItem('selectedFunctionSection', selectedSection);
-  }, [selectedSection]);
+    if (!isRuntimeAvailable && !toastShownRef.current) {
+      toastShownRef.current = true;
+      showToast('Function container is unhealthy.', 'error');
+    }
+  }, [isRuntimeAvailable, showToast]);
+
+  useEffect(() => {
+    if (!socket || !isConnected) {
+      return;
+    }
+
+    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
+      if (message.payload?.resource === DataUpdateResourceType.FUNCTIONS) {
+        void refetch();
+      }
+    };
+
+    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
 
+    return () => {
+      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
+    };
+  }, [socket, isConnected, refetch]);
+
+  // If a function is selected, show the detail view
+  if (selectedFunction) {
+    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={clearSelection}
+            className="text-xl text-zinc-500 dark:text-neutral-400 hover:text-zinc-950 dark:hover:text-white transition-colors"
+          >
+            Functions
+          </button>
+          <ChevronRight className="w-5 h-5 text-muted-foreground dark:text-neutral-400" />
+          <p className="text-xl text-zinc-950 dark:text-white">{selectedFunction.name}</p>
+        </div>
+
+        <div className="flex-1 min-h-0">
+          <CodeEditor code={selectedFunction.code || '// No code available'} />
+        </div>
+      </div>
+    );
+  }
+
+  // Default list view
   return (
-    <div className="h-full flex">
-      <FunctionsSidebar selectedSection={selectedSection} onSectionSelect={setSelectedSection} />
+    <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">Functions</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>
+        <div className="flex flex-col gap-2 relative">
+          {/* Table Header */}
+          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+            <div className="col-span-2 py-1 px-3">Name</div>
+            <div className="col-span-6 py-1 px-3">URL</div>
+            <div className="col-span-2 py-1 px-3">Created</div>
+            <div className="col-span-2 py-1 px-3">Last Update</div>
+          </div>
+          {loading ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px] cols-span-full" />
+              ))}
+            </>
+          ) : functions.length >= 1 ? (
+            <>
+              {functions.map((func) => (
+                <FunctionRow
+                  key={func.id}
+                  function={func}
+                  onClick={() => void selectFunction(func)}
+                  className="cols-span-full"
+                />
+              ))}
+            </>
+          ) : (
+            <div className="cols-span-full">
+              <FunctionEmptyState />
+            </div>
+          )}
 
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {selectedSection === 'functions' ? <FunctionsContent /> : <SecretsContent />}
+          {/* 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>
       </div>
     </div>
   );

package/frontend/src/features/functions/{components/SecretsContent.tsx → page/SecretsPage.tsx}

@@ -1,14 +1,10 @@
 import { useState } from 'react';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Skeleton } from '@/components/radix/Skeleton';
-import { SearchInput } from '@/components/SearchInput';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { SecretRow } from './SecretRow';
-import SecretEmptyState from './SecretEmptyState';
-import { useSecrets } from '@/features/secrets/hooks/useSecrets';
+import { Button, Input, Skeleton, SearchInput, ConfirmDialog } from '@/components';
+import { SecretRow } from '../components/SecretRow';
+import SecretEmptyState from '../components/SecretEmptyState';
+import { useSecrets } from '@/features/functions/hooks/useSecrets';
 
-export function SecretsContent() {
+export default function SecretsPage() {
   const [newSecretKey, setNewSecretKey] = useState('');
   const [newSecretValue, setNewSecretValue] = useState('');
 
@@ -31,7 +27,7 @@ export function SecretsContent() {
   };
 
   return (
-    <>
+    <div className="h-full flex flex-col overflow-hidden">
       <div className="flex flex-col gap-6 p-4">
         {/* Header */}
         <p className="h-7 text-xl text-zinc-950 dark:text-white">Secrets</p>
@@ -63,7 +59,7 @@ export function SecretsContent() {
             </div>
             <Button
               onClick={() => void handleSaveNewSecret()}
-              className="bg-emerald-300 hover:bg-emerald-400 text-black px-3 py-2 w-20 h-9 rounded"
+              className="bg-black hover:bg-zinc-800 dark:bg-emerald-300 dark:hover:bg-emerald-400 dark:text-black text-white px-3 py-2 w-20 h-9 rounded"
               disabled={!newSecretKey.trim() || !newSecretValue.trim()}
             >
               Save
@@ -115,6 +111,6 @@ export function SecretsContent() {
       </div>
 
       <ConfirmDialog {...confirmDialogProps} />
-    </>
+    </div>
   );
 }

package/frontend/src/features/functions/services/{functions.service.ts → function.service.ts}

@@ -19,7 +19,7 @@ export interface FunctionsResponse {
   };
 }
 
-export class FunctionsService {
+export class FunctionService {
   async listFunctions(): Promise<FunctionsResponse> {
     const data = await apiClient.request('/functions', {
       headers: apiClient.withAccessToken(),
@@ -45,4 +45,4 @@ export class FunctionsService {
   }
 }
 
-export const functionsService = new FunctionsService();
+export const functionService = new FunctionService();

package/frontend/src/features/{secrets/services/secrets.service.ts → functions/services/secret.service.ts}

@@ -25,7 +25,7 @@ export interface SecretValueResponse {
   value: string;
 }
 
-export class SecretsService {
+export class SecretService {
   async listSecrets(): Promise<Secret[]> {
     const data = (await apiClient.request('/secrets', {
       headers: apiClient.withAccessToken(),
@@ -54,4 +54,4 @@ export class SecretsService {
   }
 }
 
-export const secretsService = new SecretsService();
+export const secretService = new SecretService();

package/frontend/src/features/login/hooks/usePartnerOrigin.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { partnershipService } from '../services/partnership.service';
+
+/**
+ * Hook to check if origins are partner sites
+ * Delegates to the partnership service which handles caching and fetching
+ */
+export function usePartnerOrigin() {
+  /**
+   * Checks if an origin is a partner origin
+   * The service handles caching, so first call fetches, subsequent calls return cached result
+   */
+  const isPartnerOrigin = useCallback(async (origin: string): Promise<boolean> => {
+    const config = await partnershipService.fetchConfig();
+
+    if (!config?.partner_sites || config.partner_sites.length === 0) {
+      return false;
+    }
+
+    // Exact match only
+    return config.partner_sites.includes(origin);
+  }, []);
+
+  return {
+    isPartnerOrigin,
+  };
+}

package/frontend/src/features/login/page/CloudLoginPage.tsx

@@ -1,69 +1,94 @@
-import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { LockIcon } from 'lucide-react';
 import { useAuth } from '@/lib/contexts/AuthContext';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { usePartnerOrigin } from '../hooks/usePartnerOrigin';
 
 export default function CloudLoginPage() {
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
   const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
+  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
+  const { isPartnerOrigin } = usePartnerOrigin();
   const [authError, setAuthError] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (isAuthenticated) {
-      void navigate('/cloud/dashboard', { replace: true });
-    }
-  }, [isAuthenticated, navigate]);
-
-  // Handle authorization token exchange
-  useEffect(() => {
-    const authorizationCode = searchParams.get('authorizationCode');
+  // Handle authorization code from postMessage
+  const onAuthorizationCodeReceived = useCallback(
+    async (event: MessageEvent) => {
+      try {
+        // Validate origin - allow insforge.dev, *.insforge.dev, and partner domains
+        const isInsforgeOrigin =
+          event.origin.endsWith('.insforge.dev') || event.origin === 'https://insforge.dev';
 
-    if (authorizationCode) {
-      setAuthError(null);
-      // Exchange the authorization code for an access token
-      loginWithAuthorizationCode(authorizationCode)
-        .then((success) => {
-          if (success) {
-            // Notify parent of success
-            if (window.parent !== window) {
-              window.parent.postMessage(
-                {
-                  type: 'AUTH_SUCCESS',
-                },
-                '*'
-              );
-            }
-          } else {
-            setAuthError('The authorization code may have expired or already been used.');
-            if (window.parent !== window) {
-              window.parent.postMessage(
-                {
-                  type: 'AUTH_ERROR',
-                  message: 'Authorization code validation failed',
-                },
-                '*'
-              );
-            }
+        if (!isInsforgeOrigin) {
+          const isPartner = await isPartnerOrigin(event.origin);
+          if (!isPartner) {
+            console.warn('Received message from unauthorized origin:', event.origin);
+            return;
           }
-        })
-        .catch((error) => {
-          console.error('Authorization code exchange failed:', error);
+        }
+
+        const authorizationCode = event.data.code;
+
+        setAuthError(null);
+        // Exchange the authorization code for an access token
+        const success = await loginWithAuthorizationCode(authorizationCode);
+        if (success) {
+          // Notify parent of success
+          postMessageToParent(
+            {
+              type: 'AUTH_SUCCESS',
+            },
+            event.origin
+          );
+        } else {
           setAuthError('The authorization code may have expired or already been used.');
-          if (window.parent !== window) {
-            window.parent.postMessage(
-              {
-                type: 'AUTH_ERROR',
-                message: 'Authorization code validation failed',
-              },
-              '*'
-            );
-          }
-        });
-    } else {
-      setAuthError('No authorization code provided.');
+          postMessageToParent(
+            {
+              type: 'AUTH_ERROR',
+              message: 'Authorization code validation failed',
+            },
+            event.origin
+          );
+        }
+      } catch (error) {
+        console.error('Authorization code exchange failed:', error);
+        setAuthError('The authorization code may have expired or already been used.');
+        postMessageToParent(
+          {
+            type: 'AUTH_ERROR',
+            message: 'Authorization code validation failed',
+          },
+          event.origin
+        );
+      }
+    },
+    [loginWithAuthorizationCode, isPartnerOrigin]
+  );
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'AUTHORIZATION_CODE' && event.data?.code) {
+        void onAuthorizationCodeReceived(event);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [onAuthorizationCodeReceived]);
+
+  useEffect(() => {
+    if (isAuthenticated && !isMcpUsageLoading) {
+      if (!hasCompletedOnboarding) {
+        postMessageToParent({ type: 'SHOW_ONBOARDING_OVERLAY' });
+      }
+      void navigate('/dashboard', { replace: true });
     }
-  }, [searchParams, setSearchParams, loginWithAuthorizationCode, navigate]);
+  }, [hasCompletedOnboarding, isAuthenticated, isMcpUsageLoading, navigate]);
 
   // Show error state if authentication failed
   if (authError) {

package/frontend/src/features/login/page/LoginPage.tsx

@@ -1,44 +1,38 @@
-import { useEffect, useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Lock, Mail } from 'lucide-react';
 import {
+  Alert,
+  AlertDescription,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/radix/Card';
-import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/radix/Form';
-import { Input } from '@/components/radix/Input';
-import { ButtonWithLoading } from '@/components/ButtonWithLoading';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
+  Input,
+  ButtonWithLoading,
+} from '@/components';
 import { useAuth } from '@/lib/contexts/AuthContext';
-import { useOnboardingCompletion } from '@/lib/hooks/useOnboardingCompletion';
-import { loginFormSchema, LoginFormData } from '@/lib/utils/validation-schemas';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { loginFormSchema, LoginForm } from '@/lib/utils/schemaValidations';
 
 export default function LoginPage() {
   const navigate = useNavigate();
   const { loginWithPassword, isAuthenticated } = useAuth();
-  const { isCompleted } = useOnboardingCompletion();
+  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
 
-  // Determine where to redirect based on onboarding completion status
-  const getRedirectPath = useCallback(() => {
-    return isCompleted ? '/dashboard' : '/dashboard/onboard';
-  }, [isCompleted]);
-
-  const form = useForm<LoginFormData>({
+  const form = useForm<LoginForm>({
     resolver: zodResolver(loginFormSchema),
     defaultValues: {
       email: 'admin@example.com',
@@ -46,16 +40,14 @@ export default function LoginPage() {
     },
   });
 
-  const onSubmit = async (data: LoginFormData) => {
+  const onSubmit = async (data: LoginForm) => {
     setIsSubmitting(true);
     setSubmitError(null);
 
     try {
       const success = await loginWithPassword(data.email, data.password);
 
-      if (success) {
-        void navigate(getRedirectPath(), { replace: true });
-      } else {
+      if (!success) {
         throw new Error('Invalid email or password');
       }
     } catch (error) {
@@ -67,10 +59,11 @@ export default function LoginPage() {
   };
 
   useEffect(() => {
-    if (isAuthenticated) {
-      void navigate(getRedirectPath(), { replace: true });
+    if (isAuthenticated && !isMcpUsageLoading) {
+      const redirectPath = hasCompletedOnboarding ? '/dashboard' : '/dashboard/onboard';
+      void navigate(redirectPath, { replace: true });
     }
-  }, [isAuthenticated, navigate, getRedirectPath]);
+  }, [hasCompletedOnboarding, isAuthenticated, isMcpUsageLoading, navigate]);
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-neutral-900 flex items-center justify-center px-4 sm:px-6 lg:px-8">

package/frontend/src/features/login/services/partnership.service.ts

@@ -0,0 +1,65 @@
+export interface PartnershipConfig {
+  partner_sites: string[];
+}
+
+export class PartnershipService {
+  private configCache: PartnershipConfig | null = null;
+  private fetchPromise: Promise<PartnershipConfig | null> | null = null;
+  private readonly CONFIG_URL = 'https://config.insforge.dev/partnership.json';
+
+  /**
+   * Fetches the partnership configuration from S3
+   * Uses caching to avoid repeated fetches
+   */
+  async fetchConfig(): Promise<PartnershipConfig | null> {
+    // Return cached config if available
+    if (this.configCache) {
+      return this.configCache;
+    }
+
+    // If a fetch is already in progress, wait for it
+    if (this.fetchPromise) {
+      return this.fetchPromise;
+    }
+
+    // Start a new fetch
+    this.fetchPromise = (async () => {
+      try {
+        const response = await fetch(this.CONFIG_URL);
+
+        if (response.ok) {
+          const data = await response.json();
+
+          // Basic validation - ensure partner_sites exists and is an array
+          if (data && Array.isArray(data.partner_sites)) {
+            this.configCache = data;
+            return this.configCache;
+          } else {
+            console.warn('Invalid partnership config structure:', data);
+            return null;
+          }
+        } else {
+          console.warn('Failed to fetch partnership config:', response.status);
+          return null;
+        }
+      } catch (error) {
+        console.warn('Error fetching partnership config:', error);
+        return null;
+      } finally {
+        this.fetchPromise = null;
+      }
+    })();
+
+    return this.fetchPromise;
+  }
+
+  /**
+   * Clears the cached configuration (useful for testing or forcing refresh)
+   */
+  clearCache(): void {
+    this.configCache = null;
+    this.fetchPromise = null;
+  }
+}
+
+export const partnershipService = new PartnershipService();