@tscircuit/fake-snippets 0.0.74 → 0.0.75

package/fake-snippets-api/routes/api/package_releases/update.ts

@@ -11,6 +11,7 @@ export default withRouteSpec({
     is_latest: z.boolean().optional(),
     license: z.string().optional(),
     fs_sha: z.string().optional(),
+    ready_to_build: z.boolean().optional(),
   }),
   jsonResponse: z.object({
     ok: z.boolean(),
@@ -23,6 +24,7 @@ export default withRouteSpec({
     is_latest,
     license,
     fs_sha,
+    ready_to_build,
   } = req.jsonBody
   let releaseId = package_release_id
 
@@ -47,7 +49,7 @@ export default withRouteSpec({
     })
   }
 
-  const delta = { is_locked, is_latest, license, fs_sha }
+  const delta = { is_locked, is_latest, license, fs_sha, ready_to_build }
   if (
     Object.keys(delta).filter(
       (k) => delta[k as keyof typeof delta] !== undefined,
@@ -76,6 +78,7 @@ export default withRouteSpec({
     ...(is_latest !== undefined && { is_latest }),
     ...(license !== undefined && { license }),
     ...(fs_sha !== undefined && { fs_sha }),
+    ...(ready_to_build !== undefined && { ready_to_build }),
   }
 
   // Handle is_latest updates atomically

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/DownloadButtonAndMenu.tsx

@@ -13,6 +13,8 @@ import { downloadFabricationFiles } from "@/lib/download-fns/download-fabricatio
 import { downloadSchematicSvg } from "@/lib/download-fns/download-schematic-svg"
 import { downloadReadableNetlist } from "@/lib/download-fns/download-readable-netlist"
 import { downloadAssemblySvg } from "@/lib/download-fns/download-assembly-svg"
+import { downloadPcbSvg } from "@/lib/download-fns/download-pcb-svg"
+import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
 import { AnyCircuitElement } from "circuit-json"
 import { ChevronDown, Download, Hammer } from "lucide-react"
@@ -31,18 +33,19 @@ export function DownloadButtonAndMenu({
   circuitJson,
 }: DownloadButtonAndMenuProps) {
   const notImplemented = useNotImplementedToast()
+  const { Dialog: PcbDownloadDialog, openDialog: openPcbDownloadDialog } =
+    usePcbDownloadDialog()
 
   if (!circuitJson) {
     return (
       <div className={className}>
         <Button
           disabled
-          variant="ghost"
           size="sm"
-          className="h-9 border-gray-300 dark:border-[#30363d] hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
+          className="h-9 bg-muted text-muted-foreground border border-input cursor-not-allowed"
         >
           <Download className="h-4 w-4 mr-1.5" />
-          Export
+          Download
           <ChevronDown className="h-4 w-4 ml-0.5" />
         </Button>
       </div>
@@ -54,13 +57,12 @@ export function DownloadButtonAndMenu({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            variant="outline"
             size="sm"
-            className="h-9 border-gray-300 dark:border-[#30363d] hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
+            className="bg-white text-gray-900 hover:bg-gray-100 border border-gray-300 px-1 pl-2"
           >
-            <Download className="h-4 w-4 mr-1.5" />
-            Export
-            <ChevronDown className="h-4 w-4 ml-0.5" />
+            <Download className="w-4 h-4 mr-2" />
+            Download
+            <ChevronDown className="w-4 h-4 ml-1" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
@@ -175,6 +177,18 @@ export function DownloadButtonAndMenu({
               svg
             </span>
           </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-xs"
+            onSelect={() => {
+              openPcbDownloadDialog()
+            }}
+          >
+            <Download className="mr-1 h-3 w-3" />
+            <span className="flex-grow mr-6">PCB SVG</span>
+            <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              svg
+            </span>
+          </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
             onSelect={() => {
@@ -219,6 +233,10 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
+      <PcbDownloadDialog
+        circuitJson={circuitJson}
+        fileName={snippetUnscopedName || "circuit"}
+      />
     </div>
   )
 }

package/src/components/Header.tsx

@@ -2,14 +2,9 @@ import { HeaderLogin } from "@/components/HeaderLogin"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { cn } from "@/lib/utils"
-import {
-  GitHubLogoIcon,
-  OpenInNewWindowIcon,
-  ChatBubbleIcon,
-  DiscordLogoIcon,
-} from "@radix-ui/react-icons"
+import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons"
 import { Menu, X } from "lucide-react"
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useLocation } from "wouter"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import CmdKMenu from "./CmdKMenu"
@@ -55,6 +50,11 @@ const HeaderButton = ({
 export default function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const sessionToken = useGlobalStore((s) => s.session?.token)
+
+  useEffect(() => {
+    window.TSCIRCUIT_REGISTRY_TOKEN = sessionToken ?? ""
+  }, [sessionToken])
 
   return (
     <header className="px-4 py-3">

package/src/components/PackageBuildsPage/ErrorObject.ts

@@ -0,0 +1,12 @@
+export type ErrorObjectOrString =
+  | {
+      message: string
+    }
+  | string
+
+export const getErrorText = (error: ErrorObjectOrString) => {
+  if (typeof error === "string") {
+    return error
+  }
+  return error.message
+}

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -0,0 +1,32 @@
+type ErrorObject =
+  | {
+      message: string
+    }
+  | string
+
+const getErrorText = (error: ErrorObject | string) => {
+  if (typeof error === "string") {
+    return error
+  }
+  return error.message
+}
+
+export const LogContent = ({
+  logs,
+  error,
+}: { logs: any[]; error?: ErrorObject | string | null }) => {
+  return (
+    <div className="whitespace-pre-wrap font-mono text-xs">
+      {logs.map((log) =>
+        log.msg || log.message ? (
+          <div>{log.msg ?? log.message}</div>
+        ) : (
+          <div>
+            <pre>{log.message}</pre>
+          </div>
+        ),
+      )}
+      {error && <div className="text-red-600">{getErrorText(error)}</div>}
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -5,10 +5,40 @@ import { BuildPreviewContent } from "./build-preview-content"
 import { PackageBuildDetailsPanel } from "./package-build-details-panel"
 import { PackageBuildHeader } from "./package-build-header"
 import { CollapsibleSection } from "./collapsible-section"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { LogContent } from "./LogContent"
+import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+
+function computeDuration(
+  startedAt: string | null | undefined,
+  completedAt: string | null | undefined,
+) {
+  if (!startedAt || !completedAt) return ""
+  return `${Math.floor((new Date(completedAt).getTime() - new Date(startedAt).getTime()) / 1000)}s`
+}
 
 export const PackageBuildDetailsPage = () => {
+  const { packageRelease } = useCurrentPackageRelease()
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
 
+  const {
+    circuit_json_build_logs,
+    circuit_json_build_completed_at,
+    circuit_json_build_in_progress,
+    circuit_json_build_is_stale,
+    circuit_json_build_started_at,
+    circuit_json_build_error,
+    circuit_json_build_error_last_updated_at,
+    transpilation_completed_at,
+    transpilation_in_progress,
+    transpilation_is_stale,
+    transpilation_logs,
+    transpilation_started_at,
+    circuit_json_build_display_status,
+    transpilation_display_status,
+    transpilation_error,
+  } = packageRelease ?? ({} as Partial<PackageRelease>)
+
   const toggleSection = (section: string) => {
     setOpenSections((prev) => ({
       ...prev,
@@ -38,17 +68,45 @@ export const PackageBuildDetailsPage = () => {
         <div className="space-y-4 mb-8">
           <CollapsibleSection
             title="Transpilation Logs"
-            duration="1m 15s"
+            duration={computeDuration(
+              transpilation_started_at,
+              transpilation_completed_at,
+            )}
+            displayStatus={transpilation_display_status}
+            error={transpilation_error}
             isOpen={openSections.summary}
             onToggle={() => toggleSection("summary")}
-          />
+          >
+            <LogContent
+              logs={
+                packageRelease?.transpilation_logs ?? [
+                  { msg: "No transpilation logs available" },
+                ]
+              }
+              error={transpilation_error}
+            />
+          </CollapsibleSection>
 
           <CollapsibleSection
             title="Circuit JSON Build Logs"
-            duration="2m 29s"
+            duration={computeDuration(
+              circuit_json_build_started_at,
+              circuit_json_build_completed_at,
+            )}
+            displayStatus={circuit_json_build_display_status}
+            error={circuit_json_build_error}
             isOpen={openSections.logs}
             onToggle={() => toggleSection("logs")}
-          />
+          >
+            <LogContent
+              logs={
+                packageRelease?.circuit_json_build_logs ?? [
+                  { msg: "No Circuit JSON logs available" },
+                ]
+              }
+              error={circuit_json_build_error!}
+            />
+          </CollapsibleSection>
         </div>
       </div>
     </div>

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -1,11 +1,27 @@
+import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+
 export function BuildPreviewContent() {
+  const { packageRelease } = useCurrentPackageRelease()
+  const { packageInfo } = useCurrentPackageInfo()
+
+  if (!packageRelease) {
+    return (
+      <div className="flex items-center justify-center">
+        <div className="w-48 h-48 bg-gray-200 rounded animate-pulse-slow"></div>
+      </div>
+    )
+  }
+
   return (
     <div className="flex items-center justify-center">
-      <img
-        src="https://placehold.co/600x400/000/31343C"
-        alt="Package build preview"
-        className="object-contain rounded p-2 max-h-[400px]"
-      />
+      <div className="rounded overflow-hidden">
+        <img
+          src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
+          alt="Package build preview"
+          className="object-contain rounded max-h-[360px]"
+        />
+      </div>
     </div>
   )
 }

package/src/components/PackageBuildsPage/capitalCase.ts

@@ -0,0 +1,4 @@
+export const capitalCase = (str: string | null | undefined) => {
+  if (!str) return ""
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package/src/components/PackageBuildsPage/collapsible-section.tsx

@@ -6,24 +6,34 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible"
+import { getColorForDisplayStatus } from "./getColorForDisplayStatus"
+import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+import { ErrorObjectOrString, getErrorText } from "./ErrorObject"
+import { capitalCase } from "./capitalCase"
+
+type BadgeInfo = {
+  text: string
+  variant?: "default" | "secondary" | "destructive"
+  className?: string
+  icon?: React.ReactNode
+}
 
 interface CollapsibleSectionProps {
   title: string
   duration?: string
+  error?: ErrorObjectOrString | null
+  displayStatus?: PackageRelease["display_status"]
   isOpen: boolean
   onToggle: () => void
-  badges?: Array<{
-    text: string
-    icon?: React.ReactNode
-    variant?: "default" | "secondary"
-    className?: string
-  }>
+  badges?: Array<BadgeInfo>
   children?: React.ReactNode
 }
 
 export function CollapsibleSection({
   title,
   duration,
+  error,
+  displayStatus,
   isOpen,
   onToggle,
   badges = [],
@@ -40,7 +50,17 @@ export function CollapsibleSection({
             <span className="font-medium">{title}</span>
           </div>
           <div className="flex items-center gap-2">
-            {badges.map((badge, index) => (
+            {[
+              ...badges,
+              ...(error
+                ? [
+                    {
+                      text: getErrorText(error),
+                      variant: "destructive",
+                    } as BadgeInfo,
+                  ]
+                : []),
+            ].map((badge, index) => (
               <Badge
                 key={index}
                 variant={badge.variant || "secondary"}
@@ -56,13 +76,18 @@ export function CollapsibleSection({
             {duration && (
               <span className="text-sm text-gray-600">{duration}</span>
             )}
-            <CheckCircle2 className="w-4 h-4 text-green-500" />
+            <div
+              className={`w-2 h-2 rounded-lg ${getColorForDisplayStatus(displayStatus)}`}
+            />
+            <div className="text-gray-600 text-xs font-medium">
+              {capitalCase(displayStatus) || "???"}
+            </div>
           </div>
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="p-4 bg-white border-x border-b border-gray-200 rounded-b-lg">
-          {children || `${title} details would go here...`}
+          {children}
         </div>
       </CollapsibleContent>
     </Collapsible>

package/src/components/PackageBuildsPage/getColorForDisplayStatus.ts

@@ -0,0 +1,17 @@
+import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+
+export const getColorForDisplayStatus = (
+  display_status?: PackageRelease["display_status"] | null,
+) => {
+  switch (display_status) {
+    case "pending":
+      return "bg-yellow-500"
+    case "building":
+      return "bg-blue-500"
+    case "successful":
+      return "bg-green-500"
+    case "failed":
+      return "bg-red-500"
+  }
+  return "bg-gray-500"
+}

package/src/components/PackageBuildsPage/package-build-details-panel.tsx

@@ -1,7 +1,61 @@
 import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { useParams } from "wouter"
+import { timeAgo } from "@/lib/utils/timeAgo"
+import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+
+const capitalCase = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+function getColorFromDisplayStatus(
+  display_status: PackageRelease["display_status"],
+) {
+  switch (display_status) {
+    case "pending":
+      return "bg-yellow-500"
+    case "building":
+      return "bg-blue-500"
+    case "successful":
+      return "bg-green-500"
+    case "failed":
+      return "bg-red-500"
+  }
+}
 
 export function PackageBuildDetailsPanel() {
+  const { packageRelease } = useCurrentPackageRelease()
+  const { author } = useParams() // TODO use packageRelease.author_account_id when it's added by backed
+
+  if (!packageRelease) {
+    // TODO show skeleton instead
+    return null
+  }
+
+  const {
+    circuit_json_build_display_status,
+    circuit_json_build_in_progress,
+    circuit_json_build_is_stale,
+    circuit_json_build_logs,
+    transpilation_display_status,
+    transpilation_in_progress,
+    transpilation_logs,
+    circuit_json_build_completed_at,
+    transpilation_is_stale,
+    display_status,
+    created_at,
+    has_transpiled,
+    circuit_json_build_started_at,
+    circuit_json_build_error,
+    circuit_json_build_error_last_updated_at,
+    total_build_duration_ms,
+    transpilation_completed_at,
+    transpilation_error,
+    transpilation_started_at,
+    commit_sha,
+  } = packageRelease
+
   return (
     <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
       {/* Created */}
@@ -11,8 +65,10 @@ export function PackageBuildDetailsPanel() {
           <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold">
             I
           </div>
-          <span className="text-sm">imrishabh18</span>
-          <span className="text-sm text-gray-500">48m ago</span>
+          <span className="text-sm">{author}</span>
+          <span className="text-sm text-gray-500">
+            {timeAgo(packageRelease?.created_at, "")}
+          </span>
         </div>
       </div>
 
@@ -20,26 +76,33 @@ export function PackageBuildDetailsPanel() {
       <div>
         <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
         <div className="flex items-center gap-2">
-          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-          <span className="text-sm">Ready</span>
-          <Badge
+          <div
+            className={`w-2 h-2 ${getColorFromDisplayStatus(display_status)} rounded-full`}
+          ></div>
+          <span className="text-sm">{capitalCase(display_status)}</span>
+          {/* <Badge
             variant="secondary"
             className="bg-gray-200 text-gray-700 text-xs"
           >
             Latest
-          </Badge>
+          </Badge> */}
         </div>
       </div>
 
-      {/* Time to Ready */}
       <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">
-          Time to Ready
-        </h3>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
         <div className="flex items-center gap-2">
           <Clock className="w-4 h-4 text-gray-500" />
-          <span className="text-sm">1m 3s</span>
-          <span className="text-sm text-gray-500">47m ago</span>
+          {circuit_json_build_completed_at && (
+            <span className="text-sm">
+              {total_build_duration_ms
+                ? `${Math.floor(total_build_duration_ms / 1000)}s`
+                : ""}
+            </span>
+          )}
+          <span className="text-sm text-gray-500">
+            {timeAgo(circuit_json_build_completed_at, "waiting...")}
+          </span>
         </div>
       </div>
 
@@ -48,10 +111,10 @@ export function PackageBuildDetailsPanel() {
         <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
         <div className="flex items-center gap-2">
           <Globe className="w-4 h-4 text-gray-500" />
-          <span className="text-sm">v1.0.3</span>
-          <Badge variant="default" className="bg-blue-600 text-white text-xs">
+          <span className="text-sm">{packageRelease.version}</span>
+          {/* <Badge variant="default" className="bg-blue-600 text-white text-xs">
             Current
-          </Badge>
+          </Badge> */}
         </div>
       </div>
 
@@ -64,7 +127,7 @@ export function PackageBuildDetailsPanel() {
       </div>
 
       {/* Source */}
-      <div>
+      {/* <div>
         <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
         <div className="space-y-2">
           <div className="flex items-center gap-2">
@@ -78,7 +141,7 @@ export function PackageBuildDetailsPanel() {
             </span>
           </div>
         </div>
-      </div>
+      </div> */}
     </div>
   )
 }

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Download, Github, Link } from "lucide-react"
+import { ChevronDown, Download, Github, Link, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -7,9 +7,12 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { useParams } from "wouter"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
+  const { packageRelease } = useCurrentPackageRelease()
 
   return (
     <div className="border-b border-gray-200 bg-white px-6 py-4">
@@ -39,35 +42,17 @@ export function PackageBuildHeader() {
               Report Issue
             </a>
           </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                size="sm"
-                className="bg-gray-900 text-white hover:bg-gray-800"
-              >
-                <Download className="w-4 h-4 mr-2" />
-                Download
-                <ChevronDown className="w-4 h-4 ml-2" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="bg-white border-gray-200"
-            >
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                Circuit JSON
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                PCB SVG
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                Schematic SVG
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
-                3D Model (stl)
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+          >
+            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+            Rebuild
+          </Button>
+          <DownloadButtonAndMenu
+            snippetUnscopedName={`${author}/${packageName}`}
+          />
         </div>
       </div>
     </div>

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -79,7 +79,7 @@ export default function MainContentHeader({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="h-9 bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
+              className="bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
             >
               <CodeIcon className="h-4 w-4 mr-1.5" />
               Code

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -76,7 +76,6 @@ export default function PackageHeader({
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
       `${window.location.origin}/api`
-    window.TSCIRCUIT_REGISTRY_TOKEN = sessionToken ?? ""
     // TODO: replace with production stripe checkout base url
     window.TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL