@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.40

package/src/workbench/management/createWorkbenchNotify.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+
+import type {
+  ShowWorkbenchNoticeInput,
+  WorkbenchNoticeController,
+  WorkbenchNoticeTone,
+} from './WorkbenchNotice.js';
+
+export interface WorkbenchNotificationAction {
+  readonly label: string;
+  readonly onAction: () => void;
+}
+
+export interface WorkbenchNotifyOptions {
+  readonly actions?: readonly WorkbenchNotificationAction[];
+  readonly dataAttributes?: ShowWorkbenchNoticeInput['dataAttributes'];
+  readonly durationMs?: number;
+  readonly id?: string;
+}
+
+/**
+ * NotificationService-shaped facade over {@link WorkbenchNoticeController}.
+ * Prefer this for command/install/save feedback; keep modal confirms separate.
+ */
+export interface WorkbenchNotify {
+  info(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  error(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  success(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  warning(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  dismiss(id: string): void;
+  clear(): void;
+}
+
+function showTone(
+  controller: WorkbenchNoticeController,
+  tone: WorkbenchNoticeTone,
+  message: ReactNode,
+  options: WorkbenchNotifyOptions = {},
+): string {
+  const { actions, dataAttributes, durationMs, id } = options;
+  const noticeId = id ?? `workbench-notify-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+  const noticeMessage =
+    actions && actions.length > 0 ? (
+      <span className="ui-workbench-notify-message">
+        <span className="ui-workbench-notify-message__text">{message}</span>
+        <span className="ui-workbench-notify-message__actions">
+          {actions.map((action) => (
+            <button
+              className="ui-workbench-notify-message__action"
+              key={action.label}
+              type="button"
+              onClick={() => {
+                action.onAction();
+                controller.dismissNotice(noticeId);
+              }}
+            >
+              {action.label}
+            </button>
+          ))}
+        </span>
+      </span>
+    ) : (
+      message
+    );
+
+  return controller.showNotice({
+    ...(dataAttributes === undefined ? {} : { dataAttributes }),
+    ...(durationMs === undefined ? {} : { durationMs }),
+    id: noticeId,
+    message: noticeMessage,
+    tone,
+  });
+}
+
+/**
+ * Create a `notify.info` / `notify.error` facade over an existing notice controller.
+ */
+export function createWorkbenchNotify(controller: WorkbenchNoticeController): WorkbenchNotify {
+  return {
+    info: (message, options) => showTone(controller, 'info', message, options),
+    error: (message, options) => showTone(controller, 'error', message, options),
+    success: (message, options) => showTone(controller, 'success', message, options),
+    warning: (message, options) => showTone(controller, 'warning', message, options),
+    dismiss: (noticeId) => controller.dismissNotice(noticeId),
+    clear: () => controller.clearNotices(),
+  };
+}

package/src/workbench/management/extension-install-approval.ts

@@ -0,0 +1,72 @@
+import type { ExtensionCatalogBrowseEntry, ExtensionInstallOptions } from './types.js';
+
+export function extensionInstallRequiresApproval(entry: ExtensionCatalogBrowseEntry): boolean {
+  return Boolean(
+    entry.installPlan?.requiresApproval && !entry.installed && !entry.installPlan.blocked,
+  );
+}
+
+export function formatExtensionInstallApprovalMessage(entry: ExtensionCatalogBrowseEntry): string {
+  const permissions = entry.installPlan?.permissions ?? [];
+  const permissionLine =
+    permissions.length > 0
+      ? `Requested permissions: ${permissions.join(', ')}.`
+      : 'This package requests privileges that require approval.';
+
+  return [
+    `Install "${entry.displayName}"?`,
+    '',
+    permissionLine,
+    'Continue only if you trust this package.',
+  ].join('\n');
+}
+
+export interface ResolveExtensionInstallOptionsInput {
+  readonly confirm?: ((message: string) => boolean) | undefined;
+  /**
+   * When true (or when the predicate returns true), skip the confirm prompt and
+   * return `{ approved: true }`. Hosts typically back this with a durable trust
+   * store keyed by extension id + permission fingerprint.
+   */
+  readonly isTrusted?: boolean | ((entry: ExtensionCatalogBrowseEntry) => boolean) | undefined;
+  /** Called after the user explicitly confirms trust for this install. */
+  readonly rememberTrust?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
+}
+
+/**
+ * Resolve install options for UI actions.
+ *
+ * Approval is required when the install plan requests permissions. A trusted
+ * predicate may skip the prompt; otherwise the host confirm dialog runs and
+ * successful consent may be persisted via `rememberTrust`.
+ */
+export function resolveExtensionInstallOptions(
+  entry: ExtensionCatalogBrowseEntry,
+  confirmOrOptions: ((message: string) => boolean) | ResolveExtensionInstallOptionsInput = (
+    message,
+  ) => (typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false),
+): ExtensionInstallOptions | undefined {
+  if (!extensionInstallRequiresApproval(entry)) {
+    return {};
+  }
+
+  const options =
+    typeof confirmOrOptions === 'function' ? { confirm: confirmOrOptions } : confirmOrOptions;
+  const confirm =
+    options.confirm ??
+    ((message: string) =>
+      typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false);
+
+  const trusted =
+    typeof options.isTrusted === 'function' ? options.isTrusted(entry) : Boolean(options.isTrusted);
+  if (trusted) {
+    return { approved: true };
+  }
+
+  if (!confirm(formatExtensionInstallApprovalMessage(entry))) {
+    return undefined;
+  }
+
+  options.rememberTrust?.(entry);
+  return { approved: true };
+}

package/src/workbench/management/extension-management-filters.ts

@@ -0,0 +1,38 @@
+import type { ExtensionCatalogBrowseEntry, ExtensionManagementEntry } from './types.js';
+
+export function filterInstalledEntries(
+  entries: readonly ExtensionManagementEntry[],
+  query: string,
+): readonly ExtensionManagementEntry[] {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) {
+    return entries;
+  }
+
+  return entries.filter((entry) =>
+    [entry.displayName, entry.id, entry.category, entry.description ?? '']
+      .join(' ')
+      .toLowerCase()
+      .includes(normalized),
+  );
+}
+
+export function filterBrowseEntries(
+  entries: readonly ExtensionCatalogBrowseEntry[],
+  query: string,
+  category?: string,
+): readonly ExtensionCatalogBrowseEntry[] {
+  const normalized = query.trim().toLowerCase();
+  return entries.filter((entry) => {
+    if (category && entry.category !== category) {
+      return false;
+    }
+    if (!normalized) {
+      return true;
+    }
+    return [entry.displayName, entry.id, entry.category, entry.description]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalized);
+  });
+}

package/src/workbench/management/index.ts

@@ -22,10 +22,10 @@ export type {
   ExtensionManagementPendingAction,
 } from './ExtensionManagementSidebar.js';
 export {
-  createIntegrationCommandAction,
+  IntegrationActionRow,
+  IntegrationCommandButton,
   type IntegrationCommandAction,
-} from './integration-command-action.js';
-export { IntegrationActionRow, IntegrationCommandButton } from './IntegrationCommandActions.js';
+} from './IntegrationCommandActions.js';
 export { IntegrationsShell } from './IntegrationsShell.js';
 export type { IntegrationsShellProps } from './IntegrationsShell.js';
 export {
@@ -75,6 +75,13 @@ export type {
   WorkbenchNoticePosition,
   WorkbenchNoticeTone,
 } from './WorkbenchNotice.js';
+export { createWorkbenchNotify } from './createWorkbenchNotify.js';
+export type {
+  WorkbenchNotificationAction,
+  WorkbenchNotify,
+  WorkbenchNotifyOptions,
+} from './createWorkbenchNotify.js';
+export { useWorkbenchNotify } from './useWorkbenchNotify.js';
 export { KeybindingCaptureField } from './KeybindingCaptureField.js';
 export type { KeybindingCaptureFieldProps } from './KeybindingCaptureField.js';
 export { KeybindingManagementPanel } from './KeybindingManagementPanel.js';
@@ -112,6 +119,12 @@ export {
   extensionCategoryIconTone,
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
+export {
+  extensionInstallRequiresApproval,
+  formatExtensionInstallApprovalMessage,
+  resolveExtensionInstallOptions,
+  type ResolveExtensionInstallOptionsInput,
+} from './extension-install-approval.js';
 export type {
   AccountManagementEntry,
   AccountManagementEntryStatus,
@@ -122,9 +135,11 @@ export type {
   CommandManagementPanelProps,
   CommandManagementRunState,
   ExtensionCatalogBrowseEntry,
+  ExtensionInstallOptions,
   ExtensionManagementDiagnosticSummary,
   ExtensionManagementEntry,
   ExtensionManagementFeatureItem,
   ExtensionManagementFeatureSummary,
   ExtensionManagementPanelProps,
+  ExtensionManagementTransition,
 } from './types.js';

package/src/workbench/management/management.css

@@ -2,3 +2,31 @@
 @import './library-catalog-picker-dialog.css';
 @import './library-facet-filter-dialog.css';
 @import './management-panel.css';
+
+.ui-workbench-notify-message {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.ui-workbench-notify-message__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ui-workbench-notify-message__action {
+  margin: 0;
+  padding: 2px 8px;
+  border: 1px solid var(--color-border, currentColor);
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.ui-workbench-notify-message__action:hover {
+  background: var(--color-surface-hover, rgba(255, 255, 255, 0.08));
+}

package/src/workbench/management/types.ts

@@ -82,6 +82,11 @@ export interface ExtensionManagementDiagnosticSummary {
   readonly severity: 'error' | 'warning';
 }
 
+export interface ExtensionManagementTransition {
+  readonly kind: 'applied' | 'reloadRequired' | 'failed';
+  readonly message: string;
+}
+
 export interface ExtensionInstallPlanSummary {
   readonly blocked: boolean;
   readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
@@ -92,6 +97,8 @@ export interface ExtensionInstallPlanSummary {
 }
 
 export interface ExtensionManagementEntry {
+  /** True only when a persisted installed record currently owns this entry. */
+  readonly canUninstall?: boolean;
   readonly category: string;
   readonly description?: string | undefined;
   readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
@@ -102,6 +109,7 @@ export interface ExtensionManagementEntry {
   readonly installedAt?: string | undefined;
   readonly manifestUrl?: string | undefined;
   readonly source: ExtensionManagementEntrySource;
+  readonly transition?: ExtensionManagementTransition;
 }
 
 export interface ExtensionCatalogBrowseEntry {
@@ -115,12 +123,26 @@ export interface ExtensionCatalogBrowseEntry {
   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) => void) | undefined;
+  onInstall?:
+    ((entry: ExtensionCatalogBrowseEntry, options?: ExtensionInstallOptions) => void) | undefined;
+  onUninstall?: (entry: ExtensionManagementEntry) => void;
   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/management/useWorkbenchNotify.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+import { createWorkbenchNotify, type WorkbenchNotify } from './createWorkbenchNotify.js';
+import { useWorkbenchNotice } from './WorkbenchNotice.js';
+
+/** Convenience hook: NotificationService-shaped API inside a notice provider. */
+export function useWorkbenchNotify(): WorkbenchNotify {
+  const controller = useWorkbenchNotice();
+  return useMemo(() => createWorkbenchNotify(controller), [controller]);
+}

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

@@ -1,7 +1,11 @@
 import Markdown from 'react-markdown';
 import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { cx } from '../utils/cx';
-import { workbenchMarkdownRemarkPlugins } from './markdownRemarkPlugins';
+import { cx } from '../../utils/cx';
+import {
+  workbenchMarkdownRemarkPlugins,
+  workbenchMarkdownRehypePlugins,
+} from './markdownRemarkPlugins';
+import { sanitizeMarkdownHref } from './sanitizeMarkdownHref';
 
 export interface WorkbenchMarkdownPreviewProps extends ComponentPropsWithoutRef<'article'> {
   source: string;
@@ -16,12 +20,23 @@ export function WorkbenchMarkdownPreview({
     <article className={cx('ui-workbench-markdown-preview', className)} {...props}>
       <Markdown
         remarkPlugins={workbenchMarkdownRemarkPlugins}
+        rehypePlugins={workbenchMarkdownRehypePlugins}
         components={{
-          a: ({ children, href }) => (
-            <a href={href} rel="noreferrer" target={href?.startsWith('#') ? undefined : '_blank'}>
-              {children}
-            </a>
-          ),
+          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}

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;
+  }
+}

package/src/workbench/schema/workbenchDocumentRenderer.tsx

@@ -219,56 +219,16 @@ function renderResizeHandle(
   );
 }
 
-const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactNode> = {
-  frame: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={onClick}
-      onPointerDown={onPointerDown}
-    >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  group: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={onClick}
-      onPointerDown={onPointerDown}
-    >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  component: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+function renderContainerNode({
+  node,
+  style,
+  children,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
@@ -279,35 +239,39 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
-  instance: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+  );
+}
+
+function renderEmptyNode({
+  node,
+  style,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
       style={style}
-      onClick={onClick}
+      onClick={wrapNodeClick(onClick)}
       onPointerDown={onPointerDown}
     >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
-  rectangle: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+  );
+}
+
+function renderContentNode({
+  node,
+  style,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
@@ -315,9 +279,18 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       onClick={wrapNodeClick(onClick)}
       onPointerDown={onPointerDown}
     >
+      {(node as { content?: string }).content ?? ''}
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
+  );
+}
+
+const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactNode> = {
+  frame: renderContainerNode,
+  group: renderContainerNode,
+  component: renderContainerNode,
+  instance: renderContainerNode,
+  rectangle: renderEmptyNode,
   circle: ({
     node,
     style,
@@ -336,18 +309,7 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
   ),
-  text: ({ node, style, onClick, onPointerDown, onResizeHandlePointerDown, resizeHandleLabel }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {(node as { content?: string }).content ?? ''}
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
+  text: renderContentNode,
   image: ({
     node,
     style,
@@ -394,43 +356,8 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       </div>
     );
   },
-  vector: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {(node as { content?: string }).content ?? ''}
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  unknown: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
+  vector: renderContentNode,
+  unknown: renderEmptyNode,
 };
 
 function renderNode(

package/src/workbench/settings/StructuredDataForm.tsx

@@ -37,6 +37,7 @@ import {
   type WorkbenchStructuredDataSchemaFieldInputProps,
   type WorkbenchStructuredDataTextArrayInputProps,
 } from './structuredDataSchema';
+import { isRenderableWorkbenchStructuredDataFormError } from './structuredDataFormModel';
 
 export function WorkbenchStructuredDataForm({
   ariaLabel,
@@ -156,10 +157,6 @@ export function WorkbenchStructuredDataForm({
   );
 }
 
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
-  return error !== undefined && error !== null && error !== false && error !== '';
-}
-
 function StructuredDataSection({
   data,
   disabled,