@tscircuit/fake-snippets 0.0.76 → 0.0.78

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -18,7 +18,7 @@ function computeDuration(
 }
 
 export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease } = useCurrentPackageRelease({ include_logs: true })
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
 
   const {
@@ -79,8 +79,8 @@ export const PackageBuildDetailsPage = () => {
           >
             <LogContent
               logs={
-                packageRelease?.transpilation_logs ?? [
-                  { msg: "No transpilation logs available" },
+                transpilation_logs ?? [
+                  { message: "No transpilation logs available" },
                 ]
               }
               error={transpilation_error}
@@ -100,8 +100,8 @@ export const PackageBuildDetailsPage = () => {
           >
             <LogContent
               logs={
-                packageRelease?.circuit_json_build_logs ?? [
-                  { msg: "No Circuit JSON logs available" },
+                circuit_json_build_logs ?? [
+                  { message: "No Circuit JSON logs available" },
                 ]
               }
               error={circuit_json_build_error!}

package/src/components/PackageBuildsPage/getColorForDisplayStatus.ts

@@ -8,9 +8,9 @@ export const getColorForDisplayStatus = (
       return "bg-yellow-500"
     case "building":
       return "bg-blue-500"
-    case "successful":
+    case "complete":
       return "bg-green-500"
-    case "failed":
+    case "error":
       return "bg-red-500"
   }
   return "bg-gray-500"

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

@@ -1,5 +1,4 @@
 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"
@@ -17,9 +16,9 @@ function getColorFromDisplayStatus(
       return "bg-yellow-500"
     case "building":
       return "bg-blue-500"
-    case "successful":
+    case "complete":
       return "bg-green-500"
-    case "failed":
+    case "error":
       return "bg-red-500"
   }
 }
@@ -67,7 +66,7 @@ export function PackageBuildDetailsPanel() {
           </div>
           <span className="text-sm">{author}</span>
           <span className="text-sm text-gray-500">
-            {timeAgo(packageRelease?.created_at, "")}
+            {timeAgo(created_at, "")}
           </span>
         </div>
       </div>

package/src/components/dialogs/rename-package-dialog.tsx

@@ -66,6 +66,11 @@ export const RenamePackageDialog = ({
           onChange={(e) => setNewName(e.target.value.replace(" ", "").trim())}
           placeholder="Enter new name"
           disabled={renamePackageMutation.isLoading}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !renamePackageMutation.isLoading) {
+              renamePackageMutation.mutate()
+            }
+          }}
         />
         <Button
           disabled={renamePackageMutation.isLoading}

package/src/components/package-port/CodeEditor.tsx

@@ -9,18 +9,15 @@ import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
 import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
+import { linter } from "@codemirror/lint"
 import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
 import {
   createDefaultMapFromCDN,
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
-import {
-  tsAutocomplete,
-  tsFacet,
-  tsLinter,
-  tsSync,
-} from "@valtown/codemirror-ts"
+import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
+import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import tsModule from "typescript"
@@ -75,6 +72,7 @@ export const CodeEditor = ({
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
+  const lastReceivedTsFileTimeRef = useRef<number>(0)
   const apiUrl = useSnippetsBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
@@ -218,16 +216,12 @@ export const CodeEditor = ({
         receivedFile: (code: string, path: string) => {
           fsMap.set(path, code)
           env.createFile(path, code)
-          if (viewRef.current) {
-            viewRef.current.dispatch({
-              changes: {
-                from: 0,
-                to: viewRef.current.state.doc.length,
-                insert: viewRef.current.state.doc.toString(),
-              },
-              selection: viewRef.current.state.selection,
-            })
+          if (/\.tsx?$|\.d\.ts$/.test(path)) {
+            lastReceivedTsFileTimeRef.current = Date.now()
           }
+          // Avoid dispatching a view update when ATA downloads files. Dispatching
+          // here caused the editor to reset the user's selection, which made text
+          // selection impossible while dependencies were loading.
         },
       },
     }
@@ -292,7 +286,18 @@ export const CodeEditor = ({
                 : currentFile,
             }),
             tsSync(),
-            tsLinter(),
+            linter(async (view) => {
+              if (Date.now() - lastReceivedTsFileTimeRef.current < 3000) {
+                return []
+              }
+              const config = view.state.facet(tsFacet)
+              return config
+                ? getLints({
+                    ...config,
+                    diagnosticCodesToIgnore: [],
+                  })
+                : []
+            }),
             autocompletion({ override: [tsAutocomplete()] }),
             hoverTooltip((view, pos) => {
               const line = view.state.doc.lineAt(pos)
@@ -386,6 +391,13 @@ export const CodeEditor = ({
                 }
                 return false
               },
+              keydown: (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  event.preventDefault()
+                  return true
+                }
+                return false
+              },
             }),
             EditorView.theme({
               ".cm-tooltip-hover": {

package/src/hooks/use-current-package-release.ts

@@ -3,7 +3,9 @@ import { useCurrentPackageId } from "./use-current-package-id"
 import { useUrlParams } from "./use-url-params"
 import { usePackageRelease } from "./use-package-release"
 
-export const useCurrentPackageRelease = () => {
+export const useCurrentPackageRelease = (options?: {
+  include_logs: boolean
+}) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
   const { author, packageName } = useParams()
@@ -23,6 +25,8 @@ export const useCurrentPackageRelease = () => {
     query = { package_id: packageId, is_latest: true }
   }
 
-  const { data: packageRelease, ...rest } = usePackageRelease(query)
+  const { data: packageRelease, ...rest } = usePackageRelease(query, {
+    include_logs: options?.include_logs ?? false,
+  })
   return { packageRelease, ...rest }
 }

package/src/hooks/use-package-release.ts

@@ -18,15 +18,28 @@ type PackageReleaseQuery =
       is_latest: boolean
     }
 
-export const usePackageRelease = (query: PackageReleaseQuery | null) => {
+export const usePackageRelease = (
+  query: PackageReleaseQuery | null,
+  options?: { include_logs: boolean },
+) => {
   const axios = useAxios()
 
   return useQuery<PackageRelease, Error & { status: number }>(
-    ["packageRelease", query],
+    ["packageRelease", query, options?.include_logs],
     async () => {
       if (!query) return
 
-      const { data } = await axios.post("/package_releases/get", query)
+      const { data } = await axios.post(
+        "/package_releases/get",
+        query,
+        options?.include_logs
+          ? {
+              params: {
+                include_logs: true,
+              },
+            }
+          : undefined,
+      )
 
       if (!data.package_release) {
         throw new Error("Package release not found")

package/src/pages/latest.tsx

@@ -4,17 +4,8 @@ import { useAxios } from "@/hooks/use-axios"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import {
-  Search,
-  Tag,
-  Calendar,
-  Keyboard,
-  Cpu,
-  Layers,
-  LucideBellElectric,
-} from "lucide-react"
+import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import {
   Select,
@@ -23,8 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { PackageCard } from "@/components/PackageCard"
+import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
@@ -48,22 +38,24 @@ const LatestPage: React.FC = () => {
     },
   )
 
-  const filteredPackages = packages?.filter((pkg) => {
-    if (!searchQuery) return true
+  const filteredPackages = packages
+    ?.filter((pkg) => {
+      if (!searchQuery) return true
 
-    const query = searchQuery.toLowerCase().trim()
+      const query = searchQuery.toLowerCase().trim()
 
-    const searchableFields = [
-      pkg.unscoped_name.toLowerCase(),
-      pkg.owner_github_username?.toLowerCase() ?? "",
-      (pkg.description || "").toLowerCase(),
-    ]
+      const searchableFields = [
+        pkg.unscoped_name.toLowerCase(),
+        pkg.owner_github_username?.toLowerCase() ?? "",
+        (pkg.description || "").toLowerCase(),
+      ]
 
-    return searchableFields.some((field) => {
-      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
-      return queryWords.every((word) => field.includes(word))
+      return searchableFields.some((field) => {
+        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+        return queryWords.every((word) => field.includes(word))
+      })
     })
-  })
+    ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
 
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
@@ -71,7 +63,6 @@ const LatestPage: React.FC = () => {
       <main className="flex-grow container mx-auto px-4 py-8">
         <div className="mb-8 max-w-3xl">
           <div className="flex items-center gap-2 mb-3">
-            <Calendar className="w-6 h-6 text-blue-500" />
             <h1 className="text-4xl font-bold text-gray-900">
               Latest Packages
             </h1>
@@ -81,16 +72,6 @@ const LatestPage: React.FC = () => {
             additions showcase new ideas and innovative approaches to circuit
             design.
           </p>
-          <div className="flex flex-wrap gap-3">
-            <Badge variant="secondary" className="px-3 py-1">
-              <Tag className="w-3.5 h-3.5 mr-1" />
-              <span>Latest Uploads</span>
-            </Badge>
-            <Badge variant="secondary" className="px-3 py-1">
-              <Calendar className="w-3.5 h-3.5 mr-1" />
-              <span>Most Recent First</span>
-            </Badge>
-          </div>
         </div>
 
         <div className="mb-6">
@@ -139,58 +120,19 @@ const LatestPage: React.FC = () => {
             </Select>
           </div>
         </div>
-
-        {isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <PackageCardSkeleton key={i} />
-            ))}
-          </div>
-        ) : error ? (
-          <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
-            <div className="flex items-start">
-              <div className="mr-4 bg-red-100 p-2 rounded-full">
-                <Search className="w-6 h-6 text-red-600" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold mb-2">
-                  Error Loading Packages
-                </h3>
-                <p className="text-red-600">
-                  We couldn't load the latest packages. Please try again later.
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : filteredPackages?.length === 0 ? (
-          <div className="text-center py-12 px-4">
-            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Search className="w-8 h-8 text-slate-400" />
-            </div>
-            <h3 className="text-xl font-medium text-slate-900 mb-2">
-              No Matching Packages
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              {searchQuery
-                ? `No packages match your search for "${searchQuery}".`
-                : category !== "all"
-                  ? `No ${category} packages found in the latest list.`
-                  : "There are no new packages at the moment."}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredPackages
-              ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
-              ?.map((pkg) => (
-                <PackageCard
-                  key={pkg.package_id}
-                  pkg={pkg}
-                  baseUrl={apiBaseUrl}
-                />
-              ))}
-          </div>
-        )}
+        <PackageSearchResults
+          isLoading={isLoading}
+          error={error}
+          filteredPackages={filteredPackages}
+          apiBaseUrl={apiBaseUrl}
+          emptyStateMessage={
+            searchQuery
+              ? `No packages match your search for "${searchQuery}".`
+              : category !== "all"
+                ? `No ${category} packages found in the latest list.`
+                : "There are no new packages at the moment."
+          }
+        />
       </main>
       <Footer />
     </div>