feat: update sidebar agent workflow and host filter UI

2026-02-15 08:59:17 +07:00
parent 9da5b26db0
commit 41d1fa6d97
31 changed files with 2482 additions and 1133 deletions
@@ -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 { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
+import { useTauriDragHandlers } from "@/utils/tauri-window";
 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,
-    checkoutByAgentKey,
+    entries,
+    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);
-  }, [collapsedProjectKeys, sections]);
+    return entries.slice(0, 9).map((entry) => `${entry.agent.serverId}:${entry.agent.id}`);
+  }, [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);
-  }, [activeServerId]);
+    router.push(buildNewAgentRoute(targetServerId, targetWorkingDir) as any);
+  }, [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, { paddingTop: trafficLightPadding.top || styles.sidebarHeader.paddingTop }]}
-        {...dragHandlers}
-      >
+      <View style={styles.sidebarHeader} {...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],
-    paddingTop: theme.spacing[4],
-    paddingBottom: theme.spacing[3],
+    height: {
+      xs: HEADER_INNER_HEIGHT_MOBILE,
+      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],
-    paddingHorizontal: theme.spacing[1],
+    flexShrink: 0,
  },
  footerIconButton: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
    paddingVertical: theme.spacing[1],
    paddingHorizontal: theme.spacing[1],
  },
-  footerButtonText: {
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.normal,
+  listViewMoreButton: {
+    marginTop: theme.spacing[2],
+    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: {
@@ -384,7 +384,6 @@ export default function TerminalEmulator({
      terminal.write(outputText);
      renderedOutputRef.current = outputText;
    }
-    terminal.focus();

    return () => {
      inputDisposable.dispose();
@@ -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],
-    paddingHorizontal: theme.spacing[2],
-    paddingVertical: theme.spacing[2],
+    gap: theme.spacing[1],
+    paddingHorizontal: theme.spacing[1],
+    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",
@@ -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
      ? {}
      : {