amalgm 0.1.101 → 0.1.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amalgm",
-  "version": "0.1.101",
+  "version": "0.1.102",
   "description": "Amalgm local computer runtime: login, MCP, chat, events, previews, and tunnels.",
   "license": "UNLICENSED",
   "private": false,

package/runtime/scripts/amalgm-mcp/lib/email-embeds.js

@@ -115,30 +115,68 @@ function isEmbeddableImageSrc(url) {
 
 // --- EmbedChrome (email form) ------------------------------------------------
 
-function chromePill(content) {
-  return `<span style="display:inline-block;background:${COLOR.bgChip};border:1px solid ${COLOR.pillBorder};border-radius:999px;padding:4px 12px;font-size:12px;line-height:16px;color:${COLOR.text};white-space:nowrap">${content}</span>`;
+/**
+ * Embed-type glyph shown before the name — Gmail-safe geometric unicode
+ * (inline SVG is stripped by Gmail), the email stand-in for the UI's
+ * FileTypeIcon / app icon.
+ */
+// Codepoints with NO emoji variant — Gmail swaps U+25B6 (▶) for a colored
+// emoji even with the U+FE0E text selector, so we use the small triangle
+// U+25B8 (▸) instead. ◆ / ▣ / ♪ have no emoji form and render monochrome.
+const EMBED_GLYPH = {
+  video: '▸', // ▸
+  audio: '♪', // ♪
+  app: '◆', // ◆
+  entity: '◆', // ◆
+  document: '▣', // ▣
+  file: '▣', // ▣
+};
+
+function glyphSpan(glyph) {
+  return glyph
+    ? `<span style="font-size:12px;line-height:16px;color:${COLOR.text};padding-right:7px">${glyph}</span>`
+    : '';
+}
+
+/**
+ * One header pill, the email form of EmbedChrome's floating pill: a pure-black
+ * fill (Gmail dark mode recolors near-blacks like stone-950 — which is why the
+ * name used to flip to a white pill — but leaves #000 alone) with a stone-800
+ * border carrying the rounded shape and white text.
+ */
+function headerPill(inner) {
+  return `<span style="display:inline-block;background:${COLOR.bg};border:1px solid ${COLOR.pillBorder};border-radius:12px;padding:5px 11px;font-size:13px;line-height:16px;color:${COLOR.text};white-space:nowrap">${inner}</span>`;
+}
+
+/** `[glyph] name` — name clipped with an ellipsis (email's stand-in for the UI's edge fade). */
+function namePill(glyph, name) {
+  const label =
+    `<span style="display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;` +
+    `white-space:nowrap;vertical-align:bottom;color:${COLOR.text}">${escapeText(name)}</span>`;
+  return headerPill(`${glyphSpan(glyph)}${label}`);
+}
+
+/** The single "Open ↗" affordance — a link when href is given. */
+function openPill(href) {
+  const inner = `Open<span style="color:${COLOR.textMuted};padding-left:5px">&#8599;</span>`;
+  return href
+    ? `<a href="${escapeAttr(href)}" target="_blank" style="text-decoration:none">${headerPill(inner)}</a>`
+    : headerPill(inner);
 }
 
 /**
  * The expanded-embed card: rounded-16 stone-900 border, black fill, a header
- * row carrying the name pill (left) and an action pill (right), media below.
- * actionLabel+actionHref make the right pill a link; actionText makes it a
- * plain label (e.g. "Attachment").
+ * row carrying the `[glyph] name` pill (left) and a single Open pill (right),
+ * media below. `action.href` points the Open pill; pass action:null for none.
  */
-function embedShell({ name, actionLabel, actionHref, actionText, body }) {
-  const namePill = name ? chromePill(escapeText(name)) : '';
-  const actionPill = actionLabel && actionHref
-    ? `<a href="${escapeAttr(actionHref)}" target="_blank" style="text-decoration:none">${chromePill(
-        `<span style="color:${COLOR.link}">${escapeText(actionLabel)}</span>`,
-      )}</a>`
-    : actionText
-      ? chromePill(`<span style="color:${COLOR.textMuted}">${escapeText(actionText)}</span>`)
-      : '';
+function embedShell({ glyph, name, action, body }) {
+  const left = name ? namePill(glyph, name) : '';
+  const right = action ? openPill(action.href) : '';
   return (
     `<div style="border:1px solid ${COLOR.border};border-radius:16px;background:${COLOR.bg};margin:16px 0;overflow:hidden">` +
     `<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>` +
-    `<td align="left" style="padding:10px 10px 8px">${namePill}</td>` +
-    `<td align="right" style="padding:10px 10px 8px">${actionPill}</td>` +
+    `<td align="left" style="padding:10px 10px 8px">${left}</td>` +
+    `<td align="right" style="padding:10px 10px 8px;white-space:nowrap">${right}</td>` +
     `</tr></table>` +
     body +
     `</div>`
@@ -147,9 +185,19 @@ function embedShell({ name, actionLabel, actionHref, actionText, body }) {
 
 // --- Media embeds -------------------------------------------------------------
 
-/** Bare rounded image per the ruleset — images never wear chrome. */
-function renderImageEmbed(alt, url) {
-  return `<img src="${escapeAttr(url)}" alt="${escapeAttr(alt || '')}" style="display:block;max-width:100%;height:auto;border-radius:16px;border:1px solid ${COLOR.border};margin:16px 0">`;
+/**
+ * Bare rounded image per the ruleset — images never wear chrome. The <img> is
+ * wrapped in a link so Gmail treats it as a clickable image rather than a
+ * savable attachment, which suppresses Gmail's Download / Save-to-Photos /
+ * Save-to-Drive hover overlay. http images link to themselves; inline (cid)
+ * images take the passed href (the "open in amalgm" target).
+ */
+function renderImageEmbed(alt, url, href) {
+  const img = `<img src="${escapeAttr(url)}" alt="${escapeAttr(alt || '')}" style="display:block;max-width:100%;height:auto;border-radius:16px;border:1px solid ${COLOR.border};margin:16px 0">`;
+  const link = href || (isHttpUrl(url) ? url : null);
+  return link
+    ? `<a href="${escapeAttr(link)}" target="_blank" style="text-decoration:none;display:block">${img}</a>`
+    : img;
 }
 
 const PLAY_PILL =
@@ -185,7 +233,7 @@ function renderVideoEmbed(label, url, poster) {
     `<video controls preload="metadata" src="${safeUrl}"${posterSrc ? ` poster="${escapeAttr(posterSrc)}"` : ''} style="display:block;width:100%;max-height:480px;background:${COLOR.bg}">` +
     fallback +
     `</video>`;
-  return embedShell({ name, actionLabel: 'Open ↗', actionHref: url, body });
+  return embedShell({ glyph: EMBED_GLYPH.video, name, action: { href: url }, body });
 }
 
 /**
@@ -197,16 +245,15 @@ function renderVideoEmbed(label, url, poster) {
 function renderAttachedVideoCard(label, poster) {
   const name = label || 'Video';
   const posterSrc = poster && isEmbeddableImageSrc(poster) ? poster : null;
-  const note =
-    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>` +
-    `<td align="center" style="padding:${posterSrc ? '0 16px 16px' : '40px 16px 16px'};background:${COLOR.bg}">` +
-    (posterSrc ? '' : `${PLAY_PILL}<br>`) +
-    `<span style="display:inline-block;padding-top:8px;font-size:12px;color:${COLOR.textMuted}">Attached to this email &mdash; open the attachment to play</span>` +
-    `</td></tr></table>`;
-  const body = (posterSrc
-    ? `<img src="${escapeAttr(posterSrc)}" alt="${escapeAttr(name)}" style="display:block;width:100%;height:auto;background:${COLOR.bg}">`
-    : '') + note;
-  return embedShell({ name, actionText: 'Attachment', body });
+  // Poster is the animating GIF in Gmail; the real video rides in the
+  // attachment strip. No in-body note — the header + strip carry it.
+  // Poster <img> wrapped in a link so Gmail doesn't slap its save/download
+  // hover overlay on it (it treats linked images as clickable, not savable).
+  const body = posterSrc
+    ? `<a href="https://amalgm.ai" target="_blank" style="text-decoration:none;display:block"><img src="${escapeAttr(posterSrc)}" alt="${escapeAttr(name)}" style="display:block;width:100%;height:auto;background:${COLOR.bg}"></a>`
+    : `<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>` +
+      `<td align="center" style="padding:44px 16px;background:${COLOR.bg}">${PLAY_PILL}</td></tr></table>`;
+  return embedShell({ glyph: EMBED_GLYPH.video, name, action: { href: 'https://amalgm.ai' }, body });
 }
 
 /**
@@ -216,18 +263,19 @@ function renderAttachedVideoCard(label, poster) {
 function renderFileCardEmbed(label, url) {
   const name = label || mediaNameOf(url) || 'File';
   const ext = mediaExtensionOf(name).toUpperCase();
-  const inner =
-    `<span style="font-size:13px;color:${COLOR.text}">${escapeText(name)}</span>` +
-    (ext ? `<span style="font-size:10px;color:${COLOR.textMuted};padding-left:8px">${escapeText(ext)}</span>` : '');
-  const body = isHttpUrl(url)
-    ? `<a href="${escapeAttr(url)}" target="_blank" style="text-decoration:none;display:block;padding:4px 14px 14px">${inner}<span style="font-size:12px;color:${COLOR.link};padding-left:10px">Open &#8599;</span></a>`
-    : `<div style="padding:4px 14px 14px">${inner}<span style="font-size:12px;color:${COLOR.textMuted};padding-left:10px">On your computer &mdash; open in amalgm</span></div>`;
-  return embedShell({
-    name,
-    actionLabel: isHttpUrl(url) ? 'Open ↗' : 'amalgm ↗',
-    actionHref: isHttpUrl(url) ? url : 'https://amalgm.ai',
-    body,
-  });
+  const http = isHttpUrl(url);
+  const glyph = mediaKindOf(url) === 'audio' ? EMBED_GLYPH.audio : EMBED_GLYPH.document;
+  const extChip = ext
+    ? `<span style="font-size:10px;color:${COLOR.textMuted};padding-left:8px">${escapeText(ext)}</span>`
+    : '';
+  const meta = http
+    ? ''
+    : `<span style="font-size:12px;color:${COLOR.textMuted};padding-left:10px">On your computer</span>`;
+  const body =
+    `<div style="padding:6px 16px 16px">` +
+    `<span style="font-size:13px;color:${COLOR.text}">${escapeText(name)}</span>${extChip}${meta}` +
+    `</div>`;
+  return embedShell({ glyph, name, action: { href: http ? url : 'https://amalgm.ai' }, body });
 }
 
 /**
@@ -243,7 +291,7 @@ function renderFileCardEmbed(label, url) {
  */
 function renderMediaEmbed(alt, url, poster) {
   if (isCidUrl(url)) {
-    return renderImageEmbed(alt, url);
+    return renderImageEmbed(alt, url, 'https://amalgm.ai');
   }
   const attachedMatch = url.match(/^attached:(.*)$/i);
   if (attachedMatch) {
@@ -313,13 +361,11 @@ function renderEntityExpanded(label, type) {
   const display = label || entityTypeLabel(type);
   const body =
     `<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>` +
-    `<td align="center" style="padding:36px 16px 40px">` +
+    `<td align="center" style="padding:40px 16px 44px">` +
     `<span style="display:block;font-size:11px;line-height:14px;color:${COLOR.textMuted};text-transform:uppercase;letter-spacing:0.04em;padding-bottom:6px">${escapeText(entityTypeLabel(type))}</span>` +
-    `<span style="display:block;font-size:16px;font-weight:650;color:${COLOR.text};padding-bottom:16px">${escapeText(display)}</span>` +
-    `<a href="https://amalgm.ai" target="_blank" style="text-decoration:none">` +
-    `<span style="display:inline-block;background:${COLOR.bgChip};border:1px solid ${COLOR.pillBorder};border-radius:999px;padding:8px 18px;font-size:13px;color:${COLOR.link}">Open in amalgm &#8599;</span>` +
-    `</a></td></tr></table>`;
-  return embedShell({ name: display, actionLabel: 'Open ↗', actionHref: 'https://amalgm.ai', body });
+    `<span style="display:block;font-size:16px;font-weight:650;color:${COLOR.text}">${escapeText(display)}</span>` +
+    `</td></tr></table>`;
+  return embedShell({ glyph: EMBED_GLYPH.entity, name: display, action: { href: 'https://amalgm.ai' }, body });
 }
 
 function renderEntityEmbed(mode, type, label) {