@swarmclawai/swarmclaw 0.2.0

package/src/components/sessions/session-list.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
+import { SessionCard } from './session-card'
+import { fetchMessages } from '@/lib/sessions'
+
+interface Props {
+  inSidebar?: boolean
+  onSelect?: () => void
+}
+
+type SessionFilter = 'all' | 'active' | 'human' | 'orchestrated'
+type SortMode = 'lastActive' | 'name' | 'messages'
+
+export function SessionList({ inSidebar, onSelect }: Props) {
+  const sessions = useAppStore((s) => s.sessions)
+  const currentUser = useAppStore((s) => s.currentUser)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const loadConnectors = useAppStore((s) => s.loadConnectors)
+  const setNewSessionOpen = useAppStore((s) => s.setNewSessionOpen)
+  const clearSessions = useAppStore((s) => s.clearSessions)
+  const togglePinSession = useAppStore((s) => s.togglePinSession)
+  const setMessages = useChatStore((s) => s.setMessages)
+  const [search, setSearch] = useState('')
+  const [typeFilter, setTypeFilter] = useState<SessionFilter>('all')
+  const [sortMode, setSortMode] = useState<SortMode>('lastActive')
+
+  useEffect(() => {
+    void loadConnectors()
+  }, [loadConnectors])
+
+  const allUserSessions = useMemo(() => {
+    return Object.values(sessions).filter((s) => {
+      if (s.name === '__main__') return false
+      const owner = (s.user || '').toLowerCase()
+      const isPlatformOwned = owner === 'system' || owner === 'connector' || owner === 'swarm'
+      const isCurrentUserOwned = !!currentUser && owner === currentUser.toLowerCase()
+      const isUnownedLegacy = !owner
+      if (!isCurrentUserOwned && !isPlatformOwned && !isUnownedLegacy) return false
+      return true
+    })
+  }, [sessions, currentUser])
+
+  const filtered = useMemo(() => {
+    return allUserSessions
+      .filter((s) => {
+        if (search && !s.name.toLowerCase().includes(search.toLowerCase())) return false
+        if (typeFilter === 'active' && !s.active) return false
+        if (typeFilter === 'human' && s.sessionType === 'orchestrated') return false
+        if (typeFilter === 'orchestrated' && s.sessionType !== 'orchestrated') return false
+        return true
+      })
+      .sort((a, b) => {
+        // Pinned always first
+        if (a.pinned && !b.pinned) return -1
+        if (!a.pinned && b.pinned) return 1
+        // Then by sort mode
+        if (sortMode === 'name') return a.name.localeCompare(b.name)
+        if (sortMode === 'messages') return (b.messages?.length || 0) - (a.messages?.length || 0)
+        return (b.lastActiveAt || 0) - (a.lastActiveAt || 0)
+      })
+  }, [allUserSessions, search, typeFilter, sortMode])
+
+  const handleSelect = async (id: string) => {
+    setCurrentSession(id)
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('swarmclaw:scroll-bottom'))
+    }
+    try {
+      const msgs = await fetchMessages(id)
+      setMessages(msgs)
+    } catch {
+      setMessages(sessions[id]?.messages || [])
+    }
+    await loadSessions()
+    onSelect?.()
+  }
+
+  // Truly empty — no sessions at all for this user
+  if (!allUserSessions.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-accent-bright">
+            <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="currentColor" />
+          </svg>
+        </div>
+        <p className="font-display text-[15px] font-600 text-text-2">No sessions yet</p>
+        <p className="text-[13px] text-text-3/50">Create one to start chatting</p>
+        {!inSidebar && (
+          <button
+            onClick={() => setNewSessionOpen(true)}
+            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white
+              text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
+              shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + New Session
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto">
+      {/* Filter tabs — always visible when sessions exist */}
+      <div className="flex items-center gap-1 px-4 pt-2 pb-1 shrink-0">
+        {(['all', 'active', 'human', 'orchestrated'] as SessionFilter[]).map((f) => (
+          <button
+            key={f}
+            onClick={() => setTypeFilter(f)}
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all
+              ${typeFilter === f ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {f === 'all' ? 'All' : f === 'active' ? 'Active' : f === 'human' ? 'Human' : 'AI'}
+          </button>
+        ))}
+        {filtered.length > 0 && (
+          <button
+            onClick={async () => {
+              if (!window.confirm(`Delete ${filtered.length} session${filtered.length === 1 ? '' : 's'}?`)) return
+              await clearSessions(filtered.map((s) => s.id))
+            }}
+            className="ml-auto p-1.5 rounded-[8px] text-text-3/70 hover:text-red-400 hover:bg-red-400/[0.06]
+              cursor-pointer transition-all bg-transparent border-none"
+            title="Clear all sessions"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+              <path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Search — always visible */}
+      <div className="px-4 py-2 shrink-0 flex gap-2">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search..."
+          className="flex-1 px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
+            text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+          style={{ fontFamily: 'inherit' }}
+        />
+        {/* Sort dropdown */}
+        <select
+          value={sortMode}
+          onChange={(e) => setSortMode(e.target.value as SortMode)}
+          aria-label="Sort sessions"
+          className="px-2 py-2 rounded-[12px] border border-white/[0.04] bg-surface text-text
+            text-[11px] outline-none cursor-pointer"
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="lastActive">Recent</option>
+          <option value="name">Name</option>
+          <option value="messages">Messages</option>
+        </select>
+      </div>
+
+      {filtered.length > 0 ? (
+        <div className="flex flex-col gap-1 px-2 pb-4">
+          {filtered.map((s) => (
+            <div key={s.id} className="group/pin relative">
+              <SessionCard
+                session={s}
+                active={s.id === currentSessionId}
+                onClick={() => handleSelect(s.id)}
+              />
+              <button
+                onClick={(e) => { e.stopPropagation(); togglePinSession(s.id) }}
+                aria-label={s.pinned ? 'Unpin session' : 'Pin session'}
+                className={`absolute top-2 right-2 p-1 rounded-[6px] border-none cursor-pointer transition-all
+                  ${s.pinned
+                    ? 'text-amber-400 bg-amber-400/10 opacity-100'
+                    : 'text-text-3/50 bg-transparent opacity-0 group-hover/pin:opacity-100 hover:text-text-2 hover:bg-white/[0.04]'}`}
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill={s.pinned ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <path d="M12 17v5" />
+                  <path d="M9 2h6l-1 7h4l-8 8 2-8H8z" />
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+          <p className="text-[13px] text-text-3/50">
+            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} sessions{search ? ` matching "${search}"` : ''}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/ai-gen-block.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { api } from '@/lib/api-client'
+
+interface Props {
+  aiPrompt: string
+  setAiPrompt: (v: string) => void
+  generating: boolean
+  generated: boolean
+  genError: string
+  onGenerate: () => void
+  appSettings?: Record<string, any>
+  placeholder: string
+}
+
+export function AiGenBlock({ aiPrompt, setAiPrompt, generating, generated, genError, onGenerate, placeholder }: Props) {
+  const [expanded, setExpanded] = useState(false)
+  const [genInfo, setGenInfo] = useState<{ provider: string; model: string } | null>(null)
+
+  useEffect(() => {
+    if (expanded && !genInfo) {
+      api<{ provider: string; model: string }>('GET', '/generate/info')
+        .then(setGenInfo)
+        .catch((err) => console.error('AI gen info fetch failed:', err))
+    }
+  }, [expanded])
+
+  return (
+    <div className="mb-10">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2.5 px-4 py-3 rounded-[14px] border border-[#6366F1]/15 bg-[#6366F1]/[0.03] hover:bg-[#6366F1]/[0.06] transition-all cursor-pointer w-full text-left"
+        style={{ fontFamily: 'inherit' }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-accent-bright shrink-0">
+          <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="currentColor" />
+        </svg>
+        <span className="font-display text-[13px] font-600 text-accent-bright flex-1">Generate with AI</span>
+        <svg
+          width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+          className={`text-accent-bright/50 transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {expanded && (
+        <div className="mt-3 p-5 rounded-[18px] border border-[#6366F1]/15 bg-[#6366F1]/[0.03]"
+          style={{ animation: 'fade-in 0.2s ease' }}>
+          <textarea
+            value={aiPrompt}
+            onChange={(e) => setAiPrompt(e.target.value)}
+            placeholder={placeholder}
+            rows={2}
+            className="w-full px-4 py-3 rounded-[12px] border border-[#6366F1]/10 bg-[#6366F1]/[0.02] text-text text-[14px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus:border-[#6366F1]/30 resize-none"
+            style={{ fontFamily: 'inherit' }}
+            autoFocus
+          />
+          <button
+            onClick={onGenerate}
+            disabled={generating || !aiPrompt.trim()}
+            className="mt-3 px-5 py-2.5 rounded-[12px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110 active:scale-[0.97] shadow-[0_2px_12px_rgba(99,102,241,0.2)]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {generating ? 'Generating...' : generated ? 'Regenerate' : 'Generate'}
+          </button>
+          {generated && <span className="ml-3 text-[12px] text-emerald-400/70">Fields populated — edit below</span>}
+          {genError && <p className="mt-2 text-[12px] text-red-400/80">{genError}</p>}
+          <p className="mt-3 text-[11px] text-text-3/50">
+            Using {genInfo ? `${genInfo.model} via ${genInfo.provider}` : 'auto-detected provider'}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/avatar.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+interface Props {
+  user: string
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const sizes = {
+  xs: 'w-6 h-6 text-[9px] rounded-[7px]',
+  sm: 'w-7 h-7 text-[10px] rounded-[8px]',
+  md: 'w-9 h-9 text-[13px] rounded-[10px]',
+  lg: 'w-[72px] h-[72px] text-[24px] rounded-[22px]',
+}
+
+/** Generate a consistent gradient from a username */
+function userGradient(name: string): string {
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const hue = Math.abs(hash) % 360
+  return `linear-gradient(135deg, hsl(${hue}, 70%, 35%), hsl(${(hue + 30) % 360}, 75%, 50%))`
+}
+
+export function Avatar({ user, size = 'md' }: Props) {
+  const initial = (user || '?')[0].toUpperCase()
+  return (
+    <div
+      className={`${sizes[size]} flex items-center justify-center font-display font-600 tracking-tight shrink-0 text-white`}
+      style={{ background: userGradient(user) }}
+    >
+      {initial}
+    </div>
+  )
+}
+
+export function AiAvatar({ size = 'md' }: { size?: 'sm' | 'md' }) {
+  const s = size === 'sm' ? 'w-6 h-6' : 'w-8 h-8'
+  const iconSize = size === 'sm' ? 12 : 16
+  return (
+    <div className={`${s} rounded-[8px] bg-accent-soft flex items-center justify-center shrink-0`}>
+      <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" className="text-accent-bright">
+        <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z"
+          fill="currentColor" />
+      </svg>
+    </div>
+  )
+}

package/src/components/shared/bottom-sheet.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  wide?: boolean
+}
+
+export function BottomSheet({ open, onClose, children, wide }: Props) {
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-100 flex items-center justify-center p-6">
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className={`relative bg-raised w-full ${wide ? 'max-w-[640px]' : 'max-w-[520px]'} max-h-[85vh] flex flex-col
+          rounded-[24px] border border-white/[0.06]
+          shadow-[0_24px_80px_rgba(0,0,0,0.6),0_0_1px_rgba(255,255,255,0.05)]`}
+        style={{ animation: 'modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}
+      >
+        <div className="flex-1 overflow-y-auto px-8 pt-8 pb-8">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+interface Props {
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  danger?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', danger, onConfirm, onCancel }: Props) {
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-100 flex items-center justify-center p-6">
+      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onCancel} />
+      <div className="relative glass rounded-[20px] p-6 w-full max-w-[380px]
+        shadow-[0_24px_80px_rgba(0,0,0,0.5)]"
+        style={{ animation: 'fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}>
+        <h3 className="font-display text-[18px] font-700 tracking-[-0.02em] mb-2">{title}</h3>
+        <p className="text-[13px] text-text-2 mb-6 leading-relaxed">{message}</p>
+        <div className="flex gap-2.5">
+          <button
+            onClick={onCancel}
+            className="flex-1 py-2.5 rounded-[12px] border border-white/[0.06] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer
+              hover:bg-surface transition-all duration-200"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`flex-1 py-2.5 rounded-[12px] border-none text-[13px] font-600 cursor-pointer active:scale-[0.97] transition-all duration-200
+              ${danger
+                ? 'bg-danger text-white shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
+                : 'bg-[#6366F1] text-white shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/connector-platform-icon.tsx

@@ -0,0 +1,113 @@
+import type { Connector, ConnectorPlatform, Session } from '@/types'
+import { cn } from '@/lib/utils'
+
+export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string; color: string }> = {
+  discord: { label: 'Discord', color: '#5865F2' },
+  telegram: { label: 'Telegram', color: '#229ED9' },
+  slack: { label: 'Slack', color: '#4A154B' },
+  whatsapp: { label: 'WhatsApp', color: '#25D366' },
+  openclaw: { label: 'OpenClaw', color: '#F97316' },
+  signal: { label: 'Signal', color: '#3A76F0' },
+  teams: { label: 'Teams', color: '#6264A7' },
+  googlechat: { label: 'Google Chat', color: '#00AC47' },
+  matrix: { label: 'Matrix', color: '#0DBD8B' },
+}
+
+export function getConnectorPlatformLabel(platform: ConnectorPlatform): string {
+  return CONNECTOR_PLATFORM_META[platform]?.label || platform
+}
+
+export function getConnectorIdFromSessionName(sessionName?: string | null): string | null {
+  if (!sessionName || !sessionName.startsWith('connector:')) return null
+  const parts = sessionName.split(':')
+  return parts.length >= 2 && parts[1] ? parts[1] : null
+}
+
+export function getSessionConnector(
+  session: Pick<Session, 'name'>,
+  connectors: Record<string, Connector>,
+): Connector | null {
+  const connectorId = getConnectorIdFromSessionName(session.name)
+  if (!connectorId) return null
+  return connectors[connectorId] || null
+}
+
+interface ConnectorPlatformIconProps {
+  platform: ConnectorPlatform
+  size?: number
+  className?: string
+}
+
+export function ConnectorPlatformIcon({
+  platform,
+  size = 14,
+  className,
+}: ConnectorPlatformIconProps) {
+  switch (platform) {
+    case 'discord':
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
+          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+        </svg>
+      )
+    case 'telegram':
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
+          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+        </svg>
+      )
+    case 'slack':
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
+          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+        </svg>
+      )
+    case 'whatsapp':
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
+          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
+        </svg>
+      )
+    case 'openclaw':
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+          <path d="M4 17l2-5 2 5" /><path d="M12 17l2-5 2 5" /><path d="M20 17l-2-5-2 5" />
+          <path d="M2 7l4-4 3 3" /><path d="M22 7l-4-4-3 3" />
+          <line x1="12" y1="3" x2="12" y2="8" />
+        </svg>
+      )
+    default:
+      return null
+  }
+}
+
+interface ConnectorPlatformBadgeProps {
+  platform: ConnectorPlatform
+  size?: number
+  iconSize?: number
+  className?: string
+  roundedClassName?: string
+  title?: string
+}
+
+export function ConnectorPlatformBadge({
+  platform,
+  size = 36,
+  iconSize,
+  className,
+  roundedClassName = 'rounded-[10px]',
+  title,
+}: ConnectorPlatformBadgeProps) {
+  const meta = CONNECTOR_PLATFORM_META[platform]
+  const glyphSize = iconSize ?? Math.max(12, Math.floor(size * 0.52))
+
+  return (
+    <span
+      title={title || `${meta.label} connector`}
+      className={cn('inline-flex items-center justify-center shrink-0', roundedClassName, className)}
+      style={{ width: size, height: size, backgroundColor: meta.color }}
+    >
+      <ConnectorPlatformIcon platform={platform} size={glyphSize} className="text-white" />
+    </span>
+  )
+}