@bpmnkit/cli 0.0.27 → 0.0.29

package/dist/commands/index.js

@@ -4,6 +4,7 @@ import { askGroup } from "./ask.js";
 import { getDmnReqsXmlCmd, getDmnXmlCmd, getStartFormCmd, getUserTaskFormCmd, getXmlCmd, renderBpmnCmd, } from "./bpmn.js";
 import { completionGroup } from "./completion.js";
 import { connectorGroup } from "./connector.js";
+import { generateGroup } from "./generate.js";
 import { lintGroup } from "./lint.js";
 import { pluginGroup } from "./plugin.js";
 import { profileGroup } from "./profile.js";
@@ -14,6 +15,7 @@ import { settingsGroup } from "./settings.js";
 import { skillsGroup } from "./skills.js";
 import { storyGroup } from "./story.js";
 import { testGroup } from "./test.js";
+import { viewGroup } from "./view.js";
 import { workerStartCmd } from "./worker-start.js";
 import { workerCmd } from "./worker.js";
 // Inject custom commands into generated groups without modifying generated files.
@@ -55,6 +57,7 @@ const workerGroup = {
 /** Pinned groups shown above the separator in the main TUI menu. */
 export const pinnedGroups = [
     askGroup,
+    generateGroup,
     lintGroup,
     proxyGroup,
     reebeGroup,
@@ -62,6 +65,7 @@ export const pinnedGroups = [
     storyGroup,
     settingsGroup,
     testGroup,
+    viewGroup,
     workerGroup,
 ];
 /** API command groups — shown below the plugin section in the main TUI menu. */

package/dist/commands/skills.js

@@ -4,7 +4,9 @@ import { fileURLToPath } from "node:url";
 /**
  * Install BPMNKit AIKit skills into `.claude/commands/` in the current project.
  * Skills are markdown prompt files that Claude Code executes as slash commands:
- *   /implement, /review, /test, /deploy
+ *   /design, /implement, /review, /test, /deploy
+ *
+ * Also installs aikit.md into .claude/ as a shared tool reference.
  */
 const skillsInstallCmd = {
     name: "install",
@@ -27,23 +29,42 @@ const skillsInstallCmd = {
     ],
     async run(ctx) {
         const force = ctx.flags.force === true;
-        // Locate the bundled skills directory relative to this binary
-        // Installed layout: dist/index.js → ../skills/<name>.md
+        // Locate the bundled skills directory relative to this file.
+        // Installed layout: dist/commands/skills.js → ../../skills/<name>.md
         const binDir = fileURLToPath(new URL(".", import.meta.url));
-        const skillsSrc = join(binDir, "..", "skills");
+        const skillsSrc = join(binDir, "..", "..", "skills");
         if (!existsSync(skillsSrc)) {
             throw new Error(`Bundled skills directory not found at: ${skillsSrc}`);
         }
-        const skillFiles = readdirSync(skillsSrc).filter((f) => f.endsWith(".md"));
-        if (skillFiles.length === 0) {
+        const allFiles = readdirSync(skillsSrc).filter((f) => f.endsWith(".md"));
+        if (allFiles.length === 0) {
             throw new Error("No skill files found in bundled skills directory");
         }
-        const destDir = join(process.cwd(), ".claude", "commands");
-        mkdirSync(destDir, { recursive: true });
+        // aikit.md goes to .claude/ as a shared reference; everything else is a slash command
+        const REFERENCE_FILE = "aikit.md";
+        const skillFiles = allFiles.filter((f) => f !== REFERENCE_FILE);
+        const claudeDir = join(process.cwd(), ".claude");
+        const commandsDir = join(claudeDir, "commands");
+        mkdirSync(commandsDir, { recursive: true });
         let installed = 0;
         let skipped = 0;
+        // Install the tool reference to .claude/aikit.md
+        const refSrc = join(skillsSrc, REFERENCE_FILE);
+        const refDest = join(claudeDir, REFERENCE_FILE);
+        if (existsSync(refSrc)) {
+            if (existsSync(refDest) && !force) {
+                ctx.output.info(`  skip  ${REFERENCE_FILE} (already exists — use --force to overwrite)`);
+                skipped++;
+            }
+            else {
+                writeFileSync(refDest, readFileSync(refSrc, "utf8"), "utf8");
+                ctx.output.ok(`  wrote .claude/${REFERENCE_FILE}`);
+                installed++;
+            }
+        }
+        // Install slash command skills to .claude/commands/
         for (const file of skillFiles) {
-            const dest = join(destDir, file);
+            const dest = join(commandsDir, file);
             if (existsSync(dest) && !force) {
                 ctx.output.info(`  skip  ${file} (already exists — use --force to overwrite)`);
                 skipped++;
@@ -51,11 +72,11 @@ const skillsInstallCmd = {
             }
             const content = readFileSync(join(skillsSrc, file), "utf8");
             writeFileSync(dest, content, "utf8");
-            ctx.output.ok(`  wrote ${file}`);
+            ctx.output.ok(`  wrote .claude/commands/${file}`);
             installed++;
         }
         ctx.output.info("");
-        ctx.output.ok(`Installed ${installed} skill(s)${skipped > 0 ? `, skipped ${skipped}` : ""} → .claude/commands/`);
+        ctx.output.ok(`Installed ${installed} file(s)${skipped > 0 ? `, skipped ${skipped}` : ""} → .claude/`);
         ctx.output.info("");
         ctx.output.info("Available slash commands in Claude Code:");
         for (const file of skillFiles) {

package/dist/commands/view.js

@@ -0,0 +1,373 @@
+import { spawn } from "node:child_process";
+import { readFile, readdir, stat } from "node:fs/promises";
+import { createServer } from "node:http";
+import { basename, extname, join } from "node:path";
+import { renderDmnAscii, renderFormAscii } from "@bpmnkit/ascii";
+import { Bpmn, exportSvg } from "@bpmnkit/core";
+// ── Utilities ─────────────────────────────────────────────────────────────────
+function openBrowser(url) {
+    const [cmd, args] = process.platform === "darwin"
+        ? ["open", [url]]
+        : process.platform === "win32"
+            ? ["cmd", ["/c", "start", "", url]]
+            : ["xdg-open", [url]];
+    spawn(cmd, args, { detached: true, stdio: "ignore" }).unref();
+}
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+/** Expand paths: directories are scanned (top-level) for matching extensions. */
+async function resolvePaths(paths, extensions) {
+    const result = [];
+    for (const p of paths) {
+        const s = await stat(p).catch(() => null);
+        if (!s)
+            throw new Error(`Path not found: ${p}`);
+        if (s.isDirectory()) {
+            const entries = await readdir(p, { withFileTypes: true });
+            const matched = entries
+                .filter((e) => e.isFile() && extensions.includes(extname(e.name).toLowerCase()))
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((e) => join(p, e.name));
+            if (matched.length === 0) {
+                throw new Error(`No ${extensions.join("/")} files found in directory: ${p}`);
+            }
+            result.push(...matched);
+        }
+        else {
+            result.push(p);
+        }
+    }
+    return result;
+}
+// ── Panel builders ────────────────────────────────────────────────────────────
+async function buildBpmnPanel(file, theme) {
+    const xml = await readFile(file, "utf-8");
+    const defs = Bpmn.parse(xml);
+    return { label: basename(file), type: "bpmn", content: exportSvg(defs, { theme }) };
+}
+async function buildDmnPanel(file) {
+    const xml = await readFile(file, "utf-8");
+    return { label: basename(file), type: "dmn", content: renderDmnAscii(xml) };
+}
+async function buildFormPanel(file) {
+    const json = await readFile(file, "utf-8");
+    return { label: basename(file), type: "form", content: renderFormAscii(json) };
+}
+async function panelFromFile(file, theme) {
+    const ext = extname(file).toLowerCase();
+    if (ext === ".bpmn")
+        return buildBpmnPanel(file, theme);
+    if (ext === ".dmn")
+        return buildDmnPanel(file);
+    if (ext === ".form")
+        return buildFormPanel(file);
+    throw new Error(`Unsupported file extension: ${file}. Use .bpmn, .dmn, or .form`);
+}
+// ── HTML builder ──────────────────────────────────────────────────────────────
+function buildHtml(panels, theme) {
+    const tabs = panels
+        .map((p, i) => `<button class="tab${i === 0 ? " active" : ""}" data-idx="${i}" data-type="${p.type}">${escapeHtml(p.label)}</button>`)
+        .join("\n    ");
+    const panelHtml = panels
+        .map((p, i) => {
+        const cls = `panel${i === 0 ? " active" : ""}`;
+        if (p.type === "bpmn") {
+            return `<div class="${cls}" data-idx="${i}" data-type="bpmn">${p.content}</div>`;
+        }
+        return `<div class="${cls}" data-idx="${i}" data-type="${p.type}"><pre>${escapeHtml(p.content)}</pre></div>`;
+    })
+        .join("\n  ");
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BPMN Kit Viewer</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
+    :root {
+      --bg: #f4f4f8; --surface: #ffffff; --border: #d0d0e8;
+      --fg: #1a1a2e; --fg-muted: #6666a0; --accent: #1a56db;
+      --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
+    }
+    [data-theme="dark"] {
+      --bg: #0d0d16; --surface: #161626; --border: #2a2a42;
+      --fg: #cdd6f4; --fg-muted: #8888a8; --accent: #6b9df7;
+    }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--fg);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    header {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      overflow-x: auto;
+      flex-shrink: 0;
+      height: 44px;
+    }
+    .brand {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--fg-muted);
+      margin-right: 12px;
+      white-space: nowrap;
+    }
+    .tab {
+      padding: 6px 14px;
+      border: none;
+      border-bottom: 2px solid transparent;
+      background: none;
+      color: var(--fg-muted);
+      font: inherit;
+      font-size: 13px;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      white-space: nowrap;
+      transition: color 0.1s;
+    }
+    .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
+    .tab:hover:not(.active) { color: var(--fg); }
+    .tab-type {
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      opacity: 0.6;
+      margin-left: 5px;
+      vertical-align: middle;
+    }
+    main {
+      flex: 1;
+      overflow: auto;
+      padding: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    .panel { display: none; width: 100%; }
+    .panel.active { display: block; }
+    .panel[data-type="bpmn"] svg {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      box-shadow: 0 2px 16px rgba(0,0,0,0.1);
+    }
+    .panel[data-type="dmn"] pre,
+    .panel[data-type="form"] pre {
+      font-family: var(--mono);
+      font-size: 13px;
+      line-height: 1.5;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 20px 24px;
+      overflow-x: auto;
+      white-space: pre;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+    footer {
+      background: var(--surface);
+      border-top: 1px solid var(--border);
+      padding: 6px 16px;
+      font-size: 11px;
+      color: var(--fg-muted);
+      flex-shrink: 0;
+    }
+    kbd {
+      background: var(--border);
+      border-radius: 3px;
+      padding: 1px 4px;
+      font-family: inherit;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <span class="brand">BPMN Kit</span>
+    ${tabs}
+  </header>
+  <main>
+  ${panelHtml}
+  </main>
+  <footer>
+    Use <kbd>Ctrl+Scroll</kbd> or browser zoom to zoom &mdash;
+    Press <kbd>Ctrl+C</kbd> in terminal to stop the server
+  </footer>
+  <script>
+    const tabs = document.querySelectorAll('.tab')
+    const panels = document.querySelectorAll('.panel')
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const idx = tab.dataset.idx
+        tabs.forEach(t => t.classList.toggle('active', t.dataset.idx === idx))
+        panels.forEach(p => p.classList.toggle('active', p.dataset.idx === idx))
+      })
+    })
+  </script>
+</body>
+</html>`;
+}
+// ── Server ────────────────────────────────────────────────────────────────────
+async function serve(panels, port, theme, noOpen, ctx) {
+    const html = buildHtml(panels, theme);
+    const server = createServer((_req, res) => {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(html);
+    });
+    await new Promise((resolve, reject) => {
+        server.listen(port, "127.0.0.1", () => resolve());
+        server.on("error", reject);
+    });
+    const url = `http://localhost:${port}`;
+    ctx.output.info(`Serving ${panels.length} file${panels.length === 1 ? "" : "s"} at ${url}`);
+    if (!noOpen)
+        openBrowser(url);
+    ctx.output.info("Press Ctrl+C to stop");
+    await new Promise((resolve) => {
+        process.once("SIGINT", resolve);
+        process.once("SIGTERM", resolve);
+    });
+    server.close();
+}
+// ── Shared flags ──────────────────────────────────────────────────────────────
+const PORT_FLAG = {
+    name: "port",
+    description: "Port for the local server (default: 3044)",
+    type: "number",
+    default: 3044,
+};
+const THEME_FLAG = {
+    name: "theme",
+    description: "Color theme: light (default) or dark",
+    type: "string",
+    default: "light",
+    enum: ["light", "dark"],
+};
+const NO_OPEN_FLAG = {
+    name: "no-open",
+    description: "Do not open the browser automatically",
+    type: "boolean",
+};
+// ── Commands ──────────────────────────────────────────────────────────────────
+const viewBpmnCmd = {
+    name: "bpmn",
+    description: "View BPMN files or a folder of .bpmn files in the browser",
+    args: [
+        { name: "path", description: "File(s) or folder(s) containing .bpmn files", required: true },
+    ],
+    flags: [PORT_FLAG, THEME_FLAG, NO_OPEN_FLAG],
+    examples: [
+        { description: "View a single file", command: "casen view bpmn process.bpmn" },
+        { description: "View all files in a folder", command: "casen view bpmn ./processes/" },
+        { description: "View multiple files", command: "casen view bpmn order.bpmn payment.bpmn" },
+        {
+            description: "Dark theme on custom port",
+            command: "casen view bpmn process.bpmn --theme dark --port 8080",
+        },
+    ],
+    async run(ctx) {
+        if (ctx.positional.length === 0)
+            throw new Error("Provide at least one file or folder path");
+        const port = ctx.flags.port ?? 3044;
+        const theme = ctx.flags.theme === "dark" ? "dark" : "light";
+        const files = await resolvePaths(ctx.positional, [".bpmn"]);
+        const panels = await Promise.all(files.map((f) => buildBpmnPanel(f, theme)));
+        await serve(panels, port, theme, ctx.flags["no-open"] === true, ctx);
+    },
+};
+const viewDmnCmd = {
+    name: "dmn",
+    description: "View DMN files or a folder of .dmn files in the browser",
+    args: [
+        { name: "path", description: "File(s) or folder(s) containing .dmn files", required: true },
+    ],
+    flags: [PORT_FLAG, THEME_FLAG, NO_OPEN_FLAG],
+    examples: [
+        { description: "View a single DMN file", command: "casen view dmn decision.dmn" },
+        { description: "View all DMN files in a folder", command: "casen view dmn ./decisions/" },
+    ],
+    async run(ctx) {
+        if (ctx.positional.length === 0)
+            throw new Error("Provide at least one file or folder path");
+        const port = ctx.flags.port ?? 3044;
+        const theme = ctx.flags.theme === "dark" ? "dark" : "light";
+        const files = await resolvePaths(ctx.positional, [".dmn"]);
+        const panels = await Promise.all(files.map((f) => buildDmnPanel(f)));
+        await serve(panels, port, theme, ctx.flags["no-open"] === true, ctx);
+    },
+};
+const viewFormCmd = {
+    name: "form",
+    description: "View Camunda form files or a folder of .form files in the browser",
+    args: [
+        { name: "path", description: "File(s) or folder(s) containing .form files", required: true },
+    ],
+    flags: [PORT_FLAG, THEME_FLAG, NO_OPEN_FLAG],
+    examples: [
+        { description: "View a single form file", command: "casen view form my-form.form" },
+        { description: "View all forms in a folder", command: "casen view form ./forms/" },
+    ],
+    async run(ctx) {
+        if (ctx.positional.length === 0)
+            throw new Error("Provide at least one file or folder path");
+        const port = ctx.flags.port ?? 3044;
+        const theme = ctx.flags.theme === "dark" ? "dark" : "light";
+        const files = await resolvePaths(ctx.positional, [".form"]);
+        const panels = await Promise.all(files.map((f) => buildFormPanel(f)));
+        await serve(panels, port, theme, ctx.flags["no-open"] === true, ctx);
+    },
+};
+const viewOpenCmd = {
+    name: "open",
+    description: "View any mix of .bpmn, .dmn, and .form files or folders in the browser",
+    args: [
+        {
+            name: "path",
+            description: "File(s) or folder(s) — .bpmn, .dmn, and .form auto-detected",
+            required: true,
+        },
+    ],
+    flags: [PORT_FLAG, THEME_FLAG, NO_OPEN_FLAG],
+    examples: [
+        {
+            description: "Open any supported file",
+            command: "casen view open process.bpmn decision.dmn",
+        },
+        { description: "Open a folder (all supported types)", command: "casen view open ./project/" },
+        {
+            description: "Mix files and folders",
+            command: "casen view open ./processes/ extra.dmn review.form",
+        },
+    ],
+    async run(ctx) {
+        if (ctx.positional.length === 0)
+            throw new Error("Provide at least one file or folder path");
+        const port = ctx.flags.port ?? 3044;
+        const theme = ctx.flags.theme === "dark" ? "dark" : "light";
+        const files = await resolvePaths(ctx.positional, [".bpmn", ".dmn", ".form"]);
+        const panels = await Promise.all(files.map((f) => panelFromFile(f, theme)));
+        await serve(panels, port, theme, ctx.flags["no-open"] === true, ctx);
+    },
+};
+// ── Group ─────────────────────────────────────────────────────────────────────
+export const viewGroup = {
+    name: "view",
+    description: "View BPMN, DMN, and form files in the browser via a local server",
+    commands: [viewOpenCmd, viewBpmnCmd, viewDmnCmd, viewFormCmd],
+};
+//# sourceMappingURL=view.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/cli",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "Command-line interface for Camunda 8 — deploy, manage, and monitor processes from the terminal",
   "type": "module",
   "bin": {
@@ -16,13 +16,13 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@bpmnkit/api": "0.0.18",
     "@bpmnkit/ascii": "0.0.22",
     "@bpmnkit/connector-gen": "0.0.13",
     "@bpmnkit/core": "0.0.22",
+    "@bpmnkit/api": "0.0.18",
     "@bpmnkit/engine": "0.1.22",
-    "@bpmnkit/profiles": "0.0.16",
-    "@bpmnkit/proxy": "0.0.25"
+    "@bpmnkit/proxy": "0.0.25",
+    "@bpmnkit/profiles": "0.0.16"
   },
   "publishConfig": {
     "access": "public"