new UI

app.py

@@ -127,7 +127,16 @@ def fetch_user_spaces(username, token=None):
     try:
         resp = requests.get(url, headers=headers, timeout=10)
         if resp.status_code == 200:
-            spaces = resp.json()
+            space_list = resp.json()
+            # Fetch individual space details to get runtime info
+            for space in space_list:
+                space_id = space.get("id", "")
+                if space_id:
+                    detail = fetch_space_detail(space_id, token)
+                    if detail:
+                        spaces.append(detail)
+                    else:
+                        spaces.append(space)
     except Exception:
         pass
 
@@ -135,6 +144,29 @@ def fetch_user_spaces(username, token=None):
     return spaces
 
 
+def fetch_space_detail(space_id, token=None):
+    cache_key = f"space_detail:{space_id}"
+    cached = cache_get(cache_key)
+    if cached is not None:
+        return cached
+
+    headers = {}
+    if token:
+        headers["Authorization"] = f"Bearer {token}"
+
+    try:
+        url = f"https://huggingface.co/api/spaces/{space_id}"
+        resp = requests.get(url, headers=headers, timeout=10)
+        if resp.status_code == 200:
+            detail = resp.json()
+            cache_set(cache_key, detail)
+            return detail
+    except Exception:
+        pass
+
+    return None
+
+
 def fetch_space_discussions(space_id, token=None):
     cache_key = f"discussions:{space_id}"
     cached = cache_get(cache_key)

templates/dashboard.html

@@ -132,7 +132,7 @@
             background: #2a2a0a;
             color: #eab308;
         }
-        .space-status.stopped, .space-status.paused {
+        .space-status.stopped, .space-status.paused, .space-status.sleeping {
             background: #1a1a1a;
             color: #666;
         }
@@ -140,6 +140,35 @@
             background: #2a0a0a;
             color: #ef4444;
         }
+        .space-details {
+            display: none;
+            padding: 0.5rem 0.75rem;
+            margin-top: 2px;
+            background: #111;
+            border-radius: 4px;
+            font-size: 0.75rem;
+        }
+        .space-details.open {
+            display: block;
+        }
+        .space-detail-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.25rem 0;
+            border-bottom: 1px solid #1a1a1a;
+        }
+        .space-detail-row:last-child {
+            border-bottom: none;
+        }
+        .space-detail-label {
+            color: #555;
+        }
+        .space-detail-value {
+            color: #999;
+        }
+        .space-toggle {
+            cursor: pointer;
+        }
         .main {
             flex: 1;
             margin-left: 280px;
@@ -354,17 +383,44 @@
             {% if spaces %}
             <div class="spaces-list">
                 {% for space in spaces %}
-                <a href="https://huggingface.co/spaces/{{ space.id }}" target="_blank" class="space-item">
-                    <span class="space-name">{{ space.id.split('/')[-1] }}</span>
-                    {% set status = space.runtime.stage|default('stopped')|lower if space.runtime else 'stopped' %}
-                    <span class="space-status {{ status }}">
-                        {% if status == 'running' %}running
-                        {% elif status == 'building' %}building
-                        {% elif status == 'runtime_error' or status == 'build_error' %}error
-                        {% elif status == 'paused' %}paused
-                        {% else %}stopped{% endif %}
-                    </span>
-                </a>
+                {% set status = space.runtime.stage|default('STOPPED')|upper if space.runtime else 'STOPPED' %}
+                {% set hardware = space.runtime.hardware.current|default('unknown') if space.runtime and space.runtime.hardware else 'unknown' %}
+                {% set storage = space.runtime.storage.current|default('none') if space.runtime and space.runtime.storage else 'none' %}
+                <div class="space-entry">
+                    <div class="space-item space-toggle" data-space="{{ loop.index }}">
+                        <span class="space-name">{{ space.id.split('/')[-1] }}</span>
+                        <span class="space-status {{ status|lower }}">
+                            {% if status == 'RUNNING' %}running
+                            {% elif status == 'BUILDING' %}building
+                            {% elif status == 'RUNTIME_ERROR' or status == 'BUILD_ERROR' %}error
+                            {% elif status == 'PAUSED' %}paused
+                            {% elif status == 'SLEEPING' %}sleeping
+                            {% else %}stopped{% endif %}
+                        </span>
+                    </div>
+                    <div class="space-details" id="space-{{ loop.index }}">
+                        <div class="space-detail-row">
+                            <span class="space-detail-label">Hardware</span>
+                            <span class="space-detail-value">{{ hardware }}</span>
+                        </div>
+                        <div class="space-detail-row">
+                            <span class="space-detail-label">Storage</span>
+                            <span class="space-detail-value">{{ storage }}</span>
+                        </div>
+                        <div class="space-detail-row">
+                            <span class="space-detail-label">SDK</span>
+                            <span class="space-detail-value">{{ space.sdk|default('unknown') }}</span>
+                        </div>
+                        <div class="space-detail-row">
+                            <span class="space-detail-label">Likes</span>
+                            <span class="space-detail-value">{{ space.likes|default(0) }}</span>
+                        </div>
+                        <a href="https://huggingface.co/spaces/{{ space.id }}" target="_blank" class="space-detail-row" style="color: #6366f1;">
+                            <span>Open on HF</span>
+                            <span>→</span>
+                        </a>
+                    </div>
+                </div>
                 {% endfor %}
             </div>
             {% else %}
@@ -436,5 +492,14 @@
             {% endif %}
         </main>
     </div>
+    <script>
+        document.querySelectorAll('.space-toggle').forEach(el => {
+            el.addEventListener('click', () => {
+                const id = el.dataset.space;
+                const details = document.getElementById('space-' + id);
+                details.classList.toggle('open');
+            });
+        });
+    </script>
 </body>
 </html>