Persist tests and functions across code errors (#1644)

With this change, if a user changes their baml_src in a way that
prevents a runtime from being generated, we use the previous good
runtime state to populate the list of functions/tests in the test panel,
rather than just deleting the list.

The list with the previous names is greyed out and has mouse
interactions blocked, to indicate that it is not actively usable.
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Retain and display last valid runtime state in greyed-out form when
new runtime cannot be generated, updating `runtimeAtom` and UI
components accordingly.
> 
>   - **Behavior**:
> - Retain last valid runtime state in `runtimeAtom` when new runtime
cannot be generated.
> - Display previous functions/tests in greyed-out state in the test
panel.
>   - **Atoms**:
>     - Update `runtimeAtom` in `atoms.ts` to include `lastValidRt`.
> - Modify `runtimeStateAtom` in `playground-panel/atoms.ts` to use
`lastValidRt` when `rt` is undefined.
>   - **UI**:
> - Add `functionsAreStaleAtom` in `side-bar/index.tsx` to determine if
functions are stale.
> - Apply `pointer-events-none opacity-50` to sidebar when functions are
stale.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 889d9df. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

Author: imalsogreg

typescript/playground-common/src/shared/baml-project-panel/atoms.ts

@@ -7,6 +7,7 @@ import { vscodeLocalStorageStore } from './Jotai'
 import { orchIndexAtom } from './playground-panel/atoms-orch-graph'
 import { vscode } from './vscode'
 import { bamlConfig } from '../../baml_wasm_web/bamlConfig'
+import { WasmDiagnosticError, WasmRuntime } from '@gloo-ai/baml-schema-wasm-web/baml_schema_build'
 
 const wasmAtomAsync = atom(async () => {
   const wasm = await import('@gloo-ai/baml-schema-wasm-web/baml_schema_build')
@@ -77,25 +78,39 @@ export const ctxAtom = atom((get) => {
   return context
 })
 
-export const runtimeAtom = atom((get) => {
+export const runtimeAtom = atom<{
+  rt: WasmRuntime | undefined
+  diags: WasmDiagnosticError | undefined
+  lastValidRt: WasmRuntime | undefined
+}>((get) => {
   try {
     const wasm = get(wasmAtom)
     const project = get(projectAtom)
     const envVars = get(envVarsAtom)
     if (wasm === undefined || project === undefined) {
-      return { rt: undefined, diags: undefined }
+      let previousState: {
+        rt: WasmRuntime | undefined
+        diags: WasmDiagnosticError | undefined
+        lastValidRt: WasmRuntime | undefined
+      } = get(runtimeAtom)
+      return { rt: undefined, diags: undefined, lastValidRt: previousState.lastValidRt }
     }
     const selectedEnvVars = Object.fromEntries(Object.entries(envVars).filter(([key, value]) => value !== undefined))
     const rt = project.runtime(selectedEnvVars)
     const diags = project.diagnostics(rt)
-    return { rt, diags }
+    return { rt, diags, lastValidRt: rt }
   } catch (e) {
     console.log('Error occurred while getting runtime', e)
     const wasm = get(wasmAtom)
     if (wasm) {
       const WasmDiagnosticError = wasm.WasmDiagnosticError
       if (e instanceof WasmDiagnosticError) {
-        return { rt: undefined, diags: e }
+        let previousState: {
+          rt: WasmRuntime | undefined
+          diags: WasmDiagnosticError | undefined
+          lastValidRt: WasmRuntime | undefined
+        } = get(runtimeAtom)
+        return { rt: undefined, diags: e, lastValidRt: previousState.lastValidRt }
       }
     }
     if (e instanceof Error) {
@@ -104,7 +119,7 @@ export const runtimeAtom = atom((get) => {
       console.error(e)
     }
   }
-  return { rt: undefined, diags: undefined }
+  return { rt: undefined, diags: undefined, lastValidRt: undefined }
 })
 
 export const diagnosticsAtom = atom((get) => {

typescript/playground-common/src/shared/baml-project-panel/playground-panel/atoms.ts

@@ -1,15 +1,18 @@
-import { atom } from 'jotai'
+import { Atom, atom } from 'jotai'
 import { requiredEnvVarsAtom, envVarsAtom, runtimeAtom } from '../atoms'
 
-export const runtimeStateAtom = atom((get) => {
-  const { rt } = get(runtimeAtom)
+export const runtimeStateAtom: Atom<{ functions: WasmFunction[]; stale: boolean }> = atom((get) => {
+  const { rt, lastValidRt } = get(runtimeAtom)
   console.log('rt', rt)
   if (rt === undefined) {
-    return { functions: [] }
+    if (lastValidRt === undefined) {
+      return { functions: [], stale: false }
+    } else {
+      return { functions: lastValidRt.list_functions(), stale: true }
+    }
   }
   const functions = rt.list_functions()
-
-  return { functions }
+  return { functions, stale: false }
 })
 
 export const selectedFunctionAtom = atom<string | undefined>(undefined)
@@ -169,7 +172,7 @@ export const areEnvVarsMissingAtom = atom((get) => {
 })
 
 // Related to test status
-import { type WasmFunctionResponse, type WasmTestResponse } from '@gloo-ai/baml-schema-wasm-web'
+import { WasmFunction, type WasmFunctionResponse, type WasmTestResponse } from '@gloo-ai/baml-schema-wasm-web'
 import { atomFamily, atomWithStorage } from 'jotai/utils'
 import { vscodeLocalStorageStore } from '../Jotai'
 import { vscode } from '../vscode'

typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/index.tsx

@@ -49,15 +49,22 @@ const functionsAtom = atom((get) => {
   }))
 })
 
+const functionsAreStaleAtom = atom((get) => {
+  const runtimeState = get(runtimeStateAtom)
+  return runtimeState.stale
+})
+
 const isEmbed = typeof window !== 'undefined' && window.location.href.includes('embed')
 
 export const isSidebarOpenAtom = atomWithStorage('isSidebarOpen', isEmbed ? false : vscode.isVscode() ? true : false)
 
 export default function CustomSidebar({ isEmbed = false }: { isEmbed?: boolean }) {
   const functions = useAtomValue(functionsAtom)
+  const rtState = useAtomValue(runtimeStateAtom)
   const [searchTerm, setSearchTerm] = React.useState('')
   const [isOpen, setIsOpen] = useAtom(isSidebarOpenAtom)
   const { setRunningTests } = useRunTests()
+  const functionsAreStale = useAtomValue(functionsAreStaleAtom)
 
   const filteredFunctions = functions.filter(
     (func) =>
@@ -79,8 +86,11 @@ export default function CustomSidebar({ isEmbed = false }: { isEmbed?: boolean }
     return <></>
   }
 
+  // Define a mask that will obscure the sidebare if functions are stale.
+  const maybe_mask = functionsAreStale ? 'pointer-events-none opacity-50' : ''
+
   return (
-    <div className='flex relative'>
+    <div className={cn('flex relative', maybe_mask)}>
       <Button
         onClick={() => setIsOpen(!isOpen)}
         variant='ghost'