@swarmclawai/swarmclaw 0.6.0 → 0.6.3

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

@@ -2,27 +2,40 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
-import { ConnectorPlatformBadge, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
+import { ConnectorPlatformIcon, ConnectorPlatformBadge, CONNECTOR_PLATFORM_META, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
-export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }) {
-  void _inSidebar
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  const d = new Date(ts)
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const connectors = useAppStore((s) => s.connectors)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const setConnectorSheetOpen = useAppStore((s) => s.setConnectorSheetOpen)
   const setEditingConnectorId = useAppStore((s) => s.setEditingConnectorId)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
   const [toggling, setToggling] = useState<string | null>(null)
   const [reconnecting, setReconnecting] = useState<string | null>(null)
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const refresh = useCallback(async () => {
-    await Promise.all([loadConnectors(), loadAgents()])
+    await Promise.all([loadConnectors(), loadAgents(), loadChatrooms()])
     setLoaded(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadConnectors, loadAgents])
 
   useEffect(() => { void refresh() }, [refresh])
@@ -55,7 +68,6 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     setReconnecting(c.id)
     setError(null)
     try {
-      // Stop then start to reconnect
       try { await api('PUT', `/connectors/${c.id}`, { action: 'stop' }) } catch { /* may already be stopped */ }
       await api('PUT', `/connectors/${c.id}`, { action: 'start' })
       await refresh()
@@ -92,104 +104,170 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     )
   }
 
+  // Sidebar: compact list layout
+  if (inSidebar) {
+    return (
+      <div className="flex-1 overflow-y-auto pb-20">
+        {error && (
+          <div className="mx-4 mt-2 mb-1 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
+            {error}
+          </div>
+        )}
+        {list.map((c) => {
+          const agent = c.agentId ? agents[c.agentId] : null
+          const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
+          const isRunning = c.status === 'running'
+          const meta = CONNECTOR_PLATFORM_META[c.platform]
+          return (
+            <button
+              key={c.id}
+              onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
+              className="w-full flex items-center gap-3 px-5 py-2.5 hover:bg-white/[0.02] transition-colors cursor-pointer bg-transparent border-none text-left"
+            >
+              <ConnectorPlatformIcon platform={c.platform} size={16} />
+              <div className="flex-1 min-w-0">
+                <span className="text-[13px] font-600 text-text truncate block">{c.name}</span>
+                <span className="text-[11px] text-text-3 truncate block">
+                  {chatroom ? chatroom.name : agent?.name || meta?.label}
+                </span>
+              </div>
+              <span className={`shrink-0 w-2 h-2 rounded-full ${
+                isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
+              }`} />
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  // Main view: card grid
   return (
-    <div className="flex-1 overflow-y-auto pb-20">
+    <div className="flex-1 overflow-y-auto pb-20 px-5 pt-2">
       {error && (
-        <div className="mx-4 mt-2 mb-1 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
+        <div className="mb-3 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
           {error}
         </div>
       )}
-      {list.map((c) => {
-        const platformLabel = getConnectorPlatformLabel(c.platform)
-        const agent = agents[c.agentId]
-        const isRunning = c.status === 'running'
-        const isToggling = toggling === c.id
-        // 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}
-            className="w-full flex items-center gap-3 px-5 py-3 hover:bg-white/[0.02] transition-colors group"
-          >
-            {/* Clickable area — opens editor */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {list.map((c) => {
+          const platformLabel = getConnectorPlatformLabel(c.platform)
+          const agent = c.agentId ? agents[c.agentId] : null
+          const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
+          const isRunning = c.status === 'running'
+          const isToggling = toggling === c.id
+          const hasCredentials = c.platform === 'whatsapp'
+            || c.platform === 'openclaw'
+            || c.platform === 'signal'
+            || (c.platform === 'bluebubbles' && (!!c.credentialId || !!c.config?.password))
+            || !!c.credentialId
+          const lastMsg = c.presence?.lastMessageAt
+
+          return (
             <button
+              key={c.id}
               onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
-              className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer bg-transparent border-none text-left p-0"
+              className="group relative flex flex-col rounded-[14px] border border-white/[0.06] bg-surface p-4 cursor-pointer transition-all hover:border-white/[0.12] hover:bg-white/[0.02] text-left w-full"
+              style={{ fontFamily: 'inherit' }}
             >
-              <ConnectorPlatformBadge platform={c.platform} size={36} iconSize={16} />
+              {/* Header: platform badge + status */}
+              <div className="flex items-center gap-3 mb-3">
+                <ConnectorPlatformBadge platform={c.platform} size={40} iconSize={20} roundedClassName="rounded-[10px]" />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[14px] font-600 text-text truncate">{c.name}</span>
+                    <span className={`shrink-0 w-2 h-2 rounded-full ${
+                      isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
+                    }`} />
+                  </div>
+                  <span className="text-[11px] text-text-3 block">
+                    {isRunning ? 'Connected' : c.status === 'error' ? 'Error' : 'Stopped'}
+                    {c.qrDataUrl && ' · QR ready'}
+                  </span>
+                </div>
+              </div>
 
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-[13px] font-600 text-text truncate">{c.name}</span>
-                  <span
-                    className={`shrink-0 w-2 h-2 rounded-full ${
-                      isRunning ? 'bg-green-400' :
-                      c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
-                    }`}
-                  />
-                  {c.qrDataUrl && (
-                    <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-violet-400/80 bg-violet-400/[0.08] px-1.5 py-0.5 rounded-[5px]">
-                      QR Ready
-                    </span>
+              {/* Route target: agent or chatroom */}
+              <div className="flex items-center gap-2.5 mb-2.5 px-0.5">
+                {chatroom ? (
+                  <>
+                    <div className="w-6 h-6 rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                      </svg>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <span className="text-[12px] font-600 text-text-2 block truncate">{chatroom.name}</span>
+                      <span className="text-[10px] text-text-3/60 block">
+                        {chatroom.agentIds.length} agent{chatroom.agentIds.length !== 1 ? 's' : ''}
+                        {chatroom.chatMode === 'parallel' ? ' · parallel' : ' · sequential'}
+                      </span>
+                    </div>
+                  </>
+                ) : agent ? (
+                  <>
+                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={24} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-[12px] font-600 text-text-2 block truncate">{agent.name}</span>
+                      <span className="text-[10px] text-text-3/60 block">{agent.provider}/{agent.model}</span>
+                    </div>
+                  </>
+                ) : (
+                  <span className="text-[11px] text-text-3/50">{platformLabel}</span>
+                )}
+              </div>
+
+              {/* Footer: last message time + error */}
+              <div className="flex items-center gap-2 mt-auto pt-2 border-t border-white/[0.04]">
+                {c.lastError ? (
+                  <span className="text-[10px] text-red-400 truncate flex-1">
+                    {c.lastError.slice(0, 50)}{c.lastError.length > 50 ? '...' : ''}
+                  </span>
+                ) : lastMsg ? (
+                  <span className="text-[10px] text-text-3/60 flex-1">Last message {relativeTime(lastMsg)}</span>
+                ) : (
+                  <span className="text-[10px] text-text-3/40 flex-1">No messages yet</span>
+                )}
+
+                {/* Action buttons */}
+                <div className="flex gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+                  {c.status === 'error' && hasCredentials && (
+                    <button
+                      onClick={(e) => handleReconnect(e, c)}
+                      disabled={reconnecting === c.id}
+                      title="Reconnect"
+                      className="px-2 py-1 rounded-[6px] text-[10px] font-600 transition-all cursor-pointer border-none opacity-0 group-hover:opacity-100 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 disabled:opacity-50"
+                    >
+                      {reconnecting === c.id ? '...' : 'Reconnect'}
+                    </button>
+                  )}
+                  {hasCredentials && (
+                    <button
+                      onClick={(e) => handleToggle(e, c)}
+                      disabled={isToggling}
+                      title={isRunning ? 'Stop' : 'Start'}
+                      className={`w-7 h-7 rounded-[6px] flex items-center justify-center transition-all cursor-pointer border-none ${
+                        isToggling ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                      } ${isRunning
+                        ? 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
+                        : 'bg-green-500/10 text-green-400 hover:bg-green-500/20'
+                      } disabled:opacity-50`}
+                    >
+                      {isToggling ? (
+                        <span className="w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin" />
+                      ) : isRunning ? (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
+                      ) : (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 21,12 6,21" /></svg>
+                      )}
+                    </button>
                   )}
-                </div>
-                <div className="text-[11px] text-text-3 truncate">
-                  {c.lastError
-                    ? <span className="text-red-400">{c.lastError.slice(0, 60)}{c.lastError.length > 60 ? '...' : ''}</span>
-                    : <>{platformLabel} {agent ? `\u2192 ${agent.name}` : ''}</>
-                  }
                 </div>
               </div>
             </button>
-
-            {/* Reconnect button for error-state connectors */}
-            {c.status === 'error' && hasCredentials && (
-              <button
-                onClick={(e) => handleReconnect(e, c)}
-                disabled={reconnecting === c.id}
-                title="Reconnect"
-                aria-label="Reconnect connector"
-                className={`shrink-0 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 transition-all cursor-pointer border-none
-                  ${reconnecting === c.id ? 'opacity-50' : 'opacity-0 group-hover:opacity-100 focus:opacity-100'}
-                  bg-amber-500/10 text-amber-400 hover:bg-amber-500/20`}
-              >
-                {reconnecting === c.id ? '...' : 'Reconnect'}
-              </button>
-            )}
-
-            {/* Toggle button — visible on hover, only if connector has credentials */}
-            {hasCredentials && <button
-              onClick={(e) => handleToggle(e, c)}
-              disabled={isToggling}
-              title={isRunning ? 'Stop connector' : 'Start connector'}
-              aria-label={isRunning ? 'Stop connector' : 'Start connector'}
-              className={`shrink-0 w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer border-none ${
-                isToggling ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus:opacity-100'
-              } ${
-                isRunning
-                  ? 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
-                  : 'bg-green-500/10 text-green-400 hover:bg-green-500/20'
-              } disabled:opacity-50`}
-            >
-              {isToggling ? (
-                <span className="w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin" />
-              ) : isRunning ? (
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-                  <rect x="4" y="4" width="16" height="16" rx="2" />
-                </svg>
-              ) : (
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-                  <polygon points="6,3 21,12 6,21" />
-                </svg>
-              )}
-            </button>}
-          </div>
-        )
-      })}
+          )
+        })}
+      </div>
     </div>
   )
 }

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

@@ -9,8 +9,10 @@ import { toast } from 'sonner'
 import type { Connector, ConnectorPlatform } from '@/types'
 import { ConnectorPlatformBadge } from '@/components/shared/connector-platform-icon'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { SectionLabel } from '@/components/shared/section-label'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -220,6 +222,21 @@ const PLATFORMS: {
   },
 ]
 
+const COMMON_CONFIG_FIELDS: { key: string; label: string; placeholder: string; help?: string }[] = [
+  {
+    key: 'taskFollowups',
+    label: 'Task Follow-ups',
+    placeholder: 'true | false',
+    help: 'Enable automatic connector follow-up messages when this agent completes or fails a task.',
+  },
+  {
+    key: 'taskFollowupTemplate',
+    label: 'Task Follow-up Template',
+    placeholder: 'Task {status}: {title}\\n\\n{summary}',
+    help: 'Optional placeholders: {status}, {title}, {summary}, {taskId}.',
+  },
+]
+
 export function ConnectorSheet() {
   const open = useAppStore((s) => s.connectorSheetOpen)
   const setOpen = useAppStore((s) => s.setConnectorSheetOpen)
@@ -232,9 +249,14 @@ export function ConnectorSheet() {
   const loadAgents = useAppStore((s) => s.loadAgents)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
 
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
+
   const [name, setName] = useState('')
   const [platform, setPlatform] = useState<ConnectorPlatform>('discord')
   const [agentId, setAgentId] = useState('')
+  const [routeMode, setRouteMode] = useState<'agent' | 'chatroom'>('agent')
+  const [chatroomId, setChatroomId] = useState('')
   const [credentialId, setCredentialId] = useState('')
   const [config, setConfig] = useState<Record<string, string>>({})
   const [saving, setSaving] = useState(false)
@@ -255,8 +277,10 @@ export function ConnectorSheet() {
     if (open) {
       loadAgents()
       loadCredentials()
+      loadChatrooms()
       setShowSetup(false)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   // Sync form fields when editing connector changes (by ID, not reference)
@@ -265,13 +289,17 @@ export function ConnectorSheet() {
     if (editing) {
       setName(editing.name)
       setPlatform(editing.platform)
-      setAgentId(editing.agentId)
+      setAgentId(editing.agentId || '')
+      setRouteMode(editing.chatroomId ? 'chatroom' : 'agent')
+      setChatroomId(editing.chatroomId || '')
       setCredentialId(editing.credentialId || '')
       setConfig(editing.config || {})
     } else {
       setName('')
       setPlatform('discord')
       setAgentId('')
+      setRouteMode('agent')
+      setChatroomId('')
       setCredentialId('')
       setConfig({})
     }
@@ -308,13 +336,17 @@ export function ConnectorSheet() {
   useWs('connectors', pollWaStatus, isWaRunning ? 2000 : undefined)
 
   const handleSave = async () => {
-    if (!agentId) return
+    const hasTarget = routeMode === 'agent' ? !!agentId : !!chatroomId
+    if (!hasTarget) return
     setSaving(true)
+    const routePayload = routeMode === 'agent'
+      ? { agentId, chatroomId: null }
+      : { agentId: null, chatroomId }
     try {
       if (editing) {
-        await api('PUT', `/connectors/${editing.id}`, { name, agentId, credentialId: credentialId || null, config })
+        await api('PUT', `/connectors/${editing.id}`, { name, ...routePayload, credentialId: credentialId || null, config })
       } else {
-        await api('POST', '/connectors', { name: name || `${platformConfig?.label} Bot`, platform, agentId, credentialId: credentialId || null, config })
+        await api('POST', '/connectors', { name: name || `${platformConfig?.label} Bot`, platform, ...routePayload, credentialId: credentialId || null, config })
       }
       await loadConnectors()
       setOpen(false)
@@ -459,16 +491,51 @@ export function ConnectorSheet() {
         />
       </div>
 
-      {/* Agent selector */}
+      {/* Route mode toggle + target selector */}
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Route to Agent</label>
-        <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be handled by this agent</p>
-        <AgentPickerList
-          agents={agentList}
-          selected={agentId}
-          onSelect={(id) => setAgentId(id)}
-          showOrchBadge={true}
-        />
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Route Messages To</label>
+        <div className="flex gap-1 mb-3 p-1 rounded-[10px] bg-white/[0.04] border border-white/[0.06]">
+          <button
+            type="button"
+            onClick={() => setRouteMode('agent')}
+            className={`flex-1 py-2 px-3 rounded-[8px] text-[13px] font-600 transition-all cursor-pointer border-none ${
+              routeMode === 'agent' ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            Single Agent
+          </button>
+          <button
+            type="button"
+            onClick={() => setRouteMode('chatroom')}
+            className={`flex-1 py-2 px-3 rounded-[8px] text-[13px] font-600 transition-all cursor-pointer border-none ${
+              routeMode === 'chatroom' ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            Chat Room
+          </button>
+        </div>
+        {routeMode === 'agent' ? (
+          <>
+            <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be handled by this agent</p>
+            <AgentPickerList
+              agents={agentList}
+              selected={agentId}
+              onSelect={(id) => setAgentId(id)}
+              showOrchBadge={true}
+            />
+          </>
+        ) : (
+          <>
+            <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be routed to a chat room with multiple agents</p>
+            <ChatroomPickerList
+              chatrooms={Object.values(chatrooms)}
+              selected={chatroomId}
+              onSelect={(id) => setChatroomId(id)}
+            />
+          </>
+        )}
       </div>
 
       {/* Bot token credential */}
@@ -573,7 +640,7 @@ export function ConnectorSheet() {
       )}
 
       {/* Platform-specific config */}
-      {platformConfig.configFields.map((field) => {
+      {[...platformConfig.configFields, ...COMMON_CONFIG_FIELDS].map((field) => {
         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)
@@ -747,8 +814,8 @@ export function ConnectorSheet() {
       {editing && editing.platform === 'whatsapp' && (editing.status === 'running' || waConnecting) && !qrDataUrl && !waAuthenticated && (
         <div className="mb-6 p-5 rounded-[14px] border border-white/[0.06] bg-white/[0.01] text-center">
           <div className="flex items-center justify-center gap-2 mb-1">
-            <span className="w-3 h-3 rounded-full border-2 border-[#3B82F6] border-t-transparent animate-spin" />
-            <span className="text-[13px] font-600 text-[#3B82F6]">
+            <span className="w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />
+            <span className="text-[13px] font-600 text-blue-500">
               {waHasCreds ? 'Reconnecting...' : 'Waiting for QR code...'}
             </span>
           </div>
@@ -798,7 +865,7 @@ export function ConnectorSheet() {
         onCancel={() => { setOpen(false); setEditingId(null) }}
         onSave={handleSave}
         saveLabel={saving ? 'Saving...' : editing ? 'Save' : 'Create Connector'}
-        saveDisabled={saving || !agentId}
+        saveDisabled={saving || (routeMode === 'agent' ? !agentId : !chatroomId)}
         left={editing && (
           <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
             Delete

package/src/components/home/home-view.tsx

@@ -354,7 +354,7 @@ export function HomeView() {
                   >
                     <div className="relative">
                       <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={36} />
-                      <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[#1a1a2e] ${
+                      <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-surface ${
                         isTyping ? 'bg-accent-bright animate-pulse'
                           : isOnline ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)]'
                           : 'bg-text-3/30'

package/src/components/input/chat-input.tsx

@@ -7,6 +7,7 @@ import { uploadImage } from '@/lib/upload'
 import { useAutoResize } from '@/hooks/use-auto-resize'
 import { useSpeechRecognition } from '@/hooks/use-speech-recognition'
 import { FilePreview } from '@/components/shared/file-preview'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 
 interface Props {
   streaming: boolean
@@ -91,8 +92,8 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     try {
       const result = await uploadImage(file)
       addPendingFile({ file, path: result.path, url: result.url })
-    } catch {
-      // ignore upload errors
+    } catch (err: unknown) {
+      console.error('File upload failed:', err instanceof Error ? err.message : String(err))
     }
   }, [addPendingFile])
 
@@ -226,6 +227,31 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
               </button>
             )}
 
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => { useChatStore.getState().clearContext() }}
+                  disabled={streaming}
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
+                    text-text-3 text-[13px] cursor-pointer hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-200 disabled:opacity-30 disabled:pointer-events-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <line x1="2" y1="12" x2="22" y2="12" />
+                    <polyline points="8 8 4 12 8 16" />
+                    <polyline points="16 8 20 12 16 16" />
+                  </svg>
+                  <span className="hidden sm:inline">New context</span>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={8}
+                className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[10px] px-3.5 py-2.5 max-w-[220px]">
+                <div className="font-display text-[12px] font-600 mb-0.5">New context window</div>
+                <div className="text-[11px] text-text-3 leading-[1.4]">Adds a marker — messages above it won&apos;t be sent to the AI. Nothing is deleted.</div>
+              </TooltipContent>
+            </Tooltip>
+
             <div className="flex-1" />
 
             <span className="text-[11px] text-text-3/60 tabular-nums mr-2 font-mono">

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

@@ -55,6 +55,7 @@ import { MobileHeader } from './mobile-header'
 import { DaemonIndicator } from './daemon-indicator'
 import { NotificationCenter } from '@/components/shared/notification-center'
 import { ChatArea } from '@/components/chat/chat-area'
+import { CanvasPanel } from '@/components/canvas/canvas-panel'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { api } from '@/lib/api-client'
 import type { AppView } from '@/types'
@@ -91,6 +92,7 @@ export function AppLayout() {
   const appSettings = useAppStore((s) => s.appSettings)
   const [agentViewMode, setAgentViewMode] = useState<'chat' | 'config'>('chat')
   const [profileSheetOpen, setProfileSheetOpen] = useState(false)
+  const [canvasDismissedFor, setCanvasDismissedFor] = useState<string | null>(null)
 
   const handleShortcutKey = useCallback((e: KeyboardEvent) => {
     const mod = e.metaKey || e.ctrlKey
@@ -192,6 +194,10 @@ export function AppLayout() {
     : Object.values(agents)[0]?.id || null
   const isMainChat = activeView === 'agents' && currentAgentId === defaultAgentId
 
+  const currentSession = currentSessionId ? sessions[currentSessionId] : null
+  const hasCanvas = !!(currentSession?.canvasContent && canvasDismissedFor !== currentSessionId)
+  const canvasAgentName = currentSession?.agentId && agents[currentSession.agentId] ? agents[currentSession.agentId].name : undefined
+
   const goToMainChat = async () => {
     if (defaultAgentId) {
       await setCurrentAgent(defaultAgentId)
@@ -680,12 +686,23 @@ export function AppLayout() {
 
       {/* Main content */}
       <ErrorBoundary>
-        <div className="flex-1 flex flex-col h-full min-w-0 bg-bg">
+        <div className="flex-1 flex flex-col h-full min-h-0 min-w-0 bg-bg">
           {!isDesktop && <MobileHeader />}
           {activeView === 'home' ? (
             <HomeView />
           ) : activeView === 'agents' && hasSelectedSession ? (
-            <ChatArea />
+            <div className="flex-1 flex h-full min-h-0 min-w-0">
+              <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
+                <ChatArea />
+              </div>
+              {hasCanvas && currentSessionId && (
+                <CanvasPanel
+                  sessionId={currentSessionId}
+                  agentName={canvasAgentName}
+                  onClose={() => setCanvasDismissedFor(currentSessionId)}
+                />
+              )}
+            </div>
           ) : activeView === 'agents' ? (
             <div className="flex-1 flex flex-col">
               {!isDesktop ? (

package/src/components/projects/project-detail.tsx

@@ -44,7 +44,7 @@ function AssignAgentPicker({ projectId, onClose }: { projectId: string; onClose:
   return (
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute left-0 top-full mt-2 z-50 w-[260px] rounded-[12px] bg-[#1a1a2e]/95 backdrop-blur-xl border border-white/[0.1] shadow-[0_12px_40px_rgba(0,0,0,0.5)] overflow-hidden">
+      <div className="absolute left-0 top-full mt-2 z-50 w-[260px] rounded-[12px] bg-surface/95 backdrop-blur-xl border border-white/[0.1] shadow-[0_12px_40px_rgba(0,0,0,0.5)] overflow-hidden">
         <div className="p-2.5 border-b border-white/[0.06]">
           <input
             value={query}