@kolbo/mcp 1.106.3 → 1.106.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolbo/mcp",
-  "version": "1.106.3",
+  "version": "1.106.5",
   "description": "Kolbo AI MCP Server - Generate images, videos, music, speech, and sound effects from Claude Code",
   "main": "src/index.js",
   "bin": {

package/src/apps/html.js

@@ -17,7 +17,7 @@ function widgetPage({ title, body, script }) {
 <title>${title}</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
 <style>${KOLBO_CSS}</style>
 </head>
 <body>

package/src/apps/theme.js

@@ -11,7 +11,10 @@
 const KOLBO_CSS = `
 :root {
   --bg: #0f0f0f;
-  --card: rgba(22, 22, 25, 0.96);
+  /* A translucent lift, not a fixed colour: every host paints its own dark grey
+     behind the iframe (claude.ai, ChatGPT, Codex, Kolbo Code all differ), and a
+     fixed near-black card read as a hole cut into the chat. */
+  --card: rgba(255, 255, 255, 0.04);
   --card-solid: #161619;
   --panel: rgba(255, 255, 255, 0.035);
   --surface: rgba(255, 255, 255, 0.03);
@@ -31,7 +34,13 @@ const KOLBO_CSS = `
   --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --specular: inset 0 1px 0 rgba(255, 255, 255, 0.18);
-  color-scheme: dark;
+  /* "light dark" on the ROOT, never a fixed scheme. When an iframe's root
+     scheme differs from the host frame's, the browser paints an OPAQUE canvas
+     behind the page: a fixed "dark" here drew a dark square around every card
+     in hosts whose frame is light/normal (Codex). "light dark" adopts the host
+     frame's scheme, so the canvas stays transparent everywhere. The card
+     carries the real theme for its native controls below. */
+  color-scheme: light dark;
 }
 [data-theme="light"] {
   --bg: #f5f5f2;
@@ -47,12 +56,13 @@ const KOLBO_CSS = `
   --text-faint: rgba(10, 10, 12, 0.40);
   --brand-soft: rgba(59, 130, 246, 0.10);
   --specular: inset 0 1px 0 rgba(255, 255, 255, 0.65);
-  color-scheme: light;
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 html, body { background: transparent; }
+.k-card { color-scheme: dark; }
+[data-theme="light"] .k-card { color-scheme: light; }
 body {
-  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
   color: var(--text);
   font-size: 14px;
   line-height: 1.5;
@@ -67,7 +77,8 @@ body {
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
-  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22), var(--specular);
+  /* No drop shadow: on a dark host it only adds a muddy halo. */
+  box-shadow: var(--specular);
   overflow: hidden;
   animation: k-in 400ms var(--spring);
 }
@@ -110,7 +121,6 @@ body {
 .k-mention {
   display: inline; padding: 1px 5px; border-radius: 5px;
   background: var(--brand-soft); color: var(--brand);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
   font-size: 0.94em; font-weight: 500;
 }
 /* Single-line media caption (scene / batch prompt under the viewer) */
@@ -139,7 +149,7 @@ body {
 .k-chip .k-mono-icon {
   width: 14px; height: 14px; border-radius: 4px; background: var(--brand);
   color: #fff; font-size: 9px; font-weight: 700; display: inline-flex;
-  align-items: center; justify-content: center; font-family: 'Inter', sans-serif;
+  align-items: center; justify-content: center; font-family: inherit;
 }
 .k-chip img.k-voice-thumb { width: 18px; height: 18px; border-radius: 999px; margin-left: -3px; }
 .k-ref-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border-strong); }
@@ -157,7 +167,7 @@ html.k-peek-open .k-card { min-height: 460px; }
 .k-peek-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; min-height: 44px; }
 .k-peek-cap { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.78);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.k-peek-count { flex: none; font-size: 11.5px; color: rgba(255,255,255,0.55); font-family: 'JetBrains Mono', ui-monospace, monospace; }
+.k-peek-count { flex: none; font-size: 11.5px; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
 .k-peek-btn {
   flex: none; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
   background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; font-size: 15px;
@@ -299,7 +309,7 @@ video::-webkit-media-controls-fullscreen-button { display: none !important; }
     animating k-sweep skeleton forced per-frame backdrop re-sampling on phones;
     0.65 black over the shimmer reads identically without it */
   border: 1px solid rgba(255, 255, 255, 0.14);
-  font-size: 11px; font-weight: 600; color: #fff;
+  font-size: 11px; font-weight: 600; color: #fff; text-transform: capitalize;
 }
 .k-spin {
   width: 12px; height: 12px; border-radius: 50%;
@@ -459,7 +469,7 @@ video::-webkit-media-controls-fullscreen-button { display: none !important; }
 .k-dot.on { width: 22px; opacity: 0.95; cursor: default; }
 .k-dot.ghost { cursor: default; opacity: 0.14; }
 .k-pager-label { font-size: 11px; color: var(--text-faint);
-  font-family: 'JetBrains Mono', ui-monospace, monospace; min-width: 58px; text-align: center; }
+  font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; }
 
 /* ---- Audio rows ---- */
 .k-audio-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
@@ -529,7 +539,7 @@ video::-webkit-media-controls-fullscreen-button { display: none !important; }
 .k-footer:not(:has(.k-credits:not(:empty))) { display: none; }
 .k-footer a { color: var(--text-faint); text-decoration: none; }
 .k-footer a:hover { color: var(--brand); }
-.k-credits { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
+.k-credits { margin-left: auto; font-variant-numeric: tabular-nums; }
 `;
 
 /**

package/src/apps/widgets/credits.js

@@ -4,27 +4,34 @@ const { widgetPage } = require('../html');
 
 const BODY = `
 <style>
-#loading[hidden], #balance[hidden], #error[hidden] { display: none !important; }
-.k-credit-total { font-size: clamp(30px, 8vw, 46px); font-weight: 600; letter-spacing: -1.5px; line-height: 1.2; overflow-wrap: anywhere; }
-.k-credit-label { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
-.k-credit-breakdown { margin: 22px 0 0; padding: 0; }
-.k-credit-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13px; }
+#loading[hidden], #balance[hidden], #error[hidden], #breakdown[hidden] { display: none !important; }
+/* One line by default. Agents check the balance at session start and before
+   big batches; a full-height balance card each time buried the chat. */
+.k-credit-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.k-credit-total { font-size: 22px; font-weight: 650; letter-spacing: -0.5px; line-height: 1.2;
+  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.k-credit-label { color: var(--text-muted); font-size: 12px; }
+.k-credit-line .k-text-btn { margin-left: auto; align-self: center; }
+.k-credit-breakdown { margin: 10px 0 0; padding: 0; }
+.k-credit-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
 .k-credit-row dt { color: var(--text-muted); }
 .k-credit-row dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
 </style>
 <div class="k-card">
-  <div class="k-head"><span class="k-logo" id="logo"></span><span class="k-title">Credit balance</span></div>
+  <div class="k-head"><span class="k-logo" id="logo"></span><span class="k-title">Credits</span></div>
   <div class="k-body" aria-live="polite">
-    <div id="loading" class="k-skel" style="height:160px" aria-label="Loading credit balance"></div>
+    <div id="loading" class="k-skel" style="min-height:0;height:28px" aria-label="Loading credit balance"></div>
     <div id="balance" hidden>
-      <div class="k-credit-total" id="total"></div>
-      <div class="k-credit-label">Available credits</div>
-      <dl class="k-credit-breakdown">
+      <div class="k-credit-line">
+        <span class="k-credit-total" id="total"></span>
+        <span class="k-credit-label">available</span>
+        <button type="button" class="k-text-btn" id="toggle" aria-expanded="false" aria-controls="breakdown">Details</button>
+      </div>
+      <dl class="k-credit-breakdown" id="breakdown" hidden>
         <div class="k-credit-row"><dt>Plan credits</dt><dd id="plan"></dd></div>
         <div class="k-credit-row"><dt>Credit pack</dt><dd id="pack"></dd></div>
         <div class="k-credit-row"><dt>Redemption</dt><dd id="redemption"></dd></div>
       </dl>
-      <div class="k-credit-label">Balance at time of check</div>
     </div>
     <div id="error" class="k-error" hidden>Credit balance unavailable. Please check again.</div>
   </div>
@@ -32,6 +39,13 @@ const BODY = `
 
 const SCRIPT = `
 el('logo').innerHTML = KOLBO_LOGO + '<span>Kolbo</span>';
+el('toggle').onclick = function () {
+  var open = el('breakdown').hidden;
+  el('breakdown').hidden = !open;
+  el('toggle').setAttribute('aria-expanded', String(open));
+  el('toggle').textContent = open ? 'Hide' : 'Details';
+  window.kolbo.notifySize();
+};
 function amount(value) {
   if (value == null || value === '' || !Number.isFinite(Number(value))) return '\u2014';
   return Number(value).toLocaleString('en-US', { maximumFractionDigits: 8 });

package/src/apps/widgets/generation.js

@@ -453,11 +453,17 @@ function moodboardChipsHTML(sc, s) {
   }
   return h;
 }
-function chip(inner) { return '<span class="k-chip">' + inner + '</span>'; }
+// Labels read as words: "Image", "Enhanced", "Web search" — the first letter
+// of the visible text (after any leading icon markup) is uppercased. Digits
+// first ("1080p", "16:9", "7 images") are left alone.
+function capLabel(inner) {
+  return String(inner).replace(/(^|>)(\\s*)([a-z])/, function (m, gt, sp, ch) { return gt + sp + ch.toUpperCase(); });
+}
+function chip(inner) { return '<span class="k-chip">' + capLabel(inner) + '</span>'; }
 // Same chip with a hover title — used to surface the asset id behind a
 // "2 Visual DNA" / "preset" label without spending chip width on it.
 function chipT(inner, title) {
-  return '<span class="k-chip" title="' + esc(title) + '">' + inner + '</span>';
+  return '<span class="k-chip" title="' + esc(title) + '">' + capLabel(inner) + '</span>';
 }
 function iconFor(kind) {
   switch (kind) {

package/src/tools/trends.js

@@ -30,7 +30,7 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 function trendTile(t) {
   const example = (t.examples || [])[0] || {};
-  const poster = t.cover?.image || example.poster || t.source_poster;
+  const poster = t.cover?.image || example.poster;
   return {
     id: t.slug,
     title: t.name,