npm - claude-memory-agent - Versions diffs - 2.0.0 - Mend

claude-memory-agent 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/.env.example +107 -0
package/README.md +200 -0
package/agent_card.py +512 -0
package/bin/cli.js +181 -0
package/bin/postinstall.js +216 -0
package/config.py +104 -0
package/dashboard.html +2689 -0
package/hooks/README.md +196 -0
package/hooks/__pycache__/auto-detect-response.cpython-312.pyc +0 -0
package/hooks/__pycache__/auto_capture.cpython-312.pyc +0 -0
package/hooks/__pycache__/session_end.cpython-312.pyc +0 -0
package/hooks/__pycache__/session_start.cpython-312.pyc +0 -0
package/hooks/auto-detect-response.py +348 -0
package/hooks/auto_capture.py +255 -0
package/hooks/detect-correction.py +173 -0
package/hooks/grounding-hook.py +348 -0
package/hooks/log-tool-use.py +234 -0
package/hooks/log-user-request.py +208 -0
package/hooks/pre-tool-decision.py +218 -0
package/hooks/problem-detector.py +343 -0
package/hooks/session_end.py +192 -0
package/hooks/session_start.py +227 -0
package/install.py +887 -0
package/main.py +2859 -0
package/manager.py +997 -0
package/package.json +55 -0
package/requirements.txt +8 -0
package/run_server.py +136 -0
package/services/__init__.py +50 -0
package/services/__pycache__/__init__.cpython-312.pyc +0 -0
package/services/__pycache__/agent_registry.cpython-312.pyc +0 -0
package/services/__pycache__/auth.cpython-312.pyc +0 -0
package/services/__pycache__/auto_inject.cpython-312.pyc +0 -0
package/services/__pycache__/claude_md_sync.cpython-312.pyc +0 -0
package/services/__pycache__/cleanup.cpython-312.pyc +0 -0
package/services/__pycache__/compaction_flush.cpython-312.pyc +0 -0
package/services/__pycache__/confidence.cpython-312.pyc +0 -0
package/services/__pycache__/daily_log.cpython-312.pyc +0 -0
package/services/__pycache__/database.cpython-312.pyc +0 -0
package/services/__pycache__/embeddings.cpython-312.pyc +0 -0
package/services/__pycache__/insights.cpython-312.pyc +0 -0
package/services/__pycache__/llm_analyzer.cpython-312.pyc +0 -0
package/services/__pycache__/memory_md_sync.cpython-312.pyc +0 -0
package/services/__pycache__/retry_queue.cpython-312.pyc +0 -0
package/services/__pycache__/timeline.cpython-312.pyc +0 -0
package/services/__pycache__/vector_index.cpython-312.pyc +0 -0
package/services/__pycache__/websocket.cpython-312.pyc +0 -0
package/services/agent_registry.py +753 -0
package/services/auth.py +331 -0
package/services/auto_inject.py +250 -0
package/services/claude_md_sync.py +275 -0
package/services/cleanup.py +667 -0
package/services/compaction_flush.py +447 -0
package/services/confidence.py +301 -0
package/services/daily_log.py +333 -0
package/services/database.py +2485 -0
package/services/embeddings.py +358 -0
package/services/insights.py +632 -0
package/services/llm_analyzer.py +595 -0
package/services/memory_md_sync.py +409 -0
package/services/retry_queue.py +453 -0
package/services/timeline.py +579 -0
package/services/vector_index.py +398 -0
package/services/websocket.py +257 -0
package/skills/__init__.py +6 -0
package/skills/__pycache__/__init__.cpython-312.pyc +0 -0
package/skills/__pycache__/admin.cpython-312.pyc +0 -0
package/skills/__pycache__/checkpoint.cpython-312.pyc +0 -0
package/skills/__pycache__/claude_md.cpython-312.pyc +0 -0
package/skills/__pycache__/cleanup.cpython-312.pyc +0 -0
package/skills/__pycache__/grounding.cpython-312.pyc +0 -0
package/skills/__pycache__/insights.cpython-312.pyc +0 -0
package/skills/__pycache__/natural_language.cpython-312.pyc +0 -0
package/skills/__pycache__/retrieve.cpython-312.pyc +0 -0
package/skills/__pycache__/search.cpython-312.pyc +0 -0
package/skills/__pycache__/state.cpython-312.pyc +0 -0
package/skills/__pycache__/store.cpython-312.pyc +0 -0
package/skills/__pycache__/summarize.cpython-312.pyc +0 -0
package/skills/__pycache__/timeline.cpython-312.pyc +0 -0
package/skills/__pycache__/verification.cpython-312.pyc +0 -0
package/skills/admin.py +469 -0
package/skills/checkpoint.py +198 -0
package/skills/claude_md.py +363 -0
package/skills/cleanup.py +241 -0
package/skills/grounding.py +801 -0
package/skills/insights.py +231 -0
package/skills/natural_language.py +277 -0
package/skills/retrieve.py +67 -0
package/skills/search.py +213 -0
package/skills/state.py +182 -0
package/skills/store.py +179 -0
package/skills/summarize.py +588 -0
package/skills/timeline.py +387 -0
package/skills/verification.py +391 -0
package/start_daemon.py +155 -0
package/test_automation.py +221 -0
package/test_complete.py +338 -0
package/test_full.py +322 -0
package/update_system.py +817 -0
package/verify_db.py +134 -0

package/dashboard.html ADDED Viewed

@@ -0,0 +1,2689 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Claude Memory Control Center</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-tertiary: #1a1a25;
+            --bg-card: #16161f;
+            --border-color: #2a2a3a;
+            --text-primary: #e6edf3;
+            --text-secondary: #8b949e;
+            --text-muted: #6e7681;
+            --accent-blue: #58a6ff;
+            --accent-green: #3fb950;
+            --accent-yellow: #d29922;
+            --accent-red: #f85149;
+            --accent-purple: #a371f7;
+            --accent-pink: #db61a2;
+            --accent-cyan: #39d4d4;
+            --accent-orange: #f0883e;
+            --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            --shadow-glow: 0 0 40px rgba(88, 166, 255, 0.15);
+        }
+        body {
+            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .bg-animation {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            z-index: -1;
+            opacity: 0.5;
+            background:
+                radial-gradient(ellipse at 20% 20%, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 80%, rgba(163, 113, 247, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 50% 50%, rgba(63, 185, 80, 0.05) 0%, transparent 60%);
+        }
+        /* Header */
+        .header {
+            background: rgba(18, 18, 26, 0.8);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border-color);
+            padding: 16px 32px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .header-content {
+            max-width: 1800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        .logo-icon {
+            width: 48px; height: 48px;
+            background: var(--gradient-1);
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: var(--shadow-glow);
+        }
+        .logo-text {
+            font-size: 22px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #fff 0%, #a8b4c4 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .logo-subtitle {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .project-dropdown { position: relative; }
+        .project-btn {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 12px 20px;
+            border-radius: 12px;
+            font-size: 14px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: all 0.2s;
+            min-width: 280px;
+        }
+        .project-btn:hover {
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 20px rgba(88, 166, 255, 0.1);
+        }
+        .project-btn i { color: var(--accent-blue); }
+        .project-menu {
+            position: absolute;
+            top: 100%; left: 0; right: 0;
+            margin-top: 8px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 8px;
+            display: none;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+        }
+        .project-menu.show {
+            display: block;
+            animation: slideDown 0.2s ease;
+        }
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .project-item {
+            padding: 12px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: all 0.15s;
+        }
+        .project-item:hover { background: var(--bg-tertiary); }
+        .project-item.active {
+            background: rgba(88, 166, 255, 0.15);
+            border-left: 3px solid var(--accent-blue);
+        }
+        .project-item-icon {
+            width: 36px; height: 36px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+        }
+        .project-item-info { flex: 1; }
+        .project-item-name { font-weight: 500; font-size: 14px; }
+        .project-item-stats { font-size: 11px; color: var(--text-secondary); }
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(63, 185, 80, 0.1);
+            border: 1px solid rgba(63, 185, 80, 0.3);
+            border-radius: 20px;
+            font-size: 13px;
+            color: var(--accent-green);
+        }
+        .ws-status {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .ws-status.connected {
+            background: rgba(63, 185, 80, 0.15);
+            border: 1px solid rgba(63, 185, 80, 0.4);
+            color: var(--accent-green);
+        }
+        .ws-status.connected i { animation: pulse 2s infinite; }
+        .ws-status.disconnected {
+            background: rgba(248, 81, 73, 0.15);
+            border: 1px solid rgba(248, 81, 73, 0.4);
+            color: var(--accent-red);
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .status-dot {
+            width: 8px; height: 8px;
+            background: var(--accent-green);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        /* Main Content */
+        .main-content {
+            max-width: 1800px;
+            margin: 0 auto;
+            padding: 32px;
+        }
+        /* Stats Row */
+        .stats-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 20px;
+            margin-bottom: 32px;
+        }
+        .stat-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+        }
+        .stat-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-glow);
+            border-color: var(--accent-blue);
+        }
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            background: var(--card-accent, var(--gradient-1));
+        }
+        .stat-icon {
+            width: 48px; height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            margin-bottom: 16px;
+        }
+        .stat-value {
+            font-size: 36px;
+            font-weight: 700;
+            margin-bottom: 4px;
+        }
+        .stat-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        .stat-change {
+            position: absolute;
+            top: 24px; right: 24px;
+            font-size: 12px;
+            padding: 4px 8px;
+            border-radius: 6px;
+        }
+        .stat-change.positive {
+            background: rgba(63, 185, 80, 0.15);
+            color: var(--accent-green);
+        }
+        /* Tabs */
+        .tabs {
+            display: flex;
+            gap: 4px;
+            margin-bottom: 24px;
+            background: var(--bg-secondary);
+            padding: 6px;
+            border-radius: 14px;
+            width: fit-content;
+            flex-wrap: wrap;
+        }
+        .tab {
+            padding: 10px 18px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            white-space: nowrap;
+        }
+        .tab:hover {
+            color: var(--text-primary);
+            background: var(--bg-tertiary);
+        }
+        .tab.active {
+            background: var(--accent-blue);
+            color: white;
+        }
+        .tab .count {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 11px;
+        }
+        .tab.active .count { background: rgba(255, 255, 255, 0.3); }
+        /* Category Filter */
+        .category-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+        }
+        .category-chip {
+            padding: 8px 16px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            border: 1px solid var(--border-color);
+            background: var(--bg-card);
+            color: var(--text-secondary);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .category-chip:hover {
+            border-color: var(--text-secondary);
+            color: var(--text-primary);
+        }
+        .category-chip.active {
+            border-color: var(--chip-color, var(--accent-blue));
+            background: rgba(88, 166, 255, 0.1);
+            color: var(--chip-color, var(--accent-blue));
+        }
+        .category-chip i { font-size: 14px; }
+        /* Search Bar */
+        .search-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 12px 20px;
+            margin-bottom: 24px;
+            max-width: 400px;
+        }
+        .search-bar i { color: var(--text-secondary); }
+        .search-bar input {
+            flex: 1;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 14px;
+            outline: none;
+        }
+        .search-bar input::placeholder { color: var(--text-muted); }
+        /* Agent Grid */
+        .agent-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 20px;
+        }
+        .agent-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+        .agent-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+        }
+        .agent-card.disabled { opacity: 0.5; }
+        .agent-card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 16px;
+        }
+        .agent-icon {
+            width: 48px; height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        .agent-toggle {
+            position: relative;
+            width: 52px; height: 28px;
+            background: var(--bg-tertiary);
+            border-radius: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            border: 1px solid var(--border-color);
+        }
+        .agent-toggle.active {
+            background: var(--accent-green);
+            border-color: var(--accent-green);
+        }
+        .agent-toggle::after {
+            content: '';
+            position: absolute;
+            top: 3px; left: 3px;
+            width: 20px; height: 20px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        .agent-toggle.active::after { left: 27px; }
+        .agent-name {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .agent-description {
+            font-size: 13px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+            margin-bottom: 16px;
+        }
+        .agent-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+        }
+        .agent-tag {
+            padding: 4px 10px;
+            background: var(--bg-tertiary);
+            border-radius: 6px;
+            font-size: 11px;
+            color: var(--text-secondary);
+        }
+        .agent-category-label {
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+        }
+        /* Config Cards */
+        .config-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            transition: all 0.2s;
+        }
+        .config-card:hover { border-color: var(--accent-blue); }
+        .config-icon {
+            width: 48px; height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            flex-shrink: 0;
+        }
+        .config-info { flex: 1; }
+        .config-name {
+            font-weight: 600;
+            font-size: 15px;
+            margin-bottom: 4px;
+        }
+        .config-desc {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        .config-trigger {
+            font-size: 11px;
+            color: var(--accent-purple);
+            margin-top: 4px;
+        }
+        /* Section Headers */
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .section-title {
+            font-size: 18px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .section-title i { color: var(--accent-blue); }
+        .section-actions {
+            display: flex;
+            gap: 12px;
+        }
+        .btn {
+            padding: 10px 20px;
+            border-radius: 10px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            border: none;
+        }
+        .btn-primary {
+            background: var(--accent-blue);
+            color: white;
+        }
+        .btn-primary:hover {
+            background: #4a9aef;
+            box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3);
+        }
+        .btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+        .btn-secondary:hover { background: var(--border-color); }
+        /* Tab Content */
+        .tab-content { display: none; }
+        .tab-content.active {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        /* Timeline Styles */
+        .timeline-container {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        .timeline-filters {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        .timeline-filter-chip {
+            padding: 6px 14px;
+            border-radius: 16px;
+            font-size: 12px;
+            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: 6px;
+        }
+        .timeline-filter-chip:hover,
+        .timeline-filter-chip.active {
+            border-color: var(--accent-blue);
+            color: var(--accent-blue);
+            background: rgba(88, 166, 255, 0.1);
+        }
+        .timeline-filter-divider {
+            width: 1px; height: 24px;
+            background: var(--border-color);
+            margin: 0 8px;
+        }
+        .timeline-time-filter {
+            padding: 6px 14px;
+            border-radius: 16px;
+            font-size: 12px;
+            cursor: pointer;
+            border: 1px solid var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+            transition: all 0.2s;
+        }
+        .timeline-time-filter:hover,
+        .timeline-time-filter.active {
+            border-color: var(--accent-purple);
+            color: var(--accent-purple);
+            background: rgba(163, 113, 247, 0.1);
+        }
+        .timeline-chain {
+            margin-bottom: 20px;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            transition: all 0.3s;
+        }
+        .timeline-chain.collapsed .timeline-children { display: none; }
+        .timeline-chain.collapsed .timeline-request { border-radius: 12px; }
+        .timeline-collapse-btn {
+            width: 24px; height: 24px;
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            font-size: 12px;
+        }
+        .timeline-collapse-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            color: var(--text-primary);
+        }
+        .timeline-chain.collapsed .timeline-collapse-btn i { transform: rotate(-90deg); }
+        .timeline-children-count {
+            font-size: 11px;
+            padding: 2px 8px;
+            border-radius: 10px;
+            background: rgba(88, 166, 255, 0.2);
+            color: var(--accent-blue);
+            margin-left: 8px;
+        }
+        .timeline-request {
+            background: linear-gradient(135deg, rgba(63, 185, 80, 0.15) 0%, rgba(63, 185, 80, 0.05) 100%);
+            border-left: 4px solid var(--accent-green);
+            padding: 16px 20px;
+        }
+        .timeline-request-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+        }
+        .timeline-request-icon {
+            width: 32px; height: 32px;
+            border-radius: 8px;
+            background: rgba(63, 185, 80, 0.2);
+            color: var(--accent-green);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .timeline-request-title {
+            font-weight: 600;
+            font-size: 15px;
+            flex: 1;
+        }
+        .timeline-request-time {
+            font-size: 11px;
+            color: var(--text-muted);
+        }
+        .timeline-request-goal {
+            font-size: 13px;
+            color: var(--text-secondary);
+            padding-left: 44px;
+        }
+        .timeline-children { padding: 8px 0; }
+        .timeline-event {
+            display: flex;
+            gap: 14px;
+            padding: 12px 20px;
+            position: relative;
+            transition: background 0.2s;
+        }
+        .timeline-event:hover { background: rgba(255, 255, 255, 0.02); }
+        .timeline-connector {
+            position: absolute;
+            left: 35px; top: 0; bottom: 0;
+            width: 2px;
+            background: var(--border-color);
+        }
+        .timeline-event:last-child .timeline-connector { height: 50%; }
+        .timeline-dot {
+            width: 20px; height: 20px;
+            border-radius: 50%;
+            flex-shrink: 0;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            color: white;
+        }
+        .timeline-content {
+            flex: 1;
+            min-width: 0;
+        }
+        .timeline-type-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            padding: 3px 10px;
+            border-radius: 12px;
+            margin-bottom: 6px;
+        }
+        .timeline-summary {
+            font-size: 14px;
+            margin-bottom: 6px;
+            line-height: 1.5;
+        }
+        .timeline-summary.truncated { cursor: pointer; }
+        .timeline-summary.truncated:hover { color: var(--accent-blue); }
+        .timeline-summary.expanded {
+            white-space: pre-wrap;
+            word-break: break-word;
+            background: var(--bg-tertiary);
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-family: 'SF Mono', Monaco, monospace;
+            font-size: 12px;
+        }
+        .timeline-details {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+            padding: 8px 12px;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+        }
+        .timeline-meta {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .timeline-time {
+            font-size: 11px;
+            color: var(--text-muted);
+        }
+        .timeline-confidence {
+            font-size: 10px;
+            padding: 3px 10px;
+            border-radius: 10px;
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+        .timeline-confidence.high {
+            background: rgba(63, 185, 80, 0.15);
+            color: var(--accent-green);
+        }
+        .timeline-anchor-badge {
+            font-size: 10px;
+            padding: 3px 10px;
+            border-radius: 10px;
+            background: rgba(57, 212, 212, 0.2);
+            color: var(--accent-cyan);
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .timeline-outcome-badge {
+            font-size: 11px;
+            padding: 4px 12px;
+            border-radius: 10px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .timeline-outcome-badge.success {
+            background: rgba(63, 185, 80, 0.2);
+            color: var(--accent-green);
+            border: 1px solid rgba(63, 185, 80, 0.4);
+        }
+        .timeline-outcome-badge.failed {
+            background: rgba(248, 81, 73, 0.2);
+            color: var(--accent-red);
+            border: 1px solid rgba(248, 81, 73, 0.4);
+        }
+        .timeline-event.anchor-event {
+            background: linear-gradient(135deg, rgba(57, 212, 212, 0.08) 0%, rgba(163, 113, 247, 0.05) 100%);
+            border-left: 3px solid var(--accent-cyan);
+            margin: 4px 8px;
+            border-radius: 8px;
+        }
+        .timeline-event.anchor-event .timeline-summary {
+            color: var(--accent-cyan);
+            font-weight: 500;
+        }
+        .timeline-file-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 4px 10px;
+            background: var(--bg-tertiary);
+            border-radius: 6px;
+            font-size: 11px;
+            font-family: 'SF Mono', Monaco, monospace;
+            color: var(--accent-blue);
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-top: 6px;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .timeline-file-link:hover { background: rgba(88, 166, 255, 0.15); }
+        .timeline-file-link i { flex-shrink: 0; }
+        .timeline-file-link.copied {
+            background: rgba(63, 185, 80, 0.2);
+            color: var(--accent-green);
+        }
+        .timeline-event.outcome-event {
+            background: linear-gradient(135deg, rgba(63, 185, 80, 0.08) 0%, transparent 100%);
+            border-left: 3px solid var(--accent-green);
+            margin: 4px 8px;
+            border-radius: 8px;
+        }
+        .timeline-event.outcome-event.failed {
+            background: linear-gradient(135deg, rgba(248, 81, 73, 0.08) 0%, transparent 100%);
+            border-left-color: var(--accent-red);
+        }
+        .dot-user_request { background: var(--accent-green); }
+        .dot-decision { background: var(--accent-purple); }
+        .dot-observation { background: var(--accent-yellow); }
+        .dot-action { background: var(--accent-blue); }
+        .dot-outcome { background: var(--accent-cyan); }
+        .dot-anchor { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); }
+        .dot-error { background: var(--accent-red); }
+        .badge-decision { background: rgba(163, 113, 247, 0.15); color: var(--accent-purple); }
+        .badge-observation { background: rgba(210, 153, 34, 0.15); color: var(--accent-yellow); }
+        .badge-action { background: rgba(88, 166, 255, 0.15); color: var(--accent-blue); }
+        .badge-outcome { background: rgba(57, 212, 212, 0.15); color: var(--accent-cyan); }
+        .badge-anchor { background: rgba(57, 212, 212, 0.2); color: var(--accent-cyan); }
+        .badge-error { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); }
+        .timeline-empty {
+            text-align: center;
+            padding: 60px;
+            color: var(--text-secondary);
+        }
+        .timeline-empty i {
+            font-size: 48px;
+            margin-bottom: 16px;
+            opacity: 0.3;
+        }
+        /* Memory Cards */
+        .memory-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 12px;
+            transition: all 0.2s;
+        }
+        .memory-card:hover {
+            border-color: var(--accent-blue);
+            transform: translateX(4px);
+        }
+        .memory-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 12px;
+        }
+        .memory-type-badge {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+        .memory-type-decision { background: rgba(163, 113, 247, 0.2); color: var(--accent-purple); }
+        .memory-type-error { background: rgba(248, 81, 73, 0.2); color: var(--accent-red); }
+        .memory-type-code { background: rgba(88, 166, 255, 0.2); color: var(--accent-blue); }
+        .memory-type-preference { background: rgba(240, 136, 62, 0.2); color: var(--accent-orange); }
+        .memory-type-chunk { background: rgba(139, 148, 158, 0.2); color: var(--text-secondary); }
+        .memory-type-session { background: rgba(63, 185, 80, 0.2); color: var(--accent-green); }
+        .memory-content {
+            font-size: 14px;
+            line-height: 1.6;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+        }
+        .memory-meta {
+            display: flex;
+            gap: 16px;
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+        .memory-meta span {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .memory-card { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
+        .memory-card:active { transform: scale(0.98); }
+        /* Memory Detail Modal */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .modal-overlay.show { display: flex; }
+        .modal-content {
+            background: var(--bg-secondary);
+            border-radius: 16px;
+            max-width: 700px;
+            width: 100%;
+            max-height: 80vh;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            border: 1px solid var(--border-color);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border-color);
+            background: var(--bg-tertiary);
+        }
+        .modal-header h3 {
+            margin: 0;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .modal-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 6px;
+        }
+        .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
+        .modal-body {
+            padding: 24px;
+            overflow-y: auto;
+            max-height: calc(80vh - 140px);
+        }
+        .modal-body pre {
+            background: var(--bg-tertiary);
+            padding: 16px;
+            border-radius: 8px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--text-primary);
+            margin: 16px 0;
+        }
+        .modal-meta {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 16px;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid var(--border-color);
+        }
+        .modal-meta-item {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .modal-meta-item label {
+            font-size: 11px;
+            text-transform: uppercase;
+            color: var(--text-muted);
+            font-weight: 600;
+        }
+        .modal-meta-item span {
+            font-size: 14px;
+            color: var(--text-primary);
+        }
+        /* Pattern Cards */
+        .pattern-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+        .pattern-card:hover { border-color: var(--accent-purple); }
+        .pattern-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+        .pattern-name {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--accent-purple);
+        }
+        .pattern-success-rate {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        .pattern-success-rate.high {
+            background: rgba(63, 185, 80, 0.2);
+            color: var(--accent-green);
+        }
+        .pattern-success-rate.medium {
+            background: rgba(210, 153, 34, 0.2);
+            color: var(--accent-yellow);
+        }
+        .pattern-solution {
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
+            padding: 12px;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+        }
+        .pattern-tags {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        .pattern-tag {
+            padding: 4px 10px;
+            background: rgba(163, 113, 247, 0.15);
+            color: var(--accent-purple);
+            border-radius: 6px;
+            font-size: 11px;
+        }
+        /* Embedding Visualizer */
+        .embedding-visualizer {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+            margin-bottom: 24px;
+        }
+        .embedding-visualizer h3 {
+            font-size: 16px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .embedding-visualizer h3 i { color: var(--accent-cyan); }
+        .pipeline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+        .pipeline-stage {
+            padding: 16px 24px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            text-align: center;
+            min-width: 120px;
+            transition: all 0.3s;
+        }
+        .pipeline-stage.active {
+            border-color: var(--accent-cyan);
+            box-shadow: 0 0 20px rgba(57, 212, 212, 0.2);
+        }
+        .pipeline-stage-icon {
+            font-size: 24px;
+            margin-bottom: 8px;
+        }
+        .pipeline-stage-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        .pipeline-arrow {
+            font-size: 24px;
+            color: var(--accent-cyan);
+            animation: arrowPulse 1.5s infinite;
+        }
+        @keyframes arrowPulse {
+            0%, 100% { opacity: 0.5; transform: translateX(0); }
+            50% { opacity: 1; transform: translateX(4px); }
+        }
+        .embedding-metrics {
+            display: flex;
+            justify-content: center;
+            gap: 32px;
+            margin-bottom: 24px;
+        }
+        .embedding-metric {
+            text-align: center;
+        }
+        .embedding-metric-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+        }
+        .embedding-metric-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        .vector-preview {
+            height: 60px;
+            display: flex;
+            align-items: flex-end;
+            gap: 2px;
+            padding: 12px;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .vector-bar {
+            flex: 1;
+            background: var(--accent-cyan);
+            border-radius: 2px 2px 0 0;
+            min-width: 2px;
+            transition: height 0.3s;
+        }
+        .embedding-input-preview {
+            padding: 12px;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+            margin-bottom: 16px;
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'SF Mono', Monaco, monospace;
+            max-height: 80px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        /* Activity Feed */
+        .activity-feed {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            max-height: 500px;
+            overflow-y: auto;
+        }
+        .activity-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            background: var(--bg-card);
+            z-index: 1;
+        }
+        .activity-header h3 {
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .activity-header h3 i { color: var(--accent-green); }
+        .activity-live-dot {
+            width: 8px; height: 8px;
+            background: var(--accent-green);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        .activity-item {
+            padding: 12px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+            animation: slideIn 0.3s ease;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateX(-20px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .activity-item:last-child { border-bottom: none; }
+        .activity-icon {
+            width: 32px; height: 32px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+        .activity-icon.context { background: rgba(88, 166, 255, 0.2); color: var(--accent-blue); }
+        .activity-icon.embed { background: rgba(57, 212, 212, 0.2); color: var(--accent-cyan); }
+        .activity-icon.store { background: rgba(63, 185, 80, 0.2); color: var(--accent-green); }
+        .activity-icon.search { background: rgba(163, 113, 247, 0.2); color: var(--accent-purple); }
+        .activity-content { flex: 1; min-width: 0; }
+        .activity-title {
+            font-size: 13px;
+            font-weight: 500;
+            margin-bottom: 2px;
+        }
+        .activity-detail {
+            font-size: 12px;
+            color: var(--text-secondary);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .activity-time {
+            font-size: 11px;
+            color: var(--text-muted);
+            white-space: nowrap;
+        }
+        /* Semantic Search */
+        .search-container {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 24px;
+        }
+        .search-input-wrapper {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 24px;
+        }
+        .search-input-wrapper input {
+            flex: 1;
+            padding: 14px 20px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 14px;
+            outline: none;
+            transition: all 0.2s;
+        }
+        .search-input-wrapper input:focus {
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 20px rgba(88, 166, 255, 0.1);
+        }
+        .search-results {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+        .search-result {
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border-radius: 12px;
+            margin-bottom: 12px;
+            border-left: 3px solid transparent;
+            transition: all 0.2s;
+        }
+        .search-result:hover {
+            border-left-color: var(--accent-blue);
+            transform: translateX(4px);
+        }
+        .search-result-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .search-result-score {
+            font-size: 12px;
+            padding: 4px 10px;
+            border-radius: 10px;
+            background: rgba(88, 166, 255, 0.2);
+            color: var(--accent-blue);
+            font-weight: 600;
+        }
+        .search-result-content {
+            font-size: 14px;
+            line-height: 1.6;
+            color: var(--text-primary);
+        }
+        /* Loading States */
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 60px;
+        }
+        .spinner {
+            width: 40px; height: 40px;
+            border: 3px solid var(--border-color);
+            border-top-color: var(--accent-blue);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .loading-overlay {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(10, 10, 15, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .loading-overlay.show {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .loading-text {
+            margin-top: 16px;
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            bottom: 24px; right: 24px;
+            z-index: 1000;
+        }
+        .toast {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 16px 24px;
+            margin-top: 12px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            animation: toastIn 0.3s ease;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+        }
+        @keyframes toastIn {
+            from { opacity: 0; transform: translateX(100px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .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); }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .header-content { flex-direction: column; gap: 16px; }
+            .stats-row { grid-template-columns: repeat(2, 1fr); }
+            .agent-grid { grid-template-columns: 1fr; }
+            .tabs { width: 100%; overflow-x: auto; }
+            .category-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
+            .pipeline { flex-direction: column; }
+            .pipeline-arrow { transform: rotate(90deg); }
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: var(--bg-secondary); }
+        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+        /* Two Column Layout for Activity + Content */
+        .two-column {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 24px;
+        }
+        @media (max-width: 1200px) {
+            .two-column { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-animation"></div>
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+        <div class="loading-text" id="loadingText">Loading project data...</div>
+    </div>
+    <header class="header">
+        <div class="header-content">
+            <div class="logo">
+                <div class="logo-icon"><i class="fas fa-brain"></i></div>
+                <div>
+                    <div class="logo-text">Claude Memory</div>
+                    <div class="logo-subtitle">Unified Control Center v2.1</div>
+                </div>
+            </div>
+            <div class="header-controls">
+                <div class="project-dropdown">
+                    <button class="project-btn" onclick="toggleProjectMenu()">
+                        <i class="fas fa-folder"></i>
+                        <span id="currentProjectName">Select Project</span>
+                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
+                    </button>
+                    <div class="project-menu" id="projectMenu"></div>
+                </div>
+                <div class="status-indicator" id="statusIndicator">
+                    <span class="status-dot"></span>
+                    <span id="statusText">Connected</span>
+                </div>
+                <div class="ws-status disconnected" id="wsStatus" title="Connecting...">
+                    <i class="fas fa-bolt"></i>
+                    <span>Live</span>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="main-content">
+        <!-- Stats Row -->
+        <div class="stats-row">
+            <div class="stat-card" style="--card-accent: var(--gradient-1)">
+                <div class="stat-icon" style="background: rgba(88, 166, 255, 0.15); color: var(--accent-blue);"><i class="fas fa-robot"></i></div>
+                <div class="stat-value" id="enabledAgentsCount">0</div>
+                <div class="stat-label">Active Agents</div>
+                <div class="stat-change positive" id="agentsTotalCount">/ 0 total</div>
+            </div>
+            <div class="stat-card" style="--card-accent: var(--gradient-4)">
+                <div class="stat-icon" style="background: rgba(63, 185, 80, 0.15); color: var(--accent-green);"><i class="fas fa-plug"></i></div>
+                <div class="stat-value" id="enabledMcpsCount">0</div>
+                <div class="stat-label">MCP Servers</div>
+                <div class="stat-change positive" id="mcpsTotalCount">/ 0 total</div>
+            </div>
+            <div class="stat-card" style="--card-accent: var(--gradient-2)">
+                <div class="stat-icon" style="background: rgba(163, 113, 247, 0.15); color: var(--accent-purple);"><i class="fas fa-bolt"></i></div>
+                <div class="stat-value" id="enabledHooksCount">0</div>
+                <div class="stat-label">Active Hooks</div>
+                <div class="stat-change positive" id="hooksTotalCount">/ 0 total</div>
+            </div>
+            <div class="stat-card" style="--card-accent: var(--gradient-3)">
+                <div class="stat-icon" style="background: rgba(210, 153, 34, 0.15); color: var(--accent-yellow);"><i class="fas fa-brain"></i></div>
+                <div class="stat-value" id="memoriesCount">0</div>
+                <div class="stat-label">Memories</div>
+                <div class="stat-change positive" id="memoriesChange">+0 today</div>
+            </div>
+            <div class="stat-card" style="--card-accent: linear-gradient(135deg, #39d4d4 0%, #a371f7 100%)">
+                <div class="stat-icon" style="background: rgba(57, 212, 212, 0.15); color: var(--accent-cyan);"><i class="fas fa-code"></i></div>
+                <div class="stat-value" id="patternsCount">0</div>
+                <div class="stat-label">Patterns</div>
+            </div>
+            <div class="stat-card" style="--card-accent: linear-gradient(135deg, #f85149 0%, #ff7b72 100%)">
+                <div class="stat-icon" style="background: rgba(248, 81, 73, 0.15); color: var(--accent-red);"><i class="fas fa-clock"></i></div>
+                <div class="stat-value" id="eventsCount">0</div>
+                <div class="stat-label">Timeline Events</div>
+            </div>
+        </div>
+        <!-- Tabs -->
+        <div class="tabs">
+            <div class="tab active" data-tab="agents" onclick="switchTab('agents')">
+                <i class="fas fa-robot"></i> Agents <span class="count" id="agentsTabCount">0</span>
+            </div>
+            <div class="tab" data-tab="mcps" onclick="switchTab('mcps')">
+                <i class="fas fa-plug"></i> MCP Servers <span class="count" id="mcpsTabCount">0</span>
+            </div>
+            <div class="tab" data-tab="hooks" onclick="switchTab('hooks')">
+                <i class="fas fa-bolt"></i> Hooks <span class="count" id="hooksTabCount">0</span>
+            </div>
+            <div class="tab" data-tab="timeline" onclick="switchTab('timeline')">
+                <i class="fas fa-stream"></i> Timeline
+            </div>
+            <div class="tab" data-tab="memories" onclick="switchTab('memories')">
+                <i class="fas fa-brain"></i> Memories
+            </div>
+            <div class="tab" data-tab="patterns" onclick="switchTab('patterns')">
+                <i class="fas fa-code"></i> Patterns
+            </div>
+            <div class="tab" data-tab="search" onclick="switchTab('search')">
+                <i class="fas fa-search"></i> Search
+            </div>
+            <div class="tab" data-tab="activity" onclick="switchTab('activity')">
+                <i class="fas fa-rss"></i> Activity
+            </div>
+        </div>
+        <!-- Agents Tab -->
+        <div class="tab-content active" id="agents-tab">
+            <div class="section-header">
+                <div class="search-bar">
+                    <i class="fas fa-search"></i>
+                    <input type="text" placeholder="Search agents..." id="agentSearch" oninput="filterAgents()">
+                </div>
+                <div class="section-actions">
+                    <button class="btn btn-secondary" onclick="enableAllAgents(false)"><i class="fas fa-toggle-off"></i> Disable All</button>
+                    <button class="btn btn-primary" onclick="enableAllAgents(true)"><i class="fas fa-toggle-on"></i> Enable All</button>
+                </div>
+            </div>
+            <div class="category-filter" id="categoryFilter"></div>
+            <div class="agent-grid" id="agentGrid"><div class="loading"><div class="spinner"></div></div></div>
+        </div>
+        <!-- MCPs Tab -->
+        <div class="tab-content" id="mcps-tab">
+            <div class="section-header">
+                <div class="section-title"><i class="fas fa-plug"></i> MCP Server Configuration</div>
+            </div>
+            <div class="agent-grid" id="mcpGrid"><div class="loading"><div class="spinner"></div></div></div>
+        </div>
+        <!-- Hooks Tab -->
+        <div class="tab-content" id="hooks-tab">
+            <div class="section-header">
+                <div class="section-title"><i class="fas fa-bolt"></i> Hook Configuration</div>
+            </div>
+            <div class="agent-grid" id="hookGrid"><div class="loading"><div class="spinner"></div></div></div>
+        </div>
+        <!-- Timeline Tab -->
+        <div class="tab-content" id="timeline-tab">
+            <div class="section-header">
+                <div class="section-title"><i class="fas fa-stream"></i> Timeline Events</div>
+                <button class="btn btn-secondary" onclick="loadTimeline()"><i class="fas fa-sync"></i> Refresh</button>
+            </div>
+            <div class="timeline-container" id="timelineContainer"><div class="loading"><div class="spinner"></div></div></div>
+        </div>
+        <!-- Memories Tab -->
+        <div class="tab-content" id="memories-tab">
+            <div class="two-column">
+                <div>
+                    <div class="section-header">
+                        <div class="section-title"><i class="fas fa-brain"></i> Memory Browser</div>
+                        <div class="section-actions">
+                            <select id="memoryTypeFilter" onchange="loadMemories()" style="padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 13px;">
+                                <option value="">All Types</option>
+                                <option value="decision">Decisions</option>
+                                <option value="error">Errors</option>
+                                <option value="code">Code</option>
+                                <option value="preference">Preferences</option>
+                                <option value="session">Sessions</option>
+                                <option value="chunk">Chunks</option>
+                            </select>
+                            <button class="btn btn-secondary" onclick="loadMemories()"><i class="fas fa-sync"></i> Refresh</button>
+                        </div>
+                    </div>
+                    <div id="memoriesContainer"><div class="loading"><div class="spinner"></div></div></div>
+                </div>
+                <!-- Embedding Visualizer -->
+                <div class="embedding-visualizer">
+                    <h3><i class="fas fa-vector-square"></i> Embedding Pipeline</h3>
+                    <div class="embedding-input-preview" id="embeddingInput">Waiting for embedding activity...</div>
+                    <div class="pipeline">
+                        <div class="pipeline-stage" id="stageText">
+                            <div class="pipeline-stage-icon"><i class="fas fa-file-alt"></i></div>
+                            <div class="pipeline-stage-label">Text</div>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-stage" id="stageOllama">
+                            <div class="pipeline-stage-icon"><i class="fas fa-microchip"></i></div>
+                            <div class="pipeline-stage-label">Ollama</div>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-stage" id="stageVector">
+                            <div class="pipeline-stage-icon"><i class="fas fa-project-diagram"></i></div>
+                            <div class="pipeline-stage-label">Vector</div>
+                        </div>
+                    </div>
+                    <div class="embedding-metrics">
+                        <div class="embedding-metric">
+                            <div class="embedding-metric-value" id="embeddingDimensions">768</div>
+                            <div class="embedding-metric-label">Dimensions</div>
+                        </div>
+                        <div class="embedding-metric">
+                            <div class="embedding-metric-value" id="embeddingTime">--</div>
+                            <div class="embedding-metric-label">Processing Time</div>
+                        </div>
+                    </div>
+                    <div class="vector-preview" id="vectorPreview"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Patterns Tab -->
+        <div class="tab-content" id="patterns-tab">
+            <div class="section-header">
+                <div class="section-title"><i class="fas fa-code"></i> Pattern Library</div>
+                <div class="section-actions">
+                    <select id="patternTypeFilter" onchange="loadPatterns()" style="padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 13px;">
+                        <option value="">All Types</option>
+                        <option value="bug_fix">Bug Fixes</option>
+                        <option value="feature">Features</option>
+                        <option value="refactor">Refactors</option>
+                        <option value="config">Configurations</option>
+                        <option value="performance">Performance</option>
+                    </select>
+                    <button class="btn btn-secondary" onclick="loadPatterns()"><i class="fas fa-sync"></i> Refresh</button>
+                </div>
+            </div>
+            <div id="patternsContainer"><div class="loading"><div class="spinner"></div></div></div>
+        </div>
+        <!-- Search Tab -->
+        <div class="tab-content" id="search-tab">
+            <div class="search-container">
+                <div class="section-title" style="margin-bottom: 20px;"><i class="fas fa-search"></i> Semantic Search</div>
+                <div class="search-input-wrapper">
+                    <input type="text" id="semanticSearchInput" placeholder="Search memories semantically..." onkeypress="if(event.key==='Enter')performSearch()">
+                    <button class="btn btn-primary" onclick="performSearch()"><i class="fas fa-search"></i> Search</button>
+                </div>
+                <div class="search-results" id="searchResults">
+                    <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
+                        <i class="fas fa-search" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i>
+                        <div>Enter a query to search your memories</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Activity Tab -->
+        <div class="tab-content" id="activity-tab">
+            <div class="two-column">
+                <div class="activity-feed" id="activityFeed">
+                    <div class="activity-header">
+                        <h3><i class="fas fa-rss"></i> Live Activity</h3>
+                        <div class="activity-live-dot"></div>
+                    </div>
+                    <div id="activityItems">
+                        <div style="padding: 40px; text-align: center; color: var(--text-secondary);">
+                            <i class="fas fa-satellite-dish" style="font-size: 32px; opacity: 0.3; margin-bottom: 12px;"></i>
+                            <div>Waiting for activity...</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="embedding-visualizer">
+                        <h3><i class="fas fa-chart-bar"></i> Real-time Stats</h3>
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+                            <div style="background: var(--bg-tertiary); padding: 16px; border-radius: 12px; text-align: center;">
+                                <div style="font-size: 24px; font-weight: 700; color: var(--accent-blue);" id="todayMemories">0</div>
+                                <div style="font-size: 12px; color: var(--text-secondary);">Memories Today</div>
+                            </div>
+                            <div style="background: var(--bg-tertiary); padding: 16px; border-radius: 12px; text-align: center;">
+                                <div style="font-size: 24px; font-weight: 700; color: var(--accent-green);" id="todaySearches">0</div>
+                                <div style="font-size: 12px; color: var(--text-secondary);">Searches Today</div>
+                            </div>
+                            <div style="background: var(--bg-tertiary); padding: 16px; border-radius: 12px; text-align: center;">
+                                <div style="font-size: 24px; font-weight: 700; color: var(--accent-purple);" id="todayPatterns">0</div>
+                                <div style="font-size: 12px; color: var(--text-secondary);">Patterns Used</div>
+                            </div>
+                            <div style="background: var(--bg-tertiary); padding: 16px; border-radius: 12px; text-align: center;">
+                                <div style="font-size: 24px; font-weight: 700; color: var(--accent-cyan);" id="avgEmbedTime">--</div>
+                                <div style="font-size: 12px; color: var(--text-secondary);">Avg Embed Time</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div class="toast-container" id="toastContainer"></div>
+    <script>
+        // Auto-detect server URL from current page location (works on any host/port)
+        const API_URL = window.location.origin || 'http://localhost:8102';
+        const WS_URL = (window.location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + (window.location.host || 'localhost:8102') + '/ws';
+        let currentProject = null;
+        let currentMemories = [];
+        let projectConfig = null;
+        let allAgents = [];
+        let allMcps = [];
+        let allHooks = [];
+        let categories = {};
+        let activeCategory = 'all';
+        let ws = null;
+        let wsReconnectAttempts = 0;
+        const WS_MAX_RECONNECT = 5;
+        const WS_RECONNECT_DELAY = 3000;
+        let activityItems = [];
+        let todayStats = { memories: 0, searches: 0, patterns: 0, embedTimes: [] };
+        // Initialize WebSocket
+        function initWebSocket() {
+            if (ws && ws.readyState === WebSocket.OPEN) return;
+            try {
+                ws = new WebSocket(WS_URL);
+                ws.onopen = () => {
+                    console.log('WebSocket connected');
+                    wsReconnectAttempts = 0;
+                    updateConnectionStatus(true);
+                    if (currentProject) {
+                        ws.send(JSON.stringify({ type: 'subscribe', event_types: ['*'], project_path: currentProject }));
+                    }
+                };
+                ws.onmessage = (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        handleWebSocketMessage(data);
+                    } catch (e) {
+                        console.error('Error parsing WebSocket message:', e);
+                    }
+                };
+                ws.onclose = () => {
+                    console.log('WebSocket disconnected');
+                    updateConnectionStatus(false);
+                    if (wsReconnectAttempts < WS_MAX_RECONNECT) {
+                        wsReconnectAttempts++;
+                        setTimeout(initWebSocket, WS_RECONNECT_DELAY);
+                    }
+                };
+                ws.onerror = (error) => {
+                    console.error('WebSocket error:', error);
+                    updateConnectionStatus(false);
+                };
+            } catch (e) {
+                console.error('Failed to initialize WebSocket:', e);
+            }
+        }
+        function handleWebSocketMessage(data) {
+            switch (data.type) {
+                case 'connected':
+                    console.log('WebSocket: Connected with client ID', data.client_id);
+                    break;
+                case 'memory_stored':
+                    loadStats();
+                    todayStats.memories++;
+                    document.getElementById('todayMemories').textContent = todayStats.memories;
+                    addActivityItem('store', 'Memory Stored', data.data?.type || 'chunk');
+                    showToast(`Memory stored (${data.data?.type || 'chunk'})`, 'success');
+                    break;
+                case 'timeline_logged':
+                    if (document.getElementById('timeline-tab').classList.contains('active')) {
+                        loadTimeline();
+                    }
+                    const eventsCount = document.getElementById('eventsCount');
+                    if (eventsCount) eventsCount.textContent = parseInt(eventsCount.textContent || 0) + 1;
+                    addActivityItem('context', 'Timeline Event', data.data?.event_type || 'event');
+                    break;
+                case 'anchor_marked':
+                    addActivityItem('context', 'Anchor Marked', 'fact verified');
+                    showToast('Anchor marked', 'info');
+                    break;
+                case 'anchor_conflict':
+                    addActivityItem('context', 'Anchor Conflict', 'needs resolution');
+                    showToast('Anchor conflict detected!', 'error');
+                    break;
+                case 'cleanup_completed':
+                    showToast(`Cleanup: ${data.data?.archived || 0} archived, ${data.data?.deleted || 0} deleted`, 'success');
+                    loadStats();
+                    break;
+                case 'reindex_progress':
+                    const pct = Math.round((data.data?.progress / data.data?.total) * 100) || 0;
+                    showToast(`Reindexing: ${pct}%`, 'info');
+                    break;
+                case 'reindex_completed':
+                    showToast('Reindexing completed!', 'success');
+                    break;
+                case 'embedding_completed':
+                    updateEmbeddingVisualizer(data.data);
+                    break;
+                case 'search_performed':
+                    todayStats.searches++;
+                    document.getElementById('todaySearches').textContent = todayStats.searches;
+                    addActivityItem('search', 'Search Performed', data.data?.query?.substring(0, 50) || 'query');
+                    break;
+                case 'pong':
+                    break;
+                default:
+                    console.log('WebSocket event:', data.type, data);
+            }
+        }
+        function updateConnectionStatus(connected) {
+            const indicator = document.getElementById('wsStatus');
+            if (indicator) {
+                indicator.className = connected ? 'ws-status connected' : 'ws-status disconnected';
+                indicator.title = connected ? 'Real-time updates active' : 'Connecting...';
+            }
+        }
+        function sendHeartbeat() {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'ping' }));
+            }
+        }
+        function addActivityItem(type, title, detail) {
+            const item = { type, title, detail, time: new Date() };
+            activityItems.unshift(item);
+            if (activityItems.length > 50) activityItems.pop();
+            renderActivityFeed();
+        }
+        function renderActivityFeed() {
+            const container = document.getElementById('activityItems');
+            if (activityItems.length === 0) {
+                container.innerHTML = `<div style="padding: 40px; text-align: center; color: var(--text-secondary);">
+                    <i class="fas fa-satellite-dish" style="font-size: 32px; opacity: 0.3; margin-bottom: 12px;"></i>
+                    <div>Waiting for activity...</div>
+                </div>`;
+                return;
+            }
+            container.innerHTML = activityItems.slice(0, 20).map(item => `
+                <div class="activity-item">
+                    <div class="activity-icon ${item.type}"><i class="fas fa-${getActivityIcon(item.type)}"></i></div>
+                    <div class="activity-content">
+                        <div class="activity-title">${escapeHtml(item.title)}</div>
+                        <div class="activity-detail">${escapeHtml(item.detail)}</div>
+                    </div>
+                    <div class="activity-time">${formatRelativeTime(item.time)}</div>
+                </div>
+            `).join('');
+        }
+        function getActivityIcon(type) {
+            const icons = { context: 'clock', embed: 'microchip', store: 'save', search: 'search' };
+            return icons[type] || 'circle';
+        }
+        function formatRelativeTime(date) {
+            const seconds = Math.floor((new Date() - date) / 1000);
+            if (seconds < 60) return 'just now';
+            if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+            if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+            return `${Math.floor(seconds / 86400)}d ago`;
+        }
+        function updateEmbeddingVisualizer(data) {
+            if (data?.text) {
+                document.getElementById('embeddingInput').textContent = data.text.substring(0, 200) + (data.text.length > 200 ? '...' : '');
+            }
+            if (data?.processing_time) {
+                const time = data.processing_time;
+                document.getElementById('embeddingTime').textContent = time + 'ms';
+                todayStats.embedTimes.push(time);
+                const avg = Math.round(todayStats.embedTimes.reduce((a, b) => a + b, 0) / todayStats.embedTimes.length);
+                document.getElementById('avgEmbedTime').textContent = avg + 'ms';
+            }
+            if (data?.dimensions) {
+                document.getElementById('embeddingDimensions').textContent = data.dimensions;
+            }
+            // Animate pipeline
+            ['stageText', 'stageOllama', 'stageVector'].forEach((id, i) => {
+                setTimeout(() => {
+                    document.getElementById(id).classList.add('active');
+                    setTimeout(() => document.getElementById(id).classList.remove('active'), 500);
+                }, i * 300);
+            });
+            // Update vector preview
+            if (data?.vector_sample) {
+                renderVectorPreview(data.vector_sample);
+            } else {
+                renderVectorPreview(Array.from({ length: 100 }, () => Math.random()));
+            }
+            addActivityItem('embed', 'Embedding Generated', `${data?.dimensions || 768} dimensions`);
+        }
+        function renderVectorPreview(values) {
+            const container = document.getElementById('vectorPreview');
+            const bars = values.slice(0, 100).map(v => {
+                const height = Math.abs(v) * 100;
+                const color = v >= 0 ? 'var(--accent-cyan)' : 'var(--accent-purple)';
+                return `<div class="vector-bar" style="height: ${Math.max(2, height)}%; background: ${color};"></div>`;
+            });
+            container.innerHTML = bars.join('');
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', async () => {
+            await loadProjects();
+            await loadAgentData();
+            await loadStats();
+            initWebSocket();
+            setInterval(sendHeartbeat, 30000);
+            renderVectorPreview(Array.from({ length: 100 }, () => Math.random() * 0.5));
+        });
+        // Show/hide loading overlay
+        function showLoading(text = 'Loading...') {
+            document.getElementById('loadingText').textContent = text;
+            document.getElementById('loadingOverlay').classList.add('show');
+        }
+        function hideLoading() {
+            document.getElementById('loadingOverlay').classList.remove('show');
+        }
+        // Project Management
+        async function loadProjects() {
+            try {
+                const response = await fetch(`${API_URL}/api/projects`);
+                const data = await response.json();
+                const menu = document.getElementById('projectMenu');
+                menu.innerHTML = '';
+                // Add "All Projects" option first
+                const allItem = document.createElement('div');
+                allItem.className = 'project-item';
+                allItem.onclick = () => selectProject(null);
+                allItem.innerHTML = `
+                    <div class="project-item-icon" style="background: rgba(139, 148, 158, 0.2); color: #8b949e;"><i class="fas fa-globe"></i></div>
+                    <div class="project-item-info">
+                        <div class="project-item-name">All Projects</div>
+                        <div class="project-item-stats">Show all memories across projects</div>
+                    </div>
+                `;
+                menu.appendChild(allItem);
+                if (!data.success || !data.projects.length) {
+                    return;
+                }
+                const colors = ['#58a6ff', '#3fb950', '#a371f7', '#d29922', '#f85149'];
+                data.projects.forEach((project, index) => {
+                    const name = project.project_path.split(/[/\\]/).pop();
+                    const color = colors[index % colors.length];
+                    const item = document.createElement('div');
+                    item.className = 'project-item';
+                    item.onclick = () => selectProject(project.project_path);
+                    item.innerHTML = `
+                        <div class="project-item-icon" style="background: ${color}20; color: ${color};"><i class="fas fa-folder"></i></div>
+                        <div class="project-item-info">
+                            <div class="project-item-name">${name}</div>
+                            <div class="project-item-stats">${project.session_count || 0} sessions, ${project.memory_count || 0} memories</div>
+                        </div>
+                    `;
+                    menu.appendChild(item);
+                });
+                const savedProject = localStorage.getItem('currentProject');
+                if (savedProject && data.projects.find(p => p.project_path === savedProject)) {
+                    selectProject(savedProject);
+                } else {
+                    // Default to "All Projects" for better discovery
+                    selectProject(null);
+                }
+            } catch (e) {
+                console.error('Error loading projects:', e);
+                showToast('Failed to load projects', 'error');
+            }
+        }
+        function toggleProjectMenu() {
+            document.getElementById('projectMenu').classList.toggle('show');
+        }
+        async function selectProject(projectPath) {
+            showLoading('Loading project data...');
+            currentProject = projectPath;
+            if (projectPath) {
+                localStorage.setItem('currentProject', projectPath);
+            } else {
+                localStorage.removeItem('currentProject');
+            }
+            const name = projectPath ? projectPath.split(/[/\\]/).pop() : 'All Projects';
+            document.getElementById('currentProjectName').textContent = name;
+            document.getElementById('projectMenu').classList.remove('show');
+            document.querySelectorAll('.project-item').forEach(item => item.classList.remove('active'));
+            event?.target?.closest('.project-item')?.classList.add('active');
+            // Resubscribe WebSocket
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'subscribe', event_types: ['*'], project_path: projectPath || '*' }));
+            }
+            // Hot reload all data for the project
+            try {
+                await Promise.all([
+                    loadProjectConfig(),
+                    loadStats(),
+                    loadMemoriesIfActive(),
+                    loadPatternsIfActive(),
+                    loadTimelineIfActive()
+                ]);
+                renderAgents();
+                renderMcps();
+                renderHooks();
+                showToast(`Loaded: ${name}`, 'success');
+            } catch (e) {
+                console.error('Error loading project data:', e);
+                showToast('Failed to load project data', 'error');
+            }
+            hideLoading();
+        }
+        async function loadMemoriesIfActive() {
+            if (document.getElementById('memories-tab').classList.contains('active')) {
+                await loadMemories();
+            }
+        }
+        async function loadPatternsIfActive() {
+            if (document.getElementById('patterns-tab').classList.contains('active')) {
+                await loadPatterns();
+            }
+        }
+        async function loadTimelineIfActive() {
+            if (document.getElementById('timeline-tab').classList.contains('active')) {
+                await loadTimeline();
+            }
+        }
+        async function loadProjectConfig() {
+            if (!currentProject) return;
+            try {
+                const response = await fetch(`${API_URL}/api/project/${encodeURIComponent(currentProject)}/config`);
+                projectConfig = await response.json();
+                if (projectConfig.success) updateStats(projectConfig.stats);
+            } catch (e) {
+                console.error('Error loading project config:', e);
+            }
+        }
+        async function loadAgentData() {
+            try {
+                const [agentsRes, mcpsRes, hooksRes] = await Promise.all([
+                    fetch(`${API_URL}/api/agents`),
+                    fetch(`${API_URL}/api/mcps`),
+                    fetch(`${API_URL}/api/hooks`)
+                ]);
+                const agentsData = await agentsRes.json();
+                const mcpsData = await mcpsRes.json();
+                const hooksData = await hooksRes.json();
+                allAgents = agentsData.agents || [];
+                categories = agentsData.categories || {};
+                allMcps = mcpsData.mcps || [];
+                allHooks = hooksData.hooks || [];
+                document.getElementById('agentsTabCount').textContent = allAgents.length;
+                document.getElementById('mcpsTabCount').textContent = allMcps.length;
+                document.getElementById('hooksTabCount').textContent = allHooks.length;
+                renderCategoryFilter();
+                if (projectConfig) {
+                    renderAgents();
+                    renderMcps();
+                    renderHooks();
+                }
+            } catch (e) {
+                console.error('Error loading agent data:', e);
+            }
+        }
+        async function loadStats() {
+            try {
+                const response = await fetch(`${API_URL}/api/stats`);
+                const stats = await response.json();
+                document.getElementById('memoriesCount').textContent = stats.total_memories || 0;
+                document.getElementById('eventsCount').textContent = stats.total_timeline_events || 0;
+                document.getElementById('patternsCount').textContent = stats.total_patterns || 0;
+            } catch (e) {
+                console.error('Error loading stats:', e);
+            }
+        }
+        function updateStats(stats) {
+            if (!stats) return;
+            document.getElementById('enabledAgentsCount').textContent = stats.enabled_agents;
+            document.getElementById('agentsTotalCount').textContent = `/ ${stats.total_agents} total`;
+            document.getElementById('enabledMcpsCount').textContent = stats.enabled_mcps;
+            document.getElementById('mcpsTotalCount').textContent = `/ ${stats.total_mcps} total`;
+            document.getElementById('enabledHooksCount').textContent = stats.enabled_hooks;
+            document.getElementById('hooksTotalCount').textContent = `/ ${stats.total_hooks} total`;
+        }
+        // Rendering
+        function renderCategoryFilter() {
+            const container = document.getElementById('categoryFilter');
+            container.innerHTML = `<div class="category-chip active" data-category="all" onclick="filterByCategory('all')"><i class="fas fa-th"></i> All</div>`;
+            Object.entries(categories).forEach(([key, cat]) => {
+                const chip = document.createElement('div');
+                chip.className = 'category-chip';
+                chip.dataset.category = key;
+                chip.style.setProperty('--chip-color', cat.color);
+                chip.onclick = () => filterByCategory(key);
+                chip.innerHTML = `<i class="fas fa-${getIconForCategory(cat.icon)}"></i> ${cat.name}`;
+                container.appendChild(chip);
+            });
+        }
+        function getIconForCategory(icon) {
+            const iconMap = { 'code': 'code', 'shield-check': 'shield-alt', 'palette': 'palette', 'lightbulb': 'lightbulb', 'megaphone': 'bullhorn', 'settings': 'cog', 'chart-bar': 'chart-bar', 'cube': 'cube', 'search': 'search' };
+            return iconMap[icon] || 'circle';
+        }
+        function renderAgents() {
+            const grid = document.getElementById('agentGrid');
+            const searchTerm = document.getElementById('agentSearch').value.toLowerCase();
+            let filteredAgents = allAgents;
+            if (activeCategory !== 'all') filteredAgents = filteredAgents.filter(a => a.category === activeCategory);
+            if (searchTerm) filteredAgents = filteredAgents.filter(a => a.name.toLowerCase().includes(searchTerm) || a.description.toLowerCase().includes(searchTerm) || a.tags.some(t => t.includes(searchTerm)));
+            if (!filteredAgents.length) {
+                grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 60px; color: var(--text-secondary);">No agents found</div>';
+                return;
+            }
+            grid.innerHTML = filteredAgents.map(agent => {
+                const config = projectConfig?.agents?.[agent.id] || { enabled: agent.default_enabled };
+                const category = categories[agent.category] || {};
+                const isEnabled = config.enabled;
+                return `
+                    <div class="agent-card ${isEnabled ? '' : 'disabled'}">
+                        <div class="agent-category-label" style="background: ${category.color || '#58a6ff'}"></div>
+                        <div class="agent-card-header">
+                            <div class="agent-icon" style="background: ${category.color}20; color: ${category.color}"><i class="fas fa-${getIconForCategory(category.icon)}"></i></div>
+                            <div class="agent-toggle ${isEnabled ? 'active' : ''}" onclick="toggleAgent('${agent.id}', ${!isEnabled})"></div>
+                        </div>
+                        <div class="agent-name">${agent.name}</div>
+                        <div class="agent-description">${agent.description}</div>
+                        <div class="agent-tags">${agent.tags.slice(0, 4).map(tag => `<span class="agent-tag">${tag}</span>`).join('')}</div>
+                    </div>
+                `;
+            }).join('');
+        }
+        function renderMcps() {
+            const grid = document.getElementById('mcpGrid');
+            grid.innerHTML = allMcps.map(mcp => {
+                const config = projectConfig?.mcps?.[mcp.id] || { enabled: mcp.default_enabled };
+                const isEnabled = config.enabled;
+                return `
+                    <div class="config-card">
+                        <div class="config-icon" style="background: ${mcp.color}20; color: ${mcp.color}"><i class="fas fa-${getIconForMcp(mcp.icon)}"></i></div>
+                        <div class="config-info">
+                            <div class="config-name">${mcp.name}</div>
+                            <div class="config-desc">${mcp.description}</div>
+                        </div>
+                        <div class="agent-toggle ${isEnabled ? 'active' : ''}" onclick="toggleMcp('${mcp.id}', ${!isEnabled})"></div>
+                    </div>
+                `;
+            }).join('');
+        }
+        function renderHooks() {
+            const grid = document.getElementById('hookGrid');
+            grid.innerHTML = allHooks.map(hook => {
+                const config = projectConfig?.hooks?.[hook.id] || { enabled: hook.default_enabled };
+                const isEnabled = config.enabled;
+                return `
+                    <div class="config-card">
+                        <div class="config-icon" style="background: ${hook.color}20; color: ${hook.color}"><i class="fas fa-${getIconForMcp(hook.icon)}"></i></div>
+                        <div class="config-info">
+                            <div class="config-name">${hook.name}</div>
+                            <div class="config-desc">${hook.description}</div>
+                            <div class="config-trigger"><i class="fas fa-bolt"></i> ${hook.trigger}</div>
+                        </div>
+                        <div class="agent-toggle ${isEnabled ? 'active' : ''}" onclick="toggleHook('${hook.id}', ${!isEnabled})"></div>
+                    </div>
+                `;
+            }).join('');
+        }
+        function getIconForMcp(icon) {
+            const iconMap = { 'brain': 'brain', 'book': 'book', 'folder': 'folder', 'github': 'code-branch', 'database': 'database', 'globe': 'globe', 'anchor': 'anchor', 'shield': 'shield-alt', 'check-circle': 'check-circle', 'file-text': 'file-alt', 'message-circle': 'comment' };
+            return iconMap[icon] || 'plug';
+        }
+        // Toggle actions
+        async function toggleAgent(agentId, enabled) {
+            if (!currentProject) return;
+            try {
+                const response = await fetch(`${API_URL}/api/project/${encodeURIComponent(currentProject)}/agent/${agentId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled })
+                });
+                const result = await response.json();
+                if (result.success) {
+                    await loadProjectConfig();
+                    renderAgents();
+                    showToast(`${agentId} ${enabled ? 'enabled' : 'disabled'}`, 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update agent', 'error');
+            }
+        }
+        async function toggleMcp(mcpId, enabled) {
+            if (!currentProject) return;
+            try {
+                const response = await fetch(`${API_URL}/api/project/${encodeURIComponent(currentProject)}/mcp/${mcpId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled })
+                });
+                const result = await response.json();
+                if (result.success) {
+                    await loadProjectConfig();
+                    renderMcps();
+                    showToast(`${mcpId} ${enabled ? 'enabled' : 'disabled'}`, 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update MCP', 'error');
+            }
+        }
+        async function toggleHook(hookId, enabled) {
+            if (!currentProject) return;
+            try {
+                const response = await fetch(`${API_URL}/api/project/${encodeURIComponent(currentProject)}/hook/${hookId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled })
+                });
+                const result = await response.json();
+                if (result.success) {
+                    await loadProjectConfig();
+                    renderHooks();
+                    showToast(`${hookId} ${enabled ? 'enabled' : 'disabled'}`, 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update hook', 'error');
+            }
+        }
+        async function enableAllAgents(enabled) {
+            if (!currentProject) return;
+            const updates = {};
+            allAgents.forEach(agent => { updates[agent.id] = enabled; });
+            try {
+                const response = await fetch(`${API_URL}/api/project/${encodeURIComponent(currentProject)}/agents/bulk`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ updates })
+                });
+                const result = await response.json();
+                if (result.success) {
+                    await loadProjectConfig();
+                    renderAgents();
+                    showToast(`All agents ${enabled ? 'enabled' : 'disabled'}`, 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update agents', 'error');
+            }
+        }
+        // Filtering
+        function filterByCategory(category) {
+            activeCategory = category;
+            document.querySelectorAll('.category-chip').forEach(chip => {
+                chip.classList.toggle('active', chip.dataset.category === category);
+            });
+            renderAgents();
+        }
+        function filterAgents() { renderAgents(); }
+        // Tabs
+        function switchTab(tabId) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            document.querySelector(`.tab[data-tab="${tabId}"]`).classList.add('active');
+            document.getElementById(`${tabId}-tab`).classList.add('active');
+            if (tabId === 'timeline') loadTimeline();
+            if (tabId === 'memories') loadMemories();
+            if (tabId === 'patterns') loadPatterns();
+        }
+        // Timeline
+        let timelineFilter = 'all';
+        let timelineTimeRange = 'all';
+        async function loadTimeline() {
+            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;
+                }
+                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 } } }
+                    })
+                });
+                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>`;
+                    return;
+                }
+                const chains = buildCausalChains(result.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>
+                        <div class="timeline-filter-chip ${timelineFilter === 'decision' ? 'active' : ''}" onclick="filterTimeline('decision')"><i class="fas fa-lightbulb"></i> Decisions</div>
+                        <div class="timeline-filter-chip ${timelineFilter === 'observation' ? 'active' : ''}" onclick="filterTimeline('observation')"><i class="fas fa-eye"></i> Observations</div>
+                        <div class="timeline-filter-chip ${timelineFilter === 'anchor' ? 'active' : ''}" onclick="filterTimeline('anchor')"><i class="fas fa-anchor"></i> Anchors</div>
+                        <div class="timeline-filter-chip ${timelineFilter === 'outcome' ? 'active' : ''}" onclick="filterTimeline('outcome')"><i class="fas fa-check-circle"></i> Outcomes</div>
+                        <div class="timeline-filter-divider"></div>
+                        <div class="timeline-time-filter ${timelineTimeRange === 'hour' ? 'active' : ''}" onclick="filterTimeRange('hour')"><i class="fas fa-clock"></i> Last Hour</div>
+                        <div class="timeline-time-filter ${timelineTimeRange === 'today' ? 'active' : ''}" onclick="filterTimeRange('today')"><i class="fas fa-calendar-day"></i> Today</div>
+                        <div class="timeline-time-filter ${timelineTimeRange === 'week' ? 'active' : ''}" onclick="filterTimeRange('week')"><i class="fas fa-calendar-week"></i> This Week</div>
+                        <div class="timeline-time-filter ${timelineTimeRange === 'all' ? 'active' : ''}" onclick="filterTimeRange('all')"><i class="fas fa-infinity"></i> All Time</div>
+                    </div>
+                `;
+                const chainsHtml = chains.map(chain => renderChain(chain)).join('');
+                container.innerHTML = filterHtml + chainsHtml;
+            } catch (e) {
+                console.error('Error loading timeline:', e);
+                container.innerHTML = `<div class="timeline-empty"><i class="fas fa-exclamation-triangle"></i><div>Failed to load timeline</div></div>`;
+            }
+        }
+        function buildCausalChains(events) {
+            const sorted = [...events].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+            const chains = [];
+            let currentChain = null;
+            const chronological = [...sorted].reverse();
+            chronological.forEach(event => {
+                if (event.event_type === 'user_request') {
+                    currentChain = { root: event, children: [] };
+                    chains.unshift(currentChain);
+                } else if (currentChain) {
+                    currentChain.children.push(event);
+                } else {
+                    chains.unshift({ root: null, children: [event] });
+                }
+            });
+            chains.forEach(chain => { chain.children.reverse(); });
+            return chains;
+        }
+        function renderChain(chain) {
+            let children = chain.children;
+            if (timelineFilter !== 'all') {
+                children = children.filter(e => e.event_type === timelineFilter);
+                if (children.length === 0 && chain.root?.event_type !== timelineFilter) return '';
+            }
+            if (timelineTimeRange !== 'all') {
+                const now = new Date();
+                let cutoff;
+                switch (timelineTimeRange) {
+                    case 'hour': cutoff = new Date(now - 60 * 60 * 1000); break;
+                    case 'today': cutoff = new Date(now.setHours(0, 0, 0, 0)); break;
+                    case 'week': cutoff = new Date(now - 7 * 24 * 60 * 60 * 1000); break;
+                }
+                if (chain.root && new Date(chain.root.created_at) < cutoff) return '';
+            }
+            const chainId = chain.root?.id || Math.random().toString(36).substr(2, 9);
+            if (chain.root) {
+                return `
+                    <div class="timeline-chain" id="chain-${chainId}">
+                        <div class="timeline-request" onclick="toggleChain('${chainId}')">
+                            <div class="timeline-request-header">
+                                <button class="timeline-collapse-btn" title="Collapse/Expand"><i class="fas fa-chevron-down"></i></button>
+                                <div class="timeline-request-icon"><i class="fas fa-user"></i></div>
+                                <div class="timeline-request-title">${escapeHtml(chain.root.summary)}</div>
+                                ${children.length > 0 ? `<span class="timeline-children-count">${children.length} events</span>` : ''}
+                                <div class="timeline-request-time">${formatTime(chain.root.created_at)}</div>
+                            </div>
+                            ${chain.root.details ? `<div class="timeline-request-goal">${getGoalFromDetails(chain.root.details)}</div>` : ''}
+                        </div>
+                        ${children.length > 0 ? `<div class="timeline-children">${children.map((event, idx) => renderEvent(event, idx === children.length - 1)).join('')}</div>` : ''}
+                    </div>
+                `;
+            } else {
+                return `<div class="timeline-chain" style="border-left-color: var(--border-color);"><div class="timeline-children" style="padding-top: 8px;">${children.map((event, idx) => renderEvent(event, idx === children.length - 1)).join('')}</div></div>`;
+            }
+        }
+        function toggleChain(chainId) {
+            const chain = document.getElementById('chain-' + chainId);
+            if (chain) chain.classList.toggle('collapsed');
+        }
+        function renderEvent(event, isLast) {
+            const icons = { 'decision': 'lightbulb', 'observation': 'eye', 'action': 'play', 'outcome': 'check-circle', 'anchor': 'anchor', 'error': 'exclamation-circle' };
+            const details = parseDetails(event.details);
+            const confidence = event.confidence || details?.confidence;
+            const outcome = event.status || details?.outcome?.status;
+            const filePath = details?.file_path || extractFilePath(event.summary);
+            let eventClass = 'timeline-event';
+            if (event.is_anchor || event.event_type === 'anchor') eventClass += ' anchor-event';
+            if (event.event_type === 'outcome') {
+                eventClass += ' outcome-event';
+                if (outcome === 'failed') eventClass += ' failed';
+            }
+            return `
+                <div class="${eventClass}">
+                    <div class="timeline-connector" ${isLast ? 'style="height: 50%;"' : ''}></div>
+                    <div class="timeline-dot dot-${event.event_type}"><i class="fas fa-${icons[event.event_type] || 'circle'}"></i></div>
+                    <div class="timeline-content">
+                        <div class="timeline-type-badge badge-${event.event_type}"><i class="fas fa-${icons[event.event_type] || 'circle'}"></i> ${event.event_type.replace('_', ' ')}</div>
+                        <div class="timeline-summary ${event.summary.includes('...') ? 'truncated' : ''}" onclick="toggleSummary(this)" data-full="${escapeHtml(details?.tool?.old_string || details?.command || event.summary)}" title="${event.summary.includes('...') ? 'Click to expand' : ''}">${escapeHtml(event.summary)}</div>
+                        ${filePath ? `<div class="timeline-file-link" onclick="copyFilePath(event, '${escapeHtml(filePath)}')" title="Click to copy path"><i class="fas fa-file-code"></i><span>${escapeHtml(filePath.split(/[/\\]/).pop())}</span></div>` : ''}
+                        ${details?.reasoning ? `<div class="timeline-details"><strong>Reasoning:</strong> ${escapeHtml(details.reasoning)}</div>` : ''}
+                        <div class="timeline-meta">
+                            <span class="timeline-time">${formatTime(event.created_at)}</span>
+                            ${confidence ? `<span class="timeline-confidence ${confidence > 0.7 ? 'high' : ''}">${Math.round(confidence * 100)}% confidence</span>` : ''}
+                            ${event.is_anchor ? `<span class="timeline-anchor-badge"><i class="fas fa-anchor"></i> Verified Fact</span>` : ''}
+                            ${outcome === 'success' ? `<span class="timeline-outcome-badge success"><i class="fas fa-check"></i> Success</span>` : ''}
+                            ${outcome === 'failed' ? `<span class="timeline-outcome-badge failed"><i class="fas fa-times"></i> Failed</span>` : ''}
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        function extractFilePath(summary) {
+            const patterns = [/(?:in|from|to)\s+([^\s]+\.\w{2,4})/i, /([A-Za-z]:[\\\/][^\s]+\.\w{2,4})/, /([^\s]+\.\w{2,4})$/];
+            for (const pattern of patterns) {
+                const match = summary.match(pattern);
+                if (match) return match[1];
+            }
+            return null;
+        }
+        function copyFilePath(e, path) {
+            e.stopPropagation();
+            navigator.clipboard.writeText(path).then(() => {
+                const el = e.target.closest('.timeline-file-link');
+                if (el) {
+                    el.classList.add('copied');
+                    const span = el.querySelector('span');
+                    const originalText = span.textContent;
+                    span.textContent = 'Copied!';
+                    setTimeout(() => {
+                        el.classList.remove('copied');
+                        span.textContent = originalText;
+                    }, 1500);
+                }
+                showToast('Path copied to clipboard', 'success');
+            });
+        }
+        function toggleSummary(el) {
+            if (!el.classList.contains('truncated') && !el.classList.contains('expanded')) return;
+            el.classList.toggle('expanded');
+            if (el.classList.contains('expanded')) {
+                const fullText = el.dataset.full || el.textContent;
+                el.dataset.short = el.textContent;
+                el.textContent = fullText;
+            } else {
+                el.textContent = el.dataset.short || el.textContent;
+            }
+        }
+        function parseDetails(details) {
+            if (!details) return null;
+            try { return typeof details === 'string' ? JSON.parse(details) : details; } catch { return null; }
+        }
+        function getGoalFromDetails(details) {
+            const parsed = parseDetails(details);
+            return parsed?.goal || parsed?.intent || '';
+        }
+        function formatTime(timestamp) { return new Date(timestamp).toLocaleString(); }
+        function escapeHtml(text) {
+            if (!text) return '';
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        function filterTimeline(filter) { timelineFilter = filter; loadTimeline(); }
+        function filterTimeRange(range) { timelineTimeRange = range; loadTimeline(); }
+        // Memories
+        async function loadMemories() {
+            const container = document.getElementById('memoriesContainer');
+            container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+            try {
+                const typeFilter = document.getElementById('memoryTypeFilter').value;
+                // Use direct API endpoint - show all memories, optionally filter by type
+                let url = `${API_URL}/api/memories?limit=50`;
+                if (typeFilter) url += `&memory_type=${typeFilter}`;
+                // Optionally filter by project if one is selected
+                if (currentProject) url += `&project_path=${encodeURIComponent(currentProject)}`;
+                const response = await fetch(url);
+                const data = await response.json();
+                if (!data.memories?.length) {
+                    const projectName = currentProject ? currentProject.split(/[/\\]/).pop() : 'any project';
+                    container.innerHTML = `<div style="text-align: center; padding: 60px; color: var(--text-secondary);"><i class="fas fa-brain" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>No memories found for ${projectName}</div><div style="font-size: 12px; margin-top: 8px;">Select "All Projects" to see all memories</div></div>`;
+                    return;
+                }
+                container.innerHTML = renderMemoryCards(data.memories);
+            } catch (e) {
+                console.error('Error loading memories:', e);
+                container.innerHTML = `<div style="text-align: center; padding: 60px; color: var(--text-secondary);"><i class="fas fa-exclamation-triangle" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>Failed to load memories</div></div>`;
+            }
+        }
+        function renderMemoryCards(memories) {
+            currentMemories = memories; // Store for modal access
+            return memories.map((memory, index) => `
+                <div class="memory-card" onclick="showMemoryDetail(${index})" title="Click to view full content">
+                    <div class="memory-header">
+                        <span class="memory-type-badge memory-type-${memory.type}">${memory.type}</span>
+                        <span style="font-size: 12px; color: var(--text-muted);">${formatTime(memory.created_at)}</span>
+                    </div>
+                    <div class="memory-content">${escapeHtml((memory.content || '').substring(0, 300))}${(memory.content || '').length > 300 ? '...' : ''}</div>
+                    <div class="memory-meta">
+                        ${memory.importance ? `<span><i class="fas fa-star"></i> Importance: ${memory.importance}</span>` : ''}
+                        ${memory.project_path ? `<span><i class="fas fa-folder"></i> ${memory.project_path.split(/[/\\]/).pop()}</span>` : ''}
+                    </div>
+                </div>
+            `).join('');
+        }
+        // Patterns
+        async function loadPatterns() {
+            const container = document.getElementById('patternsContainer');
+            container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+            try {
+                const typeFilter = document.getElementById('patternTypeFilter').value;
+                // Use direct API endpoint
+                let url = `${API_URL}/api/patterns?limit=30`;
+                if (typeFilter) url += `&problem_type=${typeFilter}`;
+                const response = await fetch(url);
+                const data = await response.json();
+                if (!data.patterns?.length) {
+                    container.innerHTML = `<div style="text-align: center; padding: 60px; color: var(--text-secondary);"><i class="fas fa-code" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>No patterns stored yet</div><div style="font-size: 12px; margin-top: 8px;">Patterns are created when you solve problems successfully</div></div>`;
+                    return;
+                }
+                container.innerHTML = data.patterns.map(pattern => `
+                    <div class="pattern-card">
+                        <div class="pattern-header">
+                            <span class="pattern-name">${escapeHtml(pattern.name || 'Unnamed Pattern')}</span>
+                            <span class="pattern-success-rate ${(pattern.success_count || 0) > 2 ? 'high' : 'medium'}">${pattern.success_count || 0} uses</span>
+                        </div>
+                        <div class="pattern-solution">${escapeHtml((pattern.solution || '').substring(0, 400))}${(pattern.solution || '').length > 400 ? '...' : ''}</div>
+                        <div class="pattern-tags">
+                            ${pattern.problem_type ? `<span class="pattern-tag">${pattern.problem_type}</span>` : ''}
+                            ${(pattern.tech_context ? JSON.parse(pattern.tech_context) : []).slice(0, 3).map(t => `<span class="pattern-tag">${t}</span>`).join('')}
+                        </div>
+                    </div>
+                `).join('');
+            } catch (e) {
+                console.error('Error loading patterns:', e);
+                container.innerHTML = `<div style="text-align: center; padding: 60px; color: var(--text-secondary);"><i class="fas fa-exclamation-triangle" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>Failed to load patterns</div></div>`;
+            }
+        }
+        // Semantic Search
+        async function performSearch() {
+            const query = document.getElementById('semanticSearchInput').value.trim();
+            if (!query) return;
+            const container = document.getElementById('searchResults');
+            container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+            try {
+                // Use direct API endpoint for search
+                let url = `${API_URL}/api/search?query=${encodeURIComponent(query)}&limit=20`;
+                if (currentProject) url += `&project_path=${encodeURIComponent(currentProject)}`;
+                const response = await fetch(url);
+                const data = await response.json();
+                if (!data.results?.length) {
+                    container.innerHTML = `<div style="text-align: center; padding: 40px; color: var(--text-secondary);"><i class="fas fa-search" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>No results found for "${escapeHtml(query)}"</div></div>`;
+                    return;
+                }
+                container.innerHTML = data.results.map(result => `
+                    <div class="search-result">
+                        <div class="search-result-header">
+                            <span class="memory-type-badge memory-type-${result.type || 'chunk'}">${result.type || 'memory'}</span>
+                            <span class="search-result-score">${Math.round((result.similarity || 0.8) * 100)}% match</span>
+                        </div>
+                        <div class="search-result-content">${escapeHtml(result.content || '')}</div>
+                    </div>
+                `).join('');
+                addActivityItem('search', 'Search Performed', query.substring(0, 50));
+                todayStats.searches++;
+                document.getElementById('todaySearches').textContent = todayStats.searches;
+            } catch (e) {
+                console.error('Error performing search:', e);
+                container.innerHTML = `<div style="text-align: center; padding: 40px; color: var(--text-secondary);"><i class="fas fa-exclamation-triangle" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i><div>Search failed</div></div>`;
+            }
+        }
+        // Toast
+        function showToast(message, type = 'success') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            const icons = { success: 'check-circle', error: 'exclamation-circle', info: 'info-circle' };
+            const colors = { success: 'var(--accent-green)', error: 'var(--accent-red)', info: 'var(--accent-blue)' };
+            toast.innerHTML = `<i class="fas fa-${icons[type]}" style="color: ${colors[type]}"></i><span>${message}</span>`;
+            container.appendChild(toast);
+            setTimeout(() => {
+                toast.style.animation = 'toastIn 0.3s ease reverse';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.project-dropdown')) {
+                document.getElementById('projectMenu').classList.remove('show');
+            }
+        });
+        // Health check
+        async function checkHealth() {
+            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';
+                } 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';
+            }
+        }
+        setInterval(checkHealth, 10000);
+        checkHealth();
+        // Memory Detail Modal
+        function showMemoryDetail(index) {
+            const memory = currentMemories[index];
+            if (!memory) return;
+            const modal = document.getElementById('memoryModal');
+            document.getElementById('modalMemoryType').innerHTML = `<span class="memory-type-badge memory-type-${memory.type}">${memory.type}</span>`;
+            document.getElementById('modalMemoryContent').textContent = memory.content || 'No content';
+            document.getElementById('modalMemoryDate').textContent = formatTime(memory.created_at);
+            document.getElementById('modalMemoryImportance').textContent = memory.importance || 'N/A';
+            document.getElementById('modalMemoryProject').textContent = memory.project_path ? memory.project_path.split(/[/\\]/).pop() : 'None';
+            document.getElementById('modalMemoryTags').textContent = memory.tags ? JSON.parse(memory.tags).join(', ') : 'None';
+            modal.classList.add('show');
+        }
+        function closeMemoryModal() {
+            document.getElementById('memoryModal').classList.remove('show');
+        }
+        // Close modal on overlay click
+        document.getElementById('memoryModal')?.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal-overlay')) closeMemoryModal();
+        });
+        // Close modal on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeMemoryModal();
+        });
+    </script>
+    <!-- Memory Detail Modal -->
+    <div class="modal-overlay" id="memoryModal" onclick="if(event.target === this) closeMemoryModal()">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-brain"></i> Memory Details</h3>
+                <button class="modal-close" onclick="closeMemoryModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div id="modalMemoryType" style="margin-bottom: 16px;"></div>
+                <pre id="modalMemoryContent"></pre>
+                <div class="modal-meta">
+                    <div class="modal-meta-item">
+                        <label>Created</label>
+                        <span id="modalMemoryDate"></span>
+                    </div>
+                    <div class="modal-meta-item">
+                        <label>Importance</label>
+                        <span id="modalMemoryImportance"></span>
+                    </div>
+                    <div class="modal-meta-item">
+                        <label>Project</label>
+                        <span id="modalMemoryProject"></span>
+                    </div>
+                    <div class="modal-meta-item">
+                        <label>Tags</label>
+                        <span id="modalMemoryTags"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>