Merge branch 'main' into git-diff-panel-reorg

# Conflicts:
#	scripts/dev.sh

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

@@ -14,12 +14,12 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatTimeAgo } from "@/utils/time";
 import { shortenPath } from "@/utils/shorten-path";
+import { deriveBranchLabel, deriveProjectPath } from "@/utils/agent-display-info";
 import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import { useSessionStore } from "@/stores/session-store";
 import {
   CHECKOUT_STATUS_STALE_TIME,
   checkoutStatusQueryKey,
-  type CheckoutStatusPayload,
   useCheckoutStatusCacheOnly,
 } from "@/hooks/use-checkout-status-query";
 import {
@@ -105,35 +105,6 @@ export function AgentList({
     setActionAgent(null);
   }, [actionAgent, deleteAgent]);
 
-  const deriveBranchLabel = useCallback((checkout: CheckoutStatusPayload | null): string | null => {
-    if (!checkout || !checkout.isGit) {
-      return null;
-    }
-    const currentBranch: string | null = checkout.currentBranch ?? null;
-    const baseRef: string | null = checkout.baseRef ?? null;
-    if (!currentBranch) {
-      return null;
-    }
-    if (baseRef && currentBranch === baseRef) {
-      return null;
-    }
-    return currentBranch;
-  }, []);
-
-  const deriveProjectPath = useCallback(
-    (agent: AggregatedAgent, checkout: CheckoutStatusPayload | null): string => {
-      const basePath = checkout?.isGit ? (checkout.repoRoot ?? agent.cwd) : agent.cwd;
-      const worktreeMarker = ".paseo/worktrees/";
-      const idx = basePath.indexOf(worktreeMarker);
-      if (idx !== -1) {
-        const afterMarker = basePath.slice(idx + worktreeMarker.length);
-        return afterMarker;
-      }
-      return basePath;
-    },
-    []
-  );
-
   const viewabilityConfig = useMemo(
     () => ({ itemVisiblePercentThreshold: 30 }),
     []
@@ -190,7 +161,7 @@ export function AgentList({
         agentId: agent.id,
       });
       const checkout = checkoutQuery.data ?? null;
-      const projectPath = deriveProjectPath(agent, checkout);
+      const projectPath = deriveProjectPath(agent.cwd, checkout);
       const branchLabel = deriveBranchLabel(checkout);
 
       return (
@@ -233,8 +204,6 @@ export function AgentList({
       );
     },
     [
-      deriveBranchLabel,
-      deriveProjectPath,
       handleAgentLongPress,
       handleAgentPress,
       selectedAgentId,

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Pressable, Text } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Menu, PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
@@ -7,10 +7,11 @@ import { usePanelStore } from "@/stores/panel-store";
 
 interface MenuHeaderProps {
   title?: string;
+  subtitle?: string;
   rightContent?: ReactNode;
 }
 
-export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
+export function MenuHeader({ title, subtitle, rightContent }: MenuHeaderProps) {
   const { theme } = useUnistyles();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
@@ -32,9 +33,16 @@ export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
             <MenuIcon size={16} color={menuIconColor} />
           </Pressable>
           {title && (
-            <Text style={styles.title} numberOfLines={1}>
-              {title}
-            </Text>
+            <View style={styles.titleContainer}>
+              <Text style={styles.title} numberOfLines={1}>
+                {title}
+              </Text>
+              {subtitle && (
+                <Text style={styles.subtitle} numberOfLines={1}>
+                  {subtitle}
+                </Text>
+              )}
+            </View>
           )}
         </>
       }
@@ -55,13 +63,21 @@ const styles = StyleSheet.create((theme) => ({
     },
     borderRadius: theme.borderRadius.lg,
   },
-  title: {
+  titleContainer: {
     flex: 1,
-    fontSize: theme.fontSize.lg,
+    gap: theme.spacing[0],
+  },
+  title: {
+    fontSize: theme.fontSize.base,
     fontWeight: {
-      xs: theme.fontWeight.semibold,
-      md: "400",
+      xs: "400",
+      md: "300",
     },
     color: theme.colors.foreground,
   },
+  subtitle: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: "300",
+    color: theme.colors.foregroundMuted,
+  },
 }));