Fixes ~19 deterministic dashboard test failures pre-existing on origin/main
(non-blocking full-suite lane). Mix of real product fixes and stale-test
reconciliation; no appeasement (no widened timeouts, skips, or weakened
assertions).
Product CSS fixes (real regressions the guards caught):
- Info toast contrast: shadcn-custom light theme had white-on-#0284c7 (4.10,
below WCAG AA 4.5); enrolled it in the light-mode dark-text correction.
- 27 undefined CSS token references (typos/foreign tokens) renamed to canonical
defined tokens; defined the genuinely-intended --border-strong and
--right-dock-min/max-width.
- Raw rgba() box-shadow fallback tokenized to color-mix; dev-server mobile
header split into its own responsive rule.
Stale tests reconciled with intentional product changes:
- workflowColumns graduated to always-on (board-workflows unit test).
- workflow optional-steps source re-pointed to v2 optional-group nodes.
- command-center pricing docs (one doc gap filled: openai-codex:* keying).
- SetupWizardModal added detectWorkspace + workspaceMode/taskPrefix payload.
- board-mobile listener-count assertion → unmount no-throw behavior.
- CommandCenterControls / ThemeSelector: default theme relabeled "Fusion Legacy".
- ProjectOverview / WorkflowNodeEditor: header divider intentionally removed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add --view-header-min-height (~61px = space-lg*2 + 28px btn-sm row + 1px divider) and apply via ViewHeader + the bespoke Mission/Planning headers so action-bearing and title-only headers are the same height. Bring the views the sweep missed to canonical: Automations (.automations-embedded-header), Import Tasks (.github-import-modal__embedded-header), Goals (header via ViewHeader + fix main-pane inset so cards align under the title + fill height). Compound Engineering + Research inherit the token automatically.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- GitHub import preview shows the full issue/PR body (markdown) + metadata (list already returned full bodies; removed client truncation).
- Task-detail main view: constrain width (no right cutoff); move 'Back to board' into the gray header far right.
- Dock pop-out: smoother touch drag (touch-action:none + captured-element listeners); popping out closes the dock but keeps the floating modal; modal survives dock dismiss.
- Remove duplicate inner headers in Git Manager / Activity Log / Dev Server / Secrets (dock + pop-out chrome already titles them); keep the title on mobile narrow; relocate gm Refresh into the section tab strip.
- Git Manager tabs: one scrollable row of compact icon-only tabs (max visible, scroll if needed).
- List quick entry is single-line (not tall) via singleLine prop; Board unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Clicking a board card opens its detail in a full main-content view (replacing the board) with a 'Back to board' button, instead of the TaskDetailModal overlay. Only the Board entry point changes; list-view embed, right-dock cards, and other openDetail callers keep the modal. New 'task-detail' task view; embedded TaskDetailContent prefers the live task. Works within the mobile shell (swipe-back reverts to board). Tests updated (70 pass).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Make dashboard toast status text readable across themed dark and light modes.
- Add toast text tokens and Shadcn-specific success/info color overrides that preserve contrast.
- Cover success, error, and info toast contrast across all Shadcn variants and mobile toast styling.
- Add a patch changeset for the published Fusion package.
Files changed:
.changeset/fn-6858-toast-contrast.md | 5 +
.../app/__tests__/toast-theme-contrast.test.ts | 320 +++++++++++++++++++++
packages/dashboard/app/styles.css | 44 ++-
3 files changed, 368 insertions(+), 1 deletion(-)
Fusion-Task-Id: FN-6858
Fusion-Task-Lineage: 1c06e346-9269-4965-a3ae-4ac02b43188e
Align the left sidebar selected and resize states with each active dashboard theme.
- Switch active left-sidebar item color and background to the shared --accent token.
- Update the resize-handle focus and hover accent to follow theme accent colors.
- Add a CSS regression test and documentation for the theme-accent invariant.
- Define shared typography tokens and replace an optional-step danger fallback with an existing error token.
Files changed:
docs/dashboard-guide.md | 2 +-
.../left-sidebar-active-accent.css.test.ts | 38 ++++++++++++++++++++++
.../dashboard/app/components/LeftSidebarNav.css | 10 +++---
.../app/components/WorkflowOptionalStepsPanel.css | 2 +-
packages/dashboard/app/styles.css | 3 ++
5 files changed, 48 insertions(+), 7 deletions(-)
Fusion-Task-Id: FN-6830
Fusion-Task-Lineage: add8e9cd-4b91-45a1-a848-a54dd1083723
Tokenise the mobile mailbox tab font size while defining the shared xs dashboard token.
- Replace both mobile mailbox modal and mailbox view tab font sizes with var(--font-size-xs, 0.8rem).
- Define --font-size-xs in the dashboard typography token set.
- Document the FN-6703 styling contract with FNXC comments.
Files changed:
packages/dashboard/app/components/MailboxModal.css | 5 +++--
packages/dashboard/app/styles.css | 3 ++-
2 files changed, 5 insertions(+), 3 deletions(-)
Fusion-Task-Id: FN-6703
Fusion-Task-Lineage: af2073bd-fdde-497e-896a-ce9906459c6a
Stabilize Command Center tablet layouts by restoring a bounded flex scroll chain and responsive chart grids.
- Add tablet-specific Command Center CSS to keep the tabpanel as the scroll owner and prevent inline document overflow.
- Collapse live strips, overview charts, Team chart grids, and stat grids within tablet viewport widths.
- Cover tablet layout invariants across overview, Team, Tokens, Tools, and Activity areas with regression tests.
- Document the tablet rendering invariant in the dashboard guide.
Files changed:
docs/dashboard-guide.md | 1 +
.../components/command-center/CommandCenter.css | 41 ++
.../__tests__/CommandCenter.tablet-layout.test.tsx | 463 +++++++++++++++++++++
.../app/components/command-center/areas/areas.css | 19 +
packages/dashboard/app/styles.css | 14 +
5 files changed, 538 insertions(+)
Fusion-Task-Id: FN-6679
Fusion-Task-Lineage: 2cd6bfca-2a52-47ed-ad7b-c8c85343bd70
Add missing dashboard theme tokens so surface and border styling resolves consistently across themes.
- Define --surface-1, --surface-2, and --border-subtle in base and light dashboard theme blocks.
- Keep the new tokens derived from existing theme variables with color-mix for dark and light mode consistency.
- Add a dashboard CSS guard that requires these tokens in both theme blocks without raw color definitions.
Files changed:
.../dashboard-component-color-tokenization.test.ts | 81 ++++++++++++++++++++++
packages/dashboard/app/styles.css | 10 +++
2 files changed, 91 insertions(+)
Fusion-Task-Id: FN-6678
Fusion-Task-Lineage: a866af20-fbbb-46c6-9403-f395708bcd3f
Replace raw dashboard RGB alpha colors with color-mix token expressions and guard the global CSS surface.
- Converted global theme shadow, state, mission, event, and theme-data alpha colors from raw rgba() to color-mix() expressions.
- Added CSS fixture loading for theme-data.css and a regression test banning raw rgb/rgba outside var() fallbacks across global app CSS.
- Documented the stricter dashboard styling rule for global and theme token CSS.
Files changed:
docs/dashboard-guide.md | 2 +-
.../__tests__/global-theme-css-no-raw-rgba.test.ts | 68 +++
packages/dashboard/app/public/theme-data.css | 573 +++++++++++----------
packages/dashboard/app/styles.css | 49 +-
packages/dashboard/app/test/cssFixture.ts | 7 +
5 files changed, 389 insertions(+), 310 deletions(-)
Fusion-Task-Id: FN-6489
Fusion-Task-Lineage: 7c466971-d15c-4382-a24b-1b32eea71974
Screen-reader-only spans were position:absolute with no offsets, so inside
the horizontally-scrolled kanban columns they rendered off-screen-right and
ballooned documentElement.scrollWidth to ~1388px on a 390px viewport. That
triggered iOS Safari shrink-to-fit zoom-out (the "cut off, zoomed out" view,
which persisted into list view) and let the whole page pan, dragging columns
off-screen. Pinning the utility to its containing block origin (top/left: 0)
keeps the document locked to the viewport; the span stays 1px and clipped.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ensure workflow-mode boards fill the mobile viewport while preserving internal column scrolling.
- Reassert the mobile flex fill chain for project content, workflow board wrappers, and workflow columns.
- Extend mobile board regression coverage across empty/populated workflow states with and without the toolbar.
- Document the workflow board collapse root cause and add a transient temp-dir isolation guard test.
Files changed:
docs/dashboard-guide.md | 1 +
.../ui-bugs/mobile-workflow-board-fill-chain.md | 61 +++++++++++++
.../__tests__/board-mobile-initial-render.test.tsx | 101 +++++++++++++++++++++
packages/dashboard/app/styles.css | 52 +++++++++++
scripts/__tests__/check-test-isolation.test.mjs | 23 +++++
scripts/check-test-isolation.mjs | 12 ++-
6 files changed, 249 insertions(+), 1 deletion(-)
Fusion-Task-Id: FN-6397
Fusion-Task-Lineage: ddee773d-6d3a-46d1-b1c7-f601a961365e
Contain the mobile dashboard document viewport while preserving intended inner horizontal scrollers.
- Lock mobile html/body/#root and fullscreen overlay chrome to the viewport inline axis.
- Default mobile touch handling to vertical-only panning and opt board/code/table scrollers back into horizontal gestures.
- Add CSS fixture regression coverage plus a solution note for mobile horizontal pan containment.
Files changed:
docs/solutions/ui-bugs/mobile-horizontal-pan-document-viewport-containment.md | 62 +++++++++++
packages/dashboard/app/__tests__/mobile-horizontal-pan-containment.test.ts | 116 +++++++++++++++++++++
packages/dashboard/app/styles.css | 47 +++++++--
3 files changed, 219 insertions(+), 6 deletions(-)
Fusion-Task-Id: FN-6365
Fusion-Task-Lineage: 4673da28-1438-4ea5-b32c-25bc52285273
Tokenize the last non-token dashboard rgba() styles and guard them with regression coverage.
- replace remaining modal, sidebar, tooltip, dependency dropdown, and refine menu raw rgba() usages in styles.css with color-mix() design tokens
- align overlay, background, and shadow treatments with existing semantic CSS variables instead of hard-coded rgba() values
- add a CSS fixture regression test that bans non-:root raw rgba() usage and verifies the converted selectors stay tokenized
Files changed:
.../__tests__/styles-css-rgba-tokenization.test.ts | 122 +++++++++++++++++++++
packages/dashboard/app/styles.css | 14 +--
2 files changed, 129 insertions(+), 7 deletions(-)
Fusion-Task-Id: FN-6190
Fusion-Task-Lineage: 478465a7-8ec4-4482-8e1c-478d86c1ac08
Ensure the reliability view fills its flex container across loading, populated, and error states.
- add full-height styling for reliability loading and error states
- include reliability view in shared min-height reset for app content containers
- expand reliability view tests to assert width and height fill on desktop and mobile
Files changed:
packages/dashboard/app/components/ReliabilityView.css | 7 +++++++
.../app/components/__tests__/ReliabilityView.test.tsx | 14 ++++++++++----
packages/dashboard/app/styles.css | 3 ++-
3 files changed, 19 insertions(+), 5 deletions(-)
Fusion-Task-Id: FN-6112
Fusion-Task-Lineage: c5b2bd85-4024-4f88-b64d-dbc90b3cf2ed
Spinners, status-dot pulses, and entrance animations across the dashboard
rendered frozen: transition tokens (--transition-slow: 0.3s ease) bundle a
duration AND an easing, and 15 animation declarations reused them as bare
durations. Substituting "0.3s ease" next to an explicit easing (linear,
ease-in-out, ease-out) — or inside calc() — makes the declaration invalid at
computed-value time, which per spec resolves the entire property to
animation: none with no console error.
- add duration-only tokens (--duration-instant/fast/normal/slow) and derive
the --transition-* tokens from them so the two cannot drift
- switch all 15 broken animation declarations across 14 CSS files to the
duration tokens, preserving effective durations
- add animation-duration-tokens.css.test.ts: sweeps every app CSS file and
fails on transition-token-as-duration, calc() over a transition token, and
transition token in animation-duration
Verified in a real browser against the production build: previously frozen
.status-dot--connecting and calc-based NodesView spinners now report running
animations; transition shorthands still resolve to "0.15s / ease".
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The 769–1024px breakpoint forced 6 columns into the visible width with
`grid-template-columns: repeat(6, minmax(0, 1fr))` and `overflow-x:
hidden`, collapsing columns to ~130–170px on Android tablets and
stacking task card titles one word per line. Switch to
`minmax(260px, 1fr)` with `overflow-x: auto` so columns keep a readable
minimum width and the board scrolls horizontally, matching desktop.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- touch-action is per-element, not inherited. Setting `pan-x pan-y` on
html/body alone didn't stop the kanban board: pinching on `.board`
reads `.board`'s own touch-action (auto by default), which permits
pinch-zoom. Switch to `* { touch-action: pan-x pan-y }` inside the
mobile media query so every element opts out of pinch by default;
element-specific overrides (touch-action: none on resize handles,
drag-source rules on TaskCard, etc.) still win on specificity.
- Add `overscroll-behavior: none` to html/body to prevent Chrome's
rubber-band scroll, which was letting users pull the page up to
expose empty space above the dashboard despite overflow:hidden.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two Android-specific fixes:
1. Keyboard dismissing in main chat. App.tsx derives `mobileKeyboardOpen`
from useMobileKeyboard and uses it to gate the
`project-content--with-mobile-nav` / `--with-footer` className
assignment plus MobileNavBar rendering. When the soft keyboard opened
on Android, those classes were removed and the nav unmounted, shrinking
padding-bottom by ~80px in a single render. Android Chrome treats the
resulting jump of the focused chat input as the focus target moving and
instantly dismisses the keyboard. With interactive-widget=resizes-content
set on Android, the layout viewport itself shrinks with the keyboard, so
the hide-nav-on-keyboard pattern was redundant on Android (and harmful).
The whole pattern is now gated to iOS via isIOS(). iOS path is unchanged.
2. Pinch-zoom on kanban. Android Chrome ignores user-scalable=no for a11y,
and kanban's overflow-x:auto columns combined with the inflated ICB
produce a broken visual when the user zooms out. Adds
touch-action: pan-x pan-y to html,body inside the mobile media query
(keeps scroll panning, blocks pinch-zoom). Chat and MissionManager were
unaffected before because they don't expose a wide horizontal
scrollable region.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Broaden mobile media query to include (max-height: 480px) so landscape
phones (which exceed 768 CSS px wide) still render the bottom nav and
mobile board layout instead of desktop horizontally-scrollable columns.
- Guard useMobileKeyboard against pinch-zoom (vv.scale > 1) — Android
Chrome ignores user-scalable=no, and a focused textarea + zoom was
false-positiving keyboard-open and hiding MobileNavBar.
- Read documentElement.clientHeight instead of stale window.innerHeight
when computing keyboard overlap (Android multi-window can leave
innerHeight cached at a wildly different value than the actual layout
viewport — observed 2848 while html was 797).
- Add interactive-widget=resizes-content to the viewport meta so Android
Chrome shrinks the layout viewport with the soft keyboard, matching iOS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Add core settings schema/types support for testMode with model-resolution override handling
- Enforce engine session lane overrides in test mode with targeted helper coverage
- Add dashboard settings toggle plus persistent test-mode banner and related component tests
- Update settings documentation and parity/roundtrip tests for the new test mode behavior
- Drop the tablet-tier `.board` grid rule that crammed 6 columns into
≤1024px viewports with no min-width, scrunching column content to
unreadable widths. Tablets now use the default `minmax(300px, 1fr)`
and scroll horizontally like desktop.
- Drop `maximum-scale=1.0, user-scalable=no` from the viewport meta.
Combined with `initial-scale=1.0` those flags trigger Android Chrome
layout bugs in multi-window mode; the Capacitor-feel justification
isn't worth the breakage in a browser-rendered dashboard.
- Broaden the existing iOS scroll-snap stabilization in Board.tsx from
`(max-width: 768px)` to any touch-primary device, and re-run it the
first time tasks populate so Android tablets get the same first-cards-
loaded reflow that mobile already had.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a tablet board override to fix overflow regressions on the dashboard, with a corresponding test covering the regression path and a hardening fix to the parsing logic.
Fusion-Task-Id: FN-5281
Completes Step 5 of FN-4525 by enforcing consistent chip heights in TaskCard components, adding CSS rules in both the component and global stylesheets with corresponding test coverage.
Fusion-Task-Id: FN-4525
