From 11f60ea77415646a51a0c772560f1f490ea4a388 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Thu, 6 Nov 2025 22:45:49 +0000
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=A4=96=20feat:=20responsive=20ChatInp?=
 =?UTF-8?q?ut=20controls=20with=20compact=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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`_
---
 src/components/ChatInput.tsx         | 43 +++++++++++++++++++++++++---
 src/components/Context1MCheckbox.tsx |  2 +-
 src/components/ThinkingSlider.tsx    | 28 +++++++++++++-----
 src/components/ToggleGroup.tsx       | 25 +++++++++++++++-
 4 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index d1ebdc214..4b1c28e35 100644
--- a/src/components/ChatInput.tsx
+++ b/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>
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index 37e6290b3..e98ad1831 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/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>
diff --git a/src/components/ThinkingSlider.tsx b/src/components/ThinkingSlider.tsx
index 56b9bc412..8d58d7cce 100644
--- a/src/components/ThinkingSlider.tsx
+++ b/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>
   );
diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index 6388a2a65..9840aa84b 100644
--- a/src/components/ToggleGroup.tsx
+++ b/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) => {

From 90e19ade4133e4a99b5f766125403bdff2ffbb4e Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Thu, 6 Nov 2025 22:49:52 +0000
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20match=20border=20radi?=
 =?UTF-8?q?us=20in=20compact=20mode=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from 'rounded' to 'rounded-sm' to match the regular toggle
buttons and overall UI aesthetic.

_Generated with `cmux`_
---
 src/components/ToggleGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index 9840aa84b..19ff3b5e2 100644
--- a/src/components/ToggleGroup.tsx
+++ b/src/components/ToggleGroup.tsx
@@ -25,7 +25,7 @@ export function ToggleGroup<T extends string>({ options, value, onChange, compac
         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",
+          "px-2 py-1 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150",
           "text-toggle-text-active bg-toggle-active font-medium",
           activeOption?.activeClassName
         )}

From ddfb46a520f2aa0cd0c12f843148b9ee603aaeab Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Thu, 6 Nov 2025 22:50:53 +0000
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A4=96=20refactor:=20simplify=20compa?=
 =?UTF-8?q?ct=20mode=20switch=20markup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed redundant wrapper div around compact ToggleGroup. The button
already has the correct styling applied via activeClassName.

_Generated with `cmux`_
---
 src/components/ChatInput.tsx | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 4b1c28e35..0b22bc2d6 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -914,22 +914,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
           {/* 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>
+            <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
+            />
             <TooltipWrapper inline>
               <HelpIndicator>?</HelpIndicator>
               <Tooltip className="tooltip" align="center" width="wide">

From 3425ffce2dea37ba21d0a4bbf5de31dd8bb5cde7 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Thu, 6 Nov 2025 22:54:35 +0000
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=A4=96=20style:=20fix=20formatting=20?=
 =?UTF-8?q?in=20ToggleGroup.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Applied Prettier formatting.

_Generated with `cmux`_
---
 src/components/ToggleGroup.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index 19ff3b5e2..bc223e646 100644
--- a/src/components/ToggleGroup.tsx
+++ b/src/components/ToggleGroup.tsx
@@ -13,13 +13,18 @@ interface ToggleGroupProps<T extends string> {
   compact?: boolean; // If true, show only active option as clickable badge
 }
 
-export function ToggleGroup<T extends string>({ options, value, onChange, compact = false }: 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 currentIndex = options.findIndex((opt) => opt.value === value);
     const activeOption = options[currentIndex];
     const nextOption = options[(currentIndex + 1) % options.length];
-    
+
     return (
       <button
         onClick={() => onChange(nextOption.value)}

From bac3f09bc6ea5d20e2b3c51c2afad510df21c27d Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Thu, 6 Nov 2025 22:59:34 +0000
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=A4=96=20refactor:=20extract=20duplic?=
 =?UTF-8?q?ated=20mode=20switch=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracted MODE_OPTIONS constant and ModeHelpTooltip component to
eliminate duplication between full and compact mode switch sections.

_Generated with `cmux`_
---
 src/components/ChatInput.tsx | 66 +++++++++++++-----------------------
 1 file changed, 24 insertions(+), 42 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 0b22bc2d6..bfe13a27b 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -27,7 +27,7 @@ import {
   prepareCompactionMessage,
   type CommandHandlerContext,
 } from "@/utils/chatCommands";
-import { ToggleGroup } from "./ToggleGroup";
+import { ToggleGroup, type ToggleOption } from "./ToggleGroup";
 import { CUSTOM_EVENTS } from "@/constants/events";
 import type { UIMode } from "@/types/mode";
 import {
@@ -88,6 +88,25 @@ export interface ChatInputAPI {
   appendText: (text: string) => void;
 }
 
+const MODE_OPTIONS: Array<ToggleOption<UIMode>> = [
+  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
+  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
+];
+
+const ModeHelpTooltip: React.FC = () => (
+  <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>
+);
 export interface ChatInputProps {
   workspaceId: string;
   onMessageSent?: () => void; // Optional callback after successful send
@@ -889,52 +908,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   "[&>button:last-of-type]:bg-plan-mode [&>button:last-of-type]:text-white [&>button:last-of-type]:hover:bg-plan-mode-hover"
               )}
             >
-              <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}
-              />
+              <ToggleGroup<UIMode> options={MODE_OPTIONS} value={mode} onChange={setMode} />
             </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>
+            <ModeHelpTooltip />
           </div>
 
           {/* Mode Switch - compact version for narrow viewports */}
           <div className="ml-auto hidden items-center gap-1.5 max-[550px]:flex">
-            <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
-            />
-            <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>
+            <ToggleGroup<UIMode> options={MODE_OPTIONS} value={mode} onChange={setMode} compact />
+            <ModeHelpTooltip />
           </div>
         </div>
       </div>