Issue #5: micro-frontend profile pages, comparison view, and full E2E coverage#6
Merged
Conversation
Adding .gitkeep for PR creation (default mode). This file will be removed when the task is complete. Issue: #5
…ed catalog Captures research and analysis artifacts for issue #5 in docs/case-studies/issue-5/, including npm/GitHub data for ~18 chat packages and the issue/PR metadata. Adds three new source modules: - src/profile-scoring.js: scoring formula that weights feature count, configurable surfaces, recency, stars, and a "live render" bonus. - src/own-chat-profile.js: dedicated profile entry for our own chat UI ported from GPTutor. - src/extended-chat-catalog.js: 7 additional library profiles (MinChat, react-simple-chatbot, react-chatbot-kit, NLUX, LiveChat, Rocket.Chat Fuselage, Vercel AI SDK) with featureMatrix, limitations, and lockIns metadata.
Pin our own chat profile to the top and append the extended profiles, sorted by computed score from src/profile-scoring.js. The catalog now includes 16 entries (own + 8 base + 7 extended) and exposes getComparisonMatrix() and an isOwn flag on listChatDemoSummaries(). Adds tests/chat-comparison.test.js covering scoring, ranking, catalog pinning, and the comparison matrix shape. Adds featureMatrix, limitations, and lockIns metadata to the 8 base profiles so the comparison view has consistent fields.
- Generate isolated micro-frontend pages for every profile (docs/chat-demos/profiles/) - Add comparison view tab listing features, limitations, lock-ins, and license per profile - Wire toggles for avatar, sender name, reply chrome, and composer kind - Cover every profile with E2E tests (gallery, toggles, locale, composer kind, isolated page) - Switch demo selection clicks to native Playwright to bypass a browser-commander silent failure - Regenerate auto-generated profile pages before demo:dev/demo:build/test:e2e
konard
changed the title
Contributor
Author
Working session summaryDone. PR #6 is ready for review: #6 What landed:
This summary was automatically extracted from the AI working session output. |
Contributor
Author
🤖 Solution Draft LogThis log file contains the complete execution trace of the AI solution draft process. 💰 Cost: $17.190504📊 Context and tokens usage:Claude Opus 4.7: (5 sub-sessions)
Total: (11.1K new + 443.5K cache writes + 21.6M cache reads) input tokens, 143.3K output tokens, $17.190504 cost 🤖 Models used:
📎 Log file uploaded as Gist (7546KB)Now working session is ended, feel free to review and add any feedback on the solution draft. |
Contributor
Author
✅ Ready to mergeThis pull request is now ready to be merged:
Monitored by hive-mind with --auto-restart-until-mergeable flag |
This reverts commit 8f0641f.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #5. Reorganizes the chat-demos gallery so our own React UI is a first-class entry, expands the catalog to a broader set of popular React chat libraries, ships a true micro-frontend page per profile, adds Telegram-style appearance toggles, supports markdown in both messages and the composer, exposes a feature/limitation comparison view, and covers every demo with E2E tests that verify rendering and sending in real browsers.
What changed
src/extended-chat-catalog.js,src/profile-scoring.js). The list is sorted top-down by feature richness, maintenance, and flexibility.docs/chat-demos/scripts/generate-profile-pages.mjsmaterializesdocs/chat-demos/profiles/<id>.html+ Vite entry chunk per profile, registered viavite.config.jsrollupOptions.input. The page-per-profile build prevents library dependencies from clashing on a single bundle.[data-testid="compare-view"]).[data-testid="toggle-*"].textarea,input, andcontenteditablevia[data-testid="composer-kind"]. Markdown is rendered in both messages and the preview side of the composer.docs/case-studies/issue-5/captures the requirements decomposition, profile data, and scoring methodology.tests/e2e/chat-demos.e2e.jsexercises every demo in the main gallery (render, switchers, source visible, send), toggles, locale switching, composer kinds, the comparison view, and a full sweep of every isolated micro-frontend page. The send path is asserted by a delta in[data-testid="chat-message"]count plus a transcript match.browser-commander'sclickButtonreported success without triggering the ReactonClickfor some buttons (aria-pressedstayedfalse). Switched the demo-tab clicks to nativepage.locator(...).click()via aselectDemoTabhelper.npm run test:e2enow regenerates profile pages first. The auto-generateddocs/chat-demos/profiles/andexperiments/folders are gitignored / prettierignored to keep the working tree clean..changeset/issue-5-micro-frontends-and-comparison.md.Verification
npm test— 48 unit tests pass.npm run test:e2e— 10/10 E2E tests pass (gallery, every profile send, locale, toggles, composer kinds, compare view, every micro-frontend page).npm run check— lint + prettier + jscpd clean.npm run demo:build— builds the gallery and all 16 isolated micro-frontend profile pages.Screenshot
Test plan
npm test)npm run test:e2e)npm run check)npm run demo:build)