@swarmclawai/swarmclaw 0.5.0 → 0.5.2

package/src/components/activity/activity-feed.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
+import type { ActivityEntry } from '@/types'
+
+const ENTITY_ICONS: Record<string, string> = {
+  agent: 'A', task: 'T', connector: 'C', session: 'S', webhook: 'W', schedule: 'R',
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  created: 'bg-emerald-500/15 text-emerald-400',
+  updated: 'bg-blue-500/15 text-blue-400',
+  deleted: 'bg-red-500/15 text-red-400',
+  started: 'bg-green-500/15 text-green-400',
+  stopped: 'bg-gray-500/15 text-gray-400',
+  queued: 'bg-amber-500/15 text-amber-400',
+  completed: 'bg-emerald-500/15 text-emerald-400',
+  failed: 'bg-red-500/15 text-red-400',
+  approved: 'bg-green-500/15 text-green-400',
+  rejected: 'bg-red-500/15 text-red-400',
+}
+
+function timeAgo(ts: number) {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`
+  return `${Math.floor(diff / 86400_000)}d ago`
+}
+
+const ENTITY_TYPES = ['', 'agent', 'task', 'connector', 'session', 'webhook', 'schedule'] as const
+
+export function ActivityFeed() {
+  const entries = useAppStore((s) => s.activityEntries)
+  const loadActivity = useAppStore((s) => s.loadActivity)
+  const [filterType, setFilterType] = useState('')
+
+  useEffect(() => { loadActivity({ entityType: filterType || undefined, limit: 100 }) }, [filterType])
+  useWs('activity', () => loadActivity({ entityType: filterType || undefined, limit: 100 }), 10_000)
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden">
+      <div className="flex items-center justify-between px-8 pt-6 pb-4 shrink-0">
+        <div>
+          <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Activity</h1>
+          <p className="text-[13px] text-text-3 mt-1">Audit trail of all entity mutations</p>
+        </div>
+        <select
+          value={filterType}
+          onChange={(e) => setFilterType(e.target.value)}
+          className="px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03] appearance-none"
+          style={{ fontFamily: 'inherit', minWidth: 130 }}
+        >
+          <option value="">All Types</option>
+          {ENTITY_TYPES.filter(Boolean).map((t) => (
+            <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}s</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-8 pb-6">
+        {entries.length === 0 ? (
+          <div className="text-center text-text-3 text-[14px] mt-16">No activity yet</div>
+        ) : (
+          <div className="space-y-1">
+            {entries.map((entry: ActivityEntry) => (
+              <div key={entry.id} className="flex items-start gap-3 py-3 border-b border-white/[0.04]">
+                <div className="w-8 h-8 rounded-[8px] bg-surface-2 flex items-center justify-center text-[12px] font-700 text-text-3 shrink-0">
+                  {ENTITY_ICONS[entry.entityType] || '?'}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className={`px-1.5 py-0.5 rounded-[5px] text-[10px] font-600 ${ACTION_COLORS[entry.action] || 'bg-white/[0.06] text-text-3'}`}>
+                      {entry.action}
+                    </span>
+                    <span className="text-[10px] text-text-3/50 font-mono">{entry.entityType}</span>
+                    <span className="text-[10px] text-text-3/40">{entry.actor}</span>
+                  </div>
+                  <p className="text-[13px] text-text-2 leading-[1.4] truncate">{entry.summary}</p>
+                </div>
+                <span className="text-[11px] text-text-3/50 shrink-0 pt-1">{timeAgo(entry.timestamp)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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/exec-approval-card.tsx

@@ -14,8 +14,9 @@ export function ExecApprovalCard({ approval }: Props) {
     resolveApproval(approval.id, decision)
   }
 
+  const alreadyResolved = approval.error?.includes('Already resolved') ?? false
   const expired = approval.expiresAtMs < Date.now()
-  const disabled = !!approval.resolving || expired
+  const disabled = !!approval.resolving || expired || alreadyResolved
 
   return (
     <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-3.5">
@@ -47,11 +48,13 @@ export function ExecApprovalCard({ approval }: Props) {
         )}
       </div>
 
-      {approval.error && (
+      {approval.error && !alreadyResolved && (
         <p className="text-[12px] text-red-400 mb-2">{approval.error}</p>
       )}
 
-      {expired ? (
+      {alreadyResolved ? (
+        <p className="text-[12px] text-text-3/50 italic">Already resolved by another session</p>
+      ) : expired ? (
         <p className="text-[12px] text-text-3/50 italic">Approval expired</p>
       ) : (
         <div className="flex items-center gap-2">

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

package/src/components/layout/app-layout.tsx

@@ -35,8 +35,9 @@ import { KnowledgeList } from '@/components/knowledge/knowledge-list'
 import { KnowledgeSheet } from '@/components/knowledge/knowledge-sheet'
 import { PluginList } from '@/components/plugins/plugin-list'
 import { PluginSheet } from '@/components/plugins/plugin-sheet'
-import { UsageList } from '@/components/usage/usage-list'
 import { RunList } from '@/components/runs/run-list'
+import { ActivityFeed } from '@/components/activity/activity-feed'
+import { MetricsDashboard } from '@/components/usage/metrics-dashboard'
 import { ProjectList } from '@/components/projects/project-list'
 import { ProjectSheet } from '@/components/projects/project-sheet'
 import { NetworkBanner } from './network-banner'
@@ -314,6 +315,11 @@ export function AppLayout() {
                 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
               </svg>
             </NavItem>
+            <NavItem view="activity" label="Activity" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('activity')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M12 8v4l3 3" /><circle cx="12" cy="12" r="10" />
+              </svg>
+            </NavItem>
             <NavItem view="logs" label="Logs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('logs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" />
@@ -463,7 +469,6 @@ export function AppLayout() {
           {activeView === 'webhooks' && <WebhookList inSidebar />}
           {activeView === 'mcp_servers' && <McpServerList />}
           {activeView === 'knowledge' && <KnowledgeList />}
-          {activeView === 'usage' && <UsageList />}
           {activeView === 'runs' && <RunList />}
           {activeView === 'logs' && <LogList />}
         </div>
@@ -562,7 +567,6 @@ export function AppLayout() {
             {activeView === 'knowledge' && <KnowledgeList />}
             {activeView === 'plugins' && <PluginList inSidebar />}
             {activeView === 'projects' && <ProjectList />}
-            {activeView === 'usage' && <UsageList />}
             {activeView === 'runs' && <RunList />}
             {activeView === 'logs' && <LogList />}
           </div>
@@ -596,6 +600,10 @@ export function AppLayout() {
             <TaskBoard />
           ) : activeView === 'memory' ? (
             <MemoryDetail />
+          ) : activeView === 'activity' ? (
+            <ActivityFeed />
+          ) : activeView === 'usage' ? (
+            <MetricsDashboard />
           ) : activeView === 'settings' ? (
             <SettingsPage />
           ) : !sidebarOpen && FULL_WIDTH_VIEWS.has(activeView) ? (
@@ -604,7 +612,7 @@ export function AppLayout() {
                 <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">
                   {activeView === 'mcp_servers' ? 'MCP Servers' : activeView.replace('_', ' ')}
                 </h2>
-                {activeView !== 'usage' && activeView !== 'runs' && activeView !== 'logs' && (
+                {activeView !== 'runs' && activeView !== 'logs' && (
                   <button
                     onClick={openNewSheet}
                     className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 text-accent-bright bg-accent-soft hover:bg-[#6366F1]/15 transition-all cursor-pointer"
@@ -627,7 +635,6 @@ export function AppLayout() {
               {activeView === 'knowledge' && <KnowledgeList />}
               {activeView === 'plugins' && <PluginList />}
               {activeView === 'projects' && <ProjectList />}
-              {activeView === 'usage' && <UsageList />}
               {activeView === 'runs' && <RunList />}
               {activeView === 'logs' && <LogList />}
             </div>
@@ -742,16 +749,17 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   knowledge: 'Shared knowledge base accessible by all agents',
   logs: 'Application logs & error tracking',
   plugins: 'Extend agent capabilities with custom plugins',
-  usage: 'Token usage analytics & cost tracking',
+  usage: 'Usage metrics, cost tracking & agent performance',
   runs: 'Live run monitoring & history',
   settings: 'Manage providers, API keys & orchestrator engine',
   projects: 'Group agents, tasks & schedules into projects',
+  activity: 'Audit trail of all entity mutations',
 }
 
 const FULL_WIDTH_VIEWS = new Set<AppView>([
   'schedules', 'secrets', 'providers', 'skills',
   'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
-  'usage', 'runs', 'logs', 'settings', 'projects',
+  'usage', 'runs', 'logs', 'settings', 'projects', 'activity',
 ])
 
 const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; title: string; description: string; features: string[] }> = {
@@ -851,6 +859,12 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
     description: 'Organize your work into projects. Group agents, tasks, and schedules under a common scope.',
     features: ['Create named projects with color badges', 'Assign agents and tasks to projects', 'Filter sidebar views by project', 'Global view when no filter is active'],
   },
+  activity: {
+    icon: 'clock',
+    title: 'Activity',
+    description: 'Audit trail of all entity mutations across the system.',
+    features: ['Track agent, task, and connector changes', 'Filter by entity type and action', 'Real-time updates via WebSocket', 'Relative timestamps'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {

package/src/components/tasks/task-board.tsx

@@ -18,16 +18,40 @@ export function TaskBoard() {
   const agents = useAppStore((s) => s.agents)
   const showArchived = useAppStore((s) => s.showArchivedTasks)
   const setShowArchived = useAppStore((s) => s.setShowArchivedTasks)
-  const [filterAgentId, setFilterAgentId] = useState<string>('')
+  // URL-based filter state
+  const [filterAgentId, setFilterAgentId] = useState<string>(() => {
+    if (typeof window === 'undefined') return ''
+    return new URLSearchParams(window.location.search).get('agent') || ''
+  })
+  const [filterTag, setFilterTag] = useState<string>(() => {
+    if (typeof window === 'undefined') return ''
+    return new URLSearchParams(window.location.search).get('tag') || ''
+  })
+
+  // Sync filters to URL
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const params = new URLSearchParams()
+    if (filterAgentId) params.set('agent', filterAgentId)
+    if (filterTag) params.set('tag', filterTag)
+    const qs = params.toString()
+    const newUrl = `${window.location.pathname}${qs ? `?${qs}` : ''}`
+    window.history.replaceState(null, '', newUrl)
+  }, [filterAgentId, filterTag])
 
   useEffect(() => { loadTasks(); loadAgents() }, [])
   useWs('tasks', loadTasks, 5000)
 
+  // Collect all unique tags across tasks
+  const allTags = Array.from(new Set(Object.values(tasks).flatMap((t) => t.tags || []))).sort()
+
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
   const tasksByStatus = (status: BoardTaskStatus) =>
     Object.values(tasks)
-      .filter((t) => t.status === status && (!filterAgentId || t.agentId === filterAgentId))
+      .filter((t) => t.status === status
+        && (!filterAgentId || t.agentId === filterAgentId)
+        && (!filterTag || (t.tags && t.tags.includes(filterTag))))
       .sort((a, b) => b.updatedAt - a.updatedAt)
 
   const handleDrop = useCallback(async (taskId: string, newStatus: BoardTaskStatus) => {
@@ -59,6 +83,20 @@ export function TaskBoard() {
               <option key={a.id} value={a.id}>{a.name}</option>
             ))}
           </select>
+          {allTags.length > 0 && (
+            <select
+              value={filterTag}
+              onChange={(e) => setFilterTag(e.target.value)}
+              className="px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03] appearance-none"
+              style={{ fontFamily: 'inherit', minWidth: 110 }}
+            >
+              <option value="">All Tags</option>
+              {allTags.map((tag) => (
+                <option key={tag} value={tag}>{tag}</option>
+              ))}
+            </select>
+          )}
           <button
             onClick={() => setShowArchived(!showArchived)}
             className={`px-4 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border

package/src/components/tasks/task-card.tsx

@@ -4,7 +4,7 @@ import { useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { updateTask, archiveTask } from '@/lib/tasks'
-import type { BoardTask, BoardTaskStatus } from '@/types'
+import type { BoardTask } from '@/types'
 
 function timeAgo(ts: number) {
   const diff = Date.now() - ts
@@ -25,6 +25,14 @@ export function TaskCard({ task }: { task: BoardTask }) {
 
   const agent = agents[task.agentId]
 
+  const isBlocked = Array.isArray(task.blockedBy) && task.blockedBy.length > 0
+  const isOverdue = task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
+  const borderColor = isBlocked ? 'border-l-rose-500'
+    : task.pendingApproval ? 'border-l-amber-500'
+    : task.status === 'running' ? 'border-l-emerald-500'
+    : task.status === 'failed' ? 'border-l-red-500'
+    : 'border-l-transparent'
+
   const handleQueue = async (e: React.MouseEvent) => {
     e.stopPropagation()
     await updateTask(task.id, { status: 'queued' })
@@ -64,17 +72,47 @@ export function TaskCard({ task }: { task: BoardTask }) {
         setEditingTaskId(task.id)
         setTaskSheetOpen(true)
       }}
-      className={`p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 cursor-grab active:cursor-grabbing
+      className={`p-4 rounded-[14px] border border-white/[0.06] border-l-[3px] ${borderColor} bg-surface hover:bg-surface-2 cursor-grab active:cursor-grabbing
         transition-all group ${dragging ? 'opacity-40 scale-[0.97]' : ''}`}
     >
       <div className="flex items-start gap-3 mb-3">
+        {isBlocked && (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-rose-400 shrink-0 mt-0.5">
+            <title>{`Blocked by ${task.blockedBy?.length} task(s)`}</title>
+            <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        )}
         <h4 className="flex-1 text-[14px] font-600 text-text leading-[1.4] line-clamp-2">{task.title}</h4>
+        {isBlocked && (
+          <span className="px-1.5 py-0.5 rounded-[5px] bg-rose-500/10 text-rose-400 text-[10px] font-600 shrink-0">
+            {task.blockedBy?.length}
+          </span>
+        )}
       </div>
 
       {task.description && (
         <p className="text-[12px] text-text-3 line-clamp-2 mb-3">{task.description}</p>
       )}
 
+      {/* Tags */}
+      {task.tags && task.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-3">
+          {task.tags.map((tag) => (
+            <span key={tag} className="px-1.5 py-0.5 rounded-[5px] bg-indigo-500/10 text-indigo-400 text-[10px] font-600">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Due date */}
+      {task.dueAt && (
+        <p className={`text-[11px] mb-3 font-600 ${isOverdue ? 'text-red-400' : 'text-text-3/60'}`}>
+          Due {new Date(task.dueAt).toLocaleDateString([], { month: 'short', day: 'numeric' })}
+          {isOverdue && ' (overdue)'}
+        </p>
+      )}
+
       {task.images && task.images.length > 0 && (
         <div className="flex gap-1.5 mb-3 overflow-x-auto">
           {task.images.slice(0, 3).map((url, i) => (