Add new errors. Working integration with dashboard.

app/gui2/src/components/GraphEditor.vue

@@ -29,9 +29,10 @@ import { colorFromString } from '@/util/colors'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import * as set from 'lib0/set'
+import { toast } from 'react-toastify'
 import type { ExprId, NodeMetadata } from 'shared/yjsModel'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { toast } from 'vue3-toastify'
+import { ProjectManagerEvents } from '../../../ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager'
 import { type Usage } from './ComponentBrowser/input'
 
 const EXECUTION_MODES = ['design', 'live']
@@ -51,24 +52,53 @@ const componentBrowserUsage = ref<Usage>({ type: 'newNode' })
 const suggestionDb = useSuggestionDbStore()
 const interaction = provideInteractionHandler()
 
+/// === UI Messages and Errors ===
 function initStartupToast() {
   const startupToast = toast.info('Initializing the project. This can take up to one minute.', {
     autoClose: false,
   })
   projectStore.firstExecution.then(() => {
-    if (startupToast != null) {
-      toast.remove(startupToast)
-    }
+    toast.dismiss(startupToast)
   })
   onUnmounted(() => {
-    if (startupToast != null) {
-      toast.remove(startupToast)
-    }
+    toast.dismiss(startupToast)
+  })
+}
+
+function initiConnectionLostToast() {
+  let connectionLostToast = 'connectionLostToast'
+  document.addEventListener(
+    ProjectManagerEvents.loadingFailed,
+    () => {
+      toast.error('Lost connection to Language Server.', {
+        autoClose: false,
+        toastId: connectionLostToast,
+      })
+    },
+    { once: true },
+  )
+  onUnmounted(() => {
+    toast.dismiss(connectionLostToast)
   })
 }
 
+projectStore.lsRpcConnection.catch((err) => {
+  toast.error(`Connection to language server failed: ${err}`)
+})
+
+projectStore.lsRpcConnection.then((ls) => {
+  ls.client.onError((err) => {
+    toast.error(`Language server error: ${err}`)
+  })
+})
+
+projectStore.executionContext.on('executionFailed', (err) => {
+  toast.error(`Execution Failed: ${err}`, {})
+})
+
 onMounted(() => {
   initStartupToast()
+  initiConnectionLostToast()
 })
 
 const nodeSelection = provideGraphSelection(graphNavigator, graphStore.nodeRects, {

app/gui2/stories/GraphEditor.story.vue

@@ -48,7 +48,7 @@ main =
     autoPropsDisabled
   >
     <MockProjectStoreWrapper v-model="text">
-      <Suspense><GraphEditor /></Suspense>
+      <Suspense> <GraphEditor /></Suspense>
     </MockProjectStoreWrapper>
 
     <template #controls><HstCode v-model="text" title="code" /></template>

app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx

@@ -143,6 +143,7 @@ export default function App(props: AppProps) {
                 draggable={false}
                 toastClassName="text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl"
                 transition={toastify.Zoom}
+                limit={3}
             />
             <Router basename={getMainPageUrl().pathname}>
                 <AppRouter {...props} />