Skip to content

refactor(web): consume DS primitives, remove local component copies - #30698

Merged
teknium1 merged 6 commits into
mainfrom
refactor/use-ds-primitives
May 29, 2026
Merged

refactor(web): consume DS primitives, remove local component copies#30698
teknium1 merged 6 commits into
mainfrom
refactor/use-ds-primitives

Conversation

@austinpickett

@austinpickett austinpickett commented May 23, 2026

Copy link
Copy Markdown
Collaborator

What does this PR do?

Replaces locally-forked UI components and hooks in the web dashboard with their
newly promoted counterparts from @nous-research/ui, reducing duplication and
centralizing shared UI primitives in the design system.

Depends on NousResearch/design-language#23 (merged, published as
@nous-research/ui@0.18.0), which promoted these primitives and consolidated
the dialogs onto Radix UI.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 🔒 Security fix
  • 📝 Documentation update
  • ✅ Tests (adding or improving test coverage)
  • ♻️ Refactor (no behavior change)
  • 🎯 New skill (bundled or hub)

Changes Made

Bumped design-system dependency

  • web/package.json: @nous-research/ui0.18.0 (the version that ships the
    promoted primitives + hooks)

Deleted local components (now in DS)

  • web/src/components/ui/input.tsx
  • web/src/components/ui/label.tsx
  • web/src/components/ui/separator.tsx
  • web/src/components/ui/card.tsx
  • web/src/components/ui/confirm-dialog.tsx
  • web/src/components/Toast.tsx
  • web/src/components/BottomPickSheet.tsx
  • web/src/components/NouiTypography.tsx

Deleted local hooks (now in DS)

  • web/src/hooks/useToast.ts
  • web/src/hooks/useBelowBreakpoint.ts
  • web/src/hooks/useConfirmDelete.ts

Note: useModalBehavior was not promoted to the DS, so the local hook
(web/src/hooks/useModalBehavior.ts) is retained and its call sites continue
to import it locally.

Import updates

All imports updated to use DS deep import paths:

  • @nous-research/ui/ui/components/{input,label,separator,card,confirm-dialog,toast,bottom-sheet}
  • @nous-research/ui/ui/components/typography/index and .../typography/h2
  • @nous-research/ui/hooks/{use-toast,use-below-breakpoint,use-confirm-delete}

How to Test

  1. cd web && npm install
  2. npm run build — type-checks (tsc -b) and builds clean
  3. npm run dev — verify all pages render correctly
  4. Test confirm dialogs (env page delete, config page reset)
  5. Test toast notifications (save config, delete session)
  6. Test theme/language switchers on narrow viewport (bottom sheet)
  7. Test model picker dialog (models page)

Checklist

Code

  • I've read the Contributing Guide
  • My commit messages follow Conventional Commits
  • I searched for existing PRs to make sure this isn't a duplicate
  • My PR contains only changes related to this fix/feature (no unrelated commits)
  • I've tested on my platform: WSL2 Ubuntu

Documentation & Housekeeping

  • I've updated relevant documentation — or N/A
  • I've updated cli-config.yaml.example if I added/changed config keys — or N/A
  • I've updated CONTRIBUTING.md or AGENTS.md if I changed architecture or workflows — or N/A
  • I've considered cross-platform impact — or N/A
  • I've updated tool descriptions/schemas if I changed tool behavior — or N/A

Infographic

web-ds-primitives-30698

Replace locally-forked UI components and hooks with their newly
promoted counterparts from @nous-research/ui:

Deleted local components (now in DS):
- components/ui/input.tsx, label.tsx, separator.tsx, card.tsx,
  confirm-dialog.tsx
- components/Toast.tsx, BottomPickSheet.tsx, NouiTypography.tsx
- hooks/useToast.ts, useModalBehavior.ts, useBelowBreakpoint.ts,
  useConfirmDelete.ts

Import updates across 25 files to use DS deep imports:
- @nous-research/ui/ui/components/{input,label,separator,card,
  confirm-dialog,toast,bottom-sheet}
- @nous-research/ui/ui/components/typography (replaces NouiTypography)
- @nous-research/ui/hooks/{use-toast,use-modal-behavior,
  use-below-breakpoint,use-confirm-delete}

Requires design-language >= feat/promote-hermes-web-primitives.

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

github-actions Bot commented May 23, 2026

Copy link
Copy Markdown
Contributor

🔎 Lint report: refactor/use-ds-primitives vs origin/main

ruff

Total: 0 on HEAD, 0 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 0 pre-existing issues carried over.

ty (type checker)

Total: 9577 on HEAD, 9577 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 5045 pre-existing issues carried over.

Diagnostics are surfaced as warnings — this check never fails the build.

@alt-glitch alt-glitch added type/refactor Code restructuring, no behavior change javascript P3 Low — cosmetic, nice to have labels May 23, 2026
@joechaotic

Copy link
Copy Markdown

I could not push directly to this branch from this checkout, so I opened a rebased replacement/fixup PR for the Nix failure here: #30749.\n\nRoot cause: the web refactor imports @nous-research/ui DS primitive subpaths that are not available from the locked package version in Nix. Fix updates @nous-research/ui/package-lock and keeps useModalBehavior local because that hook is not exported by the package. Verified with npm run build.

…tives

Co-authored-by: Cursor <cursoragent@cursor.com>

# Conflicts:
#	web/src/components/BottomPickSheet.tsx
#	web/src/components/SidebarFooter.tsx
#	web/src/components/ui/card.tsx
#	web/src/components/ui/confirm-dialog.tsx
#	web/src/pages/ChatPage.tsx
@austinpickett
austinpickett requested a review from a team May 28, 2026 18:21
@austinpickett

Copy link
Copy Markdown
Collaborator Author

bugbot run

@cursor

cursor Bot commented May 28, 2026

Copy link
Copy Markdown

Skipping Bugbot: Unable to authenticate your request. Please make sure Bugbot is properly installed and configured for this repository.

The web/package-lock.json changed when bumping @nous-research/ui to 0.18.0,
so the fetchNpmDeps fixed-output hash in nix/web.nix was stale and the nix
build failed. Update it to the hash prefetch-npm-deps computes for the new
lockfile.

Co-authored-by: Cursor <cursoragent@cursor.com>
@austinpickett

austinpickett commented May 28, 2026

Copy link
Copy Markdown
Collaborator Author

Thanks @joechaotic — I've now applied that same fix directly on this branch, so #30749 should be redundant:

  • Merged latest main and resolved conflicts (kept the DS-primitive imports).
  • Bumped @nous-research/ui0.18.0 (the version that ships the promoted primitive subpaths + hooks).
  • Kept useModalBehavior local since it isn't exported by the package; reverted those 3 import sites to @/hooks/useModalBehavior.
  • Pointed Typography imports at .../typography/index (the folder index isn't resolvable via the bare .../typography subpath).
  • Updated the stale nix/web.nix fetchNpmDeps hash for the new lockfile.

All CI is green now (both nix jobs, all 6 test shards, e2e, CodeQL, ruff). The only remaining blocker is the required team review that triggers because this PR touches package.json/package-lock.json.

Suggest we close #30749 in favor of this one

austinpickett and others added 3 commits May 28, 2026 16:20
Picks up the deferred GPU-tier detection fix (design-language) that
stops the synchronous WebGL probe from blocking first paint, which was
causing a boot-time flash in the dashboard backdrop.

nix/web.nix npmDepsHash is a placeholder here and is corrected in the
follow-up commit using the hash reported by the Nix CI job.

Co-authored-by: Cursor <cursoragent@cursor.com>
The web/package-lock.json changed when bumping @nous-research/ui to
0.18.2, so the fetchNpmDeps fixed-output hash in nix/web.nix was stale.
Update it to the hash prefetch-npm-deps computes for the new lockfile.

Co-authored-by: Cursor <cursoragent@cursor.com>
In loopback mode the dashboard's identity probe (/api/auth/me) returns
401 by design — AuthWidget swallows it and renders nothing. But the
probe routed through fetchJSON, whose loopback 401 handler treats a 401
as a rotated session token and full-page-reloads to pick up a fresh one.
That reload is guarded by a one-shot sessionStorage flag which every
*successful* request clears, so with auth/me reliably 401ing and the
other dashboard calls (status/config/sessions) reliably succeeding, the
guard never sticks and the page reload-loops indefinitely (the "boot
flash").

Add an allowUnauthorized option to fetchJSON that skips only the loopback
stale-token reload (the 401 still throws so AuthWidget can catch it, and
the gated-mode login_url envelope redirect is unaffected), and use it for
getAuthMe.

Co-authored-by: Cursor <cursoragent@cursor.com>
@teknium1
teknium1 merged commit f3acdd9 into main May 29, 2026
19 checks passed
@teknium1
teknium1 deleted the refactor/use-ds-primitives branch May 29, 2026 00:29
gweeteve pushed a commit to gweeteve/hermes-agent that referenced this pull request Jun 2, 2026
…ds-primitives

refactor(web): consume DS primitives, remove local component copies
alt-glitch pushed a commit that referenced this pull request Jun 14, 2026
refactor(web): consume DS primitives, remove local component copies
T02200059 pushed a commit to T02200059/hermes-agent that referenced this pull request Jun 18, 2026
…ds-primitives

refactor(web): consume DS primitives, remove local component copies
waefrebeorn pushed a commit to waefrebeorn/slermes that referenced this pull request Jul 2, 2026
…ds-primitives

refactor(web): consume DS primitives, remove local component copies
santhreal pushed a commit to santhreal/hermes-agent that referenced this pull request Jul 13, 2026
…ds-primitives

refactor(web): consume DS primitives, remove local component copies
Gravezzz pushed a commit to Gravezzz/hermes-agent that referenced this pull request Jul 21, 2026
…ds-primitives

refactor(web): consume DS primitives, remove local component copies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P3 Low — cosmetic, nice to have type/refactor Code restructuring, no behavior change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants