fix: First session nits (read desc) (#1626)

## Problem

Several small UI inconsistencies hurt the first-session experience, mismatched button styles, noisy placeholders and missing empty states.

I realized just how different everything on that task input page was, each dropdown looked different, there was different font sizes all over, it was kind of a learned behavior to just ignore how inconsistent the styling was there.

How many can you spot?!

Before:

![CleanShot 2026-04-13 at 13.11.17@2x.png](https://app.graphite.com/user-attachments/assets/47383e90-023b-4685-9d6c-110fd3d96412.png)

After:

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

## ![CleanShot 2026-04-13 at 13.10.38@2x.png](https://app.graphite.com/user-attachments/assets/33168da0-aaba-4155-ad08-070e11bd2acb.png)



## Changes

1. Prevent text selection when clicking the mode indicator
2. Standardize task input placeholders and contextual hints
3. Reduce max prompt history from 50 to 15
4. Match branch selector and dropdown triggers to consistent outline style
5. Add empty state to the task list sidebar
6. Remove unused ComboboxTriggerVariant type

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

Manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

Author: charlesvien

apps/code/src/renderer/components/ui/combobox/Combobox.css

@@ -381,7 +381,7 @@
 
 .combobox-trigger.size-1 {
   height: var(--space-5);
-  gap: var(--space-1);
+  gap: var(--space-2);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -586,7 +586,7 @@
 }
 
 .combobox-trigger.variant-outline {
-  color: var(--gray-11);
+  color: var(--gray-12);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--gray-a7);
 }
@@ -609,7 +609,7 @@
 }
 
 .combobox-trigger.variant-outline .combobox-trigger-icon {
-  color: var(--gray-11);
+  color: var(--gray-12);
 }
 
 .combobox-trigger:disabled .combobox-trigger-icon {

apps/code/src/renderer/components/ui/combobox/Combobox.tsx

@@ -1,5 +1,7 @@
-import { CaretDown, Check, MagnifyingGlass } from "@phosphor-icons/react";
-import { Popover } from "@radix-ui/themes";
+import { Check, MagnifyingGlass } from "@phosphor-icons/react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { Button, Flex, Popover } from "@radix-ui/themes";
+import type { Responsive } from "@radix-ui/themes/dist/esm/props/prop-def.js";
 import { Command as CmdkCommand } from "cmdk";
 import React, {
   createContext,
@@ -15,12 +17,6 @@ import "./Combobox.css";
 import { useComboboxFilter } from "./useComboboxFilter";
 
 type ComboboxSize = "1" | "2" | "3";
-type ComboboxTriggerVariant =
-  | "classic"
-  | "surface"
-  | "soft"
-  | "ghost"
-  | "outline";
 type ComboboxContentVariant = "solid" | "soft";
 
 interface ComboboxContextValue {
@@ -150,7 +146,7 @@ function ComboboxRoot({
 interface ComboboxTriggerProps {
   children?: React.ReactNode;
   className?: string;
-  variant?: ComboboxTriggerVariant;
+  variant?: "outline" | "ghost" | "surface" | "soft" | "classic";
   color?: string;
   placeholder?: string;
   style?: React.CSSProperties;
@@ -159,33 +155,33 @@ interface ComboboxTriggerProps {
 function ComboboxTrigger({
   children,
   className = "",
-  variant = "surface",
+  variant = "outline",
   placeholder = "Select...",
   style,
 }: ComboboxTriggerProps) {
   const { size, value, open, disabled, getItemLabel } = useComboboxContext();
 
   const displayValue =
     children ?? (getItemLabel(value) || value || placeholder);
-  const hasPlaceholder = !children && !value;
 
   return (
     <Popover.Trigger>
-      <button
-        type="button"
-        className={`combobox-trigger size-${size} variant-${variant} ${className}`}
-        data-state={open ? "open" : "closed"}
-        data-placeholder={hasPlaceholder ? "" : undefined}
+      <Button
+        color="gray"
+        variant={variant}
+        size={size as Responsive<"1" | "2" | "3">}
         disabled={disabled}
+        className={className}
+        data-state={open ? "open" : "closed"}
         style={style}
       >
-        <span className="combobox-trigger-inner">{displayValue}</span>
-        {!disabled && (
-          <span className="combobox-trigger-icon">
-            <CaretDown weight="bold" />
-          </span>
-        )}
-      </button>
+        <Flex justify="between" align="center" gap="2">
+          <Flex align="center" gap="2" style={{ minWidth: 0 }}>
+            {displayValue}
+          </Flex>
+          {!disabled && <ChevronDownIcon style={{ flexShrink: 0 }} />}
+        </Flex>
+      </Button>
     </Popover.Trigger>
   );
 }

apps/code/src/renderer/features/command-center/components/CommandCenterToolbar.tsx

@@ -118,7 +118,7 @@ export function CommandCenterToolbar({
       gap="3"
       px="3"
       py="2"
-      className="shrink-0 border-gray-6 border-b"
+      className="no-drag shrink-0 border-gray-6 border-b"
     >
       <Select.Root
         value={layout}

apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx

@@ -122,7 +122,7 @@ export function BranchSelector({
     effectiveLoading || (isCloudMode && open && cloudBranchesFetchingMore);
 
   const triggerContent = (
-    <Flex align="center" gap="1" style={{ minWidth: 0 }}>
+    <Flex align="center" gap="2" style={{ minWidth: 0 }}>
       {showSpinner ? (
         <Spinner size="1" />
       ) : (

apps/code/src/renderer/features/message-editor/components/ModeIndicatorInput.tsx

@@ -90,8 +90,10 @@ export function ModeIndicatorInput({
     <Flex
       align="center"
       justify="between"
-      py="1"
-      style={onCycleMode ? { cursor: "pointer" } : undefined}
+      py="0"
+      style={
+        onCycleMode ? { cursor: "pointer", userSelect: "none" } : undefined
+      }
       onClick={onCycleMode}
     >
       <Flex align="center" gap="1">

apps/code/src/renderer/features/message-editor/components/message-editor.css

@@ -1,7 +1,7 @@
 /* Tiptap placeholder - targets empty first paragraph */
 .cli-editor p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
-  color: var(--gray-11);
+  color: var(--gray-8);
   pointer-events: none;
   float: left;
   height: 0;

apps/code/src/renderer/features/message-editor/stores/taskInputHistoryStore.ts

@@ -11,7 +11,7 @@ interface TaskInputHistoryActions {
 
 type TaskInputHistoryStore = TaskInputHistoryState & TaskInputHistoryActions;
 
-const MAX_HISTORY = 50;
+const MAX_HISTORY = 15;
 
 export const useTaskInputHistoryStore = create<TaskInputHistoryStore>()(
   persist(

apps/code/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -39,7 +39,7 @@ export interface UseTiptapEditorOptions {
 }
 
 const EDITOR_CLASS =
-  "cli-editor min-h-[1.5em] w-full break-words border-none bg-transparent pr-2 text-[13px] text-[var(--gray-12)] outline-none [overflow-wrap:break-word] [white-space:pre-wrap] [word-break:break-word]";
+  "cli-editor min-h-[1.5em] w-full break-words border-none bg-transparent pr-2 text-[14px] text-[var(--gray-12)] outline-none [overflow-wrap:break-word] [white-space:pre-wrap] [word-break:break-word]";
 
 async function pasteTextAsFile(
   view: EditorView,

apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx

@@ -1,6 +1,6 @@
 import type { SessionConfigOption } from "@agentclientprotocol/sdk";
-import { Brain } from "@phosphor-icons/react";
-import { Flex, Select, Text } from "@radix-ui/themes";
+import { Brain, CaretDown, Check } from "@phosphor-icons/react";
+import { Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import { flattenSelectOptions } from "../stores/sessionStore";
 
 interface ReasoningLevelSelectorProps {
@@ -10,6 +10,16 @@ interface ReasoningLevelSelectorProps {
   disabled?: boolean;
 }
 
+const triggerStyle = {
+  fontSize: "var(--font-size-1)",
+  color: "var(--gray-11)",
+  padding: "4px 8px",
+  height: "auto",
+  minHeight: "unset",
+  gap: "6px",
+  userSelect: "none" as const,
+};
+
 export function ReasoningLevelSelector({
   thoughtOption,
   adapter,
@@ -27,25 +37,9 @@ export function ReasoningLevelSelector({
     options.find((opt) => opt.value === activeLevel)?.name ?? activeLevel;
 
   return (
-    <Select.Root
-      value={activeLevel}
-      onValueChange={(value) => onChange?.(value)}
-      disabled={disabled}
-      size="1"
-    >
-      <Select.Trigger
-        variant="ghost"
-        style={{
-          fontSize: "var(--font-size-1)",
-          color: "var(--gray-11)",
-          padding: "4px 8px",
-          marginLeft: "4px",
-          height: "auto",
-          minHeight: "unset",
-          gap: "6px",
-        }}
-      >
-        <Flex align="center" gap="1">
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger disabled={disabled}>
+        <Button variant="ghost" color="gray" size="1" style={triggerStyle}>
           <Brain
             size={14}
             weight="regular"
@@ -54,15 +48,34 @@ export function ReasoningLevelSelector({
           <Text size="1">
             {adapter === "codex" ? "Reasoning" : "Effort"}: {activeLabel}
           </Text>
-        </Flex>
-      </Select.Trigger>
-      <Select.Content position="popper" sideOffset={4}>
+          <CaretDown
+            size={10}
+            weight="bold"
+            style={{ color: "var(--gray-9)", flexShrink: 0 }}
+          />
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content align="start" sideOffset={4} size="1">
         {options.map((level) => (
-          <Select.Item key={level.value} value={level.value}>
-            {level.name}
-          </Select.Item>
+          <DropdownMenu.Item
+            key={level.value}
+            onSelect={() => onChange?.(level.value)}
+          >
+            <Flex align="center" gap="2" style={{ minWidth: "100px" }}>
+              <Check
+                size={12}
+                weight="bold"
+                style={{
+                  flexShrink: 0,
+                  opacity: level.value === activeLevel ? 1 : 0,
+                }}
+              />
+              <Text size="1">{level.name}</Text>
+            </Flex>
+          </DropdownMenu.Item>
         ))}
-      </Select.Content>
-    </Select.Root>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 }

apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx

@@ -5,6 +5,7 @@ import type {
 import type { AgentAdapter } from "@features/settings/stores/settingsStore";
 import {
   ArrowsClockwise,
+  CaretDown,
   Check,
   Cpu,
   Robot,
@@ -71,10 +72,10 @@ export function UnifiedModelSelector({
     fontSize: "var(--font-size-1)",
     color: "var(--gray-11)",
     padding: "4px 8px",
-    marginLeft: "4px",
     height: "auto",
     minHeight: "unset",
     gap: "6px",
+    userSelect: "none" as const,
   };
 
   if (isConnecting) {
@@ -123,6 +124,11 @@ export function UnifiedModelSelector({
             {ADAPTER_ICONS[adapter]}
           </Flex>
           <Text size="1">{currentLabel ?? "Model"}</Text>
+          <CaretDown
+            size={10}
+            weight="bold"
+            style={{ color: "var(--gray-9)", flexShrink: 0 }}
+          />
         </Button>
       </DropdownMenu.Trigger>