+
+
- {/* Login Form */}
+ {/* Login Card */}
-
- Ushadow Dashboard v0.1.0
+ {/* Info Card */}
+
+
+ New to Ushadow? Your administrator will provide you with access credentials.
diff --git a/ushadow/frontend/src/pages/MemoryDetailPage.tsx b/ushadow/frontend/src/pages/MemoryDetailPage.tsx
new file mode 100644
index 00000000..8896211d
--- /dev/null
+++ b/ushadow/frontend/src/pages/MemoryDetailPage.tsx
@@ -0,0 +1,548 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Brain, Calendar, Tag, MessageSquare, Edit2, Trash2, AlertCircle, Database, Copy, Check, ExternalLink } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { unifiedMemoriesApi, memoriesApi, type ConversationMemory } from '../services/api'
+import { useConversationDetail } from '../hooks/useConversationDetail'
+import ConfirmDialog from '../components/ConfirmDialog'
+
+interface ConversationLink {
+ conversation_id: string
+ title: string
+ created_at: string
+ source: 'chronicle' | 'mycelia'
+}
+
+interface RelatedMemory {
+ id: string
+ memory: string
+ categories: string[]
+ created_at: number
+ state: string
+}
+
+interface AccessLogEntry {
+ id: string
+ app_name: string
+ accessed_at: string
+}
+
+export default function MemoryDetailPage() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+ const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+ const [copiedId, setCopiedId] = useState(false)
+
+ // Fetch memory details using unified backend API
+ const { data: memory, isLoading, error } = useQuery({
+ queryKey: ['memory', id],
+ queryFn: async () => {
+ if (!id) throw new Error('Memory ID is required')
+ const response = await unifiedMemoriesApi.getMemoryById(id)
+ return response.data
+ },
+ enabled: !!id,
+ })
+
+ // Fetch related memories (only for openmemory source)
+ const { data: relatedMemories, isLoading: relatedLoading } = useQuery({
+ queryKey: ['related-memories', id],
+ queryFn: async () => {
+ if (!id || !memory) return []
+ // Extract user_id from metadata
+ const userId = memory.metadata?.user_id || memory.metadata?.chronicle_user_email || 'default'
+ try {
+ const memories = await memoriesApi.getRelatedMemories(userId, id)
+ return memories
+ } catch (err) {
+ console.error('Failed to fetch related memories:', err)
+ return []
+ }
+ },
+ enabled: !!id && !!memory && memory.source === 'openmemory',
+ })
+
+ // Fetch access logs (only for openmemory source)
+ const { data: accessLogs, isLoading: logsLoading } = useQuery({
+ queryKey: ['memory-access-logs', id],
+ queryFn: async () => {
+ if (!id) return []
+ try {
+ const result = await memoriesApi.getAccessLogs(id, 1, 10)
+ return result.logs
+ } catch (err) {
+ console.error('Failed to fetch access logs:', err)
+ return []
+ }
+ },
+ enabled: !!id && memory?.source === 'openmemory',
+ })
+
+ // Derive conversation link from metadata
+ const conversationId = memory?.metadata?.source_id
+ const conversationSource = memory?.metadata ? (
+ memory.metadata.conversation_source ||
+ (memory.metadata.app_name?.toLowerCase().includes('mycelia') ? 'mycelia' : 'chronicle')
+ ) as 'chronicle' | 'mycelia' : 'chronicle'
+
+ // Fetch full conversation details to get title and summary
+ const { conversation, isLoading: conversationLoading } = useConversationDetail(
+ conversationId || '',
+ conversationSource,
+ { enabled: !!conversationId }
+ )
+
+ const handleDelete = async () => {
+ if (!id || !memory) return
+
+ try {
+ // For now, show message that delete needs implementation
+ alert('Memory deletion is not yet implemented for unified memories API')
+ setShowDeleteDialog(false)
+ } catch (err) {
+ console.error('Failed to delete memory:', err)
+ alert('Failed to delete memory')
+ }
+ }
+
+ const handleCopyId = async () => {
+ if (id) {
+ await navigator.clipboard.writeText(id)
+ setCopiedId(true)
+ setTimeout(() => setCopiedId(false), 2000)
+ }
+ }
+
+ const formatDate = (dateString: string) => {
+ const timestamp = dateString.includes('T') || dateString.includes('-')
+ ? new Date(dateString).getTime()
+ : parseInt(dateString) * 1000
+ return new Date(timestamp).toLocaleString()
+ }
+
+ const formatAccessDate = (dateString: string) => {
+ return new Date(dateString + 'Z').toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ })
+ }
+
+ // Extract categories from metadata
+ // Debug: log memory object to see structure
+ if (memory) {
+ console.log('[MemoryDetailPage] Memory object:', memory)
+ console.log('[MemoryDetailPage] Metadata:', memory.metadata)
+ console.log('[MemoryDetailPage] Categories from metadata:', memory.metadata?.categories)
+ }
+ const categories = memory?.metadata?.categories || []
+ console.log('[MemoryDetailPage] Final categories:', categories)
+
+ // Source badge colors
+ const sourceColors = {
+ openmemory: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
+ chronicle: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+ mycelia: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
+ }
+
+ // Category colors
+ const categoryColors: Record
= {
+ personal: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
+ work: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+ health: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
+ finance: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300',
+ travel: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
+ education: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300',
+ preferences: 'bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300',
+ relationships: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
+ }
+
+ if (isLoading) {
+ return (
+
+ )
+ }
+
+ if (error || !memory) {
+ return (
+
+
+
+
+
+
+
+
+ Failed to load memory
+
+
+ {error ? String(error) : 'Memory not found'}
+
+
+
+
+
+ {/* Back button */}
+
+
+ {/* Main layout: 2/3 content + 1/3 sidebar */}
+
+ {/* Main content (2/3) */}
+
+ {/* Memory card */}
+
+ {/* Header */}
+
+
+
+
+ Memory
+
+ #{id?.slice(0, 6)}
+
+
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+ {/* Memory text with accent border */}
+
+
+ {/* Categories and metadata row */}
+
+ {/* Categories */}
+
+ {categories.length > 0 && (
+ <>
+
+ {categories.map((category: string, idx: number) => (
+
+ {category}
+
+ ))}
+
+ )}
+
+
+ {/* Created by */}
+ {memory.metadata?.app_name && (
+
+ Created by:
+
+
+ {memory.metadata.app_name}
+
+
+ )}
+
+
+ {/* Metadata section */}
+ {memory.metadata && Object.keys(memory.metadata).length > 0 && (
+
+
+ Metadata
+
+
+
+ {JSON.stringify(memory.metadata, null, 2)}
+
+
+
+ )}
+
+ {/* Additional info */}
+
+
+
+
+
Created
+
+ {formatDate(memory.created_at)}
+
+
+
+
+
+
+
+
Source
+
+ {memory.source}
+
+
+
+
+ {memory.score !== null && memory.score !== undefined && (
+
+
+
+
Relevance
+
+ {(memory.score * 100).toFixed(1)}%
+
+
+
+ )}
+
+
+
+
+ {/* Linked Conversations */}
+ {conversationId && (
+
+
+
+
+ Linked Conversation
+
+
+
+ {conversationLoading ? (
+
+
Loading conversation...
+
+ ) : conversation ? (
+
navigate(`/conversations/${conversationId}?source=${conversationSource}`)}
+ data-testid="conversation-link-0"
+ >
+
+
+ {/* Tags above title */}
+
+ {categories.length > 0 && (
+ <>
+ {categories.slice(0, 3).map((category: string, idx: number) => (
+
+ {category}
+
+ ))}
+ {categories.length > 3 && (
+
+ +{categories.length - 3}
+
+ )}
+
+ )}
+
+ {conversationSource === 'chronicle' ? 'Chronicle' : 'Mycelia'}
+
+
+
+ {/* Title */}
+
+ {conversation.title || 'Untitled Conversation'}
+
+
+
+ {/* Summary */}
+ {conversation.summary && (
+
+ {conversation.summary}
+
+ )}
+
+ {/* Date */}
+
+ {formatDate(conversation.created_at || memory.created_at)}
+
+
+
+
+ ) : (
+
+
+ Conversation details not available
+
+
+ )}
+
+ )}
+
+
+ {/* Sidebar (1/3) */}
+
+ {/* Access Log */}
+
+
+
Access Log
+
+
+ {logsLoading ? (
+
+ Loading access logs...
+
+ ) : accessLogs && accessLogs.length > 0 ? (
+
+ {accessLogs.map((entry: AccessLogEntry, index: number) => (
+
+
+
+
+ {index < accessLogs.length - 1 && (
+
+ )}
+
+
+ {entry.app_name}
+
+
+ {formatAccessDate(entry.accessed_at)}
+
+
+
+ ))}
+
+ ) : (
+
+ No access logs available
+
+ )}
+
+
+
+ {/* Related Memories */}
+
+
+
Related Memories
+
+
+ {relatedLoading ? (
+
+ Loading related memories...
+
+ ) : relatedMemories && relatedMemories.length > 0 ? (
+
+ {relatedMemories.map((relMem: RelatedMemory) => (
+
navigate(`/memories/${relMem.id}`)}
+ data-testid={`related-memory-${relMem.id}`}
+ >
+
+ {relMem.memory}
+
+
+ {relMem.categories.slice(0, 2).map((cat, idx) => (
+
+ {cat}
+
+ ))}
+ {relMem.state !== 'active' && (
+
+ {relMem.state}
+
+ )}
+
+
+ ))}
+
+ ) : (
+
+ No related memories found
+
+ )}
+
+
+
+
+
+ {/* Delete Confirmation Dialog */}
+
setShowDeleteDialog(false)}
+ onConfirm={handleDelete}
+ title="Delete Memory?"
+ message="Are you sure you want to delete this memory? This action cannot be undone."
+ confirmLabel="Delete"
+ variant="danger"
+ />
+
Services
+
+ LEGACY
+
Configure providers and compose services
@@ -730,6 +733,29 @@ export default function ServicesPage() {