feat: Add exit UI w/ stats (#924)

1 files changed, 75 insertions, 0 deletions

diff --git a/packages/cli/src/ui/components/SessionSummaryDisplay.tsx b/packages/cli/src/ui/components/SessionSummaryDisplay.tsx
new file mode 100644
index 00000000..d3ee0f5f
--- /dev/null
+++ b/packages/cli/src/ui/components/SessionSummaryDisplay.tsx
@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+import { Colors } from '../colors.js';
+import { formatDuration } from '../utils/formatters.js';
+import { CumulativeStats } from '../contexts/SessionContext.js';
+import { FormattedStats, StatRow, StatsColumn } from './Stats.js';
+
+// --- Prop and Data Structures ---
+
+interface SessionSummaryDisplayProps {
+  stats: CumulativeStats;
+  duration: string;
+}
+
+// --- Main Component ---
+
+export const SessionSummaryDisplay: React.FC<SessionSummaryDisplayProps> = ({
+  stats,
+  duration,
+}) => {
+  const cumulativeFormatted: FormattedStats = {
+    inputTokens: stats.promptTokenCount,
+    outputTokens: stats.candidatesTokenCount,
+    toolUseTokens: stats.toolUsePromptTokenCount,
+    thoughtsTokens: stats.thoughtsTokenCount,
+    cachedTokens: stats.cachedContentTokenCount,
+    totalTokens: stats.totalTokenCount,
+  };
+
+  const title = 'Agent powering down. Goodbye!';
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="gray"
+      flexDirection="column"
+      paddingY={1}
+      paddingX={2}
+      alignSelf="flex-start"
+    >
+      <Box marginBottom={1} flexDirection="column">
+        {Colors.GradientColors ? (
+          <Gradient colors={Colors.GradientColors}>
+            <Text bold>{title}</Text>
+          </Gradient>
+        ) : (
+          <Text bold>{title}</Text>
+        )}
+      </Box>
+
+      <Box marginTop={1}>
+        <StatsColumn
+          title={`Cumulative Stats (${stats.turnCount} Turns)`}
+          stats={cumulativeFormatted}
+          isCumulative={true}
+        >
+          <Box marginTop={1} flexDirection="column">
+            <StatRow
+              label="Total duration (API)"
+              value={formatDuration(stats.apiTimeMs)}
+            />
+            <StatRow label="Total duration (wall)" value={duration} />
+          </Box>
+        </StatsColumn>
+      </Box>
+    </Box>
+  );
+};