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

package/src/shell/apps/AppProjectSelector.tsx

@@ -1,5 +1,5 @@
 import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
-import { VSelectBox, useFetch } from "@vertesia/ui/core";
+import { SelectBox, useFetch } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
 
@@ -47,7 +47,7 @@ function SelectProject({ initialValue, projects, onChange, placeholder = "Select
     }
     let actualValue = !value && initialValue ? projects.find(p => p.id === initialValue) : value;
     return (
-        <VSelectBox
+        <SelectBox
             by="id"
             value={actualValue}
             options={projects}

package/src/shell/apps/StandaloneApp.tsx

@@ -1,10 +1,9 @@
 import { AppInstallationWithManifest, ProjectRef } from "@vertesia/common";
-import { Center } from "@vertesia/ui/core";
+import { Center, useFetch, SelectBox } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { LockIcon } from "lucide-react";
-import { ComponentType, ReactNode, useEffect, useState } from "react";
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from "react";
 import { AppInstallationProvider } from "./AppInstallationProvider";
-import { AppProjectSelector } from "./AppProjectSelector";
 
 
 interface StandaloneAppProps {
@@ -71,13 +70,50 @@ export function StandaloneAppImpl({ name, AccessDenied = AccessDeniedMessage, ch
 interface AccessDeniedMessageProps {
     name: string;
 }
+
 function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
-    const { project } = useUserSession();
-    const onChange = (project: ProjectRef) => {
-        localStorage.setItem(LastSelectedAccountId_KEY, project.account);
-        localStorage.setItem(LastSelectedProjectId_KEY + '-' + project.account, project.id);
+    const { project, accounts, client } = useUserSession();
+    const [selectedAccountId, setSelectedAccountId] = useState<string | undefined>();
+
+    // Fetch all projects where the app is installed across all organizations
+    const { data: allProjects } = useFetch(() => {
+        return client.apps.getAppInstallationProjects({ name });
+    }, [name]);
+
+    // Group projects by organization
+    const { projectsByOrg, orgOptions } = useMemo(() => {
+        if (!allProjects || !accounts) return { projectsByOrg: {}, orgOptions: [] };
+
+        const grouped: Record<string, ProjectRef[]> = {};
+        for (const p of allProjects) {
+            if (!grouped[p.account]) {
+                grouped[p.account] = [];
+            }
+            grouped[p.account].push(p);
+        }
+
+        // Only show orgs that have projects with the app installed
+        const orgsWithProjects = accounts.filter(a => grouped[a.id]?.length > 0);
+
+        return { projectsByOrg: grouped, orgOptions: orgsWithProjects };
+    }, [allProjects, accounts]);
+
+    // Auto-select first org if not selected
+    useEffect(() => {
+        if (!selectedAccountId && orgOptions.length > 0) {
+            setSelectedAccountId(orgOptions[0].id);
+        }
+    }, [orgOptions, selectedAccountId]);
+
+    const onProjectChange = (selected: ProjectRef) => {
+        localStorage.setItem(LastSelectedAccountId_KEY, selected.account);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + selected.account, selected.id);
         window.location.reload();
-    }
+    };
+
+    const filteredProjects = selectedAccountId ? (projectsByOrg[selectedAccountId] || []) : [];
+    const selectedOrg = orgOptions.find(a => a.id === selectedAccountId);
+
     return (
         <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
             <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
@@ -85,9 +121,39 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
             <div className="mt-2 text-sm text-gray-500">
                 You don&apos;t have permission to view the <span className="font-semibold">{name}</span> app in project: <span className="font-semibold">&laquo;{project?.name}&raquo;</span>.
             </div>
-            <div className="mt-4">
-                <AppProjectSelector app={{ name }} onChange={onChange} />
-            </div>
+            {orgOptions.length === 0 && allProjects !== undefined && (
+                <div className="mt-4 text-sm text-gray-500">
+                    This app is not installed in any project you have access to.
+                </div>
+            )}
+            {orgOptions.length > 0 && (
+                <div className="mt-4 flex flex-row gap-4 items-end">
+                    {orgOptions.length > 1 && (
+                        <div>
+                            <div className="text-sm text-gray-500 mb-2">Organization</div>
+                            <SelectBox
+                                by="id"
+                                value={selectedOrg}
+                                options={orgOptions}
+                                optionLabel={(option) => option.name}
+                                placeholder="Select Organization"
+                                onChange={(org) => setSelectedAccountId(org.id)}
+                            />
+                        </div>
+                    )}
+                    <div>
+                        {orgOptions.length > 1 && <div className="text-sm text-gray-500 mb-2">Project</div>}
+                        <SelectBox
+                            by="id"
+                            value={undefined}
+                            options={filteredProjects}
+                            optionLabel={(option) => option.name}
+                            placeholder="Select Project"
+                            onChange={onProjectChange}
+                        />
+                    </div>
+                </div>
+            )}
         </Center>
     )
 }

package/src/shell/login/InviteAcceptModal.tsx

@@ -1,5 +1,5 @@
 import { TransientToken, UserInviteTokenData } from "@vertesia/common"
-import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
+import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
 
@@ -78,16 +78,16 @@ export function InviteAcceptModal() {
 
     return (
         <div>
-            <VModal isOpen={showModal} onClose={closeModal}>
-                <VModalTitle>Review Invites</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={showModal} onClose={closeModal}>
+                <ModalTitle>Review Invites</ModalTitle>
+                <ModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.
                         Please review and accept or declined them.
                     </div>
                     {inviteList}
-                </VModalBody>
-            </VModal>
+                </ModalBody>
+            </Modal>
         </div>
     )
 

package/src/shell/login/SignInModal.tsx

@@ -19,7 +19,7 @@ export default function SignInModal({ isOpen, onClose }: SignInModalProps) {
                 <GitHubSignInButton />
                 <MicrosoftSignInButton />
             </ModalBody>
-            <ModalFooter justify="end">
+            <ModalFooter align="right">
                 <Button variant="ghost" onClick={onClose}>Cancel</Button>
             </ModalFooter>
         </Modal>

package/src/shell/login/SignupForm.tsx

@@ -1,5 +1,5 @@
 import { SignupData } from "@vertesia/common";
-import { Button, Input, VSelectBox, SelectStack } from "@vertesia/ui/core";
+import { Button, Input, SelectBox, SelectStack } from "@vertesia/ui/core";
 import { User } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { getFirebaseAuth } from "@vertesia/ui/session";
@@ -130,7 +130,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             {isCompany &&
                 <>
                     <FormItem label="Company Size">
-                        <VSelectBox className="w-full border border-accent bg-muted"
+                        <SelectBox className="w-full border border-accent bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
@@ -147,7 +147,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                 </>
             }
             <FormItem label="Project Maturity">
-                <VSelectBox className="w-full border border-accent bg-muted"
+                <SelectBox className="w-full border border-accent bg-muted"
                     options={projectMaturityOptions}
                     value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
                     optionLabel={(option) => option?.label}

package/src/shell/login/TerminalLogin.tsx

@@ -23,17 +23,53 @@ interface ClientInfo extends ProfileData {
     code: string
 }
 
+const LOOPBACK_HOSTS = new Set(['127.0.0.1', 'localhost'])
+
+function parseRedirectUri(rawRedirect: string | null): string | null {
+    if (!rawRedirect) {
+        return null
+    }
+
+    let decoded: string
+    try {
+        decoded = decodeURIComponent(rawRedirect)
+    } catch {
+        return null
+    }
+
+    let parsed: URL
+    try {
+        parsed = new URL(decoded)
+    } catch {
+        return null
+    }
+
+    if (parsed.protocol !== 'http:') {
+        return null
+    }
+
+    if (!parsed.port) {
+        return null
+    }
+
+    if (parsed.username || parsed.password) {
+        return null
+    }
+
+    if (!LOOPBACK_HOSTS.has(parsed.hostname)) {
+        return null
+    }
+
+    return parsed.toString()
+}
+
 function getClientInfo(location: Location): ClientInfo | null {
     const params = new URLSearchParams(location.search)
-    let redirect = params.get('redirect_uri')
+    const redirect = parseRedirectUri(params.get('redirect_uri'))
     const code = params.get('code')
     if (!redirect || !code) {
         return null
     }
-    redirect = decodeURI(redirect)
-    if (!redirect.startsWith('http://127.0.0.1:') && !redirect.startsWith('http://localhost:')) {
-        return null
-    }
     const profile = params.get('profile') ?? "default"
     const project = params.get('project') ?? undefined
     const account = params.get('account') ?? undefined
@@ -162,14 +198,14 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
     return user && allProjects ? (
         <>
             <div className='w-1/3'>
-                <div className="mb-4 text-xl font-semibold text-gray-800">
+                <div className="mb-4 text-xl font-semibold text-info">
                     Authorizing client on {envName} environment.
                 </div>
-                <div className='mb-2 text-md text-gray-800'>
+                <div className='mb-2 text-md text-muted-foreground'>
                     <div>A client app wants authorization to access the composable prompt servers in your name.</div>
-                    <div>The client app code is <b>{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
+                    <div>The client app code is <b className="text-foreground">{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
                 </div>
-                <div className='mb-2 text-sm text-gray-600'>
+                <div className='mb-2 text-sm text-muted-foreground'>
                     <div>You must choose the target account and project for the client to access.</div>
                     <div>Also, enter a profile name that will be used to save the authorization in your client configuration.</div>
                 </div>
@@ -241,18 +277,21 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
     return (
         <div className='w-1/3'>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-gray-600">Profile Name</span>
+                <span className="font-semibold text-muted-foreground">Profile Name</span>
                 <Input type='text' value={currentData.profile} onChange={onChangeProfile} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-gray-600">Account</span>
+                <span className="font-semibold text-muted-foreground">Account</span>
                 <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-gray-600">Project</span>
+                <span className="font-semibold text-muted-foreground">Project</span>
                 <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
             </div>
-            <div className="pt-2">
+            <div className='mb-4 text-sm text-attention'>
+                <b>Note:</b> If your browser asks for permission to access your local network, please allow it. This is required to send the authorization token back to the CLI tool. If not, you will need to copy/paste the token manually in your terminal.
+            </div>
+            <div>
                 <Button size='xl' onClick={() => onAccept(currentData)}>Authorize Client</Button>
             </div>
         </div>

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/form/schema.ts

@@ -1,5 +1,6 @@
 import { JSONSchema, JSONSchemaType, JSONSchemaTypeName } from "@vertesia/common";
 import Ajv, { ErrorObject, ValidateFunction } from "ajv";
+import addFormats from "ajv-formats";
 
 function createSchemaFromType(type: JSONSchemaTypeName): JSONSchema {
     if (type === 'object') {
@@ -23,6 +24,7 @@ export class Schema {
     get validator() {
         if (!this._validator) {
             const ajv = new Ajv({ allErrors: true, strict: false });
+            addFormats(ajv);
             this._validator = ajv.compile(this.schema);
         }
         return this._validator;

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

@@ -0,0 +1,301 @@
+/**
+ * ArtifactContentRenderer - Renders artifact content by type
+ *
+ * Supports rendering charts, tables, markdown, fusion fragments, and more.
+ */
+
+import { useMemo, type ReactElement } from 'react';
+import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
+import { AgentChart, type AgentChartSpec, 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';
+
+// Render type mapping
+export type ExpandRenderType =
+    | 'chart'
+    | 'vega-lite'
+    | 'table'
+    | 'markdown'
+    | 'fusion-fragment'
+    | 'code'
+    | 'image'
+    | 'auto';
+
+export interface ArtifactContentRendererProps {
+    /** The fetched content (parsed JSON or string) */
+    content: unknown;
+    /** The explicit render type (from expand:type syntax) */
+    renderType: ExpandRenderType;
+    /** Artifact path (for display and type detection) */
+    path: string;
+    /** Run ID for nested artifact references */
+    runId?: string;
+    /** Content type detected from path */
+    contentType?: 'json' | 'text' | 'binary';
+}
+
+/**
+ * Auto-detect render type from content and path
+ */
+function autoDetectRenderType(
+    content: unknown,
+    path: string,
+    contentType?: 'json' | 'text' | 'binary'
+): ExpandRenderType {
+    const ext = path.split('.').pop()?.toLowerCase();
+
+    // Image extensions
+    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '')) {
+        return 'image';
+    }
+
+    // Markdown
+    if (ext === 'md') {
+        return 'markdown';
+    }
+
+    // CSV as table
+    if (ext === 'csv') {
+        return 'table';
+    }
+
+    // JSON content - try to detect chart or table
+    if (contentType === 'json' && typeof content === 'object' && content !== null) {
+        const obj = content as Record<string, unknown>;
+
+        // Check for Vega-Lite schema
+        if (typeof obj.$schema === 'string' && obj.$schema.includes('vega')) {
+            return 'vega-lite';
+        }
+
+        // Check for wrapped Vega-Lite
+        if (obj.library === 'vega-lite' && 'spec' in obj) {
+            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';
+        }
+
+        // Check for table data (array of objects)
+        if (Array.isArray(content) && content.length > 0 && typeof content[0] === 'object') {
+            return 'table';
+        }
+    }
+
+    // Default to code
+    return 'code';
+}
+
+/**
+ * Table renderer for array data or CSV
+ */
+function TableRenderer({ content }: { content: unknown }): ReactElement {
+    const { headers, rows } = useMemo(() => {
+        if (!Array.isArray(content) || content.length === 0) {
+            return { headers: [], rows: [] };
+        }
+
+        // Extract headers from first object
+        const first = content[0];
+        if (typeof first !== 'object' || first === null) {
+            return { headers: [], rows: [] };
+        }
+
+        const headers = Object.keys(first);
+        const rows = content.map(row =>
+            headers.map(h => {
+                const val = (row as Record<string, unknown>)[h];
+                if (val === null || val === undefined) return '';
+                if (typeof val === 'object') return JSON.stringify(val);
+                return String(val);
+            })
+        );
+
+        return { headers, rows };
+    }, [content]);
+
+    if (headers.length === 0) {
+        return (
+            <CodeBlockPlaceholder type="table" error="No table data found" />
+        );
+    }
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="min-w-full text-sm border-collapse">
+                <thead>
+                    <tr className="border-b">
+                        {headers.map((h, i) => (
+                            <th key={i} className="px-3 py-2 text-left font-medium text-muted">
+                                {h}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows.slice(0, 100).map((row, i) => (
+                        <tr key={i} className="border-b border-muted/20">
+                            {row.map((cell, j) => (
+                                <td key={j} className="px-3 py-2">
+                                    {cell}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            {rows.length > 100 && (
+                <div className="text-sm text-muted py-2">
+                    Showing 100 of {rows.length} rows
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Code block renderer for raw content
+ */
+function CodeRenderer({ content, path }: { content: unknown; path: string }): ReactElement {
+    const ext = path.split('.').pop()?.toLowerCase() || '';
+    const code = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+
+    return (
+        <pre className="overflow-x-auto p-3 bg-muted/10 rounded text-sm">
+            <code className={`language-${ext}`}>{code}</code>
+        </pre>
+    );
+}
+
+/**
+ * Image renderer
+ */
+function ImageRenderer({ content, path }: { content: unknown; path: string }): ReactElement {
+    const url = typeof content === 'string' ? content : '';
+    const alt = path.split('/').pop() || 'Artifact image';
+
+    return (
+        <img
+            src={url}
+            alt={alt}
+            className="max-w-full h-auto rounded"
+            loading="lazy"
+        />
+    );
+}
+
+/**
+ * ArtifactContentRenderer - Main component
+ *
+ * Renders artifact content based on explicit type or auto-detection.
+ */
+export function ArtifactContentRenderer({
+    content,
+    renderType,
+    path,
+    runId,
+    contentType,
+}: ArtifactContentRendererProps): ReactElement {
+    // Determine actual render type
+    const actualType = useMemo(() => {
+        if (renderType !== 'auto') {
+            return renderType;
+        }
+        return autoDetectRenderType(content, path, contentType);
+    }, [content, path, contentType, renderType]);
+
+    // Render based on type
+    switch (actualType) {
+        case 'chart': {
+            return (
+                <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
+                    <AgentChart spec={content as AgentChartSpec} 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> };
+            return (
+                <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
+                    <VegaLiteChart spec={spec} artifactRunId={runId} />
+                </CodeBlockErrorBoundary>
+            );
+        }
+
+        case 'fusion-fragment': {
+            // For fusion fragments, content should have { template, data }
+            // Wrap with FusionFragmentProvider to inject VegaLiteChart for embedded charts
+            const fragmentContent = content as { template?: unknown; data?: Record<string, unknown> };
+            console.log('[ArtifactContentRenderer] fusion-fragment:', {
+                hasTemplate: !!fragmentContent.template,
+                hasData: !!fragmentContent.data,
+                runId,
+                hasVegaLiteChart: !!VegaLiteChart,
+            });
+            if (fragmentContent.template && fragmentContent.data) {
+                return (
+                    <CodeBlockErrorBoundary type="fusion-fragment" fallbackCode={JSON.stringify(content, null, 2)}>
+                        <FusionFragmentProvider
+                            data={fragmentContent.data}
+                            ChartComponent={VegaLiteChart}
+                            artifactRunId={runId}
+                        >
+                            <FusionFragmentHandler
+                                code={JSON.stringify(fragmentContent.template)}
+                                data={fragmentContent.data}
+                            />
+                        </FusionFragmentProvider>
+                    </CodeBlockErrorBoundary>
+                );
+            }
+            // If no data wrapper, treat as template-only (needs context from parent provider)
+            return (
+                <CodeBlockErrorBoundary type="fusion-fragment" fallbackCode={JSON.stringify(content, null, 2)}>
+                    <FusionFragmentHandler code={JSON.stringify(content)} />
+                </CodeBlockErrorBoundary>
+            );
+        }
+
+        case 'table':
+            return (
+                <CodeBlockErrorBoundary type="table" fallbackCode={JSON.stringify(content, null, 2)}>
+                    <TableRenderer content={content} />
+                </CodeBlockErrorBoundary>
+            );
+
+        case 'markdown': {
+            const markdownContent = typeof content === 'string' ? content : String(content);
+            return (
+                <CodeBlockErrorBoundary type="markdown" fallbackCode={markdownContent}>
+                    <MarkdownRenderer artifactRunId={runId}>
+                        {markdownContent}
+                    </MarkdownRenderer>
+                </CodeBlockErrorBoundary>
+            );
+        }
+
+        case 'image':
+            return (
+                <CodeBlockErrorBoundary type="image" fallbackCode={path}>
+                    <ImageRenderer content={content} path={path} />
+                </CodeBlockErrorBoundary>
+            );
+
+        case 'code':
+        default:
+            return <CodeRenderer content={content} path={path} />;
+    }
+}