<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Memory System</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="app">
<header class="header">
<div class="header-content">
<div class="logo">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
<h1>Nexus Memory System</h1>
</div>
<div class="header-stats">
<div class="stat-badge">
<span class="stat-label">Memories</span>
<span class="stat-value" id="total-memories">-</span>
</div>
<div class="stat-badge">
<span class="stat-label">Agents</span>
<span class="stat-value" id="total-agents">-</span>
</div>
<div class="connection-status" id="connection-status">
<span class="status-dot"></span>
<span class="status-text">Connecting...</span>
</div>
</div>
</div>
</header>
<main class="main">
<aside class="sidebar">
<nav class="nav">
<button class="nav-item active" data-view="memories">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
</svg>
Memories
</button>
<button class="nav-item" data-view="search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
Search
</button>
<button class="nav-item" data-view="stats">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="20" x2="18" y2="10"/>
<line x1="12" y1="20" x2="12" y2="4"/>
<line x1="6" y1="20" x2="6" y2="14"/>
</svg>
Statistics
</button>
<button class="nav-item" data-view="agents">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
Agents
</button>
</nav>
<div class="sidebar-footer">
<div class="version">v1.0.0</div>
</div>
</aside>
<div class="content">
<div class="view active" id="memories-view">
<div class="view-header">
<h2>Memories</h2>
<button class="btn btn-primary" id="add-memory-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
Add Memory
</button>
</div>
<div class="filters">
<select id="agent-filter" class="filter-select">
<option value="">All Agents</option>
</select>
<select id="category-filter" class="filter-select">
<option value="">All Categories</option>
<option value="general">General</option>
<option value="facts">Facts</option>
<option value="preferences">Preferences</option>
<option value="context">Context</option>
<option value="specifications">Specifications</option>
<option value="session">Session</option>
</select>
<input type="text" id="search-filter" class="filter-input" placeholder="Filter memories...">
</div>
<div class="memories-list" id="memories-list">
</div>
<div class="pagination" id="pagination">
</div>
</div>
<div class="view" id="search-view">
<div class="view-header">
<h2>Semantic Search</h2>
</div>
<div class="search-container">
<div class="search-box">
<input type="text" id="search-input" class="search-input" placeholder="Enter search query...">
<button class="btn btn-primary" id="search-btn">Search</button>
</div>
<div class="search-options">
<select id="search-agent-filter" class="filter-select">
<option value="">All Agents</option>
</select>
<select id="search-category-filter" class="filter-select">
<option value="">All Categories</option>
<option value="general">General</option>
<option value="facts">Facts</option>
<option value="preferences">Preferences</option>
<option value="context">Context</option>
<option value="specifications">Specifications</option>
<option value="session">Session</option>
</select>
</div>
</div>
<div class="search-results" id="search-results">
</div>
</div>
<div class="view" id="stats-view">
<div class="view-header">
<h2>Statistics</h2>
<button class="btn btn-secondary" id="refresh-stats-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="23 4 23 10 17 10"/>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
</svg>
Refresh
</button>
</div>
<div class="stats-grid" id="stats-grid">
</div>
<div class="agent-stats" id="agent-stats">
<h3>Agent Statistics</h3>
<div class="agent-stats-list" id="agent-stats-list">
</div>
</div>
</div>
<div class="view" id="agents-view">
<div class="view-header">
<h2>Agents</h2>
</div>
<div class="agents-list" id="agents-list">
</div>
</div>
</div>
</main>
</div>
<div class="modal" id="add-memory-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Add New Memory</h3>
<button class="modal-close" id="modal-close">×</button>
</div>
<form id="add-memory-form">
<div class="form-group">
<label for="memory-content">Content</label>
<textarea id="memory-content" rows="4" required></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="memory-agent">Agent Type</label>
<select id="memory-agent" required>
<option value="general">General</option>
<option value="claude-code">Claude Code</option>
<option value="gemini">Gemini</option>
<option value="qwen">Qwen</option>
</select>
</div>
<div class="form-group">
<label for="memory-category">Category</label>
<select id="memory-category">
<option value="general">General</option>
<option value="facts">Facts</option>
<option value="preferences">Preferences</option>
<option value="context">Context</option>
<option value="specifications">Specifications</option>
<option value="session">Session</option>
</select>
</div>
</div>
<div class="form-group">
<label for="memory-labels">Labels (comma-separated)</label>
<input type="text" id="memory-labels" placeholder="e.g., important, todo, review">
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancel-add-memory">Cancel</button>
<button type="submit" class="btn btn-primary">Save Memory</button>
</div>
</form>
</div>
</div>
<div class="modal" id="memory-detail-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Memory Details</h3>
<button class="modal-close" id="detail-modal-close">×</button>
</div>
<div class="memory-detail" id="memory-detail">
</div>
<div class="form-actions">
<button type="button" class="btn btn-danger" id="delete-memory-btn">Delete</button>
<button type="button" class="btn btn-secondary" id="close-detail-btn">Close</button>
</div>
</div>
</div>
<div class="toast-container" id="toast-container"></div>
<script src="/static/app.js"></script>
</body>
</html>