@tscircuit/fake-snippets 0.0.104 → 0.0.106

package/src/components/preview/BuildsList.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
 import {
   Clock,
   GitBranch,
@@ -9,7 +10,6 @@ import {
   Loader2,
   MoreHorizontal,
   GitCommit,
-  Plus,
 } from "lucide-react"
 import {
   DropdownMenu,
@@ -25,9 +25,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
+import { getBuildStatus, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { usePackageBuilds } from "@/hooks/use-package-builds"
+import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { useQueries } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
 
 export const BuildsList = ({
   pkg,
@@ -36,206 +40,281 @@ export const BuildsList = ({
   pkg: Package
   onSelectBuild?: (build: PackageBuild) => void
 }) => {
-  const builds = MOCK_DEPLOYMENTS
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
-          <p className="text-gray-600">Manage and monitor your builds</p>
-        </div>
-      </div>
+  const { data: builds, isLoading } = usePackageBuilds({
+    package_id: pkg.package_id,
+  })
+  const axios = useAxios()
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Recent Deployments</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Build ID</TableHead>
-                  <TableHead>Branch</TableHead>
-                  <TableHead>Commit</TableHead>
-                  <TableHead>Author</TableHead>
-                  <TableHead>Created</TableHead>
-                  <TableHead>Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {builds.map((build) => {
-                  const { status, label } = getBuildStatus(build)
+  const uniqueReleaseIds = [
+    ...new Set(
+      builds?.map((build) => build.package_release_id).filter(Boolean) || [],
+    ),
+  ]
 
-                  return (
-                    <TableRow
-                      key={build.package_build_id}
-                      className="cursor-pointer hover:bg-gray-50"
-                      onClick={() => onSelectBuild?.(build)}
-                    >
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          <StatusIcon status={status} />
-                          <Badge
-                            variant={
-                              status === "success"
-                                ? "default"
-                                : status === "error"
-                                  ? "destructive"
-                                  : "secondary"
-                            }
-                            className="text-xs"
-                          >
-                            {label}
-                          </Badge>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <code className="text-sm bg-gray-100 px-2 py-1 rounded">
-                          {build.package_build_id.slice(-8)}
-                        </code>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          {build.branch_name?.includes("/") ? (
-                            <GitBranch className="w-3 h-3 text-gray-500" />
-                          ) : (
-                            <GitCommit className="w-3 h-3 text-gray-500" />
-                          )}
-                          <Badge variant="outline" className="text-xs">
-                            {build.branch_name || "main"}
-                          </Badge>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="max-w-xs">
-                          <p className="text-sm font-medium truncate">
-                            {build.commit_message || "No commit message"}
-                          </p>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-gray-600">
-                          {build.commit_author || "Unknown"}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-gray-600">
-                          {formatTimeAgo(build.created_at)}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                <MoreHorizontal className="w-3 h-3" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() => onSelectBuild?.(build)}
-                              >
-                                View Details
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={() => onSelectBuild?.(build)}
-                              >
-                                View Logs
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })}
-              </TableBody>
-            </Table>
+  const packageReleaseQueries = useQueries(
+    uniqueReleaseIds.map((releaseId) => ({
+      queryKey: ["packageRelease", { package_release_id: releaseId }],
+      queryFn: async () => {
+        const { data } = await axios.post("/package_releases/get", {
+          package_release_id: releaseId,
+        })
+        return data.package_release
+      },
+      enabled: Boolean(releaseId),
+      retry: false,
+      refetchOnWindowFocus: false,
+    })),
+  )
+
+  const packageReleasesMap = new Map()
+  packageReleaseQueries.forEach((query, index) => {
+    if (query.data) {
+      packageReleasesMap.set(uniqueReleaseIds[index], query.data)
+    }
+  })
+  return (
+    <>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
+            <p className="text-gray-600">Manage and monitor your builds</p>
           </div>
-        </CardContent>
-      </Card>
+        </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
         <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-green-100 rounded-lg">
-                <CheckCircle className="w-5 h-5 text-green-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Successful</p>
-                <p className="text-2xl font-bold text-gray-900">
-                  {
-                    builds.filter((d) => getBuildStatus(d).status === "success")
-                      .length
-                  }
-                </p>
-              </div>
+          <CardHeader>
+            <CardTitle>Recent Deployments</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto [&>div]:no-scrollbar">
+              <Table className="no-scrollbar">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Build ID</TableHead>
+                    <TableHead>Branch/PR</TableHead>
+                    <TableHead>Commit</TableHead>
+                    <TableHead>Author</TableHead>
+                    <TableHead>Created</TableHead>
+                    <TableHead>Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isLoading
+                    ? Array.from({ length: 3 }).map((_, i) => (
+                        <TableRow key={i}>
+                          <TableCell>
+                            <Skeleton className="h-6 w-20" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-16" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-12" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-32" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-20" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-16" />
+                          </TableCell>
+                          <TableCell>
+                            <Skeleton className="h-6 w-8" />
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    : builds?.map((build) => {
+                        const { status, label } = getBuildStatus(build)
+                        const packageRelease = packageReleasesMap.get(
+                          build.package_release_id,
+                        )
+                        return (
+                          <TableRow
+                            key={build.package_build_id}
+                            className="cursor-pointer hover:bg-gray-50 no-scrollbar"
+                            onClick={() => onSelectBuild?.(build)}
+                          >
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                <StatusIcon status={status} />
+                                <Badge
+                                  variant={
+                                    status === "success"
+                                      ? "default"
+                                      : status === "error"
+                                        ? "destructive"
+                                        : "secondary"
+                                  }
+                                  className="text-xs"
+                                >
+                                  {label}
+                                </Badge>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <code className="text-sm bg-gray-100 px-2 py-1 rounded">
+                                {build.package_build_id.slice(-8)}
+                              </code>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                {packageRelease?.is_pr_preview ? (
+                                  <GitBranch className="w-3 h-3 text-gray-500" />
+                                ) : (
+                                  <GitCommit className="w-3 h-3 text-gray-500" />
+                                )}
+                                <Badge variant="outline" className="text-xs">
+                                  {packageRelease?.is_pr_preview
+                                    ? `#${packageRelease.github_pr_number}`
+                                    : packageRelease?.branch_name || "main"}
+                                </Badge>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <div className="max-w-xs">
+                                <p className="text-sm font-medium truncate">
+                                  {build.commit_message || "No commit message"}
+                                </p>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <span className="text-sm text-gray-600">
+                                {build.commit_author || "Unknown"}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <span className="text-sm text-gray-600">
+                                {formatTimeAgo(build.created_at)}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      <MoreHorizontal className="w-3 h-3" />
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                      onClick={() => onSelectBuild?.(build)}
+                                    >
+                                      View Details
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                      onClick={() => onSelectBuild?.(build)}
+                                    >
+                                      View Logs
+                                    </DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )
+                      })}
+                </TableBody>
+              </Table>
             </div>
           </CardContent>
         </Card>
 
-        <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-red-100 rounded-lg">
-                <AlertCircle className="w-5 h-5 text-red-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Failed</p>
-                <p className="text-2xl font-bold text-gray-900">
-                  {
-                    builds.filter((d) => getBuildStatus(d).status === "error")
-                      .length
-                  }
-                </p>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-green-100 rounded-lg">
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Successful</p>
+                  {isLoading ? (
+                    <Skeleton className="h-8 w-8" />
+                  ) : (
+                    <p className="text-2xl font-bold text-gray-900">
+                      {builds?.filter(
+                        (d) => getBuildStatus(d).status === "success",
+                      ).length || 0}
+                    </p>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-blue-100 rounded-lg">
-                <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Building</p>
-                <p className="text-2xl font-bold text-gray-900">
-                  {
-                    builds.filter(
-                      (d) => getBuildStatus(d).status === "building",
-                    ).length
-                  }
-                </p>
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-red-100 rounded-lg">
+                  <AlertCircle className="w-5 h-5 text-red-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Failed</p>
+                  {isLoading ? (
+                    <Skeleton className="h-8 w-8" />
+                  ) : (
+                    <p className="text-2xl font-bold text-gray-900">
+                      {builds?.filter(
+                        (d) => getBuildStatus(d).status === "error",
+                      ).length || 0}
+                    </p>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-gray-100 rounded-lg">
-                <Clock className="w-5 h-5 text-gray-600" />
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-blue-100 rounded-lg">
+                  <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Building</p>
+                  {isLoading ? (
+                    <Skeleton className="h-8 w-8" />
+                  ) : (
+                    <p className="text-2xl font-bold text-gray-900">
+                      {builds?.filter(
+                        (d) => getBuildStatus(d).status === "building",
+                      ).length || 0}
+                    </p>
+                  )}
+                </div>
               </div>
-              <div>
-                <p className="text-sm text-gray-600">Total</p>
-                <p className="text-2xl font-bold text-gray-900">
-                  {builds.length}
-                </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-gray-100 rounded-lg">
+                  <Clock className="w-5 h-5 text-gray-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Total</p>
+                  {isLoading ? (
+                    <Skeleton className="h-8 w-8" />
+                  ) : (
+                    <p className="text-2xl font-bold text-gray-900">
+                      {builds?.length || 0}
+                    </p>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </div>
       </div>
-    </div>
+    </>
   )
 }

package/src/components/preview/ConnectedPackagesList.tsx

@@ -10,10 +10,10 @@ import {
   getBuildStatus,
   getLatestBuildForPackage,
   MOCK_DEPLOYMENTS,
-  PackageBuild,
   StatusIcon,
 } from "."
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { useLatestPackageBuild } from "@/hooks/use-package-builds"
 
 export const ConnectedPackageCardSkeleton = () => {
   return (
@@ -54,8 +54,18 @@ export const ConnectedPackageCard = ({
   pkg: Package
   className?: string
 }) => {
-  const latestBuildInfo: PackageBuild = getLatestBuildForPackage(pkg)
-  const { status, label } = getBuildStatus(latestBuildInfo)
+  const { data: latestBuildInfo, isLoading } = useLatestPackageBuild({
+    package_id: pkg.package_id,
+  })
+
+  if (isLoading && !latestBuildInfo) {
+    return <ConnectedPackageCardSkeleton />
+  }
+
+  const { status, label } = latestBuildInfo
+    ? getBuildStatus(latestBuildInfo)
+    : { status: "pending", label: "Pending" }
+
   return (
     <Card
       className={cn(
@@ -75,7 +85,7 @@ export const ConnectedPackageCard = ({
             href="#"
             className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
           >
-            tsc-deploy
+            {pkg.unscoped_name}
           </a>
         </div>
 
@@ -108,7 +118,7 @@ export const ConnectedPackageCard = ({
         </a>
       </div>
 
-      {latestBuildInfo.commit_message && (
+      {latestBuildInfo?.commit_message && (
         <div className="mb-6 flex-1">
           <h4
             title={latestBuildInfo.commit_message}
@@ -129,27 +139,31 @@ export const ConnectedPackageCard = ({
       )}
 
       <div className="flex gap-2 w-full mt-auto">
-        <PrefetchPageLink
-          className="w-full"
-          href={`/build/${latestBuildInfo.package_build_id}`}
-        >
-          <Button
-            size="sm"
-            className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
-          >
-            View
-          </Button>
-        </PrefetchPageLink>
-        {latestBuildInfo.preview_url && status === "success" && (
+        {latestBuildInfo?.package_build_id && (
           <PrefetchPageLink
             className="w-full"
-            href={`/build/${latestBuildInfo.package_build_id}/preview`}
+            href={`/build/${latestBuildInfo.package_build_id}`}
           >
-            <Button size="sm" variant="outline" className="px-4 py-2 w-full">
-              Preview
+            <Button
+              size="sm"
+              className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
+            >
+              View
             </Button>
           </PrefetchPageLink>
         )}
+        {latestBuildInfo?.preview_url &&
+          latestBuildInfo?.package_build_id &&
+          status === "success" && (
+            <PrefetchPageLink
+              className="w-full"
+              href={`/build/${latestBuildInfo.package_build_id}/preview`}
+            >
+              <Button size="sm" variant="outline" className="px-4 py-2 w-full">
+                Preview
+              </Button>
+            </PrefetchPageLink>
+          )}
       </div>
     </Card>
   )
@@ -158,9 +172,7 @@ export const ConnectedPackageCard = ({
 export const ConnectedPackagesList = ({
   packages,
 }: { packages: Package[] }) => {
-  const [pkgs, setpkgs] = useState(MOCK_DEPLOYMENTS)
-
-  if (pkgs.length === 0) {
+  if (packages.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-20 text-black">
         <Rocket className="w-12 h-12 mb-4 text-black" />