feat(architecture): PR6 — console frame, recommended-first, de-noised glossary#31
Closed
BunsDev wants to merge 2 commits into
Closed
feat(architecture): PR6 — console frame, recommended-first, de-noised glossary#31BunsDev wants to merge 2 commits into
BunsDev wants to merge 2 commits into
Conversation
- Short laptops (901px+ wide, <=720px tall): compress hero vertical rhythm so the continuity timeline stays above the fold (verified at 1280x640, 1366x700, 1440x720) - Ultrawide (1680px+): shared containers step 1280->1440px; hero type, terminal card, timeline, and ambient glows scale with the canvas - Hero stacking is now orientation-aware: portrait handhelds stack, landscape phones 701-900px wide keep a compact two-column hero - QuickStart stepper: minmax(0,1fr) track + min-width:0 chain so the nowrap codeblock scrolls internally instead of widening the page on phones (fixes horizontal overflow at <=500px) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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
This PR finalizes the Architecture section overhaul by bringing the interactive architecture diagram onto the shared design language, making the “Adapter” node the recommended default (server-rendered), and replacing the noisy “mark every glossary term” behavior with a first-occurrence, touch-friendly glossary popover interaction.
Changes:
- Wraps the Architecture diagram + detail panel in a shared console-like
.panelframe with a topbar and layer legend. - Makes “Adapter” the pre-selected SSR default and crossfades detail updates via
fadeSwap. - Updates glossary term marking to first-occurrence and converts marks into real
<button>triggers with a dismissible, viewport-clamped popover.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/styles/global.css | Improves Quick Start grid sizing/overflow behavior using minmax(0, 1fr) + min-width: 0 to prevent mobile layout overflow. |
| src/components/Architecture.astro | Adds the console frame + legend, SSR “recommended-first” selection, glossary popover behavior, and crossfade detail repainting. |
Comments suppressed due to low confidence (1)
src/components/Architecture.astro:233
- The Adapter node is pre-selected (
is-selected), but the initial roving tabindex still makes the first node tabbable (i === 0). This creates a mismatch where keyboard focus lands on a different node than the one shown in the detail panel on first Tab. Consider making the pre-selected node the initialtabindex="0"target, and include the layer in the accessible name so the layer context isn’t color-dependent.
data-recommended={n.id === 'adapter' ? 'true' : null}
role="button"
tabindex={i === 0 ? '0' : '-1'}
aria-label={n.title}
>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| <div class="architecture-diagram" data-reveal> | ||
| <div class="arch-console panel" data-reveal> | ||
| <div class="arch-consolebar" aria-hidden="true"> |
Comment on lines
+395
to
+397
| document.addEventListener('click', (e) => { | ||
| if (pinnedMark && tooltip && !tooltip.contains(e.target) && !e.target.closest('.kw')) hideTooltip(); | ||
| }); |
This was referenced Jul 7, 2026
Merged
Member
Author
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.
PR6 of the section overhaul — Architecture (final)
Stacked on #30 → #29 → #28 → #27 → #26. Merge those first.
Brings the interactive diagram onto the shared design language and fixes its
biggest UX gaps.
What changed
.panelwith a topbar (dots + "coven · architecture" + a layer legend: harness / runtime / project color keys).<button>s.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.fadeSwap; palette fixed (green token, violet focus stroke, dropped the off-palette magenta).Deferred (noted honestly)
The SVG is tappable and usable on mobile as-is, so I deferred the parallel HTML node-stack (larger touch targets) and 2-D grid keyboard nav to keep this high-risk change contained. Follow-ups if desired.
Verification
npm run build✓ ·npm run check✓ · no console errors after exercising node selection, keyword popover, Escape, and click-outside (CDP).<button>s), popover pins/clamps in-viewport and dismisses correctly. Desktop + 390px mobile captures confirm the console frame, legend, and stacked mobile layout.This completes the six-PR section overhaul (Architecture, How It Works, Compare, Quick Start, Ecosystem) on a shared design language.
🤖 Generated with Claude Code