@199-bio/engram 0.2.0 → 0.3.0

package/dist/index.js

@@ -14,6 +14,7 @@ import { EngramDatabase } from "./storage/database.js";
 import { KnowledgeGraph } from "./graph/knowledge-graph.js";
 import { createRetriever } from "./retrieval/colbert.js";
 import { HybridSearch } from "./retrieval/hybrid.js";
+import { EngramWebServer } from "./web/server.js";
 // ============ Configuration ============
 const DB_PATH = process.env.ENGRAM_DB_PATH
     ? path.resolve(process.env.ENGRAM_DB_PATH.replace("~", os.homedir()))
@@ -23,6 +24,7 @@ const DB_FILE = path.join(DB_PATH, "engram.db");
 let db;
 let graph;
 let search;
+let webServer = null;
 async function initialize() {
     console.error(`[Engram] Initializing with database at ${DB_FILE}`);
     db = new EngramDatabase(DB_FILE);
@@ -40,7 +42,7 @@ async function initialize() {
 // ============ MCP Server ============
 const server = new Server({
     name: "engram",
-    version: "0.2.0",
+    version: "0.3.0",
 }, {
     capabilities: {
         tools: {},
@@ -280,6 +282,27 @@ const TOOLS = [
             openWorldHint: false,
         },
     },
+    {
+        name: "engram_web",
+        description: "Launch the Engram web interface for browsing, searching, and editing memories visually. Returns a URL to open in your browser.",
+        inputSchema: {
+            type: "object",
+            properties: {
+                port: {
+                    type: "number",
+                    description: "Port to run the web server on (default: 3847)",
+                    default: 3847,
+                },
+            },
+        },
+        annotations: {
+            title: "Launch Web Interface",
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: true,
+        },
+    },
 ];
 // List available tools
 server.setRequestHandler(ListToolsRequestSchema, async () => ({
@@ -505,6 +528,26 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     ],
                 };
             }
+            case "engram_web": {
+                const { port = 3847 } = args;
+                // Create or reuse web server
+                if (!webServer) {
+                    webServer = new EngramWebServer({ db, graph, search, port });
+                }
+                const url = await webServer.start();
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: JSON.stringify({
+                                success: true,
+                                url,
+                                message: `Web interface running at ${url}`,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
             default:
                 throw new Error(`Unknown tool: ${name}`);
         }

package/dist/web/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/web/server.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAiBtD,UAAU,gBAAgB;IACxB,EAAE,EAAE,cAAc,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,EAAE,CAAiB;IAC3B,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,IAAI,CAAS;gBAET,OAAO,EAAE,gBAAgB;IAO/B,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC;IAkB9B,IAAI,IAAI,IAAI;YAOE,aAAa;YA+Bb,SAAS;YAgIT,WAAW;IAgCzB,OAAO,CAAC,SAAS;CAclB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@199-bio/engram",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Give Claude a perfect memory. Local-first MCP server with hybrid search.",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -19,6 +19,7 @@ import { EngramDatabase } from "./storage/database.js";
 import { KnowledgeGraph } from "./graph/knowledge-graph.js";
 import { createRetriever } from "./retrieval/colbert.js";
 import { HybridSearch } from "./retrieval/hybrid.js";
+import { EngramWebServer } from "./web/server.js";
 
 // ============ Configuration ============
 
@@ -33,6 +34,7 @@ const DB_FILE = path.join(DB_PATH, "engram.db");
 let db: EngramDatabase;
 let graph: KnowledgeGraph;
 let search: HybridSearch;
+let webServer: EngramWebServer | null = null;
 
 async function initialize(): Promise<void> {
   console.error(`[Engram] Initializing with database at ${DB_FILE}`);
@@ -58,7 +60,7 @@ async function initialize(): Promise<void> {
 const server = new Server(
   {
     name: "engram",
-    version: "0.2.0",
+    version: "0.3.0",
   },
   {
     capabilities: {
@@ -303,6 +305,27 @@ const TOOLS = [
       openWorldHint: false,
     },
   },
+  {
+    name: "engram_web",
+    description: "Launch the Engram web interface for browsing, searching, and editing memories visually. Returns a URL to open in your browser.",
+    inputSchema: {
+      type: "object" as const,
+      properties: {
+        port: {
+          type: "number",
+          description: "Port to run the web server on (default: 3847)",
+          default: 3847,
+        },
+      },
+    },
+    annotations: {
+      title: "Launch Web Interface",
+      readOnlyHint: false,
+      destructiveHint: false,
+      idempotentHint: true,
+      openWorldHint: true,
+    },
+  },
 ];
 
 // List available tools
@@ -587,6 +610,30 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         };
       }
 
+      case "engram_web": {
+        const { port = 3847 } = args as { port?: number };
+
+        // Create or reuse web server
+        if (!webServer) {
+          webServer = new EngramWebServer({ db, graph, search, port });
+        }
+
+        const url = await webServer.start();
+
+        return {
+          content: [
+            {
+              type: "text" as const,
+              text: JSON.stringify({
+                success: true,
+                url,
+                message: `Web interface running at ${url}`,
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
       default:
         throw new Error(`Unknown tool: ${name}`);
     }

package/src/web/server.ts

@@ -0,0 +1,280 @@
+/**
+ * Engram Web Interface
+ * Local web server for browsing, searching, and editing memories
+ */
+
+import http from "http";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { EngramDatabase } from "../storage/database.js";
+import { KnowledgeGraph } from "../graph/knowledge-graph.js";
+import { HybridSearch } from "../retrieval/hybrid.js";
+import { ColBERTRetriever, SimpleRetriever } from "../retrieval/colbert.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const STATIC_DIR = path.join(__dirname, "..", "..", "src", "web", "static");
+
+const MIME_TYPES: Record<string, string> = {
+  ".html": "text/html",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+};
+
+interface WebServerOptions {
+  db: EngramDatabase;
+  graph: KnowledgeGraph;
+  search: HybridSearch;
+  port?: number;
+}
+
+export class EngramWebServer {
+  private server: http.Server | null = null;
+  private db: EngramDatabase;
+  private graph: KnowledgeGraph;
+  private search: HybridSearch;
+  private port: number;
+
+  constructor(options: WebServerOptions) {
+    this.db = options.db;
+    this.graph = options.graph;
+    this.search = options.search;
+    this.port = options.port || 3847;
+  }
+
+  async start(): Promise<string> {
+    if (this.server) {
+      return `http://localhost:${this.port}`;
+    }
+
+    this.server = http.createServer((req, res) => this.handleRequest(req, res));
+
+    return new Promise((resolve, reject) => {
+      this.server!.listen(this.port, () => {
+        const url = `http://localhost:${this.port}`;
+        console.error(`[Engram] Web interface running at ${url}`);
+        resolve(url);
+      });
+
+      this.server!.on("error", reject);
+    });
+  }
+
+  stop(): void {
+    if (this.server) {
+      this.server.close();
+      this.server = null;
+    }
+  }
+
+  private async handleRequest(req: http.IncomingMessage, res: http.ServerResponse): Promise<void> {
+    const url = new URL(req.url || "/", `http://localhost:${this.port}`);
+    const pathname = url.pathname;
+
+    // CORS headers for local development
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+
+    try {
+      // API routes
+      if (pathname.startsWith("/api/")) {
+        await this.handleAPI(req, res, pathname, url);
+        return;
+      }
+
+      // Static files
+      await this.serveStatic(req, res, pathname);
+    } catch (error) {
+      console.error("[Engram Web] Error:", error);
+      res.writeHead(500, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ error: "Internal server error" }));
+    }
+  }
+
+  private async handleAPI(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    pathname: string,
+    url: URL
+  ): Promise<void> {
+    const method = req.method || "GET";
+    const body = method !== "GET" ? await this.parseBody(req) : null;
+
+    res.setHeader("Content-Type", "application/json");
+
+    // GET /api/stats
+    if (pathname === "/api/stats" && method === "GET") {
+      const stats = this.db.getStats();
+      res.end(JSON.stringify(stats));
+      return;
+    }
+
+    // GET /api/memories
+    if (pathname === "/api/memories" && method === "GET") {
+      const query = url.searchParams.get("q");
+      const limit = parseInt(url.searchParams.get("limit") || "50");
+
+      if (query) {
+        const results = await this.search.search(query, { limit });
+        res.end(JSON.stringify({
+          memories: results.map(r => ({
+            ...r.memory,
+            score: r.score,
+            sources: r.sources,
+          })),
+        }));
+      } else {
+        const memories = this.db.getAllMemories(limit);
+        res.end(JSON.stringify({ memories }));
+      }
+      return;
+    }
+
+    // POST /api/memories
+    if (pathname === "/api/memories" && method === "POST") {
+      const { content, source, importance } = body as any;
+      const memory = this.db.createMemory(content, source || "web", importance || 0.5);
+      await this.search.indexMemory(memory);
+      const { entities, observations } = this.graph.extractAndStore(content, memory.id);
+      res.writeHead(201);
+      res.end(JSON.stringify({ memory, entities_extracted: entities.length, observations_created: observations.length }));
+      return;
+    }
+
+    // PUT /api/memories/:id
+    const memoryMatch = pathname.match(/^\/api\/memories\/([a-f0-9-]+)$/);
+    if (memoryMatch && method === "PUT") {
+      const id = memoryMatch[1];
+      const { content, importance } = body as any;
+      const updated = this.db.updateMemory(id, { content, importance });
+      if (updated) {
+        res.end(JSON.stringify({ memory: updated }));
+      } else {
+        res.writeHead(404);
+        res.end(JSON.stringify({ error: "Memory not found" }));
+      }
+      return;
+    }
+
+    // DELETE /api/memories/:id
+    if (memoryMatch && method === "DELETE") {
+      const id = memoryMatch[1];
+      await this.search.removeFromIndex(id);
+      const deleted = this.db.deleteMemory(id);
+      res.end(JSON.stringify({ success: deleted }));
+      return;
+    }
+
+    // GET /api/entities
+    if (pathname === "/api/entities" && method === "GET") {
+      const type = url.searchParams.get("type") as any;
+      const limit = parseInt(url.searchParams.get("limit") || "100");
+      const entities = this.graph.listEntities(type || undefined, limit);
+      res.end(JSON.stringify({ entities }));
+      return;
+    }
+
+    // GET /api/entities/:name
+    const entityMatch = pathname.match(/^\/api\/entities\/(.+)$/);
+    if (entityMatch && method === "GET") {
+      const name = decodeURIComponent(entityMatch[1]);
+      const details = this.graph.getEntityDetails(name);
+      if (details) {
+        res.end(JSON.stringify(details));
+      } else {
+        res.writeHead(404);
+        res.end(JSON.stringify({ error: "Entity not found" }));
+      }
+      return;
+    }
+
+    // GET /api/graph
+    if (pathname === "/api/graph" && method === "GET") {
+      const entities = this.graph.listEntities(undefined, 500);
+      const nodes = entities.map(e => ({
+        id: e.id,
+        label: e.name,
+        type: e.type,
+      }));
+
+      // Get all relations
+      const edges: Array<{ from: string; to: string; label: string }> = [];
+      for (const entity of entities) {
+        const relations = this.db.getEntityRelations(entity.id, "from");
+        for (const rel of relations) {
+          edges.push({
+            from: rel.from_entity,
+            to: rel.to_entity,
+            label: rel.type,
+          });
+        }
+      }
+
+      res.end(JSON.stringify({ nodes, edges }));
+      return;
+    }
+
+    // 404 for unknown API routes
+    res.writeHead(404);
+    res.end(JSON.stringify({ error: "Not found" }));
+  }
+
+  private async serveStatic(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    pathname: string
+  ): Promise<void> {
+    // Default to index.html
+    if (pathname === "/" || pathname === "") {
+      pathname = "/index.html";
+    }
+
+    const filePath = path.join(STATIC_DIR, pathname);
+
+    // Security: prevent directory traversal
+    if (!filePath.startsWith(STATIC_DIR)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+
+    try {
+      const content = fs.readFileSync(filePath);
+      const ext = path.extname(filePath);
+      const contentType = MIME_TYPES[ext] || "application/octet-stream";
+
+      res.writeHead(200, { "Content-Type": contentType });
+      res.end(content);
+    } catch {
+      res.writeHead(404);
+      res.end("Not found");
+    }
+  }
+
+  private parseBody(req: http.IncomingMessage): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+      let data = "";
+      req.on("data", (chunk) => (data += chunk));
+      req.on("end", () => {
+        try {
+          resolve(data ? JSON.parse(data) : {});
+        } catch (e) {
+          reject(e);
+        }
+      });
+      req.on("error", reject);
+    });
+  }
+}

package/src/web/static/app.js

@@ -0,0 +1,362 @@
+/**
+ * Engram Web Interface
+ * Vanilla JavaScript - no build step required
+ */
+
+const API_BASE = '';
+
+// State
+let currentView = 'memories';
+let editingMemoryId = null;
+
+// DOM Elements
+const views = {
+  memories: document.getElementById('memories-view'),
+  entities: document.getElementById('entities-view'),
+  graph: document.getElementById('graph-view'),
+};
+
+const statsEl = document.getElementById('stats');
+const memoriesList = document.getElementById('memories-list');
+const entitiesList = document.getElementById('entities-list');
+const graphContainer = document.getElementById('graph-container');
+const searchInput = document.getElementById('search-input');
+const entityTypeFilter = document.getElementById('entity-type-filter');
+
+// Modal elements
+const modal = document.getElementById('modal');
+const modalTitle = document.getElementById('modal-title');
+const modalForm = document.getElementById('modal-form');
+const modalContentInput = document.getElementById('modal-content-input');
+const modalSource = document.getElementById('modal-source');
+const modalImportance = document.getElementById('modal-importance');
+const importanceValue = document.getElementById('importance-value');
+
+const entityModal = document.getElementById('entity-modal');
+const entityModalTitle = document.getElementById('entity-modal-title');
+const entityModalBody = document.getElementById('entity-modal-body');
+
+// API helpers
+async function api(path, options = {}) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+  return res.json();
+}
+
+// Format date
+function formatDate(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+// Load stats
+async function loadStats() {
+  const stats = await api('/api/stats');
+  statsEl.textContent = `${stats.memories} memories \u00b7 ${stats.entities} entities \u00b7 ${stats.relations} relations`;
+}
+
+// Load memories
+async function loadMemories(query = '') {
+  const path = query ? `/api/memories?q=${encodeURIComponent(query)}` : '/api/memories';
+  const data = await api(path);
+
+  if (data.memories.length === 0) {
+    memoriesList.innerHTML = '<div class="empty-state">No memories found</div>';
+    return;
+  }
+
+  memoriesList.innerHTML = data.memories.map(m => `
+    <div class="list-item memory-item" data-id="${m.id}">
+      <div class="content">${escapeHtml(m.content)}</div>
+      <div class="meta">
+        <span>${formatDate(m.timestamp)}</span>
+        <span>${m.source}</span>
+        <span>importance: ${m.importance}</span>
+        ${m.score ? `<span class="score">${m.score.toFixed(4)}</span>` : ''}
+      </div>
+      <div class="actions">
+        <button class="edit-btn" data-id="${m.id}">Edit</button>
+        <button class="delete-btn" data-id="${m.id}">Delete</button>
+      </div>
+    </div>
+  `).join('');
+
+  // Attach event listeners
+  memoriesList.querySelectorAll('.edit-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      editMemory(btn.dataset.id);
+    });
+  });
+
+  memoriesList.querySelectorAll('.delete-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      deleteMemory(btn.dataset.id);
+    });
+  });
+}
+
+// Load entities
+async function loadEntities(type = '') {
+  const path = type ? `/api/entities?type=${type}` : '/api/entities';
+  const data = await api(path);
+
+  if (data.entities.length === 0) {
+    entitiesList.innerHTML = '<div class="empty-state">No entities found</div>';
+    return;
+  }
+
+  entitiesList.innerHTML = data.entities.map(e => `
+    <div class="list-item entity-item" data-name="${escapeHtml(e.name)}">
+      <div class="name">${escapeHtml(e.name)}</div>
+      <div class="type">${e.type}</div>
+    </div>
+  `).join('');
+
+  // Attach event listeners
+  entitiesList.querySelectorAll('.entity-item').forEach(item => {
+    item.addEventListener('click', () => {
+      showEntityDetails(item.dataset.name);
+    });
+  });
+}
+
+// Show entity details
+async function showEntityDetails(name) {
+  const data = await api(`/api/entities/${encodeURIComponent(name)}`);
+
+  entityModalTitle.textContent = data.name;
+
+  let html = `<p><strong>Type:</strong> ${data.type}</p>`;
+
+  if (data.observations && data.observations.length > 0) {
+    html += `<h3>Observations</h3><ul>`;
+    data.observations.forEach(o => {
+      html += `<li>${escapeHtml(o.content)}</li>`;
+    });
+    html += `</ul>`;
+  }
+
+  if (data.relationsFrom && data.relationsFrom.length > 0) {
+    html += `<h3>Relationships (outgoing)</h3><ul>`;
+    data.relationsFrom.forEach(r => {
+      html += `<li>${r.type} \u2192 ${escapeHtml(r.targetEntity?.name || r.to)}</li>`;
+    });
+    html += `</ul>`;
+  }
+
+  if (data.relationsTo && data.relationsTo.length > 0) {
+    html += `<h3>Relationships (incoming)</h3><ul>`;
+    data.relationsTo.forEach(r => {
+      html += `<li>${escapeHtml(r.sourceEntity?.name || r.from)} \u2192 ${r.type}</li>`;
+    });
+    html += `</ul>`;
+  }
+
+  entityModalBody.innerHTML = html;
+  entityModal.classList.remove('hidden');
+}
+
+// Load graph
+async function loadGraph() {
+  const data = await api('/api/graph');
+
+  // Simple visualization using CSS
+  if (data.nodes.length === 0) {
+    graphContainer.innerHTML = '<div class="empty-state">No entities in graph</div>';
+    return;
+  }
+
+  // Create a simple text-based visualization
+  let html = '<div style="padding: 2rem; font-size: 0.875rem;">';
+  html += '<p style="margin-bottom: 1rem; color: var(--text-muted);">Knowledge graph visualization. Click entities to see details.</p>';
+
+  // Group by type
+  const byType = {};
+  data.nodes.forEach(n => {
+    if (!byType[n.type]) byType[n.type] = [];
+    byType[n.type].push(n);
+  });
+
+  for (const [type, nodes] of Object.entries(byType)) {
+    html += `<div style="margin-bottom: 1.5rem;">`;
+    html += `<h3 style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem;">${type}</h3>`;
+    html += `<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">`;
+    nodes.forEach(n => {
+      html += `<span class="graph-node" data-name="${escapeHtml(n.label)}" style="padding: 0.375rem 0.75rem; background: var(--bg-tertiary); cursor: pointer;">${escapeHtml(n.label)}</span>`;
+    });
+    html += `</div></div>`;
+  }
+
+  if (data.edges.length > 0) {
+    html += `<div style="margin-top: 2rem;">`;
+    html += `<h3 style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem;">Relationships</h3>`;
+    html += `<ul style="list-style: none;">`;
+    data.edges.forEach(e => {
+      const fromNode = data.nodes.find(n => n.id === e.from);
+      const toNode = data.nodes.find(n => n.id === e.to);
+      if (fromNode && toNode) {
+        html += `<li style="padding: 0.25rem 0; color: var(--text-secondary);">${escapeHtml(fromNode.label)} <span style="color: var(--accent);">\u2192 ${e.label} \u2192</span> ${escapeHtml(toNode.label)}</li>`;
+      }
+    });
+    html += `</ul></div>`;
+  }
+
+  html += '</div>';
+  graphContainer.innerHTML = html;
+
+  // Attach click handlers
+  graphContainer.querySelectorAll('.graph-node').forEach(node => {
+    node.addEventListener('click', () => {
+      showEntityDetails(node.dataset.name);
+    });
+  });
+}
+
+// Edit memory
+async function editMemory(id) {
+  const data = await api('/api/memories');
+  const memory = data.memories.find(m => m.id === id);
+  if (!memory) return;
+
+  editingMemoryId = id;
+  modalTitle.textContent = 'Edit Memory';
+  modalContentInput.value = memory.content;
+  modalSource.value = memory.source;
+  modalImportance.value = memory.importance;
+  importanceValue.textContent = memory.importance;
+  modal.classList.remove('hidden');
+}
+
+// Delete memory
+async function deleteMemory(id) {
+  if (!confirm('Delete this memory?')) return;
+
+  await api(`/api/memories/${id}`, { method: 'DELETE' });
+  await loadMemories(searchInput.value);
+  await loadStats();
+}
+
+// Save memory
+async function saveMemory() {
+  const content = modalContentInput.value.trim();
+  if (!content) return;
+
+  const body = {
+    content,
+    source: modalSource.value || 'web',
+    importance: parseFloat(modalImportance.value),
+  };
+
+  if (editingMemoryId) {
+    await api(`/api/memories/${editingMemoryId}`, { method: 'PUT', body });
+  } else {
+    await api('/api/memories', { method: 'POST', body });
+  }
+
+  closeModal();
+  await loadMemories(searchInput.value);
+  await loadStats();
+}
+
+// Close modal
+function closeModal() {
+  modal.classList.add('hidden');
+  editingMemoryId = null;
+  modalContentInput.value = '';
+  modalSource.value = 'web';
+  modalImportance.value = '0.5';
+  importanceValue.textContent = '0.5';
+}
+
+// Escape HTML
+function escapeHtml(str) {
+  if (!str) return '';
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+// Switch view
+function switchView(view) {
+  currentView = view;
+
+  // Update nav buttons
+  document.querySelectorAll('.nav-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.view === view);
+  });
+
+  // Update views
+  Object.entries(views).forEach(([name, el]) => {
+    el.classList.toggle('active', name === view);
+  });
+
+  // Load data for view
+  if (view === 'memories') loadMemories(searchInput.value);
+  if (view === 'entities') loadEntities(entityTypeFilter.value);
+  if (view === 'graph') loadGraph();
+}
+
+// Event listeners
+document.querySelectorAll('.nav-btn').forEach(btn => {
+  btn.addEventListener('click', () => switchView(btn.dataset.view));
+});
+
+document.getElementById('search-btn').addEventListener('click', () => {
+  loadMemories(searchInput.value);
+});
+
+searchInput.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') loadMemories(searchInput.value);
+});
+
+entityTypeFilter.addEventListener('change', () => {
+  loadEntities(entityTypeFilter.value);
+});
+
+document.getElementById('add-memory-btn').addEventListener('click', () => {
+  editingMemoryId = null;
+  modalTitle.textContent = 'Add Memory';
+  modal.classList.remove('hidden');
+});
+
+document.getElementById('modal-cancel').addEventListener('click', closeModal);
+
+modalForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  saveMemory();
+});
+
+modalImportance.addEventListener('input', () => {
+  importanceValue.textContent = modalImportance.value;
+});
+
+document.getElementById('entity-modal-close').addEventListener('click', () => {
+  entityModal.classList.add('hidden');
+});
+
+// Close modals on backdrop click
+modal.addEventListener('click', (e) => {
+  if (e.target === modal) closeModal();
+});
+
+entityModal.addEventListener('click', (e) => {
+  if (e.target === entityModal) entityModal.classList.add('hidden');
+});
+
+// Initialize
+loadStats();
+loadMemories();

package/src/web/static/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Engram</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <h1>Engram</h1>
+    <nav>
+      <button class="nav-btn active" data-view="memories">Memories</button>
+      <button class="nav-btn" data-view="entities">Entities</button>
+      <button class="nav-btn" data-view="graph">Graph</button>
+    </nav>
+    <div class="stats" id="stats"></div>
+  </header>
+
+  <main>
+    <!-- Memories View -->
+    <section id="memories-view" class="view active">
+      <div class="search-bar">
+        <input type="text" id="search-input" placeholder="Search memories...">
+        <button id="search-btn">Search</button>
+      </div>
+
+      <div class="toolbar">
+        <button id="add-memory-btn">+ Add Memory</button>
+      </div>
+
+      <div id="memories-list" class="list"></div>
+    </section>
+
+    <!-- Entities View -->
+    <section id="entities-view" class="view">
+      <div class="filter-bar">
+        <select id="entity-type-filter">
+          <option value="">All Types</option>
+          <option value="person">Person</option>
+          <option value="organization">Organization</option>
+          <option value="place">Place</option>
+          <option value="concept">Concept</option>
+          <option value="event">Event</option>
+        </select>
+      </div>
+
+      <div id="entities-list" class="list"></div>
+    </section>
+
+    <!-- Graph View -->
+    <section id="graph-view" class="view">
+      <div id="graph-container"></div>
+    </section>
+  </main>
+
+  <!-- Modal for adding/editing -->
+  <div id="modal" class="modal hidden">
+    <div class="modal-content">
+      <h2 id="modal-title">Add Memory</h2>
+      <form id="modal-form">
+        <textarea id="modal-content-input" placeholder="Memory content..." rows="6"></textarea>
+        <div class="form-row">
+          <label>
+            Source:
+            <input type="text" id="modal-source" value="web">
+          </label>
+          <label>
+            Importance:
+            <input type="range" id="modal-importance" min="0" max="1" step="0.1" value="0.5">
+            <span id="importance-value">0.5</span>
+          </label>
+        </div>
+        <div class="modal-actions">
+          <button type="button" id="modal-cancel">Cancel</button>
+          <button type="submit">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Entity Detail Modal -->
+  <div id="entity-modal" class="modal hidden">
+    <div class="modal-content">
+      <h2 id="entity-modal-title"></h2>
+      <div id="entity-modal-body"></div>
+      <div class="modal-actions">
+        <button type="button" id="entity-modal-close">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>

package/src/web/static/style.css

@@ -0,0 +1,457 @@
+/* Engram Web Interface
+ * Claude Desktop aesthetic: serif, cream, sharp corners, generous spacing
+ */
+
+:root {
+  /* Cream color scheme */
+  --bg-primary: #faf8f5;
+  --bg-secondary: #f5f2ed;
+  --bg-tertiary: #ebe7e0;
+  --text-primary: #1a1a1a;
+  --text-secondary: #5c5c5c;
+  --text-muted: #8c8c8c;
+  --border: #d4d0c8;
+  --accent: #d97706;
+  --accent-hover: #b45309;
+  --success: #059669;
+  --danger: #dc2626;
+  --shadow: rgba(0, 0, 0, 0.06);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: "Tiempos Text", "Times New Roman", Georgia, serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* Typography */
+h1, h2, h3, h4 {
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+h1 {
+  font-size: 1.75rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+/* Header */
+header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 1.5rem 2rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  color: var(--text-primary);
+}
+
+nav {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.nav-btn {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.nav-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.nav-btn.active {
+  color: var(--text-primary);
+  border-color: var(--border);
+  background: var(--bg-primary);
+}
+
+.stats {
+  margin-left: auto;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Main content */
+main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.view {
+  display: none;
+}
+
+.view.active {
+  display: block;
+}
+
+/* Search bar */
+.search-bar {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.search-bar input {
+  flex: 1;
+  font-family: inherit;
+  font-size: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.search-bar input::placeholder {
+  color: var(--text-muted);
+}
+
+/* Buttons */
+button {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--text-primary);
+  color: var(--bg-primary);
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+button:hover {
+  background: var(--text-secondary);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toolbar {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+#add-memory-btn {
+  background: var(--accent);
+}
+
+#add-memory-btn:hover {
+  background: var(--accent-hover);
+}
+
+/* Filter bar */
+.filter-bar {
+  margin-bottom: 1.5rem;
+}
+
+.filter-bar select {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.filter-bar select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* List items */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.list-item {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  padding: 1.25rem 1.5rem;
+  transition: border-color 0.15s ease;
+}
+
+.list-item:hover {
+  border-color: var(--text-muted);
+}
+
+.memory-item .content {
+  font-size: 1rem;
+  line-height: 1.7;
+  margin-bottom: 1rem;
+  white-space: pre-wrap;
+}
+
+.memory-item .meta {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.memory-item .meta span {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.memory-item .actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.memory-item .actions button {
+  font-size: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.memory-item .actions button:hover {
+  background: var(--border);
+  color: var(--text-primary);
+}
+
+.memory-item .actions .delete-btn:hover {
+  background: var(--danger);
+  color: white;
+}
+
+/* Entity items */
+.entity-item {
+  cursor: pointer;
+}
+
+.entity-item .name {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.entity-item .type {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  text-transform: capitalize;
+}
+
+/* Graph container */
+#graph-container {
+  width: 100%;
+  height: 600px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+}
+
+/* Modal */
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-content {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  padding: 2rem;
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-content h2 {
+  margin-bottom: 1.5rem;
+}
+
+.modal-content textarea,
+.modal-content input[type="text"] {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  resize: vertical;
+}
+
+.modal-content textarea:focus,
+.modal-content input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.form-row {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.form-row label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.form-row input[type="text"] {
+  width: 120px;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.form-row input[type="range"] {
+  width: 100px;
+}
+
+#importance-value {
+  font-variant-numeric: tabular-nums;
+  min-width: 2rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+}
+
+#modal-cancel,
+#entity-modal-close {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+#modal-cancel:hover,
+#entity-modal-close:hover {
+  background: var(--border);
+  color: var(--text-primary);
+}
+
+/* Entity detail modal */
+#entity-modal-body {
+  font-size: 0.9375rem;
+}
+
+#entity-modal-body h3 {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 1.5rem 0 0.75rem;
+}
+
+#entity-modal-body h3:first-child {
+  margin-top: 0;
+}
+
+#entity-modal-body ul {
+  list-style: none;
+  padding: 0;
+}
+
+#entity-modal-body li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+#entity-modal-body li:last-child {
+  border-bottom: none;
+}
+
+/* Empty states */
+.empty-state {
+  text-align: center;
+  padding: 3rem 2rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* Score badge */
+.score {
+  display: inline-block;
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  header {
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  nav {
+    width: 100%;
+    order: 3;
+  }
+
+  .stats {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}