@tscircuit/fake-snippets 0.0.106 → 0.0.107

package/src/components/preview/BuildsList.tsx

@@ -2,15 +2,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,
-  AlertCircle,
-  CheckCircle,
-  Loader2,
-  MoreHorizontal,
-  GitCommit,
-} from "lucide-react"
+import { GitBranch, MoreHorizontal, GitCommit } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,64 +19,51 @@ import {
 } from "@/components/ui/table"
 import { getBuildStatus, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-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 { 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 { data: builds, isLoading } = usePackageBuilds({
-    package_id: pkg.package_id,
-  })
+export const BuildsList = ({ pkg }: { pkg: Package }) => {
+  const { data: releases, isLoading: isLoadingReleases } =
+    usePackageReleasesByPackageId(pkg.package_id)
   const axios = useAxios()
 
-  const uniqueReleaseIds = [
-    ...new Set(
-      builds?.map((build) => build.package_release_id).filter(Boolean) || [],
-    ),
-  ]
-
-  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,
-    })),
+  // 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,
+      })),
   )
 
-  const packageReleasesMap = new Map()
-  packageReleaseQueries.forEach((query, index) => {
-    if (query.data) {
-      packageReleasesMap.set(uniqueReleaseIds[index], query.data)
+  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">
-        <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>
+            <CardTitle>Recent Releases</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="overflow-x-auto [&>div]:no-scrollbar">
@@ -92,10 +71,10 @@ export const BuildsList = ({
                 <TableHeader>
                   <TableRow>
                     <TableHead>Status</TableHead>
-                    <TableHead>Build ID</TableHead>
+                    <TableHead>Release ID</TableHead>
+                    <TableHead>Version</TableHead>
                     <TableHead>Branch/PR</TableHead>
-                    <TableHead>Commit</TableHead>
-                    <TableHead>Author</TableHead>
+                    <TableHead>Latest Build</TableHead>
                     <TableHead>Created</TableHead>
                     <TableHead>Actions</TableHead>
                   </TableRow>
@@ -127,16 +106,20 @@ export const BuildsList = ({
                           </TableCell>
                         </TableRow>
                       ))
-                    : builds?.map((build) => {
-                        const { status, label } = getBuildStatus(build)
-                        const packageRelease = packageReleasesMap.get(
-                          build.package_release_id,
+                    : 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={build.package_build_id}
+                            key={release.package_release_id}
                             className="cursor-pointer hover:bg-gray-50 no-scrollbar"
-                            onClick={() => onSelectBuild?.(build)}
+                            onClick={() => {
+                              window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                            }}
                           >
                             <TableCell>
                               <div className="flex items-center gap-2">
@@ -157,38 +140,45 @@ export const BuildsList = ({
                             </TableCell>
                             <TableCell>
                               <code className="text-sm bg-gray-100 px-2 py-1 rounded">
-                                {build.package_build_id.slice(-8)}
+                                {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">
-                                {packageRelease?.is_pr_preview ? (
+                                {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">
-                                  {packageRelease?.is_pr_preview
-                                    ? `#${packageRelease.github_pr_number}`
-                                    : packageRelease?.branch_name || "main"}
+                                  {release.is_pr_preview
+                                    ? `#${release.github_pr_number}`
+                                    : "main"}
                                 </Badge>
                               </div>
                             </TableCell>
                             <TableCell>
                               <div className="max-w-xs">
-                                <p className="text-sm font-medium truncate">
-                                  {build.commit_message || "No commit message"}
-                                </p>
+                                {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">
-                                {build.commit_author || "Unknown"}
-                              </span>
-                            </TableCell>
-                            <TableCell>
-                              <span className="text-sm text-gray-600">
-                                {formatTimeAgo(build.created_at)}
+                                {formatTimeAgo(release.created_at)}
                               </span>
                             </TableCell>
                             <TableCell>
@@ -205,14 +195,18 @@ export const BuildsList = ({
                                   </DropdownMenuTrigger>
                                   <DropdownMenuContent align="end">
                                     <DropdownMenuItem
-                                      onClick={() => onSelectBuild?.(build)}
+                                      onClick={() => {
+                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                                      }}
                                     >
-                                      View Details
+                                      View Release
                                     </DropdownMenuItem>
                                     <DropdownMenuItem
-                                      onClick={() => onSelectBuild?.(build)}
+                                      onClick={() => {
+                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}/builds`
+                                      }}
                                     >
-                                      View Logs
+                                      View All Builds
                                     </DropdownMenuItem>
                                   </DropdownMenuContent>
                                 </DropdownMenu>
@@ -226,94 +220,6 @@ export const BuildsList = ({
             </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>
-                  {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>
-            </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>
-                  {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>
-            </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>
-                  {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>
-            </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>
-            </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,
+  MOCK_PACKAGE_BUILDS,
   StatusIcon,
 } from "."
 import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
-import { useLatestPackageBuild } from "@/hooks/use-package-builds"
+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,9 +71,9 @@ export const ConnectedPackageCard = ({
   pkg: Package
   className?: string
 }) => {
-  const { data: latestBuildInfo, isLoading } = useLatestPackageBuild({
-    package_id: pkg.package_id,
-  })
+  const { data: latestBuildInfo, isLoading } = useLatestPackageBuildInfo(
+    pkg.package_id,
+  )
 
   if (isLoading && !latestBuildInfo) {
     return <ConnectedPackageCardSkeleton />

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -111,7 +111,7 @@ export const ConnectedRepoOverview = ({
                   onClick={() => window.open(build.preview_url!, "_blank")}
                 >
                   <ExternalLink className="w-3 h-3" />
-                  Preview Build
+                  Preview
                 </Button>
               )}
             </div>
@@ -216,7 +216,17 @@ export const ConnectedRepoOverview = ({
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold text-gray-900">Logs</h2>
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-900">
+            Latest Build Logs
+          </h2>
+          <a
+            href={`/${pkg.name.split("/")[0]}/${pkg.name.split("/")[1]}/release/${packageRelease.package_release_id}/builds`}
+            className="text-sm text-blue-600 hover:text-blue-800 transition-colors"
+          >
+            (previous builds)
+          </a>
+        </div>
 
         <Collapsible
           open={openSections.transpilation}

package/src/components/preview/{ConnectedRepoDashboard.tsx → PackageReleasesDashboard.tsx}

@@ -1,57 +1,44 @@
-import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import {
-  Activity,
-  List,
-  Github,
-  MoreHorizontal,
-  Zap,
-  Clock,
-  GitBranch,
-  Eye,
-} from "lucide-react"
+import { MoreHorizontal, Clock, GitBranch, Eye } from "lucide-react"
+import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import { useLocation } from "wouter"
-import { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 import { BuildsList } from "./BuildsList"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus } from "."
 import { PrefetchPageLink } from "../PrefetchPageLink"
-import {
-  Package,
-  PackageBuild,
-  PackageRelease,
-} from "fake-snippets-api/lib/db/schema"
+import { PackageBreadcrumb } from "../PackageBreadcrumb"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
 
-export const ConnectedRepoDashboard = ({
+export const PackageReleasesDashboard = ({
   latestBuild,
   pkg,
-  packageRelease,
 }: {
-  latestBuild: PackageBuild
+  latestBuild: PackageBuild | null
   pkg: Package
-  packageRelease: PackageRelease
 }) => {
-  const [activeTab, setActiveTab] = useState("overview")
   const [, setLocation] = useLocation()
-  const handleSelectBuild = (build: PackageBuild) => {
-    setLocation(`/build/${build.package_build_id}`)
-    setActiveTab("overview")
-  }
   const { status, label } = getBuildStatus(latestBuild)
 
   return (
     <>
       <Header />
       <div className="min-h-screen bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4">
+          <PackageBreadcrumb
+            author={pkg.name.split("/")[0]}
+            packageName={pkg.name}
+            unscopedName={pkg.unscoped_name}
+            currentPage="releases"
+          />
+        </div>
         {/* Project Header */}
         <div className="bg-gray-50 border-b md:py-10">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -70,7 +57,7 @@ export const ConnectedRepoDashboard = ({
                       href={"/" + pkg.name}
                       className="text-2xl font-bold text-gray-900 truncate"
                     >
-                      {pkg.unscoped_name}
+                      {pkg.name}
                     </PrefetchPageLink>
                     <Badge
                       variant={
@@ -101,22 +88,26 @@ export const ConnectedRepoDashboard = ({
                       className="flex cursor-pointer items-center gap-1"
                       onClick={() =>
                         window?.open(
-                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestBuild.branch_name || "main"}`,
+                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestBuild?.branch_name || "main"}`,
                           "_blank",
                         )
                       }
                     >
                       <GitBranch className="w-4 h-4 flex-shrink-0" />
                       <span className="truncate">
-                        {latestBuild.branch_name || "main"}
+                        {latestBuild?.branch_name || "main"}
                       </span>
                     </div>
                     <div className="flex items-center gap-1">
                       <Clock className="w-4 h-4 flex-shrink-0" />
                       <span>
-                        <time dateTime={latestBuild.created_at}>
-                          Last built {formatTimeAgo(latestBuild.created_at)}
-                        </time>
+                        {latestBuild?.created_at ? (
+                          <time dateTime={latestBuild.created_at}>
+                            Last built {formatTimeAgo(latestBuild.created_at)}
+                          </time>
+                        ) : (
+                          "No builds yet"
+                        )}
                       </span>
                     </div>
                   </div>
@@ -135,18 +126,18 @@ export const ConnectedRepoDashboard = ({
                     )
                   }
                 >
-                  <Github className="w-4 h-4" />
+                  <GitHubLogoIcon className="w-4 h-4" />
                   <span className="hidden sm:inline">Repository</span>
                   <span className="sm:hidden">Repository</span>
                 </Button>
-                {latestBuild.preview_url && (
+                {latestBuild?.preview_url && (
                   <Button
                     variant="outline"
                     size="sm"
                     className="flex items-center gap-2 justify-center min-w-[120px] h-9"
                     onClick={() =>
                       window.open(
-                        `/build/${latestBuild.package_build_id}/preview`,
+                        `/build/${latestBuild?.package_build_id}/preview`,
                         "_blank",
                       )
                     }
@@ -156,14 +147,6 @@ export const ConnectedRepoDashboard = ({
                     <span className="sm:hidden">Preview</span>
                   </Button>
                 )}
-                <Button
-                  size="sm"
-                  className="flex items-center gap-2 justify-center min-w-[120px] h-9 bg-black text-white"
-                >
-                  <Zap className="w-4 h-4" />
-                  <span className="hidden sm:inline">Rebuild</span>
-                  <span className="sm:hidden">Rebuild</span>
-                </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -212,36 +195,9 @@ export const ConnectedRepoDashboard = ({
 
         {/* Main Content */}
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <Tabs
-            value={activeTab}
-            onValueChange={setActiveTab}
-            className="space-y-6"
-          >
-            <TabsList className="grid w-full grid-cols-2 lg:w-auto lg:grid-cols-2">
-              <TabsTrigger value="overview" className="flex items-center gap-2">
-                <Activity className="w-4 h-4" />
-                Overview
-              </TabsTrigger>
-              <TabsTrigger value="builds" className="flex items-center gap-2">
-                <List className="w-4 h-4" />
-                Builds
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="overview" className="space-y-6">
-              {latestBuild && (
-                <ConnectedRepoOverview
-                  build={latestBuild}
-                  pkg={pkg}
-                  packageRelease={packageRelease}
-                />
-              )}
-            </TabsContent>
-
-            <TabsContent value="builds" className="space-y-6">
-              <BuildsList pkg={pkg} onSelectBuild={handleSelectBuild} />
-            </TabsContent>
-          </Tabs>
+          <div className="space-y-6">
+            <BuildsList pkg={pkg} />
+          </div>
         </div>
       </div>
     </>

package/src/components/preview/index.tsx

@@ -1,13 +1,16 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
-export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
+export { PackageReleasesDashboard } from "./PackageReleasesDashboard"
 import {
   Package,
   PackageBuild,
   PackageRelease,
 } from "fake-snippets-api/lib/db/schema"
 import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
-export const getBuildStatus = (build: PackageBuild) => {
+export const getBuildStatus = (build: PackageBuild | null) => {
+  if (!build) {
+    return { status: "pending", label: "No builds" }
+  }
   if (
     build?.build_error ||
     build?.transpilation_error ||
@@ -28,7 +31,7 @@ export const getBuildStatus = (build: PackageBuild) => {
   return { status: "queued", label: "Queued" }
 }
 
-export const MOCK_DEPLOYMENTS: PackageBuild[] = [
+export const MOCK_PACKAGE_BUILDS: PackageBuild[] = [
   {
     package_build_id: "pb_1a2b3c4d",
     package_release_id: "pr_5e6f7g8h",
@@ -184,5 +187,5 @@ export const StatusIcon = ({ status }: { status: string }) => {
 }
 
 export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
-  return MOCK_DEPLOYMENTS[0]
+  return MOCK_PACKAGE_BUILDS[0]
 }