fix: simplify sidebar skeleton to flat shapes with pulsing opacity

Remove drop shadows and filled row backgrounds. Use flat surface2
shapes that pulse between 0.4-0.8 opacity with progressive section
fade-out. Align layout spacing to match the real sidebar.

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

@@ -11,7 +11,7 @@ function SkeletonPulse({
 }) {
   const opacity = pulse.interpolate({
     inputRange: [0, 1],
-    outputRange: [0.45, 0.95],
+    outputRange: [0.4, 0.8],
   });
 
   return <Animated.View style={[style, { opacity }]} />;
@@ -25,12 +25,12 @@ export function SidebarAgentListSkeleton() {
       Animated.sequence([
         Animated.timing(pulse, {
           toValue: 1,
-          duration: 850,
+          duration: 1000,
           useNativeDriver: true,
         }),
         Animated.timing(pulse, {
           toValue: 0,
-          duration: 850,
+          duration: 1000,
           useNativeDriver: true,
         }),
       ])
@@ -42,20 +42,25 @@ export function SidebarAgentListSkeleton() {
 
   return (
     <View style={styles.container}>
-      {Array.from({ length: 4 }).map((_, sectionIdx) => (
-        <View key={`skeleton-section-${sectionIdx}`} style={styles.section}>
+      {[1, 0.7, 0.4].map((sectionOpacity, sectionIdx) => (
+        <View
+          key={`skeleton-section-${sectionIdx}`}
+          style={[styles.section, { opacity: sectionOpacity }]}
+        >
           <View style={styles.sectionHeader}>
+            <SkeletonPulse pulse={pulse} style={styles.chevron} />
             <SkeletonPulse pulse={pulse} style={styles.projectIcon} />
             <SkeletonPulse pulse={pulse} style={styles.sectionTitle} />
           </View>
 
           <View style={styles.rows}>
             {Array.from({ length: 3 }).map((__, rowIdx) => (
-              <View key={`skeleton-row-${sectionIdx}-${rowIdx}`} style={styles.row}>
+              <View
+                key={`skeleton-row-${sectionIdx}-${rowIdx}`}
+                style={styles.row}
+              >
                 <SkeletonPulse pulse={pulse} style={styles.rowDot} />
-                <View style={styles.rowText}>
-                  <SkeletonPulse pulse={pulse} style={styles.rowTitle} />
-                </View>
+                <SkeletonPulse pulse={pulse} style={styles.rowTitle} />
                 <SkeletonPulse pulse={pulse} style={styles.rowBadge} />
               </View>
             ))}
@@ -69,37 +74,39 @@ export function SidebarAgentListSkeleton() {
 const styles = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    gap: theme.spacing[4],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[4],
   },
   section: {
-    gap: theme.spacing[2],
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[2],
   },
   sectionHeader: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    marginTop: theme.spacing[2],
+    marginBottom: theme.spacing[2],
+  },
+  chevron: {
+    width: 14,
+    height: 14,
+    borderRadius: theme.borderRadius.sm,
+    backgroundColor: theme.colors.surface2,
   },
   projectIcon: {
     width: 16,
     height: 16,
     borderRadius: theme.borderRadius.sm,
     backgroundColor: theme.colors.surface2,
-    shadowColor: theme.colors.foreground,
-    shadowOpacity: 0.18,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 0 },
   },
   sectionTitle: {
-    width: "52%",
+    width: "45%",
     height: 12,
     borderRadius: theme.borderRadius.sm,
     backgroundColor: theme.colors.surface2,
-    shadowColor: theme.colors.foreground,
-    shadowOpacity: 0.12,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 0 },
   },
   rows: {
     gap: theme.spacing[1],
@@ -109,29 +116,25 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[2],
     paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface1,
+    paddingHorizontal: theme.spacing[3],
+    marginLeft: theme.spacing[1],
   },
   rowDot: {
     width: 8,
     height: 8,
     borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.surface3,
-  },
-  rowText: {
-    flex: 1,
+    backgroundColor: theme.colors.surface2,
   },
   rowTitle: {
-    width: "70%",
-    height: 10,
+    flex: 1,
+    height: 12,
     borderRadius: theme.borderRadius.sm,
-    backgroundColor: theme.colors.surface3,
+    backgroundColor: theme.colors.surface2,
   },
   rowBadge: {
-    width: 46,
-    height: 18,
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.surface3,
+    width: 40,
+    height: 20,
+    borderRadius: theme.borderRadius.md,
+    backgroundColor: theme.colors.surface2,
   },
 }));