@openforge-app/plugin-sdk 0.2.10 → 0.3.0

package/dist/testing/contracts.d.ts

@@ -1,7 +1,8 @@
 import type { BrowserSurfaceVisualFeedback } from '../browserSurfaces';
+import type { CompletedTaskQuery } from '../domain';
 import type { TestingOpenForgeRegistryFake } from './registryFake';
 import type { BackendMethodRegistration, BackendOpenForgeAPI, BackgroundServiceRegistration, CommandRegistration, CommandShortcutMetadata, ComposeTaskRequest, ConfigureStartPromptContributionRequest, CreateTaskRequest, FrontendOpenForgeAPI, InjectionPointLocation, AgentSessionWorkspace, ListAgentSessionsRequest, ListTaskSessionsRequest, JsonValue, NotificationRequest, OpenForgeNavigationRequest, OpenForgePackageMetadata, PluginSettingsSectionRegistration, PluginStorage, PluginTaskPaneTabRegistration, PluginReviewRowActionRegistration, PluginTaskUISectionRegistration, PluginViewRegistration, ShellSpawnRequest, SendTaskFollowUpRequest, StartTaskImplementationRequest, TaskStartPrefixContext, ExternalReadDirectoryRequest, ExternalReadFileRequest, ExternalReadTextFileChunksRequest, UserDataDirectoryRequest, UserDataFileRequest, UserDataFileWriteRequest } from '../types';
-import type { AgentSession, Task } from '../domain';
+import type { AgentSession, FileContent, Task, TaskLabel } from '../domain';
 export type TestingRuntimeScope = 'global' | 'project' | 'task';
 export type TestingRuntimeKind = 'commands' | 'events' | 'views' | 'taskPane' | 'taskUI' | 'reviewUI' | 'settings' | 'backend' | 'background';
 export type TestingMaybePromise<T> = T | Promise<T>;
@@ -16,6 +17,10 @@ export interface TestingExternalTextFile extends ExternalReadFileRequest {
 export type TestingExternalTextFileChunksCall = Omit<ExternalReadTextFileChunksRequest, 'signal' | 'chunkSizeBytes'> & {
     chunkSizeBytes: number;
 };
+export interface TestingTaskLabelAssignment {
+    taskId: string;
+    labels: TaskLabel[];
+}
 export interface TestingOpenForgeApiOptions {
     pluginId?: string;
     projectId?: string | null;
@@ -26,12 +31,16 @@ export interface TestingOpenForgeApiOptions {
     storage?: PluginStorage;
     /** Initial files exposed through `fs.userData`. Defaults to none. */
     userDataTextFiles?: UserDataFileWriteRequest[];
+    /** File contents returned by `fs.readFile`, keyed by project-relative path. */
+    projectFileContents?: Readonly<Record<string, FileContent>>;
     /**
      * Tasks returned by `tasks.list`. The mock filters them by the requested
      * `projectId` (when given) and drops `done` tasks unless `includeDone: true`,
      * mirroring the host capability. Defaults to an empty list.
      */
     tasks?: Task[];
+    /** Task Label assignments used by canonical Task projections. */
+    taskLabelAssignments?: TestingTaskLabelAssignment[];
     /** Agent Sessions returned by `tasks.listSessions`. Defaults to an empty list. */
     agentSessions?: AgentSession[];
     /** Compact workspace context keyed by Task ID for `agentSessions.list`. Defaults to none. */
@@ -76,6 +85,16 @@ export interface TestingOpenForgeApiCalls {
         projectId: string | null;
         includeDone: boolean;
     }>;
+    taskActiveRequests: Array<{
+        projectId: string;
+    }>;
+    taskCompletedRequests: Array<{
+        projectId: string;
+    } & CompletedTaskQuery>;
+    taskDetailRequests: Array<{
+        projectId: string;
+        taskId: string;
+    }>;
     agentSessionListRequests: ListAgentSessionsRequest[];
     taskSessionListRequests: ListTaskSessionsRequest[];
     taskStatusUpdates: Array<{

package/dist/testing/registryFake.d.ts

@@ -1,5 +1,5 @@
 import type { TaskBrowserSurfaceState } from '../browserSurfaces';
-import type { BackendPlugin, BackendPluginContext, FrontendPlugin, FrontendPluginContext, OpenForgePackageMetadata, PluginStorage } from '../types';
+import type { BackendPlugin, BackendPluginContext, FrontendPlugin, FrontendPluginContext, OpenForgePackageMetadata, TaskChangeEvent, PluginStorage } from '../types';
 import type { MockBackendOpenForgeAPI, MockFrontendOpenForgeAPI, TestingOpenForgeApiCalls, TestingOpenForgeApiOptions, TestingOpenForgeRegistrySnapshot } from './contracts';
 import { TestingSubscriptionSink } from './support.js';
 export declare class TestingOpenForgeRegistryFake {
@@ -28,6 +28,7 @@ export declare class TestingOpenForgeRegistryFake {
     createBackendContext(): BackendPluginContext;
     activateFrontend(plugin: FrontendPlugin): Promise<void>;
     activateBackend(plugin: BackendPlugin): Promise<void>;
+    emitTaskChange(event: TaskChangeEvent): void;
     setBrowserSurfaceState(taskId: string, id: string, patch: Partial<TaskBrowserSurfaceState>): void;
     disposeAll(): Promise<void>;
     getSnapshot(): TestingOpenForgeRegistrySnapshot;

package/dist/testing/registryFake.js

@@ -82,6 +82,9 @@ export class TestingOpenForgeRegistryFake {
         await plugin.activate(this.backendApi, this.createBackendContext());
         await this.backendServices.startNewBackgroundServices(existingServices);
     }
+    emitTaskChange(event) {
+        this.commonApi.emitTaskChange(event);
+    }
     setBrowserSurfaceState(taskId, id, patch) {
         this.frontendContributions.setBrowserSurfaceState(taskId, id, patch);
     }

package/dist/testing/support.d.ts

@@ -1,5 +1,5 @@
 import type { AgentSessionWorkspace, AgentCommandMetadata, CommandDescriptor, Disposable, JsonValue, OpenForgeContextSnapshot, OpenForgeNavigationRequest, OpenForgeNavigationSnapshot, OpenForgePackageMetadata, PluginStorage, StartPromptContribution, SubscriptionSink } from '../types';
-import type { AgentSession, Task } from '../domain';
+import type { AgentSession, FileContent, Task, TaskLabel } from '../domain';
 import type { TestingCommandContribution, TestingMaybePromise, TestingExternalTextFile, TestingOpenForgeApiCalls, TestingOpenForgeApiOptions, TestingRuntimeKind } from './contracts';
 export declare function createDisposable(dispose: () => TestingMaybePromise<void>): Disposable;
 export declare class TestingSubscriptionSink implements SubscriptionSink {
@@ -31,10 +31,12 @@ export declare class TestingRegistryServices {
     readonly storage: PluginStorage;
     readonly config: Map<string, JsonValue>;
     readonly seededTasks: Task[];
+    readonly seededTaskLabelAssignments: Map<string, TaskLabel[]>;
     readonly seededAgentSessions: AgentSession[];
     readonly agentSessionWorkspaces: Readonly<Record<string, AgentSessionWorkspace>>;
     readonly externalTextFiles: TestingExternalTextFile[];
     readonly userDataTextFiles: Map<string, string>;
+    readonly projectFileContents: Readonly<Record<string, FileContent>>;
     readonly claims: TestingContributionClaims;
     constructor(options?: TestingOpenForgeApiOptions);
     localQualifiedId(kind: TestingRuntimeKind, id: string): string;

package/dist/testing/support.js

@@ -44,6 +44,9 @@ export function createTestingCalls() {
         taskImplementationStarts: [],
         taskFollowUps: [],
         taskListRequests: [],
+        taskActiveRequests: [],
+        taskCompletedRequests: [],
+        taskDetailRequests: [],
         agentSessionListRequests: [],
         taskSessionListRequests: [],
         taskStatusUpdates: [],
@@ -205,10 +208,12 @@ export class TestingRegistryServices {
     storage;
     config = new Map();
     seededTasks;
+    seededTaskLabelAssignments;
     seededAgentSessions;
     agentSessionWorkspaces;
     externalTextFiles;
     userDataTextFiles = new Map();
+    projectFileContents;
     claims = new TestingContributionClaims();
     constructor(options = {}) {
         this.pluginId = options.pluginId ?? 'test-plugin';
@@ -224,9 +229,11 @@ export class TestingRegistryServices {
         this.calls = createTestingCalls();
         this.storage = options.storage ?? createMemoryPluginStorage(this.calls);
         this.seededTasks = options.tasks ?? [];
+        this.seededTaskLabelAssignments = new Map((options.taskLabelAssignments ?? []).map(assignment => [assignment.taskId, assignment.labels]));
         this.seededAgentSessions = options.agentSessions ?? [];
         this.agentSessionWorkspaces = options.agentSessionWorkspaces ?? {};
         this.externalTextFiles = options.externalTextFiles ?? [];
+        this.projectFileContents = options.projectFileContents ?? {};
         for (const file of options.userDataTextFiles ?? []) {
             this.userDataTextFiles.set(file.path, file.content);
         }

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte';
 import type { BrowserSurfacesAPI } from './browserSurfaces';
-import type { BoardStatus, AgentSession, CommandInfo, FileContent, FileEntry, Project, ProjectAttention, ReviewPullRequest, Task, TaskWorkspaceInfo, WritableBoardStatus } from './domain';
+import type { BoardStatus, AgentSession, CommandInfo, FileContent, FileEntry, Project, ProjectAttention, ActiveTasks, CompletedTaskPage, CompletedTaskQuery, TaskRead, TaskDetail, ReviewPullRequest, Task, TaskWorkspaceInfo, WorktreeSource, WritableBoardStatus } from './domain';
 export type SupportedOpenForgeApiVersion = 1;
 export declare const SUPPORTED_OPENFORGE_API_VERSIONS: readonly [1, ...1[]];
 export declare const OPENFORGE_PLUGIN_API_VERSION: SupportedOpenForgeApiVersion;
@@ -202,6 +202,7 @@ export interface PluginTaskPaneProps extends Record<string, unknown> {
     api: FrontendOpenForgeAPI;
     context: OpenForgeContextSnapshot;
     taskId: string;
+    task: TaskDetail;
     projectId: string | null;
 }
 export interface PluginTaskUISectionProps extends PluginTaskPaneProps {
@@ -501,6 +502,14 @@ export interface ComposeTaskRequest {
     initialPrompt: string;
     sourceTicketUrl?: string | null;
     title?: string | null;
+    /** Seeds the dialog's worktree source instead of the project default. */
+    worktreeSource?: WorktreeSource | null;
+    /**
+     * When `worktreeSource` is `existingBranch`, seeds the branch selector.
+     * Pull-request head refs may be short names; the host maps them onto the
+     * stored selector value (`origin/<name>` when origin has the branch).
+     */
+    worktreeBranch?: string | null;
 }
 export interface ComposeTaskResult {
     task: Task;
@@ -601,24 +610,38 @@ export interface AgentSessionSummaryPage {
 export interface AgentSessionsAPI {
     list(request: ListAgentSessionsRequest): Promise<AgentSessionSummaryPage>;
 }
-export interface TasksAPI {
+export type TaskChangeReason = 'created' | 'updated' | 'completed' | 'attention' | 'execution';
+/**
+ * A coalescible signal that one or more bounded Task reads may now be stale.
+ * It never contains a Task snapshot.
+ */
+export interface TaskChangeEvent {
+    projectId: string;
+    taskId: string | null;
+    reason: TaskChangeReason;
+}
+export interface TaskOperationsAPI {
     /**
-     * Lists tasks, optionally scoped to a project. By default done tasks are
-     * excluded (matching the app board's active-only view); pass
-     * `includeDone: true` to include tasks in the terminal `done` state. The
-     * unscoped listing (no `projectId`) always returns all states, so
-     * `includeDone` only affects the project-scoped path.
+     * Lists legacy Task rows. Project-scoped reads exclude Completed Tasks unless
+     * `includeDone` is true; unscoped reads preserve the complete legacy array.
+     * @deprecated Use `active`, `completed`, or `detail`. Removed in version 2.
      */
     list(request?: {
         projectId?: string | null;
         includeDone?: boolean;
     }): Promise<Task[]>;
+    /** @deprecated Use `detail`. Removed in version 2. */
     get(taskId: string): Promise<Task | null>;
+    active(projectId: string): Promise<ActiveTasks>;
+    completed(projectId: string, query?: CompletedTaskQuery): Promise<CompletedTaskPage>;
+    detail(projectId: string, taskId: string): Promise<TaskRead | null>;
     create(request: CreateTaskRequest): Promise<Task>;
     /**
      * Opens the host's create-task dialog pre-filled, letting the user edit the
      * prompt — including anything contributed at that injection point —
-     * before the task exists.
+     * before the task exists. Optional `worktreeSource` / `worktreeBranch` seed
+     * the environment controls the same way `title` and `sourceTicketUrl` seed
+     * their fields.
      * Resolves null if they dismiss it.
      */
     compose(request: ComposeTaskRequest): Promise<ComposeTaskResult | null>;
@@ -632,6 +655,13 @@ export interface TasksAPI {
     /** Returns matching Agent Sessions newest first. */
     listSessions(request: ListTaskSessionsRequest): Promise<AgentSession[]>;
 }
+export interface TasksAPI extends TaskOperationsAPI {
+    /**
+     * Subscribes to coalescible Task invalidations for one Project.
+     * Repeat the relevant bounded read instead of treating events as snapshots.
+     */
+    onDidChange(projectId: string, handler: (event: TaskChangeEvent) => void): Disposable;
+}
 export interface ProjectsAPI {
     list(): Promise<Project[]>;
     get(projectId: string): Promise<Project | null>;
@@ -663,7 +693,7 @@ export interface OpenForgeCommonAPI {
         getSnapshot(): OpenForgeContextSnapshot;
     };
     agentSessions: AgentSessionsAPI;
-    tasks: TasksAPI;
+    tasks: TaskOperationsAPI;
     projects: ProjectsAPI;
     fs: FileSystemAPI;
     shell: ShellAPI;
@@ -674,6 +704,7 @@ export interface OpenForgeCommonAPI {
     projectConfig: KeyValueConfigAPI;
 }
 export interface FrontendOpenForgeAPI extends OpenForgeCommonAPI {
+    tasks: TasksAPI;
     browserSurfaces: BrowserSurfacesAPI;
     navigation: NavigationAPI;
     views: FrontendViewRegistry;

package/dist/ui/MarkdownContent.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
+  import { getRenderedMermaidDiagram, getRenderedMermaidSvg, observeMermaidTheme, renderMermaidDiagrams, type RenderedMermaidDiagram } from '../mermaid'
+  import MermaidDiagramPreview from './MermaidDiagramPreview.svelte'
   import {
     getMarkdownRepositoryLinkSuffix,
     MARKDOWN_REMOTE_MEDIA_ATTRIBUTE,
@@ -37,7 +39,11 @@
   }: Props = $props()
 
   let root = $state<HTMLDivElement | null>(null)
+  let activeMermaidDiagram = $state<RenderedMermaidDiagram | null>(null)
   let imageResolutionId = 0
+  let mermaidRenderId = 0
+  let mermaidThemeRevision = $state(0)
+  let stopObservingMermaidTheme: (() => void) | undefined
   let html = $derived(renderMarkdownHtml(content, {
     imageBaseUrl: resolveRepositoryImage ? null : imageBaseUrl,
     markdownFilePath,
@@ -137,6 +143,31 @@
     }))
   }
 
+  function synchronizeActiveMermaidDiagram() {
+    if (!activeMermaidDiagram) return
+
+    const svg = getRenderedMermaidSvg(activeMermaidDiagram.wrapper)
+    activeMermaidDiagram = svg ? { ...activeMermaidDiagram, svg } : null
+  }
+
+  $effect(() => {
+    if (!root || stopObservingMermaidTheme) return
+    stopObservingMermaidTheme = observeMermaidTheme(root.ownerDocument, () => {
+      mermaidThemeRevision++
+    })
+  })
+
+  $effect(() => {
+    const runId = ++mermaidRenderId
+    void html
+    void mermaidThemeRevision
+    if (!root) return
+
+    void renderMermaidDiagrams(root, () => runId === mermaidRenderId).then(() => {
+      if (runId === mermaidRenderId) synchronizeActiveMermaidDiagram()
+    })
+  })
+
   $effect(() => {
     const runId = ++imageResolutionId
     void html
@@ -149,6 +180,9 @@
 
   onDestroy(() => {
     imageResolutionId++
+    mermaidRenderId++
+    activeMermaidDiagram = null
+    stopObservingMermaidTheme?.()
   })
 
   function openMarkdownLink(href: string, absoluteHref: string) {
@@ -190,6 +224,14 @@
   function handleClick(event: MouseEvent) {
     if (!(event.target instanceof Element)) return
 
+    const diagram = getRenderedMermaidDiagram(event.target)
+    if (diagram) {
+      event.preventDefault()
+      diagram.trigger.focus()
+      activeMermaidDiagram = diagram
+      return
+    }
+
     const image = findEventImage(event.target)
     if (image && onOpenImage && image.getAttribute('src')) {
       event.preventDefault()
@@ -221,3 +263,7 @@
 <div bind:this={root} role="presentation" class="markdown-body" onclick={handleClick} onkeydown={handleKeydown}>
   {@html html}
 </div>
+
+{#if activeMermaidDiagram}
+  <MermaidDiagramPreview svg={activeMermaidDiagram.svg} onClose={() => { activeMermaidDiagram = null }} />
+{/if}

package/dist/ui/MermaidDiagramPreview.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import {
+    FIT_MERMAID_ZOOM,
+    calculateMermaidFitScale,
+    canZoomMermaidIn,
+    canZoomMermaidOut,
+    formatMermaidZoomLabel,
+    resetMermaidZoom,
+    resolveMermaidZoomScale,
+    zoomMermaidIn,
+    zoomMermaidOut,
+    type MermaidSize,
+    type MermaidZoomState,
+  } from '../mermaidZoom'
+  import Modal from './Modal.svelte'
+
+  interface Props {
+    svg: string
+    onClose: () => void
+  }
+
+  let { svg, onClose }: Props = $props()
+  let viewport = $state<HTMLDivElement | null>(null)
+  let svgHost = $state<HTMLDivElement | null>(null)
+  let closeButton = $state<HTMLButtonElement | null>(null)
+  let viewportSize = $state<MermaidSize>({ width: 0, height: 0 })
+  let zoom = $state<MermaidZoomState>(FIT_MERMAID_ZOOM)
+  let resizeObserver: ResizeObserver | undefined
+
+  function readSvgSize(markup: string): MermaidSize | null {
+    const template = document.createElement('template')
+    template.innerHTML = markup
+    const element = template.content.querySelector('svg')
+    if (!element) return null
+
+    const viewBox = element.getAttribute('viewBox')
+      ?.trim()
+      .split(/[\s,]+/)
+      .map(Number)
+    if (viewBox?.length === 4 && viewBox.every(Number.isFinite) && viewBox[2] > 0 && viewBox[3] > 0) {
+      return { width: viewBox[2], height: viewBox[3] }
+    }
+
+    const width = Number.parseFloat(element.getAttribute('width') ?? '')
+    const height = Number.parseFloat(element.getAttribute('height') ?? '')
+    return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0
+      ? { width, height }
+      : null
+  }
+
+  let diagramSize = $derived(readSvgSize(svg))
+  let fitScale = $derived(diagramSize
+    ? calculateMermaidFitScale(diagramSize, viewportSize)
+    : null)
+  let renderedScale = $derived(resolveMermaidZoomScale(zoom, fitScale))
+  let zoomLabel = $derived(formatMermaidZoomLabel(zoom, fitScale))
+  let renderedWidth = $derived(diagramSize ? diagramSize.width * renderedScale : null)
+  let renderedHeight = $derived(diagramSize ? diagramSize.height * renderedScale : null)
+
+  function updateViewportSize(width: number, height: number) {
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return
+    viewportSize = { width, height }
+  }
+
+  $effect(() => {
+    if (!viewport || resizeObserver) return
+
+    const bounds = viewport.getBoundingClientRect()
+    updateViewportSize(bounds.width, bounds.height)
+    if (typeof ResizeObserver !== 'function') return
+
+    resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries.find(candidate => candidate.target === viewport)
+      if (entry) updateViewportSize(entry.contentRect.width, entry.contentRect.height)
+    })
+    resizeObserver.observe(viewport)
+  })
+
+  $effect(() => {
+    void svg
+    if (!svgHost || renderedWidth === null || renderedHeight === null) return
+
+    const element = svgHost.querySelector('svg') as SVGSVGElement | null
+    if (!element) return
+    element.style.display = 'block'
+    element.style.width = `${renderedWidth}px`
+    element.style.height = `${renderedHeight}px`
+    element.style.maxWidth = 'none'
+  })
+
+  onDestroy(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+  })
+
+  function zoomIn() {
+    zoom = zoomMermaidIn(zoom, fitScale)
+  }
+
+  function zoomOut() {
+    zoom = zoomMermaidOut(zoom, fitScale)
+  }
+
+  function resetZoom() {
+    zoom = resetMermaidZoom()
+  }
+
+  function fitToWindow() {
+    zoom = FIT_MERMAID_ZOOM
+  }
+
+  function handleKeydown(event: KeyboardEvent): boolean | void {
+    if (event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented) return
+
+    if (event.key === '+' || event.key === '=') {
+      if (canZoomMermaidIn(zoom, fitScale)) zoomIn()
+    } else if (event.key === '-') {
+      if (canZoomMermaidOut(zoom, fitScale)) zoomOut()
+    } else if (event.key === '0') {
+      resetZoom()
+    } else if (event.key.toLowerCase() === 'f') {
+      fitToWindow()
+    } else {
+      return
+    }
+
+    event.preventDefault()
+    return true
+  }
+</script>
+
+<Modal
+  {onClose}
+  ariaLabel="Mermaid diagram preview"
+  showHeader={false}
+  maxWidth="calc(100vw - 2rem)"
+  boxClass="mermaid-diagram-preview h-[calc(100vh-2rem)] !max-h-[calc(100vh-2rem)] w-[calc(100vw-2rem)]"
+  initialFocus={() => closeButton}
+  onKeydown={handleKeydown}
+>
+  <div class="flex min-h-0 flex-1 flex-col bg-base-300/40">
+    <header class="mermaid-diagram-preview-toolbar flex min-h-14 shrink-0 items-center gap-2 border-b border-base-300 bg-base-100 px-4 py-2">
+      <h2 class="m-0 min-w-0 flex-1 truncate text-sm font-semibold text-base-content">Mermaid diagram preview</h2>
+
+      <div class="flex items-center gap-1" role="group" aria-label="Diagram zoom controls">
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm h-11 min-h-11 w-11 p-0"
+          aria-label="Zoom out"
+          title="Zoom out (-)"
+          disabled={!canZoomMermaidOut(zoom, fitScale)}
+          onclick={zoomOut}
+        >
+          <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3M8 11h6" />
+          </svg>
+        </button>
+
+        <output class="min-w-20 text-center text-xs tabular-nums text-base-content/70" aria-live="polite">{zoomLabel}</output>
+
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm h-11 min-h-11 w-11 p-0"
+          aria-label="Zoom in"
+          title="Zoom in (+)"
+          disabled={!canZoomMermaidIn(zoom, fitScale)}
+          onclick={zoomIn}
+        >
+          <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3M11 8v6M8 11h6" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm h-11 min-h-11 px-3"
+          aria-label="Reset zoom to 100%"
+          title="Reset zoom to 100% (0)"
+          onclick={resetZoom}
+        >100%</button>
+
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm h-11 min-h-11 px-3"
+          aria-label="Fit diagram to window"
+          aria-pressed={zoom.mode === 'fit'}
+          title="Fit diagram to window (F)"
+          onclick={fitToWindow}
+        >Fit</button>
+      </div>
+
+      <button
+        bind:this={closeButton}
+        type="button"
+        class="btn btn-ghost btn-sm h-11 min-h-11 w-11 p-0"
+        aria-label="Close diagram preview"
+        onclick={onClose}
+      >
+        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d="M18 6 6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </header>
+
+    <div bind:this={viewport} data-testid="mermaid-preview-viewport" class="mermaid-diagram-preview-viewport min-h-0 flex-1 overflow-auto p-4">
+      <div data-testid="mermaid-preview-canvas" class="mermaid-diagram-preview-canvas flex h-max min-h-full w-max min-w-full items-center justify-center">
+        <div bind:this={svgHost} class="shrink-0">
+          {@html svg}
+        </div>
+      </div>
+    </div>
+  </div>
+</Modal>

package/dist/ui/Modal.svelte

@@ -179,7 +179,12 @@
         {#if header}
           {@render header()}
         {/if}
-        <button class="btn btn-ghost btn-xs shrink-0" aria-label={closeLabel} onclick={handleCloseButtonClick} type="button" disabled={closeDisabled}>✕</button>
+        <button class="btn btn-ghost h-11 min-h-11 w-11 min-w-11 shrink-0 p-0" aria-label={closeLabel} onclick={handleCloseButtonClick} type="button" disabled={closeDisabled}>
+          <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
       </div>
     {/if}
     {@render children()}

package/dist/ui/PluginSidebarLink.svelte

@@ -23,17 +23,12 @@
     class: className,
   }: Props = $props()
 
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key !== 'Enter' && event.key !== ' ') return
-    event.preventDefault()
-    onActivate()
-  }
 </script>
 
 <button
   type="button"
   class={[
-    'relative mx-2 flex min-h-11 w-auto items-center rounded-lg gap-3 py-2.5 cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+    'relative mx-2 flex min-h-11 w-[calc(100%_-_1rem)] items-center rounded-lg gap-3 py-2.5 cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
     collapsed ? 'justify-center px-0' : 'px-3',
     active ? 'bg-primary/10 text-primary' : 'text-base-content/55 hover:bg-base-200 hover:text-base-content',
     className,
@@ -42,7 +37,6 @@
   aria-label={accessibleName}
   aria-current={active ? 'page' : undefined}
   onclick={onActivate}
-  onkeydown={handleKeydown}
 >
   {#if leading}
     <span class="relative shrink-0">{@render leading()}</span>

package/dist/ui/icons/video.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M24,6l2,6H22L20,6H17l2,6H15L13,6H10l2,6H8L6,6H5A3,3,0,0,0,2,9V23a3,3,0,0,0,3,3H27a3,3,0,0,0,3-3V6Z" style="fill: #ff9800"/>
+</svg>

package/package.json

@@ -1,6 +1,14 @@
 {
   "name": "@openforge-app/plugin-sdk",
-  "version": "0.2.10",
+  "version": "0.3.0",
+  "description": "TypeScript SDK for building trusted OpenForge frontend and backend plugins.",
+  "homepage": "https://github.com/koenvg/openforge/blob/main/docs/plugin-authoring.md",
+  "keywords": [
+    "openforge",
+    "plugin",
+    "sdk",
+    "svelte"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -94,15 +102,16 @@
     "access": "public"
   },
   "dependencies": {
-    "dompurify": "^3.4.13",
-    "marked": "^18.0.10"
+    "dompurify": "^3.4.14",
+    "marked": "^18.0.11",
+    "mermaid": "^11.17.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@types/node": "26.2.0",
-    "svelte": "5.56.9",
+    "@types/node": "26.3.0",
+    "svelte": "5.56.10",
     "semver": "^7.8.5",
     "typescript": "^7.0.2",
     "vitest": "^4.1.11",