Operator report: the first-run "Set Up AI" modal had extra space along its right
edge, and it asked a browser visitor to connect a remote server and mentioned a
native shell they do not have.
Three defects, verified in a real container build at desktop and mobile widths:
- FN-8015 reserved `margin-inline-end: var(--space-lg)` on the shared
`.floating-window__body` so a hosted scrollbar cleared the east resize hot
zones. One shared reservation every caller had to know about produced a
recurring class of asymmetric-right-inset bugs instead: it was zeroed
piecemeal five times (FN-8766, mobile task detail, FN-8722, FN-8702, every
tablet window) while two callers leaned on it for their right inset and had to
restore it whenever one of those predicates fired. Delete the gutter, its five
overrides, and GitHub Import's borrowed-inset compensation. Where a scrollbar
and a resize target actually collide, use FN-8766's outboard east targets.
Trade-off accepted by the operator; the ratchet test now forbids the gutter in
any stylesheet at any breakpoint.
- The hosted Set Up AI modal did not fill its window: its standalone
`height: min(85vh, ...)` rule ties on specificity with FloatingWindow's
`height: 100%` and won on source order, leaving ~60px of dead window surface
under the footer alongside the 16px gutter strip. Right gap 17px -> 1px,
bottom gap 62px -> 1px.
- The "Connect remote Fusion server" card keyed only on
`desktopMode !== "local"`, and `desktopMode` is undefined on web, so every
browser first-run led with a native-shell hand-off form. Now also requires
`host !== "web"`.
Verified: 165 dashboard test files / 5829 tests pass, eslint and
`tsc -p tsconfig.app.json` clean, and a container built from this tree shows the
panel flush at 1280x800 and as a symmetric full-screen sheet at 390x844 with no
remote-server card.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The right-padding bug recurred three times because 'Task Detail modal' names ONE
surface with THREE shells and fixes kept landing in the wrong file. Disambiguate:
- Rename the just-introduced .floating-window--tablet marker to
.floating-window--tablet-viewport and document the naming contract next to it:
--tablet-viewport = viewport MODE classifies tablet (touch or not, styling
surface); --touch-geometry = tablet AND touch (enlarged 44px targets only).
- Add SHELL NAMING MAP breadcrumbs at the top of TaskDetailModal.css and
TerminalModal.css pointing inset/padding fixes at the FloatingWindow shell
that tablet popups and floating terminals actually render through.
Comment wording deliberately avoids dot-prefixed class tokens because
FloatingWindow.test.tsx scans raw CSS (comments included) with selector regexes.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Third recurrence of the Task Detail right-padding bug (FN-8630/FN-8634): those
fixes only covered the .modal-overlay shells, while every tablet task popup and
floating terminal renders through FloatingWindow, whose shared body carries
FN-8015's margin-inline-end scrollbar gutter — a 16px right border with a 0px
left one. Tablet-mode windows (.floating-window--tablet, keyed on viewport MODE
so non-touch tablet widths match too) now zero the gutter; touch never grabs
scrollbar thumbs, so the desktop hot-zone conflict FN-8015 solves cannot occur.
GitHub-import's detail panel, which used the gutter as its right inset,
compensates locally. Desktop keeps the FN-8015 contract.
Also per operator request: the floating terminal is draggable from the empty
strip space behind the tabs and anywhere in the top toolbar, not only the
FN-8633 grip. Tab presses keep stopPropagation (scoped to .terminal-tab) so
they never start a window drag; the tablet floating header supersedes the
pan-x contract with touch-action: none (an overflowing strip is replaced by
the mobile-tabs dropdown, so no visible strip pans horizontally).
Co-Authored-By: Claude Fable 5 <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>
Allow mobile issue lists to fill the available import-sheet height.
- Make the mobile import pane a constrained flex column with internal scrolling.
- Remove the 50vh list cap while preserving pagination and action access.
- Cover the responsive list sizing rules with a regression test.
Files changed:
.../dashboard/app/components/GitHubImportModal.css | 18 +++++++++++++++++-
.../components/__tests__/GitHubImportModal.test.tsx | 17 +++++++++++++++++
2 files changed, 34 insertions(+), 1 deletion(-)
Fusion-Task-Id: FN-8150
Fusion-Task-Lineage: 92841921-7769-4304-b1f3-8c91aa18efb6
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Let GitHub pull request previews refresh their current check status and comments.
- Add an accessible refresh action that bypasses the selected PR detail cache
- Prevent stale refresh responses from overwriting cached or visible PR details
- Cover refresh behavior across modal and embedded views, and document the control
- Add a minor changeset for the new GitHub import capability
Files changed:
.changeset/fn-8137-refresh-pr-checks.md | 7 ++
docs/dashboard-guide.md | 2 +-
.../dashboard/app/components/GitHubImportModal.css | 29 ++++++
.../dashboard/app/components/GitHubImportModal.tsx | 48 +++++++--
.../__tests__/GitHubImportModal.test.tsx | 115 +++++++++++++++++++++
5 files changed, 191 insertions(+), 10 deletions(-)
Fusion-Task-Id: FN-8137
Fusion-Task-Lineage: 1d4ffa9d-635c-4d59-b17c-63075f6d8c5e
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Import picker now surfaces all open issues instead of a silent first-30
slice, and reliably closes linked/imported issues when their task reaches
Done.
Import:
- GitHubImportModal fetches up to 300 open issues in one request and pages
the result client-side at 30/page with Previous/Next controls, a page
indicator, and a truncation notice past the cap.
- NewTaskModal reference picker limit 30 -> 100.
- GitHubClient.listIssues pages the REST path (per_page loop until
limit/exhaustion; PR-filtering no longer stops paging early) and lifts the
gh path's 100 cap (gh --limit paginates internally); gh-CLI label filtering
fetches the full cap before client-side OR filtering.
Close-on-Done:
- GitHubTrackingReconciler.runSweep isolates its three reconcile passes so a
throw in one (e.g. the PG-backend deleted/archived pass) no longer starves
the done-task + source-issue passes. Previously all three shared one
try/catch with a silent swallow, so a single early throw disabled the whole
close-on-Done reconcile backstop on every sweep, leaving linked issues open.
Failures are now logged instead of hidden.
Tests: REST multi-page paging, PR-filter-doesn't-stop-paging, Prev/Next UI,
one-page (no controls), and per-pass isolation invariants.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mobile operator report: the import screen spent ~4 rows on chrome — a
provider row, a tab row, and a boxed ORIGIN/filter/Load stack — leaving
only **~9 issues visible**. Import also sat *above* the preview it acts
on, and a second Import in the list footer let you import an issue whose
body you had never opened.
## Before → After (measured at 412px)
| | before | after |
|---|---|---|
| control chrome | ~4 stacked bands (93px) | **one wrapping row (70px)**
|
| toolbar | boxed band, origin on its own line | **single 36px row** |
| issues visible | ~9 | **~13** |
| Import | list footer **and** preview header | **detail bottom bar
only** |
## Layout
- **Provider, type tabs, origin, filter and Load share one row.** It
wraps rather than clipping at the narrowest widths.
- **Load is icon-only** — the label survives as `aria-label`/`title`, so
the accessible name is unchanged (the pre-existing role+name query still
finds it, which is what proves nothing was lost for screen readers).
- **The labels filter is a popover.** Its trigger doubles as the readout
— it renders the active labels and takes an `is-active` cue — so
collapsing never hides applied state. Dismisses on outside pointerdown
or Escape; Escape `stopPropagation` keeps the modal from closing along
with it.
- **Origin stays visible as an inline chip** (per your call): it's
context for what you're importing, so it flattens from a stacked
ORIGIN/repo block rather than hiding in the popover.
- Removed the toolbar's `flex: 1 1 100%` mobile stacking — it dated from
when the toolbar was a full-width band and was forcing origin to claim
an entire line.
- Also neutralised `[data-theme="light"] .github-import-toolbar`, which
re-applied the band background later in the cascade at equal specificity
(light mode only).
## Actions — one place to import
Import + Close issue move from the preview header to a **bottom action
bar**: commit actions belong below the content they act on and within
thumb reach, matching the modal's own Cancel bar. The list footer's
duplicate Import is removed (Cancel stays — the modal still needs a
dismiss), so **an issue can no longer be imported sight-unseen**.
## Note for review — interaction with #551a2a3c1
`551a2a3c1` ("align import detail header") landed mid-work and
conflicted. Its panel-padding work is preserved untouched. Its header
rules were kept **as-is** because they remain correct for a lone label,
but its stated rationale — dropping `space-between` so "Close issue and
Import stay grouped as a pair at the end" — is moot now that those
actions live in the bottom bar. The comment is marked superseded rather
than left asserting something untrue.
## Verification
Measured in a real browser at 412px (jsdom has no layout, so the tests
pin structure and behaviour, not geometry): chrome 93→70px, toolbar a
single 36px row, ~13 issues visible, filter popover clamped inside the
viewport and autofocused, detail bar below the content with an unclipped
Import label. Re-verified after the rebase.
**90 tests pass** · gate green (294/122/63) · lint clean · typecheck
clean.
Seven existing tests encoded the old UI (labelled Load, always-open
filter input). They were **updated to the new contract rather than
appeased** — the filter assertions now exercise the whole affordance
(collapsed → open → filters), and FN-7657 persistence is asserted via
the *collapsed trigger*, proving both that state survives remount
**and** that a restored filter stays visible, which is the real risk
when a control collapses.
Two things worth knowing:
- The footer guard was **confirmed non-vacuous**: reintroducing the list
Import fails it.
- One new CSS rule is deliberately a child selector
(`.github-import-controls > *`) rather than naming
`.github-import-tabs`, because `GitHubImportModal.test.tsx` extracts
base rules with a naive first-match regex
(`/\.github-import-tabs\s*\{[^}]*\}/`) that a rule mentioning them
*above* the originals would silently hijack.
🤖 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**
* Added a more compact, responsive mobile layout for the GitHub import
screen.
* Moved Import and Close issue actions to the preview’s bottom action
bar.
* Added a collapsible labels filter popover with keyboard and
outside-click dismissal.
* Consolidated mobile controls into a single compact row.
* Simplified the Load action to an accessible icon-only button.
* **Bug Fixes**
* Removed duplicate Import controls from the list footer.
* Improved control sizing, wrapping, and preview action positioning on
narrow screens.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The GitHub/GitLab import detail panel had no inset of its own, so it sat
flush against the window's left edge while FN-8015's resize gutter left a
gap on the right only — "Preview" was clipped and the whole header read as
misaligned on both the desktop window and the mobile sheet. Give the panel a
symmetric inset, letting that existing gutter supply the right side rather
than overriding it (which would push the inner scrollbar back into the
resize hot zone the gutter protects).
Also in the header: `space-between` spread three children apart and flung
"Close issue" into the middle, so the label now takes the free space and the
two actions stay grouped as a pair. Both actions size from one rule instead
of each inheriting its own .btn defaults, at a 40px touch target on mobile
where Import is the sheet's primary action. "Preview" becomes a muted
eyebrow matching the existing ISSUE #NNNN label.
Fix title truncation while here: `.floating-window__title` declared
text-overflow: ellipsis but was display:flex, which made the text an
anonymous flex item that text-overflow cannot act on, so titles hard-cut
mid-word. Every caller passes a plain string, so a block box makes the
existing declaration work as written.
Finally, the detail title bar kept the raw upstream title while the card
below showed the translation — one item displaying two different titles at
once. Both now read importTranslation.display.title, gated on activeTab to
match translateSelection so an item's number is never paired with the other
tab's title. The existing translation test now asserts both surfaces in both
directions; it fails without this change.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
## Summary
Import Tasks can now offer on-demand AI translation when a selected
GitHub or GitLab issue/PR title and body appear to be in a different
language than the active dashboard locale.
- Detect foreign-language content with a conservative client heuristic
(Unicode scripts + Latin stopwords)
- Show an opt-in banner: **Translate**, then **Show original / Show
translation**, plus **Dismiss**
- Call new `POST /api/ai/translate-text` (shared AI-helper rate limit
with refine/draft)
- Translation is **display-only** in the preview; imported task text
stays the original source language
## Why
Operators working in a non-English dashboard (or reading
non-dashboard-language issues) needed a way to understand import
candidates without leaving the preview or changing what gets imported.
## Test plan
- [x] Unit tests for language detection (`detectContentLanguage`)
- [x] Unit tests for translate request validation, response parsing, and
AI agent path
- [x] GitHub import modal: French content shows translate controls;
English content does not
- [x] Dashboard typecheck clean for app + server packages
- [ ] Manual: open Import Tasks with dashboard language English, select
a French/Korean issue, translate and toggle original
- [ ] Manual: confirm Import still creates the task with original
title/body
- [ ] Manual: dismiss banner for a selection and confirm it stays
dismissed for that item
## Notes
- Comments are not translated (title + body only)
- zh-CN / zh-TW share a CJK family so Chinese content does not prompt
translation when the UI is either Chinese locale
- Secondary locale catalogs have empty placeholders for the new
`git.translate*` keys (runtime falls back to English)
Embedded Import Tasks panes now flex to the available viewport height.\n\n- Add a base embedded-body flex rule shared by Issues and Pull Requests.\n- Cover the full-height behavior and non-embedded modal safeguards in CSS tests.\n- Add a patch changeset for the published Fusion package.\n\nFiles changed:\n .changeset/fn-7208-import-tasks-full-height.md | 7 +++++\n .../dashboard/app/components/GitHubImportModal.css | 4 +++\n .../__tests__/GitHubImportModal.test.tsx | 30 ++++++++++++++++++++++\n 3 files changed, 41 insertions(+)
Fusion-Task-Id: FN-7208
Fusion-Task-Lineage: 483889f2-48db-4c18-a58c-63f9a3661e45
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>
Comment shape gains authorAvatarUrl + authorIsBot (gh GraphQL Bot/__typename or REST user.type==Bot or [bot] login; avatar from API or github.com/{login}.png, suppressed for bots). New shared CommentsThread (PR + issue) shows author avatar (lucide Bot/User fallback), readable localized timestamp (ISO title), a Human/Bot badge + data-comment-author-type, prev/next chevron nav that scrolls+highlights, and an All/Human/Bot filter defaulting to All.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mirrors the PR detail pattern for issues: GitHubClient.getIssueDetail (gh issue view --json comments, REST fallback) + closeIssue (gh issue close, REST PATCH fallback); new POST /api/github/issues/detail + /issues/close routes. The Issues preview fetches comments on selection (cached, non-blocking) and renders them below the body; a Close-issue button in the preview header (open issues only) closes via the API, toasts, and reflects the closed state without dismissing the view.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
At narrow viewports the embedded view entered the dialog's mobile single-pane rules (overflow:hidden workspace + inner pane-content scroll), but the embedded body-scroll model flipped panes to natural height with no inner scroll — leaving orphaned overflow:hidden clips and no scroll owner, so a tall preview was unreachable. Add an embedded-scoped @media(max-width:640px) override making .github-import-modal__body the single scroll owner with the chain at natural height/overflow:visible. Wide two-pane + non-embedded dialog untouched.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- AgentsView header: ViewHeader matched to Missions (icon --todo color, space-lg/space-xl padding, border-bottom + surface bg).
- GitHub import (embedded): import button moves to the top of the preview pane; the bottom Import/Cancel bar is removed for embedded (kept for the modal presentation); importing no longer dismisses the view; narrow mobile keeps the top action reachable.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ROOT CAUSE (confirmed live via agent-browser): the list pane had flex:0 0 256px set correctly but rendered at 978px because min-width defaulted to auto — once issues/PRs load, the long titles' min-content width overrode the flex-basis and forced horizontal overflow ('data loads -> too wide -> can't shrink'). Add min-width:0 to both panes + the embedded wide rule, and truncate list items (.issue-title ellipsis, subtree min-width:0) so titles can't dictate pane width.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New POST /api/github/pulls/detail endpoint + GitHubClient.getPullRequestDetail (gh pr view --json comments,statusCheckRollup, REST fallback). On PR select, the preview fetches detail (cached per PR, body never blocked) and renders below the body: a Checks section (each check name + status pill success/failure/pending/neutral, linked to detailsUrl) and a Comments section (chronological, markdown via MailboxMessageContent). Issues tab unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Default list width 256px (min 160, max min(480px,50%)), driven by an inline width var with flex:0 0 so the drag actually wins (the embedded wide layout previously forced a clamp via !important, so the handle did nothing). Preview pane is flex:1 1 auto;min-width:0 so freed space flows to it. Persisted per-project via kb-dashboard-github-import-list-width. Shared workspace covers both Issues and Pull Requests tabs.
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>
Embedded Import Tasks: the preview pane's inner content kept a side-by-side flex:1/overflow that collapsed it under the stacked natural-height parent (preview looked short). Stacked layout now lets the preview take full intrinsic height and the view body scrolls; wide two-pane lets the preview scroll internally without moving the list.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Scope each converted modal's mobile full-screen/viewport-takeover rules to :not(--embedded) (Settings, GitHub import, Git Manager, Workflows) so the embedded main-content variant fills only the content pane and the app Header + MobileNavBar stay visible on mobile. Modal presentation unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- TodoView collapses to a single-panel navigation stack (list -> items with Back) via container query when narrow (right dock); wide two-panel layout unchanged.
- Embedded Import Tasks body scrolls vertically so the preview can be much taller (stacked layout gives the preview natural height; wide layout keeps internal scroll).
- Add a shared ViewHeader component (icon + CC-style title + wrapping actions) for consistent main-view headers.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Left sidebar reordered to a single explicit list (board, list, graph, command-center, agents, chat, mailbox, planning, missions, artifacts, goals, compound, automation, import, workflows, insights, research, skills, memory, evals, remaining plugins). Command Center before Agents; Artifacts after Missions.
- Dev Server and Secrets moved off the left sidebar into the right dock (inline render; Dev Server gated by the devServerView flag).
- Import Tasks embedded view uses a Command Center-style header (GitHub logo + shared title font + padding).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Right dock: Files first/default; usage/activity-log/git-manager render inline; embedded Git Manager uses a container query (compact horizontal tab strip in the dock, full two-pane in the wide pop-out); Files inline viewer + pop-out.
- Import Tasks layout fits its container (stacked when narrow, two-pane when wide); Import Tasks uses the GitHub mark.
- Planning embeds full-area and works on mobile; planning shows the board WorkflowSwitcher.
- Automations screen uses theme color tokens.
- Workflow selector matches the project selector height/font.
- Left sidebar: uniform spacing across the primary/secondary boundary.
Adds a changeset for @runfusion/fusion (minor).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- New built-in task views: workflows, import-tasks, automations (left-sidebar destinations rendering in the main content area).
- WorkflowNodeEditor, GitHubImportModal, and ScheduledTasksModal gain a presentation=embedded mode (inline, no overlay/close, modal-only behaviors disabled). Automations embedded view uses a Command Center-style header and a responsive two-pane (list + detail) layout when wide enough.
- Left sidebar adds Workflows, Import Tasks, Automations entries; renderMainContent renders the embedded views.
- Remove github-import and automation from the right dock; hide the desktop Header Workflow button when the left sidebar owns Workflows. Mobile overflow keeps the modal entry points unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Restores reliable GitHub import left-pane resizing while keeping it scoped to the two-pane layout.
- Unify resize availability with the side-by-side breakpoint so the handle and fixed pane width only render when dragging is supported.
- Enlarge the divider hit area without changing the visible divider treatment.
- Cover pointer dragging, clamping, responsive hiding, and list/PR tab resize surfaces.
Files changed:
.../dashboard/app/components/GitHubImportModal.css | 20 ++++-
.../dashboard/app/components/GitHubImportModal.tsx | 35 +++++----
.../__tests__/GitHubImportModal.test.tsx | 91 +++++++++++++++++++++-
3 files changed, 127 insertions(+), 19 deletions(-)
Fusion-Task-Id: FN-6403
Fusion-Task-Lineage: 974903f5-63dd-4852-9edf-6b0ade7ca912
Keep GitHub import previews fully readable and scrollable on mobile while preserving desktop truncation.
- allow the active mobile preview pane to size and scroll correctly within the modal
- show full issue and pull request bodies on mobile while keeping desktop previews truncated
- add regression coverage for mobile scrolling, no-description fallbacks, and mobile/desktop body rendering
Files changed:
packages/dashboard/app/components/GitHubImportModal.css | 18 +++
packages/dashboard/app/components/GitHubImportModal.tsx | 18 ++-
packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx | 160 +++++++++++++++++++++
3 files changed, 190 insertions(+), 6 deletions(-)
Fusion-Task-Id: FN-6044
Fusion-Task-Lineage: 43b6e686-a34f-4fec-9929-b4d28c12ac7a
Migrated dashboard component CSS from hardcoded `rgba()` values to design token variables across nine components including `CustomModelDropdown`, `CliBinaryPanel`, and `CliBinaryInstallBanner`, with test coverage added for the affected components.
Fusion-Task-Id: FN-4016
The Settings, Workflow Steps, Automations (and friends) modals all carried
desktop `min-width: 480-520px` constraints from the resize work. On phones
that pushed them off-screen, and the overlay's 10vh top padding plus a
fractional `height: 80vh` left awkward gaps top and bottom.
Apply the same `@media (max-width: 768px)` full-screen-sheet treatment
that File Browser already had to every resize-aware modal: drop the
overlay padding, set width/height to `100vw`/`100dvh`, zero out the
min-* / max-* constraints, and disable `resize` (touchscreens can't grab
the corner grip anyway).
Also tightened the existing File Browser and GitHub Import overrides to
match (`min-width: 0`, `min-height: 0`, `resize: none`).
For TaskDetailModal the mobile rules go inside the existing first
`@media (max-width: 768px)` block to keep the FN-1331 detail-body
padding regression test happy (it captures from the first 768px media
query greedily).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Modal resize + size persistence
- Extract `useModalResizePersist` hook (ResizeObserver + localStorage),
apply to Files, Git Manager, GitHub Import, Workflow Steps, Automations
(ScheduledTasks), and Settings modals. Each gets `resize: both`, sane
min/max constraints, and a unique storage key.
- Bump default heights so the modals feel less cramped (Git: 92vh,
Workflow/Automation: 80vh, Settings: 80vh / 1100px).
Scrollbar theme
- Add a global `*::-webkit-scrollbar*` + `scrollbar-color` rule in
styles.css so chat, document, system stats, file browser, usage
indicator, etc. inherit the theme. Existing per-component overrides
(.board, .column-body, .settings-sidebar, planning modal) still win.
Document view
- Collapse "Show hidden" toggle and search input onto the same row as
the Project Files / Task Documents segmented control. Stack again
below 768px.
Mailbox / Todos
- Match Todos header treatment to the Mailbox header (typography,
padding, border).
- Add top spacing above Mailbox Inbox/Outbox/Agents tab bar so the
vertical gaps balance.
Settings
- Wider, resizable, persisted Settings modal.
- Project Models description and Authentication panel get proper
horizontal padding.
- Reorder project sidebar so "General" is first.
- Plugins page: clean margins, integrate refresh button, exclude
bundled runtimes from the "Installed Plugins" list (they were
appearing twice — once erroring, once in their own section).
- New "Updates" panel with auto-check toggle + "Check now" button
(frequency control noted as needing a backend schema field).
Background sessions
- Fix stale "AI N" / planning-icon badge: `handleDeleted` in
`useBackgroundSessions` now writes a tombstone, advances the
timestamp guard, and broadcasts completion so the cross-tab
sync store stops resurrecting the deleted session on the next
merge tick. Added regression test.
- Re-fetch list on SSE reconnect so terminal events fired during a
network blip don't get permanently lost.
System stats
- Refresh button uses correct single class (was getting both `btn`
and `btn-icon`, which conflicted on padding/border).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
All three were declared as 100vw/100dvh on mobile but the .modal-overlay
default still applied 10vh top padding, leaving them pushed below the
viewport edge with a sliver of overlay showing on top. Override
.modal-overlay:has(.X) to drop padding and stretch to fill, and explicitly
zero out border/radius/margin on the modal itself so the sheet truly
covers the screen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
