@tscircuit/fake-snippets 0.0.88 → 0.0.89

package/src/components/SearchComponent.tsx

@@ -184,7 +184,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
         role="searchbox"
       />
       {isLoading && (
-        <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="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-50 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>
@@ -195,7 +195,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       {showResults && searchResults && (
         <div
           ref={resultsRef}
-          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 w-80 max-h-screen overflow-y-auto overflow-x-visible"
+          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
         >
           {searchResults.length > 0 ? (
             <ul className="divide-y divide-gray-200">

package/src/components/SuspenseRunFrame.tsx

@@ -9,8 +9,20 @@ export const SuspenseRunFrame = (
   props: React.ComponentProps<typeof RunFrame>,
 ) => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <RunFrame {...props} />
+    <Suspense
+      fallback={
+        <div className="flex justify-center items-center h-full">
+          <div className="w-48">
+            <div className="loading">
+              <div className="loading-bar"></div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <div className="h-[98vh]">
+        <RunFrame {...props} />
+      </div>
     </Suspense>
   )
 }

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -1,12 +1,22 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Edit, FileText, Code, Copy, CopyCheck } from "lucide-react"
+import {
+  Edit,
+  FileText,
+  Code,
+  Copy,
+  CopyCheck,
+  Loader2,
+  RefreshCcwIcon,
+} from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/ui/button"
 import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
 import { ShikiCodeViewer } from "./ShikiCodeViewer"
 import { SparklesIcon } from "lucide-react"
 import MarkdownViewer from "./markdown-viewer"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 interface PackageFile {
   package_file_id: string
@@ -20,7 +30,7 @@ interface ImportantFilesViewProps {
   importantFiles?: PackageFile[]
   isLoading?: boolean
   onEditClicked?: (file_path?: string | null) => void
-
+  packageAuthorOwner?: string | null
   aiDescription?: string
   aiUsageInstructions?: string
   aiReviewText?: string | null
@@ -37,12 +47,20 @@ export default function ImportantFilesView({
   onRequestAiReview,
   isLoading = false,
   onEditClicked,
+  packageAuthorOwner,
 }: ImportantFilesViewProps) {
   const [activeFilePath, setActiveFilePath] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<string | null>(null)
   const [copyState, setCopyState] = useState<"copy" | "copied">("copy")
+  const { session: user } = useGlobalStore()
 
   const handleCopy = () => {
+    if (activeTab === "ai-review" && aiReviewText) {
+      navigator.clipboard.writeText(aiReviewText || "")
+      setCopyState("copied")
+      setTimeout(() => setCopyState("copy"), 500)
+      return
+    }
     navigator.clipboard.writeText(activeFileContent)
     setCopyState("copied")
     setTimeout(() => setCopyState("copy"), 500)
@@ -131,20 +149,59 @@ export default function ImportantFilesView({
   }
 
   const renderAiReviewContent = () => {
+    const isOwner = user?.github_username === packageAuthorOwner
+
     if (!aiReviewText && !aiReviewRequested) {
       return (
-        <button
-          className="text-sm text-blue-600 dark:text-[#58a6ff] underline"
-          onClick={onRequestAiReview}
-        >
-          Request AI Review
-        </button>
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <div className="text-center space-y-4 max-w-md">
+            <div className="flex justify-center">
+              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                <SparklesIcon className="h-6 w-6 text-blue-600" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-600">
+                Get detailed feedback and suggestions for improving your package
+                from our AI assistant.
+              </p>
+            </div>
+            {isOwner ? (
+              <Button
+                onClick={onRequestAiReview}
+                size="sm"
+                className="bg-blue-600 hover:bg-blue-700 text-white shadow-sm transition-all duration-200 hover:shadow-md"
+              >
+                <SparklesIcon className="h-4 w-4 mr-2" />
+                Request AI Review
+              </Button>
+            ) : (
+              <p className="text-sm text-gray-500">
+                Only the package owner can generate an AI review
+              </p>
+            )}
+          </div>
+        </div>
       )
     }
 
     if (!aiReviewText && aiReviewRequested) {
       return (
-        <p className="text-sm">AI review requested. Please check back later.</p>
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <div className="text-center space-y-4 max-w-md">
+            <div className="flex justify-center">
+              <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
+                <Loader2 className="h-6 w-6 text-gray-600 animate-spin" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-600">
+                Our AI is analyzing your package. This usually takes a few
+                minutes. Please check back shortly.
+              </p>
+            </div>
+          </div>
+        </div>
       )
     }
 
@@ -162,6 +219,7 @@ export default function ImportantFilesView({
           package_release_id: partialActiveFile.package_release_id,
         }
       : null,
+    { keepPreviousData: true },
   )
   const activeFileContent = activeFileFull?.content_text || ""
 
@@ -210,6 +268,8 @@ export default function ImportantFilesView({
     )
   }
 
+  const isOwner = user?.github_username === packageAuthorOwner
+
   return (
     <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
       <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
@@ -268,7 +328,8 @@ export default function ImportantFilesView({
           ))}
         </div>
         <div className="ml-auto flex items-center">
-          {activeFileContent && (
+          {((activeTab === "file" && activeFileContent) ||
+            (activeTab === "ai-review" && aiReviewText)) && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md transition-all duration-300"
               onClick={handleCopy}
@@ -281,13 +342,25 @@ export default function ImportantFilesView({
               <span className="sr-only">Copy</span>
             </button>
           )}
-          <button
-            className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
-            onClick={() => onEditClicked?.(activeFilePath)}
-          >
-            <Edit className="h-4 w-4" />
-            <span className="sr-only">Edit</span>
-          </button>
+          {activeTab === "ai-review" && aiReviewText && isOwner && (
+            <button
+              className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md ml-1"
+              onClick={onRequestAiReview}
+              title="Re-request AI Review"
+            >
+              <RefreshCcwIcon className="h-4 w-4" />
+              <span className="sr-only">Re-request AI Review</span>
+            </button>
+          )}
+          {activeTab === "file" && (
+            <button
+              className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
+              onClick={() => onEditClicked?.(activeFilePath)}
+            >
+              <Edit className="h-4 w-4" />
+              <span className="sr-only">Edit</span>
+            </button>
+          )}
         </div>
       </div>
       <div className="p-4 bg-white dark:bg-[#0d1117]">

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

@@ -12,6 +12,7 @@ import {
   Pencil,
   GitForkIcon,
   DownloadIcon,
+  Package2,
 } from "lucide-react"
 import MainContentViewSelector from "./main-content-view-selector"
 import {
@@ -24,8 +25,11 @@ import {
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 import { useLocation } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageFile } from "fake-snippets-api/lib/db/schema"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import { useDownloadZip } from "@/hooks/use-download-zip"
 interface MainContentHeaderProps {
+  packageFiles: PackageFile[]
   activeView: string
   onViewChange: (view: string) => void
   onExportClicked?: (exportType: string) => void
@@ -33,6 +37,7 @@ interface MainContentHeaderProps {
 }
 
 export default function MainContentHeader({
+  packageFiles,
   activeView,
   onViewChange,
   packageInfo,
@@ -59,6 +64,14 @@ export default function MainContentHeader({
     setTimeout(() => setCopyCloneState("copy"), 2000)
   }
 
+  const { downloadZip } = useDownloadZip()
+
+  const handleDownloadZip = () => {
+    if (packageInfo && packageFiles) {
+      downloadZip(packageInfo, packageFiles)
+    }
+  }
+
   const { circuitJson } = useCurrentPackageCircuitJson()
 
   return (
@@ -70,7 +83,9 @@ export default function MainContentHeader({
 
       <div className="flex space-x-2">
         <DownloadButtonAndMenu
-          snippetUnscopedName={packageInfo?.unscoped_name}
+          unscopedName={packageInfo?.unscoped_name}
+          desiredImageType={activeView}
+          author={packageInfo?.owner_github_username ?? undefined}
           circuitJson={circuitJson}
         />
 
@@ -96,6 +111,15 @@ export default function MainContentHeader({
                 Edit Online
               </a>
             </DropdownMenuItem>
+
+            <DropdownMenuItem
+              disabled={!Boolean(packageInfo)}
+              onClick={handleDownloadZip}
+              className="cursor-pointer p-2 py-4"
+            >
+              <Package2 className="h-4 w-4 mx-3" />
+              Download ZIP
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
 
             {/* Install Option */}

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -41,8 +41,8 @@ const MobileSidebar = ({
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
-    packageInfo?.creator_account_id ===
-      useGlobalStore((s) => s.session?.account_id)
+    packageInfo?.owner_github_username ===
+      useGlobalStore((s) => s.session?.github_username)
 
   const {
     Dialog: EditPackageDetailsDialog,

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -24,6 +24,9 @@ import { useLocation } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
+import { useAiReview } from "@/hooks/use-ai-review"
+import { useQueryClient } from "react-query"
+import SidebarReleasesSection from "./sidebar-releases-section"
 
 interface PackageFile {
   package_file_id: string
@@ -51,14 +54,38 @@ export default function RepoPageContent({
   onEditClicked,
 }: RepoPageContentProps) {
   const [activeView, setActiveView] = useState<string>("files")
+  const [pendingAiReviewId, setPendingAiReviewId] = useState<string | null>(
+    null,
+  )
+  const queryClient = useQueryClient()
+  const { data: aiReview } = useAiReview(pendingAiReviewId, {
+    refetchInterval: (data) => (data && !data.ai_review_text ? 2000 : false),
+  })
+  useEffect(() => {
+    if (aiReview?.ai_review_text) {
+      queryClient.invalidateQueries(["packageRelease"])
+      setPendingAiReviewId(null)
+    }
+  }, [aiReview?.ai_review_text, queryClient])
   const session = useGlobalStore((s) => s.session)
   const { circuitJson, isLoading: isCircuitJsonLoading } =
     useCurrentPackageCircuitJson()
-  const { mutate: requestAiReview } = useRequestAiReviewMutation()
+  const { mutate: requestAiReview, isLoading: isRequestingAiReview } =
+    useRequestAiReviewMutation({
+      onSuccess: (_packageRelease, aiReview) => {
+        setPendingAiReviewId(aiReview.ai_review_id)
+      },
+    })
+
+  const aiReviewRequested =
+    Boolean(packageRelease?.ai_review_requested) ||
+    Boolean(pendingAiReviewId) ||
+    isRequestingAiReview
 
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
     if (isCircuitJsonLoading) return
+    if (!packageInfo) return
     const hash = window.location.hash.slice(1)
     const validViews = ["files", "3d", "pcb", "schematic", "bom"]
     const circuitDependentViews = ["3d", "pcb", "schematic", "bom"]
@@ -105,34 +132,6 @@ export default function RepoPageContent({
       .reverse()
   }, [packageFiles, importantFilePaths])
 
-  // Generate package name with version for file lookups
-  const packageNameWithVersion = useMemo(() => {
-    if (!packageInfo) return ""
-
-    // Format: @scope/packageName@version or packageName@version
-    const name = packageInfo.name
-
-    // Extract the latest version from the files (assuming version information is available)
-    const versionFile = packageFiles?.find(
-      (file) => file.file_path === "package.json",
-    )
-    let version = "latest"
-
-    if (versionFile) {
-      try {
-        const content =
-          versionFile.file_content || versionFile.content_text || "{}"
-        const packageJson = JSON.parse(content)
-        if (packageJson.version) {
-          version = packageJson.version
-        }
-      } catch (e) {
-        // If package.json can't be parsed, use "latest"
-      }
-    }
-
-    return `${name}@${version}`
-  }, [packageInfo, packageFiles])
   // Render the appropriate content based on the active view
   const renderContent = () => {
     switch (activeView) {
@@ -194,6 +193,7 @@ export default function RepoPageContent({
             {/* Main Content Header with Tabs */}
             <MainContentHeader
               activeView={activeView}
+              packageFiles={packageFiles ?? []}
               onViewChange={(view) => {
                 setActiveView(view)
                 // Update URL hash when view changes
@@ -210,10 +210,11 @@ export default function RepoPageContent({
               importantFiles={importantFiles}
               isLoading={!packageFiles}
               onEditClicked={onEditClicked}
+              packageAuthorOwner={packageInfo?.owner_github_username}
               aiDescription={packageInfo?.ai_description ?? ""}
               aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
               aiReviewText={packageRelease?.ai_review_text ?? null}
-              aiReviewRequested={packageRelease?.ai_review_requested ?? false}
+              aiReviewRequested={aiReviewRequested}
               onRequestAiReview={() => {
                 if (packageRelease) {
                   requestAiReview({
@@ -236,6 +237,10 @@ export default function RepoPageContent({
               }}
             />
           </div>
+          {/* Releases section - Only visible on small screens */}
+          <div className="block md:hidden w-full px-5">
+            <SidebarReleasesSection />
+          </div>
         </div>
       </div>
       <Footer />

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -39,8 +39,8 @@ export default function SidebarAboutSection() {
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
-    packageInfo?.creator_account_id ===
-      useGlobalStore((s) => s.session?.account_id)
+    packageInfo?.owner_github_username ===
+      useGlobalStore((s) => s.session?.github_username)
 
   // Local state to store updated values before the query refetches
   const [localDescription, setLocalDescription] = useState<string>("")

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -9,21 +9,29 @@ import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 function getTranspilationStatus(
   pr?: PackageRelease | null,
 ): BuildStep["status"] {
-  if (!pr) return "pending"
-  if (pr.transpilation_error) return "error"
-  if (pr.transpilation_in_progress) return "running"
-  if (pr.transpilation_completed_at) return "success"
-  if (pr.transpilation_started_at) return "running"
-  return "pending"
+  switch (pr?.transpilation_display_status) {
+    case "complete":
+      return "success"
+    case "error":
+      return "error"
+    case "building":
+      return "running"
+    default:
+      return "pending"
+  }
 }
 
 function getCircuitJsonStatus(pr?: PackageRelease | null): BuildStep["status"] {
-  if (!pr) return "pending"
-  if (pr.circuit_json_build_error) return "error"
-  if (pr.circuit_json_build_in_progress) return "running"
-  if (pr.circuit_json_build_completed_at) return "success"
-  if (pr.circuit_json_build_started_at) return "running"
-  return "pending"
+  switch (pr?.circuit_json_build_display_status) {
+    case "complete":
+      return "success"
+    case "error":
+      return "error"
+    case "building":
+      return "running"
+    default:
+      return "pending"
+  }
 }
 
 export default function SidebarReleasesSection() {

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -5,13 +5,6 @@ import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Settings } from "lucide-react"
 import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
 
 interface Directory {

package/src/components/ViewPackagePage/utils/fuzz-search.ts

@@ -0,0 +1,121 @@
+export const fuzzyMatch = (
+  pattern: string,
+  text: string,
+): { score: number; matches: number[] } => {
+  if (!pattern) return { score: 0, matches: [] }
+
+  const normalizePattern = (pat: string) => {
+    return pat.toLowerCase().split(" ").join("")
+  }
+
+  const patternLower = normalizePattern(pattern)
+  const textLower = text.toLowerCase()
+  const matches: number[] = []
+
+  let patternIdx = 0
+  let score = 0
+  let consecutiveMatches = 0
+  let spaceBonus = 0
+
+  const spaceSegments = pattern.toLowerCase().trim().split(/\s+/)
+  const isSpaceSeparated = spaceSegments.length > 1
+
+  if (isSpaceSeparated) {
+    let segmentIdx = 0
+    let currentSegment = spaceSegments[0]
+    let segmentCharIdx = 0
+
+    for (
+      let i = 0;
+      i < textLower.length && segmentIdx < spaceSegments.length;
+      i++
+    ) {
+      const char = textLower[i]
+      const targetChar = currentSegment[segmentCharIdx]
+
+      if (char === targetChar) {
+        matches.push(i)
+        segmentCharIdx++
+        consecutiveMatches++
+        score += 1 + consecutiveMatches * 0.5
+
+        if (i === 0 || /[/\-_.]/.test(text[i - 1])) {
+          score += 2
+        }
+
+        if (segmentCharIdx >= currentSegment.length) {
+          segmentIdx++
+          spaceBonus += 3
+
+          if (segmentIdx < spaceSegments.length) {
+            currentSegment = spaceSegments[segmentIdx]
+            segmentCharIdx = 0
+            consecutiveMatches = 0
+          }
+        }
+      } else {
+        if (
+          segmentCharIdx > 0 &&
+          /[/\-_.]/.test(char) &&
+          segmentIdx < spaceSegments.length - 1
+        ) {
+          segmentIdx++
+          if (segmentIdx < spaceSegments.length) {
+            currentSegment = spaceSegments[segmentIdx]
+            segmentCharIdx = 0
+            consecutiveMatches = 0
+            if (char === currentSegment[0]) {
+              matches.push(i)
+              segmentCharIdx = 1
+              score += 2
+            }
+          }
+        } else {
+          consecutiveMatches = 0
+        }
+      }
+    }
+
+    if (
+      segmentIdx < spaceSegments.length ||
+      (segmentIdx === spaceSegments.length - 1 &&
+        segmentCharIdx < currentSegment.length)
+    ) {
+      return { score: -1, matches: [] }
+    }
+
+    score += spaceBonus
+  } else {
+    for (
+      let i = 0;
+      i < textLower.length && patternIdx < patternLower.length;
+      i++
+    ) {
+      if (textLower[i] === patternLower[patternIdx]) {
+        matches.push(i)
+        patternIdx++
+        consecutiveMatches++
+
+        score += 1 + consecutiveMatches * 0.5
+
+        if (i === 0 || /[/\-_.]/.test(text[i - 1])) {
+          score += 2
+        }
+      } else {
+        consecutiveMatches = 0
+      }
+    }
+
+    if (patternIdx !== patternLower.length) return { score: -1, matches: [] }
+  }
+
+  score += Math.max(0, 100 - text.length) * 0.1
+
+  const fileName = text.split("/").pop() || text
+  const queryFileName = pattern.replace(/\s+/g, "")
+  if (fileName.toLowerCase().includes(queryFileName.toLowerCase())) {
+    score += 5
+  }
+
+  return { score, matches }
+}

package/src/components/ViewPackagePage/utils/is-hidden-file.ts

@@ -1,4 +1,8 @@
 export const isHiddenFile = (filePath: string): boolean => {
+  if (filePath.startsWith("/")) {
+    filePath = filePath.slice(1)
+  }
+
   // Normalize the path to handle both Unix and Windows paths
   const normalizedPath = filePath.replace(/\\/g, "/")
 

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -33,7 +33,7 @@ export const ConfirmDeletePackageDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="w-[90vw]">
         <DialogHeader>
           <DialogTitle>Confirm Delete Package</DialogTitle>
         </DialogHeader>