From 00c9d62a9980add9e25f8de4d9cf9bb9bff35160 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sun, 22 Mar 2026 15:07:45 +0200
Subject: [PATCH] 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.
---
 .../common/CliInstallWarningBanner.tsx        | 55 +++++++++++++++++++
 .../components/layout/TabbedLayout.tsx        |  2 +
 2 files changed, 57 insertions(+)
 create mode 100644 src/renderer/components/common/CliInstallWarningBanner.tsx

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 (
+    <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>
+  );
+};
diff --git a/src/renderer/components/layout/TabbedLayout.tsx b/src/renderer/components/layout/TabbedLayout.tsx
index b384c429..3dc5fd39 100644
--- a/src/renderer/components/layout/TabbedLayout.tsx
+++ b/src/renderer/components/layout/TabbedLayout.tsx
@@ -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 />