## Summary
Gives dashboard integrators (plugin views, embedded panels, theming
tools) a supported way to match the dashboard's look and to layer
overlay UI correctly — instead of scraping computed styles and guessing
z-index values. This implements the CSS-token bridge slice of
`docs/proposals/2026-07-01-dashboard-theme-plugin-system.md`.
Two additions, both inert unless used:
1. **Documented theme-token contract.** A "Theme tokens" section in
`docs/dashboard-guide.md` (referenced from `docs/PLUGIN_AUTHORING.md`)
declares the stable set of CSS custom properties — colors, surfaces,
status colors — that integrators may read. Tokens resolve to raw color
strings (e.g. `#161b22`) in every theme, including the newer ones. A
sync test (`theme-token-contract-docs.test.ts`) parses the doc's token
table and asserts each documented token has a real definition in the
dashboard CSS, so the contract cannot silently drift from the code.
2. **Overlay layering surface.** Overlay-style UI (palettes, pickers,
floating panels) currently has no supported way to sit above the
floating-window stack — the effective max z-index is runtime state
inside `floatingWindowStack.ts`. This PR exposes it:
- `--fusion-max-z` on `:root` — kept in sync by `floatingWindowStack`
(written at module load and after every `nextFloatingZ()` claim), so it
always reflects the true top of the dashboard-managed stack. Boot/floor
value is `11001`, chosen to clear the highest statically-declared layer
(the body-portaled model-combobox dropdown at `z-index: 11000`).
- `#plugin-overlay-root` — an empty, `pointer-events: none` sibling of
`#root` stacked at `calc(var(--fusion-max-z) + 1)`. React never renders
into it, so it is hydration-safe; integrators portal into it and
re-enable pointer events on their own elements.
- The layer bands (base UI / floating windows / toasts / dropdown /
overlay root) are documented in `styles.css` and the guide, and a guard
test (`dashboard-max-z-guard.test.ts`) scans the structural + component
CSS and fails if any static `z-index` is ever introduced above the floor
— keeping the contract honest as the codebase evolves.
## Behavior
No visual or behavioral change for existing users: `floatingWindowStack`
still returns the same values from `nextFloatingZ()`; the overlay root
is empty and click-through; tokens were already defined — this only
documents and guards them.
## Tests
- `theme-token-contract-docs.test.ts` — docs ↔ CSS sync
(non-tautological: anchored matching against real definitions).
- `floatingWindowStack.max-z.test.ts` — `--fusion-max-z` boot value and
live tracking as the stack claims z-indexes.
- `dashboard-max-z-guard.test.ts` — no static dashboard z-index above
the floor (decorative `public/theme-data.css` INT_MAX scanline overlay
deliberately excluded; it's non-interactive grain, documented in the
test).
- Changeset included (`minor`, `category: feature`). Typecheck clean.
## Open question for maintainers
The token is named `--fusion-max-z`. The existing scale uses `--z-*`
names (`--z-dropdown`, `--z-modal`) on a lower band — happy to rename to
`--z-max` / `--z-plugin-overlay` or anything that fits your convention;
the name is the only bikeshed here, the sync mechanism is independent of
it.
## AI assistance disclosure
Parts of this change were authored with AI assistance (Anthropic's
Claude); the commit carries a `Co-authored-by` trailer accordingly.
Everything was human-reviewed before submission, and the test suite and
typecheck were run locally against the current `main`.
If squash-merging with a rewritten message, please keep the attribution:
```
Co-authored-by: Claude <noreply@anthropic.com>
```
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added stable dashboard theme tokens for consistent plugin/integration
styling.
- Introduced a dedicated plugin overlay mount point with click-through
defaults and an overlay stacking ceiling.
- Overlay z-index now stays in sync with floating window layering
automatically.
- **Documentation**
- Added an explicit stable “theme token contract” and “overlay layering
contract,” including interaction and z-index usage rules and deprecation
expectations.
- **Bug Fixes**
- Improved reliability of plugin overlay stacking so overlay content
renders above intended dashboard layers.
- **Tests**
- Added guards validating CSS z-index ceilings and enforcing the
documented theme token contract.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude <noreply@anthropic.com>
Add the Shadcn color family to dashboard theme selection and persisted theme validation.
- Register blue, green, red, purple, pink, orange, yellow, mono, and black Shadcn theme IDs across core and dashboard selectors.
- Add swatches and CSS token blocks for light and dark variants, including bootstrap loading coverage.
- Document the expanded theme count and include a minor changeset for the published CLI package.
Files changed:
.changeset/shadcn-color-variants.md | 5 +
docs/dashboard-guide.md | 2 +-
packages/core/src/types.ts | 10 +
.../dashboard/app/components/ThemeSelector.css | 126 +++
packages/dashboard/app/components/themeOptions.ts | 9 +
.../dashboard/app/hooks/__tests__/useTheme.test.ts | 41 +
packages/dashboard/app/index.html | 2 +-
packages/dashboard/app/public/theme-data.css | 1177 ++++++++++++++++++++
8 files changed, 1370 insertions(+), 2 deletions(-)
Fusion-Task-Id: FN-6756
Fusion-Task-Lineage: 143e717a-9718-419f-a6c5-34305e53c65d
Some Android Chrome builds (multi-window / split-screen / certain WebViews)
leave window.innerWidth/Height stuck larger than the actual rendered canvas.
DOM, body, and visualViewport report the true dimensions, but position:fixed
uses the ICB, pinning fixed-bottom elements offscreen below the visible area.
JS-side meta override (setAttribute and full replacement) does not force
Chrome to recompute the ICB on those builds.
index.html now publishes the ICB→visualViewport delta as CSS variables
(--icb-bottom-offset, --icb-right-offset) on <html>. MobileNavBar.css and
ExecutorStatusBar.css consume them so the bars pin to the visible viewport
edge regardless of ICB drift. Math is visualViewport-relative so it also
handles pinch-zoom in (offsets compensate) and pinch-zoom out (clamp at 0).
Healthy browsers see 0px and behave unchanged.
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>
After a long session of guess-and-check without remote debugging, none
of the viewport/portal/keyboardOpen interventions cleanly fixed the
Android Chrome multi-window layout bug. Reverting index.html,
MobileNavBar.tsx, Board.tsx, and the FN-5476 overlap test back to
their pre-session state. The board-squeeze fix in styles.css is kept
(confirmed working).
The remaining workaround: turn off "Request Desktop Site" on the
Android tablet for an acceptable layout. Revisit with chrome://inspect
remote debugging when available.
Reverts (squashed):
- 49839245e portal MobileNavBar
- 4bd9711e8 drop keyboardOpen guard
- d2e31dc10 don't fight pinch zoom
- f881ed22e visualViewport.width override
- 301e0a050 self-healing overlay
- 16b18bf33 publish mNavDebug
- d3dff9442 extend vpdebug
- a9094d79d restore overlap test
- 94bc43e04 restore FN-5476 observer
- 5a9095e54 re-drop viewport flags + add vpdebug
- and the index.html/Board.tsx portions of fbf7e2cb4
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
visualViewport.resize fires on pinch-zoom, not just window-size change.
The previous viewport-override would re-assert initial-scale=1.0 on
every pinch event, snapping the user's zoom back to 1.0 instantly.
Restrict the listener to orientationchange + initial settle timers
so pinch-zoom is left alone after page load.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
If something (React portal, modal mount, third-party widget) detaches
the overlay or covers it with a later body child, the overlay now
re-appends itself to the end of document.body on every update tick.
Lets us capture the post-task-load state even when something is
fighting it for top-of-body paint order.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Surface the live mode / modalOpen / keyboardOpen / footerVisible / view
values that MobileNavBar uses for its early-return so the ?vpdebug overlay
can show which one is hiding the bar on Android. Also dumps the
.project-content className so we can correlate with `--with-mobile-nav`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add mNav (bounding box + display/visibility/z-index/opacity),
mq768 (mobile media query state), dialogs (open modal count), and
focused element to the ?vpdebug overlay so we can see at a glance
which condition is hiding the bottom nav on Android.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds retry-reset logic that clears the user-paused flag on tasks, ensuring they can resume automatically after a retry is triggered, with regression tests covering the behavior across the CLI extension and core manual-reset module.
Fusion-Task-Id: FN-5485
FN-5204 reintroduced `maximum-scale=1.0, user-scalable=no` into the
viewport meta as part of unrelated test-mode work, undoing the
Android-tablet fix from fbf7e2cb4. Drop them again.
Also add a `?vpdebug` query-flag-gated overlay that prints live
window / visualViewport / html / body / #root / #board bounding
boxes to a fixed top-right panel. Diagnostic only — remove once
the remaining Android tablet cut-off case is understood.
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 `/tasks` deep-link that rewrites legacy hash-style URLs on the client and redirects root-absolute paths on the server (FN-3792), along with a new `fusion-plugin-reports` scaffold including manifest, settings, and notification service improvements (FN-3778, FN-3790); also adds a session switch
Fusion-Task-Id: FN-3792
Merges two features: FN-3039 bundles a 2.5MB Nerd Font glyph asset into the dashboard and updates the terminal to prioritize the bundled font, improving icon rendering across environments; FN-3035 tightens insight tool type definitions and adds corresponding tests. The CLI extension gains new tools
Fusion-Task-Id: FN-3039
This merge adds research settings to the settings modal and dashboard (FN-2839, FN-3029), implements a dashboard font scale setting with persistence and documentation (FN-3027), refactors AgentDetailView with a new AgentLogViewer CSS module (FN-2839), and improves NewAgentDialog with custom model dr
Fusion-Task-Id: FN-3027
- Fix URL resolution in theme-data.css so it loads correctly from index.html
- Reuse theme data link element across theme updates instead of recreating it
- Update useTheme hook to properly manage theme link lifecycle
- Add comprehensive tests for useTheme hook URL handling
- Update theming documentation with URL resolution details
- Fix CSS URL resolution in memory when loading with file:// protocol
- Add DASHBOARD_URL re-export from renderer module for backward compatibility
- Update main.test.ts to use correct renderer mock reference (rendererMocks vs mocks)
- Document the URL resolution bug fix in memory
- Extract all color-theme CSS variable blocks from styles.css into a dedicated theme-data.css file
- Add dynamic loading of theme-data.css for non-default color themes via useTheme hook
- Preload theme-data.css for the default theme in index.html to avoid flash
- Update status-colors-theme tests for dynamic theme loading behavior
- Update memory and README with theme-data.css file location
- Add rust, copper, foundry, carbon theme IDs to core types
- Register themes in ThemeSelector component and flash-prevention logic
- Add CSS theme blocks and swatches for all four new themes
- Add ThemeSelector unit tests for the new themes
- Update memory documentation with new theme count
- Add ember theme to COLOR_THEMES array in types.ts
- Add ember theme CSS variables in styles.css
- Add ember theme swatch preview in ThemeSelector component
- Add ember to validThemes validation in index.html
- Add ThemeSelector tests for ember theme
- Add 8 new theme IDs to COLOR_THEMES in core types
- Add CSS blocks with color swatches for all 8 new themes
- Update ThemeSelector to display new theme options
- Register themes in index.html validThemes array
- Add comprehensive tests for new theme support
- Include changeset for @gsxdsm/fusion package
