feat: polished screenshots with brand icons, custom feature sets, and spaces

Add bundled client brand icons (Cursor, VS Code, Claude, Windsurf SVG/PNG). Update ClientsPage to recognize known clients by name and show correct icons. Sort feature sets: all > default > custom > server-all for better visibility. Add emoji icons to preseed custom feature sets. Add browser.refresh() after seeding to sync frontend store. Add 2 more preseed spaces for fuller screenshot. Add screenshot capture E2E test with DCR registration. Update mock bundle API fixtures with 10 realistic server definitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src-tauri/src/commands/oauth.rs

@@ -656,6 +656,28 @@ pub async fn get_oauth_clients(
     Ok(client_infos)
 }
 
+/// Approve a registered OAuth client by ID (for E2E testing).
+/// In production, clients are approved via the consent flow.
+#[tauri::command]
+pub async fn approve_oauth_client(
+    client_id: String,
+    gateway_state: State<'_, Arc<RwLock<GatewayAppState>>>,
+) -> Result<(), String> {
+    let app_state = gateway_state.read().await;
+    let Some(ref gw_state) = app_state.gateway_state else {
+        return Err("Gateway not running".to_string());
+    };
+    let state = gw_state.read().await;
+    let Some(repo) = state.inbound_client_repository() else {
+        return Err("Database not available".to_string());
+    };
+    repo.approve_client(&client_id)
+        .await
+        .map_err(|e| format!("Failed to approve client: {}", e))?;
+    info!("[OAuth] Approved client via test command: {}", client_id);
+    Ok(())
+}
+
 /// Information about a connected OAuth client
 #[derive(Debug, Serialize, Deserialize)]
 pub struct OAuthClientInfo {

apps/desktop/src-tauri/src/lib.rs

@@ -776,6 +776,7 @@ pub fn run() {
             commands::approve_oauth_consent,
             commands::get_pending_consent,
             commands::get_oauth_clients,
+            commands::approve_oauth_client,
             commands::update_oauth_client,
             commands::delete_oauth_client,
             commands::get_oauth_client_grants,

apps/desktop/src/assets/client-icons/claude.svg

@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
 import { listen } from '@tauri-apps/api/event';
+import cursorIcon from '@/assets/client-icons/cursor.svg';
+import vscodeIcon from '@/assets/client-icons/vscode.png';
+import claudeIcon from '@/assets/client-icons/claude.svg';
+import windsurfIcon from '@/assets/client-icons/windsurf.svg';
 import {
   Laptop,
   Loader2,
@@ -75,17 +79,35 @@ const CONNECTION_MODES = [
   },
 ];
 
-// Client icon component
+// Bundled icons for well-known AI clients (matched by client_name)
+const KNOWN_CLIENT_ICONS: Record<string, string> = {
+  cursor: cursorIcon,
+  'vs code': vscodeIcon,
+  vscode: vscodeIcon,
+  'visual studio code': vscodeIcon,
+  'claude desktop': claudeIcon,
+  claude: claudeIcon,
+  windsurf: windsurfIcon,
+  codeium: windsurfIcon,
+};
+
+// Client icon component — uses bundled icon for known clients, falls back to logo_uri, then emoji
 function ClientIcon({ logo_uri, client_name }: { logo_uri?: string | null; client_name: string }) {
-  if (logo_uri) {
-    return <img src={logo_uri} alt={client_name} className="w-6 h-6 rounded" />;
+  const iconUrl = KNOWN_CLIENT_ICONS[client_name.toLowerCase()] || logo_uri;
+  if (iconUrl) {
+    return (
+      <img
+        src={iconUrl}
+        alt={client_name}
+        className="w-full h-full object-contain rounded"
+        onError={(e) => {
+          e.currentTarget.style.display = 'none';
+          e.currentTarget.parentElement!.append(document.createTextNode('🤖'));
+        }}
+      />
+    );
   }
-  
-  // Default icons based on client name
-  if (client_name.toLowerCase().includes('cursor')) return '⚡';
-  if (client_name.toLowerCase().includes('vscode')) return '💻';
-  if (client_name.toLowerCase().includes('code')) return '📝';
-  return '🤖';
+  return <span>🤖</span>;
 }
 
 export default function ClientsPage() {

apps/desktop/src/assets/client-icons/cursor.svg

@@ -172,20 +172,28 @@ export function FeatureSetsPage() {
     loadData(viewSpace?.id); // Refresh list to get updated member counts etc.
   };
 
-  // Filter feature sets (backend already filters server-all for disabled servers)
-  const filteredSets = featureSets.filter(fs => {
-    // Hide implicit custom sets
-    if (fs.name.endsWith(' - Custom')) return false;
-    
-    // Apply search filter
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return (
-      fs.name.toLowerCase().includes(query) ||
-      fs.description?.toLowerCase().includes(query) ||
-      fs.feature_set_type.toLowerCase().includes(query)
-    );
-  });
+  // Filter and sort feature sets (backend already filters server-all for disabled servers)
+  const filteredSets = featureSets
+    .filter(fs => {
+      // Hide implicit custom sets
+      if (fs.name.endsWith(' - Custom')) return false;
+
+      // Apply search filter
+      if (!searchQuery) return true;
+      const query = searchQuery.toLowerCase();
+      return (
+        fs.name.toLowerCase().includes(query) ||
+        fs.description?.toLowerCase().includes(query) ||
+        fs.feature_set_type.toLowerCase().includes(query)
+      );
+    })
+    .sort((a, b) => {
+      // Sort order: all → default → custom → server-all
+      const order: Record<string, number> = { all: 0, default: 1, custom: 2, 'server-all': 3 };
+      const aOrder = order[a.feature_set_type] ?? 2;
+      const bOrder = order[b.feature_set_type] ?? 2;
+      return aOrder - bOrder;
+    });
 
   return (
     <>

apps/desktop/src/assets/client-icons/vscode.png

@@ -102,7 +102,13 @@ export function ServerCard({
     >
       {/* Header */}
       <div className="flex items-start gap-3 mb-3">
-        <div className="text-3xl flex-shrink-0">{server.icon || '📦'}</div>
+        <div className="text-3xl flex-shrink-0 flex items-center justify-center">
+          {server.icon?.startsWith('http') ? (
+            <img src={server.icon} alt="" className="w-9 h-9 object-contain" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement!.append(document.createTextNode('📦')); }} />
+          ) : (
+            server.icon || '📦'
+          )}
+        </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
             <h3 className="font-semibold truncate" title={server.name} data-testid={`server-name-${server.id}`}>

apps/desktop/src/assets/client-icons/windsurf.svg

@@ -218,7 +218,11 @@ export function ServerCard({
         <div className="flex items-center gap-4 min-w-0 flex-1">
           {/* Icon */}
           <div className="w-10 h-10 rounded-lg bg-[rgb(var(--surface-dim))] flex items-center justify-center flex-shrink-0 text-xl">
-            {server.icon || "🔌"}
+            {server.icon?.startsWith('http') ? (
+              <img src={server.icon} alt="" className="w-7 h-7 object-contain" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement!.append(document.createTextNode('📦')); }} />
+            ) : (
+              server.icon || "🔌"
+            )}
           </div>
 
           {/* Name & Status */}