@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/workbench/management/management.css

@@ -1,4 +1,4 @@
-/* workbench/management feature styles — Plan A import hub */
-@import './library-catalog-picker-dialog.css';
-@import './library-facet-filter-dialog.css';
-@import './management-panel.css';
+/* workbench/management feature styles — Plan A import hub */
+@import './library-catalog-picker-dialog.css';
+@import './library-facet-filter-dialog.css';
+@import './management-panel.css';

package/src/workbench/management/types.ts

@@ -1,126 +1,139 @@
-export type CommandManagementEntryStatus = 'available' | 'disabled' | 'no-handler';
-
-export interface CommandManagementEntry {
-  readonly category?: string | undefined;
-  readonly description?: string | undefined;
-  readonly id: string;
-  readonly keybinding?: string | undefined;
-  readonly label: string;
-  readonly menuSurfaces?: readonly string[] | undefined;
-  readonly source: string;
-  readonly sourceLabel: string;
-  readonly status: CommandManagementEntryStatus;
-}
-
-export interface CommandManagementGroup {
-  readonly entries: readonly CommandManagementEntry[];
-  readonly id: string;
-  readonly label: string;
-}
-
-export interface CommandManagementRunState {
-  readonly commandId: string;
-  readonly message?: string | undefined;
-  readonly status: 'running' | 'success' | 'error';
-  readonly timestamp: number;
-}
-
-export type AccountManagementEntryStatus = 'active' | 'signed-out' | 'expired';
-
-export interface AccountManagementEntry {
-  readonly displayName: string;
-  readonly email?: string | undefined;
-  readonly id: string;
-  readonly providerId: string;
-  readonly providerLabel?: string | undefined;
-  readonly status?: AccountManagementEntryStatus | undefined;
-}
-
-export interface AccountManagementPanelProps {
-  accounts: readonly AccountManagementEntry[];
-  activeAccountId?: string | undefined;
-  automationHint?: string | undefined;
-  className?: string | undefined;
-  emptyLabel?: string | undefined;
-  onSignOut?: ((accountId: string) => void) | undefined;
-  sessionLabel?: string | undefined;
-}
-
-export interface CommandManagementPanelProps {
-  className?: string | undefined;
-  emptyLabel?: string | undefined;
-  groups: readonly CommandManagementGroup[];
-  lastRun?: CommandManagementRunState | undefined;
-  onRunCommand?: ((commandId: string) => void | Promise<void>) | undefined;
-  query?: string | undefined;
-  summaryLabel?: string | undefined;
-}
-
-export type ExtensionManagementEntrySource = 'bundled' | 'installed';
-
-export interface ExtensionManagementFeatureItem {
-  readonly description?: string | undefined;
-  readonly id: string;
-  readonly label: string;
-}
-
-export interface ExtensionManagementFeatureSummary {
-  readonly capabilities?: {
-    readonly provides: readonly string[];
-    readonly requires: readonly string[];
-  };
-  readonly commands?: readonly ExtensionManagementFeatureItem[] | undefined;
-  readonly documentViews?: readonly ExtensionManagementFeatureItem[] | undefined;
-  readonly menus?: readonly ExtensionManagementFeatureItem[] | undefined;
-  readonly permissions?: readonly string[] | undefined;
-  readonly settings?: readonly ExtensionManagementFeatureItem[] | undefined;
-  readonly views?: readonly ExtensionManagementFeatureItem[] | undefined;
-}
-
-export interface ExtensionManagementDiagnosticSummary {
-  readonly message: string;
-  readonly severity: 'error' | 'warning';
-}
-
-export interface ExtensionInstallPlanSummary {
-  readonly blocked: boolean;
-  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
-  readonly enableExtensionIds?: readonly string[] | undefined;
-  readonly installExtensionIds?: readonly string[] | undefined;
-  readonly permissions?: readonly string[] | undefined;
-  readonly requiresApproval: boolean;
-}
-
-export interface ExtensionManagementEntry {
-  readonly category: string;
-  readonly description?: string | undefined;
-  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
-  readonly displayName: string;
-  readonly enabled: boolean;
-  readonly features?: ExtensionManagementFeatureSummary | undefined;
-  readonly id: string;
-  readonly installedAt?: string | undefined;
-  readonly manifestUrl?: string | undefined;
-  readonly source: ExtensionManagementEntrySource;
-}
-
-export interface ExtensionCatalogBrowseEntry {
-  readonly category: string;
-  readonly description: string;
-  readonly displayName: string;
-  readonly icon?: string | undefined;
-  readonly id: string;
-  readonly installPlan?: ExtensionInstallPlanSummary | undefined;
-  readonly installed: boolean;
-  readonly manifestUrl: string;
-}
-
-export interface ExtensionManagementPanelProps {
-  browseEntries: readonly ExtensionCatalogBrowseEntry[];
-  catalogError?: string | undefined;
-  catalogLoading?: boolean | undefined;
-  className?: string | undefined;
-  installedEntries: readonly ExtensionManagementEntry[];
-  onInstall?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
-  onToggleEnabled?: ((entry: ExtensionManagementEntry, enabled: boolean) => void) | undefined;
-}
+export type CommandManagementEntryStatus = 'available' | 'disabled' | 'no-handler';
+
+export interface CommandManagementEntry {
+  readonly category?: string | undefined;
+  readonly description?: string | undefined;
+  readonly id: string;
+  readonly keybinding?: string | undefined;
+  readonly label: string;
+  readonly menuSurfaces?: readonly string[] | undefined;
+  readonly source: string;
+  readonly sourceLabel: string;
+  readonly status: CommandManagementEntryStatus;
+}
+
+export interface CommandManagementGroup {
+  readonly entries: readonly CommandManagementEntry[];
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface CommandManagementRunState {
+  readonly commandId: string;
+  readonly message?: string | undefined;
+  readonly status: 'running' | 'success' | 'error';
+  readonly timestamp: number;
+}
+
+export type AccountManagementEntryStatus = 'active' | 'signed-out' | 'expired';
+
+export interface AccountManagementEntry {
+  readonly displayName: string;
+  readonly email?: string | undefined;
+  readonly id: string;
+  readonly providerId: string;
+  readonly providerLabel?: string | undefined;
+  readonly status?: AccountManagementEntryStatus | undefined;
+}
+
+export interface AccountManagementPanelProps {
+  accounts: readonly AccountManagementEntry[];
+  activeAccountId?: string | undefined;
+  automationHint?: string | undefined;
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  onSignOut?: ((accountId: string) => void) | undefined;
+  sessionLabel?: string | undefined;
+}
+
+export interface CommandManagementPanelProps {
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  groups: readonly CommandManagementGroup[];
+  lastRun?: CommandManagementRunState | undefined;
+  onRunCommand?: ((commandId: string) => void | Promise<void>) | undefined;
+  query?: string | undefined;
+  summaryLabel?: string | undefined;
+}
+
+export type ExtensionManagementEntrySource = 'bundled' | 'installed';
+
+export interface ExtensionManagementFeatureItem {
+  readonly description?: string | undefined;
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface ExtensionManagementFeatureSummary {
+  readonly capabilities?: {
+    readonly provides: readonly string[];
+    readonly requires: readonly string[];
+  };
+  readonly commands?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly documentViews?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly menus?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly permissions?: readonly string[] | undefined;
+  readonly settings?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly views?: readonly ExtensionManagementFeatureItem[] | undefined;
+}
+
+export interface ExtensionManagementDiagnosticSummary {
+  readonly message: string;
+  readonly severity: 'error' | 'warning';
+}
+
+export interface ExtensionInstallPlanSummary {
+  readonly blocked: boolean;
+  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
+  readonly enableExtensionIds?: readonly string[] | undefined;
+  readonly installExtensionIds?: readonly string[] | undefined;
+  readonly permissions?: readonly string[] | undefined;
+  readonly requiresApproval: boolean;
+}
+
+export interface ExtensionManagementEntry {
+  readonly category: string;
+  readonly description?: string | undefined;
+  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
+  readonly displayName: string;
+  readonly enabled: boolean;
+  readonly features?: ExtensionManagementFeatureSummary | undefined;
+  readonly id: string;
+  readonly installedAt?: string | undefined;
+  readonly manifestUrl?: string | undefined;
+  readonly source: ExtensionManagementEntrySource;
+}
+
+export interface ExtensionCatalogBrowseEntry {
+  readonly category: string;
+  readonly description: string;
+  readonly displayName: string;
+  readonly icon?: string | undefined;
+  readonly id: string;
+  readonly installPlan?: ExtensionInstallPlanSummary | undefined;
+  readonly installed: boolean;
+  readonly manifestUrl: string;
+}
+
+export interface ExtensionInstallOptions {
+  /** Required when the install plan sets `requiresApproval`. */
+  readonly approved?: boolean | undefined;
+}
+
+export interface ExtensionManagementPanelProps {
+  browseEntries: readonly ExtensionCatalogBrowseEntry[];
+  catalogError?: string | undefined;
+  catalogLoading?: boolean | undefined;
+  className?: string | undefined;
+  installedEntries: readonly ExtensionManagementEntry[];
+  onInstall?:
+    ((entry: ExtensionCatalogBrowseEntry, options?: ExtensionInstallOptions) => void) | undefined;
+  onToggleEnabled?: ((entry: ExtensionManagementEntry, enabled: boolean) => void) | undefined;
+  /**
+   * Host-owned durable trust check. When true for an entry, the install confirm
+   * prompt is skipped and `{ approved: true }` is used.
+   */
+  isInstallTrusted?: ((entry: ExtensionCatalogBrowseEntry) => boolean) | undefined;
+  /** Persist trust after the user confirms a permissioned install. */
+  onRememberInstallTrust?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
+}

package/src/workbench/{MarkdownPreview.tsx → markdown/MarkdownPreview.tsx}

@@ -1,147 +1,162 @@
-import Markdown from 'react-markdown';
-import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { cx } from '../utils/cx';
-import { workbenchMarkdownRemarkPlugins } from './markdownRemarkPlugins';
-
-export interface WorkbenchMarkdownPreviewProps extends ComponentPropsWithoutRef<'article'> {
-  source: string;
-}
-
-export function WorkbenchMarkdownPreview({
-  className,
-  source,
-  ...props
-}: WorkbenchMarkdownPreviewProps) {
-  return (
-    <article className={cx('ui-workbench-markdown-preview', className)} {...props}>
-      <Markdown
-        remarkPlugins={workbenchMarkdownRemarkPlugins}
-        components={{
-          a: ({ children, href }) => (
-            <a href={href} rel="noreferrer" target={href?.startsWith('#') ? undefined : '_blank'}>
-              {children}
-            </a>
-          ),
-          code: ({ children, className: codeClassName }) => (
-            <code className={cx('ui-workbench-markdown-preview__code', codeClassName)}>
-              {children}
-            </code>
-          ),
-          pre: ({ children }) => {
-            const codeBlock = getMarkdownCodeBlock(children);
-
-            if (codeBlock?.language === 'mermaid') {
-              return <WorkbenchMermaidPreview source={codeBlock.source} />;
-            }
-
-            return <pre>{children}</pre>;
-          },
-        }}
-      >
-        {source}
-      </Markdown>
-    </article>
-  );
-}
-
-function WorkbenchMermaidPreview({ source }: { source: string }) {
-  const summary = summarizeMermaidSource(source);
-
-  return (
-    <figure
-      className="ui-workbench-markdown-preview__mermaid"
-      data-testid="markdown-mermaid-preview"
-    >
-      <figcaption className="ui-workbench-markdown-preview__mermaid-header">
-        <span className="ui-workbench-markdown-preview__mermaid-title">
-          <i aria-hidden className="codicon codicon-git-branch" />
-          Mermaid
-        </span>
-        <span className="ui-workbench-markdown-preview__mermaid-kind">{summary.kind}</span>
-      </figcaption>
-      <div
-        className="ui-workbench-markdown-preview__mermaid-canvas"
-        aria-label="Mermaid diagram preview"
-      >
-        {summary.nodes.length > 0 ? (
-          <div className="ui-workbench-markdown-preview__mermaid-flow">
-            {summary.nodes.map((node, index) => (
-              <span
-                key={`${node}-${index}`}
-                className="ui-workbench-markdown-preview__mermaid-node"
-              >
-                {node}
-              </span>
-            ))}
-          </div>
-        ) : (
-          <pre className="ui-workbench-markdown-preview__mermaid-source">{source.trim()}</pre>
-        )}
-      </div>
-    </figure>
-  );
-}
-
-function getMarkdownCodeBlock(children: ReactNode): { language: string; source: string } | null {
-  const [child] = Children.toArray(children);
-  if (!isValidElement<{ className?: string | undefined; children?: ReactNode }>(child)) {
-    return null;
-  }
-
-  const className = child.props.className;
-  if (typeof className !== 'string') {
-    return null;
-  }
-
-  const languageMatch = /\blanguage-([a-z0-9_-]+)\b/i.exec(className);
-  if (!languageMatch) {
-    return null;
-  }
-
-  return {
-    language: languageMatch[1]?.toLowerCase() ?? '',
-    source: extractTextContent(child.props.children).replace(/\n$/, ''),
-  };
-}
-
-function extractTextContent(value: ReactNode): string {
-  return Children.toArray(value)
-    .map((child) => {
-      if (typeof child === 'string' || typeof child === 'number') {
-        return String(child);
-      }
-
-      if (isValidElement<{ children?: ReactNode }>(child)) {
-        return extractTextContent(child.props.children);
-      }
-
-      return '';
-    })
-    .join('');
-}
-
-function summarizeMermaidSource(source: string): { kind: string; nodes: string[] } {
-  const lines = source
-    .split(/\r?\n/)
-    .map((line) => line.trim())
-    .filter(Boolean);
-  const declaration = lines[0] ?? 'mermaid';
-  const kind = declaration.split(/\s+/)[0] ?? 'mermaid';
-  const nodes = lines
-    .slice(1)
-    .flatMap((line) => line.split(/-->|---|==>|-.->|->/))
-    .map((segment) => cleanMermaidNodeLabel(segment))
-    .filter((segment) => segment.length > 0)
-    .filter((segment, index, all) => all.indexOf(segment) === index)
-    .slice(0, 6);
-
-  return { kind, nodes };
-}
-
-function cleanMermaidNodeLabel(value: string): string {
-  return value
-    .replace(/^[A-Za-z0-9_]+(?=\[|\(|\{)/, '')
-    .replace(/^[A-Za-z0-9_]+$/, '')
-    .replace(/[[\]{}()"]/g, '')
-    .trim();
-}
+import Markdown from 'react-markdown';
+import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import {
+  workbenchMarkdownRemarkPlugins,
+  workbenchMarkdownRehypePlugins,
+} from './markdownRemarkPlugins';
+import { sanitizeMarkdownHref } from './sanitizeMarkdownHref';
+
+export interface WorkbenchMarkdownPreviewProps extends ComponentPropsWithoutRef<'article'> {
+  source: string;
+}
+
+export function WorkbenchMarkdownPreview({
+  className,
+  source,
+  ...props
+}: WorkbenchMarkdownPreviewProps) {
+  return (
+    <article className={cx('ui-workbench-markdown-preview', className)} {...props}>
+      <Markdown
+        remarkPlugins={workbenchMarkdownRemarkPlugins}
+        rehypePlugins={workbenchMarkdownRehypePlugins}
+        components={{
+          a: ({ children, href }) => {
+            const safeHref = sanitizeMarkdownHref(href);
+            if (!safeHref) {
+              return <span>{children}</span>;
+            }
+            return (
+              <a
+                href={safeHref}
+                rel="noreferrer"
+                target={safeHref.startsWith('#') ? undefined : '_blank'}
+              >
+                {children}
+              </a>
+            );
+          },
+          code: ({ children, className: codeClassName }) => (
+            <code className={cx('ui-workbench-markdown-preview__code', codeClassName)}>
+              {children}
+            </code>
+          ),
+          pre: ({ children }) => {
+            const codeBlock = getMarkdownCodeBlock(children);
+
+            if (codeBlock?.language === 'mermaid') {
+              return <WorkbenchMermaidPreview source={codeBlock.source} />;
+            }
+
+            return <pre>{children}</pre>;
+          },
+        }}
+      >
+        {source}
+      </Markdown>
+    </article>
+  );
+}
+
+function WorkbenchMermaidPreview({ source }: { source: string }) {
+  const summary = summarizeMermaidSource(source);
+
+  return (
+    <figure
+      className="ui-workbench-markdown-preview__mermaid"
+      data-testid="markdown-mermaid-preview"
+    >
+      <figcaption className="ui-workbench-markdown-preview__mermaid-header">
+        <span className="ui-workbench-markdown-preview__mermaid-title">
+          <i aria-hidden className="codicon codicon-git-branch" />
+          Mermaid
+        </span>
+        <span className="ui-workbench-markdown-preview__mermaid-kind">{summary.kind}</span>
+      </figcaption>
+      <div
+        className="ui-workbench-markdown-preview__mermaid-canvas"
+        aria-label="Mermaid diagram preview"
+      >
+        {summary.nodes.length > 0 ? (
+          <div className="ui-workbench-markdown-preview__mermaid-flow">
+            {summary.nodes.map((node, index) => (
+              <span
+                key={`${node}-${index}`}
+                className="ui-workbench-markdown-preview__mermaid-node"
+              >
+                {node}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <pre className="ui-workbench-markdown-preview__mermaid-source">{source.trim()}</pre>
+        )}
+      </div>
+    </figure>
+  );
+}
+
+function getMarkdownCodeBlock(children: ReactNode): { language: string; source: string } | null {
+  const [child] = Children.toArray(children);
+  if (!isValidElement<{ className?: string | undefined; children?: ReactNode }>(child)) {
+    return null;
+  }
+
+  const className = child.props.className;
+  if (typeof className !== 'string') {
+    return null;
+  }
+
+  const languageMatch = /\blanguage-([a-z0-9_-]+)\b/i.exec(className);
+  if (!languageMatch) {
+    return null;
+  }
+
+  return {
+    language: languageMatch[1]?.toLowerCase() ?? '',
+    source: extractTextContent(child.props.children).replace(/\n$/, ''),
+  };
+}
+
+function extractTextContent(value: ReactNode): string {
+  return Children.toArray(value)
+    .map((child) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return String(child);
+      }
+
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return extractTextContent(child.props.children);
+      }
+
+      return '';
+    })
+    .join('');
+}
+
+function summarizeMermaidSource(source: string): { kind: string; nodes: string[] } {
+  const lines = source
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const declaration = lines[0] ?? 'mermaid';
+  const kind = declaration.split(/\s+/)[0] ?? 'mermaid';
+  const nodes = lines
+    .slice(1)
+    .flatMap((line) => line.split(/-->|---|==>|-.->|->/))
+    .map((segment) => cleanMermaidNodeLabel(segment))
+    .filter((segment) => segment.length > 0)
+    .filter((segment, index, all) => all.indexOf(segment) === index)
+    .slice(0, 6);
+
+  return { kind, nodes };
+}
+
+function cleanMermaidNodeLabel(value: string): string {
+  return value
+    .replace(/^[A-Za-z0-9_]+(?=\[|\(|\{)/, '')
+    .replace(/^[A-Za-z0-9_]+$/, '')
+    .replace(/[[\]{}()"]/g, '')
+    .trim();
+}

package/src/workbench/markdown/markdownRemarkPlugins.ts

@@ -0,0 +1,12 @@
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
+
+/** Shared remark plugins for workbench markdown surfaces (preview, chat, etc.). */
+export const workbenchMarkdownRemarkPlugins = [remarkGfm];
+
+/**
+ * Default rehype pipeline for untrusted markdown (chat / preview).
+ * Strips script/event handlers and dangerous URLs via rehype-sanitize.
+ * Hosts that need raw HTML must render outside these kit surfaces.
+ */
+export const workbenchMarkdownRehypePlugins = [rehypeSanitize];

package/src/workbench/markdown/sanitizeMarkdownHref.ts

@@ -0,0 +1,29 @@
+/**
+ * Allowlist markdown link targets for safe preview rendering.
+ * Blocks javascript:/data:/vbscript: and other non-navigation schemes.
+ */
+export function sanitizeMarkdownHref(href: string | undefined): string | undefined {
+  if (href == null || href.trim() === '') {
+    return undefined;
+  }
+
+  const trimmed = href.trim();
+  if (trimmed.startsWith('#')) {
+    return trimmed;
+  }
+
+  try {
+    const base =
+      typeof globalThis.location?.href === 'string' && globalThis.location.href.length > 0
+        ? globalThis.location.href
+        : 'https://workbench.local/';
+    const url = new URL(trimmed, base);
+    const protocol = url.protocol.toLowerCase();
+    if (protocol === 'http:' || protocol === 'https:' || protocol === 'mailto:') {
+      return trimmed;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}