@hienlh/ppm 0.23.14 → 0.23.16

package/src/web/components/design/share/use-share-links.ts

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  createDesignShare, deleteDesignShare, listDesignShares, updateDesignShare,
+} from "@/lib/design/api-design-shares";
+import { deleteShareLinkThreads } from "@/lib/design/api-design-comments";
+import type {
+  CreateDesignShareInput, DesignShareLink, UpdateDesignShareInput, UpdateDesignShareResult,
+} from "../../../../shared/design-share-types";
+
+/**
+ * One design's share links while the Share dialog is open. Every action updates the list
+ * from the server's answer, so a change shows without a reload; a failure is a toast and
+ * the action resolves to `null` (create throws instead, so the form can show the reason).
+ */
+
+export interface ShareLinksFeature {
+  links: DesignShareLink[] | null;
+  error: string | null;
+  refresh: () => Promise<void>;
+  create: (input: CreateDesignShareInput) => Promise<DesignShareLink>;
+  update: (id: string, patch: UpdateDesignShareInput, failure: string) => Promise<UpdateDesignShareResult | null>;
+  remove: (id: string) => Promise<boolean>;
+  deleteComments: (id: string) => Promise<boolean>;
+}
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function useShareLinks(projectName: string, slug: string, open: boolean): ShareLinksFeature {
+  const [links, setLinks] = useState<DesignShareLink[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      // Newest first, the same order a link created in this dialog takes.
+      setLinks((await listDesignShares(projectName, slug)).sort((a, b) => b.createdAt - a.createdAt));
+      setError(null);
+    } catch (e) {
+      setError(message(e) || "Could not load the share links");
+    }
+  }, [projectName, slug]);
+
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    const onFocus = () => { void refresh(); };
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [open, refresh]);
+
+  const replace = (link: DesignShareLink) =>
+    setLinks((list) => (list ?? []).map((l) => (l.id === link.id ? link : l)));
+
+  const create = useCallback(async (input: CreateDesignShareInput) => {
+    const link = await createDesignShare(projectName, slug, input);
+    setLinks((list) => [link, ...(list ?? []).filter((l) => l.id !== link.id)]);
+    return link;
+  }, [projectName, slug]);
+
+  const update = useCallback(async (id: string, patch: UpdateDesignShareInput, failure: string) => {
+    try {
+      const result = await updateDesignShare(projectName, slug, id, patch);
+      replace(result.link);
+      return result;
+    } catch (e) {
+      toast.error(failure, { description: message(e) });
+      return null;
+    }
+  }, [projectName, slug]);
+
+  const remove = useCallback(async (id: string) => {
+    try {
+      await deleteDesignShare(projectName, slug, id);
+      setLinks((list) => (list ?? []).filter((l) => l.id !== id));
+      return true;
+    } catch (e) {
+      toast.error("Could not delete the link", { description: message(e) });
+      return false;
+    }
+  }, [projectName, slug]);
+
+  const deleteComments = useCallback(async (id: string) => {
+    try {
+      await deleteShareLinkThreads(projectName, slug, id);
+      return true;
+    } catch (e) {
+      toast.error("Could not delete the link's comments", { description: message(e) });
+      return false;
+    }
+  }, [projectName, slug]);
+
+  return { links, error, refresh, create, update, remove, deleteComments };
+}

package/src/web/components/editor/diff-viewer.tsx

@@ -168,19 +168,23 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     // Monaco DiffEditor computes the diff itself, giving full-file view instead
     // of just the changed hunks + 3 lines of context that `git diff` returns.
     if (filePath) {
-      // git is being run inside the repository, which for a container project
-      // is a subfolder — so the path it is asked about has to be relative to
-      // that, and a file outside it has no diff to show.
-      const inRepo = gitRepo.repoPath(filePath);
-      if (inRepo == null) { setLoading(false); return; }
-      const params = new URLSearchParams({ file: inRepo });
+      // git runs in the repository that holds the file — for a container
+      // project a subfolder, whichever one Source Control is pointed at — so the
+      // path it is asked about is relative to that. The Git Graph's views open
+      // these tabs on the file's own repository, not on the pick. Undecided
+      // until discovery answers (the effect re-runs then); a file under no
+      // repository has no diff to show.
+      const scope = gitRepo.fileScope(filePath);
+      if (scope === undefined) return;
+      if (scope === null) { setLoading(false); return; }
+      const params = new URLSearchParams({ file: scope.path });
       if (ref1) params.set("ref", ref1);
       if (ref2) params.set("ref2", ref2);
       // A binary file answers with its sides empty unless they are asked for.
       if (openAsText) params.set("text", "1");
       api
         .get<FileFullDiff>(
-          gitRepo.gitUrl(`/file-full-diff?${params}`),
+          gitRepo.fileGitUrl(`/file-full-diff?${params}`, scope.repo),
         )
         .then((data) => { setFullFileDiff(data); setLoading(false); })
         .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
@@ -312,14 +316,14 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   // A file the text editor cannot show. An image is drawn on both sides, and
   // anything else says so in VS Code's words; "Open Anyway" asks the route for
-  // the same bytes decoded. `repoFile` is non-null by construction here — the
-  // fetch above returns early without it — but the URL builder has to say so.
+  // the same bytes decoded. `scope` is set by construction here — the fetch
+  // above returns early without it — but the URL builder has to say so.
   if (fullFileDiff?.binary && !openAsText && filePath && projectName) {
-    const repoFile = gitRepo.repoPath(filePath);
+    const scope = gitRepo.fileScope(filePath);
     const blobUrl = (rev: string) =>
-      repoFile == null
+      scope == null
         ? null
-        : gitRepo.gitUrl(`/file-blob?file=${encodeURIComponent(repoFile)}&ref=${encodeURIComponent(rev)}`);
+        : gitRepo.fileGitUrl(`/file-blob?file=${encodeURIComponent(scope.path)}&ref=${encodeURIComponent(rev)}`, scope.repo);
     return (
       <div className="flex flex-col h-full">
         {canPreviewBinary(filePath) && (

package/src/web/components/editor/docx-preview.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Loader2, FileWarning } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { sanitizeDocxHtml } from "@/components/shared/docx-html-sanitize";
 
 interface DocxPreviewProps {
   filePath: string;
@@ -13,6 +14,10 @@ export function DocxPreview({ filePath, projectName }: DocxPreviewProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // mammoth does not sanitise, so hold its HTML to the allow-list before it reaches innerHTML.
+  // Declared with the other hooks, above every early return, so the hook order never changes.
+  const safeHtml = useMemo(() => (html ? sanitizeDocxHtml(html) : ""), [html]);
+
   useEffect(() => {
     setLoading(true);
     setError(null);
@@ -85,7 +90,7 @@ export function DocxPreview({ filePath, projectName }: DocxPreviewProps) {
           [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2
           [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2
           [&_li]:my-0.5"
-        dangerouslySetInnerHTML={{ __html: html ?? "" }}
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
       />
     </div>
   );

package/src/web/components/remote-desktop/use-remote-desktop-readiness.ts

@@ -5,7 +5,8 @@
  * Mirrors the server types in `src/services/remote-desktop/remote-desktop-requirements.ts` —
  * the UI renders whatever items arrive and never branches on the host OS. Polls while `poll`
  * is on so a permission granted in System Settings (or `brew install ffmpeg` finishing in the
- * dock terminal) flips the panel without a reload.
+ * dock terminal) flips the panel without a reload — and only until the host is ready, when
+ * there is nothing left to flip.
  */
 import { useCallback, useEffect, useState } from "react";
 import { api } from "@/lib/api-client";
@@ -142,11 +143,15 @@ export function useRemoteDesktopReadiness(poll: boolean): {
     return () => { cancelled = true; };
   }, [tick]);
 
+  // A ready host stops the poll. The gate is then showing the viewer for the rest of the
+  // session, and every poll re-ran the host's probes for it — on a Wayland host without a GPU
+  // encoder, four `gst-inspect-1.0` every two seconds beside a software encode.
+  const ready = !!caps?.videoReady && caps.inputReady;
   useEffect(() => {
-    if (!poll) return;
+    if (!poll || ready) return;
     const timer = setInterval(refresh, READINESS_POLL_MS);
     return () => clearInterval(timer);
-  }, [poll, refresh]);
+  }, [poll, ready, refresh]);
 
   const runHostAction = useCallback(async (id: string, action: "request" | "open-settings") => {
     try { await api.post(`/api/remote-desktop/requirements/${encodeURIComponent(id)}/${action}`); } catch { /* panel shows state on next poll */ }

package/src/web/components/settings/accounts/account-add-dialog.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Loader2 } from "@/lib/icons";
 import { addAccount, getOAuthUrl, exchangeOAuthCode } from "../../../lib/api-settings";
+import { ApiError } from "../../../lib/api-client";
 
 // ── Add Account Dialog ─────────────────────────────────────────────
 
@@ -13,10 +14,11 @@ interface AddAccountDialogProps {
   onOpenChange: (open: boolean) => void;
   onSuccess: (msg?: string) => void;
   /**
-   * The label of an account being signed in again. Only the wording changes: the add flow
-   * already updates an account it matches by email or profile id, clearing its re-auth flag.
+   * The account being signed in again. The add flow already updates an account it matches by
+   * email or profile id, clearing its re-auth flag; the id tells the dialog whether the sign-in
+   * landed on this account or on another one.
    */
-  signInAgainFor?: string;
+  signInAgainFor?: { id: string; label: string };
 }
 
 export function AddAccountDialog({ open, onOpenChange, onSuccess, signInAgainFor }: AddAccountDialogProps) {
@@ -63,17 +65,27 @@ export function AddAccountDialog({ open, onOpenChange, onSuccess, signInAgainFor
     setOauthLoading(true);
     setAddError(null);
     try {
-      let code = oauthCode.trim();
-      if (code.includes("#")) code = code.split("#")[0] ?? code;
-      const acc = await exchangeOAuthCode(code, oauthState);
+      // Sent whole: the `#state` after the code names the link it came from, which may be an
+      // earlier one than `oauthState`.
+      const acc = await exchangeOAuthCode(oauthCode.trim(), oauthState);
       handleClose();
-      // Signing in again on an account this machine parked carries the token in but
-      // deliberately leaves it out of the rotation. A flat success over a toggle that is
-      // still off reads as a bug, and this is the only place the user finds out otherwise.
-      onSuccess(acc?.status === "disabled"
-        ? "Signed in. This account is still disabled — enable it to use it."
-        : "Account connected via OAuth!");
+      if (signInAgainFor && acc && acc.id !== signInAgainFor.id) {
+        // Claude signed in a different account than the one this dialog renews. That sign-in is
+        // kept — the code is spent by the time PPM learns whose it is — but it must not read as
+        // the renewal the user asked for.
+        const other = acc.email || acc.label || acc.id.slice(0, 8);
+        onSuccess(`Signed in to ${other}, not ${signInAgainFor.label}. ${signInAgainFor.label} is still signed out — click "Sign in again" on it to fix it.`);
+      } else {
+        // Signing in again on an account this machine parked carries the token in but
+        // deliberately leaves it out of the rotation. A flat success over a toggle that is
+        // still off reads as a bug, and this is the only place the user finds out otherwise.
+        onSuccess(acc?.status === "disabled"
+          ? "Signed in. This account is still disabled — enable it to use it."
+          : "Account connected via OAuth!");
+      }
     } catch (e) {
+      // The server no longer holds that link, so no code can finish it: back to Login with Claude.
+      if (e instanceof ApiError && e.status === 410) resetOAuth();
       setAddError((e as Error).message);
     }
     setOauthLoading(false);
@@ -105,7 +117,7 @@ export function AddAccountDialog({ open, onOpenChange, onSuccess, signInAgainFor
     <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="text-sm">{signInAgainFor ? `Sign in again — ${signInAgainFor}` : "Add Claude Account"}</DialogTitle>
+          <DialogTitle className="text-sm">{signInAgainFor ? `Sign in again — ${signInAgainFor.label}` : "Add Claude Account"}</DialogTitle>
           <DialogDescription className="text-xs leading-relaxed">
             {signInAgainFor
               ? "Log in with the same Claude account. PPM matches it by email and renews the existing card instead of adding a new one."

package/src/web/components/settings/accounts/claude-accounts-section.tsx

@@ -40,8 +40,8 @@ export function ClaudeAccountsSection() {
   const [profileView, setProfileView] = useState<{ profile: OAuthProfileData; accountId: string } | null>(null);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | "token-test" | null>(null);
-  /** Label of the account whose "Sign in again" chip opened the add dialog. */
-  const [signInAgainFor, setSignInAgainFor] = useState<string | undefined>(undefined);
+  /** The account whose "Sign in again" chip opened the add dialog. */
+  const [signInAgainFor, setSignInAgainFor] = useState<{ id: string; label: string } | undefined>(undefined);
 
   function handleSuccess(msg?: string) {
     void reload();
@@ -140,7 +140,7 @@ export function ClaudeAccountsSection() {
                 onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setDialog("export"); }}
                 onViewProfile={(profile, accountId) => setProfileView({ profile, accountId })}
-                onReauth={() => { setSignInAgainFor(entry.accountLabel ?? entry.accountId.slice(0, 8)); setDialog("add"); }}
+                onReauth={() => { setSignInAgainFor({ id: entry.accountId, label: entry.accountLabel ?? entry.accountId.slice(0, 8) }); setDialog("add"); }}
                 flash={flashIds.has(entry.accountId)}
               />
             ))}

package/src/web/components/settings/ai-settings-section.tsx

@@ -210,26 +210,6 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
         />
       </div>
 
-      <div className="flex items-start justify-between gap-3 rounded-md border border-border p-3">
-        <div className={fieldGap}>
-          <Label htmlFor="ai-tab-tools" className={compact ? labelSize : undefined}>
-            Let the AI open tabs in PPM
-          </Label>
-          <p id="ai-tab-tools-description" className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
-            The AI can open files in a PPM tab on your device, and show the pages, charts and reports
-            it makes, seeing their errors and a screenshot. Turns off Claude's claude.ai Artifact tool.
-            Applies to new chats.
-          </p>
-        </div>
-        <Switch
-          id="ai-tab-tools"
-          aria-describedby="ai-tab-tools-description"
-          checked={settings.tab_tools ?? false}
-          disabled={saving}
-          onCheckedChange={(checked) => handleSettingsSave({ tab_tools: checked })}
-        />
-      </div>
-
       {/* Provider tabs */}
       {providerTabs.length > 1 && (
         <div className="flex gap-0.5 border-b border-border/50 -mx-1 px-1">

package/src/web/components/settings/settings-categories.ts

@@ -26,6 +26,7 @@ import {
   Zap,
   Monitor,
   MonitorSmartphone,
+  Wrench,
 } from "@/lib/icons";
 
 /**
@@ -41,6 +42,7 @@ export type SettingsCategoryId =
   | "remote-desktop"
   | "database-drivers"
   | "ai-provider"
+  | "tools"
   | "accounts"
   | "design"
   | "voice"
@@ -91,6 +93,7 @@ export const SETTINGS_CATEGORIES: SettingsCategoryDef[] = [
   { id: "database-drivers", group: "core", label: "Database Drivers", subtitle: "MySQL and MariaDB support, installed on request", icon: Database },
 
   { id: "ai-provider", group: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
+  { id: "tools", group: "ai", label: "Tools", subtitle: "PPM tools the AI can use", icon: Wrench },
   { id: "accounts", group: "ai", label: "Accounts", subtitle: "Claude and Codex sign-ins, rotation", icon: KeyRound },
   { id: "design", group: "ai", label: "Design", subtitle: "Design instructions and skills", icon: LayoutGrid },
   { id: "voice", group: "ai", label: "Voice Input", subtitle: "Speech to text for the chat box", icon: Mic },

package/src/web/components/settings/settings-section-content.tsx

@@ -19,6 +19,7 @@ export const SECTIONS: Record<SettingsCategoryId, PreloadableComponent<object>>
   "remote-desktop": lazyWithPreload(() => import("./remote-desktop-settings-section").then((m) => ({ default: m.RemoteDesktopSettingsSection }))),
   "database-drivers": lazyWithPreload(() => import("./database-drivers-section").then((m) => ({ default: m.DatabaseDriversSection }))),
   "ai-provider": lazyWithPreload(() => import("./ai-settings-section").then((m) => ({ default: m.AISettingsSection }))),
+  tools: lazyWithPreload(() => import("./tools-settings-section").then((m) => ({ default: m.ToolsSettingsSection }))),
   accounts: lazyWithPreload(() => import("./accounts/accounts-settings-section").then((m) => ({ default: m.AccountsSettingsSection }))),
   design: lazyWithPreload(() => import("./design-settings-section").then((m) => ({ default: m.DesignSettingsSection }))),
   voice: lazyWithPreload(() => import("./voice-settings-section").then((m) => ({ default: m.VoiceSettingsSection }))),

package/src/web/components/settings/tools-settings-section.tsx

@@ -0,0 +1,120 @@
+/**
+ * Settings → Tools: PPM's own tools for the AI chat, on or off one by one, for Claude and Codex
+ * alike (`ai.ppm_tools`; the defaults are in `src/shared/ppm-tools.ts`).
+ */
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { getAISettings, updateAISettings, type AISettings } from "@/lib/api-settings";
+import { DB_TOOLS } from "../../../shared/db-ai-tools";
+import { ppmToolOn, TERMINAL_TOOLS, type PpmTool } from "../../../shared/ppm-tools";
+import { SectionHeader, SwitchRow } from "./settings-rows";
+
+const errorText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+const TOOL_COPY: Record<PpmTool, { label: string; note: string }> = {
+  open_file: {
+    label: "Open files",
+    note: "Opens a file in a PPM tab, at a line when it points you at one.",
+  },
+  open_preview: {
+    label: "Show pages",
+    note: "Opens a page, chart or report it made in a PPM tab, and reads back its errors and a screenshot. While on, Claude's claude.ai Artifact tool is off.",
+  },
+  open_url: {
+    label: "Show running apps",
+    note: "Opens a web server running on this machine, such as a dev server, in a PPM tab. On another device it goes through a private Tailscale forward; it never makes a public link.",
+  },
+  read_terminal: {
+    label: "Read terminals",
+    note: "Reads what the terminals of the chat's project printed, so you need not paste an error into the chat.",
+  },
+  run_in_terminal: {
+    label: "Type commands",
+    note: "Opens a terminal with a command typed in, for one that needs your password or your eyes. Nothing runs until you press Enter.",
+  },
+  db_query: {
+    label: "Read databases",
+    note: "Runs read-only SQL. It cannot change anything.",
+  },
+  open_query: {
+    label: "Open Query tabs",
+    note: "Opens a Query tab holding a script it wrote. You press Run.",
+  },
+  db_execute: {
+    label: "Change databases",
+    note: "Runs a change only after you approve it with PPM's password, once, in one transaction.",
+  },
+};
+
+const GROUPS: Array<{ title: string; intro: string; tools: readonly PpmTool[] }> = [
+  { title: "Tabs", intro: "On the device you are chatting from.", tools: ["open_file", "open_preview", "open_url"] },
+  { title: "Terminal", intro: "PPM's own terminals, on the machine PPM runs on.", tools: TERMINAL_TOOLS },
+  {
+    title: "Database",
+    intro: "On the connections with “Available to the AI chat” on. The AI never sees their passwords.",
+    tools: DB_TOOLS,
+  },
+];
+
+export function ToolsSettingsSection() {
+  const [settings, setSettings] = useState<AISettings | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setSettings(await getAISettings());
+      setLoadError(null);
+    } catch (e) {
+      setLoadError(errorText(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  // Shown at once; a refused save reloads what the server actually has.
+  const toggle = useCallback(async (tool: PpmTool, on: boolean) => {
+    setSettings((current) => (current ? { ...current, ppm_tools: { ...current.ppm_tools, [tool]: on } } : current));
+    try {
+      setSettings(await updateAISettings({ ppm_tools: { [tool]: on } }));
+    } catch (e) {
+      toast.error("Could not save", { description: errorText(e) });
+      await load();
+    }
+  }, [load]);
+
+  if (!settings) {
+    return <p className="text-xs text-muted-foreground">{loadError ?? "Loading…"}</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <p className="text-xs leading-relaxed text-muted-foreground">
+        PPM's own tools for the AI chat, with Claude and Codex alike. New chats get the tools that are
+        on; turning one off also stops it in chats already open.
+      </p>
+      {GROUPS.map((group) => (
+        <section key={group.title} className="space-y-3">
+          <SectionHeader title={group.title}>{group.intro}</SectionHeader>
+          <div className="divide-y divide-border rounded-lg border border-border">
+            {group.tools.map((tool) => (
+              <SwitchRow
+                key={tool}
+                label={
+                  <>
+                    {TOOL_COPY[tool].label}
+                    <code className="ml-2 font-mono text-[11px] text-muted-foreground">{tool}</code>
+                  </>
+                }
+                note={TOOL_COPY[tool].note}
+                checked={ppmToolOn(settings, tool)}
+                onChange={(on) => void toggle(tool, on)}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/web/components/shared/docx-html-sanitize.ts

@@ -0,0 +1,59 @@
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeSanitize, { defaultSchema, type Options as SanitizeSchema } from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
+
+/**
+ * What a converted `.docx`'s HTML may keep. mammoth does no sanitising, so a `javascript:`
+ * hyperlink in a document (verified: one click read the auth token from the page) reaches the
+ * preview's `innerHTML` as a live link, and a `<script>` smuggled through a document would run.
+ * The preview has no `markdownUrlTransform`, so unlike the Markdown path the scheme check is
+ * done here: links keep http(s)/mailto, images keep http(s) and the `data:` URIs mammoth
+ * inlines its embedded pictures as. Starts from GitHub's allow-list, so headings, bold/italic,
+ * lists, tables and images survive.
+ *
+ * This is its own file rather than part of `markdown-sanitize.ts` so the Markdown renderer's
+ * chunk does not carry rehype-parse/rehype-stringify, which only the lazy docx preview needs.
+ */
+export const docxSanitizeSchema: SanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    img: [...(defaultSchema.attributes?.img ?? []), "src", "width", "height"],
+  },
+  protocols: {
+    ...defaultSchema.protocols,
+    src: ["http", "https", "data"],
+    href: ["http", "https", "mailto"],
+  },
+};
+
+interface HastNode {
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+}
+
+/**
+ * The allow-list keeps any `data:` image src, but hast-util-sanitize checks only the `data:`
+ * prefix — so `data:text/html,…` survives. An `<img>` cannot run it, yet it has no business in
+ * a document, so this drops every `data:` src that is not `data:image/`.
+ */
+function dropNonImageDataSrc(node: HastNode): void {
+  const src = node.tagName === "img" ? node.properties?.src : undefined;
+  if (typeof src === "string" && /^data:/i.test(src) && !/^data:image\//i.test(src)) {
+    delete node.properties!.src;
+  }
+  node.children?.forEach(dropNonImageDataSrc);
+}
+
+const docxPipeline = unified()
+  .use(rehypeParse, { fragment: true })
+  .use(rehypeSanitize, docxSanitizeSchema)
+  .use(() => (tree: unknown) => dropNonImageDataSrc(tree as HastNode))
+  .use(rehypeStringify);
+
+/** Hold HTML from an untrusted document to the docx allow-list before it reaches `innerHTML`. */
+export function sanitizeDocxHtml(html: string): string {
+  return String(docxPipeline.processSync(html));
+}

package/src/web/components/shared/markdown-code-block.tsx

@@ -46,7 +46,9 @@ let mermaidPromise: Promise<typeof import("mermaid")["default"]> | null = null;
 function getMermaid() {
   if (!mermaidPromise) {
     mermaidPromise = import("mermaid").then((mod) => {
-      mod.default.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose", fontFamily: "ui-sans-serif, system-ui, sans-serif" });
+      // "strict": a diagram is text the AI wrote, and "loose" keeps `click … href "javascript:…"`
+      // links live in the SVG, one click from running on PPM's origin. PPM wires no click handlers.
+      mod.default.initialize({ startOnLoad: false, theme: "default", securityLevel: "strict", fontFamily: "ui-sans-serif, system-ui, sans-serif" });
       return mod.default;
     });
   }

package/src/web/components/shared/markdown-renderer.tsx

@@ -4,6 +4,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkBreaks from "remark-breaks";
 import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import rehypeKatex from "rehype-katex";
 import { useImageOverlay } from "@/stores/image-overlay-store";
 import { collectGallery, GALLERY_ITEM_ATTR } from "@/lib/image-gallery";
@@ -14,6 +15,7 @@ import { normalizeMathDelimiters } from "@/lib/markdown-math-delimiters";
 import { MdContext, useMdContext, LOCAL_PATH_RE, markdownUrlTransform, parseMarkdownFileTarget } from "./markdown-context";
 import { useMarkdownFileNavigation } from "./use-markdown-file-navigation";
 import { MdPre, MdCode } from "./markdown-code-block";
+import { markdownSanitizeSchema, rehypePrefixFragmentLinks, sanitizedRemarkRehypeOptions } from "./markdown-sanitize";
 
 interface MarkdownRendererProps {
   content: string;
@@ -21,15 +23,24 @@ interface MarkdownRendererProps {
   className?: string;
   codeActions?: boolean;
   isStreaming?: boolean;
+  /**
+   * Parse HTML inside the Markdown (default), keeping only what `markdownSanitizeSchema`
+   * allows. Off for text nobody in this session wrote, such as a system tag's content, where
+   * HTML in the source is shown as text instead.
+   */
+  rawHtml?: boolean;
 }
 
 /** Plugin arrays — stable references to avoid re-creating on each render */
 const remarkPlugins = [[remarkGfm, { singleTilde: false }], [remarkMath, { singleDollarTextMath: false }], remarkBreaks] as any;
-const rehypePlugins = [rehypeRaw, rehypeKatex] as any;
+// Sanitise straight after parsing raw HTML and before KaTeX, so KaTeX's own markup is not
+// held to the allow-list.
+const rehypePlugins = [rehypeRaw, [rehypeSanitize, markdownSanitizeSchema], rehypePrefixFragmentLinks, rehypeKatex] as any;
+const rehypePluginsNoRaw = [rehypeKatex] as any;
 /** Component map — stable references; dynamic state flows through MdContext */
 const mdComponents = { a: MdLink, img: MdImage, pre: MdPre, code: MdCode, table: MdTable };
 
-export function MarkdownRenderer({ content, projectName, className = "", codeActions = false, isStreaming = false }: MarkdownRendererProps) {
+export function MarkdownRenderer({ content, projectName, className = "", codeActions = false, isStreaming = false, rawHtml = true }: MarkdownRendererProps) {
   const openImageOverlayFn = useImageOverlay((s) => s.open);
   const openDiagramOverlayFn = useDiagramOverlay((s) => s.open);
   const openFileOrSearch = useMarkdownFileNavigation(projectName);
@@ -48,7 +59,8 @@ export function MarkdownRenderer({ content, projectName, className = "", codeAct
       <div className={`markdown-content prose-sm ${isStreaming ? "is-streaming" : ""} ${className}`}>
         <ReactMarkdown
           remarkPlugins={remarkPlugins}
-          rehypePlugins={rehypePlugins}
+          rehypePlugins={rawHtml ? rehypePlugins : rehypePluginsNoRaw}
+          remarkRehypeOptions={rawHtml ? sanitizedRemarkRehypeOptions : undefined}
           urlTransform={markdownUrlTransform}
           components={mdComponents}
         >