@infinitedusky/indusk-mcp 0.8.5 → 0.9.0

package/dist/bin/cli.js

@@ -33,6 +33,13 @@ program
     const { update } = await import("./commands/update.js");
     await update(process.cwd());
 });
+program
+    .command("init-docs")
+    .description("Scaffold a VitePress documentation site with Mermaid, llms.txt, and FullscreenDiagram")
+    .action(async () => {
+    const { initDocs } = await import("./commands/init-docs.js");
+    await initDocs(process.cwd());
+});
 program
     .command("check-gates")
     .description("Validate plan execution gates — reports incomplete verification, context, and document items")

package/dist/bin/commands/init-docs.d.ts

@@ -0,0 +1 @@
+export declare function initDocs(projectRoot: string): Promise<void>;

package/dist/bin/commands/init-docs.js

@@ -0,0 +1,266 @@
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { basename, join } from "node:path";
+export async function initDocs(projectRoot) {
+    const projectName = basename(projectRoot);
+    const docsDir = join(projectRoot, `apps/${projectName}-docs`);
+    if (existsSync(docsDir)) {
+        console.info(`Docs app already exists at apps/${projectName}-docs/`);
+        console.info("Run 'update' to sync templates.");
+        return;
+    }
+    console.info(`Scaffolding docs site at apps/${projectName}-docs/\n`);
+    // Create directory structure
+    const dirs = [
+        "src/.vitepress/components",
+        "src/.vitepress/theme",
+        "src/guide",
+        "src/reference/skills",
+        "src/reference/tools",
+        "src/decisions",
+        "src/lessons",
+    ];
+    for (const dir of dirs) {
+        mkdirSync(join(docsDir, dir), { recursive: true });
+    }
+    // package.json
+    writeFileSync(join(docsDir, "package.json"), JSON.stringify({
+        name: `${projectName}-docs`,
+        version: "0.1.0",
+        private: true,
+        type: "module",
+        scripts: {
+            dev: "vitepress dev src --port 4173",
+            build: "vitepress build src",
+            preview: "vitepress preview src",
+        },
+        devDependencies: {
+            mermaid: "^10.2.2",
+            panzoom: "^9.4.3",
+            vitepress: "^1.6.3",
+            "vitepress-plugin-llms": "^1.12.0",
+            "vitepress-plugin-mermaid": "^2.0.10",
+            vue: "^3.4.15",
+        },
+    }, null, "\t") + "\n");
+    // .vitepress/config.ts
+    writeFileSync(join(docsDir, "src/.vitepress/config.ts"), `import { defineConfig } from "vitepress";
+import llmstxt from "vitepress-plugin-llms";
+import { withMermaid } from "vitepress-plugin-mermaid";
+
+const config = defineConfig({
+	title: "${projectName}",
+	description: "Documentation for ${projectName}",
+	base: "/",
+	lastUpdated: true,
+	cleanUrls: true,
+	ignoreDeadLinks: true,
+
+	markdown: {
+		lineNumbers: true,
+	},
+
+	mermaid: {
+		theme: "default",
+		securityLevel: "strict",
+		maxTextSize: 50000,
+		flowchart: {
+			useMaxWidth: true,
+			htmlLabels: true,
+		},
+		sequence: {
+			actorFontWeight: "bold",
+			messageFontSize: 14,
+			actorFontSize: 14,
+		},
+	},
+
+	themeConfig: {
+		search: {
+			provider: "local",
+		},
+
+		nav: [
+			{ text: "Guide", link: "/guide/" },
+			{ text: "Reference", link: "/reference/" },
+			{ text: "Decisions", link: "/decisions/" },
+			{ text: "Lessons", link: "/lessons/" },
+		],
+
+		sidebar: {
+			"/guide/": [
+				{
+					text: "Guide",
+					items: [
+						{ text: "Overview", link: "/guide/" },
+						{ text: "Getting Started", link: "/guide/getting-started" },
+					],
+				},
+			],
+			"/reference/": [
+				{
+					text: "Reference",
+					items: [
+						{ text: "Overview", link: "/reference/" },
+					],
+				},
+			],
+			"/decisions/": [
+				{
+					text: "Architecture Decisions",
+					items: [{ text: "Overview", link: "/decisions/" }],
+				},
+			],
+			"/lessons/": [
+				{
+					text: "Lessons Learned",
+					items: [{ text: "Overview", link: "/lessons/" }],
+				},
+			],
+		},
+	},
+
+	vite: {
+		plugins: [llmstxt()],
+		server: {
+			allowedHosts: [".orb.local"],
+		},
+		optimizeDeps: {
+			include: ["mermaid"],
+		},
+		ssr: {
+			noExternal: ["mermaid"],
+		},
+	},
+});
+
+export default withMermaid(config);
+`);
+    // .vitepress/theme/index.ts
+    writeFileSync(join(docsDir, "src/.vitepress/theme/index.ts"), `import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import FullscreenDiagram from "../components/FullscreenDiagram.vue";
+
+export default {
+	extends: DefaultTheme,
+	enhanceApp({ app }) {
+		app.component("FullscreenDiagram", FullscreenDiagram);
+	},
+} satisfies Theme;
+`);
+    // FullscreenDiagram.vue — copy from templates
+    const fullscreenDiagramPath = join(docsDir, "src/.vitepress/components/FullscreenDiagram.vue");
+    const templateComponent = join(projectRoot, "apps/indusk-mcp/templates/FullscreenDiagram.vue");
+    // If we have the template in the package, use it; otherwise inline a minimal version
+    if (existsSync(templateComponent)) {
+        const content = readFileSync(templateComponent, "utf-8");
+        writeFileSync(fullscreenDiagramPath, content);
+    }
+    else {
+        // Use the bundled template from the package
+        const { dirname } = await import("node:path");
+        const { fileURLToPath } = await import("node:url");
+        const __dirname = dirname(fileURLToPath(import.meta.url));
+        const packageRoot = join(__dirname, "../../..");
+        const bundledTemplate = join(packageRoot, "templates/FullscreenDiagram.vue");
+        if (existsSync(bundledTemplate)) {
+            const content = readFileSync(bundledTemplate, "utf-8");
+            writeFileSync(fullscreenDiagramPath, content);
+        }
+        else {
+            writeFileSync(fullscreenDiagramPath, `<template>
+  <div class="diagram-container">
+    <div class="diagram"><slot></slot></div>
+  </div>
+</template>
+
+<style scoped>
+.diagram-container { position: relative; width: 100%; }
+.diagram { width: 100%; padding: 1rem; border-radius: 8px; border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft); }
+</style>
+`);
+            console.info("  warn: FullscreenDiagram created with minimal template (panzoom not included)");
+        }
+    }
+    // Starter pages
+    writeFileSync(join(docsDir, "src/index.md"), `---
+layout: home
+hero:
+  name: ${projectName}
+  tagline: Project documentation
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: Reference
+      link: /reference/
+---
+`);
+    writeFileSync(join(docsDir, "src/guide/index.md"), `# Guide
+
+How-to guides for working with ${projectName}.
+
+- [Getting Started](/guide/getting-started) — set up the project and start developing
+`);
+    writeFileSync(join(docsDir, "src/guide/getting-started.md"), `# Getting Started
+
+## Prerequisites
+
+- Node.js 22+
+- pnpm
+
+## Setup
+
+\`\`\`bash
+pnpm install
+\`\`\`
+
+## Next Steps
+
+Start building!
+`);
+    writeFileSync(join(docsDir, "src/reference/index.md"), `# Reference
+
+Reference documentation for ${projectName}.
+`);
+    writeFileSync(join(docsDir, "src/decisions/index.md"), `# Architecture Decisions
+
+Architecture decision records for ${projectName}. Each decision documents what was chosen, what was rejected, and why.
+`);
+    writeFileSync(join(docsDir, "src/lessons/index.md"), `# Lessons Learned
+
+Insights from building ${projectName}. Each lesson captures what we learned, what surprised us, and what we'd do differently.
+`);
+    console.info("  created: package.json");
+    console.info("  created: .vitepress/config.ts (mermaid + llms plugin)");
+    console.info("  created: .vitepress/theme/index.ts");
+    console.info("  created: .vitepress/components/FullscreenDiagram.vue");
+    console.info("  created: starter pages (index, guide, reference, decisions, lessons)");
+    // Check if pnpm-workspace.yaml includes this app
+    const workspacePath = join(projectRoot, "pnpm-workspace.yaml");
+    if (existsSync(workspacePath)) {
+        const workspace = readFileSync(workspacePath, "utf-8");
+        if (!workspace.includes("apps/*") && !workspace.includes(`apps/${projectName}-docs`)) {
+            console.info(`\n  note: add 'apps/${projectName}-docs' to pnpm-workspace.yaml if not covered by a glob`);
+        }
+    }
+    // Install dependencies
+    console.info("\n[Installing dependencies]");
+    try {
+        execSync("pnpm install", {
+            cwd: projectRoot,
+            stdio: "inherit",
+            timeout: 120000,
+        });
+        console.info("  done: dependencies installed");
+    }
+    catch {
+        console.info("  warn: pnpm install failed — run manually");
+    }
+    console.info(`\nDocs site ready at apps/${projectName}-docs/`);
+    console.info("\nNext steps:");
+    console.info(`  1. pnpm turbo dev --filter=${projectName}-docs`);
+    console.info("  2. Edit src/guide/getting-started.md with your setup instructions");
+    console.info("  3. Add reference pages as you build features");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinitedusky/indusk-mcp",
-	"version": "0.8.5",
+	"version": "0.9.0",
 	"description": "InDusk development system — skills, MCP tools, and CLI for structured AI-assisted development",
 	"type": "module",
 	"files": [

package/templates/FullscreenDiagram.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="diagram-container">
+    <div class="diagram" ref="diagramRef">
+      <slot></slot>
+    </div>
+    <button class="expand-btn" @click="toggleExpand" :title="isExpanded ? 'Close' : 'Expand'">
+      <svg v-if="!isExpanded" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+      </svg>
+    </button>
+
+    <Teleport to="body">
+      <div v-if="isExpanded" class="modal-overlay" @click.self="toggleExpand">
+        <div class="modal-content">
+          <div class="expanded-diagram">
+            <div ref="expandedDiagramRef" v-html="diagramHTML"></div>
+          </div>
+          <div class="zoom-controls">
+            <button @click="zoomOut" :disabled="zoom <= 0.05" title="Zoom Out">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M19 13H5v-2h14v2z"/>
+              </svg>
+            </button>
+            <span class="zoom-level">{{ Math.round(zoom * 100) }}%</span>
+            <button @click="zoomIn" :disabled="zoom >= 3" title="Zoom In">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+              </svg>
+            </button>
+            <button @click="resetZoom" title="Reset Zoom">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+              </svg>
+            </button>
+          </div>
+          <button class="close-btn" @click="toggleExpand">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import panzoom from "panzoom";
+import { nextTick, ref, watch } from "vue";
+
+const isExpanded = ref(false);
+const diagramRef = ref(null);
+const expandedDiagramRef = ref(null);
+const zoom = ref(1);
+const panzoomInstance = ref(null);
+const diagramHTML = ref("");
+
+const cloneDiagram = () => {
+	if (!diagramRef.value) return;
+	diagramHTML.value = diagramRef.value.innerHTML;
+};
+
+const toggleExpand = () => {
+	if (!isExpanded.value) {
+		cloneDiagram();
+	}
+	isExpanded.value = !isExpanded.value;
+	if (isExpanded.value) {
+		document.body.style.overflow = "hidden";
+		nextTick(() => {
+			if (expandedDiagramRef.value) {
+				const svgElement =
+					expandedDiagramRef.value.querySelector("svg") || expandedDiagramRef.value.firstChild;
+				if (svgElement) {
+					panzoomInstance.value = panzoom(svgElement, {
+						bounds: true,
+						boundsPadding: 0.1,
+						minZoom: 0.05,
+						maxZoom: 10,
+					});
+					panzoomInstance.value.on("zoom", () => {
+						zoom.value = panzoomInstance.value.getTransform().scale;
+					});
+				}
+			}
+		});
+	} else {
+		document.body.style.overflow = "";
+		if (panzoomInstance.value) {
+			panzoomInstance.value.dispose();
+			panzoomInstance.value = null;
+		}
+		resetZoom();
+	}
+};
+
+const zoomIn = () => {
+	if (panzoomInstance.value) {
+		const currentZoom = panzoomInstance.value.getTransform().scale;
+		if (currentZoom < 10) {
+			panzoomInstance.value.smoothZoom(0, 0, 1.1);
+		}
+	}
+};
+
+const zoomOut = () => {
+	if (panzoomInstance.value) {
+		const currentZoom = panzoomInstance.value.getTransform().scale;
+		if (currentZoom > 0.05) {
+			panzoomInstance.value.smoothZoom(0, 0, 0.9);
+		}
+	}
+};
+
+const resetZoom = () => {
+	if (panzoomInstance.value) {
+		panzoomInstance.value.zoomAbs(0, 0, 1);
+		panzoomInstance.value.moveTo(0, 0);
+	}
+};
+
+watch(isExpanded, (newValue) => {
+	if (!newValue) {
+		resetZoom();
+	}
+});
+</script>
+
+<style scoped>
+.diagram-container {
+  position: relative;
+  width: 100%;
+}
+
+.diagram {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.expand-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 8px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  z-index: 10;
+  color: var(--vp-c-text-1);
+}
+
+.expand-btn:hover {
+  opacity: 1;
+  background: var(--vp-c-bg-soft);
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  position: relative;
+  background: var(--vp-c-bg);
+  padding: 2rem;
+  border-radius: 8px;
+  width: 95vw;
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.expanded-diagram {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.expanded-diagram > div {
+  cursor: move;
+}
+
+.expanded-diagram :deep(svg) {
+  display: block;
+  width: auto;
+  height: auto;
+  min-width: 1000px;
+  max-width: 90%;
+  max-height: 90%;
+  margin: auto;
+}
+
+.expanded-diagram :deep(.mermaid) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.zoom-controls {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--vp-c-bg);
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.zoom-controls button {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  color: var(--vp-c-text-1);
+}
+
+.zoom-controls button:hover {
+  opacity: 1;
+}
+
+.zoom-controls button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.zoom-level {
+  min-width: 4rem;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.close-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 8px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  z-index: 10;
+  color: var(--vp-c-text-1);
+}
+
+.close-btn:hover {
+  opacity: 1;
+}
+</style>