March 2026 — UX Improvements

Major usability improvements across the Archipelag.io web app

A comprehensive set of UX improvements across the Archipelag.io web app, focused on mobile usability, onboarding, error recovery, accessibility, and visual polish.

Mobile experience

Bottom navigation bar — a fixed tab bar on mobile (< 1024px) with quick access to Chat, Image, Host, Credits, and Settings. Highlights the active page, hides when the keyboard opens, and only appears for signed-in users.

Onboarding

Welcome header on the dashboard with brand intro and current credit balance
“How Archipelag.io works” — a dismissible 3-step onboarding banner on first visit explaining: choose a task → Islands process it → pay with credits
Chat suggestion chips — three ready-made prompts in the empty state to help new users start their first conversation
Image gen prompt examples — clickable example prompts in the empty state (“A sunset over mountains…”, “A cyberpunk city at night…”, etc.)
Low-credits nudge — when balance drops below 10 credits, a gentle reminder appears in chat and image gen with a link to purchase more
Credit balance in sidebar — your credit count is now visible in the navigation account dropdown, highlighted in amber when low

Chat improvements

Regenerate — hover over any assistant message to reveal a “Regenerate” button that re-submits the preceding prompt for a fresh response
Retry on failure — when a job fails, a “Retry” button appears below the error message
Response metadata — a compact summary line under each response showing Island name, duration, model name, and tokens/sec
Autofocus — the chat input is focused automatically on page load

Image generation improvements

Error state with retry — when generation fails, the output panel shows the error message and a “Try Again” button instead of falling through to the empty state
Example prompt buttons — clickable suggestions in the empty state to help users get started

Cargo Registry improvements

Sort controls — dropdown with four options: “Available first” (default), “Name A-Z”, “Price: low to high”, “Price: high to low”
Card CTA — each cargo card now shows “Try It” (teal) when Islands are online, or “View” (gray) when offline

Compute Exchange improvements

Interactive chart tooltips — hover over the price chart to see a crosshair, colored data point dots, and a tooltip with exact values
Price history table — collapsible table below the chart showing the last 20 snapshots (time, rate, ask, bid, spread)
Spread stat card — numeric bid/ask spread displayed alongside market rate and supply/demand stats

Credits & billing

Purchase button shows price — “Buy for $4.99” instead of generic “Buy Now”
Projected balance — each credit package card shows what your balance will be after purchase

Authentication

“Check your email” confirmation — after requesting a magic link, a dedicated screen shows which email was sent to, with a spam folder reminder and a “try again” link (replaces the previous flash-and-redirect approach)

Keyboard shortcuts

Cmd+K / Ctrl+K — quick navigation palette with searchable routes, keyboard navigation (↑↓ Enter Esc), and dark mode support
See Keyboard Shortcuts for the full list

Loading & progress

21 loading states added — every form submit and async action button now shows loading text (e.g., “Saving…”, “Connecting…”, “Suspending…”) and disables during processing
Content shimmer — a skeleton placeholder appears during slow page transitions (> 400ms)
Topbar color — progress bar updated to brand teal

Dark mode

70+ dark mode overrides — comprehensive coverage for all color families (red, emerald, amber, teal, violet, blue, sky, orange) including backgrounds, text, borders, and hover states

Accessibility

Modal ARIA — all 4 modal dialogs now have role="dialog", aria-modal="true", and aria-labelledby
Snackbar live region — toast notifications announced to screen readers via aria-live="polite"
Map label — the Leaflet map has role="region" and an accessible name
Status indicators — color-only dots (online/offline) now have aria-label for screen readers

Other polish

Favicon badge — a red notification dot appears on the favicon when a job completes while the tab is backgrounded
Sidebar persistence — sidebar collapse state saved in localStorage
Lazy loading — images in generation history and leaderboard avatars load lazily
Skeleton CSS — new .aui-skeleton shimmer animation class for future loading placeholders