insforge 0.3.3 → 1.2.10

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

@@ -0,0 +1,285 @@
+import { useState, useEffect, useMemo } from 'react';
+import { UserPlus } from 'lucide-react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  ConnectCTA,
+  SearchInput,
+  SelectionClearButton,
+  DeleteActionButton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  ConfirmDialog,
+} from '@/components';
+import { UsersDataGrid, UserFormDialog } from '@/features/auth/components';
+import { SortColumn } from 'react-data-grid';
+import { UserSchema } from '@insforge/shared-schemas';
+import { useToast } from '@/lib/hooks/useToast';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+import {
+  DataUpdatePayload,
+  DataUpdateResourceType,
+  ServerEvents,
+  SocketMessage,
+  useSocket,
+} from '@/lib/contexts/SocketContext';
+
+export default function UsersPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
+
+  const { socket, isConnected } = useSocket();
+
+  const { showToast } = useToast();
+
+  // Default page size of 20 records per page
+  const pageSize = 20;
+  const {
+    users,
+    totalUsers,
+    isLoading,
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    refetch,
+    deleteUsers,
+  } = useUsers({ searchQuery, pageSize });
+
+  // Listen for refresh events
+  useEffect(() => {
+    const handleRefreshEvent = () => {
+      // Reset sorting columns
+      setSortColumns([]);
+      // Reset selected rows
+      setSelectedRows(new Set());
+      // Refetch data
+      void refetch();
+    };
+    window.addEventListener('refreshUsers', handleRefreshEvent);
+    return () => window.removeEventListener('refreshUsers', handleRefreshEvent);
+  }, [refetch]);
+
+  useEffect(() => {
+    if (!socket || !isConnected) {
+      return;
+    }
+
+    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
+      if (message.payload?.resource === DataUpdateResourceType.USERS) {
+        // Refetch data
+        void refetch();
+      }
+    };
+
+    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
+
+    return () => {
+      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
+    };
+  }, [socket, isConnected, refetch]);
+
+  // Clear selection when page changes or search changes
+  useEffect(() => {
+    setSelectedRows(new Set());
+  }, [currentPage, searchQuery]);
+
+  // 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]);
+
+  const handleBulkDelete = async () => {
+    if (selectedRows.size === 0) {
+      return;
+    }
+
+    try {
+      const userIds = Array.from(selectedRows);
+      await 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 handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      setSelectedRows(new Set());
+      setSearchQuery('');
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const emptyState = (
+    <div className="text-sm text-black dark:text-white">
+      {searchQuery ? 'No users match your search criteria' : 'No users found'}. <ConnectCTA />
+    </div>
+  );
+
+  return (
+    <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-y-auto">
+        {/* Page Header with Title and Actions */}
+        <div className="pl-4 pr-1.5 py-1.5 h-12 dark:bg-neutral-800">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <h1 className="text-base font-bold text-black dark:text-white">Users</h1>
+
+              {/* Separator */}
+              <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+              {/* Refresh button */}
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="p-1 h-9 w-9"
+                      onClick={() => void handleRefresh()}
+                      disabled={isRefreshing}
+                    >
+                      <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" align="center">
+                    <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+        </div>
+
+        {/* Search Bar and Actions */}
+        <div className="pt-2 pb-4 px-3 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 user"
+                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 ml-4">
+              {selectedRows.size === 0 && (
+                <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" />
+                  Add User
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="relative flex-1 flex flex-col overflow-hidden">
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <UsersDataGrid
+              data={sortedUsers}
+              loading={isLoading}
+              isRefreshing={isRefreshing}
+              selectedRows={selectedRows}
+              onSelectedRowsChange={setSelectedRows}
+              sortColumns={sortColumns}
+              onSortColumnsChange={setSortColumns}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              pageSize={pageSize}
+              totalRecords={totalUsers}
+              onPageChange={setCurrentPage}
+              emptyState={emptyState}
+            />
+          </div>
+        </div>
+      </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/auth/services/anonToken.service.ts

@@ -0,0 +1,11 @@
+import { apiClient } from '@/lib/api/client';
+
+export class AnonTokenService {
+  async generateAnonToken(): Promise<{ accessToken: string; message: string }> {
+    return apiClient.request('/auth/tokens/anon', {
+      method: 'POST',
+    });
+  }
+}
+
+export const anonTokenService = new AnonTokenService();

package/frontend/src/features/auth/services/config.service.ts

@@ -0,0 +1,19 @@
+import { apiClient } from '@/lib/api/client';
+import { AuthConfigSchema, UpdateAuthConfigRequest } from '@insforge/shared-schemas';
+
+export class AuthConfigService {
+  // Get authentication configuration (admin only)
+  async getConfig(): Promise<AuthConfigSchema> {
+    return apiClient.request('/auth/config');
+  }
+
+  // Update authentication configuration
+  async updateConfig(config: UpdateAuthConfigRequest): Promise<AuthConfigSchema> {
+    return apiClient.request('/auth/config', {
+      method: 'PUT',
+      body: JSON.stringify(config),
+    });
+  }
+}
+
+export const authConfigService = new AuthConfigService();

package/frontend/src/features/auth/services/{oauth.service.ts → oauth-config.service.ts}

@@ -16,7 +16,7 @@ export class OAuthConfigService {
   async getConfigByProvider(
     provider: string
   ): Promise<OAuthConfigSchema & { clientSecret?: string }> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`);
+    return apiClient.request(`/auth/oauth/${provider}/config`);
   }
 
   // Create new OAuth configuration
@@ -32,7 +32,7 @@ export class OAuthConfigService {
     provider: string,
     config: UpdateOAuthConfigRequest
   ): Promise<OAuthConfigSchema> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+    return apiClient.request(`/auth/oauth/${provider}/config`, {
       method: 'PUT',
       body: JSON.stringify(config),
     });
@@ -40,10 +40,10 @@ export class OAuthConfigService {
 
   // Delete OAuth configuration
   async deleteConfig(provider: string): Promise<{ success: boolean; message: string }> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+    return apiClient.request(`/auth/oauth/${provider}/config`, {
       method: 'DELETE',
     });
   }
 }
 
-export const oauthConfigService = new OAuthConfigService();
+export const oAuthConfigService = new OAuthConfigService();

package/frontend/src/features/auth/services/{auth.service.ts → user.service.ts}

@@ -1,52 +1,7 @@
 import { apiClient } from '@/lib/api/client';
 import { UserSchema } from '@insforge/shared-schemas';
 
-export class AuthService {
-  async loginWithPassword(email: string, password: string) {
-    const data = await apiClient.request('/auth/admin/sessions', {
-      method: 'POST',
-      body: JSON.stringify({ email, password }),
-    });
-
-    // Set token in apiClient
-    if (data.accessToken) {
-      apiClient.setToken(data.accessToken);
-    }
-
-    // Return unified format
-    return {
-      accessToken: data.accessToken,
-      user: data.user,
-    };
-  }
-
-  async loginWithAuthorizationCode(code: string) {
-    const data = await apiClient.request('/auth/admin/sessions/exchange', {
-      method: 'POST',
-      body: JSON.stringify({ code }),
-    });
-
-    // Set token in apiClient
-    if (data.accessToken) {
-      apiClient.setToken(data.accessToken);
-    }
-
-    // Return unified format
-    return {
-      accessToken: data.accessToken,
-      user: data.user,
-    };
-  }
-
-  async getCurrentUser() {
-    const response = await apiClient.request('/auth/sessions/current');
-    return response.user;
-  }
-
-  logout() {
-    apiClient.clearToken();
-  }
-
+export class UserService {
   /**
    * Get users list
    * @param queryParams - Query parameters for pagination
@@ -86,6 +41,11 @@ export class AuthService {
     return await apiClient.request(`/auth/users/${id}`);
   }
 
+  async getCurrentUser() {
+    const response = await apiClient.request('/auth/sessions/current');
+    return response.user;
+  }
+
   async register(email: string, password: string, name?: string) {
     const response = await apiClient.request('/auth/users', {
       method: 'POST',
@@ -101,12 +61,6 @@ export class AuthService {
       body: JSON.stringify({ userIds }),
     });
   }
-
-  async generateAnonToken(): Promise<{ accessToken: string; message: string }> {
-    return apiClient.request('/auth/tokens/anon', {
-      method: 'POST',
-    });
-  }
 }
 
-export const authService = new AuthService();
+export const userService = new UserService();

package/frontend/src/features/dashboard/components/ConnectionSuccessBanner.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+
+export function ConnectionSuccessBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="relative w-full bg-zinc-50 dark:bg-[#333333] border-l-3 border-neutral-600 dark:border-emerald-300 rounded-[8px] py-6 px-8">
+      <div className="flex flex-col items-start gap-3">
+        <p className="text-xl font-semibold text-zinc-950 dark:text-white">
+          Connected successfully!
+        </p>
+        <p className="text-sm text-neutral-600 dark:text-neutral-100">
+          InsForge is running in the background — now head to your coding agent and create real
+          products.
+        </p>
+      </div>
+      <button
+        onClick={handleClose}
+        className="flex-shrink-0 absolute right-6 top-0 bottom-0"
+        aria-label="Close banner"
+      >
+        <X className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
+      </button>
+    </div>
+  );
+}

package/frontend/src/features/dashboard/components/PromptCard.tsx

@@ -0,0 +1,21 @@
+import { ChevronRight, LayoutGrid } from 'lucide-react';
+
+interface PromptCardProps {
+  title: string;
+  onClick?: () => void;
+}
+
+export function PromptCard({ title, onClick }: PromptCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded px-6 py-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] transition-all group"
+    >
+      <LayoutGrid className="w-6 h-6 text-zinc-700 dark:text-emerald-400 shrink-0" />
+      <p className="flex-1 text-base text-gray-900 dark:text-white font-normal leading-6 text-left truncate">
+        {title}
+      </p>
+      <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+    </button>
+  );
+}

package/frontend/src/features/dashboard/components/PromptDialog.tsx

@@ -0,0 +1,103 @@
+import { Button, CopyButton, Dialog, DialogContent } from '@/components';
+import { CheckCircle, Lock, Database, HardDrive, Code2, Box } from 'lucide-react';
+import type { PromptTemplate } from '../prompts';
+
+interface PromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  promptTemplate: PromptTemplate | null;
+}
+
+const featureIcons: Record<string, typeof Lock> = {
+  Authentication: Lock,
+  Database: Database,
+  Storage: HardDrive,
+  Functions: Code2,
+  'AI Integration': Box,
+};
+
+export function PromptDialog({ open, onOpenChange, promptTemplate }: PromptDialogProps) {
+  if (!promptTemplate) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] p-0 bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 overflow-y-auto">
+        {/* Content area with border bottom */}
+        <div className="flex flex-col gap-10 p-6 border-b border-gray-200 dark:border-neutral-700">
+          {/* Header and Prompt Section */}
+          <div className="flex flex-col gap-6">
+            {/* Title */}
+            <div className="flex flex-col gap-3">
+              <h2 className="text-2xl font-semibold text-gray-900 dark:text-white tracking-[-0.144px] leading-8">
+                {promptTemplate.title}
+              </h2>
+            </div>
+
+            {/* Prompt Box */}
+            <div className="flex flex-col gap-3">
+              <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                {promptTemplate.description}
+              </p>
+              <div className="bg-gray-50 dark:bg-neutral-900 rounded p-3 h-60 overflow-y-auto relative">
+                {/* Badge only */}
+                <div className="flex items-center justify-between mb-2">
+                  <div className="bg-gray-200 dark:bg-neutral-700 rounded px-2 py-0 inline-flex items-center justify-center">
+                    <span className="text-xs text-gray-900 dark:text-neutral-50 leading-5">
+                      Prompt
+                    </span>
+                  </div>
+                </div>
+                {/* Prompt Text */}
+                <p className="text-sm text-gray-900 dark:text-white leading-6 whitespace-pre-wrap">
+                  {promptTemplate.prompt}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Features Section */}
+          <div className="flex flex-col gap-3">
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              Features included:
+            </p>
+            <div className="flex flex-col gap-1">
+              {promptTemplate.features.map((feature, index) => {
+                const Icon = featureIcons[feature] || Box;
+                return (
+                  <div key={index} className="flex items-center gap-3 h-9 px-2 py-0">
+                    <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                    <Icon className="w-5 h-5 text-gray-500 dark:text-neutral-400 shrink-0" />
+                    <p className="text-sm text-gray-900 dark:text-white font-medium leading-6">
+                      {feature}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2.5 p-3">
+          <Button
+            onClick={() => onOpenChange(false)}
+            variant="secondary"
+            className="h-8 px-3 text-sm font-medium bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600"
+          >
+            Cancel
+          </Button>
+          <CopyButton
+            text={promptTemplate.prompt}
+            showText={true}
+            variant="primary"
+            className="h-8 px-3 text-sm font-medium"
+            copyText="Copy Prompt"
+            copiedText="Copied!"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/dashboard/components/StatsCard.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, Skeleton } from '@/components';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+  icon: LucideIcon;
+  title: string;
+  value: string | number;
+  unit: string;
+  description: string;
+  isLoading?: boolean;
+}
+
+export function StatsCard({
+  icon: Icon,
+  title,
+  value,
+  unit,
+  description,
+  isLoading,
+}: StatsCardProps) {
+  return (
+    <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-full">
+      <CardContent className="px-8 py-6 h-full flex flex-col gap-6">
+        <div className="flex items-center gap-2 h-7">
+          <Icon className="w-5 h-5 text-gray-700 dark:text-neutral-400" />
+          <span className="text-base font-normal text-gray-900 dark:text-white">{title}</span>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {isLoading ? (
+            <Skeleton className="h-8 w-24 bg-gray-200 dark:bg-neutral-700" />
+          ) : (
+            <p className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px] leading-8">
+              {value}{' '}
+              <span className="text-sm font-normal text-gray-500 dark:text-neutral-400 leading-6">
+                {unit}
+              </span>
+            </p>
+          )}
+
+          {isLoading ? (
+            <Skeleton className="h-6 w-32 bg-gray-200 dark:bg-neutral-700" />
+          ) : (
+            <p className="text-base text-gray-500 dark:text-neutral-400 leading-6">{description}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { ConnectionSuccessBanner } from './ConnectionSuccessBanner';
+export { StatsCard } from './StatsCard';
+export { PromptCard } from './PromptCard';
+export { PromptDialog } from './PromptDialog';