@tscircuit/fake-snippets 0.0.100 → 0.0.102

package/fake-snippets-api/routes/api/github/repos/list_available.ts

@@ -0,0 +1,91 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  jsonResponse: z.object({
+    repos: z.array(
+      z.object({
+        unscoped_name: z.string(),
+        full_name: z.string(),
+        private: z.boolean(),
+        owner: z.object({
+          login: z.string(),
+        }),
+        description: z.string().nullable(),
+        default_branch: z.string(),
+      }),
+    ),
+  }),
+})(async (_req, ctx) => {
+  const account = ctx.db.getAccount(ctx.auth.account_id)
+
+  if (!account) {
+    return ctx.error(401, {
+      error_code: "account_not_found",
+      message: "Account not found",
+    })
+  }
+
+  // Check if user has GitHub account connected
+  if (!account.github_username) {
+    return ctx.error(400, {
+      error_code: "github_not_connected",
+      message:
+        "GitHub account not connected. Please connect your GitHub account first.",
+    })
+  }
+
+  // Check if user has a GitHub installation
+  const githubInstallation = ctx.db.githubInstallations.find(
+    (installation) =>
+      installation.account_id === ctx.auth.account_id && installation.is_active,
+  )
+
+  if (!githubInstallation) {
+    // Return empty array if no GitHub installation found
+    return ctx.json({
+      repos: [],
+    })
+  }
+
+  // Mock repositories for demonstration
+  // In a real implementation, this would fetch from GitHub API using the installation access token
+  const mockRepos = [
+    {
+      unscoped_name: "my-electronics-project",
+      full_name: `${account.github_username}/my-electronics-project`,
+      owner: {
+        login: account.github_username,
+      },
+      description: "Arduino-based sensor monitoring system",
+      private: false,
+      default_branch: "main",
+    },
+    {
+      unscoped_name: "pcb-designs",
+      full_name: `${account.github_username}/pcb-designs`,
+      owner: {
+        login: account.github_username,
+      },
+      description: "Collection of PCB designs for various projects",
+      private: true,
+      default_branch: "main",
+    },
+    {
+      unscoped_name: "tscircuit-examples",
+      full_name: `${account.github_username}/tscircuit-examples`,
+      owner: {
+        login: account.github_username,
+      },
+      description: "Examples and tutorials for tscircuit",
+      private: false,
+      default_branch: "main",
+    },
+  ]
+
+  return ctx.json({
+    repos: mockRepos,
+  })
+})

package/fake-snippets-api/routes/api/packages/update.ts

@@ -18,6 +18,7 @@ export default withRouteSpec({
         .optional(),
       description: z.string().optional(),
       website: z.string().optional(),
+      github_repo_full_name: z.string().optional(),
       is_private: z.boolean().optional(),
       is_unlisted: z.boolean().optional(),
       default_view: z.enum(["files", "3d", "pcb", "schematic"]).optional(),
@@ -38,6 +39,7 @@ export default withRouteSpec({
     website,
     is_private,
     is_unlisted,
+    github_repo_full_name,
     default_view,
   } = req.jsonBody
 
@@ -81,6 +83,8 @@ export default withRouteSpec({
     description: description ?? existingPackage.description,
     unscoped_name: name ?? existingPackage.unscoped_name,
     website: website ?? existingPackage.website,
+    github_repo_full_name:
+      github_repo_full_name ?? existingPackage.github_repo_full_name,
     is_private: is_private ?? existingPackage.is_private,
     is_public:
       is_private !== undefined ? !is_private : existingPackage.is_public,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "type": "module",
   "repository": {
     "type": "git",
@@ -83,7 +83,7 @@
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "0.0.725",
+    "@tscircuit/runframe": "0.0.764",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",

package/src/App.tsx

@@ -79,6 +79,10 @@ const PackageEditorPage = lazyImport(async () => {
   ])
   return editorModule
 })
+const ViewConnectedRepoPage = lazyImport(
+  () => import("@/pages/view-connected-repo"),
+)
+const PreviewBuildPage = lazyImport(() => import("@/pages/preview-build"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -139,7 +143,7 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up listeners before reload
     this.setState({ reloading: true })
     this.reloadTimeout = window.setTimeout(() => {
-      window.location.reload()
+      // window.location.reload()
     }, 500)
   }
 
@@ -253,6 +257,11 @@ function App() {
             <Route path="/my-orders" component={MyOrdersPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
+            <Route path="/build/:buildId" component={ViewConnectedRepoPage} />
+            <Route
+              path="/build/:buildId/preview"
+              component={PreviewBuildPage}
+            />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
             <Route
               path="/:author/:packageName/builds"

package/src/components/CmdKMenu.tsx

@@ -5,7 +5,7 @@ import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { useNotImplementedToast } from "@/hooks/use-toast"
 import { fuzzyMatch } from "@/components/ViewPackagePage/utils/fuzz-search"
 import { Command } from "cmdk"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, Account } from "fake-snippets-api/lib/db/schema"
 import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import { useQuery } from "react-query"
 import {
@@ -16,6 +16,8 @@ import {
   Sparkles,
   Clock,
   ArrowRight,
+  Star,
+  User,
 } from "lucide-react"
 import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
 
@@ -40,6 +42,11 @@ interface ScoredPackage extends Package {
   matches: number[]
 }
 
+interface ScoredAccount extends Account {
+  score: number
+  matches: number[]
+}
+
 const CmdKMenu = () => {
   const [open, setOpen] = React.useState(false)
   const [searchQuery, setSearchQuery] = React.useState("")
@@ -113,13 +120,42 @@ const CmdKMenu = () => {
     ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.post("/packages/search", {
-        query: searchQuery,
-      })
-      return data.packages || []
+      try {
+        const { data } = await axios.post("/packages/search", {
+          query: searchQuery,
+        })
+        return data.packages || []
+      } catch (error) {
+        console.warn("Failed to fetch packages:", error)
+        return []
+      }
     },
     {
       enabled: Boolean(searchQuery),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const { data: allAccounts = [], isLoading: isSearchingAccounts } = useQuery(
+    ["accountSearch", searchQuery],
+    async () => {
+      if (!searchQuery) return []
+      try {
+        const { data } = await axios.post("/accounts/search", {
+          query: searchQuery,
+          limit: 5,
+        })
+        return data.accounts || []
+      } catch (error) {
+        console.warn("Failed to fetch accounts:", error)
+        return []
+      }
+    },
+    {
+      enabled: Boolean(searchQuery) && Boolean(currentUser),
+      retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 
@@ -133,20 +169,43 @@ const CmdKMenu = () => {
       })
       .filter((pkg: ScoredPackage) => pkg.score >= 0)
       .sort((a: ScoredPackage, b: ScoredPackage) => b.score - a.score)
-      .slice(0, 8)
+      .slice(0, 6)
   }, [allPackages, searchQuery])
 
+  const accountSearchResults = useMemo((): ScoredAccount[] => {
+    if (!searchQuery || !allAccounts.length) return []
+
+    return allAccounts
+      .map((account: Account) => {
+        const { score, matches } = fuzzyMatch(
+          searchQuery,
+          account.github_username,
+        )
+        return { ...account, score, matches }
+      })
+      .filter((account: ScoredAccount) => account.score >= 0)
+      .sort((a: ScoredAccount, b: ScoredAccount) => b.score - a.score)
+      .slice(0, 5)
+  }, [allAccounts, searchQuery])
+
   const { data: recentPackages = [] } = useQuery<Package[]>(
     ["userPackages", currentUser],
     async () => {
       if (!currentUser) return []
-      const response = await axios.post(`/packages/list`, {
-        owner_github_username: currentUser,
-      })
-      return response.data.packages || []
+      try {
+        const response = await axios.post(`/packages/list`, {
+          owner_github_username: currentUser,
+        })
+        return response.data.packages || []
+      } catch (error) {
+        console.warn("Failed to fetch recent packages:", error)
+        return []
+      }
     },
     {
       enabled: !!currentUser && !searchQuery,
+      retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 
@@ -195,7 +254,7 @@ const CmdKMenu = () => {
 
   const allItems = useMemo(() => {
     const items: Array<{
-      type: "package" | "recent" | "template" | "blank" | "import"
+      type: "package" | "account" | "recent" | "template" | "blank" | "import"
       item: any
       disabled?: boolean
     }> = []
@@ -206,6 +265,12 @@ const CmdKMenu = () => {
       })
     }
 
+    if (searchQuery && accountSearchResults.length > 0) {
+      accountSearchResults.forEach((account) => {
+        items.push({ type: "account", item: account })
+      })
+    }
+
     if (!searchQuery && recentPackages.length > 0) {
       recentPackages.slice(0, 6).forEach((pkg) => {
         items.push({ type: "recent", item: pkg })
@@ -225,7 +290,13 @@ const CmdKMenu = () => {
     })
 
     return items
-  }, [searchQuery, searchResults, recentPackages, filteredStaticOptions])
+  }, [
+    searchQuery,
+    searchResults,
+    accountSearchResults,
+    recentPackages,
+    filteredStaticOptions,
+  ])
 
   useHotkeyCombo("cmd+k", () => {
     setOpen((prev) => !prev)
@@ -285,6 +356,10 @@ const CmdKMenu = () => {
           window.location.href = `/${item.owner_github_username}/${item.unscoped_name}`
           setOpen(false)
           break
+        case "account":
+          window.location.href = `/${item.github_username}`
+          setOpen(false)
+          break
         case "blank":
         case "template":
           if (!item.disabled) {
@@ -362,7 +437,11 @@ const CmdKMenu = () => {
                   )}
                 </div>
               </div>
-              <div className="flex items-center gap-1 flex-shrink-0">
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <div className="flex items-center gap-1 text-gray-500">
+                  <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                  <span className="text-xs">{data.star_count ?? 0}</span>
+                </div>
                 <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
                   package
                 </span>
@@ -371,6 +450,41 @@ const CmdKMenu = () => {
             </div>
           )
 
+        case "account":
+          return (
+            <div
+              key={`account-${data.account_id}`}
+              ref={isSelected ? selectedItemRef : null}
+              className={baseClasses}
+              onClick={() => !disabled && handleItemSelect(item)}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <img
+                  src={`https://github.com/${data.github_username}.png`}
+                  alt={`${data.github_username} avatar`}
+                  className="w-6 h-6 rounded-full flex-shrink-0"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement
+                    target.style.display = "none"
+                    target.nextElementSibling?.classList.remove("hidden")
+                  }}
+                />
+                <User className="w-6 h-6 text-gray-400 flex-shrink-0 hidden" />
+                <div className="flex flex-col min-w-0">
+                  <span className="font-medium text-gray-900 truncate">
+                    {renderHighlighted(data, data.github_username)}
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-1 flex-shrink-0">
+                <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
+                  user
+                </span>
+                {isSelected && <ArrowRight className="w-3 h-3 text-gray-400" />}
+              </div>
+            </div>
+          )
+
         case "blank":
         case "template":
           return (
@@ -464,7 +578,7 @@ const CmdKMenu = () => {
         </div>
 
         <Command.List className="max-h-80 overflow-y-auto p-2 space-y-4">
-          {isSearching ? (
+          {isSearching || isSearchingAccounts ? (
             <Command.Loading className="p-6 text-center text-gray-500">
               <div className="flex items-center justify-center gap-2">
                 <div className="w-3 h-3 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"></div>
@@ -476,7 +590,7 @@ const CmdKMenu = () => {
               {searchQuery && searchResults.length > 0 && (
                 <div>
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2">
-                    Search Results
+                    Packages
                   </h3>
                   <div className="space-y-1">
                     {searchResults.slice(0, 8).map((pkg, localIndex) => {
@@ -490,6 +604,25 @@ const CmdKMenu = () => {
                 </div>
               )}
 
+              {searchQuery && accountSearchResults.length > 0 && (
+                <div>
+                  <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2">
+                    Users
+                  </h3>
+                  <div className="space-y-1">
+                    {accountSearchResults
+                      .slice(0, 5)
+                      .map((account, localIndex) => {
+                        const globalIndex = searchResults.length + localIndex
+                        return renderItem(
+                          { type: "account", item: account },
+                          globalIndex,
+                        )
+                      })}
+                  </div>
+                </div>
+              )}
+
               {!searchQuery && recentPackages.length > 0 && (
                 <div>
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2 flex items-center gap-1">
@@ -518,7 +651,7 @@ const CmdKMenu = () => {
                       (template, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) + localIndex
                         return renderItem(
                           {
@@ -544,7 +677,7 @@ const CmdKMenu = () => {
                       (template, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) +
                           filteredStaticOptions.blankTemplates.length +
                           localIndex
@@ -568,7 +701,7 @@ const CmdKMenu = () => {
                       (option, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) +
                           filteredStaticOptions.blankTemplates.length +
                           filteredStaticOptions.templates.length +
@@ -585,10 +718,12 @@ const CmdKMenu = () => {
 
               {searchQuery &&
                 !searchResults.length &&
+                !accountSearchResults.length &&
                 !filteredStaticOptions.blankTemplates.length &&
                 !filteredStaticOptions.templates.length &&
                 !filteredStaticOptions.importOptions.length &&
-                !isSearching && (
+                !isSearching &&
+                !isSearchingAccounts && (
                   <Command.Empty className="py-8 text-center">
                     <div className="text-gray-400 mb-1">No results found</div>
                     <div className="text-gray-500 text-xs">

package/src/components/CreateReleaseDialog.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Loader2, Tag, AlertCircle } from "lucide-react"
+
+interface CreateReleaseDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  version: string
+  setVersion: (version: string) => void
+  currentVersion?: string
+  isLoading: boolean
+  error: string | null
+  onCreateRelease: () => Promise<void>
+}
+
+export function CreateReleaseDialog({
+  isOpen,
+  onClose,
+  version,
+  setVersion,
+  currentVersion,
+  isLoading,
+  error,
+  onCreateRelease,
+}: CreateReleaseDialogProps) {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await onCreateRelease()
+  }
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Tag className="w-5 h-5" />
+            Create New Release
+          </DialogTitle>
+          <DialogDescription>
+            Create a new release. This will make your latest changes available
+            to users.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-3">
+            <div className="flex justify-center">
+              <p className="text-sm text-muted-foreground text-center">
+                {currentVersion ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <span>Current version:</span>
+                    <span className="font-mono font-medium text-foreground bg-muted px-2 py-1 rounded-md text-xs border">
+                      {currentVersion}
+                    </span>
+                  </span>
+                ) : (
+                  "Follow semantic versioning (e.g., 1.0.0)"
+                )}
+              </p>
+            </div>{" "}
+            <Label htmlFor="version" className="text-sm font-medium">
+              Version
+            </Label>
+            <Input
+              id="version"
+              placeholder="e.g., 1.0.0"
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+              disabled={isLoading}
+              className="h-10"
+            />
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading || !version.trim()}
+              className="min-w-[100px]"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                "Create Release"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}