@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/secrets/secret-sheet.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
 
 const inputClass = 'w-full px-4 py-3 rounded-[14px] bg-bg border border-white/[0.06] text-text text-[14px] outline-none focus:border-accent-bright/40 transition-colors placeholder:text-text-3/70'
@@ -25,7 +26,7 @@ export function SecretSheet() {
   const [saving, setSaving] = useState(false)
 
   const editing = editingId ? secrets[editingId] : null
-  const orchestrators = Object.values(agents).filter((p) => p.isOrchestrator)
+  const agentList = Object.values(agents)
 
   useEffect(() => {
     if (open) loadAgents()
@@ -74,8 +75,8 @@ export function SecretSheet() {
       }
       await loadSecrets()
       handleClose()
-    } catch (err: any) {
-      console.error('Failed to save secret:', err.message)
+    } catch (err: unknown) {
+      console.error('Failed to save secret:', err instanceof Error ? err.message : String(err))
     } finally {
       setSaving(false)
     }
@@ -87,11 +88,21 @@ export function SecretSheet() {
       await api('DELETE', `/secrets/${editing.id}`)
       await loadSecrets()
       handleClose()
-    } catch (err: any) {
-      console.error('Failed to delete secret:', err.message)
+    } catch (err: unknown) {
+      console.error('Failed to delete secret:', err instanceof Error ? err.message : String(err))
     }
   }
 
+  const toggleAgent = (id: string) => {
+    setAgentIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])
+  }
+
+  const scopeHelperText = scope === 'global'
+    ? 'This secret will be accessible to all agents'
+    : agentIds.length === 0
+      ? 'Select which agents can access this secret'
+      : `${agentIds.length} agent(s) selected`
+
   return (
     <BottomSheet open={open} onClose={handleClose}>
       <div className="space-y-5">
@@ -125,30 +136,42 @@ export function SecretSheet() {
                 }`}
                 style={{ fontFamily: 'inherit' }}
               >
-                {s === 'global' ? 'All Orchestrators' : 'Specific'}
+                {s === 'global' ? 'Global' : 'Specific'}
               </button>
             ))}
           </div>
+          <p className="text-[11px] text-text-3/60 mt-1.5 pl-1">{scopeHelperText}</p>
         </div>
 
-        {scope === 'agent' && orchestrators.length > 0 && (
+        {scope === 'agent' && (
           <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Orchestrators</label>
-            <div className="flex flex-wrap gap-2">
-              {orchestrators.map((p) => (
-                <button
-                  key={p.id}
-                  onClick={() => setAgentIds((prev) => prev.includes(p.id) ? prev.filter((x) => x !== p.id) : [...prev, p.id])}
-                  className={`px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border ${
-                    agentIds.includes(p.id)
-                      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                      : 'bg-bg border-white/[0.06] text-text-3 hover:text-text-2'
-                  }`}
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  {p.name}
-                </button>
-              ))}
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Agents</label>
+            <div className="max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.06] bg-white/[0.03]">
+              {agentList.length === 0 ? (
+                <p className="p-3 text-[12px] text-text-3">No agents available</p>
+              ) : (
+                agentList.map((agent) => {
+                  const selected = agentIds.includes(agent.id)
+                  return (
+                    <button
+                      key={agent.id}
+                      onClick={() => toggleAgent(agent.id)}
+                      className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-all cursor-pointer ${
+                        selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
+                      }`}
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
+                      {selected && (
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </button>
+                  )
+                })
+              )}
             </div>
           </div>
         )}
@@ -168,7 +191,7 @@ export function SecretSheet() {
           <button
             onClick={handleSave}
             disabled={saving || !name.trim() || (!editing && !value.trim())}
-            className="px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+            className="px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
             style={{ fontFamily: 'inherit' }}
           >
             {saving ? 'Saving...' : editing ? 'Update' : 'Save'}

package/src/components/secrets/secrets-list.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
 
 interface Props {
@@ -37,7 +38,7 @@ export function SecretsList({ inSidebar }: Props) {
           </svg>
         </div>
         <p className="text-[13px] text-text-3 mb-1 font-600">No secrets yet</p>
-        <p className="text-[12px] text-text-3/60">Add API keys & credentials for orchestrators</p>
+        <p className="text-[12px] text-text-3/60">Add API keys & credentials for your agents</p>
         <button
           onClick={() => { setEditingSecretId(null); setSecretSheetOpen(true) }}
           className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
@@ -54,11 +55,11 @@ export function SecretsList({ inSidebar }: Props) {
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
         {secretList.map((secret) => {
           const scopeLabel = secret.scope === 'global'
-            ? 'All orchestrators'
-            : `${secret.agentIds.length} orchestrator(s)`
-          const scopedNames = secret.scope === 'agent'
-            ? secret.agentIds.map((id) => agents[id]?.name).filter(Boolean).join(', ')
-            : null
+            ? 'Global'
+            : `${secret.agentIds.length} agent(s)`
+          const scopedAgents = secret.scope === 'agent'
+            ? secret.agentIds.map((id) => agents[id]).filter(Boolean)
+            : []
           return (
             <button
               key={secret.id}
@@ -97,8 +98,17 @@ export function SecretsList({ inSidebar }: Props) {
                   {scopeLabel}
                 </span>
               </div>
-              {scopedNames && (
-                <div className="text-[10px] text-text-3/50 mt-1 pl-[22px] truncate">{scopedNames}</div>
+              {scopedAgents.length > 0 && (
+                <div className="flex items-center gap-1.5 mt-1.5 pl-[22px]">
+                  <div className="flex items-center -space-x-1.5">
+                    {scopedAgents.slice(0, 5).map((agent) => (
+                      <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                    ))}
+                  </div>
+                  {scopedAgents.length > 5 && (
+                    <span className="text-[10px] font-600 text-text-3/60 ml-0.5">+{scopedAgents.length - 5}</span>
+                  )}
+                </div>
               )}
             </button>
           )

package/src/components/sessions/new-session-sheet.tsx

@@ -8,7 +8,11 @@ import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { DirBrowser } from '@/components/shared/dir-browser'
 import { TOOL_LABELS, TOOL_DESCRIPTIONS } from '@/components/chat/tool-call-bubble'
 import { ModelCombobox } from '@/components/shared/model-combobox'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { SheetFooter } from '@/components/shared/sheet-footer'
+import { inputClass } from '@/components/shared/form-styles'
 import type { ProviderType, SessionTool } from '@/types'
+import { SectionLabel } from '@/components/shared/section-label'
 
 export function NewSessionSheet() {
   const open = useAppStore((s) => s.newSessionOpen)
@@ -61,14 +65,14 @@ export function NewSessionSheet() {
       // Auto-select last used agent, or default agent if no history
       const agentsList = Object.values(agents)
       const lastAgentId = typeof window !== 'undefined' ? localStorage.getItem('swarmclaw-last-agent') : null
-      const lastAgent = lastAgentId ? agentsList.find((a: any) => a.id === lastAgentId) : null
-      const defaultAgent = lastAgent || agentsList.find((a: any) => a.id === 'default') || agentsList[0]
+      const lastAgent = lastAgentId ? agentsList.find((a) => a.id === lastAgentId) : null
+      const defaultAgent = lastAgent || agentsList.find((a) => a.id === 'default') || agentsList[0]
       if (defaultAgent) {
-        setSelectedAgentId((defaultAgent as any).id)
-        setProvider((defaultAgent as any).provider || 'claude-cli')
-        setModel((defaultAgent as any).model || '')
-        setCredentialId((defaultAgent as any).credentialId || null)
-        if ((defaultAgent as any).apiEndpoint) setEndpoint((defaultAgent as any).apiEndpoint)
+        setSelectedAgentId(defaultAgent.id)
+        setProvider(defaultAgent.provider || 'claude-cli')
+        setModel(defaultAgent.model || '')
+        setCredentialId(defaultAgent.credentialId || null)
+        if (defaultAgent.apiEndpoint) setEndpoint(defaultAgent.apiEndpoint)
       } else {
         setSelectedAgentId(null)
       }
@@ -168,8 +172,6 @@ export function NewSessionSheet() {
     return true
   }
 
-  const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
-
   return (
     <BottomSheet open={open} onClose={onClose} wide>
       {/* Header */}
@@ -180,9 +182,7 @@ export function NewSessionSheet() {
 
       {/* Name */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Chat Name
-        </label>
+        <SectionLabel>Chat Name</SectionLabel>
         <input
           type="text"
           value={name}
@@ -196,20 +196,14 @@ export function NewSessionSheet() {
       {/* Agent (optional) */}
       {Object.keys(agents).length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            Agent <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
-          </label>
-          <select
-            value={selectedAgentId || ''}
-            onChange={(e) => handleSelectAgent(e.target.value || null)}
-            className={`${inputClass} appearance-none cursor-pointer`}
-            style={{ fontFamily: 'inherit' }}
-          >
-            <option value="">None — manual configuration</option>
-            {Object.values(agents).map((p) => (
-              <option key={p.id} value={p.id}>{p.name}{p.isOrchestrator ? ' (Orchestrator)' : ''}</option>
-            ))}
-          </select>
+          <SectionLabel>Agent <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span></SectionLabel>
+          <AgentPickerList
+            agents={Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))}
+            selected={selectedAgentId || ''}
+            onSelect={(id) => handleSelectAgent(id)}
+            noneOption={{ label: 'None — manual config', onSelect: () => handleSelectAgent(null) }}
+            showOrchBadge={true}
+          />
         </div>
       )}
 
@@ -218,9 +212,7 @@ export function NewSessionSheet() {
         <>
           {/* Provider */}
           <div className="mb-8">
-            <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-              Provider
-            </label>
+            <SectionLabel>Provider</SectionLabel>
             <div className="grid grid-cols-3 gap-3">
               {providers.map((p) => (
                 <button
@@ -242,9 +234,7 @@ export function NewSessionSheet() {
           {/* Ollama Mode Toggle */}
           {provider === 'ollama' && (
             <div className="mb-8">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-                Mode
-              </label>
+              <SectionLabel>Mode</SectionLabel>
               <div className="flex p-1 rounded-[14px] bg-surface border border-white/[0.06]">
                 {(['local', 'cloud'] as const).map((mode) => (
                   <button
@@ -267,9 +257,7 @@ export function NewSessionSheet() {
           {/* Model */}
           {currentProvider && currentProvider.models.length > 0 && (
             <div className="mb-8">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-                Model
-              </label>
+              <SectionLabel>Model</SectionLabel>
               <ModelCombobox
                 providerId={currentProvider.id}
                 value={model}
@@ -284,9 +272,7 @@ export function NewSessionSheet() {
           {/* API Key */}
           {(currentProvider?.requiresApiKey || (currentProvider?.optionalApiKey && ollamaMode === 'cloud')) && (
             <div className="mb-8">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-                API Key
-              </label>
+              <SectionLabel>API Key</SectionLabel>
               {providerCredentials.length > 0 && !addingKey ? (
                 <select
                   value={credentialId || ''}
@@ -336,7 +322,7 @@ export function NewSessionSheet() {
                     <button
                       onClick={handleAddKey}
                       disabled={!newKeyValue.trim()}
-                      className="flex-1 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+                      className="flex-1 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
                       style={{ fontFamily: 'inherit' }}
                     >
                       Save Key
@@ -350,9 +336,7 @@ export function NewSessionSheet() {
           {/* Endpoint — show for providers that require it (Ollama local, OpenClaw) */}
           {currentProvider?.requiresEndpoint && (provider === 'openclaw' || (provider === 'ollama' && ollamaMode === 'local')) && (
             <div className="mb-8">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-                {provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}
-              </label>
+              <SectionLabel>{provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}</SectionLabel>
               <input
                 type="text"
                 value={endpoint}
@@ -433,9 +417,7 @@ export function NewSessionSheet() {
 
       {/* Project */}
       <div className="mb-10">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Directory {provider !== 'claude-cli' && <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>}
-        </label>
+        <SectionLabel>Directory {provider !== 'claude-cli' && <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>}</SectionLabel>
         <DirBrowser
           value={selectedDir}
           file={selectedFile}
@@ -452,26 +434,12 @@ export function NewSessionSheet() {
       </div>
 
       {/* Actions */}
-      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
-        <button
-          onClick={onClose}
-          className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer
-            hover:bg-surface-2 transition-all duration-200"
-          style={{ fontFamily: 'inherit' }}
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleCreate}
-          disabled={!canCreate()}
-          className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer
-            active:scale-[0.97] disabled:opacity-30 transition-all duration-200
-            shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
-          style={{ fontFamily: 'inherit' }}
-        >
-          Create Chat
-        </button>
-      </div>
+      <SheetFooter
+        onCancel={onClose}
+        onSave={handleCreate}
+        saveLabel="Create Chat"
+        saveDisabled={!canCreate()}
+      />
     </BottomSheet>
   )
 }

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

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { ConnectorPlatformBadge, getSessionConnector } from '@/components/shared/connector-platform-icon'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 function timeAgo(ts: number): string {
   if (!ts) return ''
@@ -38,6 +39,9 @@ export function SessionCard({ session, active, onClick }: Props) {
   const agents = useAppStore((s) => s.agents)
   const connectors = useAppStore((s) => s.connectors)
   const streamingSessionId = useChatStore((s) => s.streamingSessionId)
+  const streamPhase = useChatStore((s) => s.streamPhase)
+  const streamToolName = useChatStore((s) => s.streamToolName)
+  const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
   const isTyping = streamingSessionId === session.id
 
   const handleDelete = async (e: React.MouseEvent) => {
@@ -56,14 +60,16 @@ export function SessionCard({ session, active, onClick }: Props) {
   const agent = session.agentId ? agents[session.agentId] : null
   const connector = getSessionConnector(session, connectors)
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
+  const explicitOptIn = session.heartbeatEnabled === true || agent?.heartbeatEnabled === true
   const intervalRaw = session.heartbeatIntervalSec ?? agent?.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? 120
   const intervalNum = typeof intervalRaw === 'number' ? intervalRaw : Number.parseInt(String(intervalRaw), 10)
   const intervalEnabled = Number.isFinite(intervalNum) ? intervalNum > 0 : true
   const heartbeatEnabled =
-    loopIsOngoing
+    (loopIsOngoing || explicitOptIn)
     && (session.tools?.length ?? 0) > 0
     && intervalEnabled
-    && (session.heartbeatEnabled === true || (session.heartbeatEnabled !== false && agent?.heartbeatEnabled !== false))
+    && session.heartbeatEnabled !== false
+    && agent?.heartbeatEnabled !== false
 
   return (
     <div
@@ -78,17 +84,13 @@ export function SessionCard({ session, active, onClick }: Props) {
         <div className="absolute left-0 top-3.5 bottom-3.5 w-[2.5px] rounded-full bg-accent-bright" />
       )}
       <div className="flex items-center gap-2.5">
-        {session.active && (
-          <span className="inline-block w-[6px] h-[6px] rounded-full bg-success shrink-0"
-            style={{ animation: 'pulse 2s ease-in-out infinite' }} />
-        )}
-        {heartbeatEnabled && (
-          <span
-            className="inline-flex items-center justify-center w-[10px] h-[10px] rounded-full bg-emerald-400/15 border border-emerald-400/30 shrink-0"
-            title="Heartbeat enabled"
-          >
-            <span className="w-[4px] h-[4px] rounded-full bg-emerald-400" />
-          </span>
+        {agent && (
+          <div className="relative shrink-0">
+            <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+            {(heartbeatEnabled || session.active) && (
+              <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 ring-2 ring-[#0f0f1a]" />
+            )}
+          </div>
         )}
         {connector && (
           <ConnectorPlatformBadge
@@ -100,6 +102,20 @@ export function SessionCard({ session, active, onClick }: Props) {
           />
         )}
         <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{session.name}</span>
+        {session.mainLoopState?.status && session.mainLoopState.status !== 'idle' && (
+          <span className={`shrink-0 flex items-center gap-1 text-[9px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[5px] ${
+            session.mainLoopState.status === 'progress' ? 'text-blue-400/90 bg-blue-400/[0.08]'
+            : session.mainLoopState.status === 'blocked' ? 'text-amber-400/90 bg-amber-400/[0.08]'
+            : 'text-emerald-400/90 bg-emerald-400/[0.08]'
+          }`}>
+            <span className={`w-[5px] h-[5px] rounded-full ${
+              session.mainLoopState.status === 'progress' ? 'bg-blue-400'
+              : session.mainLoopState.status === 'blocked' ? 'bg-amber-400'
+              : 'bg-emerald-400'
+            }`} />
+            {session.mainLoopState.status}
+          </span>
+        )}
         {session.sessionType === 'orchestrated' && (
           <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px]">
             AI
@@ -110,6 +126,17 @@ export function SessionCard({ session, active, onClick }: Props) {
             {providerLabel}
           </span>
         )}
+        {(() => {
+          const lastRead = lastReadTimestamps[session.id] || 0
+          const unread = (session.messages || []).filter(
+            (m) => m.role === 'assistant' && (m.time || 0) > lastRead,
+          ).length
+          return unread > 0 ? (
+            <span className="shrink-0 min-w-[18px] h-[18px] flex items-center justify-center rounded-full bg-accent-bright text-white text-[10px] font-600 px-1">
+              {unread > 99 ? '99+' : unread}
+            </span>
+          ) : null
+        })()}
         <span className="text-[11px] text-text-3/70 shrink-0 tabular-nums font-mono">
           {timeAgo(session.lastActiveAt)}
         </span>
@@ -134,7 +161,11 @@ export function SessionCard({ session, active, onClick }: Props) {
             <span className="w-1 h-1 rounded-full bg-accent-bright/70 animate-bounce [animation-delay:150ms]" />
             <span className="w-1 h-1 rounded-full bg-accent-bright/70 animate-bounce [animation-delay:300ms]" />
           </span>
-          Typing...
+          {streamPhase === 'tool' && streamToolName
+            ? `Using ${streamToolName}...`
+            : streamPhase === 'responding'
+              ? 'Responding...'
+              : 'Thinking...'}
         </div>
       ) : (
         <div className="text-[13px] text-text-2/50 truncate mt-1 leading-relaxed">{preview}</div>

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

@@ -5,6 +5,9 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { SessionCard } from './session-card'
 import { fetchMessages } from '@/lib/sessions'
+import { toast } from 'sonner'
+import { Skeleton } from '@/components/shared/skeleton'
+import { EmptyState } from '@/components/shared/empty-state'
 
 interface Props {
   inSidebar?: boolean
@@ -24,10 +27,16 @@ export function SessionList({ inSidebar, onSelect }: Props) {
   const setNewSessionOpen = useAppStore((s) => s.setNewSessionOpen)
   const clearSessions = useAppStore((s) => s.clearSessions)
   const togglePinSession = useAppStore((s) => s.togglePinSession)
+  const markChatRead = useAppStore((s) => s.markChatRead)
   const setMessages = useChatStore((s) => s.setMessages)
   const [search, setSearch] = useState('')
   const [typeFilter, setTypeFilter] = useState<SessionFilter>('all')
   const [sortMode, setSortMode] = useState<SortMode>('lastActive')
+  const [loaded, setLoaded] = useState(Object.keys(sessions).length > 0)
+
+  useEffect(() => {
+    if (Object.keys(sessions).length > 0 && !loaded) setLoaded(true)
+  }, [sessions, loaded])
 
   useEffect(() => {
     void loadConnectors()
@@ -67,6 +76,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
 
   const handleSelect = async (id: string) => {
     setCurrentSession(id)
+    markChatRead(id)
     if (typeof window !== 'undefined') {
       window.dispatchEvent(new CustomEvent('swarmclaw:scroll-bottom'))
     }
@@ -82,27 +92,33 @@ export function SessionList({ inSidebar, onSelect }: Props) {
 
   // Truly empty — no sessions at all for this user
   if (!allUserSessions.length) {
+    // Show skeleton cards while data is loading
+    if (!loaded) {
+      return (
+        <div className="flex-1 flex flex-col gap-1 px-2 pt-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="py-3 px-4 rounded-[14px]">
+              <div className="flex items-center gap-2.5">
+                <Skeleton className="rounded-full" width={28} height={28} />
+                <Skeleton className="rounded-[6px]" width={140} height={14} />
+              </div>
+              <Skeleton className="rounded-[6px] mt-2" width="70%" height={12} />
+            </div>
+          ))}
+        </div>
+      )
+    }
     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">
+      <EmptyState
+        icon={
           <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 chats 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 Chat
-          </button>
-        )}
-      </div>
+        }
+        title="No chats yet"
+        subtitle="Create one to start chatting"
+        action={!inSidebar ? { label: '+ New Chat', onClick: () => setNewSessionOpen(true) } : undefined}
+      />
     )
   }
 
@@ -126,6 +142,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
             onClick={async () => {
               if (!window.confirm(`Delete ${filtered.length} chat${filtered.length === 1 ? '' : 's'}?`)) return
               await clearSessions(filtered.map((s) => s.id))
+              toast.success(`${filtered.length} chat${filtered.length === 1 ? '' : 's'} deleted`)
             }}
             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"
@@ -175,7 +192,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
                 onClick={() => handleSelect(s.id)}
               />
               <button
-                onClick={(e) => { e.stopPropagation(); togglePinSession(s.id) }}
+                onClick={(e) => { e.stopPropagation(); togglePinSession(s.id); toast.success(s.pinned ? 'Chat unpinned' : 'Chat pinned') }}
                 aria-label={s.pinned ? 'Unpin chat' : 'Pin chat'}
                 className={`absolute top-2 right-2 p-1 rounded-[6px] border-none cursor-pointer transition-all
                   ${s.pinned