@swarmclawai/swarmclaw 0.6.8 → 0.7.0

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

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { Badge } from '@/components/ui/badge'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { EmptyState } from '@/components/shared/empty-state'
 import type { MemoryEntry } from '@/types'
 
 export function KnowledgeList() {
@@ -81,7 +82,7 @@ export function KnowledgeList() {
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Search — only show when there are entries */}
       {entries.length > 0 && (
-        <div className="px-5 py-2 shrink-0">
+        <div className="px-5 py-2 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
           <input
             type="text"
             value={search}
@@ -96,7 +97,7 @@ export function KnowledgeList() {
 
       {/* Tag filters */}
       {uniqueTags.length > 0 && (
-        <div className="px-5 pb-1.5 shrink-0">
+        <div className="px-5 pb-1.5 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.05s both' }}>
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setActiveTag(null)}
@@ -124,7 +125,7 @@ export function KnowledgeList() {
       {/* Entries */}
       {entries.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3 px-5 pb-6">
-          {entries.map((entry) => {
+          {entries.map((entry, idx) => {
             const meta = entry.metadata as { tags?: string[]; scope?: 'global' | 'agent'; agentIds?: string[] } | undefined
             const tags = meta?.tags || []
             const entryScope = meta?.scope || 'global'
@@ -136,7 +137,11 @@ export function KnowledgeList() {
             return (
               <div
                 key={entry.id}
-                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group"
+                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group hover:scale-[1.01] hover:border-white/[0.1]"
+                style={{
+                  animation: 'spring-in 0.5s var(--ease-spring) both',
+                  animationDelay: `${0.1 + idx * 0.03}s`
+                }}
               >
                 <div className="flex items-start justify-between gap-2 mb-1">
                   <span className="font-display text-[13px] font-600 text-text truncate">{entry.title}</span>
@@ -197,7 +202,7 @@ export function KnowledgeList() {
           })}
         </div>
       ) : error ? (
-        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
           <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load knowledge</p>
           <p className="text-[12px] text-text-3/60">{error}</p>
           <button
@@ -209,23 +214,17 @@ export function KnowledgeList() {
           </button>
         </div>
       ) : loaded ? (
-        <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" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
               <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
               <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
             </svg>
-          </div>
-          <p className="font-display text-[15px] font-600 text-text-2">No knowledge entries yet</p>
-          <p className="text-[13px] text-text-3/50">Add shared knowledge for your agents</p>
-          <button
-            onClick={() => openSheet()}
-            className="mt-1 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"
-            style={{ fontFamily: 'inherit' }}
-          >
-            + Add Knowledge
-          </button>
-        </div>
+          }
+          title="No knowledge entries yet"
+          subtitle="Add shared knowledge for your agents"
+          action={{ label: '+ Add Knowledge', onClick: () => openSheet() }}
+        />
       ) : null}
     </div>
   )

package/src/components/knowledge/knowledge-sheet.tsx

@@ -6,6 +6,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { MemoryEntry } from '@/types'
+import { toast } from 'sonner'
 
 const ACCEPTED_TYPES = '.txt,.md,.csv,.json,.jsonl,.html,.xml,.yaml,.yml,.toml,.py,.js,.ts,.tsx,.jsx,.go,.rs,.java,.c,.cpp,.h,.rb,.php,.sh,.sql,.log,.pdf'
 
@@ -91,21 +92,22 @@ export function KnowledgeSheet() {
       })
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: 'Upload failed' }))
-        console.error('Upload failed:', err.error)
+        toast.error(err.error || 'Upload failed')
         return
       }
       const result: UploadResult = await res.json()
       if (!title.trim()) setTitle(result.title)
       setContent(result.content)
       setUploadedFile({ name: result.filename, url: result.url, size: result.size })
+      toast.success('Document content extracted')
 
       // Auto-tag based on file extension
       const ext = file.name.split('.').pop()?.toLowerCase() || ''
       if (ext && !tags.includes(ext)) {
         setTags((prev) => prev ? `${prev}, ${ext}` : ext)
       }
-    } catch (err) {
-      console.error('Upload error:', err)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Upload failed')
     } finally {
       setUploading(false)
     }
@@ -168,13 +170,15 @@ export function KnowledgeSheet() {
 
       if (editingId) {
         await api('PUT', `/knowledge/${editingId}`, payload)
+        toast.success('Knowledge entry updated')
       } else {
         await api('POST', '/knowledge', payload)
+        toast.success('Knowledge entry created')
       }
 
       onClose()
-    } catch {
-      // silent
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save knowledge')
     } finally {
       setSaving(false)
     }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { Component, useState, useEffect, useCallback } from 'react'
+import { Component, useState, useEffect, useCallback, useMemo } from 'react'
 import type { ReactNode, ErrorInfo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useMediaQuery } from '@/hooks/use-media-query'
@@ -63,6 +63,8 @@ import { CanvasPanel } from '@/components/canvas/canvas-panel'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { api } from '@/lib/api-client'
 import { safeStorageGet, safeStorageSet } from '@/lib/safe-storage'
+import { useApprovalStore } from '@/stores/use-approval-store'
+import { useWs } from '@/hooks/use-ws'
 import type { AppView } from '@/types'
 
 const RAIL_EXPANDED_KEY = 'sc_rail_expanded'
@@ -90,9 +92,37 @@ export function AppLayout() {
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
   const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
   const tasks = useAppStore((s) => s.tasks)
+  const approvals = useAppStore((s) => s.approvals)
+  const loadApprovals = useAppStore((s) => s.loadApprovals)
+  const execApprovals = useApprovalStore((s) => s.approvals)
+  const loadExecApprovals = useApprovalStore((s) => s.loadApprovals)
+  const pruneExecApprovals = useApprovalStore((s) => s.pruneExpired)
   const isDesktop = useMediaQuery('(min-width: 768px)')
   const hasSelectedSession = !!(currentSessionId && sessions[currentSessionId])
-  const pendingApprovalCount = Object.values(tasks).filter((t) => t.pendingApproval).length
+  
+  const pendingApprovalCount = useMemo(() => {
+    const taskCount = Object.values(tasks).filter((t) => t.pendingApproval).length
+    const sessionCount = Object.values(approvals).filter((a) => a.status === 'pending').length
+    const execCount = Object.keys(execApprovals).length
+    return taskCount + sessionCount + execCount
+  }, [tasks, approvals, execApprovals])
+
+  useEffect(() => {
+    loadApprovals()
+    void loadExecApprovals()
+    const interval = setInterval(() => {
+      loadApprovals()
+      void loadExecApprovals()
+      pruneExecApprovals()
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [loadApprovals, loadExecApprovals, pruneExecApprovals])
+
+  useWs('approvals', loadApprovals, 10000)
+  useWs('openclaw:approvals', () => {
+    void loadExecApprovals()
+    pruneExecApprovals()
+  }, 10000)
 
   const appSettings = useAppStore((s) => s.appSettings)
   const [agentViewMode, setAgentViewMode] = useState<'chat' | 'config'>('chat')
@@ -146,6 +176,14 @@ export function AppLayout() {
     }
   }, [appSettings.themeHue])
 
+  const [pluginSidebarItems, setPluginSidebarItems] = useState<Array<{ id: string; label: string; href: string }>>([])
+
+  useEffect(() => {
+    api<Array<{ id: string; label: string; href: string }>>('GET', '/plugins/ui?type=sidebar').then(items => {
+      if (Array.isArray(items)) setPluginSidebarItems(items)
+    }).catch(() => {})
+  }, [])
+
   const [railExpanded, setRailExpanded] = useState(() => {
     const stored = safeStorageGet(RAIL_EXPANDED_KEY)
     return stored === null ? true : stored === 'true'
@@ -199,10 +237,11 @@ export function AppLayout() {
 
   const swipeHandlers = useSwipe({
     onSwipe: (dir) => {
+      if (isDesktop) return
       if (dir === 'right') setSidebarOpen(true)
       else setSidebarOpen(false)
     },
-    leftSwipeEnabled: sidebarOpen,
+    leftSwipeEnabled: !isDesktop && sidebarOpen,
   })
 
   const currentSession = currentSessionId ? sessions[currentSessionId] : null
@@ -223,15 +262,15 @@ export function AppLayout() {
   return (
     <div
       className="h-full flex overflow-hidden"
-      onTouchStart={swipeHandlers.onTouchStart}
-      onTouchMove={swipeHandlers.onTouchMove}
-      onTouchEnd={swipeHandlers.onTouchEnd}
+      onTouchStart={isDesktop ? undefined : swipeHandlers.onTouchStart}
+      onTouchMove={isDesktop ? undefined : swipeHandlers.onTouchMove}
+      onTouchEnd={isDesktop ? undefined : swipeHandlers.onTouchEnd}
     >
       {/* Desktop: Navigation rail (expandable) */}
       {isDesktop && (
         <div
-          className="shrink-0 bg-raised border-r border-white/[0.04] flex flex-col py-4 transition-all duration-200 overflow-visible"
-          style={{ width: railExpanded ? 180 : 60 }}
+          className="shrink-0 bg-raised border-r border-white/[0.04] flex flex-col py-4 min-h-0 transition-all duration-300 overflow-visible"
+          style={{ width: railExpanded ? 180 : 60, transitionTimingFunction: 'var(--ease-spring)' }}
         >
           {/* Logo + collapse toggle */}
           <div className={`flex items-center mb-4 shrink-0 ${railExpanded ? 'px-4 gap-3' : 'justify-center'}`}>
@@ -332,8 +371,9 @@ export function AppLayout() {
             </RailTooltip>
           )}
 
-          {/* Nav items */}
-          <div className={`flex flex-col gap-0.5 ${railExpanded ? 'px-3' : 'items-center'}`}>
+          <div className="flex-1 min-h-0 flex flex-col overflow-y-auto overscroll-contain touch-pan-y">
+            {/* Nav items */}
+            <div className={`flex flex-col gap-0.5 ${railExpanded ? 'px-3' : 'items-center'}`}>
             <NavItem view="home" label="Home" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('home')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" />
@@ -441,12 +481,12 @@ export function AppLayout() {
                 <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" />
               </svg>
             </NavItem>
-          </div>
+            </div>
 
-          <div className="flex-1" />
+            <div className="flex-1" />
 
-          {/* Bottom: Docs + Daemon + Settings + User */}
-          <div className={`flex flex-col gap-1 ${railExpanded ? 'px-3' : 'items-center'}`}>
+            {/* Bottom: Docs + Daemon + Settings + User */}
+            <div className={`flex flex-col gap-1 ${railExpanded ? 'px-3' : 'items-center'}`}>
             {railExpanded ? (
               <a
                 href="https://swarmclaw.ai/docs"
@@ -543,19 +583,20 @@ export function AppLayout() {
                 </button>
               </RailTooltip>
             )}
+            </div>
           </div>
         </div>
       )}
 
       {/* Desktop: Side panel (wallets has its own built-in sidebar) */}
-      {isDesktop && sidebarOpen && activeView !== 'wallets' && (
+      {isDesktop && sidebarOpen && activeView !== 'wallets' && activeView !== 'approvals' && (
         <div
-          className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full"
-          style={{ animation: 'panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
+          className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full min-h-0 overflow-hidden touch-pan-y"
+          style={{ animation: 'panel-in 0.3s var(--ease-spring)' }}
         >
           <div className="flex items-center px-5 pt-5 pb-3 shrink-0">
             <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">{activeView}</h2>
-            {activeView === 'logs' || activeView === 'usage' || activeView === 'runs' || activeView === 'approvals' ? null : activeView === 'memory' ? (
+            {activeView === 'logs' || activeView === 'usage' || activeView === 'runs' ? null : activeView === 'memory' ? (
               <button
                 onClick={() => useAppStore.getState().setMemorySheetOpen(true)}
                 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-accent-bright/15 transition-all cursor-pointer"
@@ -618,7 +659,7 @@ export function AppLayout() {
         <div className="fixed inset-0 z-50">
           <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setSidebarOpen(false)} />
           <div
-            className="absolute inset-y-0 left-0 w-[300px] bg-raised shadow-[4px_0_60px_rgba(0,0,0,0.7)] flex flex-col"
+            className="absolute inset-y-0 left-0 w-[300px] bg-raised shadow-[4px_0_60px_rgba(0,0,0,0.7)] flex flex-col min-h-0 overflow-hidden touch-pan-y"
             style={{ animation: 'slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1)' }}
           >
             <div className="flex items-center gap-3 px-5 py-4 shrink-0">
@@ -659,8 +700,19 @@ export function AppLayout() {
                   {v}
                 </button>
               ))}
+              {/* Dynamic Plugin Items */}
+              {pluginSidebarItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => window.open(item.href, '_blank')}
+                  className="py-2 px-2.5 rounded-[10px] text-[11px] font-600 capitalize cursor-pointer transition-all bg-emerald-500/[0.05] text-emerald-400/80 hover:text-emerald-400 border border-emerald-400/10"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {item.label}
+                </button>
+              ))}
             </div>
-            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && activeView !== 'approvals' && (
+            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && (
             <div className="px-4 py-2.5 shrink-0">
               <button
                 onClick={() => {
@@ -1170,7 +1222,7 @@ function NavItem({ view, label, expanded, active, sidebarOpen, onClick, badge, c
             </span>
           )}
         </span>
-        <span className="truncate">{label}</span>
+        <span className="truncate" style={{ animation: 'spring-in 0.4s var(--ease-spring)' }}>{label}</span>
       </button>
     )
   }