@swarmclawai/swarmclaw 0.6.7 → 0.7.0

package/src/components/projects/project-list.tsx

@@ -88,7 +88,7 @@ export function ProjectList() {
 
   if (!filtered.length && !search) {
     return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
         <div className="w-14 h-14 rounded-[16px] bg-accent-soft flex items-center justify-center mb-1">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-accent-bright">
             <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7-7H4a2 2 0 0 0-2 2v17Z" />
@@ -117,7 +117,7 @@ export function ProjectList() {
   return (
     <div className="flex-1 flex flex-col h-full overflow-hidden">
       {/* Header with search and new button */}
-      <div className="px-5 pt-5 pb-3 shrink-0">
+      <div className="px-5 pt-5 pb-3 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
         <div className="flex items-center justify-between mb-4">
           <div>
             <h2 className="font-display text-[20px] font-700 text-text tracking-[-0.02em]">Projects</h2>
@@ -159,7 +159,7 @@ export function ProjectList() {
       {/* Project cards */}
       <div className="flex-1 overflow-y-auto px-5 pb-5">
         <div className="grid gap-3">
-          {filtered.map((project) => {
+          {filtered.map((project, idx) => {
             const stats = statsMap[project.id] || { agents: 0, tasks: 0, completedTasks: 0, schedules: 0, lastActivity: project.updatedAt }
             const isActive = activeProjectFilter === project.id
             const progressPct = stats.tasks > 0 ? Math.round((stats.completedTasks / stats.tasks) * 100) : 0
@@ -170,11 +170,15 @@ export function ProjectList() {
                 className={`group relative rounded-[14px] border transition-all duration-200 cursor-pointer overflow-hidden
                   ${isActive
                     ? 'bg-white/[0.06] border-accent-bright/30 shadow-[0_0_20px_rgba(99,102,241,0.08)]'
-                    : 'bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05] hover:border-white/[0.1]'}`}
+                    : 'bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05] hover:border-white/[0.1] hover:scale-[1.01]'}`}
                 onClick={() => setActiveProjectFilter(isActive ? null : project.id)}
+                style={{
+                  animation: 'fade-up 0.4s var(--ease-spring) both',
+                  animationDelay: `${0.1 + idx * 0.03}s`
+                }}
               >
                 {/* Color accent stripe */}
-                <div className="absolute left-0 top-0 bottom-0 w-1 rounded-l-[14px]" style={{ backgroundColor: project.color || '#6B7280' }} />
+                <div className="absolute left-0 top-0 bottom-0 w-1 rounded-l-[14px]" style={{ backgroundColor: project.color || '#6B7280', animation: 'spring-in 0.6s var(--ease-spring)' }} />
 
                 <div className="pl-5 pr-4 py-4">
                   <div className="flex items-start justify-between gap-3">
@@ -182,7 +186,7 @@ export function ProjectList() {
                       <div className="flex items-center gap-2">
                         <h3 className="font-display text-[14px] font-600 text-text truncate">{project.name}</h3>
                         {isActive && (
-                          <span className="shrink-0 text-[9px] font-700 uppercase tracking-wider text-accent-bright bg-accent-soft px-1.5 py-0.5 rounded-[5px]">
+                          <span className="shrink-0 text-[9px] font-700 uppercase tracking-wider text-accent-bright bg-accent-soft px-1.5 py-0.5 rounded-[5px]" style={{ animation: 'spring-in 0.3s var(--ease-spring)' }}>
                             active filter
                           </span>
                         )}
@@ -234,14 +238,18 @@ export function ProjectList() {
                   {/* Progress bar */}
                   {stats.tasks > 0 && (
                     <div className="mt-3 flex items-center gap-2.5">
-                      <div className="flex-1 h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+                      <div className="flex-1 h-1.5 rounded-full bg-white/[0.06] overflow-hidden relative">
                         <div
-                          className="h-full rounded-full transition-all duration-500"
+                          className="h-full rounded-full transition-all duration-500 relative"
                           style={{
                             width: `${progressPct}%`,
                             backgroundColor: progressPct === 100 ? '#22C55E' : (project.color || '#6366F1'),
                           }}
-                        />
+                        >
+                          {isActive && progressPct < 100 && (
+                            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer-bar_2s_infinite]" />
+                          )}
+                        </div>
                       </div>
                       <span className={`text-[10px] font-mono font-600 ${progressPct === 100 ? 'text-emerald-400' : 'text-text-3/50'}`}>
                         {progressPct}%

package/src/components/providers/provider-list.tsx

@@ -75,12 +75,24 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   return (
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-        {allItems.map((item) => (
-          <button
+        {allItems.map((item, idx) => (
+          <div
             key={item.id}
+            role="button"
+            tabIndex={0}
             onClick={() => handleEdit(item.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleEdit(item.id)
+              }
+            }}
             className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
-              cursor-pointer hover:bg-surface-2 bg-surface border-white/[0.06]"
+              cursor-pointer hover:bg-white/[0.02] bg-surface border-white/[0.06] hover:border-white/[0.12] hover:scale-[1.01]"
+            style={{
+              animation: 'spring-in 0.5s var(--ease-spring) both',
+              animationDelay: `${idx * 0.05}s`
+            }}
           >
             <div className="flex items-center justify-between mb-1.5">
               <span className="font-display text-[14px] font-600 text-text truncate">{item.name}</span>
@@ -97,7 +109,9 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                         ${item.isEnabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                     >
                       <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
-                        ${item.isEnabled ? 'left-[18px]' : 'left-0.5'}`} />
+                        ${item.isEnabled ? 'left-[18px]' : 'left-0.5'}`}
+                        style={item.isEnabled ? { animation: 'spring-in 0.3s var(--ease-spring)' } : undefined}
+                      />
                     </div>
                     <button
                       onClick={(e) => handleDelete(e, item.id)}
@@ -110,7 +124,8 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                     </button>
                   </>
                 )}
-                <span className={`w-2 h-2 rounded-full ${item.isConnected ? 'bg-emerald-400' : 'bg-white/10'}`} />
+                <span className={`w-2 h-2 rounded-full ${item.isConnected ? 'bg-emerald-400' : 'bg-white/10'}`}
+                  style={item.isConnected ? { animation: 'pulse-subtle 2s infinite' } : undefined} />
               </div>
             </div>
             <div className="text-[12px] text-text-3/60 font-mono truncate">
@@ -121,7 +136,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                 </>
               )}
             </div>
-          </button>
+          </div>
         ))}
       </div>
     </div>

package/src/components/providers/provider-sheet.tsx

@@ -120,13 +120,17 @@ export function ProviderSheet() {
       if (result.ok) {
         setTestStatus('pass')
         setTestMessage(result.message)
+        toast.success('Connection successful')
       } else {
         setTestStatus('fail')
         setTestMessage(result.message)
+        toast.error(result.message || 'Connection failed')
       }
     } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Connection test failed'
       setTestStatus('fail')
-      setTestMessage(err instanceof Error ? err.message : 'Connection test failed')
+      setTestMessage(msg)
+      toast.error(msg)
     }
   }
 
@@ -136,37 +140,50 @@ export function ProviderSheet() {
   }
 
   const handleSave = async () => {
-    if (isBuiltin) {
-      // Save model overrides for built-in providers
+    try {
+      if (isBuiltin) {
+        // Save model overrides for built-in providers
+        const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
+        await api('PUT', `/providers/${editingId}/models`, { models: modelList })
+        toast.success('Built-in provider models updated')
+        await loadProviders()
+        onClose()
+        return
+      }
       const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
-      await api('PUT', `/providers/${editingId}/models`, { models: modelList })
-      await loadProviders()
+      const data = {
+        name: name.trim() || 'Custom Provider',
+        baseUrl: baseUrl.trim(),
+        models: modelList,
+        requiresApiKey,
+        credentialId,
+        isEnabled,
+      }
+      if (editingCustom) {
+        await updateProviderConfig(editingCustom.id, data)
+        toast.success('Provider updated')
+      } else {
+        await createProviderConfig(data)
+        toast.success('Provider created')
+      }
+      await loadProviderConfigs()
       onClose()
-      return
-    }
-    const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
-    const data = {
-      name: name.trim() || 'Custom Provider',
-      baseUrl: baseUrl.trim(),
-      models: modelList,
-      requiresApiKey,
-      credentialId,
-      isEnabled,
-    }
-    if (editingCustom) {
-      await updateProviderConfig(editingCustom.id, data)
-    } else {
-      await createProviderConfig(data)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save provider')
     }
-    await loadProviderConfigs()
-    onClose()
   }
 
   const handleDelete = async () => {
     if (editingCustom) {
-      await deleteProviderConfig(editingCustom.id)
-      await loadProviderConfigs()
-      onClose()
+      if (!confirm(`Delete custom provider "${editingCustom.name}"?`)) return
+      try {
+        await deleteProviderConfig(editingCustom.id)
+        toast.success('Provider deleted')
+        await loadProviderConfigs()
+        onClose()
+      } catch (err: unknown) {
+        toast.error(err instanceof Error ? err.message : 'Failed to delete provider')
+      }
     }
   }
 

package/src/components/runs/run-list.tsx

@@ -43,14 +43,12 @@ export function RunList() {
     try {
       const res = await api<SessionRunRecord[]>('GET', '/runs?limit=200')
       setRuns(Array.isArray(res) ? res : [])
-    } catch {
-      // ignore
-    } finally {
-      setLoading(false)
-    }
+    } catch { /* ignore */ }
+    setLoading(false)
   }, [])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     fetchRuns()
   }, [fetchRuns])
 
@@ -61,6 +59,7 @@ export function RunList() {
   if (loading) {
     return (
       <div className="flex-1 flex items-center justify-center text-text-3 text-[13px]">
+        <span className="w-4 h-4 rounded-full border-2 border-text-3/20 border-t-text-3/60 animate-spin mr-2" />
         Loading runs...
       </div>
     )
@@ -69,7 +68,7 @@ export function RunList() {
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Controls */}
-      <div className="px-5 py-2 space-y-2 shrink-0">
+      <div className="px-5 py-2 space-y-2 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
         {/* Status filter + auto-refresh */}
         <div className="flex items-center gap-1.5 flex-wrap">
           <button
@@ -94,33 +93,38 @@ export function RunList() {
           <div className="flex-1" />
           <button
             onClick={() => setAutoRefresh(!autoRefresh)}
-            className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+            className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none flex items-center gap-1.5 ${
               autoRefresh ? 'bg-green-500/10 text-green-400' : 'bg-white/[0.04] text-text-3'
             }`}
           >
+            {autoRefresh && <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />}
             {autoRefresh ? 'LIVE' : 'PAUSED'}
           </button>
         </div>
       </div>
 
       {/* Count */}
-      <div className="px-5 py-1 text-[10px] text-text-3/60">
+      <div className="px-5 py-1 text-[10px] text-text-3/60" style={{ animation: 'fade-in 0.6s ease 0.1s both' }}>
         {filtered.length} run{filtered.length !== 1 ? 's' : ''}
       </div>
 
       {/* Run list */}
       <div className="flex-1 overflow-y-auto px-4 pb-8">
         {filtered.length === 0 ? (
-          <div className="flex items-center justify-center h-32 text-text-3 text-[12px]">
+          <div className="flex items-center justify-center h-32 text-text-3 text-[12px]" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
             No runs found
           </div>
         ) : (
           <div className="space-y-1">
-            {filtered.map((run) => (
+            {filtered.map((run, idx) => (
               <button
                 key={run.id}
                 onClick={() => setSelected(run)}
-                className="w-full text-left p-3 rounded-[10px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer block"
+                className="w-full text-left p-3 rounded-[10px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer block hover:scale-[1.01] active:scale-[0.99]"
+                style={{
+                  animation: 'fade-up 0.4s var(--ease-spring) both',
+                  animationDelay: `${0.1 + idx * 0.02}s`
+                }}
               >
                 <div className="flex items-center gap-2 mb-1">
                   <span className={`text-[9px] font-700 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px] ${STATUS_COLORS[run.status].bg} ${STATUS_COLORS[run.status].text}`}>
@@ -144,7 +148,7 @@ export function RunList() {
       {/* Detail Sheet */}
       <BottomSheet open={!!selected} onClose={() => setSelected(null)}>
         {selected && (
-          <>
+          <div style={{ animation: 'fade-in 0.3s ease' }}>
             <div className="mb-6">
               <div className="flex items-center gap-3 mb-3">
                 <span className={`text-[11px] font-700 uppercase tracking-wider px-2.5 py-1 rounded-[6px] ${STATUS_COLORS[selected.status].bg} ${STATUS_COLORS[selected.status].text}`}>
@@ -214,7 +218,7 @@ export function RunList() {
                 </pre>
               </div>
             )}
-          </>
+          </div>
         )}
       </BottomSheet>
     </div>

package/src/components/schedules/schedule-card.tsx

@@ -27,9 +27,10 @@ function formatNext(ts?: number): string {
 interface Props {
   schedule: Schedule
   inSidebar?: boolean
+  index?: number
 }
 
-export function ScheduleCard({ schedule, inSidebar }: Props) {
+export function ScheduleCard({ schedule, inSidebar, index = 0 }: Props) {
   const setEditingScheduleId = useAppStore((s) => s.setEditingScheduleId)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
   const loadSchedules = useAppStore((s) => s.loadSchedules)
@@ -62,7 +63,11 @@ export function ScheduleCard({ schedule, inSidebar }: Props) {
       onClick={handleClick}
       className="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.02] hover:border-white/[0.03]"
+        bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03] hover:scale-[1.01]"
+      style={{
+        animation: 'spring-in 0.5s var(--ease-spring) both',
+        animationDelay: `${Math.min(index * 0.05, 0.4)}s`
+      }}
     >
       <div className="flex items-center gap-2.5">
         <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{schedule.name}</span>
@@ -74,7 +79,9 @@ export function ScheduleCard({ schedule, inSidebar }: Props) {
                 ${schedule.status === 'active' ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
             >
               <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
-                ${schedule.status === 'active' ? 'left-[18px]' : 'left-0.5'}`} />
+                ${schedule.status === 'active' ? 'left-[18px]' : 'left-0.5'}`}
+                style={schedule.status === 'active' ? { animation: 'spring-in 0.3s var(--ease-spring)' } : undefined}
+              />
             </div>
           )}
           <span className={`text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] ${statusClass}`}>

package/src/components/schedules/schedule-list.tsx

@@ -118,8 +118,8 @@ export function ScheduleList({ inSidebar }: Props) {
           ? 'flex flex-col gap-1 px-2 pb-4'
           : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 px-5 pb-6'
         }>
-        {filtered.map((s) => (
-          <ScheduleCard key={s.id} schedule={s} inSidebar={inSidebar} />
+        {filtered.map((s, idx) => (
+          <ScheduleCard key={s.id} schedule={s} inSidebar={inSidebar} index={idx} />
         ))}
       </div>
     </div>

package/src/components/schedules/schedule-sheet.tsx

@@ -10,6 +10,8 @@ import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
 import { SectionLabel } from '@/components/shared/section-label'
 import { SCHEDULE_TEMPLATES, type ScheduleTemplate } from '@/lib/schedule-templates'
+import { HintTip } from '@/components/shared/hint-tip'
+import { toast } from 'sonner'
 import {
   Newspaper, BarChart3, HeartPulse, PenLine, Trash2,
   Activity, ShieldCheck, DatabaseBackup, FileText,
@@ -176,20 +178,31 @@ export function ScheduleSheet() {
       runAt: scheduleType === 'once' ? Date.now() + intervalMs : undefined,
       status,
     }
-    if (editing) {
-      await updateSchedule(editing.id, data)
-    } else {
-      await createSchedule(data)
+    try {
+      if (editing) {
+        await updateSchedule(editing.id, data)
+        toast.success('Schedule updated successfully')
+      } else {
+        await createSchedule(data)
+        toast.success('Schedule created successfully')
+      }
+      await loadSchedules()
+      onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save schedule')
     }
-    await loadSchedules()
-    onClose()
   }
 
   const handleDelete = async () => {
-    if (editing) {
+    if (!editing) return
+    if (!confirm(`Delete schedule "${editing.name}"?`)) return
+    try {
       await deleteSchedule(editing.id)
+      toast.success('Schedule deleted')
       await loadSchedules()
       onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete schedule')
     }
   }
 
@@ -326,7 +339,10 @@ export function ScheduleSheet() {
       {step === whenStep && (
         <div>
           <div className="mb-8">
-            <SectionLabel>Schedule Type</SectionLabel>
+            <div className="flex items-center gap-2 mb-3">
+              <SectionLabel className="mb-0">Schedule Type</SectionLabel>
+              <HintTip text="Once: runs a single time. Interval: repeats every N minutes. Cron: advanced scheduling with cron syntax" />
+            </div>
             <div className="grid grid-cols-3 gap-3">
               {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
                 <button
@@ -347,7 +363,10 @@ export function ScheduleSheet() {
 
           {scheduleType === 'cron' && (
             <div className="mb-8">
-              <SectionLabel>Schedule</SectionLabel>
+              <div className="flex items-center gap-2 mb-3">
+                <SectionLabel className="mb-0">Schedule</SectionLabel>
+                <HintTip text="Standard cron format: minute hour day month weekday (e.g. 0 9 * * 1-5 = weekdays at 9am)" />
+              </div>
 
               {/* Preset buttons */}
               <div className="flex flex-wrap gap-2 mb-4">

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

@@ -5,6 +5,7 @@ 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'
+import { toast } from 'sonner'
 
 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'
 
@@ -64,6 +65,7 @@ export function SecretSheet() {
           scope,
           agentIds: scope === 'agent' ? agentIds : [],
         })
+        toast.success('Secret updated')
       } else {
         await api('POST', '/secrets', {
           name: name.trim(),
@@ -72,11 +74,12 @@ export function SecretSheet() {
           scope,
           agentIds: scope === 'agent' ? agentIds : [],
         })
+        toast.success('Secret created')
       }
       await loadSecrets()
       handleClose()
     } catch (err: unknown) {
-      console.error('Failed to save secret:', err instanceof Error ? err.message : String(err))
+      toast.error(err instanceof Error ? err.message : 'Failed to save secret')
     } finally {
       setSaving(false)
     }
@@ -84,12 +87,14 @@ export function SecretSheet() {
 
   const handleDelete = async () => {
     if (!editing) return
+    if (!confirm(`Delete secret "${editing.name}"?`)) return
     try {
       await api('DELETE', `/secrets/${editing.id}`)
+      toast.success('Secret deleted')
       await loadSecrets()
       handleClose()
     } catch (err: unknown) {
-      console.error('Failed to delete secret:', err instanceof Error ? err.message : String(err))
+      toast.error(err instanceof Error ? err.message : 'Failed to delete secret')
     }
   }
 

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

@@ -53,7 +53,7 @@ export function SecretsList({ inSidebar }: Props) {
   return (
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-        {secretList.map((secret) => {
+        {secretList.map((secret, idx) => {
           const scopeLabel = secret.scope === 'global'
             ? 'Global'
             : `${secret.agentIds.length} agent(s)`
@@ -61,15 +61,28 @@ export function SecretsList({ inSidebar }: Props) {
             ? secret.agentIds.map((id) => agents[id]).filter(Boolean)
             : []
           return (
-            <button
+            <div
               key={secret.id}
+              role="button"
+              tabIndex={0}
               onClick={() => {
                 setEditingSecretId(secret.id)
                 setSecretSheetOpen(true)
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  setEditingSecretId(secret.id)
+                  setSecretSheetOpen(true)
+                }
+              }}
               className="w-full text-left p-4 rounded-[14px] bg-surface border border-white/[0.06]
-                hover:border-white/[0.1] cursor-pointer transition-all group"
-              style={{ fontFamily: 'inherit' }}
+                hover:border-white/[0.12] hover:bg-white/[0.02] hover:scale-[1.01] cursor-pointer transition-all group"
+              style={{
+                fontFamily: 'inherit',
+                animation: 'spring-in 0.5s var(--ease-spring) both',
+                animationDelay: `${idx * 0.05}s`
+              }}
             >
               <div className="flex items-center gap-2.5 mb-1">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
@@ -110,7 +123,7 @@ export function SecretsList({ inSidebar }: Props) {
                   )}
                 </div>
               )}
-            </button>
+            </div>
           )
         })}
       </div>