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.

shared/src/modes.ts

@@ -30,12 +30,38 @@ export const PERMISSION_MODE_LABELS: Record<PermissionMode, string> = {
     yolo: 'Yolo'
 }
 
+export type PermissionModeTone = 'neutral' | 'info' | 'warning' | 'danger'
+
+export const PERMISSION_MODE_TONES: Record<PermissionMode, PermissionModeTone> = {
+    default: 'neutral',
+    acceptEdits: 'warning',
+    plan: 'info',
+    bypassPermissions: 'danger',
+    'read-only': 'warning',
+    'safe-yolo': 'warning',
+    yolo: 'danger'
+}
+
+export type PermissionModeOption = {
+    mode: PermissionMode
+    label: string
+    tone: PermissionModeTone
+}
+
 export const MODEL_MODE_LABELS: Record<ModelMode, string> = {
     default: 'Default',
     sonnet: 'Sonnet',
     opus: 'Opus'
 }
 
+export function getPermissionModeLabel(mode: PermissionMode): string {
+    return PERMISSION_MODE_LABELS[mode]
+}
+
+export function getPermissionModeTone(mode: PermissionMode): PermissionModeTone {
+    return PERMISSION_MODE_TONES[mode]
+}
+
 export function getPermissionModesForFlavor(flavor?: string | null): readonly PermissionMode[] {
     if (flavor === 'codex') {
         return CODEX_PERMISSION_MODES
@@ -46,6 +72,14 @@ export function getPermissionModesForFlavor(flavor?: string | null): readonly Pe
     return CLAUDE_PERMISSION_MODES
 }
 
+export function getPermissionModeOptionsForFlavor(flavor?: string | null): PermissionModeOption[] {
+    return getPermissionModesForFlavor(flavor).map((mode) => ({
+        mode,
+        label: getPermissionModeLabel(mode),
+        tone: getPermissionModeTone(mode)
+    }))
+}
+
 export function isPermissionModeAllowedForFlavor(mode: PermissionMode, flavor?: string | null): boolean {
     return getPermissionModesForFlavor(flavor).includes(mode)
 }

shared/src/types.ts

@@ -15,5 +15,7 @@ export type {
     ClaudePermissionMode,
     CodexPermissionMode,
     ModelMode,
-    PermissionMode
+    PermissionMode,
+    PermissionModeOption,
+    PermissionModeTone
 } from './modes'