feat(ui): add toggleable session search in left drawer

packages/ui/src/components/instance/instance-shell2.tsx

@@ -12,7 +12,7 @@ import {
 } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import { Accordion } from "@kobalte/core"
-import { ChevronDown, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+import { ChevronDown, Search, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
 import AppBar from "@suid/material/AppBar"
 import Box from "@suid/material/Box"
 import Drawer from "@suid/material/Drawer"
@@ -149,6 +149,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [selectedBackgroundProcess, setSelectedBackgroundProcess] = createSignal<BackgroundProcess | null>(null)
   const [showBackgroundOutput, setShowBackgroundOutput] = createSignal(false)
   const [permissionModalOpen, setPermissionModalOpen] = createSignal(false)
+  const [showSessionSearch, setShowSessionSearch] = createSignal(false)
 
   const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instance.id))
 
@@ -845,6 +846,23 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             {t("instanceShell.leftPanel.sessionsTitle")}
           </span>
           <div class="flex items-center gap-2 text-primary">
+            <IconButton
+              size="small"
+              color="inherit"
+              aria-label={t("sessionList.filter.ariaLabel")}
+              title={t("sessionList.filter.ariaLabel")}
+              aria-pressed={showSessionSearch()}
+              onClick={() => setShowSessionSearch((current) => !current)}
+              sx={{
+                color: showSessionSearch() ? "var(--text-primary)" : "inherit",
+                backgroundColor: showSessionSearch() ? "var(--surface-hover)" : "transparent",
+                "&:hover": {
+                  backgroundColor: "var(--surface-hover)",
+                },
+              }}
+            >
+              <Search class={showSessionSearch() ? "w-4 h-4" : "w-4 h-4 opacity-70"} />
+            </IconButton>
             <IconButton
               size="small"
               color="inherit"
@@ -896,7 +914,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               void result.catch((error) => log.error("Failed to create session:", error))
             }
           }}
-          enableFilterBar
+          enableFilterBar={showSessionSearch()}
           showHeader={false}
           showFooter={false}
         />

packages/ui/src/components/session-list.tsx

@@ -49,7 +49,7 @@ const SessionList: Component<SessionListProps> = (props) => {
   const [isRenaming, setIsRenaming] = createSignal(false)
 
   const [filterQuery, setFilterQuery] = createSignal("")
-  const normalizedQuery = createMemo(() => filterQuery().trim().toLowerCase())
+  const normalizedQuery = createMemo(() => (props.enableFilterBar ? filterQuery().trim().toLowerCase() : ""))
 
   const [selectedSessionIds, setSelectedSessionIds] = createSignal<Set<string>>(new Set())