@tscircuit/fake-snippets 0.0.105 → 0.0.107

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -11,22 +11,30 @@ import {
   ChevronRight,
   User,
   Hash,
+  GitCommit,
 } from "lucide-react"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible"
-import { getBuildStatus, PackageBuild, StatusIcon } from "."
+import { getBuildStatus, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-
-interface ConnectedRepoOverviewProps {
-  build: PackageBuild
-}
+import {
+  Package,
+  PackageBuild,
+  PackageRelease,
+} from "fake-snippets-api/lib/db/schema"
 
 export const ConnectedRepoOverview = ({
   build,
-}: ConnectedRepoOverviewProps) => {
+  pkg,
+  packageRelease,
+}: {
+  build: PackageBuild
+  pkg: Package
+  packageRelease: PackageRelease
+}) => {
   const { status, label } = getBuildStatus(build)
   const [openSections, setOpenSections] = useState({
     transpilation: false,
@@ -52,9 +60,9 @@ export const ConnectedRepoOverview = ({
   }
 
   const getStepStatus = (
-    error: string | null,
-    completed: string | null,
-    inProgress: boolean,
+    error?: string | null,
+    completed?: string | null,
+    inProgress?: boolean,
   ) => {
     if (error) return "error"
     if (completed) return "success"
@@ -63,8 +71,8 @@ export const ConnectedRepoOverview = ({
   }
 
   const getStepDuration = (
-    started: string | null,
-    completed: string | null,
+    started?: string | null,
+    completed?: string | null,
   ) => {
     if (started && completed) {
       const duration = Math.floor(
@@ -85,11 +93,13 @@ export const ConnectedRepoOverview = ({
               <div className="flex-1">
                 <div className="flex flex-col sm:flex-row sm:items-center sm:gap-3">
                   <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
-                    Deployment {label}
+                    Build {label}
                   </h1>
                 </div>
                 <p className="text-sm text-gray-600 mt-1">
-                  Created {formatTimeAgo(build.created_at)}
+                  <time dateTime={build.created_at}>
+                    Built {formatTimeAgo(build.created_at)}
+                  </time>
                 </p>
               </div>
             </div>
@@ -101,7 +111,7 @@ export const ConnectedRepoOverview = ({
                   onClick={() => window.open(build.preview_url!, "_blank")}
                 >
                   <ExternalLink className="w-3 h-3" />
-                  Preview Deployment
+                  Preview
                 </Button>
               )}
             </div>
@@ -119,7 +129,7 @@ export const ConnectedRepoOverview = ({
                 <div className="flex items-center gap-2">
                   <button
                     onClick={() => copyToClipboard(build.package_build_id)}
-                    className="group-hover:text-blue-500 rounded  transition-colors"
+                    className="group-hover:text-blue-500 rounded text-left transition-colors"
                   >
                     {build.package_build_id}
                   </button>
@@ -128,13 +138,21 @@ export const ConnectedRepoOverview = ({
             </div>
 
             <div className="flex items-center gap-3 group">
-              <GitBranch className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
+              {packageRelease?.is_pr_preview ? (
+                <GitBranch className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
+              ) : (
+                <GitCommit className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
+              )}
               <div>
                 <p className="text-xs text-gray-500 uppercase tracking-wide">
-                  Branch
+                  {packageRelease?.is_pr_preview ? "PR" : "Branch"}
                 </p>
                 <a
-                  href={`https://github.com/tscircuit/tscircuit/tree/${build.branch_name || "main"}`}
+                  href={
+                    packageRelease?.is_pr_preview
+                      ? `https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`
+                      : `https://github.com/${pkg.github_repo_full_name}/tree/${build.branch_name || "main"}`
+                  }
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-block"
@@ -143,7 +161,9 @@ export const ConnectedRepoOverview = ({
                     variant="outline"
                     className="text-xs mt-1 hover:bg-gray-100 cursor-pointer transition-colors"
                   >
-                    {build.branch_name || "main"}
+                    {packageRelease?.is_pr_preview
+                      ? `#${packageRelease.github_pr_number}`
+                      : build?.branch_name || "main"}
                   </Badge>
                 </a>
               </div>
@@ -166,22 +186,20 @@ export const ConnectedRepoOverview = ({
               </div>
             </div>
 
-            {buildDuration && (
-              <div className="flex items-center gap-3 group">
-                <Clock className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wide">
-                    Duration
-                  </p>
-                  <p
-                    className="text-sm font-medium hover:text-blue-500 transition-colors cursor-help"
-                    title={`Build started at ${build.build_started_at}`}
-                  >
-                    {buildDuration}s
-                  </p>
-                </div>
+            <div className="flex items-center gap-3 group">
+              <Clock className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
+              <div>
+                <p className="text-xs text-gray-500 uppercase tracking-wide">
+                  Duration
+                </p>
+                <p
+                  className="text-sm font-medium hover:text-blue-500 transition-colors cursor-help"
+                  title={`Build started at ${build.build_started_at}`}
+                >
+                  {buildDuration}s
+                </p>
               </div>
-            )}
+            </div>
           </div>
 
           {build.commit_message && (
@@ -198,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,
-  Settings,
-  List,
-  Github,
-  MoreHorizontal,
-  Zap,
-  Clock,
-  GitBranch,
-  Hash,
-  User,
-  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,
-  PackageBuild,
-  MOCK_DEPLOYMENTS,
-  getPackageFromBuild,
-} from "."
+import { getBuildStatus } from "."
 import { PrefetchPageLink } from "../PrefetchPageLink"
+import { PackageBreadcrumb } from "../PackageBreadcrumb"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
 
-export const ConnectedRepoDashboard = ({
+export const PackageReleasesDashboard = ({
   latestBuild,
+  pkg,
 }: {
-  latestBuild: PackageBuild
+  latestBuild: PackageBuild | null
+  pkg: Package
 }) => {
-  const [activeTab, setActiveTab] = useState("overview")
   const [, setLocation] = useLocation()
-  const pkg = getPackageFromBuild(latestBuild)
-  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 deployed {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">Redeploy</span>
-                  <span className="sm:hidden">Redeploy</span>
-                </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -212,30 +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} />}
-            </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,55 +1,37 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
-export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
-
-export const getBuildStatus = (build: PackageBuild) => {
+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 | null) => {
+  if (!build) {
+    return { status: "pending", label: "No builds" }
+  }
   if (
-    build.build_error ||
-    build.transpilation_error ||
-    build.circuit_json_build_error
+    build?.build_error ||
+    build?.transpilation_error ||
+    build?.circuit_json_build_error
   ) {
     return { status: "error", label: "Failed" }
   }
   if (
-    build.build_in_progress ||
-    build.transpilation_in_progress ||
-    build.circuit_json_build_in_progress
+    build?.build_in_progress ||
+    build?.transpilation_in_progress ||
+    build?.circuit_json_build_in_progress
   ) {
     return { status: "building", label: "Building" }
   }
-  if (build.build_completed_at && build.transpilation_completed_at) {
+  if (build?.build_completed_at && build?.transpilation_completed_at) {
     return { status: "success", label: "Ready" }
   }
   return { status: "queued", label: "Queued" }
 }
 
-export interface PackageBuild {
-  package_build_id: string
-  package_release_id: string | null
-  created_at: string
-  transpilation_in_progress: boolean
-  transpilation_started_at: string | null
-  transpilation_completed_at: string | null
-  transpilation_logs: any[]
-  transpilation_error: string | null
-  circuit_json_build_in_progress: boolean
-  circuit_json_build_started_at: string | null
-  circuit_json_build_completed_at: string | null
-  circuit_json_build_logs: any[]
-  circuit_json_build_error: string | null
-  build_in_progress: boolean
-  build_started_at: string | null
-  build_completed_at: string | null
-  build_error: string | null
-  build_error_last_updated_at: string
-  preview_url: string | null
-  build_logs: string | null
-  branch_name: string | null
-  commit_message: string | null
-  commit_author: string | null
-}
-
-export const MOCK_DEPLOYMENTS: PackageBuild[] = [
+export const MOCK_PACKAGE_BUILDS: PackageBuild[] = [
   {
     package_build_id: "pb_1a2b3c4d",
     package_release_id: "pr_5e6f7g8h",
@@ -191,8 +173,6 @@ export const MOCK_DEPLOYMENTS: PackageBuild[] = [
   },
 ]
 
-import { Package, PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
 export const StatusIcon = ({ status }: { status: string }) => {
   switch (status) {
     case "success":
@@ -207,42 +187,5 @@ export const StatusIcon = ({ status }: { status: string }) => {
 }
 
 export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
-  return MOCK_DEPLOYMENTS[0]
-}
-export const getLatestBuildFromPackageRelease = (
-  pkg: PackageRelease,
-): PackageBuild => {
-  return MOCK_DEPLOYMENTS[0]
-}
-export const getPackageFromBuild = (build: PackageBuild): Package => {
-  return {
-    ai_description: "placeholder ai description",
-    ai_usage_instructions: "placeholder ai usage instructions",
-    created_at: "2025-08-06T14:37:05.802Z",
-    creator_account_id: "account-1234",
-    default_view: "files",
-    description: "placeholder ai description",
-    github_repo_full_name: "testuser/pcb-designs",
-    is_board: false,
-    is_footprint: false,
-    is_model: false,
-    is_package: false,
-    is_private: false,
-    is_public: true,
-    is_snippet: false,
-    is_source_from_github: false,
-    is_unlisted: false,
-    latest_package_release_fs_sha: "md5-425b47ef26be8f0863eca9e63e516dfa",
-    latest_package_release_id: "package_release_1754491026466",
-    latest_version: "0.0.1",
-    license: null,
-    name: "testuser/untitled-package-0",
-    owner_github_username: "testuser",
-    owner_org_id: "org-1234",
-    package_id: "package_1754491025802",
-    star_count: 0,
-    unscoped_name: "untitled-package-0",
-    updated_at: "2025-08-06T14:37:25.083Z",
-    website: "",
-  }
+  return MOCK_PACKAGE_BUILDS[0]
 }

package/src/hooks/use-package-builds.ts

@@ -0,0 +1,87 @@
+import { useQuery } from "react-query"
+import { useAxios } from "./use-axios"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
+
+interface UsePackageBuildsParams {
+  package_id?: string
+  package_release_id?: string
+}
+
+export const usePackageBuilds = (params: UsePackageBuildsParams | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageBuild[], Error & { status: number }>(
+    ["packageBuilds", params],
+    async () => {
+      if (!params || (!params.package_id && !params.package_release_id)) {
+        throw new Error(
+          "Either package_id or package_release_id must be provided",
+        )
+      }
+
+      const { data } = await axios.get<{ package_builds: PackageBuild[] }>(
+        "/package_builds/list",
+        {
+          params: {
+            ...(params.package_id ? { package_id: params.package_id } : {}),
+            ...(params.package_release_id
+              ? { package_release_id: params.package_release_id }
+              : {}),
+          },
+        },
+      )
+
+      if (!data.package_builds) {
+        return []
+      }
+
+      return data.package_builds
+    },
+    {
+      enabled: Boolean(
+        params && (params.package_id || params.package_release_id),
+      ),
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 0,
+    },
+  )
+}
+
+export const usePackageBuildsByPackageId = (packageId: string | null) => {
+  return usePackageBuilds(packageId ? { package_id: packageId } : null)
+}
+
+export const usePackageBuildsByReleaseId = (releaseId?: string | null) => {
+  return usePackageBuilds(releaseId ? { package_release_id: releaseId } : null)
+}
+
+export const usePackageBuild = (packageBuildId: string | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageBuild, Error & { status: number }>(
+    ["packageBuild", packageBuildId],
+    async () => {
+      if (!packageBuildId) {
+        throw new Error("package_build_id is required")
+      }
+
+      const { data } = await axios.get("/package_builds/get", {
+        params: {
+          package_build_id: packageBuildId,
+        },
+      })
+
+      if (!data.package_build) {
+        throw new Error("Package build not found")
+      }
+
+      return data.package_build
+    },
+    {
+      enabled: Boolean(packageBuildId),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+}

package/src/hooks/use-package-release-by-id-or-version.ts

@@ -0,0 +1,36 @@
+import {
+  usePackageReleaseById,
+  usePackageReleaseByNameAndVersion,
+} from "./use-package-release"
+import { isUuid } from "@/lib/utils/isUuid"
+
+export const usePackageReleaseByIdOrVersion = (
+  releaseIdOrVersion: string | null,
+  packageName?: string | null,
+) => {
+  const isReleaseIdUuid = releaseIdOrVersion
+    ? isUuid(releaseIdOrVersion)
+    : false
+
+  // If it's a UUID, use the ID-based hook
+  const releaseByIdQuery = usePackageReleaseById(
+    isReleaseIdUuid ? releaseIdOrVersion : null,
+  )
+
+  // If it's not a UUID and we have a package name, construct the version-based query
+  const packageNameWithVersion =
+    !isReleaseIdUuid && packageName && releaseIdOrVersion
+      ? `${packageName}@${releaseIdOrVersion}`
+      : null
+
+  const releaseByVersionQuery = usePackageReleaseByNameAndVersion(
+    packageNameWithVersion,
+  )
+
+  // Return the appropriate query result
+  if (isReleaseIdUuid) {
+    return releaseByIdQuery
+  } else {
+    return releaseByVersionQuery
+  }
+}

package/src/hooks/use-package-release.ts

@@ -90,3 +90,35 @@ export const useLatestPackageRelease = (
 
   return usePackageRelease(query)
 }
+
+export const usePackageReleasesByPackageId = (packageId: string | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageRelease[], Error & { status: number }>(
+    ["packageReleases", packageId],
+    async () => {
+      if (!packageId) {
+        throw new Error("package_id is required")
+      }
+
+      const { data } = await axios.post<{ package_releases: PackageRelease[] }>(
+        "/package_releases/list",
+        {
+          package_id: packageId,
+        },
+      )
+
+      if (!data.package_releases) {
+        return []
+      }
+
+      return data.package_releases
+    },
+    {
+      enabled: Boolean(packageId),
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 0,
+    },
+  )
+}

package/src/lib/utils/isUuid.ts

@@ -0,0 +1,5 @@
+export function isUuid(value: string): boolean {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+  return uuidRegex.test(value) || value.startsWith("package_release_")
+}