daydreamlive · gioelecerati · Mar 27, 2026 · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026
diff --git a/app/index.html b/app/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; connect-src 'self' http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; font-src 'self' data: https://fonts.gstatic.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./src/index.css" />
     <title>Daydream Scope</title>
   </head>

diff --git a/app/src/components/ErrorBoundary.tsx b/app/src/components/ErrorBoundary.tsx
@@ -69,7 +69,7 @@ export class ErrorBoundary extends Component<Props, State> {
           height: '100vh',
           background: 'hsl(0, 0%, 6%)',
           color: 'hsl(0, 0%, 90%)',
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
           padding: '20px',
           textAlign: 'center',
         }}>

diff --git a/app/src/components/ServerLoading.tsx b/app/src/components/ServerLoading.tsx
@@ -1,32 +1,20 @@
 import React, { useEffect, useState } from 'react';
+import FogOfWarBackground from '@shared/onboarding/FogOfWarBackground';
 
 interface ServerLoadingProps {
   onComplete: () => void;
   onError: (error: string) => void;
 }
 
-declare global {
-  interface Window {
-    scope: {
-      onServerStatus: (callback: (isRunning: boolean) => void) => void;
-      onServerError: (callback: (error: string) => void) => void;
-      getServerStatus: () => Promise<{ isRunning: boolean }>;
-    };
-  }
-}
-
 const ServerLoading: React.FC<ServerLoadingProps> = ({ onComplete, onError }) => {
-  const [serverRunning, setServerRunning] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const scope = window.scope;
 
-    // Query the current server status on mount
     if (scope?.getServerStatus) {
       scope.getServerStatus().then((result: { isRunning: boolean }) => {
         if (result.isRunning) {
-          setServerRunning(true);
           onComplete();
         }
       });
@@ -35,7 +23,6 @@ const ServerLoading: React.FC<ServerLoadingProps> = ({ onComplete, onError }) =>
     if (scope?.onServerStatus) {
       scope.onServerStatus((isRunning: boolean) => {
         if (isRunning) {
-          setServerRunning(true);
           onComplete();
         }
       });
@@ -59,13 +46,18 @@ const ServerLoading: React.FC<ServerLoadingProps> = ({ onComplete, onError }) =>
         flexDirection: 'column',
         background: 'hsl(0, 0%, 6%)',
         color: 'hsl(0, 0%, 90%)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         overflow: 'hidden',
+        position: 'relative',
       }}>
+        <FogOfWarBackground />
+        <div style={{ position: 'absolute', inset: 0, zIndex: 1, backdropFilter: 'blur(48px)', pointerEvents: 'none' }} />
         <div style={{
           textAlign: 'center',
           maxWidth: 600,
           padding: '0 24px',
+          position: 'relative',
+          zIndex: 10,
         }}>
           <h1 style={{
             marginBottom: 48,
@@ -112,13 +104,18 @@ const ServerLoading: React.FC<ServerLoadingProps> = ({ onComplete, onError }) =>
       flexDirection: 'column',
       background: 'hsl(0, 0%, 6%)',
       color: 'hsl(0, 0%, 90%)',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       overflow: 'hidden',
+      position: 'relative',
     }}>
+      <FogOfWarBackground />
+      <div style={{ position: 'absolute', inset: 0, zIndex: 1, backdropFilter: 'blur(48px)', pointerEvents: 'none' }} />
       <div style={{
         textAlign: 'center',
         maxWidth: 600,
         padding: '0 24px',
+        position: 'relative',
+        zIndex: 10,
       }}>
         <h1 style={{
           marginBottom: 48,

diff --git a/app/src/components/Setup.tsx b/app/src/components/Setup.tsx
@@ -95,7 +95,7 @@ const Setup: React.FC<SetupProps> = ({ onComplete }) => {
       flexDirection: 'column',
       background: 'hsl(0, 0%, 6%)',
       color: 'hsl(0, 0%, 90%)',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       overflow: 'hidden',
     }}>
       <div style={{

diff --git a/app/src/index.css b/app/src/index.css
@@ -26,7 +26,7 @@ html, body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0;

diff --git a/app/src/renderer.tsx b/app/src/renderer.tsx
@@ -153,7 +153,7 @@ const App = () => {
         height: '100vh',
         background: 'hsl(0, 0%, 6%)',
         color: 'hsl(0, 0%, 90%)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         overflow: 'hidden',
       }}>
         <div style={{
@@ -183,7 +183,7 @@ const App = () => {
         height: '100vh',
         background: 'hsl(0, 0%, 6%)',
         color: 'hsl(0, 0%, 90%)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         overflow: 'hidden',
       }}>
         <div style={{
@@ -221,7 +221,7 @@ const App = () => {
       height: '100vh',
       background: 'hsl(0, 0%, 6%)',
       color: 'hsl(0, 0%, 90%)',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontFamily: 'Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       overflow: 'hidden',
     }}>
       <div style={{

diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -17,7 +17,12 @@
     "noFallthroughCasesInSwitch": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@shared/*": ["../frontend/src/components/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

diff --git a/app/vite.config.ts b/app/vite.config.ts
@@ -54,6 +54,10 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
+      '@shared': path.resolve(__dirname, '../frontend/src/components'),
+      // Force shared components to use the app's React to avoid dual-instance hook errors
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
     },
   },
 });
diff --git a/app/vite.renderer.config.ts b/app/vite.renderer.config.ts
@@ -44,6 +44,10 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
+      '@shared': path.resolve(__dirname, '../frontend/src/components'),
+      // Force shared components to use the app's React to avoid dual-instance hook errors
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
     },
   },
 });
diff --git a/e2e/tests/cloud-streaming.spec.ts b/e2e/tests/cloud-streaming.spec.ts
@@ -19,10 +19,23 @@ test.describe("Cloud Streaming", () => {
     // Increase timeout for this test
     test.setTimeout(180000); // 3 minutes
 
+    // Mock the onboarding status API to skip onboarding in e2e tests
+    await page.route("**/api/v1/onboarding/status", async (route) => {
+      if (route.request().method() === "GET") {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ completed: true, inference_mode: null }),
+        });
+      } else {
+        await route.fulfill({ status: 200, body: "{}" });
+      }
+    });
+
     // Navigate to the app (running at localhost:8000)
     await page.goto("/");
     await expect(
-      page.locator("h1", { hasText: "Daydream Scope" })
+      page.getByRole("heading", { name: "Daydream Scope", exact: true })
     ).toBeVisible({ timeout: 15000 });
 
     // Take screenshot after initial load — app loads directly into the streaming interface

diff --git a/frontend/public/assets/onboarding/blobme.png b/frontend/public/assets/onboarding/blobme.png
diff --git a/frontend/public/assets/onboarding/dissolving-cat.webp b/frontend/public/assets/onboarding/dissolving-cat.webp
diff --git a/frontend/public/assets/onboarding/dissolving-sunflower.png b/frontend/public/assets/onboarding/dissolving-sunflower.png
diff --git a/frontend/public/assets/onboarding/kubakub-butterfly.webp b/frontend/public/assets/onboarding/kubakub-butterfly.webp
diff --git a/frontend/public/assets/onboarding/mythical-creature.png b/frontend/public/assets/onboarding/mythical-creature.png
diff --git a/frontend/public/assets/onboarding/mythical-creature.webp b/frontend/public/assets/onboarding/mythical-creature.webp
diff --git a/frontend/public/assets/onboarding/pixel-art.png b/frontend/public/assets/onboarding/pixel-art.png
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import { PluginsProvider } from "./contexts/PluginsContext";
 import { ServerInfoProvider } from "./contexts/ServerInfoContext";
 import { CloudProvider } from "./lib/cloudContext";
 import { CloudStatusProvider } from "./hooks/useCloudStatus";
+import { OnboardingProvider } from "./contexts/OnboardingContext";
 import {
   handleOAuthCallback,
   initElectronAuthListener,
@@ -109,7 +110,9 @@ function App() {
           <PluginsProvider>
             <ServerInfoProvider>
               <CloudProvider wsUrl={CLOUD_WS_URL} apiKey={CLOUD_KEY}>
-                <StreamPage />
+                <OnboardingProvider>
+                  <StreamPage />
+                </OnboardingProvider>
               </CloudProvider>
             </ServerInfoProvider>
           </PluginsProvider>

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -20,9 +20,15 @@ interface HeaderProps {
   // External settings tab control
   openSettingsTab?: string | null;
   onSettingsTabOpened?: () => void;
+  // External plugins tab control (e.g. from starter workflows chip)
+  openPluginsTab?: string | null;
+  onPluginsTabOpened?: () => void;
   // Graph mode toggle
   graphMode?: boolean;
   onGraphModeToggle?: () => void;
+  // Workflow loading from Workflows tab
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onLoadWorkflow?: (workflowData: Record<string, any>) => void;
 }
 
 export function Header({
@@ -31,15 +37,21 @@ export function Header({
   cloudDisabled,
   openSettingsTab,
   onSettingsTabOpened,
+  openPluginsTab,
+  onPluginsTabOpened,
   graphMode = false,
   onGraphModeToggle,
+  onLoadWorkflow,
 }: HeaderProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [pluginsOpen, setPluginsOpen] = useState(false);
   const [initialTab, setInitialTab] = useState<
     "general" | "account" | "api-keys" | "loras" | "osc"
   >("general");
   const [initialPluginPath, setInitialPluginPath] = useState("");
+  const [pluginsInitialTab, setPluginsInitialTab] = useState<
+    string | undefined
+  >(undefined);
 
   // Use shared cloud status hook - single source of truth
   const { isConnected, isConnecting, lastCloseCode, lastCloseReason } =
@@ -117,6 +129,15 @@ export function Header({
     }
   }, [openSettingsTab, onSettingsTabOpened]);
 
+  // React to external requests to open a specific plugins dialog tab
+  useEffect(() => {
+    if (openPluginsTab) {
+      setPluginsInitialTab(openPluginsTab);
+      setPluginsOpen(true);
+      onPluginsTabOpened?.();
+    }
+  }, [openPluginsTab, onPluginsTabOpened]);
+
   useEffect(() => {
     // Handle deep link actions for plugin installation
     if (window.scope?.onDeepLinkAction) {
@@ -137,6 +158,7 @@ export function Header({
   const handlePluginsClose = () => {
     setPluginsOpen(false);
     setInitialPluginPath("");
+    setPluginsInitialTab(undefined);
   };
 
   return (
@@ -189,7 +211,7 @@ export function Header({
                 ? "Cloud connected"
                 : isConnecting
                   ? "Connecting to cloud..."
-                  : "Enable remote inference"
+                  : "Connect to cloud"
             }
           >
             {isConnected ? (
@@ -204,26 +226,46 @@ export function Header({
                 ? "Connected"
                 : isConnecting
                   ? "Connecting..."
-                  : "Enable Remote Inference"}
+                  : "Connect to Cloud"}
             </span>
           </Button>
           <Button
             variant="ghost"
-            size="icon"
-            onClick={() => setPluginsOpen(true)}
-            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-80 h-8 w-8"
-            title="Plugins"
+            size="sm"
+            onClick={() => {
+              setPluginsInitialTab("discover");
+              setPluginsOpen(true);
+            }}
+            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-80 h-8 gap-1.5 px-2"
+            title="Nodes"
+          >
+            <Plug className="h-4 w-4" />
+            <span className="text-xs font-medium">Nodes</span>
+          </Button>
+          <Button
+            data-tour="workflows-button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setPluginsInitialTab("workflows");
+              setPluginsOpen(true);
+            }}
+            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-80 h-8 gap-1.5 px-2"
+            title="Workflows"
           >
-            <Plug className="h-5 w-5" />
+            <Workflow className="h-4 w-4" />
+            <span className="text-xs font-medium">Workflows</span>
           </Button>
           <Button
+            data-tour="settings-button"
             variant="ghost"
-            size="icon"
+            size="sm"
             onClick={() => setSettingsOpen(true)}
-            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-80 h-8 w-8"
+            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-80 h-8 gap-1.5 px-2"
             title="Settings"
           >
-            <Settings className="h-5 w-5" />
+            <Settings className="h-4 w-4" />
+            <span className="text-xs font-medium">Settings</span>
           </Button>
         </div>
       </div>
@@ -232,8 +274,10 @@ export function Header({
         open={pluginsOpen}
         onClose={handlePluginsClose}
         initialPluginPath={initialPluginPath}
+        initialTab={pluginsInitialTab}
         disabled={cloudDisabled || isConnecting}
         cloudConnected={isConnected}
+        onLoadWorkflow={onLoadWorkflow}
       />
 
       <SettingsDialog