@tscircuit/fake-snippets 0.0.72 → 0.0.74

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

@@ -15,6 +15,7 @@ import {
   type Package,
   type PackageFile,
   type PackageRelease,
+  packageReleaseSchema,
   type Session,
   type Snippet,
   databaseSchema,
@@ -22,6 +23,7 @@ import {
   type snippetSchema,
 } from "./schema.ts"
 import { seed as seedFn } from "./seed"
+import { generateFsSha } from "../package_file/generate-fs-sha"
 
 export const createDatabase = ({ seed }: { seed?: boolean } = {}) => {
   const db = hoist(createStore(initializer))
@@ -271,10 +273,11 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       is_public: true,
       is_unlisted: false,
       latest_package_release_id: `package_release_${nextId}`,
+      latest_package_release_fs_sha: null,
     }
 
     // Create package release
-    const newPackageRelease = {
+    const newPackageRelease = packageReleaseSchema.parse({
       package_release_id: `package_release_${nextId}`,
       package_id: newPackage.package_id,
       version: "0.0.1",
@@ -284,7 +287,7 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       updated_at: currentTime,
       has_transpiled: true,
       transpilation_error: null,
-    }
+    })
 
     // Add all the files
     const packageFiles: PackageFile[] = []
@@ -341,6 +344,27 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       idCounter: fileIdCounter,
     }))
 
+    // Update fs_sha for the new package release
+    const dbState = get()
+    const releaseFiles = dbState.packageFiles.filter(
+      (pf) => pf.package_release_id === newPackageRelease.package_release_id,
+    )
+    const fsSha = generateFsSha(releaseFiles)
+
+    set((state) => ({
+      ...state,
+      packageReleases: state.packageReleases.map((pr) =>
+        pr.package_release_id === newPackageRelease.package_release_id
+          ? { ...pr, fs_sha: fsSha }
+          : pr,
+      ),
+      packages: state.packages.map((pkg) =>
+        pkg.latest_package_release_id === newPackageRelease.package_release_id
+          ? { ...pkg, latest_package_release_fs_sha: fsSha }
+          : pkg,
+      ),
+    }))
+
     // Return in the same format as create endpoint
     return {
       snippet_id: newPackage.package_id,
@@ -1215,16 +1239,19 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
     )
   },
   addPackageRelease: (
-    packageRelease: Omit<PackageRelease, "package_release_id">,
+    packageRelease: Omit<
+      z.input<typeof packageReleaseSchema>,
+      "package_release_id"
+    >,
   ): PackageRelease => {
-    const newPackageRelease = {
+    const parsed = packageReleaseSchema.parse({
       package_release_id: `package_release_${Date.now()}`,
       ...packageRelease,
-    }
+    })
     set((state) => ({
-      packageReleases: [...state.packageReleases, newPackageRelease],
+      packageReleases: [...state.packageReleases, parsed],
     }))
-    return newPackageRelease
+    return parsed
   },
   updatePackageRelease: (packageRelease: PackageRelease): void => {
     set((state) => ({
@@ -1287,4 +1314,28 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       (pf) => pf.package_release_id === packageReleaseId,
     )
   },
+  /**
+   * Update fs_sha for a package release based on its files
+   */
+  updatePackageReleaseFsSha: (packageReleaseId: string): void => {
+    const state = get()
+    const packageFiles = state.packageFiles.filter(
+      (pf) => pf.package_release_id === packageReleaseId,
+    )
+    const fsSha = generateFsSha(packageFiles)
+
+    set((currentState) => ({
+      ...currentState,
+      packageReleases: currentState.packageReleases.map((pr) =>
+        pr.package_release_id === packageReleaseId
+          ? { ...pr, fs_sha: fsSha }
+          : pr,
+      ),
+      packages: currentState.packages.map((pkg) =>
+        pkg.latest_package_release_id === packageReleaseId
+          ? { ...pkg, latest_package_release_fs_sha: fsSha }
+          : pkg,
+      ),
+    }))
+  },
 }))

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

@@ -176,6 +176,31 @@ export const packageReleaseSchema = z.object({
   has_transpiled: z.boolean().default(false),
   transpilation_error: z.string().nullable().optional(),
   fs_sha: z.string().nullable().optional(),
+  // Build Status and Display
+  display_status: z
+    .enum(["pending", "building", "successful", "failed"])
+    .default("pending"),
+  total_build_duration_ms: z.number().nullable().optional(),
+
+  // Transpilation Process
+  transpilation_display_status: z
+    .enum(["pending", "building", "successful", "failed"])
+    .default("pending"),
+  transpilation_in_progress: z.boolean().default(false),
+  transpilation_started_at: z.string().datetime().nullable().optional(),
+  transpilation_completed_at: z.string().datetime().nullable().optional(),
+  transpilation_logs: z.array(z.any()).default([]),
+  transpilation_is_stale: z.boolean().default(false),
+
+  // Circuit JSON Build Process
+  circuit_json_build_display_status: z
+    .enum(["pending", "building", "successful", "failed"])
+    .default("pending"),
+  circuit_json_build_in_progress: z.boolean().default(false),
+  circuit_json_build_started_at: z.string().datetime().nullable().optional(),
+  circuit_json_build_completed_at: z.string().datetime().nullable().optional(),
+  circuit_json_build_logs: z.array(z.any()).default([]),
+  circuit_json_build_is_stale: z.boolean().default(false),
 })
 export type PackageRelease = z.infer<typeof packageReleaseSchema>
 
@@ -219,6 +244,7 @@ export const packageSchema = z.object({
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
   ai_usage_instructions: z.string().nullable(),
+  latest_package_release_fs_sha: z.string().nullable().default(null),
   default_view: z
     .enum(["files", "3d", "pcb", "schematic"])
     .default("files")

package/fake-snippets-api/lib/package_file/generate-fs-sha.ts

@@ -0,0 +1,20 @@
+import md5 from "md5"
+import type { PackageFile } from "../db/schema"
+
+/**
+ * Generate an MD5 hash from package files content
+ * Uses the same format as existing tests: creates a map of file_path -> content_text
+ * and generates an MD5 hash of the JSON stringified map
+ */
+export function generateFsSha(packageFiles: PackageFile[]): string {
+  const fsMap: Record<string, string> = {}
+
+  packageFiles
+    .filter((file) => file.content_text) // Only include files with content
+    .forEach((file) => {
+      fsMap[file.file_path] = file.content_text || ""
+    })
+
+  const hash = md5(JSON.stringify(fsMap))
+  return `md5-${hash}`
+}

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

@@ -25,6 +25,7 @@ export const publicMapPackage = (internalPackage: {
   is_footprint: boolean
   is_private: boolean | null
   is_unlisted: boolean | null
+  latest_package_release_fs_sha: string | null
 }): zt.Package => {
   return {
     ...internalPackage,

package/fake-snippets-api/routes/api/package_files/create.ts

@@ -125,6 +125,9 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
   // Add to the test database
   ctx.db.addPackageFile(newPackageFile)
 
+  // Update fs_sha for the package release
+  ctx.db.updatePackageReleaseFsSha(packageReleaseId)
+
   return ctx.json({
     ok: true,
     package_file: newPackageFile,

package/fake-snippets-api/routes/api/package_files/create_or_update.ts

@@ -146,6 +146,9 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
       },
     )
 
+    // Update fs_sha for the package release
+    ctx.db.updatePackageReleaseFsSha(packageReleaseId)
+
     return ctx.json({
       ok: true,
       package_file,
@@ -181,6 +184,9 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
   // Add to the test database
   ctx.db.addPackageFile(newPackageFile)
 
+  // Update fs_sha for the package release
+  ctx.db.updatePackageReleaseFsSha(packageReleaseId)
+
   return ctx.json({
     ok: true,
     package_file: newPackageFile,

package/fake-snippets-api/routes/api/package_files/delete.ts

@@ -100,6 +100,9 @@ export default withRouteSpec({
     })
   }
 
+  // Update fs_sha for the package release
+  ctx.db.updatePackageReleaseFsSha(packageReleaseId)
+
   return ctx.json({
     ok: true,
   })

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

@@ -0,0 +1,32 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { packageReleaseSchema } from "fake-snippets-api/lib/db/schema"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    package_release_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    package_release: packageReleaseSchema,
+  }),
+})(async (req, ctx) => {
+  const { package_release_id } = req.jsonBody
+
+  const release = ctx.db.getPackageReleaseById(package_release_id)
+
+  if (!release) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  // In a real API this would trigger a rebuild. Here we simply return the release.
+  return ctx.json({
+    ok: true,
+    package_release: release,
+  })
+})

package/fake-snippets-api/routes/api/packages/create.ts

@@ -42,6 +42,7 @@ export default withRouteSpec({
     owner_org_id: ctx.auth.personal_org_id,
     owner_github_username: ctx.auth.github_username,
     latest_package_release_id: null,
+    latest_package_release_fs_sha: null,
     latest_version: null,
     license: null,
     website: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "type": "module",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "lint": "biome format .",
     "build:vite:analyze": "VITE_BUNDLE_ANALYZE=true vite build",
     "build:fake-api:tsup": "tsup-node ./fake-snippets-api/lib/index.ts --format esm --dts",
-    "build:fake-api:bundle": "winterspec bundle -o dist/bundle.js",
+    "build:fake-api:bundle": "winterspec2 bundle -o dist/bundle.js",
     "build:fake-api": "bun run build:fake-api:tsup && bun run build:fake-api:bundle && bun run build:fake-api:schema",
     "build:fake-api:schema": "tsup-node ./fake-snippets-api/lib/db/schema.ts --format esm --dts",
     "generate-images": "bun run scripts/generate-image-sizes.ts",
@@ -127,7 +127,7 @@
     "recharts": "^2.12.7",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "schematic-symbols": "^0.0.132",
+    "schematic-symbols": "^0.0.140",
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
@@ -145,7 +145,7 @@
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/core": "^0.0.428",
+    "@tscircuit/core": "^0.0.433",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
     "@tscircuit/runframe": "^0.0.507",
     "@types/babel__standalone": "^7.1.7",
@@ -161,7 +161,7 @@
     "@typescript/vfs": "^1.6.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "circuit-to-svg": "^0.0.131",
+    "circuit-to-svg": "^0.0.136",
     "get-port": "^7.1.0",
     "globals": "^15.9.0",
     "he": "^1.2.0",
@@ -175,11 +175,11 @@
     "shiki": "^3.2.1",
     "tailwindcss": "^3.4.13",
     "terser": "^5.27.0",
-    "tsup": "^8.3.5",
+    "tsup": "^8.5.0",
     "typescript": "^5.6.3",
     "vite": "^6.3.4",
     "vite-plugin-image-optimizer": "^1.1.8",
-    "winterspec": "^0.0.94",
+    "winterspec": "^0.0.107",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",
     "zustand-hoist": "^2.0.1"

package/src/App.tsx

@@ -68,6 +68,7 @@ const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
+const PackageBuildsPage = lazyImport(() => import("@/pages/package-builds"))
 const TrendingPage = lazyImport(() => import("@/pages/trending"))
 const PackageEditorPage = lazyImport(async () => {
   const [editorModule] = await Promise.all([
@@ -124,6 +125,10 @@ function App() {
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
+            <Route
+              path="/:author/:packageName/builds"
+              component={PackageBuildsPage}
+            />
             <Route component={lazyImport(() => import("@/pages/404"))} />
           </Switch>
         </Suspense>

package/src/components/JLCPCBImportDialog.tsx

@@ -50,7 +50,7 @@ export function JLCPCBImportDialog({
     setHasBeenImportedToAccountAlready(false)
 
     try {
-      const apiUrl = `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`
+      const apiUrl = `/packages/get?name=${session?.github_username}/${partNumber}`
 
       const existingPackageRes = await axios.get(apiUrl, {
         validateStatus: (status) => true,

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -0,0 +1,56 @@
+"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"
+
+export const PackageBuildDetailsPage = () => {
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
+
+  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="1m 15s"
+            isOpen={openSections.summary}
+            onToggle={() => toggleSection("summary")}
+          />
+
+          <CollapsibleSection
+            title="Circuit JSON Build Logs"
+            duration="2m 29s"
+            isOpen={openSections.logs}
+            onToggle={() => toggleSection("logs")}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,11 @@
+export function BuildPreviewContent() {
+  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>
+  )
+}

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

@@ -0,0 +1,70 @@
+import type React from "react"
+import { ChevronRight, CheckCircle2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+interface CollapsibleSectionProps {
+  title: string
+  duration?: string
+  isOpen: boolean
+  onToggle: () => void
+  badges?: Array<{
+    text: string
+    icon?: React.ReactNode
+    variant?: "default" | "secondary"
+    className?: string
+  }>
+  children?: React.ReactNode
+}
+
+export function CollapsibleSection({
+  title,
+  duration,
+  isOpen,
+  onToggle,
+  badges = [],
+  children,
+}: CollapsibleSectionProps) {
+  return (
+    <Collapsible open={isOpen} onOpenChange={onToggle}>
+      <CollapsibleTrigger asChild>
+        <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
+          <div className="flex items-center gap-2">
+            <ChevronRight
+              className={`w-4 h-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+            />
+            <span className="font-medium">{title}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {badges.map((badge, index) => (
+              <Badge
+                key={index}
+                variant={badge.variant || "secondary"}
+                className={
+                  badge.className ||
+                  "bg-gray-200 text-gray-700 flex items-center gap-1"
+                }
+              >
+                {badge.icon}
+                {badge.text}
+              </Badge>
+            ))}
+            {duration && (
+              <span className="text-sm text-gray-600">{duration}</span>
+            )}
+            <CheckCircle2 className="w-4 h-4 text-green-500" />
+          </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...`}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export function PackageBuildDetailsPanel() {
+  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">imrishabh18</span>
+          <span className="text-sm text-gray-500">48m ago</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 bg-green-500 rounded-full"></div>
+          <span className="text-sm">Ready</span>
+          <Badge
+            variant="secondary"
+            className="bg-gray-200 text-gray-700 text-xs"
+          >
+            Latest
+          </Badge>
+        </div>
+      </div>
+
+      {/* Time to Ready */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">
+          Time to Ready
+        </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>
+        </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">v1.0.3</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/package-build-header.tsx

@@ -0,0 +1,75 @@
+import { ChevronDown, Download, Github, Link } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useParams } from "wouter"
+
+export function PackageBuildHeader() {
+  const { author, packageName } = useParams()
+
+  return (
+    <div className="border-b border-gray-200 bg-white px-6 py-4">
+      <div className="flex items-center justify-between container mx-auto">
+        <h1 className="text-2xl font-semibold">
+          Package Build
+          <a
+            className="ml-2 bg-gray-100 px-2 py-1 rounded font-mono text-blue-600"
+            href={`/${author}/${packageName}`}
+          >
+            {author}/{packageName}
+          </a>
+        </h1>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+            asChild
+          >
+            <a
+              href="https://github.com/tscircuit/tscircuit.com/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+              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>
+        </div>
+      </div>
+    </div>
+  )
+}