Add `/about` command

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>
+);

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>

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}

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -9,7 +9,7 @@ import { type PartListUnion } from '@google/genai';
 import open from 'open';
 import { UseHistoryManagerReturn } from './useHistoryManager.js';
 import { Config } from '@gemini-code/server';
-import { Message, MessageType, HistoryItemWithoutId } from '../types.js';
+import { Message, MessageType, HistoryItemWithoutId } from '../types.js'; // Removed HistoryItem
 import { createShowMemoryAction } from './useShowMemoryCommand.js';
 
 export interface SlashCommandActionReturn {
@@ -47,10 +47,25 @@ export const useSlashCommandProcessor = (
 ) => {
   const addMessage = useCallback(
     (message: Message) => {
-      const historyItemContent: HistoryItemWithoutId = {
-        type: message.type,
-        text: message.content,
-      };
+      // Convert Message to HistoryItemWithoutId
+      let historyItemContent: HistoryItemWithoutId;
+      if (message.type === MessageType.ABOUT) {
+        historyItemContent = {
+          type: 'about',
+          cliVersion: message.cliVersion,
+          osVersion: message.osVersion,
+          sandboxEnv: message.sandboxEnv,
+          modelVersion: message.modelVersion,
+        };
+      } else {
+        historyItemContent = {
+          type: message.type as
+            | MessageType.INFO
+            | MessageType.ERROR
+            | MessageType.USER,
+          text: message.content,
+        };
+      }
       addItem(historyItemContent, message.timestamp.getTime());
     },
     [addItem],
@@ -149,6 +164,29 @@ export const useSlashCommandProcessor = (
           toggleCorgiMode();
         },
       },
+      {
+        name: 'about',
+        description: 'Show version info',
+        action: (_mainCommand, _subCommand, _args) => {
+          const osVersion = `${process.platform} ${process.version}`;
+          let sandboxEnv = 'no sandbox';
+          if (process.env.SANDBOX && process.env.SANDBOX !== 'sandbox-exec') {
+            sandboxEnv = process.env.SANDBOX.replace(/^gemini-(?:code-)?/, '');
+          } else if (process.env.SANDBOX === 'sandbox-exec') {
+            sandboxEnv = `sandbox-exec (${process.env.SEATBELT_PROFILE || 'unknown'})`;
+          }
+          const modelVersion = config?.getModel() || 'Unknown';
+
+          addMessage({
+            type: MessageType.ABOUT,
+            timestamp: new Date(),
+            cliVersion,
+            osVersion,
+            sandboxEnv,
+            modelVersion,
+          });
+        },
+      },
       {
         name: 'bug',
         description: 'Submit a bug report.',

packages/cli/src/ui/types.ts

@@ -80,6 +80,14 @@ export type HistoryItemError = HistoryItemBase & {
   text: string;
 };
 
+export type HistoryItemAbout = HistoryItemBase & {
+  type: 'about';
+  cliVersion: string;
+  osVersion: string;
+  sandboxEnv: string;
+  modelVersion: string;
+};
+
 export type HistoryItemToolGroup = HistoryItemBase & {
   type: 'tool_group';
   tools: IndividualToolCallDisplay[];
@@ -101,6 +109,7 @@ export type HistoryItemWithoutId =
   | HistoryItemGeminiContent
   | HistoryItemInfo
   | HistoryItemError
+  | HistoryItemAbout
   | HistoryItemToolGroup;
 
 export type HistoryItem = HistoryItemWithoutId & { id: number };
@@ -110,15 +119,26 @@ export enum MessageType {
   INFO = 'info',
   ERROR = 'error',
   USER = 'user',
+  ABOUT = 'about', // Added ABOUT type
   // Add GEMINI if needed by other commands
 }
 
 // Simplified message structure for internal feedback
-export interface Message {
-  type: MessageType;
-  content: string; // Renamed from text for clarity in this context
-  timestamp: Date; // For consistency, though addItem might use its own timestamping
-}
+export type Message =
+  | {
+      type: MessageType.INFO | MessageType.ERROR | MessageType.USER;
+      content: string; // Renamed from text for clarity in this context
+      timestamp: Date;
+    }
+  | {
+      type: MessageType.ABOUT;
+      timestamp: Date;
+      cliVersion: string;
+      osVersion: string;
+      sandboxEnv: string;
+      modelVersion: string;
+      content?: string; // Optional content, not really used for ABOUT
+    };
 
 export interface ConsoleMessageItem {
   type: 'log' | 'warn' | 'error' | 'debug';