feat(ui): enhance loading spinner and update command configuration

- Increase rotating symbol size to 1.5rem for better visibility
- Remove inline size classes in favor of CSS-based sizing
- Add 'claude' command capability alongside 'claude-code' sidecar
- Remove deprecated externalBin configuration from tauri.conf.json
- Standardize rotating symbol styling across components

This improves the visual feedback for loading states and cleans up
the command execution configuration for better flexibility.

Author: mufeedvh

src-tauri/capabilities/default.json

@@ -18,6 +18,11 @@
           "name": "claude-code",
           "sidecar": true,
           "args": true
+        },
+        {
+          "name": "claude",
+          "sidecar": false,
+          "args": true
         }
       ]
     },
@@ -28,6 +33,11 @@
           "name": "claude-code",
           "sidecar": true,
           "args": true
+        },
+        {
+          "name": "claude",
+          "sidecar": false,
+          "args": true
         }
       ]
     },

src-tauri/tauri.conf.json

@@ -57,9 +57,6 @@
       "icons/128x128@2x.png",
       "icons/icon.icns",
       "icons/icon.png"
-    ],
-    "externalBin": [
-      "binaries/claude-code"
     ]
   }
 }

src/assets/shimmer.css

@@ -102,7 +102,7 @@
 .rotating-symbol {
   display: inline-block;
   color: #d97757;
-  font-size: inherit;
+  font-size: 1.5rem; /* Make it bigger! */
   margin-right: 0.5rem;
   font-weight: bold;
   vertical-align: text-bottom;

src/components/ClaudeCodeSession.tsx

@@ -879,7 +879,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
           animate={{ opacity: 1 }}
           className="flex items-center justify-center py-4 mb-40"
         >
-          <div className="rotating-symbol text-primary text-2xl" />
+          <div className="rotating-symbol text-primary" />
         </motion.div>
       )}
 
@@ -1113,7 +1113,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
               {isLoading && messages.length === 0 && (
                 <div className="flex items-center justify-center h-full">
                   <div className="flex items-center gap-3">
-                    <div className="rotating-symbol text-primary text-2xl" />
+                    <div className="rotating-symbol text-primary" />
                     <span className="text-sm text-muted-foreground">
                       {session ? "Loading session history..." : "Initializing Claude Code..."}
                     </span>

src/styles.css

@@ -446,6 +446,7 @@ button:focus-visible,
   line-height: 1;
   animation: fade-in 0.2s ease-out;
   font-weight: normal;
+  font-size: 1.5rem; /* Make it bigger! */
 }
 
 .rotating-symbol::before {
@@ -458,11 +459,7 @@ button:focus-visible,
   transform-origin: center;
 }
 
-/* Make the rotating symbol more prominent at larger sizes */
-.rotating-symbol.text-xl::before,
-.rotating-symbol.text-2xl::before {
-  font-weight: 900;
-}
+/* Removed special font-weight for larger sizes to maintain consistency */
 
 /* Shimmer hover effect */
 @keyframes shimmer {