@swarmclawai/swarmclaw 0.2.0

package/src/components/shared/dir-browser.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import { useEffect, useState, useCallback, useMemo } from 'react'
+import { api } from '@/lib/api-client'
+
+interface DirEntry {
+  name: string
+  path: string
+}
+
+interface DirApiResponse {
+  dirs: DirEntry[]
+  currentPath: string
+  parentPath: string | null
+}
+
+interface DirBrowserProps {
+  value: string | null
+  file?: string | null
+  onChange: (dir: string, file?: string | null) => void
+  onClear: () => void
+}
+
+type Mode = 'native' | 'browse'
+
+export function DirBrowser({ value, file, onChange, onClear }: DirBrowserProps) {
+  const [mode, setMode] = useState<Mode>('native')
+  const [picking, setPicking] = useState<'file' | 'folder' | null>(null)
+
+  // Browse mode state
+  const [browsePath, setBrowsePath] = useState('~/Dev')
+  const [dirs, setDirs] = useState<DirEntry[]>([])
+  const [currentPath, setCurrentPath] = useState('')
+  const [parentPath, setParentPath] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [pathInput, setPathInput] = useState('')
+  const [search, setSearch] = useState('')
+
+  const fetchDirs = useCallback(async (dirPath: string) => {
+    setLoading(true)
+    try {
+      const data = await api<DirApiResponse>('GET', `/dirs?path=${encodeURIComponent(dirPath)}`)
+      setDirs(data.dirs || [])
+      setCurrentPath(data.currentPath || dirPath)
+      setParentPath(data.parentPath || null)
+      setPathInput(data.currentPath || dirPath)
+    } catch {
+      setDirs([])
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (mode === 'browse') {
+      fetchDirs(browsePath)
+      setSearch('')
+    }
+  }, [browsePath, mode, fetchDirs])
+
+  const filteredDirs = useMemo(() => {
+    if (!search) return dirs
+    const q = search.toLowerCase()
+    return dirs.filter((d) => d.name.toLowerCase().includes(q))
+  }, [dirs, search])
+
+  const navigateTo = (path: string) => setBrowsePath(path)
+
+  const handlePathSubmit = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && pathInput.trim()) {
+      navigateTo(pathInput.trim())
+    }
+  }
+
+  const handlePick = async (pickMode: 'file' | 'folder') => {
+    setPicking(pickMode)
+    try {
+      const data = await api<{ directory: string | null; file: string | null }>('POST', '/dirs/pick', { mode: pickMode })
+      if (data.directory) {
+        onChange(data.directory, data.file)
+      }
+    } catch { /* cancelled or error */ }
+    setPicking(null)
+  }
+
+  // Breadcrumbs for browse mode
+  const homedir = currentPath.match(/^\/Users\/[^/]+/)?.[0] || ''
+  const breadcrumbs: Array<{ label: string; path: string }> = []
+  if (currentPath && homedir) {
+    const relative = currentPath.slice(homedir.length)
+    const parts = relative.split('/').filter(Boolean)
+    breadcrumbs.push({ label: '~', path: homedir })
+    let acc = homedir
+    for (const p of parts) {
+      acc = `${acc}/${p}`
+      breadcrumbs.push({ label: p, path: acc })
+    }
+  } else if (currentPath) {
+    const parts = currentPath.split('/').filter(Boolean)
+    breadcrumbs.push({ label: '/', path: '/' })
+    let acc = ''
+    for (const p of parts) {
+      acc = `${acc}/${p}`
+      breadcrumbs.push({ label: p, path: acc })
+    }
+  }
+
+  // Selected state
+  if (value) {
+    const displayDir = value.replace(/^\/Users\/\w+/, '~')
+    const displayFile = file ? file.split('/').pop() : null
+    return (
+      <div className="flex items-center gap-2">
+        <div className="flex-1 min-w-0 px-4 py-3 rounded-[14px] border border-accent-bright/20 bg-accent-soft overflow-hidden">
+          <div className="text-accent-bright text-[14px] font-mono truncate">{displayDir}</div>
+          {displayFile && (
+            <div className="text-accent-bright/60 text-[12px] font-mono truncate mt-0.5">
+              {displayFile}
+            </div>
+          )}
+        </div>
+        <button
+          onClick={onClear}
+          className="shrink-0 px-3 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text-3 text-[13px] cursor-pointer hover:bg-surface-2 transition-colors"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Clear
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {mode === 'native' ? (
+        <>
+          {/* Native picker buttons */}
+          <div className="flex gap-3">
+            <button
+              onClick={() => handlePick('folder')}
+              disabled={picking !== null}
+              className="flex-1 flex items-center justify-center gap-2.5 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 hover:border-white/[0.12] transition-all disabled:opacity-40"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {picking === 'folder' ? (
+                <span className="text-text-3">Opening...</span>
+              ) : (
+                <>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-text-3">
+                    <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2Z" />
+                  </svg>
+                  Choose Folder
+                </>
+              )}
+            </button>
+            <button
+              onClick={() => handlePick('file')}
+              disabled={picking !== null}
+              className="flex-1 flex items-center justify-center gap-2.5 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 hover:border-white/[0.12] transition-all disabled:opacity-40"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {picking === 'file' ? (
+                <span className="text-text-3">Opening...</span>
+              ) : (
+                <>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-3">
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                  Choose File
+                </>
+              )}
+            </button>
+          </div>
+          <button
+            onClick={() => setMode('browse')}
+            className="text-[12px] text-text-3/60 hover:text-text-3 transition-colors cursor-pointer bg-transparent border-none p-0"
+          >
+            Or browse directories manually
+          </button>
+        </>
+      ) : (
+        <>
+          {/* Path input */}
+          <input
+            type="text"
+            value={pathInput}
+            onChange={(e) => setPathInput(e.target.value)}
+            onKeyDown={handlePathSubmit}
+            placeholder="Type a path and press Enter..."
+            className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] font-mono outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+          />
+
+          {/* Breadcrumb bar */}
+          <div className="flex items-center gap-1 px-1 overflow-x-auto scrollbar-none">
+            {parentPath && (
+              <button
+                onClick={() => navigateTo(parentPath)}
+                className="shrink-0 w-7 h-7 rounded-[8px] border border-white/[0.06] bg-surface text-text-3 text-[13px] cursor-pointer hover:bg-surface-2 hover:text-text-2 transition-colors flex items-center justify-center"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="15 18 9 12 15 6" />
+                </svg>
+              </button>
+            )}
+            {breadcrumbs.map((bc, i) => (
+              <span key={bc.path} className="flex items-center shrink-0">
+                {i > 0 && <span className="text-text-3/60 text-[12px] mx-0.5">/</span>}
+                <button
+                  onClick={() => navigateTo(bc.path)}
+                  className={`px-2 py-1 rounded-[6px] text-[12px] font-600 cursor-pointer transition-colors
+                    ${i === breadcrumbs.length - 1
+                      ? 'text-text bg-white/[0.04]'
+                      : 'text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
+                >
+                  {bc.label}
+                </button>
+              </span>
+            ))}
+          </div>
+
+          {/* Search filter */}
+          {dirs.length > 5 && (
+            <div className="relative">
+              <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/70" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Filter directories..."
+                className="w-full pl-9 pr-4 py-2.5 rounded-[12px] border border-white/[0.06] bg-surface-2 text-text text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus:border-white/[0.12]"
+              />
+            </div>
+          )}
+
+          {/* Directory list */}
+          <div className="max-h-[200px] overflow-y-auto rounded-[14px] border border-white/[0.06] bg-surface divide-y divide-white/[0.04]">
+            {loading ? (
+              <div className="py-8 text-center text-[13px] text-text-3/50">Loading...</div>
+            ) : filteredDirs.length === 0 ? (
+              <div className="py-8 text-center text-[13px] text-text-3/50">
+                {search ? 'No matching directories' : 'No subdirectories'}
+              </div>
+            ) : (
+              filteredDirs.map((d) => (
+                <button
+                  key={d.path}
+                  onClick={() => navigateTo(d.path)}
+                  className="w-full flex items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-white/[0.03] group"
+                >
+                  <svg className="shrink-0 text-text-3/70 group-hover:text-accent-bright/60 transition-colors" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2Z" />
+                  </svg>
+                  <span className="text-[13px] font-600 text-text-2 group-hover:text-text truncate">{d.name}</span>
+                  <svg className="shrink-0 ml-auto text-text-3/50 group-hover:text-text-3/70 transition-colors" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="9 18 15 12 9 6" />
+                  </svg>
+                </button>
+              ))
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3">
+            <button
+              onClick={() => onChange(currentPath, null)}
+              className="flex-1 py-3 rounded-[14px] border border-accent-bright/20 bg-accent-soft text-accent-bright text-[14px] font-600 cursor-pointer hover:brightness-110 transition-all"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Select This Directory
+            </button>
+          </div>
+          <button
+            onClick={() => setMode('native')}
+            className="text-[12px] text-text-3/60 hover:text-text-3 transition-colors cursor-pointer bg-transparent border-none p-0"
+          >
+            Or use system file picker
+          </button>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/shared/dropdown.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+export function Dropdown({ open, onClose, children }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose()
+    }
+    document.addEventListener('click', handler)
+    return () => document.removeEventListener('click', handler)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div
+      ref={ref}
+      className="fixed top-12 right-3 bg-raised border border-white/[0.06] rounded-[14px]
+        p-1.5 z-90 min-w-[200px] shadow-[0_16px_64px_rgba(0,0,0,0.6)]
+        backdrop-blur-xl"
+      style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function DropdownItem({ children, danger, onClick }: { children: ReactNode; danger?: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`block w-full px-3.5 py-2.5 border-none bg-transparent text-[13px] font-500
+        text-left cursor-pointer rounded-[10px] transition-all duration-150
+        hover:bg-white/[0.05] active:bg-white/[0.07]
+        ${danger ? 'text-danger' : 'text-text-2 hover:text-text'}`}
+      style={{ fontFamily: 'inherit' }}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function DropdownSep() {
+  return <div className="h-px bg-white/[0.04] my-1 mx-2" />
+}

package/src/components/shared/icon-button.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  variant?: 'default' | 'accent' | 'danger'
+  active?: boolean
+  size?: 'sm' | 'md'
+}
+
+export function IconButton({ children, variant = 'default', active, size = 'md', className = '', ...props }: Props) {
+  const sizeClass = size === 'sm' ? 'w-8 h-8 rounded-[9px]' : 'w-9 h-9 rounded-[10px]'
+  const base = `${sizeClass} border-none bg-transparent flex items-center justify-center cursor-pointer shrink-0 transition-all duration-200 hover:bg-white/[0.06] active:scale-90`
+  const color =
+    variant === 'accent' ? 'text-accent-bright' :
+    variant === 'danger' ? 'text-danger' :
+    active ? 'text-accent-bright bg-accent-soft' : 'text-text-3 hover:text-text-2'
+
+  return (
+    <button className={`${base} ${color} ${className}`} {...props}>
+      {children}
+    </button>
+  )
+}

package/src/components/shared/settings/plugin-manager.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import type { PluginMeta, MarketplacePlugin } from '@/types'
+
+export function PluginManager() {
+  const [tab, setTab] = useState<'installed' | 'marketplace' | 'url'>('installed')
+  const [plugins, setPlugins] = useState<PluginMeta[]>([])
+  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 loadPlugins = useCallback(async () => {
+    try {
+      const data = await api<PluginMeta[]>('GET', '/plugins')
+      setPlugins(data)
+    } catch { /* ignore */ }
+  }, [])
+
+  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(() => { loadPlugins() }, [])
+  useEffect(() => { if (tab === 'marketplace') loadMarketplace() }, [tab])
+
+  const togglePlugin = async (filename: string, enabled: boolean) => {
+    await api('POST', '/plugins', { filename, enabled })
+    loadPlugins()
+  }
+
+  const installFromMarketplace = async (p: MarketplacePlugin) => {
+    setInstalling(p.id)
+    try {
+      await api('POST', '/plugins/install', { url: p.url, filename: `${p.id}.js` })
+      await loadPlugins()
+      setTab('installed')
+    } 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(plugins.map((p) => p.filename))
+
+  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 (
+    <div>
+      <div className="flex gap-2 mb-5">
+        <button onClick={() => setTab('installed')} className={tabClass('installed')} style={{ fontFamily: 'inherit' }}>
+          Installed{plugins.length > 0 && ` (${plugins.length})`}
+        </button>
+        <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 === 'installed' && (
+        plugins.length === 0
+          ? <p className="text-[12px] text-text-3/70">No plugins installed</p>
+          : <div className="space-y-2.5">
+              {plugins.map((p) => (
+                <div key={p.filename} className="flex items-center gap-3 py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[14px] font-600 text-text truncate">{p.name}</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] font-mono text-text-3 truncate">{p.filename}</div>
+                    {p.description && <div className="text-[11px] text-text-3/60 mt-0.5">{p.description}</div>}
+                  </div>
+                  <div
+                    onClick={() => togglePlugin(p.filename, !p.enabled)}
+                    className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
+                      ${p.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
+                      ${p.enabled ? 'left-[22px]' : 'left-0.5'}`} />
+                  </div>
+                </div>
+              ))}
+            </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>
+            : <div className="space-y-2.5">
+                {marketplace.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">·</span>
+                            {p.tags.slice(0, 3).map((t) => (
+                              <span key={t} className="text-[9px] font-600 text-text-3/50 bg-white/[0.04] px-1.5 py-0.5 rounded-full">{t}</span>
+                            ))}
+                          </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>
+      )}
+
+      {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>
+  )
+}

package/src/components/shared/settings/section-capability-policy.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function CapabilityPolicySection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Capability Policy
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Centralized guardrails for agent tool families. Applies to direct tool calls and forced auto-routing.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Policy Mode</label>
+        <div className="grid grid-cols-3 gap-2 mb-5">
+          {([
+            { id: 'permissive', name: 'Permissive' },
+            { id: 'balanced', name: 'Balanced' },
+            { id: 'strict', name: 'Strict' },
+          ] as const).map((mode) => (
+            <button
+              key={mode.id}
+              onClick={() => patchSettings({ capabilityPolicyMode: mode.id })}
+              className={`py-3 px-3 rounded-[12px] text-center cursor-pointer transition-all text-[13px] font-600 border
+                ${(appSettings.capabilityPolicyMode || 'permissive') === mode.id
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-bg border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {mode.name}
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Blocked Categories</label>
+            <input
+              type="text"
+              value={(appSettings.capabilityBlockedCategories || []).join(', ')}
+              onChange={(e) => patchSettings({
+                capabilityBlockedCategories: e.target.value
+                  .split(',')
+                  .map((part) => part.trim())
+                  .filter(Boolean),
+              })}
+              placeholder="execution, filesystem, platform, outbound"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Supported categories: filesystem, execution, network, browser, memory, delegation, platform, outbound.</p>
+          </div>
+
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Blocked Tools</label>
+            <input
+              type="text"
+              value={(appSettings.capabilityBlockedTools || []).join(', ')}
+              onChange={(e) => patchSettings({
+                capabilityBlockedTools: e.target.value
+                  .split(',')
+                  .map((part) => part.trim())
+                  .filter(Boolean),
+              })}
+              placeholder="delete_file, manage_connectors, delegate_to_codex_cli"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Allowed Tools (Override)</label>
+            <input
+              type="text"
+              value={(appSettings.capabilityAllowedTools || []).join(', ')}
+              onChange={(e) => patchSettings({
+                capabilityAllowedTools: e.target.value
+                  .split(',')
+                  .map((part) => part.trim())
+                  .filter(Boolean),
+              })}
+              placeholder="shell, web_fetch, browser"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Use this to re-allow specific tool families when running in strict mode.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}