🤖 feat: responsive ChatInput controls with compact display

Changes chat controls to use compact display on narrow viewports instead
of hiding elements entirely:

1. **1M Context Label**: Changed from '1M Context' to just '1M' (always)
2. **Thinking Slider**: Slider hidden on narrow viewports (<550px), but
   text label remains visible and is always clickable to cycle through
   levels (off → low → medium → high → off)
3. **Mode Switch**: Shows both Exec/Plan buttons on wide viewports,
   shows only active mode as clickable toggle on narrow viewports (<550px)

All controls remain functional at all viewport sizes. Compact versions
use click-to-cycle pattern to switch between options.

_Generated with `cmux`_

Author: ammar-agent

src/components/ChatInput.tsx

@@ -847,18 +847,19 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             </TooltipWrapper>
           </div>
 
-          {/* Thinking Slider - hide on small viewports */}
+          {/* Thinking Slider - slider hidden on narrow viewports, label always clickable */}
           <div
-            className="flex items-center max-[550px]:hidden"
+            className="flex items-center [&_.thinking-slider]:max-[550px]:hidden"
             data-component="ThinkingSliderGroup"
           >
             <ThinkingSliderComponent modelString={preferredModel} />
           </div>
 
-          {/* Context 1M Checkbox - hide on smaller viewports */}
-          <div className="flex items-center max-[450px]:hidden" data-component="Context1MGroup">
+          {/* Context 1M Checkbox - always visible */}
+          <div className="flex items-center" data-component="Context1MGroup">
             <Context1MCheckbox modelString={preferredModel} />
           </div>
+
           {preferredModel && (
             <div className={hasTypedText ? "block" : "hidden"}>
               <Suspense
@@ -875,6 +876,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               </Suspense>
             </div>
           )}
+
+          {/* Mode Switch - full version for wide viewports */}
           <div className="ml-auto flex items-center gap-1.5 max-[550px]:hidden">
             <div
               className={cn(
@@ -908,6 +911,38 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               </Tooltip>
             </TooltipWrapper>
           </div>
+
+          {/* Mode Switch - compact version for narrow viewports */}
+          <div className="ml-auto hidden items-center gap-1.5 max-[550px]:flex">
+            <div
+              className={cn(
+                mode === "exec" && "bg-exec-mode text-white",
+                mode === "plan" && "bg-plan-mode text-white"
+              )}
+            >
+              <ToggleGroup<UIMode>
+                options={[
+                  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
+                  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
+                ]}
+                value={mode}
+                onChange={setMode}
+                compact
+              />
+            </div>
+            <TooltipWrapper inline>
+              <HelpIndicator>?</HelpIndicator>
+              <Tooltip className="tooltip" align="center" width="wide">
+                <strong>Exec Mode:</strong> AI edits files and execute commands
+                <br />
+                <br />
+                <strong>Plan Mode:</strong> AI proposes plans but does not edit files
+                <br />
+                <br />
+                Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
+              </Tooltip>
+            </TooltipWrapper>
+          </div>
         </div>
       </div>
     </div>

src/components/Context1MCheckbox.tsx

@@ -19,7 +19,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
     <div className="flex items-center gap-1.5">
       <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
         <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
-        1M Context
+        1M
       </label>
       <TooltipWrapper inline>
         <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>

src/components/ThinkingSlider.tsx

@@ -124,6 +124,13 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
     }
   };
 
+  // Cycle through allowed thinking levels: off → low → medium → high → off
+  const cycleThinkingLevel = () => {
+    const currentIndex = THINKING_LEVELS.indexOf(thinkingLevel);
+    const nextIndex = (currentIndex + 1) % THINKING_LEVELS.length;
+    handleThinkingLevelChange(THINKING_LEVELS[nextIndex]);
+  };
+
   return (
     <TooltipWrapper>
       <div className="flex items-center gap-2">
@@ -154,16 +161,23 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
             } as React.CSSProperties
           }
         />
-        <span
-          className="min-w-11 uppercase transition-all duration-200 select-none"
-          style={textStyle}
-          aria-live="polite"
+        <button
+          type="button"
+          onClick={cycleThinkingLevel}
+          className="cursor-pointer border-none bg-transparent p-0"
+          aria-label={`Thinking level: ${thinkingLevel}. Click to cycle.`}
         >
-          {thinkingLevel}
-        </span>
+          <span
+            className="min-w-11 uppercase transition-all duration-200 select-none"
+            style={textStyle}
+            aria-live="polite"
+          >
+            {thinkingLevel}
+          </span>
+        </button>
       </div>
       <Tooltip align="center">
-        Thinking: {formatKeybind(KEYBINDS.TOGGLE_THINKING)} to toggle
+        Thinking: {formatKeybind(KEYBINDS.TOGGLE_THINKING)} to toggle. Click level to cycle.
       </Tooltip>
     </TooltipWrapper>
   );

src/components/ToggleGroup.tsx

@@ -10,9 +10,32 @@ interface ToggleGroupProps<T extends string> {
   options: Array<ToggleOption<T>>;
   value: T;
   onChange: (value: T) => void;
+  compact?: boolean; // If true, show only active option as clickable badge
 }
 
-export function ToggleGroup<T extends string>({ options, value, onChange }: ToggleGroupProps<T>) {
+export function ToggleGroup<T extends string>({ options, value, onChange, compact = false }: ToggleGroupProps<T>) {
+  // Compact mode: show only active option, click cycles to next option
+  if (compact) {
+    const currentIndex = options.findIndex(opt => opt.value === value);
+    const activeOption = options[currentIndex];
+    const nextOption = options[(currentIndex + 1) % options.length];
+    
+    return (
+      <button
+        onClick={() => onChange(nextOption.value)}
+        type="button"
+        className={cn(
+          "px-2 py-1 text-[11px] font-sans rounded border-none cursor-pointer transition-all duration-150",
+          "text-toggle-text-active bg-toggle-active font-medium",
+          activeOption?.activeClassName
+        )}
+        aria-label={`${activeOption.label} mode. Click to switch to ${nextOption.label}.`}
+      >
+        {activeOption.label}
+      </button>
+    );
+  }
+
   return (
     <div className="bg-toggle-bg flex gap-0 rounded">
       {options.map((option) => {