feat(cli): add CliInstallWarningBanner to notify users when CLI is not installed

Introduce a new CliInstallWarningBanner component that displays a warning when the Claude Code CLI is not installed. This banner is only shown in Electron mode and is hidden on Dashboard pages. The banner includes a message prompting users to install the CLI and a button to navigate to the Dashboard.
This commit is contained in:
iliya 2026-03-22 15:07:45 +02:00
parent 40e9d7917c
commit 00c9d62a99
2 changed files with 57 additions and 0 deletions

View file

@ -0,0 +1,55 @@
/**
* CliInstallWarningBanner Global warning strip shown below the tab bar
* when Claude Code CLI is not installed.
*
* Hidden on Dashboard pages (which have their own detailed CliStatusBanner).
* Only rendered in Electron mode.
*/
import { isElectronMode } from '@renderer/api';
import { useStore } from '@renderer/store';
import { AlertTriangle } from 'lucide-react';
export const CliInstallWarningBanner = (): React.JSX.Element | null => {
const cliStatus = useStore((s) => s.cliStatus);
const openDashboard = useStore((s) => s.openDashboard);
// Returns a primitive boolean — minimizes re-renders
const isDashboardFocused = useStore((s) => {
const fp = s.paneLayout.panes.find((p) => p.id === s.paneLayout.focusedPaneId);
if (!fp) return false;
if (fp.tabs.length === 0) return true; // empty pane = default DashboardView
return fp.tabs.find((t) => t.id === fp.activeTabId)?.type === 'dashboard';
});
// Hide when: not Electron, status not loaded yet, CLI installed, or dashboard is focused
if (!isElectronMode() || !cliStatus || cliStatus.installed || isDashboardFocused) {
return null;
}
return (
<div
className="flex items-center gap-2 border-b px-4 py-2"
style={{
backgroundColor: 'var(--warning-bg)',
borderColor: 'var(--warning-border)',
color: 'var(--warning-text)',
}}
>
<AlertTriangle className="size-3.5 shrink-0" />
<span className="text-xs">
Claude Code is not installed. Install it from the Dashboard to enable all features.
</span>
<button
onClick={openDashboard}
className="ml-auto shrink-0 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-white/5"
style={{
borderColor: 'var(--warning-border)',
color: 'var(--warning-text)',
}}
>
Go to Dashboard
</button>
</div>
);
};

View file

@ -27,6 +27,7 @@ import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
import { useZoomFactor } from '@renderer/hooks/useZoomFactor';
import { useStore } from '@renderer/store';
import { CliInstallWarningBanner } from '../common/CliInstallWarningBanner';
import { UpdateBanner } from '../common/UpdateBanner';
import { UpdateDialog } from '../common/UpdateDialog';
import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
@ -160,6 +161,7 @@ export const TabbedLayout = (): React.JSX.Element => {
onDragEnd={handleDragEnd}
>
<TabBarRow />
<CliInstallWarningBanner />
<div className="flex flex-1 overflow-hidden">
{/* Command Palette (Cmd+K) */}
<CommandPalette />