Skip to content

feat: port desktop dashboard from Tauri+Preact to CLI-hosted React Web app#1418

Merged
esengine merged 9 commits into
esengine:mainfrom
Bernardxu123:feat/web-dashboard-port
May 23, 2026
Merged

feat: port desktop dashboard from Tauri+Preact to CLI-hosted React Web app#1418
esengine merged 9 commits into
esengine:mainfrom
Bernardxu123:feat/web-dashboard-port

Conversation

@Bernardxu123

@Bernardxu123 Bernardxu123 commented May 20, 2026

Copy link
Copy Markdown
Collaborator

Summary

Migrate the desktop Tauri + React UI to a CLI-hosted Web dashboard, replacing the legacy Preact UI and laying groundwork for mobile compatibility.

What Changed

Build Chain

  • Independent Vite + React 19 dashboard build chain (dashboard/)
  • Removed old tsup dashboard entry — npm run build now runs build:dashboard first, then tsup, then vendor CSS copy
  • Dashboard outputs app.js / app.css via Vite instead of tsup bundling

UI Migration

  • Replaced 38 legacy Preact panel files (dashboard/src/panels/*) with React components
  • New dashboard/src/App.tsx — main app with multi-tab, theme, mobile-ready state
  • New dashboard/src/lib/tauri-bridge.ts — Mock/Server dual-mode bridge layer
  • New dashboard/src/ui/* — sidebar, composer, thread, cards, settings, about, statusbar
  • New dashboard/src/protocol.tsIncomingEvent / OutgoingCommand type definitions
  • New dashboard/src/styles.css — Premium desktop styles + mobile responsive CSS

Backend Fixes

  • editMode supportPOST /api/settings now handles review | auto | yolo, writes config, calls runtime setEditMode for immediate effect
  • User message deduplication — In busy state, if the last user message text matches SSE echo, the echo is ignored (prevents duplicate display)
  • assistant_final event — Now carries usage and costUsd fields (prompt/completion/cache tokens)
  • Binary asset servingserveAsset() now distinguishes text vs binary (woff/woff2/ttf/png served as Buffer, not UTF-8 string)
  • Session REST routingsession_list, session_delete, new_chat aligned with actual backend endpoints

Cleanup: Remove Desktop Updater from Web Dashboard

The web dashboard (served by the CLI) previously carried dead code from the Tauri desktop app:

  • @tauri-apps/plugin-updater mock in tauri-bridge.ts that always returned null
  • UpdateBanner component, pendingUpdate state, check() call, installUpdate callback in App.tsx
  • checkForUpdates / CheckStatus in about.tsx
  • Path/resolve aliases in tsconfig.json / vite.config.ts

Why this is safe: The CLI's update mechanism (reasonix update) is a completely independent npm-based system (src/cli/commands/update.ts). It shares zero code, zero imports, and zero dependencies with the dashboard frontend. The "updater" references in chat.tsx and App.tsx are MCP progress callbacks, not software update logic. Desktop Tauri app (desktop/) retains its native updater — only the web dashboard was cleaned.

Tests

  • Added tests/dashboard-smoke.test.ts (10 cases) — build artifact verification, token replacement, server resource loading
  • Added editMode regression tests (persist, apply, reject invalid values)
  • Removed 8 obsolete tests referencing deleted Preact modules

Verification

Command Result
npm run build ✅ Pass
npm run typecheck ✅ Pass (both projects)
npm run lint ✅ Pass (1 pre-existing warning)
npm run test ✅ Pass (229 files / 3271 tests)

Known Limitations / Future Optimizations

These items are not blocking this PR and will be addressed in follow-up work:

Item Priority Notes
SSE reconnection Medium Currently fixed 3s retry; exponential backoff + max attempts + token expiry detection deferred
settings_save broadcast Medium Does not merge overview for complete $settings broadcast; follow-up will add emitServerSettings merge
session_load routing Medium Still uses POST /api/sessions/load; will migrate to switch + GET pattern
app.js bundle size (~900KB) Low Code-splitting deferred until desktop Web is stable
Mobile layout optimization Low Deferred until desktop PR is merged
tauri-bridge.ts protocol abstraction Low RPC-to-REST mapping currently in frontend; shared protocol layer deferred
SSE event conversion in backend Low sseToIncoming() adapter currently in frontend; moving closer to backend deferred

Files Changed

  • 93 files changed
  • 24,303 insertions, 12,335 deletions
  • 38 Preact files deleted, 8 obsolete tests deleted
  • 17 new React dashboard files added
  • 10 core files modified

@Bernardxu123 Bernardxu123 force-pushed the feat/web-dashboard-port branch 2 times, most recently from 9af5721 to 76c3e9b Compare May 20, 2026 12:09
@esengine

Copy link
Copy Markdown
Owner

Thanks for the migration work, @Bernardxu123 — I want to land this. The backend fixes alone are worth taking: editMode actually persisting via POST /api/settings, assistant_final carrying usage + costUsd, the binary-vs-text split in serveAsset(), the user-message dedup against busy-state SSE echo, and the session REST routing alignment. Those are five real bugs each. Bundling them with the React migration means I lose bisect granularity if a regression hits, but the dedup and binary-asset fixes have been on my mind already, so I'm taking the tradeoff.

One thing I need before I merge — please remove the 计划/ directory. Six Chinese-language work notes (~1167 lines: Web移植PR审查清单.md, Web移植技术总结.md, implementation_plan.md, task.md, 桌面端Web移植进展与后续计划.md, 移植工作中总结.md) shouldn't enter the repo. That content belongs in the PR description (it's already largely there) or in a personal scratch folder, not as committed source. The project rule from CLAUDE.md is "Don't create new *.md documentation files unless explicitly asked", and committing migration notes sets a precedent the next contributor will copy. One command:

git rm -r 计划/
git commit --amend --no-edit
git push --force-with-lease

That's the only blocking change. Everything else below I'm tracking as my own follow-up issues after merge — not asking you to do it in this PR.

Tracked-for-follow-up (mine, not yours):

  • dashboard/src/App.tsx is 2990 lines and dashboard/src/ui/settings.tsx is 1072 — both over the 800-line ceiling in CLAUDE.md. I'll split them by surface (composer / thread / sidebar / settings sections) in a follow-up. Don't pre-empt that.
  • Bundle size — your "Known Limitations" table calls out app.js ~900KB as Low priority. I'm bumping that to a tracked issue with a CI budget check, target ≤ 400KB gzip. Tree-shaking + code-split per tab is probably 60% of the win.
  • The "Known Limitations" medium-priority items (SSE reconnection backoff, settings broadcast merge, session_load GET migration) — opening one tracking issue covering all three.
  • dashboard/src/lib/tauri-bridge.ts — name is misleading for a web-only adapter. Rename to protocol-bridge.ts or similar in follow-up; not blocking.

On the migration itself — I considered closing this and asking for a staged rewrite, but pragmatically: you've done the work, CI is green, the backend pieces I want are real, and re-doing the React port from scratch in pieces just burns weeks. I'm taking it.

Force-push the 计划/ removal and I'll merge same day.

@Bernardxu123 Bernardxu123 force-pushed the feat/web-dashboard-port branch from 53c60f2 to 76e80bd Compare May 22, 2026 04:42
@Bernardxu123

Copy link
Copy Markdown
Collaborator Author

Thanks for the review. I've removed the 计划/ directory as requested and force-pushed the change. Let me know if anything else is needed. @esengine

Reasonix Dev added 4 commits May 22, 2026 23:03
…b app

Migrate the desktop Tauri + React UI to a CLI-hosted Web dashboard,
replacing the legacy Preact UI and laying groundwork for mobile compatibility.

- Independent Vite + React 19 dashboard build chain (dashboard/)
- Mock/Server dual-mode bridge layer (tauri-bridge.ts)
- REST API routing alignment (sessions, settings, submit, abort)
- editMode support (review/auto/yolo) with runtime setEditMode
- User message deduplication in busy state (App.tsx:546-549)
- assistant_final event carries usage + costUsd fields
- Binary asset serving fix (woff/woff2/ttf/png as Buffer, not UTF-8)
- Smoke tests (10 cases) + editMode regression tests
- Build chain: npm run build now runs dashboard build first
- Removed 38 legacy Preact files + 8 obsolete tests

- SSE reconnection: fixed 3s retry, no exponential backoff or max attempts
- settings_save: does not merge overview for complete  broadcast
- session_load: still uses POST /api/sessions/load, not switch + GET
- app.js bundle size ~900KB (code-splitting deferred)
- Mobile layout optimization (deferred until desktop Web is stable)

- npm run build: pass
- npm run typecheck: pass
- npm run lint: pass
- npm run test: pass (229 files / 3271 tests)
…ates)

Web version doesn't need Tauri's @tauri-apps/plugin-updater since
updates are handled by CLI (npm). Removed:
- Imports and usage from App.tsx (pendingUpdate state, UpdateBanner component, check() call)
- about.tsx update checking UI (CheckStatus component, checkForUpdates)
- tauri-bridge.ts mock exports (Update type, check function)
- tsconfig.json and vite.config.ts path/resolve aliases
Users could not copy the dashboard URL because /copy mode only captures
conversation cards, not the WelcomeBanner which displays the URL.
This caused repeated failed attempts (infinite loop).

Add /dashboard copy as a quick way to yank the live dashboard URL to
the clipboard via OSC 52.

Fixes esengine#1450
@Bernardxu123 Bernardxu123 force-pushed the feat/web-dashboard-port branch from 76e80bd to dccf0a2 Compare May 22, 2026 23:20
CI Fix added 5 commits May 23, 2026 08:15
Move orphaned code (GET response body, declarations, helper function)
back into proper positions within the module. The merge left code
scattered at module level causing 41 biome lint errors.

- Move handleSettings function and its complete GET/POST handlers
  into correct position after declarations
- Move VALID_WEB_SEARCH_ENGINES, VALID_EDIT_MODES, void saveEditMode,
  and debugLogPresetWriteFromDashboard before the main function
- Restore complete GET response with session, model, proNext, budgetUsd,
  skillPaths, appliesAt fields
Add 200+ missing i18n keys to en.ts and zh-CN.ts for new React
dashboard components (cards, composer, contextPanel, sidebar,
statusbar, thread, etc.). Also fix settings.ts structural issues.
npm ci in CI only installs root dependencies. Add postinstall script
that runs npm ci --prefix dashboard to ensure dashboard deps
(prism-react-renderer, lucide-react, etc.) are available for
typecheck and build steps.
…ngine#1496)

When a command exits non-zero, the collapsed card now:
- Shows error-relevant lines (error/fail/exception/assertion patterns)
  mixed with tail lines instead of only the last N lines
- Displays exit code in the truncated hint: 'N lines hidden · exit 1'
- Uses 'Ctrl+R to expand' instead of confusing 'use /tool to read full'

Smart truncation for failed commands:
- Scan output for error-pattern lines (error, fail, fatal, exception, etc.)
- Include those lines + context + tail in visible output
- Add separators for hidden gaps between error regions
@esengine esengine merged commit 462b79b into esengine:main May 23, 2026
4 checks passed
@Bernardxu123 Bernardxu123 deleted the feat/web-dashboard-port branch May 23, 2026 04:49
esengine added a commit that referenced this pull request May 23, 2026
…#1599)

* fix(dashboard): scope session list to current workspace + fix new-chat flow

Two related sidebar bugs:

1. The session list was unfiltered — users with thousands of subagent
   transcripts (`subagent-sub-*.jsonl`) and cross-workspace sessions
   in `~/.reasonix/sessions/` saw 10 000+ entries. The CLI's session
   picker already uses `listSessionsForWorkspace(currentRootDir)`;
   the dashboard's GET /api/sessions handler now does the same when
   `ctx.getCurrentCwd()` is wired. Also surface `meta.summary` in the
   listing so the bridge stops falling back to bare session names.

2. Clicking "new chat" pushed an error card into the transcript via
   `$session_empty` ("loaded with no messages") and never updated
   state.currentSession, which left #1586's URL mirror pointing at
   the old session. The new endpoint echoes the freshly-minted
   session name, and the bridge fires a real `$session_loaded` with
   empty messages so the reducer resets cleanly and the URL flips.

Sessions-ops test grows by two cases covering each behaviour.

* feat(dashboard): cross-session stability, persistent URL, polish pass

Squash-merges a chain of fixes prompted by post-#1418 user feedback on
the live web dashboard. The unifying themes: nothing should change
when you don't expect it to (token, port, URL, SSE stream), and
everything should give visible feedback when you do change it.

Server
- POST /api/sessions/new now echoes the new session name so the bridge
  can update state.currentSession without diffing the list.
- parseTranscript surfaces reasoning_content, tool_calls, and tool
  results (by tool_call_id) so historical replays show what the model
  actually did, not just the raw text turns.
- serveAsset injects ?token=... into CSS url() font references in
  addition to the existing JS-import rewrite — the previous gap 401'd
  every Geist / KaTeX font fetch.
- New /api/browse?path= lists immediate subdirectories (Windows drive
  letters included on first call) so the web runtime can ship a real
  directory picker.
- startDashboardServer exposes updateContext(ctx) — the handle now
  outlives a chat.tsx-driven App remount, and the new App rewires its
  loop/refs in place instead of forcing a port rebind that the OS
  hadn't released yet (EADDRINUSE -> ephemeral fallback -> new URL).
- Dashboard token + actual bound port are persisted to config.json on
  first run via ensureDashboardToken / saveDashboardPort, with an
  EADDRINUSE fallback to ephemeral. /dashboard reset-token rotates
  the token and restarts the server.

CLI
- listSessions workspace filter now reaches the dashboard's GET
  /api/sessions, cutting sidebar entries from "every subagent
  transcript on disk" (10 000+ for active users) down to the current
  workspace's chats.
- getDashboardUrl appends &session=<name> so the printed URL points
  at the attached session and survives copy/paste.

Dashboard UI
- Persistent module-level dashboardHandle + eventSubscribers Set so
  React App remounts (session swap) don't tear the server down and
  don't drop SSE subscribers on the floor — fixed the "send a message
  after switching, web stays silent" desync.
- session_load bridge handler emits $session_loaded with the new
  name and full segments (text + reasoning + tool calls stitched to
  results), instead of pushing an error card via $session_empty.
- Thread renders use index-based React keys for AssistantMsg —
  replayed transcripts arrive with turn=0 for every assistant row,
  so the turn-keyed list was collapsing every assistant message into
  one stale slot on every session switch.
- Sidebar gets a per-row loading spinner; thread shows a centered
  overlay during the swap so big sessions don't look dead.
- CSS containment on .session-item, .msg, and .thread; dropped a
  needless backdrop-filter on the loading overlay. Together these cut
  the Paint/Layout/pointerover budget noticeably on long transcripts.
- New WorkdirInputModal backed by /api/browse — the web build
  previously stub'd openDialog to "" so clicking Browse did nothing.
- Removed the "+ new tab" affordance from the tab bar (web has no
  multi-tab story).
- URL session mirror from #1586 reverted to read-on-mount only so
  clicking a session doesn't churn the address bar.

i18n
- statusbar.themeStyle{Graphite,Sandstone,Porcelain,Midnight}
- settings.themeStyle* + Desc, settings.page* Label + Desc for all 8
  pages, sidebarPanel.loading, workdir.{cancel,go,goTip,loading,
  emptyDir,openHere,pathPlaceholder}, handlers.dashboard.tokenReset*
  (en and zh-CN where relevant).

Tests
- tests/dashboard-token-persistence.test.ts (9 cases) for
  ensureDashboardToken / saveDashboardPort / clearDashboardToken.
- dashboard-sessions-ops gains coverage for the workspace filter
  and the new POST /sessions/new name echo.
- dashboard-smoke verifies CSS font url() token injection in
  addition to the existing JS chunk-import rewrite.

---------

Co-authored-by: reasonix <reasonix@deepseek.com>
esengine added a commit that referenced this pull request May 23, 2026
…1618)

The dashboard's <select> for switching web search backends shipped in
#1558 against the old Preact panel; the React port (#1418) dropped it
silently and the i18n strings have been dead code since. The desktop
settings panel never had it. Both surfaces now expose the same dropdown
under General → Behavior, alongside reasoning effort / edit mode /
budget — six engines (bing, searxng, metaso, tavily, perplexity, exa)
matching the `/search-engine` slash.

- protocol: `webSearchEngine` on SettingsEvent + SettingsPatch in both
  desktop and dashboard mirrors
- backend: `src/cli/commands/desktop.ts` settings_save persists the
  field via writeConfig; emitSettings reads it back via webSearchEngine()
- dashboard bridge: emitServerSettings forwards the field from
  `GET /api/settings` (server side was already wired by #1558)
- desktop i18n: copies the six already-translated strings that were
  living only in the dashboard bundle

API keys for metaso / tavily / perplexity / exa still go through the
slash command (or config.json) — UI-side key entry can come later if
demand shows up.

Co-authored-by: reasonix <reasonix@deepseek.com>
esengine pushed a commit that referenced this pull request May 24, 2026
…moved, persisted usage stats, plan dispatch gate

Headline themes:
- Desktop: bundle the CLI-hosted React dashboard, retire Tauri+Preact duplicate (#1418)
- Config: drop preset abstraction; flash/pro are direct model selections (#1657, #1630)
- Stats: persist cumulative usage to session meta + auto-restore on startup (#1667, #1680, #1643, #1628)
- Plans: editMode="plan" enforced at the ToolRegistry dispatch gate (#1681); step advance fix (#1629)
- Context: fold once at turn start, drop pre-flight + byte-ceiling (#1642, #1646); collapsible compacted card (#1649)
- Subagents: per-skill flash/pro override + Settings UI (#1632)
- Desktop polish: sidebar drag-resize (#1688), responsive collapse (#1585), copy/edit overlay + msg-history nav (#1645), Esc closes modal not turn (#1685), QQ tab isolation (#1672), DiffCard for edits (#1662), theme-aware highlighting (#1655), system events toggle (#1654/#1650), macOS TCC inheritance (#1614), dashboard.enabled (#1612)
- Dashboard polish: persistent session URL (#1586, #1589, #1599), theme-aware highlighting (#1664), IME confirm-enter guard (#1689), code-fence lang fix (#1677), vendor chunk split (#1587), markdown table h-scroll (#1562)
- TUI: Alt+S input stash/recall; static history isolated from input rerenders (#1635); legacy mouse drop (#1637, #1648); multi-edit gated in review (#1647)
- Diff: SplitDiff column border holds under CJK (#1686)
- MCP: workspace roots passed to servers (#1625); codeCommand honors mcpServers (#1603)
- Config plumbing: (baseUrl, apiKey) resolved as a tuple (#1658); stale model id self-heal (#1663)

See CHANGELOG for the full list.
esengine pushed a commit that referenced this pull request May 24, 2026
…tests find dist/

Dashboard smoke tests added in #1418 read `dashboard/dist/app.js` and
`app.css` at filesystem level. They pass under `npm run verify` (which
builds first) but fail under `npm publish`, whose `prepublishOnly` ran
in `lint → typecheck → test → build` order — tests fire before the
artifacts they need exist.

Reorder to `lint → typecheck → build → test` so the publish-time gate
matches the verify-time gate. Caught when the v0.50.0 publish-npm.yml
run failed before reaching `npm publish`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants