insforge 0.3.3 → 1.3.0

package/frontend/src/features/auth/page/AuthenticationPage.tsx

@@ -1,169 +0,0 @@
-import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { UserPlus, Users, Key } from 'lucide-react';
-import { Button, SearchInput, SelectionClearButton, DeleteActionButton } from '@/components';
-import { UsersTab } from '@/features/auth/components/UsersTab';
-import { Tooltip, TooltipContent, TooltipProvider } from '@/components/radix/Tooltip';
-import { UserFormDialog } from '@/features/auth/components/UserFormDialog';
-import { AuthMethodTab } from '@/features/auth/components/AuthMethodTab';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { authService } from '@/features/auth/services/auth.service';
-import { useToast } from '@/lib/hooks/useToast';
-import { cn } from '@/lib/utils/utils';
-import { useUsers } from '@/features/auth/hooks/useUsers';
-
-export default function AuthenticationPage() {
-  const location = useLocation();
-  const [selectedSection, setSelectedSection] = useState<string>(
-    location.state?.initialTab || 'users'
-  );
-  const [searchQuery, setSearchQuery] = useState('');
-  const [addDialogOpen, setAddDialogOpen] = useState(false);
-  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
-  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
-
-  const { showToast } = useToast();
-  const { refetch } = useUsers();
-
-  const handleBulkDelete = async () => {
-    if (selectedRows.size === 0) {
-      return;
-    }
-
-    try {
-      const userIds = Array.from(selectedRows);
-      await authService.deleteUsers(userIds);
-      void refetch();
-      setSelectedRows(new Set());
-      showToast(
-        `${userIds.length} user${userIds.length > 1 ? 's' : ''} deleted successfully`,
-        'success'
-      );
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : 'Failed to delete users', 'error');
-    }
-  };
-
-  const authSections = [
-    {
-      id: 'users',
-      name: 'Users',
-      icon: Users,
-      description: 'Manage user accounts',
-    },
-    {
-      id: 'auth-methods',
-      name: 'Auth Methods',
-      icon: Key,
-      description: 'Configure authentication',
-    },
-  ];
-
-  return (
-    <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
-      {/* Tab Navigation */}
-      <div className="h-12 flex items-center gap-6 px-6 border-b border-border-gray dark:border-neutral-700 relative">
-        {authSections.map((section) => (
-          <button
-            key={section.id}
-            onClick={() => setSelectedSection(section.id)}
-            className={cn(
-              'flex h-full items-center gap-2 px-0 text-base font-semibold transition-colors relative',
-              selectedSection === section.id
-                ? 'text-black dark:text-white'
-                : 'text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300'
-            )}
-          >
-            {section.name}
-            {selectedSection === section.id && (
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-black dark:bg-white" />
-            )}
-          </button>
-        ))}
-      </div>
-
-      {/* Content Area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Users Section Header */}
-        {selectedSection === 'users' && (
-          <div className="px-3 py-4 dark:bg-neutral-800">
-            <div className="flex items-center justify-between">
-              {selectedRows.size > 0 ? (
-                <div className="flex items-center gap-3">
-                  <SelectionClearButton
-                    selectedCount={selectedRows.size}
-                    itemType="user"
-                    onClear={() => setSelectedRows(new Set())}
-                  />
-                  <DeleteActionButton
-                    selectedCount={selectedRows.size}
-                    itemType="user"
-                    onDelete={() => setConfirmDeleteOpen(true)}
-                  />
-                </div>
-              ) : (
-                <SearchInput
-                  value={searchQuery}
-                  onChange={setSearchQuery}
-                  placeholder="Search Users by Name or Email"
-                  className="flex-1 max-w-80 dark:bg-neutral-800 dark:text-white dark:border-neutral-700"
-                  debounceTime={300}
-                />
-              )}
-              <div className="flex items-center gap-2">
-                {selectedRows.size === 0 && (
-                  <>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipContent>
-                          <p>Refresh</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                    <Button
-                      className="h-10 px-4 font-medium dark:bg-emerald-300 dark:text-black"
-                      onClick={() => setAddDialogOpen(true)}
-                    >
-                      <UserPlus className="h-4 w-4 mr-2" />
-                      New User
-                    </Button>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Main Content */}
-
-        {selectedSection === 'users' && (
-          <UsersTab
-            searchQuery={searchQuery}
-            selectedRows={selectedRows}
-            onSelectedRowsChange={setSelectedRows}
-          />
-        )}
-
-        {selectedSection === 'auth-methods' && <AuthMethodTab />}
-      </div>
-
-      <UserFormDialog open={addDialogOpen} onOpenChange={setAddDialogOpen} />
-
-      <ConfirmDialog
-        open={confirmDeleteOpen}
-        onOpenChange={setConfirmDeleteOpen}
-        title={`Delete ${selectedRows.size} ${selectedRows.size === 1 ? 'User' : 'Users'}`}
-        description={
-          <span>
-            Are you sure to <strong>permanently delete {selectedRows.size}</strong>{' '}
-            {selectedRows.size === 1 ? 'user' : 'users'}? This action cannot be undone.
-          </span>
-        }
-        confirmText="Delete"
-        cancelText="Cancel"
-        destructive
-        onConfirm={handleBulkDelete}
-      />
-    </div>
-  );
-}

package/frontend/src/features/dashboard/page/DashboardPage.tsx

@@ -1,194 +0,0 @@
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useMetadata } from '@/features/metadata/hooks/useMetadata';
-import { Skeleton } from '@/components/radix/Skeleton';
-import { Card, CardContent } from '@/components/radix/Card';
-import { Users, Database, HardDrive, ArrowLeftRight, Link2 } from 'lucide-react';
-import { useUsers } from '@/features/auth';
-
-export default function DashboardPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { metadata, auth, tables, storage, isLoading } = useMetadata();
-  const { totalUsers } = useUsers();
-
-  const handleNavigateTo = (to: string, state?: { initialTab?: string }) => {
-    const basePath = location.pathname.includes('/cloud')
-      ? location.pathname.replace('/dashboard', '')
-      : location.pathname;
-    void navigate(`${basePath}/${to}`, { state });
-  };
-
-  const handleConnectInsForge = () => {
-    if (window.parent !== window) {
-      // Send message to parent window to open onboarding overlay
-      window.parent.postMessage(
-        {
-          type: 'SHOW_CONNECT_OVERLAY',
-        },
-        '*'
-      );
-    } else {
-      void handleNavigateTo('onboard');
-    }
-  };
-
-  return (
-    <main className="h-full bg-white dark:bg-neutral-800">
-      <div className="flex justify-center py-6 px-0">
-        <div className="flex flex-col gap-6 w-full max-w-[1080px] px-6">
-          {/* Dashboard Header */}
-          <div className="flex items-center justify-between w-full">
-            <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
-              Dashboard
-            </h1>
-          </div>
-
-          {/* Connect InsForge Card */}
-          <Card className="w-full bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]">
-            <CardContent className="px-8 py-6">
-              <div className="flex items-center justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2">
-                    <Link2 className="w-5 h-5 text-black dark:text-white" />
-                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                      Connect InsForge
-                    </h3>
-                  </div>
-                  <p className="text-sm text-gray-600 dark:text-neutral-400">
-                    With InsForge connected, your agent takes care of the backend for you
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 px-4 py-2 bg-emerald-300 hover:bg-emerald-400 text-black rounded font-medium text-sm transition-colors cursor-pointer"
-                  onClick={handleConnectInsForge}
-                >
-                  <ArrowLeftRight className="w-5 h-5" />
-                  Connect
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Stats Cards */}
-          <div className="flex gap-6 w-full">
-            {/* AUTH Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <Users className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      AUTH
-                    </span>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-16 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(totalUsers || 0).toLocaleString()}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          {totalUsers === 1 ? 'user' : 'users'}
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-36 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {(() => {
-                        const authCount = auth?.oauths.length || 0;
-                        return `${authCount} OAuth ${authCount === 1 ? 'provider' : 'providers'} enabled`;
-                      })()}
-                    </p>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Database Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <Database className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      Database
-                    </span>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(metadata?.database?.totalSize || 0).toFixed(2)}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          GB
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-16 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {tables.length || 0} {tables.length === 1 ? 'Table' : 'Tables'}
-                    </p>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Storage Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <HardDrive className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      Storage
-                    </span>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(storage?.totalSize || 0).toFixed(2)}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          GB
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-20 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {storage?.buckets?.length || 0}{' '}
-                      {storage?.buckets?.length === 1 ? 'Bucket' : 'Buckets'}
-                    </p>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}

package/frontend/src/features/database/hooks/UseLinkModal.tsx

@@ -1,78 +0,0 @@
-import { createContext, useContext, useState, ReactNode } from 'react';
-import type { DatabaseRecord } from '@/components/datagrid';
-
-interface LinkModalState {
-  isOpen: boolean;
-  referenceTable: string | null;
-  referenceColumn: string | null;
-  currentValue: string | null;
-  onSelectRecord: ((record: DatabaseRecord) => void) | null;
-}
-
-interface LinkModalContextType {
-  modalState: LinkModalState;
-  openModal: (config: {
-    referenceTable: string;
-    referenceColumn: string;
-    currentValue?: string | null;
-    onSelectRecord: (record: DatabaseRecord) => void;
-  }) => void;
-  closeModal: () => void;
-}
-
-const LinkModalContext = createContext<LinkModalContextType | undefined>(undefined);
-
-const initialState: LinkModalState = {
-  isOpen: false,
-  referenceTable: null,
-  referenceColumn: null,
-  currentValue: null,
-  onSelectRecord: null,
-};
-
-interface LinkModalProviderProps {
-  children: ReactNode;
-}
-
-export function LinkModalProvider({ children }: LinkModalProviderProps) {
-  const [modalState, setModalState] = useState<LinkModalState>(initialState);
-
-  const openModal = (config: {
-    referenceTable: string;
-    referenceColumn: string;
-    currentValue?: string | null;
-    onSelectRecord: (record: DatabaseRecord) => void;
-  }) => {
-    setModalState({
-      isOpen: true,
-      referenceTable: config.referenceTable,
-      referenceColumn: config.referenceColumn,
-      currentValue: config.currentValue || null,
-      onSelectRecord: config.onSelectRecord,
-    });
-  };
-
-  const closeModal = () => {
-    setModalState(initialState);
-  };
-
-  return (
-    <LinkModalContext.Provider
-      value={{
-        modalState,
-        openModal,
-        closeModal,
-      }}
-    >
-      {children}
-    </LinkModalContext.Provider>
-  );
-}
-
-export function useLinkModal() {
-  const context = useContext(LinkModalContext);
-  if (context === undefined) {
-    throw new Error('useLinkModal must be used within a LinkModalProvider');
-  }
-  return context;
-}

package/frontend/src/features/functions/components/FunctionViewer.tsx

@@ -1,46 +0,0 @@
-interface CodeEditorProps {
-  code: string;
-}
-
-export function CodeEditor({ code }: CodeEditorProps) {
-  // Split code into lines for line numbers
-  const lines = code.split('\n');
-
-  return (
-    <div className="h-full bg-white dark:bg-neutral-900 overflow-auto">
-      <div className="flex min-h-full">
-        {/* Line Numbers */}
-        <div className="flex-shrink-0 bg-gray-50 dark:bg-neutral-800 px-3 py-4 font-mono text-sm text-gray-500 dark:text-gray-400 select-none">
-          {lines.map((_, index) => (
-            <div key={index} className="leading-6 text-right min-w-[2rem]">
-              {index + 1}
-            </div>
-          ))}
-          {/* Extra line numbers for blank lines */}
-          {Array.from({ length: 6 }, (_, i) => (
-            <div key={`extra-${i}`} className="leading-6 text-right min-w-[2rem]">
-              {lines.length + 1 + i}
-            </div>
-          ))}
-        </div>
-
-        {/* Code Area */}
-        <div className="flex-1">
-          <pre className="font-mono text-sm leading-6 p-4 m-0 bg-transparent text-gray-900 dark:text-white">
-            {lines.map((line, index) => (
-              <div key={index} className="min-h-[1.5rem]">
-                {line || <span>&nbsp;</span>}
-              </div>
-            ))}
-            {/* Some blank lines at the end */}
-            {Array.from({ length: 6 }, (_, i) => (
-              <div key={`blank-${i}`} className="min-h-[1.5rem]">
-                &nbsp;
-              </div>
-            ))}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-}

package/frontend/src/features/functions/components/FunctionsContent.tsx

@@ -1,88 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import { Skeleton } from '@/components/radix/Skeleton';
-import { FunctionRow } from './FunctionRow';
-import { CodeEditor } from './FunctionViewer';
-import FunctionEmptyState from './FunctionEmptyState';
-import { useFunctions } from '../hooks/useFunctions';
-import { useToast } from '@/lib/hooks/useToast';
-import { useEffect, useRef } from 'react';
-
-export function FunctionsContent() {
-  const toastShownRef = useRef(false);
-  const { showToast } = useToast();
-  const {
-    functions,
-    isRuntimeAvailable,
-    selectedFunction,
-    isLoading: loading,
-    selectFunction,
-    clearSelection,
-  } = useFunctions();
-
-  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="flex flex-col h-full">
-        <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="flex flex-col gap-6 p-4">
-      <p className="h-7 text-xl text-zinc-950 dark:text-white">Functions</p>
-      <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-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>
-    </div>
-  );
-}

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

@@ -1,28 +0,0 @@
-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';
-
-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'
-    );
-  });
-
-  // Save selected section to localStorage when it changes
-  useEffect(() => {
-    localStorage.setItem('selectedFunctionSection', selectedSection);
-  }, [selectedSection]);
-
-  return (
-    <div className="h-full flex">
-      <FunctionsSidebar selectedSection={selectedSection} onSectionSelect={setSelectedSection} />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {selectedSection === 'functions' ? <FunctionsContent /> : <SecretsContent />}
-      </div>
-    </div>
-  );
-}