admin/NomadArch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add APEX PRO mode combining SOLO + APEX

Browse Source 
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
This commit is contained in:
Gemini AI
2025-12-23 14:10:25 +04:00
Unverified
parent 3cd44dd0c2
commit cdd31feead
2 changed files with 55 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/ui/src/components/chat/multi-task-chat.tsx
View File

@@ -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;
@@ -505,27 +521,31 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
</div>
<div class="flex items-center space-x-2">
<button
<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 ${
solo().isApex
? "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"
}`}
class={`flex items-center space-x-1.5 px-2 py-1 rounded-lg border transition-all ${solo().isApex
? "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"
}`}
>
<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)}
class={`px-2 py-0.5 rounded text-[9px] font-bold uppercase border ${solo().isAutonomous
? "bg-indigo-500/20 border-indigo-500/40 text-indigo-400"
: "bg-white/5 border-white/10 text-zinc-500"
<button
onClick={toggleApexPro}
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-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 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>

21
packages/ui/src/styles/utilities.css
View File

@@ -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;