mulmoclaude 0.5.2 → 0.6.0

package/src/components/PluginScopedRoot.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// Scope-provider wrapper for runtime plugin Vue components (#1110).
+// Builds a per-plugin BrowserPluginRuntime and `provide`s it under
+// PLUGIN_RUNTIME_KEY, so plugin descendants can pull it via
+// `useRuntime()` from `gui-chat-protocol/vue`.
+//
+// One instance per mounted plugin component subtree. Mount this in
+// the host's runtime plugin loader (the place that dynamically
+// imports the plugin's `dist/vue.js` and instantiates its
+// `viewComponent` / `previewComponent`).
+//
+// Doubles as the per-plugin error boundary: a Vue `errorCaptured`
+// hook catches uncaught errors thrown during the plugin subtree's
+// render / setup / lifecycle and renders a fallback panel instead
+// of letting the exception break out and unmount the whole chat
+// canvas. One bad plugin should fail in place, not take the host
+// with it. The captured error is logged to the console; the user
+// sees a "crashed" panel with optional stack details and a Retry
+// button that re-mounts the plugin.
+
+import { onErrorCaptured, provide } from "vue";
+import { useI18n } from "vue-i18n";
+import { PLUGIN_RUNTIME_KEY } from "gui-chat-protocol/vue";
+import { makeBrowserPluginRuntime } from "../utils/plugin/runtime";
+import { usePluginErrorBoundary } from "../composables/usePluginErrorBoundary";
+
+interface Props {
+  /** npm package name of the plugin whose subtree we're scoping. */
+  pkgName: string;
+  /** Optional URL map exposed to the plugin via `runtime.endpoints`.
+   *  Multi-URL built-in plugins (todos, scheduler, mulmoScript, …)
+   *  pass their endpoint group ({ method, url } records since #1141);
+   *  runtime-loaded plugins (the common single-dispatch shape) omit
+   *  this AND host-shared scopes (`files`, `imageStore`, `mcpTools`)
+   *  pass plain string URLs. Treated opaquely here — each consumer
+   *  asserts the shape it expects via `pluginEndpoints<E>(scope)`.
+   *  Contract: `gui-chat-protocol@>=0.3.1`. */
+  endpoints?: Readonly<Record<string, unknown>>;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+// Construct once — `pkgName` and `endpoints` are fixed for the
+// lifetime of a mounted plugin. If the host needs to rotate the
+// scope (rare), it should remount the entire wrapper rather than
+// mutate either prop.
+const runtime = makeBrowserPluginRuntime({ pkgName: props.pkgName, endpoints: props.endpoints });
+provide(PLUGIN_RUNTIME_KEY, runtime);
+
+// ── Error boundary state ────────────────────────────────────────
+//
+// State + reset logic live in `usePluginErrorBoundary` (testable
+// without a DOM). The Vue lifecycle hook `onErrorCaptured` itself
+// must be wired here — the composable can't call `setup()`-only
+// hooks. Returning `false` from the hook tells Vue we've handled
+// the error; without it, the exception propagates to the parent
+// and ultimately to the global error handler.
+const { error, showDetails, mountKey, errorDetails, captureError, retry } = usePluginErrorBoundary(props.pkgName);
+onErrorCaptured((err) => {
+  captureError(err);
+  return false;
+});
+</script>
+
+<template>
+  <div v-if="error" class="rounded border border-red-200 bg-red-50 p-3 text-sm" data-testid="plugin-error-boundary" role="alert">
+    <div class="flex items-center gap-2 mb-1">
+      <span class="material-icons text-red-500" aria-hidden="true">error_outline</span>
+      <span class="font-medium text-red-800">{{ t("pluginErrorBoundary.title", { pkg: pkgName }) }}</span>
+    </div>
+    <p class="text-red-700 mb-2">{{ t("pluginErrorBoundary.subtitle") }}</p>
+    <div class="flex items-center gap-3">
+      <button type="button" class="text-xs text-red-600 hover:underline" data-testid="plugin-error-toggle-details" @click="showDetails = !showDetails">
+        {{ showDetails ? t("pluginErrorBoundary.hideDetails") : t("pluginErrorBoundary.showDetails") }}
+      </button>
+      <button type="button" class="text-xs text-red-600 hover:underline" data-testid="plugin-error-retry" @click="retry">
+        {{ t("pluginErrorBoundary.retry") }}
+      </button>
+    </div>
+    <pre v-if="showDetails" class="mt-2 text-xs text-red-900 bg-red-100 p-2 rounded overflow-auto max-h-40 whitespace-pre-wrap break-words">{{
+      errorDetails
+    }}</pre>
+  </div>
+  <slot v-else :key="mountKey" />
+</template>

package/src/components/RoleSelector.vue

@@ -4,6 +4,7 @@
       ref="button"
       class="flex-1 h-8 flex items-center gap-1 bg-white border border-gray-300 rounded px-2.5 text-sm text-gray-900 hover:bg-gray-50 text-left"
       data-testid="role-selector-btn"
+      :data-role="currentRoleId"
       @click="open = !open"
     >
       <span class="material-icons text-base text-gray-500">{{ roleIcon(roles, currentRoleId) }}</span>
@@ -12,7 +13,7 @@
     </button>
     <div v-if="open" ref="dropdown" class="absolute left-0 right-0 top-full z-50 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
       <button
-        v-for="role in roles"
+        v-for="role in visibleRoles"
         :key="role.id"
         :data-testid="`role-option-${role.id}`"
         class="w-full flex items-center gap-1.5 px-3 py-1 text-sm text-gray-900 hover:bg-gray-50 text-left"
@@ -48,6 +49,16 @@ const dropdown = ref<HTMLDivElement | null>(null);
 
 const currentRoleName = computed(() => roleName(props.roles, props.currentRoleId));
 
+// Hide `isDebugRole` entries from the dropdown unless dev mode is
+// on. Set `VITE_DEV_MODE=1` in `.env` to surface them. Existing
+// chat sessions tied to a debug role still render normally elsewhere
+// — this filter only gates the entry point for new sessions.
+const visibleRoles = computed(() => {
+  const devMode = import.meta.env.VITE_DEV_MODE === "1";
+  if (devMode) return props.roles;
+  return props.roles.filter((role) => !role.isDebugRole);
+});
+
 function selectRole(roleId: string): void {
   emit("update:currentRoleId", roleId);
   open.value = false;

package/src/components/RolesView.vue

@@ -0,0 +1,562 @@
+<template>
+  <div class="h-full bg-white flex flex-col">
+    <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-100">
+      <h2 class="text-lg font-semibold text-gray-800">{{ t("pluginManageRoles.heading") }}</h2>
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-gray-500">{{ t("pluginManageRoles.roleCount", customRoles.length, { named: { count: customRoles.length } }) }}</span>
+        <button
+          v-if="!creating"
+          data-testid="role-add-btn"
+          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          @click="startCreate"
+        >
+          {{ t("pluginManageRoles.addButton") }}
+        </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">{{ t("pluginManageRoles.createPanel") }}</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">{{ t("pluginManageRoles.fieldId") }}</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">{{ t("pluginManageRoles.fieldName") }}</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">
+              {{ t("pluginManageRoles.fieldIcon") }}
+              <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">{{
+                t("pluginManageRoles.helpLink")
+              }}</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">{{ t("pluginManageRoles.fieldPrompt") }}</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">{{ t("pluginManageRoles.fieldPlugins") }}</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 ? '' : t('pluginManageRoles.requiresEnv', { env: plugin.requiredEnv.join(', ') })"
+            >
+              <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">{{ t("pluginManageRoles.missingEnv", { env: plugin.requiredEnv.join(", ") }) }}</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Starter queries -->
+        <div>
+          <label class="block text-xs font-medium text-gray-600 mb-1">
+            {{ t("pluginManageRoles.fieldStarterQueries") }}
+            <span class="text-gray-400 font-normal">{{ t("pluginManageRoles.onePerLine") }}</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 ? t("pluginManageRoles.creating") : t("pluginManageRoles.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">
+            {{ t("common.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">
+        {{ t("pluginManageRoles.emptyHint") }}
+      </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">{{ t("pluginManageRoles.idFormatted", { id: 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 ? t('pluginManageRoles.collapse') : t('pluginManageRoles.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">{{ t("pluginManageRoles.fieldId") }}</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">{{ t("pluginManageRoles.fieldName") }}</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">
+                  {{ t("pluginManageRoles.fieldIcon") }}
+                  <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">{{
+                    t("pluginManageRoles.helpLink")
+                  }}</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">{{ t("pluginManageRoles.fieldPrompt") }}</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">{{ t("pluginManageRoles.fieldPlugins") }}</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 ? '' : t('pluginManageRoles.requiresEnv', { env: plugin.requiredEnv.join(', ') })"
+                >
+                  <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">{{
+                    t("pluginManageRoles.missingEnv", { env: plugin.requiredEnv.join(", ") })
+                  }}</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- Starter queries -->
+            <div>
+              <label class="block text-xs font-medium text-gray-600 mb-1">
+                {{ t("pluginManageRoles.fieldStarterQueries") }}
+                <span class="text-gray-400 font-normal">{{ t("pluginManageRoles.onePerLine") }}</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 ? t("pluginManageRoles.updating") : t("pluginManageRoles.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">
+                  {{ t("common.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)"
+              >
+                {{ t("pluginManageRoles.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 { useI18n } from "vue-i18n";
+import { useFreshPluginData } from "../composables/useFreshPluginData";
+import { useAppApi } from "../composables/useAppApi";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import { getAllPluginNames } from "../tools/index";
+import { apiGet, apiPost } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+// Inlined from the former `src/plugins/manageRoles/index.ts`
+// (deleted alongside the manageRoles MCP tool — #949). RolesView
+// is the only consumer, so co-locating the types here avoids a
+// dangling single-purpose module.
+export interface CustomRole {
+  id: string;
+  name: string;
+  icon: string;
+  prompt: string;
+  availablePlugins: string[];
+  queries?: string[];
+}
+
+export interface ManageRolesData {
+  customRoles: CustomRole[];
+}
+
+const { t } = useI18n();
+
+interface PluginEntry {
+  name: string;
+  enabled: boolean;
+  requiredEnv: string[];
+}
+
+// Plugins the user can assign — exclude internal/auto-managed ones
+const EXCLUDED = new Set(["text-response"]);
+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],
+    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 || t("pluginManageRoles.errNetworkError")
+          : result.error || t("pluginManageRoles.errServerError", { status: 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 t("pluginManageRoles.errIdRequired");
+  if (!/^[a-zA-Z0-9_-]+$/.test(trimmedId)) {
+    return t("pluginManageRoles.errIdInvalid");
+  }
+  if (!trimmedName) return t("pluginManageRoles.errNameRequired");
+  if (customRoles.value.some((existing) => existing.id === trimmedId && existing.id !== excludeId)) {
+    return t("pluginManageRoles.errIdDuplicate", { id: trimmedId });
+  }
+  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 ?? t("pluginManageRoles.errCreateFailed");
+  }
+  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 ?? t("pluginManageRoles.errSaveFailed");
+  }
+  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 ?? t("pluginManageRoles.errDeleteFailed");
+  }
+  saving.value = false;
+}
+</script>