@swarmclawai/swarmclaw 0.4.0 → 0.5.0

package/src/components/agents/openclaw-skills-panel.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { OpenClawSkillEntry, SkillAllowlistMode } from '@/types'
+import { api } from '@/lib/api-client'
+import { SkillInstallDialog } from './skill-install-dialog'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+
+interface Props {
+  agentId: string
+  initialMode?: SkillAllowlistMode
+  initialAllowed?: string[]
+}
+
+const SOURCE_ORDER: OpenClawSkillEntry['source'][] = ['bundled', 'managed', 'personal', 'workspace']
+
+export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllowed = [] }: Props) {
+  const [skills, setSkills] = useState<OpenClawSkillEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [mode, setMode] = useState<SkillAllowlistMode>(initialMode)
+  const [allowed, setAllowed] = useState<Set<string>>(new Set(initialAllowed))
+  const [saving, setSaving] = useState(false)
+  const [installTarget, setInstallTarget] = useState<OpenClawSkillEntry | null>(null)
+  const [removeTarget, setRemoveTarget] = useState<OpenClawSkillEntry | null>(null)
+
+  const loadSkills = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await api<OpenClawSkillEntry[]>('GET', `/openclaw/skills?agentId=${agentId}`)
+      setSkills(Array.isArray(result) ? result : [])
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }, [agentId])
+
+  useEffect(() => { loadSkills() }, [loadSkills])
+
+  const handleModeChange = (newMode: SkillAllowlistMode) => {
+    setMode(newMode)
+  }
+
+  const toggleSkill = (name: string) => {
+    setAllowed((prev) => {
+      const next = new Set(prev)
+      if (next.has(name)) next.delete(name)
+      else next.add(name)
+      return next
+    })
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await api('PUT', '/openclaw/skills', {
+        agentId,
+        mode,
+        allowedSkills: Array.from(allowed),
+      })
+    } catch {
+      // toast or ignore
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const grouped = SOURCE_ORDER
+    .map((source) => ({
+      source,
+      items: skills.filter((s) => s.source === source),
+    }))
+    .filter((g) => g.items.length > 0)
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-32 text-[13px] text-text-3/50">Loading skills...</div>
+  }
+
+  if (error) {
+    return <div className="flex items-center justify-center h-32 text-[13px] text-red-400">{error}</div>
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-2">
+      {/* Mode selector */}
+      <div className="flex gap-1">
+        {(['all', 'none', 'selected'] as const).map((m) => (
+          <button
+            key={m}
+            onClick={() => handleModeChange(m)}
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all
+              ${mode === m ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {m === 'selected' ? 'Custom' : m}
+          </button>
+        ))}
+      </div>
+
+      {/* Skill groups */}
+      {grouped.map(({ source, items }) => (
+        <div key={source}>
+          <h4 className="text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-2 px-1">
+            {source}
+          </h4>
+          <div className="flex flex-col gap-1">
+            {items.map((skill) => (
+              <div
+                key={skill.name}
+                className="flex items-center gap-3 py-2 px-3 rounded-[10px] bg-white/[0.02] border border-white/[0.04]"
+              >
+                {mode === 'selected' && (
+                  <button
+                    onClick={() => toggleSkill(skill.name)}
+                    className={`w-5 h-5 rounded-[5px] border-2 flex items-center justify-center shrink-0 cursor-pointer transition-all
+                      ${allowed.has(skill.name)
+                        ? 'bg-accent-bright border-accent-bright'
+                        : 'bg-transparent border-white/[0.15] hover:border-white/[0.25]'}`}
+                  >
+                    {allowed.has(skill.name) && (
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    )}
+                  </button>
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-600 text-text truncate">{skill.name}</span>
+                    <span className={`shrink-0 text-[9px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px]
+                      ${skill.eligible
+                        ? 'text-emerald-400 bg-emerald-400/[0.08]'
+                        : skill.missing?.length
+                          ? 'text-amber-400 bg-amber-400/[0.08]'
+                          : 'text-red-400 bg-red-400/[0.08]'}`}>
+                      {skill.eligible ? 'ready' : 'missing deps'}
+                    </span>
+                  </div>
+                  {skill.description && (
+                    <p className="text-[11px] text-text-3/60 mt-0.5 truncate">{skill.description}</p>
+                  )}
+                  {skill.missing && skill.missing.length > 0 && (
+                    <p className="text-[10px] text-amber-400/60 mt-0.5">
+                      Needs: {skill.missing.join(', ')}
+                    </p>
+                  )}
+                </div>
+                {/* Action buttons */}
+                <div className="flex gap-1 shrink-0">
+                  {!skill.eligible && skill.installOptions && skill.installOptions.length > 0 && (
+                    <button
+                      onClick={() => setInstallTarget(skill)}
+                      className="text-[10px] text-accent-bright bg-transparent border-none cursor-pointer hover:underline"
+                    >
+                      Install
+                    </button>
+                  )}
+                  {skill.skillKey && (
+                    <button
+                      onClick={async () => {
+                        await api('PATCH', '/openclaw/skills', { skillKey: skill.skillKey, enabled: !skill.disabled })
+                        loadSkills()
+                      }}
+                      className={`text-[10px] bg-transparent border-none cursor-pointer hover:underline ${skill.disabled ? 'text-emerald-400' : 'text-amber-400'}`}
+                    >
+                      {skill.disabled ? 'Enable' : 'Disable'}
+                    </button>
+                  )}
+                  {skill.skillKey && skill.source !== 'bundled' && (
+                    <button
+                      onClick={() => setRemoveTarget(skill)}
+                      className="text-[10px] text-red-400/70 bg-transparent border-none cursor-pointer hover:underline"
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+
+      {skills.length === 0 && (
+        <div className="text-[13px] text-text-3/50 text-center py-4">No skills discovered</div>
+      )}
+
+      {/* Save button */}
+      <button
+        onClick={handleSave}
+        disabled={saving}
+        className="px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600
+          cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-all hover:brightness-110 self-start"
+        style={{ fontFamily: 'inherit' }}
+      >
+        {saving ? 'Saving...' : 'Save Configuration'}
+      </button>
+
+      {/* Install dialog */}
+      {installTarget && (
+        <SkillInstallDialog
+          open={!!installTarget}
+          onClose={() => setInstallTarget(null)}
+          skillName={installTarget.name}
+          installOptions={installTarget.installOptions}
+          onInstalled={loadSkills}
+        />
+      )}
+
+      {/* Remove confirm */}
+      {removeTarget && (
+        <ConfirmDialog
+          open={!!removeTarget}
+          title="Remove Skill"
+          message={`Remove "${removeTarget.name}"? This cannot be undone.`}
+          confirmLabel="Remove"
+          danger
+          onConfirm={async () => {
+            await api('POST', '/openclaw/skills/remove', { skillKey: removeTarget.skillKey, source: removeTarget.source })
+            setRemoveTarget(null)
+            loadSkills()
+          }}
+          onCancel={() => setRemoveTarget(null)}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/agents/permission-preset-selector.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import type { PermissionPreset } from '@/types'
+
+interface Props {
+  agentId: string
+  onPresetChanged?: () => void
+}
+
+const PRESETS: { id: PermissionPreset; label: string; desc: string; color: string }[] = [
+  { id: 'conservative', label: 'Conservative', desc: 'Block all exec, no tools', color: 'text-red-400 bg-red-400/[0.08] border-red-400/20' },
+  { id: 'collaborative', label: 'Collaborative', desc: 'Allowlist exec, web + fs tools', color: 'text-amber-300 bg-amber-400/[0.08] border-amber-400/20' },
+  { id: 'autonomous', label: 'Autonomous', desc: 'Full exec, all tools', color: 'text-emerald-400 bg-emerald-400/[0.08] border-emerald-400/20' },
+]
+
+export function PermissionPresetSelector({ agentId, onPresetChanged }: Props) {
+  const [current, setCurrent] = useState<PermissionPreset | 'custom' | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [applying, setApplying] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await api<{ preset: PermissionPreset | 'custom' }>('GET', `/openclaw/permissions?agentId=${agentId}`)
+      setCurrent(res.preset)
+    } catch {
+      setCurrent(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [agentId])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSelect = async (preset: PermissionPreset) => {
+    if (applying || preset === current) return
+    setApplying(true)
+    try {
+      await api('PUT', '/openclaw/permissions', { agentId, preset })
+      setCurrent(preset)
+      onPresetChanged?.()
+    } catch {
+      // ignore
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  if (loading) return <div className="text-[12px] text-text-3/50 py-2">Loading presets...</div>
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50">Permission Preset</label>
+      <div className="flex gap-2">
+        {PRESETS.map((p) => (
+          <button
+            key={p.id}
+            onClick={() => handleSelect(p.id)}
+            disabled={applying}
+            className={`flex-1 flex flex-col items-center gap-1 py-2.5 px-2 rounded-[10px] border cursor-pointer transition-all
+              ${current === p.id
+                ? p.color
+                : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:border-white/[0.12]'
+              } ${applying ? 'opacity-50' : ''}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <span className="text-[11px] font-600">{p.label}</span>
+            <span className="text-[9px] text-text-3/50 text-center leading-tight">{p.desc}</span>
+          </button>
+        ))}
+      </div>
+      {current === 'custom' && (
+        <span className="text-[10px] text-text-3/50">Custom configuration — select a preset to override</span>
+      )}
+    </div>
+  )
+}

package/src/components/agents/personality-builder.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { PersonalityDraft } from '@/types'
+import { api } from '@/lib/api-client'
+import {
+  parseIdentityMd, serializeIdentityMd,
+  parseUserMd, serializeUserMd,
+  parseSoulMd, serializeSoulMd,
+} from '@/lib/personality-parser'
+
+interface Props {
+  agentId: string
+  fileType: 'IDENTITY.md' | 'USER.md' | 'SOUL.md'
+  content: string
+  onSave: (content: string) => void
+}
+
+const inputClass = 'w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text outline-none placeholder:text-text-3/40 focus:border-white/[0.12] transition-colors'
+const labelClass = 'block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1'
+
+export function PersonalityBuilder({ agentId: _agentId, fileType, content, onSave }: Props) {
+  const [draft, setDraft] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (fileType === 'IDENTITY.md') {
+      const parsed = parseIdentityMd(content)
+      setDraft({ name: parsed.name || '', creature: parsed.creature || '', vibe: parsed.vibe || '', emoji: parsed.emoji || '' })
+    } else if (fileType === 'USER.md') {
+      const parsed = parseUserMd(content)
+      setDraft({ name: parsed.name || '', callThem: parsed.callThem || '', pronouns: parsed.pronouns || '', timezone: parsed.timezone || '', notes: parsed.notes || '', context: parsed.context || '' })
+    } else if (fileType === 'SOUL.md') {
+      const parsed = parseSoulMd(content)
+      setDraft({ coreTruths: parsed.coreTruths || '', boundaries: parsed.boundaries || '', vibe: parsed.vibe || '', continuity: parsed.continuity || '' })
+    }
+  }, [content, fileType])
+
+  const update = (key: string, value: string) => {
+    setDraft((prev) => ({ ...prev, [key]: value }))
+  }
+
+  const handleSave = () => {
+    let serialized = ''
+    if (fileType === 'IDENTITY.md') {
+      serialized = serializeIdentityMd(draft as PersonalityDraft['identity'])
+    } else if (fileType === 'USER.md') {
+      serialized = serializeUserMd(draft as PersonalityDraft['user'])
+    } else if (fileType === 'SOUL.md') {
+      serialized = serializeSoulMd(draft as PersonalityDraft['soul'])
+    }
+    onSave(serialized)
+  }
+
+  const fields = fileType === 'IDENTITY.md'
+    ? [
+        { key: 'name', label: 'Name', placeholder: 'Agent display name' },
+        { key: 'creature', label: 'Creature / Type', placeholder: 'e.g. fox, robot, wizard' },
+        { key: 'vibe', label: 'Vibe', placeholder: 'e.g. calm, energetic, mysterious' },
+        { key: 'emoji', label: 'Emoji / Icon', placeholder: 'e.g. a single emoji' },
+      ]
+    : fileType === 'USER.md'
+    ? [
+        { key: 'name', label: 'User Name', placeholder: 'Your name' },
+        { key: 'callThem', label: 'Call Them', placeholder: 'Nickname / preferred name' },
+        { key: 'pronouns', label: 'Pronouns', placeholder: 'e.g. they/them' },
+        { key: 'timezone', label: 'Timezone', placeholder: 'e.g. America/New_York' },
+        { key: 'notes', label: 'Notes', placeholder: 'Quick notes' },
+        { key: 'context', label: 'Context', placeholder: 'Additional context...', multiline: true },
+      ]
+    : [
+        { key: 'coreTruths', label: 'Core Truths', placeholder: 'What the agent believes...', multiline: true },
+        { key: 'boundaries', label: 'Boundaries', placeholder: 'What the agent won\'t do...', multiline: true },
+        { key: 'vibe', label: 'Vibe', placeholder: 'Personality tone and style...', multiline: true },
+        { key: 'continuity', label: 'Continuity', placeholder: 'What persists between sessions...', multiline: true },
+      ]
+
+  return (
+    <div className="flex flex-col gap-3">
+      {fields.map((f) => (
+        <div key={f.key}>
+          <label className={labelClass}>{f.label}</label>
+          {'multiline' in f && f.multiline ? (
+            <textarea
+              value={draft[f.key] || ''}
+              onChange={(e) => update(f.key, e.target.value)}
+              placeholder={f.placeholder}
+              rows={3}
+              className={`${inputClass} resize-none`}
+              style={{ fontFamily: 'ui-monospace, monospace' }}
+            />
+          ) : (
+            <input
+              type="text"
+              value={draft[f.key] || ''}
+              onChange={(e) => update(f.key, e.target.value)}
+              placeholder={f.placeholder}
+              className={inputClass}
+            />
+          )}
+        </div>
+      ))}
+      <button
+        onClick={handleSave}
+        className="self-start px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600 cursor-pointer transition-all hover:brightness-110"
+        style={{ fontFamily: 'inherit' }}
+      >
+        Apply to Raw Editor
+      </button>
+    </div>
+  )
+}

package/src/components/agents/sandbox-env-panel.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+
+export function SandboxEnvPanel() {
+  const [available, setAvailable] = useState<string[]>([])
+  const [allowed, setAllowed] = useState<Set<string>>(new Set())
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await api<{ available: string[]; allowed: string[] }>('GET', '/openclaw/sandbox-env')
+      setAvailable(res.available)
+      setAllowed(new Set(res.allowed))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const toggle = async (key: string) => {
+    const next = new Set(allowed)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    setAllowed(next)
+
+    setSaving(true)
+    setError('')
+    try {
+      await api('PUT', '/openclaw/sandbox-env', { allowed: Array.from(next) })
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="text-[12px] text-text-3/50 py-2">Loading env keys...</div>
+
+  if (!available.length) {
+    return <div className="text-[12px] text-text-3/50 py-2">No .env keys found on gateway.</div>
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50">Sandbox Env Allowlist</label>
+      <div className="flex flex-col gap-1">
+        {available.map((key) => (
+          <label key={key} className="flex items-center gap-2 py-1 px-2 rounded-[8px] hover:bg-white/[0.02] cursor-pointer transition-colors">
+            <input
+              type="checkbox"
+              checked={allowed.has(key)}
+              onChange={() => toggle(key)}
+              disabled={saving}
+              className="accent-accent-bright"
+            />
+            <span className="text-[12px] font-mono text-text">{key}</span>
+          </label>
+        ))}
+      </div>
+      {error && <p className="text-[12px] text-red-400">{error}</p>}
+    </div>
+  )
+}

package/src/components/agents/skill-install-dialog.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useState } from 'react'
+import type { SkillInstallOption } from '@/types'
+import { api } from '@/lib/api-client'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  skillName: string
+  installOptions?: SkillInstallOption[]
+  onInstalled: () => void
+}
+
+export function SkillInstallDialog({ open, onClose, skillName, installOptions = [], onInstalled }: Props) {
+  const [selectedMethod, setSelectedMethod] = useState<string>(installOptions[0]?.kind || 'brew')
+  const [installing, setInstalling] = useState(false)
+  const [error, setError] = useState('')
+  const [progress, setProgress] = useState('')
+
+  const handleInstall = async () => {
+    setInstalling(true)
+    setError('')
+    setProgress('Installing...')
+    try {
+      await api('POST', '/openclaw/skills/install', {
+        name: skillName,
+        installId: selectedMethod,
+        timeoutMs: 120_000,
+      })
+      setProgress('Installed successfully!')
+      onInstalled()
+      setTimeout(onClose, 1000)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Installation failed')
+      setProgress('')
+    } finally {
+      setInstalling(false)
+    }
+  }
+
+  const methods = installOptions.length > 0
+    ? installOptions
+    : [
+        { kind: 'brew' as const, label: 'Homebrew' },
+        { kind: 'node' as const, label: 'npm/Node' },
+        { kind: 'go' as const, label: 'Go install' },
+        { kind: 'uv' as const, label: 'UV (Python)' },
+        { kind: 'download' as const, label: 'Direct download' },
+      ]
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>Install {skillName}</DialogTitle>
+        </DialogHeader>
+        <div className="py-3 flex flex-col gap-3">
+          <label className="text-[12px] font-600 text-text-3">Install Method</label>
+          <div className="flex flex-wrap gap-2">
+            {methods.map((m) => (
+              <button
+                key={m.kind}
+                onClick={() => setSelectedMethod(m.kind)}
+                disabled={installing}
+                className={`px-3 py-1.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border
+                  ${selectedMethod === m.kind
+                    ? 'bg-accent-soft text-accent-bright border-accent-bright/30'
+                    : 'bg-transparent text-text-3 border-white/[0.08] hover:border-white/[0.15]'
+                  }`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {m.label}
+              </button>
+            ))}
+          </div>
+          {progress && <p className="text-[12px] text-emerald-400">{progress}</p>}
+          {error && <p className="text-[12px] text-red-400">{error}</p>}
+        </div>
+        <DialogFooter>
+          <button
+            onClick={onClose}
+            disabled={installing}
+            className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleInstall}
+            disabled={installing}
+            className="px-4 py-2 rounded-[10px] border-none bg-accent-bright text-white text-[13px] font-600 cursor-pointer disabled:opacity-40 transition-all hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {installing ? 'Installing...' : 'Install'}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}