@vertesia/ui 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260227.112605Z

package/src/session/UserSession.ts

@@ -7,11 +7,12 @@ import { Env } from '@vertesia/ui/env';
 
 import { getComposableToken } from './auth/composable';
 import { getFirebaseAuth } from './auth/firebase';
-import { TypeRegistry } from './TypeRegistry';
 
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
 export { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY };
 
+const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
+
 
 class UserSession {
 
@@ -19,7 +20,6 @@ class UserSession {
     client: VertesiaClient;
     authError?: Error;
     authToken?: AuthTokenPayload;
-    typeRegistry?: TypeRegistry;
     setSession?: (session: UserSession) => void;
     lastSelectedAccount?: string | null;
     lastSelectedProject?: string | null;
@@ -100,11 +100,7 @@ class UserSession {
         // notify the host app of the login
         Env.onLogin?.(this.authToken);
 
-        // Independent async calls
-        await Promise.all([
-            this._loadTypes(),
-            this.fetchOnboardingStatus(),
-        ]);
+        await this.fetchOnboardingStatus();
 
         return Promise.resolve();
 
@@ -117,15 +113,39 @@ class UserSession {
 
     logout() {
         console.log('Logging out');
-        if (this.authToken) {
-            getFirebaseAuth().signOut();
+
+        // Check if we should use central auth for logout
+        const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
+        const shouldUseCentralAuth = Env.isDocker || devDomains.some((domain) => window.location.hostname.endsWith(domain));
+
+        if (shouldUseCentralAuth) {
+            // Redirect to central auth for logout
+            // Central auth will handle Firebase logout
+            console.log('Using central auth logout');
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
+
+            const logoutUrl = new URL(CENTRAL_AUTH_REDIRECT);
+            const currentUrl = new URL(window.location.href);
+            currentUrl.hash = "";
+            logoutUrl.pathname = "/logout";
+            logoutUrl.searchParams.set("redirect_uri", currentUrl.toString());
+            location.replace(logoutUrl.toString());
+        } else {
+            // Use Firebase logout directly
+            console.log('Using Firebase logout');
+            if (this.authToken) {
+                getFirebaseAuth().signOut();
+            }
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
         }
-        this.authError = undefined;
-        this.isLoading = false;
-        this.authToken = undefined;
-        this.typeRegistry = undefined;
-        this.setSession = undefined;
-        this.client.withAuthCallback(undefined);
     }
 
     async switchAccount(targetAccountId: string) {
@@ -149,23 +169,6 @@ class UserSession {
         window.location.replace('/?a=' + this.account?.id + '&p=' + targetProjectId);
     }
 
-    async _loadTypes() {
-        if (this.project) {
-            return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
-                console.error('Failed to fetch object types', err);
-                throw err;
-            })
-        } else {
-            console.log('No project selected');
-        }
-    }
-
-    async reloadTypes() {
-        return this._loadTypes().then(() => {
-            this.setSession?.(this.clone());
-        });
-    }
-
     async fetchAccounts() {
         return this.client.accounts.list().then(accounts => {
             if (!this.authToken) {
@@ -208,7 +211,6 @@ class UserSession {
         session.setSession = this.setSession;
         session.lastSelectedAccount = this.lastSelectedAccount;
         session.switchAccount = this.switchAccount;
-        session.typeRegistry = this.typeRegistry;
         session.onboardingComplete = this.onboardingComplete;
         return session;
     }

package/src/session/UserSessionProvider.tsx

@@ -1,15 +1,15 @@
+import { Env } from "@vertesia/ui/env";
 import { onAuthStateChanged } from "firebase/auth";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { UserNotFoundError, getComposableToken } from "./auth/composable";
 import { getFirebaseAuth } from "./auth/firebase";
 import { useAuthState } from "./auth/useAuthState";
-import { Env } from "@vertesia/ui/env";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, UserSession, UserSessionContext } from "./UserSession";
 
 const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
 const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
 
-function shouldRedirectToCentralAuth() {
+export function shouldRedirectToCentralAuth() {
     // Authentication is not supported in Docker environment.
     // See https://github.com/vertesia/studio/wiki/Composable-UI-Hosting-Options
     if (Env.isDocker) {
@@ -129,6 +129,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
                         },
                     });
                     redirectToCentralAuth();
+                    return; // Don't register onAuthStateChanged listener when redirecting
                 } else {
                     console.log("Auth: not on dev domain");
                     Env.logger.info("Not on dev domain", {

package/src/session/index.ts

@@ -2,7 +2,6 @@ export * from "./auth/composable";
 export * from "./auth/useCurrentTenant";
 export * from "./auth/useAuthState";
 export * from "./auth/firebase";
-export * from "./TypeRegistry";
 export * from "./UserSession";
 export * from "./UserSessionProvider";
 export * from "./useUXTracking";

package/src/shell/SplashScreen.tsx

@@ -30,8 +30,8 @@ export function SplashScreen({ icon: Icon }: SplashScreenProps) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
         >
-            <div style={{ zIndex: 999999 }} className='fixed inset-x-0 inset-y-0'>
-                <div className="flex w-full h-full items-center justify-center">
+            <div style={{ zIndex: 999999, position: 'fixed', inset: 0 }} className='fixed inset-x-0 inset-y-0'>
+                <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }} className="flex w-full h-full items-center justify-center">
                     <div className="animate-[spin_4s_linear_infinite]">
                         <div className='animate-pulse rounded-full bg-transparent'>
                             {Icon || <LoadingIcon />}
@@ -50,6 +50,8 @@ function LoadingIcon() {
     // const stopColor2 = "#4F46E5";
     return (
         <svg
+            width="32"
+            height="32"
             className="w-8 h-8 text-indigo-600"
             viewBox="0 0 50 50"
             xmlns="http://www.w3.org/2000/svg"

package/src/shell/VertesiaShell.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider, ToastProvider } from "@vertesia/ui/core";
-import { UserPermissionProvider } from "@vertesia/ui/features";
+import { UserPermissionProvider, TypeRegistryProvider } from "@vertesia/ui/features";
 import { UserSessionProvider } from "@vertesia/ui/session";
 import { SplashScreen } from "./SplashScreen";
 import { SigninScreen } from "./login/SigninScreen";
@@ -16,13 +16,15 @@ export function VertesiaShell({ children, lightLogo, darkLogo, loadingIcon }: Ve
     return (
         <ToastProvider>
             <UserSessionProvider>
-                <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                    <SplashScreen icon={loadingIcon} />
-                    <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
-                    <UserPermissionProvider>
-                        {children}
-                    </UserPermissionProvider>
-                </ThemeProvider>
+                <TypeRegistryProvider>
+                    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                        <SplashScreen icon={loadingIcon} />
+                        <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
+                        <UserPermissionProvider>
+                            {children}
+                        </UserPermissionProvider>
+                    </ThemeProvider>
+                </TypeRegistryProvider>
             </UserSessionProvider>
         </ToastProvider>
     )

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