feat: new workspace screen with sticky search combobox design

- Replace workspace setup dialog with full-screen new workspace route
- Restyle Combobox SearchInput to match CombinedModelSelector Level 2 design:
  borderless sticky search bar above scroll area instead of inline bordered box
- CombinedModelSelector now uses shared SearchInput, removing duplicate ProviderSearchInput
- Fix TooltipTrigger children type to accept render functions (remove PropsWithChildren wrapper)
- Fix empty rightControls View causing gap between dictation and send buttons
- Add branch picker with searchable Combobox and GitBranch icons
- Muted icon buttons (attachment, dictation, voice mode) that brighten on hover

packages/app/src/components/combined-model-selector.tsx

@@ -2,13 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   View,
   Text,
-  TextInput,
   Pressable,
   Platform,
   ActivityIndicator,
   type GestureResponderEvent,
 } from "react-native";
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
   ArrowLeft,
@@ -24,7 +22,7 @@ import type {
 import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
 const IS_WEB = Platform.OS === "web";
 
-import { Combobox, ComboboxItem } from "@/components/ui/combobox";
+import { Combobox, ComboboxItem, SearchInput } from "@/components/ui/combobox";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { getProviderIcon } from "@/components/provider-icons";
 import type { FavoriteModelRow } from "@/hooks/use-form-preferences";
@@ -347,45 +345,6 @@ function GroupedProviderRows({
   );
 }
 
-function ProviderSearchInput({
-  value,
-  onChangeText,
-  autoFocus = false,
-}: {
-  value: string;
-  onChangeText: (text: string) => void;
-  autoFocus?: boolean;
-}) {
-  const { theme } = useUnistyles();
-  const inputRef = useRef<TextInput>(null);
-  const InputComponent = Platform.OS === "web" ? TextInput : BottomSheetTextInput;
-
-  useEffect(() => {
-    if (autoFocus && Platform.OS === "web" && inputRef.current) {
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [autoFocus]);
-
-  return (
-    <View style={styles.providerSearchContainer}>
-      <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-      <InputComponent
-        ref={inputRef as any}
-        // @ts-expect-error - outlineStyle is web-only
-        style={[styles.providerSearchInput, Platform.OS === "web" && { outlineStyle: "none" }]}
-        placeholder="Search models..."
-        placeholderTextColor={theme.colors.foregroundMuted}
-        value={value}
-        onChangeText={onChangeText}
-        autoCapitalize="none"
-        autoCorrect={false}
-      />
-    </View>
-  );
-}
 
 function SelectorContent({
   view,
@@ -674,7 +633,8 @@ export function CombinedModelSelector({
                   }}
                 />
               ) : null}
-              <ProviderSearchInput
+              <SearchInput
+                placeholder="Search models..."
                 value={searchQuery}
                 onChangeText={setSearchQuery}
                 autoFocus={Platform.OS === "web"}
@@ -793,9 +753,6 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
   },
   level2Header: {
-    backgroundColor: theme.colors.surface1,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border,
   },
   backButton: {
     flexDirection: "row",
@@ -853,17 +810,4 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
   },
-  providerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.spacing[3],
-    gap: theme.spacing[2],
-    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
-  },
-  providerSearchInput: {
-    flex: 1,
-    paddingVertical: theme.spacing[3],
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
 }));

packages/app/src/components/composer.tsx

@@ -610,40 +610,44 @@ export function Composer({
         </Tooltip>
     ) : null;
 
-  const rightContent = (
-    <View style={styles.rightControls}>
-      {!isVoiceModeForAgent && hasAgent ? (
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-          <TooltipTrigger
-            onPress={handleToggleRealtimeVoice}
-            disabled={!isConnected || voice?.isVoiceSwitching}
-            accessibilityLabel="Enable Voice mode"
-            accessibilityRole="button"
-            style={({ hovered }) => [
-              styles.realtimeVoiceButton as any,
-              (hovered ? styles.iconButtonHovered : undefined) as any,
-              (!isConnected || voice?.isVoiceSwitching ? styles.buttonDisabled : undefined) as any,
-            ]}
-          >
-            {voice?.isVoiceSwitching ? (
-              <ActivityIndicator size="small" color="white" />
-            ) : (
-              <AudioLines size={buttonIconSize} color={theme.colors.foreground} />
-            )}
-          </TooltipTrigger>
-          <TooltipContent side="top" align="center" offset={8}>
-            <View style={styles.tooltipRow}>
-              <Text style={styles.tooltipText}>Voice mode</Text>
-              {voiceToggleKeys ? (
-                <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
-              ) : null}
-            </View>
-          </TooltipContent>
-        </Tooltip>
-      ) : null}
-      {cancelButton}
-    </View>
-  );
+  const showVoiceModeButton = !isVoiceModeForAgent && hasAgent;
+  const rightContent =
+    showVoiceModeButton || cancelButton ? (
+      <View style={styles.rightControls}>
+        {showVoiceModeButton ? (
+          <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+            <TooltipTrigger
+              onPress={handleToggleRealtimeVoice}
+              disabled={!isConnected || voice?.isVoiceSwitching}
+              accessibilityLabel="Enable Voice mode"
+              accessibilityRole="button"
+              style={({ hovered }) => [
+                styles.realtimeVoiceButton as any,
+                (hovered ? styles.iconButtonHovered : undefined) as any,
+                (!isConnected || voice?.isVoiceSwitching ? styles.buttonDisabled : undefined) as any,
+              ]}
+            >
+              {({ hovered }) =>
+                voice?.isVoiceSwitching ? (
+                  <ActivityIndicator size="small" color="white" />
+                ) : (
+                  <AudioLines size={buttonIconSize} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
+                )
+              }
+            </TooltipTrigger>
+            <TooltipContent side="top" align="center" offset={8}>
+              <View style={styles.tooltipRow}>
+                <Text style={styles.tooltipText}>Voice mode</Text>
+                {voiceToggleKeys ? (
+                  <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
+                ) : null}
+              </View>
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+        {cancelButton}
+      </View>
+    ) : null;
 
   const leftContent =
     resolveStatusControlMode(statusControls) === "draft" && statusControls ? (

packages/app/src/components/message-input.tsx

@@ -111,9 +111,11 @@ export interface MessageInputRef {
   getNativeElement?: () => HTMLElement | null;
 }
 
-const MIN_INPUT_HEIGHT = 30;
+const MIN_INPUT_HEIGHT_MOBILE = 30;
+const MIN_INPUT_HEIGHT_DESKTOP = 46;
 const MAX_INPUT_HEIGHT = 160;
 const IS_WEB = Platform.OS === "web";
+const MIN_INPUT_HEIGHT = IS_WEB ? MIN_INPUT_HEIGHT_DESKTOP : MIN_INPUT_HEIGHT_MOBILE;
 
 type WebTextInputKeyPressEvent = NativeSyntheticEvent<
   TextInputKeyPressEventData & {
@@ -1007,7 +1009,9 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                       (!isConnected || disabled) && styles.buttonDisabled,
                     ]}
                   >
-                    <Paperclip size={buttonIconSize} color={theme.colors.foreground} />
+                    {({ hovered }) => (
+                      <Paperclip size={buttonIconSize} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
+                    )}
                   </Pressable>
                 </TooltipTrigger>
                 <TooltipContent side="top" align="center" offset={8}>
@@ -1041,13 +1045,15 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                   isDictating && styles.voiceButtonRecording,
                 ]}
               >
-                {isDictating ? (
-                  <Square size={buttonIconSize} color="white" fill="white" />
-                ) : isRealtimeVoiceForCurrentAgent && voice?.isMuted ? (
-                  <MicOff size={buttonIconSize} color={theme.colors.foreground} />
-                ) : (
-                  <Mic size={buttonIconSize} color={theme.colors.foreground} />
-                )}
+                {({ hovered }) =>
+                  isDictating ? (
+                    <Square size={buttonIconSize} color="white" fill="white" />
+                  ) : isRealtimeVoiceForCurrentAgent && voice?.isMuted ? (
+                    <MicOff size={buttonIconSize} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
+                  ) : (
+                    <Mic size={buttonIconSize} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
+                  )
+                }
               </TooltipTrigger>
               <TooltipContent side="top" align="center" offset={8}>
                 <View style={styles.tooltipRow}>
@@ -1249,6 +1255,7 @@ const styles = StyleSheet.create(((theme: any) => ({
     flexDirection: "row",
     alignItems: "flex-end",
     justifyContent: "space-between",
+    marginHorizontal: -6,
   },
   leftButtonGroup: {
     flexDirection: "row",

packages/app/src/components/sidebar-workspace-list.tsx

@@ -47,7 +47,7 @@ import type { DraggableListDragHandleProps } from "./draggable-list.types";
 import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runtime";
 import { getIsElectronRuntime, isCompactFormFactor } from "@/constants/layout";
 import { projectIconQueryKey } from "@/hooks/use-project-icon-query";
-import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
+import { buildHostNewWorkspaceRoute, parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import {
   type SidebarProjectEntry,
@@ -87,7 +87,6 @@ import { type PrHint, useWorkspacePrHint } from "@/hooks/use-checkout-pr-status-
 import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
 import { useNavigationActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
 import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
-import { useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
 import { buildWorkspaceArchiveRedirectRoute } from "@/utils/workspace-archive-navigation";
 import { openExternalUrl } from "@/utils/open-external-url";
 import {
@@ -721,20 +720,13 @@ function ProjectHeaderRow({
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
   const isMobileBreakpoint = isCompactFormFactor();
-  const beginWorkspaceSetup = useWorkspaceSetupStore((state) => state.beginWorkspaceSetup);
   const handleBeginWorkspaceSetup = useCallback(() => {
     if (!serverId) {
       return;
     }
-    beginWorkspaceSetup({
-      serverId,
-      sourceDirectory: project.iconWorkingDir,
-      displayName,
-      creationMethod: "create_worktree",
-      navigationMethod: "navigate",
-    });
+    router.navigate(buildHostNewWorkspaceRoute(serverId, project.iconWorkingDir, { displayName }) as any);
     onWorkspacePress?.();
-  }, [beginWorkspaceSetup, displayName, onWorkspacePress, project.iconWorkingDir, serverId]);
+  }, [displayName, onWorkspacePress, project.iconWorkingDir, serverId]);
 
   useKeyboardActionHandler({
     handlerId: `worktree-new-${project.projectKey}`,
@@ -1152,18 +1144,16 @@ function WorkspaceRowWithMenu({
         return;
       }
 
+      redirectAfterArchive();
+
       void archiveWorktree({
         serverId: workspace.serverId,
         cwd: workspaceDirectory,
         worktreePath: workspaceDirectory,
-      })
-        .then(() => {
-          redirectAfterArchive();
-        })
-        .catch((error) => {
-          const message = error instanceof Error ? error.message : "Failed to archive worktree";
-          toast.error(message);
-        });
+      }).catch((error) => {
+        const message = error instanceof Error ? error.message : "Failed to archive worktree";
+        toast.error(message);
+      });
     })();
   }, [
     archiveWorktree,
@@ -1200,17 +1190,20 @@ function WorkspaceRowWithMenu({
       }
 
       setIsArchivingWorkspace(true);
-      try {
-        const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
-        if (payload.error) {
-          throw new Error(payload.error);
+      redirectAfterArchive();
+
+      void (async () => {
+        try {
+          const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
+          if (payload.error) {
+            throw new Error(payload.error);
+          }
+        } catch (error) {
+          toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
+        } finally {
+          setIsArchivingWorkspace(false);
         }
-        redirectAfterArchive();
-      } catch (error) {
-        toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
-      } finally {
-        setIsArchivingWorkspace(false);
-      }
+      })();
     })();
   }, [
     isArchivingWorkspace,
@@ -1355,17 +1348,20 @@ function NonGitProjectRowWithMenuContent({
       }
 
       setIsArchivingWorkspace(true);
-      try {
-        const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
-        if (payload.error) {
-          throw new Error(payload.error);
+      redirectAfterArchive();
+
+      void (async () => {
+        try {
+          const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
+          if (payload.error) {
+            throw new Error(payload.error);
+          }
+        } catch (error) {
+          toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
+        } finally {
+          setIsArchivingWorkspace(false);
         }
-        redirectAfterArchive();
-      } catch (error) {
-        toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
-      } finally {
-        setIsArchivingWorkspace(false);
-      }
+      })();
     })();
   }, [
     isArchivingWorkspace,
@@ -1707,18 +1703,21 @@ function ProjectBlock({
       }
 
       setIsRemovingProject(true);
-      try {
-        for (const ws of project.workspaces) {
+
+      void Promise.allSettled(
+        project.workspaces.map(async (ws) => {
           const payload = await client.archiveWorkspace(Number(ws.workspaceId));
           if (payload.error) {
             throw new Error(payload.error);
           }
+        }),
+      ).then((results) => {
+        const failed = results.filter((r) => r.status === "rejected");
+        if (failed.length > 0) {
+          toast.error("Failed to remove some workspaces");
         }
-      } catch (error) {
-        toast.error(error instanceof Error ? error.message : "Failed to remove project");
-      } finally {
         setIsRemovingProject(false);
-      }
+      });
     })();
   }, [isRemovingProject, serverId, displayName, toast, project.workspaces]);
 

packages/app/src/components/ui/combobox.tsx

@@ -659,13 +659,7 @@ export function Combobox({
     </>
   );
 
-  const defaultContent = (
-    <>
-      {effectiveOptionsPosition === "above-search" ? optionsList : null}
-      {searchable ? searchInput : null}
-      {effectiveOptionsPosition === "below-search" ? optionsList : null}
-    </>
-  );
+  const defaultContent = optionsList;
 
   const content = children ?? defaultContent;
 
@@ -690,6 +684,7 @@ export function Combobox({
           <Text style={styles.comboboxTitle}>{title}</Text>
         </View>
         {stickyHeader}
+        {!children && searchable ? searchInput : null}
         <BottomSheetScrollView
           contentContainerStyle={styles.comboboxScrollContent}
           keyboardShouldPersistTaps="handled"
@@ -745,6 +740,7 @@ export function Combobox({
             </>
           ) : (
             <>
+              {searchable ? searchInput : null}
               {effectiveOptionsPosition === "above-search" ? (
                 <ScrollView
                   ref={desktopOptionsScrollRef}
@@ -759,9 +755,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
-              {searchable ? searchInput : null}
-              {effectiveOptionsPosition === "below-search" ? (
+              ) : (
                 <ScrollView
                   contentContainerStyle={styles.desktopScrollContent}
                   keyboardShouldPersistTaps="handled"
@@ -770,7 +764,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
+              )}
             </>
           )}
         </Animated.View>
@@ -783,15 +777,12 @@ const styles = StyleSheet.create((theme) => ({
   searchInputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface1,
-    borderRadius: theme.borderRadius.lg,
     paddingHorizontal: theme.spacing[3],
-    marginHorizontal: theme.spacing[2],
-    marginBottom: theme.spacing[2],
-    marginTop: theme.spacing[1],
     gap: theme.spacing[2],
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
   },
   searchInput: {
     flex: 1,

packages/app/src/components/ui/tooltip.tsx

@@ -246,12 +246,11 @@ export function TooltipTrigger({
   asChild = false,
   triggerRefProp = "ref",
   ...props
-}: PropsWithChildren<
-  PressableProps & {
+}: PressableProps & {
     asChild?: boolean;
     triggerRefProp?: string;
   }
->): ReactElement {
+): ReactElement {
   const ctx = useTooltipContext("TooltipTrigger");
   const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);