@swarmclawai/swarmclaw 0.4.0 → 0.4.5

package/src/components/chat/voice-overlay.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { VoiceConversationState } from '@/hooks/use-voice-conversation'
+
+interface VoiceOverlayProps {
+  state: VoiceConversationState
+  interimText: string
+  transcript: string
+  onStop: () => void
+}
+
+const STATE_LABELS: Record<VoiceConversationState, string> = {
+  idle: '',
+  listening: 'Listening...',
+  processing: 'Processing...',
+  speaking: 'Speaking...',
+}
+
+export function VoiceOverlay({ state, interimText, transcript, onStop }: VoiceOverlayProps) {
+  if (state === 'idle') return null
+
+  return (
+    <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-bg/90 backdrop-blur-sm">
+      {/* Animated indicator */}
+      <div className="relative">
+        <div className={`w-20 h-20 rounded-full flex items-center justify-center ${
+          state === 'listening'
+            ? 'bg-accent/20 animate-pulse'
+            : state === 'speaking'
+              ? 'bg-green-500/20'
+              : 'bg-yellow-500/20'
+        }`}>
+          <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+            state === 'listening'
+              ? 'bg-accent/30'
+              : state === 'speaking'
+                ? 'bg-green-500/30'
+                : 'bg-yellow-500/30'
+          }`}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={
+              state === 'listening' ? 'text-accent-bright' : state === 'speaking' ? 'text-green-400' : 'text-yellow-400'
+            }>
+              {state === 'speaking' ? (
+                <>
+                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+                </>
+              ) : (
+                <>
+                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                  <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                  <line x1="12" x2="12" y1="19" y2="22" />
+                </>
+              )}
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-[14px] font-500 text-text-2">{STATE_LABELS[state]}</div>
+
+      {/* Transcript display */}
+      {(transcript || interimText) && (
+        <div className="max-w-md px-6 text-center">
+          {transcript && <p className="text-[14px] text-text-1 mb-1">{transcript}</p>}
+          {interimText && <p className="text-[13px] text-text-3/60 italic">{interimText}</p>}
+        </div>
+      )}
+
+      {/* Stop button */}
+      <button
+        onClick={onStop}
+        className="mt-2 px-5 py-2 rounded-lg bg-red-500/10 text-red-400 text-[13px] font-600 hover:bg-red-500/20 transition-colors"
+      >
+        Stop Voice
+      </button>
+    </div>
+  )
+}

package/src/components/connectors/connector-list.tsx

@@ -104,8 +104,12 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
         const agent = agents[c.agentId]
         const isRunning = c.status === 'running'
         const isToggling = toggling === c.id
-        // Can only toggle if connector has credentials (or is WhatsApp which uses QR)
-        const hasCredentials = c.platform === 'whatsapp' || !!c.credentialId
+        // Can only toggle if connector has credentials (or uses non-token auth modes).
+        const hasCredentials = c.platform === 'whatsapp'
+          || c.platform === 'openclaw'
+          || c.platform === 'signal'
+          || (c.platform === 'bluebubbles' && (!!c.credentialId || !!c.config?.password))
+          || !!c.credentialId
         return (
           <div
             key={c.id}

package/src/components/connectors/connector-sheet.tsx

@@ -114,7 +114,7 @@ const PLATFORMS: {
     tokenHelp: 'Required when your OpenClaw gateway is auth-protected',
     configFields: [
       { key: 'wsUrl', label: 'WebSocket URL', placeholder: 'ws://localhost:18789', help: 'OpenClaw gateway WebSocket endpoint (root URL, not /ws)' },
-      { key: 'sessionKey', label: 'Session Key Filter', placeholder: 'main', help: 'Optional. If set, only inbound events for this OpenClaw session are processed.' },
+      { key: 'sessionKey', label: 'Chat Key Filter', placeholder: 'main', help: 'Optional. If set, only inbound events for this OpenClaw session are processed.' },
       { key: 'nodeId', label: 'Client Label', placeholder: 'swarmclaw', help: 'Optional display label shown in OpenClaw presence metadata.' },
       { key: 'role', label: 'Gateway Role', placeholder: 'operator', help: 'Optional role claim for connect handshake. Default is operator.' },
       { key: 'scopes', label: 'Scopes (CSV)', placeholder: 'operator.read,operator.write', help: 'Optional comma-separated scopes for OpenClaw connect.' },
@@ -122,6 +122,28 @@ const PLATFORMS: {
       { key: 'tickIntervalMs', label: 'Tick Interval Override (ms)', placeholder: '30000', help: 'Optional watchdog interval override when policy tick is unavailable.' },
     ],
   },
+  {
+    id: 'bluebubbles',
+    label: 'BlueBubbles',
+    color: '#2E89FF',
+    setupSteps: [
+      'Run BlueBubbles server on your macOS host and enable the REST API',
+      'Copy the BlueBubbles server password',
+      'After saving the connector, point BlueBubbles webhook to /api/connectors/<connector-id>/webhook',
+      'Optionally set dmPolicy=pairing to require explicit sender approval for new DMs',
+    ],
+    tokenLabel: 'BlueBubbles Password',
+    tokenHelp: 'Server password used for /api/v1/ping and /api/v1/message/text',
+    configFields: [
+      { key: 'serverUrl', label: 'Server URL', placeholder: 'http://127.0.0.1:1234', help: 'BlueBubbles server URL (no trailing /api path needed)' },
+      { key: 'chatIds', label: 'Allowed Chat IDs', placeholder: 'iMessage;-;+15551234567', help: 'Optional comma-separated chat IDs/guid fragments. Leave empty for all chats.' },
+      { key: 'dmPolicy', label: 'DM Policy', placeholder: 'open | allowlist | pairing | disabled', help: 'Access policy for direct-message senders. Default: open.' },
+      { key: 'allowFrom', label: 'Allowed Sender IDs', placeholder: '+15551234567,test@example.com', help: 'Optional comma-separated sender IDs for allowlist/pairing mode.' },
+      { key: 'outboundTarget', label: 'Default Outbound Target', placeholder: 'iMessage;-;+15551234567', help: 'Used when proactive sends omit "to".' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
+      { key: 'timeoutMs', label: 'Request Timeout (ms)', placeholder: '10000', help: 'Optional BlueBubbles API timeout in milliseconds.' },
+    ],
+  },
   {
     id: 'matrix',
     label: 'Matrix',
@@ -146,13 +168,14 @@ const PLATFORMS: {
     setupSteps: [
       'Create a Google Cloud project and enable the Google Chat API',
       'Create a service account and download the JSON key file',
-      'In Google Chat Admin, configure the bot with your app URL',
+      'In Google Chat Admin, configure event delivery to /api/connectors/<connector-id>/webhook',
       'Paste the full service account JSON as the bot token',
     ],
     tokenLabel: 'Service Account JSON',
     tokenHelp: 'Paste the full service account JSON key file contents',
     configFields: [
       { key: 'spaceIds', label: 'Space IDs', placeholder: 'spaces/AAAA123', help: 'Comma-separated Google Chat space IDs' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
     ],
   },
   {
@@ -163,13 +186,14 @@ const PLATFORMS: {
       'Register a bot in the Azure Bot Framework portal',
       'Note the Microsoft App ID and generate an App Secret',
       'Set up a public HTTPS endpoint for webhook delivery',
-      'Configure the messaging endpoint in Azure to your notify URL',
+      'After saving the connector, point Azure to /api/connectors/<connector-id>/webhook',
     ],
     tokenLabel: 'App Secret',
     tokenHelp: 'Microsoft App Secret from Azure Bot registration',
     configFields: [
       { key: 'appId', label: 'Microsoft App ID', placeholder: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', help: 'Azure Bot Framework App ID' },
-      { key: 'notifyUrl', label: 'Notify URL', placeholder: 'https://your-server.com/api/teams/webhook', help: 'Public HTTPS endpoint for receiving messages' },
+      { key: 'notifyUrl', label: 'Notify URL', placeholder: 'https://your-server.com/api/connectors/<id>/webhook', help: 'Public HTTPS endpoint for receiving messages (informational)' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
     ],
   },
   {
@@ -366,7 +390,7 @@ export function ConnectorSheet() {
                 <div>
                   <div className={`text-[14px] font-600 ${platform === p.id ? 'text-text' : 'text-text-2'}`}>{p.label}</div>
                   <div className="text-[11px] text-text-3 mt-0.5">
-                    {p.id === 'whatsapp' ? 'QR code pairing' : p.id === 'openclaw' ? 'WebSocket gateway' : p.id === 'signal' ? 'signal-cli binary' : p.id === 'matrix' ? 'Access token' : p.id === 'googlechat' ? 'Service account' : p.id === 'teams' ? 'Bot Framework' : 'Bot token'}
+                    {p.id === 'whatsapp' ? 'QR code pairing' : p.id === 'openclaw' ? 'WebSocket gateway' : p.id === 'bluebubbles' ? 'iMessage bridge' : p.id === 'signal' ? 'signal-cli binary' : p.id === 'matrix' ? 'Access token' : p.id === 'googlechat' ? 'Service account' : p.id === 'teams' ? 'Bot Framework' : 'Bot token'}
                   </div>
                 </div>
               </button>
@@ -552,7 +576,7 @@ export function ConnectorSheet() {
 
       {/* Platform-specific config */}
       {platformConfig.configFields.map((field) => {
-        const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds'
+        const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds' || field.key === 'allowFrom'
         if (isTagField) {
           const tags = (config[field.key] || '').split(',').map((s) => s.trim()).filter(Boolean)
           return (
@@ -732,7 +756,7 @@ export function ConnectorSheet() {
           </div>
           <p className="text-[11px] text-text-3">
             {waHasCreds
-              ? 'Reconnecting with saved session, this should only take a moment'
+              ? 'Reconnecting with saved credentials, this should only take a moment'
               : 'Connecting to WhatsApp, QR code will appear shortly'}
           </p>
           {waHasCreds && (

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

@@ -6,7 +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 { 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'
@@ -37,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'
@@ -53,7 +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 setUser = useAppStore((s) => s.setUser)
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const activeView = useAppStore((s) => s.activeView)
@@ -69,6 +70,7 @@ 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])
@@ -128,6 +130,7 @@ 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) => {
@@ -145,15 +148,11 @@ export function AppLayout() {
   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)
@@ -245,6 +244,11 @@ export function AppLayout() {
                 <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="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">
+                <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={() => 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" />
@@ -355,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' }}
@@ -368,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" />
@@ -486,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" />
@@ -512,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={() => {
@@ -524,7 +528,7 @@ export function AppLayout() {
                   shadow-[0_2px_12px_rgba(99,102,241,0.15)]"
                 style={{ fontFamily: 'inherit' }}
               >
-                + 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' : '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>
             )}
@@ -557,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 />}
@@ -591,6 +596,8 @@ export function AppLayout() {
             <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">
@@ -606,7 +613,7 @@ export function AppLayout() {
                     <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' : 'New'}
+                    {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>
@@ -619,6 +626,7 @@ export function AppLayout() {
               {activeView === 'mcp_servers' && <McpServerList />}
               {activeView === 'knowledge' && <KnowledgeList />}
               {activeView === 'plugins' && <PluginList />}
+              {activeView === 'projects' && <ProjectList />}
               {activeView === 'usage' && <UsageList />}
               {activeView === 'runs' && <RunList />}
               {activeView === 'logs' && <LogList />}
@@ -629,7 +637,6 @@ export function AppLayout() {
         </div>
       </ErrorBoundary>
 
-      <SettingsSheet />
       <AgentSheet />
       <ScheduleSheet />
       <MemorySheet />
@@ -642,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]">
@@ -735,13 +743,15 @@ 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 FULL_WIDTH_VIEWS = new Set<AppView>([
   'schedules', 'secrets', 'providers', 'skills',
   'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
-  'usage', 'runs', 'logs',
+  'usage', 'runs', 'logs', 'settings', 'projects',
 ])
 
 const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; title: string; description: string; features: string[] }> = {
@@ -754,14 +764,14 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
   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',
@@ -785,7 +795,7 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
     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',
@@ -796,7 +806,7 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
   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: {
@@ -820,15 +830,27 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
   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 }) {
@@ -1016,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)}
@@ -1029,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/projects/project-list.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+export function ProjectList() {
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
+  const agents = useAppStore((s) => s.agents)
+  const tasks = useAppStore((s) => s.tasks)
+  const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
+  const setEditingProjectId = useAppStore((s) => s.setEditingProjectId)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
+  const setActiveProjectFilter = useAppStore((s) => s.setActiveProjectFilter)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => { loadProjects() }, [])
+
+  const filtered = useMemo(() => {
+    return Object.values(projects)
+      .filter((p) => {
+        if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false
+        return true
+      })
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [projects, search])
+
+  const entityCounts = useMemo(() => {
+    const counts: Record<string, { agents: number; tasks: number }> = {}
+    for (const p of Object.values(projects)) {
+      counts[p.id] = { agents: 0, tasks: 0 }
+    }
+    for (const a of Object.values(agents)) {
+      if (a.projectId && counts[a.projectId]) counts[a.projectId].agents++
+    }
+    for (const t of Object.values(tasks)) {
+      if (t.projectId && counts[t.projectId]) counts[t.projectId].tasks++
+    }
+    return counts
+  }, [projects, agents, tasks])
+
+  if (!filtered.length && !search) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+            <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>
+        </div>
+        <p className="font-display text-[15px] font-600 text-text-2">No projects yet</p>
+        <p className="text-[13px] text-text-3/50">Group agents, tasks, and schedules into projects</p>
+        <button
+          onClick={() => { setEditingProjectId(null); setProjectSheetOpen(true) }}
+          className="inline-flex items-center gap-1.5 px-4 py-2 text-[13px] font-500 text-white bg-accent rounded-lg hover:bg-accent-bright transition-colors"
+        >
+          <span className="text-lg leading-none">+</span> New Project
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto">
+      <div className="p-4 pb-0">
+        <div className="flex items-center gap-2 mb-4">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search projects..."
+            className="flex-1 px-3 py-2 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-2">
+        {filtered.map((project) => {
+          const counts = entityCounts[project.id] || { agents: 0, tasks: 0 }
+          const isActive = activeProjectFilter === project.id
+          return (
+            <div
+              key={project.id}
+              className={`group relative p-4 rounded-xl border transition-colors cursor-pointer ${
+                isActive
+                  ? 'bg-accent/10 border-accent/30'
+                  : 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06]'
+              }`}
+              onClick={() => setActiveProjectFilter(isActive ? null : project.id)}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  {project.color && (
+                    <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: project.color }} />
+                  )}
+                  <div className="min-w-0">
+                    <div className="font-display text-[14px] font-600 text-text-1 truncate">{project.name}</div>
+                    {project.description && (
+                      <p className="text-[12px] text-text-3/60 mt-0.5 line-clamp-2">{project.description}</p>
+                    )}
+                  </div>
+                </div>
+                <button
+                  onClick={(e) => { e.stopPropagation(); setEditingProjectId(project.id); setProjectSheetOpen(true) }}
+                  className="opacity-0 group-hover:opacity-100 p-1.5 rounded-md hover:bg-white/[0.08] transition-all text-text-3/50 hover:text-text-2"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                  </svg>
+                </button>
+              </div>
+              <div className="flex items-center gap-3 mt-2.5 text-[11px] text-text-3/50">
+                <span>{counts.agents} agent{counts.agents !== 1 ? 's' : ''}</span>
+                <span>{counts.tasks} task{counts.tasks !== 1 ? 's' : ''}</span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}