@swarmclawai/swarmclaw 0.4.5 → 0.5.0

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>
+  )
+}

package/src/components/agents/trash-list.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Agent } from '@/types'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+
+export function TrashList() {
+  const trashedAgents = useAppStore((s) => s.trashedAgents)
+  const loadTrashedAgents = useAppStore((s) => s.loadTrashedAgents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const [confirmPermanent, setConfirmPermanent] = useState<Agent | null>(null)
+
+  useEffect(() => { loadTrashedAgents() }, []) // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  const handleRestore = async (id: string) => {
+    await api('POST', '/agents/trash', { id })
+    await Promise.all([loadTrashedAgents(), loadAgents()])
+  }
+
+  const handlePermanentDelete = async (id: string) => {
+    await api('DELETE', '/agents/trash', { id })
+    await loadTrashedAgents()
+    setConfirmPermanent(null)
+  }
+
+  const agents = Object.values(trashedAgents).sort(
+    (a, b) => (b.trashedAt ?? 0) - (a.trashedAt ?? 0),
+  )
+
+  if (!agents.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-white/[0.03] flex items-center justify-center">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 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>
+        </div>
+        <p className="text-[13px] text-text-3/50">Trash is empty</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      <div className="flex flex-col gap-1 px-2 pb-4 pt-2">
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className="py-3 px-4 rounded-[14px] border border-white/[0.04] bg-white/[0.02]"
+          >
+            <div className="flex items-center gap-2.5">
+              <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em] text-text-2/70">
+                {agent.name}
+              </span>
+            </div>
+            <div className="text-[12px] text-text-3/50 mt-1 truncate">{agent.description}</div>
+            {agent.trashedAt && (
+              <div className="text-[11px] text-text-3/40 mt-1">
+                Trashed {formatRelative(agent.trashedAt)}
+              </div>
+            )}
+            <div className="flex items-center gap-2 mt-2.5">
+              <button
+                onClick={() => handleRestore(agent.id)}
+                className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[12px] font-600
+                  text-accent-bright cursor-pointer hover:bg-accent-soft transition-all"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Restore
+              </button>
+              <button
+                onClick={() => setConfirmPermanent(agent)}
+                className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[12px] font-600
+                  text-red-400 cursor-pointer hover:bg-red-400/10 transition-all"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Delete Forever
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <ConfirmDialog
+        open={!!confirmPermanent}
+        title="Permanently Delete"
+        message={`Permanently delete "${confirmPermanent?.name}"? This cannot be undone.`}
+        confirmLabel="Delete Forever"
+        danger
+        onConfirm={() => confirmPermanent && handlePermanentDelete(confirmPermanent.id)}
+        onCancel={() => setConfirmPermanent(null)}
+      />
+    </div>
+  )
+}
+
+function formatRelative(ts: number): string {
+  const diff = Date.now() - ts
+  const mins = Math.floor(diff / 60_000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins}m ago`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}

package/src/components/chat/chat-area.tsx

@@ -15,6 +15,8 @@ import { SessionDebugPanel } from './session-debug-panel'
 import { VoiceOverlay } from './voice-overlay'
 import { useVoiceConversation } from '@/hooks/use-voice-conversation'
 import { ChatInput } from '@/components/input/chat-input'
+import { ChatPreviewPanel } from './chat-preview-panel'
+import { InspectorPanel } from '@/components/agents/inspector-panel'
 import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
@@ -37,13 +39,15 @@ export function ChatArea() {
   const removeSessionFromStore = useAppStore((s) => s.removeSession)
   const loadSessions = useAppStore((s) => s.loadSessions)
   const appSettings = useAppStore((s) => s.appSettings)
-  const { messages, setMessages, streaming, streamingSessionId, sendMessage, stopStreaming, devServer: devServerStatus, setDevServer, debugOpen, setDebugOpen, ttsEnabled } = useChatStore()
+  const { messages, setMessages, streaming, streamingSessionId, sendMessage, stopStreaming, devServer: devServerStatus, setDevServer, debugOpen, setDebugOpen, ttsEnabled, previewContent, setPreviewContent } = useChatStore()
   const isDesktop = useMediaQuery('(min-width: 768px)')
 
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
+  const inspectorOpen = useAppStore((s) => s.inspectorOpen)
+  const currentAgent = session?.agentId ? agents[session.agentId] ?? null : null
 
   const voice = useVoiceConversation()
   const handleVoiceToggle = useCallback(() => {
@@ -243,8 +247,9 @@ export function ChatArea() {
   const isEmpty = !messages.length && !streamingForThisSession
 
   return (
+    <div className="flex-1 flex h-full min-h-0 min-w-0">
     <div
-      className="flex-1 flex flex-col h-full min-h-0 relative"
+      className="flex-1 flex flex-col h-full min-h-0 min-w-0 relative"
       onDragOver={handleDragOver}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
@@ -423,6 +428,13 @@ export function ChatArea() {
         </div>
       )}
     </div>
+    {isDesktop && previewContent && (
+      <ChatPreviewPanel content={previewContent} onClose={() => setPreviewContent(null)} />
+    )}
+    {isDesktop && inspectorOpen && currentAgent && (
+      <InspectorPanel agent={currentAgent} />
+    )}
+    </div>
   )
 }