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:
parent
40e9d7917c
commit
00c9d62a99
2 changed files with 57 additions and 0 deletions
55
src/renderer/components/common/CliInstallWarningBanner.tsx
Normal file
55
src/renderer/components/common/CliInstallWarningBanner.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue