insforge 1.3.0 → 1.4.8

package/frontend/src/features/deployments/pages/DeploymentsPage.tsx

@@ -0,0 +1,318 @@
+import { useState } from 'react';
+import { ChevronRight, ExternalLink } from 'lucide-react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  ConfirmDialog,
+  PaginationControls,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useDeployments } from '../hooks/useDeployments';
+import { DeploymentRow } from '../components/DeploymentRow';
+import DeploymentsEmptyState from '../components/DeploymentsEmptyState';
+import type { DeploymentSchema } from '../services/deployments.service';
+import { formatTime } from '@/lib/utils/utils';
+
+const statusColors: Record<string, string> = {
+  WAITING: 'bg-yellow-600',
+  UPLOADING: 'bg-blue-600',
+  QUEUED: 'bg-purple-600',
+  BUILDING: 'bg-sky-600',
+  READY: 'bg-green-600',
+  ERROR: 'bg-red-600',
+  CANCELED: 'bg-gray-500',
+};
+
+export default function DeploymentsPage() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedDeployment, setSelectedDeployment] = useState<DeploymentSchema | null>(null);
+
+  const { confirm, confirmDialogProps } = useConfirm();
+
+  const {
+    deployments,
+    totalDeployments,
+    isLoadingDeployments,
+    refetchDeployments,
+    syncDeployment,
+    cancelDeployment,
+    isSyncing,
+    isCancelling,
+    pageSize,
+    currentPage,
+    totalPages,
+    setPage,
+  } = useDeployments();
+
+  const handlePageChange = (page: number) => {
+    setPage(page);
+  };
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetchDeployments();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleSync = (id: string) => {
+    syncDeployment(id);
+  };
+
+  const handleCancel = async (id: string) => {
+    const shouldCancel = await confirm({
+      title: 'Cancel Deployment',
+      description: 'Are you sure you want to cancel this deployment? This action cannot be undone.',
+      confirmText: 'Confirm',
+      cancelText: 'Dismiss',
+      destructive: true,
+    });
+
+    if (shouldCancel) {
+      cancelDeployment(id);
+      setSelectedDeployment(null);
+    }
+  };
+
+  // Deployment detail view
+  if (selectedDeployment) {
+    const statusColor = statusColors[selectedDeployment.status] || 'bg-gray-500';
+    const canCancel = ['WAITING', 'UPLOADING', 'QUEUED', 'BUILDING'].includes(
+      selectedDeployment.status
+    );
+    const canSync = !!selectedDeployment.providerDeploymentId;
+
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        <div className="flex items-center justify-between gap-2.5 p-4 border-b border-border-gray dark:border-neutral-600">
+          <div className="flex items-center gap-2.5">
+            <button
+              onClick={() => setSelectedDeployment(null)}
+              className="text-xl text-zinc-500 dark:text-neutral-400 hover:text-zinc-950 dark:hover:text-white transition-colors"
+            >
+              Deployments
+            </button>
+            <ChevronRight className="w-5 h-5 text-muted-foreground dark:text-neutral-400" />
+            <p className="text-xl text-zinc-950 dark:text-white font-mono">
+              {selectedDeployment.id}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {canSync && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => handleSync(selectedDeployment.id)}
+                disabled={isSyncing}
+              >
+                {isSyncing ? 'Syncing...' : 'Sync Status'}
+              </Button>
+            )}
+            {canCancel && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => void handleCancel(selectedDeployment.id)}
+                disabled={isCancelling}
+              >
+                {isCancelling ? 'Cancelling...' : 'Cancel'}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 p-4 overflow-auto">
+          <div className="space-y-4">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">ID</p>
+                <p className="text-sm text-zinc-950 dark:text-white font-mono break-all">
+                  {selectedDeployment.id}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Status</p>
+                <span
+                  className={`inline-flex items-center justify-center h-5 px-2 rounded-sm text-xs font-medium text-white ${statusColor}`}
+                >
+                  {selectedDeployment.status}
+                </span>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Provider</p>
+                <p className="text-sm text-zinc-950 dark:text-white capitalize">
+                  {selectedDeployment.provider}
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  Provider Deployment ID
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white font-mono break-all">
+                  {selectedDeployment.providerDeploymentId || '—'}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Created</p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {formatTime(selectedDeployment.createdAt)}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Updated</p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {formatTime(selectedDeployment.updatedAt)}
+                </p>
+              </div>
+            </div>
+
+            {selectedDeployment.url && (
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-2">URL</p>
+                <a
+                  href={
+                    selectedDeployment.url.startsWith('http')
+                      ? selectedDeployment.url
+                      : `https://${selectedDeployment.url}`
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
+                >
+                  {selectedDeployment.url}
+                  <ExternalLink className="w-3 h-3" />
+                </a>
+              </div>
+            )}
+
+            {selectedDeployment.metadata && Object.keys(selectedDeployment.metadata).length > 0 && (
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-2">Metadata</p>
+                <pre className="text-sm text-zinc-950 dark:text-white font-mono whitespace-pre-wrap overflow-auto">
+                  {JSON.stringify(selectedDeployment.metadata, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <ConfirmDialog {...confirmDialogProps} />
+      </div>
+    );
+  }
+
+  // Default list view
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Fixed Page Header */}
+      <div className="shrink-0 flex flex-col gap-1 p-4 pb-0">
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Deployments</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>
+        <p className="text-sm text-muted-foreground dark:text-neutral-400">
+          Ship your app to live in seconds with just one prompt.{' '}
+          <a
+            href="https://docs.insforge.dev/core-concepts/deployments/architecture"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 dark:text-blue-400 hover:underline"
+          >
+            Learn more
+          </a>
+        </p>
+      </div>
+
+      {/* Fixed Table Header */}
+      <div className="shrink-0 grid grid-cols-12 px-7 pt-6 pb-2 text-sm text-muted-foreground dark:text-neutral-400">
+        <div className="col-span-3 py-1 px-3">ID</div>
+        <div className="col-span-2 py-1 px-3">Status</div>
+        <div className="col-span-2 py-1 px-3">Provider</div>
+        <div className="col-span-3 py-1 px-3">URL</div>
+        <div className="col-span-2 py-1 px-3">Created</div>
+      </div>
+
+      {/* Scrollable Content Area */}
+      <div className="flex-1 min-h-0 overflow-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
+          {isLoadingDeployments ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px]" />
+              ))}
+            </>
+          ) : deployments.length > 0 ? (
+            <>
+              {deployments.map((deployment) => (
+                <DeploymentRow
+                  key={deployment.id}
+                  deployment={deployment}
+                  onClick={() => setSelectedDeployment(deployment)}
+                />
+              ))}
+            </>
+          ) : (
+            <DeploymentsEmptyState />
+          )}
+        </div>
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {deployments.length > 0 && (
+        <div className="shrink-0">
+          <PaginationControls
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            totalRecords={totalDeployments}
+            pageSize={pageSize}
+            recordLabel="deployments"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { apiClient } from '@/lib/api/client';
+import type {
+  DeploymentSchema,
+  CreateDeploymentResponse,
+  StartDeploymentRequest,
+  ListDeploymentsResponse,
+} from '@insforge/shared-schemas';
+
+export type { DeploymentSchema, CreateDeploymentResponse, ListDeploymentsResponse };
+
+export class DeploymentsService {
+  // ============================================================================
+  // Deployments
+  // ============================================================================
+
+  async listDeployments(limit = 50, offset = 0): Promise<ListDeploymentsResponse> {
+    const searchParams = new URLSearchParams();
+    searchParams.set('limit', String(limit));
+    searchParams.set('offset', String(offset));
+
+    const query = searchParams.toString();
+    return apiClient.request(`/deployments?${query}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getDeployment(id: string): Promise<DeploymentSchema> {
+    return apiClient.request(`/deployments/${id}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async createDeployment(): Promise<CreateDeploymentResponse> {
+    return apiClient.request('/deployments', {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async startDeployment(id: string, data?: StartDeploymentRequest): Promise<DeploymentSchema> {
+    return apiClient.request(`/deployments/${id}/start`, {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+      body: data ? JSON.stringify(data) : undefined,
+    });
+  }
+
+  async syncDeployment(id: string): Promise<DeploymentSchema> {
+    return apiClient.request(`/deployments/${id}/sync`, {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async cancelDeployment(id: string): Promise<void> {
+    return apiClient.request(`/deployments/${id}/cancel`, {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const deploymentsService = new DeploymentsService();

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

@@ -1,72 +1,72 @@
-import { CopyButton } from '@/components/CopyButton';
-import { type EdgeFunction } from '../services/function.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
-              variant="secondary"
-              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>
-  );
-}
+import { CopyButton } from '@/components/CopyButton';
+import { FunctionSchema } from '@insforge/shared-schemas';
+import { cn, getBackendUrl } from '@/lib/utils/utils';
+import { format, formatDistance } from 'date-fns';
+interface FunctionRowProps {
+  function: FunctionSchema;
+  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
+              variant="secondary"
+              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.createdAt}
+          >
+            {format(new Date(func.createdAt), '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.deployedAt ?? ''}
+          >
+            {func.deployedAt
+              ? formatDistance(new Date(func.deployedAt), new Date(), { addSuffix: true })
+              : 'Never'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,56 +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 font-bold text-zinc-950 dark:text-white">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>
-  );
-}
+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 font-bold text-zinc-950 dark:text-white">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/SecretRow.tsx

@@ -1,12 +1,12 @@
 import { Trash2 } from 'lucide-react';
 import { Button } from '@/components/radix/Button';
-import { type Secret } from '@/features/functions/services/secret.service';
+import { SecretSchema } from '@insforge/shared-schemas';
 import { cn } from '@/lib/utils/utils';
 import { formatDistance } from 'date-fns';
 
 interface SecretRowProps {
-  secret: Secret;
-  onDelete: (secret: Secret) => void;
+  secret: SecretSchema;
+  onDelete: (secret: SecretSchema) => void;
   className?: string;
 }
 

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

@@ -1,5 +1,5 @@
-export { default as FunctionEmptyState } from './FunctionEmptyState';
-export { FunctionRow } from './FunctionRow';
-export { FunctionsSidebar } from './FunctionsSidebar';
-export { default as SecretEmptyState } from './SecretEmptyState';
-export { SecretRow } from './SecretRow';
+export { default as FunctionEmptyState } from './FunctionEmptyState';
+export { FunctionRow } from './FunctionRow';
+export { FunctionsSidebar } from './FunctionsSidebar';
+export { default as SecretEmptyState } from './SecretEmptyState';
+export { SecretRow } from './SecretRow';