insforge 0.3.1

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

@@ -0,0 +1,216 @@
+import { ConvertedValue } from '@/components/datagrid/datagridTypes';
+import { apiClient } from '@/lib/api/client';
+import {
+  ColumnSchema,
+  GetTableSchemaResponse,
+  CreateTableRequest,
+  UpdateTableSchemaResponse,
+  UpdateTableSchemaRequest,
+} from '@insforge/shared-schemas';
+
+export class DatabaseService {
+  // Table operations
+  async listTables(): Promise<string[]> {
+    const data = await apiClient.request('/database/tables', {
+      headers: apiClient.withAccessToken(),
+    });
+    // data is already unwrapped by request method and should be an array
+    return Array.isArray(data) ? data : [];
+  }
+
+  getTableSchema(tableName: string): Promise<GetTableSchemaResponse> {
+    return apiClient.request(`/database/tables/${tableName}/schema`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  createTable(tableName: string, columns: ColumnSchema[]) {
+    const body: CreateTableRequest = { tableName: tableName, columns, rlsEnabled: true };
+    return apiClient.request('/database/tables', {
+      method: 'POST',
+      headers: apiClient.withAccessToken({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(body),
+    });
+  }
+
+  deleteTable(tableName: string) {
+    return apiClient.request(`/database/tables/${tableName}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  updateTableSchema(
+    tableName: string,
+    operations: UpdateTableSchemaRequest
+  ): Promise<UpdateTableSchemaResponse | void> {
+    return apiClient.request(`/database/tables/${tableName}/schema`, {
+      method: 'PATCH',
+      headers: apiClient.withAccessToken({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(operations),
+    });
+  }
+
+  // Record operations
+  /**
+   * Data fetching method with built-in search, sorting, and pagination for UI components.
+   *
+   * @param tableName - Name of the table
+   * @param limit - Number of records to fetch
+   * @param offset - Number of records to skip
+   * @param searchQuery - Search term to filter text columns
+   * @param sortColumns - Sorting configuration
+   * @returns Structured response with records and pagination info
+   */
+  async getTableRecords(
+    tableName: string,
+    limit = 10,
+    offset = 0,
+    searchQuery?: string,
+    sortColumns?: { columnKey: string; direction: string }[]
+  ) {
+    const params = new URLSearchParams();
+    params.set('limit', limit.toString());
+    params.set('offset', offset.toString());
+
+    // Construct PostgREST filter directly in frontend if search query is provided
+    if (searchQuery && searchQuery.trim()) {
+      const searchValue = searchQuery.trim();
+
+      // Get table schema to identify text columns
+      const schema = await this.getTableSchema(tableName);
+      const textColumns = schema.columns
+        .filter((col: ColumnSchema) => {
+          const type = col.type.toLowerCase();
+          return type === 'string';
+        })
+        .map((col: ColumnSchema) => col.columnName);
+
+      if (textColumns.length > 0) {
+        // Create PostgREST OR filter for text columns
+        const orFilters = textColumns
+          .map((column: string) => `${column}.ilike.*${searchValue}*`)
+          .join(',');
+        params.set('or', `(${orFilters})`);
+      }
+    }
+
+    // Add sorting if provided - PostgREST uses "order" parameter
+    if (sortColumns && sortColumns.length > 0) {
+      const orderParam = sortColumns
+        .map((col) => `${col.columnKey}.${col.direction.toLowerCase()}`)
+        .join(',');
+      params.set('order', orderParam);
+    }
+
+    const response: {
+      data: { [key: string]: ConvertedValue }[];
+      pagination: { offset: number; limit: number; total: number };
+    } = await apiClient.request(`/database/records/${tableName}?${params.toString()}`, {
+      headers: {
+        Prefer: 'count=exact',
+      },
+    });
+
+    return {
+      records: response.data,
+      pagination: response.pagination,
+    };
+  }
+
+  /**
+   * Get a single record by foreign key value.
+   * Specifically designed for foreign key lookups.
+   *
+   * @param tableName - Name of the table to search in
+   * @param columnName - Name of the column to filter by
+   * @param value - Value to match
+   * @returns Single record or null if not found
+   */
+  async getRecordByForeignKeyValue(tableName: string, columnName: string, value: string) {
+    const queryParams = `${columnName}=eq.${encodeURIComponent(value)}&limit=1`;
+    const response = await this.getRecords(tableName, queryParams);
+
+    // Return the first record if found, or null if not found
+    if (response.records && response.records.length > 0) {
+      return response.records[0];
+    }
+    return null;
+  }
+
+  async getRecords(tableName: string, queryParams: string = '') {
+    const url = `/database/records/${tableName}${queryParams ? `?${queryParams}` : ''}`;
+    const response = await apiClient.request(url, {
+      headers: apiClient.withAccessToken(),
+    });
+
+    // Traditional REST: check if response is array (direct data) or wrapped
+    if (Array.isArray(response)) {
+      return {
+        records: response,
+        total: response.length,
+      };
+    }
+
+    // If backend returns wrapped format for this endpoint
+    if (response.data && Array.isArray(response.data)) {
+      return {
+        records: response.data,
+        total: response.data.length,
+      };
+    }
+
+    return {
+      records: response,
+      total: response.length,
+    };
+  }
+
+  createRecords(table: string, records: { [key: string]: ConvertedValue }[]) {
+    // if data is json and data[id] == "" then remove id from data, because can't assign '' to uuid
+    records = records.map((record) => {
+      if (typeof record === 'object' && record.id === '') {
+        delete record.id;
+      }
+      return record;
+    });
+    return apiClient.request(`/database/records/${table}`, {
+      method: 'POST',
+      headers: apiClient.withAccessToken({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(records),
+    });
+  }
+
+  createRecord(table: string, data: { [key: string]: ConvertedValue }) {
+    if (typeof data === 'object' && data.id === '') {
+      // can't assign '' to uuid, so we need to remove it
+      delete data.id;
+    }
+    return this.createRecords(table, [data]);
+  }
+
+  updateRecord(table: string, id: string, data: { [key: string]: ConvertedValue }) {
+    return apiClient.request(`/database/records/${table}?id=eq.${id}`, {
+      method: 'PATCH',
+      headers: apiClient.withAccessToken({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(data),
+    });
+  }
+
+  deleteRecord(table: string, id: string) {
+    return apiClient.request(`/database/records/${table}?id=eq.${id}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const databaseService = new DatabaseService();

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

@@ -0,0 +1,15 @@
+import { Code2 } from 'lucide-react';
+
+export default function FunctionEmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Code2 size={40} className="text-neutral-400 dark:text-neutral-600" />
+      <div className="flex flex-col items-center justify-center gap-1">
+        <p className="text-sm font-medium text-zinc-950 dark:text-white">No functions available</p>
+        <p className="text-neutral-500 dark:text-neutral-400 text-xs">
+          No edge functions have been created yet
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { CopyButton } from '@/components/CopyButton';
+import { type EdgeFunction } from '../services/functions.service';
+import { cn, getBackendUrl } from '@/lib/utils/utils';
+import { format, formatDistance } from 'date-fns';
+interface FunctionRowProps {
+  function: EdgeFunction;
+  onClick: () => void;
+  className?: string;
+}
+
+export function FunctionRow({ function: func, onClick, className }: FunctionRowProps) {
+  const functionUrl = `${getBackendUrl()}/functions/${func.slug}`;
+
+  return (
+    <div
+      className={cn(
+        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="grid grid-cols-12 h-full items-center">
+        {/* Name Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <p className="text-sm text-zinc-950 dark:text-white truncate" title={func.name}>
+            {func.name}
+          </p>
+        </div>
+
+        {/* URL Column */}
+        <div className="col-span-6 min-w-0 px-3 py-1.5">
+          <div className="flex items-center gap-3">
+            <span
+              className="text-sm text-muted-foreground dark:text-white truncate"
+              title={functionUrl}
+            >
+              {functionUrl}
+            </span>
+            <CopyButton
+              showText={false}
+              text={functionUrl}
+              className="h-7 w-7 dark:hover:bg-neutral-500 dark:data-[copied=true]:group-hover:bg-neutral-700 dark:data-[copied=true]:hover:bg-neutral-700"
+            />
+          </div>
+        </div>
+
+        {/* Created Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-white truncate"
+            title={func.created_at}
+          >
+            {format(new Date(func.created_at), 'MMM dd, yyyy HH:mm')}
+          </span>
+        </div>
+
+        {/* Last Update Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-white truncate"
+            title={func.deployed_at}
+          >
+            {func.deployed_at
+              ? formatDistance(new Date(func.deployed_at), new Date(), { addSuffix: true })
+              : 'Never'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,88 @@
+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/components/FunctionsSidebar.tsx

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils/utils';
+import { useFunctions } from '../hooks/useFunctions';
+
+interface FunctionsSidebarProps {
+  selectedSection: 'functions' | 'secrets';
+  onSectionSelect: (section: 'functions' | 'secrets') => void;
+}
+
+export function FunctionsSidebar({ selectedSection, onSectionSelect }: FunctionsSidebarProps) {
+  const { clearSelection } = useFunctions();
+  const sections = [
+    {
+      id: 'functions' as const,
+      name: 'Functions',
+    },
+    {
+      id: 'secrets' as const,
+      name: 'Secrets',
+    },
+  ];
+
+  return (
+    <div className="w-60 px-3 py-4 flex flex-col h-full bg-white dark:bg-neutral-800 border-r border-border-gray dark:border-neutral-700">
+      <div className="mb-4 w-full">
+        <p className="text-base text-zinc-950 dark:text-neutral-400">Edge Functions</p>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <div className="space-y-2">
+          {sections.map((section) => {
+            const isSelected = selectedSection === section.id;
+
+            return (
+              <button
+                key={section.id}
+                onClick={() => {
+                  if (section.id === 'functions') {
+                    clearSelection();
+                  }
+                  onSectionSelect(section.id);
+                }}
+                className={cn(
+                  'h-9 w-full flex items-center justify-between pl-3 py-1 pr-1 rounded text-left transition-colors',
+                  isSelected
+                    ? 'bg-zinc-100 dark:bg-neutral-700 text-zinc-950 dark:text-white'
+                    : 'hover:bg-zinc-50 dark:hover:bg-neutral-700/50 text-zinc-700 dark:text-zinc-300'
+                )}
+              >
+                <p className="text-sm text-zinc-950 dark:text-white">{section.name}</p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Key } from 'lucide-react';
+
+interface SecretEmptyStateProps {
+  searchQuery: string;
+}
+
+export default function SecretEmptyState({ searchQuery }: SecretEmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Key className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+      <div className="flex flex-col items-center justify-center gap-1">
+        <p className="text-sm font-medium text-zinc-950 dark:text-white">
+          {searchQuery ? 'No matching secrets found' : 'No secrets configured'}
+        </p>
+        <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+          {searchQuery
+            ? 'Try adjusting your search terms'
+            : 'Create environment variables for your edge functions'}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { Trash2 } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { type Secret } from '@/features/secrets/services/secrets.service';
+import { cn } from '@/lib/utils/utils';
+import { formatDistance } from 'date-fns';
+
+interface SecretRowProps {
+  secret: Secret;
+  onDelete: (secret: Secret) => void;
+  className?: string;
+}
+
+export function SecretRow({ secret, onDelete, className }: SecretRowProps) {
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete(secret);
+  };
+
+  return (
+    <div
+      className={cn(
+        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all',
+        className
+      )}
+    >
+      <div className="grid grid-cols-12 h-full items-center">
+        {/* Name Column */}
+        <div className="col-span-8 min-w-0 px-3 py-1.5">
+          <p
+            className="text-sm text-zinc-950 dark:text-white truncate font-medium"
+            title={secret.key}
+          >
+            {secret.key}
+          </p>
+        </div>
+
+        {/* Digest Column */}
+        {/* <div className="col-span-5 min-w-0 px-3 py-1.5">
+          <span className="text-sm text-zinc-950 dark:text-white font-mono truncate">
+          </span>
+        </div> */}
+
+        {/* Updated at Column */}
+        <div className="col-span-3 px-3 py-1.5">
+          <span className="text-sm text-zinc-950 dark:text-white truncate">
+            {secret.updatedAt
+              ? formatDistance(new Date(secret.updatedAt), new Date(), { addSuffix: true })
+              : 'Never'}
+          </span>
+        </div>
+
+        {/* Delete Button Column */}
+        <div className="col-span-1 flex justify-end px-3 py-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDeleteClick}
+            disabled={secret.isReserved}
+            className="h-7 w-7 p-1 text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-white hover:bg-neutral-200 dark:hover:bg-neutral-600"
+            title={secret.isReserved ? 'Cannot delete reserved secrets' : 'Delete secret'}
+          >
+            <Trash2 className="w-5 h-5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}