Refresh canonical live-task claims at serialized scheduler, planning, and merge admission boundaries, including workflow-step leases and reservation handoffs. Back off capacity-denied merges safely across abort and restart lifecycles. Render queued planning cards in the header badge family with compact reason-specific icons.
Closes#2915. `.agent-detail-overlay` has had **no renderer** since
FN-8619 moved Agent Detail onto `FloatingWindow`, whose `modal` host
owns the scrim (`.floating-window-overlay--modal`). Four CSS sites plus
one inert mobile `@media` rule.
## Why this sat unfixed, and what unblocked it
I filed this earlier and deliberately did **not** delete the CSS,
because two *passing* guards pinned a selector list naming the class:
```
dashboard-overflow-containment.test.tsx:295
mobile-horizontal-pan-containment.test.ts:90
".modal-overlay:not(.confirm-dialog-overlay),\n .agent-detail-overlay,\n .agent-dialog-overlay,\n .workflow-output-modal-overlay"
```
Neither list mentions `.floating-window-overlay--modal`. If that list
were the mechanism keeping modal scrims inside mobile horizontal-pan
containment, then FN-8619 moved every migrated modal's scrim out from
under the guard and the dead entry was **masking a live defect** —
deleting it would have been the wrong move twice over.
I said at the time I couldn't settle it without rendering at a phone
breakpoint. **That was wrong — it is answerable by reading**, and I only
went back because the same mistaken conclusion cost me a day on the
Planning coverage in #2982.
**The containment lockdown is global**, on the mobile `html, body` block
in `styles.css`:
```css
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
overscroll-behavior-x: none;
touch-action: pan-y;
}
```
`FloatingWindow.css` says so itself at its mobile breakpoint — *"Mobile
keeps the global `styles.css` pan-y lockdown so the dashboard cannot
drift"*. The per-overlay list only reasserts it for overlays that are
themselves scroll containers. Migrated modals are covered by the global
rule, so **no hole, and no masked defect**.
## Verified the guards still guard something
The risk in editing a pinned selector string is turning a real guard
into a string-equality formality:
| state | result |
|---|---|
| after this change | 15/15 pass |
| global lockdown broken (`touch-action` / `overscroll-behavior-x`
removed from `html, body`) | **2 failed / 13 passed** |
They fail on the mechanism, not the text.
## Scope note
Two of the four `styles.css` sites are **grouped selectors shared with
`.agent-dialog-overlay`, which is still live**
(`NewAgentDialog.tsx:415`). So this is a selector-list edit, not a block
deletion — easy to get wrong in a bulk sweep, which is why it is called
out here and in the FNXC note replacing the deleted rule.
The retired mobile rule set `padding: 0; align-items: stretch` on the
overlay. Not a lost feature: `.floating-window-overlay` is `position:
fixed; inset: 0` with no flex context, so those declarations had nothing
to act on — FloatingWindow positions the panel by geometry.
**Verified:** 120/120 across `agent-modals-mobile`,
`core-modals-mobile`, `AgentDetailView.core`, and both containment
guards; `tsc -p tsconfig.app.json` 0 errors; lint clean; FNXC gate exit
0.
Dead-CSS removal with no behaviour change, so no changeset. Main health
while I was here: engine **11475 passed / 0 failed**.
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
## What was red
Both failures in the dashboard `app:components-b` lane. **Neither is a
style regression** — the CSS is byte-unchanged and correct in both
cases.
## Root cause: a jsdom upgrade, not a CSS change
jsdom does not substitute `var()`. What it does *instead* changed under
us in **4819c2634 (jsdom 27.4.0 → 29.1.1)**:
| | jsdom 27 | jsdom 29 |
|---|---|---|
| unresolvable shorthand (`padding`) | echoes raw text `var(--space-xs)
var(--space-sm)` | computes to `"0"` |
| single-value longhand (`gap`) | echoes | still echoes |
Tests asserting the **echoed string** were pinning a jsdom
implementation detail. The bump turned them red with nothing changed in
the product.
### 1. `renders a promote action when onPromote is provided`
`expected 'var(--space-xs) var(--space-sm)', received '0'`.
`.card-promote-action` still declares exactly that padding
(`TaskCard.css:1129`).
### 2. `FN-4511 keeps GitHub badge and timer chip geometry in parity`
`expected '1px' to be 'medium'`. The chips **are** in parity:
- badge: `border: 1px solid transparent`
- timer chip: `border: var(--btn-border-width) solid transparent`
- `--btn-border-width: 1px` (`styles.css:183`)
Here jsdom **discards** the unresolvable width rather than echoing it,
so `borderTopWidth` falls back to the initial value `medium`. The
existing `|| "1px"` fallbacks could not save it — `medium` is a
non-empty string, so it was the fallback that never ran, not the value
that was missing.
## The fix
Both assertions now read the **declared** value from the mounted
stylesheet's CSSOM and resolve a single `var()` against `:root`. That is
stable across jsdom versions and is what the assertions always meant.
Via the CSSOM rather than a regex over the CSS text **on purpose**: a
hand-rolled matcher over grouped selectors silently matches the wrong
rule and still reports success. Everything jsdom *can* resolve
(font-size, line-height, gap, padding parity) stays asserted against
computed style.
## Evidence
`components-b`: **1688/1688** (was 2 failed). Mutation-proved — both
fail as they should:
| mutation | result |
|---|---|
| timer chip border `1px → 2px` | `expected '2px' to be '1px'` |
| promote padding tokens changed | `expected 'var(--space-sm)
var(--space-lg)' to be 'var(--space-xs) var(--space-sm)'` |
**My first border mutation passed**, which would have read as a vacuous
guard. It had patched the wrong one of five identical `border:
var(--btn-border-width)` lines in the file. Re-run against
`TaskCard.css:1094` it fails correctly. Recorded because the mutation,
not the guard, was the thing that was wrong — a passing mutation is a
claim that needs checking too.
`pnpm lint` clean. Test-only — no production file or CSS touched
(mutations reverted; `git diff` clean).
## Ownership
`packages/dashboard/app` belongs to the **batch-dashboard-app** owner
(u12) under the mega-batch split. This is fix-forward on a red rather
than a conversion, confined to one test file, and touches no production
code — it should not conflict with the batch.
## Not fixed here
The `app:app` lane has **10 pre-existing failures** in `App.test.tsx`
(deep-link handling, board branch filters, FN-5817 mobile shell). They
were masked by this lane failing first — the runner skips remaining
lanes after the first failure, so they only became visible once
components-b went green. Separate change.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Desktop board scrollers no longer snap: the browser's proximity-snap settle
animation was capturing wheel/trackpad pans and reading as a slow, sticky drag
toward a column center. Base `.board`, `.board-workflow-columns`, and
`.lane-columns` declare `scroll-snap-type: none`; proximity snap is re-declared
in phone-tier media blocks only, where the JS column pager owns paging.
On phones, the hook now owns post-lift motion instead of waiting it out. A
directional lift kills native inertia and animates to its target column via rAF
ease-out (~190-300ms), so the page starts moving on lift rather than after a
native fling that can coast for most of a second. Fling reach is preserved by
deriving a page count (1-3) from release velocity sampled off the board's own
scroll ticks, not from however far inertia happens to travel.
Guards: re-touch cancels the animation and hands the axis back to the finger;
reduced motion, missing rAF, and sub-2px distances fall back to the instant hard
jump; unmount mid-animation restores the frozen inline styles; a fast drag that
rests before lifting is not treated as a flick.
Tap-to-stop-during-momentum is gone as an interaction (no long coast remains to
interrupt). Its regression test is reframed around the equivalent seam: a drag
that interrupts the page animation wins over the pending page.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Keep all selected GitHub issue actions touch-safe and visible on a single mobile row.
- Group detail action controls separately from the comment composer and make their mobile tracks shrinkable.
- Add responsive browser-smoke coverage at 320px, 390px, and 412px plus modal structure tests.
- Document the mobile behavior and add a patch changeset.
Files changed:
.changeset/fn-8548-mobile-github-import-actions.md | 7 +
docs/dashboard-guide.md | 8 +-
.../dashboard/app/components/GitHubImportModal.css | 42 +++++-
.../dashboard/app/components/GitHubImportModal.tsx | 80 ++++++------
.../__tests__/GitHubImportModal.test.tsx | 50 ++++++++
packages/dashboard/app/styles.css | 11 +-
.../dashboard/scripts/browser-layout-smoke.mjs | 142 ++++++++++++++++++++-
7 files changed, 290 insertions(+), 50 deletions(-)
Fusion-Task-Id: FN-8548
Fusion-Task-Lineage: 8fab6a1d-0ca9-4246-9707-e1fc84ca58e5
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
## 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>
Render the shared Oh My Pi provider icon with its official colorful gradient.\n\n- Add a scoped SVG gradient with unique IDs for simultaneous OMP icons.\n- Define reusable OMP gradient tokens and retain the provider color fallback.\n- Cover gradient rendering and ID uniqueness in provider icon tests.\n\nFiles changed:\n packages/dashboard/app/components/ProviderIcon.tsx | 18 ++++++++++---\n .../app/components/__tests__/ProviderIcon.test.tsx | 31 ++++++++++++++++++++--\n packages/dashboard/app/styles.css | 5 +++-\n 3 files changed, 47 insertions(+), 7 deletions(-)
Fusion-Task-Id: FN-8487
Fusion-Task-Lineage: 6b507791-934f-443b-9c93-f59e5ee99ddf
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Lock snap direction at finger-up from the net swipe, page only in that scroll direction, hard-jump and pin until the next touch so residual fling and CSS proximity no longer drift after settle.
Move the guided report flow to System while ensuring its menu reliably overlays dashboard content.
- Portal the shared ReportActionMenu with a defined dropdown/modal stacking scale.
- Make System the sole Command Center report home and retain Copy diagnostics as a local action.
- Update regression coverage, documentation, and the published package changeset.
Files changed:
.changeset/fn-8406-report-home-zindex.md | 7 ++
docs/dashboard-guide.md | 4 +-
.../dashboard/app/components/ReportActionMenu.css | 5 +-
.../dashboard/app/components/ReportActionMenu.tsx | 72 ++++++++++++-
.../components/__tests__/ReportActionMenu.test.tsx | 12 +++
.../components/command-center/CommandCenter.css | 32 ------
.../components/command-center/CommandCenter.tsx | 59 ++++-------
.../__tests__/CommandCenter.test.tsx | 8 +-
.../__tests__/SystemControlsArea.test.tsx | 94 +----------------
.../command-center/areas/SystemControlsArea.tsx | 112 ++++-----------------
packages/dashboard/app/styles.css | 11 ++
11 files changed, 144 insertions(+), 272 deletions(-)
Fusion-Task-Id: FN-8406
Fusion-Task-Lineage: 957a77b0-fb04-4024-9506-225fec562f5d
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Settings had three compounding problems: you couldn't find a setting,
and once you found it, it didn't look like its neighbour.
## Organization — the nav was grouped by the wrong thing
It was grouped by **scope** (Global / Runtimes / Project). Scope is an
*attribute* of a setting, not a category — nobody opens Settings
thinking "I need a project-authority setting." That single choice split
five concepts across two groups, including **two nav entries both
labelled "MCP Servers"**, distinguishable only by a small icon.
Now grouped by topic, with paired sections adjacent and stating their
own scope:
```
PREFERENCES Appearance · Keyboard Shortcuts · Notifications · General · Global
PROJECT General · Project · Commands & Scripts · Worktrees · Merge
AI & MODELS Models · Global · Models · Project · CLI Agents · Agents & Permissions · Prompts · Memory
AUTOMATION Scheduling & Capacity · Scheduled Evals
INTEGRATIONS Authentication · MCP Servers · Global · MCP Servers · Project · Plugins · Runtimes · Secrets
INFRASTRUCTURE Node Sync · Node Routing · Remote Access · Backups
ADVANCED Experimental Features
```
## Search — it now finds settings, not just sections
Search matched only hand-written `searchableText` keyword arrays per nav
entry, and those demonstrably rotted: Project Models accumulated 20
keywords across **two separate fixes** (FN-7907, then
title-summarization on 2026-07-14) because operators searched
"summarize" and got nothing.
Every setting is now indexed from **its real label and help text** — 123
settings across 18 sections, zero curated keywords. The same query that
was patched twice by hand:
Two of those four hits match on *help text*, which a keyword index
structurally cannot do. Picking a result jumps to the exact control,
**opens its collapsed disclosure**, and highlights it:
**This can't rot again.** `settings-search-index.test.ts` extracts every
`descriptor={{ key }}` from section sources and fails the build if one
isn't indexed. "All settings are searchable" is an enforced invariant,
not a promise.
## Consistency — one type scale
A text field's label and a toggle's label in the same section were
styled **three different ways**: `.form-group label`
(12px/600/uppercase/muted), a `.settings-content` override narrowing it
to 0.72rem, and `.checkbox-label` (13px/500/sentence-case) whose every
declaration carried `!important` purely to out-specify the other two.
| | Before | After |
|---|---|---|
| Sections on shared primitives | 1 | **18** |
| Indexed searchable settings | 0 | **123** |
| `form-group` in settings | 226 | **98** |
| `checkbox-label` in settings | 79 | **40** |
**Global `.form-group` is untouched** — 35 non-settings files style
forms with it, so settings migrate *off* it rather than restyle it
underneath the rest of the dashboard.
### A real latent bug this surfaced
`--font-size-sm` and `--font-size-md` were named by **12 declarations**
across AgentDetailView, DockTaskList, SetupWizardModal, and
ModelOnboardingModal — but **defined nowhere**. Those rules silently
no-op'd and inherited. The command-center token guard is the only thing
that catches this class of omission and it doesn't cover those files.
The scale is now complete (`2xs · xs · sm · base · md · lg`); `md` is
1.125rem to hold current rendering, since unstyled `h3` already inherits
the 1.17em UA default.
## What deliberately did *not* migrate
Some rows stay bespoke **on purpose**, not from incompleteness:
- **Password fields** (`ntfyAccessToken`, `githubAuthToken`,
`gitlabAuthToken`) — `SettingsTextRow` hardcodes `type="text"`, so
migrating would have **rendered stored tokens unmasked**.
- **Help text with embedded `<code>`/links** — `descriptor.help` is a
single string; flattening would drop markup or reword copy.
- **`<details>` progressive disclosure** in Merge — a descriptor's help
renders unconditionally, so migrating ~10 rows would delete the
disclosure and produce a wall of prose.
- **Dynamic flag lists** (Experimental) and bespoke editors/CRUD
(Prompts, Agents & Permissions, Plugins, KeyboardShortcuts' capture
widget) — no settings field name and no i18n key to anchor honestly.
## Data-model ambiguities surfaced (not papered over)
These need a human call and are **not** fixed here:
- **Five keys are declared in BOTH `DEFAULT_GLOBAL_SETTINGS` and
`DEFAULT_PROJECT_SETTINGS`**: `worktrunk`, `testMode`, `gitlabEnabled`,
`gitlabAuthToken`, `gitlabAuthTokenType`. No scope badge can be stamped
honestly, so those rows are left bespoke.
- **`globalMaxConcurrent` lives in the *project* blob** despite its
name, its dedicated global endpoint, and the "Global" header it renders
under. Its badge is omitted rather than assert a contradiction.
- **Two settings were editable from two screens**: `gitlabEnabled`
(General + Merge) and `githubTrackingDefaultRepo` (General + Global
General). Both are ambiguous-scope and custom widgets, so deduplication
is left as follow-up.
## Follow-ups from review
**`SettingsTextRow` gained `type`, so the token rows could migrate.** It
hardcoded `type="text"`, which is why every secret-bearing row (ntfy
access token, GitHub/GitLab tokens, the Cloudflare tunnel token) stayed
hand-rolled — migrating would have rendered stored secrets in plain
text. `password` rows now default to `autocomplete="off"` so a browser
never offers to save an API token, and masking is pinned by tests: a
regression there would not throw and would not look wrong in review, the
field would simply render the token.
That also made them findable. Searching "token" previously matched
nothing useful; it now returns 9 settings including *Access token* and
*Tunnel token*:
**Jump-to-field now reveals collapsed disclosures.** Rows inside a
closed `<details>` are in the DOM but invisible, so the jump scrolled to
and highlighted a control the operator could not see. The settings most
worth searching for are exactly the ones behind "Advanced".
**The scope banner is gone.** It claimed one scope for a whole section,
which was false wherever a section mixed them — Appearance is a "global"
nav entry whose task-presentation toggles are all project-scoped.
Per-row badges already say this accurately, so the banner and its dead
CSS are removed.
**Scheduling is split by scope.** `globalMaxConcurrent` moved to its own
`Scheduling · Global` section instead of sitting above the project
settings behind an in-section subheading. One section held two authority
levels, so "does this affect my other projects?" depended on which
subheading you had scrolled past — and a search result landing
mid-section shows no subheading at all.
**Text-entry padding is now genuinely uniform.** Settings shipped two
input treatments: `.input`/`.select` (6px 10px at 13px) and the global
`.form-group input` rule (8px 12px at 14px). Padding depended on whether
an ancestor happened to be a `.form-group`, and because `.form-group
input` (0,1,1) out-specifies `.input` (0,1,0), naming the standard class
on a nested control did nothing. Measured in-browser after the fix: **51
controls across four sections, one appearance, zero outliers.** The same
specificity trap was silently re-imposing the uppercase/muted label
treatment on migrated rows nested in a `.form-group`; fixed as an
invariant rather than per-row, since sections legitimately keep
`.form-group` around bespoke content.
## Reconciling with #2147 (please review this call)
PR #2147 landed while this branch was open and deliberately moved the
two import auto-translate controls **off** `SettingsToggleRow` onto
`checkbox-label`, pinning that markup with a test written to survive *"a
refactor back onto the primitive"*. Its objection was that the primitive
rendered a right-aligned toggle switch clashing with the section's
native checkboxes — two idioms in one section.
Both halves of that objection are now gone: the primitive renders a
native checkbox **before** its label, and every checkbox in that section
— including the neighbour the test asserts parity against — renders
through it. The idiom split is resolved by migrating all of them rather
than de-migrating these two, so the markup assertions now track the
primitive. **Every behavioural contract from #2147 is kept and still
pinned**, and one was a real bug on this branch: switching
auto-translate off wrote `false` where it must write `undefined`,
leaving an explicit opt-out in the settings blob instead of staying
unset.
#2147's curated translate keywords are preserved for the genuine
vocabulary gaps ("localize", "localization", "foreign language issues")
that appear in no copy. FN-8016's rewritten `taskPopupsBoardListOnly`
copy (default now enabled) is adopted into the migrated row and its
search entry.
Worth noting: #2147's own FNXC says the translate controls were
*"effectively unfindable"* because *"settings search only matches
curated terms plus advertised i18n keys"* — 25 keywords hand-added days
ago. That is precisely the rot this PR's derived index removes.
## Source Control — the duplicate had a cause
GitLab settings were split across **three** sections (General: enable +
URLs; Merge: auth token + type; Global General: all five at global
scope) and GitHub across two. That split is *why* `gitlabEnabled` ended
up writable from both General and Merge — two enable toggles for one
key, last-save-wins.
A `Source Control · Global` / `· Project` pair now owns all 17 keys,
adjacent under Integrations, with **one** GitLab disclosure and **one**
enable toggle:
Key ownership moved with them in `section-keys.ts` / `save-split.ts`, so
every key has exactly one owner (`section-keys.test.ts` enforces
disjointness).
**A latent bug surfaced by the move:** nine sites outside the registries
hardcode `"global-general"`/`"general"` and silently gate **scope
routing** — four in `save-split.ts`, five in `SettingsModal.tsx`. Left
stale, global GitLab edits would have been written as project overrides.
Also verified against the schema: **all five `gitlab*` keys AND
`githubTrackingDefaultRepo`** are declared in both defaults (more than
the four originally identified), so those rows carry no scope badge
rather than assert a scope the data model can't support.
## Help moved behind a "?" beside every label
Rendering every description inline turned dense sections into walls of
prose — median help is ~100 chars, some past 400. That pressure is what
made Merge invent its own "More details" disclosure, so one section
showed two idioms. Measured across sections, Merge's help was **not**
unusually long (median 103 vs Appearance's 168, which rendered inline),
so the disclosure wasn't earning its keep.
The copy is deferred **visually, not removed**: the bubble is always
rendered and only fades in, so it stays in the accessibility tree for
`aria-describedby`, stays findable with in-page find, and **the search
index keeps matching on help text**. Errors are never deferred — a
validation message you must hunt for is one you won't see.
Only ~24 of 136 `<small>` blocks were actually row help. The rest stay
inline on purpose and aren't help: validation errors, live status,
empty-state explanations, per-option descriptions inside a multi-select,
and copy explaining *why* a control is disabled.
`children: ReactNode` (not a string) is what let the `<code>`-bearing
and link-bearing rows migrate without rewording your copy — a string API
is precisely why they were hand-rolled before.
### Mobile, verified on a 390px viewport
Driving a real phone-sized viewport caught two bugs that neither jsdom
nor code review did:
- **Bubble rendered off-screen.** The label line reads "Name [scope] ?",
so the "?" sits well right of centre; anchored to the trigger, the
bubble spanned x=338→658 against a 390px screen — 268px unreachable.
`max-width` clamps width but can't help when the *anchor* is near the
edge. It now anchors to the row (`inset-inline: 0`): re-measured at
x=20→370 inside 390. An earlier comment claimed this behaviour; only the
comment existed.
- **Two bubbles open at once.** Outside-`pointerdown` dismissal misses a
path: `click` fires with **no pointer event** when Enter/Space activates
a focused trigger, so a keyboard user opening a second tip left the
first open underneath. Tips now broadcast on open and close each other;
the regression test asserts the bare-click path specifically.
Also verified on touch: tapping outside dismisses, and opening a second
tip closes the first — no stranded bubbles.
**Checkbox wrapping.** On a 390px viewport a long label ("Keep task
popups on the view where they were opened") stranded its checkbox alone
on line 1, with the text on lines 2-3 and the badge on line 4. The head
was a flex row and the label was a flex ITEM, so once it no longer fit
beside the checkbox the whole label wrapped rather than its text. Label
+ badge + tip now form one group that absorbs the wrapping, leaving the
checkbox as the only sibling item; continuation lines align under the
first word.
Audited every checkbox and radio on all 31 screens at 390px afterwards:
**101 controls, all on the first line of their label text.** (The
audit's first pass flagged 41 — all false positives from measuring
`<label>` elements whose text is a bare text node, i.e. the label box
included the checkbox. Re-measuring the text nodes themselves via Range
cleared them.)
### Every row, including the ones that stayed bespoke
Merge was the last holdout — 18 `<details>` "More details" disclosures
plus 4 inline blocks, an idiom it invented and no other section used.
All 22 now use the same "?":
Project Models likewise rendered lane help as prose while the global
lanes next door already used the tip; its help now hangs on the existing
lane label row beside the Override/Inherited badge (the badge is live
state and stays visible; the fallback chain behind it is what you open
deliberately).
**Audited all 31 screens programmatically** (label treatments, control
padding, row overflow, leftover banners, horizontal scroll):
- **one label treatment on every screen**, one control treatment, zero
overflowing rows, zero banners, no horizontal scroll
- the copy still rendered inline is deliberately not row help:
validation errors, live status, block descriptions, per-option text
inside multi-selects, and copy explaining *why* a control is disabled
**Known gap:** the three plugin runtime screens (Hermes / OpenClaw /
Paperclip) still render inline help. They delegate to
`HermesRuntimeCard` / `OpenClawRuntimeCard` / `PaperclipRuntimeCard` —
separate card components outside the settings tree — and their copy *is*
genuine row help ("Leave blank to resolve hermes from your PATH"). They
are advanced-only and were left out of this pass rather than swept in at
the end without review.
## Padding and label consistency (measured, not eyeballed)
Two idioms were still visible on one screen — Merge rendered "PLAN
APPROVAL MODE" in caps directly above "Auto-merge conflict retries" in
sentence case. Rows that deliberately stay bespoke inherited the global
`.form-group label` treatment.
| | Before | After |
|---|---|---|
| Label treatments | uppercase/muted/11.5px **and** sentence/14px | **70
labels, one treatment** |
| Control padding | `6px 10px` **and** `8px 12px` | **81 controls, one
treatment** |
| Row gaps | 12 / 16 / 20 by adjacency | **0** — every row owns its
space |
The cause was a specificity trap: `.form-group input` (0,1,1)
out-specifies `.input` (0,1,0), so naming the standard class on a nested
control did nothing. Fixed settings-scoped; the global `.form-group` is
untouched (35 non-settings files depend on it, where uppercase is that
context's convention).
## Advanced settings toggle — verified
Confirmed in-browser after the regroup: **OFF → 15 sections / 5 groups;
ON → 31 sections / 7 groups**, `data-show-advanced` flips, preference
persists. The now-empty **Infrastructure and Advanced group headers are
correctly hidden** when off — the case the regroup could have broken,
since those groups contain only advanced sections.
## Pre-existing failures found (verified NOT caused by this PR)
Each verified by running the identical file on the parent commit and
diffing the **failure sets**, not just the counts:
| Failure | Verified |
|---|---|
| `SettingsModal.scheduling-merge.test.tsx` — 55 failures | identical
set before/after |
| `SettingsModal.remote-notifications.test.tsx` — 16 failures |
identical set before/after |
| `settings-default-descriptions.test.tsx` — `sqliteMigrationNotice`,
`postgresMigrationInboxMessageSentAt` | fails on clean tree |
| i18n `parity.test.ts` — 12 violations
(`settings.general.autoTranslate*`, `taskDetail.plan.*`) | 12 before, 12
after |
**This PR adds zero new failures.**
Fixed along the way: a stale `AppearanceSection` assertion testing copy
FN-7945 deliberately rewrote (failing silently), the ungrammatical "1
matching sections", and `“` rendering literally on screen.
## Verification
- `tsc --noEmit -p tsconfig.app.json` → **0 errors** (note: the default
`tsconfig.json` only covers `src/` and does **not** typecheck `app/`)
- `pnpm test:gate` → **63 passed**
- Settings surface → 68 failures, every one a verified subset of the
pre-existing baseline, diffed by failure SET not count (this branch
incidentally fixes 4)
- `pnpm test:gate` 63/63 · lint clean across 83 changed files · `tsc -p
tsconfig.app.json` 0 errors
- Rebased onto `main`: conflicts with #2147 and FN-8016 resolved
- Driven in a real browser at 1440px and 390px: search, jump-to-field,
help tips, advanced toggle, and every migrated section
- Driven in a real browser: search, jump-to-field, highlight, and every
migrated section
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Settings search now indexes individual settings controls, ranks
matches, and navigates directly to the exact row with a temporary
highlight.
* **UI Improvements**
* Migrated settings sections to shared row primitives
(toggle/select/number/text/textarea) for consistent spacing and
touch-friendly controls.
* Updated typography to a complete tokenized type scale; added the “?”
help tip and tokenized row highlight/error styling.
* Navigation and search labels now show clear Global vs Project scope.
* **Bug Fixes**
* Improved search accuracy using label/help/keywords and fixed settings
search counts/pluralization and MCP scope labels.
* **Tests**
* Added/updated checks to ensure the settings search index stays
consistent with rendered rows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Removes the hard divider between the Settings navigation rail and content, keeps section rows single-line with ellipsis overflow, and adds a draggable/keyboard-resizable handle that persists the rail's width in localStorage across the standalone modal and embedded Settings page.
- Add a resize handle (.settings-nav-resize-handle) between .settings-navigation and .settings-content, draggable via pointer events and resizable with ArrowLeft/ArrowRight when focused
- Persist chosen width to localStorage (fusion:settings-nav-width), clamped between 200px and 420px, defaulting to 248px; restore on mount
- Make .settings-navigation the sole owner of rail width via a --settings-nav-width CSS custom property instead of a fixed width, and drop the border-right divider
- Keep nav section labels on one line with white-space: nowrap + text-overflow: ellipsis in both the modal (SettingsModal.css) and embedded (styles.css) nav item styles
- Hide the resize handle on mobile; mobile keeps the stacked section picker unaffected
- Update docs/dashboard-guide.md to describe the new divider-less rail and resize behavior
- Add SettingsModal.navResize.test.tsx covering drag-resize, keyboard-resize, and width persistence
- Add changeset .changeset/fn-7825-settings-nav-resizable.md (minor)
Files changed:
.changeset/fn-7825-settings-nav-resizable.md | 7 +
docs/dashboard-guide.md | 3 +
packages/dashboard/app/components/SettingsModal.css | 56 ++++-
packages/dashboard/app/components/SettingsModal.tsx | 124 +++++++++-
packages/dashboard/app/components/__tests__/SettingsModal.navResize.test.tsx | 268 +++++++++++++++++++++
packages/dashboard/app/styles.css | 27 ++-
6 files changed, 467 insertions(+), 18 deletions(-)
Fusion-Task-Id: FN-7825
Fusion-Task-Lineage: 34b940b4-2698-46a4-b47c-cda0b0cac564
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Real root cause of the blank mobile terminal (the FN-7692 remeasure guard did not
fix it and is reverted here). styles.css has a mobile-only reset
`@media (max-width: 768px) { * { max-width: 100% } }` to prevent horizontal
overflow. That universal selector also matches xterm's hidden character-measurement
subtree (`.xterm-helpers` / `.xterm-char-measure-element`). That subtree's containing
block (`.xterm-helpers`) is a 0x0 absolutely-positioned box, so `max-width: 100%`
resolves to `max-width: 0` and hard-caps xterm's character-cell measurement at 0.
FitAddon.fit() then proposes 0 columns/rows and `.xterm-screen` (plus the WebGL
canvas) collapses to 0x0 — the prompt streams in and is written into xterm's row DOM
but paints into a zero-size box, so the terminal is blank. Mobile-only, which is why
desktop always rendered fine.
Reproduced live via mobile emulation: `.xterm-char-measure-element` measured 0 while
an identical monospace span in the same container measured ~295px; `max-width: none`
on the measure element restored ~295px, and reopening the terminal with the exemption
active rendered the prompt with `.xterm-screen` sized 369x760. No amount of
remeasure/refit can fix this — the CSS re-caps the measurement to 0 every time — so
the FN-7692 CharSizeService guard is removed.
- Exempt `.xterm-helpers` / `.xterm-char-measure-element` from the mobile max-width
reset in styles.css (covers both TerminalModal and SessionTerminal)
- Revert the ineffective FN-7692 remeasure guard and its tests
- Update changeset (patch) and the docs/solutions write-up to the real root cause
Note: root cause + fix validated in the automation browser via mobile emulation
(393px, iPhone UA, forced touch), not a physical device.
Fusion-Task-Id: FN-7693
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds a presentation-only enter animation for mobile task-detail surfaces (modal and board main-panel), layered on top of the existing FN-7583/FN-7586 dismissal routing, without altering close/back timing.
- Gate a new `.task-detail-modal--mobile-transition` class in TaskDetailModal.tsx via a local resize listener at the 768px breakpoint, mirroring the existing OVERSIGHT_MENU_MOBILE_BREAKPOINT pattern
- Add matching `.task-detail-main-panel--mobile-transition` modifier in MainContent.tsx gated by the existing isMobile prop
- Add slide/fade keyframe animations in TaskDetailModal.css and styles.css, both honoring prefers-reduced-motion
- Add regression tests covering the modal and board-panel mobile transition behavior
- Document the Capacitor WebView limitation preventing a true interactive predictive-back in packages/mobile/README.md
Files changed:
.../dashboard/app/components/TaskDetailModal.css | 33 ++
.../dashboard/app/components/TaskDetailModal.tsx | 31 +-
...skDetail.mobile-transition.board-panel.test.tsx | 333 +++++++++++++++++++++
.../TaskDetail.mobile-transition.test.tsx | 156 ++++++++++
.../app/components/dashboard/MainContent.tsx | 10 +-
packages/dashboard/app/styles.css | 35 +++
packages/mobile/README.md | 30 ++
7 files changed, 626 insertions(+), 2 deletions(-)
Fusion-Task-Id: FN-7587
Fusion-Task-Lineage: cc5f08df-4aaf-447d-9c30-237b32191d3f
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
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
