@tscircuit/fake-snippets 0.0.102 → 0.0.104

package/src/components/preview/ConnectedRepoDashboard.tsx

@@ -24,33 +24,28 @@ import {
 import { useLocation } from "wouter"
 import { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 import { BuildsList } from "./BuildsList"
-import { ConnectedRepoSettings } from "./ConnectedRepoSettings"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { getBuildStatus, PackageBuild, MOCK_DEPLOYMENTS } from "."
-
-interface ConnectedRepoDashboardProps {
-  projectName?: string
-  builds?: PackageBuild[]
-  selectedBuild?: PackageBuild
-}
+import {
+  getBuildStatus,
+  PackageBuild,
+  MOCK_DEPLOYMENTS,
+  getPackageFromBuild,
+} from "."
+import { PrefetchPageLink } from "../PrefetchPageLink"
 
 export const ConnectedRepoDashboard = ({
-  projectName = "tscircuit-project",
-  builds = MOCK_DEPLOYMENTS,
-  selectedBuild,
-}: ConnectedRepoDashboardProps) => {
+  latestBuild,
+}: {
+  latestBuild: PackageBuild
+}) => {
   const [activeTab, setActiveTab] = useState("overview")
-  const [currentBuild, setCurrentBuild] = useState<PackageBuild | undefined>(
-    selectedBuild || builds[0],
-  )
   const [, setLocation] = useLocation()
-
+  const pkg = getPackageFromBuild(latestBuild)
   const handleSelectBuild = (build: PackageBuild) => {
     setLocation(`/build/${build.package_build_id}`)
+    setActiveTab("overview")
   }
-
-  const latestBuild = builds[0]
   const { status, label } = getBuildStatus(latestBuild)
 
   return (
@@ -71,9 +66,12 @@ export const ConnectedRepoDashboard = ({
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-                    <h1 className="text-2xl font-bold text-gray-900 truncate">
-                      {projectName}
-                    </h1>
+                    <PrefetchPageLink
+                      href={"/" + pkg.name}
+                      className="text-2xl font-bold text-gray-900 truncate"
+                    >
+                      {pkg.unscoped_name}
+                    </PrefetchPageLink>
                     <Badge
                       variant={
                         status === "success"
@@ -99,7 +97,15 @@ export const ConnectedRepoDashboard = ({
                     </Badge>
                   </div>
                   <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-gray-600">
-                    <div className="flex items-center gap-1">
+                    <div
+                      className="flex cursor-pointer items-center gap-1"
+                      onClick={() =>
+                        window?.open(
+                          `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"}
@@ -108,19 +114,9 @@ export const ConnectedRepoDashboard = ({
                     <div className="flex items-center gap-1">
                       <Clock className="w-4 h-4 flex-shrink-0" />
                       <span>
-                        Last deployed {formatTimeAgo(latestBuild.created_at)}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <User className="w-4 h-4 flex-shrink-0" />
-                      <span className="truncate">
-                        {latestBuild.commit_author || "Unknown"}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <Hash className="w-4 h-4 flex-shrink-0" />
-                      <span className="font-mono text-xs truncate">
-                        {latestBuild.package_build_id?.slice(-8) || "N/A"}
+                        <time dateTime={latestBuild.created_at}>
+                          Last deployed {formatTimeAgo(latestBuild.created_at)}
+                        </time>
                       </span>
                     </div>
                   </div>
@@ -134,7 +130,7 @@ export const ConnectedRepoDashboard = ({
                   className="flex items-center gap-2 justify-center min-w-[120px] h-9"
                   onClick={() =>
                     window.open(
-                      `https://github.com/${latestBuild.commit_author}/${projectName}`,
+                      `https://github.com/${pkg.github_repo_full_name}`,
                       "_blank",
                     )
                   }
@@ -181,7 +177,7 @@ export const ConnectedRepoDashboard = ({
                   <DropdownMenuContent align="end">
                     <DropdownMenuItem asChild>
                       <a
-                        href={`https://github.com/${latestBuild.commit_author}`}
+                        href={`https://github.com/${pkg.github_repo_full_name}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
@@ -197,7 +193,7 @@ export const ConnectedRepoDashboard = ({
                       onClick={() => {
                         if (navigator.share) {
                           navigator.share({
-                            title: projectName,
+                            title: pkg.unscoped_name,
                             url: window.location.href,
                           })
                         } else {
@@ -221,7 +217,7 @@ export const ConnectedRepoDashboard = ({
             onValueChange={setActiveTab}
             className="space-y-6"
           >
-            <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-3">
+            <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
@@ -230,25 +226,14 @@ export const ConnectedRepoDashboard = ({
                 <List className="w-4 h-4" />
                 Builds
               </TabsTrigger>
-              <TabsTrigger value="settings" className="flex items-center gap-2">
-                <Settings className="w-4 h-4" />
-                Settings
-              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="overview" className="space-y-6">
-              {currentBuild && <ConnectedRepoOverview build={currentBuild} />}
+              {latestBuild && <ConnectedRepoOverview build={latestBuild} />}
             </TabsContent>
 
             <TabsContent value="builds" className="space-y-6">
-              <BuildsList builds={builds} onSelectBuild={handleSelectBuild} />
-            </TabsContent>
-
-            <TabsContent value="settings" className="space-y-6">
-              <ConnectedRepoSettings
-                projectName={projectName}
-                onSave={(settings) => console.log("Settings saved:", settings)}
-              />
+              <BuildsList pkg={pkg} onSelectBuild={handleSelectBuild} />
             </TabsContent>
           </Tabs>
         </div>

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -198,7 +198,7 @@ export const ConnectedRepoOverview = ({
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold text-gray-900">Build Steps</h2>
+        <h2 className="text-lg font-semibold text-gray-900">Logs</h2>
 
         <Collapsible
           open={openSections.transpilation}
@@ -387,7 +387,7 @@ export const ConnectedRepoOverview = ({
                 ) : (
                   <Clock className="w-5 h-5 text-gray-400" />
                 )}
-                <span className="font-medium">Final Build</span>
+                <span className="font-medium">Build</span>
               </div>
               <div className="flex items-center gap-2">
                 {getStepDuration(

package/src/components/preview/index.tsx

@@ -1,6 +1,5 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
-export { ConnectedRepoSettings } from "./ConnectedRepoSettings"
 export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
 
 export const getBuildStatus = (build: PackageBuild) => {
@@ -192,6 +191,7 @@ 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) {
@@ -205,3 +205,44 @@ export const StatusIcon = ({ status }: { status: string }) => {
       return <Clock className="w-4 h-4 text-gray-500" />
   }
 }
+
+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-details-form.ts

@@ -18,6 +18,7 @@ interface PackageDetailsForm {
   defaultView: string
   githubRepoFullName: string | null
   unscopedPackageName: string
+  allowPrPreviews?: boolean
 }
 
 interface UsePackageDetailsFormProps {
@@ -29,6 +30,7 @@ interface UsePackageDetailsFormProps {
   initialUnscopedPackageName: string
   initialGithubRepoFullName: string | null
   isDialogOpen: boolean
+  initialAllowPrPreviews?: boolean
 }
 
 export const usePackageDetailsForm = ({
@@ -40,6 +42,7 @@ export const usePackageDetailsForm = ({
   initialUnscopedPackageName,
   initialGithubRepoFullName,
   isDialogOpen,
+  initialAllowPrPreviews,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
     description: initialDescription,
@@ -62,6 +65,7 @@ export const usePackageDetailsForm = ({
         githubRepoFullName: initialGithubRepoFullName,
         defaultView: initialDefaultView,
         unscopedPackageName: initialUnscopedPackageName,
+        allowPrPreviews: initialAllowPrPreviews,
       })
       setWebsiteError(null)
     }
@@ -98,6 +102,11 @@ export const usePackageDetailsForm = ({
     [formData.defaultView, initialDefaultView],
   )
 
+  const hasAllowPrPreviewsChanged = useMemo(
+    () => formData.allowPrPreviews !== initialAllowPrPreviews,
+    [formData.allowPrPreviews, initialAllowPrPreviews],
+  )
+
   const hasChanges = useMemo(
     () =>
       formData.description !== initialDescription ||
@@ -106,7 +115,8 @@ export const usePackageDetailsForm = ({
       formData.visibility !== initialVisibility ||
       formData.defaultView !== initialDefaultView ||
       formData.githubRepoFullName !== initialGithubRepoFullName ||
-      formData.unscopedPackageName !== initialUnscopedPackageName,
+      formData.unscopedPackageName !== initialUnscopedPackageName ||
+      formData.allowPrPreviews !== initialAllowPrPreviews,
     [
       formData,
       initialDescription,
@@ -116,6 +126,7 @@ export const usePackageDetailsForm = ({
       initialDefaultView,
       initialGithubRepoFullName,
       initialUnscopedPackageName,
+      initialAllowPrPreviews,
     ],
   )
 
@@ -128,6 +139,7 @@ export const usePackageDetailsForm = ({
     hasLicenseChanged,
     hasVisibilityChanged,
     hasDefaultViewChanged,
+    hasAllowPrPreviewsChanged,
     hasChanges,
     isFormValid,
   }

package/src/pages/user-profile.tsx

@@ -25,7 +25,7 @@ import {
 } from "@/components/ui/select"
 import { Box, Star } from "lucide-react"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { ConnectedReposCards } from "@/components/preview/ConnectedReposCards"
+import { ConnectedPackagesList } from "@/components/preview/ConnectedPackagesList"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -101,7 +101,6 @@ export const UserProfilePage = () => {
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />
   }
-
   const packagesToShow =
     activeTab === "starred" ? starredPackages : userPackages
   const isLoading =
@@ -179,9 +178,13 @@ export const UserProfilePage = () => {
           <TabsList>
             <TabsTrigger value="all">Packages</TabsTrigger>
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
-            {isCurrentUserProfile && (
-              <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
-            )}
+            {isCurrentUserProfile &&
+              (
+                userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
+                []
+              ).length > 0 && (
+                <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
+              )}
           </TabsList>
         </Tabs>
         {activeTab !== "repos" && (
@@ -208,7 +211,12 @@ export const UserProfilePage = () => {
           </div>
         )}
         {activeTab === "repos" ? (
-          <ConnectedReposCards user={String(githubUsername)} />
+          <ConnectedPackagesList
+            packages={
+              userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
+              []
+            }
+          />
         ) : isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (

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

@@ -14,11 +14,5 @@ export default function ViewConnectedRepoOverview() {
     return <NotFoundPage heading="Build Not Found" />
   }
 
-  return (
-    <ConnectedRepoDashboard
-      projectName="tscircuit-project"
-      builds={MOCK_DEPLOYMENTS}
-      selectedBuild={selectedBuild}
-    />
-  )
+  return <ConnectedRepoDashboard latestBuild={selectedBuild} />
 }