Skip to content

Installer UX improvements and servers page/card redesign#111

Merged
ZingerLittleBee merged 43 commits into
mainfrom
feat/installer-ux-and-server-card-ui
May 17, 2026
Merged

Installer UX improvements and servers page/card redesign#111
ZingerLittleBee merged 43 commits into
mainfrom
feat/installer-ux-and-server-card-ui

Conversation

@ZingerLittleBee
Copy link
Copy Markdown
Owner

@ZingerLittleBee ZingerLittleBee commented May 17, 2026

Summary

A batch of installer (deploy/install.sh) UX work plus a servers page and card UI redesign with network-quality history fixes.

Deploy / installer

  • Consolidate install layout under /opt/serverbee; place docker-mode and snap-accessible config in directories the server actually loads (/opt/serverbee/etc/server.toml).
  • Localize the interactive UI, plan, result and status output; add and cache an interactive language selection.
  • Preview install actions before execution; show the resolved version (not <latest>); show the first-run admin password in the install result.
  • Default the agent server URL to the detected local IP; list Agent before Server in component menus.
  • Run/repeat domain DNS checks before install confirmation, warn on mismatched IPv6 DNS, and require a manual DNS recheck before planning.
  • Install the running script as the management CLI and refresh it during upgrade.
  • Print explicit rm commands instead of a --purge hint on uninstall; widen the docker first-run password poll budget; harden the noninteractive flow.

Servers page & card UI (web)

  • Add servers via an enrollment dialog on the servers page; right-align the Add Server button.
  • Fix DataTable column widths exploding and let wide tables scroll horizontally instead of clipping.
  • Match the dashboard auto-fill grid layout for the servers card view.
  • Card footer redesign: two-column stats grid, merged proc/TCP/UDP, monthly cost instead of value grade, circular R/W badges, load moved into the footer, reserved slots so card height stays stable.
  • Make tooltips follow the theme; correct network square-grid tooltip styling.

Network quality

  • Color persisted network history in the card square grid (history was rendered gray and only live points gained color after a refresh).
  • Show per-bucket history values in the network square tooltip instead of a constant current snapshot.

Docs

  • Document how to correct a wrong enrollment code.

Test plan

  • cargo test --workspace
  • bun run test (web)
  • bun run typecheck
  • cargo clippy --workspace -- -D warnings
  • Manual: run installer end-to-end on a fresh VPS (install/upgrade/uninstall, language cache, DNS checks, first-run password).
  • Manual: servers page grid/table, add-server dialog, card footer, network tooltips in light/dark.

Summary by CodeRabbit

  • New Features

    • Added server enrollment management interface for administrators
    • Introduced domain setup command for automated HTTPS configuration
  • Documentation

    • Enhanced enrollment code correction guidance
    • Clarified HTTP/HTTPS configuration with cookie security settings
    • Added verification commands for server and agent connectivity
    • Improved quick-start deployment instructions
  • Improvements

    • Refactored installer with internationalization support (English/Chinese)
    • Standardized installation paths
    • Improved first-run admin credential handling
    • Enhanced server card metrics visualization

Review Change Stack

Unify the binary install mode into a single base directory
(/opt/serverbee/{bin,etc,data}) to align with docker mode and
simplify management. Adds automatic in-place migration of existing
legacy FHS-split installs (/usr/local/bin, /etc/serverbee,
/var/lib/serverbee), rewriting server.toml and systemd units and
restarting running services.
Replace the case-based tr_text with maintainable per-language
associative arrays (EN/ZH, 115 keys) with English fallback and a
visible marker for missing keys. Localize the service and uninstall
menus, all interactive confirmation prompts, the install/domain plan
body, install result screens, and the status page; switch the docs
link to the matching language. Diagnostic info/warn/error stay in
English. Add a bash 4.0+ guard since i18n now uses associative arrays.
Resolve the latest release tag and display it in the binary URL, CLI
script URL and docker image tag of the install/domain plan. Memoize
get_latest_version so the plan and the subsequent install share a
single GitHub API lookup.
The consolidated /opt layout moved server.toml to /opt/serverbee/etc,
but the server binary only reads /etc/serverbee/server.toml, ./server.toml
or SERVERBEE_* env. With WorkingDirectory=/opt/serverbee/data the config
file was never read, so secure_cookie fell back to its default (true).
Over plain HTTP the browser then dropped the Secure session cookie,
making the forced onboarding request unauthenticated (401). Set the
server unit (and legacy-migrated units) WorkingDirectory to the config
dir so the relative server.toml resolves; data dir still comes from the
absolute SERVERBEE_SERVER__DATA_DIR env.
Add the consolidated install layout's config path to the Figment chain
so future binaries find the config without depending on the process
working directory.
The snap-confined Docker daemon cannot bind-mount paths under /opt
(its rootfs is read-only), so after the /opt layout consolidation the
docker agent's config bind mount (/opt/serverbee/etc) failed and the
container never started. Add a snap-aware docker config dir
(/var/snap/docker/common/serverbee/etc under snap, CONFIG_DIR otherwise)
and use it for docker server.toml/agent.toml, the agent bind mount,
config/env/uninstall and plan/result output. Binary mode and non-snap
Docker are unchanged.
install_cli always downloaded the release-tagged install.sh, so an
installer carrying unreleased layout changes installed a mismatched
CLI: serverbee status/config/env/uninstall then reported "no managed
components" because the old-layout CLI looked under the legacy paths.
Copy the running script when invoked as a file; fall back to the
release download only when piped via stdin (curl | bash).
Instead of telling the user to run a command to dig the one-time
password out of the logs, poll the server's startup logs (systemd
journal or docker compose logs) after start and print the password
directly, with a note that it must be changed on first login. Falls
back to the previous "check the logs" hint when no password is found
(re-install/adopt, or no captured log source).
…install

The CLI is removed during uninstall and the script is often piped via
stdin, so "re-run with --purge" was unactionable. Print the concrete
rm/docker volume commands for the preserved config and data instead.
The Server URL prompt was empty with only a static example. Pre-fill it
with http://<detected-local-ip>:9527 so single-machine and same-network
setups can accept the default by pressing Enter.
Persist the interactively chosen language to a sidecar file in the
config dir so subsequent runs (status, upgrade, uninstall) reuse it
without re-prompting. A sidecar file is used instead of editing the
hand-rolled meta JSON to avoid corrupting its fragile comma handling;
it shares the meta-file's directory and uninstall lifecycle.

Priority: --lang > SERVERBEE_LANG > cached > system locale > en.
The cache is removed on full uninstall alongside the meta file.
serverbee upgrade previously only self-copied the running CLI, so it
never picked up new installer logic. Add refresh_cli_from_release: it
pulls the target release's deploy/install.sh, validates it (non-empty,
bash -n, repo marker) and atomically replaces the CLI. Failures are
non-fatal and the refresh runs at most once per upgrade run. The new
CLI takes effect on the next serverbee invocation.
On a cold image pull the container starts and logs the credentials
banner later than the previous 15s poll window, causing the installer
to fall back to the manual "check logs" hint. Use a 45s budget for
docker (15s unchanged for systemd); the loop still exits as soon as
the password is found, so the warm-cache path stays fast.
Agents are installed far more often than the single server, so make
Agent option [1] and Server option [2] in both the install and
uninstall interactive menus (kept consistent to avoid the number
meaning different things between the two menus).
Add a "Correcting a Wrong Enrollment Code" subsection (EN + CN) under
the registration flow: how to fix a mistyped enrollment code or
server_url via serverbee config set / reinstall, and clarify that the
code is irrelevant once a token exists.
The shared DataTable applies table-fixed, but ui/table's base class
sets min-w-max. Inside the nested ScrollArea the fixed table with
min-width:max-content had no defined total width and resolved to a
runaway ~1,000,000px, which table-fixed then distributed across
columns proportionally — pushing all cell content off-screen so the
servers table appeared empty despite data being present.

Add min-w-full to the DataTable's Table className so tailwind-merge
overrides the base min-w-max for these fixed-layout tables.
The shared scroll wrapper used overflow-hidden, so a fixed-layout
table wider than its container had its rightmost columns clipped and
unreachable, and the overflowing width pushed sibling page chrome
(e.g. header actions) off-screen. Switch to overflow-x-auto so wide
tables scroll within their bordered container.
Move agent enrollment out of Settings into an admin-only "Add Server"
action on the Servers page. The dialog collects an optional name and
code validity, generates a one-time enrollment code, then shows the
code, ready-to-run install command and next steps, plus management of
existing codes. Settings now only hosts the GeoIP card.
Restore the header's space-between layout so the admin Add Server
action sits at the top-right of the page, matching the placement of
primary actions elsewhere.
The tooltip overrode only the popup background (bg-background) while
the base tooltip's text (text-background) and arrow (bg-foreground)
were left intact. That made the body text the same color as its
background and left a mismatched light arrow on a dark bubble in dark
mode. Drop the partial override and use the shared tooltip surface,
matching every other tooltip in the app and staying theme-correct in
both light and dark.
Tooltips used bg-foreground/text-background, so in dark mode they
rendered as a bright pill instead of a dark surface. Switch the
tooltip popup and arrow to the popover tokens (bg-popover/
text-popover-foreground with a border), so tooltips are dark in dark
mode and light in light mode, with the arrow matching the bubble.
Convert the bottom footer stats row from a centered wrapping flex to a
two-column label/value grid so it matches the card's other 2-column
sections. Traffic days-remaining now renders in the second column and the
cost footnote spans both columns centered below.
Combine processes, TCP and UDP into a single footer row and render the
cost as a regular label/value cell so it conforms to the two-column grid
instead of a centered footnote.
Show full read/write labels prefixed with circular R/W badges, and
relocate the load trend from the compact metrics grid into the bottom
two-column footer stats so the compact grid is a clean 2x2.
Replace the value-score grade label in the configured cost footnote with
the monthly-equivalent total cost so the card surfaces an absolute spend
figure alongside the hourly rate.
Keep the days-left and cost grid slots occupied with invisible
placeholders when unset so the card footer height stays stable, and
render the load trend with the same dot separator spacing as the cost row.
Use the same auto-fill minmax column template as the dashboard server
cards widget so wide viewports no longer stretch cards across only three
columns with an oversized horizontal gap.
The backend overview already returns up to 30 buckets of historical
latency/loss per server, but the card painted every synthetic point
(which includes backend sparkline buckets) with the unknown color, so
history rendered gray and only live points gained color after a refresh.
Color a square by whether it has a value instead of the synthetic flag;
genuinely empty buckets and padding still render as unknown.
Backend overview only ships server-level aggregate sparklines plus a
single current per-target snapshot. The card reused that constant
snapshot as the tooltip for every historical point, so all tooltips
showed identical values. Carry each bucket's own aggregate latency/loss
on its point and label it as the average.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 17, 2026

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

Project Deployment Actions Updated (UTC)
server-bee-docs Ready Ready Preview, Comment May 17, 2026 4:57pm

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 17, 2026

📝 Walkthrough

Walkthrough

This PR modernizes ServerBee's installation and onboarding by consolidating paths to /opt/serverbee, introducing an enrollment-based server management UI, implementing full installer localization (English/中文), removing admin password configuration, and updating all documentation to reflect first-run auto-generated credentials and secure-cookie HTTPS guidance.

Changes

End-to-end ServerBee modernization

Layer / File(s) Summary
Documentation updates: secure-cookie, first-run passwords, and enrollment guidance
apps/docs/content/docs/cn/*.mdx, apps/docs/content/docs/en/*.mdx
CN and EN documentation updated to remove [admin] configuration sections, clarify secure_cookie behavior (false for HTTP direct access, true for HTTPS), document first-run auto-generated password retrieval from logs, add enrollment code correction workflow, and describe the new serverbee domain setup command for Caddy-based HTTPS configuration.
Installer script: localization, path standardization, and domain/password handling
deploy/install.sh
Major overhaul introducing consolidated /opt/serverbee/... paths, full i18n system with language detection and caching, new domain command for Caddy HTTPS setup with DNS validation, first-run password extraction from Docker/systemd logs, CLI refresh mechanism, Docker snap detection, legacy FHS migration, and localized output throughout install/upgrade/status/config flows. Removes interactive admin password input in favor of first-run auto-generation.
Server enrollment UI: add-dialog, settings refactor, and servers page integration
apps/web/src/components/server/add-server-dialog.tsx, apps/web/src/routes/_authed/servers/index.tsx, apps/web/src/routes/_authed/settings/index.tsx, apps/web/src/locales/en/servers.json, apps/web/src/locales/zh/servers.json
New AddServerDialog component for admins to generate one-time enrollments, copy install commands, and manage existing enrollments with TTL and status tracking. Integrated into servers page with admin-only visibility; removed enrollment management from settings page. Locale strings added for full enrollment workflow.
Server card metrics refactoring: network aggregation, cost display, and layout updates
apps/web/src/components/server/server-card*.tsx, apps/web/src/components/server/network-square-grid*.tsx, apps/web/src/components/server/cost-footnote.tsx, apps/web/src/components/ui/tooltip.tsx, apps/web/src/components/server/*.test.tsx
Introduces AGGREGATE_TARGET_ID constant to consolidate synthetic metric targets; updates CostFootnote with optional inline mode and monthly-equivalent cost display; refactors ServerCard footer from flex-wrapped labels to a two-column grid showing uptime/swap/load/processes-connections; simplifies network square color logic and tooltip styling; updates all assertions and locale keys.
Configuration and infrastructure: path standardization and server startup behavior
crates/server/src/config.rs
Updates server config path from /etc/serverbee/server.toml to /opt/serverbee/etc/server.toml. Installer no longer injects admin password into generated configs; first-run credentials are auto-generated and logged.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 Paths converge beneath one root,
Enrollment blooms where admins scoot,
Tongues both East and West now sing,
HTTPS locks, and cookies gleam,
First-run whispers wake the dream.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 19.57% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main changes: installer UX improvements and servers page/card redesign, which are the primary focuses evident across the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/installer-ux-and-server-card-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ZingerLittleBee ZingerLittleBee merged commit b4d8e15 into main May 17, 2026
9 of 10 checks passed
@ZingerLittleBee ZingerLittleBee deleted the feat/installer-ux-and-server-card-ui branch May 17, 2026 17:02
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.

1 participant