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

package/lib/bundled-skills/clay-sketch/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: clay-sketch
+description: Draw and revise UI wireframes directly in Clay chat with the built-in clay-sketch renderer. Automatically use for requests to see a wireframe, sketch a screen, visualize a page layout or UI plan, or revise an existing sketch, including entire webpages and the current project. The user does not need to name clay-sketch. Also use for /clay-sketch or $clay-sketch. Do not substitute this for implementing a working website, generating artwork, or drawing architecture and sequence diagrams.
+---
+
+# clay-sketch
+
+Use clay-sketch to make UI ideas visible while keeping design changes in the
+conversation. It ships with Clay: no installation, browser automation, external
+renderer, or generated image is needed. Its markup is a supported subset of
+PlantUML Salt with optional Clay screen-layout extensions, not the full PlantUML language.
+
+Treat ordinary requests such as "show me a wireframe of our work", "sketch this
+screen", or "what would this page look like?" in a UI planning conversation as
+requests for clay-sketch. Do not require the feature name or ask the user to
+choose a rendering format. Use the current project and conversation as context.
+Default to a rendered sketch; use ASCII wireframes only when explicitly requested.
+
+## Draw in chat
+
+1. Use the user's requirements and existing conversation to choose a sensible
+   first layout. Ask a structured question only when a missing decision would
+   materially change the design. Avoid setup questions or requiring a file.
+2. Show a complete sketch in a fenced `clay-sketch` block. Include `@startsalt`
+   and `@endsalt`. Clay renders the block inline and retains its source.
+3. For a whole page, use the screen-layout mode below with an explicit canvas
+   and region tracks. Default to 1440 × 900 for desktop unless context suggests
+   another size. Do not simulate a screen by increasing scale, font sizes or
+   padding labels with spaces. Use realistic labels and a clear primary action.
+4. Briefly explain the important layout decisions. The controls are drawings,
+   not interactive application controls. Keep the sketch focused on structure.
+
+Use one sketch per block. Existing `plantuml`, `puml`, and `salt` fences also
+work. Prefer `clay-sketch` for new responses. Don't replace a rendered sketch
+with a screenshot or unsolicited ASCII art.
+
+## Revise together
+
+When the user requests changes or wants to work together on a sketch, call
+`present_wireframe` (or its available `clay-documents` qualified equivalent)
+with the complete revised Salt source, a short title, and a stable design id
+such as `account-settings`. Reuse that id for revisions of the same design.
+This opens or updates clay-sketch in Sketch viewer, the right-side viewer. It only presents the
+sketch; it does not save a file.
+
+Include the same complete revised source in a `clay-sketch` response block so
+the revision remains in chat history. Preserve requirements from earlier turns.
+Do not send a patch or a fragment as the diagram source.
+
+All editing happens through conversation. The user
+can choose **Save to project** to create a `.puml` file, or **Download** to save
+the source to their device. Do not create files automatically. If explicitly
+asked to save through your file tools, use the requested path and normal file
+permissions. Do not silently overwrite existing work.
+
+If the presentation tool is unavailable, provide the inline sketch and explain
+that **Open sketch** opens the viewer. Do not claim you opened it.
+
+Use clean lines for new sketches. Do not add handwritten directives or suggest
+a handwritten mode. The viewer credits PlantUML Salt and links to its documentation.
+
+## Supported notation
+
+- `{ ... }`: layout container; newlines separate rows and `|` separates columns.
+  Nest containers to build a whole page. Put a space or newline after `{`.
+- `{+ ... }`: outer border; `{# ... }`: grid; `{! ... }`: column lines;
+  `{- ... }`: row lines.
+- `{^"Account" ... }`: titled group. Put its rows on following lines.
+- `{/ <b>Overview | Settings }`: tabs. Newline-separated tabs form a vertical list.
+- `{* File | Edit | Help }`: a menu bar; following rows such as `File | Open | - | Exit` show an open menu.
+- `Plain label`, `**Bold label**`, `<b>Bold label`, `<i>Italic label`.
+- `[Continue]`: button; `"Email address       "`: text field. Spaces inside
+  quotes reserve width; keep labels short enough to remain readable.
+- `[] Remember me`, `[X] Enabled`: checkboxes.
+- `() Option`, `(X) Selected`: radio controls.
+- `^Choose a team^`: closed dropdown; `^Choose^^One^^Two^`: open dropdown.
+- `.`: empty cell or vertical spacer; `..`, `--`, `==`, `~~`: separators.
+- `*` following a cell spans the preceding cell across that column.
+- `{T` with `+ Root`, `++ Child` rows: tree; `T!`, `T#`, `T+`, `T-` add grid lines.
+- `{S`, `{SI`, `{S-`: both, vertical-only, horizontal-only scrollbars.
+- `//italic//`, `""monospace""`, `--strike--`, `__underline__`, `~~wave~~`;
+  `<color:blue>`, `<back:orange>`, `<size:20>` and `<&folder>` icons.
+- `* Bullet` and `# Numbered item`: list labels; repeat the marker for nesting.
+- `title`, `header`, `footer`, `caption` before the layout; multiline
+  `legend` / `end legend`; `scale 2`, `skinparam dpi 200`, background colors.
+- Lines beginning with an apostrophe are comments.
+
+Use `.` explicitly for empty cells. Avoid gratuitous spacers or very long fields;
+wide diagrams shrink in chat, though the viewer offers Fit, 100% reset and zoom up to 400%.
+The renderer limits source to 100 KB, nesting to 24 levels, cells to 2000,
+columns to 64, and layout dimensions to 8192 pixels.
+
+Use bundled icons for ordinary wireframes. When an image is needed and its URL
+is supplied or authorized for the design, `<img:https://…>` embeds a public PNG.
+This requires network access, allows no redirects or private addresses, and is
+limited to four images of 1 MiB and 2048 × 2048 pixels each. Do not invent image
+URLs. Local files and SVG images are not supported. Salt's inline `.`/`X`
+pseudo-sprites also work without networking.
+
+Supported font sizes are 10, 12, 13, 14, 16, 18 and 20, with sans-serif or
+monospace text. Avoid arbitrary fonts, includes, macros, external themes,
+general PlantUML sprites, links and other UML types.
+On a syntax error, simplify the sketch using the notation above; never suggest
+installing Java or sending source to a hosted renderer. For architecture,
+flowcharts, or sequence diagrams, use the existing Mermaid support instead.
+
+## Compact layout example
+
+```clay-sketch
+@startsalt
+{+
+  { **Workspace** | Project: Website | [Settings] }
+  {
+    {^"Navigation"
+      **Overview**
+      Projects
+      Team
+      [New project]
+    } |
+    {^"Projects"
+      {/ <b>Active | Archived }
+      { "Search projects...          " | [Create project] }
+      ..
+      {# **Project** | **Status** | **Owner**
+        Website | In progress | Alex
+        Mobile app | Planning | Sam
+      }
+      ..
+      [View all projects]
+    }
+  }
+}
+@endsalt
+```
+
+## Whole-screen layout (Clay extension)
+
+For full-page UI plans, start with the example below. The apostrophe directives
+are Clay extensions: standard PlantUML treats them as comments and renders its
+usual compact layout. Plain Salt without these directives retains reference
+behavior. Do not claim the extended layout is standard PlantUML Salt.
+
+- `' @clay-canvas 1440 900` sets logical screen dimensions (240–4096 per axis).
+- `' @clay-layout root ...` configures the outer container. A path such as
+  `root.1.0` selects row 1, column 0, zero-based. Append row/column pairs for
+  nested containers. Update paths when moving content.
+- `columns=240,*` fixes the sidebar width and gives remaining width to content.
+  `rows=64,*` fixes the header and lets the body fill the remaining height.
+  Tracks accept pixel integers, `auto` (content size), and `*` (share free space).
+  Supply exactly one track per row/column. Without tracks, rows/columns use auto.
+- `padding=24 gap=16` sets container insets and spacing, without scaling text.
+  Defaults are 16 and 12. Set padding/gap to 0 for the outer screen shell.
+- Containers fill allocated regions. Text/buttons retain their natural dimensions;
+  inputs expand to their column width. Use a `.` in a flexible row to reserve
+  deliberate empty space or push a footer down, not repeated blank rows.
+- Rules target regular containers, not trees, tabs, menus or scrollbar containers.
+  Those widgets can still appear inside a screen using their natural dimensions.
+- Overflow is reported, not silently shrunk. Increase the relevant track/canvas
+  or simplify the content. Keep titles inside the layout; do not combine screen
+  mode with scale/DPI changes or outside title/header/footer/legend directives.
+
+```clay-sketch
+@startsalt
+' @clay-canvas 1440 900
+' @clay-layout root padding=0 gap=0 columns=240,* rows=64,*
+' @clay-layout root.0.0 padding=20 gap=24 columns=*,auto
+' @clay-layout root.1.0 padding=24 gap=20 columns=* rows=auto,auto,auto,auto,auto,auto,*
+' @clay-layout root.1.1 padding=32 gap=24 columns=* rows=auto,auto,auto,auto,*,auto
+' @clay-layout root.1.1.0.0 padding=0 gap=24 columns=*,auto
+' @clay-layout root.1.1.2.0 padding=0 gap=16 columns=*,auto
+' @clay-layout root.1.1.3.0 padding=16 gap=16 columns=*,140,180,140 rows=40,48,48,48
+{+
+  { **Clay Settings** | [My account] } | *
+  {
+    [Back to project]
+    Profile
+    Appearance
+    Models
+    **MCP connections**
+    Notifications
+    .
+  } |
+  {
+    { <size:20>**MCP connections** | [Add connection] }
+    Connect tools and services for your conversations.
+    { "Search connections..." | ^All statuses^ }
+    {-
+      **Connection** | **Type** | **Status** | **Action**
+      Team knowledge | Remote URL | Connected | [Manage]
+      Support tools | Remote URL | Sign-in required | [Sign in]
+      My computer | Extension | Offline | [Manage]
+    }
+    .
+    Connections are personal to your account.
+  }
+}
+@endsalt
+```

package/lib/plantuml-renderer.js

@@ -0,0 +1,43 @@
+var MAX_SOURCE_BYTES = 100000;
+var MAX_SVG_BYTES = 8 * 1024 * 1024;
+
+function failure(message, status) {
+  var error = new Error(message);
+  error.status = status || 422;
+  return error;
+}
+
+function isPlantUmlFile(file) {
+  return /\.(puml|plantuml|pu|uml|salt)$/i.test(String(file || ""));
+}
+
+function prepareSource(source, file) {
+  source = String(source || "").replace(/^\uFEFF/, "");
+  if (Buffer.byteLength(source) > MAX_SOURCE_BYTES) throw failure("Diagram is too large to preview (100 KB maximum).", 413);
+  if (!source.trim()) throw failure("This diagram is empty.");
+  if (/\.salt$/i.test(file) && !/@start\w+/i.test(source)) source = "@startsalt\n" + source + "\n@endsalt";
+  if (!/^\s*@start\w+\b/im.test(source)) throw failure("Add @startsalt / @endsalt or @startuml / @enduml around the diagram.");
+  if ((source.match(/^\s*@start\w+\b/gim) || []).length > 1) throw failure("Preview supports one diagram per file. Split these diagrams into separate files.");
+  return source;
+}
+
+function renderPlantUml(source, options) {
+  options = options || {};
+  return new Promise(function (resolve, reject) {
+    setImmediate(async function () {
+      try {
+        if (options.signal && options.signal.aborted) throw failure("Diagram rendering cancelled.", 499);
+        source = prepareSource(source, "diagram.puml");
+        var tree = require("./salt-parser").parseSalt(source);
+        await require('./salt-images').resolveImages(tree, options);
+        if (options.signal && options.signal.aborted) throw failure("Diagram rendering cancelled.", 499);
+        var svg = require("./salt-svg").renderSaltSvg(tree);
+        if (Buffer.byteLength(svg) > MAX_SVG_BYTES) throw failure("Rendered wireframe is too large.", 413);
+        resolve(svg);
+      } catch (error) { reject(error); }
+    });
+  });
+}
+
+module.exports = { renderPlantUml: renderPlantUml, prepareSource: prepareSource,
+  isPlantUmlFile: isPlantUmlFile, MAX_SOURCE_BYTES: MAX_SOURCE_BYTES };

package/lib/project-file-http.js

@@ -14,8 +14,10 @@ function attachFileHTTP(ctx) {
   var access = ctx.requestAccess || attachRequestAccess(Object.assign({}, ctx, {
     getOsUserInfoForWs: ctx.getOsUserInfoForReq,
   }));
+  var plantUml = require("./project-plantuml").attachPlantUmlHTTP(Object.assign({}, ctx, { requestAccess: access }));
 
   function handleHTTP(req, res, urlPath) {
+    if (plantUml.handleHTTP(req, res, urlPath)) return true;
     var download = urlPath.startsWith("/api/file/download?");
     if (req.method !== "GET" || (!download && !urlPath.startsWith("/api/file?"))) return false;
     try {

package/lib/project-plantuml.js

@@ -0,0 +1,48 @@
+var fs = require("fs");
+var filePaths = require("./project-file-path");
+var renderer = require("./plantuml-renderer");
+
+function attachPlantUmlHTTP(ctx) {
+  var wireframes = require("./project-wireframe-http").attachWireframeHTTP(ctx);
+  function handleHTTP(req, res, urlPath) {
+    if (wireframes.handleHTTP(req, res, urlPath)) return true;
+    if (!urlPath.startsWith("/api/file/plantuml?")) return false;
+    function fail(error) {
+      if (res.destroyed) return;
+      var mapped = filePaths.fileError(error);
+      res.writeHead(error.status || mapped.status, { "Content-Type": "text/plain; charset=utf-8", "Cache-Control": "no-store" });
+      res.end(error.status ? error.message : mapped.message);
+    }
+    if (req.method !== "GET") { fail({ status: 405, message: "Use GET to preview a diagram." }); return true; }
+    var scope;
+    var requested;
+    var source;
+    try {
+      scope = ctx.requestAccess.fileScope(req);
+      requested = new URLSearchParams(urlPath.substring(urlPath.indexOf("?"))).get("path");
+      var file = filePaths.resolveFilePath(ctx.cwd, requested, scope);
+      if (!renderer.isPlantUmlFile(file)) throw { status: 415, message: "Select a PlantUML or Salt file to preview." };
+      var stat = scope.identity ? ctx.fsAsUser("stat", { file: file }, scope.identity) : fs.statSync(file);
+      if (stat.size > renderer.MAX_SOURCE_BYTES) throw { status: 413, message: "Diagram is too large to preview (100 KB maximum)." };
+      source = scope.identity ? ctx.fsAsUser("read", { file: file, readContent: true }, scope.identity).content : fs.readFileSync(file, "utf8");
+      source = renderer.prepareSource(source, requested);
+    } catch (error) { fail(error); return true; }
+    var controller = new AbortController();
+    function cancel() { controller.abort(); }
+    if (res.once) res.once("close", cancel);
+    (ctx.renderPlantUml || renderer.renderPlantUml)(source, { signal: controller.signal }).then(function (svg) {
+      if (res.destroyed || controller.signal.aborted) return;
+      try { ctx.requestAccess.fileScope(req); }
+      catch (error) { fail(error); return; }
+      res.writeHead(200, {
+        "Content-Type": "image/svg+xml; charset=utf-8", "Cache-Control": "no-store",
+        "X-Content-Type-Options": "nosniff", "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; sandbox",
+      });
+      res.end(svg);
+    }).catch(fail).finally(function () { if (res.removeListener) res.removeListener("close", cancel); });
+    return true;
+  }
+  return { handleHTTP: handleHTTP };
+}
+
+module.exports = { attachPlantUmlHTTP: attachPlantUmlHTTP };

package/lib/project-session-document.js

@@ -2,6 +2,9 @@ var fs = require("fs");
 var path = require("path");
 var sessionDocumentMcp = require("./session-document-mcp-server");
 
+var wireframeRenderer = require("./plantuml-renderer");
+var WIREFRAME_PROMPT = "When the user asks to see a wireframe, visualize a UI plan or sketch a page, automatically use the built-in clay-sketch skill even if they do not name it. Requests such as 'show me a wireframe of our work' use the current project and conversation as context. Do not ask them to invoke the skill or choose a format. Use ASCII wireframes only when explicitly requested. Read its SKILL.md from the shared skills catalog for the supported Salt syntax and whole-page examples. For an entire screen use its Clay canvas/region layout directives, not magnification of a compact diagram. Show complete @startsalt/@endsalt source in a fenced clay-sketch block; Clay renders it inline with no installation or external service. For requested revisions, call present_wireframe with complete source, a stable id and title to open/update the temporary Sketch viewer in the right panel, and include the same revised sketch in your response for history. The viewer has Save to project and Download; edits happen through conversation. Do not create a file unless requested. Other UML types and advanced Salt syntax are unsupported; use Mermaid for architecture or sequence diagrams.";
+
 var DOCUMENT_PROMPT = "When the user's primary request is to create or revise Markdown, call present_markdown_edit once per targeted document with its resolved .md/.mdx path, immediately before that document's first Edit or Write. Do not call it for incidental Markdown changes during coding, maintenance, tests, or refactoring.";
 
 function toolResult(value) {
@@ -78,9 +81,22 @@ function attachSessionDocument(ctx) {
     }
   }
 
+  function presentWireframe(args, caller) {
+    if (!caller) return toolError("present_wireframe requires a session-bound tool server");
+    if (typeof args.source !== "string" || !/^[a-zA-Z0-9_-]{1,80}$/.test(args.id || "")) return toolError("Provide source and a short stable id using letters, digits, hyphens or underscores.");
+    try {
+      var source = wireframeRenderer.prepareSource(args.source, "diagram.puml");
+      require("./salt-parser").parseSalt(source);
+      if (!/^\s*@end(?:salt|uml)\b/im.test(source)) return toolError("Provide a complete @startsalt/@endsalt or @startuml/@enduml diagram.");
+      sendToSession(caller.localId, { type: "wireframe_present", source: source, id: args.id, title: String(args.title || "clay-sketch").slice(0, 100), sessionId: caller.localId });
+      return toolResult({ ready: true, id: args.id, saved: false });
+    } catch (e) { return toolError(e.message); }
+  }
+
   function getToolDefs(boundSession) {
     if (isMate) return [];
     return sessionDocumentMcp.getToolDefs({
+      presentWireframe: function (args) { return presentWireframe(args, boundSession || null); },
       present: function (args) { return present(args, boundSession || null); },
     });
   }
@@ -96,7 +112,7 @@ function attachSessionDocument(ctx) {
 
   return {
     createMcpServer: createMcpServer,
-    getSystemPrompt: function () { return isMate ? "" : DOCUMENT_PROMPT; },
+    getSystemPrompt: function () { return isMate ? "" : DOCUMENT_PROMPT + "\n\n" + WIREFRAME_PROMPT; },
     getToolDefs: getToolDefs,
   };
 }

package/lib/project-wireframe-http.js

@@ -0,0 +1,88 @@
+var fs = require('fs');
+var path = require('path');
+var renderer = require('./plantuml-renderer');
+var filePaths = require('./project-file-path');
+
+function error(status, message) { return Object.assign(new Error(message), { status: status }); }
+function readBody(req) {
+  return new Promise(function (resolve, reject) {
+    var chunks = [];
+    var size = 0;
+    req.on('data', function (chunk) {
+      size += Buffer.byteLength(chunk);
+      if (size > 650000) { chunks = []; reject(error(413, 'Diagram request is too large.')); return; }
+      chunks.push(chunk);
+    });
+    req.on('aborted', function () { reject(error(400, 'Request cancelled.')); });
+    req.on('error', reject);
+    req.on('end', function () {
+      if (size > 650000) return;
+      try { resolve(JSON.parse(Buffer.concat(chunks).toString('utf8'))); }
+      catch (e) { reject(error(400, 'Invalid diagram request.')); }
+    });
+  });
+}
+
+function attachWireframeHTTP(ctx) {
+  function projectAccess(req) {
+    if (!ctx.requestAccess.canAccessProject(req, ctx.slug)) throw error(403, 'Project access is not permitted.');
+  }
+  function save(req, body, source) {
+    var scope = ctx.requestAccess.fileScope(req);
+    var requested = body.path;
+    if (typeof requested !== 'string' || !/\.puml$/i.test(requested) || requested.indexOf('\0') !== -1 || path.isAbsolute(requested)) {
+      throw error(400, 'Choose a project-relative .puml path.');
+    }
+    var root = fs.realpathSync(ctx.cwd);
+    var target = path.resolve(root, requested);
+    var parent = filePaths.resolveFilePath(root, path.dirname(target), { projectBound: true });
+    target = path.join(parent, path.basename(target));
+    try {
+      if (scope.identity) ctx.fsAsUser('write', { file: target, content: source, flag: 'wx' }, scope.identity);
+      else fs.writeFileSync(target, source, { encoding: 'utf8', flag: 'wx' });
+    } catch (e) {
+      if (e.code === 'EEXIST' || /EEXIST/.test(String(e.stderr || ''))) throw error(409, 'A file already exists at this path. Choose a new name.');
+      throw e;
+    }
+    return path.relative(root, target).split(path.sep).join('/');
+  }
+  function handleHTTP(req, res, urlPath) {
+    if (urlPath !== '/api/wireframe/render' && urlPath !== '/api/wireframe/save') return false;
+    function fail(e) {
+      if (res.destroyed || res.writableEnded) return;
+      var mapped = filePaths.fileError(e);
+      res.writeHead(e.status || mapped.status, { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' });
+      res.end(e.status ? e.message : mapped.message);
+    }
+    try {
+      projectAccess(req);
+      if (req.method !== 'POST') throw error(405, 'Use POST for wireframes.');
+      if (!/^application\/json\b/i.test(req.headers['content-type'] || '') || req.headers['sec-fetch-site'] === 'cross-site') throw error(415, 'Use a same-origin JSON request.');
+    } catch (e) { fail(e); return true; }
+    var controller = new AbortController();
+    function cancel() { controller.abort(); }
+    res.once('close', cancel);
+    readBody(req).then(function (body) {
+      if (controller.signal.aborted) return;
+      projectAccess(req);
+      if (!body || typeof body.source !== 'string') throw error(400, 'Diagram source is required.');
+      var source = renderer.prepareSource(body.source, body.language === 'salt' ? 'diagram.salt' : 'diagram.puml');
+      if (urlPath === '/api/wireframe/save') {
+        var saved = save(req, body, source);
+        res.writeHead(201, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+        res.end(JSON.stringify({ path: saved }));
+        return;
+      }
+      return (ctx.renderPlantUml || renderer.renderPlantUml)(source, { signal: controller.signal }).then(function (svg) {
+        if (controller.signal.aborted) return;
+        projectAccess(req);
+        res.writeHead(200, { 'Content-Type': 'image/svg+xml; charset=utf-8', 'Cache-Control': 'no-store',
+          'X-Content-Type-Options': 'nosniff', 'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; sandbox" });
+        res.end(svg);
+      });
+    }).catch(fail).finally(function () { res.removeListener('close', cancel); });
+    return true;
+  }
+  return { handleHTTP: handleHTTP };
+}
+module.exports = { attachWireframeHTTP: attachWireframeHTTP };

package/lib/public/app.js

@@ -360,6 +360,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     savedMainSlug: null,
     connected: false,
     fileReadRequest: null,
+    fileViewerIsPlantUml: false,
+    plantUmlPreviewJob: null,
+    wireframeDraft: null,
+    wireframeRenderQueue: [],
+    wireframeRenderActive: null,
+    wireframeRenderCache: [],
     pendingFileNavigation: null,
     rightWorkbenchOwner: null,
     rightWorkbenchRevision: 0,

package/lib/public/css/filebrowser.css

@@ -2629,3 +2629,8 @@
   animation: message-blink 0.5s ease 3;
   border-radius: 12px;
 }
+
+/* PlantUML is rendered locally and displayed as an inert, scalable image. */
+.file-viewer-plantuml-preview { padding: 20px; min-height: 100%; box-sizing: border-box; }
+.file-viewer-plantuml-preview img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; border-radius: 4px; }
+.file-viewer-plantuml-preview [role="status"]:empty { display: none; }

package/lib/public/css/wireframe.css

@@ -0,0 +1,95 @@
+.wireframe-card { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
+.wireframe-card header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-card header strong { flex: 1; font-size: 12px; color: var(--text-secondary); }
+.wireframe-card button, #wireframe-panel button { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; background: var(--bg-alt); color: var(--text); cursor: pointer; }
+.wireframe-card button:hover, #wireframe-panel button:hover { background: var(--bg-hover); }
+.wireframe-card :focus-visible, #wireframe-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.wireframe-canvas { padding: 16px; overflow: auto; }
+.wireframe-canvas img, .wireframe-workbench-canvas img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: white; border-radius: 4px; }
+.wireframe-card details { border-top: 1px solid var(--border-subtle); }
+.wireframe-card summary { padding: 8px 14px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
+.wireframe-card details pre { margin: 0; border-radius: 0; }
+#wireframe-panel { position: relative; width: 50%; max-width: 720px; min-width: 360px; height: calc(100% - 16px); min-height: 0; margin: 8px 8px 8px 10px; align-self: center; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
+.wireframe-topbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-topbar strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
+#wireframe-panel .lucide { width: 15px; height: 15px; flex-shrink: 0; }
+.wireframe-window-actions { display: flex; gap: 4px; margin-left: auto; }
+#wireframe-panel .wireframe-window-actions button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; }
+.wireframe-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-toolbar span { flex: 1; font-size: 11px; color: var(--text-muted); }
+.wireframe-workbench-canvas { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
+.wireframe-workbench-canvas p, .wireframe-canvas p { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
+.wireframe-save-form { padding: 12px; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; background: var(--bg-alt); }
+.wireframe-save-form[hidden] { display: none; }
+.wireframe-save-form label { flex: 1; min-width: 140px; font-size: 12px; }
+.wireframe-save-form input { display: block; width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 8px; margin-top: 5px; font: inherit; }
+.wireframe-save-status { margin: 0; padding: 8px 12px; font-size: 12px; overflow-wrap: anywhere; }
+.wireframe-save-status:empty { display: none; }
+#wireframe-panel button:disabled { opacity: .5; cursor: wait; }
+@media (min-width: 1024px) {
+  #wireframe-panel { box-shadow: 4px 8px 18px rgba(var(--shadow-rgb), .14), 2px 2px 4px rgba(var(--shadow-rgb), .08), inset 0 1px 0 rgba(255,255,255,.04); animation: workbench-panel-in .18s cubic-bezier(.2,.8,.2,1); }
+  #wireframe-panel.wireframe-wide { width: 70%; max-width: 1200px; }
+  #wireframe-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; animation: none; }
+}
+@media (max-width: 1023px) {
+  #wireframe-panel { position: fixed; inset: 0; width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; z-index: 210; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
+  #wireframe-panel .wireframe-window-actions [data-wide], #wireframe-panel .wireframe-window-actions [data-full] { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { #wireframe-panel { animation: none; } }
+
+
+
+.wireframe-toolbar { flex-wrap: wrap; }
+.wireframe-zoom { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.wireframe-zoom button { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; background: var(--bg-alt); color: var(--text); cursor: pointer; }
+.wireframe-zoom [data-zoom-value] { min-width: 55px; font-variant-numeric: tabular-nums; }
+.wireframe-zoom [aria-pressed="true"] { background: var(--bg-hover); }
+.wireframe-zoom button:disabled, #wireframe-panel .wireframe-zoom button:disabled { opacity: .4; cursor: default; }
+.wireframe-file-canvas { overflow: auto; min-width: 0; padding-top: 16px; }
+.file-viewer-plantuml-preview > .wireframe-zoom { position: sticky; top: 0; z-index: 1; width: fit-content; padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
+@media (max-width: 700px) { .wireframe-toolbar > span { flex-basis: 100%; } }
+
+/* Shared sketch identity stays inside the existing right-panel shell. */
+.wireframe-card, #wireframe-panel, .file-viewer-plantuml-preview { --sketch-accent: #c98b64; }
+.wireframe-card { border-radius: 14px; border-top: 2px solid var(--sketch-accent); }
+.sketch-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
+.wireframe-card header .sketch-brand { flex: 1; }
+.sketch-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--sketch-accent); border-radius: 8px 8px 8px 2px; color: var(--sketch-accent); font-size: 23px; line-height: 1; }
+.sketch-wordmark { font-size: 14px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }
+.sketch-wordmark > span { margin-left: 3px; font-weight: 400; color: var(--sketch-accent); }
+.sketch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
+.sketch-credit { font-size: 11px; color: var(--text-muted); text-decoration: none; }
+.sketch-credit:hover { color: var(--text); text-decoration: underline; }
+.sketch-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); }
+.sketch-footer > span { font-size: 11px; color: var(--text-muted); }
+.wireframe-topbar { height: 56px; gap: 14px; border-top: 2px solid var(--sketch-accent); }
+.wireframe-topbar .sketch-title { min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
+.wireframe-canvas, .wireframe-workbench-canvas, .wireframe-file-canvas { background-image: radial-gradient(circle, var(--border) .7px, transparent .8px); background-size: 16px 16px; }
+.wireframe-canvas img, .wireframe-workbench-canvas img, .wireframe-file-canvas img { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
+.sketch-tools :focus-visible, .sketch-footer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 480px) {
+  .wireframe-topbar { gap: 8px; }
+  .wireframe-topbar .sketch-title { display: none; }
+  .sketch-footer > span { flex-basis: 100%; }
+}
+
+/* Keep drawing controls together and give the canvas the available space. */
+.wireframe-card header { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
+.wireframe-card .sketch-mark { width: 22px; height: 22px; font-size: 19px; }
+.wireframe-card header button { padding: 5px 8px; }
+.wireframe-canvas { padding: 12px; }
+.sketch-source-footer { position: relative; border-top: 1px solid var(--border-subtle); }
+.sketch-source-footer details { border: 0; }
+.sketch-source-footer summary { padding: 8px 175px 8px 12px; }
+.sketch-source-footer > div { position: absolute; top: 7px; right: 12px; }
+.wireframe-card .sketch-credit { font-size: 10px; color: var(--text-muted); }
+.wireframe-topbar { height: 44px; }
+.wireframe-toolbar { padding: 6px 10px; gap: 6px; }
+.wireframe-workbench-canvas { padding: 12px; }
+.sketch-footer { padding: 6px 12px; }
+@media (max-width: 480px) {
+  .wireframe-card header { gap: 6px; }
+  .wireframe-card .sketch-brand { gap: 5px; }
+  .wireframe-card .sketch-wordmark { font-size: 12px; }
+  .wireframe-card header button { font-size: 11px; padding: 6px; }
+}

package/lib/public/modules/app-messages.js

@@ -1,5 +1,6 @@
 import { handleLinearResult } from './linear-panel.js';
 import { handleSharedBrowserMessage } from './shared-browser.js';
+import { openWireframe } from './wireframe-workbench.js';
 import { syncGithubSessions } from './session-github.js';
 import { handleIssuesMessageInContext as handleIssuesMessage } from './issues-context.js';
 // app-messages.js - WebSocket message router
@@ -1148,7 +1149,7 @@ export function processMessage(msg) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
         } else if (msg.name === "ask_user_questions") {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
-        } else if (msg.name === "present_markdown_edit" || (msg.name && msg.name.indexOf("present_markdown_edit") !== -1)) {
+        } else if (msg.name === "present_wireframe" || (msg.name && msg.name.endsWith("__present_wireframe")) || msg.name === "present_markdown_edit" || (msg.name && msg.name.indexOf("present_markdown_edit") !== -1)) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
         } else if (getTodoTools()[msg.name]) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
@@ -1584,6 +1585,12 @@ export function processMessage(msg) {
         handleFileChanged(msg);
         break;
 
+      case "wireframe_present":
+        if (!store.get('replayingHistory') && !store.get('dmMode') && (!msg.sessionId || msg.sessionId === store.get('activeSessionId'))) {
+          if (store.get('paneMode') || !store.get('splitPanes')) openWireframe(msg);
+        }
+        break;
+
       case "markdown_edit_present":
         if (!store.get('replayingHistory') && !store.get('dmMode')) {
           if (store.get('paneMode')) forwardPaneMarkdownPresentation(msg);