@tscircuit/fake-snippets 0.0.74 → 0.0.76

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

@@ -2,6 +2,11 @@ import * as ZT from "fake-snippets-api/lib/db/schema"
 
 export const publicMapPackageRelease = (
   internal_package_release: ZT.PackageRelease,
+  options: {
+    include_logs?: boolean
+  } = {
+    include_logs: false,
+  },
 ): ZT.PackageRelease => {
   return {
     ...internal_package_release,
@@ -9,5 +14,11 @@ export const publicMapPackageRelease = (
     circuit_json_build_error_last_updated_at:
       internal_package_release.circuit_json_build_error_last_updated_at,
     circuit_json_build_error: internal_package_release.circuit_json_build_error,
+    transpilation_logs: options.include_logs
+      ? internal_package_release.transpilation_logs
+      : [],
+    circuit_json_build_logs: options.include_logs
+      ? internal_package_release.circuit_json_build_logs
+      : [],
   }
 }

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

@@ -6,6 +6,9 @@ import { z } from "zod"
 export default withRouteSpec({
   methods: ["POST"],
   auth: "none",
+  commonParams: z.object({
+    include_logs: z.boolean().optional().default(false),
+  }),
   jsonBody: z.object({
     package_release_id: z.string().optional(),
     package_name_with_version: z.string().optional(),
@@ -115,6 +118,8 @@ export default withRouteSpec({
 
   return ctx.json({
     ok: true,
-    package_release: publicMapPackageRelease(foundRelease),
+    package_release: publicMapPackageRelease(foundRelease, {
+      include_logs: req.commonParams?.include_logs,
+    }),
   })
 })

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.76",
   "type": "module",
   "repository": {
     "type": "git",
@@ -70,7 +70,6 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/eval": "^0.0.198",
     "@tscircuit/footprinter": "^0.0.169",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",

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>
   )
 }