@swarmclawai/swarmclaw 0.2.0

package/src/components/mcp-servers/mcp-server-list.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+
+const transportColors: Record<string, string> = {
+  stdio: 'bg-emerald-500/15 text-emerald-400',
+  sse: 'bg-blue-500/15 text-blue-400',
+  'streamable-http': 'bg-purple-500/15 text-purple-400',
+}
+
+type McpStatus = { ok: boolean; tools?: string[]; error?: string; loading: boolean }
+
+export function McpServerList({ inSidebar }: { inSidebar?: boolean }) {
+  const mcpServers = useAppStore((s) => s.mcpServers)
+  const loadMcpServers = useAppStore((s) => s.loadMcpServers)
+  const setMcpServerSheetOpen = useAppStore((s) => s.setMcpServerSheetOpen)
+  const setEditingMcpServerId = useAppStore((s) => s.setEditingMcpServerId)
+  const [statuses, setStatuses] = useState<Record<string, McpStatus>>({})
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([])
+
+  useEffect(() => {
+    loadMcpServers()
+  }, [loadMcpServers])
+
+  const serverList = Object.values(mcpServers)
+
+  // Staggered status tests on mount
+  useEffect(() => {
+    timersRef.current.forEach(clearTimeout)
+    timersRef.current = []
+
+    serverList.forEach((server, i) => {
+      setStatuses((prev) => ({ ...prev, [server.id]: { ok: false, loading: true } }))
+      const timer = setTimeout(async () => {
+        try {
+          const res = await api<{ ok: boolean; tools?: string[]; error?: string }>('POST', `/mcp-servers/${server.id}/test`)
+          setStatuses((prev) => ({ ...prev, [server.id]: { ok: res.ok, tools: res.tools, error: res.error, loading: false } }))
+        } catch {
+          setStatuses((prev) => ({ ...prev, [server.id]: { ok: false, error: 'Test failed', loading: false } }))
+        }
+      }, i * 200)
+      timersRef.current.push(timer)
+    })
+
+    return () => timersRef.current.forEach(clearTimeout)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mcpServers])
+
+  const handleEdit = (id: string) => {
+    setEditingMcpServerId(id)
+    setMcpServerSheetOpen(true)
+  }
+
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/mcp-servers/${id}`)
+    await loadMcpServers()
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+      {serverList.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-[13px] text-text-3/60">No MCP servers configured</p>
+          <button
+            onClick={() => { setEditingMcpServerId(null); setMcpServerSheetOpen(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 MCP Server
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {serverList.map((server) => (
+            <button
+              key={server.id}
+              onClick={() => handleEdit(server.id)}
+              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">
+                <div className="flex items-center gap-2 min-w-0">
+                  {(() => {
+                    const s = statuses[server.id]
+                    if (!s || s.loading) return <span className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse shrink-0" title="Testing..." />
+                    if (s.ok) return (
+                      <span className="flex items-center gap-1 shrink-0">
+                        <span className="w-2 h-2 rounded-full bg-emerald-400 shrink-0" />
+                        {s.tools && <span className="text-[10px] text-emerald-400/80 font-mono">{s.tools.length} tools</span>}
+                      </span>
+                    )
+                    return <span className="w-2 h-2 rounded-full bg-red-400 shrink-0" title={s.error || 'Failed'} />
+                  })()}
+                  <span className="font-display text-[14px] font-600 text-text truncate">{server.name}</span>
+                </div>
+                <div className="flex items-center gap-2 shrink-0 ml-2">
+                  <span className={`text-[10px] font-mono px-2 py-0.5 rounded-full ${transportColors[server.transport] || 'bg-white/10 text-text-3'}`}>
+                    {server.transport}
+                  </span>
+                  <button
+                    onClick={(e) => handleDelete(e, server.id)}
+                    className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                    title="Delete server"
+                  >
+                    <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>
+              <p className="text-[12px] text-text-3/60 font-mono truncate">
+                {server.transport === 'stdio' ? server.command : server.url}
+              </p>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/mcp-servers/mcp-server-sheet.tsx

@@ -0,0 +1,243 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { api } from '@/lib/api-client'
+import type { McpServerConfig, McpTransport } from '@/types'
+
+function McpServerForm({ editing, onClose, loadMcpServers }: {
+  editing: McpServerConfig | null
+  onClose: () => void
+  loadMcpServers: () => Promise<void>
+}) {
+  const [name, setName] = useState(editing?.name || '')
+  const [transport, setTransport] = useState<McpTransport>(editing?.transport || 'stdio')
+  const [command, setCommand] = useState(editing?.command || '')
+  const [args, setArgs] = useState(editing?.args?.join(', ') || '')
+  const [url, setUrl] = useState(editing?.url || '')
+  const [envText, setEnvText] = useState(
+    editing?.env ? Object.entries(editing.env).map(([k, v]) => `${k}=${v}`).join('\n') : '',
+  )
+  const [headersText, setHeadersText] = useState(
+    editing?.headers ? Object.entries(editing.headers).map(([k, v]) => `${k}: ${v}`).join('\n') : '',
+  )
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState<{ ok: boolean; tools?: string[]; error?: string } | null>(null)
+
+  const parseEnv = (text: string): Record<string, string> | undefined => {
+    if (!text.trim()) return undefined
+    const env: Record<string, string> = {}
+    for (const line of text.split('\n')) {
+      const idx = line.indexOf('=')
+      if (idx > 0) env[line.slice(0, idx).trim()] = line.slice(idx + 1).trim()
+    }
+    return Object.keys(env).length > 0 ? env : undefined
+  }
+
+  const parseHeaders = (text: string): Record<string, string> | undefined => {
+    if (!text.trim()) return undefined
+    const headers: Record<string, string> = {}
+    for (const line of text.split('\n')) {
+      const idx = line.indexOf(':')
+      if (idx > 0) headers[line.slice(0, idx).trim()] = line.slice(idx + 1).trim()
+    }
+    return Object.keys(headers).length > 0 ? headers : undefined
+  }
+
+  const handleSave = async () => {
+    const data: Record<string, unknown> = {
+      name: name.trim() || 'Unnamed Server',
+      transport,
+      env: parseEnv(envText),
+      headers: parseHeaders(headersText),
+    }
+    if (transport === 'stdio') {
+      data.command = command.trim()
+      data.args = args.trim() ? args.split(',').map((a) => a.trim()).filter(Boolean) : []
+    } else {
+      data.url = url.trim()
+    }
+    if (editing) {
+      await api('PUT', `/mcp-servers/${editing.id}`, data)
+    } else {
+      await api('POST', '/mcp-servers', data)
+    }
+    await loadMcpServers()
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    if (editing) {
+      await api('DELETE', `/mcp-servers/${editing.id}`)
+      await loadMcpServers()
+      onClose()
+    }
+  }
+
+  const handleTest = async () => {
+    if (!editing) return
+    setTesting(true)
+    setTestResult(null)
+    try {
+      const result = await api<{ ok: boolean; tools?: string[]; error?: string }>('POST', `/mcp-servers/${editing.id}/test`)
+      setTestResult(result)
+    } catch (err: unknown) {
+      setTestResult({ ok: false, error: err instanceof Error ? err.message : 'Test failed' })
+    }
+    setTesting(false)
+  }
+
+  const canSave = name.trim() && (transport === 'stdio' ? command.trim() : url.trim())
+
+  const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+  const labelClass = "block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3"
+
+  return (
+    <>
+      <div className="mb-10">
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
+          {editing ? 'Edit MCP Server' : 'New MCP Server'}
+        </h2>
+        <p className="text-[14px] text-text-3">Configure an MCP server to provide tools to agents</p>
+      </div>
+
+      <div className="mb-8">
+        <label className={labelClass}>Name</label>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Filesystem Server" className={inputClass} style={{ fontFamily: 'inherit' }} />
+      </div>
+
+      <div className="mb-8">
+        <label className={labelClass}>Transport</label>
+        <select
+          value={transport}
+          onChange={(e) => setTransport(e.target.value as McpTransport)}
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="stdio">stdio</option>
+          <option value="sse">sse</option>
+          <option value="streamable-http">streamable-http</option>
+        </select>
+      </div>
+
+      {transport === 'stdio' ? (
+        <>
+          <div className="mb-8">
+            <label className={labelClass}>Command</label>
+            <input type="text" value={command} onChange={(e) => setCommand(e.target.value)} placeholder="e.g. npx -y @modelcontextprotocol/server-filesystem" className={inputClass} style={{ fontFamily: 'inherit' }} />
+          </div>
+          <div className="mb-8">
+            <label className={labelClass}>
+              Arguments <span className="normal-case tracking-normal font-normal text-text-3">(comma-separated)</span>
+            </label>
+            <input type="text" value={args} onChange={(e) => setArgs(e.target.value)} placeholder="e.g. /path/to/dir, --verbose" className={inputClass} style={{ fontFamily: 'inherit' }} />
+          </div>
+        </>
+      ) : (
+        <div className="mb-8">
+          <label className={labelClass}>URL</label>
+          <input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="e.g. http://localhost:8080/sse" className={inputClass} style={{ fontFamily: 'inherit' }} />
+        </div>
+      )}
+
+      <div className="mb-8">
+        <label className={labelClass}>
+          Environment Variables <span className="normal-case tracking-normal font-normal text-text-3">(optional, KEY=VALUE per line)</span>
+        </label>
+        <textarea
+          value={envText}
+          onChange={(e) => setEnvText(e.target.value)}
+          placeholder={"API_KEY=sk-...\nDEBUG=true"}
+          rows={3}
+          className={`${inputClass} resize-y min-h-[80px] font-mono text-[13px]`}
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+
+      {transport !== 'stdio' && (
+        <div className="mb-8">
+          <label className={labelClass}>
+            Headers <span className="normal-case tracking-normal font-normal text-text-3">(optional, Key: Value per line)</span>
+          </label>
+          <textarea
+            value={headersText}
+            onChange={(e) => setHeadersText(e.target.value)}
+            placeholder={"Authorization: Bearer sk-...\nX-Custom: value"}
+            rows={3}
+            className={`${inputClass} resize-y min-h-[80px] font-mono text-[13px]`}
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      )}
+
+      {editing && (
+        <div className="mb-8">
+          <button
+            onClick={handleTest}
+            disabled={testing}
+            className="py-3 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-all disabled:opacity-30"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {testing ? 'Testing...' : 'Test Connection'}
+          </button>
+          {testResult && (
+            <div className={`mt-3 p-3 rounded-[10px] text-[13px] ${testResult.ok ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>
+              {testResult.ok ? (
+                <>
+                  Connected successfully.{' '}
+                  {testResult.tools && testResult.tools.length > 0 && (
+                    <span className="text-text-3">{testResult.tools.length} tool{testResult.tools.length !== 1 ? 's' : ''} available: {testResult.tools.join(', ')}</span>
+                  )}
+                </>
+              ) : (
+                <span>{testResult.error || 'Connection failed'}</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+        {editing && (
+          <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
+            Delete
+          </button>
+        )}
+        <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
+          Cancel
+        </button>
+        <button onClick={handleSave} disabled={!canSave} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110" style={{ fontFamily: 'inherit' }}>
+          {editing ? 'Save' : 'Create'}
+        </button>
+      </div>
+    </>
+  )
+}
+
+export function McpServerSheet() {
+  const open = useAppStore((s) => s.mcpServerSheetOpen)
+  const setOpen = useAppStore((s) => s.setMcpServerSheetOpen)
+  const editingId = useAppStore((s) => s.editingMcpServerId)
+  const setEditingId = useAppStore((s) => s.setEditingMcpServerId)
+  const mcpServers = useAppStore((s) => s.mcpServers)
+  const loadMcpServers = useAppStore((s) => s.loadMcpServers)
+
+  const editing = editingId ? mcpServers[editingId] : null
+
+  const onClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose} wide>
+      <McpServerForm
+        key={editingId || '__new__'}
+        editing={editing}
+        onClose={onClose}
+        loadMcpServers={loadMcpServers}
+      />
+    </BottomSheet>
+  )
+}

package/src/components/memory/memory-card.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import type { MemoryEntry } from '@/types'
+
+function timeAgo(ts: number): string {
+  if (!ts) return ''
+  const s = Math.floor((Date.now() - ts) / 1000)
+  if (s < 60) return 'now'
+  if (s < 3600) return Math.floor(s / 60) + 'm'
+  if (s < 86400) return Math.floor(s / 3600) + 'h'
+  return Math.floor(s / 86400) + 'd'
+}
+
+interface Props {
+  entry: MemoryEntry
+  active?: boolean
+  agentName?: string | null
+  onClick: () => void
+}
+
+export function MemoryCard({ entry, active, agentName, onClick }: Props) {
+  return (
+    <div
+      onClick={onClick}
+      className={`relative py-3 px-4 cursor-pointer rounded-[14px]
+        transition-all duration-200 active:scale-[0.98]
+        ${active
+          ? 'bg-accent-soft border border-accent-bright/10'
+          : 'bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]'}`}
+    >
+      {active && (
+        <div className="absolute left-0 top-3 bottom-3 w-[2.5px] rounded-full bg-accent-bright" />
+      )}
+      <div className="flex items-center gap-2">
+        <span className="shrink-0 text-[9px] font-700 uppercase tracking-wider text-accent-bright/70 bg-accent-soft px-1.5 py-0.5 rounded-[5px]">
+          {entry.category || 'note'}
+        </span>
+        <span className="font-display text-[13px] font-600 truncate flex-1 tracking-[-0.01em]">{entry.title}</span>
+        <span className="text-[10px] text-text-3/60 shrink-0 tabular-nums font-mono">
+          {timeAgo(entry.updatedAt || entry.createdAt)}
+        </span>
+      </div>
+      <div className="text-[12px] text-text-2/40 mt-1 truncate leading-relaxed">
+        {entry.content || '(empty)'}
+      </div>
+      {(entry.references?.length || entry.linkedMemoryIds?.length || entry.image?.path || entry.imagePath) && (
+        <div className="flex items-center gap-2 mt-1.5 text-[10px] text-text-3/35">
+          {entry.references?.length ? <span>{entry.references.length} ref{entry.references.length === 1 ? '' : 's'}</span> : null}
+          {entry.linkedMemoryIds?.length ? <span>{entry.linkedMemoryIds.length} linked</span> : null}
+          {(entry.image?.path || entry.imagePath) ? <span>image</span> : null}
+        </div>
+      )}
+      {agentName && (
+        <div className="flex items-center gap-1 mt-1.5">
+          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+          </svg>
+          <span className="text-[10px] text-text-3/60 truncate">{agentName}</span>
+        </div>
+      )}
+    </div>
+  )
+}