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