🤖 fix: exclude auto from agent cycling, hide hints, fix color flash (#2635)

## Summary

Four targeted fixes for the agent picker's `Ctrl+.` cycle shortcut and
associated UI hints.

## Background

- **Cycling includes "auto"** — `Ctrl+.` cycles through all
`uiSelectable` agents including "auto". Since auto is a meta-mode (not a
concrete agent), it should only be toggled explicitly via the picker
switch.
- **Auto ignores nothing** — When "auto" is selected, `Ctrl+.` still
works (cycling away from auto) and both the `?` tooltip and the
bottom-of-chat shortcut hint still show the "Cycle/change agents" hint.
All should be suppressed.
- **Color flash** — The picker pill animates `border-color` over 150ms
via `transition-all`, but the textarea border snaps instantly (no
transition). The mismatch produces a visible color flash during agent
switches.

## Implementation

1. **`cycleToNextAgent` (`AgentContext.tsx`)** — Early-return when
active agent is `"auto"` AND auto is available in the discovered agent
list. Filter out `"auto"` from the cycle list so it's never a
destination. Stale persisted "auto" still allows keyboard recovery.
2. **`AgentHelpTooltip` (`AgentModePicker.tsx`)** — Added `isAuto` prop;
conditionally hides the "Cycle agents" hint when auto is selected.
3. **Chat input shortcut hints (`ChatInput/index.tsx`)** — Conditionally
hides the `⌘. - change agent` bottom hint when auto mode is active.
4. **Picker pill transition (`AgentModePicker.tsx`)** — Changed
`transition-all` → `transition-[background-color]` so only hover-bg
animates; border-color now snaps instantly to match the textarea.

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-6` • Thinking:
`xhigh` • Cost: `$2.30`_

<!-- mux-attribution: model=anthropic:claude-opus-4-6 thinking=xhigh
costs=2.30 -->

Author: ibetitsmike

src/browser/components/AgentModePicker.tsx

@@ -90,7 +90,7 @@ function normalizeAgentId(value: unknown): string {
   return typeof value === "string" && value.trim().length > 0 ? value.trim().toLowerCase() : "";
 }
 
-const AgentHelpTooltip: React.FC = () => (
+const AgentHelpTooltip: React.FC<{ isAuto: boolean }> = (props) => (
   <Tooltip>
     <TooltipTrigger asChild>
       <HelpIndicator>?</HelpIndicator>
@@ -101,8 +101,12 @@ const AgentHelpTooltip: React.FC = () => (
       <br />
       Open picker: {formatKeybind(KEYBINDS.TOGGLE_AGENT)}
       <br />
-      Cycle agents: {formatKeybind(KEYBINDS.CYCLE_AGENT)}
-      <br />
+      {!props.isAuto && (
+        <>
+          Cycle agents: {formatKeybind(KEYBINDS.CYCLE_AGENT)}
+          <br />
+        </>
+      )}
       Quick select: {formatNumberedKeybind(0).replace("1", "1-9")} (when open)
       <br />
       <br />
@@ -362,7 +366,7 @@ export const AgentModePicker: React.FC<AgentModePickerProps> = (props) => {
             }}
             style={activeStyle}
             className={cn(
-              "text-foreground hover:bg-hover flex items-center gap-1.5 rounded-sm border-[0.5px] px-1.5 py-0.5 text-[11px] font-medium transition-all duration-150",
+              "text-foreground hover:bg-hover flex items-center gap-1.5 rounded-sm border-[0.5px] px-1.5 py-0.5 text-[11px] font-medium transition-[background-color] duration-150",
               activeClassName
             )}
           >
@@ -389,7 +393,7 @@ export const AgentModePicker: React.FC<AgentModePickerProps> = (props) => {
 
       {/* Tooltip is hover-only; hide it on touch + narrow layouts to avoid overlap. */}
       <div className="hidden [@container(min-width:420px)]:[@media(hover:hover)_and_(pointer:fine)]:block">
-        <AgentHelpTooltip />
+        <AgentHelpTooltip isAuto={isAuto} />
       </div>
 
       {isPickerOpen && (

src/browser/components/ChatInput/index.tsx

@@ -446,7 +446,15 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
   const { open } = useSettings();
   const { selectedWorkspace, beginWorkspaceCreation, updateWorkspaceDraftSection } =
     useWorkspaceContext();
-  const { agentId, currentAgent } = useAgent();
+  const { agentId, currentAgent, agents } = useAgent();
+
+  // Keep auto-mode checks aligned with AgentModePicker behavior.
+  const normalizedAgentId =
+    typeof agentId === "string" && agentId.trim().length > 0
+      ? agentId.trim().toLowerCase()
+      : WORKSPACE_DEFAULTS.agentId;
+  const autoAvailable = agents.some((entry) => entry.uiSelectable && entry.id === "auto");
+  const isAutoAgent = normalizedAgentId === "auto" && autoAvailable;
 
   // Use current agent's uiColor, or neutral border until agents load
   const focusBorderColor = currentAgent?.uiColor ?? "var(--color-border-light)";
@@ -2430,10 +2438,12 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
                       <span className="font-mono">{formatKeybind(KEYBINDS.CYCLE_MODEL)}</span>
                       <span> - change model</span>
                     </span>
-                    <span>
-                      <span className="font-mono">{formatKeybind(KEYBINDS.CYCLE_AGENT)}</span>
-                      <span> - change agent</span>
-                    </span>
+                    {!isAutoAgent && (
+                      <span>
+                        <span className="font-mono">{formatKeybind(KEYBINDS.CYCLE_AGENT)}</span>
+                        <span> - change agent</span>
+                      </span>
+                    )}
                   </div>
                 )}
 

src/browser/contexts/AgentContext.tsx

@@ -231,9 +231,19 @@ function AgentProviderWithState(props: {
     const activeAgentId = coerceAgentId(
       isProjectScope ? (scopedAgentId ?? globalDefaultAgentId) : scopedAgentId
     );
-    const currentIndex = selectableAgents.findIndex((a) => a.id === activeAgentId);
-    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % selectableAgents.length;
-    const nextAgent = selectableAgents[nextIndex];
+
+    // Auto mode: ignore the cycle shortcut when auto is a live agent
+    // (stale persisted "auto" not in list → allow cycling to recover)
+    const autoAvailable = selectableAgents.some((a) => a.id === "auto");
+    if (activeAgentId === "auto" && autoAvailable) return;
+
+    // Never cycle into "auto" — it's toggled explicitly via the picker switch
+    const cyclableAgents = selectableAgents.filter((a) => a.id !== "auto");
+    if (cyclableAgents.length < 2) return;
+
+    const currentIndex = cyclableAgents.findIndex((a) => a.id === activeAgentId);
+    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % cyclableAgents.length;
+    const nextAgent = cyclableAgents[nextIndex];
     if (nextAgent) {
       setAgentId(nextAgent.id);
     }