refactor(app): rename agents route to sessions with improved list layout

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

@@ -15,7 +15,7 @@ import { formatTimeAgo } from '@/utils/time'
 import { shortenPath } from '@/utils/shorten-path'
 import { type AggregatedAgent } from '@/hooks/use-aggregated-agents'
 import { useSessionStore } from '@/stores/session-store'
-import { AgentStatusDot } from '@/components/agent-status-dot'
+import { Archive } from 'lucide-react-native'
 import { prepareWorkspaceTab } from '@/utils/workspace-navigation'
 
 interface AgentListProps {
@@ -29,11 +29,9 @@ interface AgentListProps {
   showAttentionIndicator?: boolean
 }
 
-interface AgentListSection {
-  key: string
-  title: string
-  data: AggregatedAgent[]
-}
+type FlatListItem =
+  | { type: 'header'; key: string; title: string }
+  | { type: 'agent'; key: string; agent: AggregatedAgent }
 
 function deriveDateSectionLabel(lastActivityAt: Date): string {
   const now = new Date()
@@ -82,9 +80,11 @@ function formatStatusLabel(status: AggregatedAgent['status']): string {
 
 function SessionBadge({
   label,
+  icon,
   tone = 'neutral',
 }: {
   label: string
+  icon?: ReactElement
   tone?: 'neutral' | 'warning' | 'danger'
 }) {
   return (
@@ -95,6 +95,7 @@ function SessionBadge({
         tone === 'danger' && styles.badgeDanger,
       ]}
     >
+      {icon}
       <Text
         style={[
           styles.badgeText,
@@ -123,6 +124,7 @@ function SessionRow({
   onPress: (agent: AggregatedAgent) => void
   onLongPress: (agent: AggregatedAgent) => void
 }) {
+  const { theme } = useUnistyles()
   const timeAgo = formatTimeAgo(agent.lastActivityAt)
   const agentKey = `${agent.serverId}:${agent.id}`
   const isSelected = selectedAgentId === agentKey
@@ -141,9 +143,6 @@ function SessionRow({
       onLongPress={() => onLongPress(agent)}
       testID={`agent-row-${agent.serverId}-${agent.id}`}
     >
-      <View style={styles.rowLeading}>
-        <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
-      </View>
       <View style={styles.rowContent}>
         <View style={styles.rowTitleRow}>
           <Text
@@ -152,7 +151,12 @@ function SessionRow({
           >
             {agent.title || 'New session'}
           </Text>
-          {agent.archivedAt ? <SessionBadge label="Archived" /> : null}
+          {agent.archivedAt ? (
+            <SessionBadge
+              label="Archived"
+              icon={<Archive size={theme.fontSize.xs} color={theme.colors.foregroundMuted} />}
+            />
+          ) : null}
           {(agent.pendingPermissionCount ?? 0) > 0 ? (
             <SessionBadge label={`${agent.pendingPermissionCount} pending`} tone="warning" />
           ) : null}
@@ -198,47 +202,6 @@ function SessionRow({
   )
 }
 
-function SessionTableSection({
-  section,
-  isMobile,
-  selectedAgentId,
-  showAttentionIndicator,
-  onAgentPress,
-  onAgentLongPress,
-}: {
-  section: AgentListSection
-  isMobile: boolean
-  selectedAgentId?: string
-  showAttentionIndicator: boolean
-  onAgentPress: (agent: AggregatedAgent) => void
-  onAgentLongPress: (agent: AggregatedAgent) => void
-}) {
-  return (
-    <View style={styles.sectionBlock}>
-      <View style={styles.sectionHeading}>
-        <Text style={styles.sectionTitle}>{section.title}</Text>
-      </View>
-
-      <View style={styles.listCard}>
-        {section.data.map((agent, index) => (
-          <View
-            key={`${agent.serverId}:${agent.id}`}
-            style={index > 0 ? styles.rowDivider : undefined}
-          >
-            <SessionRow
-              agent={agent}
-              isMobile={isMobile}
-              selectedAgentId={selectedAgentId}
-              showAttentionIndicator={showAttentionIndicator}
-              onPress={onAgentPress}
-              onLongPress={onAgentLongPress}
-            />
-          </View>
-        ))}
-      </View>
-    </View>
-  )
-}
 
 export function AgentList({
   agents,
@@ -276,6 +239,7 @@ export function AgentList({
         serverId,
         workspaceId: agent.cwd,
         target: { kind: 'agent', agentId },
+        pin: Boolean(agent.archivedAt),
       })
       router.navigate(route as any)
     },
@@ -298,7 +262,7 @@ export function AgentList({
     setActionAgent(null)
   }, [actionAgent, actionClient])
 
-  const sections = useMemo((): AgentListSection[] => {
+  const flatItems = useMemo((): FlatListItem[] => {
     const order = ['Today', 'Yesterday', 'This week', 'This month', 'Older'] as const
     const buckets = new Map<string, AggregatedAgent[]>()
     for (const agent of agents) {
@@ -308,41 +272,53 @@ export function AgentList({
       buckets.set(label, existing)
     }
 
-    const result: AgentListSection[] = []
+    const result: FlatListItem[] = []
     for (const label of order) {
       const data = buckets.get(label)
       if (!data || data.length === 0) {
         continue
       }
-      result.push({ key: `date:${label}`, title: label, data })
+      result.push({ type: 'header', key: `header:${label}`, title: label })
+      for (const agent of data) {
+        result.push({ type: 'agent', key: `${agent.serverId}:${agent.id}`, agent })
+      }
     }
     return result
   }, [agents])
 
-  const renderSection: ListRenderItem<AgentListSection> = useCallback(
-    ({ item: section }) => (
-      <SessionTableSection
-        section={section}
-        isMobile={isMobile}
-        selectedAgentId={selectedAgentId}
-        showAttentionIndicator={showAttentionIndicator}
-        onAgentPress={handleAgentPress}
-        onAgentLongPress={handleAgentLongPress}
-      />
-    ),
+  const renderItem: ListRenderItem<FlatListItem> = useCallback(
+    ({ item }) => {
+      if (item.type === 'header') {
+        return (
+          <View style={styles.sectionHeading}>
+            <Text style={styles.sectionTitle}>{item.title}</Text>
+          </View>
+        )
+      }
+      return (
+        <SessionRow
+          agent={item.agent}
+          isMobile={isMobile}
+          selectedAgentId={selectedAgentId}
+          showAttentionIndicator={showAttentionIndicator}
+          onPress={handleAgentPress}
+          onLongPress={handleAgentLongPress}
+        />
+      )
+    },
     [handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId, showAttentionIndicator]
   )
 
-  const keyExtractor = useCallback((section: AgentListSection) => section.key, [])
+  const keyExtractor = useCallback((item: FlatListItem) => item.key, [])
 
   return (
     <>
       <FlatList
-        data={sections}
+        data={flatItems}
         style={styles.list}
         contentContainerStyle={styles.listContent}
         keyExtractor={keyExtractor}
-        renderItem={renderSection}
+        renderItem={renderItem}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
         ListFooterComponent={listFooterComponent}
@@ -417,18 +393,16 @@ const styles = StyleSheet.create((theme) => ({
       xs: theme.spacing[3],
       md: theme.spacing[6],
     },
-    paddingTop: theme.spacing[2],
+    paddingTop: theme.spacing[4],
     paddingBottom: theme.spacing[6],
     gap: theme.spacing[1],
   },
-  sectionBlock: {
-    marginTop: theme.spacing[2],
-  },
   sectionHeading: {
+    marginTop: theme.spacing[2],
     flexDirection: 'row',
     alignItems: 'center',
     gap: theme.spacing[3],
-    paddingHorizontal: theme.spacing[1],
+    paddingHorizontal: theme.spacing[3],
     marginBottom: theme.spacing[2],
   },
   sectionTitle: {
@@ -436,23 +410,6 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.medium,
     color: theme.colors.foregroundMuted,
   },
-  listCard: {
-    overflow: {
-      xs: 'hidden' as const,
-      md: 'visible' as const,
-    },
-    borderRadius: {
-      xs: theme.borderRadius.lg,
-      md: 0,
-    },
-  },
-  rowDivider: {
-    borderTopWidth: {
-      xs: StyleSheet.hairlineWidth,
-      md: 0,
-    },
-    borderTopColor: theme.colors.border,
-  },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -467,9 +424,6 @@ const styles = StyleSheet.create((theme) => ({
       md: 0,
     },
   },
-  rowLeading: {
-    marginRight: theme.spacing[3],
-  },
   rowContent: {
     flex: 1,
     minWidth: 0,
@@ -502,7 +456,7 @@ const styles = StyleSheet.create((theme) => ({
   sessionTitle: {
     flexShrink: 1,
     fontSize: theme.fontSize.sm,
-    fontWeight: '500',
+    fontWeight: '400',
     color: theme.colors.foreground,
     opacity: 0.86,
   },
@@ -535,6 +489,9 @@ const styles = StyleSheet.create((theme) => ({
     textAlign: 'right' as const,
   },
   badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[1],
     paddingHorizontal: theme.spacing[2],
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.full,

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

@@ -37,7 +37,7 @@ import { getHostRuntimeStore, useHosts } from '@/runtime/host-runtime'
 import { formatConnectionStatus } from '@/utils/daemons'
 import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from '@/constants/layout'
 import {
-  buildHostAgentsRoute,
+  buildHostSessionsRoute,
   buildHostSettingsRoute,
   mapPathnameToServer,
   parseServerIdFromPathname,
@@ -221,7 +221,7 @@ export const LeftSidebar = memo(function LeftSidebar({ selectedAgentId: _selecte
     if (!activeServerId) {
       return
     }
-    router.push(buildHostAgentsRoute(activeServerId) as any)
+    router.push(buildHostSessionsRoute(activeServerId) as any)
   }, [activeServerId])
 
   const handleHostSelect = useCallback(
@@ -283,6 +283,41 @@ export const LeftSidebar = memo(function LeftSidebar({ selectedAgentId: _selecte
   )
 })
 
+function SessionsButton({ onPress }: { onPress: () => void }) {
+  const { theme } = useUnistyles()
+  const pathname = usePathname()
+  const isActive = pathname.includes('/sessions')
+
+  return (
+    <Pressable
+      style={({ hovered }) => [
+        styles.newAgentButton,
+        hovered && styles.newAgentButtonHovered,
+        isActive && styles.newAgentButtonActive,
+      ]}
+      testID="sidebar-sessions"
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel="Sessions"
+      onPress={onPress}
+    >
+      {({ hovered }) => (
+        <>
+          <MessagesSquare
+            size={theme.iconSize.md}
+            color={hovered || isActive ? theme.colors.foreground : theme.colors.foregroundMuted}
+          />
+          <Text
+            style={[styles.newAgentButtonText, (hovered || isActive) && styles.newAgentButtonTextHovered]}
+          >
+            Sessions
+          </Text>
+        </>
+      )}
+    </Pressable>
+  )
+}
+
 function MobileSidebar({
   theme,
   activeServerId,
@@ -457,28 +492,7 @@ function MobileSidebar({
           <View style={styles.sidebarContent} pointerEvents="auto">
             <View style={styles.sidebarHeader}>
               <View style={styles.sidebarHeaderRow}>
-                <Pressable
-                  style={styles.newAgentButton}
-                  testID="sidebar-sessions"
-                  accessible
-                  accessibilityRole="button"
-                  accessibilityLabel="Sessions"
-                  onPress={handleViewMore}
-                >
-                  {({ hovered }) => (
-                    <>
-                      <MessagesSquare
-                        size={theme.iconSize.md}
-                        color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-                      />
-                      <Text
-                        style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}
-                      >
-                        Sessions
-                      </Text>
-                    </>
-                  )}
-                </Pressable>
+                <SessionsButton onPress={handleViewMore} />
               </View>
             </View>
 
@@ -623,28 +637,7 @@ function DesktopSidebar({
       ) : null}
       <View style={styles.sidebarHeader} {...dragHandlers}>
         <View style={styles.sidebarHeaderRow}>
-          <Pressable
-            style={styles.newAgentButton}
-            testID="sidebar-sessions"
-            accessible
-            accessibilityRole="button"
-            accessibilityLabel="Sessions"
-            onPress={handleViewMore}
-          >
-            {({ hovered }) => (
-              <>
-                <MessagesSquare
-                  size={theme.iconSize.md}
-                  color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-                />
-                <Text
-                  style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}
-                >
-                  Sessions
-                </Text>
-              </>
-            )}
-          </Pressable>
+          <SessionsButton onPress={handleViewMore} />
         </View>
       </View>
 
@@ -786,15 +779,14 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   newAgentButton: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     gap: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
-    paddingRight: theme.spacing[1],
-    paddingLeft: theme.spacing[3],
-    flexShrink: 0,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
   },
-  newAgentButtonHovered: {},
   newAgentButtonText: {
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,
@@ -803,6 +795,12 @@ const styles = StyleSheet.create((theme) => ({
   newAgentButtonTextHovered: {
     color: theme.colors.foreground,
   },
+  newAgentButtonHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
+  newAgentButtonActive: {
+    backgroundColor: theme.colors.surface1,
+  },
   hostTrigger: {
     flexDirection: 'row',
     alignItems: 'center',