fix: reduce icon size and add 'Default for project' checkbox

ammar-agent · ammar-agent · commit 044e0a0ce807 · 2025-12-03T12:21:16.000-06:00
- Reduce icon size from 14px to 10px (default) to match RuntimeBadge
- Reduce button padding from p-1.5 to p-1
- Add interactive tooltip with 'Default for project' checkbox
- Separate current selection (non-persistent) from project default (persistent)
- Clicking icon selects for this workspace, checkbox persists as default
diff --git a/src/browser/components/ChatInput/CreationControls.tsx b/src/browser/components/ChatInput/CreationControls.tsx
@@ -8,9 +8,12 @@ interface CreationControlsProps {
   trunkBranch: string;
   onTrunkBranchChange: (branch: string) => void;
   runtimeMode: RuntimeMode;
+  defaultRuntimeMode: RuntimeMode;
   sshHost: string;
-  /** Called when user changes runtime mode via checkbox in tooltip */
+  /** Called when user clicks a runtime icon to select it (does not persist) */
   onRuntimeModeChange: (mode: RuntimeMode) => void;
+  /** Called when user checks "Default for project" checkbox (persists) */
+  onSetDefaultRuntime: (mode: RuntimeMode) => void;
   /** Called when user changes SSH host */
   onSshHostChange: (host: string) => void;
   disabled: boolean;
@@ -32,6 +35,8 @@ export function CreationControls(props: CreationControlsProps) {
       <RuntimeIconSelector
         value={props.runtimeMode}
         onChange={props.onRuntimeModeChange}
+        defaultMode={props.defaultRuntimeMode}
+        onSetDefault={props.onSetDefaultRuntime}
         disabled={props.disabled}
       />
 
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
@@ -1382,8 +1382,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 trunkBranch={creationState.trunkBranch}
                 onTrunkBranchChange={creationState.setTrunkBranch}
                 runtimeMode={creationState.runtimeMode}
+                defaultRuntimeMode={creationState.defaultRuntimeMode}
                 sshHost={creationState.sshHost}
                 onRuntimeModeChange={creationState.setRuntimeMode}
+                onSetDefaultRuntime={creationState.setDefaultRuntimeMode}
                 onSshHostChange={creationState.setSshHost}
                 disabled={creationState.isSending || isSending}
               />
diff --git a/src/browser/components/ChatInput/useCreationWorkspace.test.tsx b/src/browser/components/ChatInput/useCreationWorkspace.test.tsx
@@ -473,15 +473,18 @@ function createDraftSettingsHarness(
     sshHost: string;
     trunkBranch: string;
     runtimeString?: string | undefined;
+    defaultRuntimeMode?: RuntimeMode;
   }>
 ) {
   const state = {
     runtimeMode: initial?.runtimeMode ?? ("local" as RuntimeMode),
+    defaultRuntimeMode: initial?.defaultRuntimeMode ?? ("worktree" as RuntimeMode),
     sshHost: initial?.sshHost ?? "",
     trunkBranch: initial?.trunkBranch ?? "main",
     runtimeString: initial?.runtimeString,
   } satisfies {
     runtimeMode: RuntimeMode;
+    defaultRuntimeMode: RuntimeMode;
     sshHost: string;
     trunkBranch: string;
     runtimeString: string | undefined;
@@ -499,19 +502,28 @@ function createDraftSettingsHarness(
     state.runtimeString = mode === "ssh" ? (trimmedHost ? `ssh ${trimmedHost}` : "ssh") : undefined;
   });
 
+  const setDefaultRuntimeMode = mock((mode: RuntimeMode) => {
+    state.defaultRuntimeMode = mode;
+    state.runtimeMode = mode;
+    const trimmedHost = state.sshHost.trim();
+    state.runtimeString = mode === "ssh" ? (trimmedHost ? `ssh ${trimmedHost}` : "ssh") : undefined;
+  });
+
   const setSshHost = mock((host: string) => {
     state.sshHost = host;
   });
 
   return {
     state,
     setRuntimeMode,
+    setDefaultRuntimeMode,
     setSshHost,
     setTrunkBranch,
     getRuntimeString,
     snapshot(): {
       settings: DraftWorkspaceSettings;
       setRuntimeMode: typeof setRuntimeMode;
+      setDefaultRuntimeMode: typeof setDefaultRuntimeMode;
       setSshHost: typeof setSshHost;
       setTrunkBranch: typeof setTrunkBranch;
       getRuntimeString: typeof getRuntimeString;
@@ -521,12 +533,14 @@ function createDraftSettingsHarness(
         thinkingLevel: "medium",
         mode: "exec",
         runtimeMode: state.runtimeMode,
+        defaultRuntimeMode: state.defaultRuntimeMode,
         sshHost: state.sshHost,
         trunkBranch: state.trunkBranch,
       };
       return {
         settings,
         setRuntimeMode,
+        setDefaultRuntimeMode,
         setSshHost,
         setTrunkBranch,
         getRuntimeString,
diff --git a/src/browser/components/ChatInput/useCreationWorkspace.ts b/src/browser/components/ChatInput/useCreationWorkspace.ts
@@ -46,9 +46,12 @@ interface UseCreationWorkspaceReturn {
   trunkBranch: string;
   setTrunkBranch: (branch: string) => void;
   runtimeMode: RuntimeMode;
+  defaultRuntimeMode: RuntimeMode;
   sshHost: string;
-  /** Set the default runtime mode for this project (only via checkbox) */
+  /** Set the currently selected runtime mode (does not persist) */
   setRuntimeMode: (mode: RuntimeMode) => void;
+  /** Set the default runtime mode for this project (persists via checkbox) */
+  setDefaultRuntimeMode: (mode: RuntimeMode) => void;
   /** Set the SSH host (persisted separately from runtime mode) */
   setSshHost: (host: string) => void;
   toast: Toast | null;
@@ -75,8 +78,14 @@ export function useCreationWorkspace({
   const [isSending, setIsSending] = useState(false);
 
   // Centralized draft workspace settings with automatic persistence
-  const { settings, setRuntimeMode, setSshHost, setTrunkBranch, getRuntimeString } =
-    useDraftWorkspaceSettings(projectPath, branches, recommendedTrunk);
+  const {
+    settings,
+    setRuntimeMode,
+    setDefaultRuntimeMode,
+    setSshHost,
+    setTrunkBranch,
+    getRuntimeString,
+  } = useDraftWorkspaceSettings(projectPath, branches, recommendedTrunk);
 
   // Get send options from shared hook (uses project-scoped storage key)
   const sendMessageOptions = useSendMessageOptions(getProjectScopeId(projectPath));
@@ -183,8 +192,10 @@ export function useCreationWorkspace({
     trunkBranch: settings.trunkBranch,
     setTrunkBranch,
     runtimeMode: settings.runtimeMode,
+    defaultRuntimeMode: settings.defaultRuntimeMode,
     sshHost: settings.sshHost,
     setRuntimeMode,
+    setDefaultRuntimeMode,
     setSshHost,
     toast,
     setToast,
diff --git a/src/browser/components/RuntimeIconSelector.tsx b/src/browser/components/RuntimeIconSelector.tsx
@@ -7,6 +7,10 @@ import { TooltipWrapper, Tooltip } from "./Tooltip";
 interface RuntimeIconSelectorProps {
   value: RuntimeMode;
   onChange: (mode: RuntimeMode) => void;
+  /** The persisted default runtime for this project */
+  defaultMode: RuntimeMode;
+  /** Called when user checks "Default for project" in tooltip */
+  onSetDefault: (mode: RuntimeMode) => void;
   disabled?: boolean;
   className?: string;
 }
@@ -46,7 +50,9 @@ const RUNTIME_INFO: Record<RuntimeMode, { label: string; description: string }>
 interface RuntimeIconButtonProps {
   mode: RuntimeMode;
   isSelected: boolean;
+  isDefault: boolean;
   onClick: () => void;
+  onSetDefault: () => void;
   disabled?: boolean;
 }
 
@@ -69,19 +75,28 @@ function RuntimeIconButton(props: RuntimeIconButtonProps) {
         onClick={props.onClick}
         disabled={props.disabled}
         className={cn(
-          "inline-flex items-center justify-center rounded border p-1.5 transition-colors",
+          "inline-flex items-center justify-center rounded border p-1 transition-colors",
           "focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
           stateStyle,
           props.disabled && "cursor-not-allowed opacity-50"
         )}
         aria-label={`${info.label} runtime`}
         aria-pressed={props.isSelected}
       >
-        <Icon size={14} />
+        <Icon />
       </button>
-      <Tooltip align="center" width="wide" position="bottom">
+      <Tooltip align="center" width="wide" position="bottom" interactive>
         <strong>{info.label}</strong>
-        <p className="text-muted mt-0.5">{info.description}</p>
+        <p className="text-muted mt-0.5 text-xs">{info.description}</p>
+        <label className="mt-1.5 flex cursor-pointer items-center gap-1.5 text-xs">
+          <input
+            type="checkbox"
+            checked={props.isDefault}
+            onChange={() => props.onSetDefault()}
+            className="accent-accent h-3 w-3"
+          />
+          <span className="text-muted">Default for project</span>
+        </label>
       </Tooltip>
     </TooltipWrapper>
   );
@@ -91,7 +106,7 @@ function RuntimeIconButton(props: RuntimeIconButtonProps) {
  * Runtime selector using icons with tooltips.
  * Shows Local, Worktree, and SSH options as clickable icons.
  * Selected runtime uses "active" styling (brighter colors).
- * Clicking an icon sets it as the project default.
+ * Each tooltip has a "Default for project" checkbox to persist the preference.
  */
 export function RuntimeIconSelector(props: RuntimeIconSelectorProps) {
   const modes: RuntimeMode[] = [RUNTIME_MODE.LOCAL, RUNTIME_MODE.WORKTREE, RUNTIME_MODE.SSH];
@@ -107,7 +122,9 @@ export function RuntimeIconSelector(props: RuntimeIconSelectorProps) {
           key={mode}
           mode={mode}
           isSelected={props.value === mode}
+          isDefault={props.defaultMode === mode}
           onClick={() => props.onChange(mode)}
+          onSetDefault={() => props.onSetDefault(mode)}
           disabled={props.disabled}
         />
       ))}
diff --git a/src/browser/hooks/useDraftWorkspaceSettings.ts b/src/browser/hooks/useDraftWorkspaceSettings.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { usePersistedState } from "./usePersistedState";
 import { useThinkingLevel } from "./useThinkingLevel";
 import { useMode } from "@/browser/contexts/ModeContext";
@@ -29,7 +29,10 @@ export interface DraftWorkspaceSettings {
   mode: UIMode;
 
   // Workspace creation settings (project-specific)
+  /** Currently selected runtime for this workspace creation (may differ from default) */
   runtimeMode: RuntimeMode;
+  /** Persisted default runtime for this project (used to initialize selection) */
+  defaultRuntimeMode: RuntimeMode;
   sshHost: string;
   trunkBranch: string;
 }
@@ -49,7 +52,10 @@ export function useDraftWorkspaceSettings(
   recommendedTrunk: string | null
 ): {
   settings: DraftWorkspaceSettings;
+  /** Set the currently selected runtime mode (does not persist) */
   setRuntimeMode: (mode: RuntimeMode) => void;
+  /** Set the default runtime mode for this project (persists via checkbox) */
+  setDefaultRuntimeMode: (mode: RuntimeMode) => void;
   setSshHost: (host: string) => void;
   setTrunkBranch: (branch: string) => void;
   getRuntimeString: () => string | undefined;
@@ -73,6 +79,18 @@ export function useDraftWorkspaceSettings(
     { listener: true }
   );
 
+  // Parse default runtime string into mode (worktree when undefined)
+  const { mode: defaultRuntimeMode } = parseRuntimeModeAndHost(defaultRuntimeString);
+
+  // Currently selected runtime mode for this session (initialized from default)
+  // This allows user to select a different runtime without changing the default
+  const [selectedRuntimeMode, setSelectedRuntimeMode] = useState<RuntimeMode>(defaultRuntimeMode);
+
+  // Sync selected mode when default changes (e.g., from checkbox or project switch)
+  useEffect(() => {
+    setSelectedRuntimeMode(defaultRuntimeMode);
+  }, [defaultRuntimeMode]);
+
   // Project-scoped trunk branch preference (persisted per project)
   const [trunkBranch, setTrunkBranch] = usePersistedState<string>(
     getTrunkBranchKey(projectPath),
@@ -88,10 +106,6 @@ export function useDraftWorkspaceSettings(
     { listener: true }
   );
 
-  // Parse default runtime string into mode (worktree when undefined)
-  // SSH host is stored separately so it persists across mode switches
-  const { mode: runtimeMode } = parseRuntimeModeAndHost(defaultRuntimeString);
-
   // Initialize trunk branch from backend recommendation or first branch
   useEffect(() => {
     if (!trunkBranch && branches.length > 0) {
@@ -100,32 +114,41 @@ export function useDraftWorkspaceSettings(
     }
   }, [branches, recommendedTrunk, trunkBranch, setTrunkBranch]);
 
-  // Setter for default runtime mode (only way to change is via checkbox)
+  // Setter for selected runtime mode (changes current selection, does not persist)
   const setRuntimeMode = (newMode: RuntimeMode) => {
+    setSelectedRuntimeMode(newMode);
+  };
+
+  // Setter for default runtime mode (persists via checkbox in tooltip)
+  const setDefaultRuntimeMode = (newMode: RuntimeMode) => {
     const newRuntimeString = buildRuntimeString(newMode, lastSshHost);
     setDefaultRuntimeString(newRuntimeString);
+    // Also update selection to match new default
+    setSelectedRuntimeMode(newMode);
   };
 
   // Setter for SSH host (persisted separately so it's remembered across mode switches)
   const setSshHost = (newHost: string) => {
     setLastSshHost(newHost);
   };
 
-  // Helper to get runtime string for IPC calls
+  // Helper to get runtime string for IPC calls (uses selected mode, not default)
   const getRuntimeString = (): string | undefined => {
-    return buildRuntimeString(runtimeMode, lastSshHost);
+    return buildRuntimeString(selectedRuntimeMode, lastSshHost);
   };
 
   return {
     settings: {
       model,
       thinkingLevel,
       mode,
-      runtimeMode,
+      runtimeMode: selectedRuntimeMode,
+      defaultRuntimeMode,
       sshHost: lastSshHost,
       trunkBranch,
     },
     setRuntimeMode,
+    setDefaultRuntimeMode,
     setSshHost,
     setTrunkBranch,
     getRuntimeString,
