Add render counter in debug mode (#5242)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

packages/cli/src/ui/components/DebugProfiler.tsx

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Text, useInput } from 'ink';
+import { useEffect, useRef, useState } from 'react';
+import { Colors } from '../colors.js';
+
+export const DebugProfiler = () => {
+  const numRenders = useRef(0);
+  const [showNumRenders, setShowNumRenders] = useState(false);
+
+  useEffect(() => {
+    numRenders.current++;
+  });
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'b') {
+      setShowNumRenders((prev) => !prev);
+    }
+  });
+
+  if (!showNumRenders) {
+    return null;
+  }
+
+  return (
+    <Text color={Colors.AccentYellow}>Renders: {numRenders.current} </Text>
+  );
+};

packages/cli/src/ui/components/Footer.tsx

@@ -13,6 +13,8 @@ import process from 'node:process';
 import Gradient from 'ink-gradient';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
 
+import { DebugProfiler } from './DebugProfiler.js';
+
 interface FooterProps {
   model: string;
   targetDir: string;
@@ -48,6 +50,7 @@ export const Footer: React.FC<FooterProps> = ({
   return (
     <Box justifyContent="space-between" width="100%">
       <Box>
+        {debugMode && <DebugProfiler />}
         {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>}
         {nightly ? (
           <Gradient colors={Colors.GradientColors}>