2 files changed, 52 insertions, 0 deletions
diff --git a/packages/cli/src/ui/components/HistoryItemDisplay.tsx b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
index fc1b128d..d99ad503 100644
--- a/packages/cli/src/ui/components/HistoryItemDisplay.tsx
+++ b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
@@ -13,6 +13,7 @@ import { InfoMessage } from './messages/InfoMessage.js';
 import { ErrorMessage } from './messages/ErrorMessage.js';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
+import { CompressionMessage } from './messages/CompressionMessage.js';
 import { Box } from 'ink';
 import { AboutBox } from './AboutBox.js';
 import { StatsDisplay } from './StatsDisplay.js';
@@ -81,5 +82,8 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
         isFocused={isFocused}
       />
     )}
+    {item.type === 'compression' && (
+      <CompressionMessage compression={item.compression} />
+    )}
   </Box>
 );
diff --git a/packages/cli/src/ui/components/messages/CompressionMessage.tsx b/packages/cli/src/ui/components/messages/CompressionMessage.tsx
new file mode 100644
index 00000000..aaa56149
--- /dev/null
+++ b/packages/cli/src/ui/components/messages/CompressionMessage.tsx
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { CompressionProps } from '../../types.js';
+import Spinner from 'ink-spinner';
+import { Colors } from '../../colors.js';
+
+export interface CompressionDisplayProps {
+  compression: CompressionProps;
+}
+
+/*
+ * Compression messages appear when the /compress command is ran, and show a loading spinner
+ * while compression is in progress, followed up by some compression stats.
+ */
+export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
+  compression,
+}) => {
+  const text = compression.isPending
+    ? 'Compressing chat history'
+    : `Chat history compressed from ${compression.originalTokenCount} to ${compression.newTokenCount} tokens.`;
+
+  return (
+    <Box flexDirection="row">
+      <Box marginRight={1}>
+        {compression.isPending ? (
+          <Spinner type="dots" />
+        ) : (
+          <Text color={Colors.AccentPurple}>✦</Text>
+        )}
+      </Box>
+      <Box>
+        <Text
+          color={
+            compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
+          }
+        >
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};