@aitytech/agentkits-memory 1.0.0 → 1.0.1

package/src/cli/web-viewer.ts

@@ -0,0 +1,1202 @@
+#!/usr/bin/env node
+/**
+ * AgentKits Memory Web Viewer
+ *
+ * Web-based viewer for memory database with CRUD support.
+ *
+ * Usage:
+ *   npx agentkits-memory-web [--port=1905]
+ *
+ * @module @aitytech/agentkits-memory/cli/web-viewer
+ */
+
+import * as http from 'node:http';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { createRequire } from 'node:module';
+import initSqlJs, { Database as SqlJsDatabase } from 'sql.js';
+
+const args = process.argv.slice(2);
+const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
+
+function parseArgs(): Record<string, string | boolean> {
+  const parsed: Record<string, string | boolean> = {};
+  for (const arg of args) {
+    if (arg.startsWith('--')) {
+      const [key, value] = arg.slice(2).split('=');
+      parsed[key] = value ?? true;
+    }
+  }
+  return parsed;
+}
+
+const options = parseArgs();
+const PORT = parseInt(options.port as string, 10) || 1905;
+
+const dbDir = path.join(projectDir, '.claude/memory');
+const dbPath = path.join(dbDir, 'memory.db');
+
+let SQL: Awaited<ReturnType<typeof initSqlJs>>;
+
+async function initSQL(): Promise<void> {
+  if (!SQL) {
+    const require = createRequire(import.meta.url);
+    const sqlJsPath = require.resolve('sql.js');
+    SQL = await initSqlJs({
+      locateFile: (file: string) => path.join(path.dirname(sqlJsPath), file),
+    });
+  }
+}
+
+async function loadOrCreateDatabase(): Promise<SqlJsDatabase> {
+  await initSQL();
+
+  // Ensure directory exists
+  if (!fs.existsSync(dbDir)) {
+    fs.mkdirSync(dbDir, { recursive: true });
+  }
+
+  let db: SqlJsDatabase;
+
+  if (fs.existsSync(dbPath)) {
+    const buffer = fs.readFileSync(dbPath);
+    db = new SQL.Database(new Uint8Array(buffer));
+  } else {
+    db = new SQL.Database();
+  }
+
+  // Create table if not exists
+  db.run(`
+    CREATE TABLE IF NOT EXISTS memory_entries (
+      id TEXT PRIMARY KEY,
+      key TEXT NOT NULL,
+      content TEXT NOT NULL,
+      type TEXT DEFAULT 'semantic',
+      namespace TEXT DEFAULT 'general',
+      tags TEXT DEFAULT '[]',
+      metadata TEXT DEFAULT '{}',
+      embedding BLOB,
+      created_at INTEGER NOT NULL,
+      updated_at INTEGER NOT NULL,
+      accessed_at INTEGER,
+      access_count INTEGER DEFAULT 0,
+      importance REAL DEFAULT 0.5,
+      decay_rate REAL DEFAULT 0.1
+    )
+  `);
+
+  db.run(`CREATE INDEX IF NOT EXISTS idx_namespace ON memory_entries(namespace)`);
+  db.run(`CREATE INDEX IF NOT EXISTS idx_key ON memory_entries(key)`);
+  db.run(`CREATE INDEX IF NOT EXISTS idx_created ON memory_entries(created_at)`);
+
+  return db;
+}
+
+function saveDatabase(db: SqlJsDatabase): void {
+  const data = db.export();
+  const buffer = Buffer.from(data);
+  fs.writeFileSync(dbPath, buffer);
+}
+
+function generateId(): string {
+  return `mem_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function getStats(db: SqlJsDatabase): {
+  total: number;
+  byNamespace: Record<string, number>;
+  byType: Record<string, number>;
+} {
+  const totalResult = db.exec('SELECT COUNT(*) as count FROM memory_entries');
+  const total = (totalResult[0]?.values[0]?.[0] as number) || 0;
+
+  const nsResult = db.exec('SELECT namespace, COUNT(*) FROM memory_entries GROUP BY namespace');
+  const byNamespace: Record<string, number> = {};
+  if (nsResult[0]) {
+    for (const row of nsResult[0].values) {
+      byNamespace[row[0] as string] = row[1] as number;
+    }
+  }
+
+  const typeResult = db.exec('SELECT type, COUNT(*) FROM memory_entries GROUP BY type');
+  const byType: Record<string, number> = {};
+  if (typeResult[0]) {
+    for (const row of typeResult[0].values) {
+      byType[row[0] as string] = row[1] as number;
+    }
+  }
+
+  return { total, byNamespace, byType };
+}
+
+function getEntries(
+  db: SqlJsDatabase,
+  namespace?: string,
+  limit = 50,
+  offset = 0,
+  search?: string
+): Array<{
+  id: string;
+  key: string;
+  content: string;
+  type: string;
+  namespace: string;
+  tags: string[];
+  created_at: number;
+  updated_at: number;
+}> {
+  let query = 'SELECT id, key, content, type, namespace, tags, created_at, updated_at FROM memory_entries';
+  const conditions: string[] = [];
+  const params: (string | number)[] = [];
+
+  if (namespace) {
+    conditions.push('namespace = ?');
+    params.push(namespace);
+  }
+
+  if (search) {
+    conditions.push('(content LIKE ? OR key LIKE ? OR tags LIKE ?)');
+    const searchPattern = `%${search}%`;
+    params.push(searchPattern, searchPattern, searchPattern);
+  }
+
+  if (conditions.length > 0) {
+    query += ' WHERE ' + conditions.join(' AND ');
+  }
+
+  query += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
+  params.push(limit, offset);
+
+  const stmt = db.prepare(query);
+  stmt.bind(params);
+
+  const entries: Array<{
+    id: string;
+    key: string;
+    content: string;
+    type: string;
+    namespace: string;
+    tags: string[];
+    created_at: number;
+    updated_at: number;
+  }> = [];
+
+  while (stmt.step()) {
+    const row = stmt.getAsObject();
+    entries.push({
+      id: row.id as string,
+      key: row.key as string,
+      content: row.content as string,
+      type: row.type as string,
+      namespace: row.namespace as string,
+      tags: JSON.parse((row.tags as string) || '[]'),
+      created_at: row.created_at as number,
+      updated_at: row.updated_at as number,
+    });
+  }
+  stmt.free();
+
+  return entries;
+}
+
+function getHTML(): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AgentKits Memory Viewer</title>
+  <style>
+    :root {
+      --bg-primary: #0F172A;
+      --bg-secondary: #1E293B;
+      --bg-card: #334155;
+      --text-primary: #F8FAFC;
+      --text-secondary: #94A3B8;
+      --text-muted: #64748B;
+      --border: #475569;
+      --accent: #3B82F6;
+      --accent-hover: #2563EB;
+      --success: #22C55E;
+      --warning: #F59E0B;
+      --error: #EF4444;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+      line-height: 1.5;
+    }
+
+    .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 32px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid var(--border);
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+
+    .logo { display: flex; align-items: center; gap: 12px; }
+
+    .logo-icon {
+      width: 40px; height: 40px;
+      background: linear-gradient(135deg, var(--accent), #8B5CF6);
+      border-radius: 10px;
+      display: flex; align-items: center; justify-content: center;
+    }
+
+    .logo-icon svg { width: 24px; height: 24px; fill: white; }
+    h1 { font-size: 24px; font-weight: 600; }
+    .subtitle { font-size: 14px; color: var(--text-secondary); }
+
+    .header-actions { display: flex; gap: 12px; }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+
+    .stat-card {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      padding: 20px;
+      border: 1px solid var(--border);
+    }
+
+    .stat-label {
+      font-size: 13px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    .stat-value { font-size: 32px; font-weight: 700; color: var(--text-primary); }
+
+    .controls { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
+
+    .search-box { flex: 1; min-width: 250px; position: relative; }
+
+    .search-box input {
+      width: 100%;
+      padding: 12px 16px 12px 44px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-primary);
+      font-size: 14px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .search-box input:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+    }
+
+    .search-box input::placeholder { color: var(--text-muted); }
+
+    .search-box svg {
+      position: absolute;
+      left: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 18px; height: 18px;
+      fill: var(--text-muted);
+    }
+
+    .entries-list { display: flex; flex-direction: column; gap: 12px; }
+
+    .entry-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      cursor: pointer;
+      transition: border-color 0.2s, transform 0.2s;
+      position: relative;
+    }
+
+    .entry-card:hover {
+      border-color: var(--accent);
+      transform: translateY(-2px);
+    }
+
+    .entry-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 12px;
+      gap: 12px;
+    }
+
+    .entry-key { font-weight: 600; font-size: 15px; color: var(--text-primary); word-break: break-word; }
+
+    .entry-namespace {
+      font-size: 12px;
+      padding: 4px 10px;
+      background: var(--bg-card);
+      border-radius: 6px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+    }
+
+    .entry-content {
+      font-size: 14px;
+      color: var(--text-secondary);
+      line-height: 1.6;
+      margin-bottom: 12px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .entry-content.truncated {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .entry-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .entry-tags { display: flex; gap: 6px; flex-wrap: wrap; }
+
+    .tag {
+      font-size: 11px;
+      padding: 3px 8px;
+      background: rgba(59, 130, 246, 0.2);
+      color: var(--accent);
+      border-radius: 4px;
+    }
+
+    .entry-date { font-size: 12px; color: var(--text-muted); }
+
+    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
+    .empty-state svg { width: 64px; height: 64px; fill: var(--text-muted); margin-bottom: 16px; }
+    .empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-primary); }
+
+    .loading { display: flex; justify-content: center; padding: 40px; }
+
+    .spinner {
+      width: 32px; height: 32px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .namespace-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
+
+    .namespace-pill {
+      padding: 8px 16px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      font-size: 13px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .namespace-pill:hover { border-color: var(--accent); color: var(--text-primary); }
+    .namespace-pill.active { background: var(--accent); border-color: var(--accent); color: white; }
+    .namespace-pill .count { margin-left: 6px; font-size: 11px; opacity: 0.7; }
+
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+
+    .modal-overlay.active { display: flex; }
+
+    .modal {
+      background: var(--bg-secondary);
+      border-radius: 16px;
+      max-width: 700px;
+      width: 100%;
+      max-height: 90vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .modal-title { font-size: 18px; font-weight: 600; }
+
+    .modal-close {
+      background: none;
+      border: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 6px;
+      transition: background 0.2s;
+    }
+
+    .modal-close:hover { background: var(--bg-card); }
+    .modal-close svg { width: 20px; height: 20px; fill: currentColor; }
+
+    .modal-body { padding: 24px; overflow-y: auto; }
+
+    .detail-row { margin-bottom: 20px; }
+
+    .detail-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+
+    .detail-value {
+      font-size: 14px;
+      color: var(--text-primary);
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: 1.6;
+    }
+
+    .detail-value.content {
+      background: var(--bg-card);
+      padding: 16px;
+      border-radius: 8px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
+
+    .btn {
+      padding: 10px 18px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-primary);
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .btn:hover:not(:disabled) { border-color: var(--accent); }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    .btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
+    .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+
+    .btn-danger { background: var(--error); border-color: var(--error); color: white; }
+    .btn-danger:hover { background: #DC2626; border-color: #DC2626; }
+
+    .btn-success { background: var(--success); border-color: var(--success); color: white; }
+    .btn-success:hover { background: #16A34A; border-color: #16A34A; }
+
+    .btn svg { width: 16px; height: 16px; fill: currentColor; }
+
+    .form-group { margin-bottom: 20px; }
+
+    .form-group label {
+      display: block;
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .form-group input,
+    .form-group textarea,
+    .form-group select {
+      width: 100%;
+      padding: 12px 16px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      transition: border-color 0.2s;
+    }
+
+    .form-group input:focus,
+    .form-group textarea:focus,
+    .form-group select:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .form-group textarea { min-height: 120px; resize: vertical; }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      padding: 16px 24px;
+      border-top: 1px solid var(--border);
+    }
+
+    .detail-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+      padding-top: 20px;
+      border-top: 1px solid var(--border);
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      padding: 16px 24px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-primary);
+      font-size: 14px;
+      z-index: 200;
+      animation: slideIn 0.3s ease;
+    }
+
+    .toast.success { border-color: var(--success); background: rgba(34, 197, 94, 0.1); }
+    .toast.error { border-color: var(--error); background: rgba(239, 68, 68, 0.1); }
+
+    @keyframes slideIn {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+
+    @media (max-width: 768px) {
+      .container { padding: 16px; }
+      header { flex-direction: column; align-items: flex-start; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .controls { flex-direction: column; }
+      .search-box { min-width: 100%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="logo">
+        <div class="logo-icon">
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+        </div>
+        <div>
+          <h1>Memory Viewer</h1>
+          <p class="subtitle">AgentKits Memory Database</p>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-primary" onclick="openAddModal()">
+          <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          Add Memory
+        </button>
+        <button class="btn" onclick="loadData()">
+          <svg viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+          Refresh
+        </button>
+      </div>
+    </header>
+
+    <div id="stats-container" class="stats-grid"></div>
+    <div id="namespace-pills" class="namespace-pills"></div>
+
+    <div class="controls">
+      <div class="search-box">
+        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
+        <input type="text" id="search-input" placeholder="Search memories..." oninput="debounceSearch()">
+      </div>
+    </div>
+
+    <div id="entries-container" class="entries-list">
+      <div class="loading"><div class="spinner"></div></div>
+    </div>
+
+    <div id="pagination" class="pagination"></div>
+  </div>
+
+  <!-- Detail Modal -->
+  <div id="detail-modal" class="modal-overlay" onclick="closeDetailModal(event)">
+    <div class="modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <span class="modal-title">Memory Details</span>
+        <button class="modal-close" onclick="closeDetailModal()">
+          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+        </button>
+      </div>
+      <div class="modal-body" id="detail-body"></div>
+    </div>
+  </div>
+
+  <!-- Add/Edit Modal -->
+  <div id="form-modal" class="modal-overlay" onclick="closeFormModal(event)">
+    <div class="modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <span class="modal-title" id="form-title">Add Memory</span>
+        <button class="modal-close" onclick="closeFormModal()">
+          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <input type="hidden" id="form-id">
+        <div class="form-group">
+          <label for="form-key">Key</label>
+          <input type="text" id="form-key" placeholder="e.g., auth-pattern, api-design">
+        </div>
+        <div class="form-group">
+          <label for="form-namespace">Namespace</label>
+          <select id="form-namespace">
+            <option value="patterns">patterns</option>
+            <option value="decisions">decisions</option>
+            <option value="errors">errors</option>
+            <option value="context">context</option>
+            <option value="active-context">active-context</option>
+            <option value="session-state">session-state</option>
+            <option value="progress">progress</option>
+            <option value="general">general</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="form-type">Type</label>
+          <select id="form-type">
+            <option value="semantic">semantic</option>
+            <option value="episodic">episodic</option>
+            <option value="procedural">procedural</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="form-content">Content</label>
+          <textarea id="form-content" placeholder="Enter the memory content..."></textarea>
+        </div>
+        <div class="form-group">
+          <label for="form-tags">Tags (comma-separated)</label>
+          <input type="text" id="form-tags" placeholder="e.g., auth, security, api">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn" onclick="closeFormModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="saveEntry()">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Confirmation Modal -->
+  <div id="delete-modal" class="modal-overlay" onclick="closeDeleteModal(event)">
+    <div class="modal" style="max-width: 400px;" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <span class="modal-title">Delete Memory</span>
+        <button class="modal-close" onclick="closeDeleteModal()">
+          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to delete this memory? This action cannot be undone.</p>
+        <input type="hidden" id="delete-id">
+      </div>
+      <div class="modal-footer">
+        <button class="btn" onclick="closeDeleteModal()">Cancel</button>
+        <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let currentNamespace = '';
+    let currentSearch = '';
+    let currentPage = 0;
+    const pageSize = 20;
+    let stats = { total: 0, byNamespace: {}, byType: {} };
+    let debounceTimer = null;
+
+    async function loadData() {
+      try {
+        const statsRes = await fetch('/api/stats');
+        stats = await statsRes.json();
+        renderStats();
+        renderNamespacePills();
+        await loadEntries();
+      } catch (error) {
+        console.error('Failed to load data:', error);
+        showToast('Failed to load data', 'error');
+      }
+    }
+
+    function renderStats() {
+      const container = document.getElementById('stats-container');
+      container.innerHTML = \`
+        <div class="stat-card">
+          <div class="stat-label">Total Memories</div>
+          <div class="stat-value">\${stats.total || 0}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Namespaces</div>
+          <div class="stat-value">\${Object.keys(stats.byNamespace || {}).length}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Types</div>
+          <div class="stat-value">\${Object.keys(stats.byType || {}).length}</div>
+        </div>
+      \`;
+    }
+
+    function renderNamespacePills() {
+      const container = document.getElementById('namespace-pills');
+      const pills = ['<span class="namespace-pill' + (currentNamespace === '' ? ' active' : '') + '" onclick="filterNamespace(\\'\\')">All<span class="count">' + (stats.total || 0) + '</span></span>'];
+
+      for (const [ns, count] of Object.entries(stats.byNamespace || {})) {
+        pills.push(\`<span class="namespace-pill\${currentNamespace === ns ? ' active' : ''}" onclick="filterNamespace('\${ns}')">\${ns}<span class="count">\${count}</span></span>\`);
+      }
+
+      container.innerHTML = pills.join('');
+    }
+
+    async function loadEntries() {
+      const container = document.getElementById('entries-container');
+      container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+
+      const params = new URLSearchParams({ limit: pageSize, offset: currentPage * pageSize });
+      if (currentNamespace) params.set('namespace', currentNamespace);
+      if (currentSearch) params.set('search', currentSearch);
+
+      try {
+        const res = await fetch('/api/entries?' + params);
+        const entries = await res.json();
+
+        if (!Array.isArray(entries) || entries.length === 0) {
+          container.innerHTML = \`
+            <div class="empty-state">
+              <svg viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-1 12H5c-.55 0-1-.45-1-1v-1h16v1c0 .55-.45 1-1 1zm1-4H4V8h16v6z"/></svg>
+              <h3>No memories found</h3>
+              <p>Click "Add Memory" to create your first entry</p>
+            </div>
+          \`;
+        } else {
+          container.innerHTML = entries.map(entry => \`
+            <div class="entry-card" onclick="showDetail('\${entry.id}')">
+              <div class="entry-header">
+                <span class="entry-key">\${escapeHtml(entry.key)}</span>
+                <span class="entry-namespace">\${entry.namespace}</span>
+              </div>
+              <div class="entry-content truncated">\${escapeHtml(entry.content)}</div>
+              <div class="entry-footer">
+                <div class="entry-tags">
+                  \${(entry.tags || []).map(tag => \`<span class="tag">\${escapeHtml(tag)}</span>\`).join('')}
+                </div>
+                <span class="entry-date">\${formatDate(entry.created_at)}</span>
+              </div>
+            </div>
+          \`).join('');
+        }
+
+        renderPagination(entries.length);
+      } catch (error) {
+        container.innerHTML = '<div class="empty-state"><h3>No memories yet</h3><p>Click "Add Memory" to get started</p></div>';
+      }
+    }
+
+    function renderPagination(currentCount) {
+      const container = document.getElementById('pagination');
+      const hasMore = currentCount === pageSize;
+      const hasPrev = currentPage > 0;
+
+      container.innerHTML = \`
+        <button class="btn" \${!hasPrev ? 'disabled' : ''} onclick="prevPage()">Previous</button>
+        <button class="btn" \${!hasMore ? 'disabled' : ''} onclick="nextPage()">Next</button>
+      \`;
+    }
+
+    function filterNamespace(ns) {
+      currentNamespace = ns;
+      currentPage = 0;
+      renderNamespacePills();
+      loadEntries();
+    }
+
+    function debounceSearch() {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        currentSearch = document.getElementById('search-input').value;
+        currentPage = 0;
+        loadEntries();
+      }, 300);
+    }
+
+    function prevPage() { if (currentPage > 0) { currentPage--; loadEntries(); } }
+    function nextPage() { currentPage++; loadEntries(); }
+
+    async function showDetail(id) {
+      try {
+        const res = await fetch('/api/entry/' + id);
+        const entry = await res.json();
+
+        document.getElementById('detail-body').innerHTML = \`
+          <div class="detail-row">
+            <div class="detail-label">Key</div>
+            <div class="detail-value">\${escapeHtml(entry.key)}</div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-label">Namespace</div>
+            <div class="detail-value">\${entry.namespace}</div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-label">Type</div>
+            <div class="detail-value">\${entry.type}</div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-label">Content</div>
+            <div class="detail-value content">\${escapeHtml(entry.content)}</div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-label">Tags</div>
+            <div class="detail-value">\${(entry.tags || []).join(', ') || 'None'}</div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-label">Created</div>
+            <div class="detail-value">\${new Date(entry.created_at).toLocaleString()}</div>
+          </div>
+          <div class="detail-actions">
+            <button class="btn btn-primary" onclick="openEditModal('\${entry.id}')">
+              <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+              Edit
+            </button>
+            <button class="btn btn-danger" onclick="openDeleteModal('\${entry.id}')">
+              <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+              Delete
+            </button>
+          </div>
+        \`;
+
+        document.getElementById('detail-modal').classList.add('active');
+      } catch (error) {
+        showToast('Failed to load entry', 'error');
+      }
+    }
+
+    function closeDetailModal(event) {
+      if (!event || event.target.id === 'detail-modal') {
+        document.getElementById('detail-modal').classList.remove('active');
+      }
+    }
+
+    function openAddModal() {
+      document.getElementById('form-title').textContent = 'Add Memory';
+      document.getElementById('form-id').value = '';
+      document.getElementById('form-key').value = '';
+      document.getElementById('form-namespace').value = 'patterns';
+      document.getElementById('form-type').value = 'semantic';
+      document.getElementById('form-content').value = '';
+      document.getElementById('form-tags').value = '';
+      document.getElementById('form-modal').classList.add('active');
+    }
+
+    async function openEditModal(id) {
+      closeDetailModal();
+      const res = await fetch('/api/entry/' + id);
+      const entry = await res.json();
+
+      document.getElementById('form-title').textContent = 'Edit Memory';
+      document.getElementById('form-id').value = entry.id;
+      document.getElementById('form-key').value = entry.key;
+      document.getElementById('form-namespace').value = entry.namespace;
+      document.getElementById('form-type').value = entry.type;
+      document.getElementById('form-content').value = entry.content;
+      document.getElementById('form-tags').value = (entry.tags || []).join(', ');
+      document.getElementById('form-modal').classList.add('active');
+    }
+
+    function closeFormModal(event) {
+      if (!event || event.target.id === 'form-modal') {
+        document.getElementById('form-modal').classList.remove('active');
+      }
+    }
+
+    async function saveEntry() {
+      const id = document.getElementById('form-id').value;
+      const data = {
+        key: document.getElementById('form-key').value.trim(),
+        namespace: document.getElementById('form-namespace').value,
+        type: document.getElementById('form-type').value,
+        content: document.getElementById('form-content').value.trim(),
+        tags: document.getElementById('form-tags').value.split(',').map(t => t.trim()).filter(Boolean),
+      };
+
+      if (!data.key || !data.content) {
+        showToast('Key and Content are required', 'error');
+        return;
+      }
+
+      try {
+        const method = id ? 'PUT' : 'POST';
+        const url = id ? '/api/entry/' + id : '/api/entries';
+        const res = await fetch(url, {
+          method,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data),
+        });
+
+        if (res.ok) {
+          closeFormModal();
+          showToast(id ? 'Memory updated' : 'Memory created', 'success');
+          loadData();
+        } else {
+          const err = await res.json();
+          showToast(err.error || 'Failed to save', 'error');
+        }
+      } catch (error) {
+        showToast('Failed to save', 'error');
+      }
+    }
+
+    function openDeleteModal(id) {
+      closeDetailModal();
+      document.getElementById('delete-id').value = id;
+      document.getElementById('delete-modal').classList.add('active');
+    }
+
+    function closeDeleteModal(event) {
+      if (!event || event.target.id === 'delete-modal') {
+        document.getElementById('delete-modal').classList.remove('active');
+      }
+    }
+
+    async function confirmDelete() {
+      const id = document.getElementById('delete-id').value;
+      try {
+        const res = await fetch('/api/entry/' + id, { method: 'DELETE' });
+        if (res.ok) {
+          closeDeleteModal();
+          showToast('Memory deleted', 'success');
+          loadData();
+        } else {
+          showToast('Failed to delete', 'error');
+        }
+      } catch (error) {
+        showToast('Failed to delete', 'error');
+      }
+    }
+
+    function showToast(message, type = 'success') {
+      const toast = document.createElement('div');
+      toast.className = 'toast ' + type;
+      toast.textContent = message;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 3000);
+    }
+
+    function escapeHtml(text) {
+      if (!text) return '';
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function formatDate(timestamp) {
+      if (!timestamp) return 'Unknown';
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diff = now - date;
+
+      if (diff < 60000) return 'Just now';
+      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+      if (diff < 604800000) return Math.floor(diff / 86400000) + 'd ago';
+
+      return date.toLocaleDateString();
+    }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        closeDetailModal();
+        closeFormModal();
+        closeDeleteModal();
+      }
+    });
+
+    loadData();
+  </script>
+</body>
+</html>`;
+}
+
+async function readBody(req: http.IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', chunk => body += chunk);
+    req.on('end', () => resolve(body));
+    req.on('error', reject);
+  });
+}
+
+async function handleRequest(
+  req: http.IncomingMessage,
+  res: http.ServerResponse
+): Promise<void> {
+  const url = new URL(req.url || '/', `http://localhost:${PORT}`);
+  const method = req.method || 'GET';
+
+  res.setHeader('Content-Type', 'application/json');
+
+  try {
+    const db = await loadOrCreateDatabase();
+
+    // Serve HTML
+    if (url.pathname === '/' && method === 'GET') {
+      res.setHeader('Content-Type', 'text/html');
+      res.writeHead(200);
+      res.end(getHTML());
+      db.close();
+      return;
+    }
+
+    // GET stats
+    if (url.pathname === '/api/stats' && method === 'GET') {
+      const stats = getStats(db);
+      res.writeHead(200);
+      res.end(JSON.stringify(stats));
+      db.close();
+      return;
+    }
+
+    // GET entries
+    if (url.pathname === '/api/entries' && method === 'GET') {
+      const namespace = url.searchParams.get('namespace') || undefined;
+      const limit = parseInt(url.searchParams.get('limit') || '50', 10);
+      const offset = parseInt(url.searchParams.get('offset') || '0', 10);
+      const search = url.searchParams.get('search') || undefined;
+
+      const entries = getEntries(db, namespace, limit, offset, search);
+      res.writeHead(200);
+      res.end(JSON.stringify(entries));
+      db.close();
+      return;
+    }
+
+    // POST create entry
+    if (url.pathname === '/api/entries' && method === 'POST') {
+      const body = await readBody(req);
+      const data = JSON.parse(body);
+      const now = Date.now();
+      const id = generateId();
+
+      db.run(
+        `INSERT INTO memory_entries (id, key, content, type, namespace, tags, created_at, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+        [id, data.key, data.content, data.type || 'semantic', data.namespace || 'general', JSON.stringify(data.tags || []), now, now]
+      );
+
+      saveDatabase(db);
+      res.writeHead(201);
+      res.end(JSON.stringify({ id, success: true }));
+      db.close();
+      return;
+    }
+
+    // GET single entry
+    if (url.pathname.startsWith('/api/entry/') && method === 'GET') {
+      const id = url.pathname.split('/').pop();
+      const stmt = db.prepare('SELECT * FROM memory_entries WHERE id = ?');
+      stmt.bind([id]);
+
+      if (stmt.step()) {
+        const row = stmt.getAsObject();
+        res.writeHead(200);
+        res.end(JSON.stringify({
+          id: row.id,
+          key: row.key,
+          content: row.content,
+          type: row.type,
+          namespace: row.namespace,
+          tags: JSON.parse((row.tags as string) || '[]'),
+          created_at: row.created_at,
+          updated_at: row.updated_at,
+        }));
+      } else {
+        res.writeHead(404);
+        res.end(JSON.stringify({ error: 'Entry not found' }));
+      }
+      stmt.free();
+      db.close();
+      return;
+    }
+
+    // PUT update entry
+    if (url.pathname.startsWith('/api/entry/') && method === 'PUT') {
+      const id = url.pathname.split('/').pop();
+      const body = await readBody(req);
+      const data = JSON.parse(body);
+      const now = Date.now();
+
+      db.run(
+        `UPDATE memory_entries SET key = ?, content = ?, type = ?, namespace = ?, tags = ?, updated_at = ?
+         WHERE id = ?`,
+        [data.key, data.content, data.type, data.namespace, JSON.stringify(data.tags || []), now, id]
+      );
+
+      saveDatabase(db);
+      res.writeHead(200);
+      res.end(JSON.stringify({ success: true }));
+      db.close();
+      return;
+    }
+
+    // DELETE entry
+    if (url.pathname.startsWith('/api/entry/') && method === 'DELETE') {
+      const id = url.pathname.split('/').pop();
+      db.run('DELETE FROM memory_entries WHERE id = ?', [id]);
+      saveDatabase(db);
+      res.writeHead(200);
+      res.end(JSON.stringify({ success: true }));
+      db.close();
+      return;
+    }
+
+    res.writeHead(404);
+    res.end(JSON.stringify({ error: 'Not found' }));
+    db.close();
+  } catch (error) {
+    res.writeHead(500);
+    res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal error' }));
+  }
+}
+
+const server = http.createServer(handleRequest);
+
+server.listen(PORT, () => {
+  console.log(`\n  AgentKits Memory Viewer\n`);
+  console.log(`  Local:   http://localhost:${PORT}`);
+  console.log(`  Database: ${dbPath}\n`);
+  console.log(`  Press Ctrl+C to stop\n`);
+});