1 files changed, 44 insertions, 0 deletions
diff --git a/packages/cli/src/ui/components/HistoryItemDisplay.tsx b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
new file mode 100644
index 00000000..5fb9b32f
--- /dev/null
+++ b/packages/cli/src/ui/components/HistoryItemDisplay.tsx
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import type { HistoryItem } from '../types.js';
+import { UserMessage } from './messages/UserMessage.js';
+import { GeminiMessage } from './messages/GeminiMessage.js';
+import { InfoMessage } from './messages/InfoMessage.js';
+import { ErrorMessage } from './messages/ErrorMessage.js';
+import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
+import { PartListUnion } from '@google/genai';
+import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
+import { Box } from 'ink';
+
+interface HistoryItemDisplayProps {
+  item: HistoryItem;
+  onSubmit: (value: PartListUnion) => void;
+}
+
+export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
+  item,
+  onSubmit,
+}) => (
+  <Box flexDirection="column" key={item.id}>
+    {/* Render standard message types */}
+    {item.type === 'user' && <UserMessage text={item.text} />}
+    {item.type === 'gemini' && <GeminiMessage text={item.text} />}
+    {item.type === 'gemini_content' && (
+      <GeminiMessageContent text={item.text} />
+    )}
+    {item.type === 'info' && <InfoMessage text={item.text} />}
+    {item.type === 'error' && <ErrorMessage text={item.text} />}
+    {item.type === 'tool_group' && (
+      <ToolGroupMessage
+        toolCalls={item.tools}
+        groupId={item.id}
+        onSubmit={onSubmit}
+      />
+    )}
+  </Box>
+);