clay-server 4.8.2-beta.1 → 4.9.0-beta.1

package/lib/salt-svg.js

@@ -0,0 +1,164 @@
+// Geometry adapted from PlantUML 1.2026.8 Salt, (c) Arnaud Roques, GPL-3.0-or-later.
+// See LICENSES/plantuml-salt.txt. Rendering is local and bounded; image bytes are pre-resolved.
+var layout = require('./salt-layout');
+var shapes = require('./salt-svg-shapes');
+var overlays = require('./salt-overlays');
+function renderSaltSvg(root) {
+  layout.measure(root);
+  require('./salt-screen').apply(root);
+  var out = [];
+  var scale = (root.options || {}).scale || 1;
+  var s = shapes.createShapes(out, scale, (root.options || {}).handwritten);
+  var front = [];
+  function grid(node, x, y) {
+    var horizontal = new Set();
+    var vertical = new Set();
+    var rows = node.heights.length;
+    var cols = node.columns.length;
+    var style = node.style;
+    if (/[+#^]/.test(style)) {
+      for (var c = 0; c < cols; c++) { horizontal.add('0,' + c); horizontal.add(rows + ',' + c); }
+      for (var r = 0; r < rows; r++) { vertical.add(r + ',0'); vertical.add(r + ',' + cols); }
+    }
+    node.rows.forEach(function (row, r) {
+      row.forEach(function (child, c) {
+        if (child.type === 'span') return;
+        var end = c + (child.span || 1);
+        if (/[#-]/.test(style)) for (var cc = c; cc < end; cc++) { horizontal.add(r + ',' + cc); horizontal.add((r + 1) + ',' + cc); }
+        if (/[#!]/.test(style)) { vertical.add(r + ',' + c); vertical.add(r + ',' + end); }
+      });
+    });
+    function referenceOrder(set) {
+      var capacity = 16;
+      while (set.size > capacity * 0.75) capacity *= 2;
+      function bucket(key) {
+        var p = key.split(',').map(Number);
+        var hash = p[0] * 47 + p[1];
+        return (hash ^ (hash >>> 16)) & (capacity - 1);
+      }
+      return Array.from(set).sort(function (a, b) { return bucket(a) - bucket(b); });
+    }
+    referenceOrder(horizontal).forEach(function (key) {
+      var p = key.split(',').map(Number);
+      s.line(x + node.xs[p[1]], y + node.ys[p[0]], x + node.xs[p[1] + 1], y + node.ys[p[0]]);
+    });
+    referenceOrder(vertical).forEach(function (key) {
+      var p = key.split(',').map(Number);
+      s.line(x + node.xs[p[1]], y + node.ys[p[0]], x + node.xs[p[1]], y + node.ys[p[0] + 1]);
+    });
+    if (node.title) {
+      s.rect(x + 6, y, node.titleLabel.width, node.titleLabel.height, '#FFF', '#FFF');
+      s.label(node.titleLabel, x + 6, y);
+    }
+  }
+  function tabs(node, x, y) {
+    var offset = 0;
+    node.items.forEach(function (child) {
+      var w = child.width;
+      var h = child.height;
+      if (node.vertical) {
+        s.label(child.label, x, y + offset + 2);
+        s.line(x, y + offset, x + node.width, y + offset);
+        s.line(x, y + offset, x, y + offset + h + 5);
+        s.line(x, y + offset + h + 5, x + node.width, y + offset + h + 5);
+        s.line(x + node.width, y + offset + h + 5, x + node.width, y + offset + h + 15);
+        offset += h + 15;
+      } else {
+        s.label(child.label, x + offset + 2, y);
+        s.line(x + offset, y, x + offset, y + h);
+        s.line(x + offset, y, x + offset + w + 5, y);
+        s.line(x + offset + w + 5, y, x + offset + w + 5, y + h);
+        s.line(x + offset + w + 5, y + h, x + offset + w + 15, y + h);
+        offset += w + 15;
+      }
+    });
+  }
+  function draw(node, x, y, w, h) {
+    if (node.screen) {
+      if (/[+#^]/.test(node.style)) s.rect(x, y, w, h);
+      if (node.title) s.label(node.titleLabel, x + node.screen.padding, y + 2);
+      if (/[#-]/.test(node.style)) node.screen.horizontal.forEach(function (yy) { s.line(x, y + yy, x + w, y + yy, '#AAA'); });
+      if (/[#!]/.test(node.style)) node.screen.vertical.forEach(function (line) { s.line(x + line.x, y + line.y, x + line.x, y + line.y + line.height, '#AAA'); });
+      node.screen.cells.forEach(function (cell) { draw(cell.node, x + cell.x, y + cell.y, cell.width, cell.height); });
+      return;
+    }
+    if (node.type === 'container') {
+      if (node.style[0] === 'T') return require('./salt-tree').draw(node, x, y, s, draw);
+      if (node.style === '/') return tabs(node, x, y);
+      if (node.style === '*') {
+        s.rect(x, y, w, h, '#DDD');
+        var mx = x;
+        node.items.forEach(function (child) { s.label(child.label, mx, y); mx += child.width + 10; });
+        front.push(function () { overlays.menu(node, x, y, s); });
+        return;
+      }
+      node.rows.forEach(function (row, r) {
+        row.forEach(function (child, c) {
+          if (child.type === 'span') return;
+          draw(child, x + node.xs[c] + 1, y + node.ys[r] + 1 + (r === 0 ? node.titleLabel.height / 2 : 0), node.xs[c + (child.span || 1)] - node.xs[c] - 1, node.heights[r] - 1);
+        });
+      });
+      grid(node, x, y);
+      if (node.scroll) { overlays.scroll(node, x, y, s); front.push(function () { overlays.scroll(node, x, y, s); }); }
+      return;
+    }
+    if (node.type === 'space') return;
+    if (node.type === 'sprite') {
+      for (var xx = 0; xx < node.width; xx++) for (var yy = 0; yy < node.height; yy++) {
+        if (node.pixels[yy][xx] === 'X') s.rect(x + xx, y + yy, 0.5, 0.5, s.lastInk() || '#000', '#000', 0, 0.5);
+      }
+      return;
+    }
+    if (node.type === 'separator') {
+      var yy = y + h / 2 - (node.style === '==' ? 1 : 0);
+      s.line(x, yy, x + w, yy, '#AAA', node.style === '~~' ? 1.5 : 1, node.style === '..' ? '1,2' : null);
+      if (node.style === '==') s.line(x, yy + 2, x + w, yy + 2, '#AAA');
+      return;
+    }
+    var label = node.label;
+    if (node.type === 'button') {
+      s.rect(x + 2.5, y + 2.5, node.width - 5, node.height - 5, '#EEE', '#000', 5, 2.5);
+      s.label(label, x + (node.width - label.width) / 2, y + 4.5);
+    } else if (node.type === 'input') {
+      s.label(label, x + 3, y);
+      s.line(x + 1, y + label.height, x + node.width - 2, y + label.height);
+      s.line(x + 1, y + label.height - 3, x + 1, y + label.height - 1);
+      s.line(x + node.width - 2, y + label.height - 3, x + node.width - 2, y + label.height - 1);
+    } else if (node.type === 'select') {
+      s.rect(x, y, node.width - 1, node.height - 1, '#EEE');
+      s.label(label, x + 2, y + 2);
+      var xx = x + node.width - 12;
+      s.line(xx, y, xx, y + node.height - 1);
+      s.polygon([[xx + 3, y + 6], [xx + 9, y + 6], [xx + 6, y + label.height - 2]]);
+      overlays.dropdown(node, x, y, s);
+      front.push(function () { overlays.dropdown(node, x, y, s); });
+    } else if (node.type === 'checkbox' || node.type === 'radio') {
+      s.label(label, x + 20, y);
+      if (node.type === 'radio') {
+        s.ellipse(x + 2, y + (node.height - 10) / 2, 10, 10);
+        if (node.checked) s.ellipse(x + 5, y + (node.height - 4) / 2, 4, 4, '#000');
+      } else {
+        s.rect(x + 2, y + (node.height - 10) / 2, 10, 10, 'none', '#000', 0, 1.5);
+        if (node.checked) s.polygon([[x + 3, y + 6], [x + 6, y + 9], [x + 13, y], [x + 6, y + 7]], 1.5);
+      }
+    } else s.label(label, x, y);
+  }
+  var decorated = require('./salt-chrome').decorate(root, function (x, y) { draw(root, x, y, root.width, root.height); }, s);
+  decorated.draw(root.options.screen ? 1 : 5, root.options.screen ? 1 : 5);
+  front.forEach(function (drawOverlay) { drawOverlay(); });
+  var margin = out.length ? 1 : 0;
+  var width = Math.floor(Math.max(decorated.width + 10, s.bounds.x) + margin);
+  var height = Math.floor(Math.max(decorated.height + 10, s.bounds.y) + margin);
+  if (root.options.screen) {
+    width = root.options.screen.width; height = root.options.screen.height;
+    if (s.bounds.x > width || s.bounds.y > height) throw Object.assign(new Error('Clay screen layout: drawing extends outside the canvas. Increase its dimensions or simplify the contents.'), { status: 422 });
+  }
+  width = Math.round(width * scale * 1000) / 1000; height = Math.round(height * scale * 1000) / 1000;
+  if (width > 8192 || height > 8192) throw Object.assign(new Error('Wireframe exceeds the 8192-pixel canvas limit.'), { status: 413 });
+  var background = (root.options || {}).background || '#FFFFFF';
+  if (background !== '#FFFFFF') out.unshift('<rect x="0" y="0" width="' + width + '" height="' + height + '" fill="' + background + '" stroke="none"/>');
+  out.unshift('<svg xmlns="http://www.w3.org/2000/svg"' + (root.options.screen ? ' data-clay-screen="true"' : '') + ' width="' + width + '" height="' + height + '" viewBox="0 0 ' + Math.floor(width) + ' ' + Math.floor(height) + '" preserveAspectRatio="none" style="width:' + Math.floor(width) + 'px;height:' + Math.floor(height) + 'px;background:' + ((root.options || {}).background || '#FFFFFF') + '" role="img" aria-label="Wireframe"><g font-family="sans-serif" lengthAdjust="spacing">');
+  out.push('</g></svg>');
+  return out.join('');
+}
+module.exports = { renderSaltSvg: renderSaltSvg };

package/lib/salt-text.js

@@ -0,0 +1,112 @@
+// Salt text layout uses the pinned reference metrics, without fonts or Java at runtime.
+var fs = require('node:fs');
+var path = require('node:path');
+var zlib = require('node:zlib');
+var profiles = {};
+var colors = require('./assets/salt-colors.json');
+var icons = require('./assets/salt-icons.json');
+function color(value) {
+  var hex = colors[value.toLowerCase()] || value.toUpperCase();
+  if (!/^#(?:[A-F0-9]{3}|[A-F0-9]{6})$/.test(hex)) fail('Unsupported color: ' + value);
+  return hex.replace(/^#(.)\1(.)\2(.)\3$/, '#$1$2$3');
+}
+function fail(message) { throw Object.assign(new Error(message), { status: 422 }); }
+function parseLabel(value) {
+  var heading = /^(={1,6})\s*(.*)$/.exec(value);
+  var order = heading ? heading[1].length - 1 - (/^</.test(heading[2]) ? 1 : 0) : -1;
+  var size = heading ? order <= 0 ? 16 : order === 1 ? 14 : order === 2 ? 13 : 12 : 12;
+  if (heading) value = heading[2];
+  var list = /^(\*+|#+)\s+(\S.*)$/.exec(value);
+  if (list) value = list[2];
+  value = value.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+  value = value.replace(/<U\+([0-9a-f]{4,6})>/gi, function (_, cp) {
+    var code = parseInt(cp, 16); if (code > 0x10ffff || code >= 0xd800 && code <= 0xdfff) fail('Invalid Unicode code point.');
+    return String.fromCodePoint(code);
+  });
+  var state = { color: '#000', bold: !!heading && order < 3, italic: !!heading && order >= 3, size: size };
+  var runs = [];
+  var formats = { '**': 'bold', '//': 'italic', '""': 'mono', '--': 'strike', '__': 'underline', '~~': 'wave' };
+  var parts = value.split(/(<[^>]+>|\*\*|\/\/|""|--|__|~~)/g);
+  parts.forEach(function (part, index) {
+    if (!part) return;
+    if (formats[part]) {
+      var format = formats[part];
+      var closing = parts.indexOf(part, index + 1);
+      if (state[format] || closing > index && parts.slice(index + 1, closing).some(Boolean)) { state[format] = !state[format]; return; }
+    }
+    if (/^<&/.test(part)) {
+      var icon = part.slice(2, -1); if (!icons[icon]) fail('Unknown built-in icon: ' + icon);
+      runs.push(Object.assign({}, state, { text: '', icon: icon })); return;
+    }
+    if (/^<img:/i.test(part)) {
+      var url = part.slice(5, -1);
+      if (!/^https:\/\//i.test(url)) fail('Wireframe images require a public HTTPS URL.');
+      runs.push(Object.assign({}, state, { text: '', imageUrl: url })); return;
+    }
+    var tag = /^<(\/?)(b|i|s|u|w|color|back|font|size)(?::([^>]+))?>$/i.exec(part);
+    if (tag) {
+      var name = tag[2].toLowerCase(); var end = !!tag[1];
+      var key = { b: 'bold', i: 'italic', s: 'strike', u: 'underline', w: 'wave' }[name];
+      if (key) { state[key] = !end; state[key + 'Color'] = !end && tag[3] ? color(tag[3]) : null; }
+      else if (name === 'color') state.color = end ? '#000' : color(tag[3] || 'black');
+      else if (name === 'back') state.background = end ? null : color(tag[3] || 'white');
+      else if (name === 'font') { if (!end && !/^(monospaced?|sansserif|sans-serif)$/i.test(tag[3] || '')) fail('Unsupported font family.'); state.mono = !end && /^mono/i.test(tag[3]); }
+      else if (name === 'size') { state.size = end ? size : Number(tag[3]); if ([10, 12, 13, 14, 16, 18, 20].indexOf(state.size) === -1) fail('Supported font sizes are 10, 12, 13, 14, 16, 18, and 20.'); }
+      return;
+    }
+    if (/<\/?[a-z][^>]*>|<\$|\[\[/i.test(part)) fail('Unsupported embedded markup in wireframe text.');
+    var previous = runs[runs.length - 1];
+    if (previous && !previous.icon && !previous.imageUrl && JSON.stringify(Object.assign({}, previous, { text: '' })) === JSON.stringify(Object.assign({}, state, { text: '' }))) previous.text += part;
+    else runs.push(Object.assign({}, state, { text: part }));
+  });
+  return { text: runs.map(function (r) { return r.text || r.icon || ''; }).join(''), runs: runs,
+    list: list ? { type: list[1][0] === '*' ? 'bullet' : 'number', level: list[1].length } : null,
+    bold: runs.some(function (r) { return r.bold; }), italic: runs.some(function (r) { return r.italic; }) };
+}
+function measureRun(run) {
+  if (run.icon) return Object.assign({}, run, { width: 10, height: 8, descent: 0 });
+  if (run.imageUrl) {
+    if (!run.image) fail('Wireframe image was not resolved.');
+    return Object.assign({}, run, { width: run.image.width, height: run.image.height, descent: 0 });
+  }
+  var profile = run.mono ? 'monospace' + (run.size && run.size !== 12 ? '-' + run.size : '') : !run.size || run.size === 12 ? 'metrics' : String(run.size);
+  if (!profiles[profile]) profiles[profile] = zlib.gunzipSync(fs.readFileSync(path.join(__dirname, 'assets/salt-font-' + profile + '.bin.gz')));
+  var metrics = profiles[profile];
+  var style = (run.bold ? 1 : 0) + (run.italic ? 2 : 0);
+  var width = 0;
+  var height = 0;
+  var descent = 0;
+  for (var c of run.text) {
+    var cp = c.codePointAt(0);
+    // Supplementary characters use the reference missing-glyph advance.
+    if (cp > 65535) cp = 0xfffd;
+    var offset = (style * 65536 + cp) * 12;
+    width += metrics.readFloatBE(offset);
+    height = Math.max(height, metrics.readFloatBE(offset + 4));
+    descent = Math.max(descent, metrics.readFloatBE(offset + 8));
+  }
+  return Object.assign({}, run, { width: width, height: height, descent: descent });
+}
+function measureLabel(node, trim) {
+  var runs = (node.runs || parseLabel(node.text || '').runs).map(function (r) { return Object.assign({}, r); });
+  if (trim && runs.length) {
+    runs[0].text = runs[0].text.trimStart();
+    runs[runs.length - 1].text = runs[runs.length - 1].text.trimEnd();
+  }
+  runs = runs.filter(function (r) { return r.text || r.icon || r.imageUrl; });
+  if (!runs.length) runs.push({ text: '\u00a0', bold: false, italic: false });
+  runs = runs.filter(function (r) { return r.text || r.icon || r.imageUrl; }).map(function (r) {
+    var measured = measureRun(r);
+    var leading = /^ */.exec(r.text)[0];
+    if (r.icon || r.imageUrl) return measured;
+    measured.displayText = r.text.trim() || '\u00a0';
+    measured.displayWidth = measureRun(Object.assign({}, r, { text: measured.displayText })).width;
+    measured.leadingWidth = r.text.trim() ? measureRun(Object.assign({}, r, { text: leading })).width : 0;
+    return measured;
+  });
+  var list = node.list;
+  var indent = list ? list.type === 'number' ? measureRun({ text: '1. ', size: 12 }).width * list.level : list.level === 1 ? 12 : list.level * 8 : 0;
+  return { runs: runs, list: list, indent: indent, width: indent + runs.reduce(function (sum, r) { return sum + r.width; }, 0),
+    height: Math.max(0, runs.reduce(function (h, r) { return Math.max(h, r.height); }, 0)) };
+}
+module.exports = { color: color, icons: icons, parseLabel: parseLabel, measureLabel: measureLabel };

package/lib/salt-tree.js

@@ -0,0 +1,45 @@
+// Adapted from PlantUML Salt ElementTree, GPL-3.0-or-later; see LICENSES/plantuml-salt.txt.
+function measure(node) {
+  node.columns = [];
+  node.heights = [];
+  node.rows.forEach(function (row) {
+    row.forEach(function (item, c) { node.columns[c] = Math.max(node.columns[c] || 0, item.width + (c ? 0 : (item.level || 0) * 10)); });
+    node.heights.push(Math.max(0, ...row.map(function (item) { return item.height; })));
+  });
+  node.width = node.columns.reduce(function (a, b) { return a + b; }, 0) + Math.max(0, node.columns.length - 1) * 10 + 2;
+  node.height = node.heights.reduce(function (a, b) { return a + b; }, 0);
+}
+function draw(node, x, y, s, drawChild) {
+  var cy = y;
+  var skeleton = [];
+  var rows = [y];
+  var cols = [x, x + (node.columns[0] || 0) + 5];
+  node.columns.slice(1).forEach(function (width) { cols.push(cols[cols.length - 1] + width + 10); });
+  node.rows.forEach(function (row, r) {
+    var cx = x;
+    row.forEach(function (item, c) {
+      drawChild(item, c ? cx : x + (item.level || 0) * 10, cy, item.width, item.height);
+      cx += node.columns[c] + 10;
+    });
+    skeleton.push({ x: x + (row[0].level || 0) * 10 - 7, y: cy + node.heights[r] / 2 - 1 });
+    cy += node.heights[r]; rows.push(cy);
+  });
+  skeleton.forEach(function (item, i) {
+    if (skeleton[i + 1] && skeleton[i + 1].x > item.x) s.rect(item.x, item.y, 2, 2, 'none', '#888');
+    var parent;
+    for (var j = 0; j < i; j++) if (skeleton[j].x < item.x) parent = skeleton[j];
+    if (parent) {
+      s.line(parent.x + 1, parent.y + 3, parent.x + 1, item.y + 1, '#888');
+      s.line(parent.x + 1, item.y + 1, item.x - 1, item.y + 1, '#888');
+    }
+  });
+  var mode = node.style.slice(1);
+  var right = cols[cols.length - 1];
+  if (mode === '+') {
+    s.line(x, y, right, y, '#888'); s.line(x, cy, right, cy, '#888');
+    s.line(x, y, x, cy, '#888'); s.line(right, y, right, cy, '#888');
+  }
+  if (/[#-]/.test(mode)) rows.forEach(function (yy) { s.line(x, yy, right, yy, '#888'); });
+  if (/[#!]/.test(mode)) cols.forEach(function (xx) { s.line(xx, y, xx, cy, '#888'); });
+}
+module.exports = { measure: measure, draw: draw };

package/lib/sdk-bridge.js

@@ -713,7 +713,8 @@ function createSDKBridge(opts) {
     // This tool only prepares a read-only UI projection for the document the
     // agent is about to edit. The subsequent Edit/Write keeps its own normal
     // permission behavior.
-    if (toolName.indexOf("mcp__clay-documents__present_markdown_edit") === 0 ||
+    if (toolName === "mcp__clay-documents__present_wireframe" || toolName === "clay-documents__present_wireframe" ||
+        toolName.indexOf("mcp__clay-documents__present_markdown_edit") === 0 ||
         toolName.indexOf("clay-documents__present_markdown_edit") !== -1) {
       return { behavior: "allow", updatedInput: input };
     }

package/lib/session-document-mcp-server.js

@@ -10,6 +10,15 @@ function getToolDefs(handlers) {
       path: { type: "string", description: "Project-relative or absolute path to the Markdown document that will be edited." },
     }, ["path"]),
     handler: function (args) { return handlers.present(args || {}); },
+  }, {
+    name: "present_wireframe",
+    description: "Open or update the temporary clay-sketch viewer in the right panel when the user wants to revise or discuss a wireframe. Supports nested layouts and common UI controls, not general UML or preprocessor directives. Supply complete Salt diagram source, a stable id reused across revisions, and a short title. This displays only; it never saves or edits files. Include the same source in a fenced clay-sketch response so the diagram remains in chat history.",
+    inputSchema: buildShape({
+      source: { type: "string", description: "Complete @startsalt/@endsalt source, or @startuml with a salt body (100 KB maximum)." },
+      id: { type: "string", description: "Stable design id, using letters, digits, hyphens or underscores (80 characters maximum)." },
+      title: { type: "string", description: "Short title for the viewer." },
+    }, ["source", "id"]),
+    handler: function (args) { return handlers.presentWireframe(args || {}); },
   }];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.8.2-beta.1",
+  "version": "4.9.0-beta.1",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js"