mulmoclaude 0.1.0

package/src/config/toolNames.ts

@@ -0,0 +1,71 @@
+// Single source of truth for every tool name (= MCP tool / plugin key)
+// the app knows about. Centralised here so:
+//
+//   - `Role.availablePlugins` can be typed as `ToolName[]` and typos
+//     get caught at compile time instead of silently dropping a
+//     plugin at runtime
+//   - grep for "every place that handles this tool" returns a list
+//     of `TOOL_NAMES.x` references rather than free-form strings
+//   - adding a new plugin is a one-line change here + register in
+//     `src/tools/index.ts` — and `typeof TOOL_NAMES` keeps both in
+//     sync through the type system
+//
+// Naming is intentionally the literal string the server / MCP
+// protocol / jsonl files expect — rename-touching requires a
+// coordinated server + client update, which is exactly when having
+// a central list here helps.
+//
+// First slice of issue #289 (item 4: tool name literals).
+
+export const TOOL_NAMES = {
+  // Text / base
+  textResponse: "text-response",
+
+  // Management plugins
+  manageTodoList: "manageTodoList",
+  manageScheduler: "manageScheduler",
+  manageRoles: "manageRoles",
+  manageSkills: "manageSkills",
+  manageSource: "manageSource",
+  manageWiki: "manageWiki",
+
+  // Presentational plugins
+  presentMulmoScript: "presentMulmoScript",
+  presentDocument: "presentDocument",
+  presentSpreadsheet: "presentSpreadsheet",
+  presentHtml: "presentHtml",
+  presentChart: "presentChart",
+  presentForm: "presentForm",
+  present3D: "present3D",
+
+  // Creation / generation
+  createMindMap: "createMindMap",
+  generateImage: "generateImage",
+  editImage: "editImage",
+  openCanvas: "openCanvas",
+
+  // Interactive / media
+  putQuestions: "putQuestions",
+  weather: "weather",
+
+  // MCP tools (server-side, not GUI plugins — registered in
+  // `server/mcp-tools/`). Listed here because they appear in a
+  // role's `availablePlugins` alongside GUI plugins.
+  readXPost: "readXPost",
+  searchX: "searchX",
+
+  // Built-in (handled specially by the MCP stdio bridge).
+  switchRole: "switchRole",
+} as const;
+
+export type ToolName = (typeof TOOL_NAMES)[keyof typeof TOOL_NAMES];
+
+/** Runtime predicate — useful when string input (URL param, JSON
+ *  payload) needs to be narrowed to a known tool. */
+export function isToolName(value: unknown): value is ToolName {
+  if (typeof value !== "string") return false;
+  return (Object.values(TOOL_NAMES) as readonly string[]).includes(value);
+}
+
+/** Array of all known tool names, in declaration order. */
+export const ALL_TOOL_NAMES: readonly ToolName[] = Object.values(TOOL_NAMES);

package/src/config/workspacePaths.ts

@@ -0,0 +1,24 @@
+// Workspace-relative file paths — single source of truth.
+//
+// Shared by both the Vue frontend and the Express server.
+// This file MUST NOT import node:path, node:os, or any Node-only
+// module so it stays browser-compatible.
+//
+// The server's `server/workspace/paths.ts` imports these and
+// joins them with the workspace root to produce absolute paths.
+
+/** Well-known individual files. Values are workspace-relative paths. */
+export const WORKSPACE_FILES = {
+  memory: "conversations/memory.md",
+  sessionToken: ".session-token",
+  wikiIndex: "data/wiki/index.md",
+  wikiLog: "data/wiki/log.md",
+  wikiSchema: "data/wiki/SCHEMA.md",
+  wikiSummary: "data/wiki/summary.md",
+  summariesIndex: "conversations/summaries/_index.md",
+  todosItems: "data/todos/todos.json",
+  todosColumns: "data/todos/columns.json",
+  schedulerItems: "data/scheduler/items.json",
+  schedulerUserTasks: "config/scheduler/tasks.json",
+  schedulerOverrides: "config/scheduler/overrides.json",
+} as const;

package/src/index.css

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+
+/* Markdown content styles.
+   The text-response plugin wraps rendered Markdown in a
+   `.markdown-content` container with `prose prose-slate` classes, but
+   Tailwind Typography isn't installed here so those classes don't do
+   anything. Provide a minimal baseline so headings, lists, code blocks
+   etc. look right in both chat responses and the Files-mode preview. */
+.markdown-content h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: #111827;
+}
+.markdown-content h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: #1f2937;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.25rem;
+}
+.markdown-content h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  color: #374151;
+}
+.markdown-content h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+  color: #374151;
+}
+.markdown-content p {
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+}
+.markdown-content ul,
+.markdown-content ol {
+  margin-left: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+.markdown-content ul {
+  list-style-type: disc;
+}
+.markdown-content ol {
+  list-style-type: decimal;
+}
+.markdown-content li {
+  margin-bottom: 0.25rem;
+  line-height: 1.5;
+}
+.markdown-content code {
+  background: #f3f4f6;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.25rem;
+  font-size: 0.85em;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+.markdown-content pre {
+  background: #f3f4f6;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin-bottom: 0.75rem;
+}
+.markdown-content pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.85em;
+}
+.markdown-content blockquote {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1rem;
+  color: #6b7280;
+  margin: 0.75rem 0;
+}
+.markdown-content a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 1rem 0;
+}
+.markdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+}
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+.markdown-content th {
+  background: #f9fafb;
+  font-weight: 600;
+}

package/src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router/index";
+import { installGuards } from "./router/guards";
+import { setAuthToken } from "./utils/api";
+import { readAuthTokenFromMeta } from "./utils/dom/authTokenMeta";
+import "./index.css";
+import "material-icons/iconfont/material-icons.css";
+
+import.meta.glob(["../node_modules/@gui-chat-plugin/*/dist/style.css", "../node_modules/@mulmochat-plugin/*/dist/style.css"], { eager: true });
+
+// Bearer auth bootstrap (#272). The server embeds the per-startup
+// token into `<meta name="mulmoclaude-auth" content="...">` when it
+// serves index.html. Reading it here and handing to setAuthToken()
+// wires every subsequent apiFetch / apiGet / ... to attach an
+// `Authorization: Bearer ...` header. A missing or empty token means
+// requests will 401 — that's the intended dev-time signal when the
+// server isn't running.
+setAuthToken(readAuthTokenFromMeta());
+
+installGuards(router);
+
+const app = createApp(App);
+app.use(router);
+app.mount("#app");

package/src/plugins/canvas/Preview.vue

@@ -0,0 +1,13 @@
+<template>
+  <ImagePreview :result="result" alt="Canvas drawing" />
+</template>
+
+<script setup lang="ts">
+import { ImagePreview } from "../ui-image";
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { ImageToolData } from "./definition";
+
+defineProps<{
+  result: ToolResult<ImageToolData>;
+}>();
+</script>

package/src/plugins/canvas/View.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="w-full h-full flex flex-col bg-white">
+    <div class="flex-shrink-0 px-4 py-2 border-b border-gray-100 bg-gray-50">
+      <div class="flex items-center justify-between gap-4">
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <div class="flex gap-1">
+              <button
+                v-for="size in [2, 5, 10, 20]"
+                :key="size"
+                :class="[
+                  'w-8 h-8 rounded border-2 transition-colors',
+                  brushSize === size ? 'border-blue-500 bg-blue-100' : 'border-gray-300 bg-white hover:bg-gray-50',
+                ]"
+                @click="brushSize = size"
+              >
+                <div
+                  :class="'bg-gray-800 rounded-full mx-auto'"
+                  :style="{
+                    width: Math.max(2, size * 1) + 'px',
+                    height: Math.max(2, size * 1) + 'px',
+                  }"
+                ></div>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <input v-model="brushColor" type="color" class="w-12 h-8 rounded border border-gray-300" />
+          </div>
+        </div>
+
+        <div class="flex items-center gap-1">
+          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50" title="Undo" @click="undo">
+            <span class="material-icons text-sm">undo</span>
+          </button>
+          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50" title="Redo" @click="redo">
+            <span class="material-icons text-sm">redo</span>
+          </button>
+          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50" title="Clear" @click="clear">
+            <span class="material-icons text-sm">delete</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 p-4 overflow-hidden">
+      <VueDrawingCanvas
+        ref="canvasRef"
+        :key="`${selectedResult?.uuid || 'default'}-${canvasRenderKey}`"
+        v-model:image="canvasImage"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        :stroke-type="'dash'"
+        :line-cap="'round'"
+        :line-join="'round'"
+        :fill-shape="false"
+        :eraser="false"
+        :line-width="brushSize"
+        :color="brushColor"
+        :background-color="'#FFFFFF'"
+        :background-image="undefined"
+        :watermark="undefined"
+        :initial-image="initialStrokes"
+        save-as="png"
+        :styles="{
+          border: '1px solid #ddd',
+          borderRadius: '8px',
+        }"
+        :lock="false"
+        @mouseup="handleDrawingEnd"
+        @touchend="handleDrawingEnd"
+      />
+      <div class="flex items-center gap-2 flex-wrap mt-3">
+        <span class="text-xs text-gray-500 mr-1">Style:</span>
+        <button
+          v-for="style in artStyles"
+          :key="style.id"
+          class="px-3 py-1.5 text-xs rounded-full border border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-400 transition-colors"
+          @click="applyStyle(style)"
+        >
+          {{ style.label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, watch } from "vue";
+import VueDrawingCanvas from "vue-drawing-canvas";
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { ImageToolData, CanvasDrawingState } from "./definition";
+import { apiPost, apiPut } from "../../utils/api";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+const props = defineProps<{
+  selectedResult: ToolResult<ImageToolData> | null;
+  sendTextMessage?: (text: string) => void;
+}>();
+
+const emit = defineEmits<{
+  updateResult: [result: ToolResult<ImageToolData>];
+}>();
+
+const artStyles = [
+  { id: "ghibli", label: "Ghibli" },
+  { id: "ukiyoe", label: "Ukiyoe" },
+  { id: "sumie", label: "Sumi-e" },
+  { id: "picasso", label: "Picasso" },
+  { id: "gogh", label: "Van Gogh" },
+  { id: "photo", label: "Photo-realistic" },
+  { id: "watercolor", label: "Watercolor" },
+  { id: "popart", label: "Pop Art" },
+  { id: "american", label: "American Comic" },
+  { id: "cyberpunk", label: "Cyberpunk" },
+  { id: "pencilsketch", label: "Pencil Sketch" },
+  { id: "pixelart", label: "Pixel Art" },
+];
+
+const applyStyle = async (style: { id: string; label: string }) => {
+  const saved = await saveDrawingState();
+  if (!saved) return;
+  if (props.sendTextMessage) {
+    props.sendTextMessage(`Turn my drawing on the canvas into a ${style.label} style image.`);
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const canvasRef = ref<any>(null);
+const canvasImage = ref("");
+const brushSize = ref(5);
+const brushColor = ref("#000000");
+const initialStrokes = ref([]);
+const canvasWidth = ref(800);
+const canvasHeight = ref(600);
+const canvasRenderKey = ref(0);
+
+// Track the server-side image path for this canvas instance.
+// Initialized from existing result data (if reopening a saved canvas).
+const imagePath = ref(
+  props.selectedResult?.data?.imageData && !props.selectedResult.data.imageData.startsWith("data:") ? props.selectedResult.data.imageData : "",
+);
+let uploadInFlight = false;
+let pendingSave = false;
+
+const restoreDrawingState = () => {
+  if (props.selectedResult?.viewState?.drawingState) {
+    const state = props.selectedResult.viewState.drawingState as CanvasDrawingState;
+
+    brushSize.value = state.brushSize || 5;
+    brushColor.value = state.brushColor || "#000000";
+    canvasWidth.value = state.canvasWidth || 800;
+    canvasHeight.value = state.canvasHeight || 600;
+
+    if (state.strokes) {
+      initialStrokes.value = state.strokes as never[];
+    } else {
+      initialStrokes.value = [];
+    }
+  } else {
+    initialStrokes.value = [];
+  }
+  // Reinitialise imagePath from the incoming result so autosaves
+  // after a selectedResult change don't upload against the old path.
+  imagePath.value =
+    props.selectedResult?.data?.imageData && !props.selectedResult.data.imageData.startsWith("data:") ? props.selectedResult.data.imageData : "";
+};
+restoreDrawingState();
+
+const undo = async () => {
+  if (canvasRef.value) {
+    try {
+      canvasRef.value.undo();
+      // Wait for the canvas to update, then save state
+      setTimeout(saveDrawingState, 50);
+    } catch (error) {
+      console.warn("Undo operation failed:", error);
+    }
+  }
+};
+
+const redo = async () => {
+  if (canvasRef.value) {
+    try {
+      canvasRef.value.redo();
+      // Wait for the canvas to update, then save state
+      setTimeout(saveDrawingState, 50);
+    } catch (error) {
+      console.warn("Redo operation failed:", error);
+    }
+  }
+};
+
+const clear = () => {
+  if (canvasRef.value) {
+    try {
+      canvasRef.value.reset();
+      saveDrawingState();
+    } catch (error) {
+      console.warn("Clear operation failed:", error);
+    }
+  }
+};
+
+const handleDrawingEnd = () => {
+  saveDrawingState();
+};
+
+// Returns true if the drawing was successfully persisted, false
+// otherwise. Callers like applyStyle check the return value to avoid
+// sending a style request against stale image data.
+//
+// Captures a local snapshot of props.selectedResult and imagePath at
+// the start so an async upload never accidentally writes against a
+// different result that was swapped in mid-flight.
+const saveDrawingState = async (): Promise<boolean> => {
+  if (!canvasRef.value || !props.selectedResult) return false;
+  if (uploadInFlight) {
+    pendingSave = true;
+    return false;
+  }
+  // Snapshot the current result and path *before* any await so a
+  // concurrent selectedResult swap doesn't silently redirect the
+  // upload.
+  const boundResult = props.selectedResult;
+  const boundImagePath = imagePath.value;
+  uploadInFlight = true;
+  try {
+    const imageDataUri: string = await canvasRef.value.save();
+    const strokes = canvasRef.value.getAllStrokes();
+    const drawingState = {
+      strokes,
+      brushSize: brushSize.value,
+      brushColor: brushColor.value,
+      canvasWidth: canvasWidth.value,
+      canvasHeight: canvasHeight.value,
+    };
+
+    // If selectedResult changed while we were saving the canvas
+    // bitmap, abort — the upload would go to the wrong session.
+    if (boundResult !== props.selectedResult) return false;
+
+    const savedPath = boundImagePath
+      ? await (async () => {
+          const filename = boundImagePath.replace(/^images\//, "");
+          const result = await apiPut<{ path: string }>(API_ROUTES.image.update.replace(":filename", filename), { imageData: imageDataUri });
+          if (!result.ok) throw new Error(`PUT failed: ${result.error}`);
+          return result.data.path;
+        })()
+      : await (async () => {
+          const result = await apiPost<{ path: string }>(API_ROUTES.image.upload, {
+            imageData: imageDataUri,
+          });
+          if (!result.ok) throw new Error(`POST failed: ${result.error}`);
+          return result.data.path;
+        })();
+
+    imagePath.value = savedPath;
+
+    const updatedResult: ToolResult<ImageToolData> = {
+      ...boundResult,
+      data: {
+        prompt: boundResult.data?.prompt || "",
+        imageData: savedPath,
+      },
+      viewState: { drawingState },
+    };
+
+    emit("updateResult", updatedResult);
+    return true;
+  } catch (error) {
+    console.error("Failed to save drawing state:", error);
+    return false;
+  } finally {
+    uploadInFlight = false;
+    if (pendingSave) {
+      pendingSave = false;
+      void saveDrawingState();
+    }
+  }
+};
+
+// Watch for selectedResult changes to restore drawing state
+watch(
+  () => props.selectedResult,
+  () => {
+    restoreDrawingState();
+  },
+  { immediate: false },
+);
+
+// Watch for changes to automatically save drawing state
+watch([brushSize, brushColor], () => {
+  saveDrawingState();
+});
+
+// Watch for canvas size changes and force re-mount
+watch([canvasWidth, canvasHeight], () => {
+  // Force canvas to re-mount with new dimensions by changing the key
+  canvasRenderKey.value++;
+});
+const updateCanvasSize = () => {
+  // Get the canvas container (the div with flex-1 p-4 overflow-hidden)
+  const canvasContainer = canvasRef.value?.$el?.parentElement;
+  if (canvasContainer) {
+    const containerRect = canvasContainer.getBoundingClientRect();
+
+    const padding = 32; // p-4 = 16px each side
+    const newWidth = Math.floor(containerRect.width - padding);
+    const newHeight = Math.floor((newWidth * 9) / 16);
+
+    // Only update if the size actually changed to avoid unnecessary re-renders
+    if (newWidth !== canvasWidth.value || newHeight !== canvasHeight.value) {
+      canvasWidth.value = newWidth;
+      canvasHeight.value = newHeight;
+    }
+  }
+};
+
+onMounted(async () => {
+  await nextTick();
+  updateCanvasSize();
+
+  // Listen for window resize to update canvas size
+  window.addEventListener("resize", updateCanvasSize);
+});
+
+// Clean up resize listener
+onUnmounted(() => {
+  window.removeEventListener("resize", updateCanvasSize);
+});
+</script>

package/src/plugins/canvas/definition.ts

@@ -0,0 +1,38 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "openCanvas";
+
+export interface ImageToolData {
+  imageData: string;
+  prompt: string;
+}
+
+export interface CanvasDrawingState {
+  brushSize?: number;
+  brushColor?: string;
+  canvasWidth?: number;
+  canvasHeight?: number;
+  strokes?: unknown[];
+}
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description: "Open a drawing canvas for the user to create drawings, sketches, or diagrams.",
+  prompt: `When the user asks 'I want to draw an image.', call ${TOOL_NAME} API to open the canvas.`,
+  parameters: {
+    type: "object",
+    properties: {},
+    required: [] as string[],
+  },
+};
+
+export default toolDefinition;
+
+export const executeOpenCanvas = async () => {
+  return {
+    message: "Drawing canvas opened",
+    instructions: "Tell the user that you are able to turn the drawing into a photographic image, a manga or any other art style.",
+    title: "Drawing Canvas",
+  };
+};

package/src/plugins/canvas/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 { ImageToolData } from "./definition";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+import { apiPost } from "../../utils/api";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+const canvasPlugin: ToolPlugin<ImageToolData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<ImageToolData>>(API_ROUTES.plugins.canvas, 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: "Opening drawing canvas...",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default canvasPlugin;
+export { TOOL_NAME };