@tscircuit/fake-snippets 0.0.115 → 0.0.116

package/dist/index.js

@@ -593,7 +593,7 @@ var seed = (db) => {
       phone: "555-123-4567"
     }
   });
-  db.addAccount({
+  const seveibarAcc = db.addAccount({
     github_username: "seveibar"
   });
   if (process.env.AUTOLOAD_PACKAGES === "true") {
@@ -2370,6 +2370,10 @@ exports.TestComponent = TestComponent;
     github_handle: "tscircuit",
     is_personal_org: true
   });
+  db.addOrganizationAccount({
+    org_id: testOrg.org_id,
+    account_id: seveibarAcc.account_id
+  });
 };
 
 // fake-snippets-api/lib/package_file/generate-fs-sha.ts

package/fake-snippets-api/lib/db/seed.ts

@@ -18,7 +18,7 @@ export const seed = (db: DbClient) => {
       phone: "555-123-4567",
     },
   })
-  db.addAccount({
+  const seveibarAcc = db.addAccount({
     github_username: "seveibar",
   })
 
@@ -1835,4 +1835,9 @@ exports.TestComponent = TestComponent;
     github_handle: "tscircuit",
     is_personal_org: true,
   })
+
+  db.addOrganizationAccount({
+    org_id: testOrg.org_id,
+    account_id: seveibarAcc.account_id,
+  })
 }

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

@@ -0,0 +1,16 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    prefix: z.string(),
+    suffix: z.string(),
+  }),
+  jsonResponse: z.object({
+    prediction: z.string(),
+  }),
+})(async (req, ctx) => {
+  return ctx.json({ prediction: "{/* mock autocomplete prediction */}" })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.115",
+  "version": "0.0.116",
   "type": "module",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
     "@tscircuit/3d-viewer": "^0.0.407",
     "@tscircuit/assembly-viewer": "^0.0.5",
     "@tscircuit/create-snippet-url": "^0.0.8",
-    "@tscircuit/eval": "^0.0.325",
+    "@tscircuit/eval": "^0.0.406",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.218",

package/src/components/GithubAvatarWithFallback.tsx

@@ -14,7 +14,7 @@ export const GithubAvatarWithFallback = ({
   size?: number
 }) => {
   return (
-    <Avatar className={`border-4 border-gray-100 ${className}`}>
+    <Avatar className={className}>
       <AvatarImage
         src={`https://github.com/${username}.png${size ? `?size=${size}` : ""}`}
         alt={`${username || fallback} avatar`}

package/src/components/organization/OrganizationHeader.tsx

@@ -4,7 +4,7 @@ import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useLocation } from "wouter"
+import { Link, useLocation } from "wouter"
 import { useOrganization } from "@/hooks/use-organization"
 import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
@@ -97,9 +97,12 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between mb-3">
-                <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
+                <Link
+                  href={`/${organization.name}`}
+                  className="font-bold text-gray-900 text-2xl md:text-3xl truncate"
+                >
                   {organization.name}
-                </h1>
+                </Link>
                 {canManageOrg && showActions && (
                   <Button variant="outline" onClick={handleSettingsClick}>
                     <Settings className="mr-2 h-4 w-4" />

package/src/components/organization/OrganizationMembers.tsx

@@ -1,48 +1,26 @@
 import React from "react"
 import { Link } from "wouter"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
+import { Users, Loader2 } from "lucide-react"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { cn } from "@/lib/utils"
 import { useListOrgMembers } from "@/hooks/use-list-org-members"
+import { getMemberRole } from "@/lib/utils/member-role"
+import { RoleBadge } from "@/components/ui/role-badge"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 
 interface OrganizationMembersProps {
-  orgId: string
+  organization: PublicOrgSchema
   className?: string
 }
-type MemberRole = "owner" | "admin" | "member" //todo
-const getRoleIcon = (role: MemberRole) => {
-  switch (role) {
-    case "owner":
-      return <Crown className="h-3 w-3" />
-    case "admin":
-      return <Shield className="h-3 w-3" />
-    case "member":
-      return <User className="h-3 w-3" />
-    default:
-      return <User className="h-3 w-3" />
-  }
-}
-
-const getRoleColor = (role: MemberRole) => {
-  switch (role) {
-    case "owner":
-      return "bg-yellow-100 text-yellow-800 border-yellow-200"
-    case "admin":
-      return "bg-purple-100 text-purple-800 border-purple-200"
-    case "member":
-      return "bg-gray-100 text-gray-800 border-gray-200"
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200"
-  }
-}
 
 export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
-  orgId,
+  organization,
   className,
 }) => {
-  const { data: members = [], isLoading } = useListOrgMembers({ orgId })
+  const { data: members = [], isLoading } = useListOrgMembers({
+    orgId: organization.org_id,
+  })
 
   if (isLoading) {
     return (
@@ -78,60 +56,54 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
       </div>
 
       <div className="space-y-2 sm:space-y-3">
-        {members.map((member) => (
-          <Link
-            key={member.account_id || member.github_username}
-            href={`/${member.github_username}`}
-            className="block"
-          >
-            <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
-              <div className="flex items-center gap-3 min-w-0 flex-1">
-                <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
-                  <AvatarImage
-                    src={`https://github.com/${member.github_username}.png`}
-                    alt={`${member.github_username} avatar`}
-                  />
-                  <AvatarFallback className="text-sm font-medium">
-                    {member.github_username
-                      .split(" ")
-                      .map((word) => word[0])
-                      .join("")
-                      .toUpperCase()
-                      .slice(0, 2)}
-                  </AvatarFallback>
-                </Avatar>
+        {members.map((member) => {
+          const role = getMemberRole(organization, member.account_id)
+          return (
+            <Link
+              key={member.account_id || member.github_username}
+              href={`/${member.github_username}`}
+              className="block"
+            >
+              <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
+                    <AvatarImage
+                      src={`https://github.com/${member.github_username}.png`}
+                      alt={`${member.github_username} avatar`}
+                    />
+                    <AvatarFallback className="text-sm font-medium">
+                      {member.github_username
+                        .split(" ")
+                        .map((word) => word[0])
+                        .join("")
+                        .toUpperCase()
+                        .slice(0, 2)}
+                    </AvatarFallback>
+                  </Avatar>
 
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <h3 className="font-medium text-gray-900 truncate">
-                      {member.github_username}
-                    </h3>
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        "text-xs flex items-center gap-1 flex-shrink-0",
-                        getRoleColor("admin"),
-                      )}
-                    >
-                      {getRoleIcon("admin")}
-                      {"admin"}
-                    </Badge>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="font-medium text-gray-900 truncate">
+                        {member.github_username}
+                      </h3>
+                      <RoleBadge role={role} />
+                    </div>
+                    <p className="text-sm text-gray-500 truncate">
+                      @{member.github_username}
+                    </p>
                   </div>
-                  <p className="text-sm text-gray-500 truncate">
-                    @{member.github_username}
-                  </p>
                 </div>
+                {member.joined_at && (
+                  <div className="text-right flex-shrink-0 hidden sm:block">
+                    <p className="text-xs text-gray-500">
+                      Joined {timeAgo(new Date(member.joined_at))}
+                    </p>
+                  </div>
+                )}
               </div>
-              {member.joined_at && (
-                <div className="text-right flex-shrink-0 hidden sm:block">
-                  <p className="text-xs text-gray-500">
-                    Joined {timeAgo(new Date(member.joined_at))}
-                  </p>
-                </div>
-              )}
-            </div>
-          </Link>
-        ))}
+            </Link>
+          )
+        })}
       </div>
 
       {members.length === 0 && (

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

@@ -51,6 +51,7 @@ import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { Loader2 } from "lucide-react"
+import { useAxios } from "@/hooks/use-axios"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -111,7 +112,7 @@ export const CodeEditor = ({
   const highlightTimeoutRef = useRef<number | null>(null)
 
   const { highlighter } = useShikiHighlighter()
-
+  const axios = useAxios()
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
@@ -358,23 +359,12 @@ export const CodeEditor = ({
     if (aiAutocompleteEnabled) {
       baseExtensions.push(
         inlineCopilot(async (prefix, suffix) => {
-          const res = await fetch(
-            `${apiUrl}/autocomplete/create_autocomplete`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                prefix,
-                suffix,
-                language: "typescript",
-              }),
-            },
-          )
-
-          const { prediction } = await res.json()
-          return prediction
+          const res = await axios.post("/autocomplete/create_autocomplete", {
+            prefix,
+            suffix,
+            language: "typescript",
+          })
+          return res.data?.prediction
         }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {

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

@@ -390,12 +390,12 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   onClick={() => {
                     setAiAutocompleteEnabled((prev) => !prev)
                   }}
-                  className={`relative group bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
+                  className={`relative group bg-transparent ${aiAutocompleteEnabled ? "text-black bg-white" : "text-gray-500 group-hover:text-black"}`}
                 >
                   <Bot className="h-4 w-4" />
                   {!aiAutocompleteEnabled && (
                     <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="w-5 h-0.5 group-hover:bg-slate-900 bg-gray-400 rotate-45 rounded-full" />
+                      <div className="w-5 h-0.5 group-hover:bg-black bg-gray-500 rotate-45 rounded-full" />
                     </div>
                   )}
                 </Button>

package/src/components/ui/role-badge.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+import {
+  type MemberRole,
+  getRoleIcon,
+  getRoleColor,
+  getRoleName,
+} from "@/lib/utils/member-role"
+
+interface RoleBadgeProps {
+  role: MemberRole
+  className?: string
+}
+
+export const RoleBadge = ({ role, className }: RoleBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        "select-none inline-flex items-center gap-1 py-0.5 px-1.5 rounded text-xs font-medium flex-shrink-0",
+        getRoleColor(role),
+        className,
+      )}
+    >
+      {getRoleIcon(role)}
+      <span className="leading-none">{getRoleName(role)}</span>
+    </div>
+  )
+}

package/src/hooks/use-list-org-members.ts

@@ -25,6 +25,7 @@ export const useListOrgMembers = ({
       enabled: Boolean(orgId || orgName),
       retry: false,
       refetchOnWindowFocus: false,
+      refetchOnMount: false,
       keepPreviousData: true,
     },
   )

package/src/hooks/use-package-by-package-name.ts

@@ -1,8 +1,11 @@
-import { useQuery } from "react-query"
+import { useQuery, UseQueryOptions } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
-export const usePackageByName = (packageName: string | null) => {
+export const usePackageByName = (
+  packageName: string | null,
+  options?: UseQueryOptions<Package, Error & { status: number }>,
+) => {
   const axios = useAxios()
   return useQuery<Package, Error & { status: number }>(
     ["package", packageName],
@@ -19,6 +22,8 @@ export const usePackageByName = (packageName: string | null) => {
       retry: false,
       enabled: Boolean(packageName),
       refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000,
+      ...options,
     },
   )
 }

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

@@ -1,5 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "react-query"
 import { useAxios } from "./use-axios"
+import { usePackageByName } from "./use-package-by-package-name"
+import { usePackageById } from "./use-package-by-package-id"
 
 type PackageStarQuery = { package_id: string } | { name: string }
 
@@ -9,7 +11,11 @@ interface PackageStarResponse {
 }
 
 export const usePackageStars = (query: PackageStarQuery | null) => {
-  const axios = useAxios()
+  const packageName = query && "name" in query ? query.name : null
+  const packageId = query && "package_id" in query ? query.package_id : null
+  const packageQuery = packageName
+    ? usePackageByName(packageName)
+    : usePackageById(packageId)
 
   return useQuery<PackageStarResponse, Error & { status: number }>(
     ["packageStars", query],
@@ -17,19 +23,14 @@ export const usePackageStars = (query: PackageStarQuery | null) => {
       if (!query) {
         throw new Error("Query is required")
       }
-
-      const { data } = await axios.get("/packages/get", {
-        params: query,
-      })
-
       return {
-        is_starred: data.package.is_starred ?? false,
-        star_count: data.package.star_count ?? 0,
+        is_starred: packageQuery.data?.is_starred ?? false,
+        star_count: packageQuery.data?.star_count ?? 0,
       }
     },
     {
       retry: false,
-      enabled: Boolean(query),
+      enabled: Boolean(query) && packageQuery.isSuccess,
     },
   )
 }

package/src/lib/utils/member-role.tsx

@@ -0,0 +1,61 @@
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { Crown, Shield, User } from "lucide-react"
+
+export type MemberRole = "owner" | "manager" | "member"
+
+export const getRoleName = (role: MemberRole) => {
+  return role.charAt(0).toUpperCase() + role.slice(1)
+}
+
+export const getMemberRole = (
+  organization: PublicOrgSchema,
+  accountId: string,
+): MemberRole => {
+  const isOwner =
+    String(accountId).trim() === String(organization.owner_account_id).trim()
+  const isManager = Object.values(organization.user_permissions ?? {}).some(
+    Boolean,
+  )
+  if (isOwner) {
+    return "owner"
+  }
+  if (isManager) {
+    return "manager"
+  }
+  return "member"
+}
+
+export const getRoleIcon = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return <Crown className="size-3" />
+    case "manager":
+      return <Shield className="size-3" />
+    case "member":
+      return <User className="size-3" />
+    default:
+      return <User className="size-3" />
+  }
+}
+
+export const getRoleColor = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "bg-amber-100 text-amber-800 border-amber-200"
+    case "manager":
+      return "bg-blue-50 text-blue-700 border border-blue-200"
+    default:
+      return "bg-gray-100 text-gray-800 border-gray-200"
+  }
+}
+
+export const getRoleDescription = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "Full access to organization settings"
+    case "manager":
+      return "Limited administrative privileges"
+    case "member":
+      return "Standard member access"
+  }
+}

package/src/pages/organization-profile.tsx

@@ -14,7 +14,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { useListOrgMembers } from "@/hooks/use-list-org-members"
 import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
@@ -175,7 +174,7 @@ export const OrganizationProfilePageContent = ({
 
             {activeTab === "members" && (
               <div>
-                <OrganizationMembers orgId={org.org_id} />
+                <OrganizationMembers organization={org} />
               </div>
             )}
           </div>