Refactor API to desktop-compatible format

- Add url, source_kind, downloads, runtime fields
- Move metadata into extra object structure
- Update frontend to use new extra.* accessors
- Enables desktop app to use website API directly

Co-authored-by: Cursor <cursoragent@cursor.com>

server/index.js

@@ -22,6 +22,7 @@ let appsCache = {
 };
 
 // Fetch apps from HuggingFace API
+// Returns format compatible with desktop app (with url, source_kind, extra)
 async function fetchAppsFromHF() {
   console.log('[Cache] Fetching apps from HuggingFace API...');
   
@@ -43,24 +44,43 @@ async function fetchAppsFromHF() {
     const allSpaces = await spacesResponse.json();
     console.log(`[Cache] Fetched ${allSpaces.length} spaces from HuggingFace`);
 
-    // 3. Build apps list with isOfficial and isPythonApp flags
+    // 3. Build apps list in desktop-compatible format
     const allApps = allSpaces.map(space => {
       const spaceId = space.id || '';
       const tags = space.tags || [];
       const isOfficial = officialSet.has(spaceId.toLowerCase());
       const isPythonApp = tags.includes('reachy_mini_python_app');
+      const author = spaceId.split('/')[0];
+      const name = spaceId.split('/').pop();
       
       return {
+        // Core fields (used by both website and desktop)
         id: spaceId,
-        name: spaceId.split('/').pop(),
+        name,
         description: space.cardData?.short_description || '',
-        cardData: space.cardData || {},
-        likes: space.likes || 0,
-        lastModified: space.lastModified,
-        author: spaceId.split('/')[0],
+        url: `https://huggingface.co/spaces/${spaceId}`,
+        source_kind: 'hf_space',
         isOfficial,
-        isPythonApp,
-        tags,
+        
+        // Extra metadata (desktop-compatible structure)
+        extra: {
+          id: spaceId,
+          author,
+          likes: space.likes || 0,
+          downloads: space.downloads || 0,
+          lastModified: space.lastModified,
+          runtime: space.runtime || null,
+          tags,
+          isPythonApp,
+          cardData: {
+            emoji: space.cardData?.emoji || (isPythonApp ? '📦' : '🌐'),
+            short_description: space.cardData?.short_description || '',
+            sdk: space.cardData?.sdk || null,
+            tags: space.cardData?.tags || [],
+            // Preserve other cardData fields
+            ...space.cardData,
+          },
+        },
       };
     });
 
@@ -69,7 +89,7 @@ async function fetchAppsFromHF() {
       if (a.isOfficial !== b.isOfficial) {
         return a.isOfficial ? -1 : 1;
       }
-      return (b.likes || 0) - (a.likes || 0);
+      return (b.extra.likes || 0) - (a.extra.likes || 0);
     });
 
     return allApps;

src/components/InstallModal.jsx

@@ -29,16 +29,16 @@ function InstallModal({ open, onClose, app }) {
   if (!app) return null;
   
   const appName = app.name || app.id?.split('/').pop();
-  const cardData = app.cardData || {};
+  const cardData = app.extra?.cardData || {};
   const emoji = cardData.emoji || '📦';
   const description = cardData.short_description || app.description || 'No description';
   const deepLinkUrl = `reachymini://install/${appName}`;
-  const spaceUrl = `https://huggingface.co/spaces/${app.id}`;
+  const spaceUrl = app.url || `https://huggingface.co/spaces/${app.id}`;
   
-  const author = app.id?.split('/')?.[0] || app.author || null;
+  const author = app.extra?.author || app.id?.split('/')?.[0] || null;
   const isOfficial = app.isOfficial;
-  const likes = app.likes || 0;
-  const lastModified = app.lastModified || app.createdAt || null;
+  const likes = app.extra?.likes || 0;
+  const lastModified = app.extra?.lastModified || null;
   const formattedDate = lastModified
     ? new Date(lastModified).toLocaleDateString('en-US', {
         month: 'short',

src/context/AppsContext.jsx

@@ -11,6 +11,7 @@ const FALLBACK_OFFICIAL_URL = 'https://huggingface.co/datasets/pollen-robotics/r
 const FALLBACK_LIMIT = 1000;
 
 // Fallback: fetch directly from HuggingFace API (for dev mode)
+// Returns same format as server (desktop-compatible)
 async function fetchAppsDirectFromHF() {
   console.log('[AppsContext] Fallback: fetching directly from HuggingFace API');
   
@@ -30,24 +31,42 @@ async function fetchAppsDirectFromHF() {
   }
   const allSpaces = await spacesResponse.json();
 
-  // Build apps list
+  // Build apps list in desktop-compatible format
   const allApps = allSpaces.map(space => {
     const spaceId = space.id || '';
     const tags = space.tags || [];
     const isOfficial = officialSet.has(spaceId.toLowerCase());
     const isPythonApp = tags.includes('reachy_mini_python_app');
+    const author = spaceId.split('/')[0];
+    const name = spaceId.split('/').pop();
     
     return {
+      // Core fields
       id: spaceId,
-      name: spaceId.split('/').pop(),
+      name,
       description: space.cardData?.short_description || '',
-      cardData: space.cardData || {},
-      likes: space.likes || 0,
-      lastModified: space.lastModified,
-      author: spaceId.split('/')[0],
+      url: `https://huggingface.co/spaces/${spaceId}`,
+      source_kind: 'hf_space',
       isOfficial,
-      isPythonApp,
-      tags,
+      
+      // Extra metadata (desktop-compatible structure)
+      extra: {
+        id: spaceId,
+        author,
+        likes: space.likes || 0,
+        downloads: space.downloads || 0,
+        lastModified: space.lastModified,
+        runtime: space.runtime || null,
+        tags,
+        isPythonApp,
+        cardData: {
+          emoji: space.cardData?.emoji || (isPythonApp ? '📦' : '🌐'),
+          short_description: space.cardData?.short_description || '',
+          sdk: space.cardData?.sdk || null,
+          tags: space.cardData?.tags || [],
+          ...space.cardData,
+        },
+      },
     };
   });
 
@@ -56,7 +75,7 @@ async function fetchAppsDirectFromHF() {
     if (a.isOfficial !== b.isOfficial) {
       return a.isOfficial ? -1 : 1;
     }
-    return (b.likes || 0) - (a.likes || 0);
+    return (b.extra.likes || 0) - (a.extra.likes || 0);
   });
 
   return allApps;

src/pages/Apps.jsx

@@ -28,13 +28,13 @@ import InstallModal from '../components/InstallModal';
 // App Card Component
 function AppCard({ app, onInstallClick }) {
   const isOfficial = app.isOfficial;
-  const isPythonApp = app.isPythonApp !== false; // Default to true for backwards compatibility
-  const cardData = app.cardData || {};
-  const author = app.id?.split('/')?.[0] || app.author || null;
-  const likes = app.likes || 0;
-  const lastModified = app.lastModified || app.createdAt || null;
+  const isPythonApp = app.extra?.isPythonApp !== false; // Default to true for backwards compatibility
+  const cardData = app.extra?.cardData || {};
+  const author = app.extra?.author || app.id?.split('/')?.[0] || null;
+  const likes = app.extra?.likes || 0;
+  const lastModified = app.extra?.lastModified || null;
   const emoji = cardData.emoji || (isPythonApp ? '📦' : '🌐');
-  const spaceUrl = `https://huggingface.co/spaces/${app.id}`;
+  const spaceUrl = app.url || `https://huggingface.co/spaces/${app.id}`;
   
   const formattedDate = lastModified 
     ? new Date(lastModified).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
@@ -327,7 +327,7 @@ export default function Apps() {
         app.name?.toLowerCase().includes(query) ||
         app.id?.toLowerCase().includes(query) ||
         app.description?.toLowerCase().includes(query) ||
-        app.cardData?.short_description?.toLowerCase().includes(query)
+        app.extra?.cardData?.short_description?.toLowerCase().includes(query)
       );
     }