claude-memory-layer 1.0.26 → 1.0.28

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

@@ -1,1709 +0,0 @@
-
-## 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