feat: workflow UX improvements — browser support, embedded config, sidebar collapse, viewport-centered nodes

- Add browser workflow adapter (localStorage + static node defs) so workflow works without Electron
- Embed NodeConfigPanel and ResultsPanel inside selected node cards on canvas (remove right sidebar)
- Sidebar always visible with responsive collapse (1024px breakpoint) and bottom toggle button
- New nodes placed at center of current viewport instead of hardcoded coordinates
- Allow closing the last workflow tab (resets to clean blank state)
- Default theme to 'auto' (follow system preference)
- Grid lines background on workflow canvas
- Fix Capacitor module resolution, .npmrc ELECTRON_MIRROR warning, useFreeToolListener crash in browser
- Update workflow guide to reflect in-node config/results instead of right panel

Co-authored-by: Cursor <[email protected]>

Author: chengzeyi

.npmrc

@@ -1,2 +1,5 @@
-ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+# npm registry (optional: use npmmirror for China)
 registry=https://registry.npmmirror.com/
+
+# ELECTRON_MIRROR is not an npm config — set it in your environment if you need an Electron mirror, e.g.:
+# export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wavespeed-desktop",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "WaveSpeedAI Desktop Application - A playground for AI models",
   "main": "./out/main/index.js",
   "author": {

package.json

@@ -12,7 +12,7 @@ import { apiClient } from '@/api/client'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { KeyRound, Eye, EyeOff, Loader2, Zap, ExternalLink, Menu } from 'lucide-react'
+import { KeyRound, Eye, EyeOff, Loader2, Zap, ExternalLink } from 'lucide-react'
 import { VideoEnhancerPage } from '@/pages/VideoEnhancerPage'
 import { ImageEnhancerPage } from '@/pages/ImageEnhancerPage'
 import { BackgroundRemoverPage } from '@/pages/BackgroundRemoverPage'
@@ -33,30 +33,27 @@ import { useFreeToolListener } from '@/workflow/hooks/useFreeToolListener'
 let keyCounter = 0
 const nextKey = () => ++keyCounter
 
+const SIDEBAR_EXPAND_BREAKPOINT = 1024 // px: below = collapsed, >= = expanded; sync on resize
+
 export function Layout() {
   const { t } = useTranslation()
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() =>
+    typeof window !== 'undefined' ? window.innerWidth < SIDEBAR_EXPAND_BREAKPOINT : false
+  )
+  // Sync sidebar collapsed state to window width on resize (and initial layout)
+  useEffect(() => {
+    const onResize = () => setSidebarCollapsed(window.innerWidth < SIDEBAR_EXPAND_BREAKPOINT)
+    window.addEventListener('resize', onResize)
+    onResize()
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
   const navigate = useNavigate()
   const location = useLocation()
   const hasShownUpdateToast = useRef(false)
 
   // Register free-tool IPC listener globally (must be always mounted for workflow execution)
   useFreeToolListener()
 
-  // Close mobile menu when route changes; auto-collapse sidebar for workflow
-  const prevPathRef = useRef(location.pathname)
-  useEffect(() => {
-    setMobileMenuOpen(false)
-    // Auto-collapse when entering workflow, auto-expand when leaving
-    if (location.pathname === '/workflow' && prevPathRef.current !== '/workflow') {
-      setSidebarCollapsed(true)
-    } else if (location.pathname !== '/workflow' && prevPathRef.current === '/workflow') {
-      setSidebarCollapsed(false)
-    }
-    prevPathRef.current = location.pathname
-  }, [location.pathname])
-
   // Track which persistent pages have been visited (to delay initial mount)
   const [visitedPages, setVisitedPages] = useState<Set<string>>(new Set())
   // Track the last visited free-tools sub-page for navigation
@@ -280,29 +277,12 @@ export function Layout() {
     <PageResetContext.Provider value={{ resetPage }}>
     <TooltipProvider>
       <div className="flex h-screen overflow-hidden relative">
-        {/* Mobile menu button */}
-        <button
-          className="fixed left-3 top-3 z-50 rounded-lg border border-border/70 bg-background/85 p-2 shadow-lg backdrop-blur md:hidden"
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          aria-label="Toggle menu"
-        >
-          <Menu className="h-5 w-5" />
-        </button>
-
-        {/* Mobile overlay */}
-        {mobileMenuOpen && (
-          <div
-            className="fixed inset-0 bg-black/50 z-40 md:hidden"
-            onClick={() => setMobileMenuOpen(false)}
-          />
-        )}
-
         <Sidebar
           collapsed={sidebarCollapsed}
-          onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
+          onToggle={() => setSidebarCollapsed(prev => !prev)}
           lastFreeToolsPage={lastFreeToolsPage}
-          isMobileOpen={mobileMenuOpen}
-          onMobileClose={() => setMobileMenuOpen(false)}
+          isMobileOpen={false}
+          onMobileClose={() => {}}
         />
         <main className="relative flex-1 overflow-hidden md:pl-0">
           {requiresLogin ? loginContent : (

src/components/layout/Layout.tsx

@@ -146,12 +146,10 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
   return (
     <div
       className={cn(
-        "flex h-full flex-col border-r border-border/70 bg-background/95 backdrop-blur transition-all duration-300",
-        // Desktop styles
-        "hidden md:flex",
+        "flex h-full flex-col border-r border-border/70 bg-background/95 backdrop-blur transition-all duration-300 shrink-0",
         collapsed ? "w-16" : "w-52",
-        // Mobile styles - fixed positioned drawer
-        isMobileOpen && "!flex fixed inset-y-0 left-0 z-50 w-72 shadow-2xl"
+        // Mobile overlay when hamburger opens
+        isMobileOpen && "!fixed inset-y-0 left-0 z-50 w-72 shadow-2xl"
       )}
     >
       {/* Mobile close button */}
@@ -299,7 +297,7 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
           })}
         </nav>
 
-        {/* Toggle Button - hidden on mobile */}
+        {/* Collapse/expand: bottom button toggles; state also syncs to window width on resize */}
         {!isMobileOpen && (
           <Tooltip delayDuration={0} open={collapsed && tooltipReady ? undefined : false}>
             <TooltipTrigger asChild>
@@ -308,7 +306,7 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
                 size="sm"
                 onClick={onToggle}
                 className={cn(
-                  "mt-2 hidden h-9 w-full rounded-xl text-muted-foreground hover:bg-muted hover:text-foreground md:flex",
+                  "mt-2 h-9 w-full rounded-xl text-muted-foreground hover:bg-muted hover:text-foreground",
                   collapsed ? "justify-center px-2" : "justify-start gap-3 px-3"
                 )}
               >

src/components/layout/Sidebar.tsx

@@ -1045,6 +1045,7 @@
     "workflows": "Workflows",
     "newWorkflow": "New Workflow",
     "untitled": "Untitled Workflow",
+    "modelSyncDesktopOnly": "Model sync is available in the WaveSpeed Desktop app.",
     "save": "Save",
     "saved": "Saved",
     "saving": "Saving...",
@@ -1398,7 +1399,7 @@
       },
       "config": {
         "title": "Configure & View Results",
-        "desc": "Click any node to select it. The right panel shows two tabs:\n• Config — Set model parameters, upload files, enter prompts\n• Results — View execution outputs (images, videos, 3D models)\n\nParameters update dynamically based on the node type and selected model. Results support fullscreen preview and download."
+        "desc": "Click any node to select it. Config and Results appear inside the node card:\n• Config — Set model parameters, upload files, enter prompts\n• Results — View execution outputs (images, videos, 3D models)\n\nParameters update dynamically based on the node type and selected model. Results support fullscreen preview and download."
       },
       "run": {
         "title": "Run Your Workflow",

src/i18n/locales/en.json

@@ -5,12 +5,12 @@ export type Theme = 'auto' | 'dark' | 'light'
 const THEME_STORAGE_KEY = 'wavespeed_theme'
 
 function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'dark'
+  if (typeof window === 'undefined') return 'auto'
   const stored = localStorage.getItem(THEME_STORAGE_KEY)
   if (stored === 'dark' || stored === 'light' || stored === 'auto') {
     return stored
   }
-  return 'dark' // Default to dark theme
+  return 'auto'
 }
 
 function applyTheme(theme: Theme) {