feat: Make mode selection a select

Twixes · Twixes · commit fe3d9050a4d3 · 2026-01-27T15:00:36.000+01:00
diff --git a/apps/twig/src/renderer/features/message-editor/components/MessageEditor.tsx b/apps/twig/src/renderer/features/message-editor/components/MessageEditor.tsx
@@ -26,7 +26,7 @@ interface MessageEditorProps {
   onAttachFiles?: (files: File[]) => void;
   autoFocus?: boolean;
   currentMode?: ExecutionMode;
-  onModeChange?: () => void;
+  onModeChange?: (mode: ExecutionMode) => void;
 }
 
 export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
@@ -206,7 +206,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
           </Flex>
         </Flex>
         {onModeChange && currentMode && (
-          <ModeIndicatorInput mode={currentMode} />
+          <ModeIndicatorInput mode={currentMode} onModeChange={onModeChange} />
         )}
       </Flex>
     );
diff --git a/apps/twig/src/renderer/features/message-editor/components/ModeIndicatorInput.tsx b/apps/twig/src/renderer/features/message-editor/components/ModeIndicatorInput.tsx
@@ -1,9 +1,12 @@
 import type { ExecutionMode } from "@features/sessions/stores/sessionStore";
 import { LockOpen, Pause, Pencil, ShieldCheck } from "@phosphor-icons/react";
-import { Flex, Text } from "@radix-ui/themes";
+import { Flex, Select, Text } from "@radix-ui/themes";
+import { EXECUTION_MODES } from "@shared/constants";
 
 interface ModeIndicatorInputProps {
   mode: ExecutionMode;
+  onModeChange: (mode: ExecutionMode) => void;
+  disabled?: boolean;
 }
 
 const modeConfig: Record<
@@ -16,55 +19,115 @@ const modeConfig: Record<
 > = {
   plan: {
     label: "plan mode on",
-    icon: <Pause size={12} weight="bold" />,
+    icon: <Pause size={12} weight="bold" color="var(--amber-11)" />,
     colorVar: "var(--amber-11)",
   },
   default: {
     label: "default mode",
-    icon: <Pencil size={12} />,
+    icon: <Pencil size={12} color="var(--gray-11)" />,
     colorVar: "var(--gray-11)",
   },
   acceptEdits: {
     label: "auto-accept edits",
-    icon: <ShieldCheck size={12} weight="fill" />,
+    icon: <ShieldCheck size={12} weight="fill" color="var(--green-11)" />,
     colorVar: "var(--green-11)",
   },
   bypassPermissions: {
     label: "bypass permissions",
-    icon: <LockOpen size={12} weight="bold" />,
+    icon: <LockOpen size={12} weight="bold" color="var(--red-11)" />,
     colorVar: "var(--red-11)",
   },
 };
 
-export function ModeIndicatorInput({ mode }: ModeIndicatorInputProps) {
+export function ModeIndicatorInput({
+  mode,
+  onModeChange,
+  disabled,
+}: ModeIndicatorInputProps) {
   const config = modeConfig[mode];
 
   return (
-    <Flex align="center" justify="between" py="1">
-      <Flex align="center" gap="1">
-        <Text
-          size="1"
-          style={{
-            color: config.colorVar,
-            fontFamily: "monospace",
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-          }}
-        >
+    <Select.Root
+      value={mode}
+      onValueChange={onModeChange}
+      disabled={disabled}
+      size="1"
+    >
+      <Select.Trigger
+        className="w-fit"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <Flex align="center" gap="1">
           {config.icon}
-          {config.label}
-        </Text>
-        <Text
-          size="1"
-          style={{
-            color: "var(--gray-9)",
-            fontFamily: "monospace",
-          }}
-        >
-          (shift+tab to cycle)
-        </Text>
-      </Flex>
-    </Flex>
+          <Text
+            size="1"
+            style={{
+              color: config.colorVar,
+              fontFamily: "monospace",
+            }}
+          >
+            {config.label}
+          </Text>
+          <Text
+            size="1"
+            style={{
+              color: "var(--gray-9)",
+              fontFamily: "monospace",
+            }}
+          >
+            (shift+tab to cycle)
+          </Text>
+        </Flex>
+      </Select.Trigger>
+      <Select.Content>
+        {EXECUTION_MODES.map((modeOption) => {
+          const optionConfig = modeConfig[modeOption];
+          const hoverBgClass =
+            modeOption === "plan"
+              ? "hover:!bg-[var(--amber-11)]"
+              : modeOption === "default"
+                ? "hover:!bg-[var(--gray-11)]"
+                : modeOption === "acceptEdits"
+                  ? "hover:!bg-[var(--green-11)]"
+                  : "hover:!bg-[var(--red-11)]";
+          return (
+            <Select.Item
+              key={modeOption}
+              value={modeOption}
+              className={`group transition-colors ${hoverBgClass}`}
+            >
+              <Flex
+                align="center"
+                gap="1"
+                className="group-hover:!text-[black] [&_svg]:group-hover:!text-[black] [&_svg]:group-hover:!fill-[black] [&_svg_path]:group-hover:!fill-[black] [&_svg_path]:group-hover:!stroke-[black]"
+                style={{
+                  color: optionConfig.colorVar,
+                  fontFamily: "monospace",
+                }}
+              >
+                <span className="group-hover:[&_svg]:!text-[black] group-hover:[&_svg]:!fill-[black] group-hover:[&_svg_path]:!fill-[black] group-hover:[&_svg_path]:!stroke-[black]">
+                  {optionConfig.icon}
+                </span>
+                <Text size="1" className="group-hover:!text-[black]">
+                  {optionConfig.label}
+                </Text>
+              </Flex>
+            </Select.Item>
+          );
+        })}
+      </Select.Content>
+      <style>{`
+        .group:hover svg {
+          color: black !important;
+          fill: black !important;
+        }
+        .group:hover svg path {
+          fill: black !important;
+          stroke: black !important;
+        }
+      `}</style>
+    </Select.Root>
   );
 }
diff --git a/apps/twig/src/renderer/features/sessions/components/SessionView.tsx b/apps/twig/src/renderer/features/sessions/components/SessionView.tsx
@@ -12,6 +12,7 @@ import {
 import type { Plan } from "@features/sessions/types";
 import { Warning } from "@phosphor-icons/react";
 import { Box, Button, ContextMenu, Flex, Text } from "@radix-ui/themes";
+import { EXECUTION_MODES } from "@shared/constants";
 import {
   type AcpMessage,
   isJsonRpcNotification,
@@ -29,13 +30,6 @@ import { InlinePermissionSelector } from "./InlinePermissionSelector";
 import { PlanStatusBar } from "./PlanStatusBar";
 import { RawLogsView } from "./raw-logs/RawLogsView";
 
-const EXECUTION_MODES: ExecutionMode[] = [
-  "plan",
-  "default",
-  "acceptEdits",
-  "bypassPermissions",
-];
-
 function cycleMode(current: ExecutionMode): ExecutionMode {
   const currentIndex = EXECUTION_MODES.indexOf(current);
   const nextIndex = (currentIndex + 1) % EXECUTION_MODES.length;
diff --git a/apps/twig/src/renderer/features/task-detail/components/TaskInput.tsx b/apps/twig/src/renderer/features/task-detail/components/TaskInput.tsx
@@ -6,6 +6,7 @@ import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useRepositoryIntegration } from "@hooks/useIntegrations";
 import { Flex } from "@radix-ui/themes";
 import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersStore";
+import { EXECUTION_MODES } from "@shared/constants";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useTaskDirectoryStore } from "@stores/taskDirectoryStore";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -14,13 +15,6 @@ import { SuggestedTasks } from "./SuggestedTasks";
 import { TaskInputEditor } from "./TaskInputEditor";
 import { type WorkspaceMode, WorkspaceModeSelect } from "./WorkspaceModeSelect";
 
-const EXECUTION_MODES: ExecutionMode[] = [
-  "plan",
-  "default",
-  "acceptEdits",
-  "bypassPermissions",
-];
-
 function cycleMode(current: ExecutionMode): ExecutionMode {
   const currentIndex = EXECUTION_MODES.indexOf(current);
   const nextIndex = (currentIndex + 1) % EXECUTION_MODES.length;
diff --git a/apps/twig/src/renderer/features/task-detail/components/TaskInputEditor.tsx b/apps/twig/src/renderer/features/task-detail/components/TaskInputEditor.tsx
@@ -233,7 +233,12 @@ export const TaskInputEditor = forwardRef<
             </Flex>
           </Flex>
         </Flex>
-        {!isCloudMode && <ModeIndicatorInput mode={executionMode} />}
+        {!isCloudMode && (
+          <ModeIndicatorInput
+            mode={executionMode}
+            onModeChange={onModeChange}
+          />
+        )}
       </>
     );
   },
diff --git a/apps/twig/src/shared/constants.ts b/apps/twig/src/shared/constants.ts
@@ -1,3 +1,5 @@
+import type { ExecutionMode } from "@/main/services/agent/schemas";
+
 /**
  * Branch naming conventions.
  * - Reading: Accept all prefixes for backwards compatibility
@@ -21,3 +23,10 @@ export function isTwigBranch(branchName: string): boolean {
 export const DATA_DIR = ".twig";
 export const WORKSPACES_DIR = ".twig/workspaces";
 export const LEGACY_DATA_DIRS = [".array"];
+
+export const EXECUTION_MODES: ExecutionMode[] = [
+  "default",
+  "acceptEdits",
+  "plan",
+  "bypassPermissions",
+];
