@swarmclawai/swarmclaw 0.7.1 → 0.7.3

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useMemo, useRef, useCallback } from 'react'
+import { useEffect, useState, useMemo, useRef, useCallback, type ReactNode } from 'react'
 import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -14,11 +14,59 @@ import {
 } from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ModelCombobox } from '@/components/shared/model-combobox'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { toast } from 'sonner'
 import type { ProviderType } from '@/types'
 import { copyTextToClipboard } from '@/lib/clipboard'
+import { buildOpenClawMainSessionKey } from '@/lib/openclaw-agent-id'
 import { useWs } from '@/hooks/use-ws'
 
+function Tip({ label, children, side = 'bottom' }: { label: string; children: ReactNode; side?: 'top' | 'bottom' | 'left' | 'right' }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} sideOffset={6}
+        className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[8px] px-2.5 py-1.5 text-[11px] z-[100]">
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function HeaderChip({
+  children,
+  title,
+  onClick,
+  className = '',
+  active = false,
+}: {
+  children: ReactNode
+  title?: string
+  onClick?: () => void
+  className?: string
+  active?: boolean
+}) {
+  const baseClass = `inline-flex max-w-full items-center gap-1.5 rounded-[9px] border px-2.5 py-1 text-[10px] font-600 backdrop-blur-sm transition-colors ${
+    active
+      ? 'border-accent-bright/20 bg-accent-soft/50 text-accent-bright'
+      : 'border-white/[0.06] bg-white/[0.03] text-text-3/68'
+  } ${onClick ? 'cursor-pointer hover:border-white/[0.1] hover:bg-white/[0.06] hover:text-text-2' : ''} ${className}`
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} title={title} className={baseClass}>
+        {children}
+      </button>
+    )
+  }
+
+  return (
+    <span title={title} className={baseClass}>
+      {children}
+    </span>
+  )
+}
+
 function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
 }
@@ -87,6 +135,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const providers = useAppStore((s) => s.providers)
   const loadProviders = useAppStore((s) => s.loadProviders)
   const modelName = session.model || agent?.model || ''
+  const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
   const [modelSwitcherOpen, setModelSwitcherOpen] = useState(false)
   const modelSwitcherRef = useRef<HTMLDivElement>(null)
   const [copied, setCopied] = useState(false)
@@ -95,9 +144,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const hbDropdownRef = useRef<HTMLDivElement>(null)
   const [sourceDropdownOpen, setSourceDropdownOpen] = useState(false)
   const sourceDropdownRef = useRef<HTMLDivElement>(null)
-  const [mainLoopSaving, setMainLoopSaving] = useState(false)
-  const [mainLoopError, setMainLoopError] = useState('')
-  const [mainLoopNotice, setMainLoopNotice] = useState('')
   const [syncingHistory, setSyncingHistory] = useState(false)
   const [syncResult, setSyncResult] = useState('')
   const [renaming, setRenaming] = useState(false)
@@ -134,6 +180,46 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   }, [fetchWalletBalance])
   useWs('wallets', fetchWalletBalance)
 
+  const workspaceLabel = useMemo(() => shortPath(session.cwd), [session.cwd])
+  const liveStatus = agentStatus || null
+  const threadContextLabel = useMemo(() => {
+    const title = session.connectorContext?.threadTitle?.trim()
+    if (title) return title
+    const persona = session.connectorContext?.threadPersonaLabel?.trim()
+    if (persona) return persona
+    return null
+  }, [session.connectorContext?.threadPersonaLabel, session.connectorContext?.threadTitle])
+  const connectorPresenceMeta = useMemo(() => {
+    if (!connector) return null
+    const lastAt = connectorPresence?.lastMessageAt
+    if (!lastAt) {
+      return {
+        label: 'Idle',
+        dotClass: 'bg-text-3/30',
+        textClass: 'text-text-3/45',
+      }
+    }
+    const ago = Date.now() - lastAt
+    if (ago < 5 * 60_000) {
+      return {
+        label: 'Active',
+        dotClass: 'bg-emerald-400',
+        textClass: 'text-emerald-400',
+      }
+    }
+    if (ago < 30 * 60_000) {
+      return {
+        label: `${Math.floor(ago / 60_000)}m ago`,
+        dotClass: 'bg-amber-400',
+        textClass: 'text-amber-300',
+      }
+    }
+    return {
+      label: 'Idle',
+      dotClass: 'bg-text-3/30',
+      textClass: 'text-text-3/45',
+    }
+  }, [connector, connectorPresence?.lastMessageAt])
 
   const visibleHeaderWidgets = useMemo(() => {
     const seen = new Set<string>()
@@ -145,6 +231,25 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     })
   }, [headerWidgets])
 
+  const walletHeaderMeta = useMemo(() => {
+    if (!agent?.id) {
+      return {
+        label: 'Wallets',
+        title: 'Open wallets',
+      }
+    }
+    if (!agent.walletId) {
+      return {
+        label: 'Create wallet',
+        title: 'Create wallet',
+      }
+    }
+    return {
+      label: walletBalance !== null ? `${walletBalance.toFixed(3)} SOL` : 'Wallet',
+      title: 'View wallet',
+    }
+  }, [agent?.id, agent?.walletId, walletBalance])
+
   const handleHeaderWidgetClick = (widgetId: string) => {
     if (widgetId === 'wallet-status') {
       if (agent?.id) setWalletPanelAgentId(agent.id)
@@ -197,17 +302,17 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const handleDismissResumeHandle = async (e: React.MouseEvent) => {
     e.stopPropagation()
     try {
-      await api('PUT', `/sessions/${session.id}`, {
+      await api('PUT', `/chats/${session.id}`, {
         claudeSessionId: null,
         codexThreadId: null,
         opencodeSessionId: null,
-        delegateResumeIds: { claudeCode: null, codex: null, opencode: null },
+        delegateResumeIds: { claudeCode: null, codex: null, opencode: null, gemini: null },
       })
       await loadSessions()
     } catch { /* best-effort */ }
   }
 
-  const heartbeatSupported = (session.tools?.length ?? 0) > 0
+  const heartbeatSupported = (session.plugins?.length ?? 0) > 0
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
   const { heartbeatEnabled, heartbeatIntervalSec, heartbeatExplicitOptIn } = useMemo(() => {
     // Resolve through the same cascade as the backend: settings → agent → session
@@ -254,13 +359,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     }
   }, [appSettings, agent, session])
   const heartbeatWillRun = heartbeatEnabled && (loopIsOngoing || heartbeatExplicitOptIn)
-  const isMainSession = session.name === '__main__'
-  const missionState = session.mainLoopState || {}
-  const missionPaused = missionState.paused === true
-  const missionMode = missionState.autonomyMode === 'assist' ? 'assist' : 'autonomous'
-  const missionStatus = missionState.status || 'idle'
-  const missionMomentum = typeof missionState.momentumScore === 'number' ? missionState.momentumScore : null
-  const missionEventsCount = missionState.pendingEvents?.length || 0
 
   const handleToggleHeartbeat = async () => {
     if (!heartbeatSupported || heartbeatSaving) return
@@ -270,10 +368,10 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
       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 api('PUT', `/chats/${session.id}`, { heartbeatEnabled: null })
         await Promise.all([loadAgents(), loadSessions()])
       } else {
-        await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: next })
+        await api('PUT', `/chats/${session.id}`, { heartbeatEnabled: next })
         await loadSessions()
       }
       toast.success(`Heartbeat ${next ? 'enabled' : 'disabled'}`)
@@ -295,10 +393,10 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
           heartbeatEnabled: true,
         })
         // Clear stale session-level overrides
-        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: null, heartbeatEnabled: null })
+        await api('PUT', `/chats/${session.id}`, { heartbeatIntervalSec: null, heartbeatEnabled: null })
         await Promise.all([loadAgents(), loadSessions()])
       } else {
-        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: sec, heartbeatEnabled: true })
+        await api('PUT', `/chats/${session.id}`, { heartbeatIntervalSec: sec, heartbeatEnabled: true })
         await loadSessions()
       }
     } finally {
@@ -306,63 +404,8 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     }
   }
 
-  const postMainLoopAction = async (action: string, extra?: Record<string, unknown>) => {
-    if (!isMainSession || mainLoopSaving) return
-    setMainLoopSaving(true)
-    try {
-      const result = await api<{ runId?: string; deduped?: boolean }>('POST', `/sessions/${session.id}/main-loop`, {
-        action,
-        ...(extra || {}),
-      })
-      setMainLoopError('')
-      if (action === 'nudge') {
-        setMainLoopNotice(result?.deduped ? 'Nudge already queued.' : 'Nudge queued.')
-      } else if (action === 'set_mode') {
-        setMainLoopNotice(`Mode set to ${extra?.mode === 'assist' ? 'Assist' : 'Auto'}.`)
-      } else {
-        setMainLoopNotice('')
-      }
-      await loadSessions()
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to update mission controls.'
-      setMainLoopError(message)
-    } finally {
-      setMainLoopSaving(false)
-    }
-  }
-
-  const handleToggleMissionPause = () => {
-    void postMainLoopAction(missionPaused ? 'resume' : 'pause')
-  }
-
-  const handleToggleMissionMode = () => {
-    const nextMode = missionMode === 'autonomous' ? 'assist' : 'autonomous'
-    void postMainLoopAction('set_mode', { mode: nextMode })
-  }
-
-  const handleNudgeMission = () => {
-    void postMainLoopAction('nudge')
-  }
-
-  const handleSetMissionGoal = () => {
-    if (!isMainSession) return
-    const seededGoal = typeof missionState.goal === 'string' ? missionState.goal : ''
-    const raw = window.prompt('Set mission goal', seededGoal)
-    const goal = (raw || '').trim()
-    if (!goal) return
-    void postMainLoopAction('set_goal', { goal })
-  }
-
-  const handleClearMissionEvents = () => {
-    if (!isMainSession || missionEventsCount <= 0) return
-    void postMainLoopAction('clear_events')
-  }
-
   const isOpenClawAgent = agent?.provider === 'openclaw'
-  // Derive OpenClaw session key: agent sessions use "agent:<name>:main" convention
-  const openclawSessionKey = isOpenClawAgent && agent
-    ? `agent:${agent.name.toLowerCase().replace(/\s+/g, '-')}:main`
-    : null
+  const openclawSessionKey = isOpenClawAgent ? buildOpenClawMainSessionKey(agent?.name) : null
 
   const handleSyncHistory = async () => {
     if (!openclawSessionKey || syncingHistory) return
@@ -473,7 +516,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const handleModelSwitch = async (nextProvider: ProviderType, nextModel: string) => {
     setModelSwitcherOpen(false)
     try {
-      await api('PUT', `/sessions/${session.id}`, { provider: nextProvider, model: nextModel })
+      await api('PUT', `/chats/${session.id}`, { provider: nextProvider, model: nextModel })
       await loadSessions()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to switch model')
@@ -490,35 +533,28 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   }, [session.name, loadConnectors])
 
   useEffect(() => {
-    setMainLoopError('')
-    setMainLoopNotice('')
     setModelSwitcherOpen(false)
   }, [session.id])
 
-  useEffect(() => {
-    if (!mainLoopNotice) return
-    const timer = setTimeout(() => setMainLoopNotice(''), 2500)
-    return () => clearTimeout(timer)
-  }, [mainLoopNotice])
-
-  // Context bar shows for tools, mission controls, memories, source filter, task links, resume handles, browser
-  const hasToolToggles = ((agent?.tools?.length ?? 0) > 0) || ((session.tools?.length ?? 0) > 0)
-  const hasMemoryLink = !!(agent && session.tools?.includes('memory'))
+  // Context bar shows for tools, memories, source filter, task links, resume handles, browser
+  const hasToolToggles = ((agent?.plugins?.length ?? 0) > 0) || ((session.plugins?.length ?? 0) > 0)
+  const hasMemoryLink = !!(agent && session.plugins?.includes('memory'))
   const hasSourceFilter = !!hasMultipleSources
-  const hasContextBar = !!(isMainSession || hasMemoryLink || hasSourceFilter || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
+  const hasContextBar = !!(hasMemoryLink || hasSourceFilter || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
 
   return (
+    <>
     <header
       className="relative z-20 border-b border-white/[0.06] shrink-0"
       style={{
-        background: 'linear-gradient(180deg, rgba(var(--rgb-bg, 15,15,26), 0.95) 0%, rgba(var(--rgb-bg, 15,15,26), 0.88) 100%)',
+        background: 'radial-gradient(circle at top left, rgba(66, 211, 255, 0.08), transparent 32%), radial-gradient(circle at top right, rgba(255, 190, 92, 0.05), transparent 28%), linear-gradient(180deg, rgba(var(--rgb-bg, 15,15,26), 0.96) 0%, rgba(var(--rgb-bg, 15,15,26), 0.9) 100%)',
         backdropFilter: 'blur(20px) saturate(1.4)',
         WebkitBackdropFilter: 'blur(20px) saturate(1.4)',
         ...(mobile ? { paddingTop: 'max(12px, env(safe-area-inset-top))' } : {}),
       }}
     >
       {/* Main row */}
-      <div className="flex items-center gap-2 px-3.5 py-1.5 min-h-[48px]">
+      <div className="flex flex-wrap items-start gap-3 px-4 py-2.5 min-h-[64px]">
         {/* Back button */}
         {onBack && (
           <IconButton onClick={onBack} aria-label="Go back" size="sm">
@@ -559,10 +595,8 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
         )}
 
         {/* Identity + metadata — fills center */}
-        <div className="flex-1 min-w-0 flex items-center gap-3">
-          {/* Name (row 1) + tools (row 2) */}
-          <div className="flex flex-col gap-0.5 min-w-0 shrink">
-          <div className="flex items-center gap-2 min-w-0">
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
             {renaming && agent ? (
               <span ref={renameContainerRef} className="inline-flex items-center gap-2">
                 <input
@@ -580,99 +614,90 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 {renameSaving && <span className="w-3 h-3 rounded-full border-2 border-text-3/30 border-t-accent-bright animate-spin shrink-0" />}
                 {renameError && <span className="text-[10px] text-red-400 shrink-0">{renameError}</span>}
               </span>
+            ) : agent ? (
+              <button
+                type="button"
+                onClick={startRename}
+                title="Rename agent"
+                className="group/title inline-flex min-w-0 items-center gap-1.5 rounded-[9px] px-1 py-0.5 text-left transition-colors hover:bg-white/[0.03] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-bright/40"
+              >
+                <span className="font-display text-[16px] font-700 truncate tracking-[-0.02em] text-text transition-colors group-hover/title:text-accent-bright">
+                  {(session.shortcutForAgentId && agent.id === session.shortcutForAgentId) || agent.threadSessionId === session.id
+                    ? agent.name
+                    : session.name}
+                </span>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0 text-text-3/40 opacity-0 transition-opacity group-hover/title:opacity-100 group-focus-visible/title:opacity-100">
+                  <path d="M12 20h9" />
+                  <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
+                </svg>
+              </button>
             ) : (
-              <span
-                className={`font-display text-[15px] font-700 truncate tracking-[-0.02em] text-text${agent ? ' cursor-pointer hover:text-accent-bright transition-colors duration-200' : ''}`}
-                onClick={agent ? startRename : undefined}
-                title={agent ? 'Click to rename' : undefined}
-              >{
-                session.name === '__main__' ? 'Main Chat'
-                : session.name.startsWith('agent-thread:') ? (agent?.name || session.name)
-                : session.name
-              }</span>
+              <span className="font-display text-[16px] font-700 truncate tracking-[-0.02em] text-text">{session.name}</span>
             )}
             {connector && connectorMeta && (
               <span
-                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[5px] border text-[9px] font-700 uppercase tracking-wider shrink-0"
+                className="inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-[8px] border text-[10px] font-700 uppercase tracking-wider shrink-0"
                 style={{
                   color: connectorMeta.color,
-                  backgroundColor: `${connectorMeta.color}10`,
-                  borderColor: `${connectorMeta.color}20`,
+                  backgroundColor: `${connectorMeta.color}12`,
+                  borderColor: `${connectorMeta.color}22`,
                 }}
                 title={`${connector.name} connector`}
               >
                 <ConnectorPlatformIcon platform={connector.platform} size={10} />
-                {connectorMeta.label}
+                <span className="truncate max-w-[140px]">{connectorMeta.label}</span>
               </span>
             )}
-            {connector && connectorPresence && (() => {
-              const lastAt = connectorPresence.lastMessageAt
-              if (!lastAt) return (
-                <span className="shrink-0 inline-flex items-center gap-1 text-[10px] text-text-3/40">
-                  <span className="w-1.5 h-1.5 rounded-full bg-text-3/30" />
-                  Idle
-                </span>
-              )
-              const ago = Date.now() - lastAt
-              const isActive = ago < 5 * 60_000
-              const isRecent = ago < 30 * 60_000
-              const label = isActive ? 'Active' : isRecent ? `${Math.floor(ago / 60_000)}m ago` : 'Idle'
-              const dotColor = isActive ? 'bg-emerald-400' : isRecent ? 'bg-amber-400' : 'bg-text-3/30'
-              const textColor = isActive ? 'text-emerald-400' : isRecent ? 'text-amber-300' : 'text-text-3/40'
-              return (
-                <span className={`shrink-0 inline-flex items-center gap-1 text-[10px] ${textColor}`}>
-                  <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
-                  {label}
-                </span>
-              )
-            })()}
-            {agent?.isOrchestrator && (
-              <span className="px-1.5 py-0.5 rounded-[5px] bg-amber-500/10 text-amber-500 text-[9px] font-700 uppercase tracking-wider shrink-0">Orch</span>
+            {connectorPresenceMeta && (
+              <HeaderChip className={`${connectorPresenceMeta.textClass} shrink-0`}>
+                <span className={`w-1.5 h-1.5 rounded-full ${connectorPresenceMeta.dotClass}`} />
+                {connectorPresenceMeta.label}
+              </HeaderChip>
+            )}
+            {agent?.platformAssignScope === 'all' && (
+              <HeaderChip className="bg-amber-500/10 border-amber-500/15 text-amber-400 shrink-0">Delegates</HeaderChip>
             )}
             {streaming && (
-              <span className="shrink-0 w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+              <HeaderChip className="bg-accent-soft/60 border-accent-bright/20 text-accent-bright shrink-0">
+                <span className="w-1.5 h-1.5 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+                Responding
+              </HeaderChip>
             )}
           </div>
-          {hasToolToggles && <ChatToolToggles session={session} />}
-          </div>
-
-          {/* Metadata tray: wallet · model · path · status */}
-          <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
-            <span className="text-text-3/10 text-[10px] select-none shrink-0">/</span>
+          <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">
+            {hasToolToggles && <ChatToolToggles session={session} />}
             {visibleHeaderWidgets.map((widget) => {
               const actionable = widget.id === 'wallet-status'
-              const walletLabel = walletBalance !== null
-                ? `${walletBalance.toFixed(3)} SOL`
+              const walletLabel = actionable
+                ? walletHeaderMeta.label
                 : (widget.label || 'Wallet')
+              const widgetTitle = actionable
+                ? walletHeaderMeta.title
+                : widget.label
               return (
-                <button
+                <HeaderChip
                   key={widget.id}
-                  type="button"
                   onClick={actionable ? () => handleHeaderWidgetClick(widget.id) : undefined}
-                  className={`inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] text-[11px] font-mono transition-colors ${
-                    actionable ? 'cursor-pointer text-text-3/45 hover:text-text-3/70 hover:bg-white/[0.04]' : 'cursor-default text-text-3/55'
-                  }`}
-                  title={actionable ? 'View wallet' : widget.label}
+                  title={widgetTitle}
+                  className={actionable ? 'text-text-3/80' : ''}
                 >
                   {actionable ? (
                     <>
-                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0">
                         <rect x="2" y="6" width="20" height="14" rx="2" />
                         <path d="M22 10H18a2 2 0 0 0 0 4h4" />
                       </svg>
-                      {walletLabel}
+                      <span className="truncate max-w-[120px]">{walletLabel}</span>
                     </>
                   ) : (
-                    widget.label
+                    <span className="truncate max-w-[120px]">{widget.label}</span>
                   )}
-                </button>
+                </HeaderChip>
               )
             })}
-            {visibleHeaderWidgets.length > 0 && (
-              <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-            )}
             {modelName && (
               <div className="relative shrink-0" ref={modelSwitcherRef}>
+                <Tip label={`Switch model (${providerLabel})`}>
                 <button
                   type="button"
                   onClick={() => {
@@ -680,16 +705,19 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                     setModelSwitcherOpen((o) => { if (!o) void loadProviders(); return !o })
                   }}
                   disabled={streaming}
-                  className="inline-flex items-center gap-1 text-[11px] text-text-3/45 font-mono shrink-0 cursor-pointer bg-transparent border-none px-1 py-0.5 rounded-[5px] hover:bg-white/[0.04] hover:text-text-3/70 transition-colors disabled:cursor-default disabled:hover:text-text-3/45"
-                  title="Switch model"
+                  className="inline-flex max-w-full items-center gap-1.5 rounded-[9px] border border-white/[0.06] bg-white/[0.03] px-2.5 py-1 text-[10px] font-600 text-text-3/70 backdrop-blur-sm transition-colors hover:border-white/[0.1] hover:bg-white/[0.06] hover:text-text-2 disabled:cursor-default disabled:opacity-60"
                 >
-                  {modelName}
-                  <svg width="7" height="7" viewBox="0 0 16 16" fill="none" className="shrink-0 opacity-30">
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0">
+                    <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z" />
+                  </svg>
+                  <span className="truncate max-w-[min(42vw,220px)]">{mobile ? modelName : `${providerLabel} · ${modelName}`}</span>
+                  <svg width="7" height="7" viewBox="0 0 16 16" fill="none" className="shrink-0 opacity-40">
                     <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                   </svg>
                 </button>
+                </Tip>
                 {modelSwitcherOpen && (
-                  <div className="absolute z-50 top-full left-0 mt-2 w-[280px] rounded-[12px] border border-white/[0.08] bg-surface backdrop-blur-md shadow-xl p-3">
+                  <div className="absolute z-50 top-full right-0 sm:left-0 sm:right-auto mt-2 w-[min(320px,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] rounded-[12px] border border-white/[0.08] bg-surface backdrop-blur-md shadow-xl p-3">
                     <div className="text-[10px] font-600 text-text-3/50 uppercase tracking-wider mb-2">Provider</div>
                     <div className="flex flex-wrap gap-1.5 mb-3">
                       {providers.map((p) => (
@@ -717,110 +745,108 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 )}
               </div>
             )}
-            <button
-              type="button"
+            {threadContextLabel && (
+              <HeaderChip title={threadContextLabel}>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0">
+                  <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>
+                <span className="truncate max-w-[min(42vw,220px)]">{threadContextLabel}</span>
+              </HeaderChip>
+            )}
+            <Tip label={`Open working directory: ${workspaceLabel}`}>
+            <HeaderChip
               onClick={() => { api('POST', '/files/open', { path: session.cwd }).catch(() => {}) }}
-              className="inline-flex items-center shrink-0 bg-transparent border-none p-0.5 rounded-[4px] cursor-pointer text-text-3/20 hover:text-text-3/50 hover:bg-white/[0.04] transition-colors"
-              title={shortPath(session.cwd)}
+              title={workspaceLabel}
+              className="max-w-[min(44vw,220px)]"
             >
-              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0">
                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
               </svg>
-            </button>
-            {/* Live agent status */}
-            {(() => {
-              const liveStatus = agentStatus || (missionState.status ? {
-                goal: missionState.goal ?? undefined,
-                status: missionState.status ?? undefined,
-                summary: missionState.summary ?? undefined,
-                nextAction: missionState.nextAction ?? undefined,
-              } : null)
-              if (!liveStatus) return null
-              const statusColors: Record<string, string> = {
-                idle: 'bg-text-3/40', progress: 'bg-blue-500', blocked: 'bg-amber-400', ok: 'bg-emerald-400',
-              }
-              const dotColor = statusColors[liveStatus.status || ''] || 'bg-text-3/40'
-              return (
-                <>
-                  <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-                  {liveStatus.status && (
-                    <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] text-[9px] font-700 uppercase tracking-wider ${
-                      liveStatus.status === 'blocked' ? 'bg-amber-400/12 text-amber-300'
-                      : liveStatus.status === 'ok' ? 'bg-emerald-400/12 text-emerald-400'
-                      : liveStatus.status === 'progress' ? 'bg-blue-500/12 text-blue-400'
-                      : 'bg-white/[0.03] text-text-3/50'
-                    }`}>
-                      <span className={`w-1 h-1 rounded-full ${dotColor}`} />
-                      {liveStatus.status}
-                    </span>
-                  )}
-                  {liveStatus.goal && (
-                    <span className="text-[10px] text-text-3/40 font-mono truncate max-w-[180px]" title={liveStatus.goal}>
-                      {liveStatus.goal}
-                    </span>
-                  )}
-                  {liveStatus.nextAction && (
-                    <>
-                      <span className="text-[9px] text-text-3/20 shrink-0">→</span>
-                      <span className="text-[10px] text-text-3/35 font-mono truncate max-w-[140px]" title={liveStatus.nextAction}>
-                        {liveStatus.nextAction}
-                      </span>
-                    </>
-                  )}
-                </>
-              )
-            })()}
+              <span className="truncate">{mobile ? 'Workspace' : workspaceLabel}</span>
+            </HeaderChip>
+            </Tip>
+            {liveStatus?.status && (
+              <HeaderChip
+                className={`${
+                  liveStatus.status === 'blocked' ? 'bg-amber-400/12 border-amber-400/15 text-amber-300'
+                  : liveStatus.status === 'ok' ? 'bg-emerald-400/12 border-emerald-400/15 text-emerald-400'
+                  : liveStatus.status === 'progress' ? 'bg-blue-500/12 border-blue-500/15 text-blue-400'
+                  : 'text-text-3/60'
+                }`}
+                title={liveStatus.goal || liveStatus.summary || liveStatus.nextAction || liveStatus.status}
+              >
+                <span className={`w-1.5 h-1.5 rounded-full ${
+                  liveStatus.status === 'blocked' ? 'bg-amber-300'
+                  : liveStatus.status === 'ok' ? 'bg-emerald-400'
+                  : liveStatus.status === 'progress' ? 'bg-blue-400'
+                  : 'bg-text-3/30'
+                }`} />
+                {liveStatus.status}
+              </HeaderChip>
+            )}
+            {!mobile && liveStatus?.nextAction && (
+              <span className="text-[10px] text-text-3/45 font-mono truncate max-w-[min(34vw,220px)]" title={liveStatus.nextAction}>
+                Next: {liveStatus.nextAction}
+              </span>
+            )}
           </div>
         </div>
 
-        {/* Heartbeat compound control */}
-        {heartbeatSupported && (
-          <div className="flex items-center rounded-[8px] shrink-0" style={{ background: 'rgba(255,255,255,0.025)' }}>
-            <button
-              onClick={handleToggleHeartbeat}
-              disabled={heartbeatSaving}
-              className={`flex items-center gap-1.5 pl-2.5 pr-1.5 py-1 transition-colors cursor-pointer border-none text-[11px] font-600
-                ${heartbeatWillRun ? 'text-emerald-400 hover:bg-emerald-500/10' : 'text-text-3/60 hover:bg-white/[0.04]'}`}
-              title={heartbeatWillRun ? 'Disable heartbeat' : 'Enable heartbeat'}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full transition-colors ${heartbeatWillRun ? 'bg-emerald-400' : 'bg-text-3/30'}`} />
-              HB
-              {heartbeatEnabled && !loopIsOngoing && !heartbeatExplicitOptIn && (
-                <span className="text-[9px] text-text-3/40">(bounded)</span>
-              )}
-            </button>
-            <div className="relative" ref={hbDropdownRef}>
+        <div className={`flex items-center gap-2 shrink-0 ${mobile ? 'w-full justify-between pt-1' : 'ml-auto'}`}>
+          {/* Heartbeat compound control */}
+          {heartbeatSupported && (
+            <div className="flex items-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] shrink-0">
+              <Tip label={heartbeatWillRun ? 'Disable heartbeat — periodic check-ins' : 'Enable heartbeat — periodic check-ins'}>
               <button
-                onClick={() => setHbDropdownOpen((o) => !o)}
+                onClick={handleToggleHeartbeat}
                 disabled={heartbeatSaving}
-                className="flex items-center gap-0.5 pl-1 pr-2 py-1 text-text-3/50 hover:text-text-3/70 hover:bg-white/[0.04] transition-colors cursor-pointer border-none"
-                title="Set heartbeat interval"
+                aria-pressed={heartbeatWillRun}
+                className={`flex items-center gap-1.5 pl-2.5 pr-2 py-1.5 rounded-l-[11px] transition-colors cursor-pointer border-none text-[11px] font-600
+                  ${heartbeatWillRun ? 'text-emerald-400 hover:bg-emerald-500/10' : 'text-text-3/70 hover:bg-white/[0.04]'}`}
               >
-                <span className="text-[11px] font-600">{formatDuration(heartbeatIntervalSec)}</span>
-                <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="opacity-40">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <span className={`w-1.5 h-1.5 rounded-full transition-colors ${heartbeatWillRun ? 'bg-emerald-400' : heartbeatEnabled ? 'bg-amber-300' : 'bg-text-3/30'}`} />
+                <span className="hidden sm:inline">Heartbeat</span>
+                <span className="sm:hidden">HB</span>
+                <span className={`hidden md:inline text-[9px] uppercase tracking-wider ${
+                  heartbeatWillRun ? 'text-emerald-300/80' : heartbeatEnabled ? 'text-amber-300/70' : 'text-text-3/40'
+                }`}>
+                  {heartbeatWillRun ? 'On' : heartbeatEnabled ? 'Bounded' : 'Off'}
+                </span>
               </button>
-              {hbDropdownOpen && (
-                <div className="absolute top-full right-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]">
-                  {[...(typeof window !== 'undefined' && window.location.hostname === 'localhost' ? [10, 15, 30, 60] : []), 1800, 3600, 7200, 21600, 43200].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>
-              )}
+              </Tip>
+              <div className="relative" ref={hbDropdownRef}>
+                <Tip label="Set heartbeat interval">
+                <button
+                  onClick={() => setHbDropdownOpen((o) => !o)}
+                  disabled={heartbeatSaving}
+                  className="flex items-center gap-0.5 pl-1 pr-2.5 py-1.5 text-text-3/60 hover:text-text-2 hover:bg-white/[0.04] transition-colors cursor-pointer border-none rounded-r-[11px]"
+                >
+                  <span className="text-[11px] font-600">{formatDuration(heartbeatIntervalSec)}</span>
+                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="opacity-40">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </button>
+                </Tip>
+                {hbDropdownOpen && (
+                  <div className="absolute top-full right-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[88px]">
+                    {[...(typeof window !== 'undefined' && window.location.hostname === 'localhost' ? [10, 15, 30, 60] : []), 1800, 3600, 7200, 21600, 43200].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>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* Action buttons */}
-        <div className="flex items-center shrink-0">
+          {/* Action buttons */}
+          <div className="flex items-center shrink-0 rounded-[12px] border border-white/[0.06] bg-white/[0.03] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] p-1">
           {streaming && (
             <>
               <IconButton onClick={onStop} variant="danger" tooltip="Stop" aria-label="Stop generation" size="sm">
@@ -881,79 +907,29 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
             </IconButton>
           )}
         </div>
+        </div>
       </div>
 
-      {/* Context bar: tools, mission controls, links */}
+      {/* Context bar: tools and links */}
       {hasContextBar && (
-        <div className="flex items-center gap-1.5 px-3.5 pb-1.5 flex-wrap">
-          {isMainSession && (
-            <>
-              <button
-                onClick={handleToggleMissionPause}
-                disabled={mainLoopSaving}
-                className={`flex items-center gap-1.5 px-2 py-1 rounded-[7px] transition-colors cursor-pointer border-none text-[10px] font-600
-                  ${missionPaused ? 'bg-amber-500/10 hover:bg-amber-500/18 text-amber-300' : 'bg-emerald-500/8 hover:bg-emerald-500/12 text-emerald-400'}`}
-                title={missionPaused ? 'Resume mission' : 'Pause mission'}
-              >
-                <span className={`w-1.5 h-1.5 rounded-full ${missionPaused ? 'bg-amber-300' : 'bg-emerald-400'}`} />
-                {missionPaused ? 'Paused' : 'Live'}
-              </button>
-
-              <button
-                onClick={handleToggleMissionMode}
-                disabled={mainLoopSaving}
-                className={`flex items-center gap-1 px-2 py-1 rounded-[7px] transition-colors cursor-pointer border-none text-[10px] font-600
-                  ${missionMode === 'autonomous' ? 'bg-indigo-500/12 hover:bg-indigo-500/20 text-indigo-300' : 'bg-white/[0.03] hover:bg-white/[0.06] text-text-3/60'}`}
-                title="Toggle autonomy mode"
-              >
-                {missionMode === 'autonomous' ? 'Auto' : 'Assist'}
-              </button>
-              <button
-                onClick={handleNudgeMission}
-                disabled={mainLoopSaving || missionPaused}
-                className="px-2 py-1 rounded-[7px] bg-blue-500/8 hover:bg-blue-500/15 text-blue-400 transition-colors cursor-pointer border-none disabled:opacity-50 text-[10px] font-600"
-                title="Run one tick"
-              >
-                Nudge
-              </button>
-              <button
-                onClick={handleSetMissionGoal}
-                disabled={mainLoopSaving}
-                className="px-2 py-1 rounded-[7px] bg-fuchsia-500/8 hover:bg-fuchsia-500/15 text-fuchsia-300 transition-colors cursor-pointer border-none text-[10px] font-600"
-                title="Set mission goal"
-              >
-                Goal
-              </button>
-              {missionEventsCount > 0 && (
-                <button
-                  onClick={handleClearMissionEvents}
-                  disabled={mainLoopSaving}
-                  className="px-2 py-1 rounded-[7px] bg-white/[0.03] hover:bg-white/[0.06] text-text-3/60 transition-colors cursor-pointer border-none text-[10px] font-600"
-                  title="Clear pending events"
-                >
-                  Events {missionEventsCount}
-                </button>
-              )}
-              <span className="text-[9px] text-text-3/40 uppercase tracking-wider shrink-0">
-                {missionStatus}{missionMomentum !== null ? ` · ${missionMomentum}` : ''}
-              </span>
-              {mainLoopError && <span className="text-[9px] text-red-300/80 truncate max-w-[240px]" title={mainLoopError}>{mainLoopError}</span>}
-              {mainLoopNotice && <span className="text-[9px] text-emerald-300/80 truncate max-w-[200px]" title={mainLoopNotice}>{mainLoopNotice}</span>}
-            </>
-          )}
+        <div className="border-t border-white/[0.05] bg-black/[0.08] px-4 py-2">
+        <div className="flex items-center gap-1.5 flex-wrap">
           {hasMemoryLink && (
+            <Tip label="View agent memories">
             <button
               onClick={() => { setMemoryAgentFilter(session.agentId!); setActiveView('memory'); setSidebarOpen(true) }}
-              className="flex items-center gap-1 px-2 py-1 rounded-[7px] bg-accent-soft/40 hover:bg-accent-soft/70 transition-colors cursor-pointer text-[10px] font-600 text-accent-bright/55 hover:text-accent-bright/80 shrink-0"
+              className="flex items-center gap-1 px-2.5 py-1 rounded-[8px] bg-accent-soft/40 hover:bg-accent-soft/70 transition-colors cursor-pointer text-[10px] font-600 text-accent-bright/55 hover:text-accent-bright/80 shrink-0"
             >
               <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" /><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
               </svg>
               Memories
             </button>
+            </Tip>
           )}
           {hasSourceFilter && onConnectorFilterChange && connectorSources && (
             <div className="relative shrink-0" ref={sourceDropdownRef}>
+              <Tip label="Filter messages by source connector">
               <button
                 onClick={() => setSourceDropdownOpen((o) => !o)}
                 className={`flex items-center gap-1 px-2 py-1 rounded-[7px] transition-colors cursor-pointer border-none text-[10px] font-600 shrink-0 ${
@@ -961,7 +937,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                     ? 'bg-accent-soft/60 text-accent-bright/80 hover:bg-accent-soft'
                     : 'bg-white/[0.03] text-text-3/50 hover:bg-white/[0.06] hover:text-text-3/70'
                 }`}
-                title="Filter by message source"
               >
                 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                   <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
@@ -973,8 +948,9 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                   <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                 </svg>
               </button>
+              </Tip>
               {sourceDropdownOpen && (
-                <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-[140px]">
+                <div className="absolute top-full right-0 sm:left-0 sm:right-auto mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[160px] max-w-[calc(100vw-2rem)]">
                   <button
                     onClick={() => { onConnectorFilterChange(null); setSourceDropdownOpen(false) }}
                     className={`w-full text-left px-3 py-1.5 text-[11px] font-600 transition-colors cursor-pointer border-none flex items-center gap-2 ${
@@ -1005,11 +981,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
           )}
           {isOpenClawAgent && openclawSessionKey && (
             <>
+              <Tip label="Sync chat history from OpenClaw gateway">
               <button
                 onClick={handleSyncHistory}
                 disabled={syncingHistory}
                 className="flex items-center gap-1 px-2 py-1 rounded-[7px] bg-indigo-500/8 hover:bg-indigo-500/12 transition-colors cursor-pointer border-none disabled:opacity-50 text-[10px] font-600 text-indigo-400 shrink-0"
-                title="Sync from gateway"
               >
                 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                   <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" />
@@ -1017,10 +993,12 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 </svg>
                 {syncingHistory ? 'Syncing...' : 'Sync'}
               </button>
+              </Tip>
               {syncResult && <span className="text-[9px] text-emerald-300/80 shrink-0">{syncResult}</span>}
             </>
           )}
           {linkedTask && (
+            <Tip label="View linked task">
             <button
               onClick={() => setActiveView('tasks')}
               className="flex items-center gap-1 px-2 py-1 rounded-[7px] bg-amber-500/8 hover:bg-amber-500/12 transition-colors cursor-pointer text-[10px] font-600 text-amber-500 shrink-0"
@@ -1030,37 +1008,40 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               </svg>
               <span className="truncate max-w-[160px]">{linkedTask.title}</span>
             </button>
+            </Tip>
           )}
           {resumeHandle && (
             <div className="flex items-center rounded-[7px] bg-white/[0.03] group/resume shrink-0">
+              <Tip label="Copy CLI resume command">
               <button
                 onClick={handleCopySessionId}
-                className="flex items-center gap-1 px-2 py-1 rounded-l-[7px] hover:bg-white/[0.06] transition-colors cursor-pointer"
-                title="Copy resume command"
+                className="flex min-w-0 items-center gap-1 px-2 py-1 rounded-l-[7px] hover:bg-white/[0.06] transition-colors cursor-pointer"
               >
                 <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/40 shrink-0">
                   <path d="M4 17l6 0l0 -6" /><path d="M20 7l-6 0l0 6" /><path d="M4 17l10 -10" />
                 </svg>
-                <span className="text-[10px] font-mono text-text-3/40 group-hover/resume:text-text-3/60 truncate max-w-[180px]">
+                <span className="text-[10px] font-mono text-text-3/40 group-hover/resume:text-text-3/60 truncate max-w-[min(46vw,220px)]">
                   {copied ? 'Copied!' : `${resumeHandle.label}: ${resumeHandle.id}`}
                 </span>
               </button>
+              </Tip>
+              <Tip label="Dismiss resume handle">
               <button
                 onClick={handleDismissResumeHandle}
-                className="px-1 py-1 rounded-r-[7px] hover:bg-white/[0.06] transition-colors cursor-pointer opacity-0 group-hover/resume:opacity-100"
-                title="Dismiss"
+                className="px-1 py-1 rounded-r-[7px] hover:bg-white/[0.06] transition-colors cursor-pointer opacity-60 md:opacity-0 md:group-hover/resume:opacity-100 group-focus-within/resume:opacity-100"
               >
                 <svg width="8" height="8" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40 hover:text-text-3">
                   <path d="M4 4l8 8M12 4l-8 8" />
                 </svg>
               </button>
+              </Tip>
             </div>
           )}
           {browserActive && (
+            <Tip label="Close the browser session">
             <button
               onClick={onStopBrowser}
               className="flex items-center gap-1 px-2 py-1 rounded-[7px] bg-accent-bright/8 hover:bg-red-500/12 transition-colors cursor-pointer group text-[10px] font-600 shrink-0"
-              title="Stop browser"
             >
               <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-accent-bright group-hover:text-red-400">
                 <rect x="3" y="3" width="18" height="14" rx="2" /><path d="M3 9h18" />
@@ -1070,9 +1051,13 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
               </svg>
             </button>
+            </Tip>
           )}
         </div>
+        </div>
       )}
+
     </header>
+    </>
   )
 }