WIP memory editor

web/src/components/App.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { Header, Tabs } from '@/components/Header';
-import { Sidebar } from '@/components/Sidebar';
-import { FloatingButton } from '@/components/FloatingButton';
 import { ContentEditor } from '@/components/editors/ContentEditor';
+import { FloatingButton } from '@/components/FloatingButton';
+import { Header, Tabs } from '@/components/Header';
+import { MemoryEditor } from '@/components/editors/MemoryEditor';
+import { Sidebar } from '@/components/Sidebar';
 import { StandardEditor } from '@/components/editors/StandardEditor';
 import { useWebSocket, WebSocketState } from '@/hooks/useWebSocket';
 
@@ -48,6 +49,8 @@ const App = () => {
   const tokenWs = useWebSocket(`${wsRoot}/token`);
   const stdoutWs = useWebSocket(`${wsRoot}/stdout`);
   const autoApproverWs = useWebSocket(`${wsRoot}/auto_approver`);
+  const memoryWs = useWebSocket(`${wsRoot}/memory`);
+  const [entries, setEntries] = useState([]);
   const [wsState, setWsState] = useState(WebSocketState.DISCONNECTED);
 
   // Handle llm state changes
@@ -111,6 +114,15 @@ const App = () => {
     });
   }, []);
 
+  // Handle memory state changes
+  useEffect(() => {
+    memoryWs.addMessageHandler((data) => {
+      if (data.type === 'memory_state') {
+        setEntries(data.entries);
+      }
+    });
+  }, []);
+
   // Initialize active llm
   useEffect(() => {
     if (activeLlm === null && Object.keys(llms).length > 0) {
@@ -189,7 +201,48 @@ const App = () => {
     }
   };
 
+  const handleCreateEntry = async (entry) => {
+    const response = await fetch('/api/memory/entry', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(entry)
+    });
+    if (!response.ok) throw new Error('Failed to create entry');
+  };
+
+  const handleSaveEntry = async (id, entry) => {
+    const response = await fetch(`/api/memory/entry/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(entry)
+    });
+    if (!response.ok) throw new Error('Failed to update entry');
+  };
+
+  const handleDeleteEntry = async (id) => {
+    const response = await fetch(`/api/memory/entry/${id}`, {
+      method: 'DELETE'
+    });
+    if (!response.ok) throw new Error('Failed to delete entry');
+  };
+
+  const handleResetEntry = async (id) => {
+    const response = await fetch(`/api/memory/entry/${id}/reset`, {
+      method: 'POST'
+    });
+    if (!response.ok) throw new Error('Failed to reset entry');
+  };
+
+  const handleUpdateEntry = async (id) => {
+    const response = await fetch(`/api/memory/entry/${id}/update`, {
+      method: 'POST'
+    });
+    if (!response.ok) throw new Error('Failed to update entry');
+  };
+
+  // Update active tab on state change
   useEffect(() => {
+    if (activeTab === Tabs.MEMORY) return;
     const state = llms[activeLlm];
     switch (state) {
       case LlmState.NO_OUTPUT:
@@ -210,18 +263,20 @@ const App = () => {
         contextWs.wsState === WebSocketState.CONNECTED && 
         tokenWs.wsState === WebSocketState.CONNECTED && 
         stdoutWs.wsState === WebSocketState.CONNECTED &&
-        autoApproverWs.wsState === WebSocketState.CONNECTED) {
+        autoApproverWs.wsState === WebSocketState.CONNECTED &&
+        memoryWs.wsState === WebSocketState.CONNECTED) {
       setWsState(WebSocketState.CONNECTED);
     } else if (llmWs.wsState === WebSocketState.CONNECTING || 
-               contextWs.wsState === WebSocketState.CONNECTING || 
-               tokenWs.wsState === WebSocketState.CONNECTING || 
-               stdoutWs.wsState === WebSocketState.CONNECTING ||
-               autoApproverWs.wsState === WebSocketState.CONNECTING) {
+        contextWs.wsState === WebSocketState.CONNECTING || 
+        tokenWs.wsState === WebSocketState.CONNECTING || 
+        stdoutWs.wsState === WebSocketState.CONNECTING ||
+        autoApproverWs.wsState === WebSocketState.CONNECTING ||
+        memoryWs.wsState === WebSocketState.CONNECTING) {
       setWsState(WebSocketState.CONNECTING);
     } else {
       setWsState(WebSocketState.DISCONNECTED);
     }
-  }, [llmWs.wsState, contextWs.wsState, tokenWs.wsState, stdoutWs.wsState, autoApproverWs.wsState]);
+  }, [llmWs.wsState, contextWs.wsState, tokenWs.wsState, stdoutWs.wsState, autoApproverWs.wsState, memoryWs.wsState]);
 
   return (
     <div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
@@ -268,6 +323,16 @@ const App = () => {
               language="plaintext"
             />
           )}
+          {activeTab === Tabs.MEMORY && (
+            <MemoryEditor
+              entries={entries}
+              onCreateEntry={handleCreateEntry}
+              onSaveEntry={handleSaveEntry} 
+              onDeleteEntry={handleDeleteEntry}
+              onResetEntry={handleResetEntry}
+              onUpdateEntry={handleUpdateEntry}
+            />
+          )}
         </main>
 
         <Sidebar