@tscircuit/fake-snippets 0.0.81 → 0.0.83

package/src/components/JLCPCBImportDialog.tsx

@@ -20,43 +20,102 @@ interface JLCPCBImportDialogProps {
   onOpenChange: (open: boolean) => void
 }
 
-export function JLCPCBImportDialog({
-  open,
-  onOpenChange,
-}: JLCPCBImportDialogProps) {
-  const [partNumber, setPartNumber] = useState("")
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [hasBeenImportedToAccountAlready, setHasBeenImportedToAccountAlready] =
-    useState<boolean>(false)
+interface ImportState {
+  isLoading: boolean
+  error: string | null
+  existingComponent: {
+    partNumber: string
+    username: string
+  } | null
+}
+
+interface JLCPCBResponse {
+  ok: boolean
+  package: {
+    package_id: string
+  }
+}
+
+interface APIError {
+  status: number
+  data?: {
+    message?: string
+    existing_part_number?: string
+    part_number?: string
+    error?: {
+      message?: string
+    }
+  }
+}
+
+const extractErrorMessage = (error: APIError): string => {
+  return (
+    error?.data?.message ||
+    error?.data?.error?.message ||
+    "An unexpected error occurred"
+  )
+}
+
+const extractExistingPartNumber = (
+  error: APIError,
+  fallback: string,
+): string => {
+  return error?.data?.message || error?.data?.error?.message || fallback
+}
+
+const useJLCPCBImport = () => {
+  const [state, setState] = useState<ImportState>({
+    isLoading: false,
+    error: null,
+    existingComponent: null,
+  })
+
   const axios = useAxios()
   const { toast } = useToast()
   const [, navigate] = useLocation()
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const session = useGlobalStore((s) => s.session)
 
-  const handleImport = async () => {
-    if (!partNumber.startsWith("C")) {
+  const resetState = () => {
+    setState({
+      isLoading: false,
+      error: null,
+      existingComponent: null,
+    })
+  }
+
+  const importComponent = async (partNumber: string) => {
+    if (!partNumber.startsWith("C") || partNumber.length < 2) {
       toast({
         title: "Invalid Part Number",
-        description: "JLCPCB part numbers should start with 'C'.",
+        description:
+          "JLCPCB part numbers should start with 'C' and be at least 2 characters long.",
         variant: "destructive",
       })
-      return
+      return { success: false }
     }
 
-    setIsLoading(true)
-    setError(null)
-    setHasBeenImportedToAccountAlready(false)
+    setState((prev) => ({
+      ...prev,
+      isLoading: true,
+      error: null,
+      existingComponent: null,
+    }))
 
     try {
-      const response = await axios.post("/packages/generate_from_jlcpcb", {
-        jlcpcb_part_number: partNumber,
-      })
+      const response = await axios.post<JLCPCBResponse>(
+        "/packages/generate_from_jlcpcb",
+        {
+          jlcpcb_part_number: partNumber,
+        },
+      )
+
       if (!response.data.ok) {
-        setError("Failed to generate package from JLCPCB part")
-        setIsLoading(false)
-        return
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: "Failed to generate package from JLCPCB part",
+        }))
+        return { success: false }
       }
 
       const { package: generatedPackage } = response.data
@@ -66,27 +125,84 @@ export function JLCPCBImportDialog({
         description: "JLCPCB component has been imported successfully.",
       })
 
-      onOpenChange(false)
       navigate(`/editor?package_id=${generatedPackage.package_id}`)
+      return { success: true }
     } catch (error: any) {
-      if (error.response?.status === 404) {
-        setError(`Component with JLCPCB part number ${partNumber} not found`)
-      } else if (error.response?.data?.message) {
-        setError(error.response.data.message)
+      const apiError = error as APIError
+
+      if (apiError.status === 404) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: `Component with JLCPCB part number ${partNumber} not found`,
+        }))
+      } else if (apiError.status === 409) {
+        const existingPartNumber = extractExistingPartNumber(
+          apiError,
+          partNumber,
+        )
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          existingComponent: {
+            partNumber: existingPartNumber,
+            username: session?.github_username || "",
+          },
+        }))
       } else {
-        setError("Failed to import the JLCPCB component. Please try again.")
+        const errorMessage = extractErrorMessage(apiError)
+        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }))
+
         toast({
           title: "Import Failed",
-          description:
-            "Failed to import the JLCPCB component. Please try again.",
+          description: errorMessage,
           variant: "destructive",
         })
       }
-    } finally {
-      setIsLoading(false)
+
+      return { success: false }
+    }
+  }
+
+  return {
+    ...state,
+    importComponent,
+    resetState,
+  }
+}
+
+export function JLCPCBImportDialog({
+  open,
+  onOpenChange,
+}: JLCPCBImportDialogProps) {
+  const [partNumber, setPartNumber] = useState("")
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+
+  const { isLoading, error, existingComponent, importComponent, resetState } =
+    useJLCPCBImport()
+
+  const handleImport = async () => {
+    const result = await importComponent(partNumber)
+    if (result.success) {
+      onOpenChange(false)
     }
   }
 
+  const handleInputChange = (value: string) => {
+    setPartNumber(value)
+    resetState()
+  }
+
+  const createGitHubIssue = () => {
+    const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
+    const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
+    const issueLabels = "snippets,good first issue"
+    const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
+      issueTitle,
+    )}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
+    window.open(url, "_blank")
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -96,6 +212,7 @@ export function JLCPCBImportDialog({
             Enter the JLCPCB part number to import the component.
           </DialogDescription>
         </DialogHeader>
+
         <div className="py-4 text-center">
           <a
             href="https://yaqwsx.github.io/jlcparts/#/"
@@ -105,16 +222,13 @@ export function JLCPCBImportDialog({
           >
             JLCPCB Part Search
           </a>
+
           <Input
             className="mt-3"
             placeholder="Enter JLCPCB part number (e.g., C46749)"
             value={partNumber}
             disabled={isLoading}
-            onChange={(e) => {
-              setPartNumber(e.target.value)
-              setError(null)
-              setHasBeenImportedToAccountAlready(false)
-            }}
+            onChange={(e) => handleInputChange(e.target.value)}
             onKeyDown={(e) => {
               if (
                 e.key === "Enter" &&
@@ -126,43 +240,31 @@ export function JLCPCBImportDialog({
               }
             }}
           />
-          {error && !hasBeenImportedToAccountAlready && (
-            <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
-          )}
 
-          {error && !hasBeenImportedToAccountAlready && (
-            <div className="flex justify-end mt-2">
-              <Button
-                variant="default"
-                onClick={() => {
-                  const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
-                  const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
-                  const issueLabels = "snippets,good first issue"
-                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
-                    issueTitle,
-                  )}&body=${encodeURIComponent(
-                    issueBody,
-                  )}&labels=${encodeURIComponent(issueLabels)}`
-                  window.open(url, "_blank")
-                }}
-              >
-                File Issue on GitHub (prefilled)
-              </Button>
-            </div>
+          {error && !existingComponent && (
+            <>
+              <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
+              <div className="flex justify-end mt-2">
+                <Button variant="default" onClick={createGitHubIssue}>
+                  File Issue on GitHub (prefilled)
+                </Button>
+              </div>
+            </>
           )}
 
-          {hasBeenImportedToAccountAlready && (
+          {existingComponent && (
             <p className="p-2 mt-2 pre-wrap text-md text-green-600">
               This part number has already been imported to your profile.{" "}
               <PrefetchPageLink
                 className="text-blue-500 hover:underline"
-                href={`/${session?.github_username}/${partNumber}`}
+                href={`/${existingComponent.username}/${existingComponent.partNumber}`}
               >
                 View it here
               </PrefetchPageLink>
             </p>
           )}
         </div>
+
         <DialogFooter>
           <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
             {!isLoggedIn

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -23,26 +23,33 @@ export const LogContent = ({
   error?: ErrorObject | string | null
 }) => {
   return (
-    <div className="whitespace-pre-wrap font-mono text-xs">
+    <div className="font-mono text-xs space-y-1 min-w-0">
       {logs.map(
         (log, i) =>
           log.timestamp &&
           log.message && (
             <div
               key={i}
-              className={
+              className={`break-words whitespace-pre-wrap ${
                 log.type === "error"
                   ? "text-red-600"
                   : log.type === "success"
                     ? "text-green-600"
                     : "text-gray-600"
-              }
+              }`}
             >
-              {new Date(log.timestamp).toLocaleTimeString()} {log.message}
+              <span className="text-gray-500 whitespace-nowrap">
+                {new Date(log.timestamp).toLocaleTimeString()}
+              </span>{" "}
+              <span className="break-all">{log.message}</span>
             </div>
           ),
       )}
-      {error && <div className="text-red-600">{getErrorText(error)}</div>}
+      {error && (
+        <div className="text-red-600 break-words whitespace-pre-wrap">
+          {getErrorText(error)}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,13 +1,13 @@
 "use client"
 
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"
+import { LogContent } from "./LogContent"
 import { BuildPreviewContent } from "./build-preview-content"
+import { CollapsibleSection } from "./collapsible-section"
 import { PackageBuildDetailsPanel } from "./package-build-details-panel"
 import { PackageBuildHeader } from "./package-build-header"
-import { CollapsibleSection } from "./collapsible-section"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { LogContent } from "./LogContent"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
 
 function computeDuration(
   startedAt: string | null | undefined,
@@ -18,7 +18,10 @@ function computeDuration(
 }
 
 export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease({ include_logs: true })
+  const { packageRelease } = useCurrentPackageRelease({
+    include_logs: true,
+    refetchInterval: 2000,
+  })
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
 
   const {
@@ -73,7 +76,6 @@ export const PackageBuildDetailsPage = () => {
               transpilation_completed_at,
             )}
             displayStatus={transpilation_display_status}
-            error={transpilation_error}
             isOpen={openSections.summary}
             onToggle={() => toggleSection("summary")}
           >
@@ -94,7 +96,6 @@ export const PackageBuildDetailsPage = () => {
               circuit_json_build_completed_at,
             )}
             displayStatus={circuit_json_build_display_status}
-            error={circuit_json_build_error}
             isOpen={openSections.logs}
             onToggle={() => toggleSection("logs")}
           >

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -2,7 +2,7 @@ import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 
 export function BuildPreviewContent() {
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
   const { packageInfo } = useCurrentPackageInfo()
 
   if (!packageRelease) {

package/src/components/PackageBuildsPage/collapsible-section.tsx

@@ -1,6 +1,5 @@
 import type React from "react"
-import { ChevronRight, CheckCircle2 } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
+import { ChevronRight } from "lucide-react"
 import {
   Collapsible,
   CollapsibleContent,
@@ -8,16 +7,9 @@ import {
 } from "@/components/ui/collapsible"
 import { getColorForDisplayStatus } from "./getColorForDisplayStatus"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { ErrorObjectOrString, getErrorText } from "./ErrorObject"
+import { ErrorObjectOrString } from "./ErrorObject"
 import { capitalCase } from "./capitalCase"
 
-type BadgeInfo = {
-  text: string
-  variant?: "default" | "secondary" | "destructive"
-  className?: string
-  icon?: React.ReactNode
-}
-
 interface CollapsibleSectionProps {
   title: string
   duration?: string
@@ -25,69 +17,45 @@ interface CollapsibleSectionProps {
   displayStatus?: PackageRelease["display_status"]
   isOpen: boolean
   onToggle: () => void
-  badges?: Array<BadgeInfo>
   children?: React.ReactNode
 }
 
 export function CollapsibleSection({
   title,
   duration,
-  error,
   displayStatus,
   isOpen,
   onToggle,
-  badges = [],
   children,
 }: CollapsibleSectionProps) {
   return (
     <Collapsible open={isOpen} onOpenChange={onToggle}>
       <CollapsibleTrigger asChild>
-        <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
-          <div className="flex items-center gap-2">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
+          <div className="flex items-center gap-2 min-w-0">
             <ChevronRight
-              className={`w-4 h-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+              className={`w-4 h-4 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
             />
-            <span className="font-medium">{title}</span>
+            <span className="font-medium truncate">{title}</span>
           </div>
-          <div className="flex items-center gap-2">
-            {[
-              ...badges,
-              ...(error
-                ? [
-                    {
-                      text: getErrorText(error),
-                      variant: "destructive",
-                    } as BadgeInfo,
-                  ]
-                : []),
-            ].map((badge, index) => (
-              <Badge
-                key={index}
-                variant={badge.variant || "secondary"}
-                className={
-                  badge.className ||
-                  "bg-gray-200 text-gray-700 flex items-center gap-1"
-                }
-              >
-                {badge.icon}
-                {badge.text}
-              </Badge>
-            ))}
+          <div className="flex items-center gap-2 flex-shrink-0 ml-6 sm:ml-0">
             {duration && (
-              <span className="text-sm text-gray-600">{duration}</span>
+              <span className="text-sm text-gray-600 whitespace-nowrap">
+                {duration}
+              </span>
             )}
             <div
-              className={`w-2 h-2 rounded-lg ${getColorForDisplayStatus(displayStatus)}`}
+              className={`w-2 h-2 rounded-lg flex-shrink-0 ${getColorForDisplayStatus(displayStatus)}`}
             />
-            <div className="text-gray-600 text-xs font-medium">
+            <div className="text-gray-600 text-xs font-medium whitespace-nowrap">
               {capitalCase(displayStatus) || "???"}
             </div>
           </div>
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="p-4 bg-white border-x border-b border-gray-200 rounded-b-lg">
-          {children}
+        <div className="bg-white border-x border-b border-gray-200 rounded-b-lg overflow-hidden">
+          <div className="p-4 overflow-x-auto max-w-full">{children}</div>
         </div>
       </CollapsibleContent>
     </Collapsible>

package/src/components/PackageBuildsPage/package-build-details-panel.tsx

@@ -1,8 +1,9 @@
-import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useParams } from "wouter"
+import { useNow } from "@/hooks/use-now"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
+import { Clock, GitBranch, GitCommit, Globe } from "lucide-react"
+import { useParams } from "wouter"
 
 const capitalCase = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -24,8 +25,9 @@ function getColorFromDisplayStatus(
 }
 
 export function PackageBuildDetailsPanel() {
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
   const { author } = useParams() // TODO use packageRelease.author_account_id when it's added by backed
+  const now = useNow(1000)
 
   if (!packageRelease) {
     // TODO show skeleton instead
@@ -55,6 +57,24 @@ export function PackageBuildDetailsPanel() {
     commit_sha,
   } = packageRelease
 
+  const buildStartedAt = (() => {
+    if (transpilation_started_at && circuit_json_build_started_at) {
+      return new Date(transpilation_started_at) <
+        new Date(circuit_json_build_started_at)
+        ? transpilation_started_at
+        : circuit_json_build_started_at
+    }
+    return transpilation_started_at || circuit_json_build_started_at || null
+  })()
+
+  const buildCompletedAt =
+    circuit_json_build_completed_at || transpilation_completed_at || null
+
+  const elapsedMs = buildStartedAt
+    ? (buildCompletedAt ? new Date(buildCompletedAt).getTime() : now) -
+      new Date(buildStartedAt).getTime()
+    : null
+
   return (
     <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
       {/* Created */}
@@ -92,15 +112,13 @@ export function PackageBuildDetailsPanel() {
         <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
         <div className="flex items-center gap-2">
           <Clock className="w-4 h-4 text-gray-500" />
-          {circuit_json_build_completed_at && (
-            <span className="text-sm">
-              {total_build_duration_ms
-                ? `${Math.floor(total_build_duration_ms / 1000)}s`
-                : ""}
-            </span>
+          {elapsedMs !== null && (
+            <span className="text-sm">{Math.floor(elapsedMs / 1000)}s</span>
           )}
           <span className="text-sm text-gray-500">
-            {timeAgo(circuit_json_build_completed_at, "waiting...")}
+            {buildStartedAt
+              ? `Started ${timeAgo(buildStartedAt)}`
+              : "waiting..."}
           </span>
         </div>
       </div>

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

@@ -1,13 +1,15 @@
-import { Github, RefreshCw } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { useParams } from "wouter"
-import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 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 { useParams } from "wouter"
+import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease } = useCurrentPackageRelease()
+  const { packageRelease, refetch, isFetching } = useCurrentPackageRelease({
+    include_logs: true,
+  })
   const { mutate: rebuildPackage, isLoading } =
     useRebuildPackageReleaseMutation()
 
@@ -54,6 +56,16 @@ 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
             snippetUnscopedName={`${author}/${packageName}`}
           />