root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): distinguish CLI update vs install banner

Browse Source 
When the local fn/fusion CLI is on the wrong version, the banner now
says "Update the Fusion CLI", shows installed vs expected versions,
and labels the action "Update with npm" instead of the generic install
copy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-05 15:09:53 -07:00
parent dc8863dbcb
commit e6fd593c40
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cli-version-mismatch-banner.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@fusion/dashboard": patch
---
Differentiate the CLI banner between missing-install and version-mismatch states: when the installed `fn`/`fusion` CLI is out of date, show "Update the Fusion CLI" with current vs target versions and an "Update with npm" button instead of the generic install copy.

28
packages/dashboard/app/components/CliBinaryInstallBanner.tsx
View File

@@ -103,14 +103,30 @@ export function CliBinaryInstallBanner({ onOpenSettings }: Props) {
// disabled the install banner would be misleading.
if (status.state === "skipped") return null;
const isMismatch = status.state === "version-mismatch";
const installedVersion = status.binary.version;
const targetVersion = status.expectedVersion;
const title = isMismatch ? "Update the Fusion CLI" : "Install the Fusion CLI";
const body = isMismatch ? (
<>
Your installed <code>fn</code>/<code>fusion</code> CLI is{" "}
<strong>v{installedVersion ?? "unknown"}</strong> but this dashboard expects{" "}
<strong>v{targetVersion}</strong>. Update to stay in sync.
</>
) : (
<>
Get the <code>fn</code> and <code>fusion</code> commands on your terminal so you
can drive Fusion from anywhere. One click below or copy the command into your shell.
</>
);
const idleLabel = isMismatch ? "Update with npm" : "Install with npm";
const busyLabel = isMismatch ? "Updating…" : "Installing…";
return (
<div className="cli-binary-banner" role="status">
<div className="cli-binary-banner__body">
<div className="cli-binary-banner__title">Install the Fusion CLI</div>
<div className="cli-binary-banner__text">
Get the <code>fn</code> and <code>fusion</code> commands on your terminal so you
can drive Fusion from anywhere. One click below or copy the command into your shell.
</div>
<div className="cli-binary-banner__title">{title}</div>
<div className="cli-binary-banner__text">{body}</div>
<div className="cli-binary-banner__actions">
<button
type="button"
@@ -118,7 +134,7 @@ export function CliBinaryInstallBanner({ onOpenSettings }: Props) {
onClick={() => void handleInstall()}
disabled={installing}
>
{installing ? "Installing…" : "Install with npm"}
{installing ? busyLabel : idleLabel}
</button>
<button
type="button"