feat: stream worktree setup progress and terminal subscriptions

packages/app/src/components/headers/back-header.tsx

@@ -11,7 +11,11 @@ interface BackHeaderProps {
   onBack?: () => void;
 }
 
-export function BackHeader({ title, rightContent, onBack }: BackHeaderProps) {
+export function BackHeader({
+  title,
+  rightContent,
+  onBack,
+}: BackHeaderProps) {
   const { theme } = useUnistyles();
 
   return (

packages/app/src/components/headers/menu-header.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-import { Text } from "react-native";
+import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { Menu, PanelLeft } from "lucide-react-native";
+import { PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { HeaderToggleButton } from "./header-toggle-button";
 import { usePanelStore } from "@/stores/panel-store";
@@ -12,7 +12,39 @@ interface MenuHeaderProps {
   rightContent?: ReactNode;
 }
 
-export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
+interface SidebarMenuToggleProps {
+  style?: StyleProp<ViewStyle>;
+  tooltipSide?: "left" | "right" | "top" | "bottom";
+  testID?: string;
+  nativeID?: string;
+}
+
+const MOBILE_MENU_LINE_WIDTH = 16;
+const MOBILE_MENU_LINE_SHORT_WIDTH = 8;
+const MOBILE_MENU_LINE_HEIGHT = 2;
+
+function MobileMenuIcon({ color }: { color: string }) {
+  return (
+    <View style={styles.mobileMenuIcon} pointerEvents="none">
+      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
+      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
+      <View
+        style={[
+          styles.mobileMenuLine,
+          styles.mobileMenuLineShort,
+          { backgroundColor: color },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function SidebarMenuToggle({
+  style,
+  tooltipSide = "right",
+  testID = "menu-button",
+  nativeID = "menu-button",
+}: SidebarMenuToggleProps = {}) {
   const { theme } = useUnistyles();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
@@ -22,29 +54,42 @@ export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
   const toggleShortcutKeys = getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."];
 
   const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
-  const MenuIcon = isMobile ? Menu : PanelLeft;
   const menuIconColor = !isMobile && isOpen
     ? theme.colors.foreground
     : theme.colors.foregroundMuted;
 
+  return (
+    <HeaderToggleButton
+      onPress={toggleAgentList}
+      tooltipLabel="Toggle sidebar"
+      tooltipKeys={toggleShortcutKeys}
+      tooltipSide={tooltipSide}
+      testID={testID}
+      nativeID={nativeID}
+      style={style}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={isOpen ? "Close menu" : "Open menu"}
+      accessibilityState={{ expanded: isOpen }}
+    >
+      {isMobile ? (
+        <MobileMenuIcon color={menuIconColor} />
+      ) : (
+        <PanelLeft size={16} color={menuIconColor} />
+      )}
+    </HeaderToggleButton>
+  );
+}
+
+export function MenuHeader({
+  title,
+  rightContent,
+}: MenuHeaderProps) {
   return (
     <ScreenHeader
       left={
         <>
-          <HeaderToggleButton
-            onPress={toggleAgentList}
-            tooltipLabel="Toggle sidebar"
-            tooltipKeys={toggleShortcutKeys}
-            tooltipSide="right"
-            testID="menu-button"
-            nativeID="menu-button"
-            accessible
-            accessibilityRole="button"
-            accessibilityLabel={isOpen ? "Close menu" : "Open menu"}
-            accessibilityState={{ expanded: isOpen }}
-          >
-            <MenuIcon size={isMobile ? 20 : 16} color={menuIconColor} />
-          </HeaderToggleButton>
+          <SidebarMenuToggle />
           {title && (
             <Text style={styles.title} numberOfLines={1}>
               {title}
@@ -71,4 +116,18 @@ const styles = StyleSheet.create((theme) => ({
     },
     color: theme.colors.foreground,
   },
+  mobileMenuIcon: {
+    width: MOBILE_MENU_LINE_WIDTH,
+    height: 12,
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+  },
+  mobileMenuLine: {
+    width: MOBILE_MENU_LINE_WIDTH,
+    height: MOBILE_MENU_LINE_HEIGHT,
+    borderRadius: theme.borderRadius.full,
+  },
+  mobileMenuLineShort: {
+    width: MOBILE_MENU_LINE_SHORT_WIDTH,
+  },
 }));

packages/app/src/components/headers/screen-header.tsx

@@ -16,7 +16,12 @@ interface ScreenHeaderProps {
  * Shared frame for the home/back headers so we only maintain padding, border,
  * and safe-area logic in one place.
  */
-export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) {
+export function ScreenHeader({
+  left,
+  right,
+  leftStyle,
+  rightStyle,
+}: ScreenHeaderProps) {
   const insets = useSafeAreaInsets();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets

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

@@ -1089,8 +1089,7 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     opacity: 0.78,
     fontSize: theme.fontSize.xs,
-    flexShrink: 1,
-    minWidth: 0,
+    flexShrink: 0,
   },
   agentMetaBranchBadge: {
     borderRadius: theme.borderRadius.full,
@@ -1098,7 +1097,8 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.border,
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 1,
-    flexShrink: 0,
+    flexShrink: 1,
+    minWidth: 0,
   },
   agentMetaBranchBadgeSelected: {
     borderColor: theme.colors.borderAccent,
@@ -1107,6 +1107,8 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     opacity: 0.76,
     fontSize: theme.fontSize.xs,
+    flexShrink: 1,
+    minWidth: 0,
   },
   selectionBar: {
     position: "absolute",

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

@@ -290,6 +290,35 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
     });
   }, [client, cwd, isConnected, queryClient, serverId]);
 
+  useEffect(() => {
+    if (!client || !isConnected || !cwd.startsWith("/")) {
+      return;
+    }
+
+    const unsubscribe = client.on("terminals_changed", (message) => {
+      if (message.type !== "terminals_changed") {
+        return;
+      }
+      if (message.payload.cwd !== cwd) {
+        return;
+      }
+      void queryClient.invalidateQueries({
+        queryKey: ["terminals", serverId, cwd],
+      });
+      void queryClient.refetchQueries({
+        queryKey: ["terminals", serverId, cwd],
+        type: "active",
+      });
+    });
+
+    client.subscribeTerminals({ cwd });
+
+    return () => {
+      unsubscribe();
+      client.unsubscribeTerminals({ cwd });
+    };
+  }, [client, cwd, isConnected, queryClient, serverId]);
+
   const createTerminalMutation = useMutation({
     mutationFn: async () => {
       if (!client) {

packages/app/src/components/tool-call-details.tsx

@@ -89,6 +89,43 @@ export function ToolCallDetailsContent({
         </View>
       </View>
     );
+  } else if (detail?.type === "worktree_setup") {
+    const setupLog = detail.log.replace(/^\n+/, "");
+    const hasLog = setupLog.length > 0;
+    sections.push(
+      <View
+        key="worktree-setup"
+        style={[styles.section, shouldFill && styles.fillHeight]}
+      >
+        <View style={[codeBlockStyle, shouldFill && styles.fillHeight]}>
+          <ScrollView
+            style={[
+              styles.codeVerticalScroll,
+              resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+              shouldFill && styles.fillHeight,
+            ]}
+            contentContainerStyle={styles.codeVerticalContent}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator
+          >
+            <ScrollView
+              horizontal
+              nestedScrollEnabled
+              showsHorizontalScrollIndicator
+              contentContainerStyle={styles.codeHorizontalContent}
+            >
+              <View style={styles.codeLine}>
+                <Text selectable style={styles.scrollText}>
+                  {hasLog
+                    ? setupLog
+                    : `Preparing worktree ${detail.branchName} at ${detail.worktreePath}`}
+                </Text>
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </View>
+    );
   } else if (detail?.type === "edit") {
     sections.push(
       <View