@kolbo/mcp 1.86.0 → 1.86.4

package/src/apps/theme.js

@@ -201,6 +201,14 @@ html.k-peek-fs .k-peek img, html.k-peek-fs .k-peek video { max-height: calc(100v
   position: relative; border-radius: 10px; overflow: hidden;
   background: var(--surface-2); border: 1px solid var(--border);
   min-height: 120px; max-height: 300px;
+  /* width:100% is load-bearing, not cosmetic. Without a definite width the
+     aspect-ratio transfers the OTHER way: a 16/9 cell in a 196px auto-fill
+     column wants 110px of height, min-height:120px clamps it up, and the ratio
+     then back-computes the WIDTH as 120*16/9 = 213px. The item overflows its
+     196px track and lands on top of the next tile — which is exactly what a
+     3-up video grid looked like. Pinning the width makes the ratio size the
+     height only, and min-height just letterboxes a slightly tall cell. */
+  width: 100%;
 }
 .k-skel.video { aspect-ratio: 16 / 9; }
 .k-skel.square { aspect-ratio: 1; }
@@ -368,6 +376,11 @@ html.k-fullscreen .k-actions { flex: none; padding-top: 8px; }
 .k-audio-row:hover { background: var(--surface-2); }
 .k-audio-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none;
   background: var(--brand-soft); }
+/* Stand-in when a voice/track has no artwork, or has one the host refuses to
+   load — a blank tile and the browser's broken-image glyph both read as "this
+   row is broken" rather than "this one has no picture". */
+.k-audio-art-fallback { display: flex; align-items: center; justify-content: center;
+  color: var(--brand); font-size: 18px; }
 .k-audio-meta { flex: 1; min-width: 0; }
 .k-audio-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .k-audio-sub { font-size: 11px; color: var(--text-faint);

package/src/apps/widgets/generation.js

@@ -76,13 +76,13 @@ var TOOL_TITLES = {
   get_generation_status: 'Generations'
 };
 var OPEN_ROUTES = {
-  generate_image: { path: '/image-tools', tool: 'text-to-image' },
-  generate_image_edit: { path: '/image-tools', tool: 'image-editing' },
-  edit_image: { path: '/image-tools', tool: 'image-editing' },
-  generate_video: { path: '/video-tools', tool: 'text-to-video' },
-  generate_video_from_image: { path: '/video-tools', tool: 'image-to-video' },
-  generate_elements: { path: '/video-tools', tool: 'image-to-video', mode: 'elements' },
-  generate_first_last_frame: { path: '/video-tools', tool: 'image-to-video', mode: 'first-last' },
+  generate_image: { path: '/image-tools', tool: 'create-image' },
+  generate_image_edit: { path: '/image-tools', tool: 'create-image' },
+  edit_image: { path: '/image-tools', tool: 'canvas' },
+  generate_video: { path: '/video-tools', tool: 'create-video' },
+  generate_video_from_image: { path: '/video-tools', tool: 'create-video' },
+  generate_elements: { path: '/video-tools', tool: 'create-video', mode: 'elements' },
+  generate_first_last_frame: { path: '/video-tools', tool: 'create-video', mode: 'first-last' },
   generate_video_from_video: { path: '/video-tools', tool: 'video-to-video' },
   generate_lipsync: { path: '/video-tools', tool: 'lipsync' },
   generate_music: { path: '/audio-tools', tool: 'music-generator' },
@@ -1037,13 +1037,18 @@ function renderBatchGrid(sc) {
 function renderStatusGrid(sc) {
   var items = sc.items;
   if (!items.length) return renderError('No results');
-  el('stage').innerHTML = '<div class="k-gen-grid n' + Math.min(items.length, 4) + '">' +
+  // Classify by extension, same as every other reference/thumb in this file —
+  // the tool only knows a url came back, not what kind it is. Done up front
+  // because the COLUMN COUNT depends on it: this grid used to hardcode
+  // Math.min(items.length, 4) and so put videos 3-4 up, where gridCols caps
+  // them at 2 everywhere else.
+  items.forEach(function (it) {
+    if (it.state === 'completed' && it.url) it.kind = refKind(it.url, 'image');
+  });
+  el('stage').innerHTML = '<div class="k-gen-grid n' + gridCols(items.length, items[0].kind) + '">' +
     items.map(function (it, i) {
       var cap = it.title ? '<span class="k-skel-cap" title="' + esc(it.title) + '">' + esc(it.title) + '</span>' : '';
       if (it.state === 'completed' && it.url) {
-        // Classify by extension, same as every other reference/thumb in this
-        // file — the tool only knows a url came back, not what kind it is.
-        it.kind = refKind(it.url, 'image');
         var shape = it.kind === 'video' ? 'video' : 'square';
         return '<div class="k-skel done ' + shape + '" data-focus="' + i + '"' +
           (it.title ? ' title="' + esc(it.title) + '"' : '') + '>' +

package/src/apps/widgets/mediaGrid.js

@@ -102,8 +102,21 @@ function cellHTML(item, i) {
 function audioRowHTML(item) {
   var idx = state.items.indexOf(item);
   var src = item.preview_audio || item.url;
+  // Same onerror contract as cellHTML, and for the same reason: a thumbnail the
+  // host cannot fetch (CSP, 404, expired) otherwise renders the browser's
+  // broken-image glyph. Voices are the ONLY items that come down this path, so
+  // this row is where a blocked thumbnail is actually visible — cells have
+  // degraded gracefully since forever and hid the problem everywhere else.
+  // this.outerHTML, NOT this.parentNode.innerHTML: here the <img> IS the art and
+  // its parent is the whole row, so the cell version would erase the title,
+  // subtitle, Use button and player along with it.
+  var artFallback = '<div class="k-audio-art k-audio-art-fallback">' + kindIcon('audio') + '</div>';
   return '<div class="k-audio-row k-generated-audio" data-i="' + idx + '">' +
-    (item.thumbnail ? '<img class="k-audio-art k-peek-hit" src="' + esc(item.thumbnail) + '"' + peekAttrs(item.thumbnail, 'image', item.title) + '>' : '<div class="k-audio-art"></div>') +
+    (item.thumbnail
+      ? '<img class="k-audio-art k-peek-hit" src="' + esc(item.thumbnail) + '" alt=""'
+        + peekAttrs(item.thumbnail, 'image', item.title)
+        + ' onerror="this.outerHTML=this.getAttribute(\\'data-fb\\')" data-fb="' + esc(artFallback) + '">'
+      : artFallback) +
     '<div class="k-audio-meta"><div class="k-audio-title">' + esc(item.title || '') + '</div>' +
     '<div class="k-audio-sub">' + esc(item.subtitle || '') + '</div></div>' +
     '<button class="k-btn" data-use="' + idx + '">Use</button>' +