@swarmclawai/swarmclaw 1.3.4 → 1.3.6

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

@@ -5,7 +5,7 @@ import { api } from '@/lib/app/api-client'
 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 type { KnowledgeSourceDetail, KnowledgeSourceKind } 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'
@@ -20,195 +20,263 @@ interface UploadResult {
 }
 
 export function KnowledgeSheet() {
-  const open = useAppStore((s) => s.knowledgeSheetOpen)
-  const setOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
-  const editingId = useAppStore((s) => s.editingKnowledgeId)
-  const agents = useAppStore((s) => s.agents)
-  const loadAgents = useAppStore((s) => s.loadAgents)
-
+  const open = useAppStore((state) => state.knowledgeSheetOpen)
+  const setOpen = useAppStore((state) => state.setKnowledgeSheetOpen)
+  const editingId = useAppStore((state) => state.editingKnowledgeId)
+  const setEditingKnowledgeId = useAppStore((state) => state.setEditingKnowledgeId)
+  const setSelectedKnowledgeSourceId = useAppStore((state) => state.setSelectedKnowledgeSourceId)
+  const triggerKnowledgeRefresh = useAppStore((state) => state.triggerKnowledgeRefresh)
+  const agents = useAppStore((state) => state.agents)
+  const loadAgents = useAppStore((state) => state.loadAgents)
+
+  const [kind, setKind] = useState<KnowledgeSourceKind>('manual')
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [tags, setTags] = useState('')
   const [scope, setScope] = useState<'global' | 'agent'>('global')
   const [agentIds, setAgentIds] = useState<string[]>([])
+  const [sourceUrl, setSourceUrl] = useState('')
+  const [sourcePath, setSourcePath] = useState('')
+  const [sourceLabel, setSourceLabel] = useState('')
   const [saving, setSaving] = useState(false)
-  const [uploadedFile, setUploadedFile] = useState<{ name: string; url: string; size: number } | null>(null)
   const [uploading, setUploading] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
+  const [uploadedFile, setUploadedFile] = useState<{ name: string; url: string; size: number | null } | null>(null)
+
   const dragCounter = useRef(0)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const agentList = Object.values(agents)
 
   useEffect(() => {
     if (open) loadAgents()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    if (editingId) {
-      void api<MemoryEntry>('GET', `/knowledge/${editingId}`).then((entry) => {
-        setTitle(entry.title)
-        setContent(entry.content)
-        const meta = entry.metadata as { tags?: string[]; scope?: 'global' | 'agent'; agentIds?: string[] } | undefined
-        setTags(meta?.tags?.join(', ') || '')
-        setScope(meta?.scope || 'global')
-        setAgentIds(meta?.agentIds || [])
-      }).catch(() => {
-        setOpen(false)
-      })
-    } else {
-      setTitle('')
-      setContent('')
-      setTags('')
-      setScope('global')
-      setAgentIds([])
-      setUploadedFile(null)
-    }
-  }, [open, editingId, setOpen])
+  }, [loadAgents, open])
 
-  const onClose = () => {
-    setOpen(false)
+  const resetForm = useCallback(() => {
+    setKind('manual')
     setTitle('')
     setContent('')
     setTags('')
     setScope('global')
     setAgentIds([])
+    setSourceUrl('')
+    setSourcePath('')
+    setSourceLabel('')
     setUploadedFile(null)
     setIsDragging(false)
     dragCounter.current = 0
-  }
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    if (!editingId) {
+      resetForm()
+      return
+    }
+
+    resetForm()
+    void api<KnowledgeSourceDetail>('GET', `/knowledge/sources/${editingId}`).then((detail) => {
+      const { source } = detail
+      setKind(source.kind)
+      setTitle(source.title)
+      setContent(source.content || '')
+      setTags(source.tags.join(', '))
+      setScope(source.scope)
+      setAgentIds(source.agentIds)
+      setSourceUrl(source.sourceUrl || '')
+      setSourcePath(source.sourcePath || '')
+      setSourceLabel(source.sourceLabel || '')
+      setUploadedFile(source.kind === 'file'
+        ? { name: source.sourceLabel || source.title, url: source.sourceUrl || '', size: null }
+        : null)
+    }).catch(() => {
+      toast.error('Unable to load this knowledge source')
+      setOpen(false)
+    })
+  }, [editingId, open, resetForm, setOpen])
+
+  const onClose = useCallback(() => {
+    setOpen(false)
+    setEditingKnowledgeId(null)
+    resetForm()
+  }, [resetForm, setEditingKnowledgeId, setOpen])
 
   const parseTags = (raw: string): string[] =>
-    raw.split(',').map((t) => t.trim()).filter(Boolean)
+    raw.split(',').map((tag) => tag.trim()).filter(Boolean)
+
+  const toggleAgent = (id: string) => {
+    setAgentIds((current) => current.includes(id) ? current.filter((agentId) => agentId !== id) : [...current, id])
+  }
 
   const handleUpload = useCallback(async (file: File) => {
     setUploading(true)
     try {
-      const res = await fetch('/api/knowledge/upload', {
+      const response = await fetch('/api/knowledge/upload', {
         method: 'POST',
         headers: { 'X-Filename': file.name },
         body: file,
       })
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: 'Upload failed' }))
-        toast.error(err.error || 'Upload failed')
+
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({ error: 'Upload failed' }))
+        toast.error(payload.error || 'Upload failed')
         return
       }
-      const result: UploadResult = await res.json()
-      if (!title.trim()) setTitle(result.title)
+
+      const result: UploadResult = await response.json()
+      setKind('file')
+      setTitle((current) => current.trim() || result.title)
       setContent(result.content)
+      setSourcePath(result.filePath)
+      setSourceUrl(result.url)
+      setSourceLabel(result.filename)
       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)
+      if (ext) {
+        setTags((current) => current.includes(ext) ? current : current ? `${current}, ${ext}` : ext)
       }
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : 'Upload failed')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Upload failed')
     } finally {
       setUploading(false)
     }
-  }, [title, tags])
+  }, [])
 
-  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
+  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
     if (file) void handleUpload(file)
-    e.target.value = ''
+    event.target.value = ''
   }, [handleUpload])
 
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+  const handleDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
   }, [])
 
-  const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter.current++
-    if (e.dataTransfer.types.includes('Files')) setIsDragging(true)
+  const handleDragEnter = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dragCounter.current += 1
+    if (event.dataTransfer.types.includes('Files')) setIsDragging(true)
   }, [])
 
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter.current--
+  const handleDragLeave = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dragCounter.current -= 1
     if (dragCounter.current === 0) setIsDragging(false)
   }, [])
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+  const handleDrop = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
     dragCounter.current = 0
     setIsDragging(false)
-    const file = e.dataTransfer.files?.[0]
+    const file = event.dataTransfer.files?.[0]
     if (file) void handleUpload(file)
   }, [handleUpload])
 
-  const toggleAgent = (id: string) => {
-    setAgentIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])
-  }
-
-  const scopeHelperText = scope === 'global'
-    ? 'This knowledge will be accessible to all agents'
-    : agentIds.length === 0
-      ? 'Select which agents can access this knowledge'
-      : `${agentIds.length} agent(s) selected`
-
   const handleSave = async () => {
+    if (kind === 'manual' && !content.trim()) {
+      toast.error('Manual knowledge needs content')
+      return
+    }
+    if (kind === 'file' && !sourcePath && !content.trim()) {
+      toast.error('Upload a file or provide extracted content')
+      return
+    }
+    if (kind === 'url' && !sourceUrl.trim()) {
+      toast.error('A URL is required for URL knowledge')
+      return
+    }
+
     setSaving(true)
     try {
       const payload = {
-        title: title.trim() || 'Untitled',
+        kind,
+        title: title.trim(),
         content,
         tags: parseTags(tags),
         scope,
         agentIds: scope === 'agent' ? agentIds : [],
+        sourceUrl: sourceUrl.trim() || undefined,
+        sourcePath: sourcePath.trim() || undefined,
+        sourceLabel: sourceLabel.trim() || undefined,
+        metadata: uploadedFile?.size != null
+          ? { fileSize: uploadedFile.size }
+          : undefined,
       }
 
-      if (editingId) {
-        await api('PUT', `/knowledge/${editingId}`, payload)
-        toast.success('Knowledge entry updated')
-      } else {
-        await api('POST', '/knowledge', payload)
-        toast.success('Knowledge entry created')
-      }
+      const detail = editingId
+        ? await api<KnowledgeSourceDetail>('PUT', `/knowledge/sources/${editingId}`, payload)
+        : await api<KnowledgeSourceDetail>('POST', '/knowledge/sources', payload)
 
+      setSelectedKnowledgeSourceId(detail.source.id)
+      triggerKnowledgeRefresh()
+      toast.success(editingId ? 'Knowledge source updated' : 'Knowledge source created')
       onClose()
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : 'Failed to save knowledge')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to save knowledge')
     } finally {
       setSaving(false)
     }
   }
 
-  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"
-
-  const formatSize = (bytes: number) => {
+  const formatSize = (bytes: number | null) => {
+    if (bytes == null) return null
     if (bytes < 1024) return `${bytes} B`
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
   }
 
+  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'
+  const scopeHelperText = scope === 'global'
+    ? 'This source will be searchable across the whole fleet'
+    : agentIds.length === 0
+      ? 'Select which agents should receive this source during retrieval'
+      : `${agentIds.length} agent(s) selected`
+
+  const canSave = kind === 'manual'
+    ? Boolean(content.trim())
+    : kind === 'file'
+      ? Boolean(sourcePath || content.trim())
+      : Boolean(sourceUrl.trim())
+
   return (
     <BottomSheet open={open} onClose={onClose}>
       <div className="mb-10">
         <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
-          {editingId ? 'Edit Knowledge' : 'New Knowledge'}
+          {editingId ? 'Edit Knowledge Source' : 'New Knowledge Source'}
         </h2>
         <p className="text-[14px] text-text-3">
-          {editingId ? 'Update this knowledge entry' : 'Add shared knowledge for agents — type or upload a document'}
+          Manual notes, uploaded files, and imported URLs all index into the same knowledge library.
         </p>
       </div>
 
-      {/* Document upload zone — only show when creating new */}
-      {!editingId && (
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Source Type</label>
+        <div className="grid grid-cols-3 gap-2">
+          {(['manual', 'file', 'url'] as const).map((sourceKind) => (
+            <button
+              key={sourceKind}
+              onClick={() => setKind(sourceKind)}
+              className={`py-3 rounded-[14px] text-[13px] font-600 border transition-all cursor-pointer ${
+                kind === sourceKind
+                  ? 'border-accent-bright/25 bg-accent-soft text-accent-bright'
+                  : 'border-white/[0.08] bg-white/[0.02] text-text-3 hover:text-text-2'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {sourceKind === 'manual' ? 'Manual' : sourceKind === 'file' ? 'File' : 'URL'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {kind === 'file' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            Upload Document
-          </label>
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Upload Document</label>
 
           {uploadedFile ? (
             <div className="flex items-center gap-3 px-4 py-3 rounded-[14px] border border-emerald-500/20 bg-emerald-500/[0.04]">
@@ -219,19 +287,24 @@ export function KnowledgeSheet() {
               </svg>
               <div className="flex-1 min-w-0">
                 <p className="text-[13px] text-text font-500 truncate">{uploadedFile.name}</p>
-                <p className="text-[11px] text-text-3/60">{formatSize(uploadedFile.size)} — content extracted</p>
+                <p className="text-[11px] text-text-3/60">
+                  {formatSize(uploadedFile.size) ? `${formatSize(uploadedFile.size)} • ` : ''}content extracted
+                </p>
               </div>
               <button
                 onClick={() => {
                   setUploadedFile(null)
+                  setSourcePath('')
+                  setSourceUrl('')
+                  setSourceLabel('')
                   setContent('')
-                  setTitle('')
                 }}
                 className="p-1.5 rounded-[8px] text-text-3 hover:text-red-400 hover:bg-red-400/10 border-none bg-transparent cursor-pointer transition-colors"
                 aria-label="Remove uploaded file"
               >
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                  <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
                 </svg>
               </button>
             </div>
@@ -242,12 +315,11 @@ export function KnowledgeSheet() {
               onDragLeave={handleDragLeave}
               onDrop={handleDrop}
               onClick={() => fileInputRef.current?.click()}
-              className={`flex flex-col items-center gap-3 px-6 py-8 rounded-[14px] border-2 border-dashed cursor-pointer transition-all duration-200
-                ${isDragging
+              className={`flex flex-col items-center gap-3 px-6 py-8 rounded-[14px] border-2 border-dashed cursor-pointer transition-all duration-200 ${
+                isDragging
                   ? 'border-accent-bright/50 bg-accent-soft/20'
                   : 'border-white/[0.08] bg-white/[0.02] hover:border-white/[0.15] hover:bg-white/[0.03]'
-                }
-                ${uploading ? 'opacity-60 pointer-events-none' : ''}`}
+              } ${uploading ? 'opacity-60 pointer-events-none' : ''}`}
             >
               {uploading ? (
                 <>
@@ -266,7 +338,7 @@ export function KnowledgeSheet() {
                       {isDragging ? 'Drop document here' : 'Drop a document or click to browse'}
                     </p>
                     <p className="text-[11px] text-text-3/50 mt-1">
-                      Supports .txt, .md, .csv, .json, .pdf, code files, and more
+                      Supports text, code, structured files, and PDFs
                     </p>
                   </div>
                 </>
@@ -284,12 +356,29 @@ export function KnowledgeSheet() {
         </div>
       )}
 
+      {kind === 'url' && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Source URL</label>
+          <input
+            type="url"
+            value={sourceUrl}
+            onChange={(event) => setSourceUrl(event.target.value)}
+            placeholder="https://example.com/docs/article"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+          <p className="text-[11px] text-text-3/55 mt-1.5 pl-1">
+            Save to fetch, clean, and index the page. You can also edit the extracted text below before saving again.
+          </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)}
+          onChange={(event) => setTitle(event.target.value)}
           placeholder="Knowledge title"
           className={inputClass}
           style={{ fontFamily: 'inherit' }}
@@ -298,7 +387,7 @@ export function KnowledgeSheet() {
 
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Content
+          Indexed Content
           {content.length > 0 && (
             <span className="ml-2 text-text-3/40 font-mono text-[10px] normal-case tracking-normal">
               {content.length.toLocaleString()} chars
@@ -307,10 +396,10 @@ export function KnowledgeSheet() {
         </label>
         <textarea
           value={content}
-          onChange={(e) => setContent(e.target.value)}
-          placeholder="Knowledge content..."
-          rows={6}
-          className={`${inputClass} resize-y min-h-[150px]`}
+          onChange={(event) => setContent(event.target.value)}
+          placeholder={kind === 'manual' ? 'Knowledge content...' : 'Extracted content appears here after import'}
+          rows={8}
+          className={`${inputClass} resize-y min-h-[180px]`}
           style={{ fontFamily: 'inherit' }}
         />
       </div>
@@ -320,7 +409,7 @@ export function KnowledgeSheet() {
         <input
           type="text"
           value={tags}
-          onChange={(e) => setTags(e.target.value)}
+          onChange={(event) => setTags(event.target.value)}
           placeholder="api, docs, internal (comma-separated)"
           className={inputClass}
           style={{ fontFamily: 'inherit' }}
@@ -330,16 +419,16 @@ export function KnowledgeSheet() {
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Scope</label>
         <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
-          {(['global', 'agent'] as const).map((s) => (
+          {(['global', 'agent'] as const).map((nextScope) => (
             <button
-              key={s}
-              onClick={() => setScope(s)}
+              key={nextScope}
+              onClick={() => setScope(nextScope)}
               className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
-                scope === s ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+                scope === nextScope ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
               }`}
               style={{ fontFamily: 'inherit' }}
             >
-              {s === 'global' ? 'Global' : 'Specific'}
+              {nextScope === 'global' ? 'Global' : 'Specific'}
             </button>
           ))}
         </div>
@@ -389,7 +478,7 @@ export function KnowledgeSheet() {
         </button>
         <button
           onClick={() => { void handleSave() }}
-          disabled={!title.trim() || saving}
+          disabled={!canSave || saving}
           className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright 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' }}
         >

package/src/components/memory/dream-history.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import type { DreamCycle } from '@/types'
+
+interface Props {
+  agentId: string
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  const sec = Math.round(ms / 1000)
+  if (sec < 60) return `${sec}s`
+  const min = Math.floor(sec / 60)
+  const remSec = sec % 60
+  return remSec > 0 ? `${min}m ${remSec}s` : `${min}m`
+}
+
+function timeAgo(ts: number, now: number): string {
+  const diff = now - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
+const statusColors: Record<string, string> = {
+  completed: 'bg-emerald-400/10 text-emerald-300',
+  running: 'bg-amber-400/10 text-amber-300',
+  pending: 'bg-amber-400/10 text-amber-300',
+  failed: 'bg-red-400/10 text-red-300',
+}
+
+export function DreamHistory({ agentId }: Props) {
+  const [cycles, setCycles] = useState<DreamCycle[]>([])
+  const [loading, setLoading] = useState(true)
+  const [triggering, setTriggering] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [now] = useState(() => Date.now())
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const res = await fetch(`/api/memory/dream?agentId=${encodeURIComponent(agentId)}&limit=10`)
+      const data = await res.json() as { ok: boolean; cycles?: DreamCycle[]; error?: string }
+      if (data.ok && Array.isArray(data.cycles)) {
+        setCycles(data.cycles)
+      } else {
+        setError(data.error || 'Failed to load dream cycles')
+      }
+    } catch {
+      setError('Unable to reach the server')
+    } finally {
+      setLoading(false)
+    }
+  }, [agentId])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const handleTrigger = async () => {
+    try {
+      setTriggering(true)
+      setError(null)
+      const res = await fetch('/api/memory/dream', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentId }),
+      })
+      const data = await res.json() as { ok: boolean; error?: string }
+      if (!data.ok) {
+        setError(data.error || 'Dream trigger failed')
+      }
+      await load()
+    } catch {
+      setError('Unable to trigger dream cycle')
+    } finally {
+      setTriggering(false)
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <h4 className="font-display text-[14px] font-600 text-text">Dream History</h4>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => { void load() }}
+            disabled={loading}
+            className="px-2.5 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-600 text-text-3 hover:bg-white/[0.04] hover:text-text-2 transition-all cursor-pointer disabled:opacity-50"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Refresh
+          </button>
+          <button
+            type="button"
+            onClick={() => { void handleTrigger() }}
+            disabled={triggering}
+            className="px-2.5 py-1.5 rounded-[8px] bg-accent-soft text-accent-bright text-[11px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-50"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {triggering ? 'Running...' : 'Trigger Dream'}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <p className="text-[12px] text-red-400/80 leading-[1.5]">{error}</p>
+      )}
+
+      {loading && cycles.length === 0 ? (
+        <p className="text-[12px] text-text-3/60 py-4 text-center">Loading dream cycles...</p>
+      ) : cycles.length === 0 ? (
+        <p className="text-[12px] text-text-3/60 py-4 text-center">No dream cycles yet. Trigger one manually or enable dreaming in agent settings.</p>
+      ) : (
+        <div className="space-y-2">
+          {cycles.map((cycle) => (
+            <div
+              key={cycle.id}
+              className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3.5 py-3"
+            >
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className={`px-1.5 py-0.5 rounded-[5px] text-[9px] font-700 uppercase tracking-[0.08em] ${statusColors[cycle.status] || 'bg-white/[0.04] text-text-3/75'}`}>
+                  {cycle.status}
+                </span>
+                <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">
+                  {cycle.trigger}
+                </span>
+                {cycle.status === 'completed' && cycle.startedAt && cycle.completedAt && (
+                  <span className="text-[10px] text-text-3/50 font-mono tabular-nums">
+                    {formatDuration(cycle.completedAt - cycle.startedAt)}
+                  </span>
+                )}
+                <span className="ml-auto text-[10px] text-text-3/50 tabular-nums font-mono">
+                  {timeAgo(cycle.startedAt, now)}
+                </span>
+              </div>
+              {cycle.status === 'completed' && cycle.result && (
+                <p className="mt-1.5 text-[11px] text-text-3/70 leading-[1.5]">
+                  {cycle.result.decayed} decayed, {cycle.result.pruned} pruned, {cycle.result.promoted} promoted, {cycle.result.consolidated} consolidated
+                </p>
+              )}
+              {cycle.status === 'failed' && cycle.error && (
+                <p className="mt-1.5 text-[11px] text-red-400/70 leading-[1.5] line-clamp-2">{cycle.error}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}