Introduce asset watch

.cursor/rules/code-style.mdc

@@ -81,13 +81,15 @@ const processUserData = (
 ```
 
 ## Comments
+
+Only use comments if they are necessary to explain tricky or non-obvious code. This should be a rare occurrence.
+
 ```typescript
-// ✅ Use short-form comments, NOT JSDoc blocks
 // ✅ Explain business logic and non-obvious intentions (WHY, not WHAT)
 // Apply 15% discount for premium users with orders > $100
 const discount = isPremiumUser && orderTotal > 100 ? 0.15 : 0;
 
-// TODO: Replace with proper authentication service
+// ✅ TODO: Replace with proper authentication service
 const isAuthenticated = localStorage.getItem('token') !== null;
 
 // ✅ Multi-line comments use multiple // lines (NOT /** */ blocks)
@@ -97,21 +99,6 @@ const calculateTotalPrice = (basePrice: number): number => {
   // Implementation
 };
 
-// ❌ AVOID obvious comments that just describe what code does
-// Bad: Get all inline fields dynamically
-const { inlineFieldMetadataItems } = useFieldListFieldMetadataItems({...});
-
-// Bad: Define standard fields in display order
-const standardFieldOrder = ['startsAt', 'endsAt', 'conferenceLink'];
-
-// Bad: Split fields into standard and custom
-const standardFields = standardFieldOrder.map(...)
-
-// ✅ GOOD: Only comment if explaining non-obvious business logic
-// Calendar events display standard fields first, then custom fields after participants
-// to maintain consistency with the legacy UI behavior
-const standardFields = standardFieldOrder.map(...)
-
 // ❌ AVOID JSDoc blocks - use short comments instead
 /**
  * This style is NOT preferred in this codebase

packages/create-twenty-app/src/utils/app-template.ts

@@ -131,11 +131,24 @@ const createDefaultFrontComponent = async ({
 }) => {
   const universalIdentifier = v4();
 
+  // Create assets directory and a sample logo
+  const assetsDir = join(appDirectory, 'assets');
+  await fs.ensureDir(assetsDir);
+
+  // Create a minimal 1x1 transparent PNG as a placeholder
+  const minimalPng = Buffer.from(
+    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
+    'base64',
+  );
+  await fs.writeFile(join(assetsDir, 'logo.png'), minimalPng);
+
   const content = `import { defineFrontComponent } from 'twenty-sdk';
+import logo from 'src/assets/logo.png';
 
 export const HelloWorld = () => {
   return (
     <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <img src={logo} alt="Logo" style={{ width: '32px', height: '32px' }} />
       <h1>Hello, World!</h1>
       <p>This is your first front component.</p>
     </div>

packages/twenty-sdk/src/cli/__tests__/apps/rich-app/__integration__/app-dev/manifest.expected.json

@@ -43,6 +43,13 @@
       "universalIdentifier": "h0h1h2h3-h4h5-4000-8000-000000000001"
     },
     {
+      "assets": [
+        {
+          "builtAssetChecksum": "[checksum]",
+          "builtAssetPath": "[asset-path]",
+          "sourceAssetPath": "src/assets/test-logo.png"
+        }
+      ],
       "builtComponentPath": "front-components/src/components/test.front-component.mjs",
       "builtComponentChecksum": "[checksum]",
       "componentName": "TestComponent",

packages/twenty-sdk/src/cli/__tests__/apps/rich-app/__integration__/app-dev/tests/front-components.tests.ts

@@ -21,5 +21,15 @@ export const defineFrontComponentsTests = (appPath: string): void => {
         'src/root.front-component.mjs.map',
       ]);
     });
+
+    it('should have built assets in separate assets directory', async () => {
+      const assetsDir = join(appPath, '.twenty/output/assets');
+      const files = await fs.readdir(assetsDir);
+      const sortedFiles = files.map((f) => f.toString()).sort();
+
+      // Verify assets folder contains the expected asset (with hash in filename)
+      expect(sortedFiles.length).toBeGreaterThanOrEqual(1);
+      expect(sortedFiles.some((f) => f.includes('test-logo'))).toBe(true);
+    });
   });
 };

packages/twenty-sdk/src/cli/__tests__/apps/rich-app/__integration__/app-dev/tests/manifest.tests.ts

@@ -15,7 +15,7 @@
 
       const { sources: _sources, ...sanitizedManifest } = manifest;
 
       expect(normalizeManifestForComparison(sanitizedManifest)).toEqual(
         normalizeManifestForComparison(expectedManifest),
       );
 
@@ -48,5 +48,24 @@
       expect(manifest?.roles).toHaveLength(2);
       expect(manifest?.objectExtensions).toHaveLength(1);
     });
+
+    it('should include assets for front components with static imports', async () => {
+      const manifest = await fs.readJson(manifestOutputPath);
+
+      // Find the test-component which imports a PNG asset
+      const testComponent = manifest.frontComponents?.find(
+        (component: { name: string }) => component.name === 'test-component',
+      );
+
+      expect(testComponent).toBeDefined();
+      expect(testComponent.assets).toBeDefined();
+      expect(testComponent.assets).toHaveLength(1);
+
+      const asset = testComponent.assets[0];
+      expect(asset.sourceAssetPath).toBe('src/assets/test-logo.png');
+      expect(asset.builtAssetPath).toMatch(/^assets\/.*\.png$/);
+      expect(asset.builtAssetChecksum).toBeDefined();
+      expect(typeof asset.builtAssetChecksum).toBe('string');
+    });
   });
 };

packages/twenty-sdk/src/cli/__tests__/apps/rich-app/src/components/test.front-component.tsx

@@ -1,9 +1,11 @@
 import { defineFrontComponent } from '@/application/front-components/define-front-component';
+import testLogo from '../assets/test-logo.png';
 
 export const TestComponent = () => {
   return (
     <div style={{ padding: '20px' }}>
       <h1>Test Component</h1>
+      <img src={testLogo} alt="Test Logo" />
     </div>
   );
 };

packages/twenty-sdk/src/cli/__tests__/integration/utils/normalize-manifest.util.ts

@@ -1,6 +1,6 @@
 import { type ApplicationManifest } from 'twenty-shared/application';
 
-// Replace dynamic checksum values with a placeholder for consistent comparisons
+// Replace dynamic checksum values and asset paths with placeholders for consistent comparisons
 export const normalizeManifestForComparison = <
   T extends Partial<ApplicationManifest>,
 >(
@@ -16,5 +16,11 @@ export const normalizeManifestForComparison = <
     builtComponentChecksum: component.builtComponentChecksum
       ? '[checksum]'
       : null,
+    assets: component.assets?.map((asset) => ({
+      ...asset,
+      builtAssetChecksum: asset.builtAssetChecksum ? '[checksum]' : null,
+      // Asset paths include a hash, so normalize them
+      builtAssetPath: asset.builtAssetPath ? '[asset-path]' : null,
+    })),
   })),
 });

packages/twenty-sdk/src/cli/commands/app/app-build.ts

@@ -1,9 +1,11 @@
 import { type ApiResponse } from '@/cli/utilities/api/types/api-response.types';
+import { AssetsWatcher, type BuiltAsset } from '@/cli/utilities/build/assets/assets-watcher';
 import { createLogger } from '@/cli/utilities/build/common/logger';
 import { FrontComponentsWatcher } from '@/cli/utilities/build/front-components/front-component-watcher';
 import { FunctionsWatcher } from '@/cli/utilities/build/functions/function-watcher';
 import {
   runManifestBuild,
+  updateManifestAssets,
   updateManifestChecksum,
   type ManifestBuildResult,
 } from '@/cli/utilities/build/manifest/manifest-build';
@@ -18,6 +20,7 @@ export type AppBuildOptions = {
 };
 
 export class AppBuildCommand {
+  private assetsBuilder: AssetsWatcher | null = null;
   private functionsBuilder: FunctionsWatcher | null = null;
   private frontComponentsBuilder: FrontComponentsWatcher | null = null;
 
@@ -48,6 +51,8 @@ export class AppBuildCommand {
       return null;
     }
 
+    // Build assets first so they're available for functions and front components
+    await this.buildAssets();
     await this.buildFunctions(buildResult);
     await this.buildFrontComponents(buildResult);
     await writeManifestToOutput(this.appPath, buildResult.manifest);
@@ -56,19 +61,41 @@ export class AppBuildCommand {
     return buildResult;
   }
 
+  private async buildAssets(): Promise<void> {
+    this.assetsBuilder = new AssetsWatcher({
+      appPath: this.appPath,
+      watch: false,
+    });
+
+    await this.assetsBuilder.start();
+  }
+
   private async buildFunctions(buildResult: ManifestBuildResult): Promise<void> {
+    const assetsWatcher = this.assetsBuilder;
+
     this.functionsBuilder = new FunctionsWatcher({
       appPath: this.appPath,
       sourcePaths: buildResult.filePaths.functions,
       watch: false,
-      onFileBuilt: (builtPath, checksum) => {
+      onFileBuilt: (builtPath: string, checksum: string, sourceAssetPaths: string[]) => {
         if (buildResult.manifest) {
-          const updatedManifest = updateManifestChecksum({
+          let updatedManifest = updateManifestChecksum({
             manifest: buildResult.manifest,
             entityType: 'function',
             builtPath,
             checksum,
           });
+
+          if (updatedManifest && sourceAssetPaths.length > 0 && assetsWatcher) {
+            const builtAssets = this.resolveBuiltAssets(assetsWatcher, sourceAssetPaths);
+            updatedManifest = updateManifestAssets({
+              manifest: updatedManifest,
+              entityType: 'function',
+              builtPath,
+              assets: builtAssets,
+            });
+          }
+
           if (updatedManifest) {
             buildResult.manifest = updatedManifest;
           }
@@ -80,18 +107,31 @@ export class AppBuildCommand {
   }
 
   private async buildFrontComponents(buildResult: ManifestBuildResult): Promise<void> {
+    const assetsWatcher = this.assetsBuilder;
+
     this.frontComponentsBuilder = new FrontComponentsWatcher({
       appPath: this.appPath,
       sourcePaths: buildResult.filePaths.frontComponents,
       watch: false,
-      onFileBuilt: (builtPath, checksum) => {
+      onFileBuilt: (builtPath: string, checksum: string, sourceAssetPaths: string[]) => {
         if (buildResult.manifest) {
-          const updatedManifest = updateManifestChecksum({
+          let updatedManifest = updateManifestChecksum({
             manifest: buildResult.manifest,
             entityType: 'frontComponent',
             builtPath,
             checksum,
           });
+
+          if (updatedManifest && sourceAssetPaths.length > 0 && assetsWatcher) {
+            const builtAssets = this.resolveBuiltAssets(assetsWatcher, sourceAssetPaths);
+            updatedManifest = updateManifestAssets({
+              manifest: updatedManifest,
+              entityType: 'frontComponent',
+              builtPath,
+              assets: builtAssets,
+            });
+          }
+
           if (updatedManifest) {
             buildResult.manifest = updatedManifest;
           }
@@ -102,7 +142,21 @@ export class AppBuildCommand {
     await this.frontComponentsBuilder.start();
   }
 
+  private resolveBuiltAssets(assetsWatcher: AssetsWatcher, sourceAssetPaths: string[]): BuiltAsset[] {
+    const builtAssets: BuiltAsset[] = [];
+
+    for (const sourceAssetPath of sourceAssetPaths) {
+      const builtAsset = assetsWatcher.getBuiltAsset(sourceAssetPath);
+      if (builtAsset) {
+        builtAssets.push(builtAsset);
+      }
+    }
+
+    return builtAssets;
+  }
+
   private async cleanup(): Promise<void> {
+    await this.assetsBuilder?.close();
     await this.functionsBuilder?.close();
     await this.frontComponentsBuilder?.close();
     await manifestExtractFromFileServer.closeViteServer();