Add render counter in debug mode (#5242)

Co-authored-by: Jacob Richman <[email protected]>

1 files changed, 32 insertions, 0 deletions

diff --git a/packages/cli/src/ui/components/DebugProfiler.tsx b/packages/cli/src/ui/components/DebugProfiler.tsx
new file mode 100644
index 00000000..89c40a91
--- /dev/null
+++ b/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>
+  );
+};