@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -27,34 +27,109 @@ import {
 } from "fake-snippets-api/lib/db/schema"
 
 export const ConnectedRepoOverview = ({
-  build,
+  packageBuild,
   pkg,
+  isLoadingBuild,
   packageRelease,
 }: {
-  build: PackageBuild
+  packageBuild?: PackageBuild | null
+  isLoadingBuild: boolean
   pkg: Package
   packageRelease: PackageRelease
 }) => {
-  const { status, label } = getBuildStatus(build)
+  const { status, label } = getBuildStatus(packageBuild ?? null)
   const [openSections, setOpenSections] = useState({
     transpilation: false,
     circuitJson: false,
-    finalBuild: false,
   })
 
+  // Gracefully handle when there is no build yet
+  if (isLoadingBuild) {
+    return (
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 focus:outline-none">
+        <div className="bg-white border border-gray-200 rounded-lg">
+          <div className="px-6 py-6 border-b border-gray-200">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div className="flex items-center gap-4">
+                <div className="w-6 h-6 rounded-full bg-gray-200 animate-pulse" />
+                <div className="flex-1 space-y-2">
+                  <div className="h-7 w-32 bg-gray-200 rounded animate-pulse" />
+                  <div className="h-4 w-24 bg-gray-200 rounded animate-pulse" />
+                </div>
+              </div>
+              <div className="w-24 h-9 bg-gray-200 rounded animate-pulse" />
+            </div>
+          </div>
+          <div className="px-6 py-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {Array(4)
+                .fill(0)
+                .map((_, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <div className="w-4 h-4 rounded bg-gray-200 animate-pulse" />
+                    <div className="space-y-2">
+                      <div className="h-4 w-20 bg-gray-200 rounded animate-pulse" />
+                      <div className="h-5 w-24 bg-gray-200 rounded animate-pulse" />
+                    </div>
+                  </div>
+                ))}
+            </div>
+            <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+              <div className="h-4 w-32 bg-gray-200 rounded animate-pulse mb-2" />
+              <div className="h-5 w-full bg-gray-200 rounded animate-pulse" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!packageBuild) {
+    return (
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="bg-white border border-gray-200 rounded-lg p-6 text-center">
+          <p className="text-sm text-gray-600">
+            No build information available.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text)
   }
 
-  const buildDuration =
-    build.build_started_at && build.build_completed_at
+  const buildDuration = (() => {
+    const transpilationDuration = packageBuild?.transpilation_started_at
       ? Math.floor(
-          (new Date(build.build_completed_at).getTime() -
-            new Date(build.build_started_at).getTime()) /
+          (new Date(
+            packageBuild.transpilation_completed_at || new Date(),
+          ).getTime() -
+            new Date(packageBuild.transpilation_started_at).getTime()) /
             1000,
         )
-      : null
+      : 0
 
+    const circuitJsonDuration = packageBuild?.circuit_json_build_started_at
+      ? Math.floor(
+          (new Date(
+            packageBuild.circuit_json_build_completed_at || new Date(),
+          ).getTime() -
+            new Date(packageBuild.circuit_json_build_started_at).getTime()) /
+            1000,
+        )
+      : 0
+
+    if (
+      !packageBuild?.transpilation_started_at &&
+      !packageBuild?.circuit_json_build_started_at
+    ) {
+      return null
+    }
+
+    return transpilationDuration + circuitJsonDuration
+  })()
   const toggleSection = (section: keyof typeof openSections) => {
     setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }))
   }
@@ -97,28 +172,33 @@ export const ConnectedRepoOverview = ({
                   </h1>
                 </div>
                 <p className="text-sm text-gray-600 mt-1">
-                  <time dateTime={build.created_at}>
-                    Built {formatTimeAgo(build.created_at)}
+                  <time dateTime={packageBuild.created_at}>
+                    Built {formatTimeAgo(packageBuild.created_at)}
                   </time>
                 </p>
               </div>
             </div>
             <div className="flex items-center gap-3 flex-shrink-0">
-              {build.preview_url && (
+              {status !== "error" && (
                 <Button
                   size="sm"
                   className="flex items-center gap-2 min-w-[80px] h-9"
-                  onClick={() => window.open(build.preview_url!, "_blank")}
+                  onClick={() =>
+                    window.open(
+                      `/${pkg.name}/releases/${packageBuild.package_release_id}/preview`,
+                      "_blank",
+                    )
+                  }
                 >
                   <ExternalLink className="w-3 h-3" />
-                  Preview Build
+                  Preview
                 </Button>
               )}
             </div>
           </div>
         </div>
 
-        <div className="px-6 py-4">
+        <div className="px-6 py-4 select-none">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             <div className="flex items-center gap-3 group">
               <Hash className="w-4 h-4 text-gray-500 group-hover:text-blue-500 transition-colors" />
@@ -128,10 +208,12 @@ export const ConnectedRepoOverview = ({
                 </p>
                 <div className="flex items-center gap-2">
                   <button
-                    onClick={() => copyToClipboard(build.package_build_id)}
-                    className="group-hover:text-blue-500 rounded text-left transition-colors"
+                    onClick={() =>
+                      copyToClipboard(packageBuild.package_build_id)
+                    }
+                    className="group-hover:text-blue-500 text-xs rounded text-left transition-colors"
                   >
-                    {build.package_build_id}
+                    {packageBuild.package_build_id}
                   </button>
                 </div>
               </div>
@@ -150,8 +232,8 @@ export const ConnectedRepoOverview = ({
                 <a
                   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"}`
+                      ? `https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease?.github_pr_number}`
+                      : `https://github.com/${pkg.github_repo_full_name}/tree/${packageRelease?.branch_name || "main"}`
                   }
                   target="_blank"
                   rel="noopener noreferrer"
@@ -163,7 +245,7 @@ export const ConnectedRepoOverview = ({
                   >
                     {packageRelease?.is_pr_preview
                       ? `#${packageRelease.github_pr_number}`
-                      : build?.branch_name || "main"}
+                      : packageRelease?.branch_name || "main"}
                   </Badge>
                 </a>
               </div>
@@ -176,12 +258,12 @@ export const ConnectedRepoOverview = ({
                   Author
                 </p>
                 <a
-                  href={`https://github.com/${build.commit_author}`}
+                  href={`https://github.com/${pkg.owner_github_username}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-sm font-medium hover:text-blue-500 transition-colors"
                 >
-                  {build.commit_author || "Unknown"}
+                  {pkg.owner_github_username || "Unknown"}
                 </a>
               </div>
             </div>
@@ -194,21 +276,21 @@ export const ConnectedRepoOverview = ({
                 </p>
                 <p
                   className="text-sm font-medium hover:text-blue-500 transition-colors cursor-help"
-                  title={`Build started at ${build.build_started_at}`}
+                  title={`Build started at ${packageBuild.build_started_at}`}
                 >
-                  {buildDuration}s
+                  {buildDuration || 0}s
                 </p>
               </div>
             </div>
           </div>
 
-          {build.commit_message && (
+          {packageRelease?.commit_message && (
             <div className="mt-6 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group">
               <p className="text-xs text-gray-500 uppercase tracking-wide mb-2">
                 Commit Message
               </p>
               <p className="text-sm text-gray-900 group-hover:text-gray-700 transition-colors">
-                {build.commit_message}
+                {packageRelease?.commit_message}
               </p>
             </div>
           )}
@@ -216,7 +298,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]}/releases/${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}
@@ -228,11 +320,11 @@ export const ConnectedRepoOverview = ({
                 <ChevronRight
                   className={`w-4 h-4 transition-transform ${openSections.transpilation ? "rotate-90" : ""}`}
                 />
-                {build.transpilation_error ? (
+                {packageBuild.transpilation_error ? (
                   <AlertCircle className="w-5 h-5 text-red-500" />
-                ) : build.transpilation_completed_at ? (
+                ) : packageBuild.transpilation_completed_at ? (
                   <CheckCircle className="w-5 h-5 text-green-500" />
-                ) : build.transpilation_in_progress ? (
+                ) : packageBuild.transpilation_in_progress ? (
                   <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
                 ) : (
                   <Clock className="w-5 h-5 text-gray-400" />
@@ -241,39 +333,39 @@ export const ConnectedRepoOverview = ({
               </div>
               <div className="flex items-center gap-2">
                 {getStepDuration(
-                  build.transpilation_started_at,
-                  build.transpilation_completed_at,
+                  packageBuild.transpilation_started_at,
+                  packageBuild.transpilation_completed_at,
                 ) && (
                   <span className="text-sm text-gray-600">
                     {getStepDuration(
-                      build.transpilation_started_at,
-                      build.transpilation_completed_at,
+                      packageBuild.transpilation_started_at,
+                      packageBuild.transpilation_completed_at,
                     )}
                   </span>
                 )}
                 <Badge
                   variant={
                     getStepStatus(
-                      build.transpilation_error,
-                      build.transpilation_completed_at,
-                      build.transpilation_in_progress,
+                      packageBuild.transpilation_error,
+                      packageBuild.transpilation_completed_at,
+                      packageBuild.transpilation_in_progress,
                     ) === "success"
                       ? "default"
                       : getStepStatus(
-                            build.transpilation_error,
-                            build.transpilation_completed_at,
-                            build.transpilation_in_progress,
+                            packageBuild.transpilation_error,
+                            packageBuild.transpilation_completed_at,
+                            packageBuild.transpilation_in_progress,
                           ) === "error"
                         ? "destructive"
                         : "secondary"
                   }
                   className="text-xs"
                 >
-                  {build.transpilation_error
+                  {packageBuild.transpilation_error
                     ? "Failed"
-                    : build.transpilation_completed_at
+                    : packageBuild.transpilation_completed_at
                       ? "Completed"
-                      : build.transpilation_in_progress
+                      : packageBuild.transpilation_in_progress
                         ? "Running"
                         : "Queued"}
                 </Badge>
@@ -283,13 +375,13 @@ export const ConnectedRepoOverview = ({
           <CollapsibleContent>
             <div className="bg-white border-x border-b border-gray-200 rounded-b-lg p-4">
               <div className="font-mono text-xs space-y-1">
-                {build.transpilation_error ? (
+                {packageBuild.transpilation_error ? (
                   <div className="text-red-600 whitespace-pre-wrap">
-                    {build.transpilation_error}
+                    {packageBuild.transpilation_error}
                   </div>
-                ) : build.transpilation_logs &&
-                  build.transpilation_logs.length > 0 ? (
-                  build.transpilation_logs.map((log: any, i: number) => (
+                ) : packageBuild.transpilation_logs &&
+                  packageBuild.transpilation_logs.length > 0 ? (
+                  packageBuild.transpilation_logs.map((log: any, i: number) => (
                     <div key={i} className="text-gray-600 whitespace-pre-wrap">
                       {log.msg || log.message || JSON.stringify(log)}
                     </div>
@@ -312,11 +404,11 @@ export const ConnectedRepoOverview = ({
                 <ChevronRight
                   className={`w-4 h-4 transition-transform ${openSections.circuitJson ? "rotate-90" : ""}`}
                 />
-                {build.circuit_json_build_error ? (
+                {packageBuild.circuit_json_build_error ? (
                   <AlertCircle className="w-5 h-5 text-red-500" />
-                ) : build.circuit_json_build_completed_at ? (
+                ) : packageBuild.circuit_json_build_completed_at ? (
                   <CheckCircle className="w-5 h-5 text-green-500" />
-                ) : build.circuit_json_build_in_progress ? (
+                ) : packageBuild.circuit_json_build_in_progress ? (
                   <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
                 ) : (
                   <Clock className="w-5 h-5 text-gray-400" />
@@ -325,39 +417,39 @@ export const ConnectedRepoOverview = ({
               </div>
               <div className="flex items-center gap-2">
                 {getStepDuration(
-                  build.circuit_json_build_started_at,
-                  build.circuit_json_build_completed_at,
+                  packageBuild.circuit_json_build_started_at,
+                  packageBuild.circuit_json_build_completed_at,
                 ) && (
                   <span className="text-sm text-gray-600">
                     {getStepDuration(
-                      build.circuit_json_build_started_at,
-                      build.circuit_json_build_completed_at,
+                      packageBuild.circuit_json_build_started_at,
+                      packageBuild.circuit_json_build_completed_at,
                     )}
                   </span>
                 )}
                 <Badge
                   variant={
                     getStepStatus(
-                      build.circuit_json_build_error,
-                      build.circuit_json_build_completed_at,
-                      build.circuit_json_build_in_progress,
+                      packageBuild.circuit_json_build_error,
+                      packageBuild.circuit_json_build_completed_at,
+                      packageBuild.circuit_json_build_in_progress,
                     ) === "success"
                       ? "default"
                       : getStepStatus(
-                            build.circuit_json_build_error,
-                            build.circuit_json_build_completed_at,
-                            build.circuit_json_build_in_progress,
+                            packageBuild.circuit_json_build_error,
+                            packageBuild.circuit_json_build_completed_at,
+                            packageBuild.circuit_json_build_in_progress,
                           ) === "error"
                         ? "destructive"
                         : "secondary"
                   }
                   className="text-xs"
                 >
-                  {build.circuit_json_build_error
+                  {packageBuild.circuit_json_build_error
                     ? "Failed"
-                    : build.circuit_json_build_completed_at
+                    : packageBuild.circuit_json_build_completed_at
                       ? "Completed"
-                      : build.circuit_json_build_in_progress
+                      : packageBuild.circuit_json_build_in_progress
                         ? "Running"
                         : "Queued"}
                 </Badge>
@@ -367,98 +459,22 @@ export const ConnectedRepoOverview = ({
           <CollapsibleContent>
             <div className="bg-white border-x border-b border-gray-200 rounded-b-lg p-4">
               <div className="font-mono text-xs space-y-1">
-                {build.circuit_json_build_error ? (
+                {packageBuild.circuit_json_build_error ? (
                   <div className="text-red-600 whitespace-pre-wrap">
-                    {build.circuit_json_build_error}
-                  </div>
-                ) : build.circuit_json_build_logs &&
-                  build.circuit_json_build_logs.length > 0 ? (
-                  build.circuit_json_build_logs.map((log: any, i: number) => (
-                    <div key={i} className="text-gray-600 whitespace-pre-wrap">
-                      {log.msg || log.message || JSON.stringify(log)}
-                    </div>
-                  ))
-                ) : (
-                  <div className="text-gray-500">No logs available</div>
-                )}
-              </div>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-
-        <Collapsible
-          open={openSections.finalBuild}
-          onOpenChange={() => toggleSection("finalBuild")}
-        >
-          <CollapsibleTrigger asChild>
-            <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
-              <div className="flex items-center gap-3">
-                <ChevronRight
-                  className={`w-4 h-4 transition-transform ${openSections.finalBuild ? "rotate-90" : ""}`}
-                />
-                {build.build_error ? (
-                  <AlertCircle className="w-5 h-5 text-red-500" />
-                ) : build.build_completed_at ? (
-                  <CheckCircle className="w-5 h-5 text-green-500" />
-                ) : build.build_in_progress ? (
-                  <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
-                ) : (
-                  <Clock className="w-5 h-5 text-gray-400" />
-                )}
-                <span className="font-medium">Build</span>
-              </div>
-              <div className="flex items-center gap-2">
-                {getStepDuration(
-                  build.build_started_at,
-                  build.build_completed_at,
-                ) && (
-                  <span className="text-sm text-gray-600">
-                    {getStepDuration(
-                      build.build_started_at,
-                      build.build_completed_at,
-                    )}
-                  </span>
-                )}
-                <Badge
-                  variant={
-                    getStepStatus(
-                      build.build_error,
-                      build.build_completed_at,
-                      build.build_in_progress,
-                    ) === "success"
-                      ? "default"
-                      : getStepStatus(
-                            build.build_error,
-                            build.build_completed_at,
-                            build.build_in_progress,
-                          ) === "error"
-                        ? "destructive"
-                        : "secondary"
-                  }
-                  className="text-xs"
-                >
-                  {build.build_error
-                    ? "Failed"
-                    : build.build_completed_at
-                      ? "Completed"
-                      : build.build_in_progress
-                        ? "Running"
-                        : "Queued"}
-                </Badge>
-              </div>
-            </div>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <div className="bg-white border-x border-b border-gray-200 rounded-b-lg p-4">
-              <div className="font-mono text-xs space-y-1">
-                {build.build_error ? (
-                  <div className="text-red-600 whitespace-pre-wrap">
-                    {build.build_error}
-                  </div>
-                ) : build.build_logs ? (
-                  <div className="text-gray-600 whitespace-pre-wrap">
-                    {build.build_logs}
+                    {packageBuild.circuit_json_build_error}
                   </div>
+                ) : packageBuild.circuit_json_build_logs &&
+                  packageBuild.circuit_json_build_logs.length > 0 ? (
+                  packageBuild.circuit_json_build_logs.map(
+                    (log: any, i: number) => (
+                      <div
+                        key={i}
+                        className="text-gray-600 whitespace-pre-wrap"
+                      >
+                        {log.msg || log.message || JSON.stringify(log)}
+                      </div>
+                    ),
+                  )
                 ) : (
                   <div className="text-gray-500">No logs available</div>
                 )}