claude-memory-agent 2.1.0 → 2.2.0

package/dashboard.html

@@ -204,6 +204,27 @@
             border-radius: 50%;
             animation: pulse 2s infinite;
         }
+        .retry-btn {
+            background: transparent;
+            border: 1px solid currentColor;
+            color: inherit;
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
+            margin-left: 8px;
+            transition: all 0.2s ease;
+        }
+        .retry-btn:hover {
+            background: rgba(255,255,255,0.1);
+        }
+        .retry-btn.spinning i {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
         /* Main Content */
         .main-content {
             max-width: 1800px;
@@ -1489,6 +1510,243 @@
         .toast.success { border-left: 4px solid var(--accent-green); }
         .toast.error { border-left: 4px solid var(--accent-red); }
         .toast.info { border-left: 4px solid var(--accent-blue); }
+        /* Maintenance Tab */
+        .maintenance-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+            gap: 24px;
+        }
+        .maintenance-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+        }
+        .maintenance-card:hover {
+            border-color: var(--accent-blue);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+        }
+        .maintenance-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+        }
+        .maintenance-card.decay-card::before { background: var(--gradient-4); }
+        .maintenance-card.dedup-card::before { background: var(--gradient-3); }
+        .maintenance-card.tier1-card::before { background: var(--gradient-1); }
+        .maintenance-card-header {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            margin-bottom: 20px;
+        }
+        .maintenance-card-icon {
+            width: 48px; height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            flex-shrink: 0;
+        }
+        .maintenance-card-title {
+            font-size: 17px;
+            font-weight: 600;
+        }
+        .maintenance-card-subtitle {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+        .maintenance-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+        .maintenance-stat {
+            text-align: center;
+            padding: 12px 8px;
+            background: var(--bg-tertiary);
+            border-radius: 10px;
+            transition: all 0.2s;
+        }
+        .maintenance-stat:hover {
+            background: var(--bg-secondary);
+        }
+        .maintenance-stat-value {
+            font-size: 22px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+        .maintenance-stat-value.green { color: var(--accent-green); }
+        .maintenance-stat-value.yellow { color: var(--accent-yellow); }
+        .maintenance-stat-value.red { color: var(--accent-red); }
+        .maintenance-stat-value.blue { color: var(--accent-blue); }
+        .maintenance-stat-value.purple { color: var(--accent-purple); }
+        .maintenance-stat-value.cyan { color: var(--accent-cyan); }
+        .maintenance-stat-label {
+            font-size: 11px;
+            color: var(--text-secondary);
+            margin-top: 4px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .maintenance-actions {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .maintenance-btn {
+            padding: 10px 18px;
+            border-radius: 10px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            border: 1px solid var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .maintenance-btn:hover {
+            color: var(--text-primary);
+            border-color: var(--accent-blue);
+            background: rgba(88, 166, 255, 0.1);
+        }
+        .maintenance-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .maintenance-btn.primary {
+            background: var(--accent-blue);
+            color: white;
+            border-color: var(--accent-blue);
+        }
+        .maintenance-btn.primary:hover {
+            background: #4a9aef;
+            box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3);
+        }
+        .maintenance-btn.success {
+            background: var(--accent-green);
+            color: white;
+            border-color: var(--accent-green);
+        }
+        .maintenance-btn.success:hover {
+            background: #36a446;
+            box-shadow: 0 4px 15px rgba(63, 185, 80, 0.3);
+        }
+        .maintenance-btn .spinner-sm {
+            width: 14px; height: 14px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top: 2px solid currentColor;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            display: none;
+        }
+        .maintenance-btn.loading .spinner-sm { display: inline-block; }
+        .maintenance-btn.loading { pointer-events: none; opacity: 0.8; }
+        .maintenance-last-run {
+            margin-top: 16px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border-color);
+            font-size: 12px;
+            color: var(--text-muted);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .maintenance-last-run i { font-size: 11px; }
+        .dedup-results {
+            margin-top: 16px;
+            max-height: 250px;
+            overflow-y: auto;
+        }
+        .dedup-cluster {
+            background: var(--bg-tertiary);
+            border-radius: 10px;
+            padding: 12px 14px;
+            margin-bottom: 10px;
+            border: 1px solid transparent;
+            transition: all 0.2s;
+        }
+        .dedup-cluster:hover {
+            border-color: var(--border-color);
+        }
+        .dedup-cluster-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .dedup-cluster-score {
+            font-size: 12px;
+            font-weight: 600;
+            padding: 3px 10px;
+            border-radius: 12px;
+        }
+        .dedup-cluster-score.high {
+            background: rgba(248, 81, 73, 0.15);
+            color: var(--accent-red);
+        }
+        .dedup-cluster-score.medium {
+            background: rgba(210, 153, 34, 0.15);
+            color: var(--accent-yellow);
+        }
+        .dedup-cluster-item {
+            font-size: 12px;
+            color: var(--text-secondary);
+            padding: 4px 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .dedup-cluster-item i {
+            margin-right: 6px;
+            font-size: 10px;
+        }
+        .tier1-preview {
+            margin-top: 16px;
+            background: var(--bg-tertiary);
+            border-radius: 10px;
+            padding: 16px;
+            max-height: 300px;
+            overflow-y: auto;
+            font-size: 13px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
+            color: var(--text-secondary);
+            display: none;
+        }
+        .tier1-preview.visible { display: block; }
+        .tier1-preview h4 {
+            color: var(--text-primary);
+            margin-bottom: 8px;
+            font-family: inherit;
+        }
+        .health-ring {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 12px;
+        }
+        .health-ring svg {
+            transform: rotate(-90deg);
+        }
+        .health-ring-text {
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 16px;
+            font-weight: 700;
+        }
         /* Responsive */
         @media (max-width: 768px) {
             .header-content { flex-direction: column; gap: 16px; }
@@ -1851,6 +2109,9 @@
                 <div class="status-indicator" id="statusIndicator">
                     <span class="status-dot"></span>
                     <span id="statusText">Connected</span>
+                    <button id="retryBtn" class="retry-btn" style="display: none;" onclick="retryConnection()" title="Click to retry Ollama connection">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
                 </div>
                 <div class="ws-status disconnected" id="wsStatus" title="Connecting...">
                     <i class="fas fa-bolt"></i>
@@ -1897,6 +2158,12 @@
                 <div class="stat-value" id="eventsCount">0</div>
                 <div class="stat-label">Timeline Events</div>
             </div>
+            <div class="stat-card" style="--card-accent: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
+                <div class="stat-icon" style="background: rgba(63, 185, 80, 0.15); color: var(--accent-green);"><i class="fas fa-heartbeat"></i></div>
+                <div class="stat-value" id="healthScore">--</div>
+                <div class="stat-label">Health Score</div>
+                <div class="stat-change positive" id="healthAtRisk">0 at risk</div>
+            </div>
         </div>
 
         <!-- Tabs -->
@@ -1931,6 +2198,9 @@
             <div class="tab" data-tab="graph" onclick="switchTab('graph')">
                 <i class="fas fa-project-diagram"></i> Graph
             </div>
+            <div class="tab" data-tab="maintenance" onclick="switchTab('maintenance')">
+                <i class="fas fa-tools"></i> Maintenance
+            </div>
         </div>
 
         <!-- Agents Tab -->
@@ -2275,6 +2545,81 @@
                 </div>
             </div>
         </div>
+
+        <!-- Maintenance Tab -->
+        <div class="tab-content" id="maintenance-tab">
+            <div class="section-header">
+                <div class="section-title"><i class="fas fa-tools"></i> System Maintenance</div>
+                <div class="section-actions">
+                    <button class="btn btn-secondary" onclick="loadMaintenanceData()"><i class="fas fa-sync"></i> Refresh All</button>
+                </div>
+            </div>
+            <div class="maintenance-grid">
+                <div class="maintenance-card decay-card">
+                    <div class="maintenance-card-header">
+                        <div class="maintenance-card-icon" style="background: rgba(63, 185, 80, 0.15); color: var(--accent-green);"><i class="fas fa-hourglass-half"></i></div>
+                        <div>
+                            <div class="maintenance-card-title">Memory Decay</div>
+                            <div class="maintenance-card-subtitle">Type-based memory lifecycle management</div>
+                        </div>
+                    </div>
+                    <div class="maintenance-stats" id="decayStats">
+                        <div class="maintenance-stat"><div class="maintenance-stat-value green" id="decayPermanent">--</div><div class="maintenance-stat-label">Permanent</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value blue" id="decayDecayable">--</div><div class="maintenance-stat-label">Decayable</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value yellow" id="decayAtRisk">--</div><div class="maintenance-stat-label">At Risk</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value red" id="decayArchived">--</div><div class="maintenance-stat-label">Archived</div></div>
+                    </div>
+                    <div id="decayTypeBreakdown" style="margin-bottom: 16px;"></div>
+                    <div class="maintenance-actions">
+                        <button class="maintenance-btn primary" id="runDecayBtn" onclick="runDecayMaintenance()"><span class="spinner-sm"></span><i class="fas fa-play"></i> Run Decay Maintenance</button>
+                    </div>
+                    <div class="maintenance-last-run" id="decayLastRun"><i class="fas fa-clock"></i> <span>Last run: Never</span></div>
+                </div>
+                <div class="maintenance-card dedup-card">
+                    <div class="maintenance-card-header">
+                        <div class="maintenance-card-icon" style="background: rgba(88, 166, 255, 0.15); color: var(--accent-blue);"><i class="fas fa-clone"></i></div>
+                        <div>
+                            <div class="maintenance-card-title">Deduplication</div>
+                            <div class="maintenance-card-subtitle">Find and merge duplicate memories</div>
+                        </div>
+                    </div>
+                    <div class="maintenance-stats" id="dedupStats">
+                        <div class="maintenance-stat"><div class="maintenance-stat-value cyan" id="dedupClusters">--</div><div class="maintenance-stat-label">Clusters</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value purple" id="dedupPairs">--</div><div class="maintenance-stat-label">Pairs Found</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value green" id="dedupAutoMerged">--</div><div class="maintenance-stat-label">Auto-Merged</div></div>
+                    </div>
+                    <div class="maintenance-actions">
+                        <button class="maintenance-btn primary" id="scanDedupBtn" onclick="scanDuplicates()"><span class="spinner-sm"></span><i class="fas fa-search"></i> Scan Duplicates</button>
+                        <div style="display: flex; align-items: center; gap: 8px; margin-left: auto;">
+                            <label style="font-size: 12px; color: var(--text-secondary);">Threshold:</label>
+                            <input type="range" id="dedupThreshold" min="85" max="99" value="92" style="width: 80px; accent-color: var(--accent-blue);" oninput="document.getElementById('dedupThresholdVal').textContent = this.value + '%'">
+                            <span id="dedupThresholdVal" style="font-size: 12px; color: var(--accent-blue); font-weight: 600; min-width: 32px;">92%</span>
+                        </div>
+                    </div>
+                    <div class="dedup-results" id="dedupResults"></div>
+                </div>
+                <div class="maintenance-card tier1-card">
+                    <div class="maintenance-card-header">
+                        <div class="maintenance-card-icon" style="background: rgba(163, 113, 247, 0.15); color: var(--accent-purple);"><i class="fas fa-file-code"></i></div>
+                        <div>
+                            <div class="maintenance-card-title">Tier 1 Context (CLAUDE.md)</div>
+                            <div class="maintenance-card-subtitle">Auto-generate startup context from top memories</div>
+                        </div>
+                    </div>
+                    <div class="maintenance-stats" id="tier1Stats">
+                        <div class="maintenance-stat"><div class="maintenance-stat-value purple" id="tier1Entries">--</div><div class="maintenance-stat-label">Entries</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value blue" id="tier1Categories">--</div><div class="maintenance-stat-label">Categories</div></div>
+                        <div class="maintenance-stat"><div class="maintenance-stat-value cyan" id="tier1CharCount">--</div><div class="maintenance-stat-label">Characters</div></div>
+                    </div>
+                    <div class="maintenance-actions">
+                        <button class="maintenance-btn" id="previewTier1Btn" onclick="previewTier1()"><span class="spinner-sm"></span><i class="fas fa-eye"></i> Preview</button>
+                        <button class="maintenance-btn success" id="generateTier1Btn" onclick="generateTier1()"><span class="spinner-sm"></span><i class="fas fa-file-export"></i> Generate & Write</button>
+                    </div>
+                    <div class="tier1-preview" id="tier1Preview"></div>
+                    <div class="maintenance-last-run" id="tier1LastRun"><i class="fas fa-clock"></i> <span>Last generated: Never</span></div>
+                </div>
+            </div>
+        </div>
     </main>
 
     <div class="toast-container" id="toastContainer"></div>
@@ -2433,10 +2778,84 @@
         }
 
         function getActivityIcon(type) {
-            const icons = { context: 'clock', embed: 'microchip', store: 'save', search: 'search' };
+            const icons = { context: 'clock', embed: 'microchip', store: 'save', search: 'search', timeline: 'stream', decision: 'lightbulb', observation: 'eye', action: 'cog', error: 'exclamation-triangle', user_request: 'user', checkpoint: 'flag' };
             return icons[type] || 'circle';
         }
 
+        let activityLoaded = false;
+
+        async function loadActivity() {
+            // Only load historical data once; after that, WebSocket keeps it updated
+            if (activityLoaded && activityItems.length > 0) {
+                renderActivityFeed();
+                return;
+            }
+            const container = document.getElementById('activityItems');
+            container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+            try {
+                let url = `${API_URL}/api/timeline?limit=30`;
+                if (currentProject) {
+                    url += `&project_path=${encodeURIComponent(currentProject)}`;
+                }
+                const response = await fetch(url);
+                const data = await response.json();
+                if (data.success && data.events && data.events.length > 0) {
+                    // Map timeline events to activity items (without duplicating existing live items)
+                    const existingTitles = new Set(activityItems.map(a => a.title + a.detail));
+                    const historicalItems = data.events
+                        .filter(e => !existingTitles.has((e.event_type === 'decision' ? 'Decision' : e.event_type === 'observation' ? 'Observation' : e.event_type === 'action' ? 'Action' : e.event_type === 'error' ? 'Error' : 'Timeline Event') + (e.summary || '')))
+                        .map(e => {
+                            const typeMap = {
+                                'decision': { actType: 'context', title: 'Decision' },
+                                'observation': { actType: 'search', title: 'Observation' },
+                                'action': { actType: 'store', title: 'Action' },
+                                'user_request': { actType: 'context', title: 'User Request' },
+                                'error': { actType: 'embed', title: 'Error' },
+                                'checkpoint': { actType: 'context', title: 'Checkpoint' },
+                                'outcome': { actType: 'store', title: 'Outcome' },
+                                'thinking': { actType: 'search', title: 'Thinking' }
+                            };
+                            const mapped = typeMap[e.event_type] || { actType: 'context', title: e.event_type || 'Event' };
+                            return {
+                                type: mapped.actType,
+                                title: mapped.title,
+                                detail: (e.summary || '').substring(0, 100),
+                                time: new Date(e.created_at)
+                            };
+                        });
+                    // Merge: live items first, then historical (avoid duplicates)
+                    const merged = [...activityItems, ...historicalItems];
+                    // Sort by time descending
+                    merged.sort((a, b) => b.time - a.time);
+                    // Deduplicate by title+detail
+                    const seen = new Set();
+                    activityItems = merged.filter(item => {
+                        const key = item.title + item.detail;
+                        if (seen.has(key)) return false;
+                        seen.add(key);
+                        return true;
+                    }).slice(0, 50);
+                    activityLoaded = true;
+                    renderActivityFeed();
+                } else {
+                    activityLoaded = true;
+                    renderActivityFeed();
+                }
+            } catch (e) {
+                console.error('Error loading activity:', e);
+                container.innerHTML = `<div style="padding: 40px; text-align: center; color: var(--text-secondary);">
+                    <i class="fas fa-exclamation-triangle" style="font-size: 32px; opacity: 0.3; margin-bottom: 12px;"></i>
+                    <div>Failed to load activity</div>
+                </div>`;
+            }
+        }
+
+        async function loadActivityIfActive() {
+            if (document.getElementById('activity-tab').classList.contains('active')) {
+                await loadActivity();
+            }
+        }
+
         function formatRelativeTime(date) {
             const seconds = Math.floor((new Date() - date) / 1000);
             if (seconds < 60) return 'just now';
@@ -2493,6 +2912,8 @@
             initWebSocket();
             setInterval(sendHeartbeat, 30000);
             renderVectorPreview(Array.from({ length: 100 }, () => Math.random() * 0.5));
+            // Load health stats for top bar (non-blocking)
+            loadDecayStats().catch(() => {});
         });
 
         // Show/hide loading overlay
@@ -2583,12 +3004,15 @@
 
             // Hot reload all data for the project
             try {
+                // Reset activity cache when project changes so it reloads
+                activityLoaded = false;
                 await Promise.all([
                     loadProjectConfig(),
                     loadStats(),
                     loadMemoriesIfActive(),
                     loadPatternsIfActive(),
-                    loadTimelineIfActive()
+                    loadTimelineIfActive(),
+                    loadActivityIfActive()
                 ]);
                 renderAgents();
                 renderMcps();
@@ -2870,6 +3294,7 @@
             if (tabId === 'timeline') loadTimeline();
             if (tabId === 'memories') loadMemories();
             if (tabId === 'patterns') loadPatterns();
+            if (tabId === 'activity') loadActivity();
         }
 
         // Timeline
@@ -2880,30 +3305,31 @@
             const container = document.getElementById('timelineContainer');
             container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
             try {
-                const sessionRes = await fetch(`${API_URL}/api/sessions/${encodeURIComponent(currentProject)}`);
-                const sessionData = await sessionRes.json();
-                if (!sessionData.sessions?.length) {
-                    container.innerHTML = `<div class="timeline-empty"><i class="fas fa-stream"></i><div>No timeline events yet</div><div style="font-size: 12px; margin-top: 8px;">Events will appear here as you work</div></div>`;
-                    return;
+                // Use /api/timeline directly - queries the DB with optional filters.
+                // This replaces the broken session-lookup -> A2A -> skill chain which
+                // failed when currentProject was null ("All Projects") or when
+                // session_state rows had no matching project_path.
+                let url = `${API_URL}/api/timeline?limit=100`;
+                if (currentProject) {
+                    url += `&project_path=${encodeURIComponent(currentProject)}`;
                 }
-                const sessionId = sessionData.sessions[0].session_id;
-                const response = await fetch(`${API_URL}/a2a`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        jsonrpc: '2.0',
-                        id: Date.now(),
-                        method: 'tasks/send',
-                        params: { metadata: { skill_id: 'timeline_get', params: { session_id: sessionId, limit: 50 } } }
-                    })
-                });
+                if (timelineFilter && timelineFilter !== 'all') {
+                    url += `&event_type=${encodeURIComponent(timelineFilter)}`;
+                }
+                const response = await fetch(url);
                 const data = await response.json();
-                const result = JSON.parse(data.result?.artifacts?.[0]?.parts?.[0]?.text || '{}');
-                if (!result.events?.length) {
-                    container.innerHTML = `<div class="timeline-empty"><i class="fas fa-stream"></i><div>No timeline events yet</div></div>`;
+                const events = data.events || [];
+                if (!events.length) {
+                    container.innerHTML = `<div class="timeline-empty"><i class="fas fa-stream"></i><div>No timeline events yet</div><div style="font-size: 12px; margin-top: 8px;">Events will appear here as you work</div></div>`;
                     return;
                 }
-                const chains = buildCausalChains(result.events);
+                // Parse details field if stored as JSON string
+                events.forEach(e => {
+                    if (typeof e.details === 'string') {
+                        try { e.details = JSON.parse(e.details); } catch (_) {}
+                    }
+                });
+                const chains = buildCausalChains(events);
                 const filterHtml = `
                     <div class="timeline-filters">
                         <div class="timeline-filter-chip ${timelineFilter === 'all' ? 'active' : ''}" onclick="filterTimeline('all')"><i class="fas fa-layer-group"></i> All</div>
@@ -3222,32 +3648,81 @@
 
         // Health check
         async function checkHealth() {
+            const indicator = document.getElementById('statusIndicator');
+            const text = document.getElementById('statusText');
+            const retryBtn = document.getElementById('retryBtn');
+
             try {
                 const response = await fetch(`${API_URL}/health`);
                 const data = await response.json();
-                const indicator = document.getElementById('statusIndicator');
-                const text = document.getElementById('statusText');
+
                 if (data.status === 'healthy') {
                     indicator.style.borderColor = 'rgba(63, 185, 80, 0.3)';
                     indicator.style.background = 'rgba(63, 185, 80, 0.1)';
                     indicator.style.color = 'var(--accent-green)';
                     text.textContent = 'Connected';
+                    retryBtn.style.display = 'none';
+                } else if (data.status === 'degraded') {
+                    // Degraded mode - server is connected but some features limited
+                    indicator.style.borderColor = 'rgba(227, 179, 65, 0.3)';
+                    indicator.style.background = 'rgba(227, 179, 65, 0.1)';
+                    indicator.style.color = 'var(--accent-yellow)';
+                    text.textContent = 'Degraded';
+                    text.title = 'Server connected but Ollama is unavailable. Click retry to reconnect.';
+                    retryBtn.style.display = 'inline-block';
                 } else {
                     throw new Error('Unhealthy');
                 }
             } catch (e) {
-                const indicator = document.getElementById('statusIndicator');
-                const text = document.getElementById('statusText');
                 indicator.style.borderColor = 'rgba(248, 81, 73, 0.3)';
                 indicator.style.background = 'rgba(248, 81, 73, 0.1)';
                 indicator.style.color = 'var(--accent-red)';
                 text.textContent = 'Disconnected';
+                retryBtn.style.display = 'inline-block';
+            }
+        }
+
+        async function retryConnection() {
+            const retryBtn = document.getElementById('retryBtn');
+            const text = document.getElementById('statusText');
+
+            // Show spinning animation
+            retryBtn.classList.add('spinning');
+            text.textContent = 'Retrying...';
+
+            try {
+                const response = await fetch(`${API_URL}/health/retry`, { method: 'POST' });
+                const data = await response.json();
+
+                if (data.success) {
+                    showToast('Connection restored!', 'success');
+                } else {
+                    showToast(data.message || 'Still degraded', 'warning');
+                }
+            } catch (e) {
+                showToast('Retry failed: ' + e.message, 'error');
             }
+
+            retryBtn.classList.remove('spinning');
+            // Refresh health status
+            await checkHealth();
         }
 
         setInterval(checkHealth, 10000);
         checkHealth();
 
+        // Auto-retry in background every 30 seconds when degraded
+        setInterval(async () => {
+            const text = document.getElementById('statusText');
+            if (text && (text.textContent === 'Degraded' || text.textContent === 'Disconnected')) {
+                // Silent background retry
+                try {
+                    await fetch(`${API_URL}/health/retry`, { method: 'POST' });
+                    await checkHealth();
+                } catch (e) { /* ignore */ }
+            }
+        }, 30000);
+
         // Memory Detail Modal
         function showMemoryDetail(index) {
             const memory = currentMemories[index];
@@ -3309,7 +3784,10 @@
                         const time = new Date(s.ended_at || s.started_at).toLocaleTimeString();
                         const pending = s.pending_count || 0;
                         const project = s.project_name || s.project_path?.split(/[/\\]/).pop() || 'Unknown';
-                        return `<option value="${s.session_id}">[${date} ${time}] ${project} - ${s.memory_count} memories (${pending} pending)</option>`;
+                        const rawGoal = (s.current_goal || '').replace(/<[^>]*>/g, '').trim();
+                        const goal = rawGoal ? ' - ' + rawGoal.substring(0, 60) + (rawGoal.length > 60 ? '...' : '') : '';
+                        const memLabel = s.memory_count > 0 ? `${s.memory_count} memories` : 'no memories yet';
+                        return `<option value="${s.session_id}">[${date} ${time}] ${project} - ${memLabel}${pending > 0 ? ` (${pending} pending)` : ''}${goal}</option>`;
                     }).join('');
             } catch (e) {
                 console.error('Error loading sessions:', e);
@@ -4168,6 +4646,195 @@
 
         // ===== End Knowledge Graph =====
 
+        // ===== Maintenance Tab Functions =====
+        let maintenanceDataLoaded = false;
+
+        async function loadMaintenanceData() {
+            await Promise.all([loadDecayStats()]);
+            maintenanceDataLoaded = true;
+        }
+
+        async function loadDecayStats() {
+            try {
+                const response = await fetch(`${API_URL}/api/decay/stats`);
+                const data = await response.json();
+                if (data.success || data.permanent !== undefined) {
+                    const stats = data.data || data;
+                    document.getElementById('decayPermanent').textContent = stats.permanent ?? 0;
+                    document.getElementById('decayDecayable').textContent = stats.decayable ?? 0;
+                    document.getElementById('decayAtRisk').textContent = stats.at_risk ?? 0;
+                    document.getElementById('decayArchived').textContent = stats.archived ?? 0;
+                    const total = (stats.permanent || 0) + (stats.decayable || 0);
+                    const atRisk = stats.at_risk || 0;
+                    if (total > 0) {
+                        const healthPct = Math.round(((total - atRisk) / total) * 100);
+                        document.getElementById('healthScore').textContent = healthPct + '%';
+                        const healthEl = document.getElementById('healthAtRisk');
+                        healthEl.textContent = atRisk + ' at risk';
+                        if (atRisk > 0) {
+                            healthEl.className = 'stat-change';
+                            healthEl.style.background = 'rgba(210, 153, 34, 0.15)';
+                            healthEl.style.color = 'var(--accent-yellow)';
+                        } else {
+                            healthEl.className = 'stat-change positive';
+                            healthEl.style.background = '';
+                            healthEl.style.color = '';
+                        }
+                    }
+                    if (stats.by_type) { renderDecayTypeBreakdown(stats.by_type); }
+                    if (stats.last_run) {
+                        document.getElementById('decayLastRun').querySelector('span').textContent = 'Last run: ' + formatTimeAgo(stats.last_run);
+                    }
+                }
+            } catch (e) { console.error('Failed to load decay stats:', e); }
+        }
+
+        function renderDecayTypeBreakdown(byType) {
+            const container = document.getElementById('decayTypeBreakdown');
+            if (!byType || Object.keys(byType).length === 0) { container.innerHTML = ''; return; }
+            const typeColors = { decision: 'var(--accent-blue)', preference: 'var(--accent-pink)', code: 'var(--accent-green)', error: 'var(--accent-red)', session: 'var(--accent-cyan)', chunk: 'var(--accent-yellow)' };
+            const typeIcons = { decision: 'lightbulb', preference: 'sliders-h', code: 'code', error: 'bug', session: 'clock', chunk: 'puzzle-piece' };
+            let html = '<div style="display: flex; flex-wrap: wrap; gap: 8px;">';
+            for (const [type, count] of Object.entries(byType)) {
+                const color = typeColors[type] || 'var(--text-secondary)';
+                const icon = typeIcons[type] || 'circle';
+                html += `<div style="display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-tertiary); border-radius: 8px; font-size: 12px;">
+                    <i class="fas fa-${icon}" style="color: ${color}; font-size: 10px;"></i>
+                    <span style="color: var(--text-secondary);">${type}</span>
+                    <span style="color: ${color}; font-weight: 600;">${count}</span>
+                </div>`;
+            }
+            container.innerHTML = html + '</div>';
+        }
+
+        async function runDecayMaintenance() {
+            const btn = document.getElementById('runDecayBtn');
+            btn.classList.add('loading');
+            try {
+                const response = await fetch(`${API_URL}/api/decay/run`, { method: 'POST' });
+                const data = await response.json();
+                if (response.ok) {
+                    const result = data.data || data;
+                    showToast(`Decay complete: ${result.updated_count || result.updated || 0} updated, ${result.archived_count || result.archived || 0} archived`, 'success');
+                    await loadDecayStats();
+                } else { showToast('Decay failed: ' + (data.error || 'Unknown error'), 'error'); }
+            } catch (e) {
+                console.error('Decay maintenance failed:', e);
+                showToast('Failed to run decay maintenance', 'error');
+            } finally { btn.classList.remove('loading'); }
+        }
+
+        async function scanDuplicates() {
+            const btn = document.getElementById('scanDedupBtn');
+            btn.classList.add('loading');
+            const threshold = (document.getElementById('dedupThreshold').value / 100).toFixed(2);
+            try {
+                let url = `${API_URL}/api/curator/duplicates?similarity_threshold=${threshold}`;
+                if (currentProject) { url += `&project_path=${encodeURIComponent(currentProject)}`; }
+                const response = await fetch(url);
+                const data = await response.json();
+                const results = data.data || data;
+                const duplicates = results.duplicates || results.clusters || results || [];
+                const container = document.getElementById('dedupResults');
+                document.getElementById('dedupClusters').textContent = duplicates.length || 0;
+                let totalPairs = 0;
+                if (Array.isArray(duplicates)) { duplicates.forEach(d => { totalPairs += (d.pairs || d.memories || []).length || 1; }); }
+                document.getElementById('dedupPairs').textContent = totalPairs;
+                if (!duplicates.length) {
+                    container.innerHTML = `<div style="text-align: center; padding: 24px; color: var(--text-secondary);"><i class="fas fa-check-circle" style="color: var(--accent-green); font-size: 24px; margin-bottom: 8px;"></i><div>No duplicates found at ${Math.round(threshold * 100)}% threshold</div></div>`;
+                    showToast('No duplicates found', 'success');
+                    return;
+                }
+                let html = '';
+                duplicates.forEach((cluster, i) => {
+                    const similarity = cluster.similarity || cluster.score || 0;
+                    const simPct = Math.round(similarity * 100);
+                    const scoreClass = simPct >= 95 ? 'high' : 'medium';
+                    const memories = cluster.memories || cluster.pairs || [cluster];
+                    const content1 = (cluster.content_1 || memories[0]?.content || '').substring(0, 80);
+                    const content2 = (cluster.content_2 || memories[1]?.content || '').substring(0, 80);
+                    html += `<div class="dedup-cluster"><div class="dedup-cluster-header"><span style="font-size: 12px; color: var(--text-secondary);">Cluster ${i + 1}</span><span class="dedup-cluster-score ${scoreClass}">${simPct}% similar</span></div><div class="dedup-cluster-item"><i class="fas fa-file-alt" style="color: var(--accent-blue);"></i> ${escapeHtml(content1)}...</div><div class="dedup-cluster-item"><i class="fas fa-copy" style="color: var(--accent-yellow);"></i> ${escapeHtml(content2)}...</div></div>`;
+                });
+                container.innerHTML = html;
+                showToast(`Found ${duplicates.length} duplicate cluster(s)`, 'info');
+            } catch (e) {
+                console.error('Duplicate scan failed:', e);
+                showToast('Failed to scan duplicates', 'error');
+            } finally { btn.classList.remove('loading'); }
+        }
+
+        function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; }
+
+        async function previewTier1() {
+            const btn = document.getElementById('previewTier1Btn');
+            btn.classList.add('loading');
+            try {
+                const body = { dry_run: true };
+                if (currentProject) body.project_path = currentProject;
+                const response = await fetch(`${API_URL}/api/tier1/generate`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                const data = await response.json();
+                const result = data.data || data;
+                const preview = document.getElementById('tier1Preview');
+                if (result.content || result.tier1_content) {
+                    const content = result.content || result.tier1_content || '';
+                    preview.textContent = content;
+                    preview.classList.add('visible');
+                    const lines = content.split('\n').filter(l => l.trim());
+                    const categories = content.match(/^## /gm) || content.match(/^### /gm) || [];
+                    document.getElementById('tier1Entries').textContent = result.entry_count || lines.filter(l => l.startsWith('- ')).length || 0;
+                    document.getElementById('tier1Categories').textContent = result.category_count || categories.length || 0;
+                    document.getElementById('tier1CharCount').textContent = content.length;
+                    showToast('Preview generated', 'success');
+                } else {
+                    preview.textContent = 'No content generated. Store more high-importance memories first.';
+                    preview.classList.add('visible');
+                    showToast('No tier 1 content available', 'info');
+                }
+            } catch (e) {
+                console.error('Tier 1 preview failed:', e);
+                showToast('Failed to generate preview', 'error');
+            } finally { btn.classList.remove('loading'); }
+        }
+
+        async function generateTier1() {
+            const btn = document.getElementById('generateTier1Btn');
+            btn.classList.add('loading');
+            try {
+                const body = { dry_run: false };
+                if (currentProject) body.project_path = currentProject;
+                const response = await fetch(`${API_URL}/api/tier1/generate`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                const data = await response.json();
+                const result = data.data || data;
+                if (result.success !== false) {
+                    const content = result.content || result.tier1_content || '';
+                    const entries = content.split('\n').filter(l => l.startsWith('- ')).length;
+                    document.getElementById('tier1Entries').textContent = result.entry_count || entries;
+                    document.getElementById('tier1CharCount').textContent = content.length;
+                    document.getElementById('tier1LastRun').querySelector('span').textContent = 'Last generated: Just now';
+                    showToast(`CLAUDE.md updated with ${entries} entries`, 'success');
+                } else { showToast('Generation failed: ' + (result.error || 'Unknown error'), 'error'); }
+            } catch (e) {
+                console.error('Tier 1 generation failed:', e);
+                showToast('Failed to generate CLAUDE.md content', 'error');
+            } finally { btn.classList.remove('loading'); }
+        }
+
+        function formatTimeAgo(dateStr) {
+            if (!dateStr) return 'Never';
+            try {
+                const date = new Date(dateStr);
+                const now = new Date();
+                const diffMs = now - date;
+                const diffMins = Math.floor(diffMs / 60000);
+                if (diffMins < 1) return 'Just now';
+                if (diffMins < 60) return diffMins + 'm ago';
+                const diffHours = Math.floor(diffMins / 60);
+                if (diffHours < 24) return diffHours + 'h ago';
+                return Math.floor(diffHours / 24) + 'd ago';
+            } catch (e) { return dateStr; }
+        }
+        // ===== End Maintenance Tab =====
+
         // Hook into tab switching
         const originalSwitchTab = window.switchTab;
         window.switchTab = function(tab) {
@@ -4182,6 +4849,9 @@
                     loadCuratorStatus();
                 }, 100);
             }
+            if (tab === 'maintenance') {
+                loadMaintenanceData();
+            }
         };
 
         // Check URL hash for deep linking to review