From 64fe5a921d6d4a5ee8aa048d431b5aa03e736030 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 18:16:14 -0700
Subject: [PATCH 1/9] feat(web): make the sidebar project filter a searchable
 combobox

---
 apps/web/src/components/Sidebar.tsx | 186 +++++++++++++++++-----------
 1 file changed, 116 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 63681a54813a..53592cd8d677 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -177,7 +177,14 @@ import { useThreadRunningTerminalIds } from "../state/terminalSessions";
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
-import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+} from "./ui/combobox";
 import { SidebarContent, SidebarGroup, SidebarMenuButton, useSidebar } from "./ui/sidebar";
 import { SidebarChromeFooter, SidebarChromeHeader } from "./sidebar/SidebarChrome";
 import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
@@ -1941,6 +1948,31 @@ export default function Sidebar() {
   // Project scope: one menu above the list. Scoping filters the list without
   // making the header width depend on the number or length of project names.
   const [projectScopeKey, setProjectScopeKey] = useState<string | null>(null);
+  // {value, label} items let Base UI drive the whole combobox contract: the
+  // input displays the selection's label and typing filters against it.
+  const projectScopeItems = useMemo(
+    () => [
+      { value: "all", label: "All projects" },
+      ...projectGroups.map((project) => ({
+        value: project.projectKey,
+        label: project.displayName,
+      })),
+    ],
+    [projectGroups],
+  );
+  const projectGroupByScopeKey = useMemo(
+    () => new Map(projectGroups.map((project) => [project.projectKey, project] as const)),
+    [projectGroups],
+  );
+  const selectedProjectScopeItem = useMemo(
+    () =>
+      projectScopeItems.find((item) => item.value === (projectScopeKey ?? "all")) ??
+      projectScopeItems[0]!,
+    [projectScopeItems, projectScopeKey],
+  );
+  // Popup anchor: the whole row, not the inner input element, so the list
+  // lines up with the control the user sees.
+  const projectScopeAnchorRef = useRef<HTMLDivElement | null>(null);
   const scopedProjectGroup = useMemo(
     () =>
       projectScopeKey === null
@@ -3490,80 +3522,94 @@ export default function Sidebar() {
             </div>
             {projectGroups.length > 0 ? (
               <div className="flex items-center gap-1">
-                <Menu open={projectScopeMenuOpen} onOpenChange={setProjectScopeMenuOpen}>
-                  <MenuTrigger
-                    render={
-                      <SidebarMenuButton
-                        aria-label="Filter threads by project"
-                        className="min-w-0 flex-1 ps-[calc(var(--sidebar-row-content-inset)-1px)] focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar"
-                      />
-                    }
+                <Combobox
+                  items={projectScopeItems}
+                  autoHighlight
+                  openOnInputClick
+                  itemToStringLabel={(item) => item.label}
+                  isItemEqualToValue={(a, b) => a.value === b.value}
+                  open={projectScopeMenuOpen}
+                  onOpenChange={setProjectScopeMenuOpen}
+                  value={selectedProjectScopeItem}
+                  onValueChange={(item) => {
+                    if (!item) return;
+                    setProjectScopeKey(item.value === "all" ? null : item.value);
+                  }}
+                >
+                  <div
+                    ref={projectScopeAnchorRef}
+                    className="min-w-0 flex-1 rounded-md transition-colors hover:bg-sidebar-row-hover has-[input:focus-visible]:bg-sidebar-row-hover"
                   >
-                    {scopedProjectGroup ? (
-                      <ProjectFavicon
-                        environmentId={scopedProjectGroup.environmentId}
-                        cwd={scopedProjectGroup.workspaceRoot}
-                        faviconPath={scopedProjectGroup.faviconPath}
-                        className="size-4 shrink-0"
-                      />
-                    ) : (
-                      <FolderIcon className="size-4 shrink-0" />
-                    )}
-                    <span className="min-w-0 flex-1 truncate">
-                      {scopedProjectGroup?.displayName ?? "All projects"}
-                    </span>
-                    <ChevronDownIcon className="-mr-px size-4 shrink-0" />
-                  </MenuTrigger>
-                  <MenuPopup align="start" className="w-(--anchor-width)">
-                    <MenuRadioGroup
-                      value={projectScopeKey ?? "all"}
-                      onValueChange={(value) =>
-                        setProjectScopeKey(value === "all" ? null : (value as string))
+                    <ComboboxInput
+                      aria-label="Filter threads by project"
+                      placeholder="Search projects..."
+                      size="sm"
+                      unstyled
+                      startAddon={
+                        scopedProjectGroup ? (
+                          <ProjectFavicon
+                            environmentId={scopedProjectGroup.environmentId}
+                            cwd={scopedProjectGroup.workspaceRoot}
+                            faviconPath={scopedProjectGroup.faviconPath}
+                            className="size-4 shrink-0"
+                          />
+                        ) : (
+                          <FolderIcon className="size-4 shrink-0 text-sidebar-foreground" />
+                        )
                       }
-                    >
-                      <MenuRadioItem
-                        value="all"
-                        closeOnClick
-                        className="h-8 min-h-8 py-0 text-sm font-medium [&>span:last-child]:flex [&>span:last-child]:min-w-0 [&>span:last-child]:items-center [&>span:last-child]:gap-2"
-                      >
-                        <FolderIcon className="size-4 shrink-0" />
-                        <span className="min-w-0 truncate text-sm">All projects</span>
-                      </MenuRadioItem>
-                      {projectGroups.map((project) => {
-                        const scopeKey = project.projectKey;
+                      className="w-full [&_input]:ps-9!"
+                      inputClassName="h-8 w-full rounded-md bg-transparent text-sm font-medium text-sidebar-foreground selection:bg-primary selection:text-primary-foreground placeholder:text-sidebar-muted-foreground"
+                    />
+                  </div>
+                  <ComboboxPopup
+                    align="start"
+                    anchor={projectScopeAnchorRef}
+                    className="w-(--anchor-width)"
+                  >
+                    <ComboboxEmpty>No matching projects.</ComboboxEmpty>
+                    <ComboboxList className="max-h-72">
+                      {(item: (typeof projectScopeItems)[number]) => {
+                        const project = projectGroupByScopeKey.get(item.value) ?? null;
                         return (
-                          <MenuRadioItem
-                            key={scopeKey}
-                            value={scopeKey}
-                            closeOnClick
-                            className="h-8 min-h-8 py-0 text-sm font-medium [&>span:last-child]:flex [&>span:last-child]:min-w-0 [&>span:last-child]:items-center [&>span:last-child]:gap-2"
+                          <ComboboxItem
+                            key={item.value}
+                            hideIndicator
+                            value={item}
+                            className="h-8 min-h-8 py-0 font-medium"
+                            contentClassName="flex min-w-0 items-center gap-2"
                           >
-                            <ProjectFavicon
-                              environmentId={project.environmentId}
-                              cwd={project.workspaceRoot}
-                              faviconPath={project.faviconPath}
-                              className="size-4 shrink-0"
-                            />
-                            <span className="min-w-0 truncate text-sm">{project.displayName}</span>
-                            <Button
-                              size="icon-xs"
-                              variant="ghost-muted"
-                              aria-label={`Project settings for ${project.displayName}`}
-                              title={`Project settings for ${project.displayName}`}
-                              className="ml-auto size-6 [--control-icon-color:currentColor] text-icon-muted focus-visible:bg-accent focus-visible:text-foreground"
-                              onPointerDown={(event) => event.stopPropagation()}
-                              onClick={(event) => {
-                                void handleProjectSettings(event, project);
-                              }}
-                            >
-                              <SettingsIcon className="size-3.5" />
-                            </Button>
-                          </MenuRadioItem>
+                            {project ? (
+                              <ProjectFavicon
+                                environmentId={project.environmentId}
+                                cwd={project.workspaceRoot}
+                                faviconPath={project.faviconPath}
+                                className="size-4 shrink-0"
+                              />
+                            ) : (
+                              <FolderIcon className="size-4 shrink-0" />
+                            )}
+                            <span className="min-w-0 flex-1 truncate text-sm">{item.label}</span>
+                            {project ? (
+                              <Button
+                                size="icon-xs"
+                                variant="ghost-muted"
+                                aria-label={`Project settings for ${project.displayName}`}
+                                title={`Project settings for ${project.displayName}`}
+                                className="ml-auto size-6 [--control-icon-color:currentColor] text-icon-muted focus-visible:bg-accent focus-visible:text-foreground"
+                                onPointerDown={(event) => event.stopPropagation()}
+                                onClick={(event) => {
+                                  void handleProjectSettings(event, project);
+                                }}
+                              >
+                                <SettingsIcon className="size-3.5" />
+                              </Button>
+                            ) : null}
+                          </ComboboxItem>
                         );
-                      })}
-                    </MenuRadioGroup>
-                  </MenuPopup>
-                </Menu>
+                      }}
+                    </ComboboxList>
+                  </ComboboxPopup>
+                </Combobox>
                 <Tooltip>
                   <TooltipTrigger
                     render={

From d64c88c023c35385de40a876bc36e66fb7851e8b Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 19:04:40 -0700
Subject: [PATCH 2/9] fix(web): hide the All projects reset row while filtering

---
 apps/web/src/components/Sidebar.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 53592cd8d677..7ccd8a5f52ca 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -184,6 +184,7 @@ import {
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
+  useComboboxFilter,
 } from "./ui/combobox";
 import { SidebarContent, SidebarGroup, SidebarMenuButton, useSidebar } from "./ui/sidebar";
 import { SidebarChromeFooter, SidebarChromeHeader } from "./sidebar/SidebarChrome";
@@ -1973,6 +1974,7 @@ export default function Sidebar() {
   // Popup anchor: the whole row, not the inner input element, so the list
   // lines up with the control the user sees.
   const projectScopeAnchorRef = useRef<HTMLDivElement | null>(null);
+  const projectScopeFilter = useComboboxFilter();
   const scopedProjectGroup = useMemo(
     () =>
       projectScopeKey === null
@@ -3526,6 +3528,16 @@ export default function Sidebar() {
                   items={projectScopeItems}
                   autoHighlight
                   openOnInputClick
+                  // "All projects" is a scope reset, not a searchable entry:
+                  // hide it while filtering so it can't outrank a project
+                  // match under autoHighlight, and so no-hit queries reach
+                  // the empty state. Same convention as DiffPanel's
+                  // "Automatic" row.
+                  filter={(item, query, itemToString) =>
+                    item.value === "all"
+                      ? query.trim().length === 0
+                      : projectScopeFilter.contains(item, query, itemToString)
+                  }
                   itemToStringLabel={(item) => item.label}
                   isItemEqualToValue={(a, b) => a.value === b.value}
                   open={projectScopeMenuOpen}

From 6ae13553241356369c77aeda60d918e2d3eb40b7 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 19:30:08 -0700
Subject: [PATCH 3/9] fix(web): match the project combobox size to the old menu
 trigger

---
 apps/web/src/components/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 7ccd8a5f52ca..79a019e54c9e 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -3569,7 +3569,7 @@ export default function Sidebar() {
                           <FolderIcon className="size-4 shrink-0 text-sidebar-foreground" />
                         )
                       }
-                      className="w-full [&_input]:ps-9!"
+                      className="w-full [&_input]:h-8 [&_input]:ps-9!"
                       inputClassName="h-8 w-full rounded-md bg-transparent text-sm font-medium text-sidebar-foreground selection:bg-primary selection:text-primary-foreground placeholder:text-sidebar-muted-foreground"
                     />
                   </div>
@@ -3579,7 +3579,7 @@ export default function Sidebar() {
                     className="w-(--anchor-width)"
                   >
                     <ComboboxEmpty>No matching projects.</ComboboxEmpty>
-                    <ComboboxList className="max-h-72">
+                    <ComboboxList>
                       {(item: (typeof projectScopeItems)[number]) => {
                         const project = projectGroupByScopeKey.get(item.value) ?? null;
                         return (

From b87f45a9ea395709ddf00eaa524d2f0606d63058 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 19:42:55 -0700
Subject: [PATCH 4/9] feat(web): move project search into the scope popup

---
 apps/web/src/components/Sidebar.tsx | 82 +++++++++++++++++------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 79a019e54c9e..2bc58e603943 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -184,6 +184,7 @@ import {
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
+  ComboboxTrigger,
   useComboboxFilter,
 } from "./ui/combobox";
 import { SidebarContent, SidebarGroup, SidebarMenuButton, useSidebar } from "./ui/sidebar";
@@ -1971,9 +1972,7 @@ export default function Sidebar() {
       projectScopeItems[0]!,
     [projectScopeItems, projectScopeKey],
   );
-  // Popup anchor: the whole row, not the inner input element, so the list
-  // lines up with the control the user sees.
-  const projectScopeAnchorRef = useRef<HTMLDivElement | null>(null);
+  const [projectScopeQuery, setProjectScopeQuery] = useState("");
   const projectScopeFilter = useComboboxFilter();
   const scopedProjectGroup = useMemo(
     () =>
@@ -3527,7 +3526,6 @@ export default function Sidebar() {
                 <Combobox
                   items={projectScopeItems}
                   autoHighlight
-                  openOnInputClick
                   // "All projects" is a scope reset, not a searchable entry:
                   // hide it while filtering so it can't outrank a project
                   // match under autoHighlight, and so no-hit queries reach
@@ -3541,43 +3539,59 @@ export default function Sidebar() {
                   itemToStringLabel={(item) => item.label}
                   isItemEqualToValue={(a, b) => a.value === b.value}
                   open={projectScopeMenuOpen}
-                  onOpenChange={setProjectScopeMenuOpen}
+                  onOpenChange={(open) => {
+                    setProjectScopeMenuOpen(open);
+                    if (!open) setProjectScopeQuery("");
+                  }}
                   value={selectedProjectScopeItem}
                   onValueChange={(item) => {
                     if (!item) return;
                     setProjectScopeKey(item.value === "all" ? null : item.value);
                   }}
                 >
-                  <div
-                    ref={projectScopeAnchorRef}
-                    className="min-w-0 flex-1 rounded-md transition-colors hover:bg-sidebar-row-hover has-[input:focus-visible]:bg-sidebar-row-hover"
-                  >
-                    <ComboboxInput
-                      aria-label="Filter threads by project"
-                      placeholder="Search projects..."
-                      size="sm"
-                      unstyled
-                      startAddon={
-                        scopedProjectGroup ? (
-                          <ProjectFavicon
-                            environmentId={scopedProjectGroup.environmentId}
-                            cwd={scopedProjectGroup.workspaceRoot}
-                            faviconPath={scopedProjectGroup.faviconPath}
-                            className="size-4 shrink-0"
-                          />
-                        ) : (
-                          <FolderIcon className="size-4 shrink-0 text-sidebar-foreground" />
-                        )
-                      }
-                      className="w-full [&_input]:h-8 [&_input]:ps-9!"
-                      inputClassName="h-8 w-full rounded-md bg-transparent text-sm font-medium text-sidebar-foreground selection:bg-primary selection:text-primary-foreground placeholder:text-sidebar-muted-foreground"
-                    />
-                  </div>
-                  <ComboboxPopup
-                    align="start"
-                    anchor={projectScopeAnchorRef}
-                    className="w-(--anchor-width)"
+                  <ComboboxTrigger
+                    render={
+                      <SidebarMenuButton
+                        aria-label="Filter threads by project"
+                        className="min-w-0 flex-1 ps-[calc(var(--sidebar-row-content-inset)-1px)] focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar"
+                      />
+                    }
                   >
+                    {scopedProjectGroup ? (
+                      <ProjectFavicon
+                        environmentId={scopedProjectGroup.environmentId}
+                        cwd={scopedProjectGroup.workspaceRoot}
+                        faviconPath={scopedProjectGroup.faviconPath}
+                        className="size-4 shrink-0"
+                      />
+                    ) : (
+                      <FolderIcon className="size-4 shrink-0" />
+                    )}
+                    <span className="min-w-0 flex-1 truncate">
+                      {scopedProjectGroup?.displayName ?? "All projects"}
+                    </span>
+                    <ChevronDownIcon className="-mr-px size-4 shrink-0" />
+                  </ComboboxTrigger>
+                  <ComboboxPopup align="start" className="w-(--anchor-width)">
+                    <div className="shrink-0 px-3 pt-2.5">
+                      <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
+                        <SearchIcon
+                          aria-hidden="true"
+                          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+                        />
+                        <ComboboxInput
+                          aria-label="Search projects"
+                          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+                          inputClassName="rounded-none bg-transparent text-sm"
+                          placeholder="Search projects..."
+                          showTrigger={false}
+                          size="sm"
+                          unstyled
+                          value={projectScopeQuery}
+                          onChange={(event) => setProjectScopeQuery(event.target.value)}
+                        />
+                      </div>
+                    </div>
                     <ComboboxEmpty>No matching projects.</ComboboxEmpty>
                     <ComboboxList>
                       {(item: (typeof projectScopeItems)[number]) => {

From c8462f86ed5a93c19a520ccd72dccc8f9fa9ccd1 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 19:56:08 -0700
Subject: [PATCH 5/9] fix(web): derive project scope filtering from the query
 state

---
 apps/web/src/components/Sidebar.tsx | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 2bc58e603943..5ab03d1392da 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1974,6 +1974,21 @@ export default function Sidebar() {
   );
   const [projectScopeQuery, setProjectScopeQuery] = useState("");
   const projectScopeFilter = useComboboxFilter();
+  // Filtering derives from the same React state that controls the input, so
+  // the visible query and the visible list can never desync — the peer wiring
+  // in DiffPanel and BranchToolbarBranchSelector. "All projects" is a scope
+  // reset, not a searchable entry: it only shows while the query is empty, so
+  // it can't outrank a project match under autoHighlight and no-hit queries
+  // reach the empty state.
+  const filteredProjectScopeItems = useMemo(() => {
+    const query = projectScopeQuery.trim();
+    if (query.length === 0) return projectScopeItems;
+    return projectScopeItems.filter(
+      (item) =>
+        item.value !== "all" &&
+        projectScopeFilter.contains(item, query, (candidate) => candidate.label),
+    );
+  }, [projectScopeFilter, projectScopeItems, projectScopeQuery]);
   const scopedProjectGroup = useMemo(
     () =>
       projectScopeKey === null
@@ -2033,7 +2048,10 @@ export default function Sidebar() {
     (event: ReactMouseEvent<HTMLButtonElement>, projectGroup: SidebarProjectSnapshot) => {
       event.preventDefault();
       event.stopPropagation();
+      // Programmatic close skips onOpenChange, so drop the query here too —
+      // a stale query must not survive into the next open.
       setProjectScopeMenuOpen(false);
+      setProjectScopeQuery("");
       if (isMobile) {
         setOpenMobile(false);
       }
@@ -3525,23 +3543,14 @@ export default function Sidebar() {
               <div className="flex items-center gap-1">
                 <Combobox
                   items={projectScopeItems}
+                  filteredItems={filteredProjectScopeItems}
                   autoHighlight
-                  // "All projects" is a scope reset, not a searchable entry:
-                  // hide it while filtering so it can't outrank a project
-                  // match under autoHighlight, and so no-hit queries reach
-                  // the empty state. Same convention as DiffPanel's
-                  // "Automatic" row.
-                  filter={(item, query, itemToString) =>
-                    item.value === "all"
-                      ? query.trim().length === 0
-                      : projectScopeFilter.contains(item, query, itemToString)
-                  }
                   itemToStringLabel={(item) => item.label}
                   isItemEqualToValue={(a, b) => a.value === b.value}
                   open={projectScopeMenuOpen}
                   onOpenChange={(open) => {
                     setProjectScopeMenuOpen(open);
-                    if (!open) setProjectScopeQuery("");
+                    setProjectScopeQuery("");
                   }}
                   value={selectedProjectScopeItem}
                   onValueChange={(item) => {

From a5bfbc1cfa98e57c6299de10a55571a519d9bb88 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 22:04:06 -0700
Subject: [PATCH 6/9] feat(web): only offer the All projects reset while a
 scope is active

---
 apps/web/src/components/Sidebar.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 5ab03d1392da..315d1079bb54 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1977,18 +1977,20 @@ export default function Sidebar() {
   // Filtering derives from the same React state that controls the input, so
   // the visible query and the visible list can never desync — the peer wiring
   // in DiffPanel and BranchToolbarBranchSelector. "All projects" is a scope
-  // reset, not a searchable entry: it only shows while the query is empty, so
-  // it can't outrank a project match under autoHighlight and no-hit queries
-  // reach the empty state.
+  // reset, not a searchable entry: it only shows while a project scope is
+  // active (there is something to reset) and the query is empty, so it can't
+  // outrank a project match under autoHighlight and no-hit queries reach the
+  // empty state.
   const filteredProjectScopeItems = useMemo(() => {
     const query = projectScopeQuery.trim();
-    if (query.length === 0) return projectScopeItems;
-    return projectScopeItems.filter(
-      (item) =>
-        item.value !== "all" &&
+    const projectItems = projectScopeItems.filter((item) => item.value !== "all");
+    if (query.length > 0) {
+      return projectItems.filter((item) =>
         projectScopeFilter.contains(item, query, (candidate) => candidate.label),
-    );
-  }, [projectScopeFilter, projectScopeItems, projectScopeQuery]);
+      );
+    }
+    return projectScopeKey === null ? projectItems : projectScopeItems;
+  }, [projectScopeFilter, projectScopeItems, projectScopeKey, projectScopeQuery]);
   const scopedProjectGroup = useMemo(
     () =>
       projectScopeKey === null

From dbcc43072bf373a534051515315724df799020d3 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 22:23:58 -0700
Subject: [PATCH 7/9] style(web): give the project search box a filled
 secondary background

---
 apps/web/src/components/Sidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 315d1079bb54..b1f81b8fb895 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -3584,16 +3584,16 @@ export default function Sidebar() {
                     <ChevronDownIcon className="-mr-px size-4 shrink-0" />
                   </ComboboxTrigger>
                   <ComboboxPopup align="start" className="w-(--anchor-width)">
-                    <div className="shrink-0 px-3 pt-2.5">
-                      <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
+                    <div className="shrink-0 px-2 pt-2 pb-1">
+                      <div className="relative">
                         <SearchIcon
                           aria-hidden="true"
-                          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+                          className="pointer-events-none absolute top-1/2 left-2.5 z-10 size-4 shrink-0 -translate-y-1/2 text-muted-foreground/55"
                         />
                         <ComboboxInput
                           aria-label="Search projects"
-                          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
-                          inputClassName="rounded-none bg-transparent text-sm"
+                          className="[&_input]:h-8 [&_input]:ps-8.5 [&_input]:font-sans"
+                          inputClassName="rounded-md bg-secondary text-sm"
                           placeholder="Search projects..."
                           showTrigger={false}
                           size="sm"

From 5460e30cc75a452329e1de2f55e16fb429c32a3e Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 9 Aug 2026 22:31:20 -0700
Subject: [PATCH 8/9] Revert "style(web): give the project search box a filled
 secondary background"

This reverts commit df0534ad768f1438f791981aacf5bf695dbc40f5.
---
 apps/web/src/components/Sidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index b1f81b8fb895..315d1079bb54 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -3584,16 +3584,16 @@ export default function Sidebar() {
                     <ChevronDownIcon className="-mr-px size-4 shrink-0" />
                   </ComboboxTrigger>
                   <ComboboxPopup align="start" className="w-(--anchor-width)">
-                    <div className="shrink-0 px-2 pt-2 pb-1">
-                      <div className="relative">
+                    <div className="shrink-0 px-3 pt-2.5">
+                      <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
                         <SearchIcon
                           aria-hidden="true"
-                          className="pointer-events-none absolute top-1/2 left-2.5 z-10 size-4 shrink-0 -translate-y-1/2 text-muted-foreground/55"
+                          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
                         />
                         <ComboboxInput
                           aria-label="Search projects"
-                          className="[&_input]:h-8 [&_input]:ps-8.5 [&_input]:font-sans"
-                          inputClassName="rounded-md bg-secondary text-sm"
+                          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+                          inputClassName="rounded-none bg-transparent text-sm"
                           placeholder="Search projects..."
                           showTrigger={false}
                           size="sm"

From 84c73476219ba20398a721427ca9782d6bb68ca6 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:29:40 -0400
Subject: [PATCH 9/9] test(web): cover project scope combobox behavior

---
 apps/web/src/components/Sidebar.logic.test.ts | 65 +++++++++++++++++++
 apps/web/src/components/Sidebar.logic.ts      | 38 +++++++++++
 apps/web/src/components/Sidebar.tsx           | 53 ++++++++-------
 3 files changed, 133 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 1348e6561049..9d1eb6bcd196 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -6,9 +6,11 @@ import {
   buildBulkTitleRegenerationContextMenuItem,
   buildMultiSelectThreadContextMenuItems,
   createThreadJumpHintVisibilityController,
+  filterSidebarProjectScopeItems,
   getSidebarThreadIdsToPrewarm,
   getVisibleSidebarThreadIds,
   resolveAdjacentThreadId,
+  reduceSidebarProjectScopeMenuState,
   getFallbackThreadIdAfterDelete,
   getVisibleThreadsForProject,
   getProjectSortTimestamp,
@@ -783,6 +785,69 @@ describe("searchSidebarThreadsByTitle", () => {
   });
 });
 
+describe("filterSidebarProjectScopeItems", () => {
+  const items = [
+    { value: "all", label: "All projects" },
+    { value: "alpha", label: "Alpha workspace" },
+    { value: "beta", label: "Beta tools" },
+  ] as const;
+  const filter = (activeScopeKey: string | null, query: string) =>
+    filterSidebarProjectScopeItems({
+      items,
+      activeScopeKey,
+      query,
+      matches: (item, candidate) =>
+        item.label.toLocaleLowerCase().includes(candidate.toLocaleLowerCase()),
+    });
+
+  it("omits the reset row when the sidebar is already unscoped", () => {
+    expect(filter(null, "")).toEqual(items.slice(1));
+  });
+
+  it("shows the reset row first while a project scope is active", () => {
+    expect(filter("alpha", "")).toEqual(items);
+  });
+
+  it("hides the reset row while filtering an active scope", () => {
+    expect(filter("alpha", "all")).toEqual([]);
+  });
+
+  it("returns matching projects in source order and supports no-match results", () => {
+    expect(filter(null, "WORK")).toEqual([items[1]]);
+    expect(filter(null, "missing")).toEqual([]);
+  });
+});
+
+describe("reduceSidebarProjectScopeMenuState", () => {
+  const queriedOpenState = { open: true, query: "alpha" };
+
+  it("clears the query when the combobox closes through onOpenChange", () => {
+    expect(
+      reduceSidebarProjectScopeMenuState(queriedOpenState, {
+        type: "open-changed",
+        open: false,
+      }),
+    ).toEqual({ open: false, query: "" });
+  });
+
+  it("clears the query when project settings closes the combobox", () => {
+    expect(
+      reduceSidebarProjectScopeMenuState(queriedOpenState, {
+        type: "project-settings-opened",
+      }),
+    ).toEqual({ open: false, query: "" });
+  });
+
+  it("keeps the popup open while the query changes", () => {
+    expect(
+      reduceSidebarProjectScopeMenuState(
+        { open: true, query: "" },
+        { type: "query-changed", query: "beta" },
+      ),
+    ).toEqual({ open: true, query: "beta" });
+  });
+});
+
 describe("sortThreadsForSidebar", () => {
   const sortable = (input: { id: string; createdAt: string }) => ({
     id: input.id,
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 07fb4bc8ab59..7e42a8f8e638 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -583,6 +583,44 @@ export function searchSidebarThreadsByTitle<T extends { readonly title: string }
   return threads.filter((thread) => thread.title.toLowerCase().includes(normalizedQuery));
 }
 
+export function filterSidebarProjectScopeItems<TItem extends { readonly value: string }>(input: {
+  items: readonly TItem[];
+  activeScopeKey: string | null;
+  query: string;
+  matches: (item: TItem, query: string) => boolean;
+}): readonly TItem[] {
+  const projectItems = input.items.filter((item) => item.value !== "all");
+  const query = input.query.trim();
+  if (query.length > 0) {
+    return projectItems.filter((item) => input.matches(item, query));
+  }
+  return input.activeScopeKey === null ? projectItems : input.items;
+}
+
+export interface SidebarProjectScopeMenuState {
+  readonly open: boolean;
+  readonly query: string;
+}
+
+export type SidebarProjectScopeMenuAction =
+  | { readonly type: "query-changed"; readonly query: string }
+  | { readonly type: "open-changed"; readonly open: boolean }
+  | { readonly type: "project-settings-opened" };
+
+export function reduceSidebarProjectScopeMenuState(
+  state: SidebarProjectScopeMenuState,
+  action: SidebarProjectScopeMenuAction,
+): SidebarProjectScopeMenuState {
+  switch (action.type) {
+    case "query-changed":
+      return { ...state, query: action.query };
+    case "open-changed":
+      return { open: action.open, query: "" };
+    case "project-settings-opened":
+      return { open: false, query: "" };
+  }
+}
+
 type SettledTimestampInput = Pick<
   SidebarThreadSummary,
   "settledAt" | "latestUserMessageAt" | "latestTurn" | "updatedAt"
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 315d1079bb54..ee96b407db75 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -60,6 +60,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useReducer,
   useRef,
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
@@ -125,6 +126,7 @@ import { buildThreadActionMenuItems } from "./threadActionMenu.logic";
 import {
   animatePinnedLayoutChanges,
   buildBulkTitleRegenerationContextMenuItem,
+  filterSidebarProjectScopeItems,
   formatWorkingDurationLabel,
   firstValidTimestampMs,
   hasUnseenCompletion,
@@ -132,6 +134,7 @@ import {
   isTrailingDoubleClick,
   orderItemsByPreferredIds,
   planPinnedReorder,
+  reduceSidebarProjectScopeMenuState,
   resolveAdjacentThreadId,
   resolveSettledTimestamp,
   resolveSidebarThreadStatus,
@@ -1812,7 +1815,6 @@ export default function Sidebar() {
       );
     },
   });
-  const [projectScopeMenuOpen, setProjectScopeMenuOpen] = useState(false);
   const newThreadContext = useHandleNewThread();
   const openAddProjectCommandPalette = useCallback(
     () => openCommandPalette({ open: "add-project" }),
@@ -1950,8 +1952,8 @@ export default function Sidebar() {
   // Project scope: one menu above the list. Scoping filters the list without
   // making the header width depend on the number or length of project names.
   const [projectScopeKey, setProjectScopeKey] = useState<string | null>(null);
-  // {value, label} items let Base UI drive the whole combobox contract: the
-  // input displays the selection's label and typing filters against it.
+  // {value, label} items let Base UI drive the combobox selection contract
+  // while the popup search filters the same collection.
   const projectScopeItems = useMemo(
     () => [
       { value: "all", label: "All projects" },
@@ -1972,7 +1974,10 @@ export default function Sidebar() {
       projectScopeItems[0]!,
     [projectScopeItems, projectScopeKey],
   );
-  const [projectScopeQuery, setProjectScopeQuery] = useState("");
+  const [projectScopeMenuState, dispatchProjectScopeMenu] = useReducer(
+    reduceSidebarProjectScopeMenuState,
+    { open: false, query: "" },
+  );
   const projectScopeFilter = useComboboxFilter();
   // Filtering derives from the same React state that controls the input, so
   // the visible query and the visible list can never desync — the peer wiring
@@ -1981,16 +1986,17 @@ export default function Sidebar() {
   // active (there is something to reset) and the query is empty, so it can't
   // outrank a project match under autoHighlight and no-hit queries reach the
   // empty state.
-  const filteredProjectScopeItems = useMemo(() => {
-    const query = projectScopeQuery.trim();
-    const projectItems = projectScopeItems.filter((item) => item.value !== "all");
-    if (query.length > 0) {
-      return projectItems.filter((item) =>
-        projectScopeFilter.contains(item, query, (candidate) => candidate.label),
-      );
-    }
-    return projectScopeKey === null ? projectItems : projectScopeItems;
-  }, [projectScopeFilter, projectScopeItems, projectScopeKey, projectScopeQuery]);
+  const filteredProjectScopeItems = useMemo(
+    () =>
+      filterSidebarProjectScopeItems({
+        items: projectScopeItems,
+        activeScopeKey: projectScopeKey,
+        query: projectScopeMenuState.query,
+        matches: (item, query) =>
+          projectScopeFilter.contains(item, query, (candidate) => candidate.label),
+      }),
+    [projectScopeFilter, projectScopeItems, projectScopeKey, projectScopeMenuState.query],
+  );
   const scopedProjectGroup = useMemo(
     () =>
       projectScopeKey === null
@@ -2050,10 +2056,7 @@ export default function Sidebar() {
     (event: ReactMouseEvent<HTMLButtonElement>, projectGroup: SidebarProjectSnapshot) => {
       event.preventDefault();
       event.stopPropagation();
-      // Programmatic close skips onOpenChange, so drop the query here too —
-      // a stale query must not survive into the next open.
-      setProjectScopeMenuOpen(false);
-      setProjectScopeQuery("");
+      dispatchProjectScopeMenu({ type: "project-settings-opened" });
       if (isMobile) {
         setOpenMobile(false);
       }
@@ -3549,10 +3552,9 @@ export default function Sidebar() {
                   autoHighlight
                   itemToStringLabel={(item) => item.label}
                   isItemEqualToValue={(a, b) => a.value === b.value}
-                  open={projectScopeMenuOpen}
+                  open={projectScopeMenuState.open}
                   onOpenChange={(open) => {
-                    setProjectScopeMenuOpen(open);
-                    setProjectScopeQuery("");
+                    dispatchProjectScopeMenu({ type: "open-changed", open });
                   }}
                   value={selectedProjectScopeItem}
                   onValueChange={(item) => {
@@ -3598,8 +3600,13 @@ export default function Sidebar() {
                           showTrigger={false}
                           size="sm"
                           unstyled
-                          value={projectScopeQuery}
-                          onChange={(event) => setProjectScopeQuery(event.target.value)}
+                          value={projectScopeMenuState.query}
+                          onChange={(event) =>
+                            dispatchProjectScopeMenu({
+                              type: "query-changed",
+                              query: event.target.value,
+                            })
+                          }
                         />
                       </div>
                     </div>