Skip to content

Unify compact workspace controls and stable data surfaces - #1730

Open
ZenAlexa wants to merge 7 commits into
TraderAlice:devfrom
ZenAlexa:contrib/compact-workspace
Open

ZenAlexa wants to merge 7 commits into
TraderAlice:devfrom
ZenAlexa:contrib/compact-workspace

Conversation

@ZenAlexa

@ZenAlexa ZenAlexa commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

Why

The workspace needs a compact desktop rhythm and stable control geometry across navigation, settings, menus, and trading data. The reported regressions include adjacent highlighted rows touching, Tools headers separating from their contents, oversized navigation, misaligned disclosure actions, native selects with a different visual contract, and chart notices moving surrounding content.

This is the shared-interface boundary extracted from #1704. The base is dev at 4813c1b89.

What changed

Shared controls and layout

  • Centralized desktop navigation at 32px, common controls at 36px, panel insets at 16px, and adjacent navigation gaps at 4px. Coarse-pointer controls retain 44px hit areas. Narrow layouts use the existing drawer flow.
  • Adopted the platform font stack with explicit CJK fallbacks. Controls use 14px text and 20px leading. Display and data roles retain their own scale.
  • Consolidated Select, Autocomplete, dropdown choices, selection glyphs, switches, dialogs, help popovers, and count badges. Choice menus share item geometry, collision bounds, scrolling, focus treatment, and long-label handling.
  • Migrated existing control consumers through those shared owners. Removed the duplicate selection component, redundant focus management, and the unused text-measurement dependency.
  • Kept the collapsed activity rail at a stable width with separated icon targets, anchored counts, and one expansion action.
  • Rebuilt Tools groups as continuous bordered surfaces with aligned header and child rows. Empty activity groups no longer add a second separator.
  • Integrated language settings into Overview and retained the legacy language route. Project details use a full-width disclosure with aligned version and status columns.
  • Reserved translated save-state geometry across idle, saving, success, error, and retry. Connector and market settings keep that owner mounted throughout the save lifecycle.
  • Shortened the demo strip and routine explanatory copy. Context help retains the relevant details at the owning control.

Data stability and motion

  • Kept historical-snapshot information in a stable chart-header help slot. Empty, loading, error, and populated chart states share the reserved plot area.
  • Preserved chart instances and visible ranges across theme changes. Effective palette resolution now includes the selected profile's recommendations for both the document and JavaScript chart consumers.
  • Kept same-account data during refresh failures, scoped asynchronous responses to their selected account, and disabled position-closing actions after an account-data read fails.
  • Aligned account summary fields, numerical columns, wallet tabs, snapshot details, and action headings. Corrected the hidden table heading that expanded the page beyond the viewport.
  • Centralized press, disclosure, popup, image-loading, and status feedback. Reduced-motion preferences and document visibility participate in the shared motion lifecycle.

Review boundary and commits

  1. 152a7a1aa: shared compact controls, navigation, dialogs, settings, and their consumers.
  2. ce7d5bc3d: account and chart state preservation, shared effective-palette resolution, and the existing interface guide.
  3. 0b2ae4749: aligned workspace child rows, stable menu summaries, cascading gaps, and the shared schedule controls.
  4. e9a2f7336: shared toolbar and News sizing, touch action targets, and session-menu focus restoration.

Merged the current upstream cadence editor through d72b55268. The upstream editor continues to own drafts, Save, Cancel, conflict reload, and retries.

The model-identity PR owns readable model names, manufacturer resolution, and catalog revalidation. The interface-profile PR owns the new Studio and Outline styles and the redesigned Broker Classic material. This PR keeps the current model-display contract and the existing profile list.

Review the shared primitives and tokens first, then the migrated settings and workspace consumers, and finally the account and chart behavior. Backend trading execution, order semantics, and provider routing retain their existing owners.

October 2 control refinement

  • Routed Issues filters and display actions through the existing Button owner. Small Select controls share the 32px desktop size; coarse-pointer targets remain 44px. A narrow toolbar wraps its actions into an aligned second row.
  • Applied the existing workspace action class to Chat, Auto Quant, and Auto Prediction creation buttons. All three retain compact desktop geometry and gain 44 × 44px touch targets.
  • Removed News input height overrides. The first toolbar now shares 36px desktop controls, its secondary toolbar shares 32px controls, and touch controls share 44px targets. Search, Clear, date validation, and refresh keep their existing behavior.
  • Removed the visibility rule that made a session's original action trigger unfocusable after opening a portal. Opacity and pointer events keep the existing quiet state; focus-within reveals the trigger when the dialog returns focus. Cancel and Escape restore focus to the originating More actions button.
  • Updated the existing interface guide to describe model identity in the launch summary.

This follow-up changes six files, with 16 additions and 20 deletions. It adds no dependency or new runtime abstraction.

Short-viewport and forced-color fixes

Commit 712a8f96b removes the local overflow override from confirmation dialogs and adds a platform forced-color focus outline. Shared AlertDialog content continues to own height limits and vertical scrolling. The patch changes two existing files, with eight additions and one deletion.

At 640 × 240, the confirmation popup has a 208px viewport and 297px of content. Focusing its actions scrolls the popup to expose both buttons. Tab reaches Delete; Escape closes the dialog and returns focus to the original session action. The scenario ends with cancellation.

Earlier clipped actions at 640 × 240 Current keyboard-reachable actions at 640 × 240
Earlier confirmation clipping Current confirmation scroll position

With forced colors active in the Default profile, keyboard focus renders a 2px solid system-color outline with a 2px offset. The rule uses the platform color and applies through the shared stylesheet.

Current forced-color keyboard focus

Related PRs and integration

Each branch targets dev and includes upstream 4813c1b89. Each branch builds independently. Shared consumers overlap. Suggested merge order: #1730, #1728, #1729. Integrate each subsequent branch with the merged changes and preserve each component's presentation owner.

Composed integration reference eff62db08 contains all three updated PR heads and the shared-file resolutions. The boundary-fix captures above use its matching production-demo source tree. The existing galleries below were captured on 2026-10-02 from integration 5eae22a85, using supplied demo data. Desktop captures use 1280 × 720; narrow captures use 390 × 844. The confirmation boundary captures use 640 × 240. Each caption identifies the view and state.

Refreshed screenshots

Touch toolbar alignment

Earlier filter targets: 32px Current shared targets: 44px
Earlier filter targets: 32px Current shared targets: 44px

Workspace action targets

Earlier creation target: 28 × 32px Current creation target: 44 × 44px
Earlier creation target: 28 × 32px Current creation target: 44 × 44px

News control rows

Earlier desktop controls Current desktop control rows
Earlier desktop controls Current desktop control rows
Earlier 32px touch inputs Current 44px touch controls
Earlier 32px touch inputs Current 44px touch controls
Current Tools, Overview, Quant, and Prediction views

Current Tools groups and shared row geometry

Current Overview and aligned project details

Current Auto Quant workspace

Current Auto Prediction workspace

Quant and Prediction captures cover the demo workspace entry. The managed Prediction Studio process and live research execution are outside the demo verification.

Verification

The current update was checked on 2026-10-02 against upstream dev at 4813c1b89.

  • Full UI suite passed on all three branches and the composed tree after upstream synchronization: 351 files and 2,022 existing behavior cases per run.
  • Final alignment and focus refinements passed the existing targeted behavior scenarios: 105 cases on this branch and 54 focus and session cases on the composed tree.
  • TypeScript and final production-demo builds passed on this branch and the composed tree.
  • Production browser measurements confirmed 36px primary desktop controls, 32px secondary controls, 44px touch targets, and zero document overflow at a 390px viewport.
  • Filter search, clearing, News search and refresh, nested menu keyboard navigation, archive cancellation, Escape focus return, and reduced-motion focus return were exercised in the production build.
  • All three model summary values shared their left origin and 20px line height; the composed parent menu remained 130px high with an 8px child gap.
  • Account cards and chart panels retained matching 411px heights across the three material profiles and a chart-period change.
  • Existing scenarios cover account selection, refresh failure, stale-response isolation, chart lifecycle, save-state geometry, and broker availability.
  • git diff --check passed.

The two branch suites initially ran concurrently and each reached the default 5-second timeout in the existing older-record Office scenario. Sequential runs use the same command and unchanged timeout: NODE_ENV=test node scripts/run-tests.mjs --path ui/src. Their final results are recorded above.

Interactive review

Open a session action menu, choose Archive, then cancel. Focus returns to the same action trigger. Repeat with Escape and reduced motion enabled. Move through nested runtime and model menus using the keyboard. Resize to a narrow touch viewport and inspect toolbar wrapping. Change chart periods and themes, expand Tools groups, and repeat a settings save.

Screenshots record resting states. Press feedback, disclosure continuity, focus return, loading transitions, and chart-view preservation need interaction in the running build.

The production build emits the existing large-chunk advisory. Bundle partitioning remains a separate performance boundary.

GitHub clean-build passed on this update. Vercel preview deployment requires authorization from the repository’s Vercel team.

@vercel

vercel Bot commented Oct 1, 2026

Copy link
Copy Markdown

@ZenAlexa is attempting to deploy a commit to the luokerenx4's Team Team on Vercel.

A member of the Team first needs to authorize it.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

# Conflicts:
#	ui/src/components/credentials/CredentialModal.tsx

This branch has not been deployed

No deployments
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