@tscircuit/fake-snippets 0.0.104 → 0.0.106

package/src/components/preview/ConnectedRepoDashboard.tsx

@@ -10,15 +10,12 @@ import {
 } from "@/components/ui/dropdown-menu"
 import {
   Activity,
-  Settings,
   List,
   Github,
   MoreHorizontal,
   Zap,
   Clock,
   GitBranch,
-  Hash,
-  User,
   Eye,
 } from "lucide-react"
 import { useLocation } from "wouter"
@@ -26,22 +23,25 @@ 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 {
-  getBuildStatus,
+  Package,
   PackageBuild,
-  MOCK_DEPLOYMENTS,
-  getPackageFromBuild,
-} from "."
-import { PrefetchPageLink } from "../PrefetchPageLink"
+  PackageRelease,
+} from "fake-snippets-api/lib/db/schema"
 
 export const ConnectedRepoDashboard = ({
   latestBuild,
+  pkg,
+  packageRelease,
 }: {
   latestBuild: PackageBuild
+  pkg: Package
+  packageRelease: PackageRelease
 }) => {
   const [activeTab, setActiveTab] = useState("overview")
   const [, setLocation] = useLocation()
-  const pkg = getPackageFromBuild(latestBuild)
   const handleSelectBuild = (build: PackageBuild) => {
     setLocation(`/build/${build.package_build_id}`)
     setActiveTab("overview")
@@ -115,7 +115,7 @@ export const ConnectedRepoDashboard = ({
                       <Clock className="w-4 h-4 flex-shrink-0" />
                       <span>
                         <time dateTime={latestBuild.created_at}>
-                          Last deployed {formatTimeAgo(latestBuild.created_at)}
+                          Last built {formatTimeAgo(latestBuild.created_at)}
                         </time>
                       </span>
                     </div>
@@ -161,8 +161,8 @@ export const ConnectedRepoDashboard = ({
                   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>
+                  <span className="hidden sm:inline">Rebuild</span>
+                  <span className="sm:hidden">Rebuild</span>
                 </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
@@ -229,7 +229,13 @@ export const ConnectedRepoDashboard = ({
             </TabsList>
 
             <TabsContent value="overview" className="space-y-6">
-              {latestBuild && <ConnectedRepoOverview build={latestBuild} />}
+              {latestBuild && (
+                <ConnectedRepoOverview
+                  build={latestBuild}
+                  pkg={pkg}
+                  packageRelease={packageRelease}
+                />
+              )}
             </TabsContent>
 
             <TabsContent value="builds" className="space-y-6">

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 Build
                 </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 && (

package/src/components/preview/index.tsx

@@ -1,54 +1,33 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
 export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
-
+import {
+  Package,
+  PackageBuild,
+  PackageRelease,
+} from "fake-snippets-api/lib/db/schema"
+import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
 export const getBuildStatus = (build: PackageBuild) => {
   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[] = [
   {
     package_build_id: "pb_1a2b3c4d",
@@ -191,8 +170,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":
@@ -209,40 +186,3 @@ 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: "",
-  }
-}

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

@@ -0,0 +1,135 @@
+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,
+    },
+  )
+}
+
+export const useLatestPackageBuild = (
+  params: { package_id?: string; package_release_id?: string } | null,
+) => {
+  const axios = useAxios()
+
+  return useQuery<PackageBuild | null, Error & { status: number }>(
+    ["latestPackageBuild", 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_build: PackageBuild }>(
+        "/package_builds/latest",
+        {
+          params: {
+            ...(params.package_id ? { package_id: params.package_id } : {}),
+            ...(params.package_release_id
+              ? { package_release_id: params.package_release_id }
+              : {}),
+          },
+        },
+      )
+
+      return data.package_build
+    },
+    {
+      enabled: Boolean(
+        params && (params.package_id || params.package_release_id),
+      ),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+}
+
+export const useLatestPackageBuildByPackageId = (packageId: string | null) => {
+  return useLatestPackageBuild(packageId ? { package_id: packageId } : null)
+}
+
+export const useLatestPackageBuildByReleaseId = (releaseId?: string | null) => {
+  return useLatestPackageBuild(
+    releaseId ? { package_release_id: releaseId } : null,
+  )
+}

package/src/pages/view-connected-repo.tsx

@@ -1,18 +1,49 @@
 import { useParams } from "wouter"
 import NotFoundPage from "./404"
-import { ConnectedRepoDashboard, MOCK_DEPLOYMENTS } from "@/components/preview"
+import { ConnectedRepoDashboard } from "@/components/preview"
+import { usePackageBuild } from "@/hooks/use-package-builds"
+import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { usePackageById } from "@/hooks/use-package-by-package-id"
 
 export default function ViewConnectedRepoOverview() {
   const params = useParams<{ buildId: string }>()
-  const buildId = params?.buildId || null
+  const {
+    data: packageBuild,
+    isLoading: isLoadingBuild,
+    error: buildError,
+  } = usePackageBuild(params?.buildId)
+  const {
+    data: packageRelease,
+    isLoading: isLoadingRelease,
+    error: releaseError,
+  } = usePackageReleaseById(packageBuild?.package_release_id)
+  const {
+    data: buildPackage,
+    isLoading: isLoadingPackage,
+    error: packageError,
+  } = usePackageById(String(packageRelease?.package_id))
 
-  const selectedBuild = buildId
-    ? MOCK_DEPLOYMENTS.find((d) => d.package_build_id === buildId)
-    : MOCK_DEPLOYMENTS[0]
+  if (isLoadingBuild || isLoadingRelease || isLoadingPackage) {
+    return null
+  }
 
-  if (!selectedBuild) {
+  if (buildError?.status === 404 || !packageBuild) {
     return <NotFoundPage heading="Build Not Found" />
   }
 
-  return <ConnectedRepoDashboard latestBuild={selectedBuild} />
+  if (releaseError?.status === 404 || !packageRelease) {
+    return <NotFoundPage heading="Package Release Not Found" />
+  }
+
+  if (packageError?.status === 404 || !buildPackage) {
+    return <NotFoundPage heading="Package Not Found" />
+  }
+
+  return (
+    <ConnectedRepoDashboard
+      latestBuild={packageBuild}
+      pkg={buildPackage}
+      packageRelease={packageRelease}
+    />
+  )
 }