Repository navigation
feat(ui): USX surface alignment, toolbar standardization, and sovereign ecosystem sync - #39
Merged
Conversation
…gn ecosystem sync - Expand API client with typed methods for host sync status, Apple Mail/iMessage intake, task triage actions, and vector quantization - Add 4th studio mode to BananaStudio: Vector-to-Bitmap (V2B) dot lattice and Amiga BOB blitter hex streams - Fix .uxs-btn typo across all BrowserUI panels to canonical .usx-btn classes - Consolidate TasksPanel headers into unified header with segmented switcher: Kanban, List, and Inbox Triage (live Mail/Messages feed & autonomous approval gates) - Add Sovereign Ecosystem Sync card to DashboardSurface and serene sync indicator to GlobalToolbar - Remove redundant secondary back bars from HomeNestSurface, SonicScrewdriverSurface, BitChatSurface, and GrooveboxSurface - Enforce strict UIcon usage, eliminating interactive emojis and amber CRT phosphor overrides in favor of semantic tokens - Update USX_SURFACE_BASELINE_SPEC.md with surface toolbar and button standards
There was a problem hiding this comment.
🟡 Changes recommended
Several new host and vector workflows misread API response contracts, causing empty triage feeds, failed quantization previews, and missing approval cards.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Adds USX-aligned Vue surfaces, workflow communications triage, ecosystem sync indicators, and V2B quantization tooling.
Changes:
- Standardizes headers, buttons, icons, and surface navigation.
- Adds host sync status, inbox triage, and approval actions.
- Adds vector quantization modes and updates USX documentation.
File summaries
| File | Description |
|---|---|
TasksPanel.vue |
Unified task/communications triage UI |
DashboardSurface.vue |
Ecosystem sync status card |
GlobalToolbar.vue |
Sync indicator |
BananaStudio.vue |
V2B quantization modes |
ApiBridge.ts |
Quantization API methods and types |
client.ts |
Host/workflow API methods |
| Other changed Vue panels/surfaces | USX buttons, icons, headers, and toolbar updates |
USX_SURFACE_BASELINE_SPEC.md |
Updated surface standards |
Review details
Suppressed comments (2)
frontend-vue/src/surfaces/bitchat/BitChatSurface.vue:276
- This second modal close control has the same accessibility regression: replacing
×withUIconremoved the button's explicit accessible name.
<button class="bitchat-modal-close" @click="showConvertTaskModal = false">
frontend-vue/src/surfaces/browserui/BrowserUISurface.vue:1938
- The new small-button rule sets a hardcoded 28px touch target, below the shared
--usx-touch-min-smrequirement and the baseline's interactive-control minimum.
min-height: 28px;
- Files reviewed: 17/17 changed files
- Comments generated: 28
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+215
to
+220
| approveTask: (id: string) => | ||
| request( | ||
| `${UCORE_API}/api/workflow/tasks/${encodeURIComponent(id)}/approve`, | ||
| { | ||
| method: "POST", | ||
| }, |
Comment on lines
+87
to
+90
| title="Host Ecosystem Sync Active (Dashboard)" | ||
| @click="navigate('/')" | ||
| > | ||
| <span class="global-toolbar__sync-dot" /> |
| <div class="bitchat-modal-header"> | ||
| <h3>Save Discussion Evidence to Binder</h3> | ||
| <button class="bitchat-modal-close" @click="showSaveBinderModal = false">×</button> | ||
| <button class="bitchat-modal-close" @click="showSaveBinderModal = false"> |
Comment on lines
+202
to
+206
| export interface QuantizeLatticeResult { | ||
| ok: boolean | ||
| width: number | ||
| height: number | ||
| active_points: number |
| border-radius: var(--usx-radius-sm); | ||
| min-height: var(--usx-touch-target-compact); | ||
| border-radius: var(--usx-radius-md); | ||
| min-height: var(--usx-control-size-sm); |
Comment on lines
+138
to
+139
| background: var(--usx-color-surface-base, var(--usx-color-bg, #0d0e11)); | ||
| color: var(--usx-color-on-surface, #e2e4e9); |
| .homenest-surface-label { | ||
| .homenest-header__title { | ||
| font-size: var(--usx-font-size-xl); | ||
| font-weight: 600; |
| background: var(--usx-color-surface-hover); | ||
| .sonic-header__title { | ||
| font-size: var(--usx-font-size-xl); | ||
| font-weight: 600; |
Comment on lines
+1533
to
+1535
| padding: 0.25rem 0.6rem; | ||
| font-size: var(--usx-font-size-xs); | ||
| font-weight: 500; |
Comment on lines
+1599
to
+1600
| font-size: var(--usx-font-size-md); | ||
| font-weight: 600; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements comprehensive frontend Vue alignment with canonical USX design tokens and bridges backend capabilities to the sovereign user interface:
quantizeVectorToLattice,quantizeVectorToTeletext,quantizeVectorToBob).BananaStudio.vuewith dot lattice matrix rendering and Amiga BOB planar blitter hex streams..uxs-btntransposition typos across all BrowserUI panels (BananaStudio.vue,BrowserUISurface.vue,ResearchDashboard.vue,EditTab.vue,PreviewTab.vue,CardStack.vue).TasksPanel.vueheaders into a unified header with segmented switcher (Kanban, List, Inbox Triage), live Apple Mail/Messages intake feed, and human approval gate actions.DashboardSurface.vue(tracking Apple PIM, BitChat LAN Mesh, and Google Vault) and a serene sync dot indicator inGlobalToolbar.vue.← Dashboardback bars fromHomeNestSurface.vue,SonicScrewdriverSurface.vue,BitChatSurface.vue, andGrooveboxSurface.vue. Replaced interactive emoji buttons withUIconand eliminated amber CRT phosphor overrides in favor of semanticvar(--usx-color-warning).docs/USX_SURFACE_BASELINE_SPEC.mdwith surface toolbar, button, and icon standards.Verification
pnpm -C frontend-vue run type-check: 0 errorspnpm -C frontend-vue exec vitest run: 108/108 passed across 27 test filespnpm -C frontend-vue run build: passed (✓ built in 15.78s)python3 scripts/check_home_path_policy.py: Home path policy: OKuv run --no-project pytest ...: 29 passed in 0.31s