v0.2 Design Preview

engram Web UI

Static HTML previews of the 11 pages defined in DESIGN §7.1. The real implementation will be FastAPI + SvelteKit with live data over SSE.

11 Pages

Click any card to view the mockup

Project-level overview — asset counts, wisdom sparklines, activity feed, open proposals.

Visual asset graph — D3 force-directed nodes colored by subtype, with filter sidebar and detail panel.

Frontmatter editor, body editor, inbound references, confidence gauge, and usage history.

Workflow Detail

Tabbed view of workflow.md, spine, fixtures, metrics, and revision timeline with diff viewer.

/workflow/<name>

Three-column reader — TOC sidebar, article content, and meta panel with compile status.

Subscribed pool table, propagation mode controls, dependency graph, and sync actions.

Project Overview

Grid of engram-enabled projects — asset counts, health badges, wisdom sparklines, and project switcher.

Context Preview

Simulate what the LLM will see — task input, token budget, ranked candidates, packed prompt. The key diagnostic page.

/context-preview

Autolearn Console

Live evolution.tsv tail, metric trend chart, and current round diff viewer for the Autolearn Engine.

Cross-repo message center — filter, read, acknowledge, resolve, or reject Inter-Repo Messenger messages.

Four Wisdom Metrics curves — Workflow Mastery, Task Efficiency, Curation Ratio, Context Efficiency.

These are static mockups

Every page here shows representative data. The real application (milestone M7) will render live data from graph.db via FastAPI endpoints and SvelteKit components. Interactions are non-functional in these mockups — buttons, tabs, and links navigate within the mockup set only.