feat(ui): canonical shell — modernize Sidebar + PageHeader (Phase 1) - #339
Merged
Conversation
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
krisarmstrong
enabled auto-merge (squash)
May 27, 2026 19:25
Contributor
License Compliance ReportAll dependencies pass license compliance checksGo Dependencies
npm DependenciesSee full report in workflow artifacts Allowed Licenses: MIT, Apache-2.0, BSD-*, ISC, CC0-1.0, MPL-2.0 |
1 similar comment
Contributor
License Compliance ReportAll dependencies pass license compliance checksGo Dependencies
npm DependenciesSee full report in workflow artifacts Allowed Licenses: MIT, Apache-2.0, BSD-*, ISC, CC0-1.0, MPL-2.0 |
This was referenced May 27, 2026
added 2 commits
May 27, 2026 16:56
Step 2 of the seed/stem/niac harmonization plan. Stem becomes the source-of-truth for the cross-product UI shell. Seed and niac will sync these files in via scripts/sync-shell.sh (forthcoming PRs in those repos). Sidebar.tsx — modernization - Active state: bg-brand-primary/15 → bg-gradient-to-r from-brand-primary/30 to-brand-primary/20. Active icon now uses text-brand-accent (was text-brand-primary). Visually richer, still fully tokenized — each repo's brand identity comes through. - Tri-color badges: 'New' → status-success tone, 'Beta' → status-warning tone, anything else → brand-primary tone. Ported from NIAC. - prefetchRoute(item.path) on onMouseEnter — warm up API data before the user clicks. NIAC has this; seed/stem didn't. - Root layout bg: bg-gradient-to-br from-surface-base via-surface-raised to-surface-deep — atmospheric depth, fully tokenized. - Mobile drawer backdrop: bg-black/60 → bg-scrim/60. - File banner identifies it as CANONICAL SHELL. PageHeader.tsx — full replacement - Adds breadcrumb support (links + chevron separators). - Adds slide-out HelpPanel triggered by an optional (?) icon — close on Escape, overlay click, or X. Content is opaque ReactNode so each page ships its own help. Ported from NIAC's pattern. - Existing title/description/icon/actions API preserved. - Fully tokenized; no raw Tailwind. ui/SHELL.md - Documents which files are canonical, what tokens the shell expects each consumer repo to define, and how seed/niac will consume via the sync script. Not changed - HeaderBar.tsx stays per-product (too much variance: stem has interface picker, seed has ethernet+wifi split + recommended-star + logo-color- as-status, niac currently has none). Documented in SHELL.md. Validated - Discipline gate, build, lint all green - prefetch stub from Phase 0 covers the new Sidebar import; populate ROUTE_PREFETCH_MAP with stem routes as performance wins arise.
Seed uses a profiles drawer; the canonical Sidebar must support it as an optional callback alongside the existing onOpenHelp/Settings/History. Pattern: all drawer callbacks are optional, footer button only renders when its callback is provided. Stem doesn't use it (no behavior change here); seed and niac can opt in.
krisarmstrong
force-pushed
the
chore/phase1-canonical-shell-modernize
branch
from
May 27, 2026 20:57
2b66042 to
0b87848
Compare
Contributor
License Compliance ReportAll dependencies pass license compliance checksGo Dependencies
npm DependenciesSee full report in workflow artifacts Allowed Licenses: MIT, Apache-2.0, BSD-*, ISC, CC0-1.0, MPL-2.0 |
This was referenced Jul 8, 2026
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
Phase 1 of the seed/stem/niac harmonization plan. Stem becomes the canonical source for the cross-product UI shell; seed and niac will sync these files via
scripts/sync-shell.shin follow-up PRs.Builds on Phase 0 (#338, now merged).
What changed in stem
Sidebar.tsx— modernizationbg-brand-primary/15→ gradientbg-gradient-to-r from-brand-primary/30 to-brand-primary/20. Active icon now usestext-brand-accent(wastext-brand-primary). Richer look; per-product brand identity still comes through tokens.'New'→ status-success tone,'Beta'→ status-warning tone, anything else → brand-primary tone. (Ported from NIAC.)prefetchRoute(item.path)ononMouseEnter. NIAC had this; seed/stem didn't. Warms up API data before the user clicks.bg-gradient-to-br from-surface-base via-surface-raised to-surface-deep.bg-black/60→bg-scrim/60(one we missed in Phase 0).PageHeader.tsx— full replacement(?)icon — close on Escape / overlay click / X. Content is opaque ReactNode so each page ships its own help. (Ported from NIAC.)ui/SHELL.md— newContract doc: which files are canonical, what tokens the shell expects, how seed/niac will consume via the sync script.
What did NOT change
HeaderBar.tsxstays per-product. Too much variance — stem has an interface picker, seed has ethernet/wifi split + recommended-star + logo-color-as-status, niac has none. Each repo owns its own; the pattern is consistent. Documented inSHELL.md.Test plan
./scripts/check-token-discipline.sh— PASSnpm run build— PASSnpm run lint— PASSNext PRs
scripts/sync-shell.sh, sync these files in from stem🤖 Generated with Claude Code