mulmoclaude 0.1.0

package/src/components/SettingsMcpTab.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="space-y-3">
+    <p class="text-xs text-gray-600 leading-relaxed">
+      Add external MCP servers. HTTP servers work in every mode. Stdio servers use the sandbox image's
+      <code class="bg-gray-100 px-1 rounded">npx</code> / <code class="bg-gray-100 px-1 rounded">node</code> /
+      <code class="bg-gray-100 px-1 rounded">tsx</code>; paths must live under the workspace when Docker is enabled.
+    </p>
+
+    <div v-if="servers.length === 0" class="text-xs text-gray-500 italic" data-testid="mcp-empty">No MCP servers configured yet.</div>
+
+    <ul v-else class="space-y-2" data-testid="mcp-server-list">
+      <li
+        v-for="(entry, idx) in servers"
+        :key="entry.id + ':' + idx"
+        class="border border-gray-200 rounded p-3 space-y-2"
+        :data-testid="'mcp-server-' + entry.id"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-semibold text-gray-800">{{ entry.id }}</span>
+            <span
+              class="text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5"
+              :class="entry.spec.type === 'http' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'"
+              >{{ entry.spec.type }}</span
+            >
+            <label class="flex items-center gap-1 text-xs text-gray-600 ml-2">
+              <input type="checkbox" :checked="entry.spec.enabled !== false" :data-testid="'mcp-enabled-' + entry.id" @change="onToggleEnabled(idx, $event)" />
+              enabled
+            </label>
+          </div>
+          <button class="text-xs text-red-600 hover:text-red-800" :data-testid="'mcp-remove-' + entry.id" @click="emit('remove', idx)">Remove</button>
+        </div>
+        <div v-if="entry.spec.type === 'http'" class="text-xs space-y-1">
+          <div>
+            <span class="text-gray-500">URL:</span>
+            <code class="ml-1">{{ entry.spec.url }}</code>
+          </div>
+          <div v-if="dockerMode && wouldRewriteLocalhost((entry.spec as HttpSpec).url)" class="text-amber-700">
+            In Docker mode <code>localhost</code> is rewritten to <code>host.docker.internal</code>.
+          </div>
+        </div>
+        <div v-else-if="entry.spec.type === 'stdio'" class="text-xs space-y-1">
+          <div>
+            <span class="text-gray-500">Command:</span>
+            <code class="ml-1">{{ entry.spec.command }}</code>
+            <code v-if="(entry.spec as StdioSpec).args?.length" class="ml-1">
+              {{ ((entry.spec as StdioSpec).args ?? []).join(" ") }}
+            </code>
+          </div>
+          <div
+            v-if="dockerMode && stdioHasNonWorkspaceArg((entry.spec as StdioSpec).args)"
+            class="text-red-600"
+            :data-testid="'mcp-docker-warning-' + entry.id"
+          >
+            ⚠ Contains paths outside the workspace — will not resolve inside Docker.
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <button v-if="!adding" class="text-xs px-2 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50" data-testid="mcp-add-btn" @click="startAdd">
+      + Add MCP Server
+    </button>
+
+    <div v-else class="border border-blue-300 rounded p-3 space-y-2" data-testid="mcp-add-form">
+      <label class="block text-xs font-semibold text-gray-700">
+        Name
+        <input
+          v-model="draft.id"
+          type="text"
+          placeholder="my-server"
+          class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          data-testid="mcp-draft-id"
+          @keydown.stop
+        />
+      </label>
+      <div class="flex gap-3 text-xs">
+        <label class="flex items-center gap-1">
+          <input v-model="draft.type" type="radio" value="http" data-testid="mcp-draft-type-http" />
+          HTTP
+        </label>
+        <label class="flex items-center gap-1">
+          <input v-model="draft.type" type="radio" value="stdio" data-testid="mcp-draft-type-stdio" />
+          Stdio (command)
+        </label>
+      </div>
+      <div v-if="draft.type === 'http'" class="space-y-2">
+        <label class="block text-xs font-semibold text-gray-700">
+          URL
+          <input
+            v-model="draft.url"
+            type="text"
+            placeholder="https://example.com/mcp"
+            class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            data-testid="mcp-draft-url"
+            @keydown.stop
+          />
+        </label>
+      </div>
+      <div v-else class="space-y-2">
+        <label class="block text-xs font-semibold text-gray-700">
+          Command
+          <select
+            v-model="draft.command"
+            class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            data-testid="mcp-draft-command"
+          >
+            <option value="npx">npx</option>
+            <option value="node">node</option>
+            <option value="tsx">tsx</option>
+          </select>
+        </label>
+        <label class="block text-xs font-semibold text-gray-700">
+          Arguments (one per line)
+          <textarea
+            v-model="draft.argsText"
+            class="mt-1 w-full h-20 px-2 py-1 text-sm font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            placeholder="-y&#10;@modelcontextprotocol/server-filesystem&#10;/workspace/path"
+            data-testid="mcp-draft-args"
+            @keydown.stop
+          ></textarea>
+        </label>
+      </div>
+      <div v-if="draftError" class="text-xs text-red-600" data-testid="mcp-draft-error">
+        {{ draftError }}
+      </div>
+      <div class="flex justify-end gap-2">
+        <button class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50" data-testid="mcp-draft-cancel" @click="cancelAdd">
+          Cancel
+        </button>
+        <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="mcp-draft-add" @click="commitAdd">Add</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// UI-local representation of a configured server. Matches
+// server/config.ts#McpServerEntry. Re-declared here to avoid a
+// cross-module type import from the server package.
+export interface HttpSpec {
+  type: "http";
+  url: string;
+  headers?: Record<string, string>;
+  enabled?: boolean;
+}
+export interface StdioSpec {
+  type: "stdio";
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+  enabled?: boolean;
+}
+export type ServerSpec = HttpSpec | StdioSpec;
+export interface McpServerEntry {
+  id: string;
+  spec: ServerSpec;
+}
+
+interface Props {
+  servers: McpServerEntry[];
+  dockerMode: boolean;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  add: [entry: McpServerEntry];
+  update: [index: number, entry: McpServerEntry];
+  remove: [index: number];
+}>();
+
+interface DraftState {
+  id: string;
+  type: "http" | "stdio";
+  url: string;
+  command: string;
+  argsText: string;
+}
+
+const adding = ref(false);
+const draft = ref<DraftState>(emptyDraft());
+const draftError = ref("");
+
+function emptyDraft(): DraftState {
+  return { id: "", type: "http", url: "", command: "npx", argsText: "" };
+}
+
+function startAdd(): void {
+  draft.value = emptyDraft();
+  draftError.value = "";
+  adding.value = true;
+}
+
+function cancelAdd(): void {
+  adding.value = false;
+  draftError.value = "";
+}
+
+const ID_RE = /^[a-z][a-z0-9_-]{0,63}$/;
+
+// Derive an id from user input when the Name field is left blank.
+// Covers the common shapes: a scoped npm package in stdio args
+// (`@modelcontextprotocol/server-everything` → `everything`), or a
+// hostname for an HTTP url (`mcp.deepwiki.com` → `deepwiki`).
+function suggestIdFromDraft(state: DraftState): string {
+  if (state.type === "http") {
+    return suggestIdFromUrl(state.url.trim());
+  }
+  const args = state.argsText
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+  return suggestIdFromStdioArgs(args);
+}
+
+function suggestIdFromUrl(rawUrl: string): string {
+  try {
+    const host = new URL(rawUrl).hostname;
+    const parts = host.split(".").filter((part) => part.length > 0);
+    // Drop generic subdomain / TLD noise so `mcp.deepwiki.com` → `deepwiki`.
+    const filtered = parts.filter(
+      (part, i) => !(i === 0 && (part === "mcp" || part === "www" || part === "api")) && !(i === parts.length - 1 && /^[a-z]{2,4}$/.test(part)),
+    );
+    const candidate = filtered[0] ?? parts[0] ?? "";
+    return slugifyToId(candidate);
+  } catch {
+    return "";
+  }
+}
+
+function suggestIdFromStdioArgs(args: string[]): string {
+  // First arg that isn't a flag is typically the package/script name.
+  const payload = args.find((arg) => !arg.startsWith("-"));
+  if (!payload) return "";
+  // For scoped packages / paths, keep only the last segment.
+  const lastSegment = payload.split("/").pop() ?? payload;
+  // Strip common MCP naming prefixes so `server-everything` → `everything`.
+  const stripped = lastSegment.replace(/^(mcp-server-|server-|mcp-)/, "").replace(/\.(?:[jt]s|mjs|cjs)$/, "");
+  return slugifyToId(stripped);
+}
+
+function slugifyToId(raw: string): string {
+  let slug = raw.toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+  // Strip leading/trailing hyphens with explicit while-loops so the
+  // regex engine can't be lured into catastrophic backtracking on a
+  // crafted input.
+  while (slug.startsWith("-")) slug = slug.slice(1);
+  while (slug.endsWith("-")) slug = slug.slice(0, -1);
+  slug = slug.slice(0, 64);
+  // Must start with a lowercase letter.
+  if (!/^[a-z]/.test(slug)) return "";
+  return slug;
+}
+
+function ensureUniqueId(base: string): string {
+  if (!base) return "";
+  if (!props.servers.some((server) => server.id === base)) return base;
+  for (let i = 2; i < 1000; i += 1) {
+    const candidate = `${base}-${i}`;
+    if (!props.servers.some((server) => server.id === candidate)) return candidate;
+  }
+  return "";
+}
+
+function commitAdd(): void {
+  let id = draft.value.id.trim();
+  if (!id) {
+    const suggested = ensureUniqueId(suggestIdFromDraft(draft.value));
+    if (!suggested) {
+      draftError.value = "Please provide a Name, or enter a URL / args we can derive one from.";
+      return;
+    }
+    id = suggested;
+  }
+  if (!ID_RE.test(id)) {
+    draftError.value = "Name must start with a lowercase letter and contain only [a-z0-9_-].";
+    return;
+  }
+  if (props.servers.some((server) => server.id === id)) {
+    draftError.value = `Server id "${id}" already exists.`;
+    return;
+  }
+  let spec: ServerSpec;
+  if (draft.value.type === "http") {
+    const url = draft.value.url.trim();
+    if (!/^https?:\/\//.test(url)) {
+      draftError.value = "HTTP URL must start with http:// or https://";
+      return;
+    }
+    spec = { type: "http", url, enabled: true };
+  } else {
+    const args = draft.value.argsText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0);
+    spec = {
+      type: "stdio",
+      command: draft.value.command,
+      args,
+      enabled: true,
+    };
+  }
+  emit("add", { id, spec });
+  adding.value = false;
+  draftError.value = "";
+}
+
+// Called by the parent right before Save. If the draft form is open
+// and has any input, commit it (auto-generating a Name if blank). If
+// the draft is empty, silently close the form. Returns false only
+// when validation fails so the parent can surface an error and abort
+// the save — this is what spares users the pre-PR footgun of clicking
+// Save without first clicking the inner Add button.
+function flushDraft(): boolean {
+  if (!adding.value) return true;
+  const hasInput =
+    draft.value.id.trim().length > 0 ||
+    (draft.value.type === "http" && draft.value.url.trim().length > 0) ||
+    (draft.value.type === "stdio" && draft.value.argsText.trim().length > 0);
+  if (!hasInput) {
+    cancelAdd();
+    return true;
+  }
+  commitAdd();
+  return !adding.value;
+}
+
+defineExpose({ flushDraft });
+
+function onToggleEnabled(index: number, event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const entry = props.servers[index];
+  if (!entry) return;
+  emit("update", index, {
+    ...entry,
+    spec: { ...entry.spec, enabled: target.checked },
+  });
+}
+
+function wouldRewriteLocalhost(url: string): boolean {
+  return /^https?:\/\/(localhost|127\.0\.0\.1)(?=[:/]|$)/.test(url);
+}
+
+function stdioHasNonWorkspaceArg(args?: string[]): boolean {
+  if (!args) return false;
+  return args.some((arg) => /^\//.test(arg) && arg !== "/workspace" && !arg.startsWith("/workspace/"));
+}
+</script>

package/src/components/SettingsModal.vue

@@ -0,0 +1,275 @@
+<template>
+  <div v-if="open" class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center" data-testid="settings-modal-backdrop" @click="close">
+    <div
+      class="bg-white rounded-lg shadow-xl w-[36rem] max-h-[85vh] flex flex-col"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="settings-modal-title"
+      data-testid="settings-modal"
+      @click.stop
+    >
+      <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
+        <h2 id="settings-modal-title" class="text-base font-semibold text-gray-900">Settings</h2>
+        <button class="text-gray-400 hover:text-gray-700" title="Close" data-testid="settings-close-btn" @click="close">
+          <span class="material-icons">close</span>
+        </button>
+      </div>
+
+      <div class="flex border-b border-gray-200 px-5">
+        <button
+          class="px-3 py-2 text-sm border-b-2"
+          :class="activeTab === 'tools' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-800'"
+          data-testid="settings-tab-tools"
+          @click="activeTab = 'tools'"
+        >
+          Allowed Tools
+        </button>
+        <button
+          class="px-3 py-2 text-sm border-b-2"
+          :class="activeTab === 'mcp' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-800'"
+          data-testid="settings-tab-mcp"
+          @click="activeTab = 'mcp'"
+        >
+          MCP Servers
+        </button>
+        <button
+          class="px-3 py-2 text-sm border-b-2"
+          :class="activeTab === 'dirs' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-800'"
+          data-testid="settings-tab-dirs"
+          @click="activeTab = 'dirs'"
+        >
+          Directories
+        </button>
+        <button
+          class="px-3 py-2 text-sm border-b-2"
+          :class="activeTab === 'refs' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-800'"
+          data-testid="settings-tab-refs"
+          @click="activeTab = 'refs'"
+        >
+          Reference Dirs
+        </button>
+      </div>
+
+      <div class="px-5 py-4 overflow-y-auto flex-1 space-y-4 text-gray-900">
+        <div v-if="loadError" class="text-sm text-red-700 bg-red-50 border border-red-200 rounded px-3 py-2" role="alert" data-testid="settings-load-error">
+          ⚠ {{ loadError }}
+        </div>
+
+        <div v-if="activeTab === 'tools'" class="space-y-3">
+          <p class="text-xs text-gray-600 leading-relaxed">
+            Extra tool names to pass to Claude via
+            <code class="bg-gray-100 px-1 rounded">--allowedTools</code>. One per line. Useful for built-in Claude Code MCP servers like Gmail / Google Calendar
+            after you have authenticated via <code class="bg-gray-100 px-1 rounded">claude mcp</code>.
+          </p>
+          <label class="block">
+            <span class="text-xs font-semibold text-gray-700">Tool names</span>
+            <textarea
+              v-model="toolsText"
+              class="mt-1 w-full h-48 px-2 py-1.5 text-sm font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+              placeholder="mcp__claude_ai_Gmail&#10;mcp__claude_ai_Google_Calendar"
+              data-testid="settings-tools-textarea"
+              @keydown.stop
+            ></textarea>
+          </label>
+          <p v-if="invalidToolNames.length > 0" class="text-xs text-amber-700">
+            These look non-standard (expected prefix
+            <code class="bg-gray-100 px-1 rounded">mcp__</code>):
+            {{ invalidToolNames.join(", ") }}
+          </p>
+        </div>
+
+        <div v-else-if="activeTab === 'mcp'" class="space-y-3">
+          <div
+            v-if="mcpToolsError"
+            class="text-xs text-amber-800 bg-amber-50 border border-amber-200 rounded px-2 py-1"
+            role="alert"
+            data-testid="mcp-tools-error"
+          >
+            ⚠ Could not fetch MCP tool status: {{ mcpToolsError }}. Showing all tools regardless of enablement.
+          </div>
+          <SettingsMcpTab
+            ref="mcpTabRef"
+            :servers="mcpServers"
+            :docker-mode="dockerMode"
+            @add="addMcpServer"
+            @update="updateMcpServer"
+            @remove="removeMcpServer"
+          />
+        </div>
+
+        <SettingsWorkspaceDirsTab v-else-if="activeTab === 'dirs'" />
+
+        <SettingsReferenceDirsTab v-else-if="activeTab === 'refs'" />
+      </div>
+
+      <div class="px-5 py-3 border-t border-gray-200 flex items-center justify-between gap-3">
+        <span v-if="statusMessage" class="text-xs" :class="statusError ? 'text-red-600' : 'text-green-600'" data-testid="settings-status">
+          {{ statusMessage }}
+        </span>
+        <span v-else class="text-xs text-gray-500"> Changes apply on the next message. No restart needed. </span>
+        <div class="flex gap-2">
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" data-testid="settings-cancel-btn" @click="close">
+            Cancel
+          </button>
+          <button
+            class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
+            :disabled="saving || loading || !!loadError"
+            :title="loadError ? 'Cannot save until settings load successfully' : undefined"
+            data-testid="settings-save-btn"
+            @click="save"
+          >
+            {{ saving ? "Saving…" : loading ? "Loading…" : "Save" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import SettingsMcpTab from "./SettingsMcpTab.vue";
+import SettingsWorkspaceDirsTab from "./SettingsWorkspaceDirsTab.vue";
+import SettingsReferenceDirsTab from "./SettingsReferenceDirsTab.vue";
+import type { McpServerEntry } from "./SettingsMcpTab.vue";
+import { apiGet, apiPut } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+interface Props {
+  open: boolean;
+  dockerMode?: boolean;
+  // Forwarded from useMcpTools — if non-null, the MCP tab shows a
+  // small warning strip so the user knows "all tools visible" is a
+  // fallback rather than an accurate listing.
+  mcpToolsError?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dockerMode: false,
+  mcpToolsError: null,
+});
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+  saved: [];
+}>();
+
+// Typed ref to the SettingsMcpTab so save() can flush a pending draft
+// before PUTing (eliminates the "user typed but forgot the inner Add
+// button" footgun). Null when the MCP tab isn't the active one.
+const mcpTabRef = ref<{ flushDraft: () => boolean } | null>(null);
+
+const activeTab = ref<"tools" | "mcp" | "dirs" | "refs">("tools");
+const toolsText = ref("");
+const mcpServers = ref<McpServerEntry[]>([]);
+const loadError = ref("");
+const statusMessage = ref("");
+const statusError = ref(false);
+const saving = ref(false);
+// `true` from the moment the modal opens until the first loadConfig()
+// call resolves. Prevents the Save button from submitting the initial
+// empty arrays before the real config arrives, and prevents stale
+// responses (from a previous open) from overwriting fresh input.
+const loading = ref(false);
+// Monotonically increasing token so an in-flight loadConfig() whose
+// modal has been reopened can notice it's stale and discard its result.
+let loadToken = 0;
+
+const parsedToolNames = computed(() =>
+  toolsText.value
+    .split("\n")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0),
+);
+
+const invalidToolNames = computed(() => parsedToolNames.value.filter((n) => !n.startsWith("mcp__") && !isBuiltIn(n)));
+
+function isBuiltIn(name: string): boolean {
+  return ["Bash", "Read", "Write", "Edit", "Glob", "Grep", "WebFetch", "WebSearch"].includes(name);
+}
+
+async function loadConfig(): Promise<void> {
+  const token = ++loadToken;
+  loading.value = true;
+  loadError.value = "";
+  statusMessage.value = "";
+  const response = await apiGet<{
+    settings: { extraAllowedTools: string[] };
+    mcp?: { servers: McpServerEntry[] };
+  }>(API_ROUTES.config.base);
+  // A newer open() has already started another load — drop this one.
+  if (token !== loadToken) return;
+  if (!response.ok) {
+    loadError.value = response.status === 0 ? response.error || "Network error" : `Failed to load settings (HTTP ${response.status})`;
+  } else {
+    toolsText.value = response.data.settings.extraAllowedTools.join("\n");
+    mcpServers.value = response.data.mcp?.servers ?? [];
+  }
+  if (token === loadToken) loading.value = false;
+}
+
+async function save(): Promise<void> {
+  // Extra safety: the button is already disabled while loading, but
+  // guard the function body too so any programmatic caller can't
+  // submit a half-loaded form.
+  if (loading.value) return;
+  // Auto-commit any half-entered draft on the MCP tab. If the draft
+  // is invalid the tab sets its own inline error — abort the save so
+  // the user can fix it.
+  if (mcpTabRef.value && !mcpTabRef.value.flushDraft()) {
+    statusError.value = true;
+    statusMessage.value = "Finish or cancel the pending MCP server entry first.";
+    return;
+  }
+  saving.value = true;
+  statusMessage.value = "";
+  statusError.value = false;
+  // Single atomic endpoint — avoids the partial-save state where
+  // extraAllowedTools is persisted but MCP config write fails.
+  const response = await apiPut<unknown>(API_ROUTES.config.base, {
+    settings: { extraAllowedTools: parsedToolNames.value },
+    mcp: { servers: mcpServers.value },
+  });
+  if (!response.ok) {
+    statusError.value = true;
+    statusMessage.value = response.error || "Save failed";
+  } else {
+    emit("saved");
+    // Close on success. Changes take effect on the next message, so
+    // the user has no reason to stay in the modal after a good save.
+    close();
+  }
+  saving.value = false;
+}
+
+function close(): void {
+  emit("update:open", false);
+}
+
+function addMcpServer(entry: McpServerEntry): void {
+  mcpServers.value = [...mcpServers.value, entry];
+}
+
+function updateMcpServer(index: number, entry: McpServerEntry): void {
+  const next = [...mcpServers.value];
+  next[index] = entry;
+  mcpServers.value = next;
+}
+
+function removeMcpServer(index: number): void {
+  const next = [...mcpServers.value];
+  next.splice(index, 1);
+  mcpServers.value = next;
+}
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      loadConfig();
+      statusMessage.value = "";
+      statusError.value = false;
+    }
+  },
+  { immediate: true },
+);
+</script>