feat: Add history functionality to track and display agent actions

- Add History view to display previous agent actions
- Implement history storage in VSCode global state
- Add clear history functionality with user confirmation
- Create history components and manager
- Update routing to include history view
- Add history command handlers in extension

Author: viasky657

src/extension.ts

@@ -16,9 +16,12 @@ import {
 import { sidecarUseSelfRun } from './utilities/sidecarUrl';
 import { getUniqueId } from './utilities/uniqueId';
 import { ProjectContext } from './utilities/workspaceContext';
+import { Exchange } from './model';
 
 export let SIDECAR_CLIENT: SideCarClient | null = null;
 
+const HISTORY_STORAGE_KEY = 'codestory.history';
+
 /**
 Extension → PanelProvider → Webview (app.tsx)
 (native)     (bridge)       (UI layer)
@@ -60,6 +63,25 @@ export async function activate(context: vscode.ExtensionContext) {
     RepoRefBackend.local
   );
 
+  // Register history-related commands
+  context.subscriptions.push(
+    vscode.commands.registerCommand('codestory.saveHistory', async (exchanges: Exchange[]) => {
+      await context.globalState.update(HISTORY_STORAGE_KEY, exchanges);
+    })
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('codestory.loadHistory', async () => {
+      return context.globalState.get<Exchange[]>(HISTORY_STORAGE_KEY) || [];
+    })
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('codestory.clearHistory', async () => {
+      await context.globalState.update(HISTORY_STORAGE_KEY, []);
+    })
+  );
+
   // We also get some context about the workspace we are in and what we are
   // upto
   const projectContext = new ProjectContext();

src/model.ts

@@ -5,7 +5,7 @@ export enum View {
   Preset = 'preset',
   Welcome = 'welcome',
   Settings = 'settings',
-  // History = 'history',
+  History = 'history', 
 }
 
 export type ViewType = `${View}`;
@@ -345,10 +345,10 @@ export type Exchange = Request | Response;
 
 export enum Provider {
   Anthropic = 'anthropic',
-  //OpenAI = 'open-ai',
+  OpenAI = 'openai',
   OpenRouter = 'open-router',
   //GoogleGemini = 'google-gemini',
-  //AWSBedrock = 'aws-bedrock',
+  AWSBedrock = 'aws-bedrock',
   OpenAICompatible = 'openai-compatible',
   //Ollama = 'ollama',
 }
@@ -359,7 +359,25 @@ export enum AnthropicModels {
   ClaudeOpus = 'ClaudeOpus',
 }
 
-export type Models = `${AnthropicModels}`;
+export enum OpenAIModels {
+  GPT4 = 'gpt-4',
+  GPT4Turbo = 'gpt-4-turbo-preview',
+  GPT35Turbo = 'gpt-3.5-turbo',
+  GPT4O = 'gpt-4o',
+  GPT4OMini = 'gpt-4o-mini',
+  O1Preview = 'o1-preview',
+  O1Mini = 'o1-mini'
+}
+
+export enum AWSBedrockModels {
+  Claude3Sonnet = 'anthropic.claude-3-sonnet-20240229-v1:0',
+  Claude3Haiku = 'anthropic.claude-3-haiku-20240307-v1:0',
+  Claude2 = 'anthropic.claude-v2:1',
+  Titan = 'amazon.titan-text-express-v1',
+  Llama2 = 'meta.llama2-70b-chat-v1',
+}
+
+export type Models = `${AnthropicModels}` | `${OpenAIModels}` | `${AWSBedrockModels}`;
 
 export enum PermissionState {
   Always = 'always',

src/utilities/historyManager.ts

@@ -0,0 +1,47 @@
+import * as vscode from 'vscode';
+import { Exchange } from '../model';
+
+export class HistoryManager {
+    private static readonly HISTORY_KEY = 'codestory.history';
+
+    static async saveHistory(exchanges: Exchange[]): Promise<void> {
+        try {
+            await vscode.commands.executeCommand('codestory.saveHistory', exchanges);
+        } catch (error) {
+            console.error('Failed to save history:', error);
+        }
+    }
+
+    static async loadHistory(): Promise<Exchange[]> {
+        try {
+            const history = await vscode.commands.executeCommand<Exchange[]>('codestory.loadHistory');
+            return history || [];
+        } catch (error) {
+            console.error('Failed to load history:', error);
+            return [];
+        }
+    }
+
+    static async clearHistory(): Promise<void> {
+        try {
+            await vscode.commands.executeCommand('codestory.clearHistory');
+        } catch (error) {
+            console.error('Failed to clear history:', error);
+        }
+    }
+
+    static async clearHistoryWithPermission(): Promise<boolean> {
+        try {
+            const result = await vscode.window.showWarningMessage(
+                'Are you sure you want to clear the history?',
+                { modal: true },
+                'Yes',
+                'No'
+            );
+            return result === 'Yes';
+        } catch (error) {
+            console.error('Failed to show confirmation dialog:', error);
+            return false;
+        }
+    }
+}

src/webviews/@history/history-view.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { History } from '../components/history';
+import { HistoryManager } from '../../utilities/historyManager';
+import { useNavigate } from 'react-router-dom';
+import { Exchange } from '../../model';
+import * as vscode from 'vscode';
+
+export const HistoryView: React.FC = () => {
+    const [exchanges, setExchanges] = React.useState<Exchange[]>([]);
+    const [loading, setLoading] = React.useState(true);
+    const navigate = useNavigate();
+
+    React.useEffect(() => {
+        const loadHistory = async () => {
+            try {
+                setLoading(true);
+                const loadedHistory = await HistoryManager.loadHistory();
+                setExchanges(loadedHistory);
+            } catch (error) {
+                void vscode.window.showErrorMessage('Failed to load history');
+            } finally {
+                setLoading(false);
+            }
+        };
+        void loadHistory();
+    }, []);
+
+    const handleClearHistory = async () => {
+        try {
+            const confirmed = await HistoryManager.clearHistoryWithPermission();
+            if (confirmed) {
+                await HistoryManager.clearHistory();
+                setExchanges([]);
+                navigate('/task'); // Navigate back to task view after clearing
+            }
+        } catch (error) {
+            void vscode.window.showErrorMessage('Failed to clear history');
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            <History 
+                exchanges={exchanges}
+                onClearHistory={handleClearHistory}
+            />
+        </div>
+    );
+};

src/webviews/components/history.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Exchange, Response, Request } from '../../model';
+import MarkdownRenderer from './markdown-renderer';
+
+interface HistoryProps {
+    exchanges: Exchange[];
+    onClearHistory: () => void;
+}
+
+export const History: React.FC<HistoryProps> = ({ exchanges, onClearHistory }: HistoryProps) => {
+    return (
+        <div className="flex flex-col gap-4 p-4">
+            <div className="flex justify-between items-center">
+                <h2 className="text-xl font-semibold">Session History</h2>
+                <button
+                    onClick={onClearHistory}
+                    className="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
+                >
+                    Clear History
+                </button>
+            </div>
+            <div className="flex flex-col gap-4">
+                {exchanges.map((exchange: Exchange, index: number) => (
+                    <div key={index} className="border rounded-lg p-4 bg-gray-50">
+                        {exchange.type === 'request' ? (
+                            <div className="flex flex-col gap-2">
+                                <div className="font-medium text-blue-600">User Request:</div>
+                                <div className="pl-4">{(exchange as Request).message}</div>
+                            </div>
+                        ) : (
+                            <div className="flex flex-col gap-2">
+                                <div className="font-medium text-green-600">Assistant Response:</div>
+                                <div className="pl-4">
+                                    {(exchange as Response).parts.map((part, partIndex) => {
+                                        if (part.type === 'markdown') {
+                                            return (
+                                                <MarkdownRenderer
+                                                    key={partIndex}
+                                                    rawMarkdown={part.rawMarkdown}
+                                                />
+                                            );
+                                        }
+                                        return null;
+                                    })}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};

src/webviews/routes.tsx

@@ -5,6 +5,9 @@ import { createMemoryRouter, useLocation, useNavigate } from 'react-router-dom';
 import { View, Event } from '../model';
 import { loadSettings, SettingsView } from '@settings/settings-view';
 import * as React from 'react';
+import { HistoryView } from './@history/history-view';
+
+declare const vscode: any;
 
 export const router = createMemoryRouter(
   [
@@ -20,10 +23,10 @@ export const router = createMemoryRouter(
           path: View.Task,
           element: <TaskView />,
         },
-        // {
-        //   path: View.History,
-        //   element: <TaskView />,
-        // },
+        {
+          path: View.History,
+          element: <HistoryView />,
+        },
         {
           path: View.Settings,
           loader: loadSettings,
@@ -56,7 +59,7 @@ export function useNavigationFromExtension() {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [navigate]);
 
   // workaround to start a new task
   React.useEffect(() => {