@swarmclawai/swarmclaw 0.3.0 → 0.4.0

package/src/components/plugins/plugin-list.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { MarketplacePlugin } from '@/types'
 
 export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const plugins = useAppStore((s) => s.plugins)
@@ -9,10 +11,31 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
   const setEditingPluginFilename = useAppStore((s) => s.setEditingPluginFilename)
 
+  const [tab, setTab] = useState<'installed' | 'marketplace'>('installed')
+  const [marketplace, setMarketplace] = useState<MarketplacePlugin[]>([])
+  const [mpLoading, setMpLoading] = useState(false)
+  const [installing, setInstalling] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [activeTag, setActiveTag] = useState<string | null>(null)
+  const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
+
   useEffect(() => {
     loadPlugins()
   }, [])
 
+  const loadMarketplace = useCallback(async () => {
+    setMpLoading(true)
+    try {
+      const data = await api<MarketplacePlugin[]>('GET', '/plugins/marketplace')
+      if (Array.isArray(data)) setMarketplace(data)
+    } catch { /* ignore */ }
+    setMpLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!inSidebar && tab === 'marketplace') loadMarketplace()
+  }, [tab, inSidebar, loadMarketplace])
+
   const pluginList = Object.values(plugins)
 
   const handleEdit = (filename: string) => {
@@ -20,41 +43,218 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
     setPluginSheetOpen(true)
   }
 
-  return (
-    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
-      {pluginList.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-[13px] text-text-3/60">No plugins installed</p>
+  const handleToggle = async (e: React.MouseEvent, filename: string, enabled: boolean) => {
+    e.stopPropagation()
+    await api('POST', '/plugins', { filename, enabled: !enabled })
+    loadPlugins()
+  }
+
+  const handleDelete = async (e: React.MouseEvent, filename: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/plugins/${encodeURIComponent(filename)}`)
+    loadPlugins()
+  }
+
+  const installFromMarketplace = async (p: MarketplacePlugin) => {
+    setInstalling(p.id)
+    try {
+      await api('POST', '/plugins/install', { url: p.url, filename: `${p.id}.js` })
+      await loadPlugins()
+    } catch { /* ignore */ }
+    setInstalling(null)
+  }
+
+  const installedFilenames = new Set(Object.keys(plugins))
+
+  const tabClass = (t: string) =>
+    `py-1.5 px-3.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border
+    ${tab === t
+      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+      : 'bg-transparent border-transparent text-text-3 hover:text-text-2'}`
+
+  // Marketplace tab content (full-width only)
+  const renderMarketplace = () => {
+    if (mpLoading) return <p className="text-[12px] text-text-3/70 py-8 text-center">Loading marketplace...</p>
+    if (marketplace.length === 0) return <p className="text-[12px] text-text-3/70 py-8 text-center">No plugins available</p>
+
+    const allTags = Array.from(new Set(marketplace.flatMap((p) => p.tags))).sort()
+    const q = search.toLowerCase()
+    const filtered = marketplace
+      .filter((p) => {
+        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !p.tags.some((t) => t.toLowerCase().includes(q))) return false
+        if (activeTag && !p.tags.includes(activeTag)) return false
+        return true
+      })
+      .sort((a, b) => sort === 'downloads' ? b.downloads - a.downloads : a.name.localeCompare(b.name))
+
+    return (
+      <div className="space-y-3">
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search plugins..."
+          className="w-full px-3 py-2.5 rounded-[10px] bg-surface border border-white/[0.06] text-[12px] text-text placeholder:text-text-3/50 outline-none focus:border-accent-bright/30"
+          style={{ fontFamily: 'inherit' }}
+        />
+        <div className="flex items-center gap-1.5 flex-wrap">
           <button
-            onClick={() => { setEditingPluginFilename(null); setPluginSheetOpen(true) }}
-            className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
-            style={{ fontFamily: 'inherit' }}
+            onClick={() => setActiveTag(null)}
+            className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+              !activeTag ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.03] text-text-3/60 hover:text-text-3'
+            }`}
           >
-            + Add Plugin
+            All
           </button>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {pluginList.map((plugin) => (
+          {allTags.map((t) => (
             <button
-              key={plugin.filename}
-              onClick={() => handleEdit(plugin.filename)}
-              className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+              key={t}
+              onClick={() => setActiveTag(activeTag === t ? null : t)}
+              className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+                activeTag === t ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.03] text-text-3/60 hover:text-text-3'
+              }`}
             >
-              <div className="flex items-center justify-between mb-1">
-                <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
-                <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full shrink-0 ml-2 ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
-                  {plugin.enabled ? 'Enabled' : 'Disabled'}
-                </span>
-              </div>
-              <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
-              {plugin.description && (
-                <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
-              )}
+              {t}
             </button>
           ))}
+          <div className="flex-1" />
+          <select
+            value={sort}
+            onChange={(e) => setSort(e.target.value as 'name' | 'downloads')}
+            className="px-2 py-1 rounded-[6px] bg-surface border border-white/[0.06] text-[10px] text-text-3 outline-none cursor-pointer appearance-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="downloads">Popular</option>
+            <option value="name">A-Z</option>
+          </select>
+        </div>
+        {filtered.length === 0 ? (
+          <p className="text-[12px] text-text-3/50 text-center py-4">No plugins match your search</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {filtered.map((p) => {
+              const isInstalled = installedFilenames.has(`${p.id}.js`)
+              return (
+                <div key={p.id} className="py-3.5 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                  <div className="flex items-start gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-[14px] font-600 text-text">{p.name}</span>
+                        <span className="text-[10px] font-mono text-text-3/70">v{p.version}</span>
+                        {p.openclaw && <span className="text-[9px] font-600 text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full">OpenClaw</span>}
+                      </div>
+                      <div className="text-[11px] text-text-3/60 mt-1 line-clamp-2">{p.description}</div>
+                      <div className="flex items-center gap-2 mt-2">
+                        <span className="text-[10px] text-text-3/70">by {p.author}</span>
+                        <span className="text-[10px] text-text-3/50">&middot;</span>
+                        {p.tags.slice(0, 3).map((t) => (
+                          <button
+                            key={t}
+                            onClick={() => setActiveTag(activeTag === t ? null : t)}
+                            className={`text-[9px] font-600 px-1.5 py-0.5 rounded-full cursor-pointer transition-all border-none ${
+                              activeTag === t ? 'text-accent-bright bg-accent-soft' : 'text-text-3/50 bg-white/[0.04] hover:text-text-3'
+                            }`}
+                          >
+                            {t}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => !isInstalled && installFromMarketplace(p)}
+                      disabled={isInstalled || installing === p.id}
+                      className={`shrink-0 py-2 px-4 rounded-[10px] text-[12px] font-600 transition-all cursor-pointer
+                        ${isInstalled
+                          ? 'bg-white/[0.04] text-text-3/70 cursor-default'
+                          : installing === p.id
+                            ? 'bg-accent-soft text-accent-bright animate-pulse'
+                            : 'bg-accent-soft text-accent-bright hover:bg-accent-soft/80 border border-accent-bright/20'}`}
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      {isInstalled ? 'Installed' : installing === p.id ? 'Installing...' : 'Install'}
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      {/* Tabs — full-width only */}
+      {!inSidebar && (
+        <div className="flex gap-1 mb-4">
+          <button onClick={() => setTab('installed')} className={tabClass('installed')} style={{ fontFamily: 'inherit' }}>
+            Installed
+          </button>
+          <button onClick={() => setTab('marketplace')} className={tabClass('marketplace')} style={{ fontFamily: 'inherit' }}>
+            Marketplace
+          </button>
         </div>
       )}
+
+      {(!inSidebar && tab === 'marketplace') ? renderMarketplace() : (
+        pluginList.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-[13px] text-text-3/60">No plugins installed</p>
+            <button
+              onClick={() => { setEditingPluginFilename(null); setPluginSheetOpen(true) }}
+              className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
+              style={{ fontFamily: 'inherit' }}
+            >
+              + Add Plugin
+            </button>
+          </div>
+        ) : (
+          <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
+            {pluginList.map((plugin) => (
+              <button
+                key={plugin.filename}
+                onClick={() => handleEdit(plugin.filename)}
+                className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
+                  <div className="flex items-center gap-2 shrink-0 ml-2">
+                    {!inSidebar ? (
+                      <>
+                        <div
+                          onClick={(e) => handleToggle(e, plugin.filename, plugin.enabled)}
+                          className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
+                            ${plugin.enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                        >
+                          <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
+                            ${plugin.enabled ? 'left-[18px]' : 'left-0.5'}`} />
+                        </div>
+                        <button
+                          onClick={(e) => handleDelete(e, plugin.filename)}
+                          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>
+                      </>
+                    ) : (
+                      <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
+                        {plugin.enabled ? 'Enabled' : 'Disabled'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
+                {plugin.description && (
+                  <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
+                )}
+              </button>
+            ))}
+          </div>
+        )
+      )}
     </div>
   )
 }

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

@@ -54,7 +54,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 +66,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>