# v8.8 Live Graph Dashboard + Streaming Diffs Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Add an optional live dashboard for memory graph observability with websocket diff streaming and health endpoints.

**Architecture:** Build a standalone dashboard process that reads Engram graph artifacts and serves a lightweight UI/API. Use file watchers with debounced rebuild and patch broadcasting.

**Tech Stack:** Node/TypeScript dashboard server, websocket, static frontend assets, `src/graph.ts` integration, node:test.

---

## Requirements

1. Dashboard runs as separate process, not in gateway hot path.
2. API endpoints:
- `GET /api/graph`
- `GET /api/health`
3. Websocket stream for graph patch updates.
4. Safe default bind/localhost-only unless explicit override.
5. Graceful degradation when graph files are missing/corrupt.

## Task 1: Graph snapshot + diff helpers

**Files:**
- Create: `dashboard/lib/graph-parser.ts`
- Create: `dashboard/lib/graph-diff.ts`
- Test: `dashboard/lib/graph-diff.test.ts`

## Task 2: Dashboard server

**Files:**
- Create: `dashboard/server.ts`
- Create: `dashboard/public/index.html`
- Create: `dashboard/public/app.js`
- Test: `tests/dashboard-server.test.ts`

## Task 3: CLI wrappers

**Files:**
- Modify: `src/cli.ts`
- Test: `tests/cli-dashboard.test.ts`

Commands:
- `openclaw engram dashboard start`
- `openclaw engram dashboard stop`
- `openclaw engram dashboard status`

## Task 4: docs and operator guidance

**Files:**
- Create: `docs/graph-dashboard.md`
- Modify: `docs/README.md`
- Modify: `CHANGELOG.md`

