Tonal Extension UI States

Visual states catalog and live mockup sandbox for the Tonal composer pill.

1. Floating Pill Component States
Rest State
Expanded State
Converting State
Done State
Error / Retry
2. Tone Selector Popover
3. Toast Notification Alerts
Text rewritten successfully
Rewriting failed. Please retry
Rewriting undone
4. Decode Floating Button
5. Decode Result Card
6. Chrome Extension Popup Window
Default Popup View
Popup UI Specs

The Chrome Extension popup provides a clean, native interface for the user to configure global preferences.

Design System Alignment:

  • 280px Width: Sized perfectly for Chrome's native extensions window.
  • Segmented Control: Seamlessly switches default tone using shared rounded corner metrics (--r-md).
  • Dynamic Status Badge: Confirms helper state and system availability.
7. Live Interactive Sandbox
New Message ✕
8. New Feature States
8a. Keyboard Shortcut — Ctrl+Shift+T Result
Pressing Ctrl Shift T immediately opens tone picker on the focused input. The sequence below shows the 3-step state transition.
① Before (Rest)
Normal pill on input
② Shortcut fires → Expanded
Pill snaps to expanded
③ Popover opens
Tone picker visible
8b. Per-Site Tone Memory
On next visit, the pill initialises with the remembered tone for that hostname — no user action required. Stored in chrome.storage.local → toneMemory[hostname].
📧 Gmail — Formal
mail.google.com
💬 Slack — Work Chat
slack.com
💼 LinkedIn — Formal
linkedin.com
8c. Offline Fallback — Local Engine
When worker is unreachable, OfflineToneEngine applies word-swap rules locally. The pill reaches Done state with an offline toast.
Pill (Done — offline)
Toast
Converted (offline mode)
Sample — Formal
"hey guys wanna get this done asap yeah?"
"you want to get this done as soon as possible yes?"
~30 word-swap rules per tone · no network
8d. Undo History — Persistent (10 entries)
Each rewrite saves {originalText, rewrittenText, tone, ts} to undoHistory[]. Pill undo reads memory first, then falls back to storage.
Pill (Done — tap to undo)
Persisted history entries
#1 — Formal · 2m ago UNDO
#2 — Work Chat · 15m ago UNDO
#3 — Casual · 1h ago UNDO
... up to 10 entries · survives navigation