diff --git a/src/renderer/components/common/CliInstallWarningBanner.tsx b/src/renderer/components/common/CliInstallWarningBanner.tsx new file mode 100644 index 00000000..c54d7a64 --- /dev/null +++ b/src/renderer/components/common/CliInstallWarningBanner.tsx @@ -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 ( +