Skip to content

feat: Web UI for browsing, searching, and deleting memories #36

@pepinogttv

Description

@pepinogttv

Problem

There is no web-based way to explore, search, and delete memories. The TUI (engram tui) exists but requires a terminal and isn't accessible for all users. A browser-based UI would complement the TUI and lower the barrier to inspecting memory state.

Proposed Approach

A static SPA embedded in the Go binary via go:embed, served from engram serve at /ui/. Zero external dependencies at runtime.

Stack

  • Vanilla JS — no framework, no build step, no node_modules
  • Tailwind CSS via CDN — with the Engram Elephant color palette from styles.go
  • Hash-based routing#/memories, #/memories/:id, #/search, etc.

What it does (MVP scope)

  • Dashboard — stats cards (sessions, observations, prompts, projects)
  • Memory list — browse recent observations with type badges, project, date
  • Memory detail — full content view with metadata
  • Search — FTS5 full-text search with debounce, type/project filters
  • Session list + detail — browse sessions and their observations
  • Timeline — visual before/focus/after view
  • Delete — soft-delete with confirmation modal (hard-delete option)
  • Toast notifications — success/error feedback

What it does NOT include

  • Editing or creating memories (agents create, UI reads)
  • Authentication (same localhost-only model as current server)
  • Build step or JS framework
  • WebSocket / live updates

Backend changes (minimal)

  • New internal/server/embed.go with //go:embed webui/*
  • One new route in server.go: GET /ui/ serving the embedded SPA
  • Zero new API endpoints — the existing HTTP API covers everything
  • Optional engram ui CLI command to open the browser

Design

  • Matches the Engram Elephant palette from internal/tui/styles.go (dark theme: #191724 base, #c4a7e7 lavender accent, #9ccfd8 green, #f6c177 peach, etc.)
  • Responsive layout (sidebar on desktop, hamburger on mobile)
  • Same screens as the TUI: Dashboard, Memories, Search, Sessions, Timeline

Risks / Tradeoffs

Risk Mitigation
Tailwind CDN needs internet on first load Fallback CSS with basic layout + colors in styles.css
Binary size increase ~50-80KB — negligible
Maintenance of vanilla JS long-term Perfect for MVP; can migrate to framework if it grows

Affected Areas

  • internal/server/ — embed + route
  • internal/server/webui/ — new directory (HTML, JS, CSS)
  • cmd/engram/main.go — optional engram ui command
  • README.md, DOCS.md — documentation

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions