mulmoclaude 0.5.2 → 0.6.0

package/src/components/FileContentRenderer.vue

@@ -17,12 +17,22 @@
              through CalendarView (force-tab="calendar") to keep the
              dual-tab bar from showing an empty Tasks panel (#828
              follow-up). -->
+        <!-- Plugin-owned views require a `<PluginScopedRoot>` ancestor
+             so descendants' `useRuntime()` calls resolve. The plugin
+             registry's `wrapWithScope` covers the chat-mounted variants;
+             this renderer is a separate mount path (file preview), so
+             the wrappers go here. PluginScopedRoot renders a fragment
+             via <slot/>, so the styling div must be inside. -->
         <div v-if="schedulerResult" class="h-full">
-          <CalendarView :selected-result="schedulerResult" />
+          <PluginScopedRoot pkg-name="scheduler" :endpoints="API_ROUTES.scheduler">
+            <CalendarView :selected-result="schedulerResult" />
+          </PluginScopedRoot>
         </div>
         <!-- Todos todos.json: full kanban / table / list explorer. -->
         <div v-else-if="todoExplorerResult" class="h-full">
-          <TodoExplorer :selected-result="todoExplorerResult" />
+          <PluginScopedRoot pkg-name="@mulmoclaude/todo-plugin">
+            <TodoExplorer :selected-result="todoExplorerResult" />
+          </PluginScopedRoot>
         </div>
         <!-- Markdown rendered: frontmatter panel + body -->
         <div v-else-if="isMarkdown && !mdRawMode" class="h-full flex flex-col overflow-auto">
@@ -31,12 +41,16 @@
               <span class="font-semibold text-gray-600 shrink-0">{{ field.key }}:</span>
               <template v-if="Array.isArray(field.value)">
                 <span class="flex flex-wrap gap-1">
-                  <span v-for="item in field.value" :key="item" class="rounded-full bg-white border border-gray-300 px-2 py-0.5 text-gray-700">
-                    {{ item }}
+                  <span
+                    v-for="(item, idx) in field.value"
+                    :key="String(idx) + ':' + formatScalarField(item)"
+                    class="rounded-full bg-white border border-gray-300 px-2 py-0.5 text-gray-700"
+                  >
+                    {{ formatScalarField(item) }}
                   </span>
                 </span>
               </template>
-              <span v-else class="text-gray-800 break-words">{{ field.value }}</span>
+              <span v-else class="text-gray-800 break-words">{{ formatScalarField(field.value) }}</span>
             </div>
           </div>
           <div class="flex-1 min-h-0" @click.capture="(e: MouseEvent) => emit('markdownLinkClick', e)">
@@ -59,10 +73,25 @@
              `allow-same-origin`, so the iframe keeps a null
              origin — it can't read MulmoClaude's cookies,
              localStorage, or the parent window's DOM.
-             A CSP meta tag is injected via wrapHtmlWithPreviewCsp
-             to restrict script loads to a vetted CDN whitelist +
-             inline; connect-src is `'none'` so the page can't
-             phone home. See src/utils/html/previewCsp.ts. -->
+
+             Two branches:
+              - Files under `artifacts/html/` load via iframe `src=`
+                pointing at the `/artifacts/html` static mount, so the
+                browser resolves relative `<img src="../images/...">`
+                against the file's real URL. CSP arrives as an HTTP
+                header on the response.
+              - Anything else falls back to `srcdoc` with a CSP meta
+                tag injected by `wrapHtmlWithPreviewCsp`. Relative
+                paths don't resolve under `srcdoc` (base URL is
+                `about:srcdoc`), but that's the historical behavior
+                for non-`artifacts/html/` HTML. -->
+        <iframe
+          v-else-if="isHtml && htmlPreviewUrl"
+          :src="htmlPreviewUrl"
+          class="w-full h-full border-0"
+          sandbox="allow-scripts"
+          :title="t('fileContentRenderer.htmlPreview')"
+        />
         <iframe
           v-else-if="isHtml"
           :srcdoc="sandboxedHtml"
@@ -124,15 +153,16 @@ import { useI18n } from "vue-i18n";
 import TextResponseView from "../plugins/textResponse/View.vue";
 import CalendarView from "../plugins/scheduler/CalendarView.vue";
 import TodoExplorer from "./TodoExplorer.vue";
+import PluginScopedRoot from "./PluginScopedRoot.vue";
 import SystemFileBanner from "./SystemFileBanner.vue";
 import type { FileContent } from "../composables/useFileSelection";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TextResponseData } from "../plugins/textResponse/types";
 import type { SchedulerData } from "../plugins/scheduler/index";
-import type { TodoData } from "../plugins/todo/index";
+import type { TodoData } from "@mulmoclaude/todo-plugin/shared";
 import { JSON_TOKEN_CLASS } from "../utils/format/jsonSyntax";
 import type { JsonToken, JsonlLine } from "../utils/format/jsonSyntax";
-import type { Frontmatter } from "../utils/format/frontmatter";
+import { formatScalarField, type MarkdownDocView } from "../composables/useMarkdownDoc";
 import { rewriteMarkdownImageRefs } from "../utils/image/rewriteMarkdownImageRefs";
 import { API_ROUTES } from "../config/apiRoutes";
 import { descriptorForPath } from "../config/systemFileDescriptors";
@@ -152,9 +182,10 @@ const props = defineProps<{
   isJsonl: boolean;
   mdRawMode: boolean;
   sandboxedHtml: string;
+  htmlPreviewUrl: string | null;
   jsonTokens: JsonToken[];
   jsonlLines: JsonlLine[];
-  mdFrontmatter: Frontmatter | null;
+  mdFrontmatter: MarkdownDocView | null;
   rawSaveError: string | null;
 }>();
 
@@ -177,13 +208,35 @@ function markdownResult(text: string): ToolResultComplete<TextResponseData> {
   const slash = current.lastIndexOf("/");
   const basePath = slash >= 0 ? current.slice(0, slash) : "";
   const rewritten = rewriteMarkdownImageRefs(text, basePath);
+  // The displayed text strips frontmatter (rendered separately as a
+  // metadata bar above) — but the PDF source must keep the original
+  // markdown so the server can decide what to keep / strip via the
+  // `pdfStripFrontmatter` flag. Otherwise non-wiki files with
+  // frontmatter would silently lose it from the PDF too.
+  const fullSource = props.content?.kind === "text" ? props.content.content : text;
+  // Strip frontmatter from the PDF whenever the UI shows it as a
+  // separate metadata panel — otherwise the YAML duplicates as plain
+  // text on page 1 of the PDF.
+  const hasFrontmatter = props.mdFrontmatter !== null;
   return {
     uuid: "files-preview",
     toolName: "text-response",
     message: rewritten,
     title: props.selectedPath ?? "",
-    // role: "user" hides the PDF download button in TextResponseView
-    data: { text: rewritten, role: "user", transportKind: "text-rest" },
+    data: {
+      text: rewritten,
+      role: "assistant",
+      transportKind: "text-rest",
+      // `pdfSourceText`: un-rewritten markdown so the server-side
+      // image inliner resolves against on-disk paths, not the
+      // `/api/files/raw?…` URLs the display layer produces.
+      pdfSourceText: fullSource,
+      // Pass basePath as-is (including empty string for top-level
+      // files like README.md). The server distinguishes empty
+      // (= workspace root) from undefined (= legacy default).
+      pdfBaseDir: basePath,
+      pdfStripFrontmatter: hasFrontmatter,
+    },
   };
 }
 </script>

package/src/components/FileTree.vue

@@ -48,6 +48,7 @@ import { useExpandedDirs } from "../composables/useExpandedDirs";
 import { sortChildren } from "../utils/files/sortChildren";
 import { descriptorForPath, EDIT_POLICY_ICON_COLOR } from "../config/systemFileDescriptors";
 import type { FileSortMode } from "../composables/useFileSortMode";
+import type { TreeNode } from "../types/fileTree";
 
 const DEFAULT_FILE_ICON_COLOR = "text-gray-400";
 
@@ -57,7 +58,6 @@ const { t } = useI18n();
 // import it without depending on a .vue module. Re-export here so
 // existing `import { TreeNode } from "./FileTree.vue"` keeps working.
 export type { TreeNode } from "../types/fileTree";
-import type { TreeNode } from "../types/fileTree";
 
 const props = defineProps<{
   node: TreeNode;
@@ -124,7 +124,7 @@ const AUDIO_EXTENSIONS = new Set([".mp3", ".wav", ".m4a", ".ogg", ".oga", ".flac
 
 const fileIcon = computed(() => {
   if (props.node.type !== "file") return "description";
-  const name = props.node.name;
+  const { name } = props.node;
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "description";
   const ext = name.slice(dot).toLowerCase();

package/src/components/FilesView.vue

@@ -36,6 +36,7 @@
         :is-jsonl="isJsonl"
         :md-raw-mode="mdRawMode"
         :sandboxed-html="sandboxedHtml"
+        :html-preview-url="htmlPreviewUrl"
         :json-tokens="jsonTokens"
         :jsonl-lines="jsonlLines"
         :md-frontmatter="mdFrontmatter"
@@ -43,6 +44,18 @@
         @markdown-link-click="handleMarkdownLinkClick"
         @update-source="saveRawMarkdown"
       />
+      <!-- Per-file chat composer: spawns a fresh chat with a
+           "take a look at this file first" instruction prepended.
+           Mirrors the wiki per-page composer (see plugins/wiki/View.vue).
+           No roleId is passed, so the new chat inherits the user's
+           current role. -->
+      <PageChatComposer
+        v-if="selectedPath && !contentLoading && !contentError"
+        :key="selectedPath"
+        :placeholder="t('filesView.chatPlaceholder')"
+        :prepend-text="`Before answering, take a look at the file at ${selectedPath}.`"
+        test-id-prefix="files-page-chat"
+      />
     </div>
   </div>
 </template>
@@ -50,9 +63,11 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import FileTreePane from "./FileTreePane.vue";
 import FileContentHeader from "./FileContentHeader.vue";
 import FileContentRenderer from "./FileContentRenderer.vue";
+import PageChatComposer from "./PageChatComposer.vue";
 import { useFileTree } from "../composables/useFileTree";
 import { useFileSelection, isValidFilePath, readPathMatch } from "../composables/useFileSelection";
 import { useMarkdownMode } from "../composables/useMarkdownMode";
@@ -67,6 +82,7 @@ import { toTodoExplorerResult } from "../utils/filesPreview/todoPreview";
 const RECENT_THRESHOLD_MS = 60 * 1000;
 
 const route = useRoute();
+const { t } = useI18n();
 
 const props = defineProps<{
   refreshToken?: number;
@@ -87,7 +103,7 @@ const { mdRawMode, toggleMdRaw } = useMarkdownMode();
 
 const { sortMode, setSortMode } = useFileSortMode();
 
-const { isMarkdown, isHtml, isJson, isJsonl, sandboxedHtml, jsonTokens, jsonlLines, mdFrontmatter } = useContentDisplay(selectedPath, content);
+const { isMarkdown, isHtml, isJson, isJsonl, sandboxedHtml, htmlPreviewUrl, jsonTokens, jsonlLines, mdFrontmatter } = useContentDisplay(selectedPath, content);
 
 // Save-error banner shown above the Rendered-mode markdown editor.
 // Cleared on every new file load and on the next successful save.

package/src/components/NewsView.vue

@@ -117,6 +117,7 @@
                 <div v-if="bodyLoading" class="text-sm text-gray-400">{{ t("common.loading") }}</div>
                 <div v-else-if="bodyError" class="text-sm text-red-600">{{ t("pluginNews.bodyError", { error: bodyError }) }}</div>
                 <div v-else-if="!body" class="text-sm text-gray-400 italic">{{ t("pluginNews.noBody") }}</div>
+                <!-- eslint-disable-next-line vue/no-v-html -- marked.parse output of app-owned news body; trusted in-process render -->
                 <div v-else class="markdown-content prose prose-slate max-w-none" v-html="renderedBody"></div>
               </div>
             </div>
@@ -125,7 +126,7 @@
             :key="selected.id"
             :placeholder="t('pluginNews.chatPlaceholder')"
             :prepend-text="`Read this article. ${selected.url}`"
-            :allow-empty="true"
+            allow-empty
             test-id-prefix="news-page-chat"
           />
         </template>
@@ -144,6 +145,7 @@ import { apiGet } from "../utils/api";
 import { formatSmartTime } from "../utils/format/date";
 import { useNewsItems } from "../composables/useNewsItems";
 import { useNewsReadState } from "../composables/useNewsReadState";
+import { parseFrontmatter } from "../utils/markdown/frontmatter";
 import FilterChip from "./FilterChip.vue";
 import PageChatComposer from "./PageChatComposer.vue";
 
@@ -191,7 +193,18 @@ const unreadCount = computed(() => items.value.filter((item) => !isRead(item.id)
 
 const selected = computed(() => items.value.find((item) => item.id === selectedId.value) ?? null);
 
-const renderedBody = computed(() => (body.value ? marked(body.value, { breaks: true, gfm: true }) : ""));
+// Strip frontmatter before marked() renders the body. RSS-derived
+// content typically has no `---\n...\n---` envelope, but a feed
+// that mirrors a markdown blog could carry one — and we don't
+// want it to surface as a stray `<hr>` plus key:value plain text.
+// `parseFrontmatter` is a no-op for header-less inputs, so this
+// is safe for the common case (#895 PR D — closes the issue's
+// "Vue 側 ... news ... frontmatter が body に出ない" requirement).
+const renderedBody = computed(() => {
+  if (!body.value) return "";
+  const { body: bodyOnly } = parseFrontmatter(body.value);
+  return marked(bodyOnly, { breaks: true, gfm: true });
+});
 
 function selectItem(itemId: string): void {
   selectedId.value = itemId;
@@ -220,6 +233,7 @@ watch(
     const token = ++bodyToken;
     const url = API_ROUTES.news.itemBody.replace(":id", encodeURIComponent(itemId));
     const result = await apiGet<{ body: string | null }>(url);
+    // eslint-disable-next-line security/detect-possible-timing-attacks -- in-memory race-token guard, not an auth compare
     if (token !== bodyToken) return;
     bodyLoading.value = false;
     if (!result.ok) {