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

package/src/widgets/markdown/codeBlockHandlers.tsx

@@ -1,8 +1,13 @@
-import React, { useMemo } from 'react';
+import type React from 'react';
+import { useMemo } from 'react';
 import type { VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
-import { AskUserWidget, type AskUserWidgetProps } from '../../features/agent/chat/AskUserWidget';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
-import { ArtifactContentRenderer, type ExpandRenderType, makeSvgResponsive, sanitizeSvg } from './ArtifactContentRenderer';
+import {
+    ArtifactContentRenderer,
+    type ExpandRenderType,
+    makeSvgResponsive,
+    sanitizeSvg,
+} from './ArtifactContentRenderer';
 import { useCodeBlockContext } from './CodeBlockContext';
 import { CodeBlockErrorBoundary, CodeBlockPlaceholder } from './CodeBlockPlaceholder';
 import type { CodeBlockRendererProps } from './CodeBlockRendering';
@@ -13,7 +18,7 @@ import { useArtifactContent } from './useArtifactContent';
  * Check if JSON parsing failed due to incomplete content (streaming)
  * vs actually invalid JSON structure
  */
-function isIncompleteJson(code: string): boolean {
+export function isIncompleteJson(code: string): boolean {
     const trimmed = code.trim();
 
     // Empty or very short content is likely incomplete
@@ -30,15 +35,10 @@ function isIncompleteJson(code: string): boolean {
         const message = e instanceof Error ? e.message : '';
 
         // Common indicators of incomplete JSON during streaming
-        const incompleteIndicators = [
-            'unexpected end',
-            'unterminated string',
-            'expected',
-            'unexpected token',
-        ];
+        const incompleteIndicators = ['unexpected end', 'unterminated string', 'expected', 'unexpected token'];
 
         const lowerMessage = message.toLowerCase();
-        if (incompleteIndicators.some(ind => lowerMessage.includes(ind))) {
+        if (incompleteIndicators.some((ind) => lowerMessage.includes(ind))) {
             // Additional check: count brackets to see if they're unbalanced
             let braceCount = 0;
             let bracketCount = 0;
@@ -96,12 +96,9 @@ function parseChartJson(code: string): Record<string, unknown> | null {
 /**
  * Detects the chart library from a parsed spec
  */
-function detectChartLibrary(
-    spec: Record<string, unknown>
-): 'vega-lite' | null {
+function detectChartLibrary(spec: Record<string, unknown>): 'vega-lite' | null {
     // Detect Vega-Lite by $schema containing "vega"
-    const hasVegaSchema =
-        typeof spec.$schema === 'string' && spec.$schema.includes('vega');
+    const hasVegaSchema = typeof spec.$schema === 'string' && spec.$schema.includes('vega');
     const isExplicitVegaLite = spec.library === 'vega-lite' && 'spec' in spec;
 
     if (hasVegaSchema || isExplicitVegaLite) {
@@ -136,21 +133,11 @@ export function VegaLiteCodeBlockHandler({ code }: CodeBlockRendererProps) {
 
     // Show loading placeholder for incomplete JSON (streaming)
     if (incomplete) {
-        return (
-            <CodeBlockPlaceholder
-                type="chart"
-                message="Loading chart..."
-            />
-        );
+        return <CodeBlockPlaceholder type="chart" message="Loading chart..." />;
     }
 
     if (!chartSpec) {
-        return (
-            <CodeBlockPlaceholder
-                type="chart"
-                error="Invalid Vega-Lite specification"
-            />
-        );
+        return <CodeBlockPlaceholder type="chart" error="Invalid Vega-Lite specification" />;
     }
 
     // Render VegaLiteChart directly - bypass AgentChart routing
@@ -195,21 +182,11 @@ export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
 
     // Show loading placeholder for incomplete JSON (streaming)
     if (incomplete) {
-        return (
-            <CodeBlockPlaceholder
-                type="chart"
-                message="Loading chart..."
-            />
-        );
+        return <CodeBlockPlaceholder type="chart" message="Loading chart..." />;
     }
 
     if (!chartSpec) {
-        return (
-            <CodeBlockPlaceholder
-                type="chart"
-                error="Invalid Vega-Lite chart specification"
-            />
-        );
+        return <CodeBlockPlaceholder type="chart" error="Invalid Vega-Lite chart specification" />;
     }
 
     return (
@@ -226,12 +203,7 @@ export function MermaidCodeBlockHandler({ code }: CodeBlockRendererProps) {
     const trimmedCode = code.trim();
 
     if (!trimmedCode) {
-        return (
-            <CodeBlockPlaceholder
-                type="mermaid"
-                error="Empty diagram"
-            />
-        );
+        return <CodeBlockPlaceholder type="mermaid" error="Empty diagram" />;
     }
 
     return (
@@ -241,78 +213,6 @@ export function MermaidCodeBlockHandler({ code }: CodeBlockRendererProps) {
     );
 }
 
-/**
- * Proposal/AskUser code block handler
- */
-export function ProposalCodeBlockHandler({ code }: CodeBlockRendererProps) {
-    const { onProposalSelect, onProposalSubmit } = useCodeBlockContext();
-
-    // Check if JSON is incomplete (streaming in progress)
-    const incomplete = useMemo(() => isIncompleteJson(code), [code]);
-
-    const widgetProps = useMemo((): AskUserWidgetProps | null => {
-        if (incomplete) return null;
-
-        try {
-            const raw = code.trim();
-            const spec = JSON.parse(raw);
-
-            if (!spec.options || (!spec.question && !spec.title)) {
-                return null;
-            }
-
-            const props: AskUserWidgetProps = {
-                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,
-                    }))
-                    : undefined,
-                allowFreeResponse: spec.allowFreeResponse ?? spec.multiple,
-                variant: spec.variant,
-                onSelect: onProposalSelect,
-                onSubmit: onProposalSubmit,
-            };
-
-            if (!props.question || !props.options?.length) {
-                return null;
-            }
-
-            return props;
-        } catch {
-            return null;
-        }
-    }, [code, onProposalSelect, onProposalSubmit, incomplete]);
-
-    // Show loading placeholder for incomplete JSON (streaming)
-    if (incomplete) {
-        return (
-            <CodeBlockPlaceholder
-                type="proposal"
-                message="Loading options..."
-            />
-        );
-    }
-
-    if (!widgetProps) {
-        return (
-            <CodeBlockPlaceholder
-                type="proposal"
-                error="Invalid proposal specification"
-            />
-        );
-    }
-
-    return (
-        <CodeBlockErrorBoundary type="proposal" fallbackCode={code}>
-            <AskUserWidget {...widgetProps} />
-        </CodeBlockErrorBoundary>
-    );
-}
-
 /**
  * Mockup code block handler — renders inline SVG after sanitization.
  */
@@ -324,15 +224,14 @@ export function MockupCodeBlockHandler({ code }: CodeBlockRendererProps) {
     }, [code]);
 
     if (!processedSvg) {
-        return (
-            <CodeBlockPlaceholder type="code" error="Empty mockup" />
-        );
+        return <CodeBlockPlaceholder type="code" error="Empty mockup" />;
     }
 
     return (
         <CodeBlockErrorBoundary type="code" fallbackCode={code}>
             <div
                 style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: SVG content is processed/sanitized upstream for inline rendering
                 dangerouslySetInnerHTML={{ __html: processedSvg }}
             />
         </CodeBlockErrorBoundary>
@@ -362,8 +261,15 @@ export function ExpandCodeBlockHandler({ code, language }: CodeBlockRendererProp
         const type = language.split(':')[1] as ExpandRenderType;
         // Validate known types
         const validTypes: ExpandRenderType[] = [
-            'chart', 'vega-lite', 'table', 'markdown',
-            'fusion-fragment', 'mockup', 'code', 'image', 'auto'
+            'chart',
+            'vega-lite',
+            'table',
+            'markdown',
+            'fusion-fragment',
+            'mockup',
+            'code',
+            'image',
+            'auto',
         ];
         return validTypes.includes(type) ? type : 'auto';
     }, [language]);
@@ -375,39 +281,19 @@ export function ExpandCodeBlockHandler({ code, language }: CodeBlockRendererProp
     });
 
     if (!artifactRunId) {
-        return (
-            <CodeBlockPlaceholder
-                type="expand"
-                error="No artifact run ID available"
-            />
-        );
+        return <CodeBlockPlaceholder type="expand" error="No artifact run ID available" />;
     }
 
     if (isLoading) {
-        return (
-            <CodeBlockPlaceholder
-                type="expand"
-                message={`Loading ${artifactPath}...`}
-            />
-        );
+        return <CodeBlockPlaceholder type="expand" message={`Loading ${artifactPath}...`} />;
     }
 
     if (error) {
-        return (
-            <CodeBlockPlaceholder
-                type="expand"
-                error={`Failed to load artifact: ${error}`}
-            />
-        );
+        return <CodeBlockPlaceholder type="expand" error={`Failed to load artifact: ${error}`} />;
     }
 
     if (data === undefined) {
-        return (
-            <CodeBlockPlaceholder
-                type="expand"
-                error="No content found in artifact"
-            />
-        );
+        return <CodeBlockPlaceholder type="expand" error="No content found in artifact" />;
     }
 
     // Render with explicit type
@@ -444,16 +330,13 @@ export function isExpandLanguage(language: string | undefined): boolean {
  * This allows users to override default behavior for specific languages
  * while still getting built-in support for charts, diagrams, and proposals.
  */
-export function createDefaultCodeBlockHandlers(): Record<
-    string,
-    React.FunctionComponent<CodeBlockRendererProps>
-> {
+export function createDefaultCodeBlockHandlers(): Record<string, React.FunctionComponent<CodeBlockRendererProps>> {
     return {
         // Chart handler for generic chart code blocks (Vega-Lite only)
         chart: ChartCodeBlockHandler,
         // Vega-Lite handlers - always treat as Vega-Lite
         'vega-lite': VegaLiteCodeBlockHandler,
-        'vegalite': VegaLiteCodeBlockHandler,
+        vegalite: VegaLiteCodeBlockHandler,
 
         // Mermaid handler
         mermaid: MermaidCodeBlockHandler,
@@ -462,8 +345,10 @@ export function createDefaultCodeBlockHandlers(): Record<
         mockup: MockupCodeBlockHandler,
         svg: MockupCodeBlockHandler,
 
-        // Proposal handlers
-        proposal: ProposalCodeBlockHandler,
-        askuser: ProposalCodeBlockHandler,
+        // Note: proposal/askuser handlers live in features/agent/chat
+        // (ProposalCodeBlockHandler.tsx). They're registered via
+        // SkillWidgetProvider/CodeBlockRendererProvider to keep
+        // widgets/markdown free of features/agent/chat imports (would
+        // create a runtime module cycle via MarkdownRenderer).
     };
 }

package/src/widgets/markdown/index.ts

@@ -1,39 +1,48 @@
 export {
     ArtifactContentRenderer,
     type ArtifactContentRendererProps,
-    type ExpandRenderType
+    type ExpandRenderType,
 } from './ArtifactContentRenderer';
 export {
+    type CodeBlockHandlerContext,
     CodeBlockHandlerProvider,
     useCodeBlockContext,
-    type CodeBlockHandlerContext
 } from './CodeBlockContext';
 export {
-    ChartCodeBlockHandler, ExpandCodeBlockHandler, MermaidCodeBlockHandler,
-    ProposalCodeBlockHandler, createDefaultCodeBlockHandlers,
-    isExpandLanguage
-} from './codeBlockHandlers';
-export {
-    CodeBlockErrorBoundary, CodeBlockPlaceholder, type CodeBlockPlaceholderProps,
-    type CodeBlockType
+    CodeBlockErrorBoundary,
+    CodeBlockPlaceholder,
+    type CodeBlockPlaceholderProps,
+    type CodeBlockType,
 } from './CodeBlockPlaceholder';
 export {
+    type CodeBlockRendererProps,
     CodeBlockRendererProvider,
     useCodeBlockComponent,
     useCodeBlockRendererRegistry,
-    type CodeBlockRendererProps
 } from './CodeBlockRendering';
+export {
+    ChartCodeBlockHandler,
+    createDefaultCodeBlockHandlers,
+    ExpandCodeBlockHandler,
+    isExpandLanguage,
+    isIncompleteJson,
+    MermaidCodeBlockHandler,
+} from './codeBlockHandlers';
 export { MarkdownFigure, type MarkdownFigureProps } from './MarkdownFigure';
 export { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
 export { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
 export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
 export { MermaidDiagram } from './MermaidDiagram';
 export {
-    useArtifactContent,
     type ArtifactContentState,
-    type UseArtifactContentOptions
+    type UseArtifactContentOptions,
+    useArtifactContent,
 } from './useArtifactContent';
 export {
-    mapSchemeToRoute, parseUrlScheme, useResolvedUrl, type ResolvedUrlState, type UrlScheme, type UseResolvedUrlOptions
+    mapSchemeToRoute,
+    parseUrlScheme,
+    type ResolvedUrlState,
+    type UrlScheme,
+    type UseResolvedUrlOptions,
+    useResolvedUrl,
 } from './useResolvedUrl';
-

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

@@ -1,17 +1,13 @@
-import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { describe, expect, it } from 'vitest';
 import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
 
 function renderMarkdownToHtml(markdown: string): string {
     return renderToStaticMarkup(
-        React.createElement(
-            Markdown,
-            { remarkPlugins: [remarkGfm], urlTransform: (url: string) => url },
-            markdown
-        )
+        React.createElement(Markdown, { remarkPlugins: [remarkGfm], urlTransform: (url: string) => url }, markdown),
     );
 }
 
@@ -83,4 +79,23 @@ describe('normalizeCustomSchemeLinks', () => {
         expect(output).toContain('[fenced](artifact:out/INVOICE 2025-001.pdf)');
         expect(output).toContain('[regular](<artifact:out/INVOICE 2025-001.pdf>)');
     });
+
+    it('normalizes each custom scheme', () => {
+        expect(normalizeCustomSchemeLinks('[a](store:x y)')).toBe('[a](<store:x y>)');
+        expect(normalizeCustomSchemeLinks('[a](collection:x y)')).toBe('[a](<collection:x y>)');
+        expect(normalizeCustomSchemeLinks('[a](document://x y)')).toBe('[a](<document://x y>)');
+        expect(normalizeCustomSchemeLinks('![a](image:x y)')).toBe('![a](<image:x y>)');
+    });
+
+    // Regression guard for CodeQL js/polynomial-redos: excluding `[` from the
+    // link-text/destination classes makes a run of '[' (or '[](image:' groups)
+    // with no closing delimiter linear instead of quadratic.
+    it('runs in linear time on pathological bracket runs', () => {
+        const inputs = ['['.repeat(100_000), '[](image:'.repeat(100_000)];
+        for (const evil of inputs) {
+            const start = performance.now();
+            normalizeCustomSchemeLinks(evil);
+            expect(performance.now() - start).toBeLessThan(1000);
+        }
+    });
 });

package/src/widgets/markdown/normalizeCustomSchemeLinks.ts

@@ -1,18 +1,15 @@
-const CUSTOM_SCHEME_PREFIXES = [
-    'artifact:',
-    'image:',
-    'store:',
-    'document://',
-    'collection:',
-];
+const CUSTOM_SCHEME_PREFIXES = ['artifact:', 'image:', 'store:', 'document://', 'collection:'];
 
-const CUSTOM_LINK_REGEX = /(!?\[[^\]\n]*\]\()((?:artifact:|image:|store:|document:\/\/|collection:)[^)]+)(\))/g;
+// Excludes `[` from the link-text and destination classes: a long run of `[` (or
+// `[](image:` groups) with no closing delimiter would otherwise be re-scanned at every
+// start position, giving polynomial backtracking (CodeQL js/polynomial-redos).
+const CUSTOM_LINK_REGEX = /(!?\[[^[\]\n]*\]\()((?:artifact:|image:|store:|document:\/\/|collection:)[^)[\n]+)(\))/g;
 const INLINE_CODE_REGEX = /`[^`\n]*`/g;
 const FENCED_CODE_BLOCK_REGEX = /(^|\n)(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\2(?=\n|$)/g;
 const LINK_TITLE_SUFFIX_REGEX = /\s+("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\([^)]*\))\s*$/;
 
 function hasCustomScheme(destination: string): boolean {
-    return CUSTOM_SCHEME_PREFIXES.some(prefix => destination.startsWith(prefix));
+    return CUSTOM_SCHEME_PREFIXES.some((prefix) => destination.startsWith(prefix));
 }
 
 function wrapCustomDestination(destinationWithOptionalTitle: string): string {
@@ -50,10 +47,8 @@ function normalizeCustomLinksInText(text: string): string {
 function normalizeOutsideInlineCode(text: string): string {
     let result = '';
     let lastIndex = 0;
-    let match: RegExpExecArray | null;
 
-    INLINE_CODE_REGEX.lastIndex = 0;
-    while ((match = INLINE_CODE_REGEX.exec(text)) !== null) {
+    for (const match of text.matchAll(INLINE_CODE_REGEX)) {
         result += normalizeCustomLinksInText(text.slice(lastIndex, match.index));
         result += match[0];
         lastIndex = match.index + match[0].length;
@@ -71,16 +66,14 @@ function normalizeOutsideInlineCode(text: string): string {
  * We apply this only outside fenced/inline code spans.
  */
 export function normalizeCustomSchemeLinks(markdown: string): string {
-    if (!markdown || !CUSTOM_SCHEME_PREFIXES.some(prefix => markdown.includes(prefix))) {
+    if (!markdown || !CUSTOM_SCHEME_PREFIXES.some((prefix) => markdown.includes(prefix))) {
         return markdown;
     }
 
     let result = '';
     let lastIndex = 0;
-    let match: RegExpExecArray | null;
 
-    FENCED_CODE_BLOCK_REGEX.lastIndex = 0;
-    while ((match = FENCED_CODE_BLOCK_REGEX.exec(markdown)) !== null) {
+    for (const match of markdown.matchAll(FENCED_CODE_BLOCK_REGEX)) {
         result += normalizeOutsideInlineCode(markdown.slice(lastIndex, match.index));
         result += match[0];
         lastIndex = match.index + match[0].length;

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

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeDirectives } from './normalizeDirectives';
+
+describe('normalizeDirectives', () => {
+    it('returns input unchanged when there is no fence', () => {
+        expect(normalizeDirectives('just some text')).toBe('just some text');
+    });
+
+    it('converts a single-line leaf directive (no content)', () => {
+        expect(normalizeDirectives(':::pagebreak:::')).toBe('::pagebreak');
+    });
+
+    it('converts a single-line container directive with content', () => {
+        expect(normalizeDirectives('::: tip Some content here. :::')).toBe(':::tip\nSome content here.\n:::');
+    });
+
+    it('preserves leading indentation', () => {
+        expect(normalizeDirectives('  :::note hello world :::')).toBe('  :::note\n  hello world\n  :::');
+    });
+
+    it('splits the name at the first non-word char, like the original \\w+ capture', () => {
+        // name = "tip", content = "-x"
+        expect(normalizeDirectives(':::tip-x:::')).toBe(':::tip\n-x\n:::');
+    });
+
+    it('accepts digits in the directive name', () => {
+        expect(normalizeDirectives(':::1tip:::')).toBe('::1tip');
+    });
+
+    it('leaves a fence with no valid name untouched', () => {
+        expect(normalizeDirectives('::: :::')).toBe('::: :::');
+        expect(normalizeDirectives(':::-x foo:::')).toBe(':::-x foo:::');
+    });
+
+    it('treats inner ::: as content rather than the closing fence', () => {
+        expect(normalizeDirectives(':::tip:::extra:::')).toBe(':::tip\n:::extra\n:::');
+    });
+
+    it('only transforms single-line fences, not multi-line containers', () => {
+        const multiline = ':::tip\nalready multi-line\n:::';
+        expect(normalizeDirectives(multiline)).toBe(multiline);
+    });
+
+    it('processes each line independently in a document', () => {
+        const input = 'before\n:::warn be careful :::\nafter';
+        expect(normalizeDirectives(input)).toBe('before\n:::warn\nbe careful\n:::\nafter');
+    });
+
+    // Regression guard for CodeQL js/polynomial-redos: the previous
+    // `\s*(.*?)\s*` form was quadratic on ":::0" followed by a long run of spaces.
+    it('runs in linear time on a pathological single-line input', () => {
+        const evil = `:::0${' '.repeat(100_000)}`;
+        const start = performance.now();
+        normalizeDirectives(evil);
+        expect(performance.now() - start).toBeLessThan(1000);
+    });
+});

package/src/widgets/markdown/normalizeDirectives.ts

@@ -23,28 +23,38 @@
  *
  * Groups:
  *   [1] leading indent
- *   [2] directive name (word chars only)
- *   [3] optional inline content (may be empty)
+ *   [2] raw text between the opening and closing fences
+ *
+ * The directive name and optional inline content are split from group [2] in JS.
  *
  * Only matches when both opening and closing ::: are on the SAME line,
  * so it won't interfere with properly formatted multi-line containers.
  */
-const SINGLE_LINE_DIRECTIVE = /^([ \t]*):::\s*(\w+)\s*(.*?)\s*:::[ \t]*$/gm;
+// Capture the indent and the raw text between the opening and closing fences. The
+// name/content split is done in JS rather than with adjacent `\s*(\w+)\s*(.*?)\s*`
+// groups, which exhibit polynomial backtracking (CodeQL js/polynomial-redos).
+const SINGLE_LINE_DIRECTIVE = /^([ \t]*):::([^\n]*?):::[ \t]*$/gm;
+const DIRECTIVE_NAME = /^\w+/;
 
 export function normalizeDirectives(markdown: string): string {
-    if (!markdown || !markdown.includes(':::')) {
+    if (!markdown?.includes(':::')) {
         return markdown;
     }
 
-    return markdown.replace(
-        SINGLE_LINE_DIRECTIVE,
-        (_match, indent: string, name: string, content: string) => {
-            if (content) {
-                // Has content → multi-line container directive
-                return `${indent}:::${name}\n${indent}${content}\n${indent}:::`;
-            }
-            // No content → leaf directive (::name)
-            return `${indent}::${name}`;
+    return markdown.replace(SINGLE_LINE_DIRECTIVE, (match, indent: string, inner: string) => {
+        const trimmed = inner.trim();
+        const nameMatch = DIRECTIVE_NAME.exec(trimmed);
+        if (!nameMatch) {
+            // No valid directive name → not a single-line directive, leave untouched.
+            return match;
+        }
+        const name = nameMatch[0];
+        const content = trimmed.slice(name.length).trim();
+        if (content) {
+            // Has content → multi-line container directive
+            return `${indent}:::${name}\n${indent}${content}\n${indent}:::`;
         }
-    );
+        // No content → leaf directive (::name)
+        return `${indent}::${name}`;
+    });
 }