[FEATURE] Migrating ui to react #1147

nicolastakashi · 2026-01-20T21:07:30Z

This pull request introduces a new React-based UI for the Weaver project, establishing a parallel implementation alongside the existing Svelte UI. It includes extensive documentation, configuration, and planning materials to support the migration, as well as initial scaffolding and setup for the React app. The changes ensure strict parity between the two UIs, clarify the project's structure and conventions, and improve developer experience with updated documentation and tooling.

UI Migration and Documentation:

Added a comprehensive migration plan (plan.md) detailing the step-by-step process for creating a React app (ui-react/) to match the current Svelte UI, including route mapping, component parity, API usage, theming, and deployment strategy.
Introduced a new UI documentation file (docs/ui.md) describing the React UI's tech stack, development workflow, API integration, and deployment requirements.
Added a project knowledge base (AGENTS.md) summarizing the overall architecture, conventions, anti-patterns, and unique styles of the Weaver project, as well as guidance for navigating the codebase and building the UI.

React UI Scaffolding and Configuration:

Added React app scaffolding in ui/, including a Vite-based setup, ESLint configuration (eslint.config.js), and a new .gitignore tailored for Node/React development. [1] [2]
Updated ui/index.html and ui/package.json for React, including new mount point, entry script, and app naming. [1] [2]
Added a README for the React UI with setup instructions and guidance on expanding ESLint rules for production readiness.

Build and Integration Adjustments:

Clarified in build.rs that the build step now targets the React UI, ensuring the correct assets are built and embedded in the Rust server.

These changes lay the groundwork for a smooth migration from Svelte to React, provide clear guidance for developers, and establish best practices for UI development and integration within the Weaver project.

build.rs

codecov · 2026-01-25T19:27:59Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.0%. Comparing base (6e5c98c) to head (1e6e718).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##            main   #1147     +/-   ##
=======================================
- Coverage   80.1%   80.0%   -0.1%     
=======================================
  Files        108     108             
  Lines       8440    8440             
=======================================
- Hits        6763    6760      -3     
- Misses      1677    1680      +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

jerbly · 2026-01-26T20:39:07Z

I checked out and ran your branch... it looks good. The Schema pages need more work though:
Current:

Yours:

jsuereth

Not sure how exactly to review this, but lots of meta comments about architectural decisions here.

From my perspective, I don't care if we use svelte or react. I do care if the code is maintainable and extendable. I think, architecturally, we should clean up some of the decisions in typescript vs. react here, so we have clean logic in typescript, and save REACT for layout and simple callbacks.

I think this means more code moving out of .tsx into .ts file, e.g. making sure api.ts returns typed responses, and adding helper methods to those types.

ui/.gitignore

ui/README.md

ui/src/components/InlineMarkdown.tsx

jsuereth · 2026-01-26T22:33:04Z

ui/src/lib/api.ts

+  return response.json() as Promise<T>;
+}
+
+export interface RegistryStats {


For @jerbly too - Do you think we can auto-generate these from the rust code in some way?

Or at least detect when they fall out of date with each other.

Yes! It's a little bit circular but you could generate the openapi doc from utoipa (like we do to use it in rapidocs). Then use this doc to generate the typescript.

ui/src/lib/api.ts

ui/src/routes/api-docs.tsx

ui/src/routes/attribute.$key.tsx

jsuereth · 2026-01-28T23:59:27Z

ui/vite.config.ts

Should this file name change now they're we're not vite?

Sorry @jsuereth, I'm afraid I didn't understand your question.

Do we need a vite.config.js file if we're not using vite?

Yes, the build system relies on this config file with.

ui/src/lib/api.ts

- Create ui-react/ directory with Vite React+TypeScript template - Configure package.json with name weaver-ui-react and scripts (dev, build, preview) - Configure build output to ui-react/dist directory - Add index.html with React root mount point (#root) - Add main.tsx importing global CSS (index.css) This establishes the foundation for the UI migration from Svelte to React.

Add comprehensive plan for migrating UI from Svelte (ui/) to React (ui-react/) using Vite + React + TypeScript with TanStack Router and Tailwind + DaisyUI.

- Install Tailwind 3.4.19, PostCSS 8.5.6, Autoprefixer 10.4.23, DaisyUI 4.12.24 - Create postcss.config.js with Tailwind + Autoprefixer plugins - Create tailwind.config.js with React content globs and light/dark themes - Port global CSS stability badges from ui/src/app.css Build verified: daisyUI 4.12.24 with 2 themes (light, dark)

- Switch from PostCSS approach to @tailwindcss/vite plugin per official docs - Use @import "tailwindcss" and @plugin "daisyui" in CSS instead of @tailwind directives - Remove postcss.config.js and tailwind.config.js (not needed with v4) - Upgrade DaisyUI to 5.5.14 with @plugin directive Official Vite installation: https://tailwindcss.com/docs/installation/using-vite

- Install @tanstack/react-router and @tanstack/react-router-devtools - Set up route tree structure with all required routes - Create placeholder route components for all pages - Update main.tsx to use RouterProvider - Remove unused App.tsx and App.css files Routes added: - / (index) - /search - /stats - /schema - /api-docs - /attribute/:key - /metric/:name - /span/:type - /event/:name - /entity/:type

Mirror Svelte proxy configuration from ui/vite.config.js

- Create AppLayout component mirroring Svelte drawer layout - Implement responsive drawer with mobile toggle and desktop sidebar - Add navbar with Weaver title and theme toggle (sun/moon icons) - Implement sidebar with Registry, Schema, Developer sections - Theme persistence via localStorage with data-theme attribute

- Create ui-react/src/lib/api.ts with BASE_URL = '/api/v1' - Implement fetchJSON() with same error semantics as Svelte (throw on !ok) - Add TypeScript types: RegistryStats, SearchResult, SearchResponse - Implement all API functions: getRegistryStats, getAttribute, getMetric, getSpan, getEvent, getEntity - Implement unified search() with URLSearchParams for query/type/stability/limit/offset

- Verified ui/ build continues unchanged (outputs to ui/dist/) - Verified ui-react/ build output stays at ui-react/dist/ - Confirmed docs/ui.md documents how to run/build each app separately - Both apps remain independent with separate build directories

…dist) - Update src/serve/ui.rs to embed ui-react/dist instead of ui/dist - Update comment to reflect new build source directory - Update docs/ui.md Production Deployment section - Mark task as complete in plan.md - Cargo check passes

- Update build_ui() function to use ui-react directory - Update comment to clarify React UI build - Update plan.md to mark task as complete - Update AGENTS.md with build process documentation

- All section 17 notes are documented in docs/ui.md and AGENTS.md

TanStack Router uses HTML5 History API by default (createRouter with default options). The server's serve_ui function correctly implements SPA fallback: - Serves exact files when they exist - Falls back to index.html for any non-file paths This enables History API routing to work correctly.

Deleted ui/ directory as all UI functionality has been migrated to ui-react/: - Rust embed (src/serve/ui.rs) now uses ui-react/dist - Build script (build.rs) builds from ui-react/ - No remaining ui/ references in codebase - React UI builds and works correctly This completes the UI migration from Svelte to React.

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

Move duplicated TypeScript interfaces (MetricResponse, SpanResponse, EventResponse, EntityAttribute, AttributeResponse) from individual route components to api.ts for better type sharing and maintainability. All route files now import from the centralized location. Ultraworked with Sisyphus Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

jerbly

I didn't really know how to review this. I checked out your branch and ran it and everything seems to function well.

So I asked Claude with its new Opus 4.6 model to provide a thorough review. Take this with a pinch of salt and don't necessarily implement it all but I do think there are some important fixes we should get in:

Full code review:
https://gist.github.com/jerbly/4c82f5887339eaf8fc9eede73e532eb0

TL;DR: 3 critical security issues (XSS in markdown rendering, no error
boundaries, unsanitized CDN script), significant code duplication across
5 detail routes, and accessibility gaps. See gist for full details and
prioritized recommendations.

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

nicolastakashi · 2026-02-11T22:05:50Z

I didn't really know how to review this. I checked out your branch and ran it and everything seems to function well.

So I asked Claude with its new Opus 4.6 model to provide a thorough review. Take this with a pinch of salt and don't necessarily implement it all but I do think there are some important fixes we should get in:

Full code review:
https://gist.github.com/jerbly/4c82f5887339eaf8fc9eede73e532eb0
TL;DR: 3 critical security issues (XSS in markdown rendering, no error
boundaries, unsanitized CDN script), significant code duplication across
5 detail routes, and accessibility gaps. See gist for full details and
prioritized recommendations.

Thanks again for the detailed review, I’ve implemented the fixes in phased commits so each change is easy to review. (I also asked codex, so I could validate it with a different model and speedup the fixes.)

Phase 1 — Security + crash safety

Commit: d223cdf

Sanitized markdown output before dangerouslySetInnerHTML in:
ui/src/components/Markdown.tsx
ui/src/components/InlineMarkdown.tsx
Added root error boundary:
ui/src/components/ErrorBoundary.tsx
wired in ui/src/routes/__root.tsx
Replaced dynamic CDN script injection for Rapidoc with bundled import:
ui/src/routes/api-docs.tsx

Phase 2 — Search race conditions + debounce

Commit: 673bb78

Added AbortController + stale-response protection in ui/src/routes/search.tsx
Added 250ms debounce on search input
Added optional request signal support in ui/src/lib/api.ts search API

Phase 3 — Accessibility improvements

Commit: 907453e

Added role="alert" to route alert blocks
Added aria-label for icon-only controls and pagination controls
Added skip-to-content link and main anchor target in ui/src/components/AppLayout.tsx
Added table captions in detail views for screen reader context

Phase 4 — Maintainability refactor

Commit: 72ff02b

Extracted shared hooks:
ui/src/hooks/useResourceFetch.ts
ui/src/hooks/useCopyToClipboard.ts
Updated detail routes to use shared hooks:
attribute.$key.tsx, metric.$name.tsx, span.$type.tsx, event.$name.tsx, entity.$type.tsx
Extracted schema type parsing/formatting utilities:
ui/src/lib/schemaType.ts
simplified ui/src/routes/schema.tsx

Phase 5 — Cleanup/follow-ups

Commit: 701daf3

Switched search route to use shared pagination component:
ui/src/components/Pagination.tsx
ui/src/routes/search.tsx
Fixed schema nav active-state logic to use query param (schema) instead of pathname checks:
ui/src/components/AppLayout.tsx

nicolastakashi requested a review from a team as a code owner January 20, 2026 21:07

jsuereth reviewed Jan 20, 2026

View reviewed changes

build.rs Outdated Show resolved Hide resolved

nicolastakashi force-pushed the react/ui branch from dc08128 to 0a97b0d Compare January 23, 2026 13:39

nicolastakashi requested a review from jsuereth January 23, 2026 17:38

jsuereth reviewed Jan 26, 2026

View reviewed changes

jsuereth reviewed Jan 28, 2026

View reviewed changes

jsuereth reviewed Feb 5, 2026

View reviewed changes

ui/src/lib/api.ts Show resolved Hide resolved

nicolastakashi added 21 commits February 6, 2026 15:06

docs: add UI migration plan for Svelte to React

8b0dc39

Add comprehensive plan for migrating UI from Svelte (ui/) to React (ui-react/) using Vite + React + TypeScript with TanStack Router and Tailwind + DaisyUI.

docs: update plan.md for Tailwind CSS v4 upgrade

2c599bd

feat(ui): add dev server proxy for /api to localhost:8080

5cfcf19

Mirror Svelte proxy configuration from ui/vite.config.js

docs: update plan.md for App shell layout completion

cfe444e

docs: update plan.md for API client completion

3afd604

docs: record InlineMarkdown parity details

bd3bd0f

docs: record Markdown parity details

7f92ed3

docs: record UI API endpoints for parity

c2b9413

docs: record Svelte dev proxy behavior

44e73ac

docs: list Svelte routes

843098d

docs: record theme behavior

f55661c

docs: record pagination behavior

b248f1e

docs: record API docs behavior

ac5ad96

docs: record schema URL behavior

130e39c

docs: confirm Svelte build output

07fef83

nicolastakashi and others added 19 commits February 6, 2026 15:06

Cutover: Update build.rs to build ui-react instead of ui

9dbb323

- Update build_ui() function to use ui-react directory - Update comment to clarify React UI build - Update plan.md to mark task as complete - Update AGENTS.md with build process documentation

Cutover: Mark Additional Notes tasks as complete

12df8ec

- All section 17 notes are documented in docs/ui.md and AGENTS.md

[CHORE] adjusting path

be1a47c

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

fix: applying pr comments

2c66e36

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

fix: applying pr comments

4df5357

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

fix: remove implementation-only comments from ui components

457052f

chore: merge ui gitignore into root

0e5d2d9

chore: align ui package metadata

5ae6703

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Remove template README and update registry title

448155e

Remove UI documentation

2a81121

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

chore: changing svg logo

3e80a1a

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

ui: fixing linting issues

fc19c1a

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

ui: removing vite logo

00127ad

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

ui: fixing column format

e2b3134

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

nicolastakashi force-pushed the react/ui branch from e8b40b3 to e2b3134 Compare February 6, 2026 15:25

jerbly reviewed Feb 7, 2026

View reviewed changes

nicolastakashi added 6 commits February 11, 2026 21:23

chore: removing references

be07567

Signed-off-by: Nicolas Takashi <nicolas.takashi@coralogix.com>

ui: harden markdown rendering and app error handling

d223cdf

ui: prevent stale search responses and debounce queries

673bb78

ui: improve accessibility for alerts, controls, and tables

907453e

ui: extract shared detail hooks and schema type helpers

72ff02b

ui: use shared pagination and fix active schema nav state

701daf3

nicolastakashi requested review from jerbly and jsuereth February 11, 2026 22:06

[FEATURE] Migrating ui to react #1147

Are you sure you want to change the base?

[FEATURE] Migrating ui to react #1147

Uh oh!

Conversation

nicolastakashi commented Jan 20, 2026

Uh oh!

Uh oh!

codecov bot commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jerbly commented Jan 26, 2026

Uh oh!

jsuereth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jsuereth Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

jerbly Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jsuereth Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

nicolastakashi Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

jsuereth Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

nicolastakashi Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jerbly left a comment

Choose a reason for hiding this comment

Uh oh!

nicolastakashi commented Feb 11, 2026

Phase 1 — Security + crash safety

Phase 2 — Search race conditions + debounce

Phase 3 — Accessibility improvements

Phase 4 — Maintainability refactor

Phase 5 — Cleanup/follow-ups

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jan 25, 2026 •

edited

Loading