fix(ui): log dock, garment detail layout and image cache

- Restore `-> dict` return annotation on api_load_dataset so Gradio
serialises each generator yield as an SSE data event (logs were
silently dropped without it).
- Move log console to a fixed bottom dock (.log-dock) with a header
showing live progress, a minimise/expand toggle and a close button;
dock is visible from any tab during dataset loading.
- Redesign garment detail panel as a single column with
object-fit:contain image (no more distorted/cropped previews) and
a clean attribute list below.
- Add _image_url() helper with ?v=<mtime> query param to bust browser
cache when the same garment ID is reused after clearing the catalog.
- Call loadWardrobe() after a successful photo upload so the new
garment appears immediately without a manual refresh.

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

app.py

@@ -813,11 +813,23 @@ def _build_custom_server():
 
     server.mount("/garments", StaticFiles(directory=str(_DATA_DIR / "garments")), name="garments")
 
+    def _image_url(garment_id: str) -> str:
+        """Return a cache-busted URL for a garment image using file mtime."""
+        img_path = get_image_path(garment_id)
+        if img_path:
+            try:
+                v = int(os.path.getmtime(img_path))
+            except OSError:
+                v = 0
+        else:
+            v = 0
+        return f"/garments/{garment_id}.jpg?v={v}"
+
     @server.api(name="get_wardrobe")
     def api_get_wardrobe() -> dict:
         catalog = load_catalog()
         for g in catalog:
-            g["image_url"] = f"/garments/{g.get('id', '')}.jpg"
+            g["image_url"] = _image_url(g.get("id", ""))
         return {"garments": catalog, "count": len(catalog)}
 
     @server.api(name="add_photo")
@@ -829,7 +841,7 @@ def _build_custom_server():
             return {"garments": [], "count": 0}
         added = add_garments(results)
         for g in added:
-            g["image_url"] = f"/garments/{g['id']}.jpg"
+            g["image_url"] = _image_url(g["id"])
         return {"garments": added, "count": len(added)}
 
     @server.api(name="get_combinations")
@@ -845,9 +857,9 @@ def _build_custom_server():
             serialized.append({
                 "id": combo["id"],
                 "top": {"id": top.get("id", ""), "type": top.get("type", ""),
-                        "color": top.get("color", ""), "image_url": f"/garments/{top.get('id', '')}.jpg"},
+                        "color": top.get("color", ""), "image_url": _image_url(top.get("id", ""))},
                 "bottom": {"id": bottom.get("id", ""), "type": bottom.get("type", ""),
-                           "color": bottom.get("color", ""), "image_url": f"/garments/{bottom.get('id', '')}.jpg"},
+                           "color": bottom.get("color", ""), "image_url": _image_url(bottom.get("id", ""))},
             })
         return {"combinations": serialized, "count": len(serialized)}
 
@@ -863,14 +875,17 @@ def _build_custom_server():
         return ask(question.strip())
 
     @server.api(name="load_dataset")
-    def api_load_dataset(dataset_key: str):
+    def api_load_dataset(dataset_key: str) -> dict:
         """Stream dataset processing progress as each garment is analyzed.
 
         Yields progress dicts with: done, count, log[], preview_url.
         The final yield has done=True with the total count.
         """
+        import time as _time
         from datasets import load_dataset as hf_load
 
+        _load_ts = int(_time.time())
+
         ds_configs = {
             "second-hand": {"hf_id": "fnauman/fashion-second-hand-front-only-rgb", "needs_detection": False},
             "fashion-1k": {"hf_id": "Codatta/Fashion-1K", "needs_detection": True},
@@ -929,7 +944,7 @@ def _build_custom_server():
                         garments_processed.append((garment, crop_bytes))
                         n = len(garments_processed)
                         preview_path = _save_temp_preview(crop_bytes, n)
-                        preview_url = f"/garments/_preview_{n:03d}.jpg" if preview_path else None
+                        preview_url = f"/garments/_preview_{n:03d}.jpg?v={_load_ts}" if preview_path else None
                         log_lines.append(f"{n}/{target} — {garment.get('color', '?')} {garment.get('type', '?')}")
                         yield {"done": False, "count": n, "log": log_lines[-12:], "preview_url": preview_url}
             else:
@@ -943,7 +958,7 @@ def _build_custom_server():
                     garments_processed.append((garment, crop_bytes))
                     n = len(garments_processed)
                     preview_path = _save_temp_preview(crop_bytes, n)
-                    preview_url = f"/garments/_preview_{n:03d}.jpg" if preview_path else None
+                    preview_url = f"/garments/_preview_{n:03d}.jpg?v={_load_ts}" if preview_path else None
                     log_lines.append(f"{n}/{target} — {garment.get('color', '?')} {garment.get('type', '?')}")
                     yield {"done": False, "count": n, "log": log_lines[-12:], "preview_url": preview_url}
 

src/ui/index.html

@@ -119,18 +119,6 @@
           </button>
         </div>
         <div class="status" :class="datasetStatus.type" x-show="datasetStatus.message" x-text="datasetStatus.message"></div>
-
-        <div class="log-console" x-show="datasetLog.length > 0" x-ref="logConsole">
-          <template x-for="(line, i) in datasetLog" :key="i">
-            <div class="log-line" x-text="line"></div>
-          </template>
-        </div>
-
-        <div class="dataset-previews" x-show="datasetPreviews.length > 0">
-          <template x-for="(url, i) in datasetPreviews" :key="i">
-            <img :src="url" :alt="`Garment ${i + 1}`" loading="lazy">
-          </template>
-        </div>
       </div>
     </section>
 
@@ -184,6 +172,29 @@
         </div>
       </div>
     </section>
+
+    <!-- Log Dock: fixed bottom panel shown during dataset loading -->
+    <div class="log-dock" x-show="datasetLog.length > 0" :class="{ minimized: logMinimized }">
+      <div class="log-dock-header" @click="logMinimized = !logMinimized">
+        <span class="log-dock-title" x-text="datasetLoading ? `Loading dataset — ${datasetCount}/50` : `Done — ${datasetCount} garments added`"></span>
+        <div class="log-dock-actions">
+          <button class="log-dock-btn" :title="logMinimized ? 'Expand' : 'Minimize'" @click.stop="logMinimized = !logMinimized" x-text="logMinimized ? '▲' : '▼'"></button>
+          <button class="log-dock-btn" title="Close" @click.stop="datasetLog = []">✕</button>
+        </div>
+      </div>
+      <div class="log-dock-body" x-show="!logMinimized">
+        <div class="log-console" x-ref="logConsole">
+          <template x-for="(line, i) in datasetLog" :key="i">
+            <div class="log-line" x-text="line"></div>
+          </template>
+        </div>
+        <div class="dataset-previews" x-show="datasetPreviews.length > 0">
+          <template x-for="(url, i) in datasetPreviews" :key="i">
+            <img :src="url" :alt="`Garment ${i + 1}`" loading="lazy">
+          </template>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script>
@@ -204,6 +215,7 @@
         datasetLog: [],
         datasetPreviews: [],
         datasetCount: 0,
+        logMinimized: false,
 
         // Garment detail
         selectedGarment: null,
@@ -247,6 +259,7 @@
             const data = result.data[0];
             if (data.count > 0) {
               this.uploadStatus = { type: 'success', message: `Found ${data.count} garment${data.count > 1 ? 's' : ''}! Check your wardrobe.` };
+              await this.loadWardrobe();
             } else {
               this.uploadStatus = { type: 'error', message: "Couldn't detect any garments. Try a clearer image." };
             }
@@ -261,6 +274,7 @@
           this.datasetLog = [];
           this.datasetPreviews = [];
           this.datasetCount = 0;
+          this.logMinimized = false;
           this.datasetStatus = { type: 'loading', message: 'Starting...' };
 
           try {

src/ui/style.css

@@ -529,21 +529,20 @@ nav button.active {
   background: var(--surface);
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
-  max-width: 600px;
+  max-width: 420px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto 1fr;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .detail-close {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
-  background: none;
+  background: rgba(255, 255, 255, 0.85);
   border: 1px solid var(--border);
   border-radius: 50%;
   width: 32px;
@@ -564,54 +563,50 @@ nav button.active {
 }
 
 .detail-image {
-  grid-column: 1;
-  grid-row: 1 / 3;
+  width: 100%;
+  background: #f3f4f6;
+  border-radius: var(--radius) var(--radius) 0 0;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 .detail-image img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: var(--radius) 0 0 var(--radius);
-  background: #f3f4f6;
+  max-height: 320px;
+  object-fit: contain;
   display: block;
-  min-height: 260px;
 }
 
 .detail-info {
-  grid-column: 2;
-  grid-row: 1 / 3;
-  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
+  padding: 1.25rem 1.5rem 1.5rem;
 }
 
 .detail-title {
-  font-size: 1rem;
+  font-size: 1.05rem;
   font-weight: 600;
   text-transform: capitalize;
   margin-bottom: 0.5rem;
-  padding-right: 2rem;
 }
 
 .detail-description {
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   color: var(--text-muted);
-  line-height: 1.5;
-  margin-bottom: 1rem;
+  line-height: 1.55;
+  margin-bottom: 1.1rem;
   font-style: italic;
 }
 
 .attr-list {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
 }
 
 .attr-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-size: 0.82rem;
-  padding: 0.35rem 0;
+  font-size: 0.85rem;
+  padding: 0.45rem 0;
   border-bottom: 1px solid var(--border);
 }
 
@@ -623,7 +618,7 @@ nav button.active {
   color: var(--text-muted);
   font-weight: 500;
   flex-shrink: 0;
-  margin-right: 0.75rem;
+  margin-right: 1rem;
 }
 
 .attr-val {
@@ -632,21 +627,75 @@ nav button.active {
   font-weight: 500;
 }
 
-/* Log console */
-.log-console {
+/* Log dock — fixed bottom panel */
+.log-dock {
+  position: fixed;
+  bottom: 0;
+  right: 1.5rem;
+  width: min(440px, calc(100vw - 3rem));
+  z-index: 200;
+  border-radius: var(--radius) var(--radius) 0 0;
+  overflow: hidden;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
   background: #1e1e2e;
-  border-radius: var(--radius-sm);
-  padding: 0.75rem 1rem;
-  margin-top: 0.75rem;
-  max-height: 180px;
-  overflow-y: auto;
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+.log-dock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.55rem 0.85rem;
+  background: #2a2a3e;
+  cursor: pointer;
+  user-select: none;
+  gap: 0.5rem;
+}
+
+.log-dock-title {
   font-size: 0.78rem;
-  line-height: 1.6;
+  color: #89b4fa;
+  font-weight: 500;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-dock-actions {
+  display: flex;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+
+.log-dock-btn {
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: color var(--transition);
+}
+
+.log-dock-btn:hover {
+  color: #e5e7eb;
+}
+
+.log-dock-body {
+  padding: 0.6rem 0.85rem 0.75rem;
+}
+
+.log-console {
+  max-height: 160px;
+  overflow-y: auto;
   scroll-behavior: smooth;
 }
 
 .log-line {
+  font-size: 0.78rem;
+  line-height: 1.65;
   color: #a6e3a1;
   white-space: pre-wrap;
   word-break: break-all;
@@ -690,25 +739,14 @@ nav button.active {
   }
 
   .detail-panel {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-    max-height: 85vh;
-  }
-
-  .detail-image {
-    grid-column: 1;
-    grid-row: 1;
+    max-height: 88vh;
   }
 
   .detail-image img {
-    border-radius: var(--radius) var(--radius) 0 0;
-    min-height: 200px;
     max-height: 220px;
   }
 
   .detail-info {
-    grid-column: 1;
-    grid-row: 2;
     padding: 1rem;
   }
 }