Skip to content

feat(viz): centered cold-start empty state instead of a black void#28

Merged
sshanzel merged 1 commit into
mainfrom
feat/viz-empty-state
Jun 17, 2026
Merged

feat(viz): centered cold-start empty state instead of a black void#28
sshanzel merged 1 commit into
mainfrom
feat/viz-empty-state

Conversation

@sshanzel

Copy link
Copy Markdown
Owner

What changed

A brand-new user (no learned knowledge yet) opening plex serve saw the Knowledge tab as a black canvas with only a tiny corner note — it reads as broken. Now an empty graph renders a centered empty state with the store's note + a graph-specific call-to-action:

  • knowledge → "Seed lessons from your merged PR history with plex analyze, or just review — Plex learns from every finding you accept."
  • lineage → "Run a review and the comment → finding → verdict history will appear here."
  • code → "Index a repo (plex index) or pick one above…"

Pure client-side, textContent-only (XSS-safe), pointer-events:none so it never blocks the canvas; toggled in draw() when nodes.length === 0.

Why (finishing the cold-start track)

While verifying the day-one experience I confirmed the day-one review is strong — on a fresh empty-knowledge repo, the reviewer caught a planted null-deref-before-the-guard and a swallowed-error → silent undefined bug (both first-principles, beyond the deterministic layer) alongside the 3 deterministic findings, with no learned history. But the day-one viz first impression was a blank screen. This closes that gap so the cold-start looks intentional, not empty.

Before After
Black canvas, tiny corner note Centered "No learned pitfalls yet…" + "Seed with plex analyze, or just review" CTA

How to test

  • pnpm test:unit (552) — ui.test asserts the #empty element, showEmptyState, and the analyze CTA. pnpm typecheck + pnpm build green.
  • Manual: PLEX_KNOWLEDGE_DIR=$(mktemp -d) plex serve → Knowledge tab shows the centered empty state.

🤖 Generated with Claude Code

A brand-new user (no learned knowledge yet) opening `plex serve` saw the Knowledge tab as a
black canvas with only a tiny corner note — reads as broken. Render a centered empty state
with the store's note + a graph-specific call-to-action when a payload has 0 nodes:

- knowledge → "Seed lessons from your merged PR history with `plex analyze`, or just review —
  Plex learns from every finding you accept."
- lineage → "Run a review and the comment → finding → verdict history will appear here."
- code → "Index a repo (`plex index`) or pick one above…"

Pure client-side, textContent-only (XSS-safe), pointer-events:none so it never blocks the
canvas. Toggled in draw() on nodes.length === 0.

Found while finishing the cold-start track: the day-one *review* itself is strong (verified
on a fresh empty-knowledge repo — first-principles caught a planted null-deref + a swallowed-
error bug the deterministic layer can't see, alongside the 3 deterministic findings), but the
day-one *viz* first impression was weak. This closes that gap.

Tests: ui.test asserts the empty-state element + showEmptyState + the analyze CTA.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@sshanzel sshanzel merged commit f5ca06a into main Jun 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant