@tscircuit/fake-snippets 0.0.95 → 0.0.96

package/dist/index.d.ts

@@ -434,6 +434,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }>, "many">>;
     datasheet_pdf_urls: z.ZodNullable<z.ZodArray<z.ZodString, "many">>;
+    ai_description: z.ZodNullable<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     created_at: string;
     datasheet_id: string;
@@ -445,6 +446,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }[] | null;
     datasheet_pdf_urls: string[] | null;
+    ai_description: string | null;
 }, {
     created_at: string;
     datasheet_id: string;
@@ -456,6 +458,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }[] | null;
     datasheet_pdf_urls: string[] | null;
+    ai_description: string | null;
 }>;
 type Datasheet = z.infer<typeof datasheetSchema>;
 declare const accountPackageSchema: z.ZodObject<{
@@ -654,6 +657,7 @@ declare const packageSchema: z.ZodObject<{
     is_private: boolean | null;
     is_public: boolean | null;
     is_unlisted: boolean | null;
+    ai_description: string | null;
     package_id: string;
     license: string | null;
     creator_account_id: string;
@@ -668,7 +672,6 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     website: string | null;
-    ai_description: string | null;
     ai_usage_instructions: string | null;
     latest_package_release_fs_sha: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -680,6 +683,7 @@ declare const packageSchema: z.ZodObject<{
     created_at: string;
     updated_at: string;
     description: string | null;
+    ai_description: string | null;
     package_id: string;
     license: string | null;
     creator_account_id: string;
@@ -687,7 +691,6 @@ declare const packageSchema: z.ZodObject<{
     owner_github_username: string | null;
     latest_package_release_id: string | null;
     latest_version: string | null;
-    ai_description: string | null;
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     star_count?: number | undefined;
@@ -920,6 +923,7 @@ declare const createDatabase: ({ seed }?: {
         is_private: boolean | null;
         is_public: boolean | null;
         is_unlisted: boolean | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -934,7 +938,6 @@ declare const createDatabase: ({ seed }?: {
         latest_package_release_id: string | null;
         latest_version: string | null;
         website: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -1068,6 +1071,7 @@ declare const createDatabase: ({ seed }?: {
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }[];
 }, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
@@ -1272,6 +1276,7 @@ declare const createDatabase: ({ seed }?: {
         is_private: boolean | null;
         is_public: boolean | null;
         is_unlisted: boolean | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -1286,7 +1291,6 @@ declare const createDatabase: ({ seed }?: {
         latest_package_release_id: string | null;
         latest_version: string | null;
         website: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -1420,6 +1424,7 @@ declare const createDatabase: ({ seed }?: {
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }[];
 }, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;

package/dist/index.js

@@ -141,7 +141,8 @@ var datasheetSchema = z.object({
   chip_name: z.string(),
   created_at: z.string(),
   pin_information: datasheetPinInformationSchema.array().nullable(),
-  datasheet_pdf_urls: z.array(z.string()).nullable()
+  datasheet_pdf_urls: z.array(z.string()).nullable(),
+  ai_description: z.string().nullable()
 });
 var accountSnippetSchema = z.object({
   account_id: z.string(),
@@ -3116,7 +3117,8 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
       chip_name,
       created_at: (/* @__PURE__ */ new Date()).toISOString(),
       pin_information: null,
-      datasheet_pdf_urls: null
+      datasheet_pdf_urls: null,
+      ai_description: null
     });
     set((state) => ({
       datasheets: [...state.datasheets, newDatasheet]

package/dist/schema.d.ts

@@ -555,6 +555,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }>, "many">>;
     datasheet_pdf_urls: z.ZodNullable<z.ZodArray<z.ZodString, "many">>;
+    ai_description: z.ZodNullable<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     created_at: string;
     datasheet_id: string;
@@ -566,6 +567,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }[] | null;
     datasheet_pdf_urls: string[] | null;
+    ai_description: string | null;
 }, {
     created_at: string;
     datasheet_id: string;
@@ -577,6 +579,7 @@ declare const datasheetSchema: z.ZodObject<{
         capabilities: string[];
     }[] | null;
     datasheet_pdf_urls: string[] | null;
+    ai_description: string | null;
 }>;
 type Datasheet = z.infer<typeof datasheetSchema>;
 declare const accountSnippetSchema: z.ZodObject<{
@@ -795,6 +798,7 @@ declare const packageSchema: z.ZodObject<{
     is_private: boolean | null;
     is_public: boolean | null;
     is_unlisted: boolean | null;
+    ai_description: string | null;
     package_id: string;
     license: string | null;
     creator_account_id: string;
@@ -809,7 +813,6 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     website: string | null;
-    ai_description: string | null;
     ai_usage_instructions: string | null;
     latest_package_release_fs_sha: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -821,6 +824,7 @@ declare const packageSchema: z.ZodObject<{
     created_at: string;
     updated_at: string;
     description: string | null;
+    ai_description: string | null;
     package_id: string;
     license: string | null;
     creator_account_id: string;
@@ -828,7 +832,6 @@ declare const packageSchema: z.ZodObject<{
     owner_github_username: string | null;
     latest_package_release_id: string | null;
     latest_version: string | null;
-    ai_description: string | null;
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     star_count?: number | undefined;
@@ -1296,6 +1299,7 @@ declare const databaseSchema: z.ZodObject<{
         is_private: boolean | null;
         is_public: boolean | null;
         is_unlisted: boolean | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -1310,7 +1314,6 @@ declare const databaseSchema: z.ZodObject<{
         latest_package_release_id: string | null;
         latest_version: string | null;
         website: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -1322,6 +1325,7 @@ declare const databaseSchema: z.ZodObject<{
         created_at: string;
         updated_at: string;
         description: string | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -1329,7 +1333,6 @@ declare const databaseSchema: z.ZodObject<{
         owner_github_username: string | null;
         latest_package_release_id: string | null;
         latest_version: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         star_count?: number | undefined;
@@ -1734,6 +1737,7 @@ declare const databaseSchema: z.ZodObject<{
             capabilities: string[];
         }>, "many">>;
         datasheet_pdf_urls: z.ZodNullable<z.ZodArray<z.ZodString, "many">>;
+        ai_description: z.ZodNullable<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         created_at: string;
         datasheet_id: string;
@@ -1745,6 +1749,7 @@ declare const databaseSchema: z.ZodObject<{
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }, {
         created_at: string;
         datasheet_id: string;
@@ -1756,6 +1761,7 @@ declare const databaseSchema: z.ZodObject<{
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }>, "many">>;
 }, "strip", z.ZodTypeAny, {
     idCounter: number;
@@ -1868,6 +1874,7 @@ declare const databaseSchema: z.ZodObject<{
         is_private: boolean | null;
         is_public: boolean | null;
         is_unlisted: boolean | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -1882,7 +1889,6 @@ declare const databaseSchema: z.ZodObject<{
         latest_package_release_id: string | null;
         latest_version: string | null;
         website: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
@@ -2016,6 +2022,7 @@ declare const databaseSchema: z.ZodObject<{
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }[];
 }, {
     idCounter?: number | undefined;
@@ -2124,6 +2131,7 @@ declare const databaseSchema: z.ZodObject<{
         created_at: string;
         updated_at: string;
         description: string | null;
+        ai_description: string | null;
         package_id: string;
         license: string | null;
         creator_account_id: string;
@@ -2131,7 +2139,6 @@ declare const databaseSchema: z.ZodObject<{
         owner_github_username: string | null;
         latest_package_release_id: string | null;
         latest_version: string | null;
-        ai_description: string | null;
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         star_count?: number | undefined;
@@ -2276,6 +2283,7 @@ declare const databaseSchema: z.ZodObject<{
             capabilities: string[];
         }[] | null;
         datasheet_pdf_urls: string[] | null;
+        ai_description: string | null;
     }[] | undefined;
 }>;
 type DatabaseSchema = z.infer<typeof databaseSchema>;

package/dist/schema.js

@@ -136,7 +136,8 @@ var datasheetSchema = z.object({
   chip_name: z.string(),
   created_at: z.string(),
   pin_information: datasheetPinInformationSchema.array().nullable(),
-  datasheet_pdf_urls: z.array(z.string()).nullable()
+  datasheet_pdf_urls: z.array(z.string()).nullable(),
+  ai_description: z.string().nullable()
 });
 var accountSnippetSchema = z.object({
   account_id: z.string(),

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

@@ -1387,6 +1387,7 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       created_at: new Date().toISOString(),
       pin_information: null,
       datasheet_pdf_urls: null,
+      ai_description: null,
     })
     set((state) => ({
       datasheets: [...state.datasheets, newDatasheet],

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

@@ -163,6 +163,7 @@ export const datasheetSchema = z.object({
   created_at: z.string(),
   pin_information: datasheetPinInformationSchema.array().nullable(),
   datasheet_pdf_urls: z.array(z.string()).nullable(),
+  ai_description: z.string().nullable(),
 })
 export type Datasheet = z.infer<typeof datasheetSchema>
 

package/fake-snippets-api/routes/api/_fake/datasheets/process_all_datasheets.ts

@@ -5,7 +5,7 @@ import { z } from "zod"
 export const processAllDatasheets = (ctx: any) => {
   const processed = [] as z.infer<typeof datasheetSchema>[]
   ctx.db.datasheets.forEach((ds: any) => {
-    if (!ds.pin_information || !ds.datasheet_pdf_urls) {
+    if (!ds.pin_information || !ds.datasheet_pdf_urls || !ds.ai_description) {
       const updated = ctx.db.updateDatasheet(ds.datasheet_id, {
         pin_information: [
           {
@@ -16,6 +16,7 @@ export const processAllDatasheets = (ctx: any) => {
           },
         ],
         datasheet_pdf_urls: ["https://example.com/datasheet.pdf"],
+        ai_description: "Placeholder ai description",
       })
       processed.push(updated!)
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/DownloadButtonAndMenu.tsx

@@ -65,11 +65,11 @@ export function DownloadButtonAndMenu({
         <DropdownMenuTrigger asChild>
           <Button
             size="sm"
-            className="bg-white text-gray-900 hover:bg-gray-100 border border-gray-300 px-1 pl-2"
+            className="bg-transparent shadow-inner hover:bg-gray-100 text-gray-700 outline-none"
           >
-            <Download className="w-4 h-4 mr-2" />
+            <Download className="h-4 w-4 mr-1.5" />
             Download
-            <ChevronDown className="w-4 h-4 ml-1" />
+            <ChevronDown className="h-4 w-4 ml-0.5" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="!z-[101]">

package/src/components/ExpandableText.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react"
+
+interface ExpandableTextProps {
+  text: string
+  maxChars?: number
+}
+
+const ExpandableText = ({ text, maxChars = 30 }: ExpandableTextProps) => {
+  const [expanded, setExpanded] = useState(false)
+
+  if (text.length <= maxChars) {
+    return <span>{text}</span>
+  }
+
+  return (
+    <span>
+      {expanded ? text : `${text.slice(0, maxChars)}...`}
+      <button
+        className="text-blue-600 underline ml-1"
+        type="button"
+        onClick={() => setExpanded((prev) => !prev)}
+      >
+        {expanded ? "Show less" : "Show more"}
+      </button>
+    </span>
+  )
+}
+
+export default ExpandableText

package/src/components/Header.tsx

@@ -80,6 +80,9 @@ export default function Header() {
                   Editor
                 </HeaderButton>
               </li>
+              <li>
+                <HeaderButton href="/datasheets">Datasheets</HeaderButton>
+              </li>
               <li>
                 <a href="https://chat.tscircuit.com">
                   <Button variant="ghost">AI</Button>
@@ -152,6 +155,14 @@ export default function Header() {
                   Editor
                 </HeaderButton>
               </li>
+              <li>
+                <HeaderButton
+                  className="w-full justify-start"
+                  href="/datasheets"
+                >
+                  Datasheets
+                </HeaderButton>
+              </li>
               <li>
                 <HeaderButton
                   className="w-full justify-start"

package/src/components/Header2.tsx

@@ -88,6 +88,12 @@ export const Header2 = () => {
             >
               Editor
             </PrefetchPageLink>
+            <PrefetchPageLink
+              className="text-sm font-medium hover:underline underline-offset-4"
+              href="/datasheets"
+            >
+              Datasheets
+            </PrefetchPageLink>
             {/* <a
             className="text-sm font-medium hover:underline underline-offset-4"
             href="https://github.com/tscircuit/tscircuit"

package/src/components/PackageCard.tsx

@@ -8,6 +8,7 @@ import {
   PencilIcon,
   Share2,
   Trash2,
+  CircuitBoard,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
@@ -107,13 +108,21 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     >
       <div className="flex items-start gap-4">
         <div
-          className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
+          className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center`}
         >
-          <ImageWithFallback
+          <img
             src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3d"}.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             alt={`${pkg.unscoped_name} ${availableImages.includes(pkg.default_view || "") ? pkg.default_view : "3D"} view`}
             className={`object-cover h-full w-full ${imageTransform}`}
+            onError={(e) => {
+              e.currentTarget.style.display = "none"
+              e.currentTarget.nextElementSibling?.classList.remove("hidden")
+              e.currentTarget.nextElementSibling?.classList.add("flex")
+            }}
           />
+          <div className="hidden items-center justify-center h-full w-full">
+            <CircuitBoard className="w-6 h-6 text-gray-300" />
+          </div>
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex justify-between items-start mb-[2px] -mt-[3px]">

package/src/components/PrefetchPageLink.tsx

@@ -14,18 +14,27 @@ const PREFETCHABLE_PAGES = new Set([
   "latest",
   "settings",
   "quickstart",
+  "datasheets",
 ])
 
 // Helper to check if a path is a package path (e.g. /username/package-name)
 const isPackagePath = (path: string) => {
   const parts = path.split("/").filter(Boolean)
-  return parts.length === 2
+  if (parts.length !== 2) return false
+
+  // Make sure we're not matching paths with query parameters in the first segment
+  const firstPart = parts[0].split("?")[0]
+  return firstPart.length > 0 && !PREFETCHABLE_PAGES.has(firstPart)
 }
 
 // Helper to check if a path is a user profile path
 const isUserProfilePath = (path: string) => {
   const parts = path.split("/").filter(Boolean)
-  return parts.length === 1 && !PREFETCHABLE_PAGES.has(parts[0])
+  if (parts.length !== 1) return false
+
+  // Extract the base path without query parameters
+  const basePath = parts[0].split("?")[0]
+  return !PREFETCHABLE_PAGES.has(basePath)
 }
 
 export const PrefetchPageLink = ({

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -94,7 +94,7 @@ export default function MainContentHeader({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
+              className="bg-green-600 shadow-none hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
             >
               <CodeIcon className="h-4 w-4 mr-1.5" />
               Code

package/src/hooks/use-account-balance.ts

@@ -17,8 +17,9 @@ export const useAccountBalance = () => {
       return data.account_balance
     },
     {
-      refetchInterval: 60000, // Refetch every minute
+      // refetchInterval: 60000, // Refetch every minute
       enabled: isLoggedIn,
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/pages/datasheet.tsx

@@ -3,6 +3,7 @@ import { useDatasheet } from "@/hooks/use-datasheet"
 import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
+import ExpandableText from "@/components/ExpandableText"
 import type { Datasheet } from "fake-snippets-api/lib/db/schema"
 
 export const DatasheetPage = () => {
@@ -20,10 +21,38 @@ export const DatasheetPage = () => {
       <Header />
       <main className="container mx-auto flex-1 px-4 py-8">
         <h1 className="text-3xl font-bold mb-6">{chipName} Datasheet</h1>
+        <p className="mb-4">
+          <a
+            href={`https://api.tscircuit.com/datasheets/get?chip_name=${encodeURIComponent(chipName)}`}
+            className="text-blue-600 underline"
+          >
+            Download JSON
+          </a>
+        </p>
         {datasheetQuery.isLoading ? (
           <p>Loading...</p>
         ) : datasheetQuery.data ? (
           <div>
+            {!datasheetQuery.data.pin_information &&
+              !datasheetQuery.data.datasheet_pdf_urls && (
+                <p>Datasheet is processing. Please check back later.</p>
+              )}
+
+            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
+            {datasheetQuery.data.datasheet_pdf_urls ? (
+              <ul className="list-disc pl-5 mb-6">
+                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
+                  <li key={url}>
+                    <a href={url} className="text-blue-600 underline">
+                      {url}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No datasheet PDFs available.</p>
+            )}
+
             <h2 className="text-xl font-semibold mb-2">Pin Information</h2>
             {datasheetQuery.data.pin_information ? (
               <table className="table-auto border-collapse mb-6">
@@ -32,6 +61,7 @@ export const DatasheetPage = () => {
                     <th className="border px-2 py-1">Pin</th>
                     <th className="border px-2 py-1">Name</th>
                     <th className="border px-2 py-1">Description</th>
+                    <th className="border px-2 py-1">Capabilities</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -40,6 +70,12 @@ export const DatasheetPage = () => {
                       <td className="border px-2 py-1">{pin.pin_number}</td>
                       <td className="border px-2 py-1">{pin.name}</td>
                       <td className="border px-2 py-1">{pin.description}</td>
+                      <td className="border px-2 py-1">
+                        <ExpandableText
+                          text={pin.capabilities.join(", ")}
+                          maxChars={30}
+                        />
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -47,21 +83,6 @@ export const DatasheetPage = () => {
             ) : (
               <p>No pin information available.</p>
             )}
-
-            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
-            {datasheetQuery.data.datasheet_pdf_urls ? (
-              <ul className="list-disc pl-5">
-                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
-                  <li key={url}>
-                    <a href={url} className="text-blue-600 underline">
-                      {url}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p>No datasheet PDFs available.</p>
-            )}
           </div>
         ) : datasheetQuery.error &&
           (datasheetQuery.error as any).status === 404 ? (