Add `/compress` command to force a compression of the context (#986)

Related to https://b.corp.google.com/issues/423605555 - I figured this might be a simpler solution to start with, while still also being useful on its own even if we do implement that.

1 files changed, 48 insertions, 0 deletions

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