@tscircuit/fake-snippets 0.0.81 → 0.0.83

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -1,99 +1,38 @@
-import { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { CheckCircle, XCircle, Check, X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { CheckCircle, XCircle, Clock, Loader2 } from "lucide-react"
+import { Link, useParams } from "wouter"
 
 export interface BuildStep {
   id: string
   name: string
-  status: "success" | "failed"
-  message?: string
+  status: "pending" | "running" | "success" | "error"
 }
 
 export interface BuildStatusProps {
   step: BuildStep
+  packageReleaseId: string
 }
 
-export const BuildStatus = ({ step }: BuildStatusProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
+export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
+  const { author, packageName } = useParams()
+  const href = `/${author}/${packageName}/builds?package_release_id=${packageReleaseId}`
 
   return (
-    <>
-      <div
-        onClick={() => setIsDialogOpen(true)}
-        className={"flex items-center cursor-pointer"}
-      >
-        {step.status === "success" ? (
-          <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-[#8b949e]" />
-        ) : (
-          <XCircle className="h-4 w-4 mr-2 text-red-600 dark:text-[#8b949e]" />
-        )}
-        <span className="text-sm text-gray-500 dark:text-[#8b949e]">
-          {step.name}
-        </span>
-      </div>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {step.status === "success" ? (
-                <>
-                  <CheckCircle className="h-5 w-5 text-green-600" />
-                  <span>Build Status: Passing</span>
-                </>
-              ) : (
-                <>
-                  <XCircle className="h-5 w-5 text-red-600" />
-                  <span>Build Status: Failing</span>
-                </>
-              )}
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-3">
-              <div
-                key={step.id}
-                className={cn(
-                  "flex items-start gap-3 rounded-md border p-3",
-                  step.status === "success"
-                    ? "bg-green-50 border-green-200"
-                    : "bg-red-50 border-red-200",
-                )}
-              >
-                <div
-                  className={cn(
-                    "rounded-full p-1 mt-0.5",
-                    step.status === "success"
-                      ? "bg-green-100 text-green-600"
-                      : "bg-red-100 text-red-600",
-                  )}
-                >
-                  {step.status === "success" ? (
-                    <Check className="h-4 w-4" />
-                  ) : (
-                    <X className="h-4 w-4" />
-                  )}
-                </div>
-                <div>
-                  <div className="font-medium">{step.name}</div>
-                  {step.message && (
-                    <div className="text-sm text-muted-foreground mt-1">
-                      {step.message}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+    <Link href={href} className="flex items-center gap-2">
+      {step.status === "success" && (
+        <CheckCircle className="h-4 w-4 text-green-600 dark:text-[#8b949e]" />
+      )}
+      {step.status === "error" && (
+        <XCircle className="h-4 w-4 text-red-600 dark:text-[#8b949e]" />
+      )}
+      {step.status === "running" && (
+        <Loader2 className="h-4 w-4 text-blue-600 animate-spin dark:text-[#8b949e]" />
+      )}
+      {step.status === "pending" && (
+        <Clock className="h-4 w-4 text-yellow-600 dark:text-[#8b949e]" />
+      )}
+      <span className="text-sm text-gray-500 dark:text-[#8b949e]">
+        {step.name}
+      </span>
+    </Link>
   )
 }

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

@@ -51,8 +51,13 @@ export default function ImportantFilesView({
   const hasAiContent = Boolean(aiDescription || aiUsageInstructions)
   const hasAiReview = Boolean(aiReviewText)
 
-  // Select the appropriate tab/file when content changes
+  // Select the appropriate tab/file when content changes. Once the user has
+  // interacted with the tabs we keep their selection and only run this logic
+  // if no tab has been chosen yet.
   useEffect(() => {
+    if (activeTab !== null) return
+    if (isLoading) return
+
     // First priority: README file if it exists
     const readmeFile = importantFiles.find(
       (file) =>
@@ -82,6 +87,8 @@ export default function ImportantFilesView({
     hasAiContent,
     hasAiReview,
     importantFiles,
+    activeTab,
+    isLoading,
   ])
 
   // Get file name from path

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

@@ -4,6 +4,27 @@ import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
+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"
+}
+
+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"
+}
 
 export default function SidebarReleasesSection() {
   const { packageInfo } = useCurrentPackageInfo()
@@ -15,14 +36,12 @@ export default function SidebarReleasesSection() {
     {
       id: "package_transpilation",
       name: "Package Transpilation",
-      status: packageRelease?.has_transpiled ? "success" : "failed",
-      message: packageRelease?.transpilation_error || undefined,
+      status: getTranspilationStatus(packageRelease),
     },
     {
       id: "circuit_json_build",
       name: "Circuit JSON Build",
-      status: packageRelease?.circuit_json_build_error ? "failed" : "success",
-      message: packageRelease?.circuit_json_build_error || undefined,
+      status: getCircuitJsonStatus(packageRelease),
     },
   ]
 
@@ -56,7 +75,11 @@ export default function SidebarReleasesSection() {
           </span>
         </div>
         {buildSteps.map((step) => (
-          <BuildStatus key={step.id} step={step} />
+          <BuildStatus
+            key={step.id}
+            step={step}
+            packageReleaseId={packageRelease.package_release_id}
+          />
         ))}
       </div>
       {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">

package/src/components/ViewPackagePage/hooks/use-toast.tsx

@@ -0,0 +1,70 @@
+"use client"
+import toastLibrary, { Toaster, type Toast } from "react-hot-toast"
+import React from "react"
+
+export interface ToasterToast {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  variant?: "default" | "destructive"
+  duration?: number
+}
+
+function ToastContent({
+  title,
+  description,
+  variant,
+  t,
+}: ToasterToast & { t: Toast }) {
+  return (
+    <div
+      className={`rounded-md border p-4 shadow-lg transition-all ${
+        t.visible
+          ? "animate-in fade-in slide-in-from-top-full"
+          : "animate-out fade-out slide-out-to-right-full"
+      } ${
+        variant === "destructive"
+          ? "border-red-500 bg-red-500 text-slate-50"
+          : "border-slate-200 bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50"
+      }`}
+    >
+      {title && <div className="text-sm font-semibold">{title}</div>}
+      {description && <div className="text-sm opacity-90">{description}</div>}
+    </div>
+  )
+}
+
+const toast = ({
+  duration,
+  description,
+  variant = "default",
+  title,
+}: ToasterToast) => {
+  if (description) {
+    return toastLibrary.custom(
+      (t) => (
+        <ToastContent
+          title={title}
+          description={description}
+          variant={variant}
+          t={t}
+        />
+      ),
+      { duration },
+    )
+  }
+
+  if (variant === "destructive") {
+    return toastLibrary.error(<>{title}</>, { duration })
+  }
+
+  return toastLibrary(<>{title}</>, { duration })
+}
+
+function useToast() {
+  return {
+    toast,
+    dismiss: toastLibrary.dismiss,
+  }
+}
+
+export { useToast, toast, Toaster }

package/src/components/dialogs/{import-snippet-dialog.tsx → import-package-dialog.tsx}

@@ -1,6 +1,6 @@
 import { useAxios } from "@/hooks/use-axios"
 import { useDebounce } from "@/hooks/use-debounce"
-import type { Snippet } from "fake-snippets-api/lib/db/schema"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"
 import { useQuery } from "react-query"
 import { Button } from "../ui/button"
@@ -8,25 +8,25 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { createUseDialog } from "./create-use-dialog"
 
-export const ImportSnippetDialog = ({
+export const ImportPackageDialog = ({
   open,
   onOpenChange,
-  onSnippetSelected,
+  onPackageSelected,
 }: {
   open: boolean
   onOpenChange: (open: boolean) => any
-  onSnippetSelected: (snippet: Snippet) => any
+  onPackageSelected: (pkg: Package) => any
 }) => {
   const [searchText, setSearchText] = useState("")
   const debouncedSearch = useDebounce(searchText, 300)
   const axios = useAxios()
   const { data: snippets, isLoading } = useQuery(
-    ["snippetSearch", debouncedSearch],
+    ["packageSearch", debouncedSearch],
     async () => {
-      const response = await axios.get(
-        `/snippets/search?q=${encodeURIComponent(debouncedSearch)}`,
-      )
-      return response.data.snippets.slice(0, 12)
+      const response = await axios.post("/packages/search", {
+        query: debouncedSearch,
+      })
+      return response.data.packages
     },
     {
       enabled: debouncedSearch.length > 0,
@@ -35,41 +35,42 @@ export const ImportSnippetDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="z-[100]">
+      <DialogContent className="z-[100] p-4 sm:p-6">
         <DialogHeader>
-          <DialogTitle>Import Snippet</DialogTitle>
+          <DialogTitle>Import Package</DialogTitle>
         </DialogHeader>
         <Input
-          placeholder="Search snippets..."
+          placeholder="Search packages..."
           value={searchText}
           onChange={(e) => setSearchText(e.target.value)}
+          className="w-full mb-4"
         />
         <div className="h-64 overflow-y-auto">
           {isLoading ? (
-            <div>Loading...</div>
+            <div className="text-center">Loading...</div>
           ) : (
             <ul className="w-full">
-              {snippets?.map((snippet: Snippet) => (
+              {snippets?.map((pkg: Package) => (
                 <li
-                  className="flex items-center my-1 text-xs w-full"
-                  key={snippet.snippet_id}
+                  className="flex flex-col sm:flex-row items-start sm:items-center my-2 text-sm w-full"
+                  key={pkg.package_id}
                 >
                   <a
-                    href={`/${snippet.name}`}
+                    href={`/${pkg.name}`}
                     target="_blank"
-                    className="whitespace-nowrap mr-2 text-blue-500 hover:underline cursor-pointer flex-shrink-0"
+                    className="text-blue-500 hover:underline cursor-pointer flex-shrink-0 mb-1 sm:mb-0 sm:mr-2"
                   >
-                    {snippet.name}
+                    {pkg.name}
                   </a>
-                  <div className="text-xs text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap">
-                    {snippet.description}
+                  <div className="text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap mb-1 sm:mb-0">
+                    {pkg.description}
                   </div>
                   <Button
                     size="sm"
-                    className="ml-2 flex-shrink-0"
+                    className="flex-shrink-0"
                     variant="outline"
                     onClick={() => {
-                      onSnippetSelected(snippet)
+                      onPackageSelected(pkg)
                       onOpenChange(false)
                     }}
                   >
@@ -85,4 +86,4 @@ export const ImportSnippetDialog = ({
   )
 }
 
-export const useImportSnippetDialog = createUseDialog(ImportSnippetDialog)
+export const useImportPackageDialog = createUseDialog(ImportPackageDialog)

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

@@ -4,7 +4,7 @@ import { autocompletion } from "@codemirror/autocomplete"
 import { indentWithTab } from "@codemirror/commands"
 import { javascript } from "@codemirror/lang-javascript"
 import { json } from "@codemirror/lang-json"
-import { EditorState } from "@codemirror/state"
+import { EditorState, Prec } from "@codemirror/state"
 import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
 import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 import type { ATABootstrapConfig } from "@typescript/ata"
@@ -237,6 +237,14 @@ export const CodeEditor = ({
       currentFile?.endsWith(".json")
         ? json()
         : javascript({ typescript: true, jsx: true }),
+      Prec.high(
+        keymap.of([
+          {
+            key: "Mod-Enter",
+            run: () => true,
+          },
+        ]),
+      ),
       keymap.of([indentWithTab]),
       EditorState.readOnly.of(readOnly || isSaving),
       EditorView.updateListener.of((update) => {

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react"
 import { Button } from "@/components/ui/button"
 import { handleManualEditsImportWithSupportForMultipleFiles } from "@/lib/handleManualEditsImportWithSupportForMultipleFiles"
-import { useImportSnippetDialog } from "@/components/dialogs/import-snippet-dialog"
+import { useImportPackageDialog } from "@/components/dialogs/import-package-dialog"
 import { useToast } from "@/hooks/use-toast"
 import {
   DropdownMenu,
@@ -19,6 +19,7 @@ import {
   SelectValue,
 } from "../ui/select"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 export type FileName = string
 
@@ -39,8 +40,8 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   handleFileChange,
   entrypointFileName = "index.tsx",
 }) => {
-  const { Dialog: ImportSnippetDialog, openDialog: openImportDialog } =
-    useImportSnippetDialog()
+  const { Dialog: ImportPackageDialog, openDialog: openImportDialog } =
+    useImportPackageDialog()
   const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
 
@@ -234,9 +235,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
             Format
           </Button>
         </div>
-        <ImportSnippetDialog
-          onSnippetSelected={(snippet: any) => {
-            const newContent = `import {} from "@tsci/${snippet.owner_name}.${snippet.unscoped_name}"\n${files[currentFile || ""]}`
+        <ImportPackageDialog
+          onPackageSelected={(pkg: Package) => {
+            const newContent = `import {} from "@tsci/${pkg.owner_github_username}.${pkg.unscoped_name}"\n${files[currentFile || ""]}`
             updateFileContent(currentFile, newContent)
           }}
         />

package/src/components/ui/toaster.tsx

@@ -1,33 +1 @@
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
+export { Toaster } from "react-hot-toast"

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

@@ -1,10 +1,12 @@
 import { useParams } from "wouter"
 import { useCurrentPackageId } from "./use-current-package-id"
-import { useUrlParams } from "./use-url-params"
 import { usePackageRelease } from "./use-package-release"
+import { useUrlParams } from "./use-url-params"
 
 export const useCurrentPackageRelease = (options?: {
-  include_logs: boolean
+  include_ai_review?: boolean
+  include_logs?: boolean
+  refetchInterval?: number
 }) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
@@ -25,8 +27,17 @@ export const useCurrentPackageRelease = (options?: {
     query = { package_id: packageId, is_latest: true }
   }
 
+  if (query && options?.include_logs !== undefined) {
+    query.include_logs = options.include_logs
+  }
+
+  if (query && options?.include_ai_review !== undefined) {
+    query.include_ai_review = options.include_ai_review
+  }
+
   const { data: packageRelease, ...rest } = usePackageRelease(query, {
-    include_logs: options?.include_logs ?? false,
+    refetchInterval: options?.refetchInterval,
   })
+
   return { packageRelease, ...rest }
 }

package/src/hooks/use-now.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react"
+
+export const useNow = (intervalMs: number = 1000) => {
+  const [now, setNow] = useState(Date.now())
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), intervalMs)
+    return () => clearInterval(id)
+  }, [intervalMs])
+
+  return now
+}

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

@@ -1,8 +1,8 @@
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { useQuery } from "react-query"
+import { type UseQueryOptions, useQuery } from "react-query"
 import { useAxios } from "./use-axios"
 
-type PackageReleaseQuery =
+type PackageReleaseQuery = (
   | {
       package_release_id: string
     }
@@ -17,29 +17,30 @@ type PackageReleaseQuery =
       package_id: string
       is_latest: boolean
     }
+) & {
+  include_logs?: boolean | null | undefined
+  include_ai_review?: boolean | null | undefined
+}
 
 export const usePackageRelease = (
   query: PackageReleaseQuery | null,
-  options?: { include_logs: boolean },
+  options?: {
+    refetchInterval?: number
+  },
 ) => {
   const axios = useAxios()
 
   return useQuery<PackageRelease, Error & { status: number }>(
-    ["packageRelease", query, options?.include_logs],
+    ["packageRelease", query],
     async () => {
       if (!query) return
 
-      const { data } = await axios.post(
-        "/package_releases/get",
-        query,
-        options?.include_logs
-          ? {
-              params: {
-                include_logs: true,
-              },
-            }
-          : undefined,
-      )
+      const { data } = await axios.post("/package_releases/get", query, {
+        params: {
+          include_logs: query.include_logs,
+          include_ai_review: query.include_ai_review,
+        },
+      })
 
       if (!data.package_release) {
         throw new Error("Package release not found")
@@ -50,6 +51,7 @@ export const usePackageRelease = (
     {
       retry: false,
       enabled: Boolean(query),
+      refetchInterval: options?.refetchInterval,
     },
   )
 }