@tscircuit/fake-snippets 0.0.73 → 0.0.75

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

@@ -0,0 +1,114 @@
+"use client"
+
+import { useState } from "react"
+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,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 text-gray-900">
+      <PackageBuildHeader />
+
+      <div className="px-6 py-6 container mx-auto">
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 items-start">
+          {/* Preview Section */}
+          <div className="lg:col-span-2">
+            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center max-h-[420px]">
+              <BuildPreviewContent />
+            </div>
+          </div>
+
+          {/* Details Panel */}
+          <PackageBuildDetailsPanel />
+        </div>
+
+        {/* Collapsible Sections */}
+        <div className="space-y-4 mb-8">
+          <CollapsibleSection
+            title="Transpilation Logs"
+            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={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="Deployment 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

@@ -0,0 +1,147 @@
+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 */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
+        <div className="flex items-center gap-2">
+          <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">{author}</span>
+          <span className="text-sm text-gray-500">
+            {timeAgo(packageRelease?.created_at, "")}
+          </span>
+        </div>
+      </div>
+
+      {/* Status */}
+      <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 ${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> */}
+        </div>
+      </div>
+
+      <div>
+        <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" />
+          {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>
+
+      {/* Version */}
+      <div>
+        <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">{packageRelease.version}</span>
+          {/* <Badge variant="default" className="bg-blue-600 text-white text-xs">
+            Current
+          </Badge> */}
+        </div>
+      </div>
+
+      {/* Outputs */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
+        <div>
+          <span className="text-sm text-gray-400">None</span>
+        </div>
+      </div>
+
+      {/* Source */}
+      {/* <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">
+            <GitBranch className="w-4 h-4 text-gray-500" />
+            <span className="text-sm">main</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <GitCommit className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-500">
+              edfdc67 support empty file creation (#356)
+            </span>
+          </div>
+        </div>
+      </div> */}
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/{deployment-header.tsx → 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 DeploymentHeader() {
+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 DeploymentHeader() {
               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

package/src/components/dialogs/pcb-download-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react"
+import { Button } from "../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../ui/dialog"
+import { Label } from "../ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { Checkbox } from "../ui/checkbox"
+import { AnyCircuitElement } from "circuit-json"
+import { createUseDialog } from "./create-use-dialog"
+import {
+  downloadPcbSvg,
+  DownloadPcbSvgOptions,
+} from "@/lib/download-fns/download-pcb-svg"
+
+interface PcbDownloadDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  circuitJson: AnyCircuitElement[]
+  fileName: string
+}
+
+export const PcbDownloadDialog = ({
+  open,
+  onOpenChange,
+  circuitJson,
+  fileName,
+}: PcbDownloadDialogProps) => {
+  const [layer, setLayer] = useState<"all" | "top" | "bottom">("all")
+  const [drawPadding, setDrawPadding] = useState(true)
+  const [transparentBg, setTransparentBg] = useState(false)
+  const [matchAspectRatio, setMatchAspectRatio] = useState(false)
+
+  const handleDownload = () => {
+    const options: DownloadPcbSvgOptions = {
+      layer,
+      drawPaddingOutsideBoard: drawPadding,
+      backgroundColor: transparentBg ? "transparent" : "#000",
+      matchAspectRatio,
+    }
+    downloadPcbSvg(circuitJson, fileName, options)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Download PCB SVG</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="layer" className="text-right">
+              Layer
+            </Label>
+            <Select value={layer} onValueChange={(v) => setLayer(v as any)}>
+              <SelectTrigger id="layer" className="col-span-3">
+                <SelectValue placeholder="Layer" />
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                <SelectItem value="all">All</SelectItem>
+                <SelectItem value="top">Top</SelectItem>
+                <SelectItem value="bottom">Bottom</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="padding"
+              checked={drawPadding}
+              onCheckedChange={(v) => setDrawPadding(Boolean(v))}
+            />
+            <Label htmlFor="padding">Draw Padding and Board Outline</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="transparentBg"
+              checked={transparentBg}
+              onCheckedChange={(v) => setTransparentBg(Boolean(v))}
+            />
+            <Label htmlFor="transparentBg">Transparent Background</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="matchAspectRatio"
+              checked={matchAspectRatio}
+              onCheckedChange={(v) => setMatchAspectRatio(Boolean(v))}
+            />
+            <Label htmlFor="matchAspectRatio">Match Aspect Ratio</Label>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleDownload}>Download</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const usePcbDownloadDialog = createUseDialog(PcbDownloadDialog)