#!/usr/bin/env node
/**
* AgentKits Memory Web Viewer
*
* Web-based viewer for memory database with hybrid search support.
* Uses ProjectMemoryService for vector + text search.
*
* Usage:
* npx @aitytech/agentkits-memory web [--port=1905]
*
* @module @aitytech/agentkits-memory/cli/web-viewer
*/
import * as http from 'node:http';
import * as path from 'node:path';
import Database from 'better-sqlite3';
import type { Database as BetterDatabase } from 'better-sqlite3';
import { HybridSearchEngine, LocalEmbeddingsService } from '../index.js';
const args = process.argv.slice(2);
const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
// Embeddings service singleton
let _embeddingsService: LocalEmbeddingsService | null = null;
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');
// Singleton database and search engine
let _searchEngine: HybridSearchEngine | null = null;
let _db: BetterDatabase | null = null;
/**
* Get direct database access (memory.db)
*/
function getDatabase(): BetterDatabase {
if (_db) return _db;
_db = new Database(dbPath);
_db.pragma('journal_mode = WAL');
// Ensure all tables exist (web viewer may start before MCP server or hooks)
_db.exec(`
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 'default',
tags TEXT DEFAULT '[]',
metadata TEXT DEFAULT '{}',
embedding BLOB,
session_id TEXT,
owner_id TEXT,
access_level TEXT DEFAULT 'project',
created_at INTEGER NOT NULL DEFAULT (unixepoch('now') * 1000),
updated_at INTEGER NOT NULL DEFAULT (unixepoch('now') * 1000),
expires_at INTEGER,
version INTEGER DEFAULT 1,
"references" TEXT DEFAULT '[]',
access_count INTEGER DEFAULT 0,
last_accessed_at INTEGER NOT NULL DEFAULT (unixepoch('now') * 1000)
);
CREATE TABLE IF NOT EXISTS sessions (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id TEXT UNIQUE NOT NULL,
project TEXT NOT NULL,
prompt TEXT,
started_at INTEGER NOT NULL,
ended_at INTEGER,
observation_count INTEGER DEFAULT 0,
summary TEXT,
status TEXT DEFAULT 'active'
);
CREATE TABLE IF NOT EXISTS observations (
id TEXT PRIMARY KEY,
session_id TEXT NOT NULL,
project TEXT NOT NULL,
tool_name TEXT NOT NULL,
tool_input TEXT,
tool_response TEXT,
cwd TEXT,
timestamp INTEGER NOT NULL,
type TEXT,
title TEXT,
prompt_number INTEGER,
files_read TEXT DEFAULT '[]',
files_modified TEXT DEFAULT '[]',
subtitle TEXT,
narrative TEXT,
facts TEXT DEFAULT '[]',
concepts TEXT DEFAULT '[]',
embedding BLOB,
FOREIGN KEY (session_id) REFERENCES sessions(session_id)
);
CREATE TABLE IF NOT EXISTS user_prompts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id TEXT NOT NULL,
prompt_number INTEGER NOT NULL,
prompt_text TEXT NOT NULL,
created_at INTEGER NOT NULL,
embedding BLOB,
UNIQUE(session_id, prompt_number),
FOREIGN KEY (session_id) REFERENCES sessions(session_id)
);
CREATE TABLE IF NOT EXISTS session_summaries (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id TEXT NOT NULL,
project TEXT NOT NULL,
request TEXT,
completed TEXT,
files_read TEXT DEFAULT '[]',
files_modified TEXT DEFAULT '[]',
next_steps TEXT,
notes TEXT,
prompt_number INTEGER,
created_at INTEGER NOT NULL,
embedding BLOB,
FOREIGN KEY (session_id) REFERENCES sessions(session_id)
);
`);
// Task queue table (shared with hooks service — used for embed + enrich workers)
_db.exec(`
CREATE TABLE IF NOT EXISTS task_queue (
id INTEGER PRIMARY KEY AUTOINCREMENT,
task_type TEXT NOT NULL,
target_table TEXT NOT NULL,
target_id TEXT NOT NULL,
created_at INTEGER NOT NULL,
status TEXT DEFAULT 'pending'
)
`);
// Migration: add embedding column to existing session tables
for (const table of ['observations', 'user_prompts', 'session_summaries']) {
try {
const cols = _db.prepare(`PRAGMA table_info(${table})`).all() as Array<{ name: string }>;
if (!cols.some(c => c.name === 'embedding')) {
_db.exec(`ALTER TABLE ${table} ADD COLUMN embedding BLOB`);
}
} catch { /* ignore */ }
}
return _db;
}
/**
* Get or initialize embeddings service
*/
async function getEmbeddingsService(): Promise<LocalEmbeddingsService> {
if (_embeddingsService) return _embeddingsService;
_embeddingsService = new LocalEmbeddingsService({
cacheDir: path.join(dbDir, 'embeddings-cache'),
});
await _embeddingsService.initialize();
return _embeddingsService;
}
/**
* Get or initialize the HybridSearchEngine with embeddings
*/
async function getSearchEngine(): Promise<HybridSearchEngine> {
if (_searchEngine) return _searchEngine;
const db = getDatabase();
const embeddings = await getEmbeddingsService();
// Create embedding generator function
const embeddingGenerator = async (text: string): Promise<Float32Array> => {
const result = await embeddings.embed(text);
return result.embedding;
};
_searchEngine = new HybridSearchEngine(db, {}, embeddingGenerator);
await _searchEngine.initialize();
return _searchEngine;
}
// ===== Session Hybrid Search =====
/**
* Cosine similarity between two Float32Arrays
*/
function cosineSimilarity(a: Float32Array, b: Float32Array): number {
if (a.length !== b.length) return 0;
let dot = 0, normA = 0, normB = 0;
for (let i = 0; i < a.length; i++) {
dot += a[i] * b[i];
normA += a[i] * a[i];
normB += b[i] * b[i];
}
const denom = Math.sqrt(normA) * Math.sqrt(normB);
return denom === 0 ? 0 : dot / denom;
}
/**
* Extract text to embed for a session table row
*/
function getSessionEmbeddingText(
table: 'observations' | 'user_prompts' | 'session_summaries',
row: Record<string, unknown>
): string {
switch (table) {
case 'observations': {
const parts = [row.title, row.subtitle, row.narrative];
try {
const concepts = JSON.parse((row.concepts as string) || '[]');
if (concepts.length > 0) parts.push(concepts.join(', '));
} catch { /* ignore */ }
return parts.filter(Boolean).join(' ').trim();
}
case 'user_prompts':
return ((row.prompt_text as string) || '').trim();
case 'session_summaries': {
const parts = [row.request, row.completed, row.next_steps, row.notes];
return parts.filter(Boolean).join(' ').trim();
}
}
}
interface SessionSearchResult {
table: 'observations' | 'user_prompts' | 'session_summaries';
id: string | number;
sessionId: string;
score: number;
keywordScore: number;
semanticScore: number;
time: number;
snippet: string;
data: Record<string, unknown>;
}
/**
* Hybrid search across all session tables (text + vector)
*/
async function searchSessionsHybrid(
db: BetterDatabase,
query: string,
options: { type?: 'hybrid' | 'text' | 'vector'; limit?: number } = {}
): Promise<SessionSearchResult[]> {
const { type = 'hybrid', limit = 30 } = options;
const results = new Map<string, SessionSearchResult>();
const queryLower = query.toLowerCase();
// === Text search (LIKE) ===
if (type === 'hybrid' || type === 'text') {
const pattern = `%${query}%`;
// Observations
const obs = db.prepare(`
SELECT * FROM observations
WHERE title LIKE ? OR subtitle LIKE ? OR narrative LIKE ? OR tool_name LIKE ?
ORDER BY timestamp DESC LIMIT ?
`).all(pattern, pattern, pattern, pattern, limit) as Record<string, unknown>[];
for (const row of obs) {
const text = getSessionEmbeddingText('observations', row);
const idx = text.toLowerCase().indexOf(queryLower);
const kwScore = idx >= 0 ? Math.max(0.3, 1 - idx / 500) : 0.3;
results.set(`obs_${row.id}`, {
table: 'observations', id: row.id as string, sessionId: row.session_id as string,
score: type === 'text' ? kwScore : kwScore * 0.3,
keywordScore: kwScore, semanticScore: 0,
time: row.timestamp as number,
snippet: text.substring(0, 120),
data: { ...row, embedding: undefined },
});
}
// User prompts
const prompts = db.prepare(`
SELECT * FROM user_prompts WHERE prompt_text LIKE ?
ORDER BY created_at DESC LIMIT ?
`).all(pattern, limit) as Record<string, unknown>[];
for (const row of prompts) {
const text = (row.prompt_text as string) || '';
const idx = text.toLowerCase().indexOf(queryLower);
const kwScore = idx >= 0 ? Math.max(0.3, 1 - idx / 500) : 0.3;
results.set(`prompt_${row.id}`, {
table: 'user_prompts', id: row.id as number, sessionId: row.session_id as string,
score: type === 'text' ? kwScore : kwScore * 0.3,
keywordScore: kwScore, semanticScore: 0,
time: row.created_at as number,
snippet: text.substring(0, 120),
data: { ...row, embedding: undefined },
});
}
// Session summaries
const summaries = db.prepare(`
SELECT * FROM session_summaries
WHERE request LIKE ? OR completed LIKE ? OR notes LIKE ? OR next_steps LIKE ?
ORDER BY created_at DESC LIMIT ?
`).all(pattern, pattern, pattern, pattern, limit) as Record<string, unknown>[];
for (const row of summaries) {
const text = getSessionEmbeddingText('session_summaries', row);
const idx = text.toLowerCase().indexOf(queryLower);
const kwScore = idx >= 0 ? Math.max(0.3, 1 - idx / 500) : 0.3;
results.set(`summary_${row.id}`, {
table: 'session_summaries', id: row.id as number, sessionId: row.session_id as string,
score: type === 'text' ? kwScore : kwScore * 0.3,
keywordScore: kwScore, semanticScore: 0,
time: row.created_at as number,
snippet: text.substring(0, 120),
data: { ...row, embedding: undefined },
});
}
}
// === Vector search ===
if ((type === 'hybrid' || type === 'vector') && query.trim()) {
try {
const embeddingsService = await getEmbeddingsService();
const queryResult = await embeddingsService.embed(query);
const queryEmbedding = queryResult.embedding;
const tables: Array<{ name: 'observations' | 'user_prompts' | 'session_summaries'; idCol: string; timeCol: string }> = [
{ name: 'observations', idCol: 'id', timeCol: 'timestamp' },
{ name: 'user_prompts', idCol: 'id', timeCol: 'created_at' },
{ name: 'session_summaries', idCol: 'id', timeCol: 'created_at' },
];
for (const { name, idCol, timeCol } of tables) {
const rows = db.prepare(
`SELECT * FROM ${name} WHERE embedding IS NOT NULL AND LENGTH(embedding) > 0 ORDER BY ${timeCol} DESC LIMIT 2000`
).all() as Record<string, unknown>[];
for (const row of rows) {
const embBuffer = row.embedding as Buffer;
if (!embBuffer || embBuffer.length === 0) continue;
const embedding = new Float32Array(
embBuffer.buffer.slice(embBuffer.byteOffset, embBuffer.byteOffset + embBuffer.byteLength)
);
const sim = cosineSimilarity(queryEmbedding, embedding);
if (sim < 0.1) continue;
const prefix = name === 'observations' ? 'obs' : name === 'user_prompts' ? 'prompt' : 'summary';
const key = `${prefix}_${row[idCol]}`;
const existing = results.get(key);
if (existing) {
existing.semanticScore = sim;
existing.score = existing.keywordScore * 0.3 + sim * 0.7;
} else {
const text = getSessionEmbeddingText(name, row);
results.set(key, {
table: name,
id: row[idCol] as string | number,
sessionId: row.session_id as string,
score: type === 'vector' ? sim : sim * 0.7,
keywordScore: 0, semanticScore: sim,
time: row[timeCol] as number,
snippet: text.substring(0, 120),
data: { ...row, embedding: undefined },
});
}
}
}
} catch {
// Embeddings not available, fall back to text-only results
}
}
return Array.from(results.values())
.filter(r => r.score >= 0.05)
.sort((a, b) => b.score - a.score)
.slice(0, limit);
}
/**
* Get database statistics using direct SQL (faster for stats queries)
*/
function getStats(db: BetterDatabase): {
total: number;
byNamespace: Record<string, number>;
byType: Record<string, number>;
tokenEconomics: {
totalTokens: number;
avgTokensPerEntry: number;
totalCharacters: number;
estimatedSavings: number;
};
} {
const totalRow = db.prepare('SELECT COUNT(*) as count FROM memory_entries').get() as { count: number };
const total = totalRow?.count || 0;
const nsRows = db.prepare('SELECT namespace, COUNT(*) as count FROM memory_entries GROUP BY namespace').all() as { namespace: string; count: number }[];
const byNamespace: Record<string, number> = {};
for (const row of nsRows) {
byNamespace[row.namespace] = row.count;
}
const typeRows = db.prepare('SELECT type, COUNT(*) as count FROM memory_entries GROUP BY type').all() as { type: string; count: number }[];
const byType: Record<string, number> = {};
for (const row of typeRows) {
byType[row.type] = row.count;
}
// Calculate token economics
const contentRow = db.prepare('SELECT SUM(LENGTH(content)) as total_chars, COUNT(*) as count FROM memory_entries').get() as { total_chars: number; count: number };
const totalCharacters = contentRow?.total_chars || 0;
const entryCount = contentRow?.count || 0;
// Estimate tokens (~4 chars per token)
const totalTokens = Math.ceil(totalCharacters / 4);
const avgTokensPerEntry = entryCount > 0 ? Math.ceil(totalTokens / entryCount) : 0;
// Estimated savings: if you had to rediscover this info each time
// Assume 5x overhead for discovery vs recall
const estimatedSavings = totalTokens * 5;
return {
total,
byNamespace,
byType,
tokenEconomics: {
totalTokens,
avgTokensPerEntry,
totalCharacters,
estimatedSavings,
},
};
}
/**
* Result type for getEntries with optional score and embedding info
*/
interface EntryResult {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string[];
created_at: number;
updated_at: number;
score?: number;
hasEmbedding?: boolean;
}
/**
* Get entries with optional search (standard listing)
*/
function getEntries(
db: BetterDatabase,
namespace?: string,
limit = 50,
offset = 0,
search?: string
): EntryResult[] {
// Standard query without search
if (!search || !search.trim()) {
let query = 'SELECT id, key, content, type, namespace, tags, embedding, created_at, updated_at FROM memory_entries';
const conditions: string[] = [];
const params: (string | number)[] = [];
if (namespace) {
conditions.push('namespace = ?');
params.push(namespace);
}
if (conditions.length > 0) {
query += ' WHERE ' + conditions.join(' AND ');
}
query += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
params.push(limit, offset);
const rows = db.prepare(query).all(...params) as {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string;
embedding: Buffer | null;
created_at: number;
updated_at: number;
}[];
return rows.map((row) => ({
id: row.id,
key: row.key,
content: row.content,
type: row.type,
namespace: row.namespace,
tags: JSON.parse(row.tags || '[]'),
created_at: row.created_at,
updated_at: row.updated_at,
hasEmbedding: !!(row.embedding && row.embedding.length > 0),
}));
}
// Use FTS5 search for better CJK support
const sanitizedSearch = search.trim().replace(/"/g, '""');
let ftsQuery = `
SELECT m.id, m.key, m.content, m.type, m.namespace, m.tags, m.embedding, m.created_at, m.updated_at
FROM memory_entries m
INNER JOIN memory_fts f ON m.id = f.id
WHERE memory_fts MATCH '"${sanitizedSearch}"'
`;
if (namespace) {
ftsQuery += ` AND m.namespace = ?`;
}
ftsQuery += ` ORDER BY m.created_at DESC LIMIT ? OFFSET ?`;
try {
const params = namespace ? [namespace, limit, offset] : [limit, offset];
const rows = db.prepare(ftsQuery).all(...params) as {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string;
embedding: Buffer | null;
created_at: number;
updated_at: number;
}[];
return rows.map((row) => ({
id: row.id,
key: row.key,
content: row.content,
type: row.type,
namespace: row.namespace,
tags: JSON.parse(row.tags || '[]'),
created_at: row.created_at,
updated_at: row.updated_at,
hasEmbedding: !!(row.embedding && row.embedding.length > 0),
}));
} catch {
// Fallback to LIKE if FTS fails
console.warn('[WebViewer] FTS search failed, falling back to LIKE');
let query = 'SELECT id, key, content, type, namespace, tags, embedding, created_at, updated_at FROM memory_entries';
const conditions: string[] = [];
const params: (string | number)[] = [];
if (namespace) {
conditions.push('namespace = ?');
params.push(namespace);
}
conditions.push('(content LIKE ? OR key LIKE ? OR tags LIKE ?)');
const searchPattern = `%${search}%`;
params.push(searchPattern, searchPattern, searchPattern);
query += ' WHERE ' + conditions.join(' AND ');
query += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
params.push(limit, offset);
const rows = db.prepare(query).all(...params) as {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string;
embedding: Buffer | null;
created_at: number;
updated_at: number;
}[];
return rows.map((row) => ({
id: row.id,
key: row.key,
content: row.content,
type: row.type,
namespace: row.namespace,
tags: JSON.parse(row.tags || '[]'),
created_at: row.created_at,
updated_at: row.updated_at,
hasEmbedding: !!(row.embedding && row.embedding.length > 0),
}));
}
}
/**
* Search entries using HybridSearchEngine
* Supports hybrid (text + vector), text-only, or vector-only search
*/
async function searchEntries(
searchEngine: HybridSearchEngine,
query: string,
options: {
type?: 'hybrid' | 'text' | 'vector';
namespace?: string;
limit?: number;
} = {}
): Promise<EntryResult[]> {
const { type = 'hybrid', namespace, limit = 20 } = options;
// Use searchCompact for efficient search with scores
const results = await searchEngine.searchCompact(query, {
limit,
namespace,
includeKeyword: type === 'hybrid' || type === 'text',
includeSemantic: type === 'hybrid' || type === 'vector',
});
// Fetch full entries for the results
const db = getDatabase();
const entries: EntryResult[] = [];
for (const result of results) {
const row = db.prepare(`
SELECT id, key, content, type, namespace, tags, embedding, created_at, updated_at
FROM memory_entries WHERE id = ?
`).get(result.id) as {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string;
embedding: Buffer | null;
created_at: number;
updated_at: number;
} | undefined;
if (row) {
entries.push({
id: row.id,
key: row.key,
content: row.content,
type: row.type,
namespace: row.namespace,
tags: JSON.parse(row.tags || '[]'),
created_at: row.created_at,
updated_at: row.updated_at,
score: result.score,
hasEmbedding: !!(row.embedding && row.embedding.length > 0),
});
}
}
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>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%233B82F6'/%3E%3Cstop offset='100%25' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10' fill='url(%23g)'/%3E%3Cpath d='M10 14.17l-3.17-3.17-1.42 1.41L10 17l8-8-1.41-1.41z' fill='white'/%3E%3C/svg%3E">
<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);
}
.search-type-select {
padding: 12px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
min-width: 180px;
transition: border-color 0.2s;
}
.search-type-select:focus {
outline: none;
border-color: var(--accent);
}
.search-type-select:hover { border-color: var(--accent); }
.score-badge {
font-size: 11px;
padding: 3px 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
color: var(--accent);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
}
.vector-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vector-badge.has-vector {
background: rgba(34, 197, 94, 0.15);
color: #22C55E;
}
.vector-badge.no-vector {
background: rgba(100, 116, 139, 0.1);
color: var(--text-muted);
}
.embedding-stats {
display: flex;
gap: 16px;
margin-bottom: 20px;
padding: 16px;
background: var(--bg-card);
border-radius: 8px;
}
.embedding-stat {
text-align: center;
flex: 1;
}
.embedding-stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
}
.embedding-stat-label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
}
.embedding-stat-value.success { color: var(--success); }
.embedding-stat-value.warning { color: var(--warning); }
.progress-bar {
height: 8px;
background: var(--bg-card);
border-radius: 4px;
overflow: hidden;
margin: 16px 0;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #8B5CF6);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
text-align: center;
font-size: 14px;
color: var(--text-secondary);
margin-top: 8px;
}
.btn-icon {
padding: 10px;
min-width: auto;
}
.embedding-section {
margin-top: 20px;
padding: 16px;
background: var(--bg-card);
border-radius: 8px;
border: 1px solid var(--border);
}
.embedding-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.embedding-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
padding: 4px 10px;
border-radius: 6px;
}
.embedding-status.has-embedding {
background: rgba(34, 197, 94, 0.15);
color: #22C55E;
}
.embedding-status.no-embedding {
background: rgba(239, 68, 68, 0.15);
color: #EF4444;
}
.embedding-status svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.embedding-dims {
font-size: 12px;
color: var(--text-muted);
}
.embedding-viz {
display: flex;
align-items: flex-end;
gap: 2px;
height: 40px;
margin-top: 12px;
padding: 8px;
background: var(--bg-primary);
border-radius: 6px;
overflow: hidden;
}
.embedding-bar {
flex: 1;
min-width: 4px;
border-radius: 2px 2px 0 0;
transition: height 0.3s ease;
}
.embedding-bar.positive { background: linear-gradient(to top, #3B82F6, #60A5FA); }
.embedding-bar.negative { background: linear-gradient(to top, #8B5CF6, #A78BFA); }
.embedding-legend {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
}
.embedding-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.legend-dot.positive { background: #3B82F6; }
.legend-dot.negative { background: #8B5CF6; }
.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; flex: 1; }
.entry-badges {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.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" id="header-actions-sessions">
<button class="btn" onclick="generateSessionEmbeddings('missing')">
<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
Generate Embeddings
</button>
<button class="btn" onclick="loadSessions()">
<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>
<div class="header-actions" id="header-actions-memories" style="display:none;">
<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="openEmbeddingModal()">
<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
Embeddings
</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>
<!-- Tab Navigation -->
<div class="tab-nav" style="display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:0;">
<button class="tab-btn active" onclick="switchTab('sessions')" id="tab-sessions"
style="padding:10px 20px;background:none;border:none;color:var(--text-primary);cursor:pointer;border-bottom:2px solid var(--accent);font-size:14px;font-weight:500;">
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:currentColor;vertical-align:-2px;margin-right:6px;"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
Sessions
</button>
<button class="tab-btn" onclick="switchTab('memories')" id="tab-memories"
style="padding:10px 20px;background:none;border:none;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;font-size:14px;font-weight:500;">
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:currentColor;vertical-align:-2px;margin-right:6px;"><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>
Memories
</button>
</div>
<!-- Sessions Tab -->
<div id="sessions-tab">
<div class="stats-grid" id="sessions-stats"></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="session-search-input" placeholder="Search sessions, prompts, observations..." oninput="debounceSessionSearch()">
</div>
<select id="session-search-type" class="search-type-select" onchange="debounceSessionSearch()">
<option value="hybrid">Hybrid (Text + Semantic)</option>
<option value="text">Text Only</option>
<option value="vector">Semantic Only (Vector)</option>
</select>
</div>
<div id="session-embedding-bar" style="display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;font-size:13px;">
<svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:var(--accent);flex-shrink:0;"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<span id="session-emb-stats" style="color:var(--text-secondary);flex:1;">Vector index: loading...</span>
</div>
<div id="sessions-feed" class="entries-list">
<div style="text-align:center;color:var(--text-secondary);padding:40px;">Loading sessions...</div>
</div>
<div id="session-pagination" class="pagination"></div>
</div>
<!-- Memories Tab -->
<div id="memories-tab" style="display:none;">
<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>
<select id="search-type" class="search-type-select" onchange="debounceSearch()">
<option value="hybrid">Hybrid (Text + Semantic)</option>
<option value="text">Text Only (FTS5)</option>
<option value="vector">Semantic Only (Vector)</option>
</select>
</div>
<div id="entries-container" class="entries-list">
<div class="loading"><div class="spinner"></div></div>
</div>
<div id="pagination" class="pagination"></div>
</div><!-- /memories-tab -->
</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>
<!-- Embedding Management Modal -->
<div id="embedding-modal" class="modal-overlay" onclick="closeEmbeddingModal(event)">
<div class="modal" style="max-width: 500px;" onclick="event.stopPropagation()">
<div class="modal-header">
<span class="modal-title">Manage Embeddings</span>
<button class="modal-close" onclick="closeEmbeddingModal()">
<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="embedding-modal-body">
<div class="embedding-stats" id="embedding-stats">
<div class="embedding-stat">
<div class="embedding-stat-value" id="stat-total">-</div>
<div class="embedding-stat-label">Total</div>
</div>
<div class="embedding-stat">
<div class="embedding-stat-value success" id="stat-with">-</div>
<div class="embedding-stat-label">With Embedding</div>
</div>
<div class="embedding-stat">
<div class="embedding-stat-value warning" id="stat-without">-</div>
<div class="embedding-stat-label">Without</div>
</div>
</div>
<p style="font-size: 14px; color: var(--text-secondary); margin-bottom: 12px;">
Vector embeddings enable semantic search - finding memories by meaning, not just keywords.
</p>
<p style="font-size: 12px; color: var(--text-muted); margin-bottom: 20px; padding: 10px; background: var(--bg-card); border-radius: 6px;">
<strong>Model:</strong> multilingual-e5-small (100+ languages, optimized for retrieval)
</p>
<div id="embedding-progress" style="display: none;">
<div class="progress-bar">
<div class="progress-bar-fill" id="progress-fill" style="width: 0%"></div>
</div>
<div class="progress-text" id="progress-text">Processing...</div>
</div>
</div>
<div class="modal-footer" id="embedding-modal-footer">
<button class="btn" onclick="closeEmbeddingModal()">Close</button>
<button class="btn btn-primary" id="btn-generate-missing" onclick="generateEmbeddings('missing')">
<svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
Generate Missing
</button>
<button class="btn btn-success" id="btn-regenerate-all" onclick="generateEmbeddings('all')">
<svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:currentColor"><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>
Re-generate All
</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>
\`;
}
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>';
try {
let entries;
if (currentSearch && currentSearch.trim()) {
// Use hybrid search endpoint when searching
const searchType = document.getElementById('search-type').value;
const params = new URLSearchParams({
q: currentSearch,
type: searchType,
limit: String(pageSize)
});
if (currentNamespace) params.set('namespace', currentNamespace);
const res = await fetch('/api/search?' + params);
entries = await res.json();
} else {
// Use standard entries endpoint for listing
const params = new URLSearchParams({
limit: String(pageSize),
offset: String(currentPage * pageSize)
});
if (currentNamespace) params.set('namespace', currentNamespace);
const res = await fetch('/api/entries?' + params);
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>
<div class="entry-badges">
\${entry.score !== undefined ? \`<span class="score-badge">\${(entry.score * 100).toFixed(1)}%</span>\` : ''}
\${entry.hasEmbedding ?
\`<span class="vector-badge has-vector" title="Vector embedding enabled">Vec</span>\` :
\`<span class="vector-badge no-vector" title="No vector embedding">--</span>\`
}
<span class="entry-namespace">\${entry.namespace}</span>
</div>
</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(); }
function renderEmbeddingViz(embedding) {
if (!embedding || !embedding.hasEmbedding) {
return \`
<div class="embedding-section">
<div class="embedding-header">
<span class="embedding-status no-embedding">
<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>
No Embedding
</span>
</div>
<p style="font-size: 12px; color: var(--text-muted); margin: 0;">
This entry doesn't have a vector embedding. Edit and save to generate one.
</p>
</div>
\`;
}
const preview = embedding.preview || [];
const maxVal = Math.max(...preview.map(Math.abs), 0.001);
const bars = preview.map(val => {
const height = Math.abs(val) / maxVal * 100;
const isPositive = val >= 0;
return \`<div class="embedding-bar \${isPositive ? 'positive' : 'negative'}" style="height: \${height}%" title="\${val.toFixed(4)}"></div>\`;
}).join('');
return \`
<div class="embedding-section">
<div class="embedding-header">
<span class="embedding-status has-embedding">
<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>
Vector Enabled
</span>
<span class="embedding-dims">\${embedding.dimensions}D</span>
</div>
<div class="embedding-viz">
\${bars}
</div>
<div class="embedding-legend">
<div class="embedding-legend-item">
<span class="legend-dot positive"></span>
Positive values
</div>
<div class="embedding-legend-item">
<span class="legend-dot negative"></span>
Negative values
</div>
<span>First 20 dimensions</span>
</div>
</div>
\`;
}
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>
\${renderEmbeddingViz(entry.embedding)}
<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');
}
}
async function openEmbeddingModal() {
document.getElementById('embedding-modal').classList.add('active');
document.getElementById('embedding-progress').style.display = 'none';
document.getElementById('embedding-modal-footer').style.display = 'flex';
// Load embedding stats
try {
const res = await fetch('/api/embeddings/stats');
const embeddingStats = await res.json();
document.getElementById('stat-total').textContent = embeddingStats.total;
document.getElementById('stat-with').textContent = embeddingStats.withEmbedding;
document.getElementById('stat-without').textContent = embeddingStats.withoutEmbedding;
// Disable buttons if nothing to do
document.getElementById('btn-generate-missing').disabled = embeddingStats.withoutEmbedding === 0;
document.getElementById('btn-regenerate-all').disabled = embeddingStats.total === 0;
} catch (error) {
console.error('Failed to load embedding stats:', error);
}
}
function closeEmbeddingModal(event) {
if (!event || event.target.id === 'embedding-modal') {
document.getElementById('embedding-modal').classList.remove('active');
}
}
async function generateEmbeddings(mode) {
const progressEl = document.getElementById('embedding-progress');
const progressFill = document.getElementById('progress-fill');
const progressText = document.getElementById('progress-text');
const footerEl = document.getElementById('embedding-modal-footer');
// Show progress, hide buttons
progressEl.style.display = 'block';
footerEl.style.display = 'none';
progressFill.style.width = '0%';
progressText.textContent = mode === 'missing' ? 'Generating missing embeddings...' : 'Re-generating all embeddings...';
// Animate progress bar while waiting
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 90) progress = 90;
progressFill.style.width = progress + '%';
}, 200);
try {
const res = await fetch('/api/embeddings/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mode }),
});
clearInterval(interval);
progressFill.style.width = '100%';
const result = await res.json();
progressText.textContent = result.message || 'Done!';
setTimeout(() => {
showToast(result.message || 'Embeddings generated', 'success');
closeEmbeddingModal();
loadData();
}, 1000);
} catch (error) {
clearInterval(interval);
progressFill.style.width = '0%';
progressText.textContent = 'Failed to generate embeddings';
showToast('Failed to generate embeddings', 'error');
// Re-show buttons after error
setTimeout(() => {
progressEl.style.display = 'none';
footerEl.style.display = 'flex';
}, 2000);
}
}
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();
closeEmbeddingModal();
}
});
// Tab switching
function switchTab(tab) {
document.getElementById('memories-tab').style.display = tab === 'memories' ? '' : 'none';
document.getElementById('sessions-tab').style.display = tab === 'sessions' ? '' : 'none';
document.getElementById('header-actions-memories').style.display = tab === 'memories' ? '' : 'none';
document.getElementById('header-actions-sessions').style.display = tab === 'sessions' ? '' : 'none';
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.style.borderBottomColor = 'transparent';
btn.style.color = 'var(--text-secondary)';
});
const activeBtn = document.getElementById('tab-' + tab);
activeBtn.style.borderBottomColor = 'var(--accent)';
activeBtn.style.color = 'var(--text-primary)';
if (tab === 'sessions') loadSessions();
if (tab === 'memories') loadData();
}
// Sessions search
let sessionSearchQuery = '';
let sessionSearchTimer = null;
function debounceSessionSearch() {
clearTimeout(sessionSearchTimer);
sessionSearchTimer = setTimeout(() => {
sessionSearchQuery = document.getElementById('session-search-input').value.trim();
loadSessions();
}, 300);
}
// Session embedding management
async function loadSessionEmbeddingStats() {
try {
const res = await fetch('/api/sessions/embeddings/stats');
const stats = await res.json();
const el = document.getElementById('session-emb-stats');
let totalAll = 0, totalWithEmb = 0;
const parts = [];
for (const [table, s] of Object.entries(stats)) {
const label = table === 'observations' ? 'Obs' : table === 'user_prompts' ? 'Prompts' : 'Summaries';
totalAll += s.total;
totalWithEmb += s.withEmbedding;
const missing = s.total - s.withEmbedding;
const badge = missing > 0
? '<span style="color:var(--warning);font-weight:500;">' + s.withEmbedding + '/' + s.total + '</span>'
: '<span style="color:var(--success);">' + s.total + '</span>';
parts.push(label + ': ' + badge);
}
const missingTotal = totalAll - totalWithEmb;
const status = missingTotal > 0
? '<span style="color:var(--warning);">' + missingTotal + ' missing</span>'
: '<span style="color:var(--success);">All indexed</span>';
el.innerHTML = 'Vector index: ' + parts.join(' · ') + ' — ' + status;
} catch { /* ignore */ }
}
async function generateSessionEmbeddings(mode) {
const el = document.getElementById('session-emb-stats');
el.innerHTML = '<span style="color:var(--accent);">Generating embeddings...</span>';
try {
const res = await fetch('/api/sessions/embeddings/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mode: mode || 'missing' }),
});
const result = await res.json();
if (typeof showToast === 'function') {
showToast(result.success + ' embeddings generated', 'success');
}
loadSessionEmbeddingStats();
} catch (err) {
el.innerHTML = '<span style="color:var(--error);">Error: ' + err.message + '</span>';
}
}
// Sessions feed with pagination
const sessionPageSize = 30;
let sessionPage = 0;
function sessionPrevPage() { if (sessionPage > 0) { sessionPage--; loadSessions(); } }
function sessionNextPage() { sessionPage++; loadSessions(); }
async function loadSessions() {
const feed = document.getElementById('sessions-feed');
const statsEl = document.getElementById('sessions-stats');
const paginationEl = document.getElementById('session-pagination');
loadSessionEmbeddingStats();
try {
let items = [];
let totalItems = 0;
if (sessionSearchQuery) {
// Use hybrid search endpoint (no pagination for search — returns ranked results)
const searchType = document.getElementById('session-search-type').value;
const params = new URLSearchParams({
q: sessionSearchQuery,
type: searchType,
limit: String(sessionPageSize),
});
const res = await fetch('/api/sessions/search?' + params);
const results = await res.json();
statsEl.innerHTML = \`
<div class="stat-card">
<div class="stat-label">Search Results</div>
<div class="stat-value">\${results.length}</div>
</div>
\`;
// Map search results to timeline items (already have hasEmbedding from data)
for (const r of results) {
const d = r.data || {};
const hasEmb = !!(d.hasEmbedding || (r.semanticScore && r.semanticScore > 0));
if (r.table === 'observations') {
items.push({
type: 'observation', time: r.time, sessionId: r.sessionId, score: r.score, hasEmbedding: hasEmb,
toolName: d.tool_name, title: d.title, obsType: d.type, promptNumber: d.prompt_number,
subtitle: d.subtitle, narrative: d.narrative,
});
} else if (r.table === 'user_prompts') {
items.push({
type: 'prompt', time: r.time, sessionId: r.sessionId, score: r.score, hasEmbedding: hasEmb,
promptNumber: d.prompt_number, text: d.prompt_text,
});
} else if (r.table === 'session_summaries') {
items.push({
type: 'summary', time: r.time, sessionId: r.sessionId, score: r.score, hasEmbedding: hasEmb,
request: d.request, completed: d.completed, filesModified: d.files_modified,
nextSteps: d.next_steps, notes: d.notes,
});
}
}
totalItems = results.length;
paginationEl.innerHTML = '';
} else {
// Browse mode with pagination
const offset = sessionPage * sessionPageSize;
const [sessRes, obsRes] = await Promise.all([
fetch('/api/sessions?limit=' + sessionPageSize + '&offset=' + offset),
fetch('/api/observations?limit=' + sessionPageSize + '&offset=' + offset)
]);
const data = await sessRes.json();
const observations = await obsRes.json();
statsEl.innerHTML = \`
<div class="stat-card">
<div class="stat-label">Sessions</div>
<div class="stat-value">\${data.sessions?.length || 0}</div>
</div>
<div class="stat-card">
<div class="stat-label">User Prompts</div>
<div class="stat-value">\${data.prompts?.length || 0}</div>
</div>
<div class="stat-card">
<div class="stat-label">Summaries</div>
<div class="stat-value">\${data.summaries?.length || 0}</div>
</div>
<div class="stat-card">
<div class="stat-label">Observations</div>
<div class="stat-value">\${observations?.length || 0}</div>
</div>
\`;
for (const p of (data.prompts || [])) {
items.push({ type: 'prompt', time: p.created_at, sessionId: p.session_id,
promptNumber: p.prompt_number, text: p.prompt_text, project: p.project,
hasEmbedding: !!p.hasEmbedding });
}
for (const s of (data.summaries || [])) {
items.push({ type: 'summary', time: s.created_at, sessionId: s.session_id,
request: s.request, completed: s.completed, filesModified: s.files_modified,
nextSteps: s.next_steps, notes: s.notes, project: s.project,
hasEmbedding: !!s.hasEmbedding });
}
for (const o of observations) {
items.push({ type: 'observation', time: o.timestamp, sessionId: o.session_id,
toolName: o.tool_name, title: o.title, obsType: o.type, promptNumber: o.prompt_number,
subtitle: o.subtitle, narrative: o.narrative, concepts: o.concepts,
compressedSummary: o.compressed_summary, isCompressed: o.is_compressed,
hasEmbedding: !!o.hasEmbedding });
}
totalItems = items.length;
// Render pagination
const hasMore = observations.length === sessionPageSize || (data.prompts || []).length === sessionPageSize;
paginationEl.innerHTML = \`
<button class="btn" \${sessionPage <= 0 ? 'disabled' : ''} onclick="sessionPrevPage()">Previous</button>
<span style="color:var(--text-secondary);font-size:13px;">Page \${sessionPage + 1}</span>
<button class="btn" \${!hasMore ? 'disabled' : ''} onclick="sessionNextPage()">Next</button>
\`;
}
items.sort((a, b) => (b.time || 0) - (a.time || 0));
if (items.length === 0) {
feed.innerHTML = '<div style="text-align:center;color:var(--text-secondary);padding:40px;">' +
(sessionSearchQuery ? 'No results for "' + escapeHtml(sessionSearchQuery) + '"' : 'No session data yet. Hook data will appear here after sessions run.') + '</div>';
return;
}
feed.innerHTML = items.map(item => {
const time = new Date(item.time).toLocaleString();
const sid = (item.sessionId || '').substring(0, 8);
const scoreBadge = item.score !== undefined
? '<span class="score-badge">' + (item.score * 100).toFixed(0) + '%</span>'
: '';
const vecBadge = item.hasEmbedding
? '<span class="vector-badge has-vector" title="Vector indexed">Vec</span>'
: '<span class="vector-badge no-vector" title="Not indexed">--</span>';
if (item.type === 'prompt') {
const promptId = 'prompt_' + Math.random().toString(36).slice(2, 8);
const promptText = item.text || '';
const isLong = promptText.length > 200;
return \`<div class="entry-card" style="border-left:3px solid var(--accent);">
<div class="entry-header">
<span class="entry-type" style="background:#3B82F6;color:white;padding:2px 8px;border-radius:4px;font-size:11px;">PROMPT #\${item.promptNumber || '?'}</span>
<div class="entry-badges">\${scoreBadge}\${vecBadge}<span class="entry-meta">\${time} · \${sid}</span></div>
</div>
<div class="entry-content" style="margin-top:8px;white-space:pre-wrap;overflow:hidden;">
\${isLong ? '<span id="' + promptId + '_short">' + escapeHtml(truncate(promptText, 200)) + ' <a href="#" onclick="toggleExpand(\\'' + promptId + '\\');return false;" style="color:var(--accent);font-size:12px;">show more</a></span><span id="' + promptId + '_full" style="display:none;">' + escapeHtml(promptText) + ' <a href="#" onclick="toggleExpand(\\'' + promptId + '\\');return false;" style="color:var(--accent);font-size:12px;">show less</a></span>' : escapeHtml(promptText)}
</div>
</div>\`;
}
if (item.type === 'summary') {
const sumId = 'sum_' + Math.random().toString(36).slice(2, 8);
let filesStr = '';
try { filesStr = JSON.parse(item.filesModified || '[]').join(', '); } catch {}
const requestText = item.request || '';
const completedText = item.completed || '';
const isLong = requestText.length > 150 || completedText.length > 150 || filesStr.length > 150;
return \`<div class="entry-card" style="border-left:3px solid var(--success);">
<div class="entry-header">
<span class="entry-type" style="background:#22C55E;color:white;padding:2px 8px;border-radius:4px;font-size:11px;">SUMMARY</span>
<div class="entry-badges">\${scoreBadge}\${vecBadge}<span class="entry-meta">\${time} · \${sid}</span></div>
</div>
<div style="margin-top:8px;">
<span id="\${sumId}_short">
\${requestText ? '<div><strong>Request:</strong> ' + escapeHtml(truncate(requestText, 150)) + '</div>' : ''}
\${completedText ? '<div><strong>Completed:</strong> ' + escapeHtml(truncate(completedText, 150)) + '</div>' : ''}
\${filesStr ? '<div><strong>Files:</strong> ' + escapeHtml(truncate(filesStr, 100)) + '</div>' : ''}
\${isLong ? '<a href="#" onclick="toggleExpand(\\'' + sumId + '\\');return false;" style="color:var(--accent);font-size:12px;">show more</a>' : ''}
</span>
<span id="\${sumId}_full" style="display:none;">
\${requestText ? '<div><strong>Request:</strong> ' + escapeHtml(requestText) + '</div>' : ''}
\${completedText ? '<div><strong>Completed:</strong> ' + escapeHtml(completedText) + '</div>' : ''}
\${filesStr ? '<div><strong>Files:</strong> ' + escapeHtml(filesStr) + '</div>' : ''}
\${item.nextSteps ? '<div><strong>Next:</strong> ' + escapeHtml(item.nextSteps) + '</div>' : ''}
\${item.notes ? '<div><strong>Notes:</strong> ' + escapeHtml(item.notes) + '</div>' : ''}
<a href="#" onclick="toggleExpand(\\'' + sumId + '\\');return false;" style="color:var(--accent);font-size:12px;">show less</a>
</span>
</div>
</div>\`;
}
// observation
const icons = {
read: '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--accent);vertical-align:-2px;"><path d="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"/></svg>',
write: '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--warning);vertical-align:-2px;"><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>',
execute: '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--success);vertical-align:-2px;"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>',
search: '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#8B5CF6;vertical-align:-2px;"><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>'
};
const icon = icons[item.obsType] || '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--text-muted);vertical-align:-2px;"><circle cx="12" cy="12" r="4"/></svg>';
const titleText = item.compressedSummary || item.title || '';
const subtitleText = item.subtitle ? escapeHtml(item.subtitle) : '';
const narrativeText = item.narrative ? escapeHtml(item.narrative) : '';
let intentBadges = '';
try {
const concepts = JSON.parse(item.concepts || '[]');
const intents = concepts.filter(c => c.startsWith('intent:')).map(c => c.slice(7));
if (intents.length > 0) intentBadges = ' <span style="font-size:11px;color:var(--warning);opacity:0.8;">[' + intents.join(', ') + ']</span>';
} catch {}
const hasDetails = subtitleText || narrativeText;
const obsId = 'obs_' + Math.random().toString(36).slice(2, 8);
return \`<div class="entry-card" style="border-left:3px solid var(--border);padding:12px 16px;">
<div style="display:flex;justify-content:space-between;align-items:center;gap:8px;\${hasDetails ? 'cursor:pointer;' : ''}" \${hasDetails ? 'onclick="toggleObsDetail(\\'' + obsId + '\\')"' : ''}>
<span style="flex:1;min-width:0;">\${icon} <strong>\${escapeHtml(item.toolName || '')}</strong> \${escapeHtml(titleText)}\${intentBadges}\${scoreBadge}</span>
<span style="color:var(--text-muted);font-size:12px;white-space:nowrap;">\${vecBadge} \${time}\${item.promptNumber ? ' · P#' + item.promptNumber : ''}\${item.isCompressed ? ' · <span style="color:var(--success);">Z</span>' : ''}</span>
</div>
\${hasDetails ? '<div id="' + obsId + '" style="display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:13px;color:var(--text-secondary);">' +
(subtitleText ? '<div>' + subtitleText + '</div>' : '') +
(narrativeText ? '<div style="margin-top:4px;font-style:italic;">' + narrativeText + '</div>' : '') +
'</div>' : ''}
</div>\`;
}).join('');
} catch (err) {
feed.innerHTML = '<div style="text-align:center;color:var(--error);padding:40px;">Error loading sessions: ' + err.message + '</div>';
}
}
function toggleObsDetail(id) {
const el = document.getElementById(id);
if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
}
function toggleExpand(id) {
const short = document.getElementById(id + '_short');
const full = document.getElementById(id + '_full');
if (short && full) {
const showFull = short.style.display !== 'none';
short.style.display = showFull ? 'none' : '';
full.style.display = showFull ? '' : 'none';
}
}
function truncate(text, max = 200) {
if (!text || text.length <= max) return text || '';
return text.substring(0, max) + '…';
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
loadSessions();
</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);
});
}
function handleRequest(
req: http.IncomingMessage,
res: http.ServerResponse
): void {
const url = new URL(req.url || '/', `http://localhost:${PORT}`);
const method = req.method || 'GET';
res.setHeader('Content-Type', 'application/json');
try {
const db = getDatabase();
// Serve HTML
if (url.pathname === '/' && method === 'GET') {
res.setHeader('Content-Type', 'text/html');
res.writeHead(200);
res.end(getHTML());
return;
}
// GET stats
if (url.pathname === '/api/stats' && method === 'GET') {
const stats = getStats(db);
res.writeHead(200);
res.end(JSON.stringify(stats));
return;
}
// GET entries (standard listing with optional FTS search)
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));
return;
}
// GET hybrid search (new endpoint with vector support)
if (url.pathname === '/api/search' && method === 'GET') {
const query = url.searchParams.get('q') || '';
const searchType = (url.searchParams.get('type') || 'hybrid') as 'hybrid' | 'text' | 'vector';
const limit = parseInt(url.searchParams.get('limit') || '20', 10);
const namespace = url.searchParams.get('namespace') || undefined;
getSearchEngine()
.then((searchEngine) => searchEntries(searchEngine, query, { type: searchType, namespace, limit }))
.then((results) => {
res.writeHead(200);
res.end(JSON.stringify(results));
})
.catch((error) => {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Search failed' }));
});
return;
}
// POST create entry (direct DB for compatibility with existing schema)
if (url.pathname === '/api/entries' && method === 'POST') {
readBody(req)
.then(async (body) => {
const data = JSON.parse(body) as {
key: string;
content: string;
type?: string;
namespace?: string;
tags?: string[];
};
const now = Date.now();
const id = `mem_${now}_${Math.random().toString(36).slice(2, 10)}`;
const tags = JSON.stringify(data.tags || []);
// Generate embedding for the content
let embeddingBuffer: Buffer | null = null;
try {
const embeddingsService = await getEmbeddingsService();
const result = await embeddingsService.embed(data.content);
embeddingBuffer = Buffer.from(result.embedding);
} catch (e) {
console.warn('[WebViewer] Failed to generate embedding:', e);
}
db.prepare(
`INSERT INTO memory_entries (id, key, content, type, namespace, tags, embedding, created_at, updated_at)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
).run(id, data.key, data.content, data.type || 'semantic', data.namespace || 'general', tags, embeddingBuffer, now, now);
res.writeHead(201);
res.end(JSON.stringify({ id, success: true }));
})
.catch((error) => {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal error' }));
});
return;
}
// GET single entry
if (url.pathname.startsWith('/api/entry/') && method === 'GET') {
const id = url.pathname.split('/').pop();
const row = db.prepare('SELECT * FROM memory_entries WHERE id = ?').get(id) as {
id: string;
key: string;
content: string;
type: string;
namespace: string;
tags: string;
embedding: Buffer | null;
created_at: number;
updated_at: number;
} | undefined;
if (row) {
// Extract embedding info for visualization
let embeddingInfo: { hasEmbedding: boolean; dimensions?: number; preview?: number[] } = {
hasEmbedding: false,
};
if (row.embedding && row.embedding.length > 0) {
const embedding = new Float32Array(
row.embedding.buffer.slice(
row.embedding.byteOffset,
row.embedding.byteOffset + row.embedding.byteLength
)
);
// Get first 20 values for preview visualization
const preview = Array.from(embedding.slice(0, 20));
embeddingInfo = {
hasEmbedding: true,
dimensions: embedding.length,
preview,
};
}
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 || '[]'),
created_at: row.created_at,
updated_at: row.updated_at,
embedding: embeddingInfo,
}));
} else {
res.writeHead(404);
res.end(JSON.stringify({ error: 'Entry not found' }));
}
return;
}
// PUT update entry (direct DB for full field updates)
if (url.pathname.startsWith('/api/entry/') && method === 'PUT') {
const id = url.pathname.split('/').pop();
if (!id) {
res.writeHead(400);
res.end(JSON.stringify({ error: 'Missing entry ID' }));
return;
}
readBody(req)
.then(async (body) => {
const data = JSON.parse(body) as {
key: string;
content: string;
type: string;
namespace: string;
tags?: string[];
};
const now = Date.now();
const tags = JSON.stringify(data.tags || []);
// Generate embedding for the updated content
let embeddingBuffer: Buffer | null = null;
try {
const embeddingsService = await getEmbeddingsService();
const result = await embeddingsService.embed(data.content);
embeddingBuffer = Buffer.from(result.embedding);
} catch (e) {
console.warn('[WebViewer] Failed to generate embedding:', e);
}
// Update with embedding
const result = db.prepare(
`UPDATE memory_entries SET key = ?, content = ?, type = ?, namespace = ?, tags = ?, embedding = ?, updated_at = ?
WHERE id = ?`
).run(data.key, data.content, data.type, data.namespace, tags, embeddingBuffer, now, id);
if (result.changes > 0) {
res.writeHead(200);
res.end(JSON.stringify({ success: true }));
} else {
res.writeHead(404);
res.end(JSON.stringify({ error: 'Entry not found' }));
}
})
.catch((error) => {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal error' }));
});
return;
}
// DELETE entry (direct DB for compatibility)
if (url.pathname.startsWith('/api/entry/') && method === 'DELETE') {
const id = url.pathname.split('/').pop();
if (!id) {
res.writeHead(400);
res.end(JSON.stringify({ error: 'Missing entry ID' }));
return;
}
const result = db.prepare('DELETE FROM memory_entries WHERE id = ?').run(id);
if (result.changes > 0) {
res.writeHead(200);
res.end(JSON.stringify({ success: true }));
} else {
res.writeHead(404);
res.end(JSON.stringify({ error: 'Entry not found' }));
}
return;
}
// GET embedding stats
if (url.pathname === '/api/embeddings/stats' && method === 'GET') {
const totalRow = db.prepare('SELECT COUNT(*) as count FROM memory_entries').get() as { count: number };
const withEmbeddingRow = db.prepare('SELECT COUNT(*) as count FROM memory_entries WHERE embedding IS NOT NULL AND LENGTH(embedding) > 0').get() as { count: number };
res.writeHead(200);
res.end(JSON.stringify({
total: totalRow?.count || 0,
withEmbedding: withEmbeddingRow?.count || 0,
withoutEmbedding: (totalRow?.count || 0) - (withEmbeddingRow?.count || 0),
}));
return;
}
// POST batch generate embeddings
if (url.pathname === '/api/embeddings/generate' && method === 'POST') {
readBody(req)
.then(async (body) => {
const options = JSON.parse(body || '{}') as { mode?: 'missing' | 'all' };
const mode = options.mode || 'missing';
// Get entries to process
const query = mode === 'missing'
? 'SELECT id, content FROM memory_entries WHERE embedding IS NULL OR LENGTH(embedding) = 0'
: 'SELECT id, content FROM memory_entries';
const entries = db.prepare(query).all() as { id: string; content: string }[];
if (entries.length === 0) {
res.writeHead(200);
res.end(JSON.stringify({ processed: 0, success: 0, failed: 0, message: 'No entries to process' }));
return;
}
const embeddingsService = await getEmbeddingsService();
let success = 0;
let failed = 0;
const updateStmt = db.prepare('UPDATE memory_entries SET embedding = ?, updated_at = ? WHERE id = ?');
for (const entry of entries) {
try {
const result = await embeddingsService.embed(entry.content);
const embeddingBuffer = Buffer.from(result.embedding);
updateStmt.run(embeddingBuffer, Date.now(), entry.id);
success++;
} catch (e) {
console.warn(`[WebViewer] Failed to generate embedding for ${entry.id}:`, e);
failed++;
}
}
res.writeHead(200);
res.end(JSON.stringify({
processed: entries.length,
success,
failed,
message: `Generated embeddings for ${success} entries${failed > 0 ? `, ${failed} failed` : ''}`,
}));
})
.catch((error) => {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal error' }));
});
return;
}
// GET session hybrid search
if (url.pathname === '/api/sessions/search' && method === 'GET') {
const query = url.searchParams.get('q') || '';
const searchType = (url.searchParams.get('type') || 'hybrid') as 'hybrid' | 'text' | 'vector';
const limit = parseInt(url.searchParams.get('limit') || '30', 10);
searchSessionsHybrid(db, query, { type: searchType, limit })
.then((results) => {
res.writeHead(200);
res.end(JSON.stringify(results));
})
.catch((error) => {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Search failed' }));
});
return;
}
// GET session embeddings stats
if (url.pathname === '/api/sessions/embeddings/stats' && method === 'GET') {
try {
const stats: Record<string, { total: number; withEmbedding: number }> = {};
for (const table of ['observations', 'user_prompts', 'session_summaries'] as const) {
const total = (db.prepare(`SELECT COUNT(*) as c FROM ${table}`).get() as { c: number }).c;
const withEmb = (db.prepare(`SELECT COUNT(*) as c FROM ${table} WHERE embedding IS NOT NULL AND LENGTH(embedding) > 0`).get() as { c: number }).c;
stats[table] = { total, withEmbedding: withEmb };
}
res.writeHead(200);
res.end(JSON.stringify(stats));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
// POST generate session embeddings
if (url.pathname === '/api/sessions/embeddings/generate' && method === 'POST') {
readBody(req).then(async (body) => {
try {
const opts = JSON.parse(body || '{}') as { mode?: 'missing' | 'all' };
const mode = opts.mode || 'missing';
const embeddingsService = await getEmbeddingsService();
let totalSuccess = 0, totalFailed = 0;
const tableConfigs = [
{ name: 'observations' as const, idCol: 'id' },
{ name: 'user_prompts' as const, idCol: 'id' },
{ name: 'session_summaries' as const, idCol: 'id' },
];
for (const { name, idCol } of tableConfigs) {
const where = mode === 'missing' ? 'WHERE embedding IS NULL OR LENGTH(embedding) = 0' : '';
const rows = db.prepare(`SELECT * FROM ${name} ${where}`).all() as Record<string, unknown>[];
const updateStmt = db.prepare(`UPDATE ${name} SET embedding = ? WHERE ${idCol} = ?`);
for (const row of rows) {
const text = getSessionEmbeddingText(name, row);
if (!text) { totalFailed++; continue; }
try {
const result = await embeddingsService.embed(text);
const buffer = Buffer.from(result.embedding);
updateStmt.run(buffer, row[idCol]);
totalSuccess++;
} catch { totalFailed++; }
}
}
res.writeHead(200);
res.end(JSON.stringify({
processed: totalSuccess + totalFailed,
success: totalSuccess,
failed: totalFailed,
}));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Generation failed' }));
}
}).catch(() => {
res.writeHead(400);
res.end(JSON.stringify({ error: 'Invalid request body' }));
});
return;
}
// GET sessions data (sessions, prompts, summaries) - all in memory.db now
if (url.pathname === '/api/sessions' && method === 'GET') {
const limit = parseInt(url.searchParams.get('limit') || '20', 10);
const offset = parseInt(url.searchParams.get('offset') || '0', 10);
const query = url.searchParams.get('q') || '';
// Strip embedding BLOBs and add hasEmbedding flag
const stripEmb = (rows: Record<string, unknown>[]) =>
rows.map(r => ({ ...r, hasEmbedding: !!(r.embedding && (r.embedding as Buffer).length > 0), embedding: undefined }));
try {
let sessions: Record<string, unknown>[];
if (query) {
const pattern = `%${query}%`;
sessions = db.prepare(`
SELECT * FROM sessions WHERE session_id LIKE ? OR project LIKE ? OR prompt LIKE ? OR summary LIKE ?
ORDER BY started_at DESC LIMIT ? OFFSET ?
`).all(pattern, pattern, pattern, pattern, limit, offset) as Record<string, unknown>[];
} else {
sessions = db.prepare(`
SELECT * FROM sessions ORDER BY started_at DESC LIMIT ? OFFSET ?
`).all(limit, offset) as Record<string, unknown>[];
}
// user_prompts
let prompts: Record<string, unknown>[] = [];
try {
if (query) {
const pattern = `%${query}%`;
prompts = stripEmb(db.prepare(`
SELECT up.*, s.project FROM user_prompts up
JOIN sessions s ON s.session_id = up.session_id
WHERE up.prompt_text LIKE ?
ORDER BY up.created_at DESC LIMIT ? OFFSET ?
`).all(pattern, limit, offset) as Record<string, unknown>[]);
} else {
prompts = stripEmb(db.prepare(`
SELECT up.*, s.project FROM user_prompts up
JOIN sessions s ON s.session_id = up.session_id
ORDER BY up.created_at DESC LIMIT ? OFFSET ?
`).all(limit, offset) as Record<string, unknown>[]);
}
} catch { /* table may not exist */ }
// session_summaries
let summaries: Record<string, unknown>[] = [];
try {
if (query) {
const pattern = `%${query}%`;
summaries = stripEmb(db.prepare(`
SELECT * FROM session_summaries WHERE request LIKE ? OR completed LIKE ? OR notes LIKE ? OR next_steps LIKE ?
ORDER BY created_at DESC LIMIT ? OFFSET ?
`).all(pattern, pattern, pattern, pattern, limit, offset) as Record<string, unknown>[]);
} else {
summaries = stripEmb(db.prepare(`
SELECT * FROM session_summaries ORDER BY created_at DESC LIMIT ? OFFSET ?
`).all(limit, offset) as Record<string, unknown>[]);
}
} catch { /* table may not exist */ }
res.writeHead(200);
res.end(JSON.stringify({ sessions, prompts, summaries }));
} catch (error) {
res.writeHead(200);
res.end(JSON.stringify({ sessions: [], prompts: [], summaries: [], error: String(error) }));
}
return;
}
// GET observations from memory.db
if (url.pathname === '/api/observations' && method === 'GET') {
const limit = parseInt(url.searchParams.get('limit') || '50', 10);
const offset = parseInt(url.searchParams.get('offset') || '0', 10);
const sessionId = url.searchParams.get('session_id') || undefined;
const query = url.searchParams.get('q') || '';
// Strip embedding BLOBs and add hasEmbedding flag
const stripEmb = (rows: Record<string, unknown>[]) =>
rows.map(r => ({ ...r, hasEmbedding: !!(r.embedding && (r.embedding as Buffer).length > 0), embedding: undefined }));
try {
let rows: Record<string, unknown>[];
if (query) {
const pattern = `%${query}%`;
if (sessionId) {
rows = db.prepare(`
SELECT * FROM observations WHERE session_id = ? AND (tool_name LIKE ? OR title LIKE ? OR subtitle LIKE ? OR narrative LIKE ?)
ORDER BY timestamp DESC LIMIT ? OFFSET ?
`).all(sessionId, pattern, pattern, pattern, pattern, limit, offset) as Record<string, unknown>[];
} else {
rows = db.prepare(`
SELECT * FROM observations WHERE tool_name LIKE ? OR title LIKE ? OR subtitle LIKE ? OR narrative LIKE ?
ORDER BY timestamp DESC LIMIT ? OFFSET ?
`).all(pattern, pattern, pattern, pattern, limit, offset) as Record<string, unknown>[];
}
} else if (sessionId) {
rows = db.prepare(`
SELECT * FROM observations WHERE session_id = ? ORDER BY timestamp DESC LIMIT ? OFFSET ?
`).all(sessionId, limit, offset) as Record<string, unknown>[];
} else {
rows = db.prepare(`
SELECT * FROM observations ORDER BY timestamp DESC LIMIT ? OFFSET ?
`).all(limit, offset) as Record<string, unknown>[];
}
res.writeHead(200);
res.end(JSON.stringify(stripEmb(rows)));
} catch {
res.writeHead(200);
res.end(JSON.stringify([]));
}
return;
}
// ===== Hook API Endpoints =====
// GET /api/hook/sessions - List hook sessions
if (url.pathname === '/api/hook/sessions' && method === 'GET') {
const project = url.searchParams.get('project') || undefined;
const limit = parseInt(url.searchParams.get('limit') || '20', 10);
try {
let rows: Record<string, unknown>[];
if (project) {
rows = db.prepare(
'SELECT * FROM sessions WHERE project = ? ORDER BY started_at DESC LIMIT ?'
).all(project, limit) as Record<string, unknown>[];
} else {
rows = db.prepare(
'SELECT * FROM sessions ORDER BY started_at DESC LIMIT ?'
).all(limit) as Record<string, unknown>[];
}
res.writeHead(200);
res.end(JSON.stringify(rows));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
// GET /api/hook/observations - List hook observations
if (url.pathname === '/api/hook/observations' && method === 'GET') {
const project = url.searchParams.get('project') || undefined;
const limit = parseInt(url.searchParams.get('limit') || '50', 10);
try {
let rows: Record<string, unknown>[];
if (project) {
rows = db.prepare(
'SELECT id, session_id, project, tool_name, timestamp, type, title, subtitle, narrative, facts, concepts, prompt_number, compressed_summary, is_compressed FROM observations WHERE project = ? ORDER BY timestamp DESC LIMIT ?'
).all(project, limit) as Record<string, unknown>[];
} else {
rows = db.prepare(
'SELECT id, session_id, project, tool_name, timestamp, type, title, subtitle, narrative, facts, concepts, prompt_number, compressed_summary, is_compressed FROM observations ORDER BY timestamp DESC LIMIT ?'
).all(limit) as Record<string, unknown>[];
}
res.writeHead(200);
res.end(JSON.stringify(rows));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
// GET /api/hook/session/:id - Session detail with observations and prompts
if (url.pathname.startsWith('/api/hook/session/') && method === 'GET') {
const sessionId = url.pathname.slice('/api/hook/session/'.length);
try {
const session = db.prepare('SELECT * FROM sessions WHERE session_id = ?').get(sessionId);
if (!session) {
res.writeHead(404);
res.end(JSON.stringify({ error: 'Session not found' }));
return;
}
const observations = db.prepare(
'SELECT id, tool_name, timestamp, type, title, subtitle, narrative, facts, concepts, prompt_number, compressed_summary, is_compressed FROM observations WHERE session_id = ? ORDER BY timestamp ASC'
).all(sessionId);
const prompts = db.prepare(
'SELECT * FROM user_prompts WHERE session_id = ? ORDER BY prompt_number ASC'
).all(sessionId);
const summary = db.prepare(
'SELECT * FROM session_summaries WHERE session_id = ? ORDER BY created_at DESC LIMIT 1'
).get(sessionId);
res.writeHead(200);
res.end(JSON.stringify({ session, observations, prompts, summary }));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
// GET /api/hook/queue/status - Task queue stats
if (url.pathname === '/api/hook/queue/status' && method === 'GET') {
try {
const stats = db.prepare(`
SELECT task_type, status, COUNT(*) as count
FROM task_queue
GROUP BY task_type, status
`).all();
const total = (db.prepare('SELECT COUNT(*) as c FROM task_queue').get() as { c: number }).c;
res.writeHead(200);
res.end(JSON.stringify({ total, breakdown: stats }));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
// POST /api/hook/cleanup - Clean old completed/failed queue tasks
if (url.pathname === '/api/hook/cleanup' && method === 'POST') {
try {
const oneDayAgo = Date.now() - 86400000;
const result = db.prepare(
"DELETE FROM task_queue WHERE status IN ('completed', 'failed') OR (status = 'processing' AND created_at < ?)"
).run(oneDayAgo);
res.writeHead(200);
res.end(JSON.stringify({ deleted: result.changes }));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: String(error) }));
}
return;
}
res.writeHead(404);
res.end(JSON.stringify({ error: 'Not found' }));
} catch (error) {
res.writeHead(500);
res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal error' }));
}
}
const server = http.createServer(handleRequest);
/** Try to listen on the given port; on EADDRINUSE, pick a random available port. */
function startServer(port: number) {
server.listen(port, () => {
const addr = server.address();
const actualPort = typeof addr === 'object' && addr ? addr.port : port;
console.log(`\n AgentKits Memory Viewer\n`);
console.log(` Local: http://localhost:${actualPort}`);
console.log(` Database: ${dbPath}\n`);
console.log(` Press Ctrl+C to stop\n`);
});
server.on('error', (err: NodeJS.ErrnoException) => {
if (err.code === 'EADDRINUSE') {
console.log(` Port ${port} is in use, finding an available port...`);
// Listen on port 0 to let the OS assign a random available port
server.listen(0, () => {
const addr = server.address();
const actualPort = typeof addr === 'object' && addr ? addr.port : 0;
console.log(`\n AgentKits Memory Viewer\n`);
console.log(` Local: http://localhost:${actualPort}`);
console.log(` Database: ${dbPath}\n`);
console.log(` Press Ctrl+C to stop\n`);
});
} else {
console.error(` Failed to start server: ${err.message}`);
process.exit(1);
}
});
}
startServer(PORT);
// Graceful shutdown: close server, DB, and embeddings service on SIGINT/SIGTERM
function cleanup() {
server.close();
if (_db) { try { _db.close(); } catch { /* ignore */ } _db = null; }
if (_embeddingsService) { _embeddingsService = null; }
if (_searchEngine) { _searchEngine = null; }
process.exit(0);
}
process.on('SIGINT', cleanup);
process.on('SIGTERM', cleanup);
