@tscircuit/fake-snippets 0.0.81 → 0.0.82

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -1,99 +1,38 @@
-import { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { CheckCircle, XCircle, Check, X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { CheckCircle, XCircle, Clock, Loader2 } from "lucide-react"
+import { Link, useParams } from "wouter"
 
 export interface BuildStep {
   id: string
   name: string
-  status: "success" | "failed"
-  message?: string
+  status: "pending" | "running" | "success" | "error"
 }
 
 export interface BuildStatusProps {
   step: BuildStep
+  packageReleaseId: string
 }
 
-export const BuildStatus = ({ step }: BuildStatusProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
+export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
+  const { author, packageName } = useParams()
+  const href = `/${author}/${packageName}/builds?package_release_id=${packageReleaseId}`
 
   return (
-    <>
-      <div
-        onClick={() => setIsDialogOpen(true)}
-        className={"flex items-center cursor-pointer"}
-      >
-        {step.status === "success" ? (
-          <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-[#8b949e]" />
-        ) : (
-          <XCircle className="h-4 w-4 mr-2 text-red-600 dark:text-[#8b949e]" />
-        )}
-        <span className="text-sm text-gray-500 dark:text-[#8b949e]">
-          {step.name}
-        </span>
-      </div>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {step.status === "success" ? (
-                <>
-                  <CheckCircle className="h-5 w-5 text-green-600" />
-                  <span>Build Status: Passing</span>
-                </>
-              ) : (
-                <>
-                  <XCircle className="h-5 w-5 text-red-600" />
-                  <span>Build Status: Failing</span>
-                </>
-              )}
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-3">
-              <div
-                key={step.id}
-                className={cn(
-                  "flex items-start gap-3 rounded-md border p-3",
-                  step.status === "success"
-                    ? "bg-green-50 border-green-200"
-                    : "bg-red-50 border-red-200",
-                )}
-              >
-                <div
-                  className={cn(
-                    "rounded-full p-1 mt-0.5",
-                    step.status === "success"
-                      ? "bg-green-100 text-green-600"
-                      : "bg-red-100 text-red-600",
-                  )}
-                >
-                  {step.status === "success" ? (
-                    <Check className="h-4 w-4" />
-                  ) : (
-                    <X className="h-4 w-4" />
-                  )}
-                </div>
-                <div>
-                  <div className="font-medium">{step.name}</div>
-                  {step.message && (
-                    <div className="text-sm text-muted-foreground mt-1">
-                      {step.message}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+    <Link href={href} className="flex items-center gap-2">
+      {step.status === "success" && (
+        <CheckCircle className="h-4 w-4 text-green-600 dark:text-[#8b949e]" />
+      )}
+      {step.status === "error" && (
+        <XCircle className="h-4 w-4 text-red-600 dark:text-[#8b949e]" />
+      )}
+      {step.status === "running" && (
+        <Loader2 className="h-4 w-4 text-blue-600 animate-spin dark:text-[#8b949e]" />
+      )}
+      {step.status === "pending" && (
+        <Clock className="h-4 w-4 text-yellow-600 dark:text-[#8b949e]" />
+      )}
+      <span className="text-sm text-gray-500 dark:text-[#8b949e]">
+        {step.name}
+      </span>
+    </Link>
   )
 }

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -51,8 +51,13 @@ export default function ImportantFilesView({
   const hasAiContent = Boolean(aiDescription || aiUsageInstructions)
   const hasAiReview = Boolean(aiReviewText)
 
-  // Select the appropriate tab/file when content changes
+  // Select the appropriate tab/file when content changes. Once the user has
+  // interacted with the tabs we keep their selection and only run this logic
+  // if no tab has been chosen yet.
   useEffect(() => {
+    if (activeTab !== null) return
+    if (isLoading) return
+
     // First priority: README file if it exists
     const readmeFile = importantFiles.find(
       (file) =>
@@ -82,6 +87,8 @@ export default function ImportantFilesView({
     hasAiContent,
     hasAiReview,
     importantFiles,
+    activeTab,
+    isLoading,
   ])
 
   // Get file name from path

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -4,6 +4,27 @@ import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
+import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
+
+function getTranspilationStatus(
+  pr?: PackageRelease | null,
+): BuildStep["status"] {
+  if (!pr) return "pending"
+  if (pr.transpilation_error) return "error"
+  if (pr.transpilation_in_progress) return "running"
+  if (pr.transpilation_completed_at) return "success"
+  if (pr.transpilation_started_at) return "running"
+  return "pending"
+}
+
+function getCircuitJsonStatus(pr?: PackageRelease | null): BuildStep["status"] {
+  if (!pr) return "pending"
+  if (pr.circuit_json_build_error) return "error"
+  if (pr.circuit_json_build_in_progress) return "running"
+  if (pr.circuit_json_build_completed_at) return "success"
+  if (pr.circuit_json_build_started_at) return "running"
+  return "pending"
+}
 
 export default function SidebarReleasesSection() {
   const { packageInfo } = useCurrentPackageInfo()
@@ -15,14 +36,12 @@ export default function SidebarReleasesSection() {
     {
       id: "package_transpilation",
       name: "Package Transpilation",
-      status: packageRelease?.has_transpiled ? "success" : "failed",
-      message: packageRelease?.transpilation_error || undefined,
+      status: getTranspilationStatus(packageRelease),
     },
     {
       id: "circuit_json_build",
       name: "Circuit JSON Build",
-      status: packageRelease?.circuit_json_build_error ? "failed" : "success",
-      message: packageRelease?.circuit_json_build_error || undefined,
+      status: getCircuitJsonStatus(packageRelease),
     },
   ]
 
@@ -56,7 +75,11 @@ export default function SidebarReleasesSection() {
           </span>
         </div>
         {buildSteps.map((step) => (
-          <BuildStatus key={step.id} step={step} />
+          <BuildStatus
+            key={step.id}
+            step={step}
+            packageReleaseId={packageRelease.package_release_id}
+          />
         ))}
       </div>
       {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">

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

@@ -4,7 +4,7 @@ import { autocompletion } from "@codemirror/autocomplete"
 import { indentWithTab } from "@codemirror/commands"
 import { javascript } from "@codemirror/lang-javascript"
 import { json } from "@codemirror/lang-json"
-import { EditorState } from "@codemirror/state"
+import { EditorState, Prec } from "@codemirror/state"
 import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
 import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 import type { ATABootstrapConfig } from "@typescript/ata"
@@ -237,6 +237,14 @@ export const CodeEditor = ({
       currentFile?.endsWith(".json")
         ? json()
         : javascript({ typescript: true, jsx: true }),
+      Prec.high(
+        keymap.of([
+          {
+            key: "Mod-Enter",
+            run: () => true,
+          },
+        ]),
+      ),
       keymap.of([indentWithTab]),
       EditorState.readOnly.of(readOnly || isSaving),
       EditorView.updateListener.of((update) => {

package/src/hooks/use-current-package-release.ts

@@ -1,10 +1,11 @@
 import { useParams } from "wouter"
 import { useCurrentPackageId } from "./use-current-package-id"
-import { useUrlParams } from "./use-url-params"
 import { usePackageRelease } from "./use-package-release"
+import { useUrlParams } from "./use-url-params"
 
 export const useCurrentPackageRelease = (options?: {
-  include_logs: boolean
+  include_logs?: boolean
+  refetchInterval?: number
 }) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
@@ -27,6 +28,7 @@ export const useCurrentPackageRelease = (options?: {
 
   const { data: packageRelease, ...rest } = usePackageRelease(query, {
     include_logs: options?.include_logs ?? false,
+    refetchInterval: options?.refetchInterval,
   })
   return { packageRelease, ...rest }
 }

package/src/hooks/use-now.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react"
+
+export const useNow = (intervalMs: number = 1000) => {
+  const [now, setNow] = useState(Date.now())
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), intervalMs)
+    return () => clearInterval(id)
+  }, [intervalMs])
+
+  return now
+}

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

@@ -1,5 +1,5 @@
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { useQuery } from "react-query"
+import { type UseQueryOptions, useQuery } from "react-query"
 import { useAxios } from "./use-axios"
 
 type PackageReleaseQuery =
@@ -20,7 +20,7 @@ type PackageReleaseQuery =
 
 export const usePackageRelease = (
   query: PackageReleaseQuery | null,
-  options?: { include_logs: boolean },
+  options?: { include_logs?: boolean; refetchInterval?: number },
 ) => {
   const axios = useAxios()
 
@@ -50,6 +50,7 @@ export const usePackageRelease = (
     {
       retry: false,
       enabled: Boolean(query),
+      refetchInterval: options?.refetchInterval,
     },
   )
 }

package/src/pages/dashboard.tsx

@@ -34,8 +34,9 @@ export const DashboardPage = () => {
     data: myPackages,
     isLoading,
     error,
+    refetch: refetchUserPackages,
   } = useQuery<Package[]>(
-    "userPackages",
+    ["userPackages", currentUser],
     async () => {
       const response = await axios.post(`/packages/list`, {
         owner_github_username: currentUser,
@@ -195,6 +196,7 @@ export const DashboardPage = () => {
             packageId={packageToDelete.package_id}
             packageName={packageToDelete.unscoped_name}
             packageOwner={packageToDelete.owner_github_username ?? ""}
+            refetchUserPackages={refetchUserPackages}
           />
         )}
       </div>

package/src/pages/user-profile.tsx

@@ -48,7 +48,10 @@ export const UserProfilePage = () => {
       })
       return response.data
     },
-    { retry: false },
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
   )
 
   // use the username stored in the database so the correct case is displayed
@@ -71,7 +74,10 @@ export const UserProfilePage = () => {
       })
       return response.data.packages
     },
-    { enabled: Boolean(githubUsername) },
+    {
+      enabled: Boolean(githubUsername),
+      refetchOnWindowFocus: false,
+    },
   )
 
   const { data: starredPackages, isLoading: isLoadingStarredPackages } =
@@ -85,6 +91,7 @@ export const UserProfilePage = () => {
       },
       {
         enabled: activeTab === "starred" && Boolean(githubUsername),
+        refetchOnWindowFocus: false,
       },
     )
 

package/.github/workflows/formatbot.yml

@@ -1,63 +0,0 @@
-name: Format PR
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, ready_for_review]
-
-jobs:
-  format:
-    name: Format code
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.draft == false
-
-    steps:
-    - name: Determine if fork
-      id: check_fork
-      run: |
-        if [ "${{ github.event.pull_request.head.repo.full_name }}" = "${{ github.repository }}" ]; then
-          echo "is_fork=false" >> $GITHUB_OUTPUT
-        else
-          echo "is_fork=true" >> $GITHUB_OUTPUT
-        fi
-
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        token: ${{ steps.check_fork.outputs.is_fork == 'true' && secrets.GITHUB_TOKEN || secrets.TSCIRCUIT_BOT_GITHUB_TOKEN }}
-
-    - name: Setup bun
-      uses: oven-sh/setup-bun@v2
-      with:
-        bun-version: latest
-
-    - name: Get @biomejs/biome version
-      id: get-biome-version
-      run: echo "BIOME_VERSION=$(node -p "require('./package.json').devDependencies['@biomejs/biome']")" >> $GITHUB_OUTPUT
-
-    - name: Install @biomejs/biome
-      run: bun install @biomejs/biome@${{ steps.get-biome-version.outputs.BIOME_VERSION }}
-
-    - name: Run Formatter and autofix
-      if: steps.check_fork.outputs.is_fork == 'false'
-      run: npx @biomejs/biome format . --write
-
-    - name: Format Check (cannot autofix against forks)
-      if: steps.check_fork.outputs.is_fork == 'true'
-      run: npx @biomejs/biome format .
-
-    - name: Restore lock files
-      if: steps.check_fork.outputs.is_fork == 'false'
-      run: |
-        git checkout -- *lock.json || true
-        git checkout -- *.lock || true
-        git checkout -- *.lockb || true
-
-    - name: Commit changes
-      if: steps.check_fork.outputs.is_fork == 'false'
-      uses: stefanzweifel/git-auto-commit-action@v4
-      with:
-        commit_message: "formatbot: Automatically format code"
-        branch: ${{ github.head_ref }}
-        commit_user_name: tscircuitbot
-        commit_user_email: tscircuitbot@users.noreply.github.com
-        commit_author: tscircuitbot <tscircuitbot@users.noreply.github.com>