insforge 0.3.3 → 1.2.10

package/frontend/src/features/ai/page/AIPage.tsx

@@ -1,43 +1,34 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Plus, Loader2 } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { Button, ConfirmDialog } from '@/components';
 import { useAIConfigs } from '../hooks/useAIConfigs';
 import { useAIRemainingCredits } from '../hooks/useAIUsage';
 import {
-  AIConfigurationWithUsageSchema,
   CreateAIConfigurationRequest,
   UpdateAIConfigurationRequest,
 } from '@insforge/shared-schemas';
 import { useConfirm } from '@/lib/hooks/useConfirm';
-import { useToast } from '@/lib/hooks/useToast';
-import { AIConfigDialog } from '@/features/ai/components/AIConfigDialog';
-import { AIModelCard } from '@/features/ai/components/AIConfigCard';
-import AIEmptyState from '@/features/ai/components/AIEmptyState';
-import { getProviderLogo } from '../helpers';
+import {
+  AIEmptyState,
+  ModelSelectionDialog,
+  SystemPromptDialog,
+  AIModelCard,
+} from '@/features/ai/components';
+import { isInsForgeCloudProject } from '@/lib/utils/utils';
 
 export default function AIPage() {
   const {
-    configurations,
+    configurationOptions,
     isLoadingConfigurations,
     createConfiguration,
     updateConfiguration,
     deleteConfiguration,
   } = useAIConfigs();
 
-  const { data: credits, error: getAICreditsError } = useAIRemainingCredits();
+  const { data: credits, error: getAICreditsError } =
+    useAIRemainingCredits(!isInsForgeCloudProject());
 
   const { confirm, confirmDialogProps } = useConfirm();
-  const { showToast } = useToast();
-
-  // Handle AI credits error
-  useEffect(() => {
-    if (getAICreditsError) {
-      console.error('Failed to fetch AI credits:', getAICreditsError);
-      const errorMessage = getAICreditsError.message || 'Failed to load AI credits';
-      showToast(errorMessage, 'error');
-    }
-  }, [getAICreditsError, showToast]);
 
   // Format credits display
   const formatCredits = (remaining: number) => {
@@ -47,17 +38,13 @@ export default function AIPage() {
     return remaining.toFixed(2);
   };
 
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogMode, setDialogMode] = useState<'create' | 'edit'>('create');
-  const [editingConfig, setEditingConfig] = useState<AIConfigurationWithUsageSchema | undefined>();
+  const [modelSelectionOpen, setModelSelectionOpen] = useState(false);
+  const [systemPromptOpen, setSystemPromptOpen] = useState(false);
+  const [editingConfigId, setEditingConfigId] = useState<string | undefined>();
 
   const handleEdit = (id: string) => {
-    const config = configurations.find((c) => c.id === id);
-    if (config) {
-      setEditingConfig(config);
-      setDialogMode('edit');
-      setDialogOpen(true);
-    }
+    setEditingConfigId(id);
+    setSystemPromptOpen(true);
   };
 
   const handleDelete = async (id: string) => {
@@ -75,37 +62,34 @@ export default function AIPage() {
   };
 
   const handleCreate = () => {
-    setEditingConfig(undefined);
-    setDialogMode('create');
-    setDialogOpen(true);
+    setModelSelectionOpen(true);
   };
 
-  const handleDialogSuccess = (
-    configData: CreateAIConfigurationRequest | UpdateAIConfigurationRequest
-  ) => {
-    if (dialogMode === 'create') {
-      const createData = configData as CreateAIConfigurationRequest;
-      createConfiguration({
-        inputModality: createData.inputModality,
-        outputModality: createData.outputModality,
-        provider: createData.provider,
-        modelId: createData.modelId,
-        systemPrompt: createData.systemPrompt,
-      });
-    } else if (editingConfig) {
-      const updateData = configData as UpdateAIConfigurationRequest;
+  const handleModelSelectionSuccess = (configData: CreateAIConfigurationRequest) => {
+    createConfiguration({
+      inputModality: configData.inputModality,
+      outputModality: configData.outputModality,
+      provider: configData.provider,
+      modelId: configData.modelId,
+    });
+  };
+
+  // Derive the editing config from the ID
+  const editingConfig = configurationOptions.find((c) => c.id === editingConfigId);
+
+  const handleSystemPromptSuccess = (configData: UpdateAIConfigurationRequest) => {
+    if (editingConfigId) {
       updateConfiguration({
-        id: editingConfig.id,
+        id: editingConfigId,
         data: {
-          systemPrompt: updateData.systemPrompt || null,
+          systemPrompt: configData.systemPrompt || null,
         },
       });
     }
-    setDialogOpen(false);
   };
 
   return (
-    <div className="flex h-full bg-bg-gray dark:bg-neutral-800 pt-8 pb-6">
+    <div className="flex h-full bg-white dark:bg-neutral-800 pt-8 pb-6">
       <div className="max-w-[1080px] mx-auto flex-1 flex flex-col gap-6 overflow-hidden">
         {/* Header Section */}
         <div className="w-full flex items-start justify-between">
@@ -113,13 +97,13 @@ export default function AIPage() {
             <div className="flex items-center gap-3">
               <h1 className="text-xl font-semibold text-black dark:text-white">AI Integration</h1>
               {credits?.remaining && (
-                <span className="text-sm font-normal text-emerald-500 dark:text-emerald-400 mt-[2.5px]">
+                <span className="text-sm font-normal text-neutral-700 dark:text-emerald-300 mt-[2.5px]">
                   {formatCredits(credits.remaining)} credit{credits.remaining !== 1 ? 's' : ''} left
                 </span>
               )}
             </div>
             <p className="text-sm text-neutral-500 dark:text-neutral-400">
-              Copy prompt to your agent and the AI Model below will be integrated automatically.
+              Your models are ready — build LLM-powered features or add more integrations.
             </p>
           </div>
           <Button
@@ -133,42 +117,46 @@ export default function AIPage() {
 
         {/* Content Section */}
         <div className="flex-1 overflow-auto">
-          {isLoadingConfigurations ? (
+          {getAICreditsError ? (
+            <AIEmptyState title="Configuration Error" description={getAICreditsError.message} />
+          ) : isLoadingConfigurations ? (
             <div className="flex-1 flex items-center justify-center h-full">
               <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
             </div>
-          ) : configurations.length > 0 ? (
+          ) : configurationOptions.length ? (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {configurations.map((config) => {
-                const providerLogo = getProviderLogo(config.modelId.split('/')[0]);
-                const extendedConfig = {
-                  ...config,
-                  logo: providerLogo,
-                };
-
-                return (
-                  <AIModelCard
-                    key={config.id}
-                    config={extendedConfig}
-                    onEdit={handleEdit}
-                    onDelete={() => void handleDelete(config.id)}
-                  />
-                );
-              })}
+              {configurationOptions.map((modelOption) => (
+                <AIModelCard
+                  key={modelOption.id}
+                  config={modelOption}
+                  mode="configured"
+                  onEdit={handleEdit}
+                  onDelete={() => void handleDelete(modelOption.id)}
+                />
+              ))}
             </div>
           ) : (
-            <AIEmptyState />
+            <AIEmptyState
+              title="No AI Integration Yet"
+              description="Add your first integration to get started"
+            />
           )}
         </div>
       </div>
 
-      {/* AI Configuration Dialog */}
-      <AIConfigDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        mode={dialogMode}
-        editingConfig={editingConfig}
-        onSuccess={handleDialogSuccess}
+      {/* Model Selection Dialog */}
+      <ModelSelectionDialog
+        open={modelSelectionOpen}
+        onOpenChange={setModelSelectionOpen}
+        onSuccess={handleModelSelectionSuccess}
+      />
+
+      {/* System Prompt Dialog */}
+      <SystemPromptDialog
+        open={systemPromptOpen}
+        onOpenChange={setSystemPromptOpen}
+        initialSystemPrompt={editingConfig?.systemPrompt}
+        onSuccess={handleSystemPromptSuccess}
       />
 
       {/* Confirm Dialog */}

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

@@ -1,17 +1,17 @@
 import { apiClient } from '@/lib/api/client';
 import {
-  ListModelsResponse,
+  AIModelSchema,
   AIConfigurationSchema,
-  AIConfigurationWithUsageSchema,
   CreateAIConfigurationRequest,
   UpdateAIConfigurationRequest,
   AIUsageSummarySchema,
   AIUsageRecordSchema,
   ListAIUsageResponse,
+  AIConfigurationWithUsageSchema,
 } from '@insforge/shared-schemas';
 
-export class AiService {
-  getModels(): Promise<ListModelsResponse> {
+export class AIService {
+  getModels(): Promise<AIModelSchema[]> {
     return apiClient.request('/ai/models', {
       headers: apiClient.withAccessToken(),
     });
@@ -145,4 +145,4 @@ export class AiService {
   }
 }
 
-export const aiService = new AiService();
+export const aiService = new AIService();

package/frontend/src/features/auth/components/AuthPreview.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import { SignInForm, SignUpForm, ForgotPasswordForm } from '@insforge/react';
+import { useAuthConfig } from '../hooks/useAuthConfig';
+import { useOAuthConfig } from '../hooks/useOAuthConfig';
+
+type AuthView = 'sign-in' | 'sign-up' | 'forgot-password';
+
+export function AuthPreview() {
+  const { config } = useAuthConfig();
+  const { configs: oAuthConfigs } = useOAuthConfig();
+  const [view, setView] = useState<AuthView>('sign-in');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  // Listen to hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1); // Remove the #
+      if (
+        hash === 'preview=sign-in' ||
+        hash === 'preview=sign-up' ||
+        hash === 'preview=forgot-password'
+      ) {
+        setView(hash.replace('preview=', '') as AuthView);
+      }
+    };
+
+    // Set initial view from hash
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  const authConfig = {
+    oAuthProviders: oAuthConfigs.map((provider) => provider.provider) ?? [],
+    passwordMinLength: config?.passwordMinLength ?? 6,
+    requireEmailVerification: !!config?.requireEmailVerification,
+    requireLowercase: !!config?.requireLowercase,
+    requireNumber: !!config?.requireNumber,
+    requireSpecialChar: !!config?.requireSpecialChar,
+    requireUppercase: !!config?.requireUppercase,
+    resetPasswordMethod: config?.resetPasswordMethod ?? ('code' as const),
+    verifyEmailMethod: config?.verifyEmailMethod ?? ('code' as const),
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Preview mode - do nothing
+  };
+
+  const handleOAuthClick = () => {
+    // Preview mode - do nothing
+  };
+
+  return (
+    <div className="w-[400px]">
+      {view === 'sign-in' && (
+        <SignInForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          forgotPasswordUrl="#preview=forgot-password"
+          signUpUrl="#preview=sign-up"
+        />
+      )}
+
+      {view === 'sign-up' && (
+        <SignUpForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          signInUrl="#preview=sign-in"
+        />
+      )}
+
+      {view === 'forgot-password' && (
+        <ForgotPasswordForm
+          email={email}
+          onEmailChange={setEmail}
+          onSubmit={handleSubmit}
+          backToSignInUrl="#preview=sign-in"
+        />
+      )}
+    </div>
+  );
+}

package/frontend/src/features/auth/components/OAuthConfigDialog.tsx

@@ -3,26 +3,36 @@ import { useForm, Controller, useFormState } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { ExternalLink } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Switch } from '@/components/radix/Switch';
 import {
+  Button,
+  Input,
+  Switch,
+  CopyButton,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/radix/Dialog';
+} from '@/components';
 import WarningIcon from '@/assets/icons/warning.svg';
-import { CopyButton } from '@/components/CopyButton';
-import { oAuthConfigSchema, OAuthConfigSchema } from '@insforge/shared-schemas';
-import { OAuthProviderInfo } from './AuthMethodTab';
+import {
+  oAuthConfigSchema,
+  OAuthConfigSchema,
+  OAuthProvidersSchema,
+} from '@insforge/shared-schemas';
+import { type OAuthProviderInfo } from '../helpers';
 import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
 import { getBackendUrl, isInsForgeCloudProject } from '@/lib/utils/utils';
 
 const getCallbackUrl = (provider?: string) => {
   // Use backend API URL for OAuth callback
-  return `${getBackendUrl()}/api/auth/oauth/${provider}/callback`;
+  let backendUrl = getBackendUrl();
+
+  // Check if backend URL contains "localhost" and provider is "x"
+  if (provider === 'x' && backendUrl.includes('localhost')) {
+    backendUrl = backendUrl.replace('://localhost', '://www.localhost');
+  }
+  return `${backendUrl}/api/auth/oauth/${provider}/callback`;
 };
 
 interface OAuthConfigDialogProps {
@@ -63,6 +73,17 @@ export function OAuthConfigDialog({
   const clientId = form.watch('clientId');
   const clientSecret = form.watch('clientSecret');
 
+  // Our Cloud only support shared keys of these OAuth Providers for now
+  const sharedKeyProviders: readonly OAuthProvidersSchema[] = [
+    'google',
+    'github',
+    'discord',
+    'linkedin',
+    'facebook',
+  ] satisfies readonly OAuthProvidersSchema[];
+  const isSharedKeysAvailable =
+    isInsForgeCloudProject() && provider?.id && sharedKeyProviders.includes(provider.id);
+
   // Use useFormState hook for better reactivity
   const { isDirty } = useFormState({
     control: form.control,
@@ -90,11 +111,11 @@ export function OAuthConfigDialog({
           provider: provider.id,
           clientId: '',
           clientSecret: '',
-          useSharedKey: isInsForgeCloudProject(),
+          useSharedKey: isSharedKeysAvailable,
         });
       }
     }
-  }, [isOpen, provider, providerConfig, form, isLoadingProvider]);
+  }, [form, isLoadingProvider, isOpen, isSharedKeysAvailable, provider, providerConfig]);
 
   const handleSubmitData = (data: OAuthConfigSchema & { clientSecret?: string }) => {
     if (!provider) {
@@ -180,25 +201,27 @@ export function OAuthConfigDialog({
             <form onSubmit={(e) => e.preventDefault()} className="flex flex-col">
               <div className="space-y-6 p-6">
                 {/* Shared Keys Toggle */}
-                <div className="flex items-center justify-start gap-2">
-                  <Controller
-                    name="useSharedKey"
-                    control={form.control}
-                    render={({ field }) => {
-                      return (
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={(value) => {
-                            field.onChange(value);
-                          }}
-                        />
-                      );
-                    }}
-                  />
-                  <span className="text-sm font-medium text-gray-900 dark:text-white">
-                    Shared Keys
-                  </span>
-                </div>
+                {isSharedKeysAvailable && (
+                  <div className="flex items-center justify-start gap-2">
+                    <Controller
+                      name="useSharedKey"
+                      control={form.control}
+                      render={({ field }) => {
+                        return (
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={(value) => {
+                              field.onChange(value);
+                            }}
+                          />
+                        );
+                      }}
+                    />
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      Shared Keys
+                    </span>
+                  </div>
+                )}
 
                 {useSharedKey ? (
                   /* Shared Keys Enabled */
@@ -292,7 +315,7 @@ export function OAuthConfigDialog({
                     : 'Adding...'
                   : providerConfig
                     ? 'Update'
-                    : 'Add OAuth'}
+                    : 'Add Provider'}
               </Button>
             </DialogFooter>
           </>

package/frontend/src/features/auth/components/UserFormDialog.tsx

@@ -1,18 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { Mail, Lock, AlertCircle } from 'lucide-react';
-import { authService } from '@/features/auth/services/auth.service';
-import { Button, Input, Label, Alert, AlertDescription } from '@/components';
 import {
+  Button,
+  Input,
+  Label,
+  Alert,
+  AlertDescription,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/radix/Dialog';
+} from '@/components';
 import ErrorIcon from '@/assets/icons/error.svg';
 import { useToast } from '@/lib/hooks/useToast';
 import { useUsers } from '@/features/auth/hooks/useUsers';
-import { emailSchema } from '@/lib/utils/validation-schemas';
+import { emailSchema } from '@insforge/shared-schemas';
 import { z } from 'zod';
 
 interface User {
@@ -63,7 +66,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
   const [showValidation, setShowValidation] = useState(false);
 
   const { showToast } = useToast();
-  const { refetch } = useUsers();
+  const { refetch, register } = useUsers();
 
   const isEditing = !!user;
 
@@ -126,7 +129,11 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
         userData.id = user.id;
       }
 
-      await authService.register(userData.email, userData.password || '', userData.name);
+      await register({
+        email: userData.email,
+        password: userData.password || '',
+        name: userData.name,
+      });
       void refetch();
       onOpenChange(false);
       showToast('User created successfully', 'success');

package/frontend/src/features/auth/components/UsersDataGrid.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
 import {
+  Badge,
   DataGrid,
   createDefaultCellRenderer,
   type DataGridProps,
   type DataGridColumn,
   type RenderCellProps,
   ConvertedValue,
-} from '@/components/datagrid';
-import { Badge } from '@/components/radix/Badge';
+} from '@/components';
 import { cn } from '@/lib/utils/utils';
 import type { UserSchema } from '@insforge/shared-schemas';
 
@@ -33,12 +33,42 @@ const ProviderIcon = ({ provider }: { provider: string }) => {
           color:
             'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
         };
+      case 'discord':
+        return {
+          label: 'Discord',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
+      case 'linkedin':
+        return {
+          label: 'LinkedIn',
+          color:
+            'bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-500',
+        };
+      case 'facebook':
+        return {
+          label: 'Facebook',
+          color:
+            'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-600',
+        };
+      case 'microsoft':
+        return {
+          label: 'Microsoft',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
       case 'email':
         return {
           label: 'Email',
           color:
             'bg-green-100 text-green-700 dark:bg-neutral-800 dark:text-green-300 dark:border-green-500',
         };
+      case 'x':
+        return {
+          label: 'X',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
       default:
         return {
           label: provider,
@@ -63,7 +93,7 @@ const ProviderIcon = ({ provider }: { provider: string }) => {
 const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
   const identities = row.identities;
 
-  if (!identities || !Array.isArray(identities) || identities.length === 0) {
+  if (!identities || !Array.isArray(identities) || !identities.length) {
     return <span className="text-sm text-black dark:text-zinc-300">null</span>;
   }
 
@@ -83,7 +113,7 @@ const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
       {uniqueProviders.length > 2 && (
         <Badge
           variant="secondary"
-          className="text-xs bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700"
+          className="text-xs px-2 py-1 bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700 border border-transparent"
         >
           +{uniqueProviders.length - 2}
         </Badge>
@@ -124,7 +154,7 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
     {
       key: 'identities',
       name: 'Identities',
-      width: '1fr',
+      width: '1.5fr',
       resizable: true,
       sortable: true,
       renderCell: IdentitiesCellRenderer,
@@ -137,6 +167,14 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
       sortable: true,
       renderCell: cellRenderers.text,
     },
+    {
+      key: 'emailVerified',
+      name: 'Email Verified',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.boolean,
+    },
     {
       key: 'createdAt',
       name: 'Created',
@@ -160,21 +198,13 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
 export type UsersDataGridProps = Omit<DataGridProps<UserDataGridRow>, 'columns'>;
 
 // Specialized DataGrid for users
-export function UsersDataGrid({
-  emptyStateTitle = 'No users available',
-  emptyStateActionText,
-  onEmptyStateAction,
-  ...props
-}: UsersDataGridProps) {
+export function UsersDataGrid(props: UsersDataGridProps) {
   const columns = useMemo(() => createUsersColumns(), []);
 
   return (
     <DataGrid<UserDataGridRow>
       {...props}
       columns={columns}
-      emptyStateTitle={emptyStateTitle}
-      emptyStateActionText={emptyStateActionText}
-      onEmptyStateAction={onEmptyStateAction}
       showSelection={true}
       showPagination={true}
       showTypeBadge={false}

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

@@ -0,0 +1,5 @@
+export { AuthPreview } from './AuthPreview';
+export { OAuthConfigDialog } from './OAuthConfigDialog';
+export { OAuthEmptyState } from './OAuthEmptyState';
+export { default as UserFormDialog } from './UserFormDialog';
+export { createUsersColumns, UsersDataGrid, type UsersDataGridProps } from './UsersDataGrid';