claude-memory-layer 1.0.11 → 1.0.13

package/memory/specs/web-viewer-ui/2026-02-25.md

@@ -0,0 +1,1709 @@
+
+## 2026-02-25T12:31:26.464Z | 259d5c09-2d91-48f7-87a1-e94a0851ba2b
+- type: session_summary
+- session: import:organized
+# Web Viewer UI Context
+
+> **Version**: 1.0.0
+> **Created**: 2026-02-01
+
+## 1. 배경
+
+### 1.1 claude-mem의 접근 방식
+
+claude-mem은 Web Viewer를 핵심 기능으로 제공:
+
+```
+http://localhost:37777
+├── 실시간 메모리 스트림
+├── 세션별 탐색
+├── 검색 인터페이스
+├── 설정 관리
+└── Beta 기능 토글
+```
+
+**주요 특징**:
+- Bun 기반 HTTP 서버
+- 10개의 검색 엔드포인트
+- 실시간 observation 스트림
+- Settings 페이지에서 버전 전환
+
+**장점**:
+- CLI 한계 극복 (대량 데이터 시각화)
+- 디버깅 용이
+- 비개발자도 접근 가능
+
+### 1.2 현재 code-memory의 상황
+
+현재 CLI만 제공:
+
+```bash
+# 현재 지원 명령어
+code-memory search "query"
+code-memory history
+code-memory stats
+code-memory forget
+```
+
+**한계점**:
+1. 대량 결과 탐색 불편
+2. 실시간 모니터링 불가
+3. 시각적 통계 없음
+4. 복잡한 필터링 어려움
+
+### 1.3 Web UI 도입 필요성
+
+| CLI | Web UI |
+|-----|--------|
+| 텍스트만 | 시각화 가능 |
+| 동기 실행 | 실시간 업데이트 |
+| 단일 작업 | 여러 뷰 동시 |
+| 복잡한 필터링 | 직관적 UI |
+
+## 2. 기술 선택 이유
+
+### 2.1 Bun 서버
+
+**선택 이유**:
+- Node.js 대비 3-4배 빠른 성능
+- 내장 WebSocket 지원
+- TypeScript 직접 실행
+- 번들러 내장
+
+**대안 비교**:
+
+| 옵션 | 장점 | 단점 |
+|------|------|------|
+| Express | 생태계 | 느림, 설정 복잡 |
+| Fastify | 빠름 | 설정 복잡 |
+| **Bun.serve** | 최고 성능, 간단 | 생태계 작음 |
+
+### 2.2 Hono 프레임워크
+
+**선택 이유**:
+- 초경량 (12KB)
+- Bun 최적화
+- Express 유사 API
+- 미들웨어 생태계
+
+```typescript
+// Hono 사용 예시
+import { Hono } from 'hono';
+
+const app = new Hono();
+app.get('/api/sessions', (c) => c.json(sessions));
+```
+
+### 2.3 Preact + HTM
+
+**선택 이유**:
+- React 호환 API
+- 3KB (React 45KB)
+- JSX 없이 사용 가능
+- 빌드 선택적
+
+```typescript
+// HTM 사용 (빌드 불필요)
+import { html } from 'htm/preact';
+
+function App() {
+  return html`<div class="container">Hello</div>`;
+}
+```
+
+**대안 비교**:
+
+| 옵션 | 번들 크기 | 빌드 필요 |
+|------|----------|----------|
+| React | 45KB | 필수 |
+| Vue 3 | 33KB | 권장 |
+| Svelte | 2KB | 필수 |
+| **Preact** | 3KB | 선택 |
+
+### 2.4 Tailwind CSS
+
+**선택 이유**:
+- 빠른 개발
+- 번들 크기 최적화 (JIT)
+- 다크 테마 기본 지원
+
+```html
+<!-- CDN으로 즉시 사용 가능 -->
+<script src="https://cdn.tailwindcss.com"></script>
+```
+
+## 3. 기존 코드와의 관계
+
+### 3.1 MemoryService
+
+Web 서버가 사용할 서비스 메서드:
+
+```typescript
+// 현재 MemoryService
+export class MemoryService {
+  // 이미 있는 것
+  async search(query: string): Promise<SearchResult[]>;
+  async getStats(): Promise<Stats>;
+
+  // 추가 필요
+  async getSessions(options: PageOptions): Promise<PaginatedResult<Session>>;
+  async getSessionById(id: string): Promise<Session | null>;
+  async getEventsBySession(sessionId: string): Promise<Event[]>;
+  async getEventById(id: string): Promise<Event | null>;
+  async getActivityTimeline(days: number): Promise<DailyStats[]>;
+}
+```
+
+### 3.2 EventStore
+
+WebSocket 브로드캐스트를 위한 이벤트 훅:
+
+```typescript
+// 현재 EventStore.append()
+async append(event: EventInput): Promise<string> {
+  const eventId = await this.db.insert(event);
+  // WebSocket 브로드캐스트 추가 필요
+  return eventId;
+}
+```
+
+### 3.3 VectorWorker
+
+Outbox 상태 모니터링:
+
+```typescript
+// VectorWorker에 상태 노출
+export class VectorWorker {
+  getStatus(): OutboxStatus {
+    return {
+      pending: this.pendingCount,
+      processing: this.processingIds,
+      failed: this.failedIds,
+      avgTime: this.avgProcessTime
+    };
+  }
+}
+```
+
+## 4. 설계 결정 사항
+
+### 4.1 포트 선택 (37777)
+
+**claude-mem과 동일**: 충돌 가능성 낮은 포트
+**설정 가능**: 환경 변수로 변경 가능
+
+```typescript
+const PORT = process.env.MEMORY_VIEWER_PORT || 37777;
+```
+
+### 4.2 localhost 전용
+
+**보안 고려**:
+- 외부 접근 차단
+- 인증 불필요
+- CORS 제한적 허용
+
+```typescript
+Bun.serve({
+  hostname: '127.0.0.1',  // localhost만
+  port: 37777
+});
+```
+
+### 4.3 자동 시작 vs 수동 시작
+
+**자동 시작 선택**:
+- session-start 훅에서 서버 시작
+- 이미 실행 중이면 스킵
+- 사용자 개입 불필요
+
+**대안 (수동)**:
+```bash
+code-memory serve  # 별도 명령어
+```
+
+### 4.4 SSR vs CSR
+
+**CSR (Client-Side Rendering) 선택**:
+- 서버 복잡도 낮음
+- 정적 파일만 서빙
+- 실시간 업데이트 용이
+
+**대안 (SSR)**:
+- 초기 로딩 빠름
+- SEO (불필요)
+- 서버 복잡도 증가
+
+## 5. API 설계 원칙
+
+### 5.1 RESTful 패턴
+
+```
+GET    /api/sessions          # 목록 조회
+GET    /api/sessions/:id      # 단일 조회
+GET    /api/events            # 목록 조회 (필터링)
+GET    /api/events/:id        # 단일 조회
+POST   /api/search            # 검색 (body에 쿼리)
+GET    /api/stats             # 통계
+GET    /api/config            # 설정 조회
+PATCH  /api/config            # 설정 수정
+```
+
+### 5.2 응답 형식
+
+```typescript
+// 성공 응답
+{
+  data: T,
+  meta?: {
+    total: number,
+    page: number,
+    pageSize: number
+  }
+}
+
+// 에러 응답
+{
+  error: {
+    code: string,
+    message: string
+  }
+}
+```
+
+### 5.3 페이지네이션
+
+```typescript
+// 쿼리 파라미터
+GET /api/sessions?page=1&pageSize=20
+
+// 응답
+{
+  sessions: [...],
+  meta: {
+    total: 100,
+    page: 1,
+    pageSize: 20,
+    hasMore: true
+  }
+}
+```
+
+## 6. WebSocket 설계
+
+### 6.1 연결 패턴
+
+```
+클라이언트                    서버
+    │                          │
+    │  Connect ws://...        │
+    │─────────────────────────▶│
+    │                          │
+    │  { type: 'subscribe',    │
+    │    channels: ['events'] }│
+    │─────────────────────────▶│
+    │                          │
+    │  { channel: 'events',    │
+    │    data: {...} }         │
+    │◀─────────────────────────│
+    │                          │
+```
+
+### 6.2 채널 설계
+
+| 채널 | 용도 | 메시지 빈도 |
+|------|------|------------|
+| events | 새 이벤트 알림 | 높음 |
+| outbox | 임베딩 상태 | 중간 |
+| stats | 통계 업데이트 | 낮음 |
+
+### 6.3 필터링
+
+```typescript
+// 특정 세션만 구독
+{
+  type: 'subscribe',
+  channels: ['events'],
+  filters: {
+    sessionId: 'session_123'
+  }
+}
+```
+
+## 7. 성능 고려사항
+
+### 7.1 정적 파일 캐싱
+
+```typescript
+app.use('/*', serveStatic({
+  root: './dist/ui',
+  maxAge: 86400  // 24시간
+}));
+```
+
+### 7.2 API 응답 압축
+
+```typescript
+import { compress } from 'hono/compress';
+app.use('/*', compress());
+```
+
+### 7.3 WebSocket 메시지 배치
+
+```typescript
+// 100ms 내 이벤트 모아서 전송
+const eventBuffer: Event[] = [];
+let flushTimeout: Timer | null = null;
+
+function bufferEvent(event: Event) {
+  eventBuffer.push(event);
+
+  if (!flushTimeout) {
+    flushTimeout = setTimeout(() => {
+      broadcastEvents(eventBuffer);
+      eventBuffer.length = 0;
+      flushTimeout = null;
+    }, 100);
+  }
+}
+```
+
+### 7.4 메모리 관리
+
+```typescript
+// WebSocket 클라이언트 제한
+const MAX_CLIENTS = 10;
+
+if (clients.size >= MAX_CLIENTS) {
+  ws.close(1013, 'Too many connections');
+  return;
+}
+```
+
+## 8. 참고 자료
+
+- **claude-mem README**: Web viewer at localhost:37777
+- **Hono Documentation**: https://hono.dev/
+- **Preact Documentation**: https://preactjs.com/
+- **Bun Documentation**: https://bun.sh/
+
+## 2026-02-25T12:31:26.472Z | fd5a58b1-8adc-4b89-a282-93544fc23a52
+- type: session_summary
+- session: import:organized
+# Web Viewer UI Implementation Plan
+
+> **Version**: 1.0.0
+> **Status**: Draft
+> **Created**: 2026-02-01
+
+## Phase 1: 서버 인프라 (P0)
+
+### 1.1 HTTP 서버 설정
+
+**파일**: `src/server/index.ts` (신규)
+
+```typescript
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { serveStatic } from 'hono/bun';
+
+const app = new Hono();
+
+// CORS (개발용)
+app.use('/*', cors());
+
+// Static files
+app.use('/*', serveStatic({ root: './dist/ui' }));
+
+// API routes
+app.route('/api', apiRouter);
+
+export function startServer(port: number = 37777) {
+  return Bun.serve({
+    hostname: '127.0.0.1',
+    port,
+    fetch: app.fetch
+  });
+}
+```
+
+**작업 항목**:
+- [ ] Hono 라우터 설정
+- [ ] Static 파일 서빙
+- [ ] CORS 설정
+- [ ] 에러 핸들링 미들웨어
+
+### 1.2 API 라우터
+
+**파일**: `src/server/api/index.ts` (신규)
+
+```typescript
+import { Hono } from 'hono';
+import { sessionsRouter } from './sessions';
+import { eventsRouter } from './events';
+import { searchRouter } from './search';
+import { statsRouter } from './stats';
+import { configRouter } from './config';
+
+export const apiRouter = new Hono()
+  .route('/sessions', sessionsRouter)
+  .route('/events', eventsRouter)
+  .route('/search', searchRouter)
+  .route('/stats', statsRouter)
+  .route('/config', configRouter);
+```
+
+**작업 항목**:
+- [ ] API 라우터 분리 구조
+- [ ] 공통 미들웨어 (로깅, 인증)
+
+## Phase 2: REST API 구현 (P0)
+
+### 2.1 Sessions API
+
+**파일**: `src/server/api/sessions.ts` (신규)
+
+```typescript
+import { Hono } from 'hono';
+import { MemoryService } from '../../services/memory-service';
+
+export const sessionsRouter = new Hono();
+
+// GET /api/sessions
+sessionsRouter.get('/', async (c) => {
+  const { page = 1, pageSize = 20 } = c.req.query();
+  const memoryService = await MemoryService.getInstance();
+
+  const sessions = await memoryService.getSessions({
+    page: Number(page),
+    pageSize: Number(pageSize)
+  });
+
+  return c.json({
+    sessions: sessions.items,
+    total: sessions.total,
+    page: Number(page),
+    pageSize: Number(pageSize)
+  });
+});
+
+// GET /api/sessions/:id
+sessionsRouter.get('/:id', async (c) => {
+  const { id } = c.req.param();
+  const memoryService = await MemoryService.getInstance();
+
+  const session = await memoryService.getSessionById(id);
+  if (!session) {
+    return c.json({ error: 'Session not found' }, 404);
+  }
+
+  const events = await memoryService.getEventsBySession(id);
+  const stats = await memoryService.getSessionStats(id);
+
+  return c.json({ session, events, stats });
+});
+```
+
+**작업 항목**:
+- [ ] 세션 목록 조회
+- [ ] 세션 상세 조회
+- [ ] 페이지네이션 구현
+- [ ] 정렬 옵션
+
+### 2.2 Events API
+
+**파일**: `src/server/api/events.ts` (신규)
+
+```typescript
+export const eventsRouter = new Hono();
+
+// GET /api/events
+eventsRouter.get('/', async (c) => {
+  const { sessionId, type, limit = 100, offset = 0 } = c.req.query();
+  const memoryService = await MemoryService.getInstance();
+
+  const events = await memoryService.getEvents({
+    sessionId,
+    eventType: type,
+    limit: Number(limit),
+    offset: Number(offset)
+  });
+
+  return c.json({
+    events: events.map(e => ({
+      eventId: e.eventId,
+      eventType: e.eventType,
+      timestamp: e.timestamp,
+      sessionId: e.sessionId,
+      preview: generatePreview(e.payload, 100)
+    })),
+    total: events.total
+  });
+});
+
+// GET /api/events/:id
+eventsRouter.get('/:id', async (c) => {
+  const { id } = c.req.param();
+  const memoryService = await MemoryService.getInstance();
+
+  const event = await memoryService.getEventById(id);
+  if (!event) {
+    return c.json({ error: 'Event not found' }, 404);
+  }
+
+  const related = await memoryService.getRelatedEvents(id);
+
+  return c.json({ event, related });
+});
+```
+
+**작업 항목**:
+- [ ] 이벤트 목록 조회 (필터링)
+- [ ] 이벤트 상세 조회
+- [ ] 미리보기 생성
+- [ ] 관련 이벤트 조회
+
+### 2.3 Search API
+
+**파일**: `src/server/api/search.ts` (신규)
+
+```typescript
+export const searchRouter = new Hono();
+
+// POST /api/search
+searchRouter.post('/', async (c) => {
+  const body = await c.req.json<SearchRequest>();
+  const memoryService = await MemoryService.getInstance();
+
+  const startTime = Date.now();
+
+  const results = await memoryService.search(body.query, {
+    filters: body.filters,
+    topK: body.options?.topK ?? 10,
+    minScore: body.options?.minScore ?? 0.7,
+    progressive: body.options?.progressive ?? true
+  });
+
+  return c.json({
+    results: results.map(r => ({
+      id: r.id,
+      score: r.score,
+      type: r.type,
+      timestamp: r.timestamp,
+      sessionId: r.sessionId,
+      preview: r.preview,
+      highlight: highlightMatches(r.content, body.query)
+    })),
+    meta: {
+      totalMatches: results.length,
+      searchTime: Date.now() - startTime,
+      mode: 'hybrid'
+    }
+  });
+});
+```
+
+**작업 항목**:
+- [ ] 검색 API 구현
+- [ ] 필터링 옵션
+- [ ] 하이라이트 기능
+- [ ] Progressive 모드 지원
+
+### 2.4 Stats API
+
+**파일**: `src/server/api/stats.ts` (신규)
+
+```typescript
+export const statsRouter = new Hono();
+
+// GET /api/stats
+statsRouter.get('/', async (c) => {
+  const memoryService = await MemoryService.getInstance();
+  const stats = await memoryService.getStats();
+
+  return c.json({
+    storage: {
+      eventCount: stats.events.count,
+      vectorCount: stats.vectors.count,
+      dbSizeMB: stats.storage.duckdb / (1024 * 1024),
+      vectorSizeMB: stats.storage.lancedb / (1024 * 1024)
+    },
+    sessions: {
+      total: stats.sessions.total,
+      active: stats.sessions.active,
+      thisWeek: stats.sessions.thisWeek
+    },
+    embeddings: {
+      pending: stats.outbox.pending,
+      processed: stats.outbox.processed,
+      failed: stats.outbox.failed,
+      avgProcessTime: stats.outbox.avgTime
+    },
+    memory: {
+      heapUsed: process.memoryUsage().heapUsed,
+      heapTotal: process.memoryUsage().heapTotal
+    }
+  });
+});
+
+// GET /api/stats/timeline
+statsRouter.get('/timeline', async (c) => {
+  const { days = 7 } = c.req.query();
+  const memoryService = await MemoryService.getInstance();
+
+  const timeline = await memoryService.getActivityTimeline(Number(days));
+
+  return c.json({ daily: timeline });
+});
+```
+
+**작업 항목**:
+- [ ] 전체 통계 조회
+- [ ] 타임라인 통계
+- [ ] 메모리 사용량
+
+## Phase 3: WebSocket 구현 (P1)
+
+### 3.1 WebSocket 서버
+
+**파일**: `src/server/websocket.ts` (신규)
+
+```typescript
+import { EventEmitter } from 'events';
+
+const eventBus = new EventEmitter();
+
+interface WSClient {
+  ws: WebSocket;
+  subscriptions: Set<string>;
+  filters: {
+    sessionId?: string;
+    eventType?: string[];
+  };
+}
+
+const clients = new Map<string, WSClient>();
+
+export function handleWebSocket(ws: WebSocket) {
+  const clientId = crypto.randomUUID();
+
+  clients.set(clientId, {
+    ws,
+    subscriptions: new Set(),
+    filters: {}
+  });
+
+  ws.onmessage = (event) => {
+    const msg = JSON.parse(event.data);
+
+    if (msg.type === 'subscribe') {
+      const client = clients.get(clientId);
+      msg.channels.forEach((ch: string) => client?.subscriptions.add(ch));
+      if (msg.filters) {
+        client!.filters = msg.filters;
+      }
+    }
+
+    if (msg.type === 'unsubscribe') {
+      const client = clients.get(clientId);
+      msg.channels.forEach((ch: string) => client?.subscriptions.delete(ch));
+    }
+  };
+
+  ws.onclose = () => {
+    clients.delete(clientId);
+  };
+}
+
+// 이벤트 브로드캐스트
+export function broadcastEvent(channel: string, data: unknown) {
+  for (const client of clients.values()) {
+    if (client.subscriptions.has(channel)) {
+      // 필터 적용
+      if (channel === 'events' && client.filters.sessionId) {
+        if ((data as any).sessionId !== client.filters.sessionId) {
+          continue;
+        }
+      }
+
+      client.ws.send(JSON.stringify({ channel, data }));
+    }
+  }
+}
+```
+
+**작업 항목**:
+- [ ] WebSocket 연결 관리
+- [ ] 구독/구독취소 처리
+- [ ] 필터링 적용
+- [ ] 브로드캐스트 함수
+
+### 3.2 이벤트 연동
+
+**파일**: `src/services/memory-service.ts` 수정
+
+```typescript
+import { broadcastEvent } from '../server/websocket';
+
+export class MemoryService {
+  async storeEvent(event: Event): Promise<string> {
+    const eventId = await this.eventStore.append(event);
+
+    // WebSocket 브로드캐스트
+    broadcastEvent('events', {
+      type: 'new_event',
+      event: {
+        eventId,
+        eventType: event.eventType,
+        timestamp: event.timestamp,
+        sessionId: event.sessionId,
+        preview: generatePreview(event.payload, 100)
+      }
+    });
+
+    return eventId;
+  }
+}
+```
+
+**작업 항목**:
+- [ ] 이벤트 저장 시 브로드캐스트
+- [ ] Outbox 상태 브로드캐스트
+- [ ] 통계 업데이트 브로드캐스트
+
+## Phase 4: UI 구현 (P1)
+
+### 4.1 HTML 템플릿
+
+**파일**: `src/ui/index.html` (신규)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Memory Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script type="module" src="/app.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+  <div id="app"></div>
+</body>
+</html>
+```
+
+**작업 항목**:
+- [ ] HTML 기본 템플릿
+- [ ] Tailwind 설정
+- [ ] 다크 테마
+
+### 4.2 메인 앱
+
+**파일**: `src/ui/app.ts` (신규)
+
+```typescript
+import { h, render } from 'preact';
+import { signal } from '@preact/signals';
+import { Router, Route } from 'preact-router';
+
+import { Dashboard } from './pages/Dashboard';
+import { Sessions } from './pages/Sessions';
+import { Timeline } from './pages/Timeline';
+import { Search } from './pages/Search';
+import { Stats } from './pages/Stats';
+
+const currentPath = signal(window.location.pathname);
+
+function App() {
+  return h('div', { class: 'min-h-screen' },
+    h('nav', { class: 'bg-gray-800 p-4' },
+      h('div', { class: 'flex items-center gap-4' },
+        h('span', { class: 'text-xl font-bold' }, '🧠 Code Memory'),
+        h('a', { href: '/', class: 'hover:text-blue-400' }, 'Dashboard'),
+        h('a', { href: '/sessions', class: 'hover:text-blue-400' }, 'Sessions'),
+        h('a', { href: '/timeline', class: 'hover:text-blue-400' }, 'Timeline'),
+        h('a', { href: '/search', class: 'hover:text-blue-400' }, 'Search'),
+        h('a', { href: '/stats', class: 'hover:text-blue-400' }, 'Stats')
+      )
+    ),
+    h('main', { class: 'p-4' },
+      h(Router, {},
+        h(Route, { path: '/', component: Dashboard }),
+        h(Route, { path: '/sessions', component: Sessions }),
+        h(Route, { path: '/sessions/:id', component: SessionDetail }),
+        h(Route, { path: '/timeline', component: Timeline }),
+        h(Route, { path: '/search', component: Search }),
+        h(Route, { path: '/stats', component: Stats })
+      )
+    )
+  );
+}
+
+render(h(App), document.getElementById('app')!);
+```
+
+**작업 항목**:
+- [ ] Preact 앱 설정
+- [ ] 라우터 구성
+- [ ] 네비게이션 바
+
+### 4.3 API 클라이언트
+
+**파일**: `src/ui/api.ts` (신규)
+
+```typescript
+const BASE_URL = '/api';
+
+export async function fetchSessions(options?: { page?: number; pageSize?: number }) {
+  const params = new URLSearchParams();
+  if (options?.page) params.set('page', String(options.page));
+  if (options?.pageSize) params.set('pageSize', String(options.pageSize));
+
+  const res = await fetch(`${BASE_URL}/sessions?${params}`);
+  return res.json();
+}
+
+export async function fetchEvents(options?: { sessionId?: string; type?: string; limit?: number }) {
+  const params = new URLSearchParams();
+  if (options?.sessionId) params.set('sessionId', options.sessionId);
+  if (options?.type) params.set('type', options.type);
+  if (options?.limit) params.set('limit', String(options.limit));
+
+  const res = await fetch(`${BASE_URL}/events?${params}`);
+  return res.json();
+}
+
+export async function search(query: string, options?: SearchOptions) {
+  const res = await fetch(`${BASE_URL}/search`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, options })
+  });
+  return res.json();
+}
+
+export async function fetchStats() {
+  const res = await fetch(`${BASE_URL}/stats`);
+  return res.json();
+}
+```
+
+**작업 항목**:
+- [ ] Sessions API 클라이언트
+- [ ] Events API 클라이언트
+- [ ] Search API 클라이언트
+- [ ] Stats API 클라이언트
+
+### 4.4 WebSocket 클라이언트
+
+**파일**: `src/ui/websocket.ts` (신규)
+
+```typescript
+import { signal } from '@preact/signals';
+
+export const wsConnected = signal(false);
+export const liveEvents = signal<Event[]>([]);
+export const outboxStatus = signal({ pending: 0, processing: [], failed: [] });
+
+let ws: WebSocket | null = null;
+
+export function connectWebSocket() {
+  ws = new WebSocket(`ws://${window.location.host}/ws`);
+
+  ws.onopen = () => {
+    wsConnected.value = true;
+    ws?.send(JSON.stringify({
+      type: 'subscribe',
+      channels: ['events', 'outbox']
+    }));
+  };
+
+  ws.onmessage = (event) => {
+    const msg = JSON.parse(event.data);
+
+    if (msg.channel === 'events') {
+      liveEvents.value = [msg.data.event, ...liveEvents.value.slice(0, 99)];
+    }
+
+    if (msg.channel === 'outbox') {
+      outboxStatus.value = msg.data;
+    }
+  };
+
+  ws.onclose = () => {
+    wsConnected.value = false;
+    setTimeout(connectWebSocket, 3000);  // 재연결
+  };
+}
+
+export function subscribeToSession(sessionId: string) {
+  ws?.send(JSON.stringify({
+    type: 'subscribe',
+    channels: ['events'],
+    filters: { sessionId }
+  }));
+}
+```
+
+**작업 항목**:
+- [ ] WebSocket 연결 관리
+- [ ] 자동 재연결
+- [ ] 구독 관리
+- [ ] 실시간 상태 시그널
+
+## Phase 5: 페이지 컴포넌트 (P1)
+
+### 5.1 Dashboard 페이지
+
+**파일**: `src/ui/pages/Dashboard.ts` (신규)
+
+```typescript
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { fetchStats, fetchSessions } from '../api';
+
+export function Dashboard() {
+  const [stats, setStats] = useState(null);
+  const [recentSessions, setRecentSessions] = useState([]);
+
+  useEffect(() => {
+    fetchStats().then(setStats);
+    fetchSessions({ pageSize: 5 }).then(data => setRecentSessions(data.sessions));
+  }, []);
+
+  return h('div', { class: 'space-y-6' },
+    // Stats cards
+    h('div', { class: 'grid grid-cols-3 gap-4' },
+      h(StatCard, { title: 'Events', value: stats?.storage.eventCount }),
+      h(StatCard, { title: 'Vectors', value: stats?.storage.vectorCount }),
+      h(StatCard, { title: 'Sessions', value: stats?.sessions.total })
+    ),
+    // Recent sessions
+    h('div', { class: 'bg-gray-800 rounded p-4' },
+      h('h2', { class: 'text-lg font-semibold mb-4' }, 'Recent Sessions'),
+      recentSessions.map(s => h(SessionItem, { session: s }))
+    )
+  );
+}
+```
+
+**작업 항목**:
+- [ ] 통계 카드 컴포넌트
+- [ ] 최근 세션 목록
+- [ ] 실시간 업데이트
+
+### 5.2 Timeline 페이지
+
+**파일**: `src/ui/pages/Timeline.ts` (신규)
+
+```typescript
+import { h } from 'preact';
+import { useEffect } from 'preact/hooks';
+import { liveEvents, connectWebSocket } from '../websocket';
+
+export function Timeline() {
+  useEffect(() => {
+    connectWebSocket();
+  }, []);
+
+  return h('div', { class: 'space-y-4' },
+    h('div', { class: 'flex items-center justify-between' },
+      h('h1', { class: 'text-xl font-bold' }, '📅 Timeline'),
+      h('span', { class: 'text-green-400' }, '● Live')
+    ),
+    h('div', { class: 'space-y-2' },
+      liveEvents.value.map(event =>
+        h(TimelineItem, { event })
+      )
+    )
+  );
+}
+
+function TimelineItem({ event }) {
+  const icons = {
+    user_prompt: '💬',
+    assistant_response: '🤖',
+    tool_observation: '🛠️'
+  };
+
+  return h('div', { class: 'flex gap-4 p-4 bg-gray-800 rounded' },
+    h('div', { class: 'text-2xl' }, icons[event.eventType] || '📝'),
+    h('div', { class: 'flex-1' },
+      h('div', { class: 'text-sm text-gray-400' },
+        new Date(event.timestamp).toLocaleTimeString()
+      ),
+      h('div', {}, event.preview)
+    )
+  );
+}
+```
+
+**작업 항목**:
+- [ ] 실시간 타임라인
+- [ ] 이벤트 타입별 아이콘
+- [ ] 필터링 옵션
+- [ ] 무한 스크롤
+
+### 5.3 Search 페이지
+
+**파일**: `src/ui/pages/Search.ts` (신규)
+
+```typescript
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import { search } from '../api';
+
+export function Search() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSearch() {
+    if (!query.trim()) return;
+    setLoading(true);
+    const data = await search(query);
+    setResults(data.results);
+    setLoading(false);
+  }
+
+  return h('div', { class: 'space-y-4' },
+    h('div', { class: 'flex gap-2' },
+      h('input', {
+        type: 'text',
+        value: query,
+        onInput: (e) => setQuery(e.target.value),
+        onKeyDown: (e) => e.key === 'Enter' && handleSearch(),
+        placeholder: 'Search memories...',
+        class: 'flex-1 bg-gray-800 rounded px-4 py-2'
+      }),
+      h('button', {
+        onClick: handleSearch,
+        class: 'bg-blue-600 px-4 py-2 rounded'
+      }, 'Search')
+    ),
+    loading && h('div', {}, 'Searching...'),
+    h('div', { class: 'space-y-2' },
+      results.map(r => h(SearchResult, { result: r }))
+    )
+  );
+}
+```
+
+**작업 항목**:
+- [ ] 검색 입력
+- [ ] 필터 옵션
+- [ ] 결과 표시
+- [ ] 하이라이트
+
+## Phase 6: 빌드 및 통합 (P0)
+
+### 6.1 빌드 스크립트
+
+**파일**: `package.json` 수정
+
+```json
+{
+  "scripts": {
+    "build:ui": "esbuild src/ui/app.ts --bundle --outfile=dist/ui/app.js --minify",
+    "build:server": "esbuild src/server/index.ts --bundle --platform=node --outfile=dist/server.js",
+    "dev:ui": "esbuild src/ui/app.ts --bundle --outfile=dist/ui/app.js --watch",
+    "start:server": "bun dist/server.js"
+  }
+}
+```
+
+**작업 항목**:
+- [ ] UI 빌드 스크립트
+- [ ] 서버 빌드 스크립트
+- [ ] 개발 모드 설정
+
+### 6.2 서버 자동 시작
+
+**파일**: `src/hooks/session-start.ts` 수정
+
+```typescript
+import { startServer, isServerRunning } from '../server';
+
+export async function handleSessionStart(): Promise<void> {
+  // 서버 실행 확인 및 시작
+  if (!await isServerRunning(37777)) {
+    startServer(37777);
+    console.log('Memory viewer started at http://localhost:37777');
+  }
+
+  // 기존 로직...
+}
+```
+
+**작업 항목**:
+- [ ] 세션 시작 시 서버 자동 시작
+- [ ] 포트 충돌 처리
+- [ ] 로그 출력
+
+## 파일 목록
+
+### 신규 파일
+```
+# Server
+src/server/index.ts              # HTTP 서버 메인
+src/server/api/index.ts          # API 라우터
+src/server/api/sessions.ts       # Sessions API
+src/server/api/events.ts         # Events API
+src/server/api/search.ts         # Search API
+src/server/api/stats.ts          # Stats API
+src/server/api/config.ts         # Config API
+src/server/websocket.ts          # WebSocket 핸들러
+
+# UI
+src/ui/index.html                # HTML 템플릿
+src/ui/app.ts                    # Preact 앱
+src/ui/api.ts                    # API 클라이언트
+src/ui/websocket.ts              # WebSocket 클라이언트
+src/ui/pages/Dashboard.ts        # 대시보드 페이지
+src/ui/pages/Sessions.ts         # 세션 페이지
+src/ui/pages/Timeline.ts         # 타임라인 페이지
+src/ui/pages/Search.ts           # 검색 페이지
+src/ui/pages/Stats.ts            # 통계 페이지
+src/ui/components/*.ts           # 공통 컴포넌트
+```
+
+### 수정 파일
+```
+src/services/memory-service.ts   # WebSocket 브로드캐스트 추가
+src/hooks/session-start.ts       # 서버 자동 시작
+package.json                     # 빌드 스크립트
+```
+
+## 마일스톤
+
+| 단계 | 완료 기준 |
+|------|----------|
+| M1 | HTTP 서버 + 정적 파일 서빙 |
+| M2 | REST API (Sessions, Events) |
+| M3 | REST API (Search, Stats, Config) |
+| M4 | WebSocket 기본 구현 |
+| M5 | UI 기본 레이아웃 |
+| M6 | Dashboard + Timeline 페이지 |
+| M7 | Search + Stats 페이지 |
+| M8 | 빌드 및 통합 테스트 |
+
+## 2026-02-25T12:31:26.480Z | 5489e5b4-f3f1-4933-9208-c13ca5e1bcff
+- type: session_summary
+- session: import:organized
+# Web Viewer UI Specification
+
+> **Version**: 1.0.0
+> **Status**: Draft
+> **Created**: 2026-02-01
+> **Reference**: claude-mem (thedotmack/claude-mem)
+
+## 1. 개요
+
+### 1.1 문제 정의
+
+현재 시스템에서 메모리 상태 시각화가 어려움:
+
+1. **CLI 한계**: 대량 데이터 탐색 불편
+2. **실시간 모니터링 없음**: 세션 진행 중 메모리 변화 확인 불가
+3. **디버깅 어려움**: 메모리 저장/검색 과정 추적 어려움
+
+### 1.2 해결 방향
+
+**Web Viewer UI**:
+- HTTP API 서버 (localhost:37777)
+- 실시간 메모리 스트림 대시보드
+- 세션/프로젝트별 탐색 인터페이스
+
+## 2. 핵심 개념
+
+### 2.1 시스템 아키텍처
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     Claude Code                              │
+│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐        │
+│  │ Hooks   │  │ CLI     │  │ Memory  │  │ Web     │        │
+│  │         │  │         │  │ Service │  │ Server  │        │
+│  └────┬────┘  └────┬────┘  └────┬────┘  └────┬────┘        │
+│       │            │            │            │              │
+│       └────────────┴────────────┴────────────┘              │
+│                          │                                   │
+└──────────────────────────┼───────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    Web Server (Bun)                          │
+│                    localhost:37777                           │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
+│  │ REST API    │  │ WebSocket   │  │ Static      │         │
+│  │ /api/*      │  │ /ws         │  │ /           │         │
+│  └─────────────┘  └─────────────┘  └─────────────┘         │
+└─────────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    Web Browser                               │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │  Memory Dashboard                                    │   │
+│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐          │   │
+│  │  │ Sessions │  │ Timeline │  │ Search   │          │   │
+│  │  └──────────┘  └──────────┘  └──────────┘          │   │
+│  └─────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 주요 기능
+
+| 기능 | 설명 |
+|------|------|
+| **Session Browser** | 세션 목록, 세션별 이벤트 탐색 |
+| **Memory Timeline** | 시간순 메모리 스트림 (실시간) |
+| **Search Interface** | 벡터 검색 + 필터링 |
+| **Stats Dashboard** | 저장소 통계, 사용량 |
+| **Debug View** | Outbox 상태, 임베딩 진행률 |
+| **Settings** | 설정 조회/수정 |
+
+### 2.3 포트 및 경로
+
+```
+http://localhost:37777
+├── /                    # 대시보드 메인
+├── /sessions            # 세션 목록
+├── /sessions/:id        # 세션 상세
+├── /timeline            # 실시간 타임라인
+├── /search              # 검색 인터페이스
+├── /stats               # 통계
+├── /settings            # 설정
+└── /api                 # REST API
+    ├── /api/sessions
+    ├── /api/events
+    ├── /api/search
+    ├── /api/stats
+    └── /api/config
+```
+
+## 3. REST API 스키마
+
+### 3.1 Sessions API
+
+```typescript
+// GET /api/sessions
+interface SessionsResponse {
+  sessions: {
+    sessionId: string;
+    projectPath: string;
+    startedAt: Date;
+    endedAt?: Date;
+    eventCount: number;
+    status: 'active' | 'ended';
+  }[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+// GET /api/sessions/:id
+interface SessionDetailResponse {
+  session: {
+    sessionId: string;
+    projectPath: string;
+    startedAt: Date;
+    endedAt?: Date;
+    summary?: string;
+  };
+  events: Event[];
+  stats: {
+    promptCount: number;
+    responseCount: number;
+    toolCount: number;
+    totalTokens: number;
+  };
+}
+```
+
+### 3.2 Events API
+
+```typescript
+// GET /api/events?sessionId=xxx&type=xxx&limit=100
+interface EventsResponse {
+  events: {
+    eventId: string;
+    eventType: string;
+    timestamp: Date;
+    sessionId: string;
+    preview: string;        // 100자 미리보기
+    metadata: {
+      tokenCount?: number;
+      hasCode?: boolean;
+    };
+  }[];
+  total: number;
+}
+
+// GET /api/events/:id
+interface EventDetailResponse {
+  event: {
+    eventId: string;
+    eventType: string;
+    timestamp: Date;
+    sessionId: string;
+    payload: unknown;       // 전체 페이로드
+  };
+  related: {
+    previous?: string;
+    next?: string;
+  };
+}
+```
+
+### 3.3 Search API
+
+```typescript
+// POST /api/search
+interface SearchRequest {
+  query: string;
+  filters?: {
+    sessionId?: string;
+    eventType?: string[];
+    dateFrom?: Date;
+    dateTo?: Date;
+  };
+  options?: {
+    topK?: number;
+    minScore?: number;
+    progressive?: boolean;
+  };
+}
+
+interface SearchResponse {
+  results: {
+    id: string;
+    score: number;
+    type: string;
+    timestamp: Date;
+    sessionId: string;
+    preview: string;
+    highlight?: string;     // 매칭된 부분 강조
+  }[];
+  meta: {
+    totalMatches: number;
+    searchTime: number;
+    mode: 'vector' | 'fts' | 'hybrid';
+  };
+}
+```
+
+### 3.4 Stats API
+
+```typescript
+// GET /api/stats
+interface StatsResponse {
+  storage: {
+    eventCount: number;
+    vectorCount: number;
+    dbSizeMB: number;
+    vectorSizeMB: number;
+  };
+  sessions: {
+    total: number;
+    active: number;
+    thisWeek: number;
+  };
+  embeddings: {
+    pending: number;
+    processed: number;
+    failed: number;
+    avgProcessTime: number;
+  };
+  memory: {
+    heapUsed: number;
+    heapTotal: number;
+  };
+}
+
+// GET /api/stats/timeline
+interface TimelineStatsResponse {
+  daily: {
+    date: string;
+    eventCount: number;
+    sessionCount: number;
+  }[];
+}
+```
+
+### 3.5 Config API
+
+```typescript
+// GET /api/config
+interface ConfigResponse {
+  config: MemoryConfig;
+  editable: string[];      // 수정 가능한 필드 목록
+}
+
+// PATCH /api/config
+interface ConfigUpdateRequest {
+  updates: Partial<MemoryConfig>;
+}
+
+interface ConfigUpdateResponse {
+  success: boolean;
+  config: MemoryConfig;
+  restartRequired?: boolean;
+}
+```
+
+## 4. WebSocket 인터페이스
+
+### 4.1 실시간 이벤트 스트림
+
+```typescript
+// 연결: ws://localhost:37777/ws
+
+// 클라이언트 → 서버 메시지
+interface WSClientMessage {
+  type: 'subscribe' | 'unsubscribe';
+  channels: ('events' | 'stats' | 'outbox')[];
+  filters?: {
+    sessionId?: string;
+    eventType?: string[];
+  };
+}
+
+// 서버 → 클라이언트 메시지
+interface WSServerMessage {
+  channel: 'events' | 'stats' | 'outbox';
+  data: EventMessage | StatsMessage | OutboxMessage;
+}
+
+interface EventMessage {
+  type: 'new_event';
+  event: {
+    eventId: string;
+    eventType: string;
+    timestamp: Date;
+    sessionId: string;
+    preview: string;
+  };
+}
+
+interface OutboxMessage {
+  type: 'outbox_update';
+  pending: number;
+  processing: string[];
+  completed: string[];
+  failed: string[];
+}
+```
+
+### 4.2 연결 예시
+
+```typescript
+// 클라이언트 코드
+const ws = new WebSocket('ws://localhost:37777/ws');
+
+ws.onopen = () => {
+  ws.send(JSON.stringify({
+    type: 'subscribe',
+    channels: ['events', 'outbox']
+  }));
+};
+
+ws.onmessage = (event) => {
+  const msg = JSON.parse(event.data);
+  if (msg.channel === 'events') {
+    addToTimeline(msg.data.event);
+  } else if (msg.channel === 'outbox') {
+    updateOutboxStatus(msg.data);
+  }
+};
+```
+
+## 5. UI 컴포넌트
+
+### 5.1 대시보드 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  🧠 Code Memory                           [Search] [Settings]│
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌───────────────────────────────────────┐ │
+│  │             │  │                                       │ │
+│  │  Sessions   │  │           Main Content Area           │ │
+│  │  ─────────  │  │                                       │ │
+│  │  > session1 │  │   - Timeline View                     │ │
+│  │    session2 │  │   - Search Results                    │ │
+│  │    session3 │  │   - Session Details                   │ │
+│  │    ...      │  │   - Stats Dashboard                   │ │
+│  │             │  │                                       │ │
+│  │  ─────────  │  │                                       │ │
+│  │  Projects   │  │                                       │ │
+│  │  > project1 │  │                                       │ │
+│  │    project2 │  │                                       │ │
+│  │             │  │                                       │ │
+│  └─────────────┘  └───────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────┤
+│  Events: 1,234  │  Vectors: 987  │  Outbox: 5 pending      │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 Timeline View
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  📅 Timeline                    [Filter ▼] [Live ●]         │
+├─────────────────────────────────────────────────────────────┤
+│                                                              │
+│  ○─── 14:35 ───────────────────────────────────────────────│
+│  │                                                          │
+│  │  💬 User Prompt                                          │
+│  │  "DuckDB 스키마를 어떻게 설계할까요?"                      │
+│  │                                                          │
+│  ○─── 14:36 ───────────────────────────────────────────────│
+│  │                                                          │
+│  │  🛠️ Tool: Read                                           │
+│  │  /src/core/event-store.ts                               │
+│  │                                                          │
+│  ○─── 14:37 ───────────────────────────────────────────────│
+│  │                                                          │
+│  │  🤖 Assistant Response                                   │
+│  │  "DuckDB를 사용하여 이벤트 소싱 패턴을..."               │
+│  │  [Show Full] [Copy]                                      │
+│  │                                                          │
+│  ○─── 14:40 ───────────────────────────────────────────────│
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5.3 Search View
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  🔍 Search                                                   │
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │  Type to search memories...                          │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                              │
+│  Filters: [All Types ▼] [All Sessions ▼] [Date Range ▼]    │
+│                                                              │
+│  ─────────────────────────────────────────────────────────  │
+│                                                              │
+│  📄 Result 1 (score: 0.94)                                  │
+│  Session: abc123 │ 2026-01-30 14:05                         │
+│  "DuckDB를 사용하여 이벤트 소싱 패턴을 구현하는 방법을..."   │
+│  [View] [Timeline] [Copy ID]                                │
+│                                                              │
+│  📄 Result 2 (score: 0.87)                                  │
+│  Session: def456 │ 2026-01-29 10:20                         │
+│  "타입 시스템 리팩토링 시 고려할 점..."                      │
+│  [View] [Timeline] [Copy ID]                                │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5.4 Stats Dashboard
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  📊 Statistics                           [Refresh] [Export] │
+├─────────────────────────────────────────────────────────────┤
+│                                                              │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
+│  │   Events     │  │   Vectors    │  │   Sessions   │      │
+│  │    1,234     │  │     987      │  │      45      │      │
+│  │   ↑12 today  │  │   ↑8 today   │  │   3 active   │      │
+│  └──────────────┘  └──────────────┘  └──────────────┘      │
+│                                                              │
+│  Storage                                                     │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ DuckDB  [████████░░] 156 MB / 500 MB               │   │
+│  │ LanceDB [███░░░░░░░]  45 MB / 500 MB               │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                              │
+│  Embedding Pipeline                                          │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Pending: 5  │  Processing: 2  │  Failed: 0          │   │
+│  │ Avg Time: 125ms                                      │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                              │
+│  Activity (Last 7 Days)                                      │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │     ▂▄█▆▃▂▄                                          │   │
+│  │    Mon Tue Wed Thu Fri Sat Sun                       │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 6. 기술 스택
+
+### 6.1 서버
+
+| 컴포넌트 | 기술 | 이유 |
+|----------|------|------|
+| HTTP Server | Bun.serve | 빠른 성능, 번들 불필요 |
+| WebSocket | Bun WebSocket | 내장 지원 |
+| Router | Hono | 경량, Bun 최적화 |
+
+### 6.2 클라이언트
+
+| 컴포넌트 | 기술 | 이유 |
+|----------|------|------|
+| UI Framework | Preact + HTM | 번들 크기 최소 |
+| Styling | Tailwind CSS | 빠른 개발 |
+| State | Signals | 경량 반응성 |
+| Charts | Chart.js | 간단한 통계 시각화 |
+
+### 6.3 대안
+
+| 옵션 | 장점 | 단점 |
+|------|------|------|
+| React + Vite | 생태계 | 번들 크기 |
+| Vue 3 | 간결함 | 추가 학습 |
+| Svelte | 번들 최소 | 생태계 작음 |
+| **Preact + HTM** | 초경량, JSX 없이 | 생태계 제한 |
+
+## 7. 보안
+
+### 7.1 접근 제어
+
+```typescript
+// localhost만 허용
+const server = Bun.serve({
+  hostname: '127.0.0.1',  // localhost만
+  port: 37777,
+  // ...
+});
+
+// 또는 토큰 기반
+const AUTH_TOKEN = process.env.MEMORY_VIEWER_TOKEN;
+
+function authMiddleware(req: Request): boolean {
+  const token = req.headers.get('Authorization');
+  return token === `Bearer ${AUTH_TOKEN}`;
+}
+```
+
+### 7.2 민감 정보 필터링
+
+```typescript
+// API 응답에서 민감 정보 제거
+function sanitizeEvent(event: Event): SanitizedEvent {
+  return {
+    ...event,
+    payload: maskSensitiveFields(event.payload)
+  };
+}
+```
+
+## 8. 성공 기준
+
+- [ ] localhost:37777에서 대시보드 접근 가능
+- [ ] 세션 목록 및 상세 조회 동작
+- [ ] 실시간 이벤트 스트림 표시
+- [ ] 검색 기능 동작 (벡터 + FTS)
+- [ ] 통계 대시보드 표시
+- [ ] WebSocket 연결 안정적
+- [ ] 첫 로드 < 1초
+- [ ] API 응답 < 200ms