feat: Add UI for /stats slash command (#883)

1 files changed, 14 insertions, 34 deletions

diff --git a/packages/cli/src/ui/hooks/slashCommandProcessor.ts b/packages/cli/src/ui/hooks/slashCommandProcessor.ts
index fa1e4016..9e82b6cf 100644
--- a/packages/cli/src/ui/hooks/slashCommandProcessor.ts
+++ b/packages/cli/src/ui/hooks/slashCommandProcessor.ts
@@ -20,7 +20,7 @@ import { Message, MessageType, HistoryItemWithoutId } from '../types.js';
 import { useSessionStats } from '../contexts/SessionContext.js';
 import { createShowMemoryAction } from './useShowMemoryCommand.js';
 import { GIT_COMMIT_INFO } from '../../generated/git-commit.js';
-import { formatMemoryUsage } from '../utils/formatters.js';
+import { formatDuration, formatMemoryUsage } from '../utils/formatters.js';
 import { getCliVersion } from '../../utils/version.js';
 
 export interface SlashCommandActionReturn {
@@ -69,6 +69,13 @@ export const useSlashCommandProcessor = (
           sandboxEnv: message.sandboxEnv,
           modelVersion: message.modelVersion,
         };
+      } else if (message.type === MessageType.STATS) {
+        historyItemContent = {
+          type: 'stats',
+          stats: message.stats,
+          lastTurnStats: message.lastTurnStats,
+          duration: message.duration,
+        };
       } else {
         historyItemContent = {
           type: message.type as
@@ -152,41 +159,14 @@ export const useSlashCommandProcessor = (
         description: 'check session stats',
         action: (_mainCommand, _subCommand, _args) => {
           const now = new Date();
-          const { sessionStartTime, cumulative } = session.stats;
-
-          const duration = now.getTime() - sessionStartTime.getTime();
-          const durationInSeconds = Math.floor(duration / 1000);
-          const hours = Math.floor(durationInSeconds / 3600);
-          const minutes = Math.floor((durationInSeconds % 3600) / 60);
-          const seconds = durationInSeconds % 60;
-
-          const durationString = [
-            hours > 0 ? `${hours}h` : '',
-            minutes > 0 ? `${minutes}m` : '',
-            `${seconds}s`,
-          ]
-            .filter(Boolean)
-            .join(' ');
-
-          const overheadTotal =
-            cumulative.thoughtsTokenCount + cumulative.toolUsePromptTokenCount;
-
-          const statsContent = [
-            `  ⎿ Total duration (wall): ${durationString}`,
-            `    Total Token usage:`,
-            `         Turns: ${cumulative.turnCount.toLocaleString()}`,
-            `         Total: ${cumulative.totalTokenCount.toLocaleString()}`,
-            `             ├─ Input: ${cumulative.promptTokenCount.toLocaleString()}`,
-            `             ├─ Output: ${cumulative.candidatesTokenCount.toLocaleString()}`,
-            `             ├─ Cached: ${cumulative.cachedContentTokenCount.toLocaleString()}`,
-            `             └─ Overhead: ${overheadTotal.toLocaleString()}`,
-            `                  ├─ Model thoughts: ${cumulative.thoughtsTokenCount.toLocaleString()}`,
-            `                  └─ Tool-use prompts: ${cumulative.toolUsePromptTokenCount.toLocaleString()}`,
-          ].join('\n');
+          const { sessionStartTime, cumulative, currentTurn } = session.stats;
+          const wallDuration = now.getTime() - sessionStartTime.getTime();
 
           addMessage({
-            type: MessageType.INFO,
-            content: statsContent,
+            type: MessageType.STATS,
+            stats: cumulative,
+            lastTurnStats: currentTurn,
+            duration: formatDuration(wallDuration),
             timestamp: new Date(),
           });
         },