Skip to content

Commit 2fd688b

Browse files
aksOpsclaude
aksOps
and
claude
committed
refactor(ui): migrate Mantine UI v8 to @ossrandom/design-system v0.3.0
Replace the Mantine dependency with the RandomCodeSpace design system per project board direction. Per-component scope is small — the UI's only direct Mantine surface is main.tsx (provider) plus two MCP components (Modal/Tabs). Changes: - main.tsx — MantineProvider to ThemeProvider; ToastRegion mounted at root - ToolCallModal.tsx — Mantine Modal to DS Modal. DS Modal API is stricter (no padding=0, no classNames, no styles, no custom width) so the hand-rolled header is collapsed into title/description props and the modal sizes to lg instead of min(880px, 100vw-2rem). - RPCPopup.tsx — Mantine Modal+Tabs to DS Modal+Tabs. Tabs API is items rather than children, so the methods array maps to items={[{key,label}]}. - @mantine/core and @mantine/hooks removed from package.json - @ossrandom/design-system@0.3.0 added (public npm; no GHP/PAT setup) - internal/ui/dist regenerated. Net bundle is -598 / +123 lines because Mantine CSS is gone; DS ships variable woff2 fonts (Bricolage Grotesque, Plus Jakarta Sans, Geist Mono) as separate ~30-130KB assets that load on demand. - CLAUDE.md project rules updated: NO Tailwind CSS, NO Mantine — use @ossrandom/design-system exclusively for UI components and tokens. Raw CSS only for layout escape hatches. Out of scope (deliberate, follow-up PRs): - Strip ui/src/styles/tokens.css and slim global.css to layout-only. - Migrate ServiceMap.tsx / EChart.tsx from echarts to DS charts subpath. - Replace inline style={{display:flex…}} with DS Space/Grid/Card. Drive-by: pin react-window to ^1.8.10 (was ^2.2.7). The v2 API is incompatible with current LogsPage.tsx / TracesPage.tsx imports (VariableSizeList, FixedSizeList, ListChildComponentProps no longer exported), and the build was broken on main even before this PR. The v2 migration is its own concern; pinning back to v1 here keeps this PR strictly about the DS swap and gets the build green. Verification: - npm run build: clean - npm run test: 32/32 pass - Live: HTTP_PORT=37778 ./otelcontext, GET / returns the DS-styled bundle (fonts load on demand, /assets/index-*.js + /assets/index-*.css served). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent f3c6131 commit 2fd688b

14 files changed

Lines changed: 172 additions & 598 deletions

‎CLAUDE.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
OtelContext is a self-hosted OTLP observability platform. Single Go binary with embedded React frontend.
66
- **Backend:** Go 1.25, native `net/http` (no frameworks), GORM ORM, gRPC + HTTP for OTLP ingestion
7-
- **Frontend:** React 19 + TypeScript + Mantine UI v8 + ECharts + ReactFlow
7+
- **Frontend:** React 19 + TypeScript + `@ossrandom/design-system` + ECharts + ReactFlow
88
- **Ports:** gRPC `:4317` (OTLP), HTTP `:8080` (API + HTTP OTLP + WebSocket + UI)
99

1010
## Strict Rules
1111

1212
- NO Express.js/Gin/Echo — use native Go `net/http`
13-
- NO Tailwind CSS — use Mantine UI v8 exclusively
13+
- NO Tailwind CSS, NO Mantine — use `@ossrandom/design-system` exclusively for UI components and tokens. Raw CSS only for layout escape hatches (root height, scrollbar overrides, virtualised list containers); no auxiliary visual styling.
1414
- Single-service architecture (no microservices split)
1515
- All internal DBs must be **embedded** (no external processes)
1616
- Relational DB (SQLite/MySQL/PostgreSQL/MSSQL) is the **single source of truth**

‎internal/ui/dist/assets/BricolageGrotesque-Variable-C5Lc8Qmc.woff2‎

128 KB
Binary file not shown.

‎internal/ui/dist/assets/GeistMono-Variable-BNLlm6Cd.woff2‎

69.3 KB
Binary file not shown.

‎internal/ui/dist/assets/PlusJakartaSans-Variable-eXO_dkmS.woff2‎

26.7 KB
Binary file not shown.

‎internal/ui/dist/assets/index-Bl3ZlcbC.js‎

Lines changed: 0 additions & 247 deletions
This file was deleted.

‎internal/ui/dist/assets/index-C9DjciJ7.js‎

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/ui/dist/assets/index-DFl6oDLP.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎internal/ui/dist/assets/index-Dl9cVCAV.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/ui/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>OtelContext</title>
7-
<script type="module" crossorigin src="/assets/index-Bl3ZlcbC.js"></script>
8-
<link rel="stylesheet" crossorigin href="/assets/index-DFl6oDLP.css">
7+
<script type="module" crossorigin src="/assets/index-C9DjciJ7.js"></script>
8+
<link rel="stylesheet" crossorigin href="/assets/index-Dl9cVCAV.css">
99
</head>
1010
<body>
1111
<div id="root"></div>

0 commit comments

Comments
 (0)