@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/components/agents/personality-builder.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import type { PersonalityDraft } from '@/types'
 import { api } from '@/lib/api-client'
 import {
@@ -21,22 +21,33 @@ const labelClass = 'block text-[11px] font-600 uppercase tracking-wider text-tex
 
 export function PersonalityBuilder({ agentId: _agentId, fileType, content, onSave }: Props) {
   const [draft, setDraft] = useState<Record<string, string>>({})
+  const [initialDraft, setInitialDraft] = useState<Record<string, string>>({})
+  const [saveState, setSaveState] = useState<'idle' | 'saved'>('idle')
 
   useEffect(() => {
+    let parsed: Record<string, string> = {}
     if (fileType === 'IDENTITY.md') {
-      const parsed = parseIdentityMd(content)
-      setDraft({ name: parsed.name || '', creature: parsed.creature || '', vibe: parsed.vibe || '', emoji: parsed.emoji || '' })
+      const p = parseIdentityMd(content)
+      parsed = { name: p.name || '', creature: p.creature || '', vibe: p.vibe || '', emoji: p.emoji || '' }
     } else if (fileType === 'USER.md') {
-      const parsed = parseUserMd(content)
-      setDraft({ name: parsed.name || '', callThem: parsed.callThem || '', pronouns: parsed.pronouns || '', timezone: parsed.timezone || '', notes: parsed.notes || '', context: parsed.context || '' })
+      const p = parseUserMd(content)
+      parsed = { name: p.name || '', callThem: p.callThem || '', pronouns: p.pronouns || '', timezone: p.timezone || '', notes: p.notes || '', context: p.context || '' }
     } else if (fileType === 'SOUL.md') {
-      const parsed = parseSoulMd(content)
-      setDraft({ coreTruths: parsed.coreTruths || '', boundaries: parsed.boundaries || '', vibe: parsed.vibe || '', continuity: parsed.continuity || '' })
+      const p = parseSoulMd(content)
+      parsed = { coreTruths: p.coreTruths || '', boundaries: p.boundaries || '', vibe: p.vibe || '', continuity: p.continuity || '' }
     }
+    setDraft(parsed)
+    setInitialDraft(parsed)
+    setSaveState('idle')
   }, [content, fileType])
 
+  const isDirty = useMemo(() => {
+    return Object.keys(draft).some((k) => draft[k] !== (initialDraft[k] ?? ''))
+  }, [draft, initialDraft])
+
   const update = (key: string, value: string) => {
     setDraft((prev) => ({ ...prev, [key]: value }))
+    setSaveState('idle')
   }
 
   const handleSave = () => {
@@ -49,6 +60,9 @@ export function PersonalityBuilder({ agentId: _agentId, fileType, content, onSav
       serialized = serializeSoulMd(draft as PersonalityDraft['soul'])
     }
     onSave(serialized)
+    setInitialDraft({ ...draft })
+    setSaveState('saved')
+    setTimeout(() => setSaveState('idle'), 1500)
   }
 
   const fields = fileType === 'IDENTITY.md'
@@ -99,13 +113,27 @@ export function PersonalityBuilder({ agentId: _agentId, fileType, content, onSav
           )}
         </div>
       ))}
-      <button
-        onClick={handleSave}
-        className="self-start px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600 cursor-pointer transition-all hover:brightness-110"
-        style={{ fontFamily: 'inherit' }}
-      >
-        Apply to Raw Editor
-      </button>
+      <div className="flex items-center gap-3">
+        <button
+          onClick={handleSave}
+          className="self-start px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600 cursor-pointer transition-all hover:brightness-110 focus-visible:ring-1 focus-visible:ring-accent-bright/50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Apply to Raw Editor
+        </button>
+        {isDirty && saveState === 'idle' && (
+          <span className="inline-flex items-center gap-1.5 text-[11px] text-amber-400 font-600">
+            <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
+            Unsaved
+          </span>
+        )}
+        {saveState === 'saved' && (
+          <span className="inline-flex items-center gap-1.5 text-[11px] text-emerald-400 font-600">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+            Saved
+          </span>
+        )}
+      </div>
     </div>
   )
 }

package/src/components/agents/soul-library-picker.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { SOUL_LIBRARY, SOUL_ARCHETYPES, searchSouls, type SoulTemplate } from '@/lib/soul-library'
+
+interface SoulLibraryPickerProps {
+  open: boolean
+  onClose: () => void
+  onSelect: (soul: string) => void
+}
+
+export function SoulLibraryPicker({ open, onClose, onSelect }: SoulLibraryPickerProps) {
+  const [query, setQuery] = useState('')
+  const [archetype, setArchetype] = useState('All')
+
+  const results = useMemo(() => searchSouls(query, archetype), [query, archetype])
+
+  const handleSelect = (template: SoulTemplate) => {
+    onSelect(template.soul)
+    onClose()
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <div className="mb-6">
+        <h2 className="font-display text-[24px] font-700 tracking-[-0.03em] mb-1">Soul Library</h2>
+        <p className="text-[13px] text-text-3">Browse personality templates for your agent</p>
+      </div>
+
+      {/* Search */}
+      <div className="mb-4">
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search personalities..."
+          className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none focus-glow"
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+
+      {/* Archetype filter tabs */}
+      <div className="flex gap-1 flex-wrap mb-6">
+        {SOUL_ARCHETYPES.map((a) => (
+          <button
+            key={a}
+            onClick={() => setArchetype(a)}
+            className={`px-3 py-1.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border
+              ${archetype === a
+                ? '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}
+          </button>
+        ))}
+      </div>
+
+      {/* Results grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[60vh] overflow-y-auto pb-4">
+        {results.map((template) => (
+          <button
+            key={template.id}
+            onClick={() => handleSelect(template)}
+            className="text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 hover:border-accent-bright/20 transition-all cursor-pointer group"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <div className="flex items-start gap-2 mb-2">
+              <h4 className="text-[14px] font-600 text-text group-hover:text-accent-bright transition-colors">
+                {template.name}
+              </h4>
+              <span className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.06] text-text-3 text-[10px] font-600 shrink-0">
+                {template.archetype}
+              </span>
+            </div>
+            <p className="text-[12px] text-text-3 mb-2">{template.description}</p>
+            <p className="text-[11px] text-text-3/60 line-clamp-2 italic">{template.soul}</p>
+          </button>
+        ))}
+        {results.length === 0 && (
+          <p className="text-[13px] text-text-3 col-span-2 text-center py-8">No personalities match your search</p>
+        )}
+      </div>
+
+      <p className="text-[11px] text-text-3/50 mt-4 text-center">{SOUL_LIBRARY.length} personalities available</p>
+    </BottomSheet>
+  )
+}

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/canvas/canvas-panel.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useWs } from '@/hooks/use-ws'
+import { api } from '@/lib/api-client'
+
+interface CanvasPanelProps {
+  sessionId: string
+  agentName?: string
+  onClose: () => void
+}
+
+export function CanvasPanel({ sessionId, agentName, onClose }: CanvasPanelProps) {
+  const [content, setContent] = useState<string | null>(null)
+
+  const loadCanvas = useCallback(async () => {
+    try {
+      const res = await api<{ content: string | null }>('GET', `/canvas/${sessionId}`)
+      setContent(res.content)
+    } catch { /* ignore */ }
+  }, [sessionId])
+
+  useEffect(() => { loadCanvas() }, [loadCanvas]) // eslint-disable-line react-hooks/set-state-in-effect
+  useWs(`canvas:${sessionId}`, loadCanvas, 10_000)
+
+  if (!content) return (
+    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
+          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+        </svg>
+        <span className="text-[13px] font-600 text-text flex-1 truncate">
+          Canvas{agentName ? ` — ${agentName}` : ''}
+        </span>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+          title="Close canvas"
+          aria-label="Close canvas"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-8 h-8 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin mx-auto mb-3" />
+          <span className="text-[13px] text-text-3">Loading canvas...</span>
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
+          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+        </svg>
+        <span className="text-[13px] font-600 text-text flex-1 truncate">
+          Canvas{agentName ? ` — ${agentName}` : ''}
+        </span>
+        <button
+          onClick={loadCanvas}
+          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+          title="Refresh"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+          </svg>
+        </button>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+          title="Close canvas"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Sandboxed iframe */}
+      <div className="flex-1 overflow-hidden">
+        <iframe
+          sandbox="allow-scripts allow-same-origin"
+          srcDoc={content}
+          className="w-full h-full border-none bg-white"
+          title="Agent Canvas"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,173 @@
+'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' },
+  delegate_to_agent: { label: 'Delegating task', color: '#6366F1', icon: 'delegate' },
+  check_delegation_status: { label: 'Checking delegation', color: '#6366F1', 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 === 'delegate_to_agent' && (parsed.agentName || parsed.agentId)) return parsed.agentName || parsed.agentId
+    if (toolName === 'check_delegation_status' && parsed.agentName) return parsed.agentName
+    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: 'var(--card)',
+          border: `1px solid ${config.color}40`,
+        }}
+      >
+        <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: 'var(--card)',
+          border: '1px solid rgba(34,197,94,0.3)',
+        }}
+      >
+        <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>
+  )
+}