@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/shell/login/UserInfo.tsx

@@ -1,5 +1,5 @@
 import { getTenantIdFromProject } from "@vertesia/common";
-import { VTabs, VTabsBar, VTabsPanel, VTooltip } from "@vertesia/ui/core";
+import { Tabs, TabsBar, TabsPanel, VTooltip } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
 import { useUserSession } from "@vertesia/ui/session";
 // Package version is now passed as prop from the consuming application
@@ -69,10 +69,10 @@ export default function InfoList() {
 
     return (
         <div className="w-full">
-            <VTabs defaultValue="user" tabs={tabs} fullWidth updateHash={false}>
-                <VTabsBar />
-                <VTabsPanel />
-            </VTabs>
+            <Tabs defaultValue="user" tabs={tabs} fullWidth updateHash={false}>
+                <TabsBar />
+                <TabsPanel />
+            </Tabs>
         </div>
     )
 }

package/src/widgets/json-view/JSONCode.tsx

@@ -17,13 +17,11 @@ export function JSONCode({ data, className }: { data: any; className?: string })
     }, [data]);
 
     return (
-        <div className={className}>
+        <div className={`h-full ${className || ''}`}>
             <MonacoEditor
                 value={jsonString}
                 language="json"
                 theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                minLines={10}
-                maxLines={50}
                 options={{
                     readOnly: true,
                     domReadOnly: true,

package/src/widgets/json-view/JSONDisplay.tsx

@@ -17,7 +17,7 @@ export function JSONDisplay({ value, viewCode = false }: JSONDisplayProps) {
     }
 
     return (
-        <div className='relative w-full'>
+        <div className='relative w-full h-full'>
             {viewCode ? <JSONCode data={value} /> : <JSONView value={value} />}
         </div>
     )

package/src/widgets/markdown/ArtifactContentRenderer.tsx

@@ -5,8 +5,9 @@
  */
 
 import { useMemo, type ReactElement } from 'react';
+import DOMPurify from 'dompurify';
 import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
-import { AgentChart, type AgentChartSpec, type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
+import { type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
 import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
 import { MarkdownRenderer } from './MarkdownRenderer';
@@ -18,6 +19,7 @@ export type ExpandRenderType =
     | 'table'
     | 'markdown'
     | 'fusion-fragment'
+    | 'mockup'
     | 'code'
     | 'image'
     | 'auto';
@@ -45,8 +47,13 @@ function autoDetectRenderType(
 ): ExpandRenderType {
     const ext = path.split('.').pop()?.toLowerCase();
 
-    // Image extensions
-    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '')) {
+    // SVG files → mockup renderer (inline SVG from text content)
+    if (ext === 'svg') {
+        return 'mockup';
+    }
+
+    // Image extensions (binary → rendered via URL)
+    if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext || '')) {
         return 'image';
     }
 
@@ -74,11 +81,6 @@ function autoDetectRenderType(
             return 'vega-lite';
         }
 
-        // Check for Recharts format
-        if (('chart' in obj || 'type' in obj) && 'data' in obj && Array.isArray(obj.data)) {
-            return 'chart';
-        }
-
         // Check for fusion fragment template with data
         if ('template' in obj && 'data' in obj) {
             return 'fusion-fragment';
@@ -94,6 +96,24 @@ function autoDetectRenderType(
     return 'code';
 }
 
+function toVegaLiteSpec(content: unknown): VegaLiteChartSpec | null {
+    if (typeof content !== 'object' || content === null) {
+        return null;
+    }
+
+    const obj = content as Record<string, unknown>;
+
+    if (obj.library === 'vega-lite' && 'spec' in obj && typeof obj.spec === 'object' && obj.spec !== null) {
+        return obj as unknown as VegaLiteChartSpec;
+    }
+
+    if (typeof obj.$schema === 'string' && obj.$schema.includes('vega')) {
+        return { library: 'vega-lite', spec: obj };
+    }
+
+    return null;
+}
+
 /**
  * Table renderer for array data or CSV
  */
@@ -175,6 +195,67 @@ function CodeRenderer({ content, path }: { content: unknown; path: string }): Re
     );
 }
 
+/**
+ * Sanitize SVG markup using DOMPurify.
+ * Allows only safe SVG elements; strips scripts, event handlers, and foreignObject.
+ */
+export function sanitizeSvg(svg: string): string {
+    return DOMPurify.sanitize(svg, {
+        USE_PROFILES: { svg: true, svgFilters: true },
+        ADD_TAGS: ['use'],
+        FORBID_TAGS: ['foreignObject'],
+    });
+}
+
+/**
+ * Make SVG responsive — remove fixed dimensions, ensure viewBox.
+ */
+export function makeSvgResponsive(svg: string): string {
+    return svg.replace(/<svg([^>]*)>/i, (_full: string, attrs: string) => {
+        let a = attrs;
+        if (!/viewBox/i.test(a)) {
+            const w = /\swidth\s*=\s*["']?(\d+(?:\.\d+)?)/i.exec(a);
+            const h = /\sheight\s*=\s*["']?(\d+(?:\.\d+)?)/i.exec(a);
+            if (w && h) a += ` viewBox="0 0 ${w[1]} ${h[1]}"`;
+        }
+        a = a
+            .replace(/\swidth\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '')
+            .replace(/\sheight\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '');
+        if (/style="/i.test(a)) {
+            a = a.replace(/style="([^"]*)"/i, (_: string, v: string) =>
+                `style="${v};width:100%;height:auto;display:block;max-width:100%;"`);
+        } else {
+            a += ' style="width:100%;height:auto;display:block;max-width:100%;"';
+        }
+        if (!/preserveAspectRatio=/i.test(a)) {
+            a += ' preserveAspectRatio="xMidYMid meet"';
+        }
+        return `<svg${a}>`;
+    });
+}
+
+/**
+ * Mockup renderer — renders raw SVG content inline after sanitization.
+ */
+function MockupRenderer({ content }: { content: unknown }): ReactElement {
+    const processedSvg = useMemo(() => {
+        const raw = typeof content === 'string' ? content.trim() : '';
+        if (!raw) return null;
+        return makeSvgResponsive(sanitizeSvg(raw));
+    }, [content]);
+
+    if (!processedSvg) {
+        return <CodeBlockPlaceholder type="expand" error="Empty mockup" />;
+    }
+
+    return (
+        <div
+            style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+            dangerouslySetInnerHTML={{ __html: processedSvg }}
+        />
+    );
+}
+
 /**
  * Image renderer
  */
@@ -215,19 +296,32 @@ export function ArtifactContentRenderer({
     // Render based on type
     switch (actualType) {
         case 'chart': {
+            const spec = toVegaLiteSpec(content);
+            if (!spec) {
+                return (
+                    <CodeBlockPlaceholder
+                        type="chart"
+                        error="Only Vega-Lite charts are supported. Recharts rendering has been retired."
+                    />
+                );
+            }
             return (
                 <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
-                    <AgentChart spec={content as AgentChartSpec} artifactRunId={runId} />
+                    <VegaLiteChart spec={spec} artifactRunId={runId} />
                 </CodeBlockErrorBoundary>
             );
         }
 
         case 'vega-lite': {
-            const spec: VegaLiteChartSpec = typeof content === 'object' && content !== null
-                ? ('library' in (content as Record<string, unknown>)
-                    ? content as VegaLiteChartSpec
-                    : { library: 'vega-lite', spec: content as Record<string, unknown> })
-                : { library: 'vega-lite', spec: content as Record<string, unknown> };
+            const spec = toVegaLiteSpec(content);
+            if (!spec) {
+                return (
+                    <CodeBlockPlaceholder
+                        type="chart"
+                        error="Invalid Vega-Lite specification"
+                    />
+                );
+            }
             return (
                 <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
                     <VegaLiteChart spec={spec} artifactRunId={runId} />
@@ -287,6 +381,13 @@ export function ArtifactContentRenderer({
             );
         }
 
+        case 'mockup':
+            return (
+                <CodeBlockErrorBoundary type="expand" fallbackCode={typeof content === 'string' ? content : path}>
+                    <MockupRenderer content={content} />
+                </CodeBlockErrorBoundary>
+            );
+
         case 'image':
             return (
                 <CodeBlockErrorBoundary type="image" fallbackCode={path}>

package/src/widgets/markdown/MarkdownFigure.tsx

@@ -0,0 +1,100 @@
+import { useResolvedUrl, parseUrlScheme } from './useResolvedUrl';
+import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+
+export interface MarkdownFigureProps {
+    src?: string;
+    alt?: string;
+    caption: string;
+    className?: string;
+    artifactRunId?: string;
+}
+
+/**
+ * Markdown figure component for images with captions.
+ * Wraps the image in a <figure> element with a <figcaption>.
+ *
+ * Usage in markdown: ![alt text](image-url "Caption text")
+ */
+export function MarkdownFigure({
+    src,
+    alt,
+    caption,
+    className,
+    artifactRunId,
+}: MarkdownFigureProps) {
+    const rawSrc = src || '';
+    const { scheme } = parseUrlScheme(rawSrc);
+
+    // For standard URLs, render directly
+    if (scheme === 'standard') {
+        return (
+            <figure className="my-4">
+                <img src={src} alt={alt} className={className} />
+                <figcaption className="mt-2 text-sm text-muted text-center italic">
+                    {caption}
+                </figcaption>
+            </figure>
+        );
+    }
+
+    // For artifact: and image: URLs, use the resolver
+    return (
+        <ResolvedFigure
+            rawSrc={rawSrc}
+            alt={alt}
+            caption={caption}
+            artifactRunId={artifactRunId}
+            className={className}
+        />
+    );
+}
+
+/**
+ * Internal component for figures that need async URL resolution
+ */
+function ResolvedFigure({
+    rawSrc,
+    alt,
+    caption,
+    artifactRunId,
+    className,
+}: {
+    rawSrc: string;
+    alt?: string;
+    caption: string;
+    artifactRunId?: string;
+    className?: string;
+}) {
+    const { url, isLoading, error, retry } = useResolvedUrl({
+        rawUrl: rawSrc,
+        artifactRunId,
+        disposition: 'inline',
+    });
+
+    if (isLoading) {
+        return <CodeBlockPlaceholder type="image" message={alt ? `Loading ${alt}...` : undefined} />;
+    }
+
+    if (error) {
+        return (
+            <CodeBlockPlaceholder
+                type="image"
+                error={error}
+                onRetry={retry}
+            />
+        );
+    }
+
+    if (!url) {
+        return null;
+    }
+
+    return (
+        <figure className="my-4">
+            <img src={url} alt={alt} className={className} />
+            <figcaption className="mt-2 text-sm text-muted text-center italic">
+                {caption}
+            </figcaption>
+        </figure>
+    );
+}

package/src/widgets/markdown/MarkdownRenderer.tsx

@@ -3,9 +3,19 @@ import type { Element } from 'hast';
 import React from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkDirective from 'remark-directive';
+import remarkAlert from 'remark-github-blockquote-alert';
+import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
+import remarkSupersub from 'remark-supersub';
+import rehypeKatex from 'rehype-katex';
 import { SKIP, visit } from 'unist-util-visit';
 import { MarkdownLink } from './MarkdownLink';
 import { MarkdownImage } from './MarkdownImage';
+import { MarkdownFigure } from './MarkdownFigure';
+import { remarkDirectiveHandler } from './remarkDirectiveHandler';
+import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
+import { normalizeDirectives } from './normalizeDirectives';
 import {
     CodeBlockHandlerProvider,
     createDefaultCodeBlockHandlers,
@@ -93,14 +103,41 @@ export function MarkdownRenderer({
     onProposalSubmit,
 }: MarkdownRendererProps) {
     const codeBlockRegistry = useCodeBlockRendererRegistry();
-    const plugins = React.useMemo(() => {
-        const result = [remarkGfm, ...remarkPlugins];
+    const normalizedMarkdown = React.useMemo(
+        () => normalizeDirectives(normalizeCustomSchemeLinks(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[] = [
+            remarkGfm,
+            remarkDirective,
+            remarkDirectiveHandler,
+            remarkAlert,
+            remarkDefinitionList,
+            remarkSupersub,
+            remarkMath,
+            ...remarkPlugins,
+        ];
         if (removeComments) {
             result.push(remarkRemoveComments);
         }
         return result;
     }, [remarkPlugins, removeComments]);
 
+    // Rehype plugins (HTML processing, including KaTeX for math)
+    const rehypePluginsArray = React.useMemo(() => [rehypeKatex], []);
+
+    // Remark-rehype bridge options (custom AST handlers for definition lists)
+    const remarkRehypeOptions = React.useMemo(() => ({
+        handlers: {
+            ...defListHastHandlers,
+        },
+    }), []);
+
     const componentsWithOverrides = React.useMemo(() => {
         const baseComponents = components || {};
         const ExistingCode = baseComponents.code;
@@ -157,7 +194,7 @@ export function MarkdownRenderer({
 
             // Default code rendering
             const baseInlineClass = 'px-1.5 py-0.5 rounded';
-            const baseCodeClass = 'text-muted';
+            const baseCodeClass = '';
 
             return (
                 <code
@@ -193,8 +230,22 @@ export function MarkdownRenderer({
             );
         };
 
-        const ImageComponent = (props: { node?: any; src?: string; alt?: string }) => {
-            const { node, src, alt, ...rest } = props as any;
+        const ImageComponent = (props: { node?: any; src?: string; alt?: string; title?: string }) => {
+            const { node, src, alt, title, ...rest } = props as any;
+
+            // If image has a title, render as figure with caption
+            if (title) {
+                return (
+                    <MarkdownFigure
+                        src={src}
+                        alt={alt}
+                        caption={title}
+                        className={imageClassName}
+                        artifactRunId={artifactRunId}
+                    />
+                );
+            }
+
             return (
                 <MarkdownImage
                     node={node}
@@ -231,18 +282,20 @@ export function MarkdownRenderer({
             onProposalSubmit={onProposalSubmit}
         >
             <Markdown
-                remarkPlugins={plugins}
+                remarkPlugins={remarkPluginsArray}
+                rehypePlugins={rehypePluginsArray}
+                remarkRehypeOptions={remarkRehypeOptions}
                 components={componentsWithOverrides}
                 urlTransform={customUrlTransform}
             >
-                {children}
+                {normalizedMarkdown}
             </Markdown>
         </CodeBlockHandlerProvider>
     );
 
     if (className) {
-        return <div className={className}>{markdownContent}</div>;
+        return <div className={`md-content ${className}`}>{markdownContent}</div>;
     }
 
-    return markdownContent;
+    return <div className="md-content">{markdownContent}</div>;
 }

package/src/widgets/markdown/MermaidDiagram.tsx

@@ -1,13 +1,103 @@
 import { useEffect, useRef, useState, useId } from 'react';
 import mermaid from 'mermaid';
 
-// Initialize mermaid with default config
+const MERMAID_FONT_FAMILY =
+    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+/**
+ * Browser-side Mermaid normalization:
+ * - Convert escaped newlines in quoted labels (`\n`, `\\n`) to HTML line breaks.
+ *   Mermaid web rendering handles `<br/>` labels more reliably than escaped `\n`.
+ */
+function normalizeMermaidCodeForBrowser(code: string): string {
+    const trimmed = code.trim();
+    let normalized = '';
+    let inDoubleQuote = false;
+    let inSingleQuote = false;
+
+    for (let i = 0; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        const prev = i > 0 ? trimmed[i - 1] : '';
+
+        if (char === '"' && !inSingleQuote && prev !== '\\') {
+            inDoubleQuote = !inDoubleQuote;
+            normalized += char;
+            continue;
+        }
+
+        if (char === "'" && !inDoubleQuote && prev !== '\\') {
+            inSingleQuote = !inSingleQuote;
+            normalized += char;
+            continue;
+        }
+
+        if ((inDoubleQuote || inSingleQuote) && char === '\\') {
+            let j = i;
+            while (trimmed[j] === '\\') {
+                j++;
+            }
+
+            if (trimmed[j] === 'n') {
+                normalized += '<br/>';
+                i = j;
+                continue;
+            }
+        }
+
+        normalized += char;
+    }
+
+    return normalized;
+}
+
+/**
+ * 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, '');
+
+        if (/style="/i.test(nextAttrs)) {
+            nextAttrs = nextAttrs.replace(
+                /style="([^"]*)"/i,
+                (_styleFull, styleValue: string) =>
+                    `style="${styleValue};width:100%;height:auto;display:block;max-width:100%;"`
+            );
+        } else {
+            nextAttrs += ' style="width:100%;height:auto;display:block;max-width:100%;"';
+        }
+
+        if (!/preserveAspectRatio=/i.test(nextAttrs)) {
+            nextAttrs += ' preserveAspectRatio="xMidYMid meet"';
+        }
+
+        return `<svg${nextAttrs}>`;
+    });
+}
+
+// Initialize mermaid with a browser-focused config close to Mermaid Playground defaults.
 mermaid.initialize({
     startOnLoad: false,
     theme: 'default',
     securityLevel: 'loose',
-    fontFamily: 'inherit',
+    fontFamily: MERMAID_FONT_FAMILY,
     suppressErrorRendering: true,
+    flowchart: {
+        htmlLabels: true,
+        useMaxWidth: true,
+        nodeSpacing: 40,
+        rankSpacing: 50,
+        padding: 12,
+    },
+    sequence: {
+        useMaxWidth: true,
+    },
+    themeVariables: {
+        fontFamily: MERMAID_FONT_FAMILY,
+    },
 });
 
 export interface MermaidDiagramProps {
@@ -54,12 +144,14 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
 
                 // Generate unique ID for this render
                 const id = `mermaid-${uniqueId}-${Date.now()}`;
+                const normalizedCode = normalizeMermaidCodeForBrowser(code);
 
                 // Render the diagram
-                const { svg: renderedSvg } = await mermaid.render(id, code.trim());
+                const { svg: renderedSvg } = await mermaid.render(id, normalizedCode);
+                const responsiveSvg = makeSvgResponsive(renderedSvg);
 
                 if (!cancelled) {
-                    setSvg(renderedSvg);
+                    setSvg(responsiveSvg);
                 }
             } catch (err: unknown) {
                 if (!cancelled) {
@@ -93,7 +185,7 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
     return (
         <div
             ref={containerRef}
-            className={`my-4 overflow-x-auto ${className || ''}`}
+            className={`my-4 w-full overflow-x-auto [&_svg]:mx-auto [&_svg]:w-full [&_svg]:h-auto [&_svg]:max-w-full ${className || ''}`}
             dangerouslySetInnerHTML={{ __html: svg }}
         />
     );

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

@@ -41,19 +41,12 @@ describe('Chart JSON parsing', () => {
         }
     };
 
-    const detectChartLibrary = (spec: Record<string, unknown>): 'vega-lite' | 'recharts' | null => {
+    const detectChartLibrary = (spec: Record<string, unknown>): 'vega-lite' | null => {
         const hasVegaSchema = typeof spec.$schema === 'string' && spec.$schema.includes('vega');
         const isExplicitVegaLite = spec.library === 'vega-lite' && 'spec' in spec;
         if (hasVegaSchema || isExplicitVegaLite) {
             return 'vega-lite';
         }
-        const isRecharts =
-            ('chart' in spec || 'type' in spec || spec.library === 'recharts') &&
-            'data' in spec &&
-            Array.isArray(spec.data);
-        if (isRecharts) {
-            return 'recharts';
-        }
         return null;
     };
 
@@ -102,39 +95,15 @@ describe('Chart JSON parsing', () => {
             expect(detectChartLibrary(spec)).toBe('vega-lite');
         });
 
-        it('should detect Recharts by chart field', () => {
-            const spec = {
-                chart: 'bar',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
-        it('should detect Recharts by type field', () => {
-            const spec = {
-                type: 'line',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
-        it('should detect explicit Recharts with library field', () => {
-            const spec = {
-                library: 'recharts',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
         it('should return null for non-chart spec', () => {
             const spec = { foo: 'bar' };
             expect(detectChartLibrary(spec)).toBeNull();
         });
 
-        it('should return null for Recharts without data array', () => {
+        it('should return null for legacy chart format', () => {
             const spec = {
                 chart: 'bar',
-                data: 'not an array',
+                data: [{ x: 1, y: 2 }],
             };
             expect(detectChartLibrary(spec)).toBeNull();
         });