@swarmclawai/swarmclaw 0.2.0

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

@@ -0,0 +1,339 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { getMemory, updateMemory, deleteMemory } from '@/lib/memory'
+import type { MemoryEntry } from '@/types'
+
+const CATEGORIES = ['note', 'fact', 'preference', 'finding', 'learning', 'general']
+
+export function MemoryDetail() {
+  const selectedId = useAppStore((s) => s.selectedMemoryId)
+  const setSelectedId = useAppStore((s) => s.setSelectedMemoryId)
+  const triggerRefresh = useAppStore((s) => s.triggerMemoryRefresh)
+  const agents = useAppStore((s) => s.agents)
+  const sessions = useAppStore((s) => s.sessions)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+  const setActiveView = useAppStore((s) => s.setActiveView)
+
+  const [entry, setEntry] = useState<MemoryEntry | null>(null)
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [category, setCategory] = useState('note')
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  // Load memory entry when selection changes
+  useEffect(() => {
+    if (!selectedId) {
+      setEntry(null)
+      return
+    }
+
+    let cancelled = false
+    getMemory(selectedId, { depth: 0 })
+      .then((found) => {
+        if (cancelled || !found) return
+
+        const resolved = Array.isArray(found)
+          ? found.find((item) => item.id === selectedId) || found[0] || null
+          : found
+
+        if (!resolved) return
+
+        setEntry(resolved)
+        setTitle(resolved.title)
+        setContent(resolved.content)
+        setCategory(resolved.category || 'note')
+        setDirty(false)
+      })
+      .catch((err) => console.error('Memory operation failed:', err))
+
+    return () => {
+      cancelled = true
+    }
+  }, [selectedId])
+
+  const handleSave = useCallback(async () => {
+    if (!entry || !dirty) return
+    setSaving(true)
+    try {
+      const updated = await updateMemory(entry.id, { title, content, category })
+      setEntry(updated)
+      setDirty(false)
+      triggerRefresh()
+    } catch { /* ignore */ }
+    setSaving(false)
+  }, [entry, title, content, category, dirty])
+
+  const handleDelete = useCallback(async () => {
+    if (!entry) return
+    await deleteMemory(entry.id)
+    setSelectedId(null)
+    triggerRefresh()
+  }, [entry])
+
+  const handleNavigateToSession = useCallback(() => {
+    if (!entry?.sessionId) return
+    setActiveView('sessions')
+    setCurrentSession(entry.sessionId)
+  }, [entry])
+
+  if (!entry) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+        <div className="w-14 h-14 rounded-[16px] bg-white/[0.03] flex items-center justify-center mb-2">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/60">
+            <ellipse cx="12" cy="5" rx="9" ry="3" />
+            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+          </svg>
+        </div>
+        <p className="font-display text-[17px] font-600 text-text-2">Memory</p>
+        <p className="text-[13px] text-text-3/70 max-w-[300px]">
+          Select a memory from the sidebar to view and edit it
+        </p>
+      </div>
+    )
+  }
+
+  const agentName = entry.agentId ? (agents[entry.agentId]?.name || entry.agentId) : null
+  const sessionName = entry.sessionId ? (sessions[entry.sessionId]?.name || entry.sessionId) : null
+  const imagePath = entry.image?.path || entry.imagePath || null
+  const imageUrl = imagePath
+    ? imagePath.startsWith('data/memory-images/')
+      ? `/api/memory-images/${imagePath.split('/').pop()}`
+      : imagePath
+    : null
+
+  const inputClass = "w-full px-4 py-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] text-text outline-none transition-all duration-200 placeholder:text-text-3/70 focus:border-accent-bright/20 focus:bg-white/[0.03]"
+
+  return (
+    <div className="flex-1 flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="shrink-0 px-6 py-4 border-b border-white/[0.04] flex items-center gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2.5">
+            <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]">
+              {category}
+            </span>
+            <h2 className="font-display text-[16px] font-700 truncate tracking-[-0.02em]">{title || 'Untitled'}</h2>
+          </div>
+          <div className="flex items-center gap-3 mt-1">
+            {agentName && (
+              <span className="text-[11px] text-text-3/50 flex items-center gap-1">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
+                {agentName}
+              </span>
+            )}
+            {sessionName && (
+              <button
+                onClick={handleNavigateToSession}
+                className="text-[11px] text-accent-bright/50 hover:text-accent-bright flex items-center gap-1 bg-transparent border-none cursor-pointer p-0 transition-colors"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
+                {sessionName}
+              </button>
+            )}
+            <span className="text-[10px] text-text-3/50 font-mono tabular-nums">
+              {new Date(entry.createdAt).toLocaleString()}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {dirty && (
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="px-4 py-2 rounded-[10px] bg-[#6366F1] text-white text-[12px] font-600
+                cursor-pointer border-none transition-all hover:brightness-110 active:scale-[0.97]
+                disabled:opacity-50 shadow-[0_2px_10px_rgba(99,102,241,0.2)]"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </button>
+          )}
+          <button
+            onClick={() => setConfirmDelete(true)}
+            className="p-2 rounded-[8px] text-text-3/70 hover:text-red-400 hover:bg-red-400/[0.06]
+              cursor-pointer transition-all bg-transparent border-none"
+            title="Delete memory"
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+              <path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Edit form */}
+      <div className="flex-1 overflow-y-auto px-6 py-5">
+        <div className="max-w-[640px] space-y-5">
+          {/* Title */}
+          <div>
+            <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => { setTitle(e.target.value); setDirty(true) }}
+              className={`${inputClass} text-[15px] font-600`}
+              style={{ fontFamily: 'inherit' }}
+              placeholder="Memory title"
+            />
+          </div>
+
+          {/* Category */}
+          <div>
+            <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Category</label>
+            <div className="flex gap-1.5 flex-wrap">
+              {CATEGORIES.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => { setCategory(c); setDirty(true) }}
+                  className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all border-none
+                    ${category === c
+                      ? 'bg-accent-soft text-accent-bright'
+                      : 'bg-white/[0.03] text-text-3 hover:text-text-2 hover:bg-white/[0.05]'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {c}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Content */}
+          <div>
+            <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Content</label>
+            <textarea
+              value={content}
+              onChange={(e) => { setContent(e.target.value); setDirty(true) }}
+              placeholder="Memory content..."
+              rows={12}
+              className={`${inputClass} text-[14px] resize-y min-h-[200px] leading-relaxed`}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+
+          {imageUrl && (
+            <div>
+              <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Image</label>
+              <a href={imageUrl} target="_blank" rel="noreferrer" className="inline-block rounded-[12px] overflow-hidden border border-white/[0.08]">
+                <img src={imageUrl} alt={entry.title} className="max-w-[320px] max-h-[220px] object-cover block" />
+              </a>
+            </div>
+          )}
+
+          {entry.references?.length ? (
+            <div>
+              <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">References</label>
+              <div className="space-y-2">
+                {entry.references.map((ref, idx) => (
+                  <div key={`${ref.type}-${ref.path || ref.title || idx}`} className="text-[12px] rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2">
+                    <div className="text-text-2/70">
+                      <span className="uppercase text-[10px] tracking-[0.06em] mr-1">{ref.type}</span>
+                      {ref.path || ref.title || '(no path)'}
+                    </div>
+                    {(ref.projectName || ref.projectRoot || ref.note || typeof ref.exists === 'boolean') && (
+                      <div className="text-text-3/55 mt-1">
+                        {ref.projectName ? `project: ${ref.projectName} ` : ''}
+                        {ref.projectRoot ? `root: ${ref.projectRoot} ` : ''}
+                        {typeof ref.exists === 'boolean' ? (ref.exists ? 'exists' : 'missing') : ''}
+                        {ref.note ? ` — ${ref.note}` : ''}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {entry.linkedMemoryIds?.length ? (
+            <div>
+              <label className="block text-[11px] font-600 text-text-3/60 uppercase tracking-[0.06em] mb-2">Linked Memories</label>
+              <div className="flex flex-wrap gap-1.5">
+                {entry.linkedMemoryIds.map((id) => (
+                  <button
+                    key={id}
+                    onClick={() => setSelectedId(id)}
+                    className="px-2.5 py-1 rounded-[8px] text-[11px] font-mono bg-white/[0.04] border border-white/[0.08] text-accent-bright/70 hover:text-accent-bright cursor-pointer transition-colors"
+                  >
+                    {id}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {/* Metadata */}
+          <div className="pt-4 border-t border-white/[0.04]">
+            <div className="grid grid-cols-2 gap-4 text-[11px]">
+              <div>
+                <span className="text-text-3/70 block mb-1">ID</span>
+                <span className="text-text-3/60 font-mono">{entry.id}</span>
+              </div>
+              <div>
+                <span className="text-text-3/70 block mb-1">Created</span>
+                <span className="text-text-3/60 font-mono">{new Date(entry.createdAt).toLocaleString()}</span>
+              </div>
+              <div>
+                <span className="text-text-3/70 block mb-1">Updated</span>
+                <span className="text-text-3/60 font-mono">{new Date(entry.updatedAt).toLocaleString()}</span>
+              </div>
+              {entry.agentId && (
+                <div>
+                  <span className="text-text-3/70 block mb-1">Agent</span>
+                  <span className="text-text-3/60 font-mono">{agentName}</span>
+                </div>
+              )}
+              {entry.sessionId && (
+                <div>
+                  <span className="text-text-3/70 block mb-1">Session</span>
+                  <button
+                    onClick={handleNavigateToSession}
+                    className="text-accent-bright/60 hover:text-accent-bright font-mono bg-transparent border-none cursor-pointer p-0 text-[11px] transition-colors"
+                  >
+                    {sessionName}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </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>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,198 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { searchMemory } from '@/lib/memory'
+import { useAppStore } from '@/stores/use-app-store'
+import { MemoryCard } from './memory-card'
+import type { MemoryEntry } from '@/types'
+
+interface Props {
+  inSidebar?: boolean
+  onSelect?: () => void
+}
+
+export function MemoryList({ inSidebar: _inSidebar, onSelect }: Props) {
+  void _inSidebar
+  const selectedMemoryId = useAppStore((s) => s.selectedMemoryId)
+  const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
+  const refreshKey = useAppStore((s) => s.memoryRefreshKey)
+  const agents = useAppStore((s) => s.agents)
+  const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+  const setMemoryAgentFilter = useAppStore((s) => s.setMemoryAgentFilter)
+  const [search, setSearch] = useState('')
+  const [entries, setEntries] = useState<MemoryEntry[]>([])
+  const [loaded, setLoaded] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const searchRef = useRef(search)
+
+  const load = useCallback(async (query: string) => {
+    try {
+      const results = await searchMemory({ q: query || undefined })
+      setEntries(Array.isArray(results) ? results : [])
+      setError(null)
+    } catch {
+      setError('Unable to load memories right now.')
+    }
+    setLoaded(true)
+  }, [])
+
+  useEffect(() => {
+    searchRef.current = search
+  }, [search])
+
+  useEffect(() => {
+    const timer = setTimeout(() => { void load(searchRef.current) }, 0)
+    return () => clearTimeout(timer)
+  }, [refreshKey, load])
+
+  useEffect(() => {
+    const timer = setTimeout(() => { void load(search) }, 300)
+    return () => clearTimeout(timer)
+  }, [search, load])
+
+  // Derive unique agents and categories
+  const uniqueAgents = useMemo(() => {
+    const map = new Map<string, number>()
+    for (const e of entries) {
+      const key = e.agentId || '_global'
+      map.set(key, (map.get(key) || 0) + 1)
+    }
+    return map
+  }, [entries])
+
+  const uniqueCategories = useMemo(() => {
+    const cats = new Set<string>()
+    for (const e of entries) cats.add(e.category || 'note')
+    return Array.from(cats).sort()
+  }, [entries])
+
+  const filtered = useMemo(() => {
+    return entries.filter((e) => {
+      if (memoryAgentFilter && (e.agentId || null) !== memoryAgentFilter) return false
+      if (categoryFilter && (e.category || 'note') !== categoryFilter) return false
+      return true
+    })
+  }, [entries, memoryAgentFilter, categoryFilter])
+
+  const hasMultipleAgents = uniqueAgents.size > 1 || (uniqueAgents.size === 1 && !uniqueAgents.has('_global'))
+
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto">
+      {/* Search */}
+      <div className="px-3 py-2 shrink-0">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search memories..."
+          className="w-full px-3 py-2 rounded-[10px] border border-white/[0.04] bg-surface text-text
+            text-[12px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+
+      {/* Agent filter tabs */}
+      {entries.length > 0 && hasMultipleAgents && (
+        <div className="px-3 pb-1.5 shrink-0">
+          <div className="flex gap-1 flex-wrap">
+            <button
+              onClick={() => setMemoryAgentFilter(null)}
+              className={`px-2.5 py-1 rounded-[7px] text-[10px] font-600 cursor-pointer transition-all
+                ${!memoryAgentFilter ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              All ({entries.length})
+            </button>
+            {Array.from(uniqueAgents.entries()).map(([agentId, count]) => {
+              const id = agentId === '_global' ? null : agentId
+              const name = id ? (agents[id]?.name || id.slice(0, 8)) : 'Global'
+              return (
+                <button
+                  key={agentId}
+                  onClick={() => setMemoryAgentFilter(id)}
+                  className={`px-2.5 py-1 rounded-[7px] text-[10px] font-600 cursor-pointer transition-all truncate max-w-[120px]
+                    ${memoryAgentFilter === id ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {name} ({count})
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Category filter */}
+      {entries.length > 0 && uniqueCategories.length > 1 && (
+        <div className="px-3 pb-1.5 shrink-0">
+          <div className="flex gap-1 flex-wrap">
+            <button
+              onClick={() => setCategoryFilter('')}
+              className={`px-2 py-0.5 rounded-[6px] text-[9px] font-600 cursor-pointer transition-all uppercase tracking-wider
+                ${!categoryFilter ? 'bg-white/[0.06] text-text-2' : 'bg-transparent text-text-3/70 hover:text-text-3'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              all
+            </button>
+            {uniqueCategories.map((c) => (
+              <button
+                key={c}
+                onClick={() => setCategoryFilter(categoryFilter === c ? '' : c)}
+                className={`px-2 py-0.5 rounded-[6px] text-[9px] font-600 cursor-pointer transition-all uppercase tracking-wider
+                  ${categoryFilter === c ? 'bg-white/[0.06] text-text-2' : 'bg-transparent text-text-3/70 hover:text-text-3'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {c}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Memory cards */}
+      {filtered.length > 0 ? (
+        <div className="flex flex-col gap-0.5 px-2 pb-4">
+          {filtered.map((e) => (
+            <MemoryCard
+              key={e.id}
+              entry={e}
+              active={e.id === selectedMemoryId}
+              agentName={e.agentId ? (agents[e.agentId]?.name || null) : null}
+              onClick={() => {
+                setSelectedMemoryId(e.id)
+                onSelect?.()
+              }}
+            />
+          ))}
+        </div>
+      ) : error ? (
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+          <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load memories</p>
+          <p className="text-[12px] text-text-3/60">{error}</p>
+          <button
+            onClick={() => { void load(search) }}
+            className="px-3 py-1.5 rounded-[8px] bg-accent-soft text-accent-bright text-[12px] font-600 cursor-pointer border-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Retry
+          </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">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+              <ellipse cx="12" cy="5" rx="9" ry="3" />
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+            </svg>
+          </div>
+          <p className="font-display text-[15px] font-600 text-text-2">
+            {memoryAgentFilter ? 'No memories for this agent' : 'No memories yet'}
+          </p>
+          <p className="text-[13px] text-text-3/50">AI agents store knowledge here</p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { createMemory } from '@/lib/memory'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+
+export function MemorySheet() {
+  const open = useAppStore((s) => s.memorySheetOpen)
+  const setOpen = useAppStore((s) => s.setMemorySheetOpen)
+  const triggerRefresh = useAppStore((s) => s.triggerMemoryRefresh)
+
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+
+  const onClose = () => {
+    setOpen(false)
+    setTitle('')
+    setContent('')
+  }
+
+  const handleSave = async () => {
+    await createMemory({
+      title: title.trim() || 'Untitled',
+      category: 'general',
+      content,
+      agentId: null,
+      sessionId: null,
+    })
+    triggerRefresh()
+    onClose()
+  }
+
+  const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <div className="mb-10">
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">New Memory</h2>
+        <p className="text-[14px] text-text-3">Store a piece of knowledge</p>
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Title</label>
+        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Memory title" className={inputClass} style={{ fontFamily: 'inherit' }} />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Content</label>
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="Memory content..."
+          rows={6}
+          className={`${inputClass} resize-y min-h-[150px]`}
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+        <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
+          Cancel
+        </button>
+        <button onClick={handleSave} disabled={!title.trim()} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110" style={{ fontFamily: 'inherit' }}>
+          Save
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

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

@@ -0,0 +1,60 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
+  const plugins = useAppStore((s) => s.plugins)
+  const loadPlugins = useAppStore((s) => s.loadPlugins)
+  const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
+  const setEditingPluginFilename = useAppStore((s) => s.setEditingPluginFilename)
+
+  useEffect(() => {
+    loadPlugins()
+  }, [])
+
+  const pluginList = Object.values(plugins)
+
+  const handleEdit = (filename: string) => {
+    setEditingPluginFilename(filename)
+    setPluginSheetOpen(true)
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+      {pluginList.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-[13px] text-text-3/60">No plugins installed</p>
+          <button
+            onClick={() => { setEditingPluginFilename(null); setPluginSheetOpen(true) }}
+            className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + Add Plugin
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {pluginList.map((plugin) => (
+            <button
+              key={plugin.filename}
+              onClick={() => handleEdit(plugin.filename)}
+              className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+            >
+              <div className="flex items-center justify-between mb-1">
+                <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
+                <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full shrink-0 ml-2 ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
+                  {plugin.enabled ? 'Enabled' : 'Disabled'}
+                </span>
+              </div>
+              <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
+              {plugin.description && (
+                <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}