@swarmclawai/swarmclaw 0.4.0 → 0.4.5

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

@@ -9,8 +9,42 @@ import { toast } from 'sonner'
 import { ModelCombobox } from '@/components/shared/model-combobox'
 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'
 
-const NATIVE_CAPABILITY_PROVIDER_IDS = new Set<ProviderType>(['claude-cli', 'codex-cli', 'opencode-cli', 'openclaw'])
+const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
+
+function formatHbDuration(sec: number): string {
+  if (sec >= 3600) {
+    const h = Math.floor(sec / 3600)
+    const m = Math.floor((sec % 3600) / 60)
+    return m > 0 ? `${h}h${m}m` : `${h}h`
+  }
+  if (sec >= 60) return `${Math.floor(sec / 60)}m`
+  return `${sec}s`
+}
+
+/** Parse a stored heartbeatInterval string or heartbeatIntervalSec number to a select-friendly string of seconds */
+function parseDurationToSec(interval: string | number | null | undefined, intervalSec: number | null | undefined): string {
+  if (intervalSec != null && Number.isFinite(intervalSec) && intervalSec > 0) {
+    // Snap to nearest preset if close, otherwise use raw value
+    const closest = HB_PRESETS.find((p) => p === Math.round(intervalSec))
+    if (closest) return String(closest)
+  }
+  if (typeof interval === 'number' && Number.isFinite(interval) && interval > 0) {
+    return String(Math.round(interval))
+  }
+  if (interval != null && typeof interval === 'string' && interval.trim()) {
+    const t = interval.trim().toLowerCase()
+    const n = Number(t)
+    if (Number.isFinite(n) && n > 0) return String(Math.round(n))
+    const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/)
+    if (m && (m[1] || m[2] || m[3])) {
+      const total = (m[1] ? parseInt(m[1]) * 3600 : 0) + (m[2] ? parseInt(m[2]) * 60 : 0) + (m[3] ? parseInt(m[3]) : 0)
+      if (total > 0) return String(total)
+    }
+  }
+  return '' // default
+}
 
 export function AgentSheet() {
   const open = useAppStore((s) => s.agentSheetOpen)
@@ -19,6 +53,8 @@ export function AgentSheet() {
   const setEditingId = useAppStore((s) => s.setEditingAgentId)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
   const providers = useAppStore((s) => s.providers)
   const loadProviders = useAppStore((s) => s.loadProviders)
   const credentials = useAppStore((s) => s.credentials)
@@ -60,9 +96,12 @@ export function AgentSheet() {
   const [capInput, setCapInput] = useState('')
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
   const [openclawEnabled, setOpenclawEnabled] = useState(false)
+  const [projectId, setProjectId] = useState<string | undefined>(undefined)
+  const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
-  const [heartbeatInterval, setHeartbeatInterval] = useState('')
+  const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
+  const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKeyValue, setNewKeyValue] = useState('')
@@ -105,6 +144,7 @@ export function AgentSheet() {
       loadProviders()
       loadCredentials()
       loadSkills()
+      loadProjects()
       loadClaudeSkills()
       setTestStatus('idle')
       setTestMessage('')
@@ -130,9 +170,12 @@ export function AgentSheet() {
         setCapInput('')
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
+        setProjectId(editing.projectId)
+        setThinkingLevel(editing.thinkingLevel || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
-        setHeartbeatInterval(editing.heartbeatInterval != null ? String(editing.heartbeatInterval) : '')
+        setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
+        setHeartbeatPrompt(editing.heartbeatPrompt || '')
       } else {
         setName('')
         setDescription('')
@@ -154,9 +197,12 @@ export function AgentSheet() {
         setCapInput('')
         setOllamaMode('local')
         setOpenclawEnabled(false)
+        setProjectId(undefined)
+        setThinkingLevel('')
         setHeartbeatEnabled(false)
-        setHeartbeatInterval('')
+        setHeartbeatIntervalSec('')
         setHeartbeatModel('')
+        setHeartbeatPrompt('')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -244,9 +290,13 @@ export function AgentSheet() {
       fallbackCredentialIds,
       platformAssignScope,
       capabilities,
+      projectId: projectId || undefined,
+      thinkingLevel: thinkingLevel || undefined,
       heartbeatEnabled,
-      heartbeatInterval: heartbeatInterval.trim() || null,
+      heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
+      heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
       heartbeatModel: heartbeatModel.trim() || null,
+      heartbeatPrompt: heartbeatPrompt.trim() || null,
     }
     if (editing) {
       await updateAgent(editing.id, data)
@@ -330,8 +380,7 @@ export function AgentSheet() {
 
   // Whether this provider needs a connection test before saving.
   // Only CLI providers (no remote connection) skip the test.
-  const CLI_ONLY_PROVIDERS: Set<ProviderType> = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
-  const needsTest = !providerNeedsKey && !CLI_ONLY_PROVIDERS.has(provider)
+  const needsTest = !providerNeedsKey && !NON_LANGGRAPH_PROVIDER_IDS.has(provider)
 
   const [saving, setSaving] = useState(false)
 
@@ -451,6 +500,46 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
       </div>}
 
+      {/* Project */}
+      {Object.keys(projects).length > 0 && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            Project <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+          </label>
+          <select
+            value={projectId || ''}
+            onChange={(e) => setProjectId(e.target.value || undefined)}
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="">None</option>
+            {Object.values(projects).map((p) => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Thinking Level */}
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          Thinking Level <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+        </label>
+        <select
+          value={thinkingLevel}
+          onChange={(e) => setThinkingLevel(e.target.value as typeof thinkingLevel)}
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="">None (default)</option>
+          <option value="minimal">Minimal — Direct and concise</option>
+          <option value="low">Low — Brief reasoning</option>
+          <option value="medium">Medium — Moderate analysis</option>
+          <option value="high">High — Deep, thorough reasoning</option>
+        </select>
+        <p className="text-[11px] text-text-3/70 mt-1.5">Controls reasoning depth. Anthropic models use extended thinking; OpenAI o-series uses reasoning_effort. Others get system prompt guidance.</p>
+      </div>
+
       {/* Heartbeat Configuration */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
@@ -467,14 +556,16 @@ export function AgentSheet() {
           <div className="space-y-4 mt-3">
             <div>
               <label className="block text-[12px] text-text-3/70 mb-1.5">Interval</label>
-              <input
-                type="text"
-                value={heartbeatInterval}
-                onChange={(e) => setHeartbeatInterval(e.target.value)}
-                placeholder="30s, 5m, 1h (default: 30m)"
+              <select
+                value={heartbeatIntervalSec}
+                onChange={(e) => setHeartbeatIntervalSec(e.target.value)}
                 className={inputClass}
-                style={{ fontFamily: 'inherit' }}
-              />
+              >
+                <option value="">Default (30m)</option>
+                {HB_PRESETS.map((sec) => (
+                  <option key={sec} value={String(sec)}>{formatHbDuration(sec)}</option>
+                ))}
+              </select>
             </div>
             <div>
               <label className="block text-[12px] text-text-3/70 mb-1.5">Model override <span className="text-text-3/50">(optional, cheaper model)</span></label>
@@ -487,6 +578,17 @@ export function AgentSheet() {
                 style={{ fontFamily: 'inherit' }}
               />
             </div>
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">Instructions <span className="text-text-3/50">(what to do each tick)</span></label>
+              <textarea
+                value={heartbeatPrompt}
+                onChange={(e) => setHeartbeatPrompt(e.target.value)}
+                placeholder="Describe what this agent should do during heartbeat ticks..."
+                rows={4}
+                className={`${inputClass} resize-y min-h-[100px]`}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
           </div>
         )}
         <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>

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

@@ -12,13 +12,15 @@ import { ChatHeader } from './chat-header'
 import { DevServerBar } from './dev-server-bar'
 import { MessageList } from './message-list'
 import { SessionDebugPanel } from './session-debug-panel'
+import { VoiceOverlay } from './voice-overlay'
+import { useVoiceConversation } from '@/hooks/use-voice-conversation'
 import { ChatInput } from '@/components/input/chat-input'
 import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
 
 const PROMPT_SUGGESTIONS = [
-  { text: 'List all my sessions and agents', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
+  { text: 'What can you help me with?', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
   { text: 'Help me set up a new connector', icon: 'link', gradient: 'from-[#EC4899]/10 to-[#F472B6]/5' },
   { text: 'Create a new agent for me', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
   { text: 'Schedule a recurring task', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
@@ -43,6 +45,12 @@ export function ChatArea() {
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
 
+  const voice = useVoiceConversation()
+  const handleVoiceToggle = useCallback(() => {
+    if (voice.active) voice.stop()
+    else voice.start()
+  }, [voice])
+
   const [menuOpen, setMenuOpen] = useState(false)
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [confirmClear, setConfirmClear] = useState(false)
@@ -251,6 +259,9 @@ export function ChatArea() {
           onBack={handleBack}
           browserActive={browserActive}
           onStopBrowser={handleStopBrowser}
+          voiceActive={voice.active}
+          voiceSupported={voice.supported}
+          onVoiceToggle={handleVoiceToggle}
         />
       )}
       {!isDesktop && (
@@ -262,6 +273,9 @@ export function ChatArea() {
           mobile
           browserActive={browserActive}
           onStopBrowser={handleStopBrowser}
+          voiceActive={voice.active}
+          voiceSupported={voice.supported}
+          onVoiceToggle={handleVoiceToggle}
         />
       )}
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
@@ -320,6 +334,15 @@ export function ChatArea() {
         <MessageList messages={messages} streaming={streamingForThisSession} />
       )}
 
+      {voice.active && (
+        <VoiceOverlay
+          state={voice.state}
+          interimText={voice.interimText}
+          transcript={voice.transcript}
+          onStop={voice.stop}
+        />
+      )}
+
       <SessionDebugPanel
         messages={messages}
         open={debugOpen}
@@ -348,7 +371,7 @@ export function ChatArea() {
         )}
         {!isMainChat && (
           <DropdownItem danger onClick={() => { setMenuOpen(false); setConfirmDelete(true) }}>
-            Delete Session
+            Delete Chat
           </DropdownItem>
         )}
       </Dropdown>
@@ -356,7 +379,7 @@ export function ChatArea() {
       <ConfirmDialog
         open={confirmClear}
         title="Clear History"
-        message="This will delete all messages in this session. This cannot be undone."
+        message="This will delete all messages in this chat. This cannot be undone."
         confirmLabel="Clear"
         danger
         onConfirm={handleClear}
@@ -364,7 +387,7 @@ export function ChatArea() {
       />
       <ConfirmDialog
         open={confirmDelete}
-        title="Delete Session"
+        title="Delete Chat"
         message={`Delete "${session.name}"? This cannot be undone.`}
         confirmLabel="Delete"
         danger

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -18,6 +18,16 @@ function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
 }
 
+function formatDuration(sec: number): string {
+  if (sec >= 3600) {
+    const h = Math.floor(sec / 3600)
+    const m = Math.floor((sec % 3600) / 60)
+    return m > 0 ? `${h}h${m}m` : `${h}h`
+  }
+  if (sec >= 60) return `${Math.floor(sec / 60)}m`
+  return `${sec}s`
+}
+
 const PROVIDER_LABELS: Record<string, string> = {
   'claude-cli': 'CLI',
   openai: 'OpenAI',
@@ -34,9 +44,12 @@ interface Props {
   mobile?: boolean
   browserActive?: boolean
   onStopBrowser?: () => void
+  onVoiceToggle?: () => void
+  voiceActive?: boolean
+  voiceSupported?: boolean
 }
 
-export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser }: Props) {
+export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported }: Props) {
   const ttsEnabled = useChatStore((s) => s.ttsEnabled)
   const toggleTts = useChatStore((s) => s.toggleTts)
   const debugOpen = useChatStore((s) => s.debugOpen)
@@ -49,6 +62,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
   const appSettings = useAppStore((s) => s.appSettings)
   const loadSessions = useAppStore((s) => s.loadSessions)
+  const loadAgents = useAppStore((s) => s.loadAgents)
   const connectors = useAppStore((s) => s.connectors)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
@@ -58,6 +72,8 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const modelName = session.model || agent?.model || ''
   const [copied, setCopied] = useState(false)
   const [heartbeatSaving, setHeartbeatSaving] = useState(false)
+  const [hbDropdownOpen, setHbDropdownOpen] = useState(false)
+  const hbDropdownRef = useRef<HTMLDivElement>(null)
   const [mainLoopSaving, setMainLoopSaving] = useState(false)
   const [mainLoopError, setMainLoopError] = useState('')
   const [mainLoopNotice, setMainLoopNotice] = useState('')
@@ -102,11 +118,53 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const heartbeatEnabled = session.heartbeatEnabled !== false
   const heartbeatSupported = (session.tools?.length ?? 0) > 0
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
-  const heartbeatIntervalRaw = session.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? 120
-  const heartbeatIntervalSec = Number.isFinite(Number(heartbeatIntervalRaw)) ? Math.max(0, Math.trunc(Number(heartbeatIntervalRaw))) : 120
+  const { heartbeatEnabled, heartbeatIntervalSec, heartbeatExplicitOptIn } = useMemo(() => {
+    // Resolve through the same cascade as the backend: settings → agent → session
+    const parseDur = (v: unknown): number | null => {
+      if (v === null || v === undefined) return null
+      if (typeof v === 'number') return Number.isFinite(v) ? Math.max(0, Math.min(86400, Math.trunc(v))) : null
+      if (typeof v !== 'string') return null
+      const t = v.trim().toLowerCase()
+      if (!t) return null
+      const n = Number(t)
+      if (Number.isFinite(n)) return Math.max(0, Math.min(86400, Math.trunc(n)))
+      const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/)
+      if (!m || (!m[1] && !m[2] && !m[3])) return null
+      const total = (m[1] ? parseInt(m[1]) * 3600 : 0) + (m[2] ? parseInt(m[2]) * 60 : 0) + (m[3] ? parseInt(m[3]) : 0)
+      return Math.max(0, Math.min(86400, total))
+    }
+    const resolveFrom = (obj: Record<string, any>): number | null => {
+      const dur = parseDur(obj.heartbeatInterval)
+      if (dur !== null) return dur
+      const sec = parseDur(obj.heartbeatIntervalSec)
+      if (sec !== null) return sec
+      return null
+    }
+    // Global defaults
+    let sec = resolveFrom(appSettings as Record<string, any>) ?? 1800
+    let enabled = sec > 0
+    let explicitOptIn = false
+    // Agent layer
+    if (agent) {
+      if (agent.heartbeatEnabled === false) enabled = false
+      if (agent.heartbeatEnabled === true) { enabled = true; explicitOptIn = true }
+      sec = resolveFrom(agent as Record<string, any>) ?? sec
+    }
+    // Session layer — only applies for non-agent chats (agent chats save directly to agent)
+    if (!agent) {
+      if (session.heartbeatEnabled === false) enabled = false
+      if (session.heartbeatEnabled === true) { enabled = true; explicitOptIn = true }
+      sec = resolveFrom(session as Record<string, any>) ?? sec
+    }
+    return {
+      heartbeatEnabled: enabled && sec > 0,
+      heartbeatIntervalSec: sec,
+      heartbeatExplicitOptIn: explicitOptIn,
+    }
+  }, [appSettings, agent, session])
+  const heartbeatWillRun = heartbeatEnabled && (loopIsOngoing || heartbeatExplicitOptIn)
   const isMainSession = session.name === '__main__'
   const missionState = session.mainLoopState || {}
   const missionPaused = missionState.paused === true
@@ -119,23 +177,40 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     if (!heartbeatSupported || heartbeatSaving) return
     setHeartbeatSaving(true)
     try {
-      await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: !heartbeatEnabled })
-      await loadSessions()
+      const next = !heartbeatEnabled
+      if (session.agentId) {
+        await api('PUT', `/agents/${session.agentId}`, { heartbeatEnabled: next })
+        // Clear any stale session-level override so the agent value wins
+        await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: null })
+        await Promise.all([loadAgents(), loadSessions()])
+      } else {
+        await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: next })
+        await loadSessions()
+      }
     } finally {
       setHeartbeatSaving(false)
     }
   }
 
-  const handleCycleHeartbeatInterval = async () => {
+  const handleSelectHeartbeatInterval = async (sec: number) => {
     if (!heartbeatSupported || heartbeatSaving) return
-    const presets = [30, 60, 120, 300, 600]
-    const current = heartbeatIntervalSec
-    const idx = presets.indexOf(current)
-    const next = idx === -1 ? 120 : presets[(idx + 1) % presets.length]
+    setHbDropdownOpen(false)
     setHeartbeatSaving(true)
     try {
-      await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: next, heartbeatEnabled: true })
-      await loadSessions()
+      if (session.agentId) {
+        // Save to agent with both formats so the cascade resolves correctly
+        await api('PUT', `/agents/${session.agentId}`, {
+          heartbeatInterval: formatDuration(sec),
+          heartbeatIntervalSec: sec,
+          heartbeatEnabled: true,
+        })
+        // Clear stale session-level overrides
+        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: null, heartbeatEnabled: null })
+        await Promise.all([loadAgents(), loadSessions()])
+      } else {
+        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: sec, heartbeatEnabled: true })
+        await loadSessions()
+      }
     } finally {
       setHeartbeatSaving(false)
     }
@@ -193,6 +268,15 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     void postMainLoopAction('clear_events')
   }
 
+  useEffect(() => {
+    if (!hbDropdownOpen) return
+    const handler = (e: MouseEvent) => {
+      if (hbDropdownRef.current && !hbDropdownRef.current.contains(e.target as Node)) setHbDropdownOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [hbDropdownOpen])
+
   useEffect(() => {
     if (session.name.startsWith('connector:')) {
       void loadConnectors()
@@ -298,7 +382,16 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
             </svg>
           </IconButton>
-          <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} aria-label="Session menu">
+          {voiceSupported && onVoiceToggle && (
+            <IconButton onClick={onVoiceToggle} active={voiceActive} aria-label="Toggle voice conversation">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <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>
+            </IconButton>
+          )}
+          <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} aria-label="Chat menu">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
               <circle cx="12" cy="6" r="1" />
               <circle cx="12" cy="12" r="1" />
@@ -320,25 +413,44 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 onClick={handleToggleHeartbeat}
                 disabled={heartbeatSaving}
                 className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] transition-colors cursor-pointer border-none
-                  ${heartbeatEnabled ? 'bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-400' : 'bg-white/[0.04] hover:bg-white/[0.07] text-text-3'}`}
-                title={loopIsOngoing ? 'Toggle heartbeat for this session' : 'Global loop mode is bounded; heartbeats are paused'}
+                  ${heartbeatWillRun ? 'bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-400' : 'bg-white/[0.04] hover:bg-white/[0.07] text-text-3'}`}
+                title={heartbeatWillRun ? 'Toggle heartbeat' : !heartbeatEnabled ? 'Heartbeat disabled — click to enable' : 'Heartbeat enabled but paused (bounded loop mode, no explicit opt-in)'}
               >
-                <span className={`w-1.5 h-1.5 rounded-full ${heartbeatEnabled ? 'bg-emerald-400' : 'bg-text-3/40'}`} />
+                <span className={`w-1.5 h-1.5 rounded-full ${heartbeatWillRun ? 'bg-emerald-400' : 'bg-text-3/40'}`} />
                 <span className="text-[11px] font-600">
-                  HB {heartbeatEnabled ? 'On' : 'Off'}
+                  HB {heartbeatWillRun ? 'On' : 'Off'}
                 </span>
-                {!loopIsOngoing && (
+                {heartbeatEnabled && !loopIsOngoing && !heartbeatExplicitOptIn && (
                   <span className="text-[10px] text-text-3/50">(bounded)</span>
                 )}
               </button>
-              <button
-                onClick={handleCycleHeartbeatInterval}
-                disabled={heartbeatSaving}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-text-3 transition-colors cursor-pointer border-none"
-                title="Cycle heartbeat interval for this session"
-              >
-                <span className="text-[11px] font-600">{heartbeatIntervalSec}s</span>
-              </button>
+              <div className="relative" ref={hbDropdownRef}>
+                <button
+                  onClick={() => setHbDropdownOpen((o) => !o)}
+                  disabled={heartbeatSaving}
+                  className="flex items-center gap-1 px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-text-3 transition-colors cursor-pointer border-none"
+                  title="Set heartbeat interval"
+                >
+                  <span className="text-[11px] font-600">{formatDuration(heartbeatIntervalSec)}</span>
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/50">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </button>
+                {hbDropdownOpen && (
+                  <div className="absolute top-full left-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[80px]">
+                    {[30, 60, 120, 300, 600, 1800, 3600].map((sec) => (
+                      <button
+                        key={sec}
+                        onClick={() => handleSelectHeartbeatInterval(sec)}
+                        className={`w-full text-left px-3 py-1.5 text-[11px] font-600 transition-colors cursor-pointer border-none
+                          ${sec === heartbeatIntervalSec ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:bg-white/[0.06]'}`}
+                      >
+                        {formatDuration(sec)}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
             </>
           )}
           {isMainSession && (
@@ -467,7 +579,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
             <button
               onClick={onStopBrowser}
               className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-[#3B82F6]/10 hover:bg-[#F43F5E]/15 transition-colors cursor-pointer group"
-              title="Stop browser session"
+              title="Stop browser"
             >
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-[#3B82F6] group-hover:text-[#F43F5E]">
                 <rect x="3" y="3" width="18" height="14" rx="2" />

package/src/components/chat/tool-call-bubble.tsx

@@ -14,6 +14,8 @@ const TOOL_COLORS: Record<string, string> = {
   delete_file: '#EF4444',
   edit_file: '#10B981',
   send_file: '#10B981',
+  create_document: '#10B981',
+  create_spreadsheet: '#10B981',
   web_search: '#3B82F6',
   web_fetch: '#3B82F6',
   delegate_to_agent: '#6366F1',
@@ -60,6 +62,8 @@ export const TOOL_LABELS: Record<string, string> = {
   delete_file: 'Delete File',
   edit_file: 'Edit File',
   send_file: 'Send File',
+  create_document: 'Create Document',
+  create_spreadsheet: 'Create Spreadsheet',
   web_search: 'Web Search',
   web_fetch: 'Web Fetch',
   claude_code: 'Claude Code',
@@ -79,7 +83,7 @@ export const TOOL_LABELS: Record<string, string> = {
   manage_documents: 'Documents',
   manage_webhooks: 'Webhooks',
   manage_connectors: 'Connectors',
-  manage_sessions: 'Sessions',
+  manage_sessions: 'Chats',
   memory: 'Memory',
   browser: 'Browser',
 }
@@ -94,6 +98,8 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   delete_file: 'Delete files or directories (when explicitly enabled)',
   edit_file: 'Edit existing files with find-and-replace',
   send_file: 'Send files to the user (images, PDFs, videos, documents, etc.)',
+  create_document: 'Render markdown content into PDF, HTML, or image',
+  create_spreadsheet: 'Create Excel or CSV files from structured data',
   web_search: 'Search the web for information',
   web_fetch: 'Fetch and read web page content',
   claude_code: 'Enable delegation to Claude Code CLI',
@@ -103,7 +109,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   delegate_to_claude_code: 'Delegate complex coding tasks to Claude Code',
   delegate_to_codex_cli: 'Delegate complex coding tasks to Codex CLI',
   delegate_to_opencode_cli: 'Delegate complex coding tasks to OpenCode CLI',
-  whoami_tool: 'Reveal the current session and agent identity context',
+  whoami_tool: 'Reveal the current agent and chat context',
   connector_message_tool: 'Send proactive outbound messages via running connectors',
   search_history_tool: 'Search chat history for relevant prior context',
   manage_tasks: 'Create, update, and manage tasks on the board',
@@ -113,7 +119,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   manage_documents: 'Upload and search indexed documents',
   manage_webhooks: 'Register and manage inbound webhooks',
   manage_connectors: 'Manage chat platform connectors (Slack, Discord, etc.)',
-  manage_sessions: 'Create and manage chat sessions',
+  manage_sessions: 'Create and manage agent chats',
   memory: 'Store and recall information across conversations',
   browser: 'Browse the web, take screenshots, and interact with pages',
 }