1 files changed, 26 insertions, 1 deletions
diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
index cfc3a297..26ea5534 100644
--- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx
+++ b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Text, Box } from 'ink';
+import { exec } from 'child_process';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { Colors } from '../../colors.js';
 import { SCREEN_READER_MODEL_PREFIX } from '../../constants.js';
@@ -23,6 +24,30 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
   availableTerminalHeight,
   terminalWidth,
 }) => {
+  // --- Start of Modification ---
+  // Use a useEffect hook to trigger a side effect when the component renders
+  // with new text. This is the correct way to handle non-UI logic in React.
+  useEffect(() => {
+    // Don't execute for pending or empty responses.
+    if (isPending || !text) {
+      return;
+    }
+
+    // TODO: Replace this with the actual command you want to run.
+    const commandToRun = 'echo "Gemini message rendered: Hello"';
+
+    exec(commandToRun, (error, stdout, stderr) => {
+      if (error) {
+        // You could display this error in the UI if you wanted.
+        // For now, it will just log to the console where the CLI is running.
+        console.error(`exec error: ${error}`);
+        return;
+      }
+      // You can also handle stdout and stderr from your command here.
+    });
+  }, [text, isPending]); // This hook re-runs only when `text` or `isPending` changes.
+  // --- End of Modification ---
+
   const prefix = '✦ ';
   const prefixWidth = prefix.length;