refactor: extract permission mode utilities and consolidate styling logic

Extract permission mode display logic into shared utilities for better reusability and maintainability. Add PermissionModeTone type and related helpers to centralize mode-based styling rules across components. Update components to use new PermissionModeOption type for consistent permission mode presentation.

web/src/hooks/mutations/useSessionActions.ts

@@ -1,9 +1,14 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { isPermissionModeAllowedForFlavor } from '@hapi/protocol'
 import type { ApiClient } from '@/api/client'
 import type { ModelMode, PermissionMode } from '@/types/api'
 import { queryKeys } from '@/lib/query-keys'
 
-export function useSessionActions(api: ApiClient | null, sessionId: string | null): {
+export function useSessionActions(
+    api: ApiClient | null,
+    sessionId: string | null,
+    agentFlavor?: string | null
+): {
     abortSession: () => Promise<void>
     archiveSession: () => Promise<void>
     switchSession: () => Promise<void>
@@ -56,6 +61,10 @@ export function useSessionActions(api: ApiClient | null, sessionId: string | nul
             if (!api || !sessionId) {
                 throw new Error('Session unavailable')
             }
+            const isKnownFlavor = agentFlavor === 'claude' || agentFlavor === 'codex' || agentFlavor === 'gemini'
+            if (isKnownFlavor && !isPermissionModeAllowedForFlavor(mode, agentFlavor)) {
+                throw new Error('Invalid permission mode for session flavor')
+            }
             await api.setPermissionMode(sessionId, mode)
         },
         onSuccess: () => void invalidateSession(),