feat(views): agent-generated views as sandboxed frames (#505)

Adds the `s2b-view` fence: a self-contained HTML/CSS/JS document the agent
writes in its reply, rendered by a code-block processor into a sandboxed
iframe (opaque origin, no-network CSP) wrapped in a trusted outer frame
whose `frame-src 'none'` refuses any navigation out. Optional frontmatter
declares a title, a height, Dataview DQL queries the host runs and keeps
live, and bundled libraries (`libs: plotly` — the gl3d build, inlined and
patched at build time so main.js stays free of dynamic code). In chat the
block gets a toolbar to copy it as a block or save it as a note under the
new "Views folder" setting; in notes and embeds the same processor renders
it. A bundled `views` core skill teaches the format, and `load_skill` now
reports whether Dataview is available so the agent only writes queries when
it is enabled.

Also: the chat renderer owns a Component per document and streaming tail
(render children no longer live until plugin unload), renders a sealed view
fence as soon as it closes, and double-buffers the settle render so a view
that appeared mid-stream is never blanked. Frames size to their drawn
content, a declared height shrinking to it when shorter.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Leo310

bun.lock

@@ -17,6 +17,7 @@
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^27.4.0",
     "obsidian": "^1.13.1",
+    "plotly.js-gl3d-dist-min": "^4.1.1",
     "postcss": "^8.5.28",
     "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",

package.json

@@ -82,6 +82,8 @@ import {
 	type PluginIntegration,
 	pluginExposesApi,
 	isCommunityPluginEnabled,
+	communityPluginDisplayName,
+	communityPluginStatus,
 	isInternalPluginEnabled,
 	getPluginIcon,
 	skillIcon,
@@ -959,6 +961,10 @@ export class AgentManager {
 							if (toolId.startsWith("exec_")) return boundExecTools.has(toolId);
 							return true;
 						},
+						pluginStatus: (pluginId) => ({
+							status: communityPluginStatus(this.plugin.app, pluginId),
+							displayName: communityPluginDisplayName(pluginId),
+						}),
 					}),
 				);
 			}

src/agent/AgentManager.ts

@@ -70,6 +70,26 @@ export function isCommunityPluginEnabled(app: App, pluginId: string): boolean {
 	return Boolean(app.plugins?.enabledPlugins?.has(pluginId));
 }
 
+export type CommunityPluginStatus = "enabled" | "disabled" | "missing";
+
+/**
+ * Installed-and-enabled / installed-but-disabled / not installed, for a community
+ * plugin id. "Installed" is read from the manifests Obsidian loaded from the plugins
+ * folder, so a plugin the user turned off still reads as installed.
+ */
+export function communityPluginStatus(app: App, pluginId: string): CommunityPluginStatus {
+	if (isCommunityPluginEnabled(app, pluginId)) return "enabled";
+	// @ts-ignore - Obsidian plugin API (not in official types)
+	return app.plugins?.manifests?.[pluginId] ? "disabled" : "missing";
+}
+
+/** Human-friendly name for a community plugin id, from the curated table; the id otherwise. */
+export function communityPluginDisplayName(pluginId: string): string {
+	return (
+		CURATED_PLUGIN_INTEGRATIONS.find((integration) => integration.pluginId === pluginId)?.displayName ?? pluginId
+	);
+}
+
 /**
  * Whether an Obsidian core (internal) plugin is enabled (e.g. "canvas", "bases").
  * Uses undocumented internal API — may need updates with Obsidian changes.
@@ -179,14 +199,15 @@ const BUNDLED_CORE_SKILL_ICONS: Record<string, string> = {
 	"manage-notes": "file-pen",
 	web: "globe",
 	"manage-skills": "wand-2",
+	views: "layout-dashboard",
 };
 
 /**
  * Fixed display order for the S2B built-in core skills (the 4 former capabilities). Used by
  * both the agent editor's Core Skills list and the agents-summary icon strip so the two never
  * drift. Core-plugin skills (Canvas, Bases, …) are ranked after all of these.
  */
-const S2B_CORE_SKILL_ORDER = ["explore-vault", "manage-notes", "web", "manage-skills"];
+const S2B_CORE_SKILL_ORDER = ["explore-vault", "manage-notes", "web", "manage-skills", "views"];
 
 /**
  * Sort rank for a core-category skill: listed S2B built-ins first in `S2B_CORE_SKILL_ORDER`,

src/agent/integrations/pluginIntegrations.ts

@@ -1,6 +1,26 @@
 import { tool } from "@langchain/core/tools";
 import { z } from "zod";
 import type { SkillsService } from "../../skills/SkillsService";
+import type { CommunityPluginStatus } from "../integrations/pluginIntegrations";
+
+/** Frontmatter key (under `metadata:`) listing community plugin ids a skill can make use of. */
+export const OPTIONAL_PLUGINS_METADATA_KEY = "optionalPlugins";
+
+const STATUS_TEXT: Record<CommunityPluginStatus, string> = {
+	enabled: "enabled",
+	disabled: "installed but disabled — the user can enable it under Settings → Community plugins",
+	missing: "not installed — the user can install it from Settings → Community plugins → Browse",
+};
+
+/** Split a space- or comma-separated id list from frontmatter. */
+export function parseOptionalPlugins(metadata: Record<string, string> | undefined): string[] {
+	const raw = metadata?.[OPTIONAL_PLUGINS_METADATA_KEY];
+	if (!raw) return [];
+	return raw
+		.split(/[\s,]+/)
+		.map((id) => id.trim())
+		.filter(Boolean);
+}
 
 export interface LoadSkillToolOptions {
 	/**
@@ -17,6 +37,13 @@ export interface LoadSkillToolOptions {
 	 * and without the note the model would call a tool that doesn't exist.
 	 */
 	isToolAvailable?: (toolId: string) => boolean;
+	/**
+	 * Live status of a community plugin a skill lists under `metadata.optionalPlugins`.
+	 * Appended to the loaded body so a skill whose *best* path depends on another
+	 * plugin (the views skill's Dataview queries) can tell the model up front whether
+	 * that path exists, instead of letting it find out from a failed result.
+	 */
+	pluginStatus?: (pluginId: string) => { status: CommunityPluginStatus; displayName: string };
 }
 
 /**
@@ -28,7 +55,7 @@ export interface LoadSkillToolOptions {
  * @returns A LangChain tool for loading skill content
  */
 export function createLoadSkillTool(skillsService: SkillsService, options: LoadSkillToolOptions) {
-	const { skillNames, isToolAvailable } = options;
+	const { skillNames, isToolAvailable, pluginStatus } = options;
 
 	// If no skills available, return a tool that explains this
 	if (skillNames.length === 0) {
@@ -77,6 +104,20 @@ export function createLoadSkillTool(skillsService: SkillsService, options: LoadS
 				}
 			}
 
+			const optionalPlugins = pluginStatus ? parseOptionalPlugins(skill.frontmatter.metadata) : [];
+			if (optionalPlugins.length > 0) {
+				lines.push("");
+				lines.push("## Plugin availability");
+				lines.push("");
+				for (const pluginId of optionalPlugins) {
+					const { status, displayName } = pluginStatus?.(pluginId) ?? {
+						status: "missing",
+						displayName: pluginId,
+					};
+					lines.push(`- ${displayName} (\`${pluginId}\`): ${STATUS_TEXT[status]}`);
+				}
+			}
+
 			lines.push("");
 			lines.push("## Instructions");
 			lines.push("");

src/agent/tools/loadSkill.ts

@@ -1,7 +1,8 @@
 <script lang="ts">
-import { Keymap, MarkdownRenderer, loadMathJax } from "obsidian";
+import { Component, Keymap, MarkdownRenderer, loadMathJax } from "obsidian";
 import { onDestroy } from "svelte";
 import { getPlugin } from "../../stores/state.svelte";
+import { VIEW_READY_EVENT } from "../../genview/viewFrame";
 import { findSealableEnd } from "../../utils/streamingMarkdown";
 import { openTagSearch } from "../../utils/tagSearch";
 import { VIEW_TYPE_CHAT } from "../../views/chat/Chat";
@@ -155,9 +156,27 @@ function normalizeLinks(containerEl: HTMLElement) {
 // untouched, and a live tail — the block still being written — that is the only
 // part re-parsed each frame. Without this the whole accumulated reply was torn
 // down and re-parsed every frame, O(length) per frame, which pinned the main
-// thread for the duration of a long reply (#482). Outside streaming, and when the
-// reply settles, the content is rendered as one document, so link-reference and
-// footnote definitions resolve exactly as before.
+// thread for the duration of a long reply (#482). The tail's staging element
+// carries `s2b-md-tail` while it renders, so a block processor can tell "still
+// being written" (show a placeholder) from "sealed" (render for real) — see
+// `genview/registerViewBlocks.ts`.
+//
+// Outside streaming — a settled reply's first render, and the moment a streamed
+// reply settles — the content is rendered as one document, so every construct
+// resolves exactly as a whole-document parse does (reference definitions, HTML
+// blocks and loose lists that a seam between segments would cut). That render is
+// double-buffered: it happens in a hidden wrapper while the previous DOM stays on
+// screen, and swaps in once the wrapper's view frames report ready (capped), so
+// settling never blanks a frame that was already showing. The wrapper is then
+// unwrapped so the container stays flat (call sites style with direct-child
+// selectors such as `[&>p]`) — unless it holds an iframe, which a DOM move would
+// reload; only then does the wrapper stay.
+
+const TAIL_CLASS = "s2b-md-tail";
+const DOC_CLASS = "s2b-md-doc";
+const DOC_PENDING_CLASS = "s2b-md-doc-pending";
+/** Upper bound on waiting for a settled document's view frames before swapping it in. */
+const VIEW_READY_GRACE_MS = 2000;
 
 let latest = { content: "", sourcePath: "", enableMath: true, streaming: false };
 let frame: number | null = null;
@@ -168,6 +187,23 @@ let destroyed = false;
 let sealedText = "";
 /** Nodes belonging to the live tail; replaced on every render while streaming. */
 let tailNodes: ChildNode[] = [];
+/** The last render was a whole document (so a resumed stream must start over). */
+let settled = false;
+/**
+ * Owners of the render children Obsidian's processors attach to rendered blocks
+ * (Dataview tables, `s2b-view` frames, embeds). Handing the renderer the plugin
+ * itself kept every such child alive until plugin unload; these are unloaded when
+ * the DOM they belong to goes away — the tail's on every tail render, the
+ * document's on reset, swap and destroy.
+ */
+let docComponent = loadedComponent();
+let tailComponent: Component | null = null;
+
+function loadedComponent(): Component {
+	const component = new Component();
+	component.load();
+	return component;
+}
 
 $effect(() => {
 	// Read every reactive dep here so the effect re-runs when any of them change;
@@ -179,6 +215,8 @@ $effect(() => {
 onDestroy(() => {
 	destroyed = true;
 	if (frame !== null) cancelAnimationFrame(frame);
+	tailComponent?.unload();
+	docComponent.unload();
 });
 
 function schedule() {
@@ -213,35 +251,83 @@ async function renderLatest() {
 	if (destroyed || !container) return;
 
 	if (!live) {
-		resetDom();
-		await appendSegment(text, path);
+		await renderDocument(text, path);
 		return;
 	}
 
 	// Streaming: content normally extends what is already sealed. Anything else
-	// (a reset at a tool-call boundary, an edit) starts over.
-	if (!text.startsWith(sealedText)) resetDom();
+	// (a settled document on screen, a reset at a tool-call boundary, an edit)
+	// starts over.
+	if (settled || !text.startsWith(sealedText)) resetDom();
 	const remainder = text.slice(sealedText.length);
 	const sealEnd = findSealableEnd(remainder);
 	removeTail();
 	if (sealEnd > 0) {
 		const segment = remainder.slice(0, sealEnd);
-		await appendSegment(segment, path);
+		await appendSegment(segment, path, docComponent);
 		if (destroyed || !container) return;
 		sealedText += segment;
 	}
-	tailNodes = await appendSegment(text.slice(sealedText.length), path);
+	tailComponent = loadedComponent();
+	tailNodes = await appendSegment(text.slice(sealedText.length), path, tailComponent, true);
+}
+
+/** Whole-document render, double-buffered behind whatever is currently showing. */
+async function renderDocument(text: string, path: string) {
+	if (!container) return;
+	const next = container.createDiv({ cls: `${DOC_CLASS} ${DOC_PENDING_CLASS}` });
+	const nextComponent = loadedComponent();
+	await renderInto(next, text, path, nextComponent);
+	if (!destroyed && container) await waitForViews(next);
+	if (destroyed || !container) {
+		nextComponent.unload();
+		next.remove();
+		return;
+	}
+	for (const node of [...container.childNodes]) if (node !== next) node.remove();
+	next.classList.remove(DOC_PENDING_CLASS);
+	if (!next.querySelector("iframe")) next.replaceWith(...next.childNodes);
+	docComponent.unload();
+	tailComponent?.unload();
+	tailComponent = null;
+	tailNodes = [];
+	sealedText = "";
+	docComponent = nextComponent;
+	settled = true;
+}
+
+/** Resolve once every view frame under `root` has reported ready, or after the grace period. */
+function waitForViews(root: HTMLElement): Promise<void> {
+	let pending = root.querySelectorAll(".s2b-view-frame:not([data-s2b-view-ready])").length;
+	if (pending === 0) return Promise.resolve();
+	return new Promise((resolve) => {
+		const finish = () => {
+			root.removeEventListener(VIEW_READY_EVENT, onReady);
+			window.clearTimeout(timer);
+			resolve();
+		};
+		const onReady = () => {
+			if (--pending <= 0) finish();
+		};
+		root.addEventListener(VIEW_READY_EVENT, onReady);
+		const timer = window.setTimeout(finish, VIEW_READY_GRACE_MS);
+	});
 }
 
 function resetDom() {
+	removeTail();
 	container?.empty();
 	sealedText = "";
-	tailNodes = [];
+	settled = false;
+	docComponent.unload();
+	docComponent = loadedComponent();
 }
 
 function removeTail() {
 	for (const node of tailNodes) node.remove();
 	tailNodes = [];
+	tailComponent?.unload();
+	tailComponent = null;
 }
 
 /**
@@ -251,21 +337,30 @@ function removeTail() {
  * the container stays flat: no wrapper element, so `:first-child`/`:last-child`
  * styling on the container keeps working across segment seams.
  */
-async function appendSegment(markdown: string, path: string): Promise<ChildNode[]> {
+async function appendSegment(markdown: string, path: string, component: Component, tail = false): Promise<ChildNode[]> {
 	if (!markdown || !container) return [];
-	const staging = container.createDiv({ attr: { style: "display: contents" } });
-	await MarkdownRenderer.render(plugin.app, markdown, staging, path, plugin);
+	const staging = container.createDiv({ cls: tail ? TAIL_CLASS : "", attr: { style: "display: contents" } });
+	await renderInto(staging, markdown, path, component);
 	if (destroyed || !container) {
 		staging.remove();
 		return [];
 	}
-	normalizeLinks(staging);
-	// The renderer may tag the target element (e.g. `markdown-rendered`); carry that over.
-	for (const cls of staging.classList) container.classList.add(cls);
 	const nodes = [...staging.childNodes];
 	staging.replaceWith(...nodes);
 	return nodes;
 }
+
+/** Render `markdown` into `target` (attached) and normalise the result. */
+async function renderInto(target: HTMLElement, markdown: string, path: string, component: Component) {
+	if (!markdown) return;
+	await MarkdownRenderer.render(plugin.app, markdown, target, path, component);
+	if (destroyed || !container) return;
+	normalizeLinks(target);
+	// The renderer may tag the target element (e.g. `markdown-rendered`); carry that over.
+	for (const cls of target.classList) {
+		if (!cls.startsWith("s2b-md-")) container.classList.add(cls);
+	}
+}
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -278,3 +373,20 @@ async function appendSegment(markdown: string, path: string): Promise<ChildNode[
   onmouseover={handleMouseOver}
   onmouseout={handleMouseOut}
 ></div>
+
+<style>
+	/* Anchor for the hidden double-buffer wrapper below. */
+	div {
+		position: relative;
+	}
+	/* A settling document renders here, off-flow and invisible but with the real
+	   width (post-processors measure layout), then swaps in. */
+	:global(.s2b-md-doc-pending) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		visibility: hidden;
+		pointer-events: none;
+	}
+</style>