@swarmclawai/swarmclaw 0.5.0 → 0.5.1

package/README.md

@@ -81,7 +81,7 @@ curl -fsSL https://raw.githubusercontent.com/swarmclawai/swarmclaw/main/install.
 ```
 
 The installer resolves the latest stable release tag and installs that version by default.
-To pin a version: `SWARMCLAW_VERSION=v0.5.0 curl ... | bash`
+To pin a version: `SWARMCLAW_VERSION=v0.5.1 curl ... | bash`
 
 Or run locally from the repo (friendly for non-technical users):
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Self-hosted AI agent orchestration dashboard — manage LLM providers, orchestrate agent swarms, schedule tasks, and bridge agents to chat platforms.",
   "license": "MIT",
   "repository": {

package/src/app/globals.css

@@ -109,6 +109,34 @@
   --sidebar-accent-foreground: #e2e2ec;
   --sidebar-border: rgba(255,255,255,0.04);
   --sidebar-ring: rgba(99,102,241,0.4);
+
+  /* ===== Status Badge System ===== */
+  --status-idle-bg: rgba(255,255,255,0.04);
+  --status-idle-border: rgba(255,255,255,0.06);
+  --status-idle-fg: #8e8ea8;
+  --status-running-bg: rgba(52,211,153,0.08);
+  --status-running-border: rgba(52,211,153,0.15);
+  --status-running-fg: #34D399;
+  --status-error-bg: rgba(244,63,94,0.08);
+  --status-error-border: rgba(244,63,94,0.15);
+  --status-error-fg: #F43F5E;
+  --status-connecting-bg: rgba(251,191,36,0.08);
+  --status-connecting-border: rgba(251,191,36,0.15);
+  --status-connecting-fg: #FBBF24;
+  --status-connected-bg: rgba(56,189,248,0.08);
+  --status-connected-border: rgba(56,189,248,0.15);
+  --status-connected-fg: #38BDF8;
+  --status-disconnected-bg: var(--status-idle-bg);
+  --status-disconnected-border: var(--status-idle-border);
+  --status-disconnected-fg: var(--status-idle-fg);
+  --status-approval-bg: rgba(251,146,60,0.08);
+  --status-approval-border: rgba(251,146,60,0.15);
+  --status-approval-fg: #FB923C;
+
+  /* ===== Command Surface ===== */
+  --command-bg: #0a0a14;
+  --command-border: rgba(255,255,255,0.06);
+  --command-header: rgba(0,0,0,0.3);
 }
 
 @layer base {
@@ -128,10 +156,15 @@ body {
 }
 
 /* Scrollbar */
-::-webkit-scrollbar { width: 4px; }
+* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.04); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.1); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 6px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
+textarea { scrollbar-width: none; }
+textarea::-webkit-scrollbar { width: 0; }
+textarea:hover { scrollbar-width: thin; }
+textarea:hover::-webkit-scrollbar { width: 6px; }
 
 /* Selection */
 ::selection { background: rgba(99,102,241,0.3); }
@@ -205,6 +238,10 @@ body {
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
 }
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
 /* AI avatar mood animations */
 @keyframes ai-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@@ -377,6 +414,44 @@ body {
   font-family: var(--font-sora), 'Sora', system-ui, sans-serif;
 }
 
+/* ===== Status Badge Classes ===== */
+.status-badge-idle, .status-badge-running, .status-badge-error,
+.status-badge-connecting, .status-badge-connected, .status-badge-disconnected,
+.status-badge-approval {
+  display: inline-flex; align-items: center; gap: 0.375rem;
+  padding: 0.125rem 0.5rem; border-radius: 6px;
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; border: 1px solid;
+}
+.status-badge-idle { background: var(--status-idle-bg); border-color: var(--status-idle-border); color: var(--status-idle-fg); }
+.status-badge-running { background: var(--status-running-bg); border-color: var(--status-running-border); color: var(--status-running-fg); }
+.status-badge-error { background: var(--status-error-bg); border-color: var(--status-error-border); color: var(--status-error-fg); }
+.status-badge-connecting { background: var(--status-connecting-bg); border-color: var(--status-connecting-border); color: var(--status-connecting-fg); }
+.status-badge-connected { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-fg); }
+.status-badge-disconnected { background: var(--status-disconnected-bg); border-color: var(--status-disconnected-border); color: var(--status-disconnected-fg); }
+.status-badge-approval { background: var(--status-approval-bg); border-color: var(--status-approval-border); color: var(--status-approval-fg); }
+
+/* ===== Fade-Up Animation ===== */
+.fade-up { animation: fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.fade-up-delay { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
+
+/* ===== Card Select Indicator ===== */
+.card-select-indicator {
+  position: absolute;
+  left: 0; top: 0.7rem; bottom: 0.7rem;
+  width: 4px;
+  border-radius: 0 9999px 9999px 0;
+  background: linear-gradient(180deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
+}
+
+/* ===== Command Surface ===== */
+.command-surface {
+  background: var(--command-bg);
+  border: 1px solid var(--command-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

package/src/components/agents/agent-card.tsx

@@ -22,10 +22,11 @@ interface Props {
   agent: Agent
   isDefault?: boolean
   isRunning?: boolean
+  isSelected?: boolean
   onSetDefault?: (id: string) => void
 }
 
-export function AgentCard({ agent, isDefault, isRunning, onSetDefault }: Props) {
+export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefault }: Props) {
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const loadSessions = useAppStore((s) => s.loadSessions)
@@ -85,10 +86,13 @@ export function AgentCard({ agent, isDefault, isRunning, onSetDefault }: Props)
     <>
       <div
         onClick={handleClick}
-        className="group relative py-3.5 px-4 cursor-pointer rounded-[14px]
+        className={`group relative py-3.5 px-4 cursor-pointer rounded-[14px]
           transition-all duration-200 active:scale-[0.98]
-          bg-transparent border border-transparent hover:bg-white/[0.05] hover:border-white/[0.08]"
+          ${isSelected
+            ? 'bg-white/[0.04] border border-white/[0.08]'
+            : 'bg-transparent border border-transparent hover:bg-white/[0.05] hover:border-white/[0.08]'}`}
       >
+        {isSelected && <div className="card-select-indicator" />}
         {/* Three-dot dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState, useCallback } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { AgentCard } from './agent-card'
@@ -23,10 +23,18 @@ export function AgentList({ inSidebar }: Props) {
   const setShowTrash = useAppStore((s) => s.setShowTrash)
   const fleetFilter = useAppStore((s) => s.fleetFilter)
   const setFleetFilter = useAppStore((s) => s.setFleetFilter)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
   const approvals = useApprovalStore((s) => s.approvals)
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<'all' | 'orchestrator' | 'agent'>('all')
 
+  // FLIP animation refs
+  const flipPositions = useRef<Map<string, number>>(new Map())
+  const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+
+  const currentSession = currentSessionId ? sessions[currentSessionId] : null
+  const selectedAgentId = currentSession?.agentId
+
   const mainSession = useMemo(() =>
     Object.values(sessions).find((s: any) => s.name === '__main__' && s.user === currentUser),
     [sessions, currentUser]
@@ -76,6 +84,26 @@ export function AgentList({ inSidebar }: Props) {
       .sort((a, b) => b.updatedAt - a.updatedAt)
   }, [agents, search, filter, activeProjectFilter, fleetFilter, runningAgentIds, approvalsByAgent])
 
+  // FLIP animation: animate agent cards when order changes
+  useLayoutEffect(() => {
+    const newPositions = new Map<string, number>()
+    for (const [id, el] of cardRefs.current) {
+      const newTop = el.getBoundingClientRect().top
+      newPositions.set(id, newTop)
+      const prevTop = flipPositions.current.get(id)
+      if (prevTop != null) {
+        const delta = prevTop - newTop
+        if (Math.abs(delta) > 1) {
+          el.animate(
+            [{ transform: `translateY(${delta}px)` }, { transform: 'translateY(0)' }],
+            { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' }
+          )
+        }
+      }
+    }
+    flipPositions.current = newPositions
+  }, [filtered])
+
   if (showTrash) {
     return (
       <div className="flex-1 flex flex-col overflow-hidden">
@@ -124,7 +152,7 @@ export function AgentList({ inSidebar }: Props) {
   }
 
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto fade-up">
       {(filtered.length > 3 || search) && (
         <div className="px-4 py-2.5">
           <input
@@ -183,7 +211,9 @@ export function AgentList({ inSidebar }: Props) {
       </div>
       <div className="flex flex-col gap-1 px-2 pb-4">
         {filtered.map((p) => (
-          <AgentCard key={p.id} agent={p} isDefault={p.id === defaultAgentId} isRunning={runningAgentIds.has(p.id)} onSetDefault={handleSetDefault} />
+          <div key={p.id} ref={(el) => { if (el) cardRefs.current.set(p.id, el); else cardRefs.current.delete(p.id) }}>
+            <AgentCard agent={p} isDefault={p.id === defaultAgentId} isRunning={runningAgentIds.has(p.id)} isSelected={p.id === selectedAgentId} onSetDefault={handleSetDefault} />
+          </div>
         ))}
       </div>
     </div>

package/src/components/agents/inspector-panel.tsx

@@ -52,7 +52,7 @@ export function InspectorPanel({ agent }: Props) {
   const agentSchedules = Object.values(schedules).filter((s) => s.agentId === agent.id)
 
   return (
-    <div className="w-[400px] shrink-0 border-l border-white/[0.06] bg-[#0d0f1a] flex flex-col h-full overflow-hidden">
+    <div className="w-[400px] shrink-0 border-l border-white/[0.06] bg-[#0d0f1a] flex flex-col h-full overflow-hidden fade-up-delay">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06] shrink-0">
         <h3 className="font-display text-[14px] font-600 text-text truncate">{agent.name}</h3>

package/src/components/chat/code-block.tsx

@@ -56,7 +56,7 @@ export function CodeBlock({ children, className }: Props) {
   }, [getText, language])
 
   return (
-    <div className="relative group/code">
+    <div className="relative group/code command-surface">
       <div className="flex items-center justify-between px-4 py-2 bg-black/30 border-b border-white/[0.03]">
         <span className="text-[10px] font-600 uppercase tracking-[0.08em] text-text-3 font-mono">{language}</span>
         <div className="flex items-center gap-1">

package/src/components/chat/message-bubble.tsx

@@ -376,6 +376,15 @@ interface Props {
   onFork?: (index: number) => void
 }
 
+function isStructuredMarkdown(text: string): boolean {
+  if (!text) return false
+  return /```/.test(text)
+    || /^#{1,4}\s/m.test(text)
+    || /^[-*]\s/m.test(text)
+    || /^\d+\.\s/m.test(text)
+    || /\|.*\|.*\|/m.test(text)
+}
+
 export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork }: Props) {
   const isUser = message.role === 'user'
   const isHeartbeat = !isUser && (message.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(message.text || ''))
@@ -388,6 +397,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   const toolEvents = message.toolEvents || []
   const hasToolEvents = !isUser && toolEvents.length > 0
   const visibleToolEvents = toolEventsExpanded ? [...toolEvents].reverse() : toolEvents.slice(-1)
+  const isStructured = !isUser && !isHeartbeat && isStructuredMarkdown(message.text)
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(message.text).then(() => {
@@ -442,7 +452,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       )}
 
       {/* Message bubble */}
-      <div className={`max-w-[85%] md:max-w-[72%] ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
+      <div className={`${isStructured ? 'max-w-[92%] md:max-w-[85%]' : 'max-w-[85%] md:max-w-[72%]'} ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
         {renderAttachments(message)}
 
         {isHeartbeat ? (

package/src/components/chat/message-list.tsx

@@ -5,6 +5,7 @@ import type { Message } from '@/types'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
@@ -12,6 +13,23 @@ import { SuggestionsBar } from './suggestions-bar'
 import { ExecApprovalCard } from './exec-approval-card'
 import { useApprovalStore } from '@/stores/use-approval-store'
 
+const INTRO_GREETINGS = [
+  'What can I help you with?',
+  'Ready when you are.',
+  "Let's get started.",
+  'How can I assist you today?',
+  'What are we working on?',
+]
+
+function stableHash(str: string): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i)
+    hash |= 0
+  }
+  return Math.abs(hash)
+}
+
 function dateSeparator(ts: number): string {
   const d = new Date(ts)
   const today = new Date()
@@ -316,9 +334,18 @@ export function MessageList({ messages, streaming }: Props) {
       <div
         ref={scrollRef}
         onScroll={updateScrollState}
-        className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6"
+        className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6 fade-up"
       >
         <div className="flex flex-col gap-6">
+          {filteredMessages.length === 0 && !streaming && (
+            <div className="flex flex-col items-center justify-center gap-3 py-20 text-center" style={{ animation: 'fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
+              <AgentAvatar seed={agent?.avatarSeed || null} name={agent?.name || 'Agent'} size={48} />
+              <span className="font-display text-[16px] font-600 text-text-2">{agent?.name || 'Assistant'}</span>
+              <span className="text-[14px] text-text-3/60">
+                {INTRO_GREETINGS[stableHash(agent?.id || session?.id || '') % INTRO_GREETINGS.length]}
+              </span>
+            </div>
+          )}
           {filteredMessages.map((msg, i) => {
             // Find original index in the full messages array for API calls
             const originalIndex = messages.indexOf(msg)

package/src/components/chat/trace-block.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useState } from 'react'
 import type { ChatTraceBlock } from '@/types'
 
 interface Props {
@@ -8,8 +7,6 @@ interface Props {
 }
 
 export function TraceBlock({ trace }: Props) {
-  const [collapsed, setCollapsed] = useState(trace.collapsed !== false)
-
   const bgColor = trace.type === 'thinking'
     ? 'bg-purple-500/[0.04] border-purple-500/10'
     : trace.type === 'tool-call'
@@ -29,32 +26,25 @@ export function TraceBlock({ trace }: Props) {
       : '<'
 
   return (
-    <div className={`my-1 rounded-[8px] border ${bgColor} overflow-hidden`}>
-      <button
-        onClick={() => setCollapsed(!collapsed)}
-        className={`w-full flex items-center gap-2 px-3 py-1.5 text-left cursor-pointer border-none bg-transparent transition-colors hover:bg-white/[0.02] ${labelColor}`}
-        style={{ fontFamily: 'inherit' }}
-      >
-        <span className="font-mono text-[10px] w-4 shrink-0">{collapsed ? '+' : '-'}</span>
+    <details className={`my-1 rounded-[8px] border ${bgColor} overflow-hidden`} open={trace.collapsed === false || undefined}>
+      <summary className={`flex items-center gap-2 px-3 py-1.5 cursor-pointer select-none transition-colors hover:bg-white/[0.02] ${labelColor} [&::-webkit-details-marker]:hidden list-none`}>
         <span className="font-mono text-[10px] shrink-0">{icon}</span>
         <span className="text-[11px] font-600 truncate">
           {trace.label || trace.type.replace('-', ' ')}
         </span>
-      </button>
-      {!collapsed && (
-        <div className="px-3 pb-2">
-          <pre className={`text-[11px] leading-relaxed whitespace-pre-wrap break-words m-0 ${
-            trace.type === 'thinking'
-              ? 'text-text-3/60 italic'
-              : 'text-text-3/70 font-mono'
-          }`}>
-            {trace.content.length > 2000
-              ? trace.content.slice(0, 2000) + '\n... (truncated)'
-              : trace.content}
-          </pre>
-        </div>
-      )}
-    </div>
+      </summary>
+      <div className="px-3 pb-2">
+        <pre className={`text-[11px] leading-relaxed whitespace-pre-wrap break-words m-0 ${
+          trace.type === 'thinking'
+            ? 'text-text-3/60 italic'
+            : 'text-text-3/70 font-mono'
+        }`}>
+          {trace.content.length > 2000
+            ? trace.content.slice(0, 2000) + '\n... (truncated)'
+            : trace.content}
+        </pre>
+      </div>
+    </details>
   )
 }