feat: convert settings page to popup dialog, move workflows to main nav

Replace the dedicated settings page layout (SettingsSidebarLayout) with a
modal dialog (SettingsDialog) that opens on top of the current page. Settings
are now accessible via a dialog triggered from the main sidebar, eliminating
the confusing dual-sidebar navigation pattern.

- Create SettingsDialog with tabbed left panel and content area
- Move Workflows into main sidebar navigation (feature-gated)
- Remove /settings/* routes (except /settings/survey)
- Delete SettingsSidebarLayout and SettingsSidebar components
- Update backward compatibility redirects

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: felarof99

packages/browseros-agent/apps/agent/components/sidebar/AppSidebar.tsx

@@ -7,11 +7,13 @@ import { SidebarUserFooter } from './SidebarUserFooter'
 interface AppSidebarProps {
   expanded?: boolean
   onOpenShortcuts?: () => void
+  onOpenSettings?: () => void
 }
 
 export const AppSidebar: FC<AppSidebarProps> = ({
   expanded = false,
   onOpenShortcuts,
+  onOpenSettings,
 }) => {
   return (
     <div
@@ -21,7 +23,7 @@ export const AppSidebar: FC<AppSidebarProps> = ({
       )}
     >
       <SidebarBranding expanded={expanded} />
-      <SidebarNavigation expanded={expanded} />
+      <SidebarNavigation expanded={expanded} onOpenSettings={onOpenSettings} />
       <SidebarUserFooter
         expanded={expanded}
         onOpenShortcuts={onOpenShortcuts}

packages/browseros-agent/apps/agent/components/sidebar/SettingsSidebar.tsx

@@ -1,6 +1,7 @@
 import {
   Brain,
   CalendarClock,
+  GitBranch,
   Home,
   PlugZap,
   Settings,
@@ -21,13 +22,15 @@ import { cn } from '@/lib/utils'
 
 interface SidebarNavigationProps {
   expanded?: boolean
+  onOpenSettings?: () => void
 }
 
 type NavItem = {
   name: string
-  to: string
+  to?: string
   icon: typeof Home
   feature?: Feature
+  action?: 'settings'
 }
 
 const primaryNavItems: NavItem[] = [
@@ -39,6 +42,12 @@ const primaryNavItems: NavItem[] = [
     feature: Feature.MANAGED_MCP_SUPPORT,
   },
   { name: 'Scheduled Tasks', to: '/scheduled', icon: CalendarClock },
+  {
+    name: 'Workflows',
+    to: '/workflows',
+    icon: GitBranch,
+    feature: Feature.WORKFLOW_SUPPORT,
+  },
   {
     name: 'Skills',
     to: '/home/skills',
@@ -57,11 +66,15 @@ const primaryNavItems: NavItem[] = [
     icon: Sparkles,
     feature: Feature.SOUL_SUPPORT,
   },
-  { name: 'Settings', to: '/settings/ai', icon: Settings },
+  { name: 'Settings', icon: Settings, action: 'settings' },
 ]
 
+const navItemClassName =
+  'flex h-9 items-center gap-2 overflow-hidden whitespace-nowrap rounded-md px-3 font-medium text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+
 export const SidebarNavigation: FC<SidebarNavigationProps> = ({
   expanded = true,
+  onOpenSettings,
 }) => {
   const location = useLocation()
   const { supports } = useCapabilities()
@@ -76,16 +89,47 @@ export const SidebarNavigation: FC<SidebarNavigationProps> = ({
         <nav className="space-y-1">
           {filteredItems.map((item) => {
             const Icon = item.icon
-            const isActive =
-              item.to === '/settings/ai'
-                ? location.pathname.startsWith('/settings')
-                : location.pathname === item.to
 
+            // Settings is a button that opens the dialog
+            if (item.action === 'settings') {
+              const settingsButton = (
+                <button
+                  type="button"
+                  onClick={onOpenSettings}
+                  className={cn(navItemClassName, 'w-full')}
+                >
+                  <Icon className="size-4 shrink-0" />
+                  <span
+                    className={cn(
+                      'truncate transition-opacity duration-200',
+                      expanded ? 'opacity-100' : 'opacity-0',
+                    )}
+                  >
+                    {item.name}
+                  </span>
+                </button>
+              )
+
+              if (!expanded) {
+                return (
+                  <Tooltip key="settings">
+                    <TooltipTrigger asChild>{settingsButton}</TooltipTrigger>
+                    <TooltipContent side="right">{item.name}</TooltipContent>
+                  </Tooltip>
+                )
+              }
+
+              return <div key="settings">{settingsButton}</div>
+            }
+
+            // Regular nav items use NavLink
+            const itemPath = item.to ?? '/home'
+            const isActive = location.pathname === itemPath
             const navItem = (
               <NavLink
-                to={item.to}
+                to={itemPath}
                 className={cn(
-                  'flex h-9 items-center gap-2 overflow-hidden whitespace-nowrap rounded-md px-3 font-medium text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                  navItemClassName,
                   isActive &&
                     'bg-sidebar-accent text-sidebar-accent-foreground',
                 )}

packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx

@@ -8,23 +8,17 @@ import { OnboardingDemo } from '../onboarding/demo/OnboardingDemo'
 import { FeaturesPage } from '../onboarding/features/Features'
 import { Onboarding } from '../onboarding/index/Onboarding'
 import { StepsLayout } from '../onboarding/steps/StepsLayout'
-import { AISettingsPage } from './ai-settings/AISettingsPage'
 import { ConnectMCP } from './connect-mcp/ConnectMCP'
 import { CreateGraphWrapper } from './create-graph/CreateGraphWrapper'
-import { CustomizationPage } from './customization/CustomizationPage'
 import { SurveyPage } from './jtbd-agent/SurveyPage'
 import { AuthLayout } from './layout/AuthLayout'
-import { SettingsSidebarLayout } from './layout/SettingsSidebarLayout'
 import { SidebarLayout } from './layout/SidebarLayout'
-import { LlmHubPage } from './llm-hub/LlmHubPage'
 import { LoginPage } from './login/LoginPage'
 import { LogoutPage } from './login/LogoutPage'
 import { MagicLinkCallback } from './login/MagicLinkCallback'
-import { MCPSettingsPage } from './mcp-settings/MCPSettingsPage'
 import { MemoryPage } from './memory/MemoryPage'
 import { ProfilePage } from './profile/ProfilePage'
 import { ScheduledTasksPage } from './scheduled-tasks/ScheduledTasksPage'
-import { SearchProviderPage } from './search-provider/SearchProviderPage'
 import { SkillsPage } from './skills/SkillsPage'
 import { SoulPage } from './soul/SoulPage'
 import { WorkflowsPageWrapper } from './workflows/WorkflowsPageWrapper'
@@ -42,12 +36,12 @@ const OptionsRedirect: FC = () => {
   const path = params['*'] || ''
 
   const routeMap: Record<string, string> = {
-    ai: '/settings/ai',
-    chat: '/settings/chat',
+    ai: '/home',
+    chat: '/home',
     'connect-mcp': '/connect-apps',
-    mcp: '/settings/mcp',
-    customization: '/settings/customization',
-    search: '/settings/search',
+    mcp: '/home',
+    customization: '/home',
+    search: '/home',
     soul: '/home/soul',
     skills: '/home/skills',
     'jtbd-agent': '/settings/survey',
@@ -56,7 +50,7 @@ const OptionsRedirect: FC = () => {
     'create-graph': '/workflows/create-graph',
   }
 
-  const newPath = routeMap[path] || '/settings/ai'
+  const newPath = routeMap[path] || '/home'
   return <Navigate to={newPath} replace />
 }
 
@@ -91,18 +85,11 @@ export const App: FC = () => {
           <Route path="scheduled" element={<ScheduledTasksPage />} />
         </Route>
 
-        {/* Settings with dedicated sidebar */}
-        <Route element={<SettingsSidebarLayout />}>
-          <Route path="settings">
-            <Route index element={<Navigate to="/settings/ai" replace />} />
-            <Route path="ai" element={<AISettingsPage key="ai" />} />
-            <Route path="chat" element={<LlmHubPage />} />
-            <Route path="mcp" element={<MCPSettingsPage />} />
-            <Route path="customization" element={<CustomizationPage />} />
-            <Route path="search" element={<SearchProviderPage />} />
-            <Route path="survey" element={<SurveyPage {...surveyParams} />} />
-          </Route>
-        </Route>
+        {/* Survey page - standalone */}
+        <Route
+          path="settings/survey"
+          element={<SurveyPage {...surveyParams} />}
+        />
 
         {/* Full-screen without sidebar */}
         <Route path="workflows/create-graph" element={<CreateGraphWrapper />} />
@@ -133,6 +120,8 @@ export const App: FC = () => {
           path="/settings/skills"
           element={<Navigate to="/home/skills" replace />}
         />
+        {/* Settings routes now redirect to home (settings are in a dialog) */}
+        <Route path="/settings/*" element={<Navigate to="/home" replace />} />
         <Route path="/options/*" element={<OptionsRedirect />} />
 
         {/* Fallback to home */}