Introduce asset watch

[charlesBochet]

No description provided.

[github-actions]

TODOs/FIXMEs:

• // TODO: Replace with proper authentication service: .cursor/rules/code-style.mdc

Generated by 🚫 dangerJS against 452a6a5

[cubic-dev-ai]

1 issue found across 17 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/twenty-sdk/src/cli/commands/app/app-dev.ts">

<violation number="1" location="packages/twenty-sdk/src/cli/commands/app/app-dev.ts:210">
P2: When a component no longer has static assets, `assets` is `[]`, but this guard skips `updateManifestAssets`, leaving stale assets in the manifest. That can cause removed assets to remain in output and be uploaded. Update assets even when the list is empty so the manifest clears removed assets.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: When a component no longer has static assets, assets is [], but this guard skips updateManifestAssets, leaving stale assets in the manifest. That can cause removed assets to remain in output and be uploaded. Update assets even when the list is empty so the manifest clears removed assets.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-sdk/src/cli/commands/app/app-dev.ts, line 210:

<comment>When a component no longer has static assets, `assets` is `[]`, but this guard skips `updateManifestAssets`, leaving stale assets in the manifest. That can cause removed assets to remain in output and be uploaded. Update assets even when the list is empty so the manifest clears removed assets.</comment>

<file context>
@@ -180,6 +185,43 @@ export class AppDevCommand {
+        checksum,
+      });
+
+      if (updatedManifest && assets.length > 0) {
+        updatedManifest = updateManifestAssets({
+          manifest: updatedManifest,
</file context>

Suggested change

	if (updatedManifest && assets.length > 0) {
	updatedManifest = updateManifestAssets({
	manifest: updatedManifest,
	builtPath,
	assets,
	});
	if (updatedManifest) {
	updatedManifest = updateManifestAssets({
	manifest: updatedManifest,
	builtPath,
	assets,
	}) ?? updatedManifest;
	}

[greptile-apps]

Greptile Summary

This PR adds asset watching functionality to the Twenty SDK CLI, enabling front components to bundle and track static assets (images, icons, etc.) during development and build processes.

Key Changes:

• Extended FrontComponentsWatcher to extract and track static assets (PNG, JPG, SVG, etc.) from esbuild metafiles during compilation
• Added BuiltAsset type to track source paths, built paths, and checksums for each asset
• Integrated asset metadata into the application manifest via new updateManifestAssets function
• Updated both dev and build commands to handle assets alongside component code
• Added comprehensive test coverage for asset handling, including manifest validation and file output verification
• Updated app template to include a sample asset in the default front component

Technical Implementation:

• Uses esbuild's file loader with configurable asset extensions
• Extracts asset information from esbuild metafile by mapping inputs to outputs
• Computes MD5 checksums for asset files to enable change detection
• Assets are output to assets/[name]-[hash] directory with content-based hashing

Confidence Score: 4/5

• This PR is safe to merge with one minor logical issue to address
• The implementation is well-structured with comprehensive test coverage. Asset extraction logic is sound, manifest updates are properly integrated, and the feature is fully tested. One logical issue exists in the asset path matching logic that uses .includes() instead of .endsWith(), which could theoretically cause false positives but is unlikely to cause issues in practice given the esbuild asset naming convention.
• Pay close attention to packages/twenty-sdk/src/cli/utilities/build/front-components/front-component-watcher.ts - the findAssetOutputPath method has a logic issue that should be corrected

Important Files Changed

Filename	Overview
packages/twenty-sdk/src/cli/utilities/build/front-components/front-component-watcher.ts	Added static asset handling to front component build process with proper extraction and checksum tracking
packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts	Added updateManifestAssets function to manage asset metadata in application manifest
packages/twenty-sdk/src/cli/commands/app/app-dev.ts	Integrated asset tracking into dev mode with new updateFrontComponentFileStatus method
packages/twenty-sdk/src/cli/utilities/build/common/esbuild-result-processor.ts	Added processEsbuildResultWithAssets function to handle esbuild results that include asset files
packages/twenty-shared/src/application/frontComponentManifestType.ts	Added FrontComponentAsset type and assets field to FrontComponentManifest
packages/twenty-sdk/src/cli/commands/app/app-build.ts	Updated build command to handle assets during front component compilation

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant AppDev as AppDevCommand
    participant ManifestW as ManifestWatcher
    participant FrontW as FrontComponentsWatcher
    participant ESBuild as esbuild
    participant Processor as esbuild-result-processor
    participant ManifestB as manifest-build

    Dev->>AppDev: Execute app dev command
    AppDev->>ManifestB: runManifestBuild(appPath)
    ManifestB-->>AppDev: Initial manifest + file paths
    
    AppDev->>AppDev: Initialize file upload status
    AppDev->>ManifestW: Start manifest watcher
    AppDev->>FrontW: Start front components watcher

    Note over FrontW: Configure esbuild with asset loaders
    FrontW->>ESBuild: Create build context with file loader for static assets
    ESBuild-->>FrontW: Build context ready
    
    FrontW->>ESBuild: Initial rebuild
    ESBuild->>ESBuild: Bundle components + copy assets
    ESBuild-->>FrontW: Build result with metafile
    
    FrontW->>FrontW: extractAssetsFromMetafile(result)
    Note over FrontW: Parse metafile to find<br/>asset inputs and outputs
    FrontW->>FrontW: Calculate asset checksums
    FrontW-->>FrontW: Assets map created
    
    FrontW->>Processor: processEsbuildResultWithAssets
    Processor->>Processor: Check if checksums changed
    Processor-->>FrontW: hasChanges, invoke callbacks
    
    FrontW->>AppDev: onFileBuilt(builtPath, checksum, assets)
    AppDev->>AppDev: updateFrontComponentFileStatus
    AppDev->>ManifestB: updateManifestChecksum
    AppDev->>ManifestB: updateManifestAssets
    ManifestB-->>AppDev: Updated manifest
    AppDev->>AppDev: Write manifest to output
    
    Note over FrontW: Enter watch mode
    FrontW->>ESBuild: Enable watch mode
    
    Dev->>Dev: Modify component or asset
    ESBuild->>FrontW: Detect change, trigger rebuild
    FrontW->>FrontW: Extract assets from new build
    FrontW->>Processor: Process results
    Processor->>AppDev: Notify via onFileBuilt
    AppDev->>AppDev: Update manifest with new checksums

Loading

[greptile-apps]

Additional Comments (1)

1. packages/twenty-sdk/src/cli/utilities/build/front-components/front-component-watcher.ts, line 268-271 (link)

   logic: .includes() check could match false positives if the extension appears anywhere in the path string

_{12 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[prastoin]

record's arg

[prastoin]

mutation

[prastoin]

will also have to check the file encoding