@swarmclawai/swarmclaw 0.7.2 → 0.7.4

package/src/components/layout/mobile-header.tsx

@@ -3,15 +3,24 @@
 import { useAppStore } from '@/stores/use-app-store'
 import { IconButton } from '@/components/shared/icon-button'
 import { NotificationCenter } from '@/components/shared/notification-center'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 export function MobileHeader() {
   const toggleSidebar = useAppStore((s) => s.toggleSidebar)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
+  const agents = useAppStore((s) => s.agents)
   const session = currentSessionId ? sessions[currentSessionId] : null
+  const agent = session?.agentId ? agents[session.agentId] : null
+  const title = agent?.name || session?.name || 'SwarmClaw'
+  const subtitle = agent
+    ? 'Agent chat'
+    : session
+      ? 'Direct chat'
+      : 'Workspace'
 
   return (
-    <header className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0 min-h-[48px]"
+    <header className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0 min-h-[56px]"
       style={{ paddingTop: 'max(10px, env(safe-area-inset-top))' }}>
       <IconButton onClick={toggleSidebar} aria-label="Toggle sidebar">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -20,13 +29,22 @@ export function MobileHeader() {
           <line x1="3" y1="17" x2="18" y2="17" />
         </svg>
       </IconButton>
-      <h1 className="font-display text-[14px] font-600 tracking-[-0.02em] flex-1 truncate">
-        {session ? (
-          <span className="block truncate">{session.name}</span>
-        ) : (
-          <span className="font-700">SwarmClaw</span>
-        )}
-      </h1>
+      {agent && (
+        <AgentAvatar
+          seed={agent.avatarSeed || null}
+          avatarUrl={agent.avatarUrl}
+          name={agent.name}
+          size={28}
+        />
+      )}
+      <div className="flex-1 min-w-0">
+        <h1 className="font-display text-[14px] font-600 tracking-[-0.02em] truncate">
+          {title}
+        </h1>
+        <p className="text-[10px] text-text-3/60 truncate mt-0.5">
+          {subtitle}
+        </p>
+      </div>
       <NotificationCenter />
     </header>
   )

package/src/components/memory/memory-browser.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { searchMemory } from '@/lib/memory'
+import { deriveMemoryScope, getMemoryTier } from '@/lib/memory-presentation'
 import { useAppStore } from '@/stores/use-app-store'
 import { MemoryCard } from './memory-card'
 import { MemoryDetail } from './memory-detail'
@@ -14,6 +15,10 @@ export function MemoryBrowser() {
   const refreshKey = useAppStore((s) => s.memoryRefreshKey)
   const agents = useAppStore((s) => s.agents)
   const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+  const memoryTierFilter = useAppStore((s) => s.memoryTierFilter)
+  const setMemoryTierFilter = useAppStore((s) => s.setMemoryTierFilter)
+  const memoryScopeFilter = useAppStore((s) => s.memoryScopeFilter)
+  const setMemoryScopeFilter = useAppStore((s) => s.setMemoryScopeFilter)
 
   const [search, setSearch] = useState('')
   const [entries, setEntries] = useState<MemoryEntry[]>([])
@@ -32,14 +37,24 @@ export function MemoryBrowser() {
 
   const load = useCallback(async (query: string) => {
     try {
-      const results = await searchMemory({ q: query || undefined, agentId: apiAgentId })
+      const scope = memoryAgentFilter === '_global'
+        ? 'global'
+        : memoryAgentFilter
+          ? 'auto'
+          : 'all'
+      const results = await searchMemory({
+        q: query || undefined,
+        agentId: apiAgentId,
+        scope,
+        limit: 120,
+      })
       setEntries(Array.isArray(results) ? results : [])
       setError(null)
     } catch {
       setError('Unable to load memories right now.')
     }
     setLoaded(true)
-  }, [apiAgentId])
+  }, [apiAgentId, memoryAgentFilter])
 
   useEffect(() => {
     searchRef.current = search
@@ -70,12 +85,23 @@ export function MemoryBrowser() {
 
   const filtered = useMemo(() => {
     return entries.filter((e) => {
-      // Client-side global filter
       if (memoryAgentFilter === '_global' && e.agentId) return false
+      if (memoryAgentFilter && memoryAgentFilter !== '_global') {
+        const visibleToAgent = e.agentId === memoryAgentFilter || (Array.isArray(e.sharedWith) && e.sharedWith.includes(memoryAgentFilter)) || !e.agentId
+        if (!visibleToAgent) return false
+      }
+      const scope = deriveMemoryScope(e)
+      if (memoryScopeFilter !== 'all') {
+        if (memoryScopeFilter === 'global' && scope !== 'global') return false
+        if (memoryScopeFilter === 'agent' && scope !== 'agent' && scope !== 'shared') return false
+        if (memoryScopeFilter === 'session' && scope !== 'session') return false
+        if (memoryScopeFilter === 'project' && scope !== 'project') return false
+      }
+      if (memoryTierFilter !== 'all' && getMemoryTier(e) !== memoryTierFilter) return false
       if (categoryFilter && (e.category || 'note') !== categoryFilter) return false
       return true
     })
-  }, [entries, memoryAgentFilter, categoryFilter])
+  }, [entries, memoryAgentFilter, memoryScopeFilter, memoryTierFilter, categoryFilter])
 
   const filterLabel = useMemo(() => {
     if (!memoryAgentFilter) return 'All Memories'
@@ -135,6 +161,41 @@ export function MemoryBrowser() {
               text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
             style={{ fontFamily: 'inherit' }}
           />
+          <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+            {(['all', 'global', 'agent', 'session', 'project'] as const).map((scope) => (
+              <button
+                key={scope}
+                type="button"
+                onClick={() => setMemoryScopeFilter(scope)}
+                className={`px-2.5 py-1 rounded-[8px] text-[10px] font-700 uppercase tracking-[0.08em] border transition-all ${
+                  memoryScopeFilter === scope
+                    ? 'bg-accent-soft text-accent-bright border-accent-bright/15'
+                    : 'bg-transparent text-text-3/70 border-white/[0.05] hover:text-text-2 hover:bg-white/[0.03]'
+                }`}
+              >
+                {scope === 'agent' ? 'private/shared' : scope}
+              </button>
+            ))}
+          </div>
+          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+            {(['all', 'working', 'durable', 'archive'] as const).map((tier) => (
+              <button
+                key={tier}
+                type="button"
+                onClick={() => setMemoryTierFilter(tier)}
+                className={`px-2.5 py-1 rounded-[8px] text-[10px] font-700 uppercase tracking-[0.08em] border transition-all ${
+                  memoryTierFilter === tier
+                    ? 'bg-white/[0.08] text-text-2 border-white/[0.10]'
+                    : 'bg-transparent text-text-3/70 border-white/[0.05] hover:text-text-2 hover:bg-white/[0.03]'
+                }`}
+              >
+                {tier}
+              </button>
+            ))}
+          </div>
+          <p className="mt-2 text-[11px] text-text-3/55">
+            Scope shows what kind of memory it is. Tier shows how long it should stay salient.
+          </p>
         </div>
 
         {/* Category chips */}
@@ -207,8 +268,12 @@ export function MemoryBrowser() {
                     <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
                   </svg>
                 </div>
-                <p className="font-display text-[14px] font-600 text-text-2">No memories yet</p>
-                <p className="text-[12px] text-text-3/50">Agents store knowledge here as they learn</p>
+                <p className="font-display text-[14px] font-600 text-text-2">No memories match these filters</p>
+                <p className="text-[12px] text-text-3/50">
+                  {memoryScopeFilter === 'all' && memoryTierFilter === 'all'
+                    ? 'Agents store knowledge here as they learn'
+                    : `Try a different ${memoryScopeFilter !== 'all' ? 'scope' : 'tier'} filter`}
+                </p>
               </div>
             ) : null
           ) : (

package/src/components/memory/memory-card.tsx

@@ -2,6 +2,7 @@
 
 import type { MemoryEntry } from '@/types'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { deriveMemoryScope, getMemoryScopeLabel, getMemoryTier } from '@/lib/memory-presentation'
 
 function timeAgo(ts: number): string {
   if (!ts) return ''
@@ -22,6 +23,9 @@ interface Props {
 }
 
 export function MemoryCard({ entry, active, agentName, agentAvatarSeed, agentAvatarUrl, onClick }: Props) {
+  const scope = deriveMemoryScope(entry)
+  const tier = getMemoryTier(entry)
+
   return (
     <div
       onClick={onClick}
@@ -51,6 +55,20 @@ export function MemoryCard({ entry, active, agentName, agentAvatarSeed, agentAva
       <div className="text-[12px] text-text-2/40 mt-1 line-clamp-3 leading-relaxed">
         {entry.content || '(empty)'}
       </div>
+      <div className="mt-2 flex flex-wrap items-center gap-1.5">
+        <span className="px-1.5 py-0.5 rounded-[5px] text-[9px] font-700 uppercase tracking-[0.08em] bg-white/[0.04] text-text-3/75">
+          {getMemoryScopeLabel(scope)}
+        </span>
+        <span className={`px-1.5 py-0.5 rounded-[5px] text-[9px] font-700 uppercase tracking-[0.08em] ${
+          tier === 'working'
+            ? 'bg-amber-400/10 text-amber-300'
+            : tier === 'archive'
+              ? 'bg-sky-400/10 text-sky-300'
+              : 'bg-emerald-400/10 text-emerald-300'
+        }`}>
+          {tier}
+        </span>
+      </div>
       {(entry.image?.path || entry.imagePath) && (
         <div className="mt-2 w-10 h-10 rounded-[6px] overflow-hidden bg-white/[0.04] shrink-0">
           {/* eslint-disable-next-line @next/next/no-img-element */}

package/src/components/memory/memory-detail.tsx

@@ -3,7 +3,9 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { getMemory, updateMemory, deleteMemory } from '@/lib/memory'
+import { deriveMemoryScope, getMemoryScopeLabel, getMemoryTier } from '@/lib/memory-presentation'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import type { MemoryEntry } from '@/types'
 
 const CATEGORIES = ['note', 'fact', 'preference', 'finding', 'learning', 'general']
@@ -22,6 +24,7 @@ export function MemoryDetail() {
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [category, setCategory] = useState('note')
+  const [editTier, setEditTier] = useState<'working' | 'durable' | 'archive'>('durable')
   const [editAgentId, setEditAgentId] = useState<string | null>(null)
   const [editSharedWith, setEditSharedWith] = useState<string[]>([])
   const [saving, setSaving] = useState(false)
@@ -53,6 +56,7 @@ export function MemoryDetail() {
         setTitle(resolved.title)
         setContent(resolved.content)
         setCategory(resolved.category || 'note')
+        setEditTier(getMemoryTier(resolved))
         setEditAgentId(resolved.agentId || null)
         setEditSharedWith(resolved.sharedWith || [])
         setEditing(false)
@@ -97,6 +101,12 @@ export function MemoryDetail() {
         category,
         agentId: editAgentId,
         sharedWith: editSharedWith.length ? editSharedWith : undefined,
+        metadata: {
+          ...(entry.metadata || {}),
+          tier: editTier,
+          scope: editAgentId ? 'agent' : 'global',
+          visibility: editAgentId ? (editSharedWith.length ? 'shared' : 'private') : 'global',
+        },
       })
       setEntry(updated)
       setEditing(false)
@@ -151,6 +161,8 @@ export function MemoryDetail() {
 
   const agentName = entry.agentId ? (agents[entry.agentId]?.name || entry.agentId) : null
   const sessionName = entry.sessionId ? (sessions[entry.sessionId]?.name || entry.sessionId) : null
+  const scope = deriveMemoryScope(entry)
+  const tier = getMemoryTier(entry)
   const imagePath = entry.image?.path || entry.imagePath || null
   const imageUrl = imagePath
     ? imagePath.startsWith('data/memory-images/')
@@ -171,6 +183,18 @@ export function MemoryDetail() {
             <span className="shrink-0 text-[10px] font-700 uppercase tracking-wider text-accent-bright/70 bg-accent-soft px-2 py-0.5 rounded-[6px]">
               {entry.category || 'note'}
             </span>
+            <span className="shrink-0 text-[10px] font-700 uppercase tracking-wider text-text-3/70 bg-white/[0.04] px-2 py-0.5 rounded-[6px]">
+              {getMemoryScopeLabel(scope)}
+            </span>
+            <span className={`shrink-0 text-[10px] font-700 uppercase tracking-wider px-2 py-0.5 rounded-[6px] ${
+              tier === 'working'
+                ? 'bg-amber-400/10 text-amber-300'
+                : tier === 'archive'
+                  ? 'bg-sky-400/10 text-sky-300'
+                  : 'bg-emerald-400/10 text-emerald-300'
+            }`}>
+              {tier}
+            </span>
             {!editing && (
               <h2 className="font-display text-[16px] font-700 truncate tracking-[-0.02em]">{entry.title || 'Untitled'}</h2>
             )}
@@ -216,6 +240,7 @@ export function MemoryDetail() {
                   setTitle(entry.title)
                   setContent(entry.content)
                   setCategory(entry.category || 'note')
+                  setEditTier(getMemoryTier(entry))
                   setEditAgentId(entry.agentId || null)
                   setEditSharedWith(entry.sharedWith || [])
                   setEditing(false)
@@ -301,9 +326,23 @@ export function MemoryDetail() {
                 </div>
               </div>
 
+              <div>
+                <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Tier</label>
+                <select
+                  value={editTier}
+                  onChange={(e) => setEditTier(e.target.value as typeof editTier)}
+                  className={inputClass}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <option value="working">Working</option>
+                  <option value="durable">Durable</option>
+                  <option value="archive">Archive</option>
+                </select>
+              </div>
+
               {/* Agent assignment */}
               <div>
-                <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Assigned to</label>
+                <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Visibility</label>
                 <div className="flex gap-1.5 flex-wrap">
                   <button
                     onClick={() => setEditAgentId(null)}
@@ -522,10 +561,18 @@ export function MemoryDetail() {
                   </div>
                   {entry.agentId && (
                     <div>
-                      <span className="text-text-3/70 block mb-1">Agent</span>
+                      <span className="text-text-3/70 block mb-1">Owner</span>
                       <span className="text-text-3/60 font-mono">{agentName}</span>
                     </div>
                   )}
+                  <div>
+                    <span className="text-text-3/70 block mb-1">Scope</span>
+                    <span className="text-text-3/60 font-mono">{getMemoryScopeLabel(scope)}</span>
+                  </div>
+                  <div>
+                    <span className="text-text-3/70 block mb-1">Tier</span>
+                    <span className="text-text-3/60 font-mono">{tier}</span>
+                  </div>
                   {entry.sessionId && (
                     <div>
                       <span className="text-text-3/70 block mb-1">Chat</span>
@@ -544,35 +591,15 @@ export function MemoryDetail() {
         </div>
       </div>
 
-      {/* Delete confirmation */}
-      {confirmDelete && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setConfirmDelete(false)} />
-          <div className="relative bg-raised rounded-[16px] p-6 max-w-[360px] w-full shadow-xl border border-white/[0.06]"
-            style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}>
-            <h3 className="font-display text-[16px] font-700 mb-2">Delete Memory</h3>
-            <p className="text-[13px] text-text-3 mb-5">
-              Delete &ldquo;{entry.title}&rdquo;? This cannot be undone.
-            </p>
-            <div className="flex gap-3">
-              <button
-                onClick={() => setConfirmDelete(false)}
-                className="flex-1 py-2.5 rounded-[10px] border border-white/[0.08] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
-                style={{ fontFamily: 'inherit' }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleDelete}
-                className="flex-1 py-2.5 rounded-[10px] border-none bg-red-500/90 text-white text-[13px] font-600 cursor-pointer active:scale-[0.97] transition-all hover:bg-red-500"
-                style={{ fontFamily: 'inherit' }}
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Memory"
+        message={`Delete "${entry.title}"? This cannot be undone.`}
+        confirmLabel="Delete"
+        danger
+        onCancel={() => setConfirmDelete(false)}
+        onConfirm={() => { void handleDelete() }}
+      />
     </div>
   )
 }

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

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createMemory } from '@/lib/memory'
+import { getMemoryTierForCategory } from '@/lib/memory-presentation'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { SheetFooter } from '@/components/shared/sheet-footer'
@@ -24,6 +25,7 @@ export function MemorySheet() {
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [category, setCategory] = useState('note')
+  const [tier, setTier] = useState<'working' | 'durable' | 'archive'>(getMemoryTierForCategory('note'))
   const [agentId, setAgentId] = useState<string | null>(defaultAgentId)
   const [sharedWith, setSharedWith] = useState<string[]>([])
   const [saving, setSaving] = useState(false)
@@ -36,6 +38,7 @@ export function MemorySheet() {
     setTitle('')
     setContent('')
     setCategory('note')
+    setTier(getMemoryTierForCategory('note'))
     setSaving(false)
   } else if (!open && prevOpen) {
     setPrevOpen(false)
@@ -56,6 +59,11 @@ export function MemorySheet() {
         agentId,
         sessionId: null,
         sharedWith: sharedWith.length ? sharedWith : undefined,
+        metadata: {
+          tier,
+          scope: agentId ? 'agent' : 'global',
+          visibility: agentId ? (sharedWith.length ? 'shared' : 'private') : 'global',
+        },
       })
       triggerRefresh()
       onClose()
@@ -77,7 +85,7 @@ export function MemorySheet() {
 
       {/* Agent selector */}
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Assign to</label>
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Visibility</label>
         <div className="flex gap-2 flex-wrap">
           <button
             onClick={() => setAgentId(null)}
@@ -111,12 +119,12 @@ export function MemorySheet() {
         </div>
         {selectedAgent && (
           <p className="text-[11px] text-text-3/50 mt-2">
-            This memory will be available to <span className="text-text-2">{selectedAgent.name}</span> during conversations
+            Owned by <span className="text-text-2">{selectedAgent.name}</span>. Add collaborators below if other agents should be able to recall it too.
           </p>
         )}
         {!agentId && (
           <p className="text-[11px] text-text-3/50 mt-2">
-            Global memories are accessible to all agents
+            Global memories are accessible to every agent in the workspace.
           </p>
         )}
       </div>
@@ -167,7 +175,10 @@ export function MemorySheet() {
           {CATEGORIES.map((c) => (
             <button
               key={c}
-              onClick={() => setCategory(c)}
+              onClick={() => {
+                setCategory(c)
+                setTier(getMemoryTierForCategory(c))
+              }}
               className={`px-3 py-1.5 rounded-[8px] text-[12px] font-600 capitalize cursor-pointer transition-all border-none
                 ${category === c
                   ? 'bg-accent-soft text-accent-bright'
@@ -180,6 +191,23 @@ export function MemorySheet() {
         </div>
       </div>
 
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Tier</label>
+        <select
+          value={tier}
+          onChange={(e) => setTier(e.target.value as typeof tier)}
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="working">Working: short-horizon, active context</option>
+          <option value="durable">Durable: keep this around as reusable knowledge</option>
+          <option value="archive">Archive: preserve, but keep less salient</option>
+        </select>
+        <p className="text-[11px] text-text-3/50 mt-2">
+          Tier controls how aggressively this memory should stay in active recall.
+        </p>
+      </div>
+
       {/* Content */}
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Content</label>

package/src/components/plugins/plugin-list.tsx

@@ -62,8 +62,8 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   }, [tab, inSidebar, loadMarketplace])
 
   const pluginList = Object.values(plugins)
-  const corePlugins = useMemo(() => pluginList.filter((p) => p.source === 'local'), [pluginList])
-  const extensionPlugins = useMemo(() => pluginList.filter((p) => p.source !== 'local'), [pluginList])
+  const corePlugins = useMemo(() => pluginList.filter((p) => p.isBuiltin), [pluginList])
+  const extensionPlugins = useMemo(() => pluginList.filter((p) => !p.isBuiltin), [pluginList])
 
   // Search filtering for installed plugins
   const filterInstalled = useCallback((list: PluginMeta[]) => {
@@ -293,7 +293,7 @@ function TabButton({ active, onClick, count, children }: {
 function pluginDescription(plugin: PluginMeta): string {
   const raw = (plugin.description || '').trim()
   if (raw) return raw
-  const sourceLabel = plugin.source === 'local' ? 'core plugin' : 'installed plugin'
+  const sourceLabel = plugin.isBuiltin ? 'core plugin' : 'installed plugin'
   return `No description provided. Click to view metadata and controls for this ${sourceLabel}.`
 }
 
@@ -304,6 +304,7 @@ function pluginCapabilityBadges(plugin: PluginMeta): string[] {
   if (plugin.hasUI) badges.push('UI')
   if (plugin.providerCount && plugin.providerCount > 0) badges.push(`${plugin.providerCount} provider${plugin.providerCount === 1 ? '' : 's'}`)
   if (plugin.connectorCount && plugin.connectorCount > 0) badges.push(`${plugin.connectorCount} connector${plugin.connectorCount === 1 ? '' : 's'}`)
+  if (plugin.hasDependencyManifest) badges.push(`${plugin.dependencyCount ?? 0} dep${plugin.dependencyCount === 1 ? '' : 's'}`)
   return badges
 }
 
@@ -446,6 +447,17 @@ function PluginCard({ plugin, allowDelete, agents, onEdit, onToggle, onDelete, o
             {badge}
           </span>
         ))}
+        {plugin.hasDependencyManifest && (
+          <span className={`text-[10px] font-700 px-1.5 py-0.5 rounded-full ${
+            plugin.dependencyInstallStatus === 'installed'
+              ? 'text-emerald-400 bg-emerald-500/10'
+              : plugin.dependencyInstallStatus === 'error'
+                ? 'text-red-400 bg-red-500/10'
+                : 'text-amber-400 bg-amber-500/10'
+          }`}>
+            deps {plugin.dependencyInstallStatus || 'ready'}
+          </span>
+        )}
         {plugin.author && (
           <span className="text-[10px] text-text-3/40 ml-auto">
             {plugin.author}