Refactor for explicit runs, fix importing

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

@@ -16,7 +16,7 @@ import { A555Timer } from "@tsci/seveibar.a555timer"
 
 export default () => (
   <board width="10mm" height="10mm">
-    <A555Timer />
+    <A555Timer name="U1" />
   </board>
 )`.trim(),
     created_at: new Date().toISOString(),

package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tscircuit/3d-viewer": "^0.0.32",
+    "@tscircuit/footprinter": "^0.0.68",
     "@tscircuit/pcb-viewer": "^1.10.5",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
@@ -88,7 +89,7 @@
     "@anthropic-ai/sdk": "^0.27.3",
     "@babel/standalone": "^7.25.6",
     "@biomejs/biome": "^1.9.2",
-    "@tscircuit/core": "^0.0.97",
+    "@tscircuit/core": "^0.0.109",
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",

src/components/CodeAndPreview.tsx

@@ -15,11 +15,12 @@ import { useAxios } from "@/hooks/use-axios"
 import { TypeBadge } from "./TypeBadge"
 import { useToast } from "@/hooks/use-toast"
 import { useMutation, useQueryClient } from "react-query"
-import { ClipboardIcon, Share, Eye, EyeOff } from "lucide-react"
+import { ClipboardIcon, Share, Eye, EyeOff, PlayIcon } from "lucide-react"
 import { MagicWandIcon } from "@radix-ui/react-icons"
 import { ErrorBoundary } from "react-error-boundary"
 import { ErrorTabContent } from "./ErrorTabContent"
 import { cn } from "@/lib/utils"
+import { PreviewContent } from "./PreviewContent"
 
 interface Props {
   snippet?: Snippet | null
@@ -41,10 +42,16 @@ export function CodeAndPreview({ snippet }: Props) {
   }, [snippet?.code])
   const { toast } = useToast()
 
-  const { message, circuitJson, compiledJs } = useRunTsx(
+  const {
+    message,
+    circuitJson,
+    compiledJs,
+    triggerRunTsx,
+    tsxRunTriggerCount,
+  } = useRunTsx({
     code,
-    snippet?.snippet_type,
-  )
+    type: snippet?.snippet_type,
+  })
   const qc = useQueryClient()
 
   const updateSnippetMutation = useMutation({
@@ -113,43 +120,14 @@ export function CodeAndPreview({ snippet }: Props) {
           />
         </div>
         {showPreview && (
-          <div className="w-full md:w-1/2 p-2 min-h-[640px]">
-            <Tabs defaultValue="pcb">
-              <TabsList>
-                <TabsTrigger value="pcb">PCB</TabsTrigger>
-                <TabsTrigger value="cad">3D</TabsTrigger>
-                <TabsTrigger value="table">JSON</TabsTrigger>
-                <TabsTrigger value="error">
-                  Errors
-                  {message && (
-                    <span className="inline-flex items-center justify-center w-5 h-5 ml-2 text-xs font-bold text-white bg-red-500 rounded-full">
-                      1
-                    </span>
-                  )}
-                </TabsTrigger>
-              </TabsList>
-              <TabsContent value="pcb">
-                <div className="mt-4 h-[500px]">
-                  <PCBViewer soup={circuitJson} />
-                </div>
-              </TabsContent>
-              <TabsContent value="cad">
-                <div className="mt-4 h-[500px]">
-                  <ErrorBoundary fallback={<div>Error loading 3D viewer</div>}>
-                    <CadViewer soup={circuitJson as any} />
-                  </ErrorBoundary>
-                </div>
-              </TabsContent>
-              <TabsContent value="table">
-                <div className="mt-4 h-[500px]">
-                  <CircuitJsonTableViewer elements={circuitJson as any} />
-                </div>
-              </TabsContent>
-              <TabsContent value="error">
-                <ErrorTabContent code={code} errorMessage={message} />
-              </TabsContent>
-            </Tabs>
-          </div>
+          <PreviewContent
+            className="w-full md:w-1/2 p-2 min-h-[640px]"
+            code={code}
+            triggerRunTsx={triggerRunTsx}
+            tsxRunTriggerCount={tsxRunTriggerCount}
+            errorMessage={message}
+            circuitJson={circuitJson}
+          />
         )}
       </div>
     </div>

src/components/ErrorTabContent.tsx

@@ -12,7 +12,7 @@ export const ErrorTabContent = ({
 }: {
   code?: string
   isStreaming?: boolean
-  errorMessage?: string
+  errorMessage?: string | null
 }) => {
   const anthropic = useAiApi()
   const simplifiedErrorMessage = useAsyncMemo(async () => {

src/components/PreviewContent.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useMemo, useState } from "react"
+import { CodeEditor } from "@/components/CodeEditor"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { CadViewer } from "@tscircuit/3d-viewer"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { defaultCodeForBlankPage } from "@/lib/defaultCodeForBlankCode"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
+import { Button } from "@/components/ui/button"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+import EditorNav from "./EditorNav"
+import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { useAxios } from "@/hooks/use-axios"
+import { TypeBadge } from "./TypeBadge"
+import { useToast } from "@/hooks/use-toast"
+import { useMutation, useQueryClient } from "react-query"
+import { ClipboardIcon, Share, Eye, EyeOff, PlayIcon } from "lucide-react"
+import { MagicWandIcon } from "@radix-ui/react-icons"
+import { ErrorBoundary } from "react-error-boundary"
+import { ErrorTabContent } from "./ErrorTabContent"
+import { cn } from "@/lib/utils"
+import { useCallback } from "react"
+
+export type PreviewContentProps =
+  | {
+      code: string
+      triggerRunTsx: () => void
+      tsxRunTriggerCount: number
+      errorMessage: string | null
+      circuitJson: any
+      className?: string
+      showCodeTab?: false
+      isStreaming?: boolean
+      onCodeChange?: (code: string) => void
+      onDtsChange?: (dts: string) => void
+    }
+  | {
+      code: string
+      triggerRunTsx: () => void
+      tsxRunTriggerCount: number
+      errorMessage: string | null
+      circuitJson: any
+      className?: string
+      showCodeTab: true
+      isStreaming: boolean
+      onCodeChange: (code: string) => void
+      onDtsChange: (dts: string) => void
+    }
+
+const PreviewEmptyState = ({
+  triggerRunTsx,
+}: { triggerRunTsx: () => void }) => (
+  <div className="flex items-center gap-3 bg-gray-200 text-center justify-center py-10">
+    No circuit json loaded
+    <Button className="bg-blue-600 hover:bg-blue-500" onClick={triggerRunTsx}>
+      Run Code
+      <PlayIcon className="w-3 h-3 ml-2" />
+    </Button>
+  </div>
+)
+
+export const PreviewContent = ({
+  code,
+  triggerRunTsx,
+  tsxRunTriggerCount,
+  errorMessage,
+  circuitJson,
+  showCodeTab = false,
+  className,
+  isStreaming,
+  onCodeChange,
+  onDtsChange,
+}: PreviewContentProps) => {
+  const [activeTab, setActiveTab] = useState(showCodeTab ? "code" : "pcb")
+  const [versionOfCodeLastRun, setVersionOfCodeLastRun] = useState("")
+
+  useEffect(() => {
+    if (tsxRunTriggerCount === 0) return
+    setVersionOfCodeLastRun(code)
+  }, [tsxRunTriggerCount])
+
+  useEffect(() => {
+    if (errorMessage) {
+      setActiveTab("error")
+    }
+  }, [errorMessage])
+
+  useEffect(() => {
+    if (activeTab === "code" && circuitJson && !errorMessage) {
+      setActiveTab("pcb")
+    }
+  }, [circuitJson])
+
+  return (
+    <div className={className}>
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <div className="flex items-center gap-2">
+          <Button
+            className="bg-blue-600 hover:bg-blue-500"
+            onClick={() => triggerRunTsx()}
+            disabled={versionOfCodeLastRun === code && tsxRunTriggerCount !== 0}
+          >
+            Run
+            <PlayIcon className="w-3 h-3 ml-2" />
+          </Button>
+          <div className="flex-grow" />
+          <TabsList>
+            {showCodeTab && <TabsTrigger value="code">Code</TabsTrigger>}
+            <TabsTrigger value="pcb">
+              {circuitJson && (
+                <span
+                  className={cn(
+                    "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                    versionOfCodeLastRun === code
+                      ? "bg-blue-500"
+                      : "bg-gray-500",
+                  )}
+                />
+              )}
+              PCB
+            </TabsTrigger>
+            <TabsTrigger value="cad">
+              {circuitJson && (
+                <span
+                  className={cn(
+                    "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                    versionOfCodeLastRun === code
+                      ? "bg-blue-500"
+                      : "bg-gray-500",
+                  )}
+                />
+              )}
+              3D
+            </TabsTrigger>
+            <TabsTrigger value="table">JSON</TabsTrigger>
+            <TabsTrigger value="error">
+              Errors
+              {errorMessage && (
+                <span className="inline-flex items-center justify-center w-5 h-5 ml-2 text-xs font-bold text-white bg-red-500 rounded-full">
+                  1
+                </span>
+              )}
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        {showCodeTab && (
+          <TabsContent value="code">
+            <CodeEditor
+              code={code}
+              isStreaming={isStreaming}
+              onCodeChange={onCodeChange!}
+              onDtsChange={onDtsChange!}
+              readOnly={false}
+            />
+          </TabsContent>
+        )}
+        <TabsContent value="pcb">
+          <div className="mt-4 h-[500px]">
+            <ErrorBoundary fallback={<div>Error loading PCB viewer</div>}>
+              {circuitJson ? (
+                <PCBViewer key={tsxRunTriggerCount} soup={circuitJson} />
+              ) : (
+                <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+              )}
+            </ErrorBoundary>
+          </div>
+        </TabsContent>
+        <TabsContent value="cad">
+          <div className="mt-4 h-[500px]">
+            <ErrorBoundary fallback={<div>Error loading 3D viewer</div>}>
+              {circuitJson ? (
+                <CadViewer soup={circuitJson as any} />
+              ) : (
+                <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+              )}
+            </ErrorBoundary>
+          </div>
+        </TabsContent>
+        <TabsContent value="table">
+          <div className="mt-4 h-[500px]">
+            <ErrorBoundary fallback={<div>Error loading 3D viewer</div>}>
+              {circuitJson ? (
+                <CircuitJsonTableViewer elements={circuitJson as any} />
+              ) : (
+                <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+              )}
+            </ErrorBoundary>
+          </div>
+        </TabsContent>
+        <TabsContent value="error">
+          {circuitJson || errorMessage ? (
+            <ErrorTabContent code={code} errorMessage={errorMessage} />
+          ) : (
+            <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

src/hooks/use-compiled-tsx.ts

@@ -4,8 +4,8 @@ import * as Babel from "@babel/standalone"
 export const safeCompileTsx = (
   code: string,
 ):
-  | { success: true; compiledTsx: string }
-  | { success: false; error: Error } => {
+  | { success: true; compiledTsx: string; error?: undefined }
+  | { success: false; error: Error; compiledTsx?: undefined } => {
   try {
     return {
       success: true,

src/hooks/use-run-tsx/construct-circuit.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import { useCompiledTsx } from "../use-compiled-tsx"
 import { createJSCADRenderer } from "jscad-fiber"
 import { jscadPlanner } from "jscad-planner"
-import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 
 export const constructCircuit = (
   UserElm: any,