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 <noreply@anthropic.com>

* feat(app): order permission modes by autonomy

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>

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",
   },
 ];