mulmoclaude 0.1.2 → 0.4.0

package/src/plugins/manageSource/View.vue

@@ -1,9 +1,9 @@
 <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 gap-2">
-      <span class="text-sm font-medium text-gray-700 truncate"> Information sources </span>
+      <span class="text-sm font-medium text-gray-700 truncate"> {{ t("pluginManageSource.heading") }} </span>
       <div class="flex items-center gap-2 shrink-0">
-        <span class="text-xs text-gray-500"> {{ sources.length }} source{{ sources.length === 1 ? "" : "s" }} </span>
+        <span class="text-xs text-gray-500"> {{ t("pluginManageSource.sourceCount", sources.length, { named: { count: sources.length } }) }} </span>
         <button
           class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-50"
           :disabled="adding || busy === 'rebuild'"
@@ -11,7 +11,7 @@
           @click="startAdd"
         >
           <span class="material-icons text-sm align-middle">add</span>
-          Add
+          {{ t("pluginManageSource.addButton") }}
         </button>
         <button
           class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-50"
@@ -20,7 +20,7 @@
           @click="rebuild"
         >
           <span class="material-icons text-sm align-middle">refresh</span>
-          {{ busy === "rebuild" ? "Rebuilding…" : "Rebuild now" }}
+          {{ busy === "rebuild" ? t("pluginManageSource.rebuilding") : t("pluginManageSource.rebuildNow") }}
         </button>
       </div>
     </div>
@@ -28,12 +28,12 @@
     <div v-if="adding" class="px-4 py-3 border-b border-blue-200 bg-blue-50/50 shrink-0 space-y-2" data-testid="sources-add-form">
       <div class="flex flex-wrap items-center gap-2">
         <label class="text-xs text-gray-700">
-          Type
+          {{ t("pluginManageSource.typeField") }}
           <select v-model="draft.kind" class="ml-1 text-xs border border-gray-300 rounded px-1 py-0.5" data-testid="sources-draft-kind" @change="onKindChange">
-            <option value="rss">RSS</option>
-            <option value="github-releases">GitHub releases</option>
-            <option value="github-issues">GitHub issues</option>
-            <option value="arxiv">arXiv</option>
+            <option value="rss">{{ t("pluginManageSource.kindRss") }}</option>
+            <option value="github-releases">{{ t("pluginManageSource.kindGithubReleases") }}</option>
+            <option value="github-issues">{{ t("pluginManageSource.kindGithubIssues") }}</option>
+            <option value="arxiv">{{ t("pluginManageSource.kindArxiv") }}</option>
           </select>
         </label>
         <input
@@ -46,7 +46,7 @@
         <input
           v-model="draft.title"
           class="w-40 text-xs border border-gray-300 rounded px-2 py-1"
-          placeholder="Title (optional)"
+          :placeholder="t('pluginManageSource.titlePlaceholder')"
           data-testid="sources-draft-title"
           @keydown.enter="commitAdd"
         />
@@ -57,7 +57,7 @@
         </span>
         <div class="flex gap-2">
           <button class="px-2 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50" data-testid="sources-draft-cancel" @click="cancelAdd">
-            Cancel
+            {{ t("common.cancel") }}
           </button>
           <button
             class="px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
@@ -65,7 +65,7 @@
             data-testid="sources-draft-add"
             @click="commitAdd"
           >
-            {{ busy === "add" ? "Adding…" : "Add + Rebuild" }}
+            {{ busy === "add" ? t("pluginManageSource.addingLabel") : t("pluginManageSource.addAndRebuild") }}
           </button>
         </div>
       </div>
@@ -85,10 +85,11 @@
 
     <div class="flex-1 overflow-y-auto">
       <div v-if="sources.length === 0" class="flex flex-col items-center justify-center h-full p-6 gap-4" data-testid="sources-empty">
-        <p class="text-sm text-gray-500 italic text-center max-w-md">
-          No sources registered yet. Pick a starter pack below, click
-          <strong>+ Add</strong> above, or ask Claude to register one.
-        </p>
+        <i18n-t keypath="pluginManageSource.emptyPickPack" tag="p" class="text-sm text-gray-500 italic text-center max-w-md">
+          <template #addBold>
+            <strong>{{ t("pluginManageSource.emptyAddStrong") }}</strong>
+          </template>
+        </i18n-t>
         <div class="w-full max-w-md space-y-2" data-testid="sources-presets">
           <button
             v-for="preset in PRESETS"
@@ -102,12 +103,14 @@
               <span class="text-sm font-medium text-gray-800">
                 {{ preset.label }}
               </span>
-              <span class="text-[11px] text-gray-500 shrink-0"> {{ preset.entries.length }} source{{ preset.entries.length === 1 ? "" : "s" }} </span>
+              <span class="text-[11px] text-gray-500 shrink-0">
+                {{ t("pluginManageSource.sourceCount", preset.entries.length, { named: { count: preset.entries.length } }) }}
+              </span>
             </div>
             <div class="text-xs text-gray-500 mt-1">
               {{ preset.description }}
             </div>
-            <div v-if="busy === 'preset-' + preset.id" class="text-xs text-blue-600 mt-1 italic">Registering + fetching…</div>
+            <div v-if="busy === 'preset-' + preset.id" class="text-xs text-blue-600 mt-1 italic">{{ t("pluginManageSource.registering") }}</div>
           </button>
         </div>
       </div>
@@ -151,7 +154,7 @@
             :data-testid="`source-remove-${source.slug}`"
             @click="remove(source.slug)"
           >
-            {{ busy === source.slug ? "Removing…" : "Remove" }}
+            {{ busy === source.slug ? t("pluginManageSource.removingLabel") : t("pluginManageSource.removeLabel") }}
           </button>
         </li>
       </ul>
@@ -162,14 +165,14 @@
       <div v-if="sources.length > 0 && (briefLoading || briefHtml || briefError)" class="p-4" data-testid="sources-brief">
         <div class="flex items-baseline justify-between mb-2">
           <h3 class="text-sm font-semibold text-gray-800">
-            Today's brief
-            <span v-if="briefDate" class="text-xs text-gray-400 font-normal"> ({{ briefDate }}) </span>
+            {{ t("pluginManageSource.todaysBrief") }}
+            <span v-if="briefDate" class="text-xs text-gray-400 font-normal"> {{ t("pluginManageSource.briefDateLabel", { date: briefDate }) }} </span>
           </h3>
           <button v-if="briefFilePath" class="text-[11px] text-gray-500 hover:text-gray-700" :title="briefFilePath">
             {{ briefFilePath }}
           </button>
         </div>
-        <div v-if="briefLoading" class="text-xs text-gray-500 italic">Loading today's brief…</div>
+        <div v-if="briefLoading" class="text-xs text-gray-500 italic">{{ t("pluginManageSource.todaysBriefLoading") }}</div>
         <div v-else-if="briefError" class="text-xs text-gray-500 italic" data-testid="sources-brief-empty">
           {{ briefError }}
         </div>
@@ -179,15 +182,24 @@
     </div>
 
     <div v-if="lastRebuild" class="px-4 py-2 border-t border-gray-100 shrink-0 text-xs text-gray-600" data-testid="sources-rebuild-summary">
-      Last rebuild ({{ lastRebuild.isoDate }}): <strong>{{ lastRebuild.itemCount }}</strong> items from <strong>{{ lastRebuild.plannedCount }}</strong> sources,
-      <strong>{{ lastRebuild.duplicateCount }}</strong> duplicates dropped.
-      <span v-if="lastRebuild.archiveErrors.length > 0" class="text-red-600"> ({{ lastRebuild.archiveErrors.length }} archive errors) </span>
+      {{
+        t("pluginManageSource.lastRebuildSummary", {
+          date: lastRebuild.isoDate,
+          itemCount: lastRebuild.itemCount,
+          planned: lastRebuild.plannedCount,
+          duplicates: lastRebuild.duplicateCount,
+        })
+      }}
+      <span v-if="lastRebuild.archiveErrors.length > 0" class="text-red-600">
+        {{ t("pluginManageSource.archiveErrorsSuffix", { count: lastRebuild.archiveErrors.length }) }}
+      </span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
@@ -195,6 +207,8 @@ import type { ManageSourceData, RebuildSummary, Source } from "./index";
 import { apiGet, apiPost, apiDelete } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedResult: ToolResultComplete<ManageSourceData>;
 }>();
@@ -245,12 +259,12 @@ function onKindChange(): void {
 const primaryPlaceholder = computed(() => {
   switch (draft.value.kind) {
     case "rss":
-      return "https://news.ycombinator.com/rss";
+      return t("pluginManageSource.primaryRssPlaceholder");
     case "github-releases":
     case "github-issues":
-      return "https://github.com/owner/repo  (or owner/repo)";
+      return t("pluginManageSource.primaryGithubPlaceholder");
     case "arxiv":
-      return "cat:cs.CL";
+      return t("pluginManageSource.primaryArxivPlaceholder");
   }
   return "";
 });
@@ -258,13 +272,13 @@ const primaryPlaceholder = computed(() => {
 const primaryHint = computed(() => {
   switch (draft.value.kind) {
     case "rss":
-      return "Feed URL (RSS 2.0 / Atom / RDF)";
+      return t("pluginManageSource.primaryRssHint");
     case "github-releases":
-      return "GitHub repo URL or owner/repo — fetches releases";
+      return t("pluginManageSource.primaryGithubRelHint");
     case "github-issues":
-      return "GitHub repo URL or owner/repo — fetches issues";
+      return t("pluginManageSource.primaryGithubIssHint");
     case "arxiv":
-      return "arXiv search query (e.g. cat:cs.CL or au:hinton)";
+      return t("pluginManageSource.primaryArxivHint");
   }
   return "";
 });
@@ -351,11 +365,11 @@ async function commitAdd(): Promise<void> {
   busy.value = "add";
   const response = await apiPost<unknown>(API_ROUTES.sources.create, payload);
   if (!response.ok) {
-    draftError.value = response.error || "Failed to register source";
+    draftError.value = response.error || t("pluginManageSource.flashRegisterFailed");
     busy.value = null;
     return;
   }
-  flash(`Registered. Fetching new items…`);
+  flash(t("pluginManageSource.flashRegistered"));
   adding.value = false;
   await refreshList();
   // C: auto-rebuild so the user sees items without an extra click.
@@ -443,7 +457,7 @@ async function installPreset(preset: Preset): Promise<void> {
   const alreadyHave = new Set(sources.value.map((source) => source.slug));
   const toRegister = preset.entries.filter((entry) => !alreadyHave.has(entry.slug));
   if (toRegister.length === 0) {
-    flash(`All sources in "${preset.label}" are already registered.`);
+    flash(t("pluginManageSource.flashPresetAlreadyRegistered", { label: preset.label }));
     busy.value = null;
     return;
   }
@@ -465,9 +479,16 @@ async function installPreset(preset: Preset): Promise<void> {
     }
   }
   if (failures.length > 0) {
-    flash(`Registered ${toRegister.length - failures.length}/${toRegister.length}. Errors: ${failures.join("; ")}`, true);
+    flash(
+      t("pluginManageSource.flashPresetPartial", {
+        ok: toRegister.length - failures.length,
+        total: toRegister.length,
+        errors: failures.join("; "),
+      }),
+      true,
+    );
   } else {
-    flash(`Registered ${toRegister.length} source${toRegister.length === 1 ? "" : "s"} from "${preset.label}". Fetching…`);
+    flash(t("pluginManageSource.flashPresetRegistered", toRegister.length, { named: { count: toRegister.length, label: preset.label } }));
   }
   await refreshList();
   await rebuildInline();
@@ -479,12 +500,12 @@ async function installPreset(preset: Preset): Promise<void> {
 async function rebuildInline(): Promise<void> {
   const response = await apiPost<RebuildSummary>(API_ROUTES.sources.rebuild);
   if (!response.ok) {
-    flash(`Register succeeded but rebuild failed: ${response.error}`, true);
+    flash(t("pluginManageSource.flashRegisterSucceededRebuildFailed", { error: response.error }), true);
     return;
   }
   const summary = response.data;
   lastRebuild.value = summary;
-  flash(`Ready: ${summary.itemCount} items from ${summary.plannedCount} source${summary.plannedCount === 1 ? "" : "s"}.`);
+  flash(t("pluginManageSource.flashRebuildReady", summary.plannedCount, { named: { itemCount: summary.itemCount, planned: summary.plannedCount } }));
   await loadBrief(summary.isoDate);
 }
 
@@ -525,13 +546,13 @@ watch(
 function kindLabel(kind: Source["fetcherKind"]): string {
   switch (kind) {
     case "rss":
-      return "RSS";
+      return t("pluginManageSource.kindRss");
     case "github-releases":
-      return "GitHub rel";
+      return t("pluginManageSource.kindGithubRel");
     case "github-issues":
-      return "GitHub iss";
+      return t("pluginManageSource.kindGithubIss");
     case "arxiv":
-      return "arXiv";
+      return t("pluginManageSource.kindArxiv");
   }
 }
 
@@ -559,22 +580,22 @@ function flash(message: string, isError = false): void {
 async function refreshList(): Promise<void> {
   const response = await apiGet<{ sources: Source[] }>(API_ROUTES.sources.list);
   if (!response.ok) {
-    flash(`Failed to refresh sources: ${response.error}`, true);
+    flash(t("pluginManageSource.flashRefreshListFailed", { error: response.error }), true);
     return;
   }
   localSources.value = response.data.sources;
 }
 
 async function remove(slug: string): Promise<void> {
-  if (!confirm(`Remove source "${slug}"?`)) return;
+  if (!confirm(t("pluginManageSource.confirmRemove", { slug }))) return;
   busy.value = slug;
   const response = await apiDelete<unknown>(API_ROUTES.sources.remove.replace(":slug", encodeURIComponent(slug)));
   busy.value = null;
   if (!response.ok) {
-    flash(`Remove failed: ${response.error}`, true);
+    flash(t("pluginManageSource.flashRemoveFailed", { error: response.error }), true);
     return;
   }
-  flash(`Removed "${slug}".`);
+  flash(t("pluginManageSource.flashRemoved", { slug }));
   await refreshList();
 }
 
@@ -582,13 +603,13 @@ async function rebuild(): Promise<void> {
   busy.value = "rebuild";
   const response = await apiPost<RebuildSummary>(API_ROUTES.sources.rebuild);
   if (!response.ok) {
-    flash(`Rebuild failed: ${response.error}`, true);
+    flash(t("pluginManageSource.flashRebuildFailed", { error: response.error }), true);
     busy.value = null;
     return;
   }
   const summary = response.data;
   lastRebuild.value = summary;
-  flash(`Rebuild complete: ${summary.itemCount} items from ${summary.plannedCount} sources.`);
+  flash(t("pluginManageSource.flashRebuildComplete", { itemCount: summary.itemCount, planned: summary.plannedCount }));
   await Promise.all([refreshList(), loadBrief(summary.isoDate)]);
   busy.value = null;
 }
@@ -638,16 +659,16 @@ async function loadBrief(isoDate: string): Promise<void> {
   if (!response.ok) {
     if (response.status === 404) {
       briefMarkdown.value = "";
-      briefError.value = "No brief written for this date yet. Click Rebuild now.";
+      briefError.value = t("pluginManageSource.briefNone");
     } else {
-      briefError.value = response.error || "Failed to load brief";
+      briefError.value = response.error || t("pluginManageSource.briefLoadFailed");
     }
     briefLoading.value = false;
     return;
   }
   briefMarkdown.value = response.data.content ?? "";
   if (!briefMarkdown.value.trim()) {
-    briefError.value = "Today's brief is empty.";
+    briefError.value = t("pluginManageSource.briefEmpty");
   }
   briefLoading.value = false;
 }

package/src/plugins/markdown/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-3 bg-purple-100 rounded overflow-hidden">
+  <div class="p-2 bg-purple-100 rounded overflow-hidden">
     <div class="text-sm text-gray-800 font-medium truncate">
       {{ displayTitle }}
     </div>

package/src/plugins/markdown/View.vue

@@ -1,49 +1,46 @@
 <template>
   <div class="markdown-container">
     <div v-if="loading" class="min-h-full p-8 flex items-center justify-center">
-      <div class="text-gray-500">Loading document...</div>
+      <div class="text-gray-500">{{ t("pluginMarkdown.loading") }}</div>
     </div>
     <div v-else-if="loadError && !markdownContent" class="min-h-full p-8 flex items-center justify-center">
-      <div class="load-error-banner" role="alert">⚠ Failed to load document: {{ loadError }}</div>
+      <div class="load-error-banner" role="alert">{{ t("pluginMarkdown.loadFailed", { error: loadError }) }}</div>
     </div>
     <div v-else-if="!markdownContent" class="min-h-full p-8 flex items-center justify-center">
-      <div class="text-gray-500">No markdown content available</div>
+      <div class="text-gray-500">{{ t("pluginMarkdown.noContent") }}</div>
     </div>
     <template v-else>
+      <div class="flex justify-end px-4 py-2 border-b border-gray-100 shrink-0">
+        <div class="button-group">
+          <button class="download-btn download-btn-green" :disabled="pdfDownloading" @click="downloadPdf">
+            <span class="material-icons">{{ pdfDownloading ? "hourglass_empty" : "download" }}</span>
+            {{ t("pluginMarkdown.pdf") }}
+          </button>
+        </div>
+        <span v-if="pdfError" class="text-xs text-red-500 self-center ml-2" :title="pdfError">{{ t("pluginMarkdown.pdfFailedShort") }}</span>
+      </div>
       <div v-if="loadError" class="load-error-banner" role="alert">
-        ⚠ Failed to refresh document: {{ loadError }} — showing last successfully loaded content.
+        {{ t("pluginMarkdown.refreshFailed", { error: loadError }) }}
       </div>
       <div class="markdown-content-wrapper">
         <div class="p-4">
-          <div class="header-row">
-            <h1 class="document-title">
-              {{ selectedResult.title || "Document" }}
-            </h1>
-            <div class="button-group">
-              <button class="download-btn download-btn-green" :disabled="pdfDownloading" @click="downloadPdf">
-                <span class="material-icons">{{ pdfDownloading ? "hourglass_empty" : "download" }}</span>
-                PDF
-              </button>
-            </div>
-            <span v-if="pdfError" class="text-xs text-red-500 self-center ml-2" :title="pdfError">⚠ PDF failed</span>
-          </div>
           <div class="markdown-content prose prose-slate max-w-none" v-html="renderedHtml"></div>
         </div>
       </div>
 
       <div class="bottom-bar-wrapper">
         <details ref="sourceDetails" class="markdown-source" @toggle="onDetailsToggle">
-          <summary>Edit Markdown Source</summary>
+          <summary>{{ t("pluginMarkdown.editSource") }}</summary>
           <textarea v-model="editableMarkdown" class="markdown-editor" spellcheck="false"></textarea>
           <div class="editor-actions">
             <button class="apply-btn" :disabled="!hasChanges || saving" @click="applyMarkdown">
-              {{ saving ? "Saving..." : "Apply Changes" }}
+              {{ saving ? t("pluginMarkdown.saving") : t("pluginMarkdown.applyChanges") }}
             </button>
-            <button class="cancel-btn" @click="cancelEdit">Cancel</button>
+            <button class="cancel-btn" @click="cancelEdit">{{ t("pluginMarkdown.cancel") }}</button>
           </div>
-          <p v-if="saveError" class="save-error" role="alert">⚠ {{ saveError }}</p>
+          <p v-if="saveError" class="save-error" role="alert">{{ t("pluginMarkdown.saveError", { error: saveError }) }}</p>
         </details>
-        <button v-show="!editing" class="copy-btn" :title="copied ? 'Copied!' : 'Copy'" @click="copyText">
+        <button v-show="!editing" class="copy-btn" :title="copied ? t('pluginMarkdown.copiedLabel') : t('pluginMarkdown.copyLabel')" @click="copyText">
           <span class="material-icons">{{ copied ? "check" : "content_copy" }}</span>
         </button>
       </div>
@@ -53,7 +50,10 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
 import { marked } from "marked";
+
+const { t } = useI18n();
 import type { ToolResult } from "gui-chat-protocol";
 import { isFilePath, type MarkdownToolData } from "./definition";
 import { rewriteMarkdownImageRefs } from "../../utils/image/rewriteMarkdownImageRefs";
@@ -156,8 +156,8 @@ const sourceDetails = ref<HTMLDetailsElement>();
 const editing = ref(false);
 const { copied, copy } = useClipboardCopy();
 
-function onDetailsToggle(e: Event) {
-  const open = (e.target as HTMLDetailsElement).open;
+function onDetailsToggle(event: Event) {
+  const open = (event.target as HTMLDetailsElement).open;
   editing.value = open;
   if (!open) {
     editableMarkdown.value = markdownContent.value;
@@ -198,7 +198,9 @@ async function applyMarkdown() {
     });
     saving.value = false;
     if (!result.ok) {
-      saveError.value = `Save failed: ${result.error}`;
+      // Store the raw error; the template formats it via t() so locale
+      // switches re-render without double-translating.
+      saveError.value = result.error;
       return;
     }
   }
@@ -245,18 +247,6 @@ watch(
   min-height: 0;
 }
 
-.header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1em;
-}
-
-.document-title {
-  font-size: 2em;
-  margin: 0;
-}
-
 .button-group {
   display: flex;
   gap: 0.5em;

package/src/plugins/presentHtml/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sm">
+  <div class="p-2 text-sm">
     <div class="font-medium text-gray-700 truncate mb-1">
       {{ title }}
     </div>

package/src/plugins/presentHtml/View.vue

@@ -1,18 +1,18 @@
 <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 ?? "HTML Page" }}</span>
+      <span class="text-sm font-medium text-gray-700 truncate">{{ title ?? t("pluginPresentHtml.untitled") }}</span>
       <div class="flex items-center gap-2">
         <button
           class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0"
-          title="Save as PDF (opens print dialog)"
+          :title="t('pluginPresentHtml.saveAsPdf')"
           @click="printToPdf"
         >
           <span class="material-icons text-sm align-middle">picture_as_pdf</span>
-          PDF
+          {{ t("pluginPresentHtml.pdf") }}
         </button>
         <button class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0" @click="sourceOpen = !sourceOpen">
-          {{ sourceOpen ? "Hide Source <>" : "Show Source <>" }}
+          {{ sourceOpen ? t("pluginPresentHtml.hideSource") : t("pluginPresentHtml.showSource") }}
         </button>
       </div>
     </div>
@@ -25,9 +25,12 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { PresentHtmlData } from "./index";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedResult: ToolResultComplete<PresentHtmlData>;
 }>();

package/src/plugins/presentHtml/helpers.ts

@@ -25,8 +25,8 @@ export function stripHtmlToPreview(html: string, maxLength: number): string {
   };
   let i = 0;
   while (i < html.length) {
-    const c = html[i];
-    if (c === "<") {
+    const char = html[i];
+    if (char === "<") {
       const close = html.indexOf(">", i + 1);
       if (close !== -1) {
         // Real tag span `<...>` — skip it, emit a separator.
@@ -36,7 +36,7 @@ export function stripHtmlToPreview(html: string, maxLength: number): string {
       }
       // No closing `>` anywhere after — treat as literal.
     }
-    emitChar(state, c);
+    emitChar(state, char);
     i++;
   }
   trimTrailingSpace(state.out);
@@ -48,12 +48,12 @@ interface WalkerState {
   lastWasSpace: boolean;
 }
 
-function emitChar(state: WalkerState, c: string): void {
-  if (isWhitespace(c)) {
+function emitChar(state: WalkerState, char: string): void {
+  if (isWhitespace(char)) {
     emitSeparator(state);
     return;
   }
-  state.out.push(c);
+  state.out.push(char);
   state.lastWasSpace = false;
 }
 
@@ -67,6 +67,6 @@ function trimTrailingSpace(out: string[]): void {
   if (out.length > 0 && out[out.length - 1] === " ") out.pop();
 }
 
-function isWhitespace(c: string): boolean {
-  return c === " " || c === "\t" || c === "\n" || c === "\r" || c === "\v" || c === "\f";
+function isWhitespace(char: string): boolean {
+  return char === " " || char === "\t" || char === "\n" || char === "\r" || char === "\v" || char === "\f";
 }

package/src/plugins/presentMulmoScript/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sm">
+  <div class="p-2 text-sm">
     <div class="font-medium text-gray-700 truncate mb-1">
       {{ title }}
     </div>