opencode-generative-ui 0.1.0 → 0.1.2

package/README.md

@@ -9,6 +9,8 @@ The plugin renders HTML fragments and raw SVG in a native macOS window using [Gl
 
 This project is an OpenCode-focused extraction and adaptation of the original [`Michaelliv/pi-generative-ui`](https://github.com/Michaelliv/pi-generative-ui) work for `pi`. The original repo did the reverse-engineering work and established the shape of the widget tools and guideline set.
 
+The runtime now uses the same `morphdom` shell-update approach as the `pi` implementation: Glimpse loads a stable shell document, widget content is injected via `win.send()`, and DOM updates are diffed into place instead of replacing the whole page.
+
 ## What it does
 
 When OpenCode decides a response should be visual, the plugin can:
@@ -25,7 +27,24 @@ Typical use cases:
 - mockups
 - calculators
 
-## Install from npm in OpenCode
+Widget windows include built-in viewport controls:
+
+- pinch or `Cmd/Ctrl + wheel` to zoom
+- middle-mouse drag to pan
+- `Space + drag` to pan with a regular mouse or trackpad
+- keyboard shortcuts: `+`, `-`, `0`, `F`, and arrow keys
+
+## Install
+
+### From npm in OpenCode
+
+OpenCode does not auto-discover this repo or install it just because it exists on GitHub.
+
+For npm installation, all of the following must be true:
+
+1. This package has been published to npm
+2. The package name is listed in your OpenCode config
+3. OpenCode is restarted so it can install the plugin
 
 After publishing, add the package name to your OpenCode config:
 
@@ -36,11 +55,66 @@ After publishing, add the package name to your OpenCode config:
 }
 ```
 
-OpenCode will install the package with Bun on startup.
+OpenCode installs npm plugins listed in `opencode.json` automatically with Bun on startup.
+
+You do not need to run `npm install` or `bun install` inside the repo where you want to use the plugin. Just add the plugin name to your OpenCode config and restart OpenCode.
+
+You can add it either:
+
+1. Globally in `~/.config/opencode/opencode.json`
+2. Per project in `opencode.json`
+
+Example global config:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": ["opencode-generative-ui"]
+}
+```
+
+You can verify that OpenCode resolved the plugin with:
+
+```bash
+opencode debug config
+```
+
+If the package is installed correctly, you should see `opencode-generative-ui` in the resolved `plugin` list.
+
+### Runtime requirements
+
+- macOS
+- Bun
+- OpenCode
+- a working Swift/Xcode toolchain for `glimpseui`
+
+This plugin opens widget windows through [Glimpse](https://github.com/hazat/glimpse), which builds a small native Swift binary during install.
+
+If `glimpseui` fails to build, update your Xcode Command Line Tools or full Xcode install, then rerun:
+
+```bash
+bun pm trust glimpseui
+```
+
+Depending on how OpenCode installed the plugin, you may need to run that in the OpenCode cache/config directory rather than inside your app repo.
+
+### Local plugin development
+
+If you are developing this plugin itself, install dependencies in this plugin repo:
+
+```bash
+bun install
+```
+
+If Bun blocks the native build:
+
+```bash
+bun pm trust glimpseui
+```
 
-## Install locally in OpenCode
+### Use from a local checkout before publishing
 
-Clone this repo, then copy the plugin entry file into your OpenCode plugin directory if you want to run it before publishing.
+Clone this repo, then copy the plugin entry file into your OpenCode plugin directory if you want to run it before publishing to npm.
 
 For project-local use today:
 
@@ -53,7 +127,7 @@ For project-local use today:
 
 ## Development
 
-Install dependencies:
+Install dependencies in this repo:
 
 ```bash
 bun install
@@ -71,22 +145,9 @@ Build publishable output:
 bun run build
 ```
 
-## Runtime requirements
-
-- macOS
-- Bun
-- OpenCode
-- a working Swift/Xcode toolchain for `glimpseui`
-
-If `glimpseui` fails to build, update your Xcode Command Line Tools or full Xcode install, then rerun:
-
-```bash
-bun pm trust glimpseui
-```
-
 ## Current limitation
 
-This plugin does not yet reproduce pi's token-by-token widget streaming. Widgets render when the tool executes, not progressively during tool-argument streaming.
+This plugin now uses `morphdom` for in-window DOM updates, but it still does not reproduce pi's token-by-token widget streaming. OpenCode does not currently expose the same tool-argument delta hooks, so widgets still render when the tool executes rather than progressively during argument streaming.
 
 ## Credits
 

package/dist/index.js

@@ -1,7 +1,11 @@
 import { tool } from "@opencode-ai/plugin";
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
 import { open } from "glimpseui";
 import { AVAILABLE_MODULES, getGuidelines } from "./lib/guidelines.js";
 import { SVG_STYLES } from "./lib/svg-styles.js";
+const require = createRequire(import.meta.url);
+const MORPHDOM_SOURCE = readFileSync(require.resolve("morphdom/dist/morphdom-umd.min.js"), "utf8");
 const loadedModulesBySession = new Map();
 const activeWindowsBySession = new Map();
 function trackWindow(sessionID, win) {
@@ -55,16 +59,491 @@ function clearSessionState(sessionID) {
     loadedModulesBySession.delete(sessionID);
     closeSessionWindows(sessionID);
 }
-function wrapHTML(code, isSVG = false) {
-    if (isSVG) {
-        return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${SVG_STYLES}</style></head>
-<body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#1a1a1a;color:#e0e0e0;">
-${code}</body></html>`;
+const WIDGET_SHELL_STYLES = `
+#oc-shell {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #1a1a1a;
+  color: #e0e0e0;
+}
+
+#oc-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+#oc-stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+#oc-content {
+  position: relative;
+}
+
+body.oc-html #oc-content {
+  padding: 16px;
+}
+
+body.oc-svg #oc-content {
+  padding: 0;
+}
+
+body.oc-svg #oc-content > svg {
+  display: block;
+}
+
+#oc-toolbar {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 0.5px solid rgba(255, 255, 255, 0.18);
+  border-radius: 12px;
+  background: rgba(17, 17, 17, 0.88);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+}
+
+#oc-toolbar button {
+  min-width: 34px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1;
+}
+
+#oc-zoom-value {
+  min-width: 52px;
+  text-align: center;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: #a0a0a0;
+}
+
+#oc-hint {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  max-width: min(560px, calc(100vw - 24px));
+  padding: 10px 12px;
+  border: 0.5px solid rgba(255, 255, 255, 0.14);
+  border-radius: 12px;
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(10px);
+  font-size: 12px;
+  line-height: 1.45;
+  color: #a0a0a0;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+#oc-shell.oc-space-ready,
+#oc-shell.oc-panning {
+  cursor: grab;
+}
+
+#oc-shell.oc-panning {
+  cursor: grabbing;
+}
+
+@keyframes _fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+`;
+const WIDGET_SHELL_SCRIPT = String.raw `(() => {
+  const MIN_SCALE = 0.2;
+  const MAX_SCALE = 4;
+  const ZOOM_STEP = 1.15;
+  const PAN_STEP = 60;
+
+  const shell = document.getElementById('oc-shell');
+  const viewport = document.getElementById('oc-viewport');
+  const stage = document.getElementById('oc-stage');
+  const content = document.getElementById('oc-content');
+  const zoomValue = document.getElementById('oc-zoom-value');
+  const zoomInButton = document.getElementById('oc-zoom-in');
+  const zoomOutButton = document.getElementById('oc-zoom-out');
+  const fitButton = document.getElementById('oc-fit');
+  const resetButton = document.getElementById('oc-reset');
+  const isSVG = shell?.dataset.kind === 'svg';
+
+  if (!shell || !viewport || !stage || !content || !zoomValue) return;
+
+  let scale = 1;
+  let tx = 0;
+  let ty = 0;
+  let defaultScale = 1;
+  let defaultTx = 0;
+  let defaultTy = 0;
+  let spacePressed = false;
+  let panning = false;
+  let panPointerId = null;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panStartTx = 0;
+  let panStartTy = 0;
+  let gestureScaleStart = null;
+  let gestureAnchor = null;
+
+  const isEditableTarget = (target) => {
+    if (!(target instanceof Element)) return false;
+    return Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
+  };
+
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+
+  const measureContent = () => {
+    const width = Math.max(content.scrollWidth, content.offsetWidth, content.clientWidth);
+    const height = Math.max(content.scrollHeight, content.offsetHeight, content.clientHeight);
+    return {
+      width: Math.max(width, 1),
+      height: Math.max(height, 1),
+    };
+  };
+
+  const updateZoomLabel = () => {
+    zoomValue.textContent = Math.round(scale * 100) + '%';
+  };
+
+  const render = () => {
+    stage.style.transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
+    updateZoomLabel();
+  };
+
+  const defaultPositionFor = (nextScale) => {
+    const viewportRect = viewport.getBoundingClientRect();
+    const size = measureContent();
+    const scaledWidth = size.width * nextScale;
+    const scaledHeight = size.height * nextScale;
+    const centerX = (viewportRect.width - scaledWidth) / 2;
+    const centerY = (viewportRect.height - scaledHeight) / 2;
+
+    return {
+      x: isSVG ? centerX : Math.max(24, centerX),
+      y: isSVG ? centerY : Math.max(24, centerY),
+    };
+  };
+
+  const setDefaultView = (nextScale) => {
+    scale = nextScale;
+    const position = defaultPositionFor(nextScale);
+    tx = position.x;
+    ty = position.y;
+    defaultScale = scale;
+    defaultTx = tx;
+    defaultTy = ty;
+    render();
+  };
+
+  const fitView = () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    const size = measureContent();
+    const fitScale = clamp(
+      Math.min((viewportRect.width - 40) / size.width, (viewportRect.height - 40) / size.height),
+      MIN_SCALE,
+      MAX_SCALE,
+    );
+    setDefaultView(fitScale);
+  };
+
+  const resetView = () => {
+    scale = defaultScale;
+    tx = defaultTx;
+    ty = defaultTy;
+    render();
+  };
+
+  const zoomAt = (nextScale, clientX, clientY) => {
+    const bounded = clamp(nextScale, MIN_SCALE, MAX_SCALE);
+    const viewportRect = viewport.getBoundingClientRect();
+    const pointX = clientX - viewportRect.left;
+    const pointY = clientY - viewportRect.top;
+    const contentX = (pointX - tx) / scale;
+    const contentY = (pointY - ty) / scale;
+
+    scale = bounded;
+    tx = pointX - contentX * scale;
+    ty = pointY - contentY * scale;
+    render();
+  };
+
+  const zoomBy = (factor, clientX, clientY) => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomAt(
+      scale * factor,
+      clientX ?? viewportRect.left + viewportRect.width / 2,
+      clientY ?? viewportRect.top + viewportRect.height / 2,
+    );
+  };
+
+  const beginPan = (pointerId, clientX, clientY) => {
+    panning = true;
+    panPointerId = pointerId;
+    panStartX = clientX;
+    panStartY = clientY;
+    panStartTx = tx;
+    panStartTy = ty;
+    shell.classList.add('oc-panning');
+  };
+
+  const endPan = () => {
+    panning = false;
+    panPointerId = null;
+    shell.classList.remove('oc-panning');
+  };
+
+  viewport.addEventListener('wheel', (event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const factor = event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+      zoomBy(factor, event.clientX, event.clientY);
+    }
+  }, { passive: false });
+
+  viewport.addEventListener('pointerdown', (event) => {
+    if (event.button === 1 || (spacePressed && event.button === 0)) {
+      event.preventDefault();
+      viewport.setPointerCapture(event.pointerId);
+      beginPan(event.pointerId, event.clientX, event.clientY);
+    }
+  });
+
+  viewport.addEventListener('pointermove', (event) => {
+    if (!panning || event.pointerId !== panPointerId) return;
+    event.preventDefault();
+    tx = panStartTx + (event.clientX - panStartX);
+    ty = panStartTy + (event.clientY - panStartY);
+    render();
+  });
+
+  viewport.addEventListener('pointerup', (event) => {
+    if (event.pointerId === panPointerId) {
+      endPan();
+    }
+  });
+
+  viewport.addEventListener('pointercancel', (event) => {
+    if (event.pointerId === panPointerId) {
+      endPan();
     }
+  });
+
+  viewport.addEventListener('gesturestart', (event) => {
+    event.preventDefault();
+    gestureScaleStart = scale;
+    gestureAnchor = { x: event.clientX, y: event.clientY };
+  });
+
+  viewport.addEventListener('gesturechange', (event) => {
+    if (gestureScaleStart == null || !gestureAnchor) return;
+    event.preventDefault();
+    zoomAt(gestureScaleStart * event.scale, gestureAnchor.x, gestureAnchor.y);
+  });
+
+  viewport.addEventListener('gestureend', () => {
+    gestureScaleStart = null;
+    gestureAnchor = null;
+  });
+
+  window.addEventListener('keydown', (event) => {
+    if (event.code === 'Space' && !isEditableTarget(event.target)) {
+      event.preventDefault();
+      spacePressed = true;
+      shell.classList.add('oc-space-ready');
+      return;
+    }
+
+    if (isEditableTarget(event.target)) return;
+
+    const viewportRect = viewport.getBoundingClientRect();
+    const centerX = viewportRect.left + viewportRect.width / 2;
+    const centerY = viewportRect.top + viewportRect.height / 2;
+
+    if (event.key === '+' || event.key === '=') {
+      event.preventDefault();
+      zoomBy(ZOOM_STEP, centerX, centerY);
+      return;
+    }
+
+    if (event.key === '-') {
+      event.preventDefault();
+      zoomBy(1 / ZOOM_STEP, centerX, centerY);
+      return;
+    }
+
+    if (event.key === '0') {
+      event.preventDefault();
+      resetView();
+      return;
+    }
+
+    if (event.key === 'f' || event.key === 'F') {
+      event.preventDefault();
+      fitView();
+      return;
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      tx += PAN_STEP;
+      render();
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      tx -= PAN_STEP;
+      render();
+      return;
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      ty += PAN_STEP;
+      render();
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      ty -= PAN_STEP;
+      render();
+    }
+  });
+
+  window.addEventListener('keyup', (event) => {
+    if (event.code === 'Space') {
+      spacePressed = false;
+      shell.classList.remove('oc-space-ready');
+    }
+  });
+
+  zoomInButton?.addEventListener('click', () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomBy(ZOOM_STEP, viewportRect.left + viewportRect.width / 2, viewportRect.top + viewportRect.height / 2);
+  });
+
+  zoomOutButton?.addEventListener('click', () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomBy(1 / ZOOM_STEP, viewportRect.left + viewportRect.width / 2, viewportRect.top + viewportRect.height / 2);
+  });
+
+  fitButton?.addEventListener('click', fitView);
+  resetButton?.addEventListener('click', resetView);
+
+  window.addEventListener('resize', () => {
+    if (scale === defaultScale && tx === defaultTx && ty === defaultTy) {
+      setDefaultView(defaultScale);
+      return;
+    }
+    render();
+  });
+
+  let hasInitialView = false;
+
+  const refreshLayout = () => {
+    if (!hasInitialView) {
+      hasInitialView = true;
+      if (isSVG) {
+        fitView();
+        return;
+      }
+      setDefaultView(1);
+      return;
+    }
+    render();
+  };
+
+  window._ocRefresh = refreshLayout;
+  updateZoomLabel();
+})();`;
+function escapeJS(s) {
+    return s
+        .replace(/\\/g, "\\\\")
+        .replace(/'/g, "\\'")
+        .replace(/\n/g, "\\n")
+        .replace(/\r/g, "\\r")
+        .replace(/<\/script>/gi, "<\\/script>");
+}
+function shellHTML(isSVG = false) {
+    const bodyClass = isSVG ? "oc-svg" : "oc-html";
+    const bodyKind = isSVG ? "svg" : "html";
+    const hint = isSVG
+        ? "Pinch or Cmd/Ctrl + wheel to zoom. Pan with middle-drag, Space + drag, or arrow keys."
+        : "Zoom with pinch or Cmd/Ctrl + wheel. Pan with middle-drag, Space + drag, or arrow keys without breaking widget controls.";
     return `<!DOCTYPE html><html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
-<style>*{box-sizing:border-box}body{margin:0;padding:1rem;font-family:system-ui,-apple-system,sans-serif;background:#1a1a1a;color:#e0e0e0}${SVG_STYLES}</style>
-</head><body>${code}</body></html>`;
+<style>
+*{box-sizing:border-box}
+html,body{margin:0;width:100%;height:100%;overflow:hidden}
+body{font-family:system-ui,-apple-system,sans-serif;background:#1a1a1a;color:#e0e0e0}
+${SVG_STYLES}
+${WIDGET_SHELL_STYLES}
+</style>
+</head><body class="${bodyClass}">
+<div id="oc-shell" data-kind="${bodyKind}">
+  <div id="oc-viewport">
+    <div id="oc-stage">
+      <div id="oc-content"></div>
+    </div>
+  </div>
+  <div id="oc-toolbar" aria-label="Widget controls">
+    <button id="oc-zoom-out" type="button" title="Zoom out (-)">-</button>
+    <div id="oc-zoom-value">100%</div>
+    <button id="oc-zoom-in" type="button" title="Zoom in (+)">+</button>
+    <button id="oc-fit" type="button" title="Fit to viewport (F)">Fit</button>
+    <button id="oc-reset" type="button" title="Reset view (0)">Reset</button>
+  </div>
+  <div id="oc-hint">${hint}</div>
+</div>
+<script>${MORPHDOM_SOURCE}</script>
+<script>
+window._setContent = function(html) {
+  var root = document.getElementById('oc-content');
+  var target = document.createElement('div');
+  target.id = 'oc-content';
+  target.innerHTML = html;
+  morphdom(root, target, {
+    onBeforeElUpdated: function(from, to) {
+      if (from.isEqualNode(to)) return false;
+      return true;
+    },
+    onNodeAdded: function(node) {
+      if (node.nodeType === 1 && node.tagName !== 'STYLE' && node.tagName !== 'SCRIPT') {
+        node.style.animation = '_fadeIn 0.3s ease both';
+      }
+      return node;
+    }
+  });
+  if (window._ocRefresh) window._ocRefresh();
+};
+window._runScripts = function() {
+  document.querySelectorAll('#oc-content script').forEach(function(old) {
+    var s = document.createElement('script');
+    if (old.src) {
+      s.src = old.src;
+    } else {
+      s.textContent = old.textContent;
+    }
+    old.parentNode.replaceChild(s, old);
+  });
+};
+</script>
+<script>${WIDGET_SHELL_SCRIPT}</script>
+</body></html>`;
 }
 function normalizeTitle(title) {
     const normalized = title.replace(/_/g, " ").trim();
@@ -137,7 +616,7 @@ const showWidget = tool({
         });
         let win;
         try {
-            win = open(wrapHTML(code, isSVG), {
+            win = open(shellHTML(isSVG), {
                 width,
                 height,
                 title,
@@ -161,6 +640,9 @@ const showWidget = tool({
                 }
                 resolve(`Widget \"${title}\" rendered and shown to the user (${width}x${height}). ${reason}`);
             };
+            win.on("ready", () => {
+                win.send(`window._setContent('${escapeJS(code)}'); window._runScripts();`);
+            });
             win.on("message", (data) => {
                 messageData = data;
                 finish("User sent data from widget.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-generative-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "OpenCode plugin that renders HTML and SVG widgets in native macOS windows using Glimpse.",
   "type": "module",
   "exports": "./dist/index.js",
@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "@opencode-ai/plugin": "1.3.13",
-    "glimpseui": "^0.3.5"
+    "glimpseui": "^0.3.5",
+    "morphdom": "^2.7.4"
   },
   "devDependencies": {
     "@types/node": "^22.15.21",

package/src/glimpseui.d.ts

@@ -12,6 +12,7 @@ declare module "glimpseui" {
     send(js: string): void;
     setHTML(html: string): void;
     close(): void;
+    on(event: "ready", listener: () => void): this;
     on(event: "message", listener: (data: unknown) => void): this;
     on(event: "closed", listener: () => void): this;
     on(event: "error", listener: (err: Error) => void): this;