@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/agents/agent-sheet.tsx

@@ -11,6 +11,9 @@ import type { ProviderType, ClaudeSkill } from '@/types'
 import { AVAILABLE_TOOLS, PLATFORM_TOOLS } from '@/lib/tool-definitions'
 import { NATIVE_CAPABILITY_PROVIDER_IDS, NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
 import { AgentAvatar } from './agent-avatar'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { randomSoul } from '@/lib/soul-suggestions'
+import { SectionLabel } from '@/components/shared/section-label'
 
 const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
 
@@ -92,7 +95,7 @@ export function AgentSheet() {
   const [mcpTools, setMcpTools] = useState<Record<string, { name: string; description: string }[]>>({})
   const [mcpToolsLoading, setMcpToolsLoading] = useState(false)
   const [fallbackCredentialIds, setFallbackCredentialIds] = useState<string[]>([])
-  const [platformAssignScope, setPlatformAssignScope] = useState<'self' | 'all'>('self')
+  // platformAssignScope is derived from isOrchestrator — no separate state needed
   const [capabilities, setCapabilities] = useState<string[]>([])
   const [capInput, setCapInput] = useState('')
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
@@ -167,13 +170,13 @@ export function AgentSheet() {
         setMcpServerIds(editing.mcpServerIds || [])
         setMcpDisabledTools(editing.mcpDisabledTools || [])
         setFallbackCredentialIds(editing.fallbackCredentialIds || [])
-        setPlatformAssignScope(editing.platformAssignScope || 'self')
+        // platformAssignScope derived from isOrchestrator — no separate state
         setCapabilities(editing.capabilities || [])
         setCapInput('')
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
         setProjectId(editing.projectId)
-        setAvatarSeed(editing.avatarSeed || '')
+        setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
         setThinkingLevel(editing.thinkingLevel || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
@@ -182,7 +185,7 @@ export function AgentSheet() {
       } else {
         setName('')
         setDescription('')
-        setSoul('')
+        setSoul(randomSoul())
         setSystemPrompt('')
         setProvider('claude-cli')
         setModel('')
@@ -195,7 +198,6 @@ export function AgentSheet() {
         setSkillIds([])
         setMcpDisabledTools([])
         setFallbackCredentialIds([])
-        setPlatformAssignScope('self')
         setCapabilities([])
         setCapInput('')
         setOllamaMode('local')
@@ -292,7 +294,7 @@ export function AgentSheet() {
       mcpServerIds,
       mcpDisabledTools: mcpDisabledTools.length ? mcpDisabledTools : undefined,
       fallbackCredentialIds,
-      platformAssignScope,
+      platformAssignScope: (isOrchestrator ? 'all' : 'self') as 'all' | 'self',
       capabilities,
       projectId: projectId || undefined,
       avatarSeed: avatarSeed.trim() || undefined,
@@ -305,8 +307,10 @@ export function AgentSheet() {
     }
     if (editing) {
       await updateAgent(editing.id, data)
+      toast.success('Agent saved')
     } else {
       await createAgent(data)
+      toast.success('Agent created')
     }
     await loadAgents()
     onClose()
@@ -315,6 +319,7 @@ export function AgentSheet() {
   const handleDelete = async () => {
     if (editing) {
       await deleteAgent(editing.id)
+      toast.success('Agent moved to trash')
       await loadAgents()
       onClose()
     }
@@ -452,12 +457,12 @@ export function AgentSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
+        <SectionLabel>Name</SectionLabel>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Avatar</label>
+        <SectionLabel>Avatar</SectionLabel>
         <div className="flex items-center gap-3">
           <AgentAvatar seed={avatarSeed || null} name={name || 'A'} size={40} />
           <input
@@ -470,25 +475,29 @@ export function AgentSheet() {
           />
           <button
             type="button"
-            onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
-            className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+            onClick={() => setAvatarSeed(crypto.randomUUID().slice(0, 8))}
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] hover:text-text-2 active:scale-95 shrink-0"
             style={{ fontFamily: 'inherit' }}
+            title="Shuffle avatar"
           >
-            Randomize
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <rect x="4" y="4" width="16" height="16" rx="2" />
+              <circle cx="9" cy="9" r="1" fill="currentColor" />
+              <circle cx="15" cy="15" r="1" fill="currentColor" />
+            </svg>
+            Shuffle
           </button>
         </div>
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Description</label>
+        <SectionLabel>Description</SectionLabel>
         <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What does this agent do?" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
       {/* Capabilities — hidden for OpenClaw (gateway manages its own capabilities) */}
       {!openclawEnabled && <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Capabilities <span className="normal-case tracking-normal font-normal text-text-3">(for agent delegation)</span>
-        </label>
+        <SectionLabel>Capabilities <span className="normal-case tracking-normal font-normal text-text-3">(for agent delegation)</span></SectionLabel>
         <div className="flex flex-wrap gap-1.5 mb-2">
           {capabilities.map((cap) => (
             <span
@@ -629,6 +638,20 @@ export function AgentSheet() {
           </label>
           <div className="flex items-center gap-2 mb-3">
             <p className="text-[12px] text-text-3/60">Define the agent&apos;s voice, tone, and personality. Injected before the system prompt.</p>
+            <button
+              type="button"
+              onClick={() => setSoul(randomSoul())}
+              className="inline-flex items-center gap-1.5 shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+              title="Randomize personality"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+                <circle cx="9" cy="9" r="1" fill="currentColor" />
+                <circle cx="15" cy="15" r="1" fill="currentColor" />
+              </svg>
+              Shuffle
+            </button>
             <button onClick={() => soulFileRef.current?.click()} className="shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-surface text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors" style={{ fontFamily: 'inherit' }}>Upload .md</button>
             <input ref={soulFileRef} type="file" accept=".md,.txt,.markdown" onChange={handleFileUpload(setSoul)} className="hidden" />
           </div>
@@ -854,7 +877,7 @@ export function AgentSheet() {
       )}
 
       {!openclawEnabled && <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Provider</label>
+        <SectionLabel>Provider</SectionLabel>
         <div className="grid grid-cols-3 gap-3">
           {providers.filter((p) => !isOrchestrator || p.id !== 'claude-cli').map((p) => {
             const isConnected = !p.requiresApiKey || Object.values(credentials).some((c) => c.provider === p.id)
@@ -883,7 +906,7 @@ export function AgentSheet() {
 
       {!openclawEnabled && currentProvider && currentProvider.models.length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Model</label>
+          <SectionLabel>Model</SectionLabel>
           <ModelCombobox
             providerId={currentProvider.id}
             value={model}
@@ -900,7 +923,7 @@ export function AgentSheet() {
       {/* Ollama Mode Toggle */}
       {!openclawEnabled && provider === 'ollama' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Mode</label>
+          <SectionLabel>Mode</SectionLabel>
           <div className="flex p-1 rounded-[14px] bg-surface border border-white/[0.06]">
             {(['local', 'cloud'] as const).map((mode) => (
               <button
@@ -931,9 +954,7 @@ export function AgentSheet() {
 
       {!openclawEnabled && (currentProvider?.requiresApiKey || currentProvider?.optionalApiKey || (provider === 'ollama' && ollamaMode === 'cloud')) && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            API Key{currentProvider?.optionalApiKey && !currentProvider?.requiresApiKey && <span className="normal-case tracking-normal font-normal text-text-3"> (optional)</span>}
-          </label>
+          <SectionLabel>API Key{currentProvider?.optionalApiKey && !currentProvider?.requiresApiKey && <span className="normal-case tracking-normal font-normal text-text-3"> (optional)</span>}</SectionLabel>
           {providerCredentials.length > 0 && !addingKey ? (
             <div className="flex gap-2">
               <select value={credentialId || ''} onChange={(e) => {
@@ -1037,9 +1058,7 @@ export function AgentSheet() {
 
       {currentProvider?.requiresEndpoint && (provider === 'openclaw' || (provider === 'ollama' && ollamaMode === 'local')) && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            {provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}
-          </label>
+          <SectionLabel>{provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}</SectionLabel>
           <input type="text" value={apiEndpoint || ''} onChange={(e) => setApiEndpoint(e.target.value || null)} placeholder={currentProvider.defaultEndpoint || 'http://localhost:11434'} className={`${inputClass} font-mono text-[14px]`} />
           {provider === 'openclaw' && (
             <p className="text-[13px] text-text-3/70 mt-2">The URL of your OpenClaw gateway</p>
@@ -1058,7 +1077,7 @@ export function AgentSheet() {
                 <div
                   onClick={() => setTools((prev) => prev.includes(t.id) ? prev.filter((x) => x !== t.id) : [...prev, t.id])}
                   className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${tools.includes(t.id) ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                    ${tools.includes(t.id) ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                 >
                   <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                     ${tools.includes(t.id) ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1082,7 +1101,7 @@ export function AgentSheet() {
                 <div
                   onClick={() => setTools((prev) => prev.includes(t.id) ? prev.filter((x) => x !== t.id) : [...prev, t.id])}
                   className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${tools.includes(t.id) ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                    ${tools.includes(t.id) ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                 >
                   <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                     ${tools.includes(t.id) ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1092,22 +1111,6 @@ export function AgentSheet() {
               </label>
             ))}
           </div>
-          {(tools.includes('manage_tasks') || tools.includes('manage_schedules')) && (
-            <div className="mt-4 ml-1 pt-3 border-t border-white/[0.04]">
-              <label className="flex items-center gap-3 cursor-pointer">
-                <div
-                  onClick={() => setPlatformAssignScope((prev) => prev === 'all' ? 'self' : 'all')}
-                  className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${platformAssignScope === 'all' ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
-                >
-                  <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
-                    ${platformAssignScope === 'all' ? 'left-[22px]' : 'left-0.5'}`} />
-                </div>
-                <span className="font-display text-[14px] font-600 text-text-2">Assign to Other Agents</span>
-                <span className="text-[12px] text-text-3">Allow this agent to assign tasks and schedules to other agents</span>
-              </label>
-            </div>
-          )}
         </div>
       )}
 
@@ -1259,7 +1262,7 @@ export function AgentSheet() {
                               enabled ? [...prev, fullName] : prev.filter((x) => x !== fullName)
                             )}
                             className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                              ${enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                              ${enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                           >
                             <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                               ${enabled ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1287,35 +1290,25 @@ export function AgentSheet() {
                 if (next && provider === 'claude-cli') setProvider('anthropic')
               }}
               className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer
-                ${isOrchestrator ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                ${isOrchestrator ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
             >
               <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                 ${isOrchestrator ? 'left-[22px]' : 'left-0.5'}`} />
             </div>
-            <span className="font-display text-[14px] font-600 text-text-2">Orchestrator</span>
-            <span className="text-[12px] text-text-3">Can delegate tasks to other agents</span>
+            <span className="font-display text-[14px] font-600 text-text-2">Can Delegate to Other Agents</span>
+            <span className="text-[12px] text-text-3">Route work to specialized agents and coordinate multi-agent tasks</span>
           </label>
         </div>
       )}
 
       {provider !== 'openclaw' && isOrchestrator && agentOptions.length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Available Agents</label>
-          <div className="flex flex-wrap gap-2">
-            {agentOptions.map((a) => (
-              <button
-                key={a.id}
-                onClick={() => toggleAgent(a.id)}
-                className={`px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                  ${subAgentIds.includes(a.id)
-                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {a.name}
-              </button>
-            ))}
-          </div>
+          <SectionLabel>Available Agents</SectionLabel>
+          <AgentPickerList
+            agents={agentOptions}
+            selected={subAgentIds}
+            onSelect={(id) => toggleAgent(id)}
+          />
         </div>
       )}
 
@@ -1366,7 +1359,7 @@ export function AgentSheet() {
           onClick={handleTestAndSave}
           disabled={!name.trim() || providerNeedsKey || testStatus === 'testing' || saving || (!openclawEnabled && testStatus === 'pass')}
           className={`flex-1 py-3.5 rounded-[14px] border-none text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-60 transition-all hover:brightness-110
-            ${testStatus === 'pass' ? 'bg-emerald-600 shadow-[0_4px_20px_rgba(16,185,129,0.25)]' : 'bg-[#6366F1] shadow-[0_4px_20px_rgba(99,102,241,0.25)]'}`}
+            ${testStatus === 'pass' ? 'bg-emerald-600 shadow-[0_4px_20px_rgba(16,185,129,0.25)]' : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.25)]'}`}
           style={{ fontFamily: 'inherit' }}
         >
           {openclawEnabled

package/src/components/auth/access-key-gate.tsx

@@ -88,7 +88,14 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
     }
   }
 
-  if (checking) return null
+  if (checking) return (
+    <div className="h-full flex items-center justify-center bg-bg">
+      <div
+        className="h-6 w-6 rounded-full border-2 border-white/[0.08] border-t-accent-bright"
+        style={{ animation: 'spin 0.8s linear infinite' }}
+      />
+    </div>
+  )
 
   return (
     <div className="h-full flex flex-col items-center justify-center px-8 bg-bg relative overflow-hidden">
@@ -192,7 +199,7 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
             <button
               onClick={handleClaimKey}
               disabled={loading}
-              className="px-12 py-4 rounded-[16px] border-none bg-[#6366F1] text-white text-[16px] font-display font-600
+              className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
                 cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
                 shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
             >
@@ -233,7 +240,7 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
               <button
                 type="submit"
                 disabled={!key.trim() || loading}
-                className="px-12 py-4 rounded-[16px] border-none bg-[#6366F1] text-white text-[16px] font-display font-600
+                className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
                   cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
                   shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
               >

package/src/components/auth/setup-wizard.tsx

@@ -819,7 +819,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
               <button
                 onClick={saveProviderAndContinue}
                 disabled={(requiresKey && !apiKey.trim()) || saving}
-                className="px-8 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-display font-600
+                className="px-8 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600
                   cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
                   shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
               >
@@ -923,7 +923,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
               <button
                 onClick={createStarterAgent}
                 disabled={!agentName.trim() || saving}
-                className="px-10 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-display font-600
+                className="px-10 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600
                   cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
                   shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
               >

package/src/components/auth/user-picker.tsx

@@ -2,22 +2,25 @@
 
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
 
 export function UserPicker() {
   const setUser = useAppStore((s) => s.setUser)
+  const loadSettings = useAppStore((s) => s.loadSettings)
   const [name, setName] = useState('')
+  const [avatarSeed, setAvatarSeed] = useState(() => Math.random().toString(36).slice(2, 10))
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     const trimmed = name.trim()
     if (!trimmed) return
     const userName = trimmed.toLowerCase()
-    // Save server-side so it persists across devices
     try {
-      await api('PUT', '/settings', { userName })
+      await api('PUT', '/settings', { userName, userAvatarSeed: avatarSeed.trim() || undefined })
     } catch { /* still set locally */ }
     setUser(userName)
+    loadSettings()
   }
 
   return (
@@ -71,10 +74,35 @@ export function UserPicker() {
               focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
             style={{ fontFamily: 'inherit' }}
           />
+
+          {/* Avatar picker */}
+          <div className="flex flex-col items-center gap-3">
+            <AgentAvatar seed={avatarSeed || null} name={name || '?'} size={64} />
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={avatarSeed}
+                onChange={(e) => setAvatarSeed(e.target.value)}
+                placeholder="Avatar seed"
+                className="w-[160px] px-3 py-2 rounded-[10px] border border-white/[0.08] bg-surface
+                  text-text text-[13px] text-center outline-none transition-all
+                  focus:border-accent-bright/30"
+              />
+              <button
+                type="button"
+                onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
+                className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600
+                  cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+              >
+                Randomize
+              </button>
+            </div>
+          </div>
+
           <button
             type="submit"
             disabled={!name.trim()}
-            className="px-12 py-4 rounded-[16px] border-none bg-[#6366F1] text-white text-[16px] font-display font-600
+            className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
               cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
               shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
             style={{ fontFamily: 'inherit' }}

package/src/components/chat/activity-moment.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+const NOTABLE_TOOLS: Record<string, { label: string; color: string; icon: 'brain' | 'clipboard' | 'delegate' | 'search' | 'message' }> = {
+  memory: { label: 'Committed to memory', color: '#A855F7', icon: 'brain' },
+  memory_tool: { label: 'Committed to memory', color: '#A855F7', icon: 'brain' },
+  manage_tasks: { label: 'Created a task', color: '#EC4899', icon: 'clipboard' },
+  manage_schedules: { label: 'Scheduled something', color: '#EC4899', icon: 'clipboard' },
+  manage_agents: { label: 'Created an agent', color: '#EC4899', icon: 'clipboard' },
+  delegate_to_claude_code: { label: 'Delegated to Claude Code', color: '#38BDF8', icon: 'delegate' },
+  delegate_to_codex_cli: { label: 'Delegated to Codex', color: '#38BDF8', icon: 'delegate' },
+  delegate_to_opencode_cli: { label: 'Delegated to OpenCode', color: '#38BDF8', icon: 'delegate' },
+  web_search: { label: 'Searched the web', color: '#22C55E', icon: 'search' },
+  connector_message_tool: { label: 'Sent a message', color: '#F97316', icon: 'message' },
+}
+
+function extractSnippet(toolName: string, toolInput: string): string | null {
+  try {
+    const parsed = JSON.parse(toolInput)
+    if ((toolName === 'memory' || toolName === 'memory_tool') && parsed.title) return parsed.title
+    if ((toolName === 'memory' || toolName === 'memory_tool') && parsed.key) return parsed.key
+    if (toolName === 'manage_tasks' && parsed.title) return parsed.title
+    if (toolName === 'manage_schedules' && parsed.name) return parsed.name
+    if (toolName === 'manage_agents' && parsed.name) return parsed.name
+    if (toolName.startsWith('delegate_to_') && parsed.task) return parsed.task
+    if (toolName === 'web_search' && parsed.query) return parsed.query
+    if (toolName === 'connector_message_tool' && parsed.to) return parsed.to
+  } catch { /* ignore parse errors */ }
+  return null
+}
+
+function MomentIcon({ icon, color }: { icon: string; color: string }) {
+  switch (icon) {
+    case 'brain':
+      return (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
+          <path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z" />
+          <line x1="10" y1="22" x2="14" y2="22" />
+        </svg>
+      )
+    case 'delegate':
+      return (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
+          <path d="M7 17l9.2-9.2M17 17V7H7" />
+        </svg>
+      )
+    case 'search':
+      return (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+      )
+    case 'message':
+      return (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
+          <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>
+      )
+    default: // clipboard
+      return (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
+          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+          <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
+        </svg>
+      )
+  }
+}
+
+interface Props {
+  toolName: string
+  toolInput: string
+  onDismiss: () => void
+}
+
+export function ActivityMoment({ toolName, toolInput, onDismiss }: Props) {
+  const config = NOTABLE_TOOLS[toolName]
+  const [phase, setPhase] = useState<'in' | 'out'>('in')
+
+  useEffect(() => {
+    const holdTimer = setTimeout(() => setPhase('out'), 2000)
+    const dismissTimer = setTimeout(onDismiss, 2500)
+    return () => {
+      clearTimeout(holdTimer)
+      clearTimeout(dismissTimer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  if (!config) return null
+
+  const snippet = extractSnippet(toolName, toolInput)
+
+  return (
+    <div
+      className="absolute bottom-full left-0 z-10 pointer-events-none mb-1.5"
+      style={{
+        animation: phase === 'in'
+          ? 'activity-moment-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards'
+          : 'activity-moment-out 0.4s cubic-bezier(0.4, 0, 1, 1) forwards',
+      }}
+    >
+      <div
+        className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] shadow-lg whitespace-nowrap"
+        style={{
+          background: `${config.color}18`,
+          border: `1px solid ${config.color}30`,
+        }}
+      >
+        <MomentIcon icon={config.icon} color={config.color} />
+        <span className="text-[10px] font-600" style={{ color: config.color }}>
+          {config.label}
+        </span>
+        {snippet && (
+          <span className="text-[10px] text-text-3/60 max-w-[120px] truncate">
+            {snippet}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function isNotableTool(name: string): boolean {
+  return name in NOTABLE_TOOLS
+}
+
+const HEART_PATH = 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
+
+export function HeartbeatMoment({ onDismiss }: { onDismiss: () => void }) {
+  const [phase, setPhase] = useState<'in' | 'out'>('in')
+
+  useEffect(() => {
+    const holdTimer = setTimeout(() => setPhase('out'), 2000)
+    const dismissTimer = setTimeout(onDismiss, 2500)
+    return () => {
+      clearTimeout(holdTimer)
+      clearTimeout(dismissTimer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div
+      className="absolute bottom-full left-0 z-10 pointer-events-none mb-1.5"
+      style={{
+        animation: phase === 'in'
+          ? 'activity-moment-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards'
+          : 'activity-moment-out 0.4s cubic-bezier(0.4, 0, 1, 1) forwards',
+      }}
+    >
+      <div
+        className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] shadow-lg whitespace-nowrap"
+        style={{
+          background: 'rgba(34,197,94,0.1)',
+          border: '1px solid rgba(34,197,94,0.2)',
+        }}
+      >
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="#22c55e">
+          <path d={HEART_PATH} />
+        </svg>
+        <span className="text-[10px] font-600" style={{ color: '#22c55e' }}>
+          Heartbeat OK
+        </span>
+      </div>
+    </div>
+  )
+}

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

@@ -14,6 +14,7 @@ import {
   getSessionConnector,
 } from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { toast } from 'sonner'
 
 function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
@@ -196,6 +197,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
         await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: next })
         await loadSessions()
       }
+      toast.success(`Heartbeat ${next ? 'enabled' : 'disabled'}`)
     } finally {
       setHeartbeatSaving(false)
     }

package/src/components/chat/chat-tool-toggles.tsx

@@ -80,7 +80,7 @@ export function ChatToolToggles({ session }: Props) {
                     <div
                       onClick={() => toggleTool(tool.id)}
                       className={`w-8 h-[18px] rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                        ${enabled ? 'bg-[#6366F1]' : 'bg-white/[0.12]'}`}
+                        ${enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
                     >
                       <div className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white transition-all duration-200
                         ${enabled ? 'left-[16px]' : 'left-[2px]'}`} />