@tscircuit/fake-snippets 0.0.83 → 0.0.84

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

@@ -0,0 +1,22 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { aiReviewSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonResponse: z.object({
+    ai_review: aiReviewSchema,
+  }),
+})(async (req, ctx) => {
+  const ai_review = ctx.db.addAiReview({
+    ai_review_text: null,
+    start_processing_at: null,
+    finished_processing_at: null,
+    processing_error: null,
+    created_at: new Date().toISOString(),
+    display_status: "pending",
+  })
+
+  return ctx.json({ ai_review })
+})

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

@@ -0,0 +1,24 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { aiReviewSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  queryParams: z.object({
+    ai_review_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    ai_review: aiReviewSchema,
+  }),
+})(async (req, ctx) => {
+  const { ai_review_id } = req.query
+  const ai_review = ctx.db.getAiReviewById(ai_review_id)
+  if (!ai_review) {
+    return ctx.error(404, {
+      error_code: "ai_review_not_found",
+      message: "AI review not found",
+    })
+  }
+  return ctx.json({ ai_review })
+})

package/fake-snippets-api/routes/api/ai_reviews/list.ts

@@ -0,0 +1,14 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { aiReviewSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  jsonResponse: z.object({
+    ai_reviews: z.array(aiReviewSchema),
+  }),
+})(async (req, ctx) => {
+  const ai_reviews = ctx.db.listAiReviews()
+  return ctx.json({ ai_reviews })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,7 +86,7 @@
     "circuit-json-to-bom-csv": "^0.0.6",
     "circuit-json-to-gerber": "^0.0.21",
     "circuit-json-to-pnp-csv": "^0.0.6",
-    "circuit-json-to-readable-netlist": "^0.0.8",
+    "circuit-json-to-readable-netlist": "^0.0.13",
     "circuit-json-to-tscircuit": "^0.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -145,8 +145,9 @@
     "@playwright/test": "^1.48.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.433",
+    "@tscircuit/eval": "^0.0.227",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.562",
+    "@tscircuit/runframe": "^0.0.578",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/ContextProviders.tsx

@@ -64,7 +64,7 @@ export const ContextProviders = ({ children }: any) => {
       <HelmetProvider>
         <PostHogIdentifier />
         {children}
-        <Toaster />
+        <Toaster position="bottom-right" />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/components/Header2.tsx

@@ -15,18 +15,15 @@ const SearchButtonComponent = () => {
   return (
     <div className="relative">
       {isExpanded ? (
-        <div className="flex items-center gap-2">
-          <div className="w-32 bg-white">
-            <SearchComponent autofocus />
+        <div className="flex items-center gap-2 ml-8">
+          <div className="absolute -top-4 right-3 bg-white">
+            <SearchComponent
+              autofocus
+              closeOnClick={() => {
+                setIsExpanded(false)
+              }}
+            />
           </div>
-          {/* <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setIsExpanded(false)}
-            className="h-8 w-8"
-          >
-            <X className="h-4 w-4" />
-          </Button> */}
         </div>
       ) : (
         <>
@@ -58,13 +55,6 @@ export const Header2 = () => {
   const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
   return (
     <>
-      {/* <div className="absolute left-0 top-0 z-[9999999]">
-        <div className="hidden xl:block">xl</div>
-        <div className="hidden lg:block xl:hidden">lg</div>
-        <div className="hidden md:block lg:hidden">md</div>
-        <div className="hidden sm:block md:hidden">sm</div>
-        <div className="hidden xs:block sm:hidden">xs</div>
-      </div> */}
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
           <div className="flex items-center gap-2">

package/src/components/SearchComponent.tsx

@@ -6,10 +6,12 @@ import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { PrefetchPageLink } from "./PrefetchPageLink"
+import { CircuitBoard } from "lucide-react"
 
 interface SearchComponentProps {
   onResultsFetched?: (results: any[]) => void
   autofocus?: boolean
+  closeOnClick?: () => void
 }
 
 const LinkWithNewTabHandling = ({
@@ -45,13 +47,14 @@ const LinkWithNewTabHandling = ({
 const SearchComponent: React.FC<SearchComponentProps> = ({
   onResultsFetched,
   autofocus = false,
+  closeOnClick,
 }) => {
   const [searchQuery, setSearchQuery] = useState("")
   const [showResults, setShowResults] = useState(false)
   const axios = useAxios()
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
-  const [location] = useLocation()
+  const [location, setLocation] = useLocation()
   const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
 
   const { data: searchResults, isLoading } = useQuery(
@@ -71,7 +74,9 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault()
-    setShowResults(!!searchQuery)
+    if (searchQuery.trim()) {
+      setLocation(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
+    }
   }
 
   // Focus input on mount
@@ -91,18 +96,31 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       }
     }
 
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setShowResults(false)
+        if (closeOnClick) {
+          closeOnClick()
+        }
+      }
+    }
+
     document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("keydown", handleEscapeKey)
     return () => {
       document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("keydown", handleEscapeKey)
     }
-  }, [])
+  }, [closeOnClick])
 
   const shouldOpenInNewTab = location === "/editor" || location === "/ai"
   const shouldOpenInEditor = location === "/editor" || location === "/ai"
 
   return (
-    <form onSubmit={handleSearch} className="relative">
+    <form onSubmit={handleSearch} autoComplete="off" className="relative w-44">
       <Input
+        autoComplete="off"
+        spellCheck={false}
         ref={inputRef}
         type="search"
         placeholder="Search"
@@ -112,12 +130,20 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
           setSearchQuery(e.target.value)
           setShowResults(!!e.target.value)
         }}
+        onKeyDown={(e) => {
+          if (e.key === "Backspace" && !searchQuery && closeOnClick) {
+            closeOnClick()
+          }
+        }}
         aria-label="Search packages"
         role="searchbox"
       />
       {isLoading && (
-        <div className="absolute top-full left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 p-2 flex items-center justify-center space-x-2">
-          <span className="text-gray-500 text-sm">Loading...</span>
+        <div className="absolute top-full w-lg left-0 right-0 mt-1 bg-white shadow-lg rounded-lg border w-80 grid place-items-center py-4 z-10 p-3">
+          <div className="flex items-center space-x-2">
+            <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+            <span className="text-gray-600 text-sm">Searching...</span>
+          </div>
         </div>
       )}
 
@@ -139,12 +165,24 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
                     shouldOpenInNewTab={shouldOpenInNewTab}
                     className="flex"
                   >
-                    <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm">
+                    <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
                       <img
                         src={`${snippetsBaseApiUrl}/snippets/images/${pkg.name}/pcb.svg`}
                         alt={`PCB preview for ${pkg.name}`}
                         className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
+                        onError={(e) => {
+                          e.currentTarget.style.display = "none"
+                          e.currentTarget.nextElementSibling?.classList.remove(
+                            "hidden",
+                          )
+                          e.currentTarget.nextElementSibling?.classList.add(
+                            "flex",
+                          )
+                        }}
                       />
+                      <div className="w-12 h-12 hidden items-center justify-center">
+                        <CircuitBoard className="w-6 h-6 text-gray-300" />
+                      </div>
                     </div>
                     <div className="flex-grow">
                       <div className="font-medium text-blue-600 break-words text-xs">
@@ -161,7 +199,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
               ))}
             </ul>
           ) : (
-            <Alert variant="default" className="p-4">
+            <Alert variant="default" className="p-4 text-center">
               No results found for "{searchQuery}"
             </Alert>
           )}

package/src/components/ViewSnippetHeader.tsx

@@ -63,18 +63,21 @@ export default function ViewSnippetHeader() {
           onSuccess?.(forkedSnippet)
         },
         onError: (error: any) => {
-          // Check if the error message contains 'already exists'
-          if (error.message?.includes("already forked")) {
+          const message =
+            error?.data?.error?.message ||
+            error.message ||
+            "Failed to fork snippet. Please try again."
+          if (message.includes("already forked")) {
             toast({
               title: "Snippet already exists",
-              description: error.message,
-              variant: "destructive", // You can style this variant differently
+              description: message,
+              variant: "destructive",
             })
           } else {
             toast({
               title: "Error",
-              description: "Failed to fork snippet. Please try again.",
-              variant: "destructive", // Use destructive variant for errors
+              description: message,
+              variant: "destructive",
             })
           }
           console.error("Error forking snippet:", error)

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import { useState } from "react"
 import {
   Select,
   SelectContent,
@@ -110,12 +110,12 @@ export const EditPackageDetailsDialog = ({
 
       const response = await axios.post("/packages/update", {
         package_id: packageId,
-        description: formData.description,
-        website: formData.website,
+        description: formData.description.trim(),
+        website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
         ...(formData.unscopedPackageName !== unscopedPackageName && {
-          name: formData.unscopedPackageName,
+          name: formData.unscopedPackageName.trim(),
         }),
       })
       if (response.status !== 200)
@@ -148,12 +148,7 @@ export const EditPackageDetailsDialog = ({
           })
         }
       }
-      console.log(
-        "formData.unscopedPackageName",
-        formData.unscopedPackageName,
-        "unscopedPackageName",
-        unscopedPackageName,
-      )
+
       if (formData.unscopedPackageName !== unscopedPackageName) {
         // Use router for client-side navigation
         window.history.replaceState(

package/src/hooks/use-fork-package-mutation.ts

@@ -42,16 +42,17 @@ export const useForkPackageMutation = ({
         onSuccess?.(result)
       },
       onError: (error: any) => {
-        if (error.data.error_code === "cannot_fork_own_package") {
+        const message = error?.data?.error?.message
+        if (error?.data?.error_code === "cannot_fork_own_package") {
           toast({
             title: "Cannot Fork Package",
-            description: "You cannot fork your own package.",
+            description: message || "You cannot fork your own package.",
           })
           return
         }
         toast({
           title: "Error",
-          description: "Failed to fork package. Please try again.",
+          description: message || "Failed to fork package. Please try again.",
           variant: "destructive",
         })
       },

package/src/hooks/use-sign-in.ts

@@ -7,16 +7,18 @@ export const useSignIn = () => {
   const isUsingFakeApi = useIsUsingFakeApi()
   const setSession = useGlobalStore((s) => s.setSession)
   return () => {
+    const currentUrl = window.location.href.replace("127.0.0.1", "localhost")
+    const nextUrl = `${window.location.origin.replace("127.0.0.1", "localhost")}/authorize?redirect=${encodeURIComponent(currentUrl)}`
     if (!isUsingFakeApi) {
-      const nextUrl = window.location.origin.replace("127.0.0.1", "localhost")
-      window.location.href = `${snippetsBaseApiUrl}/internal/oauth/github/authorize?next=${nextUrl}/authorize`
+      window.location.href = `${snippetsBaseApiUrl}/internal/oauth/github/authorize?next=${encodeURIComponent(nextUrl)}`
     } else {
-      setSession({
-        account_id: "account-1234",
-        github_username: "testuser",
-        token: "1234",
-        session_id: "session-1234",
-      })
+      window.location.href = nextUrl
+      // setSession({
+      //   account_id: "account-1234",
+      //   github_username: "testuser",
+      //   token: "1234",
+      //   session_id: "session-1234",
+      // })
     }
   }
 }

package/src/hooks/useFileManagement.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, useCallback } from "react"
+import { useEffect, useMemo, useState, useCallback, useRef } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
 import {
   DEFAULT_CODE,
@@ -6,11 +6,7 @@ import {
   PackageFile,
 } from "../components/package-port/CodeAndPreview"
 import { Package } from "fake-snippets-api/lib/db/schema"
-import {
-  usePackageFile,
-  usePackageFileById,
-  usePackageFiles,
-} from "./use-package-files"
+import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
 import { usePackageFilesLoader } from "./usePackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
@@ -19,6 +15,7 @@ import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
 import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
 import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
+import { createSnippetUrl } from "@tscircuit/create-snippet-url"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -55,17 +52,19 @@ export function useFileManagement({
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const loggedInUser = useGlobalStore((s) => s.session)
   const { toast } = useToast()
+  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const {
     data: packageFilesWithContent,
     isLoading: isLoadingPackageFilesWithContent,
   } = usePackageFilesLoader(currentPackage)
   const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
     usePackageFiles(currentPackage?.latest_package_release_id)
-
   const initialCodeContent = useMemo(() => {
     return (
-      templateCode ??
-      (decodeUrlHashToText(window.location.toString()) || DEFAULT_CODE)
+      (!!decodeUrlHashToText(window.location.toString()) &&
+      decodeUrlHashToText(window.location.toString()) !== ""
+        ? decodeUrlHashToText(window.location.toString())
+        : templateCode) || DEFAULT_CODE
     )
   }, [templateCode, currentPackage])
   const manualEditsFileContent = useMemo(() => {
@@ -193,7 +192,8 @@ export function useFileManagement({
       { path: newFileName, content: "" },
     ]
     setLocalFiles(updatedFiles)
-    onFileSelect(newFileName)
+    // immediately select the newly created file
+    setCurrentFile(newFileName)
     return {
       newFileCreated: true,
     }
@@ -233,14 +233,76 @@ export function useFileManagement({
     })
   }
 
+  const saveToUrl = useCallback(
+    (files: PackageFile[]) => {
+      if (isLoggedIn || !files.length) return
+
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+
+      debounceTimeoutRef.current = setTimeout(() => {
+        try {
+          const mainFile =
+            files.find((f) => f.path === currentFile) ||
+            files.find((f) => f.path === "index.tsx") ||
+            files[0]
+
+          if (mainFile.content.length > 50000) return
+
+          const snippetUrl = createSnippetUrl(mainFile.content)
+          if (typeof snippetUrl !== "string") return
+
+          const currentUrl = new URL(window.location.href)
+          const urlParts = snippetUrl.split("#")
+
+          if (urlParts.length > 1 && urlParts[1]) {
+            const newHash = urlParts[1]
+            if (newHash.length > 8000) return
+
+            currentUrl.hash = newHash
+            const finalUrl = currentUrl.toString()
+
+            if (finalUrl.length <= 32000) {
+              window.history.replaceState(null, "", finalUrl)
+            }
+          }
+        } catch (error) {
+          console.warn("Failed to save code to URL:", error)
+        }
+      }, 1000)
+    },
+    [isLoggedIn, currentFile],
+  )
+
+  useEffect(() => {
+    if (!isLoggedIn && localFiles.length > 0) {
+      saveToUrl(localFiles)
+    }
+
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+    }
+  }, [localFiles, saveToUrl, isLoggedIn])
+
   const saveFiles = () => {
     if (!isLoggedIn) {
+      // For non-logged-in users, trigger immediate URL save
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+      saveToUrl(localFiles)
+
       toast({
-        title: "Not Logged In",
-        description: "You must be logged in to save your package.",
+        title: "Code Saved to URL",
+        description:
+          "Your code has been saved to the URL. Bookmark this page to access your code later.",
       })
       return
     }
+
     if (!currentPackage) {
       openNewPackageSaveDialog()
       return

package/src/hooks/useForkPackageMutation.ts

@@ -38,9 +38,10 @@ export const useForkPackageMutation = ({
       },
       onError: (error: any) => {
         console.error("Error forking package:", error)
+        const message = error?.data?.error?.message
         toast({
           title: "Error",
-          description: "Failed to fork package. Please try again.",
+          description: message || "Failed to fork package. Please try again.",
           variant: "destructive",
         })
       },

package/src/hooks/useForkSnippetMutation.ts

@@ -41,9 +41,10 @@ export const useForkSnippetMutation = ({
       },
       onError: (error: any) => {
         console.error("Error forking snippet:", error)
+        const message = error?.data?.error?.message
         toast({
           title: "Error",
-          description: "Failed to fork snippet. Please try again.",
+          description: message || "Failed to fork snippet. Please try again.",
           variant: "destructive",
         })
       },