From 7b2348d04276219f62309650c6581f075ebf36ea Mon Sep 17 00:00:00 2001
From: Aaron Villalpando <aaron@boundaryml.com>
Date: Thu, 9 Jan 2025 11:24:29 -0800
Subject: [PATCH] formatting

---
 .../[project_id]/_components/GithubStars.tsx  | 12 +--
 .../[project_id]/_components/ProjectView.tsx  | 71 +++++++-------
 .../[project_id]/_components/TopNavbar.tsx    | 70 +++++++-------
 .../_components/Tree/FileViewer.tsx           | 18 ++--
 .../[project_id]/_components/Tree/Node.tsx    | 32 +++----
 .../fiddle-frontend/app/[project_id]/page.tsx |  4 +-
 typescript/fiddle-frontend/app/layout.tsx     |  4 +-
 typescript/fiddle-frontend/app/page.tsx       |  4 +-
 .../components/ui/checkbox.tsx                | 20 ++--
 .../components/ui/scroll-area.tsx             | 32 +++----
 .../src/baml_wasm_web/EventListener.tsx       | 14 +--
 .../src/components/ui/checkbox.tsx            |  2 +-
 .../src/components/ui/scroll-area.tsx         |  4 +-
 .../codemirror-panel/code-mirror-viewer.tsx   | 10 +-
 .../playground-panel/preview-toolbar.tsx      | 48 +++++-----
 .../playground-panel/prompt-preview/index.tsx | 18 ++--
 .../prompt-preview/prompt-preview-content.tsx | 22 ++---
 .../prompt-preview/prompt-preview-curl.tsx    |  2 +-
 .../prompt-preview/render-text.tsx            | 36 ++++----
 .../test-panel/components/ClientGraphView.tsx | 16 ++--
 .../components/ParsedResponseRender.tsx       | 20 ++--
 .../components/ResponseRenderer.tsx           | 56 +++++------
 .../test-panel/components/TabularView.tsx     | 88 +++++++++---------
 .../test-panel/components/TestMenu.tsx        | 32 +++----
 .../test-panel/components/TestStatus.tsx      | 12 +--
 .../test-panel/components/ViewSelector.tsx    |  4 +-
 .../prompt-preview/test-panel/index.tsx       |  8 +-
 .../playground-panel/side-bar/index.tsx       | 92 +++++++++----------
 .../baml-project-panel/theme/ThemeToggle.tsx  | 12 +--
 .../packages/vscode/src/extension.ts          |  7 +-
 .../vscode/src/helpers/get-open-file.ts       |  4 +-
 .../vscode/src/panels/WebPanelView.ts         |  2 -
 .../src/plugins/language-server/index.ts      |  8 +-
 33 files changed, 387 insertions(+), 397 deletions(-)

diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/GithubStars.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/GithubStars.tsx
index 0a12e37f7..2f89862a0 100644
--- a/typescript/fiddle-frontend/app/[project_id]/_components/GithubStars.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/_components/GithubStars.tsx
@@ -22,16 +22,16 @@ export const GithubStars = () => {
   return (
     <div>
       <Link
-        className="flex flex-row gap-x-2 items-center p-1 text-sm font-light leading-6 group hover:text-foreground/80"
-        href="https://github.com/boundaryml/baml"
-        target="_blank"
+        className='flex flex-row gap-x-2 items-center p-1 text-sm font-light leading-6 group hover:text-foreground/80'
+        href='https://github.com/boundaryml/baml'
+        target='_blank'
       >
         <Image
-          src="/github-mark.svg"
-          className="opacity-60 invert hover:opacity-100 dark:invert-0 dark:fill-white"
+          src='/github-mark.svg'
+          className='opacity-60 invert hover:opacity-100 dark:invert-0 dark:fill-white'
           width={18}
           height={18}
-          alt="Github"
+          alt='Github'
         />
         {/* <span className="hidden whitespace-nowrap text-primary-foreground/50 2xl:block">Star us on Github</span>
         <Separator orientation="vertical" className=" w-[1px] h-[24px] hidden" />
diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx
index 25af5a2a6..3aa26e1ff 100644
--- a/typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx
@@ -37,10 +37,13 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
       console.log('Updating files due: project', project.id)
       setUnsavedChanges(false)
       setFiles(
-        project.files.reduce((acc, f) => {
-          acc[f.path] = f.content
-          return acc
-        }, {} as Record<string, string>),
+        project.files.reduce(
+          (acc, f) => {
+            acc[f.path] = f.content
+            return acc
+          },
+          {} as Record<string, string>,
+        ),
       )
     }
   }, [project.id])
@@ -69,19 +72,19 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
 
   return (
     // firefox wont apply the background color for some reason so we forcefully set it.
-    <div className="flex relative flex-row w-full h-full main-panel overflow-x-clip overflow-y-clip">
+    <div className='flex relative flex-row w-full h-full main-panel overflow-x-clip overflow-y-clip'>
       <EventListener>
         {isMobile && (
-          <div className="absolute bottom-0 left-0 right-0 font-semibold  border-t-[1px] w-full h-[100px] z-50 text-center p-8">
+          <div className='absolute bottom-0 left-0 right-0 font-semibold  border-t-[1px] w-full h-[100px] z-50 text-center p-8'>
             Visit PromptFiddle on Desktop to get the best experience
           </div>
         )}
-        <ResizablePanelGroup className="w-full h-full overflow-clip" direction="horizontal">
+        <ResizablePanelGroup className='w-full h-full overflow-clip' direction='horizontal'>
           {!isMobile && <ProjectSidebar />}
 
-          <ResizableHandle className="" />
+          <ResizableHandle className='' />
           <ResizablePanel defaultSize={88}>
-            <div className="flex-col w-full h-full font-sans">
+            <div className='flex-col w-full h-full font-sans'>
               <TopNavbar
                 project={project}
                 projectName={projectName}
@@ -94,33 +97,33 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
                   // the size of the topnavbar
                   height: 'calc(100% - 55px)',
                 }}
-                className="flex flex-row h-full overflow-clip"
+                className='flex flex-row h-full overflow-clip'
               >
-                <ResizablePanelGroup className="min-h-[200px] w-full rounded-lg overflow-clip" direction="horizontal">
+                <ResizablePanelGroup className='min-h-[200px] w-full rounded-lg overflow-clip' direction='horizontal'>
                   <ResizablePanel defaultSize={50}>
-                    <div className="flex flex-col py-1 pl-2 w-full text-xs whitespace-nowrap border-none items-left h-fit">
+                    <div className='flex flex-col py-1 pl-2 w-full text-xs whitespace-nowrap border-none items-left h-fit'>
                       <Editable
                         text={description}
-                        placeholder="Write a task name"
-                        type="input"
+                        placeholder='Write a task name'
+                        type='input'
                         childRef={descriptionInputRef}
-                        className="px-2 py-2 w-full text-sm font-normal text-left border-none text-foreground"
+                        className='px-2 py-2 w-full text-sm font-normal text-left border-none text-foreground'
                       >
                         <textarea
-                          className="w-[95%] ml-2 px-2 text-sm border-none"
+                          className='w-[95%] ml-2 px-2 text-sm border-none'
                           ref={descriptionInputRef}
-                          name="task"
-                          placeholder="Write a description"
+                          name='task'
+                          placeholder='Write a description'
                           value={description}
                           onChange={(e) => setDescription(e.target.value)}
                         />
                       </Editable>
                     </div>
-                    <div className="flex pl-1 w-full h-full tour-editor dark:bg-muted/70">
-                      <ScrollArea className="w-full h-full">
+                    <div className='flex pl-1 w-full h-full tour-editor dark:bg-muted/70'>
+                      <ScrollArea className='w-full h-full'>
                         {activeFileName && (
                           <CodeMirrorViewer
-                            lang="baml"
+                            lang='baml'
                             fileContent={{
                               code: files[activeFileName],
                               language: 'baml',
@@ -140,10 +143,10 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
                       </ScrollArea>
                     </div>
                   </ResizablePanel>
-                  <ResizableHandle className="" />
+                  <ResizableHandle className='' />
                   {!isMobile && (
-                    <ResizablePanel defaultSize={50} className="tour-playground">
-                      <div className="flex flex-row h-full">
+                    <ResizablePanel defaultSize={50} className='tour-playground'>
+                      <div className='flex flex-row h-full'>
                         <PlaygroundView />
                       </div>
                     </ResizablePanel>
@@ -160,20 +163,20 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
 
 export const ProjectSidebar = () => {
   return (
-    <ResizablePanel defaultSize={16} className=" h-full dark:bg-[#020309] bg-muted">
-      <div className="flex flex-row justify-center items-center pt-4 w-full">
-        <a href={'/'} className="flex flex-row items-center text-lg font-semibold text-center w-fit text-foreground">
-          <Image src="/baml-lamb-white.png" alt="Prompt Fiddle" width={40} height={40} />
+    <ResizablePanel defaultSize={16} className=' h-full dark:bg-[#020309] bg-muted'>
+      <div className='flex flex-row justify-center items-center pt-4 w-full'>
+        <a href={'/'} className='flex flex-row items-center text-lg font-semibold text-center w-fit text-foreground'>
+          <Image src='/baml-lamb-white.png' alt='Prompt Fiddle' width={40} height={40} />
           Prompt Fiddle
         </a>
       </div>
 
-      <ResizablePanelGroup className="pb-4 h-full" direction="vertical">
-        <ResizablePanel defaultSize={100} className="h-full">
-          <div className="px-2 pt-4 w-full text-xs font-normal text-center uppercase text-muted-foreground">
+      <ResizablePanelGroup className='pb-4 h-full' direction='vertical'>
+        <ResizablePanel defaultSize={100} className='h-full'>
+          <div className='px-2 pt-4 w-full text-xs font-normal text-center uppercase text-muted-foreground'>
             project files
           </div>
-          <div className="flex flex-col pb-8 w-full h-full tour-file-view">
+          <div className='flex flex-col pb-8 w-full h-full tour-file-view'>
             <FileViewer />
           </div>
         </ResizablePanel>
@@ -193,9 +196,9 @@ export const ProjectView = ({ project }: { project: BAMLProject }) => {
 const PlaygroundView = () => {
   return (
     <>
-      <CustomErrorBoundary message="Error loading playground">
+      <CustomErrorBoundary message='Error loading playground'>
         <Suspense fallback={<div>Loading...</div>}>
-          <div className="flex flex-col w-full h-full">
+          <div className='flex flex-col w-full h-full'>
             <PromptPreview />
           </div>
 
diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/TopNavbar.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/TopNavbar.tsx
index a7de06105..707708597 100644
--- a/typescript/fiddle-frontend/app/[project_id]/_components/TopNavbar.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/_components/TopNavbar.tsx
@@ -27,7 +27,7 @@ const ShareButton = ({ project, projectName }: { project: BAMLProject; projectNa
   return (
     <Button
       variant={'default'}
-      className="gap-x-2 py-1 h-full whitespace-nowrap bg-transparent text-secondary-foreground hover:bg-purple-600 w-fit"
+      className='gap-x-2 py-1 h-full whitespace-nowrap bg-transparent text-secondary-foreground hover:bg-purple-600 w-fit'
       disabled={loading}
       onClick={async () => {
         setLoading(true)
@@ -89,31 +89,31 @@ export const TopNavbar = ({
   unsavedChanges,
 }: ProjectHeaderProps) => {
   return (
-    <div className="flex flex-row items-center gap-x-12 border-b-[0px] min-h-[55px]">
-      <div className="flex flex-col items-center py-1 h-full whitespace-nowrap lg:pr-12 tour-title">
-        <Editable text={projectName} placeholder="Write a task name" type="input" childRef={projectNameInputRef}>
+    <div className='flex flex-row items-center gap-x-12 border-b-[0px] min-h-[55px]'>
+      <div className='flex flex-col items-center py-1 h-full whitespace-nowrap lg:pr-12 tour-title'>
+        <Editable text={projectName} placeholder='Write a task name' type='input' childRef={projectNameInputRef}>
           <input
-            className="px-2 text-lg border-none text-foreground"
-            type="text"
+            className='px-2 text-lg border-none text-foreground'
+            type='text'
             ref={projectNameInputRef}
-            name="task"
-            placeholder="Write a task name"
+            name='task'
+            placeholder='Write a task name'
             value={projectName}
             onChange={(e) => setProjectName(e.target.value)}
           />
         </Editable>
       </div>
 
-      <div className="flex flex-row gap-x-2 items-center">
+      <div className='flex flex-row gap-x-2 items-center'>
         <ShareButton project={project} projectName={projectName} />
       </div>
 
-      <div className="flex items-center justify-start h-full pt-0.5 ">
-        <Button asChild variant={'ghost'} className="gap-x-1 py-1 h-full hover:bg-purple-600">
+      <div className='flex items-center justify-start h-full pt-0.5 '>
+        <Button asChild variant={'ghost'} className='gap-x-1 py-1 h-full hover:bg-purple-600'>
           <Link
-            href="https://boundaryml.com"
-            target="_blank"
-            className="text-sm hover:text-foreground text-foreground/60"
+            href='https://boundaryml.com'
+            target='_blank'
+            className='text-sm hover:text-foreground text-foreground/60'
           >
             What is BAML?
           </Link>
@@ -121,32 +121,32 @@ export const TopNavbar = ({
       </div>
 
       {project.id !== 'all-projects' && project.id !== null ? (
-        <div className="flex flex-col justify-center items-center h-full">
+        <div className='flex flex-col justify-center items-center h-full'>
           <Link
             href={`/all-projects`}
-            target="_blank"
-            className="flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-300 dark:hover:bg-purple-700 h-fit"
+            target='_blank'
+            className='flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-300 dark:hover:bg-purple-700 h-fit'
           >
             <Compass size={16} strokeWidth={2} />
-            <span className="whitespace-nowrap">Explore Examples</span>
+            <span className='whitespace-nowrap'>Explore Examples</span>
           </Link>
         </div>
       ) : null}
 
-      <div className="flex flex-col justify-center items-center h-full">
+      <div className='flex flex-col justify-center items-center h-full'>
         <Link
           href={`/new-project`}
-          target="_blank"
-          className="flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 h-fit"
+          target='_blank'
+          className='flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 h-fit'
         >
           <File size={16} strokeWidth={2} />
-          <span className="whitespace-nowrap">New project</span>
+          <span className='whitespace-nowrap'>New project</span>
         </Link>
       </div>
 
       {unsavedChanges ? (
-        <div className="flex flex-row items-center whitespace-nowrap text-muted-foreground">
-          <Badge variant="outline" className="gap-x-2 font-light text-yellow-600 dark:text-yellow-500">
+        <div className='flex flex-row items-center whitespace-nowrap text-muted-foreground'>
+          <Badge variant='outline' className='gap-x-2 font-light text-yellow-600 dark:text-yellow-500'>
             <AlertTriangleIcon size={14} />
             <span>Unsaved changes</span>
           </Badge>
@@ -155,11 +155,11 @@ export const TopNavbar = ({
         <></>
       )}
 
-      <div className="flex flex-row gap-x-8 justify-end items-center pr-4 w-full">
-        <div className="flex h-full">
-          <Link href="https://discord.gg/BTNBeXGuaS" className="pt-0 h-full w-fit">
-            <div className="flex flex-row gap-x-4 items-center text-sm">
-              <SiDiscord size={24} className="opacity-40 hover:opacity-100" />
+      <div className='flex flex-row gap-x-8 justify-end items-center pr-4 w-full'>
+        <div className='flex h-full'>
+          <Link href='https://discord.gg/BTNBeXGuaS' className='pt-0 h-full w-fit'>
+            <div className='flex flex-row gap-x-4 items-center text-sm'>
+              <SiDiscord size={24} className='opacity-40 hover:opacity-100' />
               {/* <Image
                 src="/discord-icon.svg"
                 className="text-blue-600 fill-black hover:opacity-100"
@@ -170,17 +170,17 @@ export const TopNavbar = ({
             </div>
           </Link>
         </div>
-        <div className="flex h-full">
+        <div className='flex h-full'>
           <Link
-            href="https://docs.boundaryml.com/guide/installation-editors/vs-code-extension"
-            className="pt-0 h-full w-fit text-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-50 hover:text-zinc-600"
+            href='https://docs.boundaryml.com/guide/installation-editors/vs-code-extension'
+            className='pt-0 h-full w-fit text-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-50 hover:text-zinc-600'
           >
-            <div className="flex flex-row gap-x-4 items-center text-xs grayscale 2xl:text-sm hover:grayscale-0">
-              <Image src="/vscode_logo.svg" width={18} height={18} alt="VSCode extension" />
+            <div className='flex flex-row gap-x-4 items-center text-xs grayscale 2xl:text-sm hover:grayscale-0'>
+              <Image src='/vscode_logo.svg' width={18} height={18} alt='VSCode extension' />
             </div>
           </Link>
         </div>
-        <div className="flex h-full">
+        <div className='flex h-full'>
           <GithubStars />
         </div>
       </div>
diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx
index a2912e415..b7ce3bc21 100644
--- a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx
@@ -116,29 +116,29 @@ const FileViewer = () => {
   const [term, setTerm] = useState('')
 
   const createFileFolder = (
-    <div className="flex flex-row gap-x-1 pt-3 pl-1 w-full">
+    <div className='flex flex-row gap-x-1 pt-3 pl-1 w-full'>
       <button
         onClick={async () => {
           await treeRef?.current?.createInternal()
         }}
-        title="New Folder..."
+        title='New Folder...'
       >
-        <FolderPlus size={14} className="text-zinc-500 hover:text-zinc-200" />
+        <FolderPlus size={14} className='text-zinc-500 hover:text-zinc-200' />
       </button>
       <button
         onClick={async () => {
           const leaf = await treeRef?.current?.createLeaf()
         }}
-        title="New File..."
+        title='New File...'
       >
-        <FilePlus size={14} className="text-zinc-500 hover:text-zinc-200" />
+        <FilePlus size={14} className='text-zinc-500 hover:text-zinc-200' />
       </button>
     </div>
   )
 
   return (
-    <div className="flex flex-col pl-2 w-full h-full overflow-x-clip">
-      <div className="folderFileActions">{createFileFolder}</div>
+    <div className='flex flex-col pl-2 w-full h-full overflow-x-clip'>
+      <div className='folderFileActions'>{createFileFolder}</div>
       {/* <input
         type="text"
         placeholder="Search..."
@@ -146,9 +146,9 @@ const FileViewer = () => {
         value={term}
         onChange={(e) => setTerm(e.target.value)}
       /> */}
-      <div ref={ref} className="flex flex-col h-full">
+      <div ref={ref} className='flex flex-col h-full'>
         <Tree
-          className="truncate"
+          className='truncate'
           ref={treeRef}
           openByDefault={false}
           // initialOpenState={{ baml_src: true }}
diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/Node.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/Node.tsx
index e27961b9e..818edd60a 100644
--- a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/Node.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/Node.tsx
@@ -21,13 +21,13 @@ const renderIcon = (path: string) => {
   const icon = path.split('.').pop()
   switch (icon) {
     case 'py':
-      return <SiPython size={14} color="#6bc7f6" />
+      return <SiPython size={14} color='#6bc7f6' />
     case 'ts':
-      return <SiTypescript size={14} color="#2563eb" />
+      return <SiTypescript size={14} color='#2563eb' />
     default:
       return (
-        <span className="file-folder-icon">
-          <File className="text-secondary-foreground/50" size={16} />
+        <span className='file-folder-icon'>
+          <File className='text-secondary-foreground/50' size={16} />
         </span>
       )
   }
@@ -86,26 +86,26 @@ const Node = ({ node, style, dragHandle, tree }: NodeRendererProps<any>) => {
       style={style}
       ref={dragHandle}
     >
-      <div className="flex flex-row justify-start items-center w-full" onClick={() => node.isInternal && node.toggle()}>
+      <div className='flex flex-row justify-start items-center w-full' onClick={() => node.isInternal && node.toggle()}>
         {node.isLeaf ? (
           <>
-            <span className=""></span>
+            <span className=''></span>
             {renderIcon(node.id)}
           </>
         ) : (
           <>
-            <span className="w-fit">
-              {node.isOpen ? <ChevronDown className="w-3 h-fit" /> : <ChevronRight size={12} />}
+            <span className='w-fit'>
+              {node.isOpen ? <ChevronDown className='w-3 h-fit' /> : <ChevronRight size={12} />}
             </span>
             {/* <span className="file-folder-icon">
               <Folder color="#f6cf60" size={16} />
             </span> */}
           </>
         )}
-        <span className="node-text text-muted-foreground hover:text-foreground">
+        <span className='node-text text-muted-foreground hover:text-foreground'>
           {node.isEditing ? (
             <input
-              type="text"
+              type='text'
               defaultValue={node.data.name}
               onFocus={(e) => e.currentTarget.select()}
               onBlur={() => node.reset()}
@@ -152,20 +152,20 @@ const Node = ({ node, style, dragHandle, tree }: NodeRendererProps<any>) => {
       </div>
 
       {node.id !== 'baml_src' && (
-        <div className="hidden absolute top-0 right-0 rounded-md group-hover:flex bg-muted">
-          <div className="flex flex-row items-center">
+        <div className='hidden absolute top-0 right-0 rounded-md group-hover:flex bg-muted'>
+          <div className='flex flex-row items-center'>
             <button
-              className="p-1 opacity-70 hover:opacity-100"
+              className='p-1 opacity-70 hover:opacity-100'
               onClick={(e) => {
                 e.stopPropagation()
                 node.edit()
               }}
-              title="Rename..."
+              title='Rename...'
             >
               <Edit2 size={11} />
             </button>
             <button
-              className="p-1 opacity-60 hover:opacity-100"
+              className='p-1 opacity-60 hover:opacity-100'
               onClick={() => {
                 tree.delete(node.id)
 
@@ -184,7 +184,7 @@ const Node = ({ node, style, dragHandle, tree }: NodeRendererProps<any>) => {
                   return prev.filter((d) => d.slice(0, -1) !== node.id)
                 })
               }}
-              title="Delete"
+              title='Delete'
             >
               <X size={16} />
             </button>
diff --git a/typescript/fiddle-frontend/app/[project_id]/page.tsx b/typescript/fiddle-frontend/app/[project_id]/page.tsx
index 21135fb8f..fdd6c63b3 100644
--- a/typescript/fiddle-frontend/app/[project_id]/page.tsx
+++ b/typescript/fiddle-frontend/app/[project_id]/page.tsx
@@ -31,8 +31,8 @@ export default async function Home({
   const data: BAMLProject = await loadProject(params)
   // console.log(data)
   return (
-    <main className="flex flex-col justify-between items-center min-h-screen font-sans">
-      <div className="w-screen h-screen dark:bg-black">
+    <main className='flex flex-col justify-between items-center min-h-screen font-sans'>
+      <div className='w-screen h-screen dark:bg-black'>
         <ProjectView project={data} />
       </div>
     </main>
diff --git a/typescript/fiddle-frontend/app/layout.tsx b/typescript/fiddle-frontend/app/layout.tsx
index bd76d30e6..79eb11547 100644
--- a/typescript/fiddle-frontend/app/layout.tsx
+++ b/typescript/fiddle-frontend/app/layout.tsx
@@ -26,12 +26,12 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <RB2BElement />
       <PHProvider>
         <body className={'bg-background'}>
           <PostHogPageView />
-          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange={true}>
+          <ThemeProvider attribute='class' defaultTheme='dark' enableSystem={false} disableTransitionOnChange={true}>
             <JotaiProvider>
               <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
               {/* <div className="fixed left-0 bottom-1/2 w-[12%] px-1 items-center justify-center flex">
diff --git a/typescript/fiddle-frontend/app/page.tsx b/typescript/fiddle-frontend/app/page.tsx
index d5b56e46c..385346c98 100644
--- a/typescript/fiddle-frontend/app/page.tsx
+++ b/typescript/fiddle-frontend/app/page.tsx
@@ -22,8 +22,8 @@ export default async function Home({
 }) {
   const data: BAMLProject = await loadProject(params, true)
   return (
-    <main className="flex flex-col justify-between items-center min-h-screen font-sans">
-      <div className="w-screen h-screen">
+    <main className='flex flex-col justify-between items-center min-h-screen font-sans'>
+      <div className='w-screen h-screen'>
         <ProjectView project={data} />
         {/* <Suspense fallback={<div>Loading...</div>}>{children}</Suspense> */}
       </div>
diff --git a/typescript/fiddle-frontend/components/ui/checkbox.tsx b/typescript/fiddle-frontend/components/ui/checkbox.tsx
index df61a1388..58223303b 100644
--- a/typescript/fiddle-frontend/components/ui/checkbox.tsx
+++ b/typescript/fiddle-frontend/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,15 +13,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className='h-4 w-4' />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/typescript/fiddle-frontend/components/ui/scroll-area.tsx b/typescript/fiddle-frontend/components/ui/scroll-area.tsx
index 0b4a48d87..73443d9f1 100644
--- a/typescript/fiddle-frontend/components/ui/scroll-area.tsx
+++ b/typescript/fiddle-frontend/components/ui/scroll-area.tsx
@@ -1,22 +1,16 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>{children}</ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
@@ -26,21 +20,19 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/typescript/playground-common/src/baml_wasm_web/EventListener.tsx b/typescript/playground-common/src/baml_wasm_web/EventListener.tsx
index 7244491b7..2e6c5a804 100644
--- a/typescript/playground-common/src/baml_wasm_web/EventListener.tsx
+++ b/typescript/playground-common/src/baml_wasm_web/EventListener.tsx
@@ -56,20 +56,20 @@ const ErrorCount: React.FC = () => {
   const { errors, warnings } = useAtomValue(numErrorsAtom)
   if (errors === 0 && warnings === 0) {
     return (
-      <div className="flex flex-row gap-1 items-center text-green-600">
+      <div className='flex flex-row gap-1 items-center text-green-600'>
         <CheckCircle size={12} />
       </div>
     )
   }
   if (errors === 0) {
     return (
-      <div className="flex flex-row gap-1 items-center text-yellow-600">
+      <div className='flex flex-row gap-1 items-center text-yellow-600'>
         {warnings} <AlertTriangle size={12} />
       </div>
     )
   }
   return (
-    <div className="flex flex-row gap-1 items-center text-red-600">
+    <div className='flex flex-row gap-1 items-center text-red-600'>
       {errors} <XCircle size={12} /> {warnings} <AlertTriangle size={12} />{' '}
     </div>
   )
@@ -210,11 +210,11 @@ export const EventListener: React.FC<{ children: React.ReactNode }> = ({ childre
 
   return (
     <>
-      <div className="flex absolute right-2 bottom-2 z-50 flex-row gap-2 text-xs bg-transparent">
-        <div className="pr-4 whitespace-nowrap">{bamlCliVersion && 'baml-cli ' + bamlCliVersion}</div>
-        <ErrorCount /> <span className="text-muted-foreground text-[10px]">VSCode Runtime Version: {version}</span>
+      <div className='flex absolute right-2 bottom-2 z-50 flex-row gap-2 text-xs bg-transparent'>
+        <div className='pr-4 whitespace-nowrap'>{bamlCliVersion && 'baml-cli ' + bamlCliVersion}</div>
+        <ErrorCount /> <span className='text-muted-foreground text-[10px]'>VSCode Runtime Version: {version}</span>
       </div>
-      <CustomErrorBoundary message="Error loading project">{children}</CustomErrorBoundary>
+      <CustomErrorBoundary message='Error loading project'>{children}</CustomErrorBoundary>
     </>
   )
 }
diff --git a/typescript/playground-common/src/components/ui/checkbox.tsx b/typescript/playground-common/src/components/ui/checkbox.tsx
index 021251f70..b08199e08 100644
--- a/typescript/playground-common/src/components/ui/checkbox.tsx
+++ b/typescript/playground-common/src/components/ui/checkbox.tsx
@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn('flex justify-center items-center text-current')}>
-      <Check className="w-4 h-4" />
+      <Check className='w-4 h-4' />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/typescript/playground-common/src/components/ui/scroll-area.tsx b/typescript/playground-common/src/components/ui/scroll-area.tsx
index 8f570061a..b9b46e42b 100644
--- a/typescript/playground-common/src/components/ui/scroll-area.tsx
+++ b/typescript/playground-common/src/components/ui/scroll-area.tsx
@@ -10,7 +10,7 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root ref={ref} className={cn('overflow-hidden relative', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>{children}</ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
@@ -32,7 +32,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/typescript/playground-common/src/shared/baml-project-panel/codemirror-panel/code-mirror-viewer.tsx b/typescript/playground-common/src/shared/baml-project-panel/codemirror-panel/code-mirror-viewer.tsx
index 192bfea8e..69a4f3e53 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/codemirror-panel/code-mirror-viewer.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/codemirror-panel/code-mirror-viewer.tsx
@@ -275,9 +275,9 @@ export const CodeMirrorViewer = ({
   }
 
   return (
-    <div className="w-full h-fit">
+    <div className='w-full h-fit'>
       <div
-        className="pb-8 w-full h-full"
+        className='pb-8 w-full h-full'
         onKeyDown={(e) => {
           if ((e.metaKey || e.ctrlKey) && e.key === 's') {
             e.preventDefault()
@@ -308,9 +308,9 @@ export const CodeMirrorViewer = ({
           readOnly={false}
           extensions={[...extensions, ...inlineCopilotExtension]}
           theme={editorTheme}
-          className="text-xs border-none"
-          height="100%"
-          width="100%"
+          className='text-xs border-none'
+          height='100%'
+          width='100%'
           style={{ width: '100%', height: '100%' }}
         />
         {/* {modified && (
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/preview-toolbar.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/preview-toolbar.tsx
index 823c97674..3a49f8395 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/preview-toolbar.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/preview-toolbar.tsx
@@ -23,9 +23,9 @@ const RunButton: React.FC = () => {
   const selected = useAtomValue(selectedItemAtom)
   return (
     <Button
-      variant="default"
-      size="sm"
-      className="items-center px-2 space-x-2 h-7 text-sm text-white bg-purple-500 hover:bg-purple-700 disabled:bg-muted disabled:text-muted-foreground dark:bg-purple-700 dark:text-foreground dark:hover:bg-purple-800"
+      variant='default'
+      size='sm'
+      className='items-center px-2 space-x-2 h-7 text-sm text-white bg-purple-500 hover:bg-purple-700 disabled:bg-muted disabled:text-muted-foreground dark:bg-purple-700 dark:text-foreground dark:hover:bg-purple-800'
       disabled={isRunning || selected === undefined}
       onClick={() => {
         if (selected) {
@@ -33,8 +33,8 @@ const RunButton: React.FC = () => {
         }
       }}
     >
-      <PlayCircle className="mr-0 w-4 h-4" />
-      <div className="text-xs">Run {selected ? selected[1] : ''}</div>
+      <PlayCircle className='mr-0 w-4 h-4' />
+      <div className='text-xs'>Run {selected ? selected[1] : ''}</div>
     </Button>
   )
 }
@@ -64,48 +64,48 @@ export default function Component() {
   const SelectedIcon = selectedOption?.icon || FileJson
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className='flex flex-col gap-1'>
       <div
         className={cn('flex flex-row gap-1 items-center', selections === undefined ? 'justify-end' : 'justify-start')}
       >
         {selections !== undefined && <FunctionTestName functionName={selections[0]} testName={selections[1]} />}
         <Button
-          variant="ghost"
-          size="sm"
-          className="flex gap-2 items-center text-muted-foreground/70"
+          variant='ghost'
+          size='sm'
+          className='flex gap-2 items-center text-muted-foreground/70'
           onClick={() => setShowEnvDialog(true)}
         >
-          <div className="relative">
-            <Settings className="w-4 h-4 text-muted-foreground" />
-            {areEnvVarsMissing && <div className="absolute -top-1 -right-1 w-2 h-2 bg-orange-500 rounded-full" />}
+          <div className='relative'>
+            <Settings className='w-4 h-4 text-muted-foreground' />
+            {areEnvVarsMissing && <div className='absolute -top-1 -right-1 w-2 h-2 bg-orange-500 rounded-full' />}
           </div>
           <span>API Keys</span>
         </Button>
         <ThemeToggle />
       </div>
 
-      <div className="flex items-center space-x-4 w-full">
+      <div className='flex items-center space-x-4 w-full'>
         <RunButton />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              variant="outline"
-              size="sm"
-              className="h-8 border-border bg-background hover:bg-accent hover:text-accent-foreground"
+              variant='outline'
+              size='sm'
+              className='h-8 border-border bg-background hover:bg-accent hover:text-accent-foreground'
             >
-              <SelectedIcon className="mr-2 w-4 h-4" />
+              <SelectedIcon className='mr-2 w-4 h-4' />
               {selectedOption?.label}
-              <ChevronDown className="ml-2 w-4 h-4 opacity-50" />
+              <ChevronDown className='ml-2 w-4 h-4 opacity-50' />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="border-border bg-background">
+          <DropdownMenuContent align='start' className='border-border bg-background'>
             {options.map((option) => (
               <DropdownMenuItem
                 key={option.label}
                 onSelect={() => setRenderMode(option.value)}
-                className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                className='hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground'
               >
-                <option.icon className="mr-2 w-4 h-4" />
+                <option.icon className='mr-2 w-4 h-4' />
                 {option.label}
               </DropdownMenuItem>
             ))}
@@ -115,14 +115,14 @@ export default function Component() {
           <Tooltip delayDuration={100}>
             <TooltipTrigger>
               <Button
-                variant="ghost"
-                size="sm"
+                variant='ghost'
+                size='sm'
                 className={cn(
                   isClientCallGraphEnabled ? 'text-purple-500 bg-muted hover:text-purple-500' : 'hover:text-purple-500',
                 )}
                 onClick={() => setIsClientCallGraphEnabled(!isClientCallGraphEnabled)}
               >
-                <Workflow className="w-4 h-4" />
+                <Workflow className='w-4 h-4' />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/index.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/index.tsx
index 23acb0893..4d04aa4d4 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/index.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/index.tsx
@@ -40,27 +40,27 @@ const PromptPreview = () => {
   const [showEnvDialog, setShowEnvDialog] = useAtom(showEnvDialogAtom)
 
   return (
-    <div className="flex relative justify-between h-full bg-background text-foreground">
+    <div className='flex relative justify-between h-full bg-background text-foreground'>
       <div
-        className="flex overflow-x-auto flex-col justify-start items-start pr-2 w-full h-full"
+        className='flex overflow-x-auto flex-col justify-start items-start pr-2 w-full h-full'
         style={{ minHeight: '530px' }}
       >
         <Dialog open={showEnvDialog} onOpenChange={setShowEnvDialog}>
-          <DialogContent className="mt-12 sm:max-w-[825px]">
+          <DialogContent className='mt-12 sm:max-w-[825px]'>
             <EnvVars />
           </DialogContent>
         </Dialog>
-        <ResizablePanelGroup autoSaveId={'prompt-preview'} direction="vertical" className="py-2 h-full">
-          <ResizablePanel defaultSize={areTestsRunning ? 40 : 80} className="flex flex-col gap-4 px-4">
+        <ResizablePanelGroup autoSaveId={'prompt-preview'} direction='vertical' className='py-2 h-full'>
+          <ResizablePanel defaultSize={areTestsRunning ? 40 : 80} className='flex flex-col gap-4 px-4'>
             <PreviewToolbar />
-            <ScrollArea className="w-full h-full rounded-md bg-background" type="always">
-              <div className="w-full rounded-md border h-fit border-border/50 bg-background">
+            <ScrollArea className='w-full h-full rounded-md bg-background' type='always'>
+              <div className='w-full rounded-md border h-fit border-border/50 bg-background'>
                 <PromptRenderWrapper />
               </div>
             </ScrollArea>
           </ResizablePanel>
-          <ResizableHandle withHandle className="bg-border" />
-          <ResizablePanel ref={ref} defaultSize={areTestsRunning ? 60 : 20} className="flex flex-col pl-2">
+          <ResizableHandle withHandle className='bg-border' />
+          <ResizablePanel ref={ref} defaultSize={areTestsRunning ? 60 : 20} className='flex flex-col pl-2'>
             <TestPanel />
           </ResizablePanel>
         </ResizablePanelGroup>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-content.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-content.tsx
index 8627131af..fa07b1841 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-content.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-content.tsx
@@ -34,7 +34,7 @@ export const PromptPreviewContent = () => {
   )
 
   if (isLoading) {
-    return <Loader message="Refreshing..." />
+    return <Loader message='Refreshing...' />
   }
 
   if (error) {
@@ -43,10 +43,10 @@ export const PromptPreviewContent = () => {
 
   if (diagnostics.length > 0 && diagnostics.some((d) => d.type === 'error')) {
     return (
-      <div className="p-3">
-        <div className="mb-2 text-sm font-medium text-red-500">Syntax Error</div>
-        <pre className="px-2 py-1 font-mono text-sm text-red-500 whitespace-pre-wrap rounded-lg">
-          <div className="space-y-2">
+      <div className='p-3'>
+        <div className='mb-2 text-sm font-medium text-red-500'>Syntax Error</div>
+        <pre className='px-2 py-1 font-mono text-sm text-red-500 whitespace-pre-wrap rounded-lg'>
+          <div className='space-y-2'>
             <div>{diagnostics.filter((d) => d.type === 'error').length} error(s):</div>
             {diagnostics
               .filter((d) => d.type === 'error')
@@ -77,18 +77,18 @@ export const NoTestsContent = () => {
   }, [testSnippet])
 
   return (
-    <div className="flex flex-col justify-center items-center">
-      <div className="mb-4 text-sm font-medium text-muted-foreground">Add a test to see the preview!</div>
-      <div className="relative w-full max-w-2xl rounded-lg border border-border bg-muted">
-        <div className="absolute top-2 right-2">
+    <div className='flex flex-col justify-center items-center'>
+      <div className='mb-4 text-sm font-medium text-muted-foreground'>Add a test to see the preview!</div>
+      <div className='relative w-full max-w-2xl rounded-lg border border-border bg-muted'>
+        <div className='absolute top-2 right-2'>
           <button
             onClick={handleCopy}
-            className="px-2 py-1 text-xs font-medium rounded shadow-sm bg-background text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            className='px-2 py-1 text-xs font-medium rounded shadow-sm bg-background text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
           >
             {copied ? 'Copied!' : 'Copy'}
           </button>
         </div>
-        <pre className="overflow-x-auto p-4 font-mono text-sm text-balance text-foreground">{testSnippet}</pre>
+        <pre className='overflow-x-auto p-4 font-mono text-sm text-balance text-foreground'>{testSnippet}</pre>
       </div>
     </div>
   )
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-curl.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-curl.tsx
index 7bd64a622..57db36ef2 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-curl.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/prompt-preview-curl.tsx
@@ -49,7 +49,7 @@ export const PromptPreviewCurl = () => {
   }
   return (
     <WithCopyButton text={value}>
-      <pre className="w-[100%] whitespace-pre-wrap break-all rounded-lg border bg-muted p-4 font-mono text-xs">
+      <pre className='w-[100%] whitespace-pre-wrap break-all rounded-lg border bg-muted p-4 font-mono text-xs'>
         {value}
       </pre>
     </WithCopyButton>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-text.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-text.tsx
index a1f9e3468..1eb79d410 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-text.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-text.tsx
@@ -60,28 +60,28 @@ export const RenderText: React.FC<{
   }, [text, highlightChunks, tokenizer])
 
   return (
-    <div className="flex flex-col">
+    <div className='flex flex-col'>
       {isDebugMode && (
-        <div className="flex flex-row gap-4 justify-start items-center px-3 py-2 text-xs border-b border-border bg-muted text-muted-foreground">
-          <div className="flex items-center gap-1.5">
-            <span className="text-muted-foreground/60">Characters:</span>
-            <span className="font-medium">{text.length}</span>
+        <div className='flex flex-row gap-4 justify-start items-center px-3 py-2 text-xs border-b border-border bg-muted text-muted-foreground'>
+          <div className='flex items-center gap-1.5'>
+            <span className='text-muted-foreground/60'>Characters:</span>
+            <span className='font-medium'>{text.length}</span>
           </div>
-          <div className="flex items-center gap-1.5">
-            <span className="text-muted-foreground/60">Words:</span>
-            <span className="font-medium">{text.split(/\s+/).filter(Boolean).length}</span>
+          <div className='flex items-center gap-1.5'>
+            <span className='text-muted-foreground/60'>Words:</span>
+            <span className='font-medium'>{text.split(/\s+/).filter(Boolean).length}</span>
           </div>
-          <div className="flex items-center gap-1.5">
-            <span className="text-muted-foreground/60">Lines:</span>
-            <span className="font-medium">{text.split('\n').length}</span>
+          <div className='flex items-center gap-1.5'>
+            <span className='text-muted-foreground/60'>Lines:</span>
+            <span className='font-medium'>{text.split('\n').length}</span>
           </div>
-          <div className="flex items-center gap-1.5">
-            <span className="text-muted-foreground/60">Tokens (est.):</span>
-            <span className="font-medium">{Math.ceil(text.length / 4)}</span>
+          <div className='flex items-center gap-1.5'>
+            <span className='text-muted-foreground/60'>Tokens (est.):</span>
+            <span className='font-medium'>{Math.ceil(text.length / 4)}</span>
           </div>
         </div>
       )}
-      <ScrollArea className="relative flex-1 p-2 pb-6 bg-muted/50 dark:bg-slate-900" type="always">
+      <ScrollArea className='relative flex-1 p-2 pb-6 bg-muted/50 dark:bg-slate-900' type='always'>
         <pre
           className={`whitespace-pre-wrap text-xs  ${isFullTextVisible ? 'max-h-96' : 'max-h-64'}`}
           dangerouslySetInnerHTML={{ __html: renderContent }}
@@ -90,17 +90,17 @@ export const RenderText: React.FC<{
         {isLongText && (
           <button
             onClick={() => setIsFullTextVisible(!isFullTextVisible)}
-            className="flex absolute right-0 bottom-0 gap-1 items-center p-2 text-xs rounded-tr-md rounded-bl-md transition-colors bg-muted/50 text-muted-foreground hover:text-foreground"
+            className='flex absolute right-0 bottom-0 gap-1 items-center p-2 text-xs rounded-tr-md rounded-bl-md transition-colors bg-muted/50 text-muted-foreground hover:text-foreground'
           >
             {isFullTextVisible ? (
               <>
                 Show less
-                <ChevronUp className="w-3 h-3" />
+                <ChevronUp className='w-3 h-3' />
               </>
             ) : (
               <>
                 Show more
-                <ChevronDown className="w-3 h-3" />
+                <ChevronDown className='w-3 h-3' />
               </>
             )}
           </button>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ClientGraphView.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ClientGraphView.tsx
index dbd133d01..aa620d008 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ClientGraphView.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ClientGraphView.tsx
@@ -36,14 +36,14 @@ const ClientHeader: React.FC = () => {
   const clientsArray = useAtomValue(currentClientsAtom)
   const currentClient = clientsArray[orchIndex]
   return (
-    <div className="pt-4">
-      <div className="text-sm font-bold">LLM Client Call Graph</div>
-      <div className="flex flex-col-reverse items-start gap-0.5">
-        <span className="pl-2 text-xs text-muted-foreground flex flex-row flex-wrap items-center gap-0.5">
+    <div className='pt-4'>
+      <div className='text-sm font-bold'>LLM Client Call Graph</div>
+      <div className='flex flex-col-reverse items-start gap-0.5'>
+        <span className='pl-2 text-xs text-muted-foreground flex flex-row flex-wrap items-center gap-0.5'>
           {clientsArray.length > 1 && `Attempt ${orchIndex} in Client Graph`}
         </span>
-        <div className="max-w-[300px] justify-start items-center flex hover:bg-vscode-button-hoverBackground h-fit rounded-md text-vscode-foreground cursor-pointer">
-          <span className="px-2 py-1 w-full text-left truncate">{currentClient}</span>
+        <div className='max-w-[300px] justify-start items-center flex hover:bg-vscode-button-hoverBackground h-fit rounded-md text-vscode-foreground cursor-pointer'>
+          <span className='px-2 py-1 w-full text-left truncate'>{currentClient}</span>
         </div>
       </div>
     </div>
@@ -119,9 +119,9 @@ export const ClientGraphView: React.FC = () => {
   }
 
   return (
-    <div className="w-full h-full">
+    <div className='w-full h-full'>
       <ClientHeader />
-      <div className="h-[400px] border-b-red-500 border-b-24 border">
+      <div className='h-[400px] border-b-red-500 border-b-24 border'>
         <ReactFlow
           style={styles}
           nodes={flowNodes}
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ParsedResponseRender.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ParsedResponseRender.tsx
index 24535de7a..07ef9671c 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ParsedResponseRender.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ParsedResponseRender.tsx
@@ -11,7 +11,7 @@ export const ParsedResponseRenderer: React.FC<{
   response?: WasmFunctionResponse | WasmTestResponse
 }> = ({ response }) => {
   if (!response || !response.parsed_response()) {
-    return <div className="text-xs text-muted-foreground">Waiting for response...</div>
+    return <div className='text-xs text-muted-foreground'>Waiting for response...</div>
   }
 
   const parsedResponse = response.parsed_response()
@@ -40,10 +40,10 @@ const ParsedResponseRender = ({ response }: { response: string }) => {
   }
 
   return (
-    <div className="flex max-h-[500px]  text-xs">
-      <ScrollArea className="pr-2 w-full text-xs" type="always">
+    <div className='flex max-h-[500px]  text-xs'>
+      <ScrollArea className='pr-2 w-full text-xs' type='always'>
         <JsonView
-          className="p-1 w-full rounded-md"
+          className='p-1 w-full rounded-md'
           value={parsedResponseObj}
           collapsed={false}
           enableClipboard={true}
@@ -60,8 +60,8 @@ const ParsedResponseRender = ({ response }: { response: string }) => {
               }
               if (type === 'value') {
                 return (
-                  <span {...reset} className="whitespace-pre-wrap break-all">
-                    &quot;{children}&quot;<span className="text-muted-foreground">, </span>
+                  <span {...reset} className='whitespace-pre-wrap break-all'>
+                    &quot;{children}&quot;<span className='text-muted-foreground'>, </span>
                   </span>
                 )
               }
@@ -78,14 +78,14 @@ const ParsedResponseRender = ({ response }: { response: string }) => {
 
           <JsonView.Null
             render={({ children, ...reset }) => (
-              <span {...reset} className="whitespace-pre-wrap break-words">
+              <span {...reset} className='whitespace-pre-wrap break-words'>
                 null
               </span>
             )}
           />
           <JsonView.Undefined
             render={({ children, ...reset }) => (
-              <span {...reset} className="whitespace-pre-wrap break-words">
+              <span {...reset} className='whitespace-pre-wrap break-words'>
                 undefined
               </span>
             )}
@@ -93,9 +93,9 @@ const ParsedResponseRender = ({ response }: { response: string }) => {
           <JsonView.KeyName
             render={({ ...props }, { parentValue, value, keyName }) => {
               if (Array.isArray(parentValue) && Number.isFinite(props.children)) {
-                return <span className="" />
+                return <span className='' />
               }
-              return <span className="" {...props} />
+              return <span className='' {...props} />
             }}
           />
         </JsonView>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx
index a2b0147f0..ee84398e9 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx
@@ -20,7 +20,7 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
   const [llmCopied, setLlmCopied] = useState(false)
 
   if (!response) {
-    return <div className="text-xs text-muted-foreground">Waiting for response...</div>
+    return <div className='text-xs text-muted-foreground'>Waiting for response...</div>
   }
 
   const llmFailure = response.llm_failure()
@@ -54,10 +54,10 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
   }
 
   return (
-    <div className="space-y-4">
+    <div className='space-y-4'>
       {/* Metadata Section */}
       {llmResponse && (
-        <div className="flex flex-wrap gap-2">
+        <div className='flex flex-wrap gap-2'>
           <MetadataBadges llmResponse={llmResponse} />
         </div>
       )}
@@ -66,9 +66,9 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
       <div className={`grid ${shouldShowParsedSeparately() ? 'grid-cols-2' : 'grid-cols-1'} gap-4`}>
         {/* LLM Response */}
         {llmResponse && (
-          <div className="relative group">
-            <div className="space-y-2">
-              <span className="text-xs text-muted-foreground">Raw LLM Response</span>
+          <div className='relative group'>
+            <div className='space-y-2'>
+              <span className='text-xs text-muted-foreground'>Raw LLM Response</span>
               <RenderText text={llmResponse.content} />
             </div>
             <CopyButton copied={llmCopied} onCopy={handleLlmCopy} />
@@ -77,12 +77,12 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
 
         {/* Parsed Response */}
         {shouldShowParsedSeparately() && (
-          <div className="relative group">
-            <div className="space-y-2">
-              <span className="flex flex-row gap-x-1 text-xs text-muted-foreground">
+          <div className='relative group'>
+            <div className='space-y-2'>
+              <span className='flex flex-row gap-x-1 text-xs text-muted-foreground'>
                 <div>Parsed Response</div>
                 {parsedResponse && typeof parsedResponse !== 'string' && parsedResponse.check_count > 0 ? (
-                  <div className="flex items-center space-x-1">
+                  <div className='flex items-center space-x-1'>
                     {/* <CheckCircle className="w-3 h-3" /> */}
                     <span>({parsedResponse.check_count} checks ran)</span>
                   </div>
@@ -96,7 +96,7 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
       </div>
 
       {/* Error Messages */}
-      {failureMessage && <div className="text-xs text-red-500">Error: {failureMessage}</div>}
+      {failureMessage && <div className='text-xs text-red-500'>Error: {failureMessage}</div>}
     </div>
   )
 }
@@ -106,7 +106,7 @@ export const RawResponseRenderer: React.FC<{
   response?: WasmFunctionResponse | WasmTestResponse
 }> = ({ response }) => {
   if (!response) {
-    return <div className="text-xs text-muted-foreground">Waiting for response...</div>
+    return <div className='text-xs text-muted-foreground'>Waiting for response...</div>
   }
   return <RenderText text={response.llm_response()?.content ?? ''} />
 }
@@ -115,8 +115,8 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Badge variant="outline" className="flex items-center space-x-1 font-light text-muted-foreground">
-          <Brain className="w-3 h-3" />
+        <Badge variant='outline' className='flex items-center space-x-1 font-light text-muted-foreground'>
+          <Brain className='w-3 h-3' />
           <span>{llmResponse.model}</span>
         </Badge>
       </TooltipTrigger>
@@ -125,8 +125,8 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons
 
     <Tooltip>
       <TooltipTrigger asChild>
-        <Badge variant="outline" className="flex items-center space-x-1 font-light text-muted-foreground">
-          <Clock className="w-3 h-3" />
+        <Badge variant='outline' className='flex items-center space-x-1 font-light text-muted-foreground'>
+          <Clock className='w-3 h-3' />
           <span>{(Number(llmResponse.latency_ms) / 1000).toFixed(2)}s</span>
         </Badge>
       </TooltipTrigger>
@@ -137,12 +137,12 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons
 
 const CopyButton: React.FC<{ copied: boolean; onCopy: () => void }> = ({ copied, onCopy }) => (
   <Button
-    variant="ghost"
-    size="icon"
-    className="absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100"
+    variant='ghost'
+    size='icon'
+    className='absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100'
     onClick={onCopy}
   >
-    {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+    {copied ? <Check className='w-4 h-4' /> : <Copy className='w-4 h-4' />}
   </Button>
 )
 
@@ -150,28 +150,28 @@ const LLMFailureView: React.FC<{ failure: WasmLLMFailure }> = ({ failure }) => {
   const [isExpanded, setIsExpanded] = useState(false)
 
   return (
-    <div className="space-y-3 text-xs">
-      <div className="flex items-center space-x-2 text-destructive">
-        <AlertCircle className="w-4 h-4" />
-        <span className="font-semibold">{failure.code}</span>
+    <div className='space-y-3 text-xs'>
+      <div className='flex items-center space-x-2 text-destructive'>
+        <AlertCircle className='w-4 h-4' />
+        <span className='font-semibold'>{failure.code}</span>
       </div>
 
-      <Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)} className="p-0 h-auto font-normal">
+      <Button variant='ghost' size='sm' onClick={() => setIsExpanded(!isExpanded)} className='p-0 h-auto font-normal'>
         {isExpanded ? (
           <>
-            <ChevronUp className="mr-1 w-4 h-4" />
+            <ChevronUp className='mr-1 w-4 h-4' />
             Hide full message
           </>
         ) : (
           <>
-            <ChevronDown className="mr-1 w-4 h-4" />
+            <ChevronDown className='mr-1 w-4 h-4' />
             Show full message
           </>
         )}
       </Button>
 
       {isExpanded && (
-        <div className="p-3 mt-2 font-mono text-xs whitespace-pre-wrap rounded-md bg-muted">{failure.message}</div>
+        <div className='p-3 mt-2 font-mono text-xs whitespace-pre-wrap rounded-md bg-muted'>{failure.message}</div>
       )}
 
       {/* <MetadataBadges llmResponse={failure.} /> */}
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx
index 8be9610a8..628ccf703 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx
@@ -50,7 +50,7 @@ const CopyButton = ({
     const content =
       responseViewType === 'parsed'
         ? JSON.stringify(JSON.parse(response?.parsed_response()?.value ?? ''), null, 2)
-        : response?.llm_response()?.content ?? ''
+        : (response?.llm_response()?.content ?? '')
     navigator.clipboard.writeText(content)
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
@@ -58,25 +58,25 @@ const CopyButton = ({
 
   return (
     <Button
-      variant="ghost"
-      size="icon"
-      className="absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100"
+      variant='ghost'
+      size='icon'
+      className='absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100'
       onClick={handleCopy}
     >
-      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+      {copied ? <Check className='w-4 h-4' /> : <Copy className='w-4 h-4' />}
     </Button>
   )
 }
 
 const ResponseContent = ({ state, responseViewType }: { state: TestState; responseViewType: ResponseViewType }) => {
   return (
-    <div className="">
+    <div className=''>
       {responseViewType === 'parsed' && (
         <>
           <ParsedResponseRenderer response={getTestStateResponse(state)} />
 
           {getExplanation(state) && (
-            <div className="mt-2 text-xs text-muted-foreground/80">{getExplanation(state)}</div>
+            <div className='mt-2 text-xs text-muted-foreground/80'>{getExplanation(state)}</div>
           )}
         </>
       )}
@@ -84,7 +84,7 @@ const ResponseContent = ({ state, responseViewType }: { state: TestState; respon
         <MarkdownRenderer source={getTestStateResponse(state)?.llm_response()?.content || ''} />
       )}
       {responseViewType === 'raw' && (
-        <pre className="font-sans text-xs whitespace-pre-wrap break-words">
+        <pre className='font-sans text-xs whitespace-pre-wrap break-words'>
           {getTestStateResponse(state)?.llm_response()?.content}
         </pre>
       )}
@@ -123,53 +123,53 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
   }, [selectedItem])
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center space-x-4">
-        <div className="flex items-center space-x-2">
+    <div className='space-y-4'>
+      <div className='flex items-center space-x-4'>
+        <div className='flex items-center space-x-2'>
           <input
-            type="checkbox"
-            id="showInputs"
+            type='checkbox'
+            id='showInputs'
             checked={config.showInputs}
             onChange={() => toggleConfig('showInputs')}
-            className="w-4 h-4 rounded opacity-80 text-primary focus:ring-primary"
+            className='w-4 h-4 rounded opacity-80 text-primary focus:ring-primary'
           />
-          <Label htmlFor="showInputs" className="text-muted-foreground/80">
+          <Label htmlFor='showInputs' className='text-muted-foreground/80'>
             Inputs
           </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           <input
-            type="checkbox"
-            id="showModel"
+            type='checkbox'
+            id='showModel'
             checked={config.showModel}
             onChange={() => toggleConfig('showModel')}
-            className="w-4 h-4 rounded opacity-80 text-primary focus:ring-primary"
+            className='w-4 h-4 rounded opacity-80 text-primary focus:ring-primary'
           />
-          <Label htmlFor="showModel" className="text-muted-foreground/80">
+          <Label htmlFor='showModel' className='text-muted-foreground/80'>
             Model
           </Label>
         </div>
       </div>
 
-      <Table className="w-full table-fixed">
+      <Table className='w-full table-fixed'>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[8%] py-1">Test</TableHead>
-            {config.showInputs && <TableHead className="w-[32%] py-1">Inputs</TableHead>}
+            <TableHead className='w-[8%] py-1'>Test</TableHead>
+            {config.showInputs && <TableHead className='w-[32%] py-1'>Inputs</TableHead>}
             <TableHead className={`${config.showModel ? 'w-[35%]' : 'w-[47%]'} py-1`}>
               <Select value={config.responseViewType} onValueChange={handleResponseTypeChange}>
-                <SelectTrigger className="w-full text-left">
-                  <SelectValue placeholder="Response Type" />
+                <SelectTrigger className='w-full text-left'>
+                  <SelectValue placeholder='Response Type' />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="parsed">Parsed Response</SelectItem>
-                  <SelectItem value="pretty">Raw Response (markdown)</SelectItem>
-                  <SelectItem value="raw">Raw Response</SelectItem>
+                  <SelectItem value='parsed'>Parsed Response</SelectItem>
+                  <SelectItem value='pretty'>Raw Response (markdown)</SelectItem>
+                  <SelectItem value='raw'>Raw Response</SelectItem>
                 </SelectContent>
               </Select>
             </TableHead>
-            <TableHead className="w-[10%] px-1 py-1">Status</TableHead>
-            {config.showModel && <TableHead className="w-[10%] py-1">Model</TableHead>}
+            <TableHead className='w-[10%] px-1 py-1'>Status</TableHead>
+            {config.showModel && <TableHead className='w-[10%] py-1'>Model</TableHead>}
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -186,11 +186,11 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
                 )}
                 onClick={() => setSelectedItem(test.functionName, test.testName)}
               >
-                <TableCell className="px-1 py-1">
-                  <div className="flex flex-col items-center space-y-2">
+                <TableCell className='px-1 py-1'>
+                  <div className='flex flex-col items-center space-y-2'>
                     <Button
-                      variant="ghost"
-                      size="icon"
+                      variant='ghost'
+                      size='icon'
                       onClick={(e) => {
                         e.stopPropagation() // Prevent row selection when clicking the button
                         setRunningTests([
@@ -200,19 +200,19 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
                           },
                         ])
                       }}
-                      className="w-6 h-6"
+                      className='w-6 h-6'
                     >
-                      <Play className="w-4 h-4 text-purple-400" />
+                      <Play className='w-4 h-4 text-purple-400' />
                     </Button>
-                    <span className="text-xs truncate whitespace-pre-wrap break-all text-muted-foreground">
+                    <span className='text-xs truncate whitespace-pre-wrap break-all text-muted-foreground'>
                       {test.testName}
                     </span>
                   </div>
                 </TableCell>
                 {config.showInputs && (
-                  <TableCell className="py-1 whitespace-pre-wrap break-words">
+                  <TableCell className='py-1 whitespace-pre-wrap break-words'>
                     <ErrorBoundary fallbackRender={() => <div>Error rendering input</div>}>
-                      <div className="max-h-[400px] overflow-auto text-xs">
+                      <div className='max-h-[400px] overflow-auto text-xs'>
                         {test.input?.reduce((acc: Record<string, any>, input: { name?: string; value: any }) => {
                           let value = input.value
                           if (typeof value === 'string') {
@@ -249,7 +249,7 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
                     </ErrorBoundary>
                   </TableCell>
                 )}
-                <TableCell className="px-1 py-1">
+                <TableCell className='px-1 py-1'>
                   {/* <ScrollArea
                     className="relative max-h-[500px] flex-1"
                     type="always"
@@ -257,16 +257,16 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
                   <ResponseContent state={test.response} responseViewType={config.responseViewType} />
                   {/* </ScrollArea> */}
                 </TableCell>
-                <TableCell className="px-1 py-1">
+                <TableCell className='px-1 py-1'>
                   <TestStatus status={test.response.status} finalState={getStatus(test.response)} />
                   {test.response.status === 'error' && (
-                    <div className="mt-1 text-xs text-red-500">{test.response.message}</div>
+                    <div className='mt-1 text-xs text-red-500'>{test.response.message}</div>
                   )}
                 </TableCell>
                 {config.showModel && (
-                  <TableCell className="px-1 py-1 whitespace-normal">
+                  <TableCell className='px-1 py-1 whitespace-normal'>
                     {test.response.status === 'done' && test.response.response && (
-                      <span className="text-xs text-muted-foreground">
+                      <span className='text-xs text-muted-foreground'>
                         {test.response.response.llm_response()?.model}
                       </span>
                     )}
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestMenu.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestMenu.tsx
index 343c3c79c..895d0dbf1 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestMenu.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestMenu.tsx
@@ -78,18 +78,18 @@ export const TestMenu = () => {
   const currentRun = testHistory[selectedHistoryIndex]
   if (!currentRun)
     return (
-      <div className="flex justify-between items-center pr-2 mb-3">
+      <div className='flex justify-between items-center pr-2 mb-3'>
         <ViewSelector />
       </div>
     )
 
   return (
-    <div className="flex justify-between items-center pt-1 pr-2 mb-3">
-      <div className="flex items-center space-x-4">
-        <div className="flex overflow-x-auto">
-          <div className="flex gap-1 items-center">
-            <div className="flex gap-1 items-center pr-3">
-              <History className="w-4 h-4 opacity-50" />
+    <div className='flex justify-between items-center pt-1 pr-2 mb-3'>
+      <div className='flex items-center space-x-4'>
+        <div className='flex overflow-x-auto'>
+          <div className='flex gap-1 items-center'>
+            <div className='flex gap-1 items-center pr-3'>
+              <History className='w-4 h-4 opacity-50' />
             </div>
             {testHistory.slice(-7).map((run, index) => (
               <button
@@ -106,14 +106,14 @@ export const TestMenu = () => {
           </div>
         </div>
       </div>
-      <div className="flex gap-2 items-center">
+      <div className='flex gap-2 items-center'>
         <TooltipProvider>
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
-                size="icon"
-                className="w-6 h-6"
+                variant='ghost'
+                size='icon'
+                className='w-6 h-6'
                 onClick={() => {
                   const allTests = currentRun.tests.map((test) => ({
                     functionName: test.functionName,
@@ -122,7 +122,7 @@ export const TestMenu = () => {
                   setRunningTests(allTests)
                 }}
               >
-                <Play className="w-4 h-4" fill="#a855f7" stroke="#a855f7" />
+                <Play className='w-4 h-4' fill='#a855f7' stroke='#a855f7' />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
@@ -135,9 +135,9 @@ export const TestMenu = () => {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
-                size="icon"
-                className="w-6 h-6"
+                variant='ghost'
+                size='icon'
+                className='w-6 h-6'
                 onClick={() => {
                   const failedTests = currentRun.tests
                     .filter((test) => {
@@ -156,7 +156,7 @@ export const TestMenu = () => {
                   }
                 }}
               >
-                <RefreshCw className="w-4 h-4" />
+                <RefreshCw className='w-4 h-4' />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestStatus.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestStatus.tsx
index 74de70c57..415dc9532 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestStatus.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TestStatus.tsx
@@ -16,8 +16,8 @@ export const TestStatus = ({ status, finalState }: TestStatusProps) => {
       return finalState === 'passed'
         ? 'text-green-500'
         : finalState === 'constraints_failed'
-        ? 'text-yellow-600'
-        : 'text-red-500'
+          ? 'text-yellow-600'
+          : 'text-red-500'
     }
     if (status === 'error') return 'text-red-500'
     return 'text-gray-500'
@@ -47,10 +47,10 @@ export const TestStatus = ({ status, finalState }: TestStatusProps) => {
   const getStatusIcon = () => {
     if (status === 'running') return <Loader />
     if (status === 'done') {
-      if (finalState === 'passed') return <CheckCircle className="w-4 h-4" />
-      if (finalState) return <XCircle className="w-4 h-4" />
+      if (finalState === 'passed') return <CheckCircle className='w-4 h-4' />
+      if (finalState) return <XCircle className='w-4 h-4' />
     }
-    if (status === 'error') return <AlertCircle className="w-4 h-4" />
+    if (status === 'error') return <AlertCircle className='w-4 h-4' />
     return null
   }
 
@@ -59,7 +59,7 @@ export const TestStatus = ({ status, finalState }: TestStatusProps) => {
   return (
     <div className={`flex items-center gap-1.5 ${color}`}>
       {getStatusIcon()}
-      <span className="text-xs md:whitespace-nowrap">{getStatusText()}</span>
+      <span className='text-xs md:whitespace-nowrap'>{getStatusText()}</span>
     </div>
   )
 }
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ViewSelector.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ViewSelector.tsx
index e47f405ce..cfefeabda 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ViewSelector.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ViewSelector.tsx
@@ -8,8 +8,8 @@ export const ViewSelector = () => {
 
   return (
     <Select value={viewType} onValueChange={(value) => setViewType(value as TestPanelViewType)}>
-      <SelectTrigger className="h-8 w-[120px]">
-        <SelectValue placeholder="Select view" />
+      <SelectTrigger className='h-8 w-[120px]'>
+        <SelectValue placeholder='Select view' />
       </SelectTrigger>
       <SelectContent>
         <SelectItem value={TestPanelViewType.TABULAR}>Table View</SelectItem>
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/index.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/index.tsx
index c7f922218..7da02bdab 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/index.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/index.tsx
@@ -23,7 +23,7 @@ const TestPanel = () => {
 
   // TODO: still render the client graph view even if no tests are running.
   if (testHistory.length === 0) {
-    return <div className="p-4 text-muted-foreground">No tests running</div>
+    return <div className='p-4 text-muted-foreground'>No tests running</div>
   }
 
   const currentRun = testHistory[selectedHistoryIndex]
@@ -45,7 +45,7 @@ const TestPanel = () => {
 
   return (
     <>
-      <div className="px-1 pt-2">
+      <div className='px-1 pt-2'>
         <ErrorBoundary
           fallback={<div>Error rendering</div>}
           onReset={() => {
@@ -58,9 +58,9 @@ const TestPanel = () => {
         </ErrorBoundary>
       </div>
 
-      <ScrollArea className="relative flex-1 p-0" type="always">
+      <ScrollArea className='relative flex-1 p-0' type='always'>
         {currentRun && (
-          <div className="mb-1 text-xs text-muted-foreground/50">{new Date(currentRun.timestamp).toLocaleString()}</div>
+          <div className='mb-1 text-xs text-muted-foreground/50'>{new Date(currentRun.timestamp).toLocaleString()}</div>
         )}
         <ErrorBoundary
           fallback={<div>Error rendering view</div>}
diff --git a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/index.tsx b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/index.tsx
index 35ea8bf7e..f7d8a7f98 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/index.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/index.tsx
@@ -78,18 +78,18 @@ export default function CustomSidebar() {
   }
 
   return (
-    <div className="flex relative">
+    <div className='flex relative'>
       <Button
         onClick={() => setIsOpen(!isOpen)}
-        variant="ghost"
-        size="sm"
+        variant='ghost'
+        size='sm'
         className={cn(
           'absolute -left-6 top-1/2 z-10 p-0 w-8 h-12 -translate-y-1/2 hover:bg-muted',
           isOpen ? 'rounded-l' : 'rounded',
         )}
       >
         <ChevronLeft className={cn('w-6 h-6 transition-transform duration-200', isOpen ? 'rotate-180' : '')} />
-        <span className="sr-only">Toggle sidebar</span>
+        <span className='sr-only'>Toggle sidebar</span>
       </Button>
       <div
         className={cn(
@@ -97,35 +97,35 @@ export default function CustomSidebar() {
           isOpen ? 'opacity-100 w-[170px] min-w-[170px]' : 'w-8 opacity-100 min-w-8',
         )}
       >
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={75} className="">
-            <ScrollArea className="flex w-full h-full" type="always">
-              <div className="flex flex-col w-full h-fit">
-                <div className="flex h-[60px] items-center px-4 text-xs">
-                  <div className="relative w-full">
-                    <div className="absolute inset-0 -m-0.5 rounded-md transition-all" />
-                    <div className="flex relative items-center">
-                      <Search className="absolute left-2 top-1/2 w-3 h-3 text-gray-400 -translate-y-1/2" />
+        <ResizablePanelGroup direction='vertical'>
+          <ResizablePanel defaultSize={75} className=''>
+            <ScrollArea className='flex w-full h-full' type='always'>
+              <div className='flex flex-col w-full h-fit'>
+                <div className='flex h-[60px] items-center px-4 text-xs'>
+                  <div className='relative w-full'>
+                    <div className='absolute inset-0 -m-0.5 rounded-md transition-all' />
+                    <div className='flex relative items-center'>
+                      <Search className='absolute left-2 top-1/2 w-3 h-3 text-gray-400 -translate-y-1/2' />
                       <Input
-                        placeholder="Filter Tests"
+                        placeholder='Filter Tests'
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="flex px-8 py-2 w-full h-9 text-xs rounded-md border border-input bg-background focus:outline-none focus:ring-2 focus:ring-ring max-w-[140px]"
+                        className='flex px-8 py-2 w-full h-9 text-xs rounded-md border border-input bg-background focus:outline-none focus:ring-2 focus:ring-ring max-w-[140px]'
                       />
                     </div>
                   </div>
                 </div>
-                <div className="overflow-auto flex-1">
-                  <div className="px-2">
+                <div className='overflow-auto flex-1'>
+                  <div className='px-2'>
                     {searchTerm && filteredFunctions.length > 0 && (
                       <Button
-                        variant="ghost"
-                        size="sm"
+                        variant='ghost'
+                        size='sm'
                         onClick={handleRunFilteredTests}
-                        className="flex justify-between items-center mb-2 w-full"
+                        className='flex justify-between items-center mb-2 w-full'
                       >
                         <span>Run tests below</span>
-                        <Play className="ml-2 w-3 h-3" />
+                        <Play className='ml-2 w-3 h-3' />
                       </Button>
                     )}
                     <TreeView functions={filteredFunctions} searchTerm={searchTerm} />
@@ -191,7 +191,7 @@ function FunctionItem({ label, tests, isLast = false, isSelected = false, search
       <span>
         {parts.map((part, i) =>
           part.toLowerCase() === searchTerm.toLowerCase() ? (
-            <span key={i} className="bg-yellow-200 dark:bg-yellow-900">
+            <span key={i} className='bg-yellow-200 dark:bg-yellow-900'>
               {part}
             </span>
           ) : (
@@ -208,7 +208,7 @@ function FunctionItem({ label, tests, isLast = false, isSelected = false, search
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
-      className=""
+      className=''
     >
       <div
         className={cn(
@@ -217,21 +217,21 @@ function FunctionItem({ label, tests, isLast = false, isSelected = false, search
         )}
         onClick={handleClick}
       >
-        <div className="flex items-center min-w-0">
+        <div className='flex items-center min-w-0'>
           <motion.div
             initial={false}
             animate={{ rotate: isOpen ? 90 : 0 }}
             transition={{ duration: 0.2 }}
-            className="mr-1"
+            className='mr-1'
           >
-            <ChevronRight className="w-3 h-3" />
+            <ChevronRight className='w-3 h-3' />
           </motion.div>
-          <span className="ml-1 font-mono text-[11px] py-1 group-hover:max-w-[112px] w-[120px] truncate">
+          <span className='ml-1 font-mono text-[11px] py-1 group-hover:max-w-[112px] w-[120px] truncate'>
             {highlightText(label)}
           </span>
         </div>
-        <Button variant="ghost" size="icon" className="hidden p-0 w-6 h-6 group-hover:flex" onClick={handleRunAll}>
-          <Play className="w-3 h-3" />
+        <Button variant='ghost' size='icon' className='hidden p-0 w-6 h-6 group-hover:flex' onClick={handleRunAll}>
+          <Play className='w-3 h-3' />
         </Button>
       </div>
       <AnimatePresence initial={false}>
@@ -241,7 +241,7 @@ function FunctionItem({ label, tests, isLast = false, isSelected = false, search
             animate={{ opacity: 1, height: 'auto' }}
             exit={{ opacity: 0, height: 0 }}
             transition={{ duration: 0.2 }}
-            className="overflow-hidden ml-4"
+            className='overflow-hidden ml-4'
           >
             {tests.map((test, index) => (
               <TestItem
@@ -277,19 +277,19 @@ function TestItem({ label, isLast = false, isSelected = false, searchTerm = '',
 
   // TODO: coalesce with the other status in TestStatus.tsx
   const getStatusIcon = () => {
-    if (!testResult) return <FlaskConical className="w-3 h-3" />
+    if (!testResult) return <FlaskConical className='w-3 h-3' />
 
     const status = testResult.response.status
     const finalState = getStatus(testResult.response)
 
-    if (status === 'running') return <Loader className="w-3 h-3" />
-    if (status === 'error') return <XCircle className="w-3 h-3 text-red-500" />
+    if (status === 'running') return <Loader className='w-3 h-3' />
+    if (status === 'error') return <XCircle className='w-3 h-3 text-red-500' />
     if (status === 'done') {
-      if (finalState === 'passed') return <CheckCircle2 className="w-3 h-3 text-green-500" />
-      if (finalState === 'constraints_failed') return <AlertTriangle className="w-3 h-3 text-yellow-500" />
-      return <XCircle className="w-3 h-3 text-red-500" />
+      if (finalState === 'passed') return <CheckCircle2 className='w-3 h-3 text-green-500' />
+      if (finalState === 'constraints_failed') return <AlertTriangle className='w-3 h-3 text-yellow-500' />
+      return <XCircle className='w-3 h-3 text-red-500' />
     }
-    return <FlaskConical className="w-3 h-3" />
+    return <FlaskConical className='w-3 h-3' />
   }
 
   const setSelectedItem = useSetAtom(selectedItemAtom)
@@ -312,7 +312,7 @@ function TestItem({ label, isLast = false, isSelected = false, searchTerm = '',
       <span>
         {parts.map((part, i) =>
           part.toLowerCase() === searchTerm.toLowerCase() ? (
-            <span key={i} className="bg-yellow-200 dark:bg-yellow-900">
+            <span key={i} className='bg-yellow-200 dark:bg-yellow-900'>
               {part}
             </span>
           ) : (
@@ -329,7 +329,7 @@ function TestItem({ label, isLast = false, isSelected = false, searchTerm = '',
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
-      className="ml-2"
+      className='ml-2'
     >
       <div
         className={cn(
@@ -339,19 +339,19 @@ function TestItem({ label, isLast = false, isSelected = false, searchTerm = '',
         )}
         onClick={handleClick}
       >
-        <div className="flex items-center min-w-0">
+        <div className='flex items-center min-w-0'>
           {getStatusIcon()}
-          <span className="ml-1 font-mono text-[11px] group-hover:truncate min-w-[90px] group-hover:max-w-[90px] max-w-[95px]">
+          <span className='ml-1 font-mono text-[11px] group-hover:truncate min-w-[90px] group-hover:max-w-[90px] max-w-[95px]'>
             {highlightText(label)}
           </span>
         </div>
         <Button
-          variant="ghost"
-          size="sm"
-          className="p-0 w-6 h-6 opacity-0 transition-opacity group-hover:opacity-100"
+          variant='ghost'
+          size='sm'
+          className='p-0 w-6 h-6 opacity-0 transition-opacity group-hover:opacity-100'
           onClick={handleRunTest}
         >
-          <Play className="w-3 h-3" />
+          <Play className='w-3 h-3' />
         </Button>
       </div>
     </motion.div>
@@ -367,7 +367,7 @@ function TreeView({ functions, searchTerm }: TreeViewProps) {
   const selectedItem = useAtomValue(selectedItemAtom)
 
   return (
-    <div className="space-y-2 bg-background">
+    <div className='space-y-2 bg-background'>
       {functions.map((func, index) => (
         <FunctionItem
           key={func.name}
diff --git a/typescript/playground-common/src/shared/baml-project-panel/theme/ThemeToggle.tsx b/typescript/playground-common/src/shared/baml-project-panel/theme/ThemeToggle.tsx
index 55059dcba..92d392d15 100644
--- a/typescript/playground-common/src/shared/baml-project-panel/theme/ThemeToggle.tsx
+++ b/typescript/playground-common/src/shared/baml-project-panel/theme/ThemeToggle.tsx
@@ -10,14 +10,14 @@ export function ThemeToggle() {
 
   return (
     <Button
-      variant="outline"
-      size="icon"
-      className="relative p-0 px-2 py-2 w-6 h-6"
+      variant='outline'
+      size='icon'
+      className='relative p-0 px-2 py-2 w-6 h-6'
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
-      <Sun className="absolute w-3 h-3 opacity-100 transition-all duration-300 scale-100 rotate-0 dark:scale-0 dark:opacity-0" />
-      <Moon className="absolute w-3 h-3 opacity-0 transition-all duration-300 scale-0 rotate-90 dark:rotate-0 dark:scale-100 dark:opacity-100" />
-      <span className="sr-only">Toggle theme</span>
+      <Sun className='absolute w-3 h-3 opacity-100 transition-all duration-300 scale-100 rotate-0 dark:scale-0 dark:opacity-0' />
+      <Moon className='absolute w-3 h-3 opacity-0 transition-all duration-300 scale-0 rotate-90 dark:rotate-0 dark:scale-100 dark:opacity-100' />
+      <span className='sr-only'>Toggle theme</span>
     </Button>
   )
 }
diff --git a/typescript/vscode-ext/packages/vscode/src/extension.ts b/typescript/vscode-ext/packages/vscode/src/extension.ts
index 97c9ea1cc..9249a7afe 100644
--- a/typescript/vscode-ext/packages/vscode/src/extension.ts
+++ b/typescript/vscode-ext/packages/vscode/src/extension.ts
@@ -193,7 +193,6 @@ export function activate(context: vscode.ExtensionContext) {
 
   app.use(
     createProxyMiddleware({
-      
       changeOrigin: true,
       pathRewrite: (path, req) => {
         console.log('reqmethod', req.method)
@@ -257,8 +256,8 @@ export function activate(context: vscode.ExtensionContext) {
         },
         error: (error, req, res) => {
           console.error('proxy error:', error)
-          
-          res.end(JSON.stringify({ error: error }));
+
+          res.end(JSON.stringify({ error: error }))
         },
       },
     }),
@@ -343,7 +342,7 @@ export function activate(context: vscode.ExtensionContext) {
 
     const editor = vscode.window.activeTextEditor
     // makes it so we reload the project. Could probably be called reloadProjectFiles or something. This is because we may be clicking into a different file in a separate baml_src.
-    requestDiagnostics();
+    requestDiagnostics()
     if (editor) {
       const name = editor.document.fileName
       const text = editor.document.getText()
diff --git a/typescript/vscode-ext/packages/vscode/src/helpers/get-open-file.ts b/typescript/vscode-ext/packages/vscode/src/helpers/get-open-file.ts
index 52be546fe..db4e7a6e9 100644
--- a/typescript/vscode-ext/packages/vscode/src/helpers/get-open-file.ts
+++ b/typescript/vscode-ext/packages/vscode/src/helpers/get-open-file.ts
@@ -1,4 +1,4 @@
-import { URI } from "vscode-uri"
+import { URI } from 'vscode-uri'
 import * as vscode from 'vscode'
 
 export const getCurrentOpenedFile = () => {
@@ -9,4 +9,4 @@ export const getCurrentOpenedFile = () => {
     return doc.uri.toString()
   }
   return undefined
-}
\ No newline at end of file
+}
diff --git a/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts b/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts
index 48f13fcaa..1be66176b 100644
--- a/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts
+++ b/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts
@@ -178,8 +178,6 @@ export class WebPanelView {
     `
   }
 
-  
-
   /**
    * Sets up an event listener to listen for messages passed from the webview context and
    * executes code based on the message that is recieved.
diff --git a/typescript/vscode-ext/packages/vscode/src/plugins/language-server/index.ts b/typescript/vscode-ext/packages/vscode/src/plugins/language-server/index.ts
index 490347cd5..83eb3d75b 100644
--- a/typescript/vscode-ext/packages/vscode/src/plugins/language-server/index.ts
+++ b/typescript/vscode-ext/packages/vscode/src/plugins/language-server/index.ts
@@ -246,7 +246,7 @@ const activateClient = (
 
     client.onRequest('runtime_updated', (params: { root_path: string; files: Record<string, string> }) => {
       // Only send message if current file is part of this root path
-      const activeEditor = vscode.window.activeTextEditor;
+      const activeEditor = vscode.window.activeTextEditor
       if (activeEditor) {
         const currentFilePath = URI.parse(activeEditor.document.uri.toString()).fsPath
         const rootPathUri = URI.file(params.root_path).fsPath
@@ -254,12 +254,12 @@ const activateClient = (
           WebPanelView.currentPanel?.postMessage('add_project', {
             ...params,
             root_path: URI.file(params.root_path).toString(),
-          });
+          })
         } else {
-          console.log("root path doesnt match current file", currentFilePath, rootPathUri)
+          console.log('root path doesnt match current file', currentFilePath, rootPathUri)
         }
       } else {
-        console.log("no active editor")
+        console.log('no active editor')
       }
     })