feat: add APEX PRO mode combining SOLO + APEX

Combined autonomous and auto-approval modes into APEX PRO:
- Single toggle enables both functionalities
- Orange color scheme with gentle blinking animation
- Pulsing shadow effect when enabled
- Small glowing indicator dot
- Tooltip explains combined functionality
- SHIELD button remains separate for auto-approval only

packages/ui/src/components/chat/multi-task-chat.tsx

@@ -136,6 +136,22 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
 
   const solo = () => getSoloState(props.instanceId);
 
+  // APEX PRO mode = SOLO + APEX combined (autonomous + auto-approval)
+  const isApexPro = () => solo().isAutonomous && solo().autoApproval;
+
+  const toggleApexPro = () => {
+    const currentState = isApexPro();
+    if (currentState) {
+      // Turn off both
+      if (solo().isAutonomous) toggleAutonomous(props.instanceId);
+      if (solo().autoApproval) toggleAutoApproval(props.instanceId);
+    } else {
+      // Turn on both
+      if (!solo().isAutonomous) toggleAutonomous(props.instanceId);
+      if (!solo().autoApproval) toggleAutoApproval(props.instanceId);
+    }
+  };
+
   const isAgentThinking = createMemo(() => {
     // Show thinking while we're actively sending
     if (isSending()) return true;
@@ -508,24 +524,28 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
                   <button
                     onClick={() => toggleApex(props.instanceId)}
                     title="Toggle APEX Mode (Max Priority)"
-                    class={`flex items-center space-x-1.5 px-2 py-1 rounded-lg border transition-all ${
+                    class={`flex items-center space-x-1.5 px-2 py-1 rounded-lg border transition-all ${solo().isApex
-                      solo().isApex 
+                      ? "bg-rose-500/20 border-rose-500/40 text-rose-400 shadow-[0_0_15px_rgba(244,63,94,0.3)]"
-                        ? "bg-rose-500/20 border-rose-500/40 text-rose-400 shadow-[0_0_15px_rgba(244,63,94,0.3)]" 
+                      : "bg-white/5 border-white/5 text-zinc-500 hover:bg-white/10"
-                        : "bg-white/5 border-white/5 text-zinc-500 hover:bg-white/10"
+                      }`}
-                    }`}
                   >
                     <Zap size={10} class={solo().isApex ? "animate-bounce" : ""} />
                     <span class="text-[9px] font-black uppercase tracking-tighter">Apex</span>
                   </button>
                   <button
-                    onClick={() => toggleAutonomous(props.instanceId)}
+                    onClick={toggleApexPro}
-                    class={`px-2 py-0.5 rounded text-[9px] font-bold uppercase border ${solo().isAutonomous
+                    class={`flex items-center space-x-1.5 px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-tight border transition-all ${isApexPro()
-                      ? "bg-indigo-500/20 border-indigo-500/40 text-indigo-400"
+                      ? "bg-orange-500/20 border-orange-500/40 text-orange-400 shadow-[0_0_15px_rgba(249,115,22,0.3)]"
-                      : "bg-white/5 border-white/10 text-zinc-500"
+                      : "bg-white/5 border-white/10 text-zinc-500 hover:border-white/20 hover:text-zinc-400"
                       }`}
-                    title="APEX - Autonomous Programming EXecution mode"
+                    title="APEX PRO - Autonomous Programming EXecution + Auto-approval combined"
+                    style={isApexPro() ? { animation: "apex-pro-pulse 2s ease-in-out infinite" } : {}}
                   >
-                    APEX
+                    <Zap size={12} class={isApexPro() ? "text-orange-400" : ""} />
+                    <span>APEX PRO</span>
+                    <Show when={isApexPro()}>
+                      <div class="w-1.5 h-1.5 bg-orange-400 rounded-full" style={{ animation: "apex-pro-glow 1.5s ease-in-out infinite" }} />
+                    </Show>
                   </button>
                   <button
                     onClick={() => toggleAutoApproval(props.instanceId)}
@@ -533,7 +553,7 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
                       ? "bg-emerald-500/20 border-emerald-500/40 text-emerald-400"
                       : "bg-white/5 border-white/10 text-zinc-500"
                       }`}
-                    title="SHIELD - Auto-approval mode"
+                    title="SHIELD - Auto-approval mode only"
                   >
                     SHIELD
                   </button>

packages/ui/src/styles/utilities.css

@@ -118,6 +118,27 @@
   to { transform: rotate(360deg); }
 }
 
+/* APEX PRO mode animations */
+@keyframes apex-pro-pulse {
+  0%, 100% { 
+    box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
+  }
+  50% { 
+    box-shadow: 0 0 25px rgba(249, 115, 22, 0.5);
+  }
+}
+
+@keyframes apex-pro-glow {
+  0%, 100% { 
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% { 
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+
 /* Shared layout helpers */
 .status-dot {
   @apply w-1 h-1 rounded-full;