clay-server 4.8.2 → 4.9.0-beta.1

package/lib/public/modules/filebrowser.js

@@ -12,6 +12,7 @@ import { enterMarkdownSlides, exitMarkdownSlides, handleMarkdownSlideKey, syncMa
 import { initFileViewerTabs, openFileViewerTab, previewFileViewerTab, updateFileViewerTab, closeFileViewerTab, focusedFileViewerTab, focusedFileViewerTabData, clearFileViewerTabs } from './filebrowser-tabs.js';
 import { initFileBrowserContextMenu, downloadProjectFile } from './filebrowser-context-menu.js';
 import { registerClayFileLinkOpener } from './clay-file-links.js';
+import { isPlantUmlFile, renderPlantUmlPreview, cancelPlantUmlPreview } from './plantuml-preview.js';
 
 var ctx;
 var showDropHint = function () {};
@@ -195,8 +196,12 @@ export function initFileBrowser(_ctx) {
 
   // Markdown render toggle
   document.getElementById("file-viewer-render").addEventListener("click", function () {
-    if (!currentContent || (!currentIsMarkdown && !currentIsSvg)) return;
+    if (currentContent == null || (!currentIsMarkdown && !currentIsSvg && !store.get("fileViewerIsPlantUml"))) return;
     isRendered = !isRendered;
+    if (store.get("fileViewerIsPlantUml")) {
+      renderPlantUmlBody();
+      return;
+    }
     if (currentIsSvg) {
       renderSvgBody();
       return;
@@ -485,6 +490,7 @@ export function closeFileViewer() {
 }
 
 function teardownFileViewer() {
+  cancelPlantUmlPreview();
   if (currentFilePath && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
   sendUnwatch();
   inlineDiffActive = false;
@@ -522,6 +528,8 @@ export function resetFileBrowser() {
   isRendered = false;
   currentIsMarkdown = false;
   currentIsSvg = false;
+  store.set({ fileViewerIsPlantUml: false });
+  cancelPlantUmlPreview();
   historyVisible = false;
   currentHistoryEntries = [];
   pendingNavigate = null;
@@ -1157,6 +1165,8 @@ function showFileContent(msg, expectedRevision) {
   currentFilePath = msg.path;
   currentIsMarkdown = false;
   currentIsSvg = false;
+  store.set({ fileViewerIsPlantUml: false });
+  cancelPlantUmlPreview();
   if (!keepRenderState) isRendered = false;
   var requestedExt = msg.path.split(".").pop().toLowerCase();
   if (pendingRenderedOpen && (requestedExt === "md" || requestedExt === "mdx")) {
@@ -1183,13 +1193,14 @@ function showFileContent(msg, expectedRevision) {
     lightweightPreview = (msg.size || 0) > FILE_RICH_PREVIEW_MAX_BYTES;
     currentIsMarkdown = !lightweightPreview && (ext === "md" || ext === "mdx");
     currentIsSvg = !lightweightPreview && ext === "svg";
+    store.set({ fileViewerIsPlantUml: !lightweightPreview && isPlantUmlFile(msg.path) });
     if (lightweightPreview) isRendered = false;
     if (pendingRenderedOpen && currentIsMarkdown) isRendered = true;
 
-    if (currentIsMarkdown || currentIsSvg) {
+    if (currentIsMarkdown || currentIsSvg || store.get("fileViewerIsPlantUml")) {
       renderBtn.classList.remove("hidden");
       renderBtn.title = currentIsSvg ? "Show SVG source" : "Render markdown";
-      copyBtn.title = currentIsSvg ? "Copy SVG source" : "Copy Markdown source";
+      copyBtn.title = store.get("fileViewerIsPlantUml") ? "Copy PlantUML source" : currentIsSvg ? "Copy SVG source" : "Copy Markdown source";
     } else {
       copyBtn.title = "Copy contents";
     }
@@ -1203,6 +1214,9 @@ function showFileContent(msg, expectedRevision) {
         ? (previousContent == null ? "" : previousContent)
         : null;
       renderBody(transitionFrom, refreshSlideIndex);
+    } else if (store.get("fileViewerIsPlantUml")) {
+      if (!keepRenderState) isRendered = !store.get("pendingFileNavigation");
+      renderPlantUmlBody();
     } else if (currentIsSvg) {
       if (!keepRenderState) isRendered = true;
       renderSvgBody();
@@ -1269,6 +1283,16 @@ function showFileContent(msg, expectedRevision) {
   }
 }
 
+function renderPlantUmlBody() {
+  var bodyEl = document.getElementById("file-viewer-body");
+  var renderBtn = document.getElementById("file-viewer-render");
+  cancelPlantUmlPreview();
+  renderBtn.classList.toggle("active", isRendered);
+  renderBtn.title = isRendered ? "Show source" : "Show diagram preview";
+  if (isRendered) renderPlantUmlPreview(bodyEl, currentContent, currentFilePath);
+  else renderCodeWithLineNumbers(bodyEl, currentContent, "plaintext");
+}
+
 function renderSvgBody() {
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");
@@ -1626,6 +1650,8 @@ function rerenderFileContent() {
 
   if (currentIsMarkdown) {
     renderBody();
+  } else if (store.get("fileViewerIsPlantUml")) {
+    renderPlantUmlBody();
   } else if (currentIsSvg) {
     renderSvgBody();
   } else {

package/lib/public/modules/markdown.js

@@ -1,3 +1,4 @@
+import { renderWireframeBlocks } from './wireframe-chat.js';
 import { copyToClipboard, escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { getMermaidThemeVars } from './theme.js';
@@ -128,7 +129,7 @@ export function highlightCodeBlocks(el) {
   // messages container, so unhighlighted blocks (selector :not(.hljs))
   // are picked up in a single pass.
   if (store.get('replayingHistory')) return;
-  el.querySelectorAll("pre code:not(.hljs):not(.language-mermaid)").forEach(function (block) {
+  el.querySelectorAll("pre code:not(.hljs):not(.language-mermaid):not(.language-plantuml):not(.language-puml):not(.language-salt):not(.language-clay-sketch)").forEach(function (block) {
     var cls = Array.from(block.classList).find(function (c) { return c.startsWith("language-"); });
     if (cls) {
       var lang = cls.replace("language-", "");
@@ -167,6 +168,7 @@ export function renderMermaidBlocks(el) {
   // Same rationale as highlightCodeBlocks: defer mermaid renders until
   // history_done so they don't cause cascading layout shifts during replay.
   if (store.get('replayingHistory')) return;
+  renderWireframeBlocks(el);
   var blocks = el.querySelectorAll("pre code.language-mermaid");
   blocks.forEach(function (codeEl) {
     var pre = codeEl.parentElement;

package/lib/public/modules/plantuml-preview.js

@@ -0,0 +1,76 @@
+import { store } from './store.js';
+import { mountWireframeViewport } from './wireframe-viewport.js';
+import { sketchBrand, sketchCredit } from './wireframe-style.js';
+
+export function isPlantUmlFile(path) {
+  return /\.(puml|plantuml|pu|uml|salt)$/i.test(String(path || ""));
+}
+
+export function cancelPlantUmlPreview() {
+  var job = store.get('plantUmlPreviewJob');
+  if (!job) return;
+  clearTimeout(job.timer);
+  job.observer.disconnect();
+  job.controller.abort();
+  store.set({ plantUmlPreviewJob: null });
+}
+
+export function renderPlantUmlPreview(body, source, path) {
+  cancelPlantUmlPreview();
+  body.innerHTML = "";
+  var preview = document.createElement("div");
+  preview.className = "file-viewer-plantuml-preview";
+  var status = document.createElement("div");
+  status.className = "file-tree-loading";
+  status.setAttribute("role", "status");
+  status.textContent = "Rendering diagram…";
+  preview.appendChild(status);
+  body.appendChild(preview);
+
+  function showError(message) {
+    status.className = "file-tree-error";
+    status.textContent = message + " Use Show source to inspect the file.";
+  }
+  if (!String(source || "").trim()) { showError("This diagram is empty."); return; }
+  if (new TextEncoder().encode(source).length > 100000) { showError("Diagram is too large to preview (100 KB maximum)."); return; }
+
+  var job = { controller: new AbortController(), observer: null, timer: null };
+  job.observer = new MutationObserver(function () {
+    if (!preview.isConnected && store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+  });
+  job.observer.observe(body, { childList: true });
+  job.timer = setTimeout(function () {
+    if (store.get('plantUmlPreviewJob') !== job) return;
+    showError("The diagram preview timed out.");
+    cancelPlantUmlPreview();
+  }, 20000);
+  store.set({ plantUmlPreviewJob: job });
+  fetch("api/file/plantuml?path=" + encodeURIComponent(path), { signal: job.controller.signal, cache: "no-store" }).then(function (response) {
+    return response.text().then(function (text) {
+      if (!response.ok) throw new Error(text || "Unable to render this diagram.");
+      return text;
+    });
+  }).then(function (svg) {
+    if (store.get('plantUmlPreviewJob') !== job || !preview.isConnected) return;
+    if (svg.length > 8 * 1024 * 1024 || !/<svg[\s>]/i.test(svg)) throw new Error("The renderer returned an invalid diagram.");
+    var image = document.createElement("img");
+    image.alt = "Diagram preview of " + path;
+    image.draggable = false;
+    // An image context disables scripts, links and external SVG resources.
+    image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+    image.addEventListener("error", function () { showError("The diagram image could not be displayed."); });
+    status.textContent = "";
+    var heading = document.createElement('header'); heading.className = 'sketch-tools';
+    heading.innerHTML = '<div class="sketch-brand">' + sketchBrand() + '</div>' + sketchCredit();
+    preview.appendChild(heading);
+    var toolbar = document.createElement('div');
+    var viewport = document.createElement('div'); viewport.className = 'wireframe-file-canvas';
+    preview.appendChild(toolbar); preview.appendChild(viewport); viewport.appendChild(image);
+    mountWireframeViewport(viewport, image, toolbar);
+
+  }).catch(function (error) {
+    if (store.get('plantUmlPreviewJob') === job && error.name !== "AbortError") showError(error.message);
+  }).finally(function () {
+    if (store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+  });
+}

package/lib/public/modules/split-view.js

@@ -1,3 +1,4 @@
+import { openWireframe } from './wireframe-workbench.js';
 // Two-pane iframe shell for the split-view spike.
 
 import { store } from './store.js';
@@ -142,6 +143,19 @@ function handlePaneMessage(event) {
   if (event.origin !== window.location.origin) return;
   var msg = event.data;
   if (!msg || !host) return;
+  if (msg.type === "clay-pane-present-wireframe") {
+    var frames = host.querySelectorAll(".split-pane-frame");
+    var split = store.get('splitPanes');
+    var trusted = Array.prototype.some.call(frames, function (frame) {
+      if (frame.contentWindow !== event.source || frame.dataset.projectSlug !== msg.projectSlug || String(frame.dataset.sessionId) !== String(msg.sessionId) || msg.projectSlug !== store.get('currentSlug')) return false;
+      return split && split.panes.some(function (pane) {
+        var expected = new URL('/p/' + encodeURIComponent(pane.slug) + '/?pane=1&session=' + encodeURIComponent(pane.sessionId), window.location.href).href;
+        return pane.slug === msg.projectSlug && String(pane.sessionId) === String(msg.sessionId) && frame.src === expected;
+      });
+    });
+    if (trusted && msg.message) openWireframe(msg.message);
+    return;
+  }
   if (msg.type === "clay-pane-present-markdown") {
     var present = msg.message;
     if (present) presentMarkdownEdit(present);

package/lib/public/modules/wireframe-chat.js

@@ -0,0 +1,52 @@
+import { sketchBrand, sketchCredit } from './wireframe-style.js';
+import { store } from './store.js';
+import { renderWireframe, wireframeSource, wireframeImage } from './wireframe-render.js';
+import { openWireframe } from './wireframe-workbench.js';
+import { mountWireframeViewport } from './wireframe-viewport.js';
+
+export function renderWireframeBlocks(root) {
+  if (store.get('replayingHistory')) return;
+  root.querySelectorAll('pre code.language-clay-sketch, pre code.language-plantuml, pre code.language-puml, pre code.language-salt').forEach(function (code) {
+    var pre = code.parentElement;
+    if (!pre || pre.dataset.wireframeProcessed) return;
+    var source = wireframeSource(code.textContent, code.classList.contains('language-salt') ? 'salt' : 'plantuml');
+    // Wait for a complete PlantUML body while assistant text is streaming.
+    if (!/^\s*@end(?:salt|uml)\b/im.test(source)) return;
+    pre.dataset.wireframeProcessed = 'true';
+    var card = document.createElement('section');
+    card.className = 'wireframe-card';
+    card.setAttribute('aria-label', 'clay-sketch preview');
+    var header = document.createElement('header');
+    var label = document.createElement('div'); label.className = 'sketch-brand'; label.innerHTML = sketchBrand(); header.appendChild(label);
+    var open = document.createElement('button'); open.type = 'button'; open.dataset.openSketch = ''; open.textContent = 'Open sketch';
+    open.addEventListener('click', function (event) { event.stopPropagation(); openWireframe({ source: source, title: 'Sketch viewer' }); });
+    header.appendChild(open); card.appendChild(header);
+    var canvas = document.createElement('div'); canvas.className = 'wireframe-canvas'; card.appendChild(canvas);
+    var status = document.createElement('p'); status.setAttribute('role', 'status'); status.textContent = 'Rendering sketch…'; canvas.appendChild(status);
+    var details = document.createElement('details');
+    var summary = document.createElement('summary'); summary.textContent = 'Sketch source'; details.appendChild(summary);
+    pre.replaceWith(card); details.appendChild(pre);
+    var footer = document.createElement('div'); footer.className = 'sketch-source-footer'; footer.appendChild(details);
+    var credit = document.createElement('div'); credit.innerHTML = sketchCredit(); footer.appendChild(credit); card.appendChild(footer);
+    function render(current) {
+      canvas.replaceChildren(status); status.textContent = 'Rendering sketch…';
+      return renderWireframe(current, canvas).then(function (svg) {
+        if (!card.isConnected) return;
+        var image = wireframeImage(svg, 'clay-sketch preview');
+        canvas.replaceChildren(image);
+        mountWireframeViewport(canvas, image);
+      }).catch(function (error) {
+        if (!card.isConnected) return;
+        status.textContent = error.name === 'AbortError' ? 'Rendering was interrupted. Try again.' : error.message;
+        var retry = document.createElement('button'); retry.type = 'button'; retry.textContent = 'Retry';
+        retry.onclick = function () {
+          retry.remove();
+          render(current).catch(function () {});
+        };
+        canvas.appendChild(retry);
+        throw error;
+      });
+    }
+    render(source).catch(function () {});
+  });
+}

package/lib/public/modules/wireframe-render.js

@@ -0,0 +1,69 @@
+import { store } from './store.js';
+
+export function wireframeSource(source, language) {
+  source = String(source || '');
+  if (language === 'salt' && !/@start\w+/i.test(source)) return '@startsalt\n' + source + '\n@endsalt';
+  return source;
+}
+
+export function wireframeImage(svg, title) {
+  if (svg.length > 8 * 1024 * 1024 || !/<svg[\s>]/i.test(svg)) throw new Error('The renderer returned an invalid diagram.');
+  var image = document.createElement('img');
+  image.alt = title || 'Wireframe';
+  image.draggable = false;
+  // SVG is displayed in an inert image context, never inserted as markup.
+  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  return image;
+}
+
+function pump() {
+  if (store.get('wireframeRenderActive')) return;
+  var queue = (store.get('wireframeRenderQueue') || []).slice();
+  var job = queue.shift();
+  if (!job) return;
+  store.set({ wireframeRenderQueue: queue });
+  if (!job.target.isConnected) { job.reject(new Error('Preview closed.')); pump(); return; }
+  var controller = new AbortController();
+  store.set({ wireframeRenderActive: controller });
+  var timer = setTimeout(function () { controller.abort(); }, 20000);
+  fetch('api/wireframe/render', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ source: job.source }), signal: controller.signal, cache: 'no-store' }).then(function (response) {
+    return response.text().then(function (text) {
+      if (!response.ok) throw new Error(text || 'Unable to render this wireframe.');
+      return text;
+    });
+  }).then(function (svg) {
+    if (store.get('wireframeRenderActive') !== controller) throw new Error('Conversation changed.');
+    wireframeImage(svg);
+    if (svg.length < 500000) {
+      var cache = (store.get('wireframeRenderCache') || []).filter(function (entry) { return entry.source !== job.source; });
+      cache.push({ source: job.source, svg: svg });
+      store.set({ wireframeRenderCache: cache.slice(-12) });
+    }
+    job.resolve(svg);
+  }).catch(function (error) { job.reject(error); }).finally(function () {
+    clearTimeout(timer);
+    if (store.get('wireframeRenderActive') === controller) store.set({ wireframeRenderActive: null });
+    pump();
+  });
+}
+
+export function renderWireframe(source, target) {
+  if (!source.trim() || new TextEncoder().encode(source).length > 100000) return Promise.reject(new Error('Wireframes must contain between 1 byte and 100 KB of source.'));
+  var cache = store.get('wireframeRenderCache') || [];
+  var hit = cache.find(function (entry) { return entry.source === source; });
+  if (hit) return Promise.resolve(hit.svg);
+  return new Promise(function (resolve, reject) {
+    var queue = (store.get('wireframeRenderQueue') || []).slice();
+    queue.push({ source: source, target: target, resolve: resolve, reject: reject });
+    store.set({ wireframeRenderQueue: queue });
+    pump();
+  });
+}
+
+store.subscribe(function (state, previous) {
+  if (state.currentSlug === previous.currentSlug && state.activeSessionId === previous.activeSessionId && state.myUserId === previous.myUserId) return;
+  if (previous.wireframeRenderActive) previous.wireframeRenderActive.abort();
+  (previous.wireframeRenderQueue || []).forEach(function (job) { job.reject(new Error('Conversation changed.')); });
+  store.set({ wireframeRenderActive: null, wireframeRenderQueue: [], wireframeRenderCache: [] });
+});

package/lib/public/modules/wireframe-style.js

@@ -0,0 +1,6 @@
+export function sketchBrand() {
+  return '<span class="sketch-mark" aria-hidden="true">✎</span><span class="sketch-wordmark">clay<span>sketch</span></span>';
+}
+export function sketchCredit() {
+  return '<a class="sketch-credit" href="https://plantuml.com/salt" target="_blank" rel="noopener noreferrer">Built with PlantUML Salt <span aria-hidden="true">↗</span></a>';
+}

package/lib/public/modules/wireframe-viewport.js

@@ -0,0 +1,70 @@
+import { store } from './store.js';
+
+function entries() { return store.get('wireframeViewports') || new Map(); }
+function apply(entry) {
+  var image = entry.image;
+  if (!image.naturalWidth || !entry.viewport.isConnected || entries().get(entry.viewport) !== entry) return;
+  var style = getComputedStyle(entry.viewport);
+  var available = entry.viewport.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+  if (available <= 0) return;
+  var fitted = Math.min(1, available / image.naturalWidth);
+  if (entry.viewport.classList.contains('wireframe-workbench-canvas')) {
+    var height = entry.viewport.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+    if (height > 0) fitted = Math.min(fitted, height / image.naturalHeight);
+  }
+  // Default to the whole design at natural scale or smaller; zoom is explicit.
+  var scale = entry.mode === 'manual' ? entry.zoom : fitted;
+  image.style.width = image.naturalWidth * scale + 'px';
+  image.style.maxWidth = 'none';
+  image.style.height = 'auto';
+  image.style.margin = image.naturalWidth * scale > available ? '0' : '0 auto';
+  entry.scale = scale;
+  if (!entry.toolbar) return;
+  entry.toolbar.querySelector('[data-zoom-value]').textContent = Math.round(scale * 100) + '%';
+  entry.toolbar.querySelector('[data-zoom-fit]').setAttribute('aria-pressed', String(entry.mode === 'fit'));
+  entry.toolbar.querySelector('[data-zoom-out]').disabled = scale <= 0.25;
+  entry.toolbar.querySelector('[data-zoom-in]').disabled = scale >= 4;
+}
+function cleanup() {
+  var next = new Map(entries());
+  next.forEach(function (entry, viewport) {
+    if (viewport.isConnected && entry.image.isConnected) return;
+    entry.resize.disconnect(); next.delete(viewport);
+  });
+  if (next.size !== entries().size) store.set({ wireframeViewports: next });
+  if (!next.size) {
+    var observer = store.get('wireframeViewportCleanup');
+    if (observer) observer.disconnect();
+    store.set({ wireframeViewportCleanup: null });
+  }
+}
+export function mountWireframeViewport(viewport, image, toolbar) {
+  var previous = entries().get(viewport);
+  if (previous) previous.resize.disconnect();
+  var entry = { viewport: viewport, image: image, toolbar: toolbar, mode: previous ? previous.mode : 'auto', zoom: previous ? previous.zoom : 1, scale: 1 };
+  entry.resize = new ResizeObserver(function () { apply(entry); });
+  var next = new Map(entries()); next.set(viewport, entry);
+  store.set({ wireframeViewports: next });
+  if (toolbar) {
+    toolbar.classList.add('wireframe-zoom');
+    toolbar.setAttribute('role', 'group'); toolbar.setAttribute('aria-label', 'Sketch zoom');
+    toolbar.innerHTML = '<button type="button" data-zoom-out aria-label="Zoom out" title="Zoom out">−</button><button type="button" data-zoom-value aria-label="Reset zoom to 100%" title="Original size">100%</button><button type="button" data-zoom-in aria-label="Zoom in" title="Zoom in">+</button><button type="button" data-zoom-fit aria-pressed="true" title="Fit sketch to available width">Fit</button>';
+    function change(mode, zoom) {
+      entry.mode = mode; entry.zoom = zoom;
+      viewport.scrollLeft = 0; viewport.scrollTop = 0;
+      apply(entry);
+    }
+    toolbar.querySelector('[data-zoom-out]').onclick = function () { change('manual', Math.max(0.25, entry.scale / 1.25)); };
+    toolbar.querySelector('[data-zoom-in]').onclick = function () { change('manual', Math.min(4, Math.max(0.25, entry.scale * 1.25))); };
+    toolbar.querySelector('[data-zoom-value]').onclick = function () { change('manual', 1); };
+    toolbar.querySelector('[data-zoom-fit]').onclick = function () { change('fit', 1); };
+  }
+  image.addEventListener('load', function () { apply(entry); }, { once: true });
+  entry.resize.observe(viewport);
+  if (!store.get('wireframeViewportCleanup')) {
+    var observer = new MutationObserver(cleanup);
+    observer.observe(document.body, { childList: true, subtree: true });
+    store.set({ wireframeViewportCleanup: observer });
+  }
+  apply(entry);
+}

package/lib/public/modules/wireframe-workbench.js

@@ -0,0 +1,116 @@
+import { sketchBrand, sketchCredit } from './wireframe-style.js';
+import { store } from './store.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { renderWireframe, wireframeSource, wireframeImage } from './wireframe-render.js';
+import { refreshIcons } from './icons.js';
+import { mountWireframeViewport } from './wireframe-viewport.js';
+
+function panel() { return document.getElementById('wireframe-panel'); }
+export function closeWireframe() {
+  releaseRightWorkbench('wireframe');
+  if (panel()) panel().remove();
+  store.set({ wireframeDraft: null });
+}
+
+function download() {
+  var draft = store.get('wireframeDraft');
+  if (!draft) return;
+  var link = document.createElement('a');
+  link.href = URL.createObjectURL(new Blob([draft.source], { type: 'text/plain;charset=utf-8' }));
+  link.download = (draft.id || 'wireframe') + '.puml';
+  link.click();
+  setTimeout(function () { URL.revokeObjectURL(link.href); }, 1000);
+}
+
+function save(event) {
+  event.preventDefault();
+  var el = panel();
+  var draft = store.get('wireframeDraft');
+  var form = el.querySelector('form');
+  var button = form.querySelector('[type="submit"]');
+  var status = el.querySelector('.wireframe-save-status');
+  var requested = form.elements.path.value.trim();
+  button.disabled = true; status.textContent = 'Saving…';
+  fetch('api/wireframe/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: requested, source: draft.source }) }).then(function (response) {
+    if (!response.ok) return response.text().then(function (text) { throw new Error(text); });
+    return response.json();
+  }).then(function (result) {
+    if (store.get('wireframeDraft') !== draft) return;
+    status.textContent = 'Saved to ' + result.path;
+    form.hidden = true;
+  }).catch(function (error) {
+    if (store.get('wireframeDraft') === draft) status.textContent = error.message || 'Unable to save the wireframe.';
+  }).finally(function () { button.disabled = false; });
+}
+
+function createPanel() {
+  var host = document.getElementById('main-panels');
+  if (!host) return null;
+  var el = document.createElement('section'); el.id = 'wireframe-panel';
+  el.setAttribute('aria-label', 'clay-sketch viewer');
+  el.innerHTML = '<header class="wireframe-topbar"><div class="sketch-brand">' + sketchBrand() + '</div><strong class="sketch-title">Sketch viewer</strong><div class="wireframe-window-actions"><button type="button" data-wide title="Widen panel" aria-label="Widen panel" aria-pressed="false"><i data-lucide="chevrons-left-right"></i></button><button type="button" data-full title="Toggle fullscreen" aria-label="Toggle fullscreen" aria-pressed="false"><i data-lucide="maximize-2"></i></button><button type="button" data-close title="Close clay-sketch" aria-label="Close clay-sketch"><i data-lucide="x"></i></button></div></header><div class="wireframe-toolbar"><div class="wireframe-zoom"></div><button type="button" data-save>Save to project</button><button type="button" data-download title="Download sketch source" aria-label="Download sketch source"><i data-lucide="download"></i></button></div><form hidden class="wireframe-save-form"><label>Project file path<input name="path" aria-label="Project file path" required pattern=".*\\.puml" placeholder="wireframe.puml"></label><button type="submit">Save</button><button type="button" data-cancel>Cancel</button></form><p class="wireframe-save-status" role="status"></p><div class="wireframe-workbench-canvas"></div><footer class="sketch-footer">' + sketchCredit() + '<span>Revise through conversation</span></footer>';
+  host.appendChild(el);
+  el.querySelector('[data-close]').onclick = closeWireframe;
+  el.querySelector('[data-download]').onclick = download;
+  el.querySelector('[data-save]').onclick = function () {
+    var form = el.querySelector('form'); form.hidden = false;
+    var draft = store.get('wireframeDraft');
+    form.elements.path.value = (draft.id || 'wireframe') + '.puml';
+    form.elements.path.focus();
+  };
+  el.querySelector('[data-cancel]').onclick = function () { el.querySelector('form').hidden = true; el.querySelector('[data-save]').focus(); };
+  el.querySelector('form').onsubmit = save;
+  el.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape') return;
+    event.stopPropagation();
+    if (!el.querySelector('form').hidden) el.querySelector('[data-cancel]').click();
+    else closeWireframe();
+  });
+  ['wide', 'full'].forEach(function (action) {
+    el.querySelector('[data-' + action + ']').onclick = function () {
+      var active = el.classList.toggle(action === 'wide' ? 'wireframe-wide' : 'panel-fullscreen');
+      this.setAttribute('aria-pressed', String(active));
+    };
+  });
+  refreshIcons();
+  return el;
+}
+
+export function openWireframe(message) {
+  if (!message || typeof message.source !== 'string' || new TextEncoder().encode(message.source).length > 100000) return;
+  if (store.get('paneMode') && window.parent !== window) {
+    window.parent.postMessage({ type: 'clay-pane-present-wireframe', message: message, projectSlug: store.get('currentSlug'), sessionId: store.get('activeSessionId') }, window.location.origin);
+    return;
+  }
+  claimRightWorkbench('wireframe');
+  var el = panel() || createPanel();
+  if (!el) return;
+  var draft = { source: wireframeSource(message.source, message.language), title: String(message.title || 'clay-sketch').slice(0, 100),
+    id: /^[a-zA-Z0-9_-]{1,80}$/.test(message.id || '') ? message.id : 'wireframe' };
+  store.set({ wireframeDraft: draft });
+  el.querySelector('header strong').textContent = draft.title;
+  el.querySelector('.wireframe-save-status').textContent = '';
+  el.querySelector('form').hidden = true;
+  draw(draft, el).catch(function () {});
+}
+function draw(draft, el) {
+  var canvas = el.querySelector('.wireframe-workbench-canvas');
+  var active = store.get('wireframeDraft');
+  var status = document.createElement('p'); status.setAttribute('role', 'status'); status.textContent = 'Rendering sketch…';
+  canvas.replaceChildren(status);
+  return renderWireframe(draft.source, canvas).then(function (svg) {
+    if (store.get('wireframeDraft') !== active || !canvas.isConnected) throw new DOMException('Sketch changed.', 'AbortError');
+    var image = wireframeImage(svg, draft.title);
+    canvas.replaceChildren(image);
+    mountWireframeViewport(canvas, image, el.querySelector('.wireframe-zoom'));
+  }).catch(function (error) {
+    if (store.get('wireframeDraft') !== active) throw error;
+    status.textContent = error.name === 'AbortError' ? 'Rendering was interrupted. Reopen the wireframe to retry.' : error.message;
+    throw error;
+  });
+}
+registerRightWorkbench('wireframe', closeWireframe);
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) closeWireframe();
+});

package/lib/public/style.css

@@ -1,3 +1,4 @@
+@import url("css/wireframe.css");
 @import url("css/session-github.css");
 @import url("css/vendor-login-browser.css");
 @import url("css/issues.css");

package/lib/salt-chrome.js

@@ -0,0 +1,36 @@
+// Diagram decoration geometry adapted from PlantUML 1.2026.8 (GPL-3.0-or-later).
+var text = require('./salt-text');
+function decorate(root, draw, shapes) {
+  var options = root.options || {};
+  var block = { width: root.width, height: root.height, draw: draw };
+  function add(name, top) {
+    if (!options[name]) return;
+    var small = name === 'header' || name === 'footer';
+    var padding = name === 'title' || name === 'legend' ? 5 : 0;
+    var margin = name === 'legend' ? 12 : name === 'title' ? 5 : name === 'caption' ? 1 : 0;
+    var labels = options.labels[name].map(function (parsed) {
+      parsed.runs.forEach(function (run) { run.size = small ? 10 : 14; run.bold = name === 'title' || run.bold; run.color = small ? '#888' : run.color; });
+      return text.measureLabel(parsed);
+    });
+    var textWidth = Math.max.apply(null, labels.map(function (label) { return label.width; }));
+    var textHeight = labels.reduce(function (sum, label) { return sum + label.height; }, 0);
+    var width = textWidth + 2 * (padding + margin) + 1;
+    var height = textHeight + 2 * (padding + margin) + 1;
+    var previous = block;
+    block = { width: Math.max(previous.width, width), height: previous.height + height, draw: function (x, y) {
+      var bx = x + (name === 'header' ? blockWidth - width : (blockWidth - width) / 2);
+      var by = y + (top ? 0 : previous.height);
+      previous.draw(x + (blockWidth - previous.width) / 2, y + (top ? height : 0));
+      if (name === 'legend') shapes.rect(bx + margin, by + margin, textWidth + 2 * padding, textHeight + 2 * padding, '#DDD', '#000', 7.5);
+      var yy = by + padding + margin;
+      labels.forEach(function (label) {
+        var offset = name === 'legend' ? 0 : name === 'header' ? textWidth - label.width : (textWidth - label.width) / 2;
+        shapes.label(label, bx + margin + padding + offset, yy); yy += label.height;
+      });
+    } };
+    var blockWidth = block.width;
+  }
+  add('legend', false); add('title', true); add('caption', false); add('header', true); add('footer', false);
+  return block;
+}
+module.exports = { decorate: decorate };

package/lib/salt-hand.js

@@ -0,0 +1,37 @@
+// Adapted from PlantUML HandJiggle/URectangleHand by Adrian Vogt, GPL-3.0-or-later.
+// See LICENSES/plantuml-salt.txt. Each translated reference graphic resets its seed.
+function jiggle(x, y, variation) {
+  var seed = (424242n ^ 25214903917n) & ((1n << 48n) - 1n);
+  function bits(n) { seed = (seed * 25214903917n + 11n) & ((1n << 48n) - 1n); return Number(seed >> BigInt(48 - n)); }
+  function random() { return (bits(26) * 134217728 + bits(27)) / 9007199254740992; }
+  var points = [[x, y]];
+  function lineTo(xx, yy) {
+    var dx = Math.abs(xx - x); var dy = Math.abs(yy - y); var distance = Math.hypot(dx, dy);
+    if (distance < 0.001) return;
+    var segments = Math.round(distance / 10); var amount = variation;
+    if (segments < 5) { segments = 5; amount /= 3; }
+    for (var i = 0; i < segments; i++) {
+      var offset = (random() - 0.5) * amount;
+      points.push([x + (xx - x) / segments * i - offset * dy / distance, y + (yy - y) / segments * i - offset * dx / distance]);
+    }
+    points.push([xx, yy]); x = xx; y = yy;
+  }
+  function arc(a, b, cx, cy, rx, ry) {
+    [(a + b) / 2, b].forEach(function (angle) { lineTo(cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry); });
+  }
+  return { points: points, lineTo: lineTo, arc: arc };
+}
+function line(dx, dy) { var j = jiggle(0, 0, 2); j.lineTo(dx, dy); return j.points; }
+function rect(w, h, radius) {
+  var rx = Math.min(radius || 0, w / 2); var ry = Math.min(radius || 0, h / 2);
+  var j = jiggle(rx, 0, 1.5);
+  if (!radius) { j.lineTo(w, 0); j.lineTo(w, h); j.lineTo(0, h); j.lineTo(0, 0); }
+  else {
+    j.lineTo(w - rx, 0); j.arc(-Math.PI / 2, 0, w - rx, ry, rx, ry);
+    j.lineTo(w, h - ry); j.arc(0, Math.PI / 2, w - rx, h - ry, rx, ry);
+    j.lineTo(rx, h); j.arc(Math.PI / 2, Math.PI, rx, h - ry, rx, ry);
+    j.lineTo(0, ry); j.arc(Math.PI, Math.PI * 1.5, rx, ry, rx, ry);
+  }
+  return j.points;
+}
+module.exports = { line: line, rect: rect };