@tscircuit/fake-snippets 0.0.111 → 0.0.113

package/dist/index.js

@@ -361,6 +361,7 @@ var publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z.object({
     can_manage_org: z.boolean().optional(),
@@ -2278,6 +2279,7 @@ export const SquareWaveModule = () => (
   });
   const testOrg = db.addOrganization({
     name: "test-organization",
+    github_handle: "tscircuit",
     owner_account_id: account_id
   });
   db.addOrganizationAccount({
@@ -2365,6 +2367,7 @@ exports.TestComponent = TestComponent;
   db.addOrganization({
     name: "testuser",
     owner_account_id: account_id,
+    github_handle: "tscircuit",
     is_personal_org: true
   });
 };

package/dist/schema.d.ts

@@ -1173,6 +1173,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: z.ZodBoolean;
     display_name: z.ZodOptional<z.ZodString>;
     package_count: z.ZodNumber;
+    github_handle: z.ZodOptional<z.ZodString>;
     created_at: z.ZodString;
     user_permissions: z.ZodOptional<z.ZodObject<{
         can_manage_org: z.ZodOptional<z.ZodBoolean>;
@@ -1192,6 +1193,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: boolean;
     member_count: number;
     package_count: number;
+    github_handle?: string | undefined;
     display_name?: string | undefined;
     user_permissions?: {
         can_manage_org?: boolean | undefined;
@@ -1205,6 +1207,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: boolean;
     member_count: number;
     package_count: number;
+    github_handle?: string | undefined;
     display_name?: string | undefined;
     user_permissions?: {
         can_manage_org?: boolean | undefined;

package/dist/schema.js

@@ -356,6 +356,7 @@ var publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z.object({
     can_manage_org: z.boolean().optional(),

package/fake-snippets-api/lib/db/schema.ts

@@ -427,6 +427,7 @@ export const publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z
     .object({

package/fake-snippets-api/lib/db/seed.ts

@@ -1736,6 +1736,7 @@ export const SquareWaveModule = () => (
 
   const testOrg = db.addOrganization({
     name: "test-organization",
+    github_handle: "tscircuit",
     owner_account_id: account_id,
   })
 
@@ -1831,6 +1832,7 @@ exports.TestComponent = TestComponent;
   db.addOrganization({
     name: "testuser",
     owner_account_id: account_id,
+    github_handle: "tscircuit",
     is_personal_org: true,
   })
 }

package/fake-snippets-api/lib/public-mapping/public-map-org.ts

@@ -28,6 +28,7 @@ export const publicMapOrg = (
     package_count: Number(package_count) || 0,
     is_personal_org: Boolean(is_personal_org),
     created_at: String(created_at),
+    ...(github_handle ? { github_handle } : {}),
     ...(can_manage_org ? { user_permissions: { can_manage_org: true } } : {}),
   }
 }

package/fake-snippets-api/routes/api/orgs/list_members.ts

@@ -15,7 +15,7 @@ export default withRouteSpec({
     ),
   auth: "optional_session",
   jsonResponse: z.object({
-    members: z.array(accountSchema),
+    members: z.array(accountSchema.extend({ joined_at: z.string() })),
   }),
 })(async (req, ctx) => {
   const params = req.commonParams as { org_id?: string; name?: string }
@@ -37,13 +37,17 @@ export default withRouteSpec({
 
   const members = ctx.db.orgAccounts
     .map((m) => {
-      if (m.org_id == org.org_id) return ctx.db.getAccount(m.account_id)
-      return undefined
+      if (m.org_id !== org.org_id) return undefined
+      const account = ctx.db.getAccount(m.account_id)
+      if (!account) return undefined
+      return {
+        ...account,
+        joined_at: m.created_at,
+      }
     })
     .filter(
       (member): member is NonNullable<typeof member> => member !== undefined,
     )
-
   const hasOwner = members.some((m) => m?.account_id === org.owner_account_id)
   let fullMembers = members
 
@@ -52,7 +56,13 @@ export default withRouteSpec({
       (acc) => acc.account_id === org.owner_account_id,
     )
     if (owner) {
-      fullMembers = [...members, owner]
+      fullMembers = [
+        ...members,
+        {
+          ...owner,
+          joined_at: org.created_at,
+        },
+      ]
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.111",
+  "version": "0.0.113",
   "type": "module",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "@resvg/resvg-wasm": "^2.6.2",
     "@sentry/react": "^10.10.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/3d-viewer": "^0.0.402",
+    "@tscircuit/3d-viewer": "^0.0.407",
     "@tscircuit/assembly-viewer": "^0.0.5",
     "@tscircuit/create-snippet-url": "^0.0.8",
     "@tscircuit/eval": "^0.0.325",
@@ -110,7 +110,7 @@
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.29",
     "circuit-json-to-gltf": "^0.0.14",
-    "circuit-json-to-kicad": "^0.0.9",
+    "circuit-json-to-kicad": "^0.0.22",
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
     "circuit-json-to-simple-3d": "^0.0.7",
@@ -141,7 +141,7 @@
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
     "kicad-converter": "^0.0.17",
-    "kicadts": "^0.0.9",
+    "kicadts": "^0.0.10",
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",

package/src/components/CmdKMenu.tsx

@@ -372,7 +372,7 @@ const CmdKMenu = () => {
       switch (type) {
         case "package":
         case "recent":
-          window.location.href = `/${item.owner_github_username}/${item.unscoped_name}`
+          window.location.href = `/${item.name}`
           setOpen(false)
           break
         case "account":

package/src/components/GithubAvatarWithFallback.tsx

@@ -0,0 +1,35 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+export const GithubAvatarWithFallback = ({
+  username,
+  fallback,
+  className,
+  fallbackClassName,
+  size,
+}: {
+  username?: string | null
+  fallback?: string | null
+  className?: string
+  fallbackClassName?: string
+  size?: number
+}) => {
+  return (
+    <Avatar className={`border-4 border-gray-100 ${className}`}>
+      <AvatarImage
+        src={`https://github.com/${username}.png${size ? `?size=${size}` : ""}`}
+        alt={`${username || fallback} avatar`}
+        className="object-cover"
+      />
+      <AvatarFallback
+        className={`bg-blue-100 text-blue-600 ${fallbackClassName}`}
+      >
+        {(username || fallback || "")
+          .split(" ")
+          .map((word) => word[0])
+          .join("")
+          .toUpperCase()
+          .slice(0, 2)}
+      </AvatarFallback>
+    </Avatar>
+  )
+}

package/src/components/HeaderLogin.tsx

@@ -35,7 +35,7 @@ export const HeaderLogin = () => {
       <DropdownMenuTrigger asChild>
         <Avatar className="w-8 h-8 login-avatar">
           <AvatarImage
-            src={`https://github.com/${session?.github_username}.png`}
+            src={`https://github.com/${session?.github_username}.png?size=40`}
             alt={`${session?.github_username}'s profile picture`}
           />
           <AvatarFallback aria-label="User avatar fallback">

package/src/components/PackageCard.tsx

@@ -67,7 +67,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
 
   const handleShareClick = (e: React.MouseEvent) => {
     e.preventDefault()
-    const shareUrl = `${window.location.origin}/${pkg.owner_github_username}/${pkg.unscoped_name}`
+    const shareUrl = `${window.location.origin}/${pkg.name}`
     copyToClipboard(shareUrl)
   }
 
@@ -178,10 +178,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
 
   if (withLink) {
     return (
-      <Link
-        key={pkg.package_id}
-        href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
-      >
+      <Link key={pkg.package_id} href={`/${pkg.name}`}>
         {cardContent}
       </Link>
     )

package/src/components/PackagesList.tsx

@@ -50,10 +50,10 @@ export const PackagesList = ({
             <li key={pkg.package_id}>
               <div className="flex items-center">
                 <Link
-                  href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
+                  href={`/${pkg.name}`}
                   className="text-blue-600 hover:underline text-sm"
                 >
-                  {pkg.owner_github_username}/{pkg.unscoped_name}
+                  {pkg.name}
                 </Link>
                 {pkg.star_count > 0 && (
                   <span className="ml-2 text-gray-500 text-xs flex items-center">

package/src/components/ProfileRouter.tsx

@@ -1,18 +1,16 @@
 import React from "react"
 import { useParams } from "wouter"
-import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
 import { OrganizationProfilePageContent } from "@/pages/organization-profile"
 import { UserProfilePage } from "@/pages/user-profile"
 import NotFoundPage from "@/pages/404"
 import { FullPageLoader } from "@/App"
+import { useOrganization } from "@/hooks/use-organization"
 
 const ProfileRouter: React.FC = () => {
   const { username } = useParams()
-  const {
-    data: organization,
-    isLoading,
-    error,
-  } = useOrgByGithubHandle(username || null)
+  const { organization, isLoading, error } = useOrganization({
+    orgName: username,
+  })
 
   if (!username) {
     return <NotFoundPage heading="Username Not Provided" />

package/src/components/TrendingPackagesCarousel.tsx

@@ -11,10 +11,10 @@ const CarouselItem = ({
   apiBaseUrl,
 }: { pkg: Package; apiBaseUrl: string }) => {
   return (
-    <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}>
+    <Link href={`/${pkg.name}`}>
       <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
         <div className="font-medium text-blue-600 mb-1 truncate text-sm">
-          {pkg.owner_github_username}/{pkg.unscoped_name}
+          {pkg.name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
           <img

package/src/components/UserCard.tsx

@@ -36,7 +36,7 @@ export const UserCard: React.FC<UserCardProps> = ({
       <div className="flex items-start gap-4">
         <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
           <img
-            src={`https://github.com/${account.github_username}.png`}
+            src={`https://github.com/${account.github_username}.png?size=69`}
             alt={`${account.github_username} avatar`}
             className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
             onError={(e) => {

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, XCircle, Clock, Loader2 } from "lucide-react"
+import { CheckCircle, XCircle, Clock, Loader2, Hourglass } from "lucide-react"
 import { Link, useParams } from "wouter"
 
 export interface BuildStep {
@@ -28,7 +28,7 @@ export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
         <Loader2 className="h-4 w-4 text-blue-600 animate-spin dark:text-[#8b949e]" />
       )}
       {step.status === "pending" && (
-        <Clock className="h-4 w-4 text-yellow-600 dark:text-[#8b949e]" />
+        <Hourglass className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
       )}
       <span className="text-sm text-gray-500 dark:text-[#8b949e]">
         {step.name}

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -81,7 +81,7 @@ export default function SidebarReleasesSection() {
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">
         <Link
-          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          href={`/${packageInfo?.name}/releases`}
           className="hover:underline"
         >
           Releases
@@ -89,7 +89,7 @@ export default function SidebarReleasesSection() {
       </h2>
       <div className="flex flex-col space-y-2">
         <Link
-          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          href={`/${packageInfo?.name}/releases`}
           className="flex items-center hover:underline"
         >
           <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />

package/src/components/organization/OrganizationCard.tsx

@@ -21,6 +21,7 @@ import { timeAgo } from "@/lib/utils/timeAgo"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
 export interface OrganizationCardProps {
   /** The organization data to display */
@@ -85,21 +86,16 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
       <div className="flex items-start gap-4">
         {/* Organization Avatar */}
         <div className="flex-shrink-0">
-          <Avatar className="h-16 w-16 border-2 border-gray-100">
-            <AvatarImage
-              src={`https://github.com/${organization.name}.png`}
-              alt={`${organization.name} avatar`}
-              className="object-cover"
-            />
-            <AvatarFallback className="bg-blue-100 text-blue-600 font-semibold text-lg">
-              {organization.name
-                ?.split(" ")
-                .map((word) => word[0])
-                .join("")
-                .toUpperCase()
-                .slice(0, 2)}
-            </AvatarFallback>
-          </Avatar>
+          <GithubAvatarWithFallback
+            username={
+              organization.is_personal_org
+                ? organization.github_handle || organization.name
+                : organization.github_handle
+            }
+            fallback={organization.name}
+            fallbackClassName=" font-semibold text-lg"
+            size={40}
+          />
         </div>
 
         {/* Organization Info */}

package/src/components/organization/OrganizationHeader.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import React from "react"
 import { Button } from "@/components/ui/button"
 import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -7,6 +6,7 @@ import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
 import { useOrganization } from "@/hooks/use-organization"
+import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
 interface OrganizationHeaderProps {
   organization: PublicOrgSchema
@@ -40,21 +40,13 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         {/* Mobile Layout */}
         <div className="block sm:hidden">
           <div className="flex flex-col items-center text-center space-y-4">
-            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
-              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
-                {(organization.name || "")
-                  .split(" ")
-                  .map((word) => word[0])
-                  .join("")
-                  .toUpperCase()
-                  .slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
+            <GithubAvatarWithFallback
+              username={organization.github_handle}
+              fallback={organization.name}
+              className="shadow-sm size-16 md:size-20 lg:size-24"
+              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
+              size={300}
+            />
 
             <div>
               <div className="flex flex-col items-center gap-3 mb-3">
@@ -96,21 +88,12 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         {/* Desktop Layout */}
         <div className="hidden sm:block">
           <div className="flex items-center gap-6">
-            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
-              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
-                {(organization.name || "")
-                  .split(" ")
-                  .map((word) => word[0])
-                  .join("")
-                  .toUpperCase()
-                  .slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
+            <GithubAvatarWithFallback
+              username={organization.github_handle}
+              fallback={organization.name}
+              className="flex-shrink-0 shadow-sm size-16 md:size-20 lg:size-24"
+              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
+            />
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between mb-3">

package/src/components/organization/OrganizationMembers.tsx

@@ -2,11 +2,9 @@ import React from "react"
 import { Link } from "wouter"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { cn } from "@/lib/utils"
-import { Account } from "fake-snippets-api/lib/db/schema"
 import { useListOrgMembers } from "@/hooks/use-list-org-members"
 
 interface OrganizationMembersProps {
@@ -69,7 +67,7 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
   return (
     <div
       className={cn(
-        "bg-white rounded-lg border border-gray-200 p-4 py-20 sm:p-6",
+        "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
         className,
       )}
     >
@@ -124,12 +122,13 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
                   </p>
                 </div>
               </div>
-
-              <div className="text-right flex-shrink-0 hidden sm:block">
-                <p className="text-xs text-gray-500">
-                  Joined {timeAgo(new Date())}
-                </p>
-              </div>
+              {member.joined_at && (
+                <div className="text-right flex-shrink-0 hidden sm:block">
+                  <p className="text-xs text-gray-500">
+                    Joined {timeAgo(new Date(member.joined_at))}
+                  </p>
+                </div>
+              )}
             </div>
           </Link>
         ))}

package/src/components/preview/ConnectedPackagesList.tsx

@@ -117,7 +117,7 @@ export const ConnectedPackageCard = ({
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-3">
           <Link
-            href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
+            href={`/${pkg.name}`}
             className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
           >
             {pkg.unscoped_name}

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -62,8 +62,8 @@ export const PackageReleasesDashboard = ({
         {/* 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">
-            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-              <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+            <div className="flex flex-col md:justify-between md:flex-row lg:items-center lg:justify-between gap-6">
+              <div className="flex flex-col md:flex-row md:items-center gap-4">
                 <div className="w-12 hidden md:block h-12 rounded-lg overflow-hidden flex-shrink-0">
                   <img
                     src="https://github.com/tscircuit.png"
@@ -180,7 +180,7 @@ export const PackageReleasesDashboard = ({
                       <MoreHorizontal className="w-4 h-4" />
                     </Button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
+                  <DropdownMenuContent align="end" className="ml-2">
                     {pkg.github_repo_full_name && (
                       <DropdownMenuItem asChild>
                         <a

package/src/hooks/use-list-org-members.ts

@@ -2,12 +2,16 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { Account } from "fake-snippets-api/lib/db/schema"
 
+interface MemberAccount extends Account {
+  joined_at?: string
+}
+
 export const useListOrgMembers = ({
   orgId,
   orgName,
 }: { orgId?: string; orgName?: string }) => {
   const axios = useAxios()
-  return useQuery<Account[], Error & { status: number }>(
+  return useQuery<MemberAccount[], Error & { status: number }>(
     ["orgs", "members", orgId || orgName],
     async () => {
       if (!orgId && !orgName) {

package/src/hooks/use-org-by-github-handle.ts

@@ -1,11 +1,9 @@
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-import { useGlobalStore } from "./use-global-store"
 
 export const useOrgByGithubHandle = (githubHandle: string | null) => {
   const axios = useAxios()
-  const session = useGlobalStore((s) => s.session)
   return useQuery<PublicOrgSchema, Error & { status: number }>(
     ["orgs", "by-github-handle", githubHandle],
     async () => {

package/src/pages/editor.tsx

@@ -7,9 +7,7 @@ import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 export const EditorPage = () => {
   const { packageInfo: pkg, error } = useCurrentPackageInfo()
 
-  const projectUrl = pkg
-    ? `https://tscircuit.com/${pkg.owner_github_username}/${pkg.unscoped_name}`
-    : undefined
+  const projectUrl = pkg ? `https://tscircuit.com/${pkg.name}` : undefined
 
   return (
     <div className="overflow-x-hidden">

package/src/pages/release-detail.tsx

@@ -170,30 +170,32 @@ export default function ReleaseDetailPage() {
         </div>
 
         {/* Images Section - Always show with skeletons while loading */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {availableViews.length > 0
-              ? availableViews.map((view) => (
-                  <div
-                    key={view.id}
-                    className="flex items-center justify-center border rounded-lg bg-gray-50 overflow-hidden h-48"
-                  >
-                    {view.isLoading ? (
-                      <Skeleton className="w-full h-full" />
-                    ) : (
-                      <img
-                        src={view.imageUrl}
-                        alt={`${view.label} preview`}
-                        className={`w-full h-full object-contain ${view.label.toLowerCase() == "pcb" ? "bg-black" : view.label.toLowerCase() == "schematic" ? "bg-[#F5F1ED]" : "bg-gray-100"}`}
-                      />
-                    )}
-                  </div>
-                ))
-              : [1, 2, 3].map((i) => (
-                  <Skeleton key={i} className="h-48 rounded-lg" />
-                ))}
+        {Boolean(latestBuild) && (
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {availableViews.length > 0
+                ? availableViews.map((view) => (
+                    <div
+                      key={view.id}
+                      className="flex items-center justify-center border rounded-lg bg-gray-50 overflow-hidden h-48"
+                    >
+                      {view.isLoading ? (
+                        <Skeleton className="w-full h-full" />
+                      ) : (
+                        <img
+                          src={view.imageUrl}
+                          alt={`${view.label} preview`}
+                          className={`w-full h-full object-contain ${view.label.toLowerCase() == "pcb" ? "bg-black" : view.label.toLowerCase() == "schematic" ? "bg-[#F5F1ED]" : "bg-gray-100"}`}
+                        />
+                      )}
+                    </div>
+                  ))
+                : [1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-48 rounded-lg" />
+                  ))}
+            </div>
           </div>
-        </div>
+        )}
 
         {/* Main Content */}
         <ConnectedRepoOverview