mulmoclaude 0.1.0

package/src/plugins/markdown/definition.ts

@@ -0,0 +1,50 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "presentDocument";
+
+export interface MarkdownToolData {
+  markdown: string;
+  pdfPath?: string;
+  filenamePrefix?: string;
+}
+
+/** True when the `markdown` field is a workspace-relative file path
+ *  rather than inline content. Covers both the post-#284 canonical
+ *  path (`artifacts/documents/*.md`) and the legacy `markdowns/*.md`
+ *  prefix for sessions whose jsonl hasn't been migrated yet. */
+export function isFilePath(value: string): boolean {
+  if (!value.endsWith(".md")) return false;
+  return value.startsWith("artifacts/documents/") || value.startsWith("markdowns/");
+}
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description: "Display a document in markdown format.",
+  prompt:
+    `Use the ${TOOL_NAME} tool when the user asks for a document that combines text with embedded images — guides, reports, tutorials, articles, or any structured content with visuals. ` +
+    `Prefer this over standalone image generation when the user wants informational content with supporting visuals.\n\n` +
+    "Format embedded images as: ![Detailed image prompt](__too_be_replaced_image_path__)",
+  parameters: {
+    type: "object",
+    properties: {
+      title: {
+        type: "string",
+        description: "Title for the document",
+      },
+      markdown: {
+        type: "string",
+        description:
+          "The markdown content to display. Describe embedded images in the following format: ![Detailed image prompt](__too_be_replaced_image_path__). IMPORTANT: For embedded images, you MUST use the EXACT placeholder path '__too_be_replaced_image_path__'.",
+      },
+      filenamePrefix: {
+        type: "string",
+        description:
+          "Short English filename prefix (without extension). Use lowercase with hyphens, e.g. 'project-summary'. The server sanitizes the value and appends a random id to prevent collisions.",
+      },
+    },
+    required: ["title", "markdown", "filenamePrefix"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/markdown/index.ts

@@ -0,0 +1,36 @@
+import type { ToolPlugin } from "../../tools/types";
+import type { ToolResult } from "gui-chat-protocol";
+import toolDefinition, { TOOL_NAME } from "./definition";
+import type { MarkdownToolData } from "./definition";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+import { apiPost } from "../../utils/api";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+const markdownPlugin: ToolPlugin<MarkdownToolData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<MarkdownToolData>>(API_ROUTES.plugins.presentDocument, args);
+    if (!result.ok) {
+      return {
+        toolName: TOOL_NAME,
+        uuid: crypto.randomUUID(),
+        message: result.error,
+      };
+    }
+    return {
+      ...result.data,
+      toolName: TOOL_NAME,
+      uuid: crypto.randomUUID(),
+    };
+  },
+
+  isEnabled: () => true,
+  generatingMessage: "Creating document...",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default markdownPlugin;
+export { TOOL_NAME };

package/src/plugins/presentHtml/Preview.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="text-sm">
+    <div class="font-medium text-gray-700 truncate mb-1">
+      {{ title }}
+    </div>
+    <div v-if="hint" class="text-xs text-gray-500 leading-relaxed truncate">
+      {{ hint }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { PresentHtmlData } from "./index";
+import { stripHtmlToPreview } from "./helpers";
+
+const HINT_MAX_LENGTH = 60;
+
+const props = defineProps<{ result: ToolResultComplete<PresentHtmlData> }>();
+
+const data = computed(() => props.result.data);
+const title = computed(() => data.value?.title ?? "HTML Page");
+const hint = computed(() => stripHtmlToPreview(data.value?.html ?? "", HINT_MAX_LENGTH));
+</script>

package/src/plugins/presentHtml/View.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="px-4 py-2 border-b border-gray-100 shrink-0 flex items-center justify-between">
+      <span class="text-sm font-medium text-gray-700 truncate">{{ title ?? "HTML Page" }}</span>
+      <div class="flex items-center gap-2">
+        <button
+          class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0"
+          title="Save as PDF (opens print dialog)"
+          @click="printToPdf"
+        >
+          <span class="material-icons text-sm align-middle">picture_as_pdf</span>
+          PDF
+        </button>
+        <button class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0" @click="sourceOpen = !sourceOpen">
+          {{ sourceOpen ? "Hide Source <>" : "Show Source <>" }}
+        </button>
+      </div>
+    </div>
+    <div v-if="sourceOpen" class="border-b border-gray-100 shrink-0">
+      <textarea :value="html" readonly class="w-full text-xs text-gray-600 bg-gray-50 p-3 font-mono resize-none outline-none" rows="16" />
+    </div>
+    <iframe ref="iframeRef" :srcdoc="html" sandbox="allow-scripts allow-same-origin allow-modals" class="flex-1 w-full border-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { PresentHtmlData } from "./index";
+
+const props = defineProps<{
+  selectedResult: ToolResultComplete<PresentHtmlData>;
+}>();
+
+const PRINT_STYLE = `<style>@media print {
+  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  body { width: 100% !important; margin: 0 !important; padding: 8px !important; }
+  @page { margin: 10mm; }
+}</style>`;
+
+const data = computed(() => props.selectedResult.data);
+const rawHtml = computed(() => data.value?.html ?? "");
+const html = computed(() => (rawHtml.value.includes("</head>") ? rawHtml.value.replace("</head>", `${PRINT_STYLE}</head>`) : `${PRINT_STYLE}${rawHtml.value}`));
+const title = computed(() => data.value?.title);
+
+const sourceOpen = ref(false);
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+function printToPdf() {
+  iframeRef.value?.contentWindow?.print();
+}
+</script>

package/src/plugins/presentHtml/definition.ts

@@ -0,0 +1,27 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "presentHtml";
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description:
+    "Save and present a complete, self-contained HTML page in the canvas. Claude generates the HTML and calls this tool to display it. Use for rich interactive output, dashboards, custom layouts, or any content best expressed as HTML.",
+  parameters: {
+    type: "object",
+    properties: {
+      html: {
+        type: "string",
+        description:
+          "Complete, self-contained HTML string. All CSS and JavaScript must be inline or loaded via CDN. Must be a full document (include <!DOCTYPE html> and <html>/<body> tags).",
+      },
+      title: {
+        type: "string",
+        description: "Short label shown in the preview sidebar.",
+      },
+    },
+    required: ["html"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/presentHtml/helpers.ts

@@ -0,0 +1,72 @@
+// Pure helpers for presentHtml/Preview.vue. Replaces the former
+// `/<[^>]*>/g` + `/\s+/g` regex pair — both flagged by
+// `sonarjs/slow-regex` for backtracking risk — with a single
+// linear walker that produces the exact same output.
+
+/**
+ * Produce a short plain-text preview from an HTML fragment:
+ *
+ * - every `<...>` span (a `<` with a later `>`) is replaced by a
+ *   single space
+ * - a bare `<` with no matching `>` is kept as a literal character
+ *   (matches the old regex, which required both brackets to match)
+ * - runs of whitespace are collapsed to one space
+ * - the result is trimmed and truncated to `maxLength` characters
+ *
+ * The walker is O(n) in the input length and does no regex
+ * backtracking.
+ */
+export function stripHtmlToPreview(html: string, maxLength: number): string {
+  const state: WalkerState = {
+    out: [],
+    // Start as if we just emitted a space so leading whitespace
+    // and a leading tag both get trimmed without a separate pass.
+    lastWasSpace: true,
+  };
+  let i = 0;
+  while (i < html.length) {
+    const c = html[i];
+    if (c === "<") {
+      const close = html.indexOf(">", i + 1);
+      if (close !== -1) {
+        // Real tag span `<...>` — skip it, emit a separator.
+        emitSeparator(state);
+        i = close + 1;
+        continue;
+      }
+      // No closing `>` anywhere after — treat as literal.
+    }
+    emitChar(state, c);
+    i++;
+  }
+  trimTrailingSpace(state.out);
+  return state.out.join("").slice(0, maxLength);
+}
+
+interface WalkerState {
+  out: string[];
+  lastWasSpace: boolean;
+}
+
+function emitChar(state: WalkerState, c: string): void {
+  if (isWhitespace(c)) {
+    emitSeparator(state);
+    return;
+  }
+  state.out.push(c);
+  state.lastWasSpace = false;
+}
+
+function emitSeparator(state: WalkerState): void {
+  if (state.lastWasSpace) return;
+  state.out.push(" ");
+  state.lastWasSpace = true;
+}
+
+function trimTrailingSpace(out: string[]): void {
+  if (out.length > 0 && out[out.length - 1] === " ") out.pop();
+}
+
+function isWhitespace(c: string): boolean {
+  return c === " " || c === "\t" || c === "\n" || c === "\r" || c === "\v" || c === "\f";
+}

package/src/plugins/presentHtml/index.ts

@@ -0,0 +1,41 @@
+import type { ToolPlugin } from "../../tools/types";
+import type { ToolResult } from "gui-chat-protocol";
+import toolDefinition, { TOOL_NAME } from "./definition";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+import { apiPost } from "../../utils/api";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+export interface PresentHtmlData {
+  html: string;
+  title?: string;
+  filePath: string;
+}
+
+const presentHtmlPlugin: ToolPlugin<PresentHtmlData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<PresentHtmlData>>(API_ROUTES.html.present, args);
+    if (!result.ok) {
+      return {
+        toolName: TOOL_NAME,
+        uuid: crypto.randomUUID(),
+        message: result.error,
+      };
+    }
+    return {
+      ...result.data,
+      toolName: TOOL_NAME,
+      uuid: crypto.randomUUID(),
+    };
+  },
+
+  isEnabled: () => true,
+  generatingMessage: "Presenting HTML page…",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default presentHtmlPlugin;
+export { TOOL_NAME };

package/src/plugins/presentMulmoScript/Preview.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="text-sm">
+    <div class="font-medium text-gray-700 truncate mb-1">
+      {{ title }}
+    </div>
+    <div v-if="description" class="text-xs text-gray-500 leading-relaxed">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { MulmoScriptData } from "./index";
+
+const props = defineProps<{ result: ToolResultComplete<MulmoScriptData> }>();
+
+const data = computed(() => props.result.data);
+const script = computed(() => data.value?.script);
+const title = computed(() => script.value?.title || data.value?.filePath?.split("/").pop() || "MulmoScript");
+const description = computed(() => script.value?.description);
+</script>