@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/pages/user-profile.tsx

@@ -10,7 +10,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import type { Package } from "fake-snippets-api/lib/db/schema"
+import type { Package, PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
@@ -23,21 +23,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Box, Star } from "lucide-react"
+import { Box, Star, Building2 } from "lucide-react"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { ConnectedPackagesList } from "@/components/preview/ConnectedPackagesList"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { OrganizationCard } from "@/components/organization/OrganizationCard"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
+  const { data: organizations } = useListUserOrgs(username)
   const [searchQuery, setSearchQuery] = useState("")
   const [activeTab, setActiveTab] = useState("all")
-  const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
+  const [filter, setFilter] = useState("most-recent")
   const session = useGlobalStore((s) => s.session)
   const {
     data: account,
     error: accountError,
     isLoading: isLoadingAccount,
+    isFetched: isFetchedAccount,
   } = useQuery<
     { account: { github_username: string } },
     Error & { status: number }
@@ -98,6 +102,10 @@ export const UserProfilePage = () => {
 
   const baseUrl = useApiBaseUrl()
 
+  if (!isFetchedAccount) {
+    return null
+  }
+
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />
   }
@@ -145,8 +153,11 @@ export const UserProfilePage = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="flex items-center gap-4 mb-6">
           <Avatar className="h-16 w-16">
-            <AvatarImage src={`https://github.com/${githubUsername}.png`} />
-            <AvatarFallback>
+            <AvatarImage
+              src={`https://github.com/${githubUsername}.png`}
+              draggable={false}
+            />
+            <AvatarFallback className="select-none">
               {githubUsername?.[0]?.toUpperCase()}
             </AvatarFallback>
           </Avatar>
@@ -174,10 +185,17 @@ export const UserProfilePage = () => {
             </Button>
           </a>
         </div>
-        <Tabs defaultValue="all" onValueChange={setActiveTab} className="mb-4">
+        <Tabs
+          defaultValue="all"
+          onValueChange={setActiveTab}
+          className="mb-4 select-none overflow-x-auto no-scrollbar"
+        >
           <TabsList>
             <TabsTrigger value="all">Packages</TabsTrigger>
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
+            {organizations && organizations.length > 0 && (
+              <TabsTrigger value="organizations">Organizations</TabsTrigger>
+            )}
             {isCurrentUserProfile &&
               (
                 userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
@@ -217,6 +235,39 @@ export const UserProfilePage = () => {
               []
             }
           />
+        ) : activeTab === "organizations" ? (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {organizations && organizations.length > 0 ? (
+              organizations
+                ?.filter((o) => {
+                  if (!isCurrentUserProfile && o.is_personal_org) {
+                    return false
+                  } else {
+                    return true
+                  }
+                })
+                .map((org: PublicOrgSchema) => (
+                  <OrganizationCard
+                    key={org.org_id}
+                    organization={org}
+                    withLink={true}
+                    showStats={true}
+                    showMembers={true}
+                    className="p-3"
+                  />
+                ))
+            ) : (
+              <div className="col-span-full flex justify-center">
+                <div className="flex flex-col items-center py-12 text-gray-500">
+                  <Building2 className="mb-2" size={24} />
+                  <span className="text-lg font-medium">No organizations</span>
+                  <span className="text-sm">
+                    You're not a member of any organizations yet.
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
         ) : isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (
@@ -240,7 +291,7 @@ export const UserProfilePage = () => {
               ))
             ) : (
               <div className="col-span-full flex justify-center">
-                <div className="flex flex-col items-center py-12 text-gray-500">
+                <div className="flex flex-col items-center py-20 text-gray-500">
                   {activeTab === "starred" ? (
                     <>
                       <Star className="mb-2" size={24} />

package/src/pages/view-package.tsx

@@ -1,43 +1,37 @@
 import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
 import { usePackageFiles } from "@/hooks/use-package-files"
-import { usePackageRelease } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useLocation, useParams } from "wouter"
 import { Helmet } from "react-helmet-async"
 import { useEffect, useState } from "react"
 import NotFoundPage from "./404"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackage } from "@/hooks/use-package"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
 
 export const ViewPackagePage = () => {
-  const {
-    packageId,
-    error: packageIdError,
-    isLoading: isLoadingPackageId,
-  } = useCurrentPackageId()
-  const { data: packageInfo } = usePackage(packageId)
   const { author, packageName } = useParams()
+  const packageNameFull = `${author}/${packageName}`
   const [, setLocation] = useLocation()
+
+  // Get package data directly by name - this will also cache by ID
+  const {
+    data: packageInfo,
+    error: packageError,
+    isLoading: isLoadingPackage,
+  } = usePackageByName(packageNameFull)
   const {
-    data: packageRelease,
+    packageRelease,
     error: packageReleaseError,
     isLoading: isLoadingPackageRelease,
-  } = usePackageRelease(
-    {
-      is_latest: true,
-      package_name: `${author}/${packageName}`,
-      include_ai_review: true,
-    },
-    {
-      refetchInterval: (data) =>
-        data?.ai_review_requested && !data.ai_review_text ? 2000 : false,
-    },
-  )
+  } = useCurrentPackageRelease({
+    include_ai_review: true,
+    refetchInterval: (data) =>
+      data?.ai_review_requested && !data.ai_review_text ? 2000 : false,
+  })
 
-  const { data: packageFiles } = usePackageFiles(
-    packageRelease?.package_release_id,
-  )
+  const { data: packageFiles, isFetched: arePackageFilesFetched } =
+    usePackageFiles(packageRelease?.package_release_id)
 
-  if (!isLoadingPackageId && packageIdError) {
+  if (!isLoadingPackage && packageError) {
     return <NotFoundPage heading="Package Not Found" />
   }
 
@@ -51,7 +45,8 @@ export const ViewPackagePage = () => {
         <title>{`${author}/${packageName} - tscircuit`}</title>
       </Helmet>
       <RepoPageContent
-        packageFiles={packageFiles as any}
+        packageFiles={packageFiles ?? []}
+        arePackageFilesFetched={arePackageFilesFetched}
         packageInfo={packageInfo}
         packageRelease={packageRelease}
         importantFilePaths={["README.md", "LICENSE", "package.json"]}

package/vite.config.ts

@@ -183,11 +183,18 @@ export default defineConfig(async (): Promise<UserConfig> => {
     }
   }
 
+  if (process.env.SENTRY_DSN) {
+    process.env.VITE_SENTRY_DSN = process.env.SENTRY_DSN
+  }
+
   return {
     plugins,
     define: {
       global: {},
     },
+    optimizeDeps: {
+      exclude: ["@resvg/resvg-js", "@resvg/resvg-js-darwin-arm64"],
+    },
     server: {
       host: "127.0.0.1",
       proxy: proxyConfig,
@@ -211,11 +218,13 @@ export default defineConfig(async (): Promise<UserConfig> => {
           main: path.resolve(__dirname, "index.html"),
           landing: path.resolve(__dirname, "landing.html"),
         },
+        external: ["@resvg/resvg-js"],
       },
     },
     ssr: {
       noExternal: ["react-dom/client"],
       target: "node",
+      external: ["@resvg/resvg-js", "@resvg/resvg-js-darwin-arm64"],
     },
     resolve: {
       alias: {

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

@@ -1,133 +0,0 @@
-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/src/components/Footer2.tsx

@@ -1,100 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import {
-  CircuitBoard,
-  Cpu,
-  Layers,
-  CloudLightningIcon as Lightning,
-  Maximize2,
-  Zap,
-} from "lucide-react"
-import { Link } from "wouter"
-import { Header2 } from "@/components/Header2"
-
-export const Footer2 = () => (
-  <footer className="w-full py-6 bg-background">
-    <div className="container px-4 md:px-6 mx-auto">
-      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-        <div className="space-y-4">
-          <div className="flex items-center gap-2">
-            <CircuitBoard className="h-6 w-6" />
-            <span className="text-lg font-bold">tscircuit</span>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            Transforming electronic design with AI-powered tools.
-          </p>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Product</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Features
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Pricing
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Tutorials
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Company</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                About
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Blog
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Careers
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Legal</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Privacy
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Terms
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Cookie Policy
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className="mt-8 border-t pt-8 text-center text-sm text-muted-foreground">
-        © {new Date().getFullYear()} tscircuit. All rights reserved.
-      </div>
-    </div>
-  </footer>
-)