insforge 1.2.10 → 1.4.8

package/frontend/src/features/deployments/components/DeploymentRow.tsx

@@ -0,0 +1,93 @@
+import { cn, formatTime } from '@/lib/utils/utils';
+import type { DeploymentSchema } from '../services/deployments.service';
+
+interface DeploymentRowProps {
+  deployment: DeploymentSchema;
+  onClick: () => void;
+  className?: string;
+}
+
+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 function DeploymentRow({ deployment, onClick, className }: DeploymentRowProps) {
+  const statusColor = statusColors[deployment.status] || 'bg-gray-500';
+
+  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">
+        {/* ID Column */}
+        <div className="col-span-3 min-w-0 px-3 py-1.5">
+          <p
+            className="text-sm text-zinc-950 dark:text-white truncate font-mono"
+            title={deployment.id}
+          >
+            {deployment.id}
+          </p>
+        </div>
+
+        {/* Status Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-5 px-2 rounded-sm text-xs font-medium text-white',
+              statusColor
+            )}
+          >
+            {deployment.status}
+          </span>
+        </div>
+
+        {/* Provider Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400 capitalize">
+            {deployment.provider}
+          </span>
+        </div>
+
+        {/* URL Column */}
+        <div className="col-span-3 min-w-0 px-3 py-1.5">
+          {deployment.url ? (
+            <a
+              href={
+                deployment.url.startsWith('http') ? deployment.url : `https://${deployment.url}`
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-600 dark:text-blue-400 hover:underline truncate block"
+              onClick={(e) => e.stopPropagation()}
+              title={deployment.url}
+            >
+              {deployment.url}
+            </a>
+          ) : (
+            <span className="text-sm text-muted-foreground dark:text-neutral-400">—</span>
+          )}
+        </div>
+
+        {/* Created Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-neutral-400 truncate"
+            title={deployment.createdAt}
+          >
+            {formatTime(deployment.createdAt)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/deployments/components/DeploymentsEmptyState.tsx

@@ -0,0 +1,15 @@
+import { Rocket } from 'lucide-react';
+
+export default function DeploymentsEmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Rocket 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 deployments yet</p>
+        <p className="text-neutral-500 dark:text-neutral-400 text-xs">
+          Deployments will appear here when you deploy your application
+        </p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/deployments/hooks/useDeployments.ts

@@ -0,0 +1,157 @@
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { deploymentsService, type DeploymentSchema } from '../services/deployments.service';
+import { useToast } from '@/lib/hooks/useToast';
+import type { StartDeploymentRequest } from '@insforge/shared-schemas';
+
+export function useDeployments() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const [selectedDeployment, setSelectedDeployment] = useState<DeploymentSchema | null>(null);
+
+  // ============================================================================
+  // Pagination State
+  // ============================================================================
+
+  const [paginationParams, setPaginationParams] = useState({
+    limit: 50,
+    offset: 0,
+  });
+
+  // ============================================================================
+  // Deployments Query
+  // ============================================================================
+
+  const {
+    data: deploymentsData,
+    isLoading: isLoadingDeployments,
+    error: deploymentsError,
+    refetch: refetchDeployments,
+  } = useQuery({
+    queryKey: ['deployments', paginationParams],
+    queryFn: () =>
+      deploymentsService.listDeployments(paginationParams.limit, paginationParams.offset),
+    staleTime: 30 * 1000, // 30 seconds - deployments status can change
+  });
+
+  const deployments = deploymentsData?.data ?? [];
+  const totalDeployments = deploymentsData?.pagination?.total ?? 0;
+
+  // ============================================================================
+  // Mutations
+  // ============================================================================
+
+  const createDeploymentMutation = useMutation({
+    mutationFn: () => deploymentsService.createDeployment(),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['deployments'] });
+      showToast('Deployment created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to create deployment', 'error');
+    },
+  });
+
+  const startDeploymentMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data?: StartDeploymentRequest }) =>
+      deploymentsService.startDeployment(id, data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['deployments'] });
+      showToast('Deployment started successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to start deployment', 'error');
+    },
+  });
+
+  const syncDeploymentMutation = useMutation({
+    mutationFn: (id: string) => deploymentsService.syncDeployment(id),
+    onSuccess: (updatedDeployment) => {
+      void queryClient.invalidateQueries({ queryKey: ['deployments'] });
+      // Update selected deployment if it's the one being synced
+      if (selectedDeployment?.id === updatedDeployment.id) {
+        setSelectedDeployment(updatedDeployment);
+      }
+      showToast('Deployment synced successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to sync deployment', 'error');
+    },
+  });
+
+  const cancelDeploymentMutation = useMutation({
+    mutationFn: (id: string) => deploymentsService.cancelDeployment(id),
+    onSuccess: (_, id) => {
+      void queryClient.invalidateQueries({ queryKey: ['deployments'] });
+      showToast('Deployment cancelled successfully', 'success');
+      if (selectedDeployment?.id === id) {
+        setSelectedDeployment(null);
+      }
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to cancel deployment', 'error');
+    },
+  });
+
+  // ============================================================================
+  // Actions
+  // ============================================================================
+
+  const selectDeployment = useCallback((deployment: DeploymentSchema | null) => {
+    setSelectedDeployment(deployment);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedDeployment(null);
+  }, []);
+
+  const setPage = useCallback((page: number) => {
+    setPaginationParams((prev) => ({
+      ...prev,
+      offset: (page - 1) * prev.limit,
+    }));
+  }, []);
+
+  // ============================================================================
+  // Computed Values
+  // ============================================================================
+
+  const deploymentsCount = deployments.length;
+  const pageSize = paginationParams.limit;
+  const currentPage = Math.floor(paginationParams.offset / pageSize) + 1;
+  const totalPages = Math.ceil(totalDeployments / pageSize) || 1;
+
+  return {
+    // Deployments
+    deployments,
+    deploymentsCount,
+    totalDeployments,
+    selectedDeployment,
+    isLoadingDeployments,
+    deploymentsError,
+
+    // Pagination
+    pageSize,
+    currentPage,
+    totalPages,
+    setPage,
+
+    // Loading states
+    isLoading: isLoadingDeployments,
+
+    // Mutations states
+    isCreating: createDeploymentMutation.isPending,
+    isStarting: startDeploymentMutation.isPending,
+    isSyncing: syncDeploymentMutation.isPending,
+    isCancelling: cancelDeploymentMutation.isPending,
+
+    // Actions
+    selectDeployment,
+    clearSelection,
+    createDeployment: createDeploymentMutation.mutateAsync,
+    startDeployment: startDeploymentMutation.mutate,
+    syncDeployment: syncDeploymentMutation.mutate,
+    cancelDeployment: cancelDeploymentMutation.mutate,
+    refetchDeployments,
+  };
+}

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();