@swarmclawai/swarmclaw 0.6.6 → 0.6.7

package/src/components/chatrooms/chatroom-sheet.tsx

@@ -6,9 +6,145 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { toast } from 'sonner'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import type { Agent } from '@/types'
+import type { Agent, ChatroomRoutingRule } from '@/types'
 import { CheckIcon } from '@/components/shared/check-icon'
 
+function genRuleId(): string {
+  return `rule-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+interface RuleFormState {
+  type: 'keyword' | 'capability'
+  pattern: string
+  keywords: string
+  agentId: string
+  priority: number
+}
+
+const emptyRuleForm: RuleFormState = {
+  type: 'keyword',
+  pattern: '',
+  keywords: '',
+  agentId: '',
+  priority: 10,
+}
+
+function RoutingRuleForm({
+  rule,
+  memberAgents,
+  onSave,
+  onCancel,
+}: {
+  rule: RuleFormState
+  memberAgents: Agent[]
+  onSave: (form: RuleFormState) => void
+  onCancel: () => void
+}) {
+  const [form, setForm] = useState<RuleFormState>(rule)
+
+  return (
+    <div className="p-3 rounded-[8px] bg-white/[0.04] border border-white/[0.08] space-y-3">
+      <div className="flex gap-2">
+        {(['keyword', 'capability'] as const).map((t) => (
+          <button
+            key={t}
+            type="button"
+            onClick={() => setForm((f) => ({ ...f, type: t }))}
+            className={`flex-1 py-1.5 text-[11px] font-600 capitalize rounded-[6px] cursor-pointer transition-all ${
+              form.type === t
+                ? 'bg-accent-soft text-accent-bright'
+                : 'bg-white/[0.04] text-text-3 hover:text-text-2'
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {form.type === 'keyword' && (
+        <>
+          <div>
+            <label className="block text-[11px] font-600 text-text-3 mb-1">Keywords (comma-separated)</label>
+            <input
+              type="text"
+              value={form.keywords}
+              onChange={(e) => setForm((f) => ({ ...f, keywords: e.target.value }))}
+              placeholder="e.g. deploy, devops, infrastructure"
+              className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] font-600 text-text-3 mb-1">Regex pattern (optional)</label>
+            <input
+              type="text"
+              value={form.pattern}
+              onChange={(e) => setForm((f) => ({ ...f, pattern: e.target.value }))}
+              placeholder="e.g. deploy|release|ship"
+              className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+          </div>
+        </>
+      )}
+
+      {form.type === 'capability' && (
+        <div>
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Capability pattern</label>
+          <input
+            type="text"
+            value={form.pattern}
+            onChange={(e) => setForm((f) => ({ ...f, pattern: e.target.value }))}
+            placeholder="e.g. frontend, research, devops"
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Route to agent</label>
+          <select
+            value={form.agentId}
+            onChange={(e) => setForm((f) => ({ ...f, agentId: e.target.value }))}
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text focus:outline-none focus:border-accent-bright/40"
+          >
+            <option value="">Select agent...</option>
+            {memberAgents.map((a) => (
+              <option key={a.id} value={a.id}>{a.name}</option>
+            ))}
+          </select>
+        </div>
+        <div className="w-20">
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Priority</label>
+          <input
+            type="number"
+            value={form.priority}
+            onChange={(e) => setForm((f) => ({ ...f, priority: parseInt(e.target.value, 10) || 0 }))}
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-2 justify-end">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1.5 text-[11px] font-600 text-text-3 hover:text-text-2 cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={() => onSave(form)}
+          disabled={!form.agentId || (form.type === 'keyword' && !form.keywords.trim() && !form.pattern.trim()) || (form.type === 'capability' && !form.pattern.trim())}
+          className="px-3 py-1.5 text-[11px] font-600 bg-accent-bright text-white rounded-[6px] hover:bg-accent-bright/90 disabled:opacity-50 cursor-pointer"
+        >
+          Save Rule
+        </button>
+      </div>
+    </div>
+  )
+}
+
 export function ChatroomSheet() {
   const open = useChatroomStore((s) => s.chatroomSheetOpen)
   const editingId = useChatroomStore((s) => s.editingChatroomId)
@@ -25,7 +161,10 @@ export function ChatroomSheet() {
   const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([])
   const [chatMode, setChatMode] = useState<'sequential' | 'parallel'>('sequential')
   const [autoAddress, setAutoAddress] = useState(false)
+  const [routingRules, setRoutingRules] = useState<ChatroomRoutingRule[]>([])
   const [saving, setSaving] = useState(false)
+  const [addingRule, setAddingRule] = useState(false)
+  const [editingRuleId, setEditingRuleId] = useState<string | null>(null)
 
   const editing = editingId ? chatrooms[editingId] : null
 
@@ -36,24 +175,36 @@ export function ChatroomSheet() {
       setSelectedAgentIds([...editing.agentIds])
       setChatMode(editing.chatMode || 'sequential')
       setAutoAddress(editing.autoAddress || false)
+      setRoutingRules([...(editing.routingRules || [])])
     } else {
       setName('')
       setDescription('')
       setSelectedAgentIds([])
       setChatMode('sequential')
       setAutoAddress(false)
+      setRoutingRules([])
     }
+    setAddingRule(false)
+    setEditingRuleId(null)
   }, [editing, open])
 
   const handleSave = async () => {
     if (!name.trim() || saving) return
     setSaving(true)
     try {
+      const payload = {
+        name,
+        description,
+        agentIds: selectedAgentIds,
+        chatMode,
+        autoAddress,
+        routingRules: routingRules.length > 0 ? routingRules : undefined,
+      }
       if (editing) {
-        await updateChatroom(editing.id, { name, description, agentIds: selectedAgentIds, chatMode, autoAddress })
+        await updateChatroom(editing.id, payload)
         toast.success('Chatroom saved')
       } else {
-        const chatroom = await createChatroom({ name, description, agentIds: selectedAgentIds, chatMode, autoAddress })
+        const chatroom = await createChatroom(payload)
         setCurrentChatroom(chatroom.id)
         toast.success('Chatroom created')
       }
@@ -81,10 +232,53 @@ export function ChatroomSheet() {
     )
   }
 
+  const handleAddRule = (form: RuleFormState) => {
+    const rule: ChatroomRoutingRule = {
+      id: genRuleId(),
+      type: form.type,
+      agentId: form.agentId,
+      priority: form.priority,
+      ...(form.pattern.trim() ? { pattern: form.pattern.trim() } : {}),
+      ...(form.type === 'keyword' && form.keywords.trim()
+        ? { keywords: form.keywords.split(',').map((k) => k.trim()).filter(Boolean) }
+        : {}),
+    }
+    setRoutingRules((prev) => [...prev, rule].sort((a, b) => a.priority - b.priority))
+    setAddingRule(false)
+  }
+
+  const handleEditRule = (form: RuleFormState) => {
+    setRoutingRules((prev) =>
+      prev.map((r) =>
+        r.id === editingRuleId
+          ? {
+              ...r,
+              type: form.type,
+              agentId: form.agentId,
+              priority: form.priority,
+              pattern: form.pattern.trim() || undefined,
+              keywords:
+                form.type === 'keyword' && form.keywords.trim()
+                  ? form.keywords.split(',').map((k) => k.trim()).filter(Boolean)
+                  : undefined,
+            }
+          : r,
+      ).sort((a, b) => a.priority - b.priority),
+    )
+    setEditingRuleId(null)
+  }
+
+  const removeRule = (ruleId: string) => {
+    setRoutingRules((prev) => prev.filter((r) => r.id !== ruleId))
+  }
+
   const agentList = Object.values(agents).filter(
     (a: Agent) => !a.trashedAt
   ) as Agent[]
 
+  const memberAgents = agentList.filter((a) => selectedAgentIds.includes(a.id))
+  const sortedRules = [...routingRules].sort((a, b) => a.priority - b.priority)
+
   return (
     <BottomSheet open={open} onClose={() => setChatroomSheetOpen(false)}>
       <div className="p-6 max-w-[560px] mx-auto">
@@ -189,6 +383,97 @@ export function ChatroomSheet() {
               )}
             </div>
           </div>
+
+          {/* Routing Rules */}
+          <div>
+            <label className="block text-[12px] font-600 text-text-2 mb-1.5">
+              Routing Rules ({sortedRules.length})
+            </label>
+            <p className="text-[11px] text-text-3 mb-2">
+              Route messages to specific agents based on keywords or capabilities. Evaluated before auto-address.
+            </p>
+
+            {sortedRules.length > 0 && (
+              <div className="space-y-2 mb-2">
+                {sortedRules.map((rule) => {
+                  const agent = agents[rule.agentId]
+                  if (editingRuleId === rule.id) {
+                    return (
+                      <RoutingRuleForm
+                        key={rule.id}
+                        rule={{
+                          type: rule.type,
+                          pattern: rule.pattern || '',
+                          keywords: rule.keywords?.join(', ') || '',
+                          agentId: rule.agentId,
+                          priority: rule.priority,
+                        }}
+                        memberAgents={memberAgents}
+                        onSave={handleEditRule}
+                        onCancel={() => setEditingRuleId(null)}
+                      />
+                    )
+                  }
+                  return (
+                    <div
+                      key={rule.id}
+                      className="flex items-center gap-2 px-3 py-2 rounded-[8px] bg-white/[0.04] border border-white/[0.08]"
+                    >
+                      <span className="text-[10px] font-700 text-text-3 bg-white/[0.06] px-1.5 py-0.5 rounded">
+                        P{rule.priority}
+                      </span>
+                      <span className="text-[10px] font-600 text-accent-bright/70 uppercase">
+                        {rule.type}
+                      </span>
+                      <span className="text-[12px] text-text-2 flex-1 truncate">
+                        {rule.type === 'keyword'
+                          ? (rule.keywords?.join(', ') || rule.pattern || '(no match)')
+                          : (rule.pattern || '(no pattern)')}
+                      </span>
+                      <span className="text-[11px] text-text-3 truncate max-w-[100px]">
+                        {agent?.name || 'Unknown'}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setEditingRuleId(rule.id)}
+                        className="text-[11px] text-text-3 hover:text-text-2 cursor-pointer px-1"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removeRule(rule.id)}
+                        className="text-[11px] text-red-400 hover:text-red-300 cursor-pointer px-1"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {addingRule ? (
+              <RoutingRuleForm
+                rule={emptyRuleForm}
+                memberAgents={memberAgents}
+                onSave={handleAddRule}
+                onCancel={() => setAddingRule(false)}
+              />
+            ) : (
+              <button
+                type="button"
+                onClick={() => setAddingRule(true)}
+                disabled={memberAgents.length === 0}
+                className="w-full py-2 rounded-[8px] border border-dashed border-white/[0.12] text-[12px] font-600 text-text-3 hover:text-text-2 hover:border-white/[0.2] cursor-pointer transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                + Add Rule
+              </button>
+            )}
+            {memberAgents.length === 0 && (
+              <p className="text-[11px] text-text-3 mt-1">Add members first to create routing rules.</p>
+            )}
+          </div>
         </div>
 
         <div className="flex items-center gap-3 mt-6">

package/src/components/chatrooms/chatroom-view.tsx

@@ -10,13 +10,35 @@ import { ChatroomTypingBar } from './chatroom-typing-bar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { HeartbeatMoment, ActivityMoment, isNotableTool } from '@/components/chat/activity-moment'
-import type { Chatroom, ChatroomMessage, Agent } from '@/types'
+import type { Chatroom, ChatroomMessage, ChatroomMember, Agent } from '@/types'
 
 function navigateToAgent(agentId: string) {
   useAppStore.getState().setActiveView('agents')
   useAppStore.getState().setCurrentAgent(agentId)
 }
 
+function getRoleBadge(role: string) {
+  if (role === 'admin') return { label: 'Admin', className: 'bg-purple-500/20 text-purple-400 border-purple-500/30' }
+  if (role === 'moderator') return { label: 'Mod', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' }
+  return null
+}
+
+function getMemberFromChatroom(chatroom: Chatroom, agentId: string): ChatroomMember | undefined {
+  if (chatroom.members?.length) return chatroom.members.find((m) => m.agentId === agentId)
+  return undefined
+}
+
+function getMemberRole(chatroom: Chatroom, agentId: string): string {
+  const member = getMemberFromChatroom(chatroom, agentId)
+  return member?.role || 'member'
+}
+
+function isAgentMuted(chatroom: Chatroom, agentId: string): boolean {
+  const member = getMemberFromChatroom(chatroom, agentId)
+  if (!member?.mutedUntil) return false
+  return new Date(member.mutedUntil).getTime() > Date.now()
+}
+
 type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
 
 /** Subscribe to a single agent heartbeat topic — one hook call per agent */
@@ -65,6 +87,10 @@ export function ChatroomView() {
   const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
   const setChatroomSheetOpen = useChatroomStore((s) => s.setChatroomSheetOpen)
   const setEditingChatroomId = useChatroomStore((s) => s.setEditingChatroomId)
+  const deleteMessage = useChatroomStore((s) => s.deleteMessage)
+  const muteAgent = useChatroomStore((s) => s.muteAgent)
+  const unmuteAgent = useChatroomStore((s) => s.unmuteAgent)
+  const setMemberRole = useChatroomStore((s) => s.setMemberRole)
   const agents = useAppStore((s) => s.agents) as Record<string, Agent>
   const scrollRef = useRef<HTMLDivElement>(null)
   const [pinsExpanded, setPinsExpanded] = useState(false)
@@ -183,23 +209,37 @@ export function ChatroomView() {
             {chatroom.description ? ` · ${chatroom.description}` : ''}
           </p>
         </div>
-        {/* Member avatars */}
+        {/* Member avatars with role badges */}
         <div className="flex -space-x-1.5 shrink-0">
-          {memberAgents.slice(0, 5).map((agent) => (
-            <Tooltip key={agent.id}>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => navigateToAgent(agent.id)}
-                  className="relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0"
-                >
-                  <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={6}>
-                {agent.name}
-              </TooltipContent>
-            </Tooltip>
-          ))}
+          {memberAgents.slice(0, 5).map((agent) => {
+            const role = getMemberRole(chatroom, agent.id)
+            const badge = getRoleBadge(role)
+            const muted = isAgentMuted(chatroom, agent.id)
+            return (
+              <Tooltip key={agent.id}>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => navigateToAgent(agent.id)}
+                    className={`relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0 ${muted ? 'opacity-40' : ''}`}
+                  >
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                    {badge && (
+                      <span className={`absolute -bottom-1 -right-1 text-[7px] font-700 px-0.5 rounded border ${badge.className}`}>
+                        {badge.label[0]}
+                      </span>
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={6}>
+                  <div className="flex items-center gap-1.5">
+                    <span>{agent.name}</span>
+                    {badge && <span className={`text-[9px] font-600 px-1 py-0.5 rounded border ${badge.className}`}>{badge.label}</span>}
+                    {muted && <span className="text-[9px] text-red-400">Muted</span>}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
           {memberAgents.length > 5 && (
             <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3">
               +{memberAgents.length - 5}
@@ -320,6 +360,11 @@ export function ChatroomView() {
                   onReply={(m: ChatroomMessage) => setReplyingTo(m)}
                   onTogglePin={togglePin}
                   onTransfer={handleTransfer}
+                  onDeleteMessage={(messageId, targetAgentId) => deleteMessage(messageId, targetAgentId)}
+                  onMuteAgent={(agentId) => muteAgent(agentId)}
+                  onUnmuteAgent={(agentId) => unmuteAgent(agentId)}
+                  onSetRole={(agentId, role) => setMemberRole(agentId, role)}
+                  chatroom={chatroom}
                   pinnedMessageIds={pinnedIds}
                   streamingAgentIds={streamingAgentIds}
                   messages={chatroom.messages}

package/src/components/connectors/connector-health.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { api } from '@/lib/api-client'
+import type { ConnectorHealthEvent, ConnectorHealthEventType } from '@/types'
+
+interface HealthResponse {
+  events: ConnectorHealthEvent[]
+  uptimePercent: number
+}
+
+const EVENT_CONFIG: Record<ConnectorHealthEventType, { color: string; label: string }> = {
+  started: { color: 'bg-green-400', label: 'Started' },
+  reconnected: { color: 'bg-green-400', label: 'Reconnected' },
+  stopped: { color: 'bg-white/30', label: 'Stopped' },
+  error: { color: 'bg-red-400', label: 'Error' },
+  disconnected: { color: 'bg-amber-400', label: 'Disconnected' },
+}
+
+function formatTimestamp(ts: string): string {
+  const d = new Date(ts)
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffMin = Math.floor(diffMs / 60_000)
+  const diffHr = Math.floor(diffMs / 3_600_000)
+  const diffDay = Math.floor(diffMs / 86_400_000)
+
+  if (diffMin < 1) return 'just now'
+  if (diffMin < 60) return `${diffMin}m ago`
+  if (diffHr < 24) return `${diffHr}h ago`
+  if (diffDay < 7) return `${diffDay}d ago`
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function uptimeBadgeColor(pct: number): string {
+  if (pct >= 99) return 'bg-green-500/15 text-green-400 border-green-500/20'
+  if (pct >= 95) return 'bg-amber-500/15 text-amber-400 border-amber-500/20'
+  return 'bg-red-500/15 text-red-400 border-red-500/20'
+}
+
+export function ConnectorHealth({ connectorId }: { connectorId: string }) {
+  const [data, setData] = useState<HealthResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      setLoading(true)
+      try {
+        const resp = await api<HealthResponse>('GET', `/connectors/${connectorId}/health`)
+        if (!cancelled) setData(resp)
+      } catch {
+        // ignore fetch errors
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [connectorId])
+
+  if (loading) {
+    return (
+      <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01]">
+        <div className="text-[13px] text-text-3 animate-pulse">Loading health data...</div>
+      </div>
+    )
+  }
+
+  if (!data || data.events.length === 0) {
+    return (
+      <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01]">
+        <div className="text-[13px] text-text-3">No health events recorded yet.</div>
+      </div>
+    )
+  }
+
+  // Show most recent events first (up to 50)
+  const recentEvents = [...data.events].reverse().slice(0, 50)
+
+  return (
+    <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01] space-y-4">
+      {/* Uptime badge */}
+      <div className="flex items-center justify-between">
+        <div className="text-[13px] font-600 text-text-2">Health Timeline</div>
+        <span className={`px-3 py-1 rounded-[8px] text-[12px] font-600 border ${uptimeBadgeColor(data.uptimePercent)}`}>
+          {data.uptimePercent}% uptime
+        </span>
+      </div>
+
+      {/* Timeline */}
+      <div className="relative pl-5">
+        {/* Vertical line */}
+        <div className="absolute left-[7px] top-2 bottom-2 w-px bg-white/[0.08]" />
+
+        <div className="space-y-3">
+          {recentEvents.map((ev) => {
+            const cfg = EVENT_CONFIG[ev.event] ?? { color: 'bg-white/30', label: ev.event }
+            return (
+              <div key={ev.id} className="relative flex items-start gap-3">
+                {/* Dot */}
+                <div className={`absolute left-[-13px] top-[6px] w-[10px] h-[10px] rounded-full ${cfg.color} ring-2 ring-surface shrink-0`} />
+                {/* Content */}
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-600 text-text-2">{cfg.label}</span>
+                    <span className="text-[11px] text-text-3">{formatTimestamp(ev.timestamp)}</span>
+                  </div>
+                  {ev.message && (
+                    <p className="text-[12px] text-text-3/70 mt-0.5 leading-[1.4] break-words">{ev.message}</p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/connectors/connector-sheet.tsx

@@ -13,6 +13,7 @@ import { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { SectionLabel } from '@/components/shared/section-label'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
+import { ConnectorHealth } from '@/components/connectors/connector-health'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -655,6 +656,7 @@ export function ConnectorSheet() {
                   <span key={i} className="flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] bg-accent-soft/50 border border-accent-bright/20 text-[12px] font-mono text-accent-bright">
                     {tag}
                     <button
+                      aria-label={`Remove ${tag}`}
                       onClick={() => {
                         const next = tags.filter((_, j) => j !== i).join(',')
                         setConfig({ ...config, [field.key]: next })
@@ -860,6 +862,13 @@ export function ConnectorSheet() {
         </div>
       )}
 
+      {/* Health timeline (existing connectors only) */}
+      {editing && (
+        <div className="mb-6">
+          <ConnectorHealth connectorId={editing.id} />
+        </div>
+      )}
+
       {/* Actions */}
       <SheetFooter
         onCancel={() => { setOpen(false); setEditingId(null) }}

package/src/components/home/home-view.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
+import { AreaChart, Area, ResponsiveContainer } from 'recharts'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
@@ -85,6 +86,7 @@ export function HomeView() {
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
   const setMessages = useChatStore((s) => s.setMessages)
   const [todayCost, setTodayCost] = useState(0)
+  const [costTrend, setCostTrend] = useState<{ cost: number }[]>([])
 
   const allAgents = Object.values(agents).filter((a) => !a.trashedAt)
   const pinnedAgents = allAgents.filter((a) => a.pinned)
@@ -144,10 +146,11 @@ export function HomeView() {
     void loadSchedules()
     void loadNotifications()
     void loadConnectors()
-    api<{ records: Array<{ estimatedCost: number }> }>('GET', '/usage?range=24h')
+    api<{ records: Array<{ estimatedCost: number }>; timeSeries: Array<{ cost: number }> }>('GET', '/usage?range=7d')
       .then((data) => {
         const total = (data.records || []).reduce((s, r) => s + (r.estimatedCost || 0), 0)
         setTodayCost(total)
+        setCostTrend((data.timeSeries || []).map((pt) => ({ cost: pt.cost })))
       })
       .catch(() => {})
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -196,13 +199,31 @@ export function HomeView() {
         </div>
 
         {/* Quick Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
           <StatCard label="Agents" value={String(agentCount)} />
           <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} />
           <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} />
           <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} />
         </div>
 
+        {/* Cost trend sparkline */}
+        {costTrend.length > 1 && (
+          <div className="mb-10 px-1">
+            <p className="text-[10px] text-text-3/50 uppercase tracking-wider mb-1">7-day cost trend</p>
+            <ResponsiveContainer width="100%" height={60}>
+              <AreaChart data={costTrend} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
+                <defs>
+                  <linearGradient id="costGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#818CF8" stopOpacity={0.3} />
+                    <stop offset="100%" stopColor="#818CF8" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <Area type="monotone" dataKey="cost" stroke="#818CF8" strokeWidth={1.5} fill="url(#costGrad)" dot={false} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
         {/* Notifications banner */}
         {unreadNotifications.length > 0 && (
           <section className="mb-8">