/chats screen!

Author: jahooma

cli/src/app.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
 import { Chat } from './chat'
+import { ChatHistoryScreen } from './components/chat-history-screen'
 import { LoginModal } from './components/login-modal'
 import { ProjectPickerScreen } from './components/project-picker-screen'
 import { TerminalLink } from './components/terminal-link'
@@ -15,6 +16,7 @@ import { useTerminalFocus } from './hooks/use-terminal-focus'
 import { useTheme } from './hooks/use-theme'
 import { getProjectRoot } from './project-files'
 import { useChatStore, type TopBannerType } from './state/chat-store'
+import { useChatHistoryStore } from './state/chat-history-store'
 import { openFileAtPath } from './utils/open-file'
 import { formatCwd } from './utils/path-helpers'
 import { findGitRoot } from './utils/git'
@@ -169,6 +171,32 @@ export const App = ({
     }
   }, [gitRoot, onProjectChange])
 
+  // Chat history state from store
+  const { showChatHistory, closeChatHistory } = useChatHistoryStore()
+
+  // State to track which chat to resume (set when user selects from history)
+  const [resumeChatId, setResumeChatId] = useState<string | null>(null)
+
+  const handleResumeChat = useCallback(
+    (chatId: string) => {
+      closeChatHistory()
+      // Reset chat store to clear previous messages before loading the selected chat
+      resetChatStore()
+      setResumeChatId(chatId)
+    },
+    [closeChatHistory, resetChatStore]
+  )
+
+  const handleNewChat = useCallback(() => {
+    closeChatHistory()
+    resetChatStore()
+    setResumeChatId(null)
+  }, [closeChatHistory, resetChatStore])
+
+  // Determine effective continueChat values
+  const effectiveContinueChat = continueChat || resumeChatId !== null
+  const effectiveContinueChatId = resumeChatId ?? continueChatId
+
   const headerContent = useMemo(() => {
     const displayPath = formatCwd(projectRoot)
 
@@ -252,8 +280,23 @@ export const App = ({
     )
   }
 
+  // Render chat history screen when requested
+  if (showChatHistory) {
+    return (
+      <ChatHistoryScreen
+        onSelectChat={handleResumeChat}
+        onCancel={closeChatHistory}
+        onNewChat={handleNewChat}
+      />
+    )
+  }
+
+  // Use key to force remount when resuming a different chat from history
+  const chatKey = resumeChatId ?? 'current'
+
   return (
     <Chat
+      key={chatKey}
       headerContent={headerContent}
       initialPrompt={initialPrompt}
       agentId={agentId}
@@ -262,8 +305,8 @@ export const App = ({
       setIsAuthenticated={setIsAuthenticated}
       setUser={setUser}
       logoutMutation={logoutMutation}
-      continueChat={continueChat}
-      continueChatId={continueChatId}
+      continueChat={effectiveContinueChat}
+      continueChatId={effectiveContinueChatId}
       authStatus={authStatus}
       initialMode={initialMode}
       gitRoot={gitRoot}

cli/src/chat.tsx

@@ -54,6 +54,7 @@ import { useUsageMonitor } from './hooks/use-usage-monitor'
 import { WEBSITE_URL } from './login/constants'
 import { getProjectRoot } from './project-files'
 import { useChatStore } from './state/chat-store'
+import { useChatHistoryStore } from './state/chat-history-store'
 import { useFeedbackStore } from './state/feedback-store'
 import { usePublishStore } from './state/publish-store'
 import {
@@ -867,6 +868,10 @@ export const Chat = ({
           openPublishMode()
         }
       }
+
+      if (result.openChatHistory) {
+        useChatHistoryStore.getState().openChatHistory()
+      }
     },
     [
       saveCurrentInput,

cli/src/commands/command-registry.ts

@@ -54,6 +54,7 @@ export type RouterParams = {
 export type CommandResult = {
   openFeedbackMode?: boolean
   openPublishMode?: boolean
+  openChatHistory?: boolean
   preSelectAgents?: string[]
 } | void
 
@@ -463,6 +464,15 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
       clearInput(params)
     },
   }),
+  defineCommand({
+    name: 'chats',
+    aliases: ['history'],
+    handler: (params) => {
+      params.saveToHistory(params.inputValue.trim())
+      clearInput(params)
+      return { openChatHistory: true }
+    },
+  }),
 ]
 
 export function findCommand(cmd: string): CommandDefinition | undefined {