@swarmclawai/swarmclaw 0.3.1 → 0.4.5

package/src/components/layout/app-layout.tsx

@@ -6,9 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { useAppStore } from '@/stores/use-app-store'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { Avatar } from '@/components/shared/avatar'
-import { SessionList } from '@/components/sessions/session-list'
-import { NewSessionSheet } from '@/components/sessions/new-session-sheet'
-import { SettingsSheet } from '@/components/shared/settings-sheet'
+import { SettingsPage } from '@/components/shared/settings/settings-page'
 import { AgentList } from '@/components/agents/agent-list'
 import { AgentChatList } from '@/components/agents/agent-chat-list'
 import { AgentSheet } from '@/components/agents/agent-sheet'
@@ -39,6 +37,8 @@ import { PluginList } from '@/components/plugins/plugin-list'
 import { PluginSheet } from '@/components/plugins/plugin-sheet'
 import { UsageList } from '@/components/usage/usage-list'
 import { RunList } from '@/components/runs/run-list'
+import { ProjectList } from '@/components/projects/project-list'
+import { ProjectSheet } from '@/components/projects/project-sheet'
 import { NetworkBanner } from './network-banner'
 import { UpdateBanner } from './update-banner'
 import { MobileHeader } from './mobile-header'
@@ -55,8 +55,6 @@ export function AppLayout() {
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sidebarOpen = useAppStore((s) => s.sidebarOpen)
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
-  const setSettingsOpen = useAppStore((s) => s.setSettingsOpen)
-  const setNewSessionOpen = useAppStore((s) => s.setNewSessionOpen)
   const setUser = useAppStore((s) => s.setUser)
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const activeView = useAppStore((s) => s.activeView)
@@ -72,8 +70,11 @@ export function AppLayout() {
   const setMcpServerSheetOpen = useAppStore((s) => s.setMcpServerSheetOpen)
   const setKnowledgeSheetOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
+  const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
+  const tasks = useAppStore((s) => s.tasks)
   const isDesktop = useMediaQuery('(min-width: 768px)')
   const hasSelectedSession = !!(currentSessionId && sessions[currentSessionId])
+  const pendingApprovalCount = Object.values(tasks).filter((t) => t.pendingApproval).length
 
   const [agentViewMode, setAgentViewMode] = useState<'chat' | 'config'>('chat')
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
@@ -118,8 +119,7 @@ export function AppLayout() {
   }
 
   const openNewSheet = () => {
-    if (activeView === 'sessions') setNewSessionOpen(true)
-    else if (activeView === 'agents') setAgentSheetOpen(true)
+    if (activeView === 'agents') setAgentSheetOpen(true)
     else if (activeView === 'schedules') setScheduleSheetOpen(true)
     else if (activeView === 'tasks') setTaskSheetOpen(true)
     else if (activeView === 'secrets') setSecretSheetOpen(true)
@@ -130,20 +130,29 @@ export function AppLayout() {
     else if (activeView === 'mcp_servers') setMcpServerSheetOpen(true)
     else if (activeView === 'knowledge') setKnowledgeSheetOpen(true)
     else if (activeView === 'plugins') setPluginSheetOpen(true)
+    else if (activeView === 'projects') setProjectSheetOpen(true)
+  }
+
+  const handleNavClick = (view: AppView) => {
+    if (FULL_WIDTH_VIEWS.has(view)) {
+      setActiveView(view)
+      setSidebarOpen(false)
+    } else if (activeView === view && sidebarOpen) {
+      setSidebarOpen(false)
+    } else {
+      setActiveView(view)
+      setSidebarOpen(true)
+    }
   }
 
   const agents = useAppStore((s) => s.agents)
   const currentAgentId = useAppStore((s) => s.currentAgentId)
   const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
-  const mainSession = Object.values(sessions).find((s) => s.name === '__main__' && s.user === currentUser)
-
   const goToMainChat = async () => {
     // Navigate to default agent's chat thread
     const defaultAgent = agents['default'] || Object.values(agents)[0]
     if (defaultAgent) {
       await setCurrentAgent(defaultAgent.id)
-    } else if (mainSession) {
-      setCurrentSession(mainSession.id)
     }
     setActiveView('agents')
     setSidebarOpen(false)
@@ -230,82 +239,82 @@ export function AppLayout() {
 
           {/* Nav items */}
           <div className={`flex flex-col gap-0.5 ${railExpanded ? 'px-3' : 'items-center'}`}>
-            <NavItem view="agents" label="Agents" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('agents'); setSidebarOpen(true) }}>
+            <NavItem view="agents" label="Agents" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('agents')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
               </svg>
             </NavItem>
-            <NavItem view="sessions" label="History" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('sessions'); setSidebarOpen(true) }}>
+            <NavItem view="projects" label="Projects" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('projects')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
+                <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7-7H4a2 2 0 0 0-2 2v17Z" /><path d="M14 2v7h7" />
               </svg>
             </NavItem>
-            <NavItem view="schedules" label="Schedules" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('schedules'); setSidebarOpen(true) }}>
+            <NavItem view="schedules" label="Schedules" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('schedules')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
               </svg>
             </NavItem>
-            <NavItem view="memory" label="Memory" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('memory'); setSidebarOpen(true) }}>
+            <NavItem view="memory" label="Memory" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('memory')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" /><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
               </svg>
             </NavItem>
-            <NavItem view="tasks" label="Tasks" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('tasks'); setSidebarOpen(true) }}>
+            <NavItem view="tasks" label="Tasks" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('tasks')} badge={pendingApprovalCount}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" /><rect x="9" y="3" width="6" height="4" rx="1" /><path d="M9 14l2 2 4-4" />
               </svg>
             </NavItem>
-            <NavItem view="secrets" label="Secrets" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('secrets'); setSidebarOpen(true) }}>
+            <NavItem view="secrets" label="Secrets" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('secrets')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
               </svg>
             </NavItem>
-            <NavItem view="providers" label="Providers" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('providers'); setSidebarOpen(true) }}>
+            <NavItem view="providers" label="Providers" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('providers')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
               </svg>
             </NavItem>
-            <NavItem view="skills" label="Skills" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('skills'); setSidebarOpen(true) }}>
+            <NavItem view="skills" label="Skills" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('skills')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
               </svg>
             </NavItem>
-            <NavItem view="connectors" label="Connectors" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('connectors'); setSidebarOpen(true) }}>
+            <NavItem view="connectors" label="Connectors" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('connectors')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" /><line x1="8" y1="12" x2="16" y2="12" />
               </svg>
             </NavItem>
-            <NavItem view="webhooks" label="Webhooks" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('webhooks'); setSidebarOpen(true) }}>
+            <NavItem view="webhooks" label="Webhooks" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('webhooks')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M22 12h-4l-3 7L9 5l-3 7H2" />
               </svg>
             </NavItem>
-            <NavItem view="mcp_servers" label="MCP" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('mcp_servers'); setSidebarOpen(true) }}>
+            <NavItem view="mcp_servers" label="MCP" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('mcp_servers')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <rect x="2" y="2" width="20" height="8" rx="2" /><rect x="2" y="14" width="20" height="8" rx="2" /><line x1="6" y1="6" x2="6.01" y2="6" /><line x1="6" y1="18" x2="6.01" y2="18" />
               </svg>
             </NavItem>
-            <NavItem view="knowledge" label="Knowledge" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('knowledge'); setSidebarOpen(true) }}>
+            <NavItem view="knowledge" label="Knowledge" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('knowledge')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
               </svg>
             </NavItem>
-            <NavItem view="plugins" label="Plugins" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('plugins'); setSidebarOpen(true) }}>
+            <NavItem view="plugins" label="Plugins" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('plugins')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M12 2v4m0 12v4M2 12h4m12 0h4" /><circle cx="12" cy="12" r="4" /><path d="M8 8L5.5 5.5M16 8l2.5-2.5M8 16l-2.5 2.5M16 16l2.5 2.5" />
               </svg>
             </NavItem>
-            <NavItem view="usage" label="Usage" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('usage'); setSidebarOpen(true) }}>
+            <NavItem view="usage" label="Usage" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('usage')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
               </svg>
             </NavItem>
-            <NavItem view="runs" label="Runs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('runs'); setSidebarOpen(true) }}>
+            <NavItem view="runs" label="Runs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('runs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
               </svg>
             </NavItem>
-            <NavItem view="logs" label="Logs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => { setActiveView('logs'); setSidebarOpen(true) }}>
+            <NavItem view="logs" label="Logs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('logs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" />
               </svg>
@@ -350,7 +359,7 @@ export function AppLayout() {
             {railExpanded && <DaemonIndicator />}
             {railExpanded ? (
               <button
-                onClick={() => setSettingsOpen(true)}
+                onClick={() => handleNavClick('settings')}
                 className="w-full flex items-center gap-2.5 px-3 py-2 rounded-[10px] text-[13px] font-500 cursor-pointer transition-all
                   bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04] border-none"
                 style={{ fontFamily: 'inherit' }}
@@ -363,7 +372,7 @@ export function AppLayout() {
               </button>
             ) : (
               <RailTooltip label="Settings" description="API keys, providers & app config">
-                <button onClick={() => setSettingsOpen(true)} className="rail-btn">
+                <button onClick={() => handleNavClick('settings')} className="rail-btn">
                   <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                     <circle cx="12" cy="12" r="3" />
                     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
@@ -400,7 +409,7 @@ export function AppLayout() {
           style={{ animation: 'panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
         >
           <div className="flex items-center px-5 pt-5 pb-3 shrink-0">
-            <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">{activeView === 'sessions' ? 'History' : activeView}</h2>
+            <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">{activeView}</h2>
             {activeView === 'logs' || activeView === 'usage' || activeView === 'runs' ? null : activeView === 'memory' ? (
               <button
                 onClick={() => useAppStore.getState().setMemorySheetOpen(true)}
@@ -422,17 +431,10 @@ export function AppLayout() {
                   <line x1="12" y1="5" x2="12" y2="19" />
                   <line x1="5" y1="12" x2="19" y2="12" />
                 </svg>
-                {activeView === 'sessions' ? 'Session' : activeView === 'agents' ? 'Agent' : activeView === 'schedules' ? 'Schedule' : activeView === 'tasks' ? 'Task' : activeView === 'secrets' ? 'Secret' : activeView === 'providers' ? 'Provider' : activeView === 'skills' ? 'Skill' : activeView === 'connectors' ? 'Connector' : activeView === 'webhooks' ? 'Webhook' : activeView === 'mcp_servers' ? 'MCP Server' : activeView === 'knowledge' ? 'Knowledge' : 'New'}
+                {activeView === 'agents' ? 'Agent' : activeView === 'schedules' ? 'Schedule' : activeView === 'tasks' ? 'Task' : activeView === 'secrets' ? 'Secret' : activeView === 'providers' ? 'Provider' : activeView === 'skills' ? 'Skill' : activeView === 'connectors' ? 'Connector' : activeView === 'webhooks' ? 'Webhook' : activeView === 'mcp_servers' ? 'MCP Server' : activeView === 'knowledge' ? 'Knowledge' : 'New'}
               </button>
             )}
           </div>
-          {activeView === 'sessions' && (
-            <>
-              <UpdateBanner />
-              <NetworkBanner />
-              <SessionList inSidebar onSelect={() => {}} />
-            </>
-          )}
           {activeView === 'agents' && (
             <>
               <div className="flex gap-1 px-4 pb-2">
@@ -488,7 +490,7 @@ export function AppLayout() {
                   <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
                 </svg>
               </a>
-              <button onClick={() => setSettingsOpen(true)} className="rail-btn">
+              <button onClick={() => handleNavClick('settings')} className="rail-btn">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                   <circle cx="12" cy="12" r="3" />
                   <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
@@ -500,7 +502,7 @@ export function AppLayout() {
             </div>
             {/* View selector tabs */}
             <div className="flex px-4 py-2 gap-1 shrink-0 flex-wrap">
-              {(['agents', 'sessions', 'schedules', 'memory', 'tasks', 'secrets', 'providers', 'skills', 'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins', 'usage', 'runs', 'logs'] as AppView[]).map((v) => (
+              {(['agents', 'schedules', 'memory', 'tasks', 'secrets', 'providers', 'skills', 'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins', 'usage', 'runs', 'logs'] as AppView[]).map((v) => (
                 <button
                   key={v}
                   onClick={() => setActiveView(v)}
@@ -514,7 +516,7 @@ export function AppLayout() {
                 </button>
               ))}
             </div>
-            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && (
+            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && (
             <div className="px-4 py-2.5 shrink-0">
               <button
                 onClick={() => {
@@ -526,17 +528,10 @@ export function AppLayout() {
                   shadow-[0_2px_12px_rgba(99,102,241,0.15)]"
                 style={{ fontFamily: 'inherit' }}
               >
-                + New {activeView === 'sessions' ? 'Session' : activeView === 'agents' ? 'Agent' : activeView === 'schedules' ? 'Schedule' : activeView === 'tasks' ? 'Task' : activeView === 'secrets' ? 'Secret' : activeView === 'providers' ? 'Provider' : activeView === 'skills' ? 'Skill' : activeView === 'connectors' ? 'Connector' : activeView === 'webhooks' ? 'Webhook' : activeView === 'mcp_servers' ? 'MCP Server' : activeView === 'knowledge' ? 'Knowledge' : activeView === 'plugins' ? 'Plugin' : 'Entry'}
+                + New {activeView === 'agents' ? 'Agent' : activeView === 'schedules' ? 'Schedule' : activeView === 'tasks' ? 'Task' : activeView === 'secrets' ? 'Secret' : activeView === 'providers' ? 'Provider' : activeView === 'skills' ? 'Skill' : activeView === 'connectors' ? 'Connector' : activeView === 'webhooks' ? 'Webhook' : activeView === 'mcp_servers' ? 'MCP Server' : activeView === 'knowledge' ? 'Knowledge' : activeView === 'plugins' ? 'Plugin' : activeView === 'projects' ? 'Project' : 'Entry'}
               </button>
             </div>
             )}
-            {activeView === 'sessions' && (
-              <>
-                <UpdateBanner />
-                <NetworkBanner />
-                <SessionList inSidebar onSelect={() => setSidebarOpen(false)} />
-              </>
-            )}
             {activeView === 'agents' && (
               <>
                 <div className="flex gap-1 px-4 pb-2">
@@ -566,6 +561,7 @@ export function AppLayout() {
             {activeView === 'mcp_servers' && <McpServerList />}
             {activeView === 'knowledge' && <KnowledgeList />}
             {activeView === 'plugins' && <PluginList inSidebar />}
+            {activeView === 'projects' && <ProjectList />}
             {activeView === 'usage' && <UsageList />}
             {activeView === 'runs' && <RunList />}
             {activeView === 'logs' && <LogList />}
@@ -596,37 +592,51 @@ export function AppLayout() {
                 </div>
               )}
             </div>
-          ) : activeView === 'sessions' && hasSelectedSession ? (
-            <ChatArea />
-          ) : activeView === 'sessions' ? (
-            <div className="flex-1 flex flex-col">
-              {!isDesktop ? (
-                <SessionList />
-              ) : (
-                <div className="flex-1 flex items-center justify-center px-8">
-                  <div className="text-center max-w-[420px]">
-                    <h2 className="font-display text-[24px] font-700 text-text mb-2 tracking-[-0.02em]">
-                      No Chat Selected
-                    </h2>
-                    <p className="text-[14px] text-text-3">
-                      Choose a session from the sidebar or switch to Agents view.
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
           ) : activeView === 'tasks' && isDesktop ? (
             <TaskBoard />
           ) : activeView === 'memory' ? (
             <MemoryDetail />
+          ) : activeView === 'settings' ? (
+            <SettingsPage />
+          ) : !sidebarOpen && FULL_WIDTH_VIEWS.has(activeView) ? (
+            <div className="flex-1 flex flex-col h-full">
+              <div className="flex items-center px-6 pt-5 pb-3 shrink-0">
+                <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">
+                  {activeView === 'mcp_servers' ? 'MCP Servers' : activeView.replace('_', ' ')}
+                </h2>
+                {activeView !== 'usage' && activeView !== 'runs' && activeView !== 'logs' && (
+                  <button
+                    onClick={openNewSheet}
+                    className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 text-accent-bright bg-accent-soft hover:bg-[#6366F1]/15 transition-all cursor-pointer"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                      <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
+                    {activeView === 'schedules' ? 'Schedule' : activeView === 'secrets' ? 'Secret' : activeView === 'providers' ? 'Provider' : activeView === 'skills' ? 'Skill' : activeView === 'connectors' ? 'Connector' : activeView === 'webhooks' ? 'Webhook' : activeView === 'mcp_servers' ? 'MCP Server' : activeView === 'knowledge' ? 'Knowledge' : activeView === 'plugins' ? 'Plugin' : activeView === 'projects' ? 'Project' : 'New'}
+                  </button>
+                )}
+              </div>
+              {activeView === 'schedules' && <ScheduleList />}
+              {activeView === 'secrets' && <SecretsList />}
+              {activeView === 'providers' && <ProviderList />}
+              {activeView === 'skills' && <SkillList />}
+              {activeView === 'connectors' && <ConnectorList />}
+              {activeView === 'webhooks' && <WebhookList />}
+              {activeView === 'mcp_servers' && <McpServerList />}
+              {activeView === 'knowledge' && <KnowledgeList />}
+              {activeView === 'plugins' && <PluginList />}
+              {activeView === 'projects' && <ProjectList />}
+              {activeView === 'usage' && <UsageList />}
+              {activeView === 'runs' && <RunList />}
+              {activeView === 'logs' && <LogList />}
+            </div>
           ) : (
             <ViewEmptyState view={activeView} />
           )}
         </div>
       </ErrorBoundary>
 
-      <NewSessionSheet />
-      <SettingsSheet />
       <AgentSheet />
       <ScheduleSheet />
       <MemorySheet />
@@ -639,6 +649,7 @@ export function AppLayout() {
       <McpServerSheet />
       <KnowledgeSheet />
       <PluginSheet />
+      <ProjectSheet />
 
       <Dialog open={shortcutsOpen} onOpenChange={setShortcutsOpen}>
         <DialogContent className="sm:max-w-[380px] bg-raised border-white/[0.08]">
@@ -718,7 +729,6 @@ class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boole
 }
 
 const VIEW_DESCRIPTIONS: Record<AppView, string> = {
-  sessions: 'Session history & debug view',
   agents: 'Chat with & configure your AI agents',
   schedules: 'Automated task schedules',
   memory: 'Long-term agent memory store',
@@ -733,10 +743,18 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   logs: 'Application logs & error tracking',
   plugins: 'Extend agent capabilities with custom plugins',
   usage: 'Token usage analytics & cost tracking',
-  runs: 'Live session run monitoring & history',
+  runs: 'Live run monitoring & history',
+  settings: 'Manage providers, API keys & orchestrator engine',
+  projects: 'Group agents, tasks & schedules into projects',
 }
 
-const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'sessions' | 'agents'>, { icon: string; title: string; description: string; features: string[] }> = {
+const FULL_WIDTH_VIEWS = new Set<AppView>([
+  'schedules', 'secrets', 'providers', 'skills',
+  'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
+  'usage', 'runs', 'logs', 'settings', 'projects',
+])
+
+const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; title: string; description: string; features: string[] }> = {
   schedules: {
     icon: 'clock',
     title: 'Schedules',
@@ -746,14 +764,14 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'sessions' | 'agents'>, { icon:
   memory: {
     icon: 'database',
     title: 'Memory',
-    description: 'Long-term memory store for AI agents. Orchestrators can store and retrieve knowledge across sessions.',
-    features: ['Agents store findings and learnings automatically', 'Full-text search across all stored memories', 'Organized by categories and agents', 'Persists across sessions for continuity'],
+    description: 'Long-term memory store for AI agents. Orchestrators can store and retrieve knowledge across conversations.',
+    features: ['Agents store findings and learnings automatically', 'Full-text search across all stored memories', 'Organized by categories and agents', 'Persists across conversations for continuity'],
   },
   tasks: {
     icon: 'clipboard',
     title: 'Task Board',
     description: 'A Trello-style board for managing orchestrator jobs. Create tasks, assign them to orchestrators, and track progress.',
-    features: ['Kanban columns: Backlog, Queued, Running, Completed, Failed', 'Assign tasks to specific orchestrator agents', 'Sequential queue ensures orchestrators don\'t conflict', 'View results and session logs for completed tasks'],
+    features: ['Kanban columns: Backlog, Queued, Running, Completed, Failed', 'Assign tasks to specific orchestrator agents', 'Sequential queue ensures orchestrators don\'t conflict', 'View results and logs for completed tasks'],
   },
   secrets: {
     icon: 'lock',
@@ -777,7 +795,7 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'sessions' | 'agents'>, { icon:
     icon: 'link',
     title: 'Connectors',
     description: 'Bridge chat platforms to your AI agents. Receive messages from Discord, Telegram, Slack, or WhatsApp and route them to agents.',
-    features: ['Connect Discord, Telegram, Slack, or WhatsApp bots', 'Route incoming messages to any agent', 'Each platform channel gets its own session', 'Start and stop connectors from the UI'],
+    features: ['Connect Discord, Telegram, Slack, or WhatsApp bots', 'Route incoming messages to any agent', 'Each platform channel gets its own chat thread', 'Start and stop connectors from the UI'],
   },
   webhooks: {
     icon: 'webhook',
@@ -788,7 +806,7 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'sessions' | 'agents'>, { icon:
   mcp_servers: {
     icon: 'server',
     title: 'MCP Servers',
-    description: 'Connect agents to external MCP (Model Context Protocol) servers, injecting their tools into chat sessions.',
+    description: 'Connect agents to external MCP (Model Context Protocol) servers, injecting their tools into agent chats.',
     features: ['Configure stdio, SSE, or streamable HTTP transports', 'Test connections and discover available tools', 'Assign MCP servers to specific agents', 'Tools appear alongside built-in tools in chat'],
   },
   knowledge: {
@@ -812,20 +830,32 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'sessions' | 'agents'>, { icon:
   usage: {
     icon: 'bar-chart',
     title: 'Usage',
-    description: 'Track token usage and costs across all providers and sessions.',
-    features: ['Per-provider cost breakdown', 'Token usage over time', 'Session-level cost tracking', 'Export usage data'],
+    description: 'Track token usage and costs across all providers and agents.',
+    features: ['Per-provider cost breakdown', 'Token usage over time', 'Per-agent cost tracking', 'Export usage data'],
   },
   runs: {
     icon: 'activity',
     title: 'Runs',
-    description: 'View the session run queue and execution history.',
+    description: 'View the run queue and execution history.',
     features: ['Monitor queued and running tasks', 'View run results and errors', 'Cancel pending runs', 'Automatic retry tracking'],
   },
+  settings: {
+    icon: 'settings',
+    title: 'Settings',
+    description: 'Manage providers, API keys & orchestrator engine.',
+    features: ['Configure LLM providers', 'Manage API credentials', 'Tune orchestrator settings', 'Set up voice & embedding'],
+  },
+  projects: {
+    icon: 'folder',
+    title: 'Projects',
+    description: 'Organize your work into projects. Group agents, tasks, and schedules under a common scope.',
+    features: ['Create named projects with color badges', 'Assign agents and tasks to projects', 'Filter sidebar views by project', 'Global view when no filter is active'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {
-  if (view === 'sessions' || view === 'agents') return null
-  const config = VIEW_EMPTY_STATES[view as Exclude<AppView, 'sessions' | 'agents'>]
+  if (view === 'agents') return null
+  const config = VIEW_EMPTY_STATES[view as Exclude<AppView, 'agents'>]
   if (!config) return null
 
   return (
@@ -907,16 +937,17 @@ function ViewEmptyIcon({ type }: { type: string }) {
   }
 }
 
-function NavItem({ view, label, expanded, active, sidebarOpen, onClick, children }: {
+function NavItem({ view, label, expanded, active, sidebarOpen, onClick, badge, children }: {
   view: AppView
   label: string
   expanded: boolean
   active: AppView
   sidebarOpen: boolean
   onClick: () => void
+  badge?: number
   children: React.ReactNode
 }) {
-  const isActive = active === view && sidebarOpen
+  const isActive = active === view && (sidebarOpen || FULL_WIDTH_VIEWS.has(view))
 
   if (expanded) {
     return (
@@ -928,7 +959,14 @@ function NavItem({ view, label, expanded, active, sidebarOpen, onClick, children
             : 'bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04]'}`}
         style={{ fontFamily: 'inherit' }}
       >
-        <span className="shrink-0">{children}</span>
+        <span className="shrink-0 relative">
+          {children}
+          {!!badge && (
+            <span className="absolute -top-1.5 -right-1.5 min-w-[14px] h-[14px] rounded-full bg-amber-500 text-black text-[9px] font-700 flex items-center justify-center px-0.5">
+              {badge}
+            </span>
+          )}
+        </span>
         <span className="truncate">{label}</span>
       </button>
     )
@@ -937,8 +975,13 @@ function NavItem({ view, label, expanded, active, sidebarOpen, onClick, children
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button onClick={onClick} className={`rail-btn ${isActive ? 'active' : ''}`}>
+        <button onClick={onClick} className={`rail-btn ${isActive ? 'active' : ''} relative`}>
           {children}
+          {!!badge && (
+            <span className="absolute -top-0.5 -right-0.5 min-w-[14px] h-[14px] rounded-full bg-amber-500 text-black text-[9px] font-700 flex items-center justify-center px-0.5">
+              {badge}
+            </span>
+          )}
         </button>
       </TooltipTrigger>
       <TooltipContent side="right" sideOffset={8}
@@ -995,7 +1038,7 @@ function DesktopEmptyState({ userName }: { userName: string | null }) {
           <span className="text-text-2">What would you like to do?</span>
         </h1>
         <p className="text-[15px] text-text-3 mb-12">
-          Create a new session to start chatting
+          Create a new chat to start chatting
         </p>
         <button
           onClick={() => setNewSessionOpen(true)}
@@ -1008,7 +1051,7 @@ function DesktopEmptyState({ userName }: { userName: string | null }) {
             <line x1="12" y1="5" x2="12" y2="19" />
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
-          New Session
+          New Chat
         </button>
       </div>
     </div>

package/src/components/layout/daemon-indicator.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { api } from '@/lib/api-client'
+import { useWs } from '@/hooks/use-ws'
 
 interface DaemonStatus {
   running: boolean
@@ -21,11 +22,8 @@ export function DaemonIndicator() {
     } catch { /* ignore */ }
   }
 
-  useEffect(() => {
-    fetchStatus()
-    const interval = setInterval(fetchStatus, 30_000)
-    return () => clearInterval(interval)
-  }, [])
+  useEffect(() => { fetchStatus() }, [])
+  useWs('daemon', fetchStatus, 30_000)
 
   const toggle = async () => {
     try {

package/src/components/logs/log-list.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { api } from '@/lib/api-client'
+import { useWs } from '@/hooks/use-ws'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 
@@ -67,12 +68,7 @@ export function LogList() {
     loadAgents()
   }, [fetchLogs])
 
-  // Auto-refresh every 3s
-  useEffect(() => {
-    if (!autoRefresh) return
-    const id = setInterval(fetchLogs, 3000)
-    return () => clearInterval(id)
-  }, [autoRefresh, fetchLogs])
+  useWs('logs', fetchLogs, autoRefresh ? 3000 : undefined)
 
   const clearLogs = async () => {
     try {
@@ -151,7 +147,7 @@ export function LogList() {
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Controls */}
-      <div className="px-4 py-2 space-y-2 shrink-0">
+      <div className="px-5 py-2 space-y-2 shrink-0">
         {/* Search */}
         <input
           value={search}
@@ -250,12 +246,12 @@ export function LogList() {
       </div>
 
       {/* Total count */}
-      <div className="px-4 py-1 text-[10px] text-text-3/60">
+      <div className="px-5 py-1 text-[10px] text-text-3/60">
         {entries.length} of {total} entries
       </div>
 
       {/* Log entries */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto px-2 pb-20">
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 pb-8">
         {entries.length === 0 ? (
           <div className="flex items-center justify-center h-32 text-text-3 text-[12px]">
             No log entries