mulmoclaude 0.1.0

package/src/plugins/manageRoles/View.vue

@@ -0,0 +1,525 @@
+<template>
+  <div class="h-full bg-white flex flex-col">
+    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
+      <h2 class="text-lg font-semibold text-gray-800">Custom Roles</h2>
+      <div class="flex items-center gap-3">
+        <span class="text-sm text-gray-500">
+          {{ customRoles.length }}
+          role{{ customRoles.length !== 1 ? "s" : "" }}
+        </span>
+        <button v-if="!creating" data-testid="role-add-btn" class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" @click="startCreate">
+          + Add
+        </button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto">
+      <!-- New role creation panel -->
+      <div v-if="creating" class="m-4 border border-blue-300 bg-blue-50 rounded-lg p-4 space-y-3">
+        <div class="text-sm font-semibold text-gray-700">Create new role</div>
+
+        <!-- ID + Name + Icon row -->
+        <div class="flex gap-3">
+          <div class="w-40">
+            <label class="block text-xs font-medium text-gray-600 mb-1">ID</label>
+            <input
+              v-model="newForm.id"
+              type="text"
+              placeholder="unique-id"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:border-blue-400"
+            />
+          </div>
+          <div class="flex-1">
+            <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
+            <input
+              v-model="newForm.name"
+              type="text"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            />
+          </div>
+          <div class="w-32">
+            <label class="block text-xs font-medium text-gray-600 mb-1">
+              Icon
+              <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">?</a>
+            </label>
+            <input
+              v-model="newForm.icon"
+              type="text"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:border-blue-400"
+            />
+          </div>
+        </div>
+
+        <!-- Prompt -->
+        <div>
+          <label class="block text-xs font-medium text-gray-600 mb-1">Prompt</label>
+          <textarea
+            v-model="newForm.prompt"
+            rows="6"
+            class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono resize-y focus:outline-none focus:border-blue-400"
+            spellcheck="false"
+          />
+        </div>
+
+        <!-- Plugins -->
+        <div>
+          <label class="block text-xs font-medium text-gray-600 mb-2">Plugins</label>
+          <div class="grid gap-x-4 gap-y-1 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
+            <label
+              v-for="plugin in availablePlugins"
+              :key="plugin.name"
+              class="flex items-center gap-2 text-sm cursor-pointer"
+              :class="plugin.enabled ? 'text-gray-700' : 'text-gray-400 cursor-not-allowed'"
+              :title="plugin.enabled ? '' : `Requires ${plugin.requiredEnv.join(', ')} in .env`"
+            >
+              <input
+                v-model="newForm.selectedPlugins"
+                type="checkbox"
+                :value="plugin.name"
+                :disabled="!plugin.enabled"
+                class="cursor-pointer disabled:cursor-not-allowed"
+              />
+              {{ plugin.name }}
+              <span v-if="!plugin.enabled" class="text-xs text-gray-400">(missing {{ plugin.requiredEnv.join(", ") }})</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Starter queries -->
+        <div>
+          <label class="block text-xs font-medium text-gray-600 mb-1">
+            Starter queries
+            <span class="text-gray-400 font-normal">(one per line)</span>
+          </label>
+          <textarea
+            v-model="newForm.queriesText"
+            rows="3"
+            class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded resize-y focus:outline-none focus:border-blue-400"
+          />
+        </div>
+
+        <!-- Buttons -->
+        <div class="flex gap-2 pt-1">
+          <button
+            class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            :disabled="saving || !!newFormError"
+            :title="newFormError ?? ''"
+            @click="saveNew"
+          >
+            {{ saving ? "Creating…" : "Create" }}
+          </button>
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="cancelCreate">Cancel</button>
+        </div>
+        <div v-if="newFormError" class="text-xs text-gray-500" data-testid="role-form-hint">
+          {{ newFormError }}
+        </div>
+        <div v-if="createError" class="text-xs text-red-500">
+          {{ createError }}
+        </div>
+      </div>
+
+      <div v-if="!creating && customRoles.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">
+        No custom roles yet. Click "+ Add" or ask Claude to create one.
+      </div>
+
+      <ul v-if="customRoles.length > 0" class="p-4 space-y-2">
+        <li v-for="role in customRoles" :key="role.id" class="rounded-lg border" :class="selectedId === role.id ? 'border-blue-400' : 'border-gray-200'">
+          <!-- Role header row -->
+          <div
+            class="flex items-center gap-3 p-3 cursor-pointer hover:bg-gray-50 rounded-lg"
+            :class="selectedId === role.id ? 'rounded-b-none' : ''"
+            @click="selectRole(role)"
+          >
+            <span class="material-icons text-gray-500">{{ role.icon }}</span>
+            <div class="flex-1 min-w-0">
+              <div class="font-medium text-sm text-gray-800">
+                {{ role.name }}
+                <span class="ml-1 text-xs font-mono text-gray-400">({{ role.id }})</span>
+              </div>
+              <div class="text-xs text-gray-400 truncate">
+                {{ role.availablePlugins.join(", ") }}
+              </div>
+            </div>
+            <span class="material-icons text-gray-400 text-sm" :title="selectedId === role.id ? 'Collapse' : 'Expand'">
+              {{ selectedId === role.id ? "expand_less" : "expand_more" }}
+            </span>
+          </div>
+
+          <!-- Inline editor -->
+          <div v-if="selectedId === role.id" class="border-t border-blue-100 bg-blue-50 p-4 space-y-3 rounded-b-lg">
+            <!-- ID + Name + Icon row -->
+            <div class="flex gap-3">
+              <div class="w-40">
+                <label class="block text-xs font-medium text-gray-600 mb-1">ID</label>
+                <input
+                  v-model="editForm.id"
+                  type="text"
+                  class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:border-blue-400"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
+                <input
+                  v-model="editForm.name"
+                  type="text"
+                  class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+                  @keydown.enter="saveEdit(role.id)"
+                />
+              </div>
+              <div class="w-32">
+                <label class="block text-xs font-medium text-gray-600 mb-1">
+                  Icon
+                  <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">?</a>
+                </label>
+                <input
+                  v-model="editForm.icon"
+                  type="text"
+                  class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:border-blue-400"
+                />
+              </div>
+            </div>
+
+            <!-- Prompt -->
+            <div>
+              <label class="block text-xs font-medium text-gray-600 mb-1">Prompt</label>
+              <textarea
+                v-model="editForm.prompt"
+                rows="6"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono resize-y focus:outline-none focus:border-blue-400"
+                spellcheck="false"
+              />
+            </div>
+
+            <!-- Plugins -->
+            <div>
+              <label class="block text-xs font-medium text-gray-600 mb-2">Plugins</label>
+              <div class="grid gap-x-4 gap-y-1 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
+                <label
+                  v-for="plugin in availablePlugins"
+                  :key="plugin.name"
+                  class="flex items-center gap-2 text-sm cursor-pointer"
+                  :class="plugin.enabled ? 'text-gray-700' : 'text-gray-400 cursor-not-allowed'"
+                  :title="plugin.enabled ? '' : `Requires ${plugin.requiredEnv.join(', ')} in .env`"
+                >
+                  <input
+                    v-model="editForm.selectedPlugins"
+                    type="checkbox"
+                    :value="plugin.name"
+                    :disabled="!plugin.enabled"
+                    class="cursor-pointer disabled:cursor-not-allowed"
+                  />
+                  {{ plugin.name }}
+                  <span v-if="!plugin.enabled" class="text-xs text-gray-400">(missing {{ plugin.requiredEnv.join(", ") }})</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- Starter queries -->
+            <div>
+              <label class="block text-xs font-medium text-gray-600 mb-1">
+                Starter queries
+                <span class="text-gray-400 font-normal">(one per line)</span>
+              </label>
+              <textarea
+                v-model="editForm.queriesText"
+                rows="3"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded resize-y focus:outline-none focus:border-blue-400"
+              />
+            </div>
+
+            <!-- Buttons -->
+            <div class="flex items-center justify-between pt-1">
+              <div class="flex gap-2">
+                <button
+                  class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                  :disabled="saving || !!editFormError"
+                  :title="editFormError ?? ''"
+                  @click="saveEdit(role.id)"
+                >
+                  {{ saving ? "Updating…" : "Update" }}
+                </button>
+                <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="selectedId = null">Cancel</button>
+              </div>
+              <button
+                class="px-3 py-1.5 text-sm rounded border border-red-200 text-red-500 hover:bg-red-50 disabled:opacity-50"
+                :disabled="saving"
+                @click="deleteRole(role.id)"
+              >
+                Delete
+              </button>
+            </div>
+            <div v-if="editFormError" class="text-xs text-gray-500">
+              {{ editFormError }}
+            </div>
+            <div v-if="saveError" class="text-xs text-red-500">
+              {{ saveError }}
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { useFreshPluginData } from "../../composables/useFreshPluginData";
+import { useAppApi } from "../../composables/useAppApi";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { CustomRole, ManageRolesData } from "./index";
+import { getAllPluginNames } from "../../tools/index";
+import { apiGet, apiPost } from "../../utils/api";
+import { API_ROUTES } from "../../config/apiRoutes";
+
+interface PluginEntry {
+  name: string;
+  enabled: boolean;
+  requiredEnv: string[];
+}
+
+// Plugins the user can assign — exclude internal/auto-managed ones
+const EXCLUDED = new Set(["text-response", "switchRole"]);
+const guiPlugins: PluginEntry[] = getAllPluginNames()
+  .filter((name) => !EXCLUDED.has(name))
+  .map((name) => ({ name, enabled: true, requiredEnv: [] }));
+
+const availablePlugins = ref<PluginEntry[]>(guiPlugins);
+
+onMounted(async () => {
+  const result = await apiGet<PluginEntry[]>(API_ROUTES.mcpTools.list);
+  if (result.ok) {
+    availablePlugins.value = [...guiPlugins, ...result.data];
+  }
+  // Non-critical: MCP tools enrich the plugin palette for role editing
+  // but the view works fine with GUI plugins alone. No error banner needed.
+});
+
+const props = defineProps<{
+  selectedResult?: ToolResultComplete<ManageRolesData>;
+}>();
+const emit = defineEmits<{ updateResult: [result: ToolResultComplete] }>();
+
+const appApi = useAppApi();
+
+const customRoles = ref<CustomRole[]>(props.selectedResult?.data?.customRoles ?? []);
+
+const { refresh: refreshCustomRoles } = useFreshPluginData<CustomRole[]>({
+  endpoint: () => API_ROUTES.roles.list,
+  extract: (json) => (Array.isArray(json) ? (json as CustomRole[]) : null),
+  apply: (data) => {
+    customRoles.value = data;
+  },
+});
+
+watch(
+  () => props.selectedResult?.uuid,
+  () => {
+    customRoles.value = props.selectedResult?.data?.customRoles ?? [];
+    void refreshCustomRoles();
+  },
+);
+
+// ── Selection & edit form ─────────────────────────────────────────────────────
+
+const selectedId = ref<string | null>(null);
+const saving = ref(false);
+const saveError = ref("");
+
+interface EditForm {
+  id: string;
+  name: string;
+  icon: string;
+  prompt: string;
+  selectedPlugins: string[];
+  queriesText: string;
+}
+
+const editForm = ref<EditForm>({
+  id: "",
+  name: "",
+  icon: "",
+  prompt: "",
+  selectedPlugins: [],
+  queriesText: "",
+});
+
+const creating = ref(false);
+const createError = ref("");
+const newForm = ref<EditForm>({
+  id: "",
+  name: "",
+  icon: "person",
+  prompt: "",
+  selectedPlugins: [],
+  queriesText: "",
+});
+
+function startCreate() {
+  selectedId.value = null;
+  createError.value = "";
+  newForm.value = {
+    id: "",
+    name: "",
+    icon: "person",
+    prompt: "",
+    selectedPlugins: [],
+    queriesText: "",
+  };
+  creating.value = true;
+}
+
+function cancelCreate() {
+  creating.value = false;
+  createError.value = "";
+}
+
+function selectRole(role: CustomRole) {
+  if (selectedId.value === role.id) {
+    selectedId.value = null;
+    return;
+  }
+  selectedId.value = role.id;
+  saveError.value = "";
+  editForm.value = {
+    id: role.id,
+    name: role.name,
+    icon: role.icon,
+    prompt: role.prompt,
+    selectedPlugins: role.availablePlugins.filter((plugin) => plugin !== "switchRole"),
+    queriesText: (role.queries ?? []).join("\n"),
+  };
+}
+
+// ── API ───────────────────────────────────────────────────────────────────────
+
+interface ManageResult {
+  success?: boolean;
+  error?: string;
+  [key: string]: unknown;
+}
+
+async function callManage(body: Record<string, unknown>): Promise<ManageResult> {
+  const result = await apiPost<ManageResult>(API_ROUTES.roles.manage, body);
+  if (!result.ok) {
+    // Prefer the backend's error message (e.g. validation failure
+    // details). Fall back to a status code only when the server didn't
+    // give us anything useful.
+    return {
+      success: false,
+      error: result.status === 0 ? result.error || "Network error" : result.error || `Server error: ${result.status}`,
+    };
+  }
+  return result.data;
+}
+
+async function refreshList() {
+  const result = await callManage({ action: "list" });
+  if (result.success) {
+    const data = result as { data?: { customRoles?: CustomRole[] } };
+    customRoles.value = data.data?.customRoles ?? [];
+    if (props.selectedResult) {
+      emit("updateResult", {
+        ...props.selectedResult,
+        ...result,
+        uuid: props.selectedResult.uuid,
+      });
+    }
+    // Let App.vue know the dropdown needs to refresh.
+    await Promise.resolve(appApi.refreshRoles());
+  }
+}
+
+function validateRoleForm(form: EditForm, excludeId: string | null): string | null {
+  const trimmedId = form.id.trim();
+  const trimmedName = form.name.trim();
+  if (!trimmedId) return "ID is required.";
+  if (!/^[a-zA-Z0-9_-]+$/.test(trimmedId)) {
+    return "ID may only contain letters, numbers, '-' and '_'.";
+  }
+  if (!trimmedName) return "Name is required.";
+  if (customRoles.value.some((existing) => existing.id === trimmedId && existing.id !== excludeId)) {
+    return `A role with ID '${trimmedId}' already exists.`;
+  }
+  return null;
+}
+
+const newFormError = computed<string | null>(() => validateRoleForm(newForm.value, null));
+
+const editFormError = computed<string | null>(() => validateRoleForm(editForm.value, selectedId.value));
+
+function buildNewRole(): CustomRole {
+  return {
+    id: newForm.value.id.trim(),
+    name: newForm.value.name.trim(),
+    icon: newForm.value.icon.trim() || "person",
+    prompt: newForm.value.prompt,
+    availablePlugins: newForm.value.selectedPlugins,
+    queries: newForm.value.queriesText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean),
+  };
+}
+
+async function saveNew() {
+  if (newFormError.value) {
+    createError.value = newFormError.value;
+    return;
+  }
+  saving.value = true;
+  createError.value = "";
+  const result = await callManage({ action: "create", role: buildNewRole() });
+  if (result.success) {
+    creating.value = false;
+    await refreshList();
+  } else {
+    createError.value = result.error ?? "Create failed";
+  }
+  saving.value = false;
+}
+
+async function saveEdit(originalId: string) {
+  if (editFormError.value) {
+    saveError.value = editFormError.value;
+    return;
+  }
+  saving.value = true;
+  saveError.value = "";
+  const role: CustomRole = {
+    id: editForm.value.id.trim(),
+    name: editForm.value.name.trim(),
+    icon: editForm.value.icon.trim(),
+    prompt: editForm.value.prompt,
+    availablePlugins: editForm.value.selectedPlugins,
+    queries: editForm.value.queriesText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean),
+  };
+  const result = await callManage({
+    action: "update",
+    role,
+    oldRoleId: originalId,
+  });
+  if (result.success) {
+    selectedId.value = null;
+    await refreshList();
+  } else {
+    saveError.value = result.error ?? "Save failed";
+  }
+  saving.value = false;
+}
+
+async function deleteRole(roleId: string) {
+  saving.value = true;
+  saveError.value = "";
+  const result = await callManage({ action: "delete", roleId });
+  if (result.success) {
+    selectedId.value = null;
+    await refreshList();
+  } else {
+    saveError.value = result.error ?? "Delete failed";
+  }
+  saving.value = false;
+}
+</script>

package/src/plugins/manageRoles/definition.ts

@@ -0,0 +1,43 @@
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "manageRoles";
+
+const toolDefinition: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description: "Create, update, or delete a custom user role stored in ~/mulmoclaude/roles/. After success, the frontend role list refreshes automatically.",
+  parameters: {
+    type: "object",
+    properties: {
+      action: {
+        type: "string",
+        enum: ["create", "update", "delete", "list"],
+        description: "The action to perform. Use 'list' to display all custom roles in the canvas.",
+      },
+      role: {
+        type: "object",
+        description: "The full role definition (required for create/update)",
+        properties: {
+          id: { type: "string" },
+          name: { type: "string" },
+          icon: {
+            type: "string",
+            description:
+              "A Material Icons ligature name (lowercase with underscores, e.g. 'smart_toy', 'science', 'draw', 'translate'). Default to 'smart_toy' if unsure.",
+          },
+          prompt: { type: "string" },
+          availablePlugins: { type: "array", items: { type: "string" } },
+          queries: { type: "array", items: { type: "string" } },
+        },
+        required: ["id", "name", "icon", "prompt", "availablePlugins"],
+      },
+      roleId: {
+        type: "string",
+        description: "The role ID to delete (required for delete action)",
+      },
+    },
+    required: ["action"],
+  },
+};
+
+export default toolDefinition;

package/src/plugins/manageRoles/index.ts

@@ -0,0 +1,47 @@
+import type { ToolPlugin } from "../../tools/types";
+import type { ToolResult } from "gui-chat-protocol";
+import toolDefinition from "./definition";
+import { 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 CustomRole {
+  id: string;
+  name: string;
+  icon: string;
+  prompt: string;
+  availablePlugins: string[];
+  queries?: string[];
+}
+
+export interface ManageRolesData {
+  customRoles: CustomRole[];
+}
+
+const manageRolesPlugin: ToolPlugin = {
+  toolDefinition,
+  async execute(_context, args) {
+    const result = await apiPost<ToolResult<ManageRolesData>>(API_ROUTES.roles.manage, 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: "Managing roles…",
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default manageRolesPlugin;
+export { TOOL_NAME };

package/src/plugins/manageSkills/Preview.vue

@@ -0,0 +1,21 @@
+<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">auto_awesome</span>
+      <span>{{ skills.length }} skill{{ skills.length !== 1 ? "s" : "" }}</span>
+    </div>
+    <div v-for="skill in skills.slice(0, 6)" :key="skill.name" class="text-xs text-gray-600 truncate">
+      {{ skill.name }}
+    </div>
+    <div v-if="skills.length > 6" class="text-xs text-gray-400 italic">+{{ skills.length - 6 }} more</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { ManageSkillsData } from "./index";
+
+const props = defineProps<{ result: ToolResultComplete<ManageSkillsData> }>();
+const skills = computed(() => props.result.data?.skills ?? []);
+</script>