Skip to content

Redesign management dashboard and setup wizard UI - #2

Merged
donvito merged 4 commits into
mainfrom
melvin/dashboard-wizard-ui-refresh-70a6
Aug 3, 2026
Merged

Redesign management dashboard and setup wizard UI#2
donvito merged 4 commits into
mainfrom
melvin/dashboard-wizard-ui-refresh-70a6

Conversation

@donvito

@donvito donvito commented Aug 3, 2026

Copy link
Copy Markdown
Owner

Summary

Visual and UX refresh of both web UIs served by gaia-setup-personal wizard, plus the bundled user guide, keeping every API contract (/api/instances, /api/doctor, instance actions, /api/provision, model search, folder picker) unchanged.

Dashboard (ui/dashboard.html)

  • New top bar with a live connection indicator; dark mode support via prefers-color-scheme (the wizard already had it, the dashboard didn't).
  • Status strip rebuilt as icon cards; the Assistants card now shows a running count (e.g. "3 · 1 running"); the Docker card turns green/red with a matching icon.
  • Assistant cards redesigned: gradient avatar with a status dot, running accent bar, pulsing "Running" badge, icon metadata rows (clickable dashboard URL, folders, channel · provider · created date), icon action buttons, hover elevation.
  • Native confirm() dialogs replaced with a styled modal; Remove now uses a single dialog with an explicit "also delete data" checkbox instead of two stacked confirms.
  • Skeleton loading cards on first load, richer empty state, toasts with success/error icons.
  • Bug fix: the dashboard no longer blanks out when Docker is missing. /api/doctor returning ok:false was treated as a fatal fetch error (pre-existing behavior); it is now rendered as a red "Not ready" status pill while assistants stay fully manageable.

Setup wizard (ui/wizard.html)

  • Tiny progress dots replaced with a labeled horizontal stepper (numbered bullets, checkmarks for completed steps, connector lines); the thin progress bar remains as the mobile fallback.
  • Model selection redesigned: the recommended OpenRouter models are now a compact two-column card grid (radio dot, one-line description, pill price badge, "Details ↗" link) with a full-width dashed "Browse the full OpenRouter catalog" card. The catalog search gained an inline search icon, context-length pills on each result (from the existing /api/openrouter/models data), and a clearer selected-model box with a checkmark.
  • Layout fix: the "I understand this assistant can take actions…" consent checkbox was squeezed into the narrow 140px label column; it is now a full-width bordered consent box that tints orange when checked.
  • Removed the prototype leftovers: the fixed "Personal" ribbon and the dev "Tweaks" panel (dense/compact/demo-prefill toggles).
  • Polished primary buttons (shadow + press feedback), checklist bullets, and a new animated success checkmark on the completion step. Removed the orange "G" square from both page headers per feedback.
  • Deduplicated a double-declared escapeHtml helper. All step logic, validation, and provisioning flow untouched.

User guide (docs/user-guide.html)

  • Redesigned for readability: body text constrained to a ~62ch reading measure, larger line height, clearer heading hierarchy with underlined section titles.
  • Sticky "On this page" nav with scrollspy highlighting of the section in view (collapses to pill links on mobile), plus a floating back-to-top button.
  • Tables wrapped in rounded scrollable containers with zebra striping and ✓/✕ prefixes on the recommended / do-not-touch rows.
  • Callouts (tip / warn / danger / start-here) restyled with colored left borders and small uppercase titles for scanning; steps get orange numbered circles.
  • Dark mode support and improved print styles; all guide content unchanged.

Testing

  • go build + go vet pass (no Go changes).
  • Manual browser testing against a live wizard server with a seeded manifest: grid/list toggle, remove/update modals, full wizard walkthrough (welcome → review) with stepper state, masked secrets on review, validation error banner, and dry-run /api/provision with the wizard payload shape.
  • Verified the no-Docker state renders the red status pill and a proper "Check system" toast.
  • Verified the new model picker end-to-end, including a live OpenRouter catalog search ("qwen" → 30 of 326 results with prices and context pills), selecting a result, and continuing through the wizard; and the consent box before/after ticking.
  • Verified the redesigned user guide in the browser: layout, sticky scrollspy nav, table/callout styling, back-to-top behavior, no horizontal overflow or console errors.

Screenshots

Dashboard (cards) Dashboard (list)
Dashboard grid view Dashboard list view
Remove modal Docker missing
Remove confirmation modal Dashboard with Docker missing
Wizard welcome Wizard review Validation
Wizard welcome step with stepper Wizard review step Wizard validation error
Model card grid Catalog search Selected model
Model selection card grid OpenRouter catalog search results Selected model box
Consent box (fixed layout) User guide hero
Full-width consent checkbox User guide hero and nav
Guide tables Guide callouts
User guide zip table User guide callouts
Open in Web Open in Cursor 

cursoragent and others added 4 commits August 3, 2026 14:51
Co-authored-by: Melvin Vivas <melvindave@gmail.com>
…us, not fatal)

Co-authored-by: Melvin Vivas <melvindave@gmail.com>
…, fix consent checkbox layout, drop header G mark

Co-authored-by: Melvin Vivas <melvindave@gmail.com>
…styled tables/callouts, dark mode)

Co-authored-by: Melvin Vivas <melvindave@gmail.com>
@donvito
donvito marked this pull request as ready for review August 3, 2026 16:36
@donvito
donvito merged commit 618eaf3 into main Aug 3, 2026
1 check passed
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