insforge 0.3.3 → 1.3.0

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

@@ -0,0 +1,148 @@
+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';
+
+export default function FunctionsPage() {
+  const toastShownRef = useRef(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { showToast } = useToast();
+  const {
+    functions,
+    isRuntimeAvailable,
+    selectedFunction,
+    isLoading: loading,
+    selectFunction,
+    clearSelection,
+    refetch,
+  } = useFunctions();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isRuntimeAvailable && !toastShownRef.current) {
+      toastShownRef.current = true;
+      showToast('Function container is unhealthy.', 'error');
+    }
+  }, [isRuntimeAvailable, showToast]);
+
+  // 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 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>
+        {/* 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>
+      </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">
+          {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>
+
+        {/* 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>
+  );
+}

package/frontend/src/features/functions/{components/SecretsContent.tsx → pages/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
@@ -79,16 +75,18 @@ export function SecretsContent() {
           className="max-w-70 dark:bg-neutral-900 dark:border-neutral-700"
         />
 
-        {/* Secrets Table */}
-        <div className="flex flex-col gap-2">
-          {/* Table Header */}
-          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
-            <div className="col-span-8 py-1 px-3">Name</div>
-            {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
-            <div className="col-span-3 py-1 px-3">Updated at</div>
-            <div className="col-span-1 py-1 px-3" />
-          </div>
+        {/* Secrets Table Header */}
+        <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="col-span-8 py-1 px-3">Name</div>
+          {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
+          <div className="col-span-3 py-1 px-3">Updated at</div>
+          <div className="col-span-1 py-1 px-3" />
+        </div>
+      </div>
 
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+        <div className="flex flex-col gap-2">
           {loading ? (
             <>
               {[...Array(4)].map((_, i) => (
@@ -115,6 +113,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/pages/CloudLoginPage.tsx

@@ -0,0 +1,118 @@
+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 { loginWithAuthorizationCode, isAuthenticated } = useAuth();
+  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
+  const { isPartnerOrigin } = usePartnerOrigin();
+  const [authError, setAuthError] = useState<string | null>(null);
+
+  // 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 (!isInsforgeOrigin) {
+          const isPartner = await isPartnerOrigin(event.origin);
+          if (!isPartner) {
+            console.warn('Received message from unauthorized origin:', event.origin);
+            return;
+          }
+        }
+
+        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.');
+          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 });
+    }
+  }, [hasCompletedOnboarding, isAuthenticated, isMcpUsageLoading, navigate]);
+
+  // Show error state if authentication failed
+  if (authError) {
+    return (
+      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+        <div className="text-center text-white">
+          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
+          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
+          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show authenticating state
+  return (
+    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+      <div className="text-center">
+        <div className="animate-spin mb-4">
+          <LockIcon className="h-12 w-12 text-white mx-auto" />
+        </div>
+        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
+        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/login/{page → pages}/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();

package/frontend/src/features/logs/components/LogsDataGrid.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  DataGrid,
+  type DataGridProps,
+  type RenderCellProps,
+  type DataGridColumn,
+  type DataGridRowType,
+} from '@/components/datagrid';
+
+// Column definition type for LogsDataGrid
+export interface LogsColumnDef {
+  key: string;
+  name: string;
+  width?: string;
+  minWidth?: number;
+  maxWidth?: number;
+  sortable?: boolean;
+  renderCell?: (props: RenderCellProps<DataGridRowType>) => React.ReactNode;
+}
+
+// Convert logs data to DataGrid columns with custom renderers
+export function createLogsColumns(columnDefs: LogsColumnDef[]): DataGridColumn<DataGridRowType>[] {
+  return columnDefs.map((def) => {
+    const column: DataGridColumn<DataGridRowType> = {
+      key: def.key,
+      name: def.name,
+      width: def.width || '1fr',
+      minWidth: def.minWidth,
+      maxWidth: def.maxWidth,
+      resizable: true,
+      sortable: false,
+      renderCell:
+        def.renderCell ||
+        (({ row, column }: RenderCellProps<DataGridRowType>) => {
+          const value = row[column.key];
+          const displayValue = String(value ?? '');
+          return (
+            <span className="text-sm text-gray-900 dark:text-white font-normal leading-6 truncate">
+              {displayValue}
+            </span>
+          );
+        }),
+    };
+
+    return column;
+  });
+}
+
+// Logs-specific DataGrid props - generic to accept any object type
+export interface LogsDataGridProps<T = Record<string, unknown>>
+  extends Omit<DataGridProps<DataGridRowType>, 'columns' | 'data'> {
+  columnDefs: LogsColumnDef[];
+  data: T[];
+  noPadding?: boolean;
+}
+
+// Specialized DataGrid for logs
+export function LogsDataGrid<T = Record<string, unknown>>({
+  columnDefs,
+  data,
+  noPadding,
+  ...restProps
+}: LogsDataGridProps<T>) {
+  const columns = useMemo(() => {
+    return createLogsColumns(columnDefs);
+  }, [columnDefs]);
+
+  // Ensure each row has an id for DataGrid compatibility
+  const dataWithIds = useMemo(() => {
+    return data.map((log, index) => {
+      const record = log as Record<string, unknown>;
+      return {
+        ...record,
+        id: String(record.id ?? index),
+      };
+    }) as DataGridRowType[];
+  }, [data]);
+
+  return (
+    <DataGrid<DataGridRowType>
+      {...restProps}
+      data={dataWithIds}
+      columns={columns}
+      showSelection={false}
+      showPagination={true}
+      noPadding={noPadding}
+    />
+  );
+}

package/frontend/src/features/logs/components/SeverityBadge.tsx

@@ -0,0 +1,18 @@
+import { SEVERITY_CONFIG, type SeverityType } from '../helpers';
+
+interface SeverityBadgeProps {
+  severity: SeverityType;
+}
+
+export function SeverityBadge({ severity }: SeverityBadgeProps) {
+  const config = SEVERITY_CONFIG[severity] || SEVERITY_CONFIG.informational;
+
+  return (
+    <div className="flex items-center gap-2 pr-1">
+      <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: config.color }} />
+      <span className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+        {config.label}
+      </span>
+    </div>
+  );
+}

package/frontend/src/features/logs/components/index.ts

@@ -0,0 +1,2 @@
+export { createLogsColumns, type LogsColumnDef } from './LogsDataGrid';
+export { SeverityBadge } from './SeverityBadge';