Add `/about` command

3 files changed, 79 insertions, 1 deletions

diff --git a/packages/cli/src/ui/components/AboutBox.tsx b/packages/cli/src/ui/components/AboutBox.tsx
new file mode 100644
index 00000000..a1a3a562
--- /dev/null
+++ b/packages/cli/src/ui/components/AboutBox.tsx
@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+
+interface AboutBoxProps {
+  cliVersion: string;
+  osVersion: string;
+  sandboxEnv: string;
+  modelVersion: string;
+}
+
+export const AboutBox: React.FC<AboutBoxProps> = ({
+  cliVersion,
+  osVersion,
+  sandboxEnv,
+  modelVersion,
+}) => (
+  <Box
+    borderStyle="round"
+    borderColor={Colors.SubtleComment}
+    flexDirection="column"
+    padding={1}
+    marginY={1}
+    width="100%"
+  >
+    <Box marginBottom={1}>
+      <Text bold color={Colors.AccentPurple}>
+        About Gemini CLI
+      </Text>
+    </Box>
+    <Box flexDirection="row">
+      <Box width="35%">
+        <Text bold color={Colors.LightBlue}>CLI Version</Text>
+      </Box>
+      <Box>
+        <Text>{cliVersion}</Text>
+      </Box>
+    </Box>
+    <Box flexDirection="row">
+      <Box width="35%">
+        <Text bold color={Colors.LightBlue}>Model</Text>
+      </Box>
+      <Box>
+        <Text>{modelVersion}</Text>
+      </Box>
+    </Box>
+    <Box flexDirection="row">
+      <Box width="35%">
+        <Text bold color={Colors.LightBlue}>Sandbox</Text>
+      </Box>
+      <Box>
+        <Text>{sandboxEnv}</Text>
+      </Box>
+    </Box>
+    <Box flexDirection="row">
+      <Box width="35%">
+        <Text bold color={Colors.LightBlue}>OS</Text>
+      </Box>
+      <Box>
+        <Text>{osVersion}</Text>
+      </Box>
+    </Box>
+  </Box>
+);
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 7f7d058a..a94714d3 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -64,7 +64,6 @@ export const Footer: React.FC<FooterProps> = ({
     {/* Right Section: Gemini Label and Console Summary */}
     <Box alignItems="center">
       <Text color={Colors.AccentBlue}> {config.getModel()} </Text>
-      <Text color={Colors.SubtleComment}>| CLI {cliVersion} </Text>
       {corgiMode && (
         <Text>
           <Text color={Colors.SubtleComment}>| </Text>
diff --git a/packages/cli/src/ui/components/HistoryItemDisplay.tsx b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
index 9a93d09f..21ffb5a1 100644
--- a/packages/cli/src/ui/components/HistoryItemDisplay.tsx
+++ b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
@@ -14,6 +14,7 @@ import { ErrorMessage } from './messages/ErrorMessage.js';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
 import { Box } from 'ink';
+import { AboutBox } from './AboutBox.js';
 
 interface HistoryItemDisplayProps {
   item: HistoryItem;
@@ -48,6 +49,14 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
     )}
     {item.type === 'info' && <InfoMessage text={item.text} />}
     {item.type === 'error' && <ErrorMessage text={item.text} />}
+    {item.type === 'about' && (
+      <AboutBox
+        cliVersion={item.cliVersion}
+        osVersion={item.osVersion}
+        sandboxEnv={item.sandboxEnv}
+        modelVersion={item.modelVersion}
+      />
+    )}
     {item.type === 'tool_group' && (
       <ToolGroupMessage
         toolCalls={item.tools}