@swarmclawai/swarmclaw 0.2.0

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

@@ -0,0 +1,491 @@
+'use client'
+
+import { useEffect, useState, useMemo } from 'react'
+import type { Session } from '@/types'
+import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
+import { IconButton } from '@/components/shared/icon-button'
+import { UsageBadge } from '@/components/shared/usage-badge'
+import { ChatToolToggles } from './chat-tool-toggles'
+import { api } from '@/lib/api-client'
+import {
+  ConnectorPlatformIcon,
+  CONNECTOR_PLATFORM_META,
+  getSessionConnector,
+} from '@/components/shared/connector-platform-icon'
+
+function shortPath(p: string): string {
+  return (p || '').replace(/^\/Users\/\w+/, '~')
+}
+
+const PROVIDER_LABELS: Record<string, string> = {
+  'claude-cli': 'CLI',
+  openai: 'OpenAI',
+  ollama: 'Ollama',
+  anthropic: 'Anthropic',
+}
+
+interface Props {
+  session: Session
+  streaming: boolean
+  onStop: () => void
+  onMenuToggle: () => void
+  onBack?: () => void
+  mobile?: boolean
+  browserActive?: boolean
+  onStopBrowser?: () => void
+}
+
+export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser }: Props) {
+  const ttsEnabled = useChatStore((s) => s.ttsEnabled)
+  const toggleTts = useChatStore((s) => s.toggleTts)
+  const debugOpen = useChatStore((s) => s.debugOpen)
+  const setDebugOpen = useChatStore((s) => s.setDebugOpen)
+  const lastUsage = useChatStore((s) => s.lastUsage)
+  const agents = useAppStore((s) => s.agents)
+  const tasks = useAppStore((s) => s.tasks)
+  const setActiveView = useAppStore((s) => s.setActiveView)
+  const setMemoryAgentFilter = useAppStore((s) => s.setMemoryAgentFilter)
+  const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const connectors = useAppStore((s) => s.connectors)
+  const loadConnectors = useAppStore((s) => s.loadConnectors)
+  const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
+  const agent = session.agentId ? agents[session.agentId] : null
+  const connector = getSessionConnector(session, connectors)
+  const connectorMeta = connector ? CONNECTOR_PLATFORM_META[connector.platform] : null
+  const modelName = session.model || agent?.model || ''
+  const [copied, setCopied] = useState(false)
+  const [heartbeatSaving, setHeartbeatSaving] = useState(false)
+  const [mainLoopSaving, setMainLoopSaving] = useState(false)
+  const [mainLoopError, setMainLoopError] = useState('')
+  const [mainLoopNotice, setMainLoopNotice] = useState('')
+
+  // Find linked task for this session
+  const linkedTask = useMemo(() => {
+    return Object.values(tasks).find((t) => t.sessionId === session.id)
+  }, [tasks, session.id])
+
+  const resumeHandle = useMemo(() => {
+    const fromSessionClaude = session.claudeSessionId
+      ? { label: 'Claude', id: session.claudeSessionId, command: `claude --resume ${session.claudeSessionId}` }
+      : null
+    const fromSessionCodex = session.codexThreadId
+      ? { label: 'Codex', id: session.codexThreadId, command: `codex exec resume ${session.codexThreadId}` }
+      : null
+    const fromSessionOpenCode = session.opencodeSessionId
+      ? { label: 'OpenCode', id: session.opencodeSessionId, command: `opencode run \"<task>\" --session ${session.opencodeSessionId}` }
+      : null
+    const fromDelegateClaude = session.delegateResumeIds?.claudeCode
+      ? { label: 'Claude', id: session.delegateResumeIds.claudeCode, command: `claude --resume ${session.delegateResumeIds.claudeCode}` }
+      : null
+    const fromDelegateCodex = session.delegateResumeIds?.codex
+      ? { label: 'Codex', id: session.delegateResumeIds.codex, command: `codex exec resume ${session.delegateResumeIds.codex}` }
+      : null
+    const fromDelegateOpenCode = session.delegateResumeIds?.opencode
+      ? { label: 'OpenCode', id: session.delegateResumeIds.opencode, command: `opencode run \"<task>\" --session ${session.delegateResumeIds.opencode}` }
+      : null
+    return fromSessionClaude
+      || fromSessionCodex
+      || fromSessionOpenCode
+      || fromDelegateClaude
+      || fromDelegateCodex
+      || fromDelegateOpenCode
+      || null
+  }, [session.claudeSessionId, session.codexThreadId, session.opencodeSessionId, session.delegateResumeIds])
+
+  const handleCopySessionId = () => {
+    if (!resumeHandle) return
+    navigator.clipboard.writeText(resumeHandle.command)
+    setCopied(true)
+    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 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
+    setHeartbeatSaving(true)
+    try {
+      await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: !heartbeatEnabled })
+      await loadSessions()
+    } finally {
+      setHeartbeatSaving(false)
+    }
+  }
+
+  const handleCycleHeartbeatInterval = async () => {
+    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]
+    setHeartbeatSaving(true)
+    try {
+      await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: next, heartbeatEnabled: true })
+      await loadSessions()
+    } finally {
+      setHeartbeatSaving(false)
+    }
+  }
+
+  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')
+  }
+
+  useEffect(() => {
+    if (session.name.startsWith('connector:')) {
+      void loadConnectors()
+    }
+  }, [session.name, loadConnectors])
+
+  useEffect(() => {
+    setMainLoopError('')
+    setMainLoopNotice('')
+  }, [session.id])
+
+  useEffect(() => {
+    if (!mainLoopNotice) return
+    const timer = setTimeout(() => setMainLoopNotice(''), 2500)
+    return () => clearTimeout(timer)
+  }, [mainLoopNotice])
+
+  return (
+    <header className="relative z-20 flex flex-col border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0"
+      style={mobile ? { paddingTop: 'max(12px, env(safe-area-inset-top))' } : undefined}>
+      <div className="flex items-center gap-3 px-5 py-3 min-h-[56px]">
+        {onBack && (
+          <IconButton onClick={onBack} aria-label="Go back">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+          </IconButton>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2.5">
+            <span className="font-display text-[16px] font-600 block truncate tracking-[-0.02em]">{
+              session.name === '__main__' ? 'Main Chat'
+              : session.name.startsWith('agent-thread:') ? (agent?.name || session.name)
+              : session.name
+            }</span>
+            {connector && connectorMeta && (
+              <span
+                className="shrink-0 inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[7px] border text-[10px] font-700 uppercase tracking-wider"
+                style={{
+                  color: connectorMeta.color,
+                  backgroundColor: `${connectorMeta.color}1A`,
+                  borderColor: `${connectorMeta.color}33`,
+                }}
+                title={`${connector.name} connector`}
+              >
+                <ConnectorPlatformIcon platform={connector.platform} size={11} />
+                {connectorMeta.label}
+              </span>
+            )}
+            {session.provider && session.provider !== 'claude-cli' && (
+              <span className="shrink-0 px-2.5 py-0.5 rounded-[7px] bg-accent-soft text-accent-bright text-[10px] font-700 uppercase tracking-wider">
+                {providerLabel}
+              </span>
+            )}
+            {agent?.isOrchestrator && (
+              <span className="shrink-0 px-2.5 py-0.5 rounded-[7px] bg-[#F59E0B]/10 text-[#F59E0B] text-[10px] font-700 uppercase tracking-wider">
+                Orchestrator
+              </span>
+            )}
+            {session.tools?.length ? (
+              <span className="shrink-0 px-2.5 py-0.5 rounded-[7px] bg-emerald-500/10 text-emerald-400 text-[10px] font-700 uppercase tracking-wider">
+                Tools
+              </span>
+            ) : null}
+            {streaming && (
+              <span className="shrink-0 w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+            )}
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-[11px] text-text-3/60 font-mono block truncate">{shortPath(session.cwd)}</span>
+            {modelName && (
+              <>
+                <span className="text-[11px] text-text-3/60">·</span>
+                <span className="text-[11px] text-text-3/50 font-mono truncate shrink-0">{modelName}</span>
+              </>
+            )}
+            {lastUsage && !streaming && (
+              <>
+                <span className="text-[11px] text-text-3/60">·</span>
+                <UsageBadge {...lastUsage} />
+              </>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-1.5">
+          {streaming && (
+            <IconButton onClick={onStop} variant="danger" aria-label="Stop generation">
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+                <rect x="6" y="6" width="12" height="12" rx="2" />
+              </svg>
+            </IconButton>
+          )}
+          <IconButton onClick={() => setDebugOpen(!debugOpen)} active={debugOpen} aria-label="Toggle debug panel">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M12 20V10" />
+              <path d="M18 20V4" />
+              <path d="M6 20v-4" />
+            </svg>
+          </IconButton>
+          <IconButton onClick={toggleTts} active={ttsEnabled} aria-label="Toggle text-to-speech">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+              <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">
+            <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" />
+              <circle cx="12" cy="18" r="1" />
+            </svg>
+          </IconButton>
+        </div>
+      </div>
+
+      {/* Sub-bar: tools toggle + agent memories + task link + CLI session ID + browser */}
+      {(agent || linkedTask || resumeHandle || browserActive || session.tools?.length || isMainSession) && (
+        <div className="flex items-center gap-3 px-5 pb-2.5 -mt-1">
+          {(((agent?.tools?.length ?? 0) > 0) || ((session.tools?.length ?? 0) > 0)) && (
+            <ChatToolToggles session={session} />
+          )}
+          {heartbeatSupported && (
+            <>
+              <button
+                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'}
+              >
+                <span className={`w-1.5 h-1.5 rounded-full ${heartbeatEnabled ? 'bg-emerald-400' : 'bg-text-3/40'}`} />
+                <span className="text-[11px] font-600">
+                  HB {heartbeatEnabled ? 'On' : 'Off'}
+                </span>
+                {!loopIsOngoing && (
+                  <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>
+            </>
+          )}
+          {isMainSession && (
+            <>
+              <button
+                onClick={handleToggleMissionPause}
+                disabled={mainLoopSaving}
+                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] transition-colors cursor-pointer border-none
+                  ${missionPaused ? 'bg-amber-500/12 hover:bg-amber-500/20 text-amber-300' : 'bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-400'}`}
+                title={missionPaused ? 'Resume autonomous mission loop' : 'Pause autonomous mission loop'}
+              >
+                <span className={`w-1.5 h-1.5 rounded-full ${missionPaused ? 'bg-amber-300' : 'bg-emerald-400'}`} />
+                <span className="text-[11px] font-600">
+                  Mission {missionPaused ? 'Paused' : 'Live'}
+                </span>
+              </button>
+              <button
+                onClick={handleToggleMissionMode}
+                disabled={mainLoopSaving}
+                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] transition-colors cursor-pointer border-none
+                  ${missionMode === 'autonomous'
+                    ? 'bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-200'
+                    : 'bg-white/[0.04] hover:bg-white/[0.07] text-text-3'
+                  }`}
+                title="Toggle mission autonomy mode"
+              >
+                <span className="text-[11px] font-600">
+                  Mode {missionMode === 'autonomous' ? 'Auto' : 'Assist'}
+                </span>
+              </button>
+              <button
+                onClick={handleNudgeMission}
+                disabled={mainLoopSaving || missionPaused}
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-[#3B82F6]/10 hover:bg-[#3B82F6]/18 text-[#60A5FA] transition-colors cursor-pointer border-none disabled:opacity-60"
+                title="Run one immediate main-loop mission tick"
+              >
+                <span className="text-[11px] font-600">Nudge</span>
+              </button>
+              <button
+                onClick={handleSetMissionGoal}
+                disabled={mainLoopSaving}
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-fuchsia-500/10 hover:bg-fuchsia-500/18 text-fuchsia-300 transition-colors cursor-pointer border-none"
+                title="Set an explicit mission goal"
+              >
+                <span className="text-[11px] font-600">Set Goal</span>
+              </button>
+              {missionEventsCount > 0 && (
+                <button
+                  onClick={handleClearMissionEvents}
+                  disabled={mainLoopSaving}
+                  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="Clear pending mission events"
+                >
+                  <span className="text-[11px] font-600">Events {missionEventsCount}</span>
+                </button>
+              )}
+              <span className="text-[10px] text-text-3/50 uppercase tracking-wider">
+                {`State ${missionStatus}${missionMomentum !== null ? ` · ${missionMomentum}` : ''}`}
+              </span>
+              {mainLoopError && (
+                <span className="text-[10px] text-red-300/90 truncate max-w-[280px]" title={mainLoopError}>
+                  {mainLoopError}
+                </span>
+              )}
+              {mainLoopNotice && (
+                <span className="text-[10px] text-emerald-300/90 truncate max-w-[220px]" title={mainLoopNotice}>
+                  {mainLoopNotice}
+                </span>
+              )}
+            </>
+          )}
+          {agent && session.tools?.includes('memory') && (
+            <button
+              onClick={() => {
+                setMemoryAgentFilter(session.agentId!)
+                setActiveView('memory')
+                setSidebarOpen(true)
+              }}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-accent-soft/50 hover:bg-accent-soft transition-colors cursor-pointer"
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-accent-bright/60">
+                <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>
+              <span className="text-[11px] font-600 text-accent-bright/60">
+                {agent.name} Memories
+              </span>
+            </button>
+          )}
+          {linkedTask && (
+            <button
+              onClick={() => setActiveView('tasks')}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-[#F59E0B]/10 hover:bg-[#F59E0B]/15 transition-colors cursor-pointer"
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round">
+                <path d="M9 11l3 3L22 4" />
+                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+              </svg>
+              <span className="text-[11px] font-600 text-[#F59E0B] truncate max-w-[200px]">
+                Task: {linkedTask.title}
+              </span>
+            </button>
+          )}
+          {resumeHandle && (
+            <button
+              onClick={handleCopySessionId}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] transition-colors cursor-pointer group"
+              title="Copy resume handle/command to clipboard"
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50">
+                <path d="M4 17l6 0l0 -6" />
+                <path d="M20 7l-6 0l0 6" />
+                <path d="M4 17l10 -10" />
+              </svg>
+              <span className="text-[11px] font-mono text-text-3/50 group-hover:text-text-3/70 truncate max-w-[220px]">
+                {copied ? 'Copied!' : `${resumeHandle.label}: ${resumeHandle.id}`}
+              </span>
+              {!copied && (
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60 shrink-0">
+                  <rect x="9" y="9" width="13" height="13" rx="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+              )}
+            </button>
+          )}
+          {browserActive && (
+            <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"
+            >
+              <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" />
+                <path d="M3 9h18" />
+                <circle cx="7" cy="6" r="0.5" fill="currentColor" />
+                <circle cx="10" cy="6" r="0.5" fill="currentColor" />
+              </svg>
+              <span className="text-[11px] font-600 text-[#3B82F6] group-hover:text-[#F43F5E]">
+                Browser Active
+              </span>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/60 group-hover:text-[#F43F5E] shrink-0">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+    </header>
+  )
+}

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

@@ -0,0 +1,161 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { Session } from '@/types'
+
+const TOOL_GROUPS: { label: string; tools: Record<string, string> }[] = [
+  {
+    label: 'Tools',
+    tools: {
+      shell: 'Shell',
+      files: 'Files',
+      edit_file: 'Edit File',
+      process: 'Process',
+      web_search: 'Web Search',
+      web_fetch: 'Web Fetch',
+      browser: 'Browser',
+      memory: 'Memory',
+    },
+  },
+  {
+    label: 'Delegation',
+    tools: {
+      claude_code: 'Claude Code',
+      codex_cli: 'Codex CLI',
+      opencode_cli: 'OpenCode CLI',
+    },
+  },
+  {
+    label: 'Platform',
+    tools: {
+      orchestrator: 'Orchestrator',
+      manage_agents: 'Agents',
+      manage_tasks: 'Tasks',
+      manage_schedules: 'Schedules',
+      manage_skills: 'Skills',
+      manage_documents: 'Documents',
+      manage_webhooks: 'Webhooks',
+      manage_connectors: 'Connectors',
+      manage_sessions: 'Sessions',
+      manage_secrets: 'Secrets',
+    },
+  },
+]
+
+// Flat lookup for display names
+const ALL_TOOLS: Record<string, string> = {}
+for (const g of TOOL_GROUPS) Object.assign(ALL_TOOLS, g.tools)
+
+const TOOL_HINTS: Record<string, string> = {
+  orchestrator: 'Can delegate tasks to other agents',
+}
+
+interface Props {
+  session: Session
+}
+
+export function ChatToolToggles({ session }: Props) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const agents = useAppStore((s) => s.agents)
+  const skills = useAppStore((s) => s.skills)
+
+  const agent = session.agentId ? agents[session.agentId] : null
+  const sessionTools: string[] = session.tools || []
+
+  // Agent's skill IDs
+  const agentSkillIds: string[] = agent?.skillIds || []
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const toggleTool = async (toolId: string) => {
+    const updated = sessionTools.includes(toolId)
+      ? sessionTools.filter((t) => t !== toolId)
+      : [...sessionTools, toolId]
+    await api('PUT', `/sessions/${session.id}`, { tools: updated })
+    loadSessions()
+  }
+
+  const enabledCount = sessionTools.length
+  const totalCount = Object.keys(ALL_TOOLS).length
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] transition-colors cursor-pointer border-none
+          ${open ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.07]'}`}
+      >
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+        </svg>
+        <span className="text-[11px] font-600">
+          {enabledCount}/{totalCount}
+        </span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 w-[260px] max-h-[420px] overflow-y-auto rounded-[12px] border border-white/[0.08] shadow-xl z-[120] overflow-hidden"
+          style={{ animation: 'fade-in 0.15s ease', backgroundColor: '#171a2b' }}>
+
+          {TOOL_GROUPS.map((group, gi) => (
+            <div key={group.label} className={`px-3 pb-1 ${gi === 0 ? 'pt-3' : 'pt-1 border-t border-white/[0.04]'}`}>
+              <p className="text-[10px] font-600 text-text-3/60 uppercase tracking-wider mb-2">{group.label}</p>
+              {Object.entries(group.tools).map(([toolId, label]) => {
+                const enabled = sessionTools.includes(toolId)
+                return (
+                  <label key={toolId} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
+                    <div
+                      onClick={() => toggleTool(toolId)}
+                      className={`w-8 h-[18px] rounded-full transition-all duration-200 relative cursor-pointer shrink-0
+                        ${enabled ? 'bg-[#6366F1]' : 'bg-white/[0.12]'}`}
+                    >
+                      <div className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white transition-all duration-200
+                        ${enabled ? 'left-[16px]' : 'left-[2px]'}`} />
+                    </div>
+                    <span className={`text-[12px] ${enabled ? 'text-text-2' : 'text-text-3/70'}`}>
+                      {label}
+                      {TOOL_HINTS[toolId] && (
+                        <span className="ml-2 text-[10px] text-text-3/70 font-400">{TOOL_HINTS[toolId]}</span>
+                      )}
+                    </span>
+                  </label>
+                )
+              })}
+            </div>
+          ))}
+
+          {agentSkillIds.length > 0 && (
+            <div className="px-3 pb-2 pt-1 border-t border-white/[0.04]">
+              <p className="text-[10px] font-600 text-text-3/60 uppercase tracking-wider mb-2">Skills</p>
+              {agentSkillIds.map((skillId) => {
+                const skill = skills[skillId]
+                if (!skill) return null
+                return (
+                  <div key={skillId} className="flex items-center gap-2.5 py-1.5">
+                    <span className="w-1.5 h-1.5 rounded-full bg-accent-bright/40 shrink-0" />
+                    <span className="text-[12px] text-text-2 truncate">{skill.name}</span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          <div className="px-3 py-2 border-t border-white/[0.04] bg-white/[0.02]">
+            <p className="text-[10px] text-text-3/70">Changes apply to the next message</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}