@womp/mcp-ui 0.1.0 → 0.1.2

package/src/image/index.html

@@ -63,25 +63,6 @@
         .skeleton.pulsing { animation: none; }
       }
 
-      /* Overlays float above the image, mirroring swan-frontend's generation
-         tile rather than sitting in a bar beneath it. */
-      .chips {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        display: flex;
-        gap: 6px;
-      }
-      .chip {
-        font-size: var(--font-text-xs-size, 11px);
-        padding: 3px 8px;
-        border-radius: var(--border-radius-full, 999px);
-        background: rgba(0, 0, 0, 0.55);
-        color: #fff;
-        backdrop-filter: blur(6px);
-        white-space: nowrap;
-      }
-
       .actions {
         position: absolute;
         bottom: 10px;
@@ -147,12 +128,19 @@
       /* Nothing to reveal on hover when the image fills the screen. */
       :root[data-display-mode="fullscreen"] .actions { opacity: 1; }
 
-      .status:empty { display: none; }
-      .status {
+      .status:empty,
+      .meta:empty { display: none; }
+      .status,
+      .meta {
         font-size: var(--font-text-xs-size, 11px);
         color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
         padding: 8px 12px;
       }
+      /* When both are shown the pair reads as one block, so the meta line drops
+         its bottom padding rather than double-spacing them. */
+      .meta:has(+ .status:not(:empty)) {
+        padding-bottom: 0;
+      }
     </style>
   </head>
   <body>
@@ -160,11 +148,6 @@
       <img id="hero" class="hero" alt="" style="display: none" />
       <div id="skeleton" class="skeleton"></div>
 
-      <div class="chips">
-        <span class="chip" id="kind">Image</span>
-        <span class="chip" id="gid" hidden></span>
-      </div>
-
       <div class="actions" id="actions" hidden>
         <button class="btn" id="download" title="Open full size" hidden>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
@@ -178,6 +161,11 @@
         </button>
       </div>
 
+      <!-- Two lines, not one: `meta` is what produced the result, `status` is
+           when something went wrong. Sharing an element meant a preview error
+           erased the model name, or the reverse, depending on which landed
+           last. Both collapse when empty. -->
+      <div class="meta" id="meta"></div>
       <div class="status" id="status">Connecting&hellip;</div>
     </div>
     <script type="module" src="./main.ts"></script>

package/src/image/main.ts

@@ -1,4 +1,4 @@
-import { $, createCard, openLink, toggleFullscreen, type GenerationResult } from "../shared/bridge";
+import { $, createCard, describeMeta, openLink, toggleFullscreen, type GenerationResult } from "../shared/bridge";
 
 /**
  * The image card — the light one.
@@ -12,6 +12,10 @@ const setStatus = (text: string) => {
   $("status").textContent = text;
 };
 
+const setMeta = (text: string) => {
+  $("meta").textContent = text;
+};
+
 function toggle(id: string, on: boolean, title?: string) {
   const el = $(id);
   el.hidden = !on;
@@ -22,9 +26,9 @@ const card = createCard("Womp image", {
   onTimeout: () => setStatus("Still running — ask me to check on it."),
   onResult: (data: GenerationResult) => {
     if (data.status === "running") {
-      $("kind").textContent = "Working";
       $("skeleton").classList.add("pulsing");
       $("actions").hidden = true;
+      setMeta("");
       setStatus("Generating…");
       return;
     }
@@ -45,11 +49,7 @@ const card = createCard("Womp image", {
     }
 
     const isMesh = !!data.glbUrl;
-    $("kind").textContent = isMesh ? "3D mesh" : "Image";
-    if (data.generationId) {
-      $("gid").textContent = "#" + data.generationId;
-      $("gid").hidden = false;
-    }
+    setMeta(describeMeta(data));
 
     // No "Make 3D" button on purpose. The card could send a user turn via
     // app.sendMessage(), but the host shows a prompt-injection warning on any

package/src/mesh/index.html

@@ -74,25 +74,6 @@
         .skeleton.pulsing { animation: none; }
       }
 
-      /* Overlays float above the image, mirroring swan-frontend's generation
-         tile rather than sitting in a bar beneath it. */
-      .chips {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        display: flex;
-        gap: 6px;
-      }
-      .chip {
-        font-size: var(--font-text-xs-size, 11px);
-        padding: 3px 8px;
-        border-radius: var(--border-radius-full, 999px);
-        background: rgba(0, 0, 0, 0.55);
-        color: #fff;
-        backdrop-filter: blur(6px);
-        white-space: nowrap;
-      }
-
       .actions {
         position: absolute;
         bottom: 10px;
@@ -158,12 +139,19 @@
       /* Nothing to reveal on hover when the image fills the screen. */
       :root[data-display-mode="fullscreen"] .actions { opacity: 1; }
 
-      .status:empty { display: none; }
-      .status {
+      .status:empty,
+      .meta:empty { display: none; }
+      .status,
+      .meta {
         font-size: var(--font-text-xs-size, 11px);
         color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
         padding: 8px 12px;
       }
+      /* When both are shown the pair reads as one block, so the meta line drops
+         its bottom padding rather than double-spacing them. */
+      .meta:has(+ .status:not(:empty)) {
+        padding-bottom: 0;
+      }
     </style>
   </head>
   <body>
@@ -172,11 +160,6 @@
       <img id="hero" class="hero" alt="" style="display: none" />
       <div id="skeleton" class="skeleton"></div>
 
-      <div class="chips">
-        <span class="chip" id="kind">Image</span>
-        <span class="chip" id="gid" hidden></span>
-      </div>
-
       <div class="actions" id="actions" hidden>
         <button class="btn" id="download" title="Open full size" hidden>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
@@ -190,6 +173,11 @@
         </button>
       </div>
 
+      <!-- Two lines, not one: `meta` is what produced the result, `status` is
+           when something went wrong. Sharing an element meant a preview error
+           erased the model name, or the reverse, depending on which landed
+           last. Both collapse when empty. -->
+      <div class="meta" id="meta"></div>
       <div class="status" id="status">Connecting&hellip;</div>
     </div>
     <script type="module" src="./main.ts"></script>

package/src/mesh/main.ts

@@ -4,6 +4,7 @@ import {
   Box3,
   Color,
   DirectionalLight,
+  Group,
   PerspectiveCamera,
   Scene,
   SRGBColorSpace,
@@ -13,7 +14,7 @@ import {
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
-import { $, createCard, openLink, toggleFullscreen, type GenerationResult } from "../shared/bridge";
+import { $, createCard, describeMeta, openLink, toggleFullscreen, type GenerationResult } from "../shared/bridge";
 
 /**
  * The mesh card — an interactive GLB viewer.
@@ -29,6 +30,10 @@ import { $, createCard, openLink, toggleFullscreen, type GenerationResult } from
  * blocked request, which is a slow thing to debug.
  */
 
+const setMeta = (text: string) => {
+  $("meta").textContent = text;
+};
+
 const setStatus = (text: string) => {
   $("status").textContent = text;
 };
@@ -47,9 +52,13 @@ function frame(camera: PerspectiveCamera, target: Vector3, size: number) {
   camera.lookAt(target);
 }
 
+/** Matches swan-frontend's MeshViewer: radians per frame, paused while orbiting. */
+const AUTO_ROTATE_STEP = 0.005;
+
 async function mountViewer(url: string) {
   const canvasHost = $("viewer");
-  canvasHost.hidden = false;
+  // Stays hidden until the model is actually ready. Revealing it here put a
+  // second empty box under the skeleton for the whole download.
 
   const scene = new Scene();
   scene.background = null;
@@ -78,6 +87,16 @@ async function mountViewer(url: string) {
   controls.enableDamping = true;
   controls.enablePan = false;
 
+  // Auto-rotation yields to the user the moment they grab the model and
+  // resumes when they let go — same behaviour as swan-frontend's MeshViewer.
+  let userInteracting = false;
+  controls.addEventListener("start", () => {
+    userInteracting = true;
+  });
+  controls.addEventListener("end", () => {
+    userInteracting = false;
+  });
+
   const resize = () => {
     const w = canvasHost.clientWidth || 360;
     const h = canvasHost.clientHeight || 360;
@@ -93,26 +112,33 @@ async function mountViewer(url: string) {
     if (ev.total) setStatus(`Loading model… ${Math.round((ev.loaded / ev.total) * 100)}%`);
   });
 
-  scene.add(gltf.scene);
-
   // Recentre on the model's own bounding box: exported meshes are not reliably
-  // origin-centred, and an off-centre pivot makes orbiting feel broken.
+  // origin-centred, and an off-centre pivot makes orbiting feel broken. The
+  // pivot group is what auto-rotation spins — rotating gltf.scene itself would
+  // orbit the mesh around its original off-centre origin and wobble.
   const box = new Box3().setFromObject(gltf.scene);
   const centre = box.getCenter(new Vector3());
   const size = box.getSize(new Vector3()).length();
   gltf.scene.position.sub(centre);
+  const pivot = new Group();
+  pivot.add(gltf.scene);
+  scene.add(pivot);
   controls.target.set(0, 0, 0);
   frame(camera, new Vector3(0, 0, 0), size);
   controls.update();
 
   const loop = () => {
     if (stopLoop) return;
+    if (!userInteracting) pivot.rotation.y += AUTO_ROTATE_STEP;
     controls!.update();
     renderer!.render(scene, camera);
     requestAnimationFrame(loop);
   };
   loop();
 
+  // The swap: model is loaded and framed, so the placeholder gives way to the
+  // canvas in one step — never both at once.
+  canvasHost.hidden = false;
   $("skeleton").style.display = "none";
   setStatus("");
 }
@@ -121,27 +147,26 @@ const card = createCard("Womp mesh", {
   onTimeout: () => setStatus("Still running — ask me to check on it."),
   onResult: (data: GenerationResult) => {
     if (data.status === "running") {
-      $("kind").textContent = "Working";
       $("skeleton").classList.add("pulsing");
       $("actions").hidden = true;
+      setMeta("");
       setStatus("Generating…");
       return;
     }
 
     $("skeleton").classList.remove("pulsing");
-    if (data.generationId) {
-      $("gid").textContent = "#" + data.generationId;
-      $("gid").hidden = false;
-    }
+    // Replaces the old #<generationId> chip: an internal id tells the reader
+    // nothing, the time and the model do.
+    setMeta(describeMeta(data));
 
     if (data.glbUrl) {
-      $("kind").textContent = "3D mesh";
       $("actions").hidden = false;
       $("download").hidden = false;
       $("expand").hidden = false;
       mountViewer(data.glbUrl).catch((err) => {
         // Degrade to the preview image rather than an empty box: the GLB may be
         // blocked by CSP, or WebGL may be unavailable in the sandbox.
+        $("viewer").hidden = true;
         setStatus("Could not load the 3D view — " + ((err as Error)?.message ?? err));
         showStill(data.previewUrl || data.imageUrl);
       });
@@ -150,7 +175,6 @@ const card = createCard("Womp mesh", {
 
     // get_generation can return an image; this card is also its target, so it
     // has to cope with one.
-    $("kind").textContent = "Image";
     $("actions").hidden = false;
     $("download").hidden = !data.imageUrl;
     $("expand").hidden = !data.imageUrl;

package/src/shared/bridge.ts

@@ -33,6 +33,27 @@ export interface GenerationResult {
   imageUrl?: string;
   glbUrl?: string;
   previewUrl?: string;
+  /** `AiWorkflow.name`, e.g. "Nano Banana 2". */
+  model?: string;
+  /** The provider's own generation time, in seconds. */
+  durationSeconds?: number;
+}
+
+/**
+ * "8.77s · Nano Banana 2" — what produced this result and how long it took,
+ * matching swan-frontend's generation tile (`OperationModelTags.tsx`), down to
+ * the two decimal places.
+ *
+ * Returns "" when the backend sent neither, which is a normal outcome: an older
+ * swan-backend does not send these fields at all, and not every provider
+ * reports a time. Both call sites treat "" as "hide the line" rather than
+ * printing a lonely separator or a bare "0s".
+ */
+export function describeMeta(data: GenerationResult): string {
+  const parts: string[] = [];
+  if (typeof data.durationSeconds === "number") parts.push(`${data.durationSeconds.toFixed(2)}s`);
+  if (data.model) parts.push(data.model);
+  return parts.join(" · ");
 }
 
 export const $ = (id: string) => document.getElementById(id) as HTMLElement;
@@ -78,6 +99,10 @@ export function createCard(name: string, hooks: CardHooks): Card {
     }
   };
 
+  // autoResize is on by default (the App constructor's third parameter defaults
+  // to `{ autoResize: true }`), which is what sends `ui/notifications/size-changed`
+  // as the card grows. Note it runs inside requestAnimationFrame, so it does not
+  // fire in a tab that is not being rendered — a harness caveat, not a bug.
   const app = new App({ name, version: "0.0.1" }, {});
 
   const fetchGeneration = async (operationId: number) => {