@tscircuit/fake-snippets 0.0.105 → 0.0.107

package/src/components/preview/BuildsList.tsx

@@ -1,16 +1,8 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import {
-  Clock,
-  GitBranch,
-  AlertCircle,
-  CheckCircle,
-  Loader2,
-  MoreHorizontal,
-  GitCommit,
-  Plus,
-} from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { GitBranch, MoreHorizontal, GitCommit } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,217 +17,210 @@ 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 { usePackageReleasesByPackageId } from "@/hooks/use-package-release"
+import { useQueries } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
 
-export const BuildsList = ({
-  pkg,
-  onSelectBuild,
-}: {
-  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>
-
-      <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)
-
-                  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>
-          </div>
-        </CardContent>
-      </Card>
-
-      <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>
-            </div>
-          </CardContent>
-        </Card>
+export const BuildsList = ({ pkg }: { pkg: Package }) => {
+  const { data: releases, isLoading: isLoadingReleases } =
+    usePackageReleasesByPackageId(pkg.package_id)
+  const axios = useAxios()
 
-        <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>
-            </div>
-          </CardContent>
-        </Card>
+  // Get the latest build for each release to show status
+  const latestBuildQueries = useQueries(
+    (releases || [])
+      .filter((release) => release.latest_package_build_id)
+      .map((release) => ({
+        queryKey: ["packageBuild", release.latest_package_build_id],
+        queryFn: async () => {
+          if (!release.latest_package_build_id) return null
+          const { data } = await axios.get("/package_builds/get", {
+            params: { package_build_id: release.latest_package_build_id },
+          })
+          return data.package_build
+        },
+        enabled: Boolean(release.latest_package_build_id),
+        retry: false,
+        refetchOnWindowFocus: false,
+      })),
+  )
 
-        <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>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+  const isLoading =
+    isLoadingReleases || latestBuildQueries.some((q) => q.isLoading)
 
+  // Create a map of release ID to latest build for easy access
+  const latestBuildsMap = new Map()
+  latestBuildQueries.forEach((query, index) => {
+    if (query.data && releases?.[index]) {
+      latestBuildsMap.set(releases[index].package_release_id, query.data)
+    }
+  })
+  return (
+    <>
+      <div className="space-y-6">
         <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>
-                <p className="text-2xl font-bold text-gray-900">
-                  {builds.length}
-                </p>
-              </div>
+          <CardHeader>
+            <CardTitle>Recent Releases</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto [&>div]:no-scrollbar">
+              <Table className="no-scrollbar">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Release ID</TableHead>
+                    <TableHead>Version</TableHead>
+                    <TableHead>Branch/PR</TableHead>
+                    <TableHead>Latest Build</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>
+                      ))
+                    : releases?.map((release) => {
+                        const latestBuild = latestBuildsMap.get(
+                          release.package_release_id,
+                        )
+                        const { status, label } = latestBuild
+                          ? getBuildStatus(latestBuild)
+                          : { status: "unknown", label: "No builds" }
+                        return (
+                          <TableRow
+                            key={release.package_release_id}
+                            className="cursor-pointer hover:bg-gray-50 no-scrollbar"
+                            onClick={() => {
+                              window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                            }}
+                          >
+                            <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">
+                                {release.package_release_id.slice(-8)}
+                              </code>
+                            </TableCell>
+                            <TableCell>
+                              <span className="text-sm font-medium">
+                                {release.version ||
+                                  "v" + release.package_release_id.slice(-6)}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                {release.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">
+                                  {release.is_pr_preview
+                                    ? `#${release.github_pr_number}`
+                                    : "main"}
+                                </Badge>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <div className="max-w-xs">
+                                {latestBuild ? (
+                                  <p className="text-sm text-gray-600">
+                                    {formatTimeAgo(latestBuild.created_at)}
+                                  </p>
+                                ) : (
+                                  <p className="text-sm text-gray-400">
+                                    No builds
+                                  </p>
+                                )}
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <span className="text-sm text-gray-600">
+                                {formatTimeAgo(release.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={() => {
+                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                                      }}
+                                    >
+                                      View Release
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                      onClick={() => {
+                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}/builds`
+                                      }}
+                                    >
+                                      View All Builds
+                                    </DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )
+                      })}
+                </TableBody>
+              </Table>
             </div>
           </CardContent>
         </Card>
       </div>
-    </div>
+    </>
   )
 }

package/src/components/preview/ConnectedPackagesList.tsx

@@ -9,11 +9,12 @@ import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import {
   getBuildStatus,
   getLatestBuildForPackage,
-  MOCK_DEPLOYMENTS,
-  PackageBuild,
+  MOCK_PACKAGE_BUILDS,
   StatusIcon,
 } from "."
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { usePackageBuild } from "@/hooks/use-package-builds"
+import { useLatestPackageRelease } from "@/hooks/use-package-release"
 
 export const ConnectedPackageCardSkeleton = () => {
   return (
@@ -47,6 +48,22 @@ export const ConnectedPackageCardSkeleton = () => {
   )
 }
 
+// Custom hook to get latest package build info
+const useLatestPackageBuildInfo = (packageId: string) => {
+  const { data: latestRelease, isLoading: releaseLoading } =
+    useLatestPackageRelease(packageId)
+  const { data: latestBuild, isLoading: buildLoading } = usePackageBuild(
+    latestRelease?.latest_package_build_id || null,
+  )
+
+  return {
+    data: latestBuild,
+    isLoading:
+      releaseLoading ||
+      (latestRelease?.latest_package_build_id && buildLoading),
+  }
+}
+
 export const ConnectedPackageCard = ({
   pkg,
   className,
@@ -54,8 +71,18 @@ export const ConnectedPackageCard = ({
   pkg: Package
   className?: string
 }) => {
-  const latestBuildInfo: PackageBuild = getLatestBuildForPackage(pkg)
-  const { status, label } = getBuildStatus(latestBuildInfo)
+  const { data: latestBuildInfo, isLoading } = useLatestPackageBuildInfo(
+    pkg.package_id,
+  )
+
+  if (isLoading && !latestBuildInfo) {
+    return <ConnectedPackageCardSkeleton />
+  }
+
+  const { status, label } = latestBuildInfo
+    ? getBuildStatus(latestBuildInfo)
+    : { status: "pending", label: "Pending" }
+
   return (
     <Card
       className={cn(
@@ -75,7 +102,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 +135,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 +156,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 +189,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" />