feat(architecture): PR6 — console frame, recommended-first, de-noised glossary [clean]#37
Merged
Merged
Conversation
Bring the interactive diagram onto the shared design language and fix its biggest UX gaps. - Wrap the diagram + detail in the shared .panel with a console topbar (dots + "coven · architecture" + a layer legend: harness/runtime/project). - Recommended-first: the Adapter node is pre-selected and its content is server-rendered, so the detail panel never ships a generic "pick a node" state; a subtle pulse primes it until the first interaction. - Glossary de-noised: mark only the FIRST occurrence of each term (was every occurrence), and marks are now real <button>s (native tap). - Tooltip is now a tap-toggle, dismissible popover (role=dialog): click/tap pins it, hover previews on pointer devices, with a close button, Escape (returns focus), and click-outside. position:fixed + viewport clamp makes it robust on mobile — the old hover-only tooltip was unusable on touch. - Detail repaints crossfade through fadeSwap; palette fixed (green token, violet focus stroke, dropped the off-palette magenta). Deferred (SVG is tappable and usable on mobile as-is): a parallel HTML node-stack for larger touch targets, and 2-D grid keyboard nav. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Architecture section’s interactive diagram to match the shared section design language and improve UX: a console-style frame + legend, an SSR “recommended-first” default selection, and a de-noised glossary interaction via a dismissible popover.
Changes:
- Wraps the diagram/detail in a console-style
.panelwith a top bar and layer legend. - Server-renders the Adapter node as the default selected “recommended-first” state and crossfades detail updates via
fadeSwap. - Reworks glossary term marking to first-occurrence-only and upgrades terms to real
<button>triggers with a fixed, clamped, dismissible popover (Escape/close/click-outside).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+395
to
+397
| document.addEventListener('click', (e) => { | ||
| if (pinnedMark && tooltip && !tooltip.contains(e.target) && !e.target.closest('.kw')) hideTooltip(); | ||
| }); |
Comment on lines
+226
to
232
| class={`arch-node arch-node--${n.layer}${n.id === 'adapter' ? ' is-selected' : ''}`} | ||
| data-node={n.id} | ||
| data-layer={n.layer} | ||
| data-recommended={n.id === 'adapter' ? 'true' : null} | ||
| role="button" | ||
| tabindex={i === 0 ? '0' : '-1'} | ||
| aria-label={n.title} |
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
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.
Brings the interactive diagram onto the shared language: console frame + layer legend, recommended-first (Adapter pre-selected, SSR'd), first-occurrence-only glossary as
<button>s, a tap-dismissible popover (Escape/close/click-outside, fixed+clamped), and fadeSwap. Stacked on the howitworks PR.Clean re-cut of the section overhaul: a concurrent session had interleaved two commits (px→rem conversion, multi-screen support) into the original stack (#26–#31). Rebuilt in an isolated worktree with only my six signed commits. Supersedes the original PR.
🤖 Generated with Claude Code