@swarmclawai/swarmclaw 0.3.1 → 0.4.5

package/src/components/providers/provider-list.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
+import { api } from '@/lib/api-client'
 
 export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   const providers = useAppStore((s) => s.providers)
@@ -19,20 +21,26 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     setLoaded(true)
   }, [loadProviders, loadProviderConfigs, loadCredentials])
 
-  useEffect(() => {
-    const bootstrap = setTimeout(() => { void refresh() }, 0)
-    const poll = setInterval(() => { void loadProviders() }, 20_000)
-    return () => {
-      clearTimeout(bootstrap)
-      clearInterval(poll)
-    }
-  }, [refresh, loadProviders])
+  useEffect(() => { void refresh() }, [refresh])
+  useWs('providers', loadProviders, 20_000)
 
   const handleEdit = (id: string) => {
     setEditingProviderId(id)
     setProviderSheetOpen(true)
   }
 
+  const handleToggle = async (e: React.MouseEvent, id: string, currentEnabled: boolean) => {
+    e.stopPropagation()
+    await api('PUT', `/providers/${id}`, { isEnabled: !currentEnabled })
+    await loadProviderConfigs()
+  }
+
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/providers/${id}`)
+    await loadProviderConfigs()
+  }
+
   // Merge built-in providers with custom configs
   const builtinItems = providers.map((p) => ({
     id: p.id,
@@ -58,15 +66,15 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   if (!loaded) {
     return (
-      <div className={`flex-1 flex items-center justify-center ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+      <div className={`flex-1 flex items-center justify-center ${inSidebar ? 'px-3 pb-4' : 'px-5'}`}>
         <p className="text-[13px] text-text-3">Loading providers...</p>
       </div>
     )
   }
 
   return (
-    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
-      <div className="space-y-2">
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
         {allItems.map((item) => (
           <button
             key={item.id}
@@ -81,12 +89,37 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                   ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-[#6366F1]/10 text-[#6366F1]'}`}>
                   {item.type === 'builtin' ? 'Built-in' : 'Custom'}
                 </span>
+                {!inSidebar && item.type === 'custom' && (
+                  <>
+                    <div
+                      onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
+                      className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
+                        ${item.isEnabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
+                        ${item.isEnabled ? 'left-[18px]' : 'left-0.5'}`} />
+                    </div>
+                    <button
+                      onClick={(e) => handleDelete(e, item.id)}
+                      className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                      title="Delete provider"
+                    >
+                      <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>
+                  </>
+                )}
                 <span className={`w-2 h-2 rounded-full ${item.isConnected ? 'bg-emerald-400' : 'bg-white/10'}`} />
               </div>
             </div>
             <div className="text-[12px] text-text-3/60 font-mono truncate">
-              {item.models.slice(0, 3).join(', ')}
-              {item.models.length > 3 && ` +${item.models.length - 3}`}
+              {!inSidebar ? item.models.join(', ') : (
+                <>
+                  {item.models.slice(0, 3).join(', ')}
+                  {item.models.length > 3 && ` +${item.models.length - 3}`}
+                </>
+              )}
             </div>
           </button>
         ))}

package/src/components/providers/provider-sheet.tsx

@@ -5,7 +5,6 @@ import { useAppStore } from '@/stores/use-app-store'
 import { createProviderConfig, updateProviderConfig, deleteProviderConfig } from '@/lib/provider-config'
 import { api } from '@/lib/api-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
-import { AiGenBlock } from '@/components/shared/ai-gen-block'
 import { toast } from 'sonner'
 
 export function ProviderSheet() {
@@ -41,51 +40,15 @@ export function ProviderSheet() {
   const [localLoading, setLocalLoading] = useState(false)
   const [localError, setLocalError] = useState('')
 
-  // 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)
-
   // Find editing provider in custom configs OR built-in list
   const editingCustom = editingId ? providerConfigs.find((c) => c.id === editingId) : null
   const editingBuiltin = editingId ? providers.find((p) => p.id === editingId) : null
   const isBuiltin = !!editingBuiltin && !editingCustom
   const editing = editingCustom || editingBuiltin
 
-  const handleGenerate = async () => {
-    if (!aiPrompt.trim()) return
-    setGenerating(true)
-    setGenError('')
-    try {
-      const result = await api<{ name?: string; baseUrl?: string; models?: string; requiresApiKey?: boolean; error?: string }>('POST', '/generate', { type: 'provider', prompt: aiPrompt })
-      if (result.error) {
-        setGenError(result.error)
-      } else if (result.name || result.baseUrl) {
-        if (result.name) setName(result.name)
-        if (result.baseUrl) setBaseUrl(result.baseUrl)
-        if (result.models) setModels(result.models)
-        if (result.requiresApiKey !== undefined) setRequiresApiKey(result.requiresApiKey)
-        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) {
       loadCredentials()
-      loadSettings()
-      setAiPrompt('')
-      setGenerating(false)
-      setGenerated(false)
-      setGenError('')
       setNewModel('')
       setLocalModels([])
       setLocalError('')
@@ -248,14 +211,6 @@ export function ProviderSheet() {
         </p>
       </div>
 
-      {/* AI Generation — only for new custom providers */}
-      {isNew && <AiGenBlock
-        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
-        generating={generating} generated={generated} genError={genError}
-        onGenerate={handleGenerate} appSettings={appSettings}
-        placeholder='Name a provider, e.g. "Groq", "Together AI", "z.ai", "DeepSeek"'
-      />}
-
       {/* Name */}
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>

package/src/components/runs/run-list.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useState, useRef, useCallback } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { api } from '@/lib/api-client'
+import { useWs } from '@/hooks/use-ws'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import type { SessionRunRecord, SessionRunStatus } from '@/types'
 
@@ -37,7 +38,6 @@ export function RunList() {
   const [autoRefresh, setAutoRefresh] = useState(false)
   const [statusFilter, setStatusFilter] = useState<SessionRunStatus | null>(null)
   const [selected, setSelected] = useState<SessionRunRecord | null>(null)
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
   const fetchRuns = useCallback(async () => {
     try {
@@ -54,16 +54,7 @@ export function RunList() {
     fetchRuns()
   }, [fetchRuns])
 
-  useEffect(() => {
-    if (!autoRefresh) {
-      if (timerRef.current) clearInterval(timerRef.current)
-      return
-    }
-    timerRef.current = setInterval(fetchRuns, 3000)
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current)
-    }
-  }, [autoRefresh, fetchRuns])
+  useWs('runs', fetchRuns, autoRefresh ? 3000 : undefined)
 
   const filtered = statusFilter ? runs.filter((r) => r.status === statusFilter) : runs
 
@@ -78,7 +69,7 @@ export function RunList() {
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Controls */}
-      <div className="px-4 py-2 space-y-2 shrink-0">
+      <div className="px-5 py-2 space-y-2 shrink-0">
         {/* Status filter + auto-refresh */}
         <div className="flex items-center gap-1.5 flex-wrap">
           <button
@@ -113,12 +104,12 @@ export function RunList() {
       </div>
 
       {/* Count */}
-      <div className="px-4 py-1 text-[10px] text-text-3/60">
+      <div className="px-5 py-1 text-[10px] text-text-3/60">
         {filtered.length} run{filtered.length !== 1 ? 's' : ''}
       </div>
 
       {/* Run list */}
-      <div className="flex-1 overflow-y-auto px-2 pb-20">
+      <div className="flex-1 overflow-y-auto px-4 pb-8">
         {filtered.length === 0 ? (
           <div className="flex items-center justify-center h-32 text-text-3 text-[12px]">
             No runs found

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

@@ -2,6 +2,7 @@
 
 import type { Schedule } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 
 const STATUS_COLORS: Record<string, string> = {
   active: 'text-emerald-400 bg-emerald-400/[0.08]',
@@ -24,11 +25,13 @@ function formatNext(ts?: number): string {
 
 interface Props {
   schedule: Schedule
+  inSidebar?: boolean
 }
 
-export function ScheduleCard({ schedule }: Props) {
+export function ScheduleCard({ schedule, inSidebar }: Props) {
   const setEditingScheduleId = useAppStore((s) => s.setEditingScheduleId)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const loadSchedules = useAppStore((s) => s.loadSchedules)
   const agents = useAppStore((s) => s.agents)
 
   const handleClick = () => {
@@ -36,8 +39,22 @@ export function ScheduleCard({ schedule }: Props) {
     setScheduleSheetOpen(true)
   }
 
+  const handleToggle = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const newStatus = schedule.status === 'active' ? 'paused' : 'active'
+    await api('PUT', `/schedules/${schedule.id}`, { status: newStatus })
+    loadSchedules()
+  }
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    await api('DELETE', `/schedules/${schedule.id}`)
+    loadSchedules()
+  }
+
   const agent = agents[schedule.agentId]
   const statusClass = STATUS_COLORS[schedule.status] || STATUS_COLORS.paused
+  const canToggle = schedule.status === 'active' || schedule.status === 'paused'
 
   return (
     <div
@@ -48,12 +65,45 @@ export function ScheduleCard({ schedule }: Props) {
     >
       <div className="flex items-center gap-2.5">
         <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{schedule.name}</span>
-        <span className={`shrink-0 text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] ${statusClass}`}>
-          {schedule.status}
-        </span>
+        <div className="flex items-center gap-2 shrink-0">
+          {!inSidebar && canToggle && (
+            <div
+              onClick={handleToggle}
+              className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
+                ${schedule.status === 'active' ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+            >
+              <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
+                ${schedule.status === 'active' ? 'left-[18px]' : 'left-0.5'}`} />
+            </div>
+          )}
+          <span className={`text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] ${statusClass}`}>
+            {schedule.status}
+          </span>
+          {!inSidebar && (
+            <button
+              onClick={handleDelete}
+              className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+              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>
       <div className="text-[12px] text-text-3/70 mt-1.5 truncate">
         {agent?.name || 'Unknown agent'} &middot; {schedule.scheduleType}
+        {!inSidebar && schedule.scheduleType === 'cron' && schedule.cron && (
+          <span className="font-mono text-text-3/50 ml-1">({schedule.cron})</span>
+        )}
+        {!inSidebar && schedule.scheduleType === 'interval' && schedule.intervalMs && (
+          <span className="text-text-3/50 ml-1">
+            (every {schedule.intervalMs >= 3600000
+              ? `${Math.round(schedule.intervalMs / 3600000)}h`
+              : `${Math.round(schedule.intervalMs / 60000)}m`})
+          </span>
+        )}
       </div>
       <div className="text-[11px] text-text-3/60 mt-1">
         Next: {formatNext(schedule.nextRunAt)}

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

@@ -12,6 +12,7 @@ export function ScheduleList({ inSidebar }: Props) {
   const schedules = useAppStore((s) => s.schedules)
   const loadSchedules = useAppStore((s) => s.loadSchedules)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const [search, setSearch] = useState('')
 
   useEffect(() => { loadSchedules() }, [])
@@ -20,10 +21,11 @@ export function ScheduleList({ inSidebar }: Props) {
     return Object.values(schedules)
       .filter((s) => {
         if (search && !s.name.toLowerCase().includes(search.toLowerCase())) return false
+        if (activeProjectFilter && s.projectId !== activeProjectFilter) return false
         return true
       })
       .sort((a, b) => b.createdAt - a.createdAt)
-  }, [schedules, search])
+  }, [schedules, search, activeProjectFilter])
 
   if (!filtered.length && !search) {
     return (
@@ -54,7 +56,7 @@ export function ScheduleList({ inSidebar }: Props) {
   return (
     <div className="flex-1 overflow-y-auto">
       {(filtered.length > 3 || search) && (
-        <div className="px-4 py-2.5">
+        <div className={inSidebar ? 'px-4 py-2.5' : 'px-5 py-2.5'}>
           <input
             type="text"
             value={search}
@@ -66,9 +68,12 @@ export function ScheduleList({ inSidebar }: Props) {
           />
         </div>
       )}
-      <div className="flex flex-col gap-1 px-2 pb-4">
+      <div className={inSidebar
+          ? 'flex flex-col gap-1 px-2 pb-4'
+          : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 px-5 pb-6'
+        }>
         {filtered.map((s) => (
-          <ScheduleCard key={s.id} schedule={s} />
+          <ScheduleCard key={s.id} schedule={s} inSidebar={inSidebar} />
         ))}
       </div>
     </div>

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() {
@@ -128,7 +129,7 @@ export function NewSessionSheet() {
   }
 
   const handleCreate = async () => {
-    const sessionName = name.trim() || 'New Session'
+    const sessionName = name.trim() || 'New Chat'
     const cwd = selectedDir || ''
     const resolvedCredentialId = currentProvider?.requiresApiKey
       ? credentialId
@@ -173,14 +174,14 @@ export function NewSessionSheet() {
     <BottomSheet open={open} onClose={onClose} wide>
       {/* Header */}
       <div className="mb-10">
-        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">New Session</h2>
-        <p className="text-[14px] text-text-3">Configure your AI session</p>
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">New Chat</h2>
+        <p className="text-[14px] text-text-3">Configure your AI chat</p>
       </div>
 
       {/* Name */}
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Session Name
+          Chat Name
         </label>
         <input
           type="text"
@@ -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>
           )}
 
@@ -374,7 +373,7 @@ export function NewSessionSheet() {
               <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
                 Tools <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
               </label>
-              <p className="text-[12px] text-text-3/60 mb-3">Allow this model to execute commands and access files in the session directory.</p>
+              <p className="text-[12px] text-text-3/60 mb-3">Allow this model to execute commands and access files in the working directory.</p>
               <div className="flex flex-wrap gap-2.5">
                 {([
                   { id: 'shell' as SessionTool, label: 'Shell' },
@@ -470,7 +469,7 @@ export function NewSessionSheet() {
             shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
           style={{ fontFamily: 'inherit' }}
         >
-          Create Session
+          Create Chat
         </button>
       </div>
     </BottomSheet>

package/src/components/sessions/session-card.tsx

@@ -117,7 +117,7 @@ export function SessionCard({ session, active, onClick }: Props) {
           onClick={handleDelete}
           className="shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150
             text-text-3 hover:text-red-400 p-0.5 -mr-1 cursor-pointer bg-transparent border-none"
-          title="Delete session"
+          title="Delete chat"
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />

package/src/components/sessions/session-list.tsx

@@ -89,7 +89,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
             <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="currentColor" />
           </svg>
         </div>
-        <p className="font-display text-[15px] font-600 text-text-2">No sessions yet</p>
+        <p className="font-display text-[15px] font-600 text-text-2">No chats yet</p>
         <p className="text-[13px] text-text-3/50">Create one to start chatting</p>
         {!inSidebar && (
           <button
@@ -99,7 +99,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
               shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
             style={{ fontFamily: 'inherit' }}
           >
-            + New Session
+            + New Chat
           </button>
         )}
       </div>
@@ -124,12 +124,12 @@ export function SessionList({ inSidebar, onSelect }: Props) {
         {filtered.length > 0 && (
           <button
             onClick={async () => {
-              if (!window.confirm(`Delete ${filtered.length} session${filtered.length === 1 ? '' : 's'}?`)) return
+              if (!window.confirm(`Delete ${filtered.length} chat${filtered.length === 1 ? '' : 's'}?`)) return
               await clearSessions(filtered.map((s) => s.id))
             }}
             className="ml-auto p-1.5 rounded-[8px] text-text-3/70 hover:text-red-400 hover:bg-red-400/[0.06]
               cursor-pointer transition-all bg-transparent border-none"
-            title="Clear all sessions"
+            title="Clear all chats"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
@@ -154,7 +154,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
         <select
           value={sortMode}
           onChange={(e) => setSortMode(e.target.value as SortMode)}
-          aria-label="Sort sessions"
+          aria-label="Sort chats"
           className="px-2 py-2 rounded-[12px] border border-white/[0.04] bg-surface text-text
             text-[11px] outline-none cursor-pointer"
           style={{ fontFamily: 'inherit' }}
@@ -176,7 +176,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
               />
               <button
                 onClick={(e) => { e.stopPropagation(); togglePinSession(s.id) }}
-                aria-label={s.pinned ? 'Unpin session' : 'Pin session'}
+                aria-label={s.pinned ? 'Unpin chat' : 'Pin chat'}
                 className={`absolute top-2 right-2 p-1 rounded-[6px] border-none cursor-pointer transition-all
                   ${s.pinned
                     ? 'text-amber-400 bg-amber-400/10 opacity-100'
@@ -193,7 +193,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
       ) : (
         <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
           <p className="text-[13px] text-text-3/50">
-            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} sessions{search ? ` matching "${search}"` : ''}
+            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} chats{search ? ` matching "${search}"` : ''}
           </p>
         </div>
       )}