Add auto_approver

web/src/components/App.jsx

@@ -23,6 +23,12 @@ const App = () => {
   const [showDiff, setShowDiff] = useState(false);
   const [showSidebar, setShowSidebar] = useState(false);
   const [agentState, setAgentState] = useState(AgentState.CONTEXT_APPROVAL);
+  const [autoApproverConfig, setAutoApproverConfig] = useState({
+    context_enabled: false,
+    response_enabled: false,
+    context_timeout: 5.0,
+    response_timeout: 10.0
+  });
 
   const { wsState, sendMessage, addMessageHandler } = useWebSocket('ws://localhost:8080/ws');
 
@@ -44,10 +50,20 @@ const App = () => {
         case ServerMessageType.OUTPUT_UPDATE:
           setOutput(message.output);
           break;
+        case ServerMessageType.AUTO_APPROVER_CONFIG:
+          setAutoApproverConfig(message.config);
+          break;
       }
     });
   }, [addMessageHandler]);
 
+  const handleAutoApproverConfigChange = (config) => {
+    sendMessage({
+      type: ClientMessageType.AUTO_APPROVER_CONFIG,
+      config: config
+    });
+  };
+
   const handleApprove = () => {
     if (agentState === AgentState.CONTEXT_APPROVAL) {
       sendMessage({
@@ -158,6 +174,8 @@ const App = () => {
           onToggleDiff={() => setShowDiff(!showDiff)}
           onSendInput={handleSendInput}
           onClearOutput={handleClearOutput}
+          autoApproverConfig={autoApproverConfig}
+          onAutoApproverConfigChange={handleAutoApproverConfigChange}
         />
 
         <FloatingButton onClick={() => setShowSidebar(!showSidebar)} />

web/src/components/Sidebar.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
 import { AgentState, Tabs } from '../constants';
 
 export const Sidebar = ({
@@ -7,10 +9,12 @@ export const Sidebar = ({
   agentState,
   showDiff,
   input,
+  autoApproverConfig,
   onApprove,
   onToggleDiff,
   onSendInput,
   onClearOutput,
+  onAutoApproverConfigChange,
 }) => (
   <aside className={`
     fixed top-0 right-0 h-screen w-64 bg-white shadow-lg 
@@ -19,6 +23,50 @@ export const Sidebar = ({
     ${showSidebar ? 'translate-x-0' : 'translate-x-full md:translate-x-0'}
   `}>
     <div className="p-4 space-y-4 md:pt-0">
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label>Auto-approve Context</label>
+          <Switch 
+            checked={autoApproverConfig.context_enabled}
+            onCheckedChange={(checked) => onAutoApproverConfigChange({
+              ...autoApproverConfig,
+              context_enabled: checked
+            })}
+          />
+        </div>
+        <Input
+          type="number"
+          value={autoApproverConfig.context_timeout}
+          onChange={(e) => onAutoApproverConfigChange({
+            ...autoApproverConfig,
+            context_timeout: parseFloat(e.target.value)
+          })}
+          disabled={autoApproverConfig.context_enabled}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label>Auto-approve Response</label>
+          <Switch
+            checked={autoApproverConfig.response_enabled}
+            onCheckedChange={(checked) => onAutoApproverConfigChange({
+              ...autoApproverConfig,
+              response_enabled: checked
+            })}
+          />
+        </div>
+        <Input
+          type="number"
+          value={autoApproverConfig.response_timeout}
+          onChange={(e) => onAutoApproverConfigChange({
+            ...autoApproverConfig,
+            response_timeout: parseFloat(e.target.value)
+          })}
+          disabled={autoApproverConfig.response_enabled}
+        />
+      </div>
+
       <Button
         variant="outline"
         onClick={onToggleDiff}
@@ -52,4 +100,4 @@ export const Sidebar = ({
       </Button>
     </div>
   </aside>
-);
+);

web/src/components/ui/switch.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Switch = ({ checked, onCheckedChange, disabled }) => (
+  <label className="relative inline-flex items-center cursor-pointer">
+    <input
+      type="checkbox"
+      className="sr-only peer"
+      checked={checked}
+      onChange={(e) => onCheckedChange(e.target.checked)}
+      disabled={disabled}
+    />
+    <div className={`
+      w-11 h-6 bg-gray-200 rounded-full peer 
+      peer-checked:after:translate-x-full peer-checked:bg-blue-600
+      after:content-[''] after:absolute after:top-[2px] after:left-[2px] 
+      after:bg-white after:rounded-full after:h-5 after:w-5 
+      after:transition-all
+      ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+    `}></div>
+  </label>
+);

web/src/constants.jsx

@@ -24,6 +24,7 @@ export const ClientMessageType = {
   APPROVE_RESPONSE: 'APPROVE_RESPONSE',
   SEND_INPUT: 'SEND_INPUT',
   CLEAR_OUTPUT: 'CLEAR_OUTPUT',
+  AUTO_APPROVER_CONFIG: 'AUTO_APPROVER_CONFIG',
 };
 
 export const ServerMessageType = {
@@ -31,4 +32,5 @@ export const ServerMessageType = {
   CONTEXT_UPDATE: 'CONTEXT_UPDATE',
   RESPONSE_UPDATE: 'RESPONSE_UPDATE',
   OUTPUT_UPDATE: 'OUTPUT_UPDATE',
+  AUTO_APPROVER_CONFIG: 'AUTO_APPROVER_CONFIG',
 };