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
Consolidated light-theme token ownership from `CustomModelDropdown.css` into `ThemeSelector.css` and `styles.css`, completing the isolation of theme-related CSS across the dashboard. Added a corresponding test fixture for `CustomModelDropdown`.
Fusion-Task-Id: FN-4022
- Add --accent-text token definitions in global and per-theme CSS blocks for consistent readable foreground contrast
- Extend theme coverage tests to assert accent text token presence across generated theme variants
- Add a changeset for @runfusion/fusion documenting the theme token fix
- Update agent guidance reference to include the new token requirement
Fusion-Task-Id: FN-3725
The merge completes the plugin toggle rendering fix (FN-3723) by verifying the quality gates and adding the required changeset for the patch release.
Fusion-Task-Id: FN-3723
Merges FN-3396's full Cursor CLI provider integration (Steps 1–4): defines a CLI-backed provider contract, adds the `fusion-plugin-cursor-runtime` plugin package with process management and runtime probes, wires dashboard auth flows and UI (ProviderCard, onboarding modal, settings), and bundles the
Fusion-Task-Id: FN-3396
Completes Step 3 of FN-3618 by surfacing AI provider icons throughout the Settings modal and model dropdowns, updating both the component styles and adding integration and unit tests to cover the new icon display behavior.
Fusion-Task-Id: FN-3618
The @keyframes spin and .animate-spin rules were incorrectly placed
inside the first :root {} block, which is invalid CSS — @keyframes
cannot be nested inside selector blocks. Browsers silently ignore
them in that position, so the spinners would still get stuck on pages
without component CSS loaded.
Moves the rules to the stylesheet top level between the two :root
blocks. Also fixes the mobile-css regression test that parses the
first :root block with a non-greedy regex.
Addresses review feedback from Greptile (P1) and CodeRabbit on PR #40.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
