Restyle the workflow switcher chrome to align with the project selector while preserving workflow-specific affordances.
- Update the workflow trigger and menu CSS to use project-selector spacing, borders, hover states, shadows, and scrollbar chrome.
- Keep workflow counts, selected-row tinting, edit actions, create footer, and mobile width behavior intact.
- Add CSS parity coverage for the switcher trigger, menu, options, and selected state.
- Add a patch changeset for the published Fusion package.
Files changed:
.changeset/fn-6919-workflow-switcher-style.md | 5 ++
.../dashboard/app/components/WorkflowSwitcher.css | 60 ++++++++++++++++++----
.../components/__tests__/WorkflowSwitcher.test.tsx | 46 +++++++++++++++++
3 files changed, 102 insertions(+), 9 deletions(-)
Fusion-Task-Id: FN-6919
Fusion-Task-Lineage: df19f96a-d24e-4876-b837-41f0778b3d40
- Planning: .modal max-height:80vh capped the embedded panel ~49px short; .planning-view .planning-modal--embedded { max-height:none } (higher specificity) lets sidebar + detail fill to the view bottom.
- Goals: .goals-card-main had no flex so a long description grew to content width and starved the equal-weight Linked Missions column to ~13px; flex:1 + min-width:0 rebalances them.
- Small margin below the Automations + Goals headers so content clears the divider.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
gh pr/issue view --json comments returns only author.login (no type), and app-bot logins (coderabbitai, greptileai) lack the [bot] suffix — so every app bot was classified human. Fetch comments via gh api graphql with author{ __typename login avatarUrl } so authorIsBot = __typename === 'Bot' (any app bot by type, no hardcoded names); REST token-fallback already used user.type/[bot]. Output shape + avatars preserved.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Embedded Settings header now uses the canonical treatment (min-height var(--view-header-min-height), space-lg/space-xl padding, surface bg, 1px divider, var(--todo) icon, 1.125rem/600 title, actions pinned right) — was a transparent no-divider bespoke header. Also trim the embedded footer's padding-bottom so the gap below the Save/Help/Version/Import-Export row matches the gap above it.
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>
The no-dim/no-blur override only applied to docked/floating; a terminal that was neither (mobile/default sheet) fell back to the dimmed base .modal-overlay. Always carry a base terminal-modal-overlay class + a rule that clears background+blur for every terminal state.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SKILL.md now renders via MailboxMessageContent (markdown + sanitized HTML + mermaid) instead of raw <pre>. Files strip is compact and lists all files; clicking a file loads its content in the detail pane (markdown via MailboxMessageContent, other text via <pre>, binary/oversized notice) with a Back-to-SKILL.md affordance. New GET /api/skills/:id/file endpoint (readSkillFileContent: path-traversal-guarded, 2MB ceiling, binary detection) + fetchSkillFileContent client fn.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
.evals-view root had no sizing, so flexbox shrank it to min-content and the disabled-state text wrapped one word per line. Add width/height:100% + min-0 + overflow to the root, flex:1 body, and a centered full-width empty-state wrapper; the disabled state now also renders the shared ViewHeader (icon+title) like the enabled state.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- .planning-view-footer drops its border-top divider + trims padding so the Start-Planning action flows with the content instead of reading as a large bottom footer band.
- List controls bottom padding + quick-add top padding reduced (space-md -> space-xs) so the toolbar sits close to the quick-add box.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ViewHeader.css defaults now carry the canonical header: space-lg/space-xl padding, surface bg, 1px border-bottom, icon var(--todo), title 1.125rem/600, actions pinned right (margin-left:auto). Removed now-redundant per-view overrides (Agents, Documents doubled divider); converted Secrets from a bespoke header to ViewHeader (Lock icon + Refresh/Add as btn btn-sm); aligned Command Center title metrics. Right-dock/pop-out Secrets hide-selectors retargeted so the dock is unchanged. Chat/Todo (no view title row) and AgentDetail (per-entity header) intentionally left bespoke.
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>
Extract the markdown HTML/mermaid pipeline into shared markdownPipeline.tsx (sharedSanitizeSchema, sharedRehypePlugins, createMermaidCodeComponent). MailboxMessageContent now consumes it (unchanged behavior). TaskDetailModal's description + summary ReactMarkdown gain sharedRehypePlugins + the mermaid code component (merged with the existing file-path linkify), keeping the .markdown-body wrapper — so raw HTML renders, comments drop, scripts are sanitized, and mermaid blocks render.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- .planning-view-footer:empty -> display:none (no reserved space / divider band when empty); legitimate composer + start-planning footers untouched.
- Planning embedded header icon -> var(--todo), title-row gap -> space-sm, h3 -> 1.125rem/600/var(--text), border-bottom divider -> matches mission-manager__header exactly. Mission already had a single divider (no doubled line); documented the invariant.
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>
MailboxMessageContent pipeline gains rehype-raw -> rehype-sanitize (GitHub-like allow list: details/summary/kbd/tables/etc; strips script/style/iframe/on*/javascript:) so raw HTML in markdown renders and HTML comments are dropped. Fenced ```mermaid blocks render via a lazy-loaded MermaidDiagram component (dynamic import keeps mermaid out of the main bundle; theme-aware; falls back to the raw block on parse error).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Toolbar (Bulk Edit / View / New Task) is centered (dropped the margin-left:auto right-push).
- List divider now draws its 1px line via .list-split-sidebar border-right (identical to Chat's .chat-sidebar), with a transparent hover-tint handle; removed the doubled detail border-left.
- Quick-add input padding-right 70px (inherited from the global .description-with-refine textarea refine-button reservation) tightened to space-sm — no overlaid button there, so text reclaims the width.
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>
Root cause: fitToGraph's clampPan clamped against graphBoundsRef, which a separate effect populated from NORMALIZED bounds — on first paint the ref was still {0,0,0,0}, so pan clamped to +/-viewport (off-center) and only a manual drag re-ran clampPan against the committed bounds. Fit now runs on normalizedPositions (fit-space == render-space == clamp-space), after the setGraphBounds effect, deferred a double-rAF so the committed bounds are live before clampPan; ResizeObserver still drives the hidden->visible 0->N fit. Manual-layout opt-out preserved.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Active/selected nav row keeps the accent color even while hovered (--active:hover now outranks plain :hover).
- New Task footer button drops its CTA inset margins so it's the same height/width as the Collapse and Settings footer items (keeps the accent fill).
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>
Remove the New Session button's inset-ring outline (now identical to the Missions sidebar CTA); match the Missions sidebar footer padding/border; add a resizable sidebar mirroring MissionManager (drag handle, persisted width, clamp, keyboard); match the header + content padding (space-lg/space-xl, surface bg) so Planning and Missions read as siblings.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- LeftSidebarNav: optimistic active highlight — clicking a nav item paints the active color instantly instead of lingering on the hover color until the lazy view mounts.
- List view: the view-options toggle label is now 'View'.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
List handle drops its persistent tinted band (transparent default) and its grip line goes 2px->1px; Mailbox divider line goes var(--space-xs)->1px var(--border). All three now show a single clean 1px static divider with the wider handle as an invisible hover-highlight hit-area (Chat's pattern).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Wide (>=640px container): skills list left + skill detail right (both visible). Narrow/mobile: single-panel master->detail — selecting a skill shows the detail on top with a Back affordance. CSS container query, mirroring DockFilesView.
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>
The passphrase section now renders below the secrets list as a click-to-expand disclosure (closed by default), keeping all set/rotate/clear behavior.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Remove the Active nodes and Sessions stat cards (data still feeds the activity sparkline). Remaining cards reflow via auto-fill.
- Stat value font scales up to fill the card (container-query cqi clamp, nowrap+overflow:hidden+min-width:0 so long values shrink to fit, never overflow).
- Add space-lg above the View Board/View Agents row so it's balanced below the Start/Stop AI Engine button.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- LeftSidebarNav: Planning + Missions now sit directly after List/Graph and before Agents.
- ConfirmDialog: portal to document.body and claim the top of the shared floating z-stack on open, so the discard-changes confirm appears ABOVE the floating New Task window (and other floating modals) instead of behind it.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Left becomes a full-height .planning-sidebar (Missions-matched surface/border/width) with a scrolling list and a bottom-pinned footer; New Session moves to that footer using btn btn-primary (same CTA tokens as the Missions create button — size/color match). Right .planning-detail fills remaining width + full height, so it reads as a true two-pane view. Non-embedded modal presentation unchanged.
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>
- RIGHT_DOCK_MAX_WIDTH 720 to 1280 (all clamps/persist/aria funnel through it); CSS --right-dock-max-width raised to calc(space-2xl * 40), keeping min(100%, ...).
- The dock now threads its live width into the overflow view render props; the Files entry deterministically forces the LEFT|RIGHT two-pane split when the dock width >= 640 (no longer relying on the flaky @container query that left it stacked top/bottom). Narrow dock keeps the stacked single-panel nav; the expand pop-out stays always two-pane.
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>
detail===null always rendered the 'Loading PR…' spinner, so with no pullRequestId (nothing to load) the view spun forever. Add a flag set only while a fetch is in flight (no id → empty state), a fetch timeout (15s) so a hung request surfaces an error, and a 'No pull request to show' empty state.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move Clear / Shortcuts / Preferences from the top toolbar into the bottom footer next to the text-size control; text-size sits at the far left, then the action cluster, then connection status pushed right. The pop-out toggle is now icon-only (Maximize2/Minimize2, aria-label/title kept). Footer wraps + the action cluster scrolls on narrow widths.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
