style: VocaGateway WebUI redesign and operator polish - #3
Conversation
Match vocahq.com design tokens (warm paper, ink, teal accent) and type (Epilogue + Atkinson Hyperlegible). Add basic SEO/meta, a skip link, and a11y polish on the token field and tab panel.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
- Rename shell/title to VocaPhone; allow Google Fonts in CSP - Move pairing off Overview into Pair & test with mic check - Clickable header model control opens Models - Models catalog uses expandable family tiles with denser rows - Overview focuses on status, setup path, and short CTAs
Follow prefers-color-scheme by default, persist light/dark/system in localStorage, and expose a sun/moon control in the header. FOUC-safe boot script applies the resolved theme before first paint.
Drop Listener/On this host from Overview and stop repeating the active engine under Ready for dictation. Network details live in a hover/focus card on the header model control instead.
Front page is status, onboarding CTAs, and live operations only. Setup detail belongs in Get started when needed; host inventory is not a daily operator concern.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fc0c0cb. Configure here.
Family tiles start closed for density. A funnel Filter control filters by family and language (plus installed only), with a badge for active filters and a clear action.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_1686aa59-5624-4fce-a281-00ddf44b4c74) |
Bring back the host facts card (chip, CPU, memory, OS, version) under live operations for capacity context.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_ea3b0bf5-19b7-43f8-9189-0c8d5e4ad4be) |
Vendor voca-logo.svg and voca-logo-dark.svg from vocahq brand assets. Header and favicon swap with the active theme (dark glyph on light, light glyph on dark).
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_72cbbb5c-7191-4f70-8e7c-6b041b76f219) |
jatinkrmalik
changed the title
Toggle next to Filter opens or closes every family tile. Label flips with the open state and stays in sync when tiles are toggled by hand.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_c6cc3b7f-2242-40d0-951e-cae8ea64d3ff) |
Rewrite operator-facing copy in plain language, remove em-dash prose, and stop mid-sentence HTML wraps plus tight max-width ch caps that fought responsive layout.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_224c7f2e-48f3-4a38-9822-7eebaa825b20) |
Under bring-your-own Whisper, point people at Hugging Face ggml/GGUF sources and open a prefilled GitHub issue to request catalog models.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_4bea127f-813d-4fc3-b12b-3dc8b614cac6) |
Render host facts as an icon grid instead of a plain definition list. Probe nvidia-smi (and rocm-smi/lspci when present) so the GPU tile shows product name and VRAM instead of only "NVIDIA CUDA".
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_ce2dbea5-ae80-4e58-bd86-d7694b4f909a) |
Models: multi-select filters (family/language/engine, size, fits-machine) in a collapsible left rail; short nested titles with family pill; active check label vs recommended outline; info popover with fixed source links. Overview: live ops KPIs and sparkline history, capability system hero with NVIDIA/AMD/Intel marks, square VocaHQ app icon in the header. Network: wildcard-bind exposure banner (24h dismiss) plus Pair & test panel; pairing QR copies JSON address+token with a Copied chip. Catalog: Handy/Breeze/Moonshine source URLs, release-tag pages for archive models, safer description and license copy.
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_82cb3bed-402e-45fd-ab06-6c797299d2de) |
jatinkrmalik
changed the title
Family header and models panel are grid siblings. Opening a family parks the models strip after the last tile on that visual row so it spans full width without yanking the card left or pushing row-mates below the strip.
Use None defaults for multi-value Query/Form list filters, contextlib.suppress for optional GPU label reads, wrap long lines, and clear related format/mypy issues.
Give the header a stacking context above sticky .tabs so the model pill network popover is not painted under the tab bar on hover/focus.
Automated fix summaryQuality was red on ruff ( CI
Review
Commits: |
Keep teal wash for Active only, even collapsed tile heights, stop pairing exposure from stacking on QR swaps, and treat empty filter bools as false.
Bring back the dependency table from main so operators can see which engines and CLIs are installed without downloading diagnostics.
Bring back main's counters (succeeded/failed, avg latency, last inference, RTF, model cache) and keep capacity plus latency/outcomes/ pipeline charts for trends.
Replace the old dense table with a system-card hero and tile grid, and fill the Live operations KPI row so the layout stays even.
Get started was saying "Download a model" whenever the engine was not ready, including when models were already on disk.
Keep open families across download/select swaps, make language search respect hidden rows, smooth download progress polling, and give the stale-token pairing notice real spacing.
1 participant
Summary
Full WebUI redesign aligned with VocaHQ paper branding, plus operator UX for pairing, models, live ops, and network exposure.
Brand and theme
Navigation and onboarding
Live operations
System info
Models
titletooltipNetwork exposure
0.0.0.0/::(× dismiss 24h via localStorage){v,url,token}with a "Copied" chip (no toast)Other
noindex), skip link, a11y on token field / tabsTest plan
http://127.0.0.1:8765/after checkout