refactor(web): integrate @nous/design-language into dashboard#8
Merged
kshitijk4poor merged 4 commits intoApr 13, 2026
Conversation
- Light/dark mode toggle with localStorage persistence (warm paper palette) - Session sort (newest/oldest/longest/shortest) and 'Open in CLI' button - Log output copy button, skills category filter with auto-expand - Config page: emoji → Lucide icons, info tooltips on all fields - Status page: System Info card (Hermes Home, Config Path, Release Date) - Analytics: theme-adaptive chart colors (bg-foreground/50, emerald output) - Tooltip component for Gateway PID, Config Version, Cache Hit, etc. - Mock API with realistic dummy data for GitHub Pages demo - Skills toolset emoji replaced with Lucide icons
- SWR-like useAPI hook: stale-while-revalidate cache eliminates loading spinners on page revisits, background refresh keeps data fresh - Session search now searches message content (progressive deep search with batched fetches, module-level cache, content match badges) - Activity heatmap: proper 7-row GitHub-style grid with week columns, day-of-week labels, month labels (pixel-based collision avoidance), CSS custom property colors for light/dark mode adaptation - Model donut: fixed rounding gap (last segment extends to 100%) - Cost trend: interactive hover with crosshair, dot, and date/cost tooltip - Tooltips: 200ms hover delay, fade-in animation, arrow pointer - Config migration: 'Migrate' badge replaced with 'Outdated' status + advisory banner with copyable CLI command (hermes config migrate) - Logs: line numbers in gutter - Sessions: sort labels clarified, search placeholder updated - Page transitions: CSS-driven opacity fade without component remount - Misc: duplicate import fix, sharp-edge consistency, light mode heatmap
… system Vendor lightweight components from NousResearch/design-language without heavy dependencies (three.js, gsap, leva, nanostores). This is the foundation for proper design system integration. Added: - nous/utils/ — cn, polyRef, colorDodge, colorMix (pure, no deps) - nous/lens.ts — static Lens system (LENS_DARK/LENS_LIGHT presets, applyLens sets CSS custom props matching canonical --background, --midground, --foreground layer vars) - nous/ui/blend-mode.ts — static BlendMode (colorDodge computation against Lens palette, no nanostores) - nous/ui/grid/ — Grid/Cell components + grid.css (auto-column layout via CSS :has() selectors) - nous/ui/typography/ — Typography, H2, Small with CVA variants - nous/ui/hover-bg.tsx — bg-midground hover highlight - nous/ui/blink.tsx — dither cursor on group hover Changed: - index.css: adopt design-language CSS var system (--background, --midground, --foreground with -base/-alpha companions), derive Tailwind @theme tokens from Lens vars, add arc-border animation, use canonical font family names (Rules Compressed/Expanded), adopt canonical scrollbar/selection/base styles
- Header: Small (Mondwest nav labels), HoverBg (midground hover)
- Theme toggle: applyLens(LENS_DARK/LENS_LIGHT) sets canonical CSS vars
- Card: blendColor('mg/0.03') for bg, Typography expanded for titles
- Badge: midground colors (bg mg/0.075, text mg, opacity var)
- Button: arc-border animated gradient stroke on default variant hover
- StatusPage + AnalyticsPage: Grid/Cell for summary card layouts
- SessionsPage: HoverBg on session row hover
- Donut chart: teal replaces cream (visible in light mode)
- Fix badge text clipping (leading-none + py-1)
56ee05f
into
kshitijk4poor:feat/web-ui-dashboard-salvage
1 check passed
kshitijk4poor
pushed a commit
that referenced
this pull request
May 1, 2026
* ci(nix): auto-fix stale npm hashes on push to main When a PR merges to main with updated package-lock.json or package.json in ui-tui/ or web/, the new auto-fix-main job detects stale npmDepsHash values and pushes a fix commit directly to main. This eliminates the recurring manual hash-bump PRs (NousResearch#15420, NousResearch#15314, NousResearch#15272, NousResearch#15244) by reusing the existing fix-lockfiles --apply pipeline. The fix commit only touches nix/*.nix files, which are outside the push path filter (package-lock.json / package.json), so it cannot re-trigger itself. Closes NousResearch#15314 * fix(ci): use GitHub App token for auto-fix-main push GITHUB_TOKEN commits are invisible to workflow triggers (GitHub's infinite-loop prevention). The auto-fix-main job pushes directly to main, so the fix commit never triggered downstream nix.yml verification. Mint a short-lived token via the repo's GitHub App (daimon-nous, APP_ID + APP_PRIVATE_KEY secrets) so the push is treated as a real event and nix.yml fires to verify the corrected hashes. Tested via workflow_dispatch dry-run: app token minted successfully, checkout with app token succeeded, fix job correctly gated. Resolves review feedback from Bugbot (r3144569551). * ci(nix): rename lockfile check job for required status check Rename 'check' → 'nix-lockfile-check' so the status check name is unambiguous when added as a required check on main. * fix(ci): harden auto-fix-main against races, loops, and silent failures Address adversarial review findings: 1. Race condition (#1): Job-level concurrency with cancel-in-progress collapses back-to-back pushes; ref: main checkout always gets latest branch state; explicit push target (origin HEAD:main). 2. Loop prevention (#2): File-whitelist check before commit aborts if any file outside nix/{tui,web}.nix was modified, preventing accidental self-triggering. 3. Silent infra failures (#8): nix-lockfile-check now fails explicitly when fix-lockfiles exits without reporting stale status (catches nix setup failures, network errors, script bugs that bypass continue-on-error). 4. Commit traceability (NousResearch#11): Auto-fix commits include source SHA and workflow run URL in the commit body. 5. Explicit push target (NousResearch#12): git push origin HEAD:main instead of bare git push. --------- Co-authored-by: alt-glitch <alt-glitch@users.noreply.github.com>
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
2 participants
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
Integrates NousResearch/design-language into the web dashboard. Vendors the lightweight components (no three.js, gsap, leva, or nanostores) and wires them into every page.
Architecture
The full
@nous/design-languagepackage has heavy peer deps (three.js ~150KB, gsap, leva, nanostores, @react-three/fiber) that are excessive for a dashboard. This PR vendors the lightweight subset intoweb/src/nous/and creates a static Lens system that applies the same color presets without nanostores.Vendored (
web/src/nous/)utils/color.tscolorDodge,colorMixutils/poly.tspolyRef(polymorphic forwardRef)utils/index.tscn(clsx + twMerge)lens.tsLENS_DARK,LENS_LIGHT,applyLens()ui/blend-mode.tsblendColor(),getBlendStyles()ui/grid/Grid,Cell+grid.cssui/typography/Typography,H2,Smallui/hover-bg.tsxHoverBgui/blink.tsxBlinkNot vendored (too heavy)
Overlays (Noise, Glitch, Greys — three.js), Vignette (leva/gsap), full BlendMode (nanostores atoms), SceneCanvas/Shader (@react-three/fiber), BarChart/LineChart (@observablehq/plot). CSS approximations of noise and vignette are kept.
What changed
Color system
--background,--midground,--foregroundlayer system with-baseand-alphacompanions@themetokens derive from Lens vars:--color-background: var(--background-base),--color-foreground: var(--midground-base), etc.--color-midgroundadded for direct midground access in Tailwind classes (bg-midground,text-midground)border-current/20(canonical) instead ofborder-borderHeader
Small(Mondwest font, sm variant, proper tracking)HoverBg(midground highlight, instant-on / 250ms fade-off)--font-rules-compressed,--font-rules-expanded,--font-mondwest)Theme toggle
applyLens(LENS_DARK)/applyLens(LENS_LIGHT)which sets the same CSS custom properties the canonical design-language system uses@themeoverrides (static at build time)Components
blendColor('mg/0.03')(colorDodge against LENS_DARK palette)TypographywithexpandedvariantTypographywithmondwestvariantbg-midground/[0.075],text-midground,opacity: var(--midground-alpha),tracking-[0.2em]— matches canonical Badgebg-midground text-background, canonical inset shadow,arc-borderanimated gradient stroke on hoverGrid/Cellwith auto-column layout via CSS:has()selectorsHoverBgon session row hoverCSS (
index.css)@utilitydirectives:font-compressed,font-expanded,font-mondwest,font-courier(canonical)arc-border: animated gradient stroke keyframes from design-language Buttondither,blink: canonical patterns from design-language globals.css::selectionuses midground bg)grid.cssimported for Grid/Cell auto-column layoutFixes
leading-none+py-1(wasleading-0+py-0.5)Future
@nous/design-language/litesubpath export upstream to avoid vendoring