Amber Console: coherent UI design system across the app - #158
Merged
Conversation
DESIGN.md + PRODUCT.md document the system (chosen via a 3-direction, 3-judge panel). brand-theme.scss becomes the single source of color truth (light-first, one dark block, --ls-* system tokens); index.scss keeps the frozen forge token names as pure aliases and drops its competing dark ramp and Vite template leftovers. IBM Plex Sans/Mono replace Roboto/Inter/Orbitron. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Shared layer: styles/primitives.scss (.ls-tab/.ls-badge/.ls-chip/ .ls-icon-btn/.ls-console/.ls-select/.ls-rdg/.ls-panel/.ls-tooltip/ .ls-diode and friends, token-only, zero !important) plus components/ui (StatusDiode, Badge, Spinner, Pagination, Readout). FilterDataTable fork merged into the canonical Explore variant with a standalone mode for Setup/Preview; legacy components/FilterDataTable deleted. CompareClusters deduped against Compare.module.css. All surfaces swept: nav/home shell, Explore (reticle + telemetry signatures, floating HUD panels, tokenized canvas chrome via useColorMode + getComputedStyle), search/tables (rdg theming through --rdg-* vars), Setup, Compare (shared Reticle component), Jobs/Settings (.ls-console terminals, StatusDiode job states, mono elapsed readouts), and misc plots. Hardcoded chrome colors, emoji icons, Orbitron, and !important skins removed; data-viz palettes untouched. Build, eslint (0 errors), and vitest (103 passing) verified. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Native text inputs/textareas get a token baseline (Setup scope form rendered browser-default chrome) - forge secondary-clear buttons re-anchored to text tokens: the clear variant uses --color-interaction-secondary as text color, which this theme assigns a surface neutral, leaving Nav Settings and job Dismiss labels invisible in both modes - .main-nav gets box-sizing: border-box so its padding no longer pushes the Settings control past the viewport edge - .ls-rdg --rdg-* theming vars moved onto .ls-rdg .rdg where they actually take effect (rdg re-declares them on its root element) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Systemic: forge secondary-outline buttons re-anchored to text tokens (same surface-neutral-as-text trap as the clear variant — Settings' Update buttons were invisible in both modes); nav Settings trigger is now the spec'd 28x28 ghost icon-button; wordmark excluded from the active-route underline and its diode runs at 6px; diode glow restricted to pulsing (live) diodes. Per page: Jobs command arrays joined with spaces; Setup step diodes reflect completion (no false busy pulse) with the active step carried by label weight; Scope delete is the filled destructive treatment and run IDs render mono in card titles; Compare panes no longer clip their bottom border/reticle ticks, k/threshold values and counts are mono tabular with digit grouping, sliders align; CompareClusters gets an empty state for null comparisons, an honest right-select placeholder, full-width single pane, and token-driven hover markers (TransitionView too); Explore's numbered map markers read --ls-color-selection instead of kill-listed #2ecc71/#111, table header fill dropped, right gutter added; HFUpload and delete-model buttons on spec treatments; Export panel headers and file rows aligned; DataMapPlot checkboxes visible in dark, labels/inputs on spec, plots count mono with an empty state; native text inputs everywhere carry the token baseline. Build, eslint (0 errors), vitest (103 passing) verified; all 9 routes re-screenshot in light+dark. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Features: - Setup steps (Embed/UMAP/Cluster/Label) collapse their creation form behind a "+ New …" trigger when user-generated artifacts already exist; expanded by default otherwise. Default label sets don't count as user-generated, so Label Clusters opens its form until you've actually labeled. Forms stay open while a job is running. Shared CreationPanel component with a grid-rows collapse. - Clicking a point in the Setup preview map opens a detail drawer for that row (PointDetailContent decoupled from Explore's ScopeContext; new standalone PreviewPointDetail wrapper with Escape/X close). Nits: - Explore chart-settings trigger is now a bordered floating-HUD button (amber when open) instead of a bare ghost icon - Input borders lightened: 1px border-1 baseline, forge Input's 2px border thinned, .ls-select to match - Scope selector no longer touches the subnav's bottom border - Active setup step gets an amber wash + underline - Embedding card: content-sized Proceed button (navigate rows stop stretching children), New Embedding stays primary, roomier card spacing (setup items get space-3 padding, info rows space-2 gap) - Settings modal stacks above the color-by panel and detail drawer (RE_modal_portal gets z-modal) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- SubNav scope selector switches from forge Select to the native .ls-select used by every other form control — kills the offset chevron poking out of the box; mono machine-fact voice kept, capped at 480px so long model ids truncate - Adjacent .ls-badge/.ls-chip siblings get breathing room via a sibling-margin rule in primitives (cluster cards' "EVOC" "ON HI-DIM" tags no longer touch) - Explore loading is no longer blank space: FilterContext starts loading=true (the first filter run can't begin until the scope hydrates), the map pane shows a scrim + LOADING MAP spinner until scopeRows arrive, and the router Suspense fallback is a centered shared Spinner instead of an unstyled "Loading..." div Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Resolves the Cluster.jsx conflict by porting main's new functionality (seed input, EVoC base-clusters input, assign-noise Switch, and the reassigned/unclustered noise suffix on cluster cards) into the restyled form — help-circle icons instead of emoji tooltips, token gap on the switch row. Main's new combined-export button moves onto the forge secondary treatment, and the Umap/Cluster submit buttons stay primary to match the collapse-panel convention. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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.
What this is
A full visual revamp of the web UI onto one design system — Amber Console — replacing the six coexisting styling approaches that had accumulated. The brand copper becomes amber phosphor: stamped copper on warm paper in light mode, emissive amber on graphite in dark mode. IBM Plex Sans for UI, IBM Plex Mono for machine facts (run IDs, counts, paths, coordinates). Orbitron is retired; the wordmark is Plex Mono 600 uppercase with a status diode.
The complete spec lives in
DESIGN.md(tokens, component specs, motion, kill list).PRODUCT.mdholds product context.Structure
latentscope--brand-theme.scss+index.scss): all color truth in one file, light/dark viaprefers-color-scheme; react-element-forge's ~120 token names kept frozen and re-aimed; new--ls-*system for spacing/radius/z/motion/type.styles/primitives.scss+components/ui/): tabs, badges/chips, icon buttons, consoles, selects, react-data-grid theming, panels, tooltips, spinners/scrims, status diodes — plus StatusDiode, Badge, Spinner, Pagination, Readout components.getComputedStyle+useColorMode; data-viz palettes untouched.Also in here (from review rounds)
Verification
npm run production, eslint (0 errors), vitest 103/103 across every roundKnown follow-ups
datasetIdwhere DataTable expects a dataset object (pre-existing functional bug, out of scope here)🤖 Generated with Claude Code