style(sidebar): change New Agent button to outline style

Make the button less prominent since it's not frequently used once
you're actively coding with an agent. Changed from filled primary
to outline with muted colors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -241,21 +241,11 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             {/* Header: New Agent button */}
             <View style={styles.sidebarHeader}>
               <Pressable
-                style={[
+                style={styles.newAgentButton}
-                  styles.newAgentButton,
-                  { backgroundColor: theme.colors.primary },
-                ]}
                 onPress={handleCreateAgentMobile}
               >
-                <Plus size={18} color={theme.colors.primaryForeground} />
+                <Plus size={18} color={theme.colors.mutedForeground} />
-                <Text
+                <Text style={styles.newAgentButtonText}>New Agent</Text>
-                  style={[
-                    styles.newAgentButtonText,
-                    { color: theme.colors.primaryForeground },
-                  ]}
-                >
-                  New Agent
-                </Text>
               </Pressable>
             </View>
 
@@ -294,21 +284,11 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
       {/* Header: New Agent button */}
       <View style={styles.sidebarHeader}>
         <Pressable
-          style={[
+          style={styles.newAgentButton}
-            styles.newAgentButton,
-            { backgroundColor: theme.colors.primary },
-          ]}
           onPress={handleCreateAgentDesktop}
         >
-          <Plus size={18} color={theme.colors.primaryForeground} />
+          <Plus size={18} color={theme.colors.mutedForeground} />
-          <Text
+          <Text style={styles.newAgentButtonText}>New Agent</Text>
-            style={[
-              styles.newAgentButtonText,
-              { color: theme.colors.primaryForeground },
-            ]}
-          >
-            New Agent
-          </Text>
         </Pressable>
       </View>
 
@@ -366,10 +346,13 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     paddingVertical: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
   },
   newAgentButtonText: {
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,
+    color: theme.colors.mutedForeground,
   },
   sidebarFooter: {
     paddingHorizontal: theme.spacing[4],