feat: implement session-scoped permission mode state management (#232)

- Add usePermissionMode hook for session-scoped PermissionMode state
- Integrate permission mode updates with plan approval actions
- Simplify sendMessage to use single permission mode source
- Add comprehensive tests for permission mode functionality

Resolves #135

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: sugyan

frontend/src/components/ChatPage.tsx

@@ -6,6 +6,7 @@ import { useTheme } from "../hooks/useTheme";
 import { useClaudeStreaming } from "../hooks/useClaudeStreaming";
 import { useChatState } from "../hooks/chat/useChatState";
 import { usePermissions } from "../hooks/chat/usePermissions";
+import { usePermissionMode } from "../hooks/chat/usePermissionMode";
 import { useAbortController } from "../hooks/chat/useAbortController";
 import { useAutoHistoryLoader } from "../hooks/useHistoryLoader";
 import { ThemeToggle } from "./chat/ThemeToggle";
@@ -46,6 +47,9 @@ export function ChatPage() {
   const { processStreamLine } = useClaudeStreaming();
   const { abortRequest, createAbortHandler } = useAbortController();
 
+  // Permission mode state management
+  const { permissionMode, setPermissionMode } = usePermissionMode();
+
   // Get encoded name for current working directory
   const getEncodedName = useCallback(() => {
     if (!workingDirectory || !projects.length) {
@@ -113,7 +117,10 @@ export function ChatPage() {
     planModeRequest,
     showPlanModeRequest,
     closePlanModeRequest,
-  } = usePermissions();
+    updatePermissionMode,
+  } = usePermissions({
+    onPermissionModeChange: setPermissionMode,
+  });
 
   const handlePermissionError = useCallback(
     (toolName: string, patterns: string[], toolUseId: string) => {
@@ -133,7 +140,6 @@ export function ChatPage() {
       messageContent?: string,
       tools?: string[],
       hideUserMessage = false,
-      permissionMode?: "default" | "plan" | "acceptEdits",
     ) => {
       const content = messageContent || input.trim();
       if (!content || isLoading) return;
@@ -164,7 +170,7 @@ export function ChatPage() {
             ...(currentSessionId ? { sessionId: currentSessionId } : {}),
             allowedTools: tools || allowedTools,
             ...(workingDirectory ? { workingDirectory } : {}),
-            ...(permissionMode ? { permissionMode } : {}),
+            permissionMode,
           } as ChatRequest),
         });
 
@@ -233,6 +239,7 @@ export function ChatPage() {
       hasShownInitMessage,
       currentAssistantMessage,
       workingDirectory,
+      permissionMode,
       generateRequestId,
       clearInput,
       startRequest,
@@ -306,22 +313,37 @@ export function ChatPage() {
 
   // Plan mode request handlers
   const handlePlanAcceptWithEdits = useCallback(() => {
+    updatePermissionMode("acceptEdits");
     closePlanModeRequest();
     if (currentSessionId) {
-      sendMessage("accept", allowedTools, true, "acceptEdits");
+      sendMessage("accept", allowedTools, true);
     }
-  }, [closePlanModeRequest, currentSessionId, sendMessage, allowedTools]);
+  }, [
+    updatePermissionMode,
+    closePlanModeRequest,
+    currentSessionId,
+    sendMessage,
+    allowedTools,
+  ]);
 
   const handlePlanAcceptDefault = useCallback(() => {
+    updatePermissionMode("default");
     closePlanModeRequest();
     if (currentSessionId) {
-      sendMessage("accept", allowedTools, true, "default");
+      sendMessage("accept", allowedTools, true);
     }
-  }, [closePlanModeRequest, currentSessionId, sendMessage, allowedTools]);
+  }, [
+    updatePermissionMode,
+    closePlanModeRequest,
+    currentSessionId,
+    sendMessage,
+    allowedTools,
+  ]);
 
   const handlePlanKeepPlanning = useCallback(() => {
+    updatePermissionMode("plan");
     closePlanModeRequest();
-  }, [closePlanModeRequest]);
+  }, [updatePermissionMode, closePlanModeRequest]);
 
   // Create permission data for inline permission interface
   const permissionData = permissionRequest

frontend/src/hooks/chat/usePermissionMode.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { usePermissionMode } from "./usePermissionMode";
+
+describe("usePermissionMode", () => {
+  it("should initialize with default permission mode", () => {
+    const { result } = renderHook(() => usePermissionMode());
+
+    expect(result.current.permissionMode).toBe("default");
+    expect(result.current.isDefaultMode).toBe(true);
+    expect(result.current.isPlanMode).toBe(false);
+    expect(result.current.isAcceptEditsMode).toBe(false);
+  });
+
+  it("should update permission mode correctly", () => {
+    const { result } = renderHook(() => usePermissionMode());
+
+    act(() => {
+      result.current.setPermissionMode("plan");
+    });
+
+    expect(result.current.permissionMode).toBe("plan");
+    expect(result.current.isPlanMode).toBe(true);
+    expect(result.current.isDefaultMode).toBe(false);
+    expect(result.current.isAcceptEditsMode).toBe(false);
+  });
+
+  it("should handle acceptEdits mode correctly", () => {
+    const { result } = renderHook(() => usePermissionMode());
+
+    act(() => {
+      result.current.setPermissionMode("acceptEdits");
+    });
+
+    expect(result.current.permissionMode).toBe("acceptEdits");
+    expect(result.current.isAcceptEditsMode).toBe(true);
+    expect(result.current.isDefaultMode).toBe(false);
+    expect(result.current.isPlanMode).toBe(false);
+  });
+
+  it("should persist state across re-renders", () => {
+    const { result, rerender } = renderHook(() => usePermissionMode());
+
+    act(() => {
+      result.current.setPermissionMode("plan");
+    });
+
+    rerender();
+
+    expect(result.current.permissionMode).toBe("plan");
+    expect(result.current.isPlanMode).toBe(true);
+  });
+
+  it("should reset to default on new hook instance", () => {
+    const { result: result1 } = renderHook(() => usePermissionMode());
+
+    act(() => {
+      result1.current.setPermissionMode("acceptEdits");
+    });
+
+    // Create a new hook instance (simulating page reload)
+    const { result: result2 } = renderHook(() => usePermissionMode());
+
+    expect(result2.current.permissionMode).toBe("default");
+    expect(result2.current.isDefaultMode).toBe(true);
+  });
+});

frontend/src/hooks/chat/usePermissionMode.ts

@@ -0,0 +1,32 @@
+import { useState, useCallback } from "react";
+import type { PermissionMode } from "../../types";
+
+export interface UsePermissionModeResult {
+  permissionMode: PermissionMode;
+  setPermissionMode: (mode: PermissionMode) => void;
+  isPlanMode: boolean;
+  isDefaultMode: boolean;
+  isAcceptEditsMode: boolean;
+}
+
+/**
+ * Hook for managing PermissionMode state within a browser session.
+ * State is preserved across component re-renders but resets on page reload.
+ * No localStorage persistence - simple React state management.
+ */
+export function usePermissionMode(): UsePermissionModeResult {
+  const [permissionMode, setPermissionModeState] =
+    useState<PermissionMode>("default");
+
+  const setPermissionMode = useCallback((mode: PermissionMode) => {
+    setPermissionModeState(mode);
+  }, []);
+
+  return {
+    permissionMode,
+    setPermissionMode,
+    isPlanMode: permissionMode === "plan",
+    isDefaultMode: permissionMode === "default",
+    isAcceptEditsMode: permissionMode === "acceptEdits",
+  };
+}

frontend/src/hooks/chat/usePermissions.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback } from "react";
+import type { PermissionMode } from "../../types";
 
 interface PermissionRequest {
   isOpen: boolean;
@@ -12,7 +13,12 @@ interface PlanModeRequest {
   planContent: string;
 }
 
-export function usePermissions() {
+interface UsePermissionsOptions {
+  onPermissionModeChange?: (mode: PermissionMode) => void;
+}
+
+export function usePermissions(options: UsePermissionsOptions = {}) {
+  const { onPermissionModeChange } = options;
   const [allowedTools, setAllowedTools] = useState<string[]>([]);
   const [permissionRequest, setPermissionRequest] =
     useState<PermissionRequest | null>(null);
@@ -77,6 +83,14 @@ export function usePermissions() {
     setAllowedTools([]);
   }, []);
 
+  // Helper function to update permission mode based on user action
+  const updatePermissionMode = useCallback(
+    (mode: PermissionMode) => {
+      onPermissionModeChange?.(mode);
+    },
+    [onPermissionModeChange],
+  );
+
   return {
     allowedTools,
     permissionRequest,
@@ -90,5 +104,6 @@ export function usePermissions() {
     planModeRequest,
     showPlanModeRequest,
     closePlanModeRequest,
+    updatePermissionMode,
   };
 }