Prototype portal trade investigation interface
Build a standalone HTML/CSS/JavaScript mockup for a staff-only trade investigation screen in the player portal, following its existing Eclipse theme. Related structured logging scope: tsk_5vmwwawx7u. This is a UI prototype only; no backend, production integration or logging implementation. Research-led layout revision requested: apply NN/g data-table guidance (human-readable identifiers first, related values adjacent, visible sorting and scan support), Carbon table toolbar/details guidance, and PatternFly primary-detail/filter patterns. Replace the cramped three-column summary and always-tall inspector with separate participant/items/credits/time/outcome columns, consolidated filters, sortable results and a closable detail panel. Preserve search context, support mobile return-to-results and progressive disclosure of technical IDs/timeline. Keep visual copy restrained. Revision implemented and browser-verified: compact portal chrome and grouped toolbar; separate participants/items/credits/time/outcome columns; sticky headers, subtle zebra/hover rows, numeric/time/name sorting with aria-sort; closable inspector preserving filters and sort; progressive disclosure of item IDs/record information and completed timeline; uncertain persistence warning/timeline visible by default; mobile primary/detail navigation with back action and reduced comparison columns. Chrome checks passed at 1500,1250,1100,1050 and390px, including empty-state recovery, two-participant search, all select options, sorting and keyboard Enter/Escape focus restoration. No captured console or network errors. Export announcement passed; downloaded JSON contents remain unverified. Updated files remain in /tmp/prk-trade-investigation-mockup; local preview http://127.0.0.1:8876/. Research sources: https://www.nngroup.com/articles/data-tables/ ; https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines ; https://www.patternfly.org/components/drawer/design-guidelines/ ; https://www.patternfly.org/patterns/filters/design-guidelines/ . Acceptance: fictional data clearly labelled; search by participant name/ID, counterparty and item; filter exchange kind and outcome; inspect both directions of items/credits, item identities and bag contents, and truthful persistence/failure timeline. Responsive layout and keyboard-accessible controls. Validate filtering, selection, empty state and mobile layout in a real browser. Delivered outside repository under /tmp/prk-trade-investigation-mockup (index.html, style.css, app.js and copied portal assets). Served locally at http://127.0.0.1:8876. User requested removal of explanatory prototype labels: removed banner, marketing subtitle, demo environment and concept footer; retained one small Sample data footer. Chrome verified desktop and 390px mobile search/counterparty filters, type/outcome/date filters, mouse row selection, bag contents, uncertain persistence warning, empty state and reset. Fixed form reset method shadowing and blur-triggered row rerender during validation. No exercised functional UI failures remain. Export announcement verified, actual browser download contents unverified; one unidentified resource 404 remains nonblocking. No production integration or repository changes.
Checklist
2 of 2 complete- Build and browser-verify responsive fictional trade search, filters, exchange details, bag contents, persistence timeline and empty state.
- Apply researched table/toolbar/primary-detail patterns and browser-verify sorting, search/filter preservation, inspector close/reopen, details disclosure, empty state and mobile return navigation.
- Area
- Project Rubi-Ka
- Project
- engines
- Kind
- Feature
- Task ID
tsk_cvxha43htq- Updated