@tscircuit/fake-snippets 0.0.89 → 0.0.90

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -0,0 +1,134 @@
+import "dotenv/config"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import OpenAI from "openai"
+
+// Lazy-loaded client instance
+let openai: OpenAI | null = null
+let cachedReadme: string | null = null
+
+function getOpenAIClient() {
+  const apiKey = process.env.VITE_OPENROUTER_API_KEY
+  if (!apiKey) {
+    throw new Error("Missing Api Key in env")
+  }
+
+  if (!openai) {
+    openai = new OpenAI({
+      apiKey,
+      baseURL: "https://openrouter.ai/api/v1",
+      defaultHeaders: {
+        "HTTP-Referer": "https://tscircuit.com",
+        "X-Title": "TSCircuit Editor",
+      },
+    })
+  }
+
+  return openai
+}
+
+// Cache README
+async function getCachedReadme(): Promise<string> {
+  if (cachedReadme !== null) return cachedReadme
+  const res = await fetch(
+    "https://raw.githubusercontent.com/tscircuit/props/main/README.md",
+  )
+  if (!res.ok) {
+    throw new Error(`Failed to fetch README: ${res.status}`)
+  }
+  cachedReadme = await res.text()
+  return cachedReadme
+}
+
+async function completion(
+  openai: OpenAI,
+  readmeContent: string,
+  prefix: string,
+  suffix: string,
+  model = "openai/gpt-4.1-mini",
+  language?: string,
+) {
+  const systemMessage = `You are an expert ${language ? language + " " : ""}programmer working in a TSX (TypeScript + React JSX) environment.
+
+Below is the README.md for the available components. You MUST use this to determine which components and props are valid. 
+Only use components explicitly documented under Available Components in the README. Never invent or guess new components. If the user partially types a component that does not exist in the README, do NOT try to complete it.
+
+===== README.md START =====
+${readmeContent}
+===== README.md END =====
+
+Special instruction for the <chip> component:
+- Do NOT add chip as a prop (e.g., <chip chip="..."> is invalid).
+- Always use this format: 
+  <chip name="U<number>" footprint="<valid footprint>" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Determine the next sequential name automatically: e.g. U1, U2, U3.
+- Only use valid footprints and pinLabels from the README.
+- Some components like <netlabel> do not have a 'name' prop — do not add it for those.
+
+STRICT rules:
+- If partial like "<capa", only append remaining "citor". Never repeat letters. 
+- If input is "<capacitor", add only props, never repeat tag. 
+- Always produce exactly one JSX component, starting with "<" if needed. 
+- If partial doesn’t match any valid component, output nothing. 
+- Never output two JSX elements. Always end with exactly one "/>". 
+- Never add duplicate closing "/>". 
+- Never output the component name as a prop. 
+- Never add whitespace before your completion.
+- If the input is exactly "<", then start with the component name directly (like "resistor ... />") without adding another "<".
+- So that the final result is "<resistor ... />", not "<<resistor ... />".
+- Never produce a double "<".
+
+Examples:
+- Input: "<FILL_ME>"
+  Output: <resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca<FILL_ME>"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<chip<FILL_ME>"
+  Output: name="U1" footprint="SOIC-8" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Input: "<netl<FILL_ME>"
+  Output: abel name="N1" />
+- NEVER output: <capacitor capacitor ... /> or <netnet ... />
+- Input: "<"
+  Output: resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<capacitor"
+  Output:  capacitance="1000pF" footprint="0805" name="C1" pcbX={10} pcbY={15} schX={3} schY={4} />`
+
+  const chatCompletion = await openai.chat.completions.create({
+    messages: [
+      { role: "system", content: systemMessage },
+      { role: "user", content: `${prefix}<FILL_ME>${suffix}` },
+    ],
+    model,
+  })
+
+  return chatCompletion.choices[0].message?.content ?? ""
+}
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session", // ✅ Require user to be signed in
+  jsonBody: z.object({
+    prefix: z.string(),
+    suffix: z.string(),
+    model: z.string().optional(),
+    language: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    prediction: z.string(),
+  }),
+})(async (req, ctx) => {
+  const openai = getOpenAIClient()
+  const { prefix, suffix, model, language } = req.jsonBody
+
+  const readmeContent = await getCachedReadme()
+  const predictionResult = await completion(
+    openai,
+    readmeContent,
+    prefix,
+    suffix,
+    model,
+    language,
+  )
+  return ctx.json({ prediction: predictionResult })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "type": "module",
   "repository": {
     "type": "git",
@@ -87,7 +87,7 @@
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
     "@tscircuit/props": "^0.0.246",
-    "@tscircuit/runframe": "^0.0.653",
+    "@tscircuit/runframe": "^0.0.669",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
@@ -103,7 +103,6 @@
     "@types/sharp": "^0.32.0",
     "@typescript/ata": "^0.9.7",
     "@typescript/vfs": "^1.6.0",
-    "@valtown/codemirror-codeium": "^1.1.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-react": "^4.3.1",
@@ -120,8 +119,10 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
+    "codemirror-copilot": "^0.0.7",
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
+    "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
     "easyeda": "^0.0.195",
     "embla-carousel-react": "^8.3.0",
@@ -145,6 +146,7 @@
     "md5": "^2.3.0",
     "ms": "^2.1.3",
     "next-themes": "^0.3.0",
+    "openai": "^5.6.0",
     "postcss": "^8.4.47",
     "posthog-js": "^1.203.2",
     "prismjs": "^1.29.0",

package/src/App.tsx

@@ -80,6 +80,9 @@ class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
   { hasError: boolean; reloading: boolean }
 > {
+  private visibilityHandler?: () => void
+  private reloadTimeout?: number
+
   constructor(props: { children: React.ReactNode }) {
     super(props)
     this.state = { hasError: false, reloading: false }
@@ -99,12 +102,54 @@ class ErrorBoundary extends React.Component<
     ) {
       const loadedAt = window.__APP_LOADED_AT || Date.now()
       if (Date.now() - loadedAt >= 10_000) {
-        this.setState({ reloading: true })
-        window.location.reload()
+        this.performReload()
       }
     }
   }
 
+  componentDidUpdate(_prevProps: any, prevState: any) {
+    if (!prevState.hasError && this.state.hasError && !this.state.reloading) {
+      this.setupIdleReload()
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanup()
+  }
+
+  cleanup = () => {
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler)
+      this.visibilityHandler = undefined
+    }
+    if (this.reloadTimeout) {
+      clearTimeout(this.reloadTimeout)
+      this.reloadTimeout = undefined
+    }
+  }
+
+  performReload = () => {
+    if (this.state.reloading) return // Prevent multiple reloads
+
+    this.cleanup() // Clean up listeners before reload
+    this.setState({ reloading: true })
+    this.reloadTimeout = window.setTimeout(() => {
+      window.location.reload()
+    }, 500)
+  }
+
+  setupIdleReload = () => {
+    this.cleanup() // Clean up any existing handlers
+
+    this.visibilityHandler = () => {
+      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+        this.performReload()
+      }
+    }
+
+    document.addEventListener("visibilitychange", this.visibilityHandler)
+  }
+
   render() {
     if (this.state.reloading) {
       return <div>There was a problem loading this page. Reloading…</div>

package/src/components/CircuitJsonImportDialog.tsx

@@ -15,7 +15,7 @@ import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
 import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
-import { generateRandomPackageName } from "./package-port/CodeAndPreview"
+import { generateRandomPackageName } from "@/lib/utils/package-utils"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
 import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 

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

@@ -1,13 +1,13 @@
 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, RotateCcw } from "lucide-react"
+import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease, refetch, isFetching } = useCurrentPackageRelease({
+  const { packageRelease } = useCurrentPackageRelease({
     include_logs: true,
   })
   const { mutate: rebuildPackage, isLoading } =
@@ -59,16 +59,6 @@ export function PackageBuildHeader() {
             <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
             {isLoading ? "Rebuilding..." : "Rebuild"}
           </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Reload logs"
-            className="border-gray-300 bg-white hover:bg-gray-50"
-            onClick={() => refetch()}
-            disabled={isFetching}
-          >
-            <RotateCcw className="w-3 h-3 sm:w-4 sm:h-4" />
-          </Button>
           <DownloadButtonAndMenu unscopedName={packageName} author={author} />
         </div>
       </div>

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

@@ -15,6 +15,7 @@ import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
+import { DEFAULT_CODE } from "@/lib/utils/package-utils"
 
 interface Props {
   pkg?: Package
@@ -25,11 +26,6 @@ interface Props {
   projectUrl?: string
 }
 
-export interface PackageFile {
-  path: string
-  content: string
-}
-
 export interface CodeAndPreviewState {
   showPreview: boolean
   fullScreen: boolean
@@ -40,17 +36,6 @@ export interface CodeAndPreviewState {
   defaultComponentFile?: string
 }
 
-export const DEFAULT_CODE = `
-export default () => (
-  <board width="10mm" height="10mm">
-    {/* write your code here! */}
-  </board>
-)
-`.trim()
-
-export const generateRandomPackageName = () =>
-  `untitled-package-${Math.floor(Math.random() * 900) + 100}`
-
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
   const urlParams = useUrlParams()

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

@@ -32,7 +32,7 @@ import CodeEditorHeader, {
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import QuickOpen from "./QuickOpen"
 import GlobalFindReplace from "./GlobalFindReplace"
@@ -43,6 +43,7 @@ import {
   IDeleteFileResult,
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
+import { inlineCopilot } from "codemirror-copilot"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -94,6 +95,7 @@ export const CodeEditor = ({
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
 
   const entryPointFileName = useMemo(() => {
     const entryPointFile = findTargetFile(files, null)
@@ -324,12 +326,24 @@ export const CodeEditor = ({
         },
       }),
     ]
-    if (codeCompletionApi?.apiKey) {
+    if (aiAutocompleteEnabled) {
       baseExtensions.push(
-        // copilotPlugin({
-        //   apiKey: codeCompletionApi.apiKey,
-        //   language: Language.TYPESCRIPT,
-        // }),
+        inlineCopilot(async (prefix, suffix) => {
+          const res = await fetch("/api/autocomplete/create_autocomplete", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              prefix,
+              suffix,
+              language: "typescript",
+            }),
+          })
+
+          const { prediction } = await res.json()
+          return prediction
+        }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {
             opacity: "0.6",
@@ -537,6 +551,7 @@ export const CodeEditor = ({
     Boolean(highlighter),
     isSaving,
     fontSize,
+    aiAutocompleteEnabled,
   ])
 
   const updateCurrentEditorContent = (newContent: string) => {
@@ -655,6 +670,10 @@ export const CodeEditor = ({
             files={Object.fromEntries(files.map((f) => [f.path, f.content]))}
             updateFileContent={updateFileContent}
             handleFileChange={handleFileChange}
+            aiAutocompleteState={[
+              aiAutocompleteEnabled,
+              setAiAutocompleteEnabled,
+            ]}
           />
         )}
         <div

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

@@ -26,6 +26,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import ai from "fake-snippets-api/routes/api/ai"
 
 export type FileName = string
 
@@ -36,6 +37,7 @@ interface CodeEditorHeaderProps {
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
+  aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
@@ -45,12 +47,13 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   fileSidebarState,
   handleFileChange,
   entrypointFileName = "index.tsx",
+  aiAutocompleteState,
 }) => {
   const { Dialog: ImportPackageDialog, openDialog: openImportDialog } =
     useImportPackageDialog()
   const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -239,15 +242,16 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           )}
+
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   size="sm"
                   variant="ghost"
-                  onClick={() =>
-                    setAiAutocompleteEnabled(!aiAutocompleteEnabled)
-                  }
+                  onClick={() => {
+                    setAiAutocompleteEnabled((prev) => !prev)
+                  }}
                   className={`relative bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
                 >
                   <Bot className="h-4 w-4" />
@@ -263,6 +267,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
+
           <Button size="sm" variant="ghost" onClick={() => openImportDialog()}>
             Import
           </Button>

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

@@ -18,19 +18,16 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import {
   ChevronDown,
   CodeIcon,
-  Download,
   Edit2,
   Eye,
   EyeIcon,
   File,
   FilePenLine,
   MoreVertical,
-  Package as PackageIcon,
   Pencil,
   Save,
   Share,
   Sidebar,
-  Sparkles,
   Trash2,
   Undo2,
 } from "lucide-react"
@@ -41,7 +38,6 @@ import { useAxios } from "@/hooks/use-axios"
 import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { useToast } from "@/hooks/use-toast"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
-import { useFilesDialog } from "@/components/dialogs/files-dialog"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
@@ -86,7 +82,6 @@ export default function EditorNav({
   } = useUpdatePackageDescriptionDialog()
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
-  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
 
@@ -376,13 +371,6 @@ export default function EditorNav({
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openFilesDialog()}
-                >
-                  <File className="mr-2 h-3 w-3" />
-                  View Files
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   className="text-xs"
                   onClick={() => openupdateDescriptionDialog()}
@@ -395,7 +383,7 @@ export default function EditorNav({
                   onClick={() => openViewTsFilesDialog()}
                 >
                   <File className="mr-2 h-3 w-3" />
-                  [Debug] View TS Files
+                  View Files
                 </DropdownMenuItem>
                 <DropdownMenuSub>
                   <DropdownMenuSubTrigger
@@ -566,7 +554,6 @@ export default function EditorNav({
         packageName={pkg?.unscoped_name ?? ""}
         packageOwner={pkg?.owner_github_username ?? ""}
       />
-      <FilesDialog snippetId={pkg?.package_id ?? ""} />
       <ViewTsFilesDialog />
     </nav>
   )

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

@@ -23,7 +23,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 
 interface Match {

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

@@ -8,7 +8,7 @@ import {
   BookOpen,
   FileText,
 } from "lucide-react"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { fuzzyMatch } from "../ViewPackagePage/utils/fuzz-search"
 
 interface ScoredFile extends PackageFile {

package/src/hooks/use-code-completion-ai-api.ts

@@ -1,11 +1,11 @@
 import { useMemo } from "react"
 
 export const useCodeCompletionApi = () => {
-  const codeiumApiKey = useMemo(() => {
+  const openrouterApiKey = useMemo(() => {
     return {
-      apiKey: import.meta.env.VITE_CODIUM_API_KEY,
+      apiKey: import.meta.env.VITE_OPENROUTER_API_KEY,
     }
   }, [])
 
-  return codeiumApiKey
+  return openrouterApiKey
 }

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

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query"
+import { useMutation, useQueryClient } from "react-query"
 import { useAxios } from "./use-axios"
 import { useToast } from "./use-toast"
 
@@ -7,6 +7,7 @@ export const useDeletePackage = ({
 }: { onSuccess?: () => void } = {}) => {
   const axios = useAxios()
   const { toast } = useToast()
+  const queryClient = useQueryClient()
 
   return useMutation(
     ["deletePackage"],
@@ -22,11 +23,14 @@ export const useDeletePackage = ({
       return response.data
     },
     {
-      onSuccess: () => {
+      onSuccess: (_, variables) => {
         toast({
           title: "Package deleted",
           description: "Package deleted successfully",
         })
+        if (variables?.package_id) {
+          queryClient.invalidateQueries(["packages", variables.package_id])
+        }
         onSuccess?.()
       },
       onError: (error: any) => {

package/src/hooks/useFileManagement.ts

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
+import { PackageFile } from "@/types/package"
 import {
   DEFAULT_CODE,
   generateRandomPackageName,
-  PackageFile,
-} from "../components/package-port/CodeAndPreview"
+} from "@/lib/utils/package-utils"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"

package/src/lib/utils/findTargetFile.ts

@@ -1,4 +1,4 @@
-import { PackageFile } from "@/components/package-port/CodeAndPreview"
+import { PackageFile } from "@/types/package"
 
 export const findMainEntrypointFileFromTscircuitConfig = (
   files: PackageFile[],

package/src/lib/utils/package-utils.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_CODE = `
+export default () => (
+  <board width="10mm" height="10mm">
+    {/* write your code here! */}
+  </board>
+)
+`.trim()
+
+export const generateRandomPackageName = () =>
+  `untitled-package-${Math.floor(Math.random() * 900) + 100}`

package/src/pages/dashboard.tsx

@@ -61,6 +61,11 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_trending")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
   const { data: latestPackages } = useQuery<Package[]>(
@@ -69,6 +74,11 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_latest")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
   const baseUrl = useSnippetsBaseApiUrl()

package/src/types/package.ts

@@ -0,0 +1,4 @@
+export interface PackageFile {
+  path: string
+  content: string
+}