feat(ui): refine /colors value column width and prevent text wrap in tests

packages/cli/src/services/BuiltinCommandLoader.ts

@@ -22,7 +22,6 @@ import { agentsCommand } from '../ui/commands/agentsCommand.js';
 import { authCommand } from '../ui/commands/authCommand.js';
 import { bugCommand } from '../ui/commands/bugCommand.js';
 import { chatCommand, debugCommand } from '../ui/commands/chatCommand.js';
-import { colorsCommand } from '../ui/commands/colorsCommand.js';
 import { clearCommand } from '../ui/commands/clearCommand.js';
 import { commandsCommand } from '../ui/commands/commandsCommand.js';
 import { compressCommand } from '../ui/commands/compressCommand.js';
@@ -84,7 +83,6 @@ export class BuiltinCommandLoader implements ICommandLoader {
       ...(this.config?.isAgentsEnabled() ? [agentsCommand] : []),
       authCommand,
       bugCommand,
-      colorsCommand,
       {
         ...chatCommand,
         subCommands: isNightlyBuild

packages/cli/src/ui/commands/colorsCommand.test.ts

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { colorsCommand } from './colorsCommand.js';
-import { CommandKind, type CommandContext } from './types.js';
-
-describe('colorsCommand', () => {
-  it('should have the correct metadata', () => {
-    expect(colorsCommand.name).toBe('colors');
-    expect(colorsCommand.description).toBe(
-      'Visualize the current theme colors',
-    );
-    expect(colorsCommand.kind).toBe(CommandKind.BUILT_IN);
-    expect(colorsCommand.autoExecute).toBe(true);
-  });
-
-  it('should add a COLORS message to the UI', () => {
-    const mockAddItem = vi.fn();
-    const mockContext = {
-      ui: {
-        addItem: mockAddItem,
-      },
-    } as unknown as CommandContext;
-
-    void colorsCommand.action?.(mockContext, '');
-
-    expect(mockAddItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'colors',
-      }),
-    );
-  });
-});

packages/cli/src/ui/commands/colorsCommand.ts

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type { SlashCommand } from './types.js';
-import { CommandKind } from './types.js';
-import type { HistoryItemColors } from '../types.js';
-
-export const colorsCommand: SlashCommand = {
-  name: 'colors',
-  description: 'Visualize the current theme colors',
-  kind: CommandKind.BUILT_IN,
-  autoExecute: true,
-  action: (context) => {
-    context.ui.addItem({
-      type: 'colors',
-      timestamp: new Date(),
-    } as HistoryItemColors);
-  },
-};

packages/cli/src/ui/components/ColorsDisplay.tsx

@@ -53,7 +53,7 @@ interface BackgroundColorRow {
 
 type ColorRow = StandardColorRow | GradientColorRow | BackgroundColorRow;
 
-const VALUE_COLUMN_WIDTH = '8%';
+const VALUE_COLUMN_WIDTH = '10%';
 const NAME_COLUMN_WIDTH = '30%';
 
 export const ColorsDisplay: React.FC = () => {
@@ -271,7 +271,7 @@ function renderBackgroundRow({ name, value }: BackgroundColorRow) {
         justifyContent="center"
         paddingX={1}
       >
-        <Text color={theme.text.primary} bold>
+        <Text color={theme.text.primary} bold wrap="truncate">
           {value || 'default'}
         </Text>
       </Box>

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -36,7 +36,6 @@ import { HooksList } from './views/HooksList.js';
 import { ModelMessage } from './messages/ModelMessage.js';
 import { ThinkingMessage } from './messages/ThinkingMessage.js';
 import { HintMessage } from './messages/HintMessage.js';
-import { ColorsDisplay } from './ColorsDisplay.js';
 import { getInlineThinkingMode } from '../utils/inlineThinkingMode.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 
@@ -125,7 +124,6 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
           tier={itemForDisplay.tier}
         />
       )}
-      {itemForDisplay.type === 'colors' && <ColorsDisplay />}
       {itemForDisplay.type === 'help' && commands && (
         <Help commands={commands} />
       )}

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

@@ -172,11 +172,6 @@ export const useSlashCommandProcessor = (
           type: 'help',
           timestamp: message.timestamp,
         };
-      } else if (message.type === MessageType.COLORS) {
-        historyItemContent = {
-          type: 'colors',
-          timestamp: message.timestamp,
-        };
       } else if (message.type === MessageType.STATS) {
         historyItemContent = {
           type: 'stats',

packages/cli/src/ui/types.ts

@@ -360,11 +360,6 @@ export type HistoryItemHooksList = HistoryItemBase & {
   }>;
 };
 
-export type HistoryItemColors = HistoryItemBase & {
-  type: 'colors';
-  timestamp: Date;
-};
-
 // Using Omit<HistoryItem, 'id'> seems to have some issues with typescript's
 // type inference e.g. historyItem.type === 'tool_group' isn't auto-inferring that
 // 'tools' in historyItem.
@@ -379,7 +374,6 @@ export type HistoryItemWithoutId =
   | HistoryItemWarning
   | HistoryItemAbout
   | HistoryItemHelp
-  | HistoryItemColors
   | HistoryItemToolGroup
   | HistoryItemStats
   | HistoryItemModelStats
@@ -407,7 +401,6 @@ export enum MessageType {
   USER = 'user',
   ABOUT = 'about',
   HELP = 'help',
-  COLORS = 'colors',
   STATS = 'stats',
   MODEL_STATS = 'model_stats',
   TOOL_STATS = 'tool_stats',
@@ -449,10 +442,6 @@ export type Message =
       timestamp: Date;
       content?: string; // Optional content, not really used for HELP
     }
-  | {
-      type: MessageType.COLORS;
-      timestamp: Date;
-    }
   | {
       type: MessageType.STATS;
       timestamp: Date;