mulmoclaude 0.1.0

package/src/plugins/chart/Preview.vue

@@ -0,0 +1,49 @@
+<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 { PresentChartData } from "./index";
+
+const props = defineProps<{ result: ToolResultComplete<PresentChartData> }>();
+
+const data = computed(() => props.result.data);
+const title = computed(() => data.value?.title ?? data.value?.document?.title ?? "Chart");
+
+// Condensed "n charts: line, bar, …" hint derived from the document
+// so the preview card tells the user what's inside without opening.
+const hint = computed(() => {
+  const charts = data.value?.document?.charts ?? [];
+  if (charts.length === 0) return "";
+  const types = charts
+    .map((c) => c.type ?? inferTypeFromOption(c.option))
+    .filter((t): t is string => Boolean(t))
+    .slice(0, 3);
+  const suffix = charts.length > types.length ? ", …" : "";
+  const typeList = types.join(", ");
+  const plural = charts.length === 1 ? "" : "s";
+  const details = typeList ? `: ${typeList}${suffix}` : "";
+  return `${charts.length} chart${plural}${details}`;
+});
+
+function inferTypeFromOption(option: Record<string, unknown>): string | null {
+  const series = option.series;
+  if (Array.isArray(series) && series.length > 0) {
+    const first = series[0] as { type?: unknown };
+    if (typeof first.type === "string") return first.type;
+  } else if (series && typeof series === "object") {
+    const t = (series as { type?: unknown }).type;
+    if (typeof t === "string") return t;
+  }
+  return null;
+}
+</script>

package/src/plugins/chart/View.vue

@@ -0,0 +1,143 @@
+<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 ?? "Chart" }}
+      </span>
+      <span class="text-xs text-gray-500 shrink-0"> {{ charts.length }} chart{{ charts.length === 1 ? "" : "s" }} </span>
+    </div>
+    <div class="flex-1 overflow-y-auto p-4 space-y-4">
+      <div v-for="(chart, idx) in charts" :key="idx" class="border border-gray-200 rounded-lg bg-white" :data-testid="`chart-card-${idx}`">
+        <div class="px-3 py-2 border-b border-gray-100 flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2 min-w-0">
+            <span class="text-sm font-medium text-gray-800 truncate">
+              {{ chart.title ?? `Chart ${idx + 1}` }}
+            </span>
+            <span v-if="chart.type" class="text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5 bg-blue-50 text-blue-700 shrink-0">
+              {{ chart.type }}
+            </span>
+          </div>
+          <button
+            class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0"
+            :data-testid="`chart-export-png-${idx}`"
+            @click="exportPng(idx, chart.title)"
+          >
+            <span class="material-icons text-sm align-middle">download</span>
+            PNG
+          </button>
+        </div>
+        <div :ref="(el) => setChartRef(idx, el as HTMLDivElement | null)" class="w-full h-[400px]" :data-testid="`chart-canvas-${idx}`" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import * as echarts from "echarts";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { ChartEntry, PresentChartData } from "./index";
+import { isRecord } from "../../utils/types";
+
+const props = defineProps<{
+  selectedResult: ToolResultComplete<PresentChartData>;
+}>();
+
+const data = computed(() => props.selectedResult.data);
+const charts = computed<ChartEntry[]>(() => data.value?.document?.charts ?? []);
+const title = computed(() => data.value?.title ?? data.value?.document?.title);
+
+const containers = ref<Array<HTMLDivElement | null>>([]);
+// Kept as a plain array (not `ref`): ECharts instances are managed
+// imperatively and should not trigger Vue re-renders on mutation.
+const instances: echarts.ECharts[] = [];
+
+function setChartRef(idx: number, element: HTMLDivElement | null): void {
+  containers.value[idx] = element;
+}
+
+function disposeAll(): void {
+  for (const instance of instances) {
+    instance.dispose();
+  }
+  instances.length = 0;
+}
+
+// Force-disable mouse-wheel zoom on any dataZoom entry in the user's
+// option. Rationale: in stack view the page needs to scroll past the
+// chart, and `inside`-type dataZoom captures the wheel by default
+// (zoomOnMouseWheel=true), which traps the scroll over the canvas.
+// Toolbox/slider/drag zoom still work — only the wheel is disabled.
+function disableWheelZoom(option: Record<string, unknown>): Record<string, unknown> {
+  const dataZoom = option.dataZoom;
+  if (dataZoom === undefined || dataZoom === null) return option;
+  const normalise = (entry: unknown): unknown => {
+    if (!isRecord(entry)) return entry;
+    return {
+      ...entry,
+      zoomOnMouseWheel: false,
+      moveOnMouseWheel: false,
+    };
+  };
+  const next = Array.isArray(dataZoom) ? dataZoom.map(normalise) : normalise(dataZoom);
+  return { ...option, dataZoom: next };
+}
+
+function renderAll(): void {
+  disposeAll();
+  for (let i = 0; i < charts.value.length; i += 1) {
+    const element = containers.value[i];
+    const chart = charts.value[i];
+    if (!element || !chart) continue;
+    const instance = echarts.init(element);
+    try {
+      instance.setOption(disableWheelZoom(chart.option));
+    } catch (err) {
+      console.warn(`[chart] setOption failed for chart ${i}`, err);
+    }
+    instances[i] = instance;
+  }
+}
+
+function handleResize(): void {
+  for (const instance of instances) instance.resize();
+}
+
+onMounted(() => {
+  // Wait a tick so the refs are populated before we render.
+  queueMicrotask(renderAll);
+  window.addEventListener("resize", handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  disposeAll();
+});
+
+// Re-render when the selected result switches to a different document
+// (e.g. user clicks another chart result in the sidebar).
+watch(
+  () => data.value?.filePath,
+  () => queueMicrotask(renderAll),
+);
+
+function exportPng(idx: number, chartTitle?: string): void {
+  const instance = instances[idx];
+  if (!instance) return;
+  const dataUrl = instance.getDataURL({
+    type: "png",
+    pixelRatio: 2,
+    backgroundColor: "#ffffff",
+  });
+  let filenameSlug = (chartTitle ?? title.value ?? "chart").toLowerCase().replace(/[^a-z0-9-]+/g, "-");
+  while (filenameSlug.startsWith("-")) filenameSlug = filenameSlug.slice(1);
+  while (filenameSlug.endsWith("-")) filenameSlug = filenameSlug.slice(0, -1);
+  if (!filenameSlug) filenameSlug = "chart";
+  const anchor = document.createElement("a");
+  anchor.href = dataUrl;
+  anchor.download = `${filenameSlug}-${idx + 1}.png`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+}
+</script>

package/src/plugins/chart/definition.ts

@@ -0,0 +1,58 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "presentChart";
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description:
+    "Save and present one or more Apache ECharts visualizations as a single document. Use this for line, bar, area, scatter, pie, candlestick, heatmap, sankey, or graph/network charts — anything ECharts supports. Pass ECharts option object(s) directly; the plugin calls setOption on each one. Use `charts: []` array form even for a single chart so multi-chart dashboards share the same slug.",
+  parameters: {
+    type: "object",
+    properties: {
+      document: {
+        type: "object",
+        description:
+          "Chart document. Contains an optional title and an array of chart entries. Each entry has its own ECharts option object that the UI renders independently.",
+        properties: {
+          title: {
+            type: "string",
+            description: "Optional human-friendly title for the whole document. Used to derive the file slug and as the preview label.",
+          },
+          charts: {
+            type: "array",
+            description: "List of charts to render, in order. Each charts[i].option is passed as-is to ECharts' setOption().",
+            items: {
+              type: "object",
+              properties: {
+                title: {
+                  type: "string",
+                  description: "Optional short label for this specific chart (shown above it in the UI).",
+                },
+                type: {
+                  type: "string",
+                  description:
+                    "Informational tag shown in the UI (e.g. 'line', 'bar', 'candlestick', 'sankey'). The actual chart type is determined by option.series[].type.",
+                },
+                option: {
+                  type: "object",
+                  description:
+                    "Full ECharts option object. Include all series, axes, tooltip, legend, dataset — anything ECharts accepts. Keep data inline; large datasets are fine.",
+                },
+              },
+              required: ["option"],
+            },
+          },
+        },
+        required: ["charts"],
+      },
+      title: {
+        type: "string",
+        description: "Short label shown in the canvas preview sidebar. Defaults to document.title, or 'Chart' when both are blank.",
+      },
+    },
+    required: ["document"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/chart/index.ts

@@ -0,0 +1,52 @@
+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 ChartEntry {
+  title?: string;
+  type?: string;
+  option: Record<string, unknown>;
+}
+
+export interface ChartDocument {
+  title?: string;
+  charts: ChartEntry[];
+}
+
+export interface PresentChartData {
+  document: ChartDocument;
+  title?: string;
+  filePath: string;
+}
+
+const presentChartPlugin: ToolPlugin<PresentChartData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<PresentChartData>>(API_ROUTES.chart.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: "Rendering chart…",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default presentChartPlugin;
+export { TOOL_NAME };

package/src/plugins/editImage/Preview.vue

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

package/src/plugins/editImage/View.vue

@@ -0,0 +1,13 @@
+<template>
+  <ImageView v-if="selectedResult" :selected-result="selectedResult" alt="Edited image" prompt-label="Edit prompt" />
+</template>
+
+<script setup lang="ts">
+import { ImageView } from "../ui-image";
+import type { ToolResult } from "gui-chat-protocol";
+import type { ImageToolData } from "./definition";
+
+defineProps<{
+  selectedResult: ToolResult<ImageToolData>;
+}>();
+</script>

package/src/plugins/editImage/definition.ts

@@ -0,0 +1,27 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "editImage";
+
+export interface ImageToolData {
+  imageData: string;
+  prompt: string;
+}
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description: "Edit the previously generated image based on a text prompt.",
+  prompt: `When the user asks 'turn this image into ...', call ${TOOL_NAME} API to generate a new image.`,
+  parameters: {
+    type: "object",
+    properties: {
+      prompt: {
+        type: "string",
+        description: "Description of the edits to be made to the image in English",
+      },
+    },
+    required: ["prompt"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/editImage/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 editImagePlugin: ToolPlugin<ImageToolData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<ImageToolData>>(API_ROUTES.image.edit, 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: "Editing image...",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default editImagePlugin;
+export { TOOL_NAME };

package/src/plugins/generateImage/Preview.vue

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

package/src/plugins/generateImage/View.vue

@@ -0,0 +1,33 @@
+<template>
+  <ImageView v-if="imageResult" :selected-result="imageResult" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { ImageView } from "../ui-image";
+import type { ToolResult } from "gui-chat-protocol";
+import type { ImageToolData } from "./definition";
+import { TOOL_NAME } from "./definition";
+
+const props = defineProps<{
+  selectedResult: ToolResult<ImageToolData>;
+  sendTextMessage: (text?: string) => void;
+}>();
+
+defineEmits<{
+  updateResult: [result: ToolResult];
+}>();
+
+// Use ref + watch pattern for proper reactivity from external packages
+const imageResult = ref<ToolResult<ImageToolData> | null>(null);
+
+watch(
+  () => props.selectedResult,
+  (newResult) => {
+    if (newResult?.toolName === TOOL_NAME && newResult.data) {
+      imageResult.value = newResult;
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>

package/src/plugins/generateImage/definition.ts

@@ -0,0 +1,32 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "generateImage";
+
+export interface ImageToolData {
+  imageData: string;
+  prompt?: string;
+}
+
+export interface GenerateImageArgs {
+  prompt: string;
+}
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description:
+    "Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",
+  prompt: `When the user asks you to generate, draw, or create an image, use the ${TOOL_NAME} API. You may also offer to generate an image when a visual would clearly enhance the conversation, but do not generate images unsolicited during casual discussion.`,
+  parameters: {
+    type: "object",
+    properties: {
+      prompt: {
+        type: "string",
+        description: "A detailed prompt describing the image to generate",
+      },
+    },
+    required: ["prompt"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/generateImage/index.ts

@@ -0,0 +1,56 @@
+import type { ToolResult } from "gui-chat-protocol";
+import type { ToolPlugin } from "../../tools/types";
+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";
+
+function createUploadedImageResult(imageData: string, fileName: string, prompt: string): ToolResult<ImageToolData, never> {
+  return {
+    toolName: TOOL_NAME,
+    data: { imageData, prompt },
+    message: "",
+    title: fileName,
+  };
+}
+
+const generateImagePlugin: ToolPlugin<ImageToolData> = {
+  toolDefinition,
+
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<ImageToolData>>(API_ROUTES.image.generate, 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: "Generating image...",
+  inputHandlers: [
+    {
+      type: "file",
+      acceptedTypes: ["image/png", "image/jpeg"],
+      handleInput: (fileData: string, fileName: string) => createUploadedImageResult(fileData, fileName, ""),
+    },
+    {
+      type: "clipboard-image",
+      handleInput: (imageData: string) => createUploadedImageResult(imageData, "clipboard-image.png", ""),
+    },
+  ],
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default generateImagePlugin;
+export { TOOL_NAME };

package/src/plugins/manageRoles/Preview.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="text-sm">
+    <div class="flex items-center gap-1 font-medium text-gray-700 mb-1">
+      <span class="material-icons" style="font-size: 14px">manage_accounts</span>
+      <span>{{ customRoles.length }} custom role{{ customRoles.length !== 1 ? "s" : "" }}</span>
+    </div>
+    <div v-for="role in customRoles" :key="role.id" class="text-xs text-gray-600 flex items-center gap-1">
+      <span class="material-icons" style="font-size: 12px">{{ role.icon }}</span>
+      {{ role.name }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { ManageRolesData, CustomRole } from "./index";
+import { useFreshPluginData } from "../../composables/useFreshPluginData";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+const props = defineProps<{ result: ToolResultComplete<ManageRolesData> }>();
+const customRoles = ref<CustomRole[]>(props.result.data?.customRoles ?? []);
+
+const { refresh } = useFreshPluginData<CustomRole[]>({
+  endpoint: () => API_ROUTES.roles.list,
+  extract: (json) => (Array.isArray(json) ? (json as CustomRole[]) : null),
+  apply: (data) => {
+    customRoles.value = data;
+  },
+});
+
+// Watch the data itself — not just uuid — because the View emits
+// updateResult with the same uuid after an in-place edit. A uuid-only
+// watch would miss those updates and the preview would go stale.
+watch(
+  () => props.result.data?.customRoles,
+  (next) => {
+    customRoles.value = next ?? [];
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.result.uuid,
+  () => {
+    void refresh();
+  },
+);
+</script>