@swarmclawai/swarmclaw 0.2.0

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

@@ -0,0 +1,311 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { api } from '@/lib/api-client'
+import type { PluginMeta, MarketplacePlugin } from '@/types'
+
+export function PluginSheet() {
+  const open = useAppStore((s) => s.pluginSheetOpen)
+  const setOpen = useAppStore((s) => s.setPluginSheetOpen)
+  const editingFilename = useAppStore((s) => s.editingPluginFilename)
+  const setEditingFilename = useAppStore((s) => s.setEditingPluginFilename)
+  const plugins = useAppStore((s) => s.plugins)
+  const loadPlugins = useAppStore((s) => s.loadPlugins)
+
+  const [tab, setTab] = useState<'marketplace' | 'url'>('marketplace')
+  const [marketplace, setMarketplace] = useState<MarketplacePlugin[]>([])
+  const [loading, setLoading] = useState(false)
+  const [installing, setInstalling] = useState<string | null>(null)
+  const [urlInput, setUrlInput] = useState('')
+  const [urlFilename, setUrlFilename] = useState('')
+  const [urlStatus, setUrlStatus] = useState<{ ok: boolean; message: string } | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [search, setSearch] = useState('')
+  const [activeTag, setActiveTag] = useState<string | null>(null)
+  const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
+
+  const editing = editingFilename ? plugins[editingFilename] : null
+
+  const loadMarketplace = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await api<MarketplacePlugin[]>('GET', '/plugins/marketplace')
+      if (Array.isArray(data)) setMarketplace(data)
+    } catch { /* ignore */ }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (open && !editingFilename && tab === 'marketplace') loadMarketplace()
+  }, [open, editingFilename, tab])
+
+  const handleClose = () => {
+    setOpen(false)
+    setEditingFilename(null)
+    setUrlInput('')
+    setUrlFilename('')
+    setUrlStatus(null)
+  }
+
+  const togglePlugin = async (filename: string, enabled: boolean) => {
+    await api('POST', '/plugins', { filename, enabled })
+    loadPlugins()
+  }
+
+  const deletePlugin = async (filename: string) => {
+    setDeleting(true)
+    try {
+      await api('DELETE', `/plugins/${encodeURIComponent(filename)}`)
+      await loadPlugins()
+      handleClose()
+    } catch { /* ignore */ }
+    setDeleting(false)
+  }
+
+  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 installFromUrl = async () => {
+    if (!urlInput || !urlFilename) return
+    setUrlStatus(null)
+    setInstalling('url')
+    try {
+      await api('POST', '/plugins/install', { url: urlInput, filename: urlFilename })
+      await loadPlugins()
+      setUrlStatus({ ok: true, message: 'Installed successfully' })
+      setUrlInput('')
+      setUrlFilename('')
+    } catch (err: any) {
+      setUrlStatus({ ok: false, message: err.message || 'Install failed' })
+    }
+    setInstalling(null)
+  }
+
+  const installedFilenames = new Set(Object.keys(plugins))
+
+  const tabClass = (t: string) =>
+    `py-2.5 px-4 rounded-[10px] text-center cursor-pointer transition-all text-[12px] font-600 border
+    ${tab === t
+      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+      : 'bg-bg border-white/[0.06] text-text-3 hover:bg-surface-2'}`
+
+  return (
+    <BottomSheet open={open} onClose={handleClose}>
+      {editing ? (
+        <div className="space-y-5">
+          <div className="py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-[14px] font-600 text-text">{editing.name}</span>
+              {editing.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] font-mono text-text-3">{editing.filename}</div>
+            {editing.description && <div className="text-[11px] text-text-3/60 mt-1">{editing.description}</div>}
+            {editing.author && <div className="text-[10px] text-text-3/70 mt-1">by {editing.author}</div>}
+          </div>
+
+          <div className="flex items-center justify-between py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+            <span className="text-[13px] font-600 text-text">Enabled</span>
+            <div
+              onClick={() => togglePlugin(editing.filename, !editing.enabled)}
+              className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
+                ${editing.enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+            >
+              <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
+                ${editing.enabled ? 'left-[22px]' : 'left-0.5'}`} />
+            </div>
+          </div>
+
+          <button
+            onClick={() => deletePlugin(editing.filename)}
+            disabled={deleting}
+            className="w-full py-2.5 rounded-[10px] text-[13px] font-600 bg-red-500/10 text-red-400 border border-red-500/20
+              hover:bg-red-500/20 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-default"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {deleting ? 'Deleting...' : 'Delete Plugin'}
+          </button>
+        </div>
+      ) : (
+        <div>
+          <div className="flex gap-2 mb-5">
+            <button onClick={() => setTab('marketplace')} className={tabClass('marketplace')} style={{ fontFamily: 'inherit' }}>
+              Marketplace
+            </button>
+            <button onClick={() => setTab('url')} className={tabClass('url')} style={{ fontFamily: 'inherit' }}>
+              Install from URL
+            </button>
+          </div>
+
+          {tab === 'marketplace' && (
+            loading
+              ? <p className="text-[12px] text-text-3/70">Loading marketplace...</p>
+              : marketplace.length === 0
+                ? <p className="text-[12px] text-text-3/70">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">
+                        {/* Search */}
+                        <input
+                          value={search}
+                          onChange={(e) => setSearch(e.target.value)}
+                          placeholder="Search plugins..."
+                          className="w-full px-3 py-2.5 rounded-[10px] bg-bg border border-white/[0.06] text-[12px] text-text placeholder:text-text-3/50 outline-none focus:border-accent-bright/30"
+                          style={{ fontFamily: 'inherit' }}
+                        />
+
+                        {/* Tags + Sort */}
+                        <div className="flex items-center gap-1.5 flex-wrap">
+                          <button
+                            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'
+                            }`}
+                          >
+                            All
+                          </button>
+                          {allTags.map((t) => (
+                            <button
+                              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'
+                              }`}
+                            >
+                              {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-bg 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>
+
+                        {/* Results */}
+                        {filtered.length === 0 ? (
+                          <p className="text-[12px] text-text-3/50 text-center py-4">No plugins match your search</p>
+                        ) : (
+                          <div className="space-y-2.5">
+                            {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">{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>
+                    )
+                  })()
+          )}
+
+          {tab === 'url' && (
+            <div className="p-5 rounded-[14px] bg-surface border border-white/[0.06]">
+              <div className="mb-4">
+                <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Plugin URL</label>
+                <input
+                  type="url"
+                  value={urlInput}
+                  onChange={(e) => setUrlInput(e.target.value)}
+                  placeholder="https://example.com/my-plugin.js"
+                  className="w-full py-2.5 px-3 rounded-[10px] text-[13px] bg-bg border border-white/[0.06] text-text placeholder:text-text-3/60 outline-none focus:border-accent-bright/30"
+                  style={{ fontFamily: 'inherit' }}
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Save as filename</label>
+                <input
+                  type="text"
+                  value={urlFilename}
+                  onChange={(e) => setUrlFilename(e.target.value)}
+                  placeholder="my-plugin.js"
+                  className="w-full py-2.5 px-3 rounded-[10px] text-[13px] bg-bg border border-white/[0.06] text-text placeholder:text-text-3/60 outline-none focus:border-accent-bright/30"
+                  style={{ fontFamily: 'inherit' }}
+                />
+              </div>
+              <button
+                onClick={installFromUrl}
+                disabled={!urlInput || !urlFilename || installing === 'url'}
+                className="w-full py-2.5 rounded-[10px] text-[13px] font-600 bg-accent-soft text-accent-bright border border-accent-bright/20
+                  hover:bg-accent-soft/80 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-default"
+                style={{ fontFamily: 'inherit' }}
+              >
+                {installing === 'url' ? 'Installing...' : 'Install Plugin'}
+              </button>
+              {urlStatus && (
+                <p className={`text-[11px] mt-3 ${urlStatus.ok ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {urlStatus.message}
+                </p>
+              )}
+              <p className="text-[10px] text-text-3/60 mt-3">
+                Works with SwarmClaw and OpenClaw plugin formats. URL must be HTTPS.
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </BottomSheet>
+  )
+}

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

@@ -0,0 +1,96 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
+  const providers = useAppStore((s) => s.providers)
+  const providerConfigs = useAppStore((s) => s.providerConfigs)
+  const loadProviders = useAppStore((s) => s.loadProviders)
+  const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
+  const credentials = useAppStore((s) => s.credentials)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const setProviderSheetOpen = useAppStore((s) => s.setProviderSheetOpen)
+  const setEditingProviderId = useAppStore((s) => s.setEditingProviderId)
+  const [loaded, setLoaded] = useState(false)
+
+  const refresh = useCallback(async () => {
+    await Promise.all([loadProviders(), loadProviderConfigs(), loadCredentials()])
+    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])
+
+  const handleEdit = (id: string) => {
+    setEditingProviderId(id)
+    setProviderSheetOpen(true)
+  }
+
+  // Merge built-in providers with custom configs
+  const builtinItems = providers.map((p) => ({
+    id: p.id,
+    name: p.name,
+    type: 'builtin' as const,
+    models: p.models,
+    requiresApiKey: p.requiresApiKey,
+    isEnabled: true,
+    isConnected: !p.requiresApiKey || Object.values(credentials).some((c) => c.provider === p.id),
+  }))
+
+  const customItems = providerConfigs.map((c) => ({
+    id: c.id,
+    name: c.name,
+    type: 'custom' as const,
+    models: c.models,
+    requiresApiKey: c.requiresApiKey,
+    isEnabled: c.isEnabled,
+    isConnected: !c.requiresApiKey || !!c.credentialId,
+  }))
+
+  const allItems = [...builtinItems, ...customItems]
+
+  if (!loaded) {
+    return (
+      <div className={`flex-1 flex items-center justify-center ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+        <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">
+        {allItems.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => handleEdit(item.id)}
+            className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
+              cursor-pointer hover:bg-surface-2 bg-surface border-white/[0.06]"
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="font-display text-[14px] font-600 text-text truncate">{item.name}</span>
+              <div className="flex items-center gap-2 shrink-0">
+                <span className={`text-[10px] font-600 px-2 py-0.5 rounded-[5px] uppercase tracking-wider
+                  ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-[#6366F1]/10 text-[#6366F1]'}`}>
+                  {item.type === 'builtin' ? 'Built-in' : 'Custom'}
+                </span>
+                <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}`}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}