@tscircuit/fake-snippets 0.0.80 → 0.0.82

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

@@ -1,6 +1,5 @@
 import type React from "react"
-import { ChevronRight, CheckCircle2 } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
+import { ChevronRight } from "lucide-react"
 import {
   Collapsible,
   CollapsibleContent,
@@ -8,16 +7,9 @@ import {
 } from "@/components/ui/collapsible"
 import { getColorForDisplayStatus } from "./getColorForDisplayStatus"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { ErrorObjectOrString, getErrorText } from "./ErrorObject"
+import { ErrorObjectOrString } from "./ErrorObject"
 import { capitalCase } from "./capitalCase"
 
-type BadgeInfo = {
-  text: string
-  variant?: "default" | "secondary" | "destructive"
-  className?: string
-  icon?: React.ReactNode
-}
-
 interface CollapsibleSectionProps {
   title: string
   duration?: string
@@ -25,69 +17,45 @@ interface CollapsibleSectionProps {
   displayStatus?: PackageRelease["display_status"]
   isOpen: boolean
   onToggle: () => void
-  badges?: Array<BadgeInfo>
   children?: React.ReactNode
 }
 
 export function CollapsibleSection({
   title,
   duration,
-  error,
   displayStatus,
   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">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
+          <div className="flex items-center gap-2 min-w-0">
             <ChevronRight
-              className={`w-4 h-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+              className={`w-4 h-4 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
             />
-            <span className="font-medium">{title}</span>
+            <span className="font-medium truncate">{title}</span>
           </div>
-          <div className="flex items-center gap-2">
-            {[
-              ...badges,
-              ...(error
-                ? [
-                    {
-                      text: getErrorText(error),
-                      variant: "destructive",
-                    } as BadgeInfo,
-                  ]
-                : []),
-            ].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>
-            ))}
+          <div className="flex items-center gap-2 flex-shrink-0 ml-6 sm:ml-0">
             {duration && (
-              <span className="text-sm text-gray-600">{duration}</span>
+              <span className="text-sm text-gray-600 whitespace-nowrap">
+                {duration}
+              </span>
             )}
             <div
-              className={`w-2 h-2 rounded-lg ${getColorForDisplayStatus(displayStatus)}`}
+              className={`w-2 h-2 rounded-lg flex-shrink-0 ${getColorForDisplayStatus(displayStatus)}`}
             />
-            <div className="text-gray-600 text-xs font-medium">
+            <div className="text-gray-600 text-xs font-medium whitespace-nowrap">
               {capitalCase(displayStatus) || "???"}
             </div>
           </div>
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="p-4 bg-white border-x border-b border-gray-200 rounded-b-lg">
-          {children}
+        <div className="bg-white border-x border-b border-gray-200 rounded-b-lg overflow-hidden">
+          <div className="p-4 overflow-x-auto max-w-full">{children}</div>
         </div>
       </CollapsibleContent>
     </Collapsible>

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

@@ -1,8 +1,9 @@
-import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useParams } from "wouter"
+import { useNow } from "@/hooks/use-now"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+import { Clock, GitBranch, GitCommit, Globe } from "lucide-react"
+import { useParams } from "wouter"
 
 const capitalCase = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -24,8 +25,9 @@ function getColorFromDisplayStatus(
 }
 
 export function PackageBuildDetailsPanel() {
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
   const { author } = useParams() // TODO use packageRelease.author_account_id when it's added by backed
+  const now = useNow(1000)
 
   if (!packageRelease) {
     // TODO show skeleton instead
@@ -55,6 +57,24 @@ export function PackageBuildDetailsPanel() {
     commit_sha,
   } = packageRelease
 
+  const buildStartedAt = (() => {
+    if (transpilation_started_at && circuit_json_build_started_at) {
+      return new Date(transpilation_started_at) <
+        new Date(circuit_json_build_started_at)
+        ? transpilation_started_at
+        : circuit_json_build_started_at
+    }
+    return transpilation_started_at || circuit_json_build_started_at || null
+  })()
+
+  const buildCompletedAt =
+    circuit_json_build_completed_at || transpilation_completed_at || null
+
+  const elapsedMs = buildStartedAt
+    ? (buildCompletedAt ? new Date(buildCompletedAt).getTime() : now) -
+      new Date(buildStartedAt).getTime()
+    : null
+
   return (
     <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
       {/* Created */}
@@ -92,15 +112,13 @@ export function PackageBuildDetailsPanel() {
         <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
         <div className="flex items-center gap-2">
           <Clock className="w-4 h-4 text-gray-500" />
-          {circuit_json_build_completed_at && (
-            <span className="text-sm">
-              {total_build_duration_ms
-                ? `${Math.floor(total_build_duration_ms / 1000)}s`
-                : ""}
-            </span>
+          {elapsedMs !== null && (
+            <span className="text-sm">{Math.floor(elapsedMs / 1000)}s</span>
           )}
           <span className="text-sm text-gray-500">
-            {timeAgo(circuit_json_build_completed_at, "waiting...")}
+            {buildStartedAt
+              ? `Started ${timeAgo(buildStartedAt)}`
+              : "waiting..."}
           </span>
         </div>
       </div>

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,10 +1,15 @@
-import { Github, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
+import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
+  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
+  const { mutate: rebuildPackage, isLoading } =
+    useRebuildPackageReleaseMutation()
 
   return (
     <div className="border-b border-gray-200 bg-white px-6 py-4">
@@ -38,9 +43,16 @@ export function PackageBuildHeader() {
             variant="outline"
             size="sm"
             className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+            disabled={isLoading || !packageRelease}
+            onClick={() =>
+              packageRelease &&
+              rebuildPackage({
+                package_release_id: packageRelease.package_release_id,
+              })
+            }
           >
             <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-            Rebuild
+            {isLoading ? "Rebuilding..." : "Rebuild"}
           </Button>
           <DownloadButtonAndMenu
             snippetUnscopedName={`${author}/${packageName}`}

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

@@ -23,12 +23,18 @@ interface ImportantFilesViewProps {
 
   aiDescription?: string
   aiUsageInstructions?: string
+  aiReviewText?: string | null
+  aiReviewRequested?: boolean
+  onRequestAiReview?: () => void
 }
 
 export default function ImportantFilesView({
   importantFiles = [],
   aiDescription,
   aiUsageInstructions,
+  aiReviewText,
+  aiReviewRequested,
+  onRequestAiReview,
   isLoading = false,
   onEditClicked,
 }: ImportantFilesViewProps) {
@@ -43,9 +49,15 @@ export default function ImportantFilesView({
   }
   // Determine if we have AI content
   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) =>
@@ -60,12 +72,24 @@ export default function ImportantFilesView({
       // Second priority: AI content if available
       setActiveTab("ai")
       setActiveFilePath(null)
+    } else if (hasAiReview) {
+      setActiveTab("ai-review")
+      setActiveFilePath(null)
     } else if (importantFiles.length > 0) {
       // Third priority: First important file
       setActiveFilePath(importantFiles[0].file_path)
       setActiveTab("file")
     }
-  }, [aiDescription, aiUsageInstructions, hasAiContent, importantFiles])
+  }, [
+    aiDescription,
+    aiUsageInstructions,
+    aiReviewText,
+    hasAiContent,
+    hasAiReview,
+    importantFiles,
+    activeTab,
+    isLoading,
+  ])
 
   // Get file name from path
   const getFileName = (path: string) => {
@@ -106,6 +130,27 @@ export default function ImportantFilesView({
     )
   }
 
+  const renderAiReviewContent = () => {
+    if (!aiReviewText && !aiReviewRequested) {
+      return (
+        <button
+          className="text-sm text-blue-600 dark:text-[#58a6ff] underline"
+          onClick={onRequestAiReview}
+        >
+          Request AI Review
+        </button>
+      )
+    }
+
+    if (!aiReviewText && aiReviewRequested) {
+      return (
+        <p className="text-sm">AI review requested. Please check back later.</p>
+      )
+    }
+
+    return <MarkdownViewer markdownContent={aiReviewText || ""} />
+  }
+
   // Get active file content
   const partialActiveFile = importantFiles.find(
     (file) => file.file_path === activeFilePath,
@@ -187,6 +232,22 @@ export default function ImportantFilesView({
             </button>
           )}
 
+          {/* AI Review Tab */}
+          <button
+            className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+              activeTab === "ai-review"
+                ? "bg-gray-200 dark:bg-[#30363d] font-medium"
+                : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
+            }`}
+            onClick={() => {
+              setActiveTab("ai-review")
+              setActiveFilePath(null)
+            }}
+          >
+            <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />
+            <span>AI Review</span>
+          </button>
+
           {/* File Tabs */}
           {importantFiles.map((file) => (
             <button
@@ -232,6 +293,8 @@ export default function ImportantFilesView({
       <div className="p-4 bg-white dark:bg-[#0d1117]">
         {activeTab === "ai" ? (
           renderAiContent()
+        ) : activeTab === "ai-review" ? (
+          renderAiReviewContent()
         ) : activeFilePath && activeFilePath.endsWith(".md") ? (
           <MarkdownViewer markdownContent={activeFileContent} />
         ) : activeFilePath &&

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

@@ -20,6 +20,7 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 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"
 
 interface PackageFile {
   package_file_id: string
@@ -34,6 +35,7 @@ interface RepoPageContentProps {
   packageFiles?: PackageFile[]
   importantFilePaths?: string[]
   packageInfo?: Package
+  packageRelease?: import("fake-snippets-api/lib/db/schema").PackageRelease
   onFileClicked?: (file: PackageFile) => void
   onEditClicked?: () => void
 }
@@ -41,6 +43,7 @@ interface RepoPageContentProps {
 export default function RepoPageContent({
   packageFiles,
   packageInfo,
+  packageRelease,
   onFileClicked,
   onEditClicked,
 }: RepoPageContentProps) {
@@ -48,6 +51,7 @@ export default function RepoPageContent({
   const session = useGlobalStore((s) => s.session)
   const { circuitJson, isLoading: isCircuitJsonLoading } =
     useCurrentPackageCircuitJson()
+  const { mutate: requestAiReview } = useRequestAiReviewMutation()
 
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
@@ -198,6 +202,15 @@ export default function RepoPageContent({
               onEditClicked={onEditClicked}
               aiDescription={packageInfo?.ai_description ?? ""}
               aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
+              aiReviewText={packageRelease?.ai_review_text ?? null}
+              aiReviewRequested={packageRelease?.ai_review_requested ?? false}
+              onRequestAiReview={() => {
+                if (packageRelease) {
+                  requestAiReview({
+                    package_release_id: packageRelease.package_release_id,
+                  })
+                }
+              }}
             />
           </div>
 

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/package-port/CodeAndPreview.tsx

@@ -17,6 +17,11 @@ import { useFileManagement } from "@/hooks/useFileManagement"
 
 interface Props {
   pkg?: Package
+  /**
+   * Optional project URL whose pathname will be used when
+   * reporting autorouting bugs
+   */
+  projectUrl?: string
 }
 
 export interface PackageFile {
@@ -45,7 +50,7 @@ export default () => (
 export const generateRandomPackageName = () =>
   `untitled-package-${Math.floor(Math.random() * 900) + 100}`
 
-export function CodeAndPreview({ pkg }: Props) {
+export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
   const urlParams = useUrlParams()
 
@@ -243,6 +248,7 @@ export function CodeAndPreview({ pkg }: Props) {
                 handleEditEvent(event)
               }}
               fsMap={fsMap ?? {}}
+              projectUrl={projectUrl}
             />
           </div>
         )}

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/hooks/use-current-package-release.ts

@@ -1,10 +1,11 @@
 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_logs?: boolean
+  refetchInterval?: number
 }) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
@@ -27,6 +28,7 @@ export const useCurrentPackageRelease = (options?: {
 
   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,5 +1,5 @@
 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 =
@@ -20,7 +20,7 @@ type PackageReleaseQuery =
 
 export const usePackageRelease = (
   query: PackageReleaseQuery | null,
-  options?: { include_logs: boolean },
+  options?: { include_logs?: boolean; refetchInterval?: number },
 ) => {
   const axios = useAxios()
 
@@ -50,6 +50,7 @@ export const usePackageRelease = (
     {
       retry: false,
       enabled: Boolean(query),
+      refetchInterval: options?.refetchInterval,
     },
   )
 }