@swarmclawai/swarmclaw 0.7.3 → 0.7.4

package/src/components/input/chat-input.tsx

@@ -24,9 +24,11 @@ const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10 MB
 
 export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }: Props) {
   const [value, setValue] = useState('')
+  const [extrasOpen, setExtrasOpen] = useState(false)
   const { ref: textareaRef, resize } = useAutoResize()
   const fileInputRef = useRef<HTMLInputElement>(null)
   const imageInputRef = useRef<HTMLInputElement>(null)
+  const extrasRef = useRef<HTMLDivElement>(null)
   const pendingFiles = useChatStore((s) => s.pendingFiles)
   const addPendingFile = useChatStore((s) => s.addPendingFile)
   const removePendingFile = useChatStore((s) => s.removePendingFile)
@@ -37,6 +39,17 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
   const addQueuedMessage = useChatStore((s) => s.addQueuedMessage)
   const removeQueuedMessage = useChatStore((s) => s.removeQueuedMessage)
 
+  useEffect(() => {
+    if (!extrasOpen) return
+    const handler = (e: MouseEvent) => {
+      if (extrasRef.current && !extrasRef.current.contains(e.target as Node)) {
+        setExtrasOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [extrasOpen])
+
   // Draft persistence: restore on session change
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
@@ -61,6 +74,10 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
     if (!text && !pendingFiles.length) return
     // If streaming, queue the message instead of blocking
     if (streaming) {
+      if (pendingFiles.length > 0) {
+        toast.error('Wait for the current reply to finish before sending files.')
+        return
+      }
       if (text) {
         addQueuedMessage(text)
         setValue('')
@@ -133,24 +150,30 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
   return (
     <div className="shrink-0 px-4 md:px-12 lg:px-16 pb-4 pt-2 fixed bottom-0 left-0 right-0 z-20 bg-bg/95 backdrop-blur-md md:relative md:z-auto md:bg-transparent md:backdrop-blur-none"
       style={{ paddingBottom: 'max(16px, env(safe-area-inset-bottom))' }}>
-      <div>
+      <div className="relative" ref={extrasRef}>
         {streaming && (
-          <div className="flex justify-center py-2 mb-2">
+          <div className="mb-2 flex flex-wrap items-center justify-between gap-2 rounded-[14px] border border-amber-500/15 bg-amber-500/[0.06] px-3.5 py-2">
+            <div className="min-w-0">
+              <div className="text-[12px] font-600 text-amber-300">Reply in progress</div>
+              <div className="text-[11px] text-amber-200/70">
+                New text sends queue automatically. File uploads wait for the current reply to finish.
+              </div>
+            </div>
             <button
               onClick={onStop}
-              className="px-6 py-2.5 rounded-pill border border-danger/20 bg-danger/[0.06]
-                text-danger text-[13px] font-600 cursor-pointer transition-all duration-200
-                active:scale-95 hover:bg-danger/[0.1] hover:border-danger/30"
+              className="px-4 py-2 rounded-pill border border-danger/20 bg-danger/[0.06]
+                text-danger text-[12px] font-600 cursor-pointer transition-all duration-200
+                active:scale-95 hover:bg-danger/[0.1] hover:border-danger/30 shrink-0"
               style={{ fontFamily: 'inherit' }}
             >
-              Stop generating
+              Stop
             </button>
           </div>
         )}
 
         {queuedMessages.length > 0 && (
           <div className="flex flex-wrap items-center gap-1.5 mb-2">
-            <span className="label-mono text-amber-400/70">Queued</span>
+            <span className="label-mono text-amber-400/70">Sending next</span>
             {queuedMessages.map((msg, i) => (
               <span key={i} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-amber-500/10 border border-amber-500/15 text-[12px] text-amber-300 font-mono max-w-[200px]">
                 <span className="truncate">{msg}</span>
@@ -195,92 +218,19 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
 
           <div className="flex items-center gap-1 px-4 pb-3.5">
             <button
-              onClick={() => fileInputRef.current?.click()}
+              type="button"
+              onClick={() => setExtrasOpen((open) => !open)}
               className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
                 text-text-3 text-[13px] cursor-pointer hover:text-text-2 hover:bg-white/[0.05] transition-all duration-200"
               style={{ fontFamily: 'inherit' }}
             >
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M12 5v14" />
+                <path d="M5 12h14" />
               </svg>
-              <span className="hidden sm:inline">Attach</span>
+              <span className="hidden sm:inline">Add</span>
             </button>
 
-            <button
-              onClick={() => imageInputRef.current?.click()}
-              className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
-                text-text-3 text-[13px] cursor-pointer hover:text-text-2 hover:bg-white/[0.05] transition-all duration-200"
-              style={{ fontFamily: 'inherit' }}
-            >
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                <circle cx="8.5" cy="8.5" r="1.5" />
-                <polyline points="21 15 16 10 5 21" />
-              </svg>
-              <span className="hidden sm:inline">Image</span>
-            </button>
-
-            {/* Plugin Chat Actions */}
-            {pluginChatActions.map((action) => (
-              <Tooltip key={action.id}>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={() => {
-                      if (action.action === 'message') onSend(action.value)
-                      else if (action.action === 'link') window.open(action.value, '_blank')
-                    }}
-                    className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-emerald-500/[0.05]
-                      text-emerald-400 text-[13px] cursor-pointer hover:text-emerald-300 hover:bg-emerald-500/[0.1] transition-all duration-200"
-                    style={{ fontFamily: 'inherit' }}
-                  >
-                    {action.label}
-                  </button>
-                </TooltipTrigger>
-                {action.tooltip && <TooltipContent>{action.tooltip}</TooltipContent>}
-              </Tooltip>
-            ))}
-
-            {micSupported && (
-              <button
-                onClick={toggleRecording}
-                className={`flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
-                  text-[13px] cursor-pointer transition-all duration-200
-                  ${recording ? 'text-danger' : 'text-text-3 hover:text-text-2 hover:bg-white/[0.05]'}`}
-                style={recording ? { animation: 'mic-pulse 1.5s ease-out infinite', fontFamily: 'inherit' } : { fontFamily: 'inherit' }}
-              >
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-                  <rect x="9" y="2" width="6" height="11" rx="3" />
-                  <path d="M5 10a7 7 0 0 0 14 0" />
-                  <line x1="12" y1="19" x2="12" y2="22" />
-                </svg>
-              </button>
-            )}
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => { useChatStore.getState().clearContext() }}
-                  disabled={streaming}
-                  className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
-                    text-text-3 text-[13px] cursor-pointer hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-200 disabled:opacity-30 disabled:pointer-events-none"
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-                    <line x1="2" y1="12" x2="22" y2="12" />
-                    <polyline points="8 8 4 12 8 16" />
-                    <polyline points="16 8 20 12 16 16" />
-                  </svg>
-                  <span className="hidden sm:inline">New context</span>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={8}
-                className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[10px] px-3.5 py-2.5 max-w-[220px]">
-                <div className="font-display text-[12px] font-600 mb-0.5">New context window</div>
-                <div className="text-[11px] text-text-3 leading-[1.4]">Adds a marker — messages above it won&apos;t be sent to the AI. Nothing is deleted.</div>
-              </TooltipContent>
-            </Tooltip>
-
             <div className="flex-1" />
 
             <span className="text-[11px] text-text-3/60 tabular-nums mr-2 font-mono">
@@ -314,6 +264,105 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
           </div>
         </div>
 
+        {extrasOpen && (
+          <div className="absolute left-0 bottom-[72px] w-[280px] max-w-[calc(100vw-2rem)] rounded-[16px] border border-white/[0.08] bg-raised/95 p-2 shadow-[0_18px_64px_rgba(0,0,0,0.55)] backdrop-blur-xl">
+            <button
+              type="button"
+              onClick={() => {
+                setExtrasOpen(false)
+                fileInputRef.current?.click()
+              }}
+              className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[13px] text-text-2 hover:bg-white/[0.05] cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+              </svg>
+              Attach files
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setExtrasOpen(false)
+                imageInputRef.current?.click()
+              }}
+              className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[13px] text-text-2 hover:bg-white/[0.05] cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              Add image
+            </button>
+            {micSupported && (
+              <button
+                type="button"
+                onClick={() => {
+                  setExtrasOpen(false)
+                  toggleRecording()
+                }}
+                className={`flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[13px] cursor-pointer transition-colors ${
+                  recording ? 'text-danger bg-danger/[0.06]' : 'text-text-2 hover:bg-white/[0.05]'
+                }`}
+                style={recording ? { animation: 'mic-pulse 1.5s ease-out infinite', fontFamily: 'inherit' } : { fontFamily: 'inherit' }}
+              >
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                  <rect x="9" y="2" width="6" height="11" rx="3" />
+                  <path d="M5 10a7 7 0 0 0 14 0" />
+                  <line x1="12" y1="19" x2="12" y2="22" />
+                </svg>
+                {recording ? 'Stop microphone' : 'Use microphone'}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                setExtrasOpen(false)
+                void useChatStore.getState().clearContext()
+              }}
+              disabled={streaming}
+              className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[13px] text-text-2 hover:bg-white/[0.05] cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                <line x1="2" y1="12" x2="22" y2="12" />
+                <polyline points="8 8 4 12 8 16" />
+                <polyline points="16 8 20 12 16 16" />
+              </svg>
+              New context window
+            </button>
+            {pluginChatActions.length > 0 && (
+              <>
+                <div className="mx-2 my-1 h-px bg-white/[0.06]" />
+                <div className="px-3 pb-1 pt-1 text-[10px] font-700 uppercase tracking-[0.08em] text-text-3/50">
+                  Quick actions
+                </div>
+                {pluginChatActions.map((action) => (
+                  <Tooltip key={action.id}>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setExtrasOpen(false)
+                          if (action.action === 'message') onSend(action.value)
+                          else if (action.action === 'link') window.open(action.value, '_blank')
+                        }}
+                        className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[13px] text-emerald-300 hover:bg-emerald-500/[0.08] cursor-pointer transition-colors"
+                        style={{ fontFamily: 'inherit' }}
+                      >
+                        {action.label}
+                      </button>
+                    </TooltipTrigger>
+                    {action.tooltip && <TooltipContent>{action.tooltip}</TooltipContent>}
+                  </Tooltip>
+                ))}
+              </>
+            )}
+          </div>
+        )}
+
         <input
           ref={fileInputRef}
           type="file"

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

@@ -24,6 +24,7 @@ import { SecretsList } from '@/components/secrets/secrets-list'
 import { SecretSheet } from '@/components/secrets/secret-sheet'
 import { ProviderList } from '@/components/providers/provider-list'
 import { ProviderSheet } from '@/components/providers/provider-sheet'
+import { GatewaySheet } from '@/components/gateways/gateway-sheet'
 import { SkillList } from '@/components/skills/skill-list'
 import { SkillSheet } from '@/components/skills/skill-sheet'
 import { ConnectorList } from '@/components/connectors/connector-list'
@@ -1097,6 +1098,7 @@ export function AppLayout() {
       <TaskSheet />
       <SecretSheet />
       <ProviderSheet />
+      <GatewaySheet />
       <SkillSheet />
       <ConnectorSheet />
       <ChatroomSheet />

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>
   )
 }