From bac302626f8e547616576925e368ee5b9676bc93 Mon Sep 17 00:00:00 2001 From: Christoph Leiter Date: Mon, 13 Jul 2026 11:45:42 +0200 Subject: [PATCH] feat(app): give each permission mode a distinct icon (#1980) * feat(app): give each permission mode a distinct icon The mode selector reused shield glyphs across modes: Auto mode showed a question mark, Always Ask a checkmark, and the same icon appeared on several modes (ShieldCheck on both Always Ask and Plan, ShieldAlert on both Accept File Edits and Bypass). The result read as arbitrary rather than as a scale of autonomy. Assign every built-in provider mode a distinct icon from one shared vocabulary, applied consistently across Claude, Codex, Copilot, and OpenCode: - Shield guarded default (every action prompts) - ShieldCheck classifier/auto-reviewer vets prompts - ShieldPlus edit tools pre-approved, others still prompt - ShieldEllipsis plan / read-only deliberation - ShieldOff fully permissive, no prompts Register the new icons in the client MODE_ICONS map. Old clients downgrade unknown icon names to ShieldCheck through the existing customModeIcons compat gate, so the wire contract is unchanged. Co-Authored-By: Claude Opus 4.8 * feat(app): order permission modes by autonomy --------- Co-authored-by: Claude Opus 4.8 Co-authored-by: Mohamed Boudra --- .../composer/agent-controls/mode-control.tsx | 14 ++++++- packages/protocol/src/provider-manifest.ts | 42 +++++++++---------- .../server/agent/providers/claude/agent.ts | 16 +++---- 3 files changed, 42 insertions(+), 30 deletions(-) diff --git a/packages/app/src/composer/agent-controls/mode-control.tsx b/packages/app/src/composer/agent-controls/mode-control.tsx index 6329cd46e..e129b1e53 100644 --- a/packages/app/src/composer/agent-controls/mode-control.tsx +++ b/packages/app/src/composer/agent-controls/mode-control.tsx @@ -12,7 +12,16 @@ import { Text, View, type PressableStateCallbackType } from "react-native"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { useShallow } from "zustand/shallow"; import { useStoreWithEqualityFn } from "zustand/traditional"; -import { Bot, ShieldAlert, ShieldCheck, ShieldOff, ShieldQuestionMark } from "lucide-react-native"; +import { + Bot, + Shield, + ShieldAlert, + ShieldCheck, + ShieldEllipsis, + ShieldOff, + ShieldPlus, + ShieldQuestionMark, +} from "lucide-react-native"; import { ComboboxTrigger } from "@/components/ui/combobox-trigger"; import { type SheetHeader } from "@/components/adaptive-modal-sheet"; import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox"; @@ -48,9 +57,12 @@ interface ModeIconProps { const MODE_ICONS: Record> = { Bot, + Shield, ShieldCheck, ShieldAlert, + ShieldEllipsis, ShieldOff, + ShieldPlus, ShieldQuestionMark, }; diff --git a/packages/protocol/src/provider-manifest.ts b/packages/protocol/src/provider-manifest.ts index 312e70455..35af5b1d9 100644 --- a/packages/protocol/src/provider-manifest.ts +++ b/packages/protocol/src/provider-manifest.ts @@ -36,39 +36,39 @@ export interface AgentProviderDefinition { } const CLAUDE_MODES: AgentProviderModeDefinition[] = [ + { + id: "plan", + label: "Plan Mode", + description: "Analyze the codebase without executing tools or edits", + icon: "ShieldEllipsis", + colorTier: "planning", + }, { id: "default", label: "Always Ask", description: "Prompts for permission the first time a tool is used", - icon: "ShieldCheck", + icon: "Shield", colorTier: "safe", }, - { - id: "auto", - label: "Auto mode", - description: "Uses a model classifier to review permission prompts automatically", - icon: "ShieldQuestionMark", - colorTier: "moderate", - }, { id: "acceptEdits", label: "Accept File Edits", description: "Automatically approves edit-focused tools without prompting", - icon: "ShieldAlert", + icon: "ShieldPlus", colorTier: "moderate", }, { - id: "plan", - label: "Plan Mode", - description: "Analyze the codebase without executing tools or edits", + id: "auto", + label: "Auto mode", + description: "Uses a model classifier to review permission prompts automatically", icon: "ShieldCheck", - colorTier: "planning", + colorTier: "moderate", }, { id: "bypassPermissions", label: "Bypass", description: "Skip all permission prompts (use with caution)", - icon: "ShieldAlert", + icon: "ShieldOff", colorTier: "dangerous", isUnattended: true, }, @@ -79,7 +79,7 @@ const CODEX_MODES: AgentProviderModeDefinition[] = [ id: "auto", label: "Default Permissions", description: "Edit files and run commands with Codex's default approval flow.", - icon: "ShieldAlert", + icon: "Shield", colorTier: "moderate", }, { @@ -87,14 +87,14 @@ const CODEX_MODES: AgentProviderModeDefinition[] = [ label: "Auto-review", description: "Same workspace-write permissions as Default, but eligible `on-request` approvals are routed through the auto-reviewer subagent.", - icon: "ShieldQuestionMark", + icon: "ShieldCheck", colorTier: "moderate", }, { id: "full-access", label: "Full Access", description: "Edit files, run commands, and access the network without additional prompts.", - icon: "ShieldAlert", + icon: "ShieldOff", colorTier: "dangerous", isUnattended: true, }, @@ -105,14 +105,14 @@ const COPILOT_MODES: AgentProviderModeDefinition[] = [ id: "https://agentclientprotocol.com/protocol/session-modes#agent", label: "Agent", description: "Default agent mode for conversational interactions", - icon: "ShieldAlert", + icon: "Shield", colorTier: "moderate", }, { id: "https://agentclientprotocol.com/protocol/session-modes#plan", label: "Plan", description: "Plan mode for creating and executing multi-step plans", - icon: "ShieldCheck", + icon: "ShieldEllipsis", colorTier: "planning", }, { @@ -130,14 +130,14 @@ const OPENCODE_MODES: AgentProviderModeDefinition[] = [ id: "build", label: "Build", description: "Allows edits and tool execution for implementation work", - icon: "Bot", + icon: "Shield", colorTier: "moderate", }, { id: "plan", label: "Plan", description: "Read-only planning mode that avoids file edits", - icon: "Bot", + icon: "ShieldEllipsis", colorTier: "planning", }, ]; diff --git a/packages/server/src/server/agent/providers/claude/agent.ts b/packages/server/src/server/agent/providers/claude/agent.ts index a2dde63a6..60001add3 100644 --- a/packages/server/src/server/agent/providers/claude/agent.ts +++ b/packages/server/src/server/agent/providers/claude/agent.ts @@ -280,25 +280,25 @@ const CLAUDE_CAPABILITIES: AgentCapabilityFlags = { }; const DEFAULT_MODES: AgentMode[] = [ + { + id: "plan", + label: "Plan Mode", + description: "Analyze the codebase without executing tools or edits", + }, { id: "default", label: "Always Ask", description: "Prompts for permission the first time a tool is used", }, - { - id: "auto", - label: "Auto mode", - description: "Uses a model classifier to review permission prompts automatically", - }, { id: "acceptEdits", label: "Accept File Edits", description: "Automatically approves edit-focused tools without prompting", }, { - id: "plan", - label: "Plan Mode", - description: "Analyze the codebase without executing tools or edits", + id: "auto", + label: "Auto mode", + description: "Uses a model classifier to review permission prompts automatically", }, { id: "bypassPermissions",