@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -1,72 +0,0 @@
-type ErrorObject =
-  | {
-      message: string
-    }
-  | string
-
-const getErrorText = (error: ErrorObject | string) => {
-  if (typeof error === "string") {
-    return error
-  }
-  return error.message
-}
-
-export const LogContent = ({
-  logs,
-  error,
-}: {
-  logs: Array<{
-    type?: "info" | "success" | "error"
-    msg?: string
-    message?: string
-    timestamp?: string | number
-    [key: string]: unknown
-  }>
-  error?: ErrorObject | string | null
-}) => {
-  return (
-    <div className="font-mono text-xs space-y-1 min-w-0">
-      {logs.map((log, i) => {
-        const { type, msg, message, timestamp, ...rest } = log
-        const text = msg ?? message
-        if (!text) return null
-
-        return (
-          <div
-            key={i}
-            className={`break-words whitespace-pre-wrap ${
-              type === "error"
-                ? "text-red-600"
-                : type === "success"
-                  ? "text-green-600"
-                  : "text-gray-600"
-            }`}
-          >
-            {timestamp !== undefined && (
-              <span className="text-gray-500 whitespace-nowrap">
-                {new Date(Number(timestamp)).toLocaleTimeString()}
-              </span>
-            )}
-            {timestamp !== undefined && " "}
-            <span className="break-all">{text}</span>
-            {Object.keys(rest).filter((k) => k !== "package_release_id")
-              .length > 0 && (
-              <span className="text-gray-500">
-                {" "}
-                {Object.entries(rest)
-                  .filter(([key]) => key !== "package_release_id")
-                  .map(([key, value]) => `${key}: ${String(value)}`)
-                  .join(" ")}
-              </span>
-            )}
-          </div>
-        )
-      })}
-      {error && (
-        <div className="text-red-600 break-words whitespace-pre-wrap">
-          {getErrorText(error)}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,113 +0,0 @@
-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"
-
-function computeDuration(
-  startedAt: string | null | undefined,
-  completedAt: string | null | undefined,
-) {
-  if (!startedAt || !completedAt) return ""
-  return `${Math.floor((new Date(completedAt).getTime() - new Date(startedAt).getTime()) / 1000)}s`
-}
-
-export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease({
-    include_logs: true,
-    refetchInterval: 2000,
-  })
-  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
-
-  const {
-    circuit_json_build_logs,
-    circuit_json_build_completed_at,
-    circuit_json_build_in_progress,
-    circuit_json_build_is_stale,
-    circuit_json_build_started_at,
-    circuit_json_build_error,
-    circuit_json_build_error_last_updated_at,
-    transpilation_completed_at,
-    transpilation_in_progress,
-    transpilation_is_stale,
-    transpilation_logs,
-    transpilation_started_at,
-    circuit_json_build_display_status,
-    transpilation_display_status,
-    transpilation_error,
-  } = packageRelease ?? ({} as Partial<PackageRelease>)
-
-  const toggleSection = (section: string) => {
-    setOpenSections((prev) => ({
-      ...prev,
-      [section]: !prev[section],
-    }))
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 text-gray-900">
-      <PackageBuildHeader />
-
-      <div className="px-4 sm:px-6 py-4 sm:py-6 container mx-auto max-w-7xl">
-        {/* Main Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
-          {/* Preview Section */}
-          <div className="lg:col-span-2">
-            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center min-h-[280px] sm:min-h-[340px] lg:max-h-[420px]">
-              <BuildPreviewContent />
-            </div>
-          </div>
-
-          {/* Details Panel */}
-          <PackageBuildDetailsPanel />
-        </div>
-
-        {/* Collapsible Sections */}
-        <div className="space-y-4 mb-6 sm:mb-8">
-          <CollapsibleSection
-            title="Transpilation Logs"
-            duration={computeDuration(
-              transpilation_started_at,
-              transpilation_completed_at,
-            )}
-            displayStatus={transpilation_display_status}
-            isOpen={openSections.summary}
-            onToggle={() => toggleSection("summary")}
-          >
-            <LogContent
-              logs={
-                transpilation_logs ?? [
-                  { msg: "No transpilation logs available" },
-                ]
-              }
-              error={transpilation_error}
-            />
-          </CollapsibleSection>
-
-          <CollapsibleSection
-            title="Circuit JSON Build Logs"
-            duration={computeDuration(
-              circuit_json_build_started_at,
-              circuit_json_build_completed_at,
-            )}
-            displayStatus={circuit_json_build_display_status}
-            isOpen={openSections.logs}
-            onToggle={() => toggleSection("logs")}
-          >
-            <LogContent
-              logs={
-                circuit_json_build_logs ?? [
-                  { msg: "No Circuit JSON logs available" },
-                ]
-              }
-              error={circuit_json_build_error!}
-            />
-          </CollapsibleSection>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,56 +0,0 @@
-import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useState } from "react"
-import { CircuitBoard } from "lucide-react"
-
-export function BuildPreviewContent() {
-  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
-  const { packageInfo } = useCurrentPackageInfo()
-  const [imageError, setImageError] = useState(false)
-  const [imageLoading, setImageLoading] = useState(true)
-
-  if (!packageRelease) {
-    return (
-      <div className="flex items-center justify-center w-full h-full">
-        <div className="w-32 h-32 sm:w-48 sm:h-48 bg-gray-200 rounded animate-pulse-slow"></div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center justify-center w-full h-full">
-      <div className="rounded overflow-hidden w-full max-w-full">
-        {imageError ? (
-          <div className="flex flex-col items-center justify-center bg-gray-50 border border-gray-300 rounded-lg p-8 sm:p-12 lg:p-16 min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
-            <CircuitBoard className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 text-gray-400 mb-4" />
-            <h3 className="text-lg sm:text-xl font-medium text-gray-600 mb-2">
-              Preview Not Available
-            </h3>
-            <p className="text-sm sm:text-base text-gray-500 text-center max-w-sm">
-              The build preview image could not be loaded. This may be because
-              the build is still processing or the image is not available.
-            </p>
-          </div>
-        ) : (
-          <>
-            {imageLoading && (
-              <div className="flex items-center justify-center bg-gray-100 rounded-lg min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
-                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded animate-pulse"></div>
-              </div>
-            )}
-            <img
-              src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
-              alt="Package build preview"
-              className={`object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px] ${imageLoading ? "hidden" : "block"}`}
-              onLoad={() => setImageLoading(false)}
-              onError={() => {
-                setImageError(true)
-                setImageLoading(false)
-              }}
-            />
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,63 +0,0 @@
-import type React from "react"
-import { ChevronRight } from "lucide-react"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { getColorForDisplayStatus } from "./getColorForDisplayStatus"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { ErrorObjectOrString } from "./ErrorObject"
-import { capitalCase } from "./capitalCase"
-
-interface CollapsibleSectionProps {
-  title: string
-  duration?: string
-  error?: ErrorObjectOrString | null
-  displayStatus?: PackageRelease["display_status"]
-  isOpen: boolean
-  onToggle: () => void
-  children?: React.ReactNode
-}
-
-export function CollapsibleSection({
-  title,
-  duration,
-  displayStatus,
-  isOpen,
-  onToggle,
-  children,
-}: CollapsibleSectionProps) {
-  return (
-    <Collapsible open={isOpen} onOpenChange={onToggle}>
-      <CollapsibleTrigger asChild>
-        <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 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
-            />
-            <span className="font-medium truncate">{title}</span>
-          </div>
-          <div className="flex items-center gap-2 flex-shrink-0 ml-6 sm:ml-0">
-            {duration && (
-              <span className="text-sm text-gray-600 whitespace-nowrap">
-                {duration}
-              </span>
-            )}
-            <div
-              className={`w-2 h-2 rounded-lg flex-shrink-0 ${getColorForDisplayStatus(displayStatus)}`}
-            />
-            <div className="text-gray-600 text-xs font-medium whitespace-nowrap">
-              {capitalCase(displayStatus) || "???"}
-            </div>
-          </div>
-        </div>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <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,166 +0,0 @@
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-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)
-}
-
-function getColorFromDisplayStatus(
-  display_status: PackageRelease["display_status"],
-) {
-  switch (display_status) {
-    case "pending":
-      return "bg-yellow-500"
-    case "building":
-      return "bg-blue-500"
-    case "complete":
-      return "bg-green-500"
-    case "error":
-      return "bg-red-500"
-  }
-}
-
-export function PackageBuildDetailsPanel() {
-  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
-    return null
-  }
-
-  const {
-    circuit_json_build_display_status,
-    circuit_json_build_in_progress,
-    circuit_json_build_is_stale,
-    circuit_json_build_logs,
-    transpilation_display_status,
-    transpilation_in_progress,
-    transpilation_logs,
-    circuit_json_build_completed_at,
-    transpilation_is_stale,
-    display_status,
-    created_at,
-    has_transpiled,
-    circuit_json_build_started_at,
-    circuit_json_build_error,
-    circuit_json_build_error_last_updated_at,
-    total_build_duration_ms,
-    transpilation_completed_at,
-    transpilation_error,
-    transpilation_started_at,
-    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-4 sm:space-y-6 bg-white p-3 sm:p-4 border border-gray-200 rounded-lg">
-      {/* Created */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
-            I
-          </div>
-          <span className="text-sm truncate">{author}</span>
-          <span className="text-sm text-gray-500 flex-shrink-0">
-            {timeAgo(created_at, "")}
-          </span>
-        </div>
-      </div>
-
-      {/* Status */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
-        <div className="flex items-center gap-2">
-          <div
-            className={`w-2 h-2 ${getColorFromDisplayStatus(display_status)} rounded-full flex-shrink-0`}
-          ></div>
-          <span className="text-sm">{capitalCase(display_status)}</span>
-          {/* <Badge
-            variant="secondary"
-            className="bg-gray-200 text-gray-700 text-xs"
-          >
-            Latest
-          </Badge> */}
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Build Time</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <Clock className="w-4 h-4 text-gray-500 flex-shrink-0" />
-          {elapsedMs !== null && (
-            <span className="text-sm flex-shrink-0">
-              {Math.floor(elapsedMs / 1000)}s
-            </span>
-          )}
-          <span className="text-sm text-gray-500 truncate">
-            {buildStartedAt
-              ? `Started ${timeAgo(buildStartedAt)}`
-              : "waiting..."}
-          </span>
-        </div>
-      </div>
-
-      {/* Version */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
-        <div className="flex items-center gap-2 min-w-0">
-          <Globe className="w-4 h-4 text-gray-500 flex-shrink-0" />
-          <span className="text-sm break-all">{packageRelease.version}</span>
-          {/* <Badge variant="default" className="bg-blue-600 text-white text-xs">
-            Current
-          </Badge> */}
-        </div>
-      </div>
-
-      {/* Outputs */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
-        <div>
-          <span className="text-sm text-gray-400">None</span>
-        </div>
-      </div>
-
-      {/* Source */}
-      {/* <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <GitBranch className="w-4 h-4 text-gray-500" />
-            <span className="text-sm">main</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <GitCommit className="w-4 h-4 text-gray-500" />
-            <span className="text-sm text-gray-500">
-              edfdc67 support empty file creation (#356)
-            </span>
-          </div>
-        </div>
-      </div> */}
-    </div>
-  )
-}

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

@@ -1,79 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
-import { Github, RefreshCw } from "lucide-react"
-import { useParams } from "wouter"
-import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useCurrentPackageCircuitJson } from "../ViewPackagePage/hooks/use-current-package-circuit-json"
-
-export function PackageBuildHeader() {
-  const { author, packageName } = useParams()
-  const session = useGlobalStore((s) => s.session)
-  const { packageRelease } = useCurrentPackageRelease({
-    include_logs: true,
-  })
-  const { mutate: rebuildPackage, isLoading } =
-    useRebuildPackageReleaseMutation()
-
-  const { circuitJson } = useCurrentPackageCircuitJson()
-
-  return (
-    <div className="border-b border-gray-200 bg-white px-4 sm:px-6 py-4">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 container mx-auto max-w-7xl">
-        <div className="min-w-0 flex-1">
-          <h1 className="text-xl sm:text-2xl font-semibold flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
-            <span className="whitespace-nowrap">Package Build</span>
-            <a
-              className="bg-gray-100 px-2 py-1 rounded font-mono text-blue-600 text-sm sm:text-base truncate w-fit"
-              href={`/${author}/${packageName}`}
-            >
-              {author}/{packageName}
-            </a>
-          </h1>
-        </div>
-        <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-          <Button
-            variant="outline"
-            size="sm"
-            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
-            asChild
-          >
-            <a
-              href="https://github.com/tscircuit/tscircuit.com/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-              <span className="hidden xs:inline">Report Issue</span>
-              <span className="xs:hidden">Report</span>
-            </a>
-          </Button>
-          {session?.github_username == author && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
-              disabled={isLoading || !packageRelease}
-              onClick={() =>
-                packageRelease &&
-                rebuildPackage({
-                  package_release_id: packageRelease.package_release_id,
-                })
-              }
-            >
-              <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-              {isLoading ? "Rebuilding..." : "Rebuild"}
-            </Button>
-          )}
-          <DownloadButtonAndMenu
-            offerMultipleImageFormats
-            circuitJson={circuitJson}
-            unscopedName={packageName}
-            author={author}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}