Skip to content

♻️ refactor: migrate modals to @lobehub/ui/base-ui (LOBE-9711 + eval batch)#15416

Merged
Innei merged 5 commits into
canaryfrom
refactor/migrate-modals-base-ui-eval-batch
Jun 2, 2026
Merged

♻️ refactor: migrate modals to @lobehub/ui/base-ui (LOBE-9711 + eval batch)#15416
Innei merged 5 commits into
canaryfrom
refactor/migrate-modals-base-ui-eval-batch

Conversation

@Innei

@Innei Innei commented Jun 2, 2026

Copy link
Copy Markdown
Member

💻 Change Type

  • ♻️ refactor

🔗 Related Issue

Fixes LOBE-9711
Part of LOBE-9710, LOBE-9713 (eval/benchmark sub-batch of [3] heavy)

🔀 Description of Change

Two related migrations to the @lobehub/ui/base-ui imperative modal API, bundled together for review economy.

Part A — LOBE-9711 (5 root createModal sites)

  • src/features/LibraryModal/AddFilesToKnowledgeBase/index.tsx
  • src/features/LibraryModal/CreateNew/index.tsx
  • src/features/Electron/AuthRequiredModal/index.tsx
  • src/features/SkillStore/index.tsx
  • src/features/SkillStore/SkillDetail/index.tsx

Changes per file:

  • Switch createModal/useModalContext/ModalInstance import from @lobehub/ui to @lobehub/ui/base-ui
  • childrencontent (base-ui slot)
  • afterCloseonOpenChangeComplete: (open) => !open && afterClose()
  • styles.bodystyles.content
  • Drop allowFullscreen, destroyOnHidden, getContainer, centered, focusTriggerAfterClose (base-ui handles these or they are defaults)

Caveat for AuthRequiredModal: the base-ui imperative ModalInstance.update only accepts Partial<BaseModalProps>, which does not include closable or keyboard. The previous dynamic lock during sign-in (closable: !isSigningIn, keyboard: !isSigningIn, maskClosable: !isSigningIn) is reduced to maskClosable only — Esc and the X button can still close the modal during sign-in. The useWatchBroadcast('authorizationSuccessful'/'authorizationFailed') listeners stay; if a user closes the modal mid-flow, the underlying OAuth promise resolves into an unmounted component, which is the same race as before (no regression).

Part B — eval/benchmark group from LOBE-9713 [3] heavy (declarative → imperative factory)

12 declarative <Modal open … /> sites converted to createXxxModal() factories. Each modal is split into:

  • <ModalName>/index.tsx — exports createXxxModal(props): ModalInstance
  • <ModalName>/Content.tsx — exports the body component using useModalContext().close and its own footer (Cancel/OK Buttons)

Modals:

  • eval/features/CreateBenchmarkModal
  • eval/features/BenchmarkEditModal
  • eval/features/DatasetCreateModal
  • eval/features/DatasetEditModal
  • eval/features/DatasetImportModal (two-step wizard preserved; footer only renders on step 2)
  • eval/features/TestCaseCreateModal
  • eval/features/TestCaseEditModal
  • eval/bench/[benchmarkId]/features/RunCreateModal (preserves Space.Compact + Dropdown split button in footer)
  • eval/bench/[benchmarkId]/features/RunEditModal
  • eval/bench/[benchmarkId]/features/TestCasePreviewModal (new — extracted from inline <Modal> in TestCasesTab/index.tsx)
  • eval/bench/[benchmarkId]/runs/[runId]/features/BatchResumeModal

Callers updated to drop useState/<Modal> and call the factory on click:

  • eval/index.tsx
  • eval/bench/[benchmarkId]/datasets/[datasetId]/index.tsx
  • eval/bench/[benchmarkId]/features/BenchmarkHeader/index.tsx
  • eval/bench/[benchmarkId]/features/DatasetsTab/index.tsx
  • eval/bench/[benchmarkId]/features/RunsTab/index.tsx
  • eval/bench/[benchmarkId]/features/TestCasesTab/index.tsx
  • eval/bench/[benchmarkId]/runs/[runId]/index.tsx
  • eval/bench/[benchmarkId]/runs/[runId]/features/RunHeader/index.tsx

Dead code: eval/bench/[benchmarkId]/features/DatasetsTab/TestCasePreviewModal.tsx had no imports anywhere — deleted.

Net diff: ~2400 lines removed, ~2400 added; mostly relocation of form bodies into Content.tsx plus footer extraction.

🧪 How to Test

  • Tested locally (lint pass on all touched files)
  • Added/updated tests
  • No tests needed (pure refactor; component-level Vitest coverage doesn't exist for these modal files)

Smoke test in browser:

  1. Library: open AddFilesToKnowledgeBase and CreateNew (knowledge base flow) — title/content/close/maskClosable behave as before.
  2. Skill Store: open createSkillStoreModal(); open a skill detail; verify all 4 SkillDetail variants (Builtin, BuiltinAgent, Klavis, Lobehub).
  3. Electron: trigger an authorizationRequired broadcast; verify the modal shows; click Sign in, observe maskClosable: false while signing in.
  4. Eval: from /eval, create a benchmark; from a benchmark page, edit/delete dataset/test case/run; verify the two-step DatasetImportModal flow; preview a test case via the eye icon; trigger a BatchResume on a finished run.

📝 Additional Information

  • BenchmarkHeader has a pre-existing unused runCount prop (eslint warning, unrelated to this PR).
  • DatasetsTab keeps an unused onImport prop in its interface — its caller (bench/[benchmarkId]/index.tsx) passes onImport={() => {}}. Left as-is to keep the diff focused; can be removed in a follow-up.
  • The [4] antd Modal.confirm cleanup batch from LOBE-9710 is not part of this PR.

Move 5 root createModal sites (LibraryModal/AddFilesToKnowledgeBase,
LibraryModal/CreateNew, Electron/AuthRequiredModal, SkillStore,
SkillStore/SkillDetail) to base-ui imperative createModal. Drop
allowFullscreen/destroyOnHidden/getContainer (base-ui handles them),
rename children→content, afterClose→onOpenChangeComplete, styles.body
→styles.content.

For AuthRequiredModal, base-ui imperative ModalInstance.update only
accepts Partial<BaseModalProps>, so the previous closable/keyboard
dynamic lock is reduced to maskClosable only — Esc/X close cannot be
blocked during sign-in.

Convert 11 declarative <Modal open … /> sites under eval/bench to
imperative createXxxModal factories, splitting each into Content.tsx
(body) + index.tsx (factory). Update callers in eval/index.tsx,
bench/[id]/{datasets/[id],features/{BenchmarkHeader,DatasetsTab,
RunsTab,TestCasesTab},runs/[id]/{index,features/RunHeader}} to call
factories on click instead of toggling local open state.

Delete unused TestCasePreviewModal.tsx (dead code); extract the
inline preview Modal from TestCasesTab into a new
TestCasePreviewModal feature folder.
@vercel

vercel Bot commented Jun 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment Jun 2, 2026 3:05pm

Request Review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @Innei, your pull request is larger than the review limit of 150000 diff characters

@dosubot dosubot Bot added size:XXL This PR changes 1000+ lines, ignoring generated files. javascript Pull requests that update Javascript code labels Jun 2, 2026

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4c29cc805b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

closable: false,
footer: null,
keyboard: false,
maskClosable: false,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve non-dismissible auth modal

When the Electron auth-required dialog is shown for an unauthenticated user, @lobehub/ui/base-ui modals still default to closable: true and allow Escape unless keyboard: false is set, so keeping only maskClosable: false lets the user dismiss the required-login prompt via the close button or Esc. The same omission in the signing-in update means the dialog remains dismissible while sign-in is in progress; carry over closable: false/keyboard: false initially and update them with maskClosable.

Useful? React with 👍 / 👎.

@codecov

codecov Bot commented Jun 2, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 23.07692% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.03%. Comparing base (8dee729) to head (cccf737).
⚠️ Report is 1 commits behind head on canary.

Additional details and impacted files
@@             Coverage Diff             @@
##           canary   #15416       +/-   ##
===========================================
- Coverage   89.74%   71.03%   -18.71%     
===========================================
  Files         862     3211     +2349     
  Lines      105577   321072   +215495     
  Branches    10216    28283    +18067     
===========================================
+ Hits        94746   228080   +133334     
- Misses      10656    92817    +82161     
  Partials      175      175               
Flag Coverage Δ
app 61.87% <23.07%> (?)
database 92.46% <ø> (ø)
packages/agent-runtime 80.48% <ø> (ø)
packages/builtin-tool-lobe-agent 18.52% <ø> (ø)
packages/context-engine 84.17% <ø> (ø)
packages/conversation-flow 91.29% <ø> (ø)
packages/file-loaders 87.89% <ø> (ø)
packages/memory-user-memory 74.99% <ø> (ø)
packages/model-bank 99.99% <ø> (ø)
packages/model-runtime 84.72% <ø> (ø)
packages/prompts 72.49% <ø> (ø)
packages/python-interpreter 92.90% <ø> (ø)
packages/ssrf-safe-fetch 0.00% <ø> (ø)
packages/types 35.36% <ø> (ø)
packages/utils 88.69% <ø> (ø)
packages/web-crawler 88.08% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components Coverage Δ
Store 68.43% <ø> (∅)
Services 54.60% <ø> (∅)
Server 72.32% <ø> (∅)
Libs 57.01% <ø> (∅)
Utils 81.44% <ø> (-18.56%) ⬇️
🚀 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.

…padding overrides

Per @Innei feedback on PR #15416:

- base-ui's ModalContent already has 12px/16px default padding; remove
  manual paddingBlock/paddingInline wrappers in Content components and
  drop styles.content.padding=0 overrides in factories.
- Move OK/Cancel (and other actions) into the createModal({footer}) slot
  using base-ui's ModalFooter atom for proper flex/justify-end styling.
- Form submit wired via antd Form's name + Button form=name htmlType=submit
  so the footer button outside Form can submit it. Shared loading state
  flows from Content to Footer via a per-modal closure that calls
  instance.update({footer: ...}).

New helper src/utils/createFormModal.tsx encapsulates the common pattern
for plain form modals (Cancel + Submit). Custom factories (RunCreate
split-button, BatchResume with selection counter, DatasetImport step-aware
footer, AuthRequired sign-in flow) use inline closure plumbing.

Touched files: 11 modal pairs (Content + Footer + index) + 1 helper.
`useAddFilesToKnowledgeBaseModal` exported from
`src/features/LibraryModal/AddFilesToKnowledgeBase/` had no callers in
the main codebase — only its own test referenced it. Remove the entire
folder (index, SelectForm, index.test) and drop the re-export from
`LibraryModal/index.ts`.
base-ui ModalContent has 12px/16px default padding, which insets the
SkillStore scroll viewport and makes the scrollbar look blocked. Pull
the body wrapper out with negative margins (marginInline: -16,
marginBlockEnd: -12) so the inner scroll container sits flush with the
modal edge. Grid items inside the scroll keep their own 16px padding.
base-ui's ModalInstance.update is typed as Partial<BaseModalProps>,
which excludes the `footer` and `content` fields that only
ImperativeModalProps carries. At runtime the imperative updateModal
spreads any shape, so the cast is sound — narrow it at each call site.

Also delete src/routes/(main)/eval/bench/[benchmarkId]/features/
DatasetRunCreateModal/, an orphaned re-export of RunCreateModal's
removed default export.
@Innei Innei merged commit 13ce3c5 into canary Jun 2, 2026
35 checks passed
@Innei Innei deleted the refactor/migrate-modals-base-ui-eval-batch branch June 2, 2026 15:17
@arvinxx arvinxx mentioned this pull request Jun 3, 2026
arvinxx added a commit that referenced this pull request Jun 4, 2026
# 🚀 LobeHub Release (20260604)

**Release Date:** June 4, 2026  
**Since v2.2.1:** 88 merged PRs · 11 contributors

> This week brings Execution Devices out of the lab — run agents and
Claude Code on any configured local or remote machine — alongside Claude
Opus 4.8, token-usage analytics, and Page sharing.

---

## ✨ Highlights

- **Execution Devices** — Pick where an agent runs. Desktop and CLI
devices auto-register with a stable machine ID, route through the
gateway by channel, and surface a device switcher in the chat input. Run
remote Claude Code on a configured device, with a recent-directory
picker you can drag to reorder. (#15300, #15315, #15322, #15343, #15351,
#15371)
- **Claude Opus 4.8** — Day-one support for Anthropic's latest model.
(#15314)
- **Token-usage analytics** — A new token-usage mode on the activity
heatmap, backed by a denormalized topic usage/cost rollup so totals stay
accurate without recomputing from messages. (#15365, #15417, #15425)
- **Page sharing** — Share a Page through a dedicated document share
flow, plus new Workspace and Agent share tables. (#15309, #15439)
- **Self-iteration agents** — Agent Signal's execAgent migration lands a
server-runtime bridge, async memory writer, and a registered
self-iteration tool package, with a CLI trigger command for testing.
(#15360, #15364, #15392)
- **Knowledge search** — BM25 search now extends to file-backed
documents, and the portal ships an editable CodeMirror viewer for local
files with document highlighting. (#15247, #15298)

---

## 🏗️ Core Agent & Architecture

### Agent Signal & Runtime

- **execAgent migration** — Server-runtime bridge, completion
projection, async memory writer, and removal of the legacy
`executeSelfIteration` path. (#15392)
- Registered the self-iteration builtin tool package and restored the
three mode-specific self-iteration agent slugs. (#15202, #15364)
- Added a CLI trigger command with a golden-snapshot fixture for Agent
Signal. (#15360)
- **Skill priority** — Agent Builder now emits a skill-priority
instruction with matching server runtime. (#15409)
- Retry empty LLM completions instead of silently finishing the turn.
(#15355)
- Classify topic/agent/session foreign-key violations as
`ConversationParentMissing` for clearer recovery. (#15408)
- Persist canonical nested usage/performance on assistant messages, and
re-link orphan tool messages at the raw bucket write boundary. (#15359,
#15438)
- Guard `createAgent` against LLM double-encoded array fields. (#15381)

---

## 🖥️ Execution Devices & Gateway

- Auto-register desktop and CLI devices with a stable machine ID, and
add the `@lobechat/device-identity` package. (#15300, #15321)
- New Devices settings page behind the Execution Device Switcher lab,
with a device switcher shown for all agents in the chat input. (#15315,
#15371)
- `connectionId` + channel routing across the gateway client and device
list; preset the local device on the first LLM request for the 本机
target. (#15322, #15435)
- Run remote Claude Code on a configured device, with drag-to-reorder
recent-directory management and client renders for device tool results.
(#15343, #15351, #15437)
- Preserve content and state across gateway tool calls, and prevent
duplicate streaming from stale reconnects. (#15114, #15354)

---

## 🖥️ CLI & Desktop

- Preserve content/state for connect local file and shell tools; render
the `runCommand` tool result card. (#15441, #15442)
- New `lh topic view` command; CLI now auto-registers its device on
login, matching desktop. (#15340, #15377)
- Resolve CLI tools from the shell `PATH`, and clarify local command
session handling. (#15368, #15389)
- Relocate visual-ref helpers to `@lobechat/const` to fix a renderer
crash; upload `.blockmap` files to S3 for differential updates. (#15326,
#15369)
- Fix a market OAuth expiry that triggered the wrong re-login modal, and
kill dev child processes on parent shutdown. (#15246, #15290)

---

## 🗂️ Pages, Library & Knowledge

- Document share flow with business slot stubs, plus Workspace and Agent
share tables. (#15309, #15439)
- Export Agent profiles as Markdown, preserving an empty agent prompt on
export. (#15312, #15316)
- Editable CodeMirror viewer for local files with document highlighting;
BM25 search extended to file-backed documents. (#15247, #15298)
- Default new Agent-doc files to `.md` and preserve IME composition;
refresh folder data on slug switch and dedupe breadcrumb fetches.
(#15335, #15427)

---

## 💬 Chat & User Experience

- Group-by-status mode for the Topic sidebar; dropped the legacy
session→agentId compatibility path from Topic queries. (#15366, #15378)
- Restore editor focus after the file picker closes, and close the skill
dropdown before navigating to settings. (#15391, #15394)
- Strip markdown tokens from fallback Topic titles; keep an open
ActionBar popup when hovering another message. (#15303, #15372)
- Stabilize home starter loading and stop transliterating model names in
the home starter; show artifact source while streaming. (#15310, #15324,
#15386)
- Group the sidebar spacer with recents and agents. (#15373)

---

## 📊 Analytics, Tasks & Notifications

- Token-usage mode on the activity heatmap, backed by a denormalized
topic usage/cost rollup. (#15365, #15417, #15425)
- Push: new `PushChannel`, receipt cron, and `pushToken` tRPC API.
(#15233)
- Tasks now support file and image attachments. (#15141)

---

## 🧩 Models & Providers

- Support Claude Opus 4.8 and configurable model routing with starters.
(#15314, #15384)
- MiniMax M3: new model entry and an Anthropic video runtime. (#15380,
#15403)
- Add `intern-s2-preview` with `thinking_mode`, and `step-3.7-flash`
support. (#15308, #15317)
- Block disabling the official provider; fix default provider setup in
business mode. (#15379, #15382)

---

## 🎨 UI & Modals

- Migrate modals to `@lobehub/ui/base-ui` (LOBE-9711 + eval batch),
including the create-custom-model and feedback/changelog modals.
(#15401, #15416)
- Restructure confirmModal title and content across deletion flows;
polish the service-model form and migrate its Switch to base-ui.
(#15426, #15440)
- Wrap the BlueBubbles bridge config into a connection card; update
`@lobehub/ui` to v5.15.5. (#15325, #15342)

---

## 🔒 Reliability

- Replace hardcoded `session_context` values with template variables in
credentials. (#15352)
- Point `CHANGELOG_URL` to `/changelog`. (#15428)

---

## 👥 Contributors

Huge thanks to **11 contributors** who shipped **88 merged PRs** this
cycle.

@hezhijie0327 · @qybaihe · @sxjeru · @arvinxx · @Innei · @tjx666 ·
@lijian · @sudongyuer · @cy948 · @rivertwilight · @AmAzing129

Plus @lobehubbot and renovate[bot] for maintenance.

---

**Full Changelog**: v2.2.1...release/weekly-20260604
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

javascript Pull requests that update Javascript code size:XXL This PR changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant