@swarmclawai/swarmclaw 0.3.0 → 0.4.0

package/src/components/schedules/schedule-sheet.tsx

@@ -3,9 +3,7 @@
 import { useEffect, useState, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createSchedule, updateSchedule, deleteSchedule } from '@/lib/schedules'
-import { api } from '@/lib/api-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
-import { AiGenBlock } from '@/components/shared/ai-gen-block'
 import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
 
@@ -63,49 +61,12 @@ export function ScheduleSheet() {
   const [status, setStatus] = useState<ScheduleStatus>('active')
   const [customCron, setCustomCron] = useState(false)
 
-  // AI generation state
-  const [aiPrompt, setAiPrompt] = useState('')
-  const [generating, setGenerating] = useState(false)
-  const [generated, setGenerated] = useState(false)
-  const [genError, setGenError] = useState('')
-  const appSettings = useAppStore((s) => s.appSettings)
-  const loadSettings = useAppStore((s) => s.loadSettings)
-
   const editing = editingId ? schedules[editingId] : null
   const agentList = Object.values(agents)
 
-  const handleGenerate = async () => {
-    if (!aiPrompt.trim()) return
-    setGenerating(true)
-    setGenError('')
-    try {
-      const result = await api<{ name?: string; taskPrompt?: string; scheduleType?: ScheduleType; cron?: string; intervalMs?: number; error?: string }>('POST', '/generate', { type: 'schedule', prompt: aiPrompt })
-      if (result.error) {
-        setGenError(result.error)
-      } else if (result.name || result.taskPrompt) {
-        if (result.name) setName(result.name)
-        if (result.taskPrompt) setTaskPrompt(result.taskPrompt)
-        if (result.scheduleType) setScheduleType(result.scheduleType)
-        if (result.cron) { setCron(result.cron); setCustomCron(true) }
-        if (result.intervalMs) setIntervalMs(result.intervalMs)
-        setGenerated(true)
-      } else {
-        setGenError('AI returned empty response — try again')
-      }
-    } catch (err: unknown) {
-      setGenError(err instanceof Error ? err.message : 'Generation failed')
-    }
-    setGenerating(false)
-  }
-
   useEffect(() => {
     if (open) {
       loadAgents()
-      loadSettings()
-      setAiPrompt('')
-      setGenerating(false)
-      setGenerated(false)
-      setGenError('')
       if (editing) {
         setName(editing.name || '')
         setAgentId(editing.agentId)
@@ -175,14 +136,6 @@ export function ScheduleSheet() {
         <p className="text-[14px] text-text-3">Automate agent tasks on a schedule</p>
       </div>
 
-      {/* AI Generation */}
-      {!editing && <AiGenBlock
-        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
-        generating={generating} generated={generated} genError={genError}
-        onGenerate={handleGenerate} appSettings={appSettings}
-        placeholder='Describe the schedule, e.g. "Run keyword research every Monday at 9am"'
-      />}
-
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily keyword research" className={inputClass} style={{ fontFamily: 'inherit' }} />

package/src/components/secrets/secrets-list.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 
 interface Props {
   inSidebar?: boolean
@@ -18,6 +19,12 @@ export function SecretsList({ inSidebar }: Props) {
     loadSecrets()
   }, [])
 
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/secrets/${id}`)
+    loadSecrets()
+  }
+
   const secretList = Object.values(secrets)
 
   if (!secretList.length) {
@@ -44,7 +51,7 @@ export function SecretsList({ inSidebar }: Props) {
 
   return (
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
-      <div className="space-y-2">
+      <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
         {secretList.map((secret) => {
           const scopeLabel = secret.scope === 'global'
             ? 'All orchestrators'
@@ -68,7 +75,18 @@ export function SecretsList({ inSidebar }: Props) {
                   <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                   <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                 </svg>
-                <span className="text-[14px] font-600 text-text truncate">{secret.name}</span>
+                <span className="text-[14px] font-600 text-text truncate flex-1">{secret.name}</span>
+                {!inSidebar && (
+                  <button
+                    onClick={(e) => handleDelete(e, secret.id)}
+                    className="text-text-3/40 hover:text-red-400 transition-colors p-0.5 shrink-0"
+                    title="Delete"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                      <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                    </svg>
+                  </button>
+                )}
               </div>
               <div className="flex items-center gap-2 pl-[22px]">
                 <span className="text-[11px] font-mono text-text-3">{secret.service}</span>

package/src/components/sessions/new-session-sheet.tsx

@@ -7,6 +7,7 @@ import { createSession, createCredential } from '@/lib/sessions'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { DirBrowser } from '@/components/shared/dir-browser'
 import { TOOL_LABELS, TOOL_DESCRIPTIONS } from '@/components/chat/tool-call-bubble'
+import { ModelCombobox } from '@/components/shared/model-combobox'
 import type { ProviderType, SessionTool } from '@/types'
 
 export function NewSessionSheet() {
@@ -269,16 +270,14 @@ export function NewSessionSheet() {
               <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
                 Model
               </label>
-              <select
+              <ModelCombobox
+                providerId={currentProvider.id}
                 value={model}
-                onChange={(e) => setModel(e.target.value)}
-                className={`${inputClass} appearance-none cursor-pointer`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {currentProvider.models.map((m) => (
-                  <option key={m} value={m}>{m}</option>
-                ))}
-              </select>
+                onChange={setModel}
+                models={currentProvider.models}
+                defaultModels={currentProvider.defaultModels}
+                className={`${inputClass} cursor-pointer`}
+              />
             </div>
           )}
 

package/src/components/shared/connector-platform-icon.tsx

@@ -1,5 +1,15 @@
 import type { Connector, ConnectorPlatform, Session } from '@/types'
 import { cn } from '@/lib/utils'
+import { BsMicrosoftTeams } from 'react-icons/bs'
+import {
+  SiDiscord,
+  SiGooglechat,
+  SiMatrix,
+  SiSignal,
+  SiSlack,
+  SiTelegram,
+  SiWhatsapp,
+} from 'react-icons/si'
 
 export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string; color: string }> = {
   discord: { label: 'Discord', color: '#5865F2' },
@@ -45,29 +55,21 @@ export function ConnectorPlatformIcon({
 }: ConnectorPlatformIconProps) {
   switch (platform) {
     case 'discord':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-        </svg>
-      )
+      return <SiDiscord size={size} className={className} />
     case 'telegram':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
-        </svg>
-      )
+      return <SiTelegram size={size} className={className} />
     case 'slack':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
-        </svg>
-      )
+      return <SiSlack size={size} className={className} />
     case 'whatsapp':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
-        </svg>
-      )
+      return <SiWhatsapp size={size} className={className} />
+    case 'signal':
+      return <SiSignal size={size} className={className} />
+    case 'googlechat':
+      return <SiGooglechat size={size} className={className} />
+    case 'matrix':
+      return <SiMatrix size={size} className={className} />
+    case 'teams':
+      return <BsMicrosoftTeams size={size} className={className} />
     case 'openclaw':
       return (
         <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>

package/src/components/shared/model-combobox.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface ModelComboboxProps {
+  providerId: string
+  value: string
+  onChange: (model: string) => void
+  models: string[]
+  defaultModels?: string[]
+  className?: string
+}
+
+export function ModelCombobox({
+  providerId,
+  value,
+  onChange,
+  models,
+  defaultModels = [],
+  className,
+}: ModelComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const loadProviders = useAppStore((s) => s.loadProviders)
+
+  const filtered = query
+    ? models.filter((m) => m.toLowerCase().includes(query.toLowerCase()))
+    : models
+
+  const isCustom = (m: string) => defaultModels.length > 0 && !defaultModels.includes(m)
+  const showAdd = query && !models.some((m) => m.toLowerCase() === query.toLowerCase())
+
+  const persistModels = useCallback(async (next: string[]) => {
+    await api('PUT', `/providers/${providerId}/models`, { models: next })
+    await loadProviders()
+  }, [providerId, loadProviders])
+
+  const addModel = useCallback(async (name: string) => {
+    const next = [...models, name]
+    await persistModels(next)
+    onChange(name)
+    setQuery('')
+    setOpen(false)
+  }, [models, persistModels, onChange])
+
+  const removeModel = useCallback(async (name: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    const next = models.filter((m) => m !== name)
+    if (value === name) onChange(next[0] || '')
+    if (next.length === defaultModels.length && next.every((m) => defaultModels.includes(m))) {
+      await api('DELETE', `/providers/${providerId}/models`)
+    } else {
+      await persistModels(next)
+    }
+    await loadProviders()
+  }, [models, defaultModels, value, onChange, providerId, persistModels, loadProviders])
+
+  const selectModel = useCallback((m: string) => {
+    onChange(m)
+    setQuery('')
+    setOpen(false)
+  }, [onChange])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div
+        className={`flex items-center ${className || ''}`}
+        onClick={() => {
+          setOpen(true)
+          setTimeout(() => inputRef.current?.focus(), 0)
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? query : value}
+          onChange={(e) => {
+            setQuery(e.target.value)
+            if (!open) setOpen(true)
+          }}
+          onFocus={() => setOpen(true)}
+          placeholder={value || 'Select model…'}
+          className="w-full bg-transparent outline-none text-inherit placeholder:text-text-3/50"
+          style={{ fontFamily: 'inherit' }}
+        />
+        <svg className="w-4 h-4 text-text-3 shrink-0 ml-2" viewBox="0 0 16 16" fill="none">
+          <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+
+      {open && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-xl">
+          {filtered.map((m) => (
+            <div
+              key={m}
+              onClick={() => selectModel(m)}
+              className={`flex items-center justify-between px-3 py-2 text-[14px] cursor-pointer transition-colors hover:bg-white/[0.04] ${m === value ? 'text-accent-bright' : 'text-text'}`}
+            >
+              <span className="truncate">{m}</span>
+              {isCustom(m) && (
+                <button
+                  onClick={(e) => removeModel(m, e)}
+                  className="ml-2 p-0.5 rounded hover:bg-white/[0.08] text-text-3 hover:text-red-400 transition-colors shrink-0"
+                  title="Remove custom model"
+                >
+                  <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          ))}
+
+          {showAdd && (
+            <div
+              onClick={() => addModel(query.trim())}
+              className="flex items-center gap-2 px-3 py-2 text-[14px] cursor-pointer transition-colors hover:bg-white/[0.04] text-accent-bright border-t border-white/[0.06]"
+            >
+              <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 16 16" fill="none">
+                <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              <span className="truncate">Add &ldquo;{query.trim()}&rdquo;</span>
+            </div>
+          )}
+
+          {filtered.length === 0 && !showAdd && (
+            <div className="px-3 py-2 text-[14px] text-text-3">No models found</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/settings/section-heartbeat.tsx

@@ -35,49 +35,20 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
-        Heartbeat
+        Heartbeat Defaults
       </h3>
       <p className="text-[12px] text-text-3 mb-5">
-        Configure ongoing heartbeat checks for long-lived sessions.
+        Global defaults inherited by agents. Enable heartbeat and set interval/model per-agent in the agent editor.
       </p>
       <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
           <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Interval</label>
-            <input
-              type="text"
-              value={appSettings.heartbeatInterval ?? appSettings.heartbeatIntervalSec ?? '30m'}
-              onChange={(e) => {
-                const val = e.target.value.trim()
-                patchSettings({ heartbeatInterval: val || null })
-              }}
-              placeholder="30m"
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
-            <p className="text-[11px] text-text-3/60 mt-2">Duration string (e.g. 30m, 1h) or seconds. Set to 0 to disable.</p>
-          </div>
-          <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Prompt</label>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Default Prompt</label>
             <input
               type="text"
               value={appSettings.heartbeatPrompt || ''}
               onChange={(e) => patchSettings({ heartbeatPrompt: e.target.value || null })}
-              placeholder="Leave blank for default"
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
-          <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Model</label>
-            <input
-              type="text"
-              value={appSettings.heartbeatModel || ''}
-              onChange={(e) => patchSettings({ heartbeatModel: e.target.value || null })}
-              placeholder="Leave blank for session default"
+              placeholder="Leave blank for built-in default"
               className={inputClass}
               style={{ fontFamily: 'inherit' }}
             />
@@ -142,20 +113,17 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
         </div>
 
         <div>
-          <p className="text-[11px] text-text-3/60 mt-2">
-            Internal ping text used for ongoing sessions. Leave blank to use the default.
-          </p>
-          <div className="mt-4 flex items-center gap-2.5">
+          <div className="flex items-center gap-2.5">
             <button
               onClick={handleDisableAllHeartbeats}
               disabled={disablingHeartbeats}
               className="px-3.5 py-2 rounded-[10px] border border-rose-400/25 bg-rose-500/10 text-rose-300 hover:bg-rose-500/16 transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed text-[12px] font-600"
               style={{ fontFamily: 'inherit' }}
             >
-              {disablingHeartbeats ? 'Stopping\u2026' : 'Stop All Session Heartbeats'}
+              {disablingHeartbeats ? 'Stopping\u2026' : 'Stop All Heartbeats'}
             </button>
             <span className="text-[11px] text-text-3/70">
-              Disables heartbeat on every session and cancels queued heartbeat runs.
+              Disables heartbeat on every agent and cancels queued runs.
             </span>
           </div>
           {heartbeatBulkNotice && (

package/src/components/shared/settings/section-orchestrator.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useAppStore } from '@/stores/use-app-store'
+import { ModelCombobox } from '@/components/shared/model-combobox'
 import type { SettingsSectionProps } from './types'
 
 const NON_LANGGRAPH_PROVIDER_IDS = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
@@ -53,16 +54,14 @@ export function OrchestratorSection({ appSettings, patchSettings, inputClass }:
         {lgProviderInfo && lgProviderInfo.models.length > 0 && (
           <div className="mb-5">
             <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Model</label>
-            <select
+            <ModelCombobox
+              providerId={lgProviderInfo.id}
               value={appSettings.langGraphModel || lgProviderInfo.models[0]}
-              onChange={(e) => patchSettings({ langGraphModel: e.target.value })}
-              className={`${inputClass} appearance-none cursor-pointer`}
-              style={{ fontFamily: 'inherit' }}
-            >
-              {lgProviderInfo.models.map((m) => (
-                <option key={m} value={m}>{m}</option>
-              ))}
-            </select>
+              onChange={(m) => patchSettings({ langGraphModel: m })}
+              models={lgProviderInfo.models}
+              defaultModels={lgProviderInfo.defaultModels}
+              className={`${inputClass} cursor-pointer`}
+            />
           </div>
         )}