@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/widgets/markdown/MarkdownImage.tsx

@@ -1,30 +1,22 @@
-import React from 'react';
-import { useResolvedUrl, parseUrlScheme } from './useResolvedUrl';
+import type React from 'react';
 import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+import { parseUrlScheme, useResolvedUrl } from './useResolvedUrl';
 
 export interface MarkdownImageProps {
-    node?: any;
+    node?: unknown;
     src?: string;
     alt?: string;
     className?: string;
     artifactRunId?: string;
     /** Existing image component to delegate to for standard URLs */
-    ExistingImg?: React.ComponentType<any>;
+    ExistingImg?: React.ComponentType<MarkdownImageProps>;
 }
 
 /**
  * Markdown image component with support for custom URL schemes.
  * Handles artifact: and image: URLs with loading states and error handling.
  */
-export function MarkdownImage({
-    node,
-    src,
-    alt,
-    className,
-    artifactRunId,
-    ExistingImg,
-    ...rest
-}: MarkdownImageProps) {
+export function MarkdownImage({ node, src, alt, className, artifactRunId, ExistingImg, ...rest }: MarkdownImageProps) {
     const rawSrc = src || '';
     const { scheme } = parseUrlScheme(rawSrc);
 
@@ -37,15 +29,7 @@ export function MarkdownImage({
     }
 
     // For artifact: and image: URLs, use the resolver
-    return (
-        <ResolvedImage
-            rawSrc={rawSrc}
-            alt={alt}
-            artifactRunId={artifactRunId}
-            className={className}
-            rest={rest}
-        />
-    );
+    return <ResolvedImage rawSrc={rawSrc} alt={alt} artifactRunId={artifactRunId} className={className} rest={rest} />;
 }
 
 /**
@@ -75,13 +59,7 @@ function ResolvedImage({
     }
 
     if (error) {
-        return (
-            <CodeBlockPlaceholder
-                type="image"
-                error={error}
-                onRetry={retry}
-            />
-        );
+        return <CodeBlockPlaceholder type="image" error={error} onRetry={retry} />;
     }
 
     if (!url) {

package/src/widgets/markdown/MarkdownLink.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import type { Element } from 'hast';
-import { useResolvedUrl, parseUrlScheme, mapSchemeToRoute } from './useResolvedUrl';
+import type React from 'react';
 import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+import { mapSchemeToRoute, parseUrlScheme, useResolvedUrl } from './useResolvedUrl';
 
 export interface MarkdownLinkProps {
     node?: Element;
@@ -10,7 +10,7 @@ export interface MarkdownLinkProps {
     className?: string;
     artifactRunId?: string;
     /** Existing link component to delegate to for standard URLs */
-    ExistingLink?: React.ComponentType<any>;
+    ExistingLink?: React.ComponentType<MarkdownLinkProps>;
 }
 
 /**
@@ -40,13 +40,7 @@ export function MarkdownLink({
             );
         }
         return (
-            <a
-                href={mappedRoute}
-                {...rest}
-                className={className}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <a href={mappedRoute} {...rest} className={className} target="_blank" rel="noopener noreferrer">
                 {children}
             </a>
         );
@@ -62,13 +56,7 @@ export function MarkdownLink({
             );
         }
         return (
-            <a
-                href={href}
-                {...rest}
-                className={className}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <a href={href} {...rest} className={className} target="_blank" rel="noopener noreferrer">
                 {children}
             </a>
         );
@@ -76,12 +64,7 @@ export function MarkdownLink({
 
     // For artifact: and image: URLs, use the resolver
     return (
-        <ResolvedLink
-            rawHref={rawHref}
-            artifactRunId={artifactRunId}
-            className={className}
-            rest={rest}
-        >
+        <ResolvedLink rawHref={rawHref} artifactRunId={artifactRunId} className={className} rest={rest}>
             {children}
         </ResolvedLink>
     );
@@ -126,13 +109,7 @@ function ResolvedLink({
     }
 
     return (
-        <a
-            href={url || '#'}
-            {...rest}
-            className={className}
-            target="_blank"
-            rel="noopener noreferrer"
-        >
+        <a href={url || '#'} {...rest} className={className} target="_blank" rel="noopener noreferrer">
             {children}
         </a>
     );

package/src/widgets/markdown/MarkdownRenderer.tsx

@@ -1,6 +1,6 @@
 import type { Element } from 'hast';
 import React from 'react';
-import Markdown, { defaultUrlTransform } from 'react-markdown';
+import Markdown, { type Components, defaultUrlTransform } from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import { defListHastHandlers, remarkDefinitionList } from 'remark-definition-list';
 import remarkDirective from 'remark-directive';
@@ -10,36 +10,30 @@ import remarkMath from 'remark-math';
 import remarkSupersub from 'remark-supersub';
 import { SKIP, visit } from 'unist-util-visit';
 import { CodeBlockHandlerProvider } from './CodeBlockContext';
-import {
-    createDefaultCodeBlockHandlers,
-    ExpandCodeBlockHandler,
-    isExpandLanguage,
-} from './codeBlockHandlers';
 import { useCodeBlockRendererRegistry } from './CodeBlockRendering';
-import { preprocessMathDelimiters } from './preprocessMathDelimiters';
+import { createDefaultCodeBlockHandlers, ExpandCodeBlockHandler, isExpandLanguage } from './codeBlockHandlers';
 import { MarkdownFigure } from './MarkdownFigure';
-import { MarkdownImage } from './MarkdownImage';
-import { MarkdownLink } from './MarkdownLink';
+import { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
+import { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
 import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
 import { normalizeDirectives } from './normalizeDirectives';
+import { preprocessMathDelimiters } from './preprocessMathDelimiters';
 import { remarkDirectiveHandler } from './remarkDirectiveHandler';
 
+type MarkdownTree = Parameters<typeof visit>[0];
+type MarkdownNode = { value?: unknown };
+type MarkdownParent = { children?: unknown[] };
+type RemarkPluginList = NonNullable<React.ComponentProps<typeof Markdown>['remarkPlugins']>;
+
 // Custom URL schemes that we handle in our components
-const ALLOWED_CUSTOM_SCHEMES = [
-    'artifact:',
-    'image:',
-    'store:',
-    'document:',
-    'document://',
-    'collection:',
-];
+const ALLOWED_CUSTOM_SCHEMES = ['artifact:', 'image:', 'store:', 'document:', 'document://', 'collection:'];
 
 /**
  * Custom URL transform that allows our custom schemes while using
  * the default transform for standard URLs (which sanitizes unsafe schemes).
  */
 function customUrlTransform(url: string): string {
-    if (ALLOWED_CUSTOM_SCHEMES.some(scheme => url.startsWith(scheme))) {
+    if (ALLOWED_CUSTOM_SCHEMES.some((scheme) => url.startsWith(scheme))) {
         return url;
     }
     return defaultUrlTransform(url);
@@ -49,11 +43,13 @@ function customUrlTransform(url: string): string {
  * Remark plugin to remove HTML comments from markdown
  */
 function remarkRemoveComments() {
-    return (tree: any) => {
-        visit(tree, 'html', (node: any, index: number | undefined, parent: any) => {
-            if (node.value && /<!--[\s\S]*?-->/.test(node.value)) {
-                if (parent && typeof index === 'number' && parent.children) {
-                    parent.children.splice(index, 1);
+    return (tree: MarkdownTree) => {
+        visit(tree, 'html', (node, index: number | undefined, parent) => {
+            const literal = node as MarkdownNode;
+            const parentNode = parent as MarkdownParent | undefined;
+            if (typeof literal.value === 'string' && /<!--[\s\S]*?-->/.test(literal.value)) {
+                if (parentNode?.children && typeof index === 'number') {
+                    parentNode.children.splice(index, 1);
                     return [SKIP, index];
                 }
             }
@@ -63,8 +59,8 @@ function remarkRemoveComments() {
 
 export interface MarkdownRendererProps {
     children: string;
-    components?: any;
-    remarkPlugins?: any[];
+    components?: Components;
+    remarkPlugins?: RemarkPluginList;
     removeComments?: boolean;
     /**
      * Optional workflow run id used to resolve shorthand artifact paths (e.g. artifact:out/result.csv)
@@ -106,14 +102,14 @@ export function MarkdownRenderer({
     const codeBlockRegistry = useCodeBlockRendererRegistry();
     const normalizedMarkdown = React.useMemo(
         () => normalizeDirectives(normalizeCustomSchemeLinks(preprocessMathDelimiters(children))),
-        [children]
+        [children],
     );
 
     // Remark plugins (markdown parsing)
     // Order matters: GFM first, then directive (must precede handler),
     // then definition-list/supersub, then math, then user plugins.
     const remarkPluginsArray = React.useMemo(() => {
-        const result: any[] = [
+        const result: RemarkPluginList = [
             remarkGfm,
             remarkDirective,
             remarkDirectiveHandler,
@@ -133,11 +129,14 @@ export function MarkdownRenderer({
     const rehypePluginsArray = React.useMemo(() => [rehypeKatex], []);
 
     // Remark-rehype bridge options (custom AST handlers for definition lists)
-    const remarkRehypeOptions = React.useMemo(() => ({
-        handlers: {
-            ...defListHastHandlers,
-        },
-    }), []);
+    const remarkRehypeOptions = React.useMemo(
+        () => ({
+            handlers: {
+                ...defListHastHandlers,
+            },
+        }),
+        [],
+    );
 
     const componentsWithOverrides = React.useMemo(() => {
         const baseComponents = components || {};
@@ -211,19 +210,19 @@ export function MarkdownRenderer({
             );
         };
 
-        const LinkComponent = (props: {
-            node?: Element;
-            href?: string;
-            children?: React.ReactNode;
-        }) => {
-            const { node, href, children: linkChildren, ...rest } = props as any;
+        const LinkComponent = (props: { node?: Element; href?: string; children?: React.ReactNode }) => {
+            const { node, href, children: linkChildren, ...rest } = props;
             return (
                 <MarkdownLink
                     node={node}
                     href={href}
                     className={linkClassName}
                     artifactRunId={artifactRunId}
-                    ExistingLink={ExistingLink}
+                    ExistingLink={
+                        typeof ExistingLink === 'function'
+                            ? (ExistingLink as React.ComponentType<MarkdownLinkProps>)
+                            : undefined
+                    }
                     {...rest}
                 >
                     {linkChildren}
@@ -231,8 +230,8 @@ export function MarkdownRenderer({
             );
         };
 
-        const ImageComponent = (props: { node?: any; src?: string; alt?: string; title?: string }) => {
-            const { node, src, alt, title, ...rest } = props as any;
+        const ImageComponent = (props: { node?: unknown; src?: string; alt?: string; title?: string }) => {
+            const { node, src, alt, title, ...rest } = props;
 
             // If image has a title, render as figure with caption
             if (title) {
@@ -254,7 +253,11 @@ export function MarkdownRenderer({
                     alt={alt}
                     className={imageClassName}
                     artifactRunId={artifactRunId}
-                    ExistingImg={ExistingImg}
+                    ExistingImg={
+                        typeof ExistingImg === 'function'
+                            ? (ExistingImg as React.ComponentType<MarkdownImageProps>)
+                            : undefined
+                    }
                     {...rest}
                 />
             );

package/src/widgets/markdown/MermaidDiagram.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Avoid loading the real (heavy, DOM-driven) mermaid library — the module calls
+// mermaid.initialize() at import time. We only exercise the pure makeSvgResponsive helper.
+vi.mock('mermaid', () => ({ default: { initialize: vi.fn(), render: vi.fn() } }));
+
+import { makeSvgResponsive } from './MermaidDiagram';
+
+const RESPONSIVE_STYLE = 'width:100%;height:auto;display:block;max-width:100%;';
+
+describe('makeSvgResponsive', () => {
+    it('drops fixed width/height and injects a responsive style + preserveAspectRatio', () => {
+        const out = makeSvgResponsive('<svg width="100" height="50">body</svg>');
+        expect(out).not.toContain('width="100"');
+        expect(out).not.toContain('height="50"');
+        expect(out).toContain(`style="${RESPONSIVE_STYLE}"`);
+        expect(out).toContain('preserveAspectRatio="xMidYMid meet"');
+        expect(out).toContain('body</svg>');
+    });
+
+    it('merges into an existing style attribute and keeps other attributes', () => {
+        const out = makeSvgResponsive('<svg viewBox="0 0 10 10" style="color:red">a</svg>');
+        expect(out).toContain('viewBox="0 0 10 10"');
+        expect(out).toContain(`style="color:red;${RESPONSIVE_STYLE}"`);
+    });
+
+    it('does not add a second preserveAspectRatio when one is present', () => {
+        const out = makeSvgResponsive('<svg preserveAspectRatio="none">a</svg>');
+        expect(out.match(/preserveAspectRatio=/gi)).toHaveLength(1);
+    });
+
+    // Regression guard for CodeQL js/polynomial-redos: `[^<>]` (not `[^>]`) keeps a
+    // run like `<svg<svg…` with no closing `>` from being re-scanned at every position.
+    it('runs in linear time on a pathological input', () => {
+        const evil = `<svg${'<svg='.repeat(100_000)}`;
+        const start = performance.now();
+        makeSvgResponsive(evil);
+        expect(performance.now() - start).toBeLessThan(1000);
+    });
+});

package/src/widgets/markdown/MermaidDiagram.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, useId } from 'react';
 import mermaid from 'mermaid';
+import { useEffect, useId, useRef, useState } from 'react';
 
 const MERMAID_FONT_FAMILY =
     'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
@@ -54,17 +54,17 @@ function normalizeMermaidCodeForBrowser(code: string): string {
  * Force Mermaid SVG output to scale with container width.
  * This keeps text and shapes proportional when the container shrinks/expands.
  */
-function makeSvgResponsive(svg: string): string {
-    return svg.replace(/<svg([^>]*)>/i, (_full, attrs: string) => {
-        let nextAttrs = attrs
-            .replace(/\swidth="[^"]*"/i, '')
-            .replace(/\sheight="[^"]*"/i, '');
+export function makeSvgResponsive(svg: string): string {
+    // `[^<>]` (not `[^>]`) so a run like `<svg<svg…` can't be re-scanned at every
+    // position; tag attributes never contain `<`/`>` (CodeQL js/polynomial-redos).
+    return svg.replace(/<svg([^<>]*)>/i, (_full, attrs: string) => {
+        let nextAttrs = attrs.replace(/\swidth="[^"]*"/i, '').replace(/\sheight="[^"]*"/i, '');
 
         if (/style="/i.test(nextAttrs)) {
             nextAttrs = nextAttrs.replace(
                 /style="([^"]*)"/i,
                 (_styleFull, styleValue: string) =>
-                    `style="${styleValue};width:100%;height:auto;display:block;max-width:100%;"`
+                    `style="${styleValue};width:100%;height:auto;display:block;max-width:100%;"`,
             );
         } else {
             nextAttrs += ' style="width:100%;height:auto;display:block;max-width:100%;"';
@@ -162,7 +162,7 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
             }
         };
 
-        renderDiagram();
+        void renderDiagram();
 
         return () => {
             cancelled = true;
@@ -186,6 +186,7 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
         <div
             ref={containerRef}
             className={`my-4 w-full overflow-x-auto [&_svg]:mx-auto [&_svg]:w-full [&_svg]:h-auto [&_svg]:max-w-full ${className || ''}`}
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: SVG is produced by Mermaid renderer from a known mermaid-source string
             dangerouslySetInnerHTML={{ __html: svg }}
         />
     );

package/src/widgets/markdown/codeBlockHandlers.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { createDefaultCodeBlockHandlers } from './codeBlockHandlers';
 
 describe('createDefaultCodeBlockHandlers', () => {
@@ -8,20 +8,15 @@ describe('createDefaultCodeBlockHandlers', () => {
         expect(handlers).toHaveProperty('chart');
         expect(handlers).toHaveProperty('vega-lite');
         expect(handlers).toHaveProperty('mermaid');
-        expect(handlers).toHaveProperty('proposal');
-        expect(handlers).toHaveProperty('askuser');
+        // proposal/askuser handlers live in features/agent/chat (ProposalCodeBlockHandler);
+        // they're registered through SkillWidgetProvider, not the widgets/markdown defaults.
     });
 
     it('should use dedicated handler for vega-lite code blocks', () => {
         const handlers = createDefaultCodeBlockHandlers();
         // vega-lite code blocks use a dedicated handler that always treats content as Vega-Lite
-        expect(handlers['vega-lite']).not.toBe(handlers['chart']);
-        expect(handlers['vega-lite']).toBe(handlers['vegalite']);
-    });
-
-    it('should use same handler for proposal and askuser', () => {
-        const handlers = createDefaultCodeBlockHandlers();
-        expect(handlers['proposal']).toBe(handlers['askuser']);
+        expect(handlers['vega-lite']).not.toBe(handlers.chart);
+        expect(handlers['vega-lite']).toBe(handlers.vegalite);
     });
 });
 
@@ -123,11 +118,13 @@ describe('Proposal JSON parsing', () => {
                 question: spec.question || spec.title || '',
                 description: spec.description,
                 options: Array.isArray(spec.options)
-                    ? spec.options.map((opt: any) => ({
-                        id: opt.id || opt.value || '',
-                        label: opt.label || '',
-                        description: opt.description,
-                    }))
+                    ? spec.options.map(
+                          (opt: { id?: string; value?: string; label?: string; description?: string }) => ({
+                              id: opt.id || opt.value || '',
+                              label: opt.label || '',
+                              description: opt.description,
+                          }),
+                      )
                     : undefined,
                 allowFreeResponse: spec.allowFreeResponse ?? spec.multiple,
             };