feat: show error on broken recipe url's (#2197)

ui/desktop/src/App.tsx

@@ -300,6 +300,12 @@ export default function App() {
         // Initialize config first
         await initConfig();
 
+        // note: if in a non recipe session, recipeConfig is undefined, otherwise null if error
+        if (recipeConfig === null) {
+          setFatalError('Cannot read recipe config. Please check the deeplink and try again.');
+          return;
+        }
+
         // Handle bot config extensions first
         if (recipeConfig?.extensions?.length > 0 && viewType != 'recipeEditor') {
           console.log('Found extensions in bot config:', recipeConfig.extensions);

ui/desktop/src/components/ErrorBoundary.tsx

@@ -22,16 +22,18 @@ export function ErrorUI({ error }) {
           <AlertTriangle className="w-8 h-8 text-destructive" />
         </div>
 
-        <h1 className="text-2xl font-semibold text-foreground">Honk!</h1>
+        <h1 className="text-2xl font-semibold text-foreground dark:text-white">Honk!</h1>
 
-        <p className="text-base text-textSubtle mb-2">An error occurred.</p>
+        <p className="text-base text-textSubtle dark:text-muted-foreground mb-2">
+          An error occurred.
+        </p>
 
         <pre className="text-destructive text-sm dark:text-white p-4 bg-muted rounded-lg w-full overflow-auto border border-border">
           {error.message}
         </pre>
 
         <Button
-          className="flex items-center gap-2 flex-1 justify-center text-white dark:text-textSubtle bg-black dark:bg-white hover:bg-subtle"
+          className="flex items-center gap-2 flex-1 justify-center text-white dark:text-background bg-black dark:bg-foreground hover:bg-subtle dark:hover:bg-muted"
           onClick={() => window.electron.reloadApp()}
         >
           Reload