insforge 0.3.3 → 1.3.0

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

@@ -1,178 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Plus, Loader2 } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-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';
-
-export default function AIPage() {
-  const {
-    configurations,
-    isLoadingConfigurations,
-    createConfiguration,
-    updateConfiguration,
-    deleteConfiguration,
-  } = useAIConfigs();
-
-  const { data: credits, error: getAICreditsError } = useAIRemainingCredits();
-
-  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) => {
-    if (remaining >= 1000) {
-      return `${(remaining / 1000).toFixed(1)}K`;
-    }
-    return remaining.toFixed(2);
-  };
-
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogMode, setDialogMode] = useState<'create' | 'edit'>('create');
-  const [editingConfig, setEditingConfig] = useState<AIConfigurationWithUsageSchema | undefined>();
-
-  const handleEdit = (id: string) => {
-    const config = configurations.find((c) => c.id === id);
-    if (config) {
-      setEditingConfig(config);
-      setDialogMode('edit');
-      setDialogOpen(true);
-    }
-  };
-
-  const handleDelete = async (id: string) => {
-    const shouldDelete = await confirm({
-      title: 'Delete AI Configuration',
-      description:
-        'Are you certain you wish to remove this AI Integration? This action is irreversible.',
-      confirmText: 'Delete',
-      destructive: true,
-    });
-
-    if (shouldDelete) {
-      deleteConfiguration(id);
-    }
-  };
-
-  const handleCreate = () => {
-    setEditingConfig(undefined);
-    setDialogMode('create');
-    setDialogOpen(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;
-      updateConfiguration({
-        id: editingConfig.id,
-        data: {
-          systemPrompt: updateData.systemPrompt || null,
-        },
-      });
-    }
-    setDialogOpen(false);
-  };
-
-  return (
-    <div className="flex h-full bg-bg-gray 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">
-          <div className="flex flex-col items-start gap-2">
-            <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]">
-                  {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.
-            </p>
-          </div>
-          <Button
-            className="h-9 py-2 pl-2 pr-3 text-sm font-medium gap-2 dark:text-white dark:bg-neutral-700 dark:hover:bg-neutral-600"
-            onClick={handleCreate}
-          >
-            <Plus className="w-5 h-5" />
-            New Integration
-          </Button>
-        </div>
-
-        {/* Content Section */}
-        <div className="flex-1 overflow-auto">
-          {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 ? (
-            <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)}
-                  />
-                );
-              })}
-            </div>
-          ) : (
-            <AIEmptyState />
-          )}
-        </div>
-      </div>
-
-      {/* AI Configuration Dialog */}
-      <AIConfigDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        mode={dialogMode}
-        editingConfig={editingConfig}
-        onSuccess={handleDialogSuccess}
-      />
-
-      {/* Confirm Dialog */}
-      <ConfirmDialog {...confirmDialogProps} />
-    </div>
-  );
-}

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

@@ -1,106 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from '@/components/radix/Button';
-import { Checkbox } from '@/components/Checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/radix/Dialog';
-import { OAuthProviderInfo } from './AuthMethodTab';
-
-interface AddOAuthDialogProps {
-  providers: OAuthProviderInfo[];
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: (selectedId: 'google' | 'github') => void;
-  enabledProviders: Record<'google' | 'github', boolean>;
-}
-
-export function AddOAuthDialog({
-  providers,
-  open,
-  onOpenChange,
-  onConfirm,
-  enabledProviders,
-}: AddOAuthDialogProps) {
-  const [selectedId, setSelectedId] = useState<'google' | 'github' | null>(null);
-
-  // Reset selection when dialog opens
-  useEffect(() => {
-    if (open) {
-      setSelectedId(null);
-    }
-  }, [open]);
-
-  const hasSelection = selectedId !== null;
-
-  // Filter out already enabled providers
-  const availableProviders = providers.filter((provider) => !enabledProviders[provider.id]);
-
-  const selectProvider = (id: 'google' | 'github') => {
-    setSelectedId(id);
-  };
-
-  const handleConfirm = () => {
-    if (selectedId) {
-      onConfirm(selectedId);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[600px] p-0 gap-0 dark:bg-neutral-800">
-        <DialogHeader className="pl-6 pr-4 py-3 border-b border-zinc-200 dark:border-neutral-700">
-          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
-            Add Authentication
-          </DialogTitle>
-        </DialogHeader>
-        <div className="p-6">
-          {availableProviders.length > 0 ? (
-            <div className="grid grid-cols-2 gap-3">
-              {availableProviders.map((p) => (
-                <button
-                  key={p.id}
-                  onClick={() => selectProvider(p.id)}
-                  className="flex items-center justify-start gap-6 rounded-[8px] p-3 bg-white hover:bg-zinc-100 dark:bg-[#333333] dark:hover:bg-neutral-700 border border-neutral-200 dark:border-neutral-700 transition-colors"
-                >
-                  <div className="w-4 h-4" onClick={(e) => e.stopPropagation()}>
-                    <Checkbox checked={selectedId === p.id} onChange={() => selectProvider(p.id)} />
-                  </div>
-                  <div className="flex items-center gap-3">
-                    {p.icon}
-                    <p className="text-sm font-medium text-zinc-950 dark:text-white">{p.name}</p>
-                  </div>
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8">
-              <p className="text-sm text-zinc-500 dark:text-neutral-400">
-                All authentication methods have been added.
-              </p>
-            </div>
-          )}
-        </div>
-        <DialogFooter className="px-6 py-4 border-t border-zinc-200 dark:border-neutral-700">
-          <Button
-            variant="outline"
-            className="w-fit h-9 px-3 py-2 rounded-sm dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            className="h-9 px-3 py-2 rounded-sm dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
-            onClick={handleConfirm}
-            disabled={!hasSelection}
-          >
-            Add OAuth
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,238 +0,0 @@
-import { useState, useCallback, useMemo, ReactElement } from 'react';
-import { Button } from '@/components/radix/Button';
-import { MoreHorizontal, Plus, Trash2, Pencil } from 'lucide-react';
-import Github from '@/assets/logos/github.svg?react';
-import Google from '@/assets/logos/google.svg?react';
-import { OAuthEmptyState } from './OAuthEmptyState';
-import { OAuthConfigDialog } from './OAuthConfigDialog';
-import { AddOAuthDialog } from './AddOAuthDialog';
-import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
-import { useConfirm } from '@/lib/hooks/useConfirm';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/radix/DropdownMenu';
-
-const providers: OAuthProviderInfo[] = [
-  {
-    id: 'google',
-    name: 'Google OAuth',
-    icon: <Google className="w-6 h-6" />,
-    description: 'Configure Google authentication for your users',
-    setupUrl: 'https://console.cloud.google.com/apis/credentials',
-  },
-  {
-    id: 'github',
-    name: 'GitHub OAuth',
-    icon: <Github className="w-6 h-6 dark:text-white" />,
-    description: 'Configure GitHub authentication for your users',
-    setupUrl: 'https://github.com/settings/developers',
-  },
-];
-
-export interface OAuthProviderInfo {
-  id: 'google' | 'github';
-  name: string;
-  icon: ReactElement;
-  description: string;
-  setupUrl: string;
-}
-
-export function AuthMethodTab() {
-  const [selectedProvider, setSelectedProvider] = useState<OAuthProviderInfo>();
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isSelectDialogOpen, setIsSelectDialogOpen] = useState(false);
-  const { confirm, confirmDialogProps } = useConfirm();
-  const {
-    configs,
-    isLoadingConfigs,
-    deleteConfig,
-    refetchConfigs,
-    getProviderConfig,
-    isProviderConfigured,
-  } = useOAuthConfig();
-
-  const handleConfigureProvider = (provider: OAuthProviderInfo) => {
-    setSelectedProvider(provider);
-    setIsDialogOpen(true);
-  };
-
-  const deleteOAuthConfig = async (providerId: 'google' | 'github', providerName: string) => {
-    const shouldDelete = await confirm({
-      title: `Delete ${providerName} OAuth`,
-      description: `Are you sure you want to delete the ${providerName} configuration? This action cannot be undone.`,
-      confirmText: 'Delete',
-      cancelText: 'Cancel',
-      destructive: true,
-    });
-
-    if (shouldDelete) {
-      try {
-        deleteConfig(providerId);
-      } catch (error) {
-        console.error(`Failed to delete ${providerId} OAuth:`, error);
-      }
-    }
-  };
-
-  const handleCloseDialog = () => {
-    setIsDialogOpen(false);
-    setSelectedProvider(undefined);
-  };
-
-  const hasAuthMethods = useMemo(() => {
-    return configs.length > 0;
-  }, [configs]);
-
-  const openSelectDialog = () => {
-    setIsSelectDialogOpen(true);
-  };
-
-  const enabledProviders = useMemo(() => {
-    return {
-      google: isProviderConfigured('google'),
-      github: isProviderConfigured('github'),
-    };
-  }, [isProviderConfigured]);
-
-  // Check if all providers are enabled
-  const allProvidersEnabled = useMemo(() => {
-    return providers.every((provider) => enabledProviders[provider.id]);
-  }, [enabledProviders]);
-
-  const handleConfirmSelected = (selectedId: 'google' | 'github') => {
-    // Find the selected provider
-    const selectedProvider = providers.find((p) => p.id === selectedId);
-    if (!selectedProvider) {
-      return;
-    }
-
-    // Close the select dialog and open the method dialog
-    setIsSelectDialogOpen(false);
-    setSelectedProvider(selectedProvider);
-    setIsDialogOpen(true);
-  };
-
-  const handleSuccess = useCallback(() => {
-    // Refresh configuration after successful update
-    void refetchConfigs();
-  }, [refetchConfigs]);
-
-  if (isLoadingConfigs) {
-    return (
-      <div className="flex items-center justify-center py-16">
-        <div className="text-center">
-          <div className="text-sm text-gray-500 dark:text-zinc-400">
-            Loading OAuth configuration...
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="flex flex-col gap-6 h-full overflow-hidden p-6 w-full max-w-[1080px] mx-auto">
-        <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Auth Method</h2>
-          {!allProvidersEnabled && (
-            <Button
-              className="h-9 pr-3 pl-2 py-2 gap-2 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 text-sm font-medium rounded-sm"
-              onClick={openSelectDialog}
-            >
-              <Plus className="w-5 h-5" />
-              Add Auth
-            </Button>
-          )}
-        </div>
-
-        <div className="flex-1">
-          {hasAuthMethods ? (
-            <div className="grid grid-cols-2 gap-x-3 gap-y-6">
-              {providers.map((provider) => {
-                const providerConfig = getProviderConfig(provider.id);
-                if (!providerConfig) {
-                  return null;
-                }
-
-                return (
-                  <div
-                    key={provider.id}
-                    className="flex items-center justify-between h-15 p-4 bg-white rounded-[8px] border border-gray-200 dark:border-transparent dark:bg-[#333333]"
-                  >
-                    <div className="flex-1 flex items-center gap-3">
-                      {provider.icon}
-
-                      <div className="text-sm font-medium text-black dark:text-white">
-                        {provider.name}
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-3">
-                      {providerConfig.useSharedKey && (
-                        <span className="px-2 py-0.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-500 dark:border-neutral-400 rounded">
-                          Shared Keys
-                        </span>
-                      )}
-
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            className="h-7 w-7 p-1 text-gray-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700"
-                            variant="ghost"
-                            size="sm"
-                          >
-                            <MoreHorizontal className="w-5 h-5" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="w-40 py-1 px-2">
-                          <DropdownMenuItem
-                            onClick={() => handleConfigureProvider(provider)}
-                            className="py-2 px-3 flex items-center gap-3 cursor-pointer"
-                          >
-                            <Pencil className="w-5 h-5" />
-                            Edit
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onClick={() => void deleteOAuthConfig(provider.id, provider.name)}
-                            className="py-2 px-3 flex items-center gap-3 cursor-pointer text-red-600 dark:text-red-400"
-                          >
-                            <Trash2 className="w-5 h-5" />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <OAuthEmptyState />
-          )}
-        </div>
-      </div>
-
-      <OAuthConfigDialog
-        provider={selectedProvider}
-        isOpen={isDialogOpen}
-        onClose={handleCloseDialog}
-        onSuccess={handleSuccess}
-      />
-
-      <AddOAuthDialog
-        providers={providers}
-        open={isSelectDialogOpen}
-        onOpenChange={setIsSelectDialogOpen}
-        onConfirm={handleConfirmSelected}
-        enabledProviders={enabledProviders}
-      />
-
-      {/* Confirm Dialog */}
-      <ConfirmDialog {...confirmDialogProps} />
-    </>
-  );
-}

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

@@ -1,114 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useUsers } from '@/features/auth/hooks/useUsers';
-import { UsersDataGrid } from './UsersDataGrid';
-import { SortColumn } from 'react-data-grid';
-import { UserSchema } from '@insforge/shared-schemas';
-
-interface UsersTabProps {
-  searchQuery?: string;
-  selectedRows?: Set<string>;
-  onSelectedRowsChange?: (selectedRows: Set<string>) => void;
-}
-
-export function UsersTab({
-  searchQuery: externalSearchQuery = '',
-  selectedRows: externalSelectedRows,
-  onSelectedRowsChange: externalOnSelectedRowsChange,
-}: UsersTabProps) {
-  // Default page size of 20 records per page
-  const pageSize = 20;
-  const { users, totalUsers, isLoading, currentPage, setCurrentPage, totalPages, refetch } =
-    useUsers({ searchQuery: externalSearchQuery, pageSize });
-
-  // Multi-select state - use external state if provided, otherwise internal
-  const [internalSelectedRows, setInternalSelectedRows] = useState<Set<string>>(new Set());
-  const selectedRows = externalSelectedRows || internalSelectedRows;
-  const setSelectedRows = externalOnSelectedRowsChange || setInternalSelectedRows;
-
-  // Sorting state
-  const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
-
-  // Listen for refresh events
-  useEffect(() => {
-    const handleRefresh = () => {
-      // Reset sorting columns
-      setSortColumns([]);
-      // Reset selected rows
-      setSelectedRows(new Set());
-      // Refetch data
-      void refetch();
-    };
-    window.addEventListener('refreshUsers', handleRefresh);
-    return () => window.removeEventListener('refreshUsers', handleRefresh);
-  }, [refetch, setSelectedRows]);
-
-  // Clear selection when page changes or search changes
-  useEffect(() => {
-    setSelectedRows(new Set());
-  }, [currentPage, externalSearchQuery, setSelectedRows]);
-
-  // Apply sorting to users data
-  const sortedUsers = useMemo(() => {
-    if (!sortColumns.length) {
-      return users;
-    }
-
-    return [...users].sort((a, b) => {
-      for (const sort of sortColumns) {
-        const { columnKey, direction } = sort;
-        let aVal = a[columnKey as keyof UserSchema];
-        let bVal = b[columnKey as keyof UserSchema];
-
-        // Handle null/undefined values
-        if ((aVal === null || aVal === undefined) && (bVal === null || bVal === undefined)) {
-          continue;
-        }
-        if (aVal === null || aVal === undefined) {
-          return direction === 'ASC' ? -1 : 1;
-        }
-        if (bVal === null || bVal === undefined) {
-          return direction === 'ASC' ? 1 : -1;
-        }
-
-        // Convert to comparable values
-        if (typeof aVal === 'string') {
-          aVal = aVal.toLowerCase();
-        }
-        if (typeof bVal === 'string') {
-          bVal = bVal.toLowerCase();
-        }
-
-        if (aVal < bVal) {
-          return direction === 'ASC' ? -1 : 1;
-        }
-        if (aVal > bVal) {
-          return direction === 'ASC' ? 1 : -1;
-        }
-      }
-      return 0;
-    });
-  }, [users, sortColumns]);
-
-  return (
-    <div className="relative flex-1 flex flex-col overflow-hidden">
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <UsersDataGrid
-          data={sortedUsers}
-          loading={isLoading}
-          selectedRows={selectedRows}
-          onSelectedRowsChange={setSelectedRows}
-          sortColumns={sortColumns}
-          onSortColumnsChange={setSortColumns}
-          currentPage={currentPage}
-          totalPages={totalPages}
-          pageSize={pageSize}
-          totalRecords={totalUsers}
-          onPageChange={setCurrentPage}
-          emptyStateTitle={
-            externalSearchQuery ? 'No users match your search criteria' : 'No users found'
-          }
-        />
-      </div>
-    </div>
-  );
-}