diff --git a/packages/cli/src/ui/components/AppHeader.tsx b/packages/cli/src/ui/components/AppHeader.tsx
index 7d0ef75a36..0a33bca35d 100644
--- a/packages/cli/src/ui/components/AppHeader.tsx
+++ b/packages/cli/src/ui/components/AppHeader.tsx
@@ -62,7 +62,10 @@ export const AppHeader = ({ version, showDetails = true }: AppHeaderProps) => {
const { terminalWidth, bannerData, bannerVisible, updateInfo } = useUIState();
const { bannerText } = useBanner(bannerData);
- const { showTips } = useTips();
+ const isTipsVisible = !(
+ settings.merged.ui.hideTips || config.getScreenReader()
+ );
+ const { showTips } = useTips({ isVisible: isTipsVisible });
const authType = config.getContentGeneratorConfig()?.authType;
const loggedOut = !authType;
@@ -159,8 +162,7 @@ export const AppHeader = ({ version, showDetails = true }: AppHeaderProps) => {
/>
)}
- {!(settings.merged.ui.hideTips || config.getScreenReader()) &&
- showTips && }
+ {isTipsVisible && showTips && }
);
};
diff --git a/packages/cli/src/ui/hooks/useTips.test.ts b/packages/cli/src/ui/hooks/useTips.test.ts
index 1cb64b5aa8..a3e245b765 100644
--- a/packages/cli/src/ui/hooks/useTips.test.ts
+++ b/packages/cli/src/ui/hooks/useTips.test.ts
@@ -14,6 +14,7 @@ import { useTips } from './useTips.js';
describe('useTips()', () => {
beforeEach(() => {
vi.clearAllMocks();
+ persistentStateMock.setData({ tipsShown: undefined });
});
it('should return false and call set(1) if state is undefined', async () => {
@@ -44,4 +45,13 @@ describe('useTips()', () => {
expect(persistentStateMock.set).not.toHaveBeenCalled();
expect(persistentStateMock.get('tipsShown')).toBe(10);
});
+
+ it('should NOT increment if isVisible is false', async () => {
+ const { result } = await renderHookWithProviders(() =>
+ useTips({ isVisible: false }),
+ );
+
+ expect(result.current.showTips).toBe(true);
+ expect(persistentStateMock.set).not.toHaveBeenCalled();
+ });
});
diff --git a/packages/cli/src/ui/hooks/useTips.ts b/packages/cli/src/ui/hooks/useTips.ts
index 75fe8bb096..31719730fb 100644
--- a/packages/cli/src/ui/hooks/useTips.ts
+++ b/packages/cli/src/ui/hooks/useTips.ts
@@ -11,16 +11,21 @@ interface UseTipsResult {
showTips: boolean;
}
-export function useTips(): UseTipsResult {
+interface UseTipsOptions {
+ isVisible?: boolean;
+}
+
+export function useTips(options: UseTipsOptions = {}): UseTipsResult {
+ const { isVisible = true } = options;
const [tipsCount] = useState(() => persistentState.get('tipsShown') ?? 0);
const showTips = tipsCount < 10;
useEffect(() => {
- if (showTips) {
+ if (showTips && isVisible) {
persistentState.set('tipsShown', tipsCount + 1);
}
- }, [tipsCount, showTips]);
+ }, [tipsCount, showTips, isVisible]);
return { showTips };
}