@hachej/boring-diagram 0.1.67

package/dist/server/index.d.ts

@@ -0,0 +1,10 @@
+import { WorkspaceServerPlugin } from '@hachej/boring-workspace/server';
+
+declare function defaultDiagramServerPlugin(_options: unknown, ctx: {
+    workspaceRoot: string;
+}): WorkspaceServerPlugin;
+declare function createDiagramServerPlugin(options: {
+    workspaceRoot: string;
+}): WorkspaceServerPlugin;
+
+export { createDiagramServerPlugin, defaultDiagramServerPlugin as default };

package/dist/server/index.js

@@ -0,0 +1,255 @@
+// src/server/index.ts
+import { constants } from "fs";
+import { lstat, open } from "fs/promises";
+import { dirname, isAbsolute, relative, resolve, sep } from "path";
+import { defineServerPlugin } from "@hachej/boring-workspace/server";
+import { AuthStorage } from "@mariozechner/pi-coding-agent";
+import { generateImages, getImageModels, getImageProviders, getEnvApiKey } from "@earendil-works/pi-ai";
+
+// src/shared/index.ts
+var DIAGRAM_PLUGIN_ID = "diagram";
+function saveTargetFor(path) {
+  if (path.toLowerCase().endsWith(".excalidraw.png")) return path.replace(/\.png$/i, "");
+  return path || "untitled.excalidraw";
+}
+function renderTargetFor(path) {
+  const source = saveTargetFor(path);
+  if (source.toLowerCase().endsWith(".excalidraw")) return source.replace(/\.excalidraw$/i, ".render.png");
+  return `${source}.render.png`;
+}
+
+// src/server/index.ts
+var DEFAULT_IMAGE_MODEL_KEY = "openrouter:openrouter/auto";
+var MAX_PROMPT_LENGTH = 4e3;
+var MAX_IMAGE_BASE64_LENGTH = 20 * 1024 * 1024;
+function defaultDiagramServerPlugin(_options, ctx) {
+  return createDiagramServerPlugin({ workspaceRoot: ctx.workspaceRoot });
+}
+function createDiagramServerPlugin(options) {
+  const authStorage = AuthStorage.create();
+  const routes = async (app) => {
+    app.get("/api/v1/plugins/diagram/render/models", async () => {
+      const models = listRenderableImageModels();
+      const defaultModel = resolveDefaultModel(models);
+      const responseModels = await Promise.all(models.map(async (model) => {
+        const configured = Boolean(await resolveImageApiKey(authStorage, model.provider));
+        return {
+          provider: model.provider,
+          id: model.id,
+          label: model.name || model.id,
+          available: configured,
+          configured
+        };
+      }));
+      const authConfigured = responseModels.some((model) => model.available);
+      return {
+        models: responseModels,
+        defaultModel,
+        authConfigured,
+        ...authConfigured ? {} : { authHint: "Configure an API key for a Pi image provider, for example OPENROUTER_API_KEY, to enable Diagram image rendering." }
+      };
+    });
+    app.post("/api/v1/plugins/diagram/render", async (request, reply) => {
+      const body = request.body ?? {};
+      const prompt = typeof body.prompt === "string" ? body.prompt.trim() : "";
+      if (!prompt) return sendRenderError(reply, 400, "validation_error", "prompt is required");
+      if (prompt.length > MAX_PROMPT_LENGTH) return sendRenderError(reply, 400, "validation_error", "prompt is too long");
+      const sketchPngBase64 = typeof body.sketchPngBase64 === "string" ? body.sketchPngBase64 : "";
+      if (!sketchPngBase64) return sendRenderError(reply, 400, "validation_error", "sketchPngBase64 is required");
+      if (sketchPngBase64.length > MAX_IMAGE_BASE64_LENGTH) return sendRenderError(reply, 413, "validation_error", "sketch image is too large");
+      const models = listRenderableImageModels();
+      const model = resolveRequestedModel(models, body.model);
+      if (!model) return sendRenderError(reply, 500, "render_model_unavailable", "no image models are available");
+      const apiKey = await resolveImageApiKey(authStorage, model.provider);
+      if (!apiKey) return sendRenderError(reply, 400, "render_auth_unconfigured", `${model.provider} image rendering is not configured`);
+      try {
+        const mimeType = body.mimeType === "image/jpeg" ? "image/jpeg" : "image/png";
+        const generated = await generateImages(model, {
+          input: [
+            { type: "text", text: renderPrompt(prompt) },
+            { type: "image", mimeType, data: sketchPngBase64 }
+          ]
+        }, {
+          apiKey,
+          timeoutMs: 12e4,
+          maxRetries: 1
+        });
+        if (generated.stopReason === "error") {
+          return sendRenderError(reply, 502, "render_generation_failed", generated.errorMessage || "image generation failed");
+        }
+        const image = generated.output.find((item) => item.type === "image");
+        if (!image || image.type !== "image") return sendRenderError(reply, 502, "render_output_missing", "image model returned no image");
+        const outputPath = renderTargetFor(typeof body.path === "string" ? body.path : "");
+        const metadata = {
+          schemaVersion: 1,
+          kind: "diagram.render",
+          sourcePath: typeof body.path === "string" ? body.path : "",
+          outputPath,
+          prompt: { text: prompt },
+          model: { provider: model.provider, id: model.id },
+          generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          response: {
+            id: generated.responseId,
+            usage: generated.usage,
+            mimeType: image.mimeType
+          }
+        };
+        const absoluteOutputPath = resolveWorkspaceFile(options.workspaceRoot, outputPath);
+        const imageBytes = Buffer.from(image.data, "base64");
+        await writeWorkspaceFileNoSymlink(options.workspaceRoot, absoluteOutputPath, withPngTextMetadata(imageBytes, {
+          "boring.diagram.schema": JSON.stringify({ schemaVersion: metadata.schemaVersion, kind: metadata.kind }),
+          "boring.diagram.prompt": prompt,
+          "boring.diagram.metadata": JSON.stringify(metadata)
+        }));
+        const metadataPath = absoluteOutputPath.replace(/\.png$/i, ".json");
+        await writeWorkspaceFileNoSymlink(options.workspaceRoot, metadataPath, JSON.stringify(metadata, null, 2));
+        return {
+          ok: true,
+          path: outputPath,
+          model: model.id,
+          prompt,
+          mimeType: image.mimeType
+        };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "image rendering failed";
+        const lower = message.toLowerCase();
+        if (lower.includes("path") || lower.includes("symlink")) {
+          return sendRenderError(reply, 400, "render_output_rejected", message);
+        }
+        if (lower.includes("image") || lower.includes("generation") || lower.includes("timeout")) {
+          return sendRenderError(reply, 502, "render_generation_failed", message);
+        }
+        return sendRenderError(reply, 500, "render_internal_error", message);
+      }
+    });
+  };
+  return defineServerPlugin({
+    id: DIAGRAM_PLUGIN_ID,
+    label: "Diagram",
+    systemPrompt: "Diagram files can be opened in the workspace UI. Use the Render control in the Diagram pane to turn diagrams into generated images when requested.",
+    routes
+  });
+}
+function sendRenderError(reply, statusCode, code, message) {
+  return reply.code(statusCode).send({ error: { code, message } });
+}
+function listRenderableImageModels() {
+  return getImageProviders().flatMap((provider) => getImageModels(provider).filter((model) => model.input.includes("image") && model.output.includes("image")));
+}
+function encodeModelKey(model) {
+  return `${model.provider}:${model.id}`;
+}
+function resolveDefaultModel(models) {
+  const configured = process.env.BORING_DIAGRAM_RENDER_MODEL ?? process.env.BORING_EXCALIDRAW_RENDER_MODEL;
+  if (configured) {
+    const match = models.find((model2) => encodeModelKey(model2) === configured || model2.id === configured);
+    if (match) return { provider: match.provider, id: match.id };
+  }
+  const preferred = models.find((model2) => encodeModelKey(model2) === DEFAULT_IMAGE_MODEL_KEY || model2.id === "openrouter/auto");
+  const model = preferred ?? models[0];
+  return model ? { provider: model.provider, id: model.id } : void 0;
+}
+function resolveRequestedModel(models, requested) {
+  const defaultModel = resolveDefaultModel(models);
+  const requestedKey = requested || (defaultModel ? `${defaultModel.provider}:${defaultModel.id}` : void 0);
+  return models.find((model) => requestedKey && (encodeModelKey(model) === requestedKey || model.id === requestedKey)) ?? models.find((model) => encodeModelKey(model) === DEFAULT_IMAGE_MODEL_KEY) ?? models[0];
+}
+async function resolveImageApiKey(authStorage, provider) {
+  const suffix = String(provider).toUpperCase().replace(/[^A-Z0-9]+/g, "_");
+  const envName = `BORING_DIAGRAM_${suffix}_API_KEY`;
+  const legacyEnvName = `BORING_EXCALIDRAW_${suffix}_API_KEY`;
+  return process.env[envName] || process.env[legacyEnvName] || await authStorage.getApiKey(provider) || getEnvApiKey(provider) || (provider === "openrouter" ? process.env.OPENROUTER_API_KEY : void 0);
+}
+function renderPrompt(prompt) {
+  return [
+    "Use the attached diagram sketch as the source composition.",
+    "Preserve the important spatial layout, labels, arrows, and relationships unless the prompt says otherwise.",
+    "Create a polished image from it.",
+    "",
+    `User prompt: ${prompt}`
+  ].join("\n");
+}
+function withPngTextMetadata(bytes, entries) {
+  const signature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+  if (bytes.length < signature.length + 12 || !bytes.subarray(0, signature.length).equals(signature)) return bytes;
+  let offset = signature.length;
+  while (offset + 12 <= bytes.length) {
+    const length = bytes.readUInt32BE(offset);
+    const type = bytes.subarray(offset + 4, offset + 8).toString("ascii");
+    const next = offset + 12 + length;
+    if (next > bytes.length) return bytes;
+    if (type === "IEND") {
+      const chunks = Object.entries(entries).filter(([key, value]) => /^[\x20-\x7e]{1,79}$/.test(key) && !key.includes("\0") && value.length > 0).map(([key, value]) => pngChunk("iTXt", Buffer.concat([
+        Buffer.from(key, "ascii"),
+        Buffer.from([0, 0, 0, 0, 0]),
+        Buffer.from(value, "utf8")
+      ])));
+      return Buffer.concat([bytes.subarray(0, offset), ...chunks, bytes.subarray(offset)]);
+    }
+    offset = next;
+  }
+  return bytes;
+}
+function pngChunk(type, data) {
+  const typeBytes = Buffer.from(type, "ascii");
+  const out = Buffer.allocUnsafe(12 + data.length);
+  out.writeUInt32BE(data.length, 0);
+  typeBytes.copy(out, 4);
+  data.copy(out, 8);
+  out.writeUInt32BE(crc32(Buffer.concat([typeBytes, data])), 8 + data.length);
+  return out;
+}
+function crc32(bytes) {
+  let crc = 4294967295;
+  for (const byte of bytes) {
+    crc ^= byte;
+    for (let i = 0; i < 8; i += 1) crc = crc >>> 1 ^ 3988292384 & -(crc & 1);
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function resolveWorkspaceFile(workspaceRoot, relativePath) {
+  const normalized = relativePath.replace(/^\.\//, "").replace(/^\/+/, "");
+  if (!normalized || normalized.includes("\0") || isAbsolute(normalized)) throw new Error("invalid output path");
+  const root = resolve(workspaceRoot);
+  const candidate = resolve(root, normalized);
+  if (candidate !== root && !candidate.startsWith(root.endsWith(sep) ? root : `${root}${sep}`)) {
+    throw new Error("output path escapes workspace");
+  }
+  return candidate;
+}
+async function writeWorkspaceFileNoSymlink(workspaceRoot, absolutePath, data) {
+  const root = resolve(workspaceRoot);
+  const relativePath = relative(root, absolutePath);
+  if (!relativePath || relativePath.startsWith("..") || isAbsolute(relativePath)) throw new Error("output path escapes workspace");
+  const parent = dirname(absolutePath);
+  await assertNoSymlinkAncestors(root, parent);
+  await assertTargetIsNotSymlink(absolutePath);
+  const handle = await open(absolutePath, constants.O_WRONLY | constants.O_CREAT | constants.O_TRUNC | constants.O_NOFOLLOW, 438);
+  try {
+    await handle.writeFile(data);
+  } finally {
+    await handle.close();
+  }
+}
+async function assertNoSymlinkAncestors(root, targetDir) {
+  const relativeDir = relative(root, targetDir);
+  if (relativeDir.startsWith("..") || isAbsolute(relativeDir)) throw new Error("output path escapes workspace");
+  let current = root;
+  if ((await lstat(current)).isSymbolicLink()) throw new Error("workspace root symlink rejected for render output");
+  for (const part of relativeDir.split(/[\\/]+/).filter(Boolean)) {
+    current = resolve(current, part);
+    if ((await lstat(current)).isSymbolicLink()) throw new Error("render output parent symlink rejected");
+  }
+}
+async function assertTargetIsNotSymlink(target) {
+  try {
+    if ((await lstat(target)).isSymbolicLink()) throw new Error("render output target symlink rejected");
+  } catch (err) {
+    if (err?.code === "ENOENT") return;
+    throw err;
+  }
+}
+export {
+  createDiagramServerPlugin,
+  defaultDiagramServerPlugin as default
+};

package/dist/shared/index.d.ts

@@ -0,0 +1,8 @@
+declare const DIAGRAM_PLUGIN_ID = "diagram";
+declare const DIAGRAM_PANEL_ID = "diagram.panel";
+declare function isDiagramPath(path: string): boolean;
+declare function titleForPath(path?: string): string;
+declare function saveTargetFor(path: string): string;
+declare function renderTargetFor(path: string): string;
+
+export { DIAGRAM_PANEL_ID, DIAGRAM_PLUGIN_ID, isDiagramPath, renderTargetFor, saveTargetFor, titleForPath };

package/dist/shared/index.js

@@ -0,0 +1,28 @@
+// src/shared/index.ts
+var DIAGRAM_PLUGIN_ID = "diagram";
+var DIAGRAM_PANEL_ID = "diagram.panel";
+function isDiagramPath(path) {
+  const lower = path.toLowerCase();
+  return lower.endsWith(".excalidraw") || lower.endsWith(".excalidraw.png");
+}
+function titleForPath(path) {
+  if (!path) return "Diagram";
+  return path.split("/").pop() || path;
+}
+function saveTargetFor(path) {
+  if (path.toLowerCase().endsWith(".excalidraw.png")) return path.replace(/\.png$/i, "");
+  return path || "untitled.excalidraw";
+}
+function renderTargetFor(path) {
+  const source = saveTargetFor(path);
+  if (source.toLowerCase().endsWith(".excalidraw")) return source.replace(/\.excalidraw$/i, ".render.png");
+  return `${source}.render.png`;
+}
+export {
+  DIAGRAM_PANEL_ID,
+  DIAGRAM_PLUGIN_ID,
+  isDiagramPath,
+  renderTargetFor,
+  saveTargetFor,
+  titleForPath
+};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@hachej/boring-diagram",
+  "version": "0.1.67",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "description": "Diagram workspace plugin for viewing and editing .excalidraw files.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hachej/boring-ui"
+  },
+  "homepage": "https://github.com/hachej/boring-ui",
+  "boring": {
+    "id": "diagram",
+    "label": "Diagram",
+    "front": "dist/front/index.js",
+    "server": "dist/server/index.js"
+  },
+  "pi": {
+    "systemPrompt": "Diagram plugin: open .excalidraw and .excalidraw.png workspace files through workspace.open.path. The editor autosaves .excalidraw JSON with optimistic conflict detection."
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/front/index.d.ts",
+      "import": "./dist/front/index.js"
+    },
+    "./front": {
+      "types": "./dist/front/index.d.ts",
+      "import": "./dist/front/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./shared": {
+      "types": "./dist/shared/index.d.ts",
+      "import": "./dist/shared/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint": "pnpm run typecheck",
+    "clean": "rm -rf dist .tsbuildinfo"
+  },
+  "peerDependencies": {
+    "@hachej/boring-workspace": "workspace:*",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@earendil-works/pi-ai": "^0.79.1",
+    "@excalidraw/excalidraw": "^0.18.1",
+    "@hachej/boring-agent": "workspace:*",
+    "@hachej/boring-ui-kit": "workspace:*",
+    "@mariozechner/pi-coding-agent": "npm:@earendil-works/pi-coding-agent@0.75.5"
+  },
+  "devDependencies": {
+    "@hachej/boring-workspace": "workspace:*",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^22.20.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.4.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.9"
+  }
+}