feat: update sidebar agent workflow and host filter UI

packages/app/app.config.js

@@ -112,6 +112,6 @@ export default {
         projectId: "0e7f65ce-0367-46c8-a238-2b65963d235a",
       },
     },
-    owner: "moboudra",
+    owner: "getpaseo",
   },
 };

packages/app/e2e/terminal-pane.spec.ts

@@ -123,6 +123,16 @@ async function selectNewestTerminalTab(page: Page): Promise<void> {
   await tabs.last().click();
 }
 
+async function getFirstTerminalTabTestId(page: Page): Promise<string> {
+  const firstTab = page.locator('[data-testid^="terminal-tab-"]').first();
+  await expect(firstTab).toBeVisible({ timeout: 30000 });
+  const value = await firstTab.getAttribute("data-testid");
+  if (!value) {
+    throw new Error("Expected terminal tab test id");
+  }
+  return value;
+}
+
 async function runTerminalCommand(page: Page, command: string, expectedText: string): Promise<void> {
   const surface = page.getByTestId("terminal-surface").first();
   await expect(surface).toBeVisible({ timeout: 30000 });
@@ -231,6 +241,39 @@ test("Terminals tab creates multiple terminals and streams command output", asyn
   }
 });
 
+test("terminal tab is removed when shell exits", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-exit-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal exit flow");
+
+    await openTerminalsPanel(page);
+
+    const exitedTabTestId = await getFirstTerminalTabTestId(page);
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+    await page.keyboard.type("exit", { delay: 1 });
+    await page.keyboard.press("Enter");
+
+    await expect(page.getByTestId(exitedTabTestId)).toHaveCount(0, {
+      timeout: 30000,
+    });
+
+    await expect(page.locator('[data-testid^="terminal-tab-"]').first()).toBeVisible({
+      timeout: 30000,
+    });
+    const nextTabTestId = await getFirstTerminalTabTestId(page);
+    expect(nextTabTestId).not.toBe(exitedTabTestId);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
 
 test("terminals are shared by agents on the same cwd", async ({ page }) => {
   const repo = await createTempGitRepo("paseo-e2e-terminal-share-");

packages/app/eas.json

@@ -30,6 +30,10 @@
     }
   },
   "submit": {
-    "production": {}
+    "production": {
+      "ios": {
+        "ascAppId": "6758887924"
+      }
+    }
   }
 }

packages/app/src/components/sliding-sidebar.tsx

@@ -16,16 +16,25 @@ import { SidebarAgentList } from "./sidebar-agent-list";
 import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
 import { useSidebarAgentsGrouped } from "@/hooks/use-sidebar-agents-grouped";
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { useTauriDragHandlers, useTrafficLightPadding } from "@/utils/tauri-window";
+import { useTauriDragHandlers } from "@/utils/tauri-window";
-import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
-import { deriveSidebarShortcutAgentKeys } from "@/utils/sidebar-shortcuts";
 import { Combobox } from "@/components/ui/combobox";
 import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
 import { useDaemonConnections } from "@/contexts/daemon-connections-context";
+import { useSessionStore } from "@/stores/session-store";
 import { formatConnectionStatus } from "@/utils/daemons";
+import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "@/constants/layout";
+import {
+  checkoutStatusQueryKey,
+  type CheckoutStatusPayload,
+} from "@/hooks/use-checkout-status-query";
+import { queryClient } from "@/query/query-client";
+import {
+  buildNewAgentRoute,
+  resolveNewAgentWorkingDir,
+  resolveSelectedAgentForNewAgent,
+} from "@/utils/new-agent-routing";
 import {
-  buildHostAgentDraftRoute,
   buildHostAgentsRoute,
   buildHostSettingsRoute,
   mapPathnameToServer,
@@ -85,14 +94,23 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
 
   // Derive isOpen from the unified panel state
   const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
+  const [selectedProjectKeys, setSelectedProjectKeys] = useState<string[]>([]);
 
   const {
-    sections,
+    entries,
-    checkoutByAgentKey,
+    projectOptions,
+    hasMoreEntries,
     isInitialLoad,
     isRevalidating,
     refreshAll,
-  } = useSidebarAgentsGrouped({ isOpen, serverId: activeServerId });
+  } = useSidebarAgentsGrouped({
+    isOpen,
+    serverId: activeServerId,
+    selectedProjectKeys,
+  });
+  useEffect(() => {
+    setSelectedProjectKeys([]);
+  }, [activeServerId]);
   const {
     translateX,
     backdropOpacity,
@@ -102,7 +120,6 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
     isGesturing,
     closeGestureRef,
   } = useSidebarAnimation();
-  const trafficLightPadding = useTrafficLightPadding();
   const dragHandlers = useTauriDragHandlers();
 
   // Track user-initiated refresh to avoid showing spinner on background revalidation
@@ -120,13 +137,12 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
     }
   }, [isRevalidating, isManualRefresh]);
 
-  const collapsedProjectKeys = useSidebarCollapsedSectionsStore((s) => s.collapsedProjectKeys);
   const setSidebarShortcutAgentKeys = useKeyboardShortcutsStore(
     (s) => s.setSidebarShortcutAgentKeys
   );
   const sidebarShortcutAgentKeys = useMemo(() => {
-    return deriveSidebarShortcutAgentKeys(sections, collapsedProjectKeys, 9);
+    return entries.slice(0, 9).map((entry) => `${entry.agent.serverId}:${entry.agent.id}`);
-  }, [collapsedProjectKeys, sections]);
+  }, [entries]);
 
   useEffect(() => {
     setSidebarShortcutAgentKeys(sidebarShortcutAgentKeys);
@@ -137,11 +153,34 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
   }, [closeToAgent]);
 
   const handleCreateAgentClean = useCallback(() => {
-    if (!activeServerId) {
+    let targetServerId = activeServerId;
+    let targetWorkingDir: string | null = null;
+
+    const selectedAgent = resolveSelectedAgentForNewAgent({
+      pathname,
+      selectedAgentId,
+    });
+    if (selectedAgent) {
+      targetServerId = selectedAgent.serverId;
+      const agent = useSessionStore
+        .getState()
+        .sessions[selectedAgent.serverId]
+        ?.agents?.get(selectedAgent.agentId);
+      const cwd = agent?.cwd?.trim();
+      if (cwd) {
+        const checkout =
+          queryClient.getQueryData<CheckoutStatusPayload>(
+            checkoutStatusQueryKey(selectedAgent.serverId, cwd)
+          ) ?? null;
+        targetWorkingDir = resolveNewAgentWorkingDir(cwd, checkout);
+      }
+    }
+
+    if (!targetServerId) {
       return;
     }
-    router.push(buildHostAgentDraftRoute(activeServerId) as any);
+    router.push(buildNewAgentRoute(targetServerId, targetWorkingDir) as any);
-  }, [activeServerId]);
+  }, [activeServerId, pathname, selectedAgentId]);
 
   // Mobile: close sidebar and navigate
   const handleCreateAgentCleanMobile = useCallback(() => {
@@ -198,6 +237,27 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
     windowWidth,
   ]);
 
+  const listFooterComponent = useMemo(() => {
+    if (!hasMoreEntries) {
+      return null;
+    }
+
+    return (
+      <Pressable style={styles.listViewMoreButton} onPress={handleViewMore}>
+        {({ hovered }) => (
+          <Text
+            style={[
+              styles.listViewMoreButtonText,
+              hovered && styles.listViewMoreButtonTextHovered,
+            ]}
+          >
+            View more
+          </Text>
+        )}
+      </Pressable>
+    );
+  }, [handleViewMore, hasMoreEntries]);
+
   const handleHostSelect = useCallback(
     (nextServerId: string) => {
       if (!nextServerId) {
@@ -299,9 +359,36 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
                       </>
                     )}
                   </Pressable>
+                </View>
+              </View>
+
+              {/* Middle: scrollable agent list */}
+              {isInitialLoad ? (
+                <SidebarAgentListSkeleton />
+              ) : (
+                <SidebarAgentList
+                  entries={entries}
+                  projectOptions={projectOptions}
+                  selectedProjectKeys={selectedProjectKeys}
+                  onSelectedProjectKeysChange={setSelectedProjectKeys}
+                  isRefreshing={isManualRefresh && isRevalidating}
+                  onRefresh={handleRefresh}
+                  listFooterComponent={listFooterComponent}
+                  selectedAgentId={selectedAgentId}
+                  onAgentSelect={handleAgentSelectMobile}
+                  parentGestureRef={closeGestureRef}
+                />
+              )}
+
+              {/* Footer */}
+              <View style={styles.sidebarFooter}>
+                <View style={styles.footerHostSlot}>
                   <Pressable
                     ref={hostTriggerRef}
-                    style={styles.hostTrigger}
+                    style={({ hovered = false }) => [
+                      styles.hostTrigger,
+                      hovered && styles.hostTriggerHovered,
+                    ]}
                     onPress={() => setIsHostPickerOpen(true)}
                     disabled={hostOptions.length === 0}
                   >
@@ -316,10 +403,47 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
                     </Text>
                   </Pressable>
                 </View>
+                <View style={styles.footerIconRow}>
+                  <Pressable
+                    style={styles.footerIconButton}
+                    testID="sidebar-all-agents"
+                    nativeID="sidebar-all-agents"
+                    collapsable={false}
+                    accessible
+                    accessibilityLabel="All agents"
+                    accessibilityRole="button"
+                    onPress={handleViewMore}
+                  >
+                    {({ hovered }) => (
+                      <Users
+                        size={20}
+                        color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                      />
+                    )}
+                  </Pressable>
+                  <Pressable
+                    style={styles.footerIconButton}
+                    testID="sidebar-settings"
+                    nativeID="sidebar-settings"
+                    collapsable={false}
+                    accessible
+                    accessibilityLabel="Settings"
+                    accessibilityRole="button"
+                    onPress={handleSettingsMobile}
+                  >
+                    {({ hovered }) => (
+                      <Settings
+                        size={20}
+                        color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                      />
+                    )}
+                  </Pressable>
+                </View>
                 <Combobox
                   options={hostOptions}
                   value={activeServerId ?? ""}
                   onSelect={handleHostSelect}
+                  searchable={false}
                   title="Switch host"
                   searchPlaceholder="Search hosts..."
                   open={isHostPickerOpen}
@@ -327,54 +451,6 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
                   anchorRef={hostTriggerRef}
                 />
               </View>
-
-              {/* Middle: scrollable agent list */}
-              {isInitialLoad ? (
-                <SidebarAgentListSkeleton />
-              ) : (
-                <SidebarAgentList
-                  sections={sections}
-                  checkoutByAgentKey={checkoutByAgentKey}
-                  isRefreshing={isManualRefresh && isRevalidating}
-                  onRefresh={handleRefresh}
-                  selectedAgentId={selectedAgentId}
-                  onAgentSelect={handleAgentSelectMobile}
-                  parentGestureRef={closeGestureRef}
-                />
-              )}
-
-              {/* Footer */}
-              <View style={styles.sidebarFooter}>
-                <Pressable
-                  style={styles.footerButton}
-                  onPress={handleViewMore}
-                >
-                  {({ hovered }) => (
-                    <>
-                      <Users size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                      <Text style={[styles.footerButtonText, hovered && styles.footerButtonTextHovered]}>
-                        All agents
-                      </Text>
-                    </>
-                  )}
-                </Pressable>
-                <View style={styles.footerIconRow}>
-                <Pressable
-                  style={styles.footerIconButton}
-                  testID="sidebar-settings"
-                  nativeID="sidebar-settings"
-                  collapsable={false}
-                  accessible
-                  accessibilityLabel="Settings"
-                  accessibilityRole="button"
-                  onPress={handleSettingsMobile}
-                >
-                  {({ hovered }) => (
-                    <Settings size={20} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                  )}
-                </Pressable>
-                </View>
-              </View>
             </View>
           </Animated.View>
         </GestureDetector>
@@ -389,11 +465,7 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
 
   return (
     <View style={[styles.desktopSidebar, { width: DESKTOP_SIDEBAR_WIDTH }]}>
-      {/* Header: New Agent button - top padding area is draggable on Tauri */}
+      <View style={styles.sidebarHeader} {...dragHandlers}>
-      <View
-        style={[styles.sidebarHeader, { paddingTop: trafficLightPadding.top || styles.sidebarHeader.paddingTop }]}
-        {...dragHandlers}
-      >
         <View style={styles.sidebarHeaderRow}>
           <Pressable
             style={styles.newAgentButton}
@@ -403,13 +475,38 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             {({ hovered }) => (
               <>
                 <Plus size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
+              <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
               </>
             )}
           </Pressable>
+        </View>
+      </View>
+
+      {/* Middle: scrollable agent list */}
+      {isInitialLoad ? (
+        <SidebarAgentListSkeleton />
+      ) : (
+        <SidebarAgentList
+          entries={entries}
+          projectOptions={projectOptions}
+          selectedProjectKeys={selectedProjectKeys}
+          onSelectedProjectKeysChange={setSelectedProjectKeys}
+          isRefreshing={isManualRefresh && isRevalidating}
+          onRefresh={handleRefresh}
+          listFooterComponent={listFooterComponent}
+          selectedAgentId={selectedAgentId}
+        />
+      )}
+
+      {/* Footer */}
+      <View style={styles.sidebarFooter}>
+        <View style={styles.footerHostSlot}>
           <Pressable
             ref={hostTriggerRef}
-            style={styles.hostTrigger}
+            style={({ hovered = false }) => [
+              styles.hostTrigger,
+              hovered && styles.hostTriggerHovered,
+            ]}
             onPress={() => setIsHostPickerOpen(true)}
             disabled={hostOptions.length === 0}
           >
@@ -424,47 +521,24 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             </Text>
           </Pressable>
         </View>
-        <Combobox
-          options={hostOptions}
-          value={activeServerId ?? ""}
-          onSelect={handleHostSelect}
-          title="Switch host"
-          searchPlaceholder="Search hosts..."
-          open={isHostPickerOpen}
-          onOpenChange={setIsHostPickerOpen}
-          anchorRef={hostTriggerRef}
-        />
-      </View>
-
-      {/* Middle: scrollable agent list */}
-      {isInitialLoad ? (
-        <SidebarAgentListSkeleton />
-      ) : (
-        <SidebarAgentList
-          sections={sections}
-          checkoutByAgentKey={checkoutByAgentKey}
-          isRefreshing={isManualRefresh && isRevalidating}
-          onRefresh={handleRefresh}
-          selectedAgentId={selectedAgentId}
-        />
-      )}
-
-      {/* Footer */}
-      <View style={styles.sidebarFooter}>
-        <Pressable
-          style={styles.footerButton}
-          onPress={handleViewMore}
-        >
-          {({ hovered }) => (
-            <>
-              <Users size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-              <Text style={[styles.footerButtonText, hovered && styles.footerButtonTextHovered]}>
-                All agents
-              </Text>
-            </>
-          )}
-        </Pressable>
         <View style={styles.footerIconRow}>
+          <Pressable
+            style={styles.footerIconButton}
+            testID="sidebar-all-agents"
+            nativeID="sidebar-all-agents"
+            collapsable={false}
+            accessible
+            accessibilityLabel="All agents"
+            accessibilityRole="button"
+            onPress={handleViewMore}
+          >
+            {({ hovered }) => (
+              <Users
+                size={20}
+                color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+              />
+            )}
+          </Pressable>
           <Pressable
             style={styles.footerIconButton}
             testID="sidebar-settings"
@@ -480,6 +554,17 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             )}
           </Pressable>
         </View>
+        <Combobox
+          options={hostOptions}
+          value={activeServerId ?? ""}
+          onSelect={handleHostSelect}
+          searchable={false}
+          title="Switch host"
+          searchPlaceholder="Search hosts..."
+          open={isHostPickerOpen}
+          onOpenChange={setIsHostPickerOpen}
+          anchorRef={hostTriggerRef}
+        />
       </View>
     </View>
   );
@@ -512,9 +597,12 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface0,
   },
   sidebarHeader: {
-    paddingHorizontal: theme.spacing[4],
+    height: {
-    paddingTop: theme.spacing[4],
+      xs: HEADER_INNER_HEIGHT_MOBILE,
-    paddingBottom: theme.spacing[3],
+      md: HEADER_INNER_HEIGHT,
+    },
+    paddingHorizontal: theme.spacing[2],
+    justifyContent: "center",
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
     userSelect: "none",
@@ -522,7 +610,7 @@ const styles = StyleSheet.create((theme) => ({
   sidebarHeaderRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
+    justifyContent: "flex-start",
     gap: theme.spacing[2],
   },
   newAgentButton: {
@@ -545,12 +633,18 @@ const styles = StyleSheet.create((theme) => ({
   hostTrigger: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-end",
+    justifyContent: "flex-start",
     gap: theme.spacing[2],
     minWidth: 0,
-    maxWidth: "55%",
     paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface1,
+  },
+  hostTriggerHovered: {
+    borderColor: theme.colors.borderAccent,
   },
   hostStatusDot: {
     width: 8,
@@ -560,6 +654,8 @@ const styles = StyleSheet.create((theme) => ({
   hostTriggerText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foregroundMuted,
+    flexShrink: 1,
+    minWidth: 0,
   },
   sidebarFooter: {
     flexDirection: "row",
@@ -570,28 +666,43 @@ const styles = StyleSheet.create((theme) => ({
     borderTopWidth: 1,
     borderTopColor: theme.colors.border,
   },
+  footerHostSlot: {
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    marginRight: theme.spacing[2],
+  },
   footerIconRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[3],
-  },
-  footerButton: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
+    flexShrink: 0,
-    paddingHorizontal: theme.spacing[1],
   },
   footerIconButton: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
     paddingVertical: theme.spacing[1],
     paddingHorizontal: theme.spacing[1],
   },
-  footerButtonText: {
+  listViewMoreButton: {
-    fontSize: theme.fontSize.base,
+    marginTop: theme.spacing[2],
-    fontWeight: theme.fontWeight.normal,
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[1],
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.surface1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[2],
+  },
+  listViewMoreButtonText: {
+    fontSize: theme.fontSize.sm,
     color: theme.colors.foregroundMuted,
   },
-  footerButtonTextHovered: {
+  listViewMoreButtonTextHovered: {
     color: theme.colors.foreground,
   },
   hostPickerList: {

packages/app/src/components/terminal-emulator.tsx

@@ -384,7 +384,6 @@ export default function TerminalEmulator({
       terminal.write(outputText);
       renderedOutputRef.current = outputText;
     }
-    terminal.focus();
 
     return () => {
       inputDisposable.dispose();

packages/app/src/components/terminal-pane.tsx

@@ -7,7 +7,13 @@ import {
   Text,
   View,
 } from "react-native";
-import { Plus, RefreshCw } from "lucide-react-native";
+import { Plus, X } from "lucide-react-native";
+import Svg, {
+  Defs,
+  LinearGradient as SvgLinearGradient,
+  Rect,
+  Stop,
+} from "react-native-svg";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { useSessionStore } from "@/stores/session-store";
 import {
@@ -23,6 +29,7 @@ interface TerminalPaneProps {
 }
 
 const MAX_OUTPUT_CHARS = 200_000;
+const TERMINAL_TAB_MAX_WIDTH = 220;
 
 const MODIFIER_LABELS = {
   ctrl: "Ctrl",
@@ -58,6 +65,29 @@ function terminalScopeKey(serverId: string, cwd: string): string {
   return `${serverId}:${cwd}`;
 }
 
+function TerminalCloseGradient({ color, gradientId }: { color: string; gradientId: string }) {
+  return (
+    <View style={styles.terminalTabCloseGradient} pointerEvents="none">
+      <Svg width="100%" height="100%" preserveAspectRatio="none">
+        <Defs>
+          <SvgLinearGradient
+            id={gradientId}
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="0%"
+          >
+            <Stop offset="0%" stopColor={color} stopOpacity={0} />
+            <Stop offset="10%" stopColor={color} stopOpacity={1} />
+            <Stop offset="100%" stopColor={color} stopOpacity={1} />
+          </SvgLinearGradient>
+        </Defs>
+        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+    </View>
+  );
+}
+
 export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
   const { theme } = useUnistyles();
   const isMobile =
@@ -85,6 +115,62 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
   const [streamError, setStreamError] = useState<string | null>(null);
   const [modifiers, setModifiers] = useState<ModifierState>(EMPTY_MODIFIERS);
   const [focusRequestToken, setFocusRequestToken] = useState(0);
+  const [hoveredTerminalId, setHoveredTerminalId] = useState<string | null>(null);
+  const [hoveredCloseTerminalId, setHoveredCloseTerminalId] = useState<string | null>(
+    null
+  );
+  const hoverOutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const selectedTerminalIdRef = useRef<string | null>(selectedTerminalId);
+
+  useEffect(() => {
+    selectedTerminalIdRef.current = selectedTerminalId;
+  }, [selectedTerminalId]);
+
+  const clearHoverOutTimeout = useCallback(() => {
+    if (!hoverOutTimeoutRef.current) {
+      return;
+    }
+    clearTimeout(hoverOutTimeoutRef.current);
+    hoverOutTimeoutRef.current = null;
+  }, []);
+
+  const handleTerminalTabHoverIn = useCallback(
+    (terminalId: string) => {
+      clearHoverOutTimeout();
+      setHoveredTerminalId(terminalId);
+    },
+    [clearHoverOutTimeout]
+  );
+
+  const handleTerminalTabHoverOut = useCallback(
+    (terminalId: string) => {
+      clearHoverOutTimeout();
+      hoverOutTimeoutRef.current = setTimeout(() => {
+        setHoveredTerminalId((current) => (current === terminalId ? null : current));
+        setHoveredCloseTerminalId((current) =>
+          current === terminalId ? null : current
+        );
+      }, 50);
+    },
+    [clearHoverOutTimeout]
+  );
+
+  const handleTerminalCloseHoverIn = useCallback(
+    (terminalId: string) => {
+      clearHoverOutTimeout();
+      setHoveredTerminalId(terminalId);
+      setHoveredCloseTerminalId(terminalId);
+    },
+    [clearHoverOutTimeout]
+  );
+
+  const handleTerminalCloseHoverOut = useCallback((terminalId: string) => {
+    setHoveredCloseTerminalId((current) => (current === terminalId ? null : current));
+  }, []);
+
+  useEffect(() => {
+    return () => clearHoverOutTimeout();
+  }, [clearHoverOutTimeout]);
 
   const terminalsQuery = useQuery({
     queryKey: ["terminals", serverId, cwd] as const,
@@ -100,6 +186,42 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
 
   const terminals = terminalsQuery.data?.terminals ?? [];
 
+  useEffect(() => {
+    if (!client || !isConnected) {
+      return;
+    }
+
+    return client.on("terminal_stream_exit", (message) => {
+      if (message.type !== "terminal_stream_exit") {
+        return;
+      }
+
+      const exitedTerminalId = message.payload.terminalId;
+      if (!exitedTerminalId) {
+        return;
+      }
+
+      if (selectedTerminalIdRef.current === exitedTerminalId) {
+        setSelectedTerminalId((current) =>
+          current === exitedTerminalId ? null : current
+        );
+        setActiveStream((current) =>
+          current?.terminalId === exitedTerminalId ? null : current
+        );
+        setIsAttaching(false);
+        setModifiers({ ...EMPTY_MODIFIERS });
+      }
+
+      void queryClient.invalidateQueries({
+        queryKey: ["terminals", serverId, cwd],
+      });
+      void queryClient.refetchQueries({
+        queryKey: ["terminals", serverId, cwd],
+        type: "active",
+      });
+    });
+  }, [client, cwd, isConnected, queryClient, serverId]);
+
   const createTerminalMutation = useMutation({
     mutationFn: async () => {
       if (!client) {
@@ -118,6 +240,39 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
     },
   });
 
+  const killTerminalMutation = useMutation({
+    mutationFn: async (terminalId: string) => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      const payload = await client.killTerminal(terminalId);
+      if (!payload.success) {
+        throw new Error("Unable to close terminal");
+      }
+      return payload;
+    },
+    onSuccess: (_, terminalId) => {
+      setHoveredTerminalId((current) => (current === terminalId ? null : current));
+      if (selectedTerminalIdRef.current === terminalId) {
+        setSelectedTerminalId((current) =>
+          current === terminalId ? null : current
+        );
+        setActiveStream((current) =>
+          current?.terminalId === terminalId ? null : current
+        );
+        setIsAttaching(false);
+        setModifiers({ ...EMPTY_MODIFIERS });
+      }
+      void queryClient.invalidateQueries({
+        queryKey: ["terminals", serverId, cwd],
+      });
+      void queryClient.refetchQueries({
+        queryKey: ["terminals", serverId, cwd],
+        type: "active",
+      });
+    },
+  });
+
   useEffect(() => {
     setSelectedTerminalId(selectedTerminalByScopeRef.current.get(scopeKey) ?? null);
     lastReportedSizeRef.current = null;
@@ -263,14 +418,23 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
     ? (outputByTerminalId.get(selectedTerminalId) ?? "")
     : "";
 
-  const handleRefresh = useCallback(() => {
-    void terminalsQuery.refetch();
-  }, [terminalsQuery]);
-
   const handleCreateTerminal = useCallback(() => {
     createTerminalMutation.mutate();
   }, [createTerminalMutation]);
 
+  const handleCloseTerminal = useCallback(
+    (terminalId: string) => {
+      if (
+        killTerminalMutation.isPending &&
+        killTerminalMutation.variables === terminalId
+      ) {
+        return;
+      }
+      killTerminalMutation.mutate(terminalId);
+    },
+    [killTerminalMutation]
+  );
+
   const requestTerminalFocus = useCallback(() => {
     setFocusRequestToken((current) => current + 1);
   }, []);
@@ -430,12 +594,15 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
   const queryError =
     terminalsQuery.error instanceof Error ? terminalsQuery.error.message : null;
   const isCreating = createTerminalMutation.isPending;
-  const isRefreshing = terminalsQuery.isFetching;
   const createError =
     createTerminalMutation.error instanceof Error
       ? createTerminalMutation.error.message
       : null;
-  const combinedError = streamError ?? createError ?? queryError;
+  const closeError =
+    killTerminalMutation.error instanceof Error
+      ? killTerminalMutation.error.message
+      : null;
+  const combinedError = streamError ?? closeError ?? createError ?? queryError;
 
   return (
     <View style={styles.container}>
@@ -448,40 +615,82 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
         >
           {terminals.map((terminal) => {
             const isActive = terminal.id === selectedTerminalId;
+            const isTabHovered = hoveredTerminalId === terminal.id;
+            const isCloseHovered = hoveredCloseTerminalId === terminal.id;
+            const isClosingTerminal =
+              killTerminalMutation.isPending &&
+              killTerminalMutation.variables === terminal.id;
+            const shouldShowCloseButton =
+              isTabHovered || isCloseHovered || isClosingTerminal;
+            const gradientId = `terminal-close-gradient-${terminal.id.replace(
+              /[^a-zA-Z0-9_-]/g,
+              "-"
+            )}`;
             return (
               <Pressable
                 key={terminal.id}
                 testID={`terminal-tab-${terminal.id}`}
                 onPress={() => setSelectedTerminalId(terminal.id)}
+                onHoverIn={() => handleTerminalTabHoverIn(terminal.id)}
+                onHoverOut={() => handleTerminalTabHoverOut(terminal.id)}
                 style={({ pressed, hovered }) => [
                   styles.terminalTab,
                   isActive && styles.terminalTabActive,
+                  shouldShowCloseButton && styles.terminalTabHovered,
                   (pressed || hovered) && styles.terminalTabHovered,
                 ]}
               >
-                <Text style={[styles.terminalTabText, isActive && styles.terminalTabTextActive]}>
+                <Text
+                  style={[styles.terminalTabText, isActive && styles.terminalTabTextActive]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
                   {terminal.name}
                 </Text>
+                <Pressable
+                  testID={`terminal-close-${terminal.id}`}
+                  pointerEvents={shouldShowCloseButton ? "auto" : "none"}
+                  disabled={!shouldShowCloseButton || isClosingTerminal}
+                  onHoverIn={() => handleTerminalCloseHoverIn(terminal.id)}
+                  onHoverOut={() => handleTerminalCloseHoverOut(terminal.id)}
+                  onPress={(event) => {
+                    event.stopPropagation();
+                    handleCloseTerminal(terminal.id);
+                  }}
+                  style={({ hovered, pressed }) => [
+                    styles.terminalTabCloseButton,
+                    shouldShowCloseButton
+                      ? styles.terminalTabCloseButtonShown
+                      : styles.terminalTabCloseButtonHidden,
+                  ]}
+                >
+                  {({ hovered = false, pressed = false }) => {
+                    const iconColor =
+                      hovered || pressed
+                        ? theme.colors.foreground
+                        : theme.colors.foregroundMuted;
+                    return (
+                      <>
+                        <TerminalCloseGradient
+                          color={theme.colors.surface2}
+                          gradientId={gradientId}
+                        />
+                        <View style={styles.terminalTabCloseIcon}>
+                          {isClosingTerminal ? (
+                            <ActivityIndicator size={12} color={iconColor} />
+                          ) : (
+                            <X size={12} color={iconColor} />
+                          )}
+                        </View>
+                      </>
+                    );
+                  }}
+                </Pressable>
               </Pressable>
             );
           })}
         </ScrollView>
         <View style={styles.headerActions}>
-          <Pressable
-            testID="terminals-refresh-button"
-            onPress={handleRefresh}
-            disabled={isRefreshing}
-            style={({ hovered, pressed }) => [
-              styles.headerIconButton,
-              (hovered || pressed) && styles.headerIconButtonHovered,
-            ]}
-          >
-            {isRefreshing ? (
-              <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-            ) : (
-              <RefreshCw size={16} color={theme.colors.foregroundMuted} />
-            )}
-          </Pressable>
           <Pressable
             testID="terminals-create-button"
             onPress={handleCreateTerminal}
@@ -605,9 +814,9 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: theme.spacing[2],
+    gap: theme.spacing[1],
-    paddingHorizontal: theme.spacing[2],
+    paddingHorizontal: theme.spacing[1],
-    paddingVertical: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
   },
   tabsScroll: {
     flex: 1,
@@ -620,27 +829,59 @@ const styles = StyleSheet.create((theme) => ({
     paddingRight: theme.spacing[2],
   },
   terminalTab: {
-    borderWidth: 1,
-    borderColor: theme.colors.border,
     borderRadius: theme.borderRadius.md,
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
-    backgroundColor: theme.colors.surface1,
+    justifyContent: "center",
+    maxWidth: TERMINAL_TAB_MAX_WIDTH,
+    minWidth: 96,
+    overflow: "hidden",
+    position: "relative",
   },
   terminalTabHovered: {
     backgroundColor: theme.colors.surface2,
   },
   terminalTabActive: {
-    borderColor: theme.colors.primary,
     backgroundColor: theme.colors.surface2,
   },
   terminalTabText: {
+    minWidth: 0,
+    flexShrink: 1,
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
   },
   terminalTabTextActive: {
     color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.medium,
+  },
+  terminalTabCloseButton: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 32,
+    borderRadius: theme.borderRadius.sm,
+    alignItems: "flex-end",
+    justifyContent: "center",
+    paddingRight: theme.spacing[2],
+  },
+  terminalTabCloseButtonShown: {
+    opacity: 1,
+  },
+  terminalTabCloseButtonHidden: {
+    opacity: 0,
+  },
+  terminalTabCloseGradient: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: theme.borderRadius.sm,
+    overflow: "hidden",
+    zIndex: 0,
+  },
+  terminalTabCloseIcon: {
+    position: "relative",
+    zIndex: 1,
+    alignItems: "center",
+    justifyContent: "center",
   },
   headerActions: {
     flexDirection: "row",

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

@@ -36,6 +36,7 @@ export interface ComboboxProps {
   value: string;
   onSelect: (id: string) => void;
   onSearchQueryChange?: (query: string) => void;
+  searchable?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   emptyText?: string;
@@ -45,6 +46,7 @@ export interface ComboboxProps {
   title?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  desktopPlacement?: "top-start" | "bottom-start";
   anchorRef: React.RefObject<View | null>;
   children?: ReactNode;
 }
@@ -158,6 +160,7 @@ export function Combobox({
   value,
   onSelect,
   onSearchQueryChange,
+  searchable = true,
   placeholder = "Search...",
   searchPlaceholder,
   emptyText = "No options match your search.",
@@ -167,6 +170,7 @@ export function Combobox({
   title = "Select",
   open,
   onOpenChange,
+  desktopPlacement = "top-start",
   anchorRef,
   children,
 }: ComboboxProps): ReactElement {
@@ -245,7 +249,7 @@ export function Combobox({
   );
 
   const { refs, floatingStyles, update } = useFloating({
-    placement: Platform.OS === "web" ? "top-start" : "bottom-start",
+    placement: Platform.OS === "web" ? desktopPlacement : "bottom-start",
     middleware,
     sameScrollView: false,
     elements: {
@@ -261,7 +265,7 @@ export function Combobox({
     }
     const raf = requestAnimationFrame(() => update());
     return () => cancelAnimationFrame(raf);
-  }, [isMobile, update, isOpen]);
+  }, [desktopPlacement, isMobile, update, isOpen]);
 
   useEffect(() => {
     if (!isMobile) return;
@@ -293,7 +297,7 @@ export function Combobox({
     []
   );
 
-  const normalizedSearch = searchQuery.trim().toLowerCase();
+  const normalizedSearch = searchable ? searchQuery.trim().toLowerCase() : "";
   const filteredOptions = useMemo(() => {
     if (!normalizedSearch) {
       return options;
@@ -308,6 +312,7 @@ export function Combobox({
 
   const sanitizedSearchValue = searchQuery.trim();
   const showCustomOption =
+    searchable &&
     allowCustomValue &&
     sanitizedSearchValue.length > 0 &&
     !options.some(
@@ -463,7 +468,7 @@ export function Combobox({
 
   const content = children ?? (
     <>
-      {searchInput}
+      {searchable ? searchInput : null}
       {optionsList}
     </>
   );
@@ -537,7 +542,7 @@ export function Combobox({
             </ScrollView>
           ) : (
             <>
-              {searchInput}
+              {searchable ? searchInput : null}
               <ScrollView
                 contentContainerStyle={styles.desktopScrollContent}
                 keyboardShouldPersistTaps="handled"
@@ -581,7 +586,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
+    borderRadius: 0,
     ...(IS_WEB
       ? {}
       : {

packages/app/src/contexts/session-context.tsx

@@ -605,6 +605,10 @@ export function SessionProvider({
       console.log("[Session] Agent update:", agent.id, agent.status);
 
       setAgents(serverId, (prev) => {
+        const current = prev.get(agent.id);
+        if (current && agent.updatedAt.getTime() < current.updatedAt.getTime()) {
+          return prev;
+        }
         const next = new Map(prev);
         next.set(agent.id, agent);
         return next;

packages/app/src/hooks/use-aggregated-agents.ts

@@ -57,7 +57,7 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
           const pendingPermissions = new Map();
           const agentLastActivity = new Map();
 
-          for (const snapshot of agentsList) {
+          for (const { agent: snapshot } of agentsList.entries) {
             const agent = normalizeAgentSnapshot(snapshot, serverId);
             agents.set(agent.id, agent);
             agentLastActivity.set(agent.id, agent.lastActivityAt);

packages/app/src/hooks/use-all-agents-list.ts

@@ -56,7 +56,9 @@ export function useAllAgentsList(options?: {
       if (!client) {
         throw new Error("Daemon client not available");
       }
-      return await client.fetchAgents();
+      return await client.fetchAgents({
+        filter: { labels: { ui: "true" } },
+      });
     },
     enabled: canFetch,
     staleTime: ALL_AGENTS_STALE_TIME,
@@ -76,11 +78,12 @@ export function useAllAgentsList(options?: {
     if (!serverId) {
       return [];
     }
-    const data = agentsQuery.data ?? [];
+    const data = agentsQuery.data?.entries ?? [];
     const serverLabel = connectionStates.get(serverId)?.daemon.label ?? serverId;
     const list: AggregatedAgent[] = [];
 
-    for (const snapshot of data) {
+    for (const entry of data) {
+      const snapshot = entry.agent;
       const normalized = normalizeAgentSnapshot(snapshot, serverId);
       const live = liveAgents?.get(snapshot.id);
       list.push(

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -13,6 +13,7 @@ import {
 import { queryClient } from "@/query/query-client";
 import {
   buildNewAgentRoute,
+  resolveSelectedAgentForNewAgent,
   resolveNewAgentWorkingDir,
 } from "@/utils/new-agent-routing";
 import {
@@ -95,21 +96,23 @@ export function useKeyboardShortcuts({
     const navigateToNewAgent = (): boolean => {
       let targetServerId = parseServerIdFromPathname(pathname);
       let targetWorkingDir: string | null = null;
-      if (selectedAgentId) {
+      const selectedAgent = resolveSelectedAgentForNewAgent({
-        const separatorIndex = selectedAgentId.indexOf(":");
+        pathname,
-        if (separatorIndex > 0) {
+        selectedAgentId,
-          const serverId = selectedAgentId.slice(0, separatorIndex);
+      });
-          const agentId = selectedAgentId.slice(separatorIndex + 1);
+      if (selectedAgent) {
-          targetServerId = serverId;
+        targetServerId = selectedAgent.serverId;
-          const agent = useSessionStore.getState().sessions[serverId]?.agents?.get(agentId);
+        const agent = useSessionStore
-          const cwd = agent?.cwd?.trim();
+          .getState()
-          if (cwd) {
+          .sessions[selectedAgent.serverId]
-            const checkout =
+          ?.agents?.get(selectedAgent.agentId);
-              queryClient.getQueryData<CheckoutStatusPayload>(
+        const cwd = agent?.cwd?.trim();
-                checkoutStatusQueryKey(serverId, cwd)
+        if (cwd) {
-              ) ?? null;
+          const checkout =
-            targetWorkingDir = resolveNewAgentWorkingDir(cwd, checkout);
+            queryClient.getQueryData<CheckoutStatusPayload>(
-          }
+              checkoutStatusQueryKey(selectedAgent.serverId, cwd)
+            ) ?? null;
+          targetWorkingDir = resolveNewAgentWorkingDir(cwd, checkout);
         }
       }
 

packages/app/src/hooks/use-sidebar-agents-grouped.ts

@@ -1,53 +1,129 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useDaemonConnections } from "@/contexts/daemon-connections-context";
 import { useSessionStore, type Agent } from "@/stores/session-store";
 import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import {
-  useSectionOrderStore,
+  deriveSidebarStateBucket,
-  sortProjectsByStoredOrder,
+  isSidebarActiveAgent,
-} from "@/stores/section-order-store";
+} from "@/utils/sidebar-agent-state";
-import type { FetchAgentsGroupedByProjectResponseMessage } from "@server/shared/messages";
+import type { ProjectPlacementPayload } from "@server/shared/messages";
 
-const SIDEBAR_GROUPS_STALE_TIME = 15_000;
+const SIDEBAR_AGENTS_STALE_TIME = 15_000;
-const SIDEBAR_GROUPS_REFETCH_INTERVAL = 10_000;
+const SIDEBAR_AGENTS_REFETCH_INTERVAL = 10_000;
-const MAX_AGENTS_PER_PROJECT = 5;
+const SIDEBAR_DONE_FILL_TARGET = 50;
 
-type SidebarGroupsPayload =
+export interface SidebarProjectOption {
-  FetchAgentsGroupedByProjectResponseMessage["payload"];
-export type SidebarCheckoutLite =
-  SidebarGroupsPayload["groups"][number]["agents"][number]["checkout"];
-type MutableSidebarGroup = {
   projectKey: string;
   projectName: string;
-  agents: AggregatedAgent[];
+  activeCount: number;
-};
+  totalCount: number;
+  serverId: string;
+  workingDir: string;
+}
 
-export interface SidebarSectionData {
+export interface SidebarAgentListEntry {
-  key: string;
+  agent: AggregatedAgent & { createdAt: Date };
-  projectKey: string;
+  project: ProjectPlacementPayload;
-  title: string;
-  agents: AggregatedAgent[];
-  firstAgentServerId?: string;
-  firstAgentId?: string;
-  workingDir?: string;
 }
 
 export interface SidebarAgentsGroupedResult {
-  sections: SidebarSectionData[];
+  entries: SidebarAgentListEntry[];
-  checkoutByAgentKey: Map<string, SidebarCheckoutLite>;
+  projectOptions: SidebarProjectOption[];
+  hasMoreEntries: boolean;
   isLoading: boolean;
   isInitialLoad: boolean;
   isRevalidating: boolean;
   refreshAll: () => void;
 }
 
+function compareByLastActivityDesc(
+  left: SidebarAgentListEntry,
+  right: SidebarAgentListEntry
+): number {
+  return right.agent.lastActivityAt.getTime() - left.agent.lastActivityAt.getTime();
+}
+
+function compareByTitleAsc(
+  left: SidebarAgentListEntry,
+  right: SidebarAgentListEntry
+): number {
+  const leftTitle = (left.agent.title?.trim() || "New agent").toLocaleLowerCase();
+  const rightTitle = (right.agent.title?.trim() || "New agent").toLocaleLowerCase();
+  const titleCmp = leftTitle.localeCompare(rightTitle, undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+  if (titleCmp !== 0) {
+    return titleCmp;
+  }
+
+  // Deterministic tie-breaker so running rows stay stable while status updates stream.
+  return left.agent.id.localeCompare(right.agent.id, undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+}
+
+function applySidebarDefaultOrdering(
+  entries: SidebarAgentListEntry[]
+): { entries: SidebarAgentListEntry[]; hasMore: boolean } {
+  const needsInput: SidebarAgentListEntry[] = [];
+  const failed: SidebarAgentListEntry[] = [];
+  const running: SidebarAgentListEntry[] = [];
+  const attention: SidebarAgentListEntry[] = [];
+  const done: SidebarAgentListEntry[] = [];
+
+  for (const entry of entries) {
+    const bucket = deriveSidebarStateBucket({
+      status: entry.agent.status,
+      requiresAttention: entry.agent.requiresAttention,
+      attentionReason: entry.agent.attentionReason,
+    });
+    if (bucket === "needs_input") {
+      needsInput.push(entry);
+      continue;
+    }
+    if (bucket === "failed") {
+      failed.push(entry);
+      continue;
+    }
+    if (bucket === "running") {
+      running.push(entry);
+      continue;
+    }
+    if (bucket === "attention") {
+      attention.push(entry);
+      continue;
+    }
+    done.push(entry);
+  }
+
+  needsInput.sort(compareByLastActivityDesc);
+  failed.sort(compareByLastActivityDesc);
+  running.sort(compareByTitleAsc);
+  attention.sort(compareByLastActivityDesc);
+  done.sort(compareByLastActivityDesc);
+
+  const active = [...needsInput, ...failed, ...running, ...attention];
+  if (active.length >= SIDEBAR_DONE_FILL_TARGET) {
+    return { entries: active, hasMore: done.length > 0 };
+  }
+
+  const remainingDoneSlots = SIDEBAR_DONE_FILL_TARGET - active.length;
+  const shownDone = done.slice(0, remainingDoneSlots);
+  return {
+    entries: [...active, ...shownDone],
+    hasMore: done.length > shownDone.length,
+  };
+}
+
 function toAggregatedAgent(params: {
   source: Agent | ReturnType<typeof normalizeAgentSnapshot>;
   serverId: string;
   serverLabel: string;
-}): AggregatedAgent {
+}): AggregatedAgent & { createdAt: Date } {
   const source = params.source;
   return {
     id: source.id,
@@ -55,6 +131,7 @@ function toAggregatedAgent(params: {
     serverLabel: params.serverLabel,
     title: source.title ?? null,
     status: source.status,
+    createdAt: source.createdAt,
     lastActivityAt: source.lastActivityAt,
     cwd: source.cwd,
     provider: source.provider,
@@ -69,6 +146,7 @@ function toAggregatedAgent(params: {
 export function useSidebarAgentsGrouped(options?: {
   isOpen?: boolean;
   serverId?: string | null;
+  selectedProjectKeys?: string[];
 }): SidebarAgentsGroupedResult {
   const { connectionStates } = useDaemonConnections();
   const queryClient = useQueryClient();
@@ -79,6 +157,15 @@ export function useSidebarAgentsGrouped(options?: {
       ? value.trim()
       : null;
   }, [options?.serverId]);
+  const selectedProjectKeys = useMemo(
+    () =>
+      new Set(
+        (options?.selectedProjectKeys ?? [])
+          .map((item) => item.trim())
+          .filter((item) => item.length > 0)
+      ),
+    [options?.selectedProjectKeys]
+  );
 
   const session = useSessionStore((state) =>
     serverId ? state.sessions[serverId] : undefined
@@ -88,189 +175,160 @@ export function useSidebarAgentsGrouped(options?: {
   const isConnected = session?.connection.isConnected ?? false;
   const canFetch = Boolean(serverId && client && isConnected);
 
-  const groupedQuery = useQuery({
+  const agentsQuery = useQuery({
-    queryKey: ["sidebarAgentsGrouped", serverId] as const,
+    queryKey: ["sidebarAgentsList", serverId] as const,
     queryFn: async () => {
       if (!client) {
         throw new Error("Daemon client not available");
       }
-      return await client.fetchAgentsGroupedByProject({
+      return await client.fetchAgents({
         filter: { labels: { ui: "true" } },
+        sort: [
+          { key: "status_priority", direction: "asc" },
+          { key: "updated_at", direction: "desc" },
+        ],
       });
     },
     enabled: canFetch,
-    staleTime: SIDEBAR_GROUPS_STALE_TIME,
+    staleTime: SIDEBAR_AGENTS_STALE_TIME,
-    refetchInterval: isOpen ? SIDEBAR_GROUPS_REFETCH_INTERVAL : false,
+    refetchInterval: isOpen ? SIDEBAR_AGENTS_REFETCH_INTERVAL : false,
     refetchIntervalInBackground: isOpen,
     refetchOnMount: "always" as const,
   });
 
-  const projectOrder = useSectionOrderStore((state) => state.projectOrder);
+  const { entries, projectOptions, hasAnyData, hasMoreEntries } = useMemo(() => {
-  const setProjectOrder = useSectionOrderStore((state) => state.setProjectOrder);
-
-  const { sections, checkoutByAgentKey, hasAnyData } = useMemo(() => {
     if (!serverId) {
       return {
-        sections: [] as SidebarSectionData[],
+        entries: [] as SidebarAgentListEntry[],
-        checkoutByAgentKey: new Map<string, SidebarCheckoutLite>(),
+        projectOptions: [] as SidebarProjectOption[],
         hasAnyData: false,
+        hasMoreEntries: false,
       };
     }
 
-    const groupsByKey = new Map<string, MutableSidebarGroup>();
-    const checkoutLookup = new Map<string, SidebarCheckoutLite>();
-    const seenAgentKeys = new Set<string>();
-    const payload = groupedQuery.data as SidebarGroupsPayload | undefined;
-    const groupedFetchReady = groupedQuery.isFetched;
     const serverLabel = connectionStates.get(serverId)?.daemon.label ?? serverId;
+    const seenAgentIds = new Set<string>();
+    const byProject = new Map<string, SidebarProjectOption>();
+    const mergedEntries: SidebarAgentListEntry[] = [];
 
-    if (payload) {
+    const pushEntry = (entry: SidebarAgentListEntry): void => {
-      for (const group of payload.groups) {
+      if (entry.agent.archivedAt) {
-        const existing: MutableSidebarGroup =
+        return;
-          groupsByKey.get(group.projectKey) ??
-          {
-            projectKey: group.projectKey,
-            projectName: group.projectName,
-            agents: [],
-          };
-
-        for (const entry of group.agents) {
-          const normalized = normalizeAgentSnapshot(entry.agent, serverId);
-          const live = liveAgents?.get(entry.agent.id);
-          const nextAgent = toAggregatedAgent({
-            source: live ?? normalized,
-            serverId,
-            serverLabel,
-          });
-          if (nextAgent.archivedAt) {
-            continue;
-          }
-
-          const agentKey = `${serverId}:${entry.agent.id}`;
-          seenAgentKeys.add(agentKey);
-          checkoutLookup.set(
-            agentKey,
-            live?.projectPlacement?.checkout ?? entry.checkout
-          );
-          existing.agents.push(nextAgent);
-        }
-
-        groupsByKey.set(group.projectKey, existing);
       }
+      const dedupeKey = `${entry.agent.serverId}:${entry.agent.id}`;
+      if (seenAgentIds.has(dedupeKey)) {
+        return;
+      }
+      seenAgentIds.add(dedupeKey);
+      mergedEntries.push(entry);
+
+      const existing = byProject.get(entry.project.projectKey);
+      const isActive = isSidebarActiveAgent({
+        status: entry.agent.status,
+        requiresAttention: entry.agent.requiresAttention,
+        attentionReason: entry.agent.attentionReason,
+      });
+      if (existing) {
+        existing.totalCount += 1;
+        if (isActive) {
+          existing.activeCount += 1;
+        }
+        return;
+      }
+
+      byProject.set(entry.project.projectKey, {
+        projectKey: entry.project.projectKey,
+        projectName: entry.project.projectName,
+        activeCount: isActive ? 1 : 0,
+        totalCount: 1,
+        serverId,
+        workingDir: entry.project.checkout.cwd,
+      });
+    };
+
+    const fetchedEntries = agentsQuery.data?.entries ?? [];
+    for (const fetchedEntry of fetchedEntries) {
+      const normalized = normalizeAgentSnapshot(fetchedEntry.agent, serverId);
+      const live = liveAgents?.get(fetchedEntry.agent.id);
+      const project = live?.projectPlacement ?? fetchedEntry.project;
+      if (!project) {
+        continue;
+      }
+      const agent = toAggregatedAgent({
+        source: live ?? normalized,
+        serverId,
+        serverLabel,
+      });
+      pushEntry({ agent, project });
     }
 
-    if (groupedFetchReady && liveAgents) {
+    if (liveAgents) {
       for (const live of liveAgents.values()) {
         if (live.archivedAt || live.labels.ui !== "true") {
           continue;
         }
         if (!live.projectPlacement) {
-          // Ignore fetchAgents-hydrated snapshots for sidebar placement.
-          // Sidebar should derive placement from grouped RPC or project-enriched agent_update.
           continue;
         }
-        const agentKey = `${serverId}:${live.id}`;
+        const agent = toAggregatedAgent({
-        if (seenAgentKeys.has(agentKey)) {
+          source: live,
-          continue;
+          serverId,
-        }
+          serverLabel,
-
+        });
-        const livePlacement = live.projectPlacement;
+        pushEntry({ agent, project: live.projectPlacement });
-        const projectKey = livePlacement.projectKey;
-        const existing: MutableSidebarGroup =
-          groupsByKey.get(projectKey) ??
-          {
-            projectKey,
-            projectName: livePlacement.projectName,
-            agents: [],
-          };
-        existing.agents.push(
-          toAggregatedAgent({
-            source: live,
-            serverId,
-            serverLabel,
-          })
-        );
-        checkoutLookup.set(agentKey, livePlacement.checkout);
-        groupsByKey.set(projectKey, existing);
       }
     }
 
-    const sortedGroups = Array.from(groupsByKey.values())
+    const filteredEntries =
-      .map((group) => {
+      selectedProjectKeys.size > 0
-        const agents = [...group.agents].sort(
+        ? mergedEntries.filter((entry) =>
-          (left, right) =>
+            selectedProjectKeys.has(entry.project.projectKey)
-            right.lastActivityAt.getTime() - left.lastActivityAt.getTime()
+          )
-        );
+        : mergedEntries;
-        return {
-          ...group,
-          agents: agents.slice(0, MAX_AGENTS_PER_PROJECT),
-        };
-      })
-      .filter((group) => group.agents.length > 0)
-      .sort((left, right) => {
-        const leftRecent = left.agents[0]?.lastActivityAt.getTime() ?? 0;
-        const rightRecent = right.agents[0]?.lastActivityAt.getTime() ?? 0;
-        return rightRecent - leftRecent;
-      });
 
-    const orderedGroups = sortProjectsByStoredOrder(sortedGroups, projectOrder);
+    const ordered = applySidebarDefaultOrdering(filteredEntries);
-    const nextSections = orderedGroups.map((group) => {
+    const options = Array.from(byProject.values()).sort((left, right) => {
-      const firstAgent = group.agents[0];
+      if (left.activeCount !== right.activeCount) {
-      return {
+        return right.activeCount - left.activeCount;
-        key: `project:${group.projectKey}`,
+      }
-        projectKey: group.projectKey,
+      return left.projectName.localeCompare(right.projectName);
-        title: group.projectName,
-        agents: group.agents,
-        firstAgentServerId: firstAgent?.serverId,
-        firstAgentId: firstAgent?.id,
-        workingDir: firstAgent?.cwd,
-      };
     });
 
     return {
-      sections: nextSections,
+      entries: ordered.entries,
-      checkoutByAgentKey: checkoutLookup,
+      projectOptions: options,
-      hasAnyData: nextSections.length > 0,
+      hasAnyData: ordered.entries.length > 0,
+      hasMoreEntries: ordered.hasMore,
     };
   }, [
+    agentsQuery.data?.entries,
     connectionStates,
-    groupedQuery.data,
-    groupedQuery.isFetched,
     liveAgents,
-    projectOrder,
+    selectedProjectKeys,
     serverId,
   ]);
 
-  useEffect(() => {
-    const currentKeys = sections.map((section) => section.projectKey);
-    const storedKeys = new Set(projectOrder);
-    const newKeys = currentKeys.filter((key) => !storedKeys.has(key));
-    if (newKeys.length > 0) {
-      setProjectOrder([...projectOrder, ...newKeys]);
-    }
-  }, [sections, projectOrder, setProjectOrder]);
-
   const refreshAll = useCallback(() => {
     if (!serverId) {
       return;
     }
     void queryClient.invalidateQueries({
-      queryKey: ["sidebarAgentsGrouped", serverId],
+      queryKey: ["sidebarAgentsList", serverId],
     });
   }, [queryClient, serverId]);
 
   const isFetching =
-    canFetch && (groupedQuery.isPending || groupedQuery.isFetching);
+    canFetch && (agentsQuery.isPending || agentsQuery.isFetching);
   const isInitialLoad = isFetching && !hasAnyData;
   const isRevalidating = isFetching && hasAnyData;
 
   return {
-    sections,
+    entries,
-    checkoutByAgentKey,
+    projectOptions,
+    hasMoreEntries,
     isLoading: isFetching,
     isInitialLoad,
     isRevalidating,
     refreshAll,
   };
 }
-

packages/app/src/screens/settings-screen.tsx

@@ -85,7 +85,6 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
     letterSpacing: 0.4,
-    textTransform: "uppercase",
     marginBottom: theme.spacing[2],
   },
   input: {
@@ -180,8 +179,19 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     flexShrink: 1,
   },
-  hostCardPressed: {
+  hostSettingsButton: {
-    opacity: 0.85,
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+    marginLeft: theme.spacing[2],
+  },
+  hostSettingsButtonActive: {
+    backgroundColor: theme.colors.surface3,
   },
   advancedTrigger: {
     flexDirection: "row",
@@ -646,7 +656,7 @@ export default function SettingsScreen() {
                     connectionStatus={connectionStatus}
                     activeConnection={activeConnection}
                     lastError={lastConnectionError}
-                    onPress={handleEditDaemon}
+                    onOpenSettings={handleEditDaemon}
                   />
                 );
               })
@@ -885,8 +895,6 @@ function HostDetailModal({
 }: HostDetailModalProps) {
   const { theme } = useUnistyles();
   const [draftLabel, setDraftLabel] = useState("");
-  const [isDraftLabelDirty, setIsDraftLabelDirty] = useState(false);
-  const activeServerIdRef = useRef<string | null>(null);
   const [pendingRemoveConnection, setPendingRemoveConnection] = useState<{ serverId: string; connectionId: string; title: string } | null>(null);
   const [isRemovingConnection, setIsRemovingConnection] = useState(false);
 
@@ -1033,28 +1041,18 @@ function HostDetailModal({
 
   const handleDraftLabelChange = useCallback((nextValue: string) => {
     setDraftLabel(nextValue);
-    setIsDraftLabelDirty(true);
   }, []);
 
   useEffect(() => {
     if (!visible || !host) return;
-    const hostChanged = activeServerIdRef.current !== host.serverId;
+    // Initialize once per modal open / host switch; keep user edits fully local while typing.
-    if (hostChanged) {
+    setDraftLabel(host.label ?? "");
-      setDraftLabel(host.label ?? "");
+  }, [visible, host?.serverId]);
-      setIsDraftLabelDirty(false);
-      activeServerIdRef.current = host.serverId;
-      return;
-    }
-    if (!isDraftLabelDirty) {
-      setDraftLabel(host.label ?? "");
-    }
-  }, [visible, host?.serverId, host?.label, isDraftLabelDirty]);
 
   useEffect(() => {
     if (!visible) {
-      activeServerIdRef.current = null;
       setIsRestarting(false);
-      setIsDraftLabelDirty(false);
+      setDraftLabel("");
     }
   }, [visible]);
 
@@ -1304,7 +1302,7 @@ interface DaemonCardProps {
   connectionStatus: ConnectionStatus;
   activeConnection: ActiveConnection | null;
   lastError: string | null;
-  onPress: (daemon: HostProfile) => void;
+  onOpenSettings: (daemon: HostProfile) => void;
 }
 
 function DaemonCard({
@@ -1312,7 +1310,7 @@ function DaemonCard({
   connectionStatus,
   activeConnection,
   lastError,
-  onPress,
+  onOpenSettings,
 }: DaemonCardProps) {
   const { theme } = useUnistyles();
   const statusLabel = formatConnectionStatus(connectionStatus);
@@ -1347,12 +1345,9 @@ function DaemonCard({
   })();
 
   return (
-    <Pressable
+    <View
-      style={({ pressed }) => [styles.hostCard, pressed && styles.hostCardPressed]}
+      style={styles.hostCard}
-      onPress={() => onPress(daemon)}
       testID={`daemon-card-${daemon.serverId}`}
-      accessibilityRole="button"
-      accessibilityLabel={`${daemon.label}, ${statusLabel}`}
     >
       <View style={styles.hostCardContent}>
         <View style={styles.hostHeaderRow}>
@@ -1375,10 +1370,28 @@ function DaemonCard({
                 ) : null}
               </View>
             ) : null}
+
+            <Pressable
+              style={({ pressed, hovered }) => [
+                styles.hostSettingsButton,
+                (pressed || hovered) && styles.hostSettingsButtonActive,
+              ]}
+              onPress={() => onOpenSettings(daemon)}
+              testID={`daemon-card-settings-${daemon.serverId}`}
+              accessibilityRole="button"
+              accessibilityLabel={`Open settings for ${daemon.label}`}
+            >
+              {({ pressed, hovered }) => (
+                <Settings
+                  size={16}
+                  color={pressed || hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                />
+              )}
+            </Pressable>
           </View>
         </View>
         {connectionError ? <Text style={styles.hostError}>{connectionError}</Text> : null}
       </View>
-    </Pressable>
+    </View>
   );
 }

packages/app/src/utils/new-agent-routing.test.ts

@@ -3,7 +3,9 @@ import { describe, expect, it } from "vitest";
 import type { CheckoutStatusPayload } from "@/hooks/use-checkout-status-query";
 import {
   buildNewAgentRoute,
+  parseAgentKey,
   resolveNewAgentWorkingDir,
+  resolveSelectedAgentForNewAgent,
 } from "./new-agent-routing";
 
 describe("buildNewAgentRoute", () => {
@@ -35,3 +37,60 @@ describe("resolveNewAgentWorkingDir", () => {
     );
   });
 });
+
+describe("parseAgentKey", () => {
+  it("parses server and agent ids from combined key", () => {
+    expect(parseAgentKey("srv-1:agent-9")).toEqual({
+      serverId: "srv-1",
+      agentId: "agent-9",
+    });
+  });
+
+  it("uses the last separator to preserve server ids with colons", () => {
+    expect(parseAgentKey("localhost:6767:agent-9")).toEqual({
+      serverId: "localhost:6767",
+      agentId: "agent-9",
+    });
+  });
+
+  it("returns null for malformed keys", () => {
+    expect(parseAgentKey("")).toBeNull();
+    expect(parseAgentKey("only-server")).toBeNull();
+    expect(parseAgentKey(":agent-1")).toBeNull();
+    expect(parseAgentKey("srv-1:")).toBeNull();
+  });
+});
+
+describe("resolveSelectedAgentForNewAgent", () => {
+  it("prefers the agent in the current route", () => {
+    expect(
+      resolveSelectedAgentForNewAgent({
+        pathname: "/h/srv-1/agent/agent-2",
+        selectedAgentId: "srv-9:agent-9",
+      })
+    ).toEqual({
+      serverId: "srv-1",
+      agentId: "agent-2",
+    });
+  });
+
+  it("falls back to selected agent key when route has no agent", () => {
+    expect(
+      resolveSelectedAgentForNewAgent({
+        pathname: "/h/srv-1/settings",
+        selectedAgentId: "srv-1:agent-7",
+      })
+    ).toEqual({
+      serverId: "srv-1",
+      agentId: "agent-7",
+    });
+  });
+
+  it("returns null when neither route nor selection has an agent", () => {
+    expect(
+      resolveSelectedAgentForNewAgent({
+        pathname: "/h/srv-1/settings",
+      })
+    ).toBeNull();
+  });
+});

packages/app/src/utils/new-agent-routing.ts

@@ -1,5 +1,36 @@
 import type { CheckoutStatusPayload } from "@/hooks/use-checkout-status-query";
-import { buildHostAgentDraftRoute } from "@/utils/host-routes";
+import {
+  buildHostAgentDraftRoute,
+  parseHostAgentRouteFromPathname,
+} from "@/utils/host-routes";
+
+export function parseAgentKey(
+  key: string | null | undefined
+): { serverId: string; agentId: string } | null {
+  if (!key) {
+    return null;
+  }
+  const sep = key.lastIndexOf(":");
+  if (sep <= 0 || sep >= key.length - 1) {
+    return null;
+  }
+  const serverId = key.slice(0, sep).trim();
+  const agentId = key.slice(sep + 1).trim();
+  if (!serverId || !agentId) {
+    return null;
+  }
+  return { serverId, agentId };
+}
+
+export function resolveSelectedAgentForNewAgent(input: {
+  pathname: string;
+  selectedAgentId?: string;
+}): { serverId: string; agentId: string } | null {
+  return (
+    parseHostAgentRouteFromPathname(input.pathname) ??
+    parseAgentKey(input.selectedAgentId)
+  );
+}
 
 export function resolveNewAgentWorkingDir(
   cwd: string,

packages/app/src/utils/sidebar-agent-state.ts

@@ -0,0 +1,44 @@
+import type { AgentLifecycleStatus } from "@server/shared/agent-lifecycle";
+
+export type SidebarAttentionReason =
+  | "finished"
+  | "error"
+  | "permission"
+  | null
+  | undefined;
+
+export type SidebarStateBucket =
+  | "needs_input"
+  | "failed"
+  | "running"
+  | "attention"
+  | "done";
+
+export function deriveSidebarStateBucket(input: {
+  status: AgentLifecycleStatus;
+  requiresAttention?: boolean;
+  attentionReason?: SidebarAttentionReason;
+}): SidebarStateBucket {
+  if (input.requiresAttention && input.attentionReason === "permission") {
+    return "needs_input";
+  }
+  if (input.status === "error" || input.attentionReason === "error") {
+    return "failed";
+  }
+  if (input.status === "running") {
+    return "running";
+  }
+  if (input.requiresAttention) {
+    // Unread/attention-needed completed agents are active in sidebar logic.
+    return "attention";
+  }
+  return "done";
+}
+
+export function isSidebarActiveAgent(input: {
+  status: AgentLifecycleStatus;
+  requiresAttention?: boolean;
+  attentionReason?: SidebarAttentionReason;
+}): boolean {
+  return deriveSidebarStateBucket(input) !== "done";
+}

packages/cli/src/commands/agent/ls.ts

@@ -111,7 +111,10 @@ export async function runLsCommand(
   }
 
   try {
-    let agents = await client.fetchAgents()
+    const fetchPayload = await client.fetchAgents({
+      filter: options.all ? { includeArchived: true } : undefined,
+    })
+    let agents = fetchPayload.entries.map((entry) => entry.agent)
 
     // By default, exclude archived agents. `-a` includes them.
     if (!options.all) {

packages/cli/src/commands/agent/stop.ts

@@ -53,7 +53,8 @@ export async function runStopCommand(
   }
 
   try {
-    let agents = await client.fetchAgents()
+    const fetchPayload = await client.fetchAgents({ filter: { includeArchived: true } })
+    let agents = fetchPayload.entries.map((entry) => entry.agent)
     const stoppedIds: string[] = []
 
     if (options.all) {

packages/cli/src/commands/daemon/status.ts

@@ -111,7 +111,8 @@ export async function runStatusCommand(
       const client = await tryConnectToDaemon({ host, timeout: 1500 })
       if (client) {
         try {
-          const agents = await client.fetchAgents()
+          const agentsPayload = await client.fetchAgents({ filter: { includeArchived: true } })
+          const agents = agentsPayload.entries.map((entry) => entry.agent)
           runningAgents = agents.filter(a => a.status === 'running').length
           idleAgents = agents.filter(a => a.status === 'idle').length
         } catch {

packages/cli/src/commands/permit/ls.ts

@@ -57,7 +57,8 @@ export async function runLsCommand(options: PermitLsOptions, _command: Command):
   }
 
   try {
-    const agents = await client.fetchAgents()
+    const agentsPayload = await client.fetchAgents({ filter: { includeArchived: true } })
+    const agents = agentsPayload.entries.map((entry) => entry.agent)
     await client.close()
 
     // Collect all pending permissions from all agents

packages/cli/src/commands/worktree/ls.ts

@@ -76,7 +76,8 @@ export async function runLsCommand(
   }
 
   try {
-    const agents = await client.fetchAgents()
+    const agentsPayload = await client.fetchAgents({ filter: { includeArchived: true } })
+    const agents = agentsPayload.entries.map((entry) => entry.agent)
 
     // Get worktree list from daemon
     const response = await client.getPaseoWorktreeList({})

packages/server/src/client/daemon-client.test.ts

@@ -455,7 +455,7 @@ describe("DaemonClient", () => {
     expect(request.message.requestId.length).toBeGreaterThan(0);
   });
 
-  test("fetches project-grouped agents via RPC", async () => {
+  test("fetches agents via RPC with filters, sort, and pagination", async () => {
     const logger = createMockLogger();
     const mock = createMockTransport();
 
@@ -471,29 +471,49 @@ describe("DaemonClient", () => {
     mock.triggerOpen();
     await connectPromise;
 
-    const promise = client.fetchAgentsGroupedByProject({
+    const promise = client.fetchAgents({
       filter: { labels: { ui: "true" } },
+      sort: [
+        { key: "status_priority", direction: "asc" },
+        { key: "created_at", direction: "desc" },
+      ],
+      page: { limit: 25, cursor: "cursor-1" },
     });
 
     expect(mock.sent).toHaveLength(1);
     const request = JSON.parse(mock.sent[0]) as {
       type: "session";
       message: {
-        type: "fetch_agents_grouped_by_project_request";
+        type: "fetch_agents_request";
         requestId: string;
         filter?: { labels?: Record<string, string> };
+        sort?: Array<{
+          key: "status_priority" | "created_at" | "updated_at" | "title";
+          direction: "asc" | "desc";
+        }>;
+        page?: { limit: number; cursor?: string };
       };
     };
-    expect(request.message.type).toBe("fetch_agents_grouped_by_project_request");
+    expect(request.message.type).toBe("fetch_agents_request");
+    expect(request.message.sort).toEqual([
+      { key: "status_priority", direction: "asc" },
+      { key: "created_at", direction: "desc" },
+    ]);
+    expect(request.message.page).toEqual({ limit: 25, cursor: "cursor-1" });
 
     mock.triggerMessage(
       JSON.stringify({
         type: "session",
         message: {
-          type: "fetch_agents_grouped_by_project_response",
+          type: "fetch_agents_response",
           payload: {
             requestId: request.message.requestId,
-            groups: [],
+            entries: [],
+            pageInfo: {
+              nextCursor: null,
+              prevCursor: "cursor-1",
+              hasMore: false,
+            },
           },
         },
       })
@@ -501,7 +521,12 @@ describe("DaemonClient", () => {
 
     await expect(promise).resolves.toEqual({
       requestId: request.message.requestId,
-      groups: [],
+      entries: [],
+      pageInfo: {
+        nextCursor: null,
+        prevCursor: "cursor-1",
+        hasMore: false,
+      },
     });
   });
 

packages/server/src/client/daemon-client.ts

@@ -244,10 +244,19 @@ type AgentRefreshedStatusPayload = z.infer<
 type RestartRequestedStatusPayload = z.infer<
   typeof RestartRequestedStatusPayloadSchema
 >;
-type FetchAgentsGroupedByProjectPayload = Extract<
+type FetchAgentsPayload = Extract<
   SessionOutboundMessage,
-  { type: "fetch_agents_grouped_by_project_response" }
+  { type: "fetch_agents_response" }
 >["payload"];
+type FetchAgentsRequest = Extract<
+  SessionInboundMessage,
+  { type: "fetch_agents_request" }
+>;
+export type FetchAgentsOptions = Omit<FetchAgentsRequest, "type" | "requestId"> & {
+  requestId?: string;
+};
+export type FetchAgentsEntry = FetchAgentsPayload["entries"][number];
+export type FetchAgentsPageInfo = FetchAgentsPayload["pageInfo"];
 
 export type WaitForFinishResult = {
   status: "idle" | "error" | "permission" | "timeout";
@@ -976,15 +985,14 @@ export class DaemonClient {
   // Agent RPCs (requestId-correlated)
   // ============================================================================
 
-  async fetchAgents(options?: {
+  async fetchAgents(options?: FetchAgentsOptions): Promise<FetchAgentsPayload> {
-    filter?: { labels?: Record<string, string> };
-    requestId?: string;
-  }): Promise<AgentSnapshotPayload[]> {
     const resolvedRequestId = this.createRequestId(options?.requestId);
     const message = SessionInboundMessageSchema.parse({
       type: "fetch_agents_request",
       requestId: resolvedRequestId,
       ...(options?.filter ? { filter: options.filter } : {}),
+      ...(options?.sort ? { sort: options.sort } : {}),
+      ...(options?.page ? { page: options.page } : {}),
     });
     return this.sendRequest({
       requestId: resolvedRequestId,
@@ -998,33 +1006,6 @@ export class DaemonClient {
         if (msg.payload.requestId !== resolvedRequestId) {
           return null;
         }
-        return msg.payload.agents;
-      },
-    });
-  }
-
-  async fetchAgentsGroupedByProject(options?: {
-    filter?: { labels?: Record<string, string> };
-    requestId?: string;
-  }): Promise<FetchAgentsGroupedByProjectPayload> {
-    const resolvedRequestId = this.createRequestId(options?.requestId);
-    const message = SessionInboundMessageSchema.parse({
-      type: "fetch_agents_grouped_by_project_request",
-      requestId: resolvedRequestId,
-      ...(options?.filter ? { filter: options.filter } : {}),
-    });
-    return this.sendRequest({
-      requestId: resolvedRequestId,
-      message,
-      timeout: 15000,
-      options: { skipQueue: true },
-      select: (msg) => {
-        if (msg.type !== "fetch_agents_grouped_by_project_response") {
-          return null;
-        }
-        if (msg.payload.requestId !== resolvedRequestId) {
-          return null;
-        }
         return msg.payload;
       },
     });

packages/server/src/server/agent/agent-manager.ts

@@ -953,6 +953,9 @@ export class AgentManager {
 
     agent.pendingRun = streamForwarder;
     agent.lifecycle = "running";
+    // Bump updatedAt when lifecycle changes so downstream consumers can
+    // deterministically order idle->running transitions.
+    agent.updatedAt = new Date();
     self.emitState(agent);
 
     return streamForwarder;

packages/server/src/server/daemon-e2e/terminal.e2e.test.ts

@@ -317,6 +317,44 @@ const shouldRun = !process.env.CI;
     30000
   );
 
+  test(
+    "emits terminal_stream_exit and removes terminal when shell exits",
+    async () => {
+      const cwd = tmpCwd();
+      const list = await ctx.client.listTerminals(cwd);
+      const terminalId = list.terminals[0].id;
+
+      const attach = await ctx.client.attachTerminalStream(terminalId, { rows: 24, cols: 80 });
+      expect(attach.error).toBeNull();
+      const streamId = attach.streamId!;
+
+      let sawExit = false;
+      const unsubscribeExit = ctx.client.on("terminal_stream_exit", (message) => {
+        if (message.type !== "terminal_stream_exit") {
+          return;
+        }
+        if (
+          message.payload.terminalId === terminalId &&
+          message.payload.streamId === streamId
+        ) {
+          sawExit = true;
+        }
+      });
+
+      ctx.client.sendTerminalStreamKey(streamId, { key: "d", ctrl: true });
+
+      await waitForCondition(() => sawExit, 10000);
+
+      const next = await ctx.client.listTerminals(cwd);
+      expect(next.terminals).toHaveLength(1);
+      expect(next.terminals[0].id).not.toBe(terminalId);
+
+      unsubscribeExit();
+      rmSync(cwd, { recursive: true, force: true });
+    },
+    30000
+  );
+
   test(
     "replays detached terminal output from resume offset (scrollback continuity)",
     async () => {

packages/server/src/server/session.ts

@@ -28,6 +28,7 @@ import {
   type ProjectPlacementPayload,
 } from "./messages.js";
 import type { TerminalManager } from "../terminal/terminal-manager.js";
+import type { TerminalSession } from "../terminal/terminal.js";
 import {
   BinaryMuxChannel,
   TerminalBinaryFlags,
@@ -148,8 +149,6 @@ const pendingAgentInitializations = new Map<string, Promise<ManagedAgent>>();
 let restartRequested = false;
 const DEFAULT_AGENT_PROVIDER = AGENT_PROVIDER_IDS[0];
 const RESTART_EXIT_DELAY_MS = 250;
-const PROJECT_PLACEMENT_CACHE_TTL_MS = 10_000;
-const MAX_AGENTS_PER_PROJECT = 5;
 const CHECKOUT_DIFF_WATCH_DEBOUNCE_MS = 150;
 const CHECKOUT_DIFF_FALLBACK_REFRESH_MS = 5_000;
 const TERMINAL_STREAM_WINDOW_BYTES = 256 * 1024;
@@ -280,6 +279,30 @@ type TerminalStreamPendingChunk = {
   replay: boolean;
 };
 
+type FetchAgentsRequestMessage = Extract<
+  SessionInboundMessage,
+  { type: "fetch_agents_request" }
+>;
+type FetchAgentsRequestSort = NonNullable<FetchAgentsRequestMessage["sort"]>[number];
+type FetchAgentsResponsePayload = Extract<
+  SessionOutboundMessage,
+  { type: "fetch_agents_response" }
+>["payload"];
+type FetchAgentsResponseEntry = FetchAgentsResponsePayload["entries"][number];
+type FetchAgentsResponsePageInfo = FetchAgentsResponsePayload["pageInfo"];
+type FetchAgentsCursor = {
+  sort: FetchAgentsRequestSort[];
+  values: Record<string, string | number | null>;
+  id: string;
+};
+
+class SessionRequestError extends Error {
+  constructor(readonly code: string, message: string) {
+    super(message);
+    this.name = "SessionRequestError";
+  }
+}
+
 const PCM_SAMPLE_RATE = 16000;
 const PCM_CHANNELS = 1;
 const PCM_BITS_PER_SAMPLE = 16;
@@ -524,10 +547,6 @@ export class Session {
         filter?: { labels?: Record<string, string>; agentId?: string };
       }
     | null = null;
-  private readonly projectPlacementCache = new Map<
-    string,
-    { expiresAt: number; promise: Promise<ProjectPlacementPayload> }
-  >();
   private clientActivity: {
     deviceType: "web" | "mobile";
     focusedAgentId: string | null;
@@ -538,6 +557,7 @@ export class Session {
   private readonly MOBILE_BACKGROUND_STREAM_GRACE_MS = 60_000;
   private readonly terminalManager: TerminalManager | null;
   private terminalSubscriptions: Map<string, () => void> = new Map();
+  private terminalExitSubscriptions: Map<string, () => void> = new Map();
   private readonly terminalStreams = new Map<
     number,
     {
@@ -1111,21 +1131,6 @@ export class Session {
     };
   }
 
-  private getProjectPlacement(cwd: string): Promise<ProjectPlacementPayload> {
-    const now = Date.now();
-    const cached = this.projectPlacementCache.get(cwd);
-    if (cached && cached.expiresAt > now) {
-      return cached.promise;
-    }
-
-    const promise = this.buildProjectPlacement(cwd);
-    this.projectPlacementCache.set(cwd, {
-      expiresAt: now + PROJECT_PLACEMENT_CACHE_TTL_MS,
-      promise,
-    });
-    return promise;
-  }
-
   private async forwardAgentUpdate(agent: ManagedAgent): Promise<void> {
     try {
       const subscription = this.agentUpdatesSubscription;
@@ -1137,7 +1142,7 @@ export class Session {
       const matches = this.matchesAgentFilter(payload, subscription.filter);
 
       if (matches) {
-        const project = await this.getProjectPlacement(payload.cwd);
+        const project = await this.buildProjectPlacement(payload.cwd);
         this.emit({
           type: "agent_update",
           payload: { kind: "upsert", agent: payload, project },
@@ -1173,11 +1178,7 @@ export class Session {
           break;
 
         case "fetch_agents_request":
-          await this.handleFetchAgents(msg.requestId, msg.filter);
+          await this.handleFetchAgents(msg);
-          break;
-
-        case "fetch_agents_grouped_by_project_request":
-          await this.handleFetchAgentsGroupedByProject(msg.requestId, msg.filter);
           break;
 
         case "fetch_agent_request":
@@ -4876,102 +4877,320 @@ export class Session {
     return this.buildStoredAgentPayload(record);
   }
 
-  private async handleFetchAgents(
+  private normalizeFetchAgentsSort(
-    requestId: string,
+    sort: FetchAgentsRequestSort[] | undefined
-    filter?: { labels?: Record<string, string> }
+  ): FetchAgentsRequestSort[] {
-  ): Promise<void> {
+    const fallback: FetchAgentsRequestSort[] = [
-    try {
+      { key: "updated_at", direction: "desc" },
-      const agents = await this.listAgentPayloads(filter);
+    ];
-      this.emit({
+    if (!sort || sort.length === 0) {
-        type: "fetch_agents_response",
+      return fallback;
-        payload: { requestId, agents },
-      });
-    } catch (error) {
-      this.sessionLogger.error({ err: error }, "Failed to handle fetch_agents_request");
-      this.emit({
-        type: "fetch_agents_response",
-        payload: { requestId, agents: [] },
-      });
-    }
-  }
-
-  private async listAgentsGroupedByProjectPayload(filter?: {
-    labels?: Record<string, string>;
-  }): Promise<Array<{
-    projectKey: string;
-    projectName: string;
-    agents: Array<{
-      agent: AgentSnapshotPayload;
-      checkout: ProjectCheckoutLitePayload;
-    }>;
-  }>> {
-    const agents = await this.listAgentPayloads(filter);
-    const visibleAgents = agents
-      .filter((agent) => !agent.archivedAt)
-      .sort(
-        (left, right) =>
-          Date.parse(right.updatedAt || "") - Date.parse(left.updatedAt || "")
-      );
-
-    const grouped = new Map<
-      string,
-      {
-        projectKey: string;
-        projectName: string;
-        agents: Array<{
-          agent: AgentSnapshotPayload;
-          checkout: ProjectCheckoutLitePayload;
-        }>;
-      }
-    >();
-
-    // Warm project placement status for all visible roots up front to avoid serial N+1 latency.
-    for (const agent of visibleAgents) {
-      void this.getProjectPlacement(agent.cwd);
     }
 
-    for (const agent of visibleAgents) {
+    const deduped: FetchAgentsRequestSort[] = [];
-      const project = await this.getProjectPlacement(agent.cwd);
+    const seen = new Set<string>();
-      const projectKey = project.projectKey;
+    for (const entry of sort) {
-
+      if (seen.has(entry.key)) {
-      let group = grouped.get(projectKey);
-      if (!group) {
-        group = {
-          projectKey,
-          projectName: project.projectName,
-          agents: [],
-        };
-        grouped.set(projectKey, group);
-      }
-
-      if (group.agents.length >= MAX_AGENTS_PER_PROJECT) {
         continue;
       }
-
+      seen.add(entry.key);
-      group.agents.push({ agent, checkout: project.checkout });
+      deduped.push(entry);
     }
-
+    return deduped.length > 0 ? deduped : fallback;
-    return Array.from(grouped.values());
   }
 
-  private async handleFetchAgentsGroupedByProject(
+  private getStatusPriority(agent: AgentSnapshotPayload): number {
-    requestId: string,
+    const requiresAttention = agent.requiresAttention ?? false;
-    filter?: { labels?: Record<string, string> }
+    const attentionReason = agent.attentionReason ?? null;
+    if (requiresAttention && attentionReason === "permission") {
+      return 0;
+    }
+    if (agent.status === "error" || attentionReason === "error") {
+      return 1;
+    }
+    if (agent.status === "running") {
+      return 2;
+    }
+    if (agent.status === "initializing") {
+      return 3;
+    }
+    return 4;
+  }
+
+  private getFetchAgentsSortValue(
+    entry: FetchAgentsResponseEntry,
+    key: FetchAgentsRequestSort["key"]
+  ): string | number | null {
+    switch (key) {
+      case "status_priority":
+        return this.getStatusPriority(entry.agent);
+      case "created_at":
+        return Date.parse(entry.agent.createdAt);
+      case "updated_at":
+        return Date.parse(entry.agent.updatedAt);
+      case "title":
+        return entry.agent.title?.toLocaleLowerCase() ?? "";
+    }
+  }
+
+  private compareSortValues(
+    left: string | number | null,
+    right: string | number | null
+  ): number {
+    if (left === right) {
+      return 0;
+    }
+    if (left === null) {
+      return -1;
+    }
+    if (right === null) {
+      return 1;
+    }
+    if (typeof left === "number" && typeof right === "number") {
+      return left < right ? -1 : 1;
+    }
+    return String(left).localeCompare(String(right));
+  }
+
+  private compareFetchAgentsEntries(
+    left: FetchAgentsResponseEntry,
+    right: FetchAgentsResponseEntry,
+    sort: FetchAgentsRequestSort[]
+  ): number {
+    for (const spec of sort) {
+      const leftValue = this.getFetchAgentsSortValue(left, spec.key);
+      const rightValue = this.getFetchAgentsSortValue(right, spec.key);
+      const base = this.compareSortValues(leftValue, rightValue);
+      if (base === 0) {
+        continue;
+      }
+      return spec.direction === "asc" ? base : -base;
+    }
+    return left.agent.id.localeCompare(right.agent.id);
+  }
+
+  private encodeFetchAgentsCursor(
+    entry: FetchAgentsResponseEntry,
+    sort: FetchAgentsRequestSort[]
+  ): string {
+    const values: Record<string, string | number | null> = {};
+    for (const spec of sort) {
+      values[spec.key] = this.getFetchAgentsSortValue(entry, spec.key);
+    }
+    return Buffer.from(
+      JSON.stringify({
+        sort,
+        values,
+        id: entry.agent.id,
+      }),
+      "utf8"
+    ).toString("base64url");
+  }
+
+  private decodeFetchAgentsCursor(
+    cursor: string,
+    sort: FetchAgentsRequestSort[]
+  ): FetchAgentsCursor {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(Buffer.from(cursor, "base64url").toString("utf8"));
+    } catch {
+      throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+    }
+
+    if (!parsed || typeof parsed !== "object") {
+      throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+    }
+
+    const payload = parsed as {
+      sort?: unknown;
+      values?: unknown;
+      id?: unknown;
+    };
+
+    if (!Array.isArray(payload.sort) || typeof payload.id !== "string") {
+      throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+    }
+    if (!payload.values || typeof payload.values !== "object") {
+      throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+    }
+
+    const cursorSort: FetchAgentsRequestSort[] = [];
+    for (const item of payload.sort) {
+      if (
+        !item ||
+        typeof item !== "object" ||
+        typeof (item as { key?: unknown }).key !== "string" ||
+        typeof (item as { direction?: unknown }).direction !== "string"
+      ) {
+        throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+      }
+
+      const key = (item as { key: string }).key;
+      const direction = (item as { direction: string }).direction;
+      if (
+        (key !== "status_priority" &&
+          key !== "created_at" &&
+          key !== "updated_at" &&
+          key !== "title") ||
+        (direction !== "asc" && direction !== "desc")
+      ) {
+        throw new SessionRequestError("invalid_cursor", "Invalid fetch_agents cursor");
+      }
+      cursorSort.push({ key, direction });
+    }
+
+    if (
+      cursorSort.length !== sort.length ||
+      cursorSort.some(
+        (entry, index) =>
+          entry.key !== sort[index]?.key ||
+          entry.direction !== sort[index]?.direction
+      )
+    ) {
+      throw new SessionRequestError(
+        "invalid_cursor",
+        "fetch_agents cursor does not match current sort"
+      );
+    }
+
+    return {
+      sort: cursorSort,
+      values: payload.values as Record<string, string | number | null>,
+      id: payload.id,
+    };
+  }
+
+  private compareEntryWithCursor(
+    entry: FetchAgentsResponseEntry,
+    cursor: FetchAgentsCursor,
+    sort: FetchAgentsRequestSort[]
+  ): number {
+    for (const spec of sort) {
+      const leftValue = this.getFetchAgentsSortValue(entry, spec.key);
+      const rightValue =
+        cursor.values[spec.key] !== undefined ? cursor.values[spec.key] ?? null : null;
+      const base = this.compareSortValues(leftValue, rightValue);
+      if (base === 0) {
+        continue;
+      }
+      return spec.direction === "asc" ? base : -base;
+    }
+    return entry.agent.id.localeCompare(cursor.id);
+  }
+
+  private async listFetchAgentsEntries(
+    request: Extract<SessionInboundMessage, { type: "fetch_agents_request" }>
+  ): Promise<{
+    entries: FetchAgentsResponseEntry[];
+    pageInfo: FetchAgentsResponsePageInfo;
+  }> {
+    const filter = request.filter;
+    const sort = this.normalizeFetchAgentsSort(request.sort);
+    const includeArchived = filter?.includeArchived ?? false;
+
+    let agents = await this.listAgentPayloads({
+      labels: filter?.labels,
+    });
+
+    if (!includeArchived) {
+      agents = agents.filter((agent) => !agent.archivedAt);
+    }
+
+    if (filter?.statuses && filter.statuses.length > 0) {
+      const statuses = new Set(filter.statuses);
+      agents = agents.filter((agent) => statuses.has(agent.status));
+    }
+
+    if (typeof filter?.requiresAttention === "boolean") {
+      agents = agents.filter(
+        (agent) =>
+          (agent.requiresAttention ?? false) === filter.requiresAttention
+      );
+    }
+
+    const placementByCwd = new Map<string, Promise<ProjectPlacementPayload>>();
+    const getPlacement = (cwd: string): Promise<ProjectPlacementPayload> => {
+      const existing = placementByCwd.get(cwd);
+      if (existing) {
+        return existing;
+      }
+      const placementPromise = this.buildProjectPlacement(cwd);
+      placementByCwd.set(cwd, placementPromise);
+      return placementPromise;
+    };
+
+    let entries = await Promise.all(
+      agents.map(async (agent) => ({
+        agent,
+        project: await getPlacement(agent.cwd),
+      }))
+    );
+
+    if (filter?.projectKeys && filter.projectKeys.length > 0) {
+      const projectKeys = new Set(filter.projectKeys.filter((item) => item.trim().length > 0));
+      entries = entries.filter((entry) => projectKeys.has(entry.project.projectKey));
+    }
+
+    entries.sort((left, right) =>
+      this.compareFetchAgentsEntries(left, right, sort)
+    );
+
+    const cursorToken = request.page?.cursor;
+    if (cursorToken) {
+      const cursor = this.decodeFetchAgentsCursor(cursorToken, sort);
+      entries = entries.filter(
+        (entry) => this.compareEntryWithCursor(entry, cursor, sort) > 0
+      );
+    }
+
+    const limit = request.page?.limit ?? entries.length;
+    const pagedEntries = entries.slice(0, limit);
+    const hasMore = entries.length > limit;
+    const nextCursor =
+      hasMore && pagedEntries.length > 0
+        ? this.encodeFetchAgentsCursor(
+            pagedEntries[pagedEntries.length - 1],
+            sort
+          )
+        : null;
+
+    return {
+      entries: pagedEntries,
+      pageInfo: {
+        nextCursor,
+        prevCursor: request.page?.cursor ?? null,
+        hasMore,
+      },
+    };
+  }
+
+  private async handleFetchAgents(
+    request: Extract<SessionInboundMessage, { type: "fetch_agents_request" }>
   ): Promise<void> {
     try {
-      const groups = await this.listAgentsGroupedByProjectPayload(filter);
+      const payload = await this.listFetchAgentsEntries(request);
       this.emit({
-        type: "fetch_agents_grouped_by_project_response",
+        type: "fetch_agents_response",
-        payload: { requestId, groups },
+        payload: {
+          requestId: request.requestId,
+          ...payload,
+        },
       });
     } catch (error) {
-      this.sessionLogger.error(
+      const code =
-        { err: error },
+        error instanceof SessionRequestError ? error.code : "fetch_agents_failed";
-        "Failed to handle fetch_agents_grouped_by_project_request"
+      const message =
-      );
+        error instanceof Error ? error.message : "Failed to fetch agents";
+      this.sessionLogger.error({ err: error }, "Failed to handle fetch_agents_request");
       this.emit({
-        type: "fetch_agents_grouped_by_project_response",
+        type: "rpc_error",
-        payload: { requestId, groups: [] },
+        payload: {
+          requestId: request.requestId,
+          requestType: request.type,
+          error: message,
+          code,
+        },
       });
     }
   }
@@ -5962,6 +6181,10 @@ export class Session {
       unsubscribe();
     }
     this.terminalSubscriptions.clear();
+    for (const unsubscribeExit of this.terminalExitSubscriptions.values()) {
+      unsubscribeExit();
+    }
+    this.terminalExitSubscriptions.clear();
     this.detachAllTerminalStreams({ emitExit: false });
 
     for (const target of this.checkoutDiffTargets.values()) {
@@ -5975,6 +6198,43 @@ export class Session {
   // Terminal Handlers
   // ============================================================================
 
+  private ensureTerminalExitSubscription(terminal: TerminalSession): void {
+    if (this.terminalExitSubscriptions.has(terminal.id)) {
+      return;
+    }
+
+    const unsubscribeExit = terminal.onExit(() => {
+      this.handleTerminalExited(terminal.id);
+    });
+    this.terminalExitSubscriptions.set(terminal.id, unsubscribeExit);
+  }
+
+  private handleTerminalExited(terminalId: string): void {
+    const unsubscribeExit = this.terminalExitSubscriptions.get(terminalId);
+    if (unsubscribeExit) {
+      unsubscribeExit();
+      this.terminalExitSubscriptions.delete(terminalId);
+    }
+
+    const unsubscribe = this.terminalSubscriptions.get(terminalId);
+    if (unsubscribe) {
+      try {
+        unsubscribe();
+      } catch (error) {
+        this.sessionLogger.warn(
+          { err: error, terminalId },
+          "Failed to unsubscribe terminal after process exit"
+        );
+      }
+      this.terminalSubscriptions.delete(terminalId);
+    }
+
+    const streamId = this.terminalStreamByTerminalId.get(terminalId);
+    if (typeof streamId === "number") {
+      this.detachTerminalStream(streamId, { emitExit: true });
+    }
+  }
+
   private async handleListTerminalsRequest(msg: ListTerminalsRequest): Promise<void> {
     if (!this.terminalManager) {
       this.emit({
@@ -5990,6 +6250,9 @@ export class Session {
 
     try {
       const terminals = await this.terminalManager.getTerminals(msg.cwd);
+      for (const terminal of terminals) {
+        this.ensureTerminalExitSubscription(terminal);
+      }
       this.emit({
         type: "list_terminals_response",
         payload: {
@@ -6029,6 +6292,7 @@ export class Session {
         cwd: msg.cwd,
         name: msg.name,
       });
+      this.ensureTerminalExitSubscription(session);
       this.emit({
         type: "create_terminal_response",
         payload: {
@@ -6077,6 +6341,7 @@ export class Session {
       });
       return;
     }
+    this.ensureTerminalExitSubscription(session);
 
     // Unsubscribe from previous subscription if any
     const existing = this.terminalSubscriptions.get(msg.terminalId);
@@ -6128,6 +6393,7 @@ export class Session {
       this.sessionLogger.warn({ terminalId: msg.terminalId }, "Terminal not found for input");
       return;
     }
+    this.ensureTerminalExitSubscription(session);
 
     session.send(msg.message);
   }

packages/server/src/shared/messages.ts

@@ -458,16 +458,24 @@ export const FetchAgentsRequestMessageSchema = z.object({
   filter: z
     .object({
       labels: z.record(z.string()).optional(),
+      projectKeys: z.array(z.string()).optional(),
+      statuses: z.array(AgentStatusSchema).optional(),
+      includeArchived: z.boolean().optional(),
+      requiresAttention: z.boolean().optional(),
     })
     .optional(),
-});
+  sort: z
-
+    .array(
-export const FetchAgentsGroupedByProjectRequestMessageSchema = z.object({
+      z.object({
-  type: z.literal("fetch_agents_grouped_by_project_request"),
+        key: z.enum(["status_priority", "created_at", "updated_at", "title"]),
-  requestId: z.string(),
+        direction: z.enum(["asc", "desc"]),
-  filter: z
+      })
+    )
+    .optional(),
+  page: z
     .object({
-      labels: z.record(z.string()).optional(),
+      limit: z.number().int().positive().max(1000),
+      cursor: z.string().min(1).optional(),
     })
     .optional(),
 });
@@ -1002,7 +1010,6 @@ export const SessionInboundMessageSchema = z.discriminatedUnion("type", [
   AbortRequestMessageSchema,
   AudioPlayedMessageSchema,
   FetchAgentsRequestMessageSchema,
-  FetchAgentsGroupedByProjectRequestMessageSchema,
   FetchAgentRequestMessageSchema,
   SubscribeAgentUpdatesMessageSchema,
   UnsubscribeAgentUpdatesMessageSchema,
@@ -1399,26 +1406,17 @@ export const FetchAgentsResponseMessageSchema = z.object({
   type: z.literal("fetch_agents_response"),
   payload: z.object({
     requestId: z.string(),
-    agents: z.array(AgentSnapshotPayloadSchema),
+    entries: z.array(
-  }),
+      z.object({
-});
+        agent: AgentSnapshotPayloadSchema,
-
+        project: ProjectPlacementPayloadSchema,
-const ProjectGroupedAgentEntryPayloadSchema = z.object({
+      })
-  agent: AgentSnapshotPayloadSchema,
+    ),
-  checkout: ProjectCheckoutLitePayloadSchema,
+    pageInfo: z.object({
-});
+      nextCursor: z.string().nullable(),
-
+      prevCursor: z.string().nullable(),
-const ProjectGroupPayloadSchema = z.object({
+      hasMore: z.boolean(),
-  projectKey: z.string(),
+    }),
-  projectName: z.string(),
-  agents: z.array(ProjectGroupedAgentEntryPayloadSchema),
-});
-
-export const FetchAgentsGroupedByProjectResponseMessageSchema = z.object({
-  type: z.literal("fetch_agents_grouped_by_project_response"),
-  payload: z.object({
-    requestId: z.string(),
-    groups: z.array(ProjectGroupPayloadSchema),
   }),
 });
 
@@ -1972,7 +1970,6 @@ export const SessionOutboundMessageSchema = z.discriminatedUnion("type", [
   AgentStreamMessageSchema,
   AgentStatusMessageSchema,
   FetchAgentsResponseMessageSchema,
-  FetchAgentsGroupedByProjectResponseMessageSchema,
   FetchAgentResponseMessageSchema,
   FetchAgentTimelineResponseMessageSchema,
   SendAgentMessageResponseMessageSchema,
@@ -2042,9 +2039,6 @@ export type ProjectPlacementPayload = z.infer<typeof ProjectPlacementPayloadSche
 export type FetchAgentsResponseMessage = z.infer<
   typeof FetchAgentsResponseMessageSchema
 >;
-export type FetchAgentsGroupedByProjectResponseMessage = z.infer<
-  typeof FetchAgentsGroupedByProjectResponseMessageSchema
->;
 export type FetchAgentResponseMessage = z.infer<
   typeof FetchAgentResponseMessageSchema
 >;
@@ -2079,9 +2073,6 @@ export type ActivityLogPayload = z.infer<typeof ActivityLogPayloadSchema>;
 // Type exports for inbound message types
 export type VoiceAudioChunkMessage = z.infer<typeof VoiceAudioChunkMessageSchema>;
 export type FetchAgentsRequestMessage = z.infer<typeof FetchAgentsRequestMessageSchema>;
-export type FetchAgentsGroupedByProjectRequestMessage = z.infer<
-  typeof FetchAgentsGroupedByProjectRequestMessageSchema
->;
 export type FetchAgentRequestMessage = z.infer<typeof FetchAgentRequestMessageSchema>;
 export type SendAgentMessageRequest = z.infer<typeof SendAgentMessageRequestSchema>;
 export type WaitForFinishRequest = z.infer<typeof WaitForFinishRequestSchema>;

packages/server/src/terminal/terminal-manager.test.ts

@@ -1,6 +1,21 @@
 import { describe, it, expect, afterEach } from "vitest";
 import { createTerminalManager, type TerminalManager } from "./terminal-manager.js";
 
+async function waitForCondition(
+  predicate: () => boolean,
+  timeoutMs: number,
+  intervalMs = 25
+): Promise<void> {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    if (predicate()) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms waiting for condition`);
+}
+
 describe("TerminalManager", () => {
   let manager: TerminalManager;
 
@@ -136,6 +151,21 @@ describe("TerminalManager", () => {
       manager = createTerminalManager();
       expect(() => manager.killTerminal("unknown-id")).not.toThrow();
     });
+
+    it("auto-removes terminal when shell exits", async () => {
+      manager = createTerminalManager();
+      const terminals = await manager.getTerminals("/tmp");
+      const exitedId = terminals[0].id;
+      terminals[0].send({ type: "input", data: "\u0004" });
+
+      await waitForCondition(() => manager.getTerminal(exitedId) === undefined, 10000);
+
+      expect(manager.getTerminal(exitedId)).toBeUndefined();
+
+      const remaining = await manager.getTerminals("/tmp");
+      expect(remaining).toHaveLength(1);
+      expect(remaining[0].id).not.toBe(exitedId);
+    });
   });
 
   describe("listDirectories", () => {
@@ -161,12 +191,14 @@ describe("TerminalManager", () => {
       manager = createTerminalManager();
       const tmpTerminals = await manager.getTerminals("/tmp");
       const homeTerminals = await manager.getTerminals("/home");
+      const tmpId = tmpTerminals[0].id;
+      const homeId = homeTerminals[0].id;
 
       manager.killAll();
 
       expect(manager.listDirectories()).toEqual([]);
-      expect(manager.getTerminal(tmpTerminals[0].id)).toBeUndefined();
+      expect(manager.getTerminal(tmpId)).toBeUndefined();
-      expect(manager.getTerminal(homeTerminals[0].id)).toBeUndefined();
+      expect(manager.getTerminal(homeId)).toBeUndefined();
     });
   });
 });

packages/server/src/terminal/terminal-manager.ts

@@ -12,6 +12,7 @@ export interface TerminalManager {
 export function createTerminalManager(): TerminalManager {
   const terminalsByCwd = new Map<string, TerminalSession[]>();
   const terminalsById = new Map<string, TerminalSession>();
+  const terminalExitUnsubscribeById = new Map<string, () => void>();
 
   function assertAbsolutePath(cwd: string): void {
     if (!cwd.startsWith("/")) {
@@ -19,16 +20,56 @@ export function createTerminalManager(): TerminalManager {
     }
   }
 
+  function removeSessionById(id: string, options: { kill: boolean }): void {
+    const session = terminalsById.get(id);
+    if (!session) {
+      return;
+    }
+
+    const unsubscribeExit = terminalExitUnsubscribeById.get(id);
+    if (unsubscribeExit) {
+      unsubscribeExit();
+      terminalExitUnsubscribeById.delete(id);
+    }
+
+    terminalsById.delete(id);
+
+    const terminals = terminalsByCwd.get(session.cwd);
+    if (terminals) {
+      const index = terminals.findIndex((terminal) => terminal.id === id);
+      if (index !== -1) {
+        terminals.splice(index, 1);
+      }
+      if (terminals.length === 0) {
+        terminalsByCwd.delete(session.cwd);
+      }
+    }
+
+    if (options.kill) {
+      session.kill();
+    }
+  }
+
+  function registerSession(session: TerminalSession): TerminalSession {
+    terminalsById.set(session.id, session);
+    const unsubscribeExit = session.onExit(() => {
+      removeSessionById(session.id, { kill: false });
+    });
+    terminalExitUnsubscribeById.set(session.id, unsubscribeExit);
+    return session;
+  }
+
   return {
     async getTerminals(cwd: string): Promise<TerminalSession[]> {
       assertAbsolutePath(cwd);
 
       let terminals = terminalsByCwd.get(cwd);
       if (!terminals || terminals.length === 0) {
-        const session = await createTerminal({ cwd, name: "Terminal 1" });
+        const session = registerSession(
+          await createTerminal({ cwd, name: "Terminal 1" })
+        );
         terminals = [session];
         terminalsByCwd.set(cwd, terminals);
-        terminalsById.set(session.id, session);
       }
       return terminals;
     },
@@ -38,14 +79,15 @@ export function createTerminalManager(): TerminalManager {
 
       const terminals = terminalsByCwd.get(options.cwd) ?? [];
       const defaultName = `Terminal ${terminals.length + 1}`;
-      const session = await createTerminal({
+      const session = registerSession(
-        cwd: options.cwd,
+        await createTerminal({
-        name: options.name ?? defaultName,
+          cwd: options.cwd,
-      });
+          name: options.name ?? defaultName,
+        })
+      );
 
       terminals.push(session);
       terminalsByCwd.set(options.cwd, terminals);
-      terminalsById.set(session.id, session);
 
       return session;
     },
@@ -55,22 +97,7 @@ export function createTerminalManager(): TerminalManager {
     },
 
     killTerminal(id: string): void {
-      const session = terminalsById.get(id);
+      removeSessionById(id, { kill: true });
-      if (!session) return;
-
-      session.kill();
-      terminalsById.delete(id);
-
-      const terminals = terminalsByCwd.get(session.cwd);
-      if (terminals) {
-        const index = terminals.indexOf(session);
-        if (index !== -1) {
-          terminals.splice(index, 1);
-        }
-        if (terminals.length === 0) {
-          terminalsByCwd.delete(session.cwd);
-        }
-      }
     },
 
     listDirectories(): string[] {
@@ -78,11 +105,9 @@ export function createTerminalManager(): TerminalManager {
     },
 
     killAll(): void {
-      for (const session of terminalsById.values()) {
+      for (const id of Array.from(terminalsById.keys())) {
-        session.kill();
+        removeSessionById(id, { kill: true });
       }
-      terminalsByCwd.clear();
-      terminalsById.clear();
     },
   };
 }

packages/server/src/terminal/terminal.ts

@@ -64,6 +64,7 @@ export interface TerminalSession {
   cwd: string;
   send(msg: ClientMessage): void;
   subscribe(listener: (msg: ServerMessage) => void): () => void;
+  onExit(listener: () => void): () => void;
   subscribeRaw(
     listener: (chunk: TerminalRawChunk) => void,
     options?: { fromOffset?: number }
@@ -190,6 +191,7 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
   const id = randomUUID();
   const listeners = new Set<(msg: ServerMessage) => void>();
   const rawListeners = new Set<(chunk: TerminalRawChunk) => void>();
+  const exitListeners = new Set<() => void>();
   const rawOutputChunks: Array<{
     startOffset: number;
     endOffset: number;
@@ -199,6 +201,8 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
   let rawBufferBytes = 0;
   let outputOffset = 0;
   let killed = false;
+  let disposed = false;
+  let exitEmitted = false;
 
   // Create xterm.js headless terminal
   const terminal = new Terminal({
@@ -221,6 +225,32 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
     },
   });
 
+  function emitExit(): void {
+    if (exitEmitted) {
+      return;
+    }
+    exitEmitted = true;
+    for (const listener of Array.from(exitListeners)) {
+      try {
+        listener();
+      } catch {
+        // no-op
+      }
+    }
+    exitListeners.clear();
+  }
+
+  function disposeResources(): void {
+    if (disposed) {
+      return;
+    }
+    disposed = true;
+    terminal.dispose();
+    listeners.clear();
+    rawListeners.clear();
+    exitListeners.clear();
+  }
+
   function appendRawOutputChunk(data: string): void {
     const chunkBytes = Buffer.byteLength(data);
     if (chunkBytes <= 0) {
@@ -292,6 +322,8 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
 
   ptyProcess.onExit(() => {
     killed = true;
+    emitExit();
+    disposeResources();
   });
 
   function getState(): TerminalState {
@@ -340,6 +372,24 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
     };
   }
 
+  function onExit(listener: () => void): () => void {
+    if (killed) {
+      queueMicrotask(() => {
+        try {
+          listener();
+        } catch {
+          // no-op
+        }
+      });
+      return () => {};
+    }
+
+    exitListeners.add(listener);
+    return () => {
+      exitListeners.delete(listener);
+    };
+  }
+
   function subscribeRaw(
     listener: (chunk: TerminalRawChunk) => void,
     options?: { fromOffset?: number }
@@ -380,11 +430,12 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
   }
 
   function kill(): void {
-    if (killed) return;
+    if (!killed) {
-    killed = true;
+      killed = true;
-    ptyProcess.kill();
+      ptyProcess.kill();
-    terminal.dispose();
+      emitExit();
-    rawListeners.clear();
+    }
+    disposeResources();
   }
 
   // Small delay to let shell initialize
@@ -396,6 +447,7 @@ export async function createTerminal(options: CreateTerminalOptions): Promise<Te
     cwd,
       send,
       subscribe,
+      onExit,
       subscribeRaw,
       getOutputOffset,
       getState,